feat(webkit): render flow connectors port-to-port and add a terminal node - #845
Open
gabriel-lisboa-azion wants to merge 2 commits into
Open
feat(webkit): render flow connectors port-to-port and add a terminal node#845gabriel-lisboa-azion wants to merge 2 commits into
gabriel-lisboa-azion wants to merge 2 commits into
Conversation
…node Connectors now terminate on a visible attachment point instead of a bare edge. A styled flow-node renders an 8px square connector port just outside each of its edges, and a flow-anchor renders one outside the edge it attaches to; the arrowhead polygon is gone, since the port is the endpoint treatment. Ports sit fully clear of the box so neither the node surface nor its focus ring crops them. A port is only drawn where a connector actually attaches: connectors.ts stamps data-flow-leading / data-flow-trailing on the outer children as it measures, and the root hides those two edges, so the chain opens and closes on a node rather than on a stub. An unstyled node renders no ports at all — its slot content owns its appearance. New flow-node prop `terminal`: the node receives an incoming connector but originates none, so the chain continues through its siblings while that branch ends there. That is the shape a leaf needs — an attached resource hanging off the chain rather than passing it on. Connector stroke and port fill move to --accent, and the node gains --shadow-xs.
gabriel-lisboa-azion
force-pushed
the
feat/flow-connector-ports
branch
from
August 3, 2026 18:44
8f28fd2 to
374598f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Flow connectors now terminate on a visible attachment point instead of a bare node edge, and
flow-nodegains aterminalprop for leaf steps.Connector ports. A styled
flow-noderenders an 8px square port just outside each of its edges; aflow-anchorrenders one outside the edge it attaches to. The arrowhead polygon is removed — the port is the endpoint treatment. Ports sit fully clear of the box (offset back over the border, then translated out), so neither the node's surface nor itsfocus-visiblering can crop them.Ports only where a connector attaches.
connectors.tsstampsdata-flow-leading/data-flow-trailingon the outer children while it measures, and the root hides the ports on those two outer edges — so the chain opens and closes on a node rather than on a stub. Anunstylednode renders no ports at all (its slot content owns its appearance); put aflow-anchorinside it to place ports on the parts a connector should touch.terminal(newflow-nodeprop). The node receives an incoming connector but originates none, so the chain continues through its siblings while that branch ends there — the shape a leaf needs (an attached resource that hangs off the chain rather than passing it on). A terminal node renders no outgoing port, including one a nestedflow-anchorwould draw.Tokens. Connector stroke and port fill move to
--accent; the port border is--border-mutedand its shape--radius-sm; a styled node gains--shadow-xs. The spec's Figma frame is now filled in (Illustrations129:2056) as the source for the port.Notes
FlowPath.arrow/FlowPointare removed fromconnectors.ts, but that module is internal — it is not inpackages/webkit/package.json#exportsand is imported only byflow.vue. The public prop/event/slot surface only grows (terminal).spec_version2,.specs/flow.mdchecksum refreshed;catalog.jsonregenerated (flow purpose only).flow.test.tsgrows to 35 passing cases, covering port presence per edge,aria-hiddenon ports, no ports onunstyled, and connector counts for terminal branches (2 in + 1 out vs 2 in + 2 out).test(storybook)commit.