canvas — wyrd.component.flow-editor

FlowEditor

React-only structural graph editor for typed, positioned flow documents.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/flow-editor.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: FlowEditor  tag: wyrd-flow-editor  package: wyrd.component.flow-editor  title: Flow Editor  summary: React-only structural graph editor for typed, positioned flow documents.relationships:  related-to:    - graph-components    - wyrd-flow-editorclassification:  category: canvas  composition: collection  interactive: true# GOVERNANCE: The graph-components-strategy target-strategy ruling says# WyrdFlowEditor is react required, flutter none. Unlike# WyrdGraphViewer, this contract can state that truthfully because the React# editor exists and no other target is planned.target-strategy:  react: requiredsurface:  properties: []  slots:    - name: renderer      keyed: true      key-domain: node-type      required: true      cardinality: exactly-one      accepts:        - component      summary: One renderer per node-type key; unknown keys fall back to a built-in generic node.  events:    - name: graph-change      payload:        graph:          kind: object          fields:            nodes:              kind: array              item:                kind: object                fields:                  id:                    kind: string                  type:                    kind: string            edges:              kind: array              item:                kind: object                fields:                  id:                    kind: string                  type:                    kind: string        changes:          kind: array          item:            kind: object            fields:              kind:                kind: string      bubbles: false      composed: false      cancelable: false      summary: Emitted after structural node or edge changes.    - name: selection-change      payload:        selected-node-ids:          kind: array          item:            kind: string        selected-edge-ids:          kind: array          item:            kind: string      bubbles: false      composed: false      cancelable: false      summary: Emitted when selected graph items change.  states:    - name: default      source: platform      summary: Graph is visible and editable.    - name: selected      source: property      summary: One or more graph items are selected.    - name: connecting      source: interaction      summary: A pointer drag is creating a candidate edge.  parts:    - name: field      summary: Pannable and zoomable graph editing field.    - name: panel      summary: Editor chrome surfaces such as controls and minimap.    - name: node      summary: Repeated rendered node shell.    - name: handle      summary: Named port connection handle.    - name: edge      summary: Drawn graph edge.    - name: edge-label      summary: Optional edge label pill.  tokens:    field:      background: color.background      foreground: color.on-surface      muted-foreground: color.on-surface-variant      min-block-size: 520px      preferred-block-size: 720px      radius: rounded.md      border-width: 1px    panel:      background: color.surface      foreground: color.on-surface      border-color: color.outline      border-width: 1px      radius: rounded.md      pill-radius: rounded.full      shadow: shadow.sm    grid:      dot-color: color.outline      gap: 24px      dot-size: 1.2px    selection:      color: color.primary      width: 2px    node:      background: color.surface      foreground: color.on-surface      muted-foreground: color.on-surface-variant      border-color: color.outline      selected-color: color.primary      border-width: 1px      radius: rounded.md      shadow: shadow.sm      padding: spacing.md      compound-affordance-size: 0.65rem      compound-affordance-border-width: 2px    handle:      background: color.primary      background-hover: color.primary-hover      border-color: color.surface      border-width: 2px      ring-width: 1px      size: 0.75rem    edge:      color: color.outline      selected-color: color.primary      stroke-width: 2px      selected-stroke-width: 2.5px      connection-stroke-width: 2px      connection-radius: 12px      interaction-width: 18px      minimap-stroke-width: 1.2px    edge-label:      background: color.surface      foreground: color.on-surface      border-color: color.outline      border-width: 1px      radius: rounded.full      font-family: inherit      font-size: 0.75rem      font-weight: "600"      line-height: "1.25"    controls:      radius: rounded.sm      item-min-inline-size: 2.25rem      item-block-size: 2rem    minimap:      inline-size: 9rem      radius: rounded.md      padding: 0.375rem    graph-node:      gap: 0.375rem      kind-font-size: 0.625rem      kind-font-weight: "700"      title-font-weight: "700"      title-line-height: "1.2"      compound-state-min-block-size: 84px      compound-title-font-size: 0.875rem      compound-title-font-weight: "800"      state-min-block-size: 72px      state-title-font-size: 0.8125rem      event-min-block-size: 60px      event-title-font-size: 0.75rem      title-meta-font-size: 0.75rem      title-meta-font-weight: "600"      description-font-size: 0.6875rem      description-line-height: "1.25"      event-description-font-size: 0.625rem      event-description-line-height: "1.2"      badge-font-size: 0.625rem      badge-font-weight: "650"messages: []obligations:  accessibility:    role: application    name: Host-provided accessible editor label.    keyboard:      - Delete or Backspace removes selected graph items.      - Shift enables selection drag.      - Meta or Control enables multi-selection.    semantics:      - Exposes rendered nodes as grouped graph items.      - Preserves named-port labels on connection handles.      - The ReactFlow attribution remains visible by the third-party-exception ruling.  behavior:    model: collection    interactions:      - Pan and zoom move the editor viewport without mutating the graph document.      - Dragging a node emits a node-move graph change.      - Dragging from one named port to another valid named port emits an edge-create graph change.      - Deleting selected nodes or edges emits graph-change events for the removed items.    hostEffects:      - Dispatch graph-change.      - Dispatch selection-change.  conditions:    - rtl    - reduced-motion    - density-compact    - text-expansion  sdui:    status: blocked    serializableProperties: []    serializableSlots: []    eventBindings: []    notes: Graph documents and node type definitions are serializable through the graph contract; renderer registries are modeled as keyed component slots and are not serializable as SDUI data.examples:  - name: menu-statechart    state: default    properties:      graph:        nodes:          - id: menu.closed            type: state            position:              x: 40              y: 60            data:              label: closed              description: Initial leaf. OPEN enters open.          - id: event.open            type: event            position:              x: 300              y: 20            interactive: false            data:              label: OPEN              description: "guard: disabled == false"          - id: event.close            type: event            position:              x: 300              y: 160            interactive: false            data:              label: CLOSE / ESCAPE              description: Dismissal returns closed.          - id: menu.open            type: state            position:              x: 520              y: 60            data:              label: open              description: CLOSE and ESCAPE return closed.        edges:          - id: menu.closed:outgoing->event.open:incoming            type: transition            from:              node: menu.closed              port: outgoing            to:              node: event.open              port: incoming            data:              label: OPEN          - id: event.open:outgoing->menu.open:incoming            type: transition            from:              node: event.open              port: outgoing            to:              node: menu.open              port: incoming          - id: menu.open:outgoing->event.close:incoming            type: transition            from:              node: menu.open              port: outgoing            to:              node: event.close              port: incoming            data:              label: CLOSE          - id: event.close:outgoing->menu.closed:incoming            type: transition            from:              node: event.close              port: outgoing            to:              node: menu.closed              port: incoming      node-types:        - type: state          label: Behavior state          size:            width: 184            minHeight: 72          ports:            - name: incoming              label: Incoming transitions              direction: input              side: left            - name: outgoing              label: Outgoing transitions              direction: output              side: right        - type: event          label: Transition event          size:            width: 150            minHeight: 60          ports:            - name: incoming              label: Incoming transitions              direction: input              side: left            - name: outgoing              label: Outgoing transitions              direction: output              side: right    slots:      renderer: state | event

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

