canvas — wyrd.component.graph-viewer

GraphViewer

Read-only pan and zoom graph canvas for typed, positioned graph documents.

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

catalog/contracts/graph-viewer.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: GraphViewer  tag: wyrd-graph-viewer  package: wyrd.component.graph-viewer  title: Graph Viewer  summary: Read-only pan and zoom graph canvas for typed, positioned graph documents.relationships:  related-to:    - graph-components    - canvas-flutter-viewerclassification:  category: canvas  composition: collection  interactive: truetarget-strategy:  react: required  flutter: 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: node-select      payload:        node-id:          kind: string      bubbles: true      composed: true      cancelable: false      summary: Emitted when the selected node changes.    - name: node-activate      payload:        node-id:          kind: string      bubbles: true      composed: true      cancelable: false      summary: Emitted when the host should drill into or expand a node.  states:    - name: default      source: platform      summary: Graph is visible and pannable.    - name: selected      source: property      summary: One node is selected.  parts:    - name: field      summary: Pannable graph field.    - name: node      summary: Repeated rendered node.    - name: edge      summary: Drawn graph edge.    - name: edge-label      summary: Optional edge label pill.  tokens:    field:      background: color.background      padding: 240px    grid:      color: color.disabled      stroke-width: 1px      step: 80px    edge:      color: color.on-surface-variant      stroke-width: 1.6px      arrow-radius: 3.5px    edge-label:      background: color.surface      foreground: color.on-surface      text: typography.label-md      padding-x: spacing.xs      padding-y: spacing.xs      radius: rounded.full      max-width: 240px    node:      background: color.surface      foreground: color.on-surface      muted-foreground: color.on-surface-variant      selected-background: color.secondary      border-color: color.outline      selected-border-color: color.primary      border-width: 1px      selected-border-width: 2px      shadow: shadow.md      radius: rounded.md      padding: spacing.md      vertical-gap: spacing.sm    compound-state:      width: 214px      min-height: 84px      title-text: typography.label-md      body-text: typography.body-md    state:      width: 184px      min-height: 72px      title-text: typography.label-md      body-text: typography.body-md    event:      width: 150px      min-height: 60px      title-text: typography.label-md      body-text: typography.body-mdmessages: []obligations:  accessibility:    role: application    name: Host-provided accessible graph label.    keyboard: []    semantics:      - Exposes mounted interactive nodes as tappable/selectable elements.      - Preserves read-only graph semantics; structural editing is not available.  behavior:    model: stateless    interactions:      - Pan and zoom move the viewport without mutating the graph document.      - Tap selects a node.      - Compound nodes activate on tap.      - Leaf nodes with an activation affordance activate on double tap.    hostEffects:      - Dispatch node-select.      - Dispatch node-activate.  conditions:    - rtl    - density-compact    - text-expansion  sdui:    status: blocked    serializableProperties: []    serializableSlots: []    eventBindings: []    notes: Graph documents 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
`node-select`	`node-id`	Emitted when the selected node changes.
`node-activate`	`node-id`	Emitted when the host should drill into or expand a node.

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.padding`	`240px`
`grid.color`	`color.disabled`
`grid.stroke-width`	`1px`
`grid.step`	`80px`
`edge.color`	`color.on-surface-variant`
`edge.stroke-width`	`1.6px`
`edge.arrow-radius`	`3.5px`
`edge-label.background`	`color.surface`
`edge-label.foreground`	`color.on-surface`
`edge-label.text`	`typography.label-md`
`edge-label.padding-x`	`spacing.xs`
`edge-label.padding-y`	`spacing.xs`
`edge-label.radius`	`rounded.full`
`edge-label.max-width`	`240px`
`node.background`	`color.surface`
`node.foreground`	`color.on-surface`
`node.muted-foreground`	`color.on-surface-variant`
`node.selected-background`	`color.secondary`
`node.border-color`	`color.outline`
`node.selected-border-color`	`color.primary`
`node.border-width`	`1px`
`node.selected-border-width`	`2px`
`node.shadow`	`shadow.md`
`node.radius`	`rounded.md`
`node.padding`	`spacing.md`
`node.vertical-gap`	`spacing.sm`
`compound-state.width`	`214px`
`compound-state.min-height`	`84px`
`compound-state.title-text`	`typography.label-md`
`compound-state.body-text`	`typography.body-md`
`state.width`	`184px`
`state.min-height`	`72px`
`state.title-text`	`typography.label-md`
`state.body-text`	`typography.body-md`
`event.width`	`150px`
`event.min-height`	`60px`
`event.title-text`	`typography.label-md`
`event.body-text`	`typography.body-md`

States

State	Source	Summary
`default`	platform	Graph is visible and pannable.
`selected`	property	One node is selected.

SDUI

Status: blocked. Graph documents 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