menu-statechart state: default

Usage

React example unavailable The generated documentation data does not publish verified React source for this example.

View target-neutral contract example

name: menu-statechartproperties:  graph:    nodes:      - id: menu.closed        type: state        position:          x: 40          y: 60        data:          label: closed          description: Initial leaf. OPEN enters open.      - id: event.open        type: event        position:          x: 300          y: 20        interactive: false        data:          label: OPEN          description: "guard: disabled == false"      - id: event.close        type: event        position:          x: 300          y: 160        interactive: false        data:          label: CLOSE / ESCAPE          description: Dismissal returns closed.      - id: menu.open        type: state        position:          x: 520          y: 60        data:          label: open          description: CLOSE and ESCAPE return closed.    edges:      - id: menu.closed:outgoing->event.open:incoming        type: transition        from:          node: menu.closed          port: outgoing        to:          node: event.open          port: incoming        data:          label: OPEN      - id: event.open:outgoing->menu.open:incoming        type: transition        from:          node: event.open          port: outgoing        to:          node: menu.open          port: incoming      - id: menu.open:outgoing->event.close:incoming        type: transition        from:          node: menu.open          port: outgoing        to:          node: event.close          port: incoming        data:          label: CLOSE      - id: event.close:outgoing->menu.closed:incoming        type: transition        from:          node: event.close          port: outgoing        to:          node: menu.closed          port: incoming  node-types:    - type: state      label: Behavior state      size:        width: 184        minHeight: 72      ports:        - name: incoming          label: Incoming transitions          direction: input          side: left        - name: outgoing          label: Outgoing transitions          direction: output          side: right    - type: event      label: Transition event      size:        width: 150        minHeight: 60      ports:        - name: incoming          label: Incoming transitions          direction: input          side: left        - name: outgoing          label: Outgoing transitions          direction: output          side: rightslots:  renderer: state | event

Slots & events

Slot	Cardinality	Accepts	Summary
`renderer`	exactly-one	`component`	One renderer per node-type key; unknown keys fall back to a built-in generic node.

Event	Payload	Summary
`graph-change`	`graph, changes`	Emitted after structural node or edge changes.
`selection-change`	`selected-node-ids, selected-edge-ids`	Emitted when selected graph items change.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`field.background`	`color.background`
`field.foreground`	`color.on-surface`
`field.muted-foreground`	`color.on-surface-variant`
`field.min-block-size`	`520px`
`field.preferred-block-size`	`720px`
`field.radius`	`rounded.md`
`field.border-width`	`1px`
`panel.background`	`color.surface`
`panel.foreground`	`color.on-surface`
`panel.border-color`	`color.outline`
`panel.border-width`	`1px`
`panel.radius`	`rounded.md`
`panel.pill-radius`	`rounded.full`
`panel.shadow`	`shadow.sm`
`grid.dot-color`	`color.outline`
`grid.gap`	`24px`
`grid.dot-size`	`1.2px`
`selection.color`	`color.primary`
`selection.width`	`2px`
`node.background`	`color.surface`
`node.foreground`	`color.on-surface`
`node.muted-foreground`	`color.on-surface-variant`
`node.border-color`	`color.outline`
`node.selected-color`	`color.primary`
`node.border-width`	`1px`
`node.radius`	`rounded.md`
`node.shadow`	`shadow.sm`
`node.padding`	`spacing.md`
`node.compound-affordance-size`	`0.65rem`
`node.compound-affordance-border-width`	`2px`
`handle.background`	`color.primary`
`handle.background-hover`	`color.primary-hover`
`handle.border-color`	`color.surface`
`handle.border-width`	`2px`
`handle.ring-width`	`1px`
`handle.size`	`0.75rem`
`edge.color`	`color.outline`
`edge.selected-color`	`color.primary`
`edge.stroke-width`	`2px`
`edge.selected-stroke-width`	`2.5px`
`edge.connection-stroke-width`	`2px`
`edge.connection-radius`	`12px`
`edge.interaction-width`	`18px`
`edge.minimap-stroke-width`	`1.2px`
`edge-label.background`	`color.surface`
`edge-label.foreground`	`color.on-surface`
`edge-label.border-color`	`color.outline`
`edge-label.border-width`	`1px`
`edge-label.radius`	`rounded.full`
`edge-label.font-family`	`inherit`
`edge-label.font-size`	`0.75rem`
`edge-label.font-weight`	`600`
`edge-label.line-height`	`1.25`
`controls.radius`	`rounded.sm`
`controls.item-min-inline-size`	`2.25rem`
`controls.item-block-size`	`2rem`
`minimap.inline-size`	`9rem`
`minimap.radius`	`rounded.md`
`minimap.padding`	`0.375rem`
`graph-node.gap`	`0.375rem`
`graph-node.kind-font-size`	`0.625rem`
`graph-node.kind-font-weight`	`700`
`graph-node.title-font-weight`	`700`
`graph-node.title-line-height`	`1.2`
`graph-node.compound-state-min-block-size`	`84px`
`graph-node.compound-title-font-size`	`0.875rem`
`graph-node.compound-title-font-weight`	`800`
`graph-node.state-min-block-size`	`72px`
`graph-node.state-title-font-size`	`0.8125rem`
`graph-node.event-min-block-size`	`60px`
`graph-node.event-title-font-size`	`0.75rem`
`graph-node.title-meta-font-size`	`0.75rem`
`graph-node.title-meta-font-weight`	`600`
`graph-node.description-font-size`	`0.6875rem`
`graph-node.description-line-height`	`1.25`
`graph-node.event-description-font-size`	`0.625rem`
`graph-node.event-description-line-height`	`1.2`
`graph-node.badge-font-size`	`0.625rem`
`graph-node.badge-font-weight`	`650`

States

State	Source	Summary
`default`	platform	Graph is visible and editable.
`selected`	property	One or more graph items are selected.
`connecting`	interaction	A pointer drag is creating a candidate edge.

SDUI

Status: blocked. Graph documents and node type definitions are serializable through the graph contract; renderer registries are modeled as keyed component slots and are not serializable as SDUI data.

Serializable	Members
Properties	`—`
Slots	`—`
Events	`—`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Slots & events

Tokens

States

Accessibility

SDUI