create-substrate 0.1.0

package/skills/substrate-interaction/SKILL.md

@@ -0,0 +1,286 @@
+---
+name: substrate-interaction
+description: "Cross-cutting interaction patterns for Substrate: selection, undo/redo, clipboard, keyboard shortcuts, history controls, layer lists, and tree lists. Use when wiring up user interaction flows that span multiple components. Triggers on: selection, undo, redo, clipboard, copy, paste, keyboard shortcut, history, layer list, tree list, drag reorder, undo stack."
+user-invocable: true
+---
+
+# Substrate interaction
+
+Interaction patterns wire together hooks, utilities, and components to create cohesive editing flows – selection, undo/redo, clipboard, keyboard shortcuts, and structural navigation (layers/trees).
+
+## When to use this skill
+
+Use the interaction skill when you need to:
+
+- Wire up undo/redo across a surface
+- Add clipboard (copy/cut/paste) support
+- Register and manage keyboard shortcuts
+- Build a layer list or tree list with selection and reordering
+- Connect HistoryControls to an undo stack
+
+For spatial interaction (pan, zoom, snap), see **substrate-canvas**.
+For the controls that display properties, see **substrate-controls**.
+For notifications and command palette, see **substrate-feedback**.
+
+---
+
+## Hooks
+
+### useUndoable
+
+`registry/substrate/hooks/use-undoable.ts`
+
+Lightweight undo/redo stack using refs for performance. Stores snapshots, not diffs.
+
+**Returns**: `pushSnapshot`, `undo`, `redo`, `canUndo`, `canRedo`, `undoCount`, `redoCount`, `clear`
+
+**Pattern**: Call `pushSnapshot(currentState)` *before* mutating. Call `undo()` / `redo()` to get the previous/next state, then apply it.
+
+```ts
+const { pushSnapshot, undo, redo, canUndo, canRedo } = useUndoable<State>({ maxHistory: 100 })
+
+function handleMove(id: string, x: number, y: number) {
+  pushSnapshot(state)
+  setState(prev => updateElement(prev, id, { x, y }))
+}
+```
+
+**Connects to**: `HistoryControls` component, `NumberInput.onStart` (push snapshot before scrub), `createKeyboardShortcuts` (⌘Z / ⌘⇧Z).
+
+---
+
+### useClipboard
+
+`registry/substrate/hooks/use-clipboard.ts`
+
+Copy/cut/paste with ⌘C/⌘X/⌘V keyboard listeners. Writes to system clipboard where available, falls back to internal ref.
+
+**Returns**: `copy`, `cut`, `paste`
+
+**Pattern**: Provide `onCopy` (returns items to copy), `onPaste` (receives items), and optionally `onCut`.
+
+```ts
+useClipboard({
+  onCopy: () => selectedElements.map(el => ({ ...el })),
+  onPaste: (items) => {
+    pushSnapshot(state)
+    addElements(items.map(offset))
+  },
+  onCut: () => {
+    const items = selectedElements.map(el => ({ ...el }))
+    pushSnapshot(state)
+    removeSelected()
+    return items
+  },
+})
+```
+
+**Auto-skips**: Input, textarea, and contentEditable elements.
+
+---
+
+### useSelection
+
+`registry/substrate/hooks/use-selection.ts`
+
+Multi-select with modifier keys. See **substrate-canvas** for spatial selection use.
+
+**Also useful for**: Layer lists and tree lists where items are selected by clicking rows.
+
+---
+
+### useDragReorder
+
+`registry/substrate/hooks/use-drag-reorder.ts`
+
+Pointer-based list reordering. See **substrate-canvas** for details.
+
+---
+
+## Utilities
+
+### createKeyboardShortcuts
+
+`registry/substrate/lib/keyboard-shortcuts.ts`
+
+Declarative shortcut registration. Replaces imperative switch statements.
+
+```ts
+const dispose = createKeyboardShortcuts([
+  { key: "z", meta: true, handler: handleUndo, label: "Undo", group: "Edit" },
+  { key: "z", meta: true, shift: true, handler: handleRedo, label: "Redo", group: "Edit" },
+  { key: "c", meta: true, handler: copy, label: "Copy", group: "Edit" },
+  { key: "v", meta: true, handler: paste, label: "Paste", group: "Edit" },
+  { key: "Delete", handler: deleteSelected, label: "Delete", group: "Edit" },
+  { key: "a", meta: true, handler: selectAll, label: "Select all", group: "Selection" },
+  { key: "v", handler: () => setTool("select"), label: "Select tool", group: "Tools" },
+  { key: "r", handler: () => setTool("rectangle"), label: "Rectangle tool", group: "Tools" },
+])
+
+// Clean up on unmount
+useEffect(() => dispose, [dispose])
+```
+
+**formatShortcut**: Converts entries to display strings for context menus and shortcut overlay.
+
+```ts
+formatShortcut({ key: "z", meta: true, shift: true }) // → "⌘+Shift+Z"
+```
+
+**Connects to**: `ShortcutOverlay` (substrate-feedback) – pass the same groups. `ContextMenuShortcut` – use `formatShortcut` for display.
+
+---
+
+## Components
+
+### HistoryControls
+
+`registry/substrate/components/history-controls.tsx`
+
+Undo/redo button pair. Renders `data-slot="history-controls"` for auto-positioning in PaneHeader and Toolbar.
+
+**Props**: `canUndo`, `canRedo`, `onUndo`, `onRedo`
+
+**Typical placement**:
+- Inside `PaneHeader` – auto-positioned to the right via `**:data-[slot=history-controls]:ml-auto`
+- Inside `Toolbar` – auto-compacted via `**:data-[slot=history-controls]:gap-0`
+
+---
+
+### LayerList
+
+`registry/substrate/components/layer-list.tsx`
+
+Flat layer panel with selection, visibility, lock, rename, and reorder.
+
+**Exports**: `LayerList`, `LayerItem`, `LayerIcon`, `LayerName`, `LayerActions`, `LayerToggle`, `LayerVisibilityToggle`, `LayerLockToggle`
+
+**Features**:
+- `LayerItem` supports `selected`, `hovered`, `depth` props
+- `LayerName` enables double-click inline rename
+- `LayerActions` are hidden by default, visible on row hover
+- `LayerVisibilityToggle` and `LayerLockToggle` use eye/lock icons
+
+**When to use**: 2D canvas surfaces, image editors, animation layers – any flat list of elements. For hierarchical structures, use TreeList instead.
+
+**Connects to**: `useSelection` for multi-select, `useDragReorder` for reordering, `ContextMenu` (substrate-feedback) for right-click actions.
+
+---
+
+### TreeList
+
+`registry/substrate/components/tree-list.tsx`
+
+Hierarchical tree with expand/collapse, depth indentation, and icons.
+
+**Exports**: `TreeList`, `TreeItem`, `TreeExpandButton`, `TreeItemContent`, `TreeItemIcon`, `TreeItemActions` + `useTreeExpansion` hook
+
+**Features**:
+- 16px depth indentation per level
+- `TreeExpandButton` rotates chevron on expand
+- `useTreeExpansion` manages expanded state: `isExpanded`, `toggle`, `expandAll`, `collapseAll`
+
+**When to use**: Scene graph (3D), frame hierarchy (2D), file trees, component trees, node groups. For flat lists, use LayerList instead.
+
+---
+
+## Wiring it all together
+
+### Complete undo/redo flow
+
+```
+┌─────────────────────────────────────────────────┐
+│  User action (move, resize, delete, etc.)       │
+│  → pushSnapshot(currentState)                   │
+│  → mutate state                                 │
+├─────────────────────────────────────────────────┤
+│  ⌘Z pressed (via createKeyboardShortcuts)       │
+│  → undo() returns previous state                │
+│  → apply to store                               │
+├─────────────────────────────────────────────────┤
+│  HistoryControls (in PaneHeader or Toolbar)     │
+│  → reads canUndo/canRedo                        │
+│  → calls onUndo/onRedo                          │
+├─────────────────────────────────────────────────┤
+│  NumberInput.onStart                             │
+│  → pushSnapshot before scrub begins             │
+└─────────────────────────────────────────────────┘
+```
+
+### Complete shortcut flow
+
+```
+┌─────────────────────────────────────────────────┐
+│  createKeyboardShortcuts(entries)                │
+│  → registers keydown listener                   │
+│  → entries include label + group metadata        │
+├─────────────────────────────────────────────────┤
+│  ShortcutOverlay (substrate-feedback)           │
+│  → reads same groups for display                │
+├─────────────────────────────────────────────────┤
+│  ContextMenuShortcut (substrate-feedback)       │
+│  → formatShortcut(entry) for inline display     │
+├─────────────────────────────────────────────────┤
+│  CommandPalette (substrate-feedback)            │
+│  → CommandShortcut shows the key binding        │
+└─────────────────────────────────────────────────┘
+```
+
+### Layer list with full interaction
+
+```tsx
+function LayerPanel() {
+  const { selectedIds, select, isSelected } = useSelection({ items: elementIds })
+  const { getDragItemProps } = useDragReorder({ items: elements, onReorder: reorderElements })
+
+  return (
+    <LayerList>
+      {elements.map((el, i) => (
+        <ContextMenu key={el.id}>
+          <ContextMenuTrigger asChild>
+            <LayerItem
+              selected={isSelected(el.id)}
+              onClick={(e) => select(el.id, e)}
+              {...getDragItemProps(i)}
+            >
+              <LayerIcon colour={el.fill?.color} />
+              <LayerName value={el.name} onRename={(name) => updateElement(el.id, { name })} />
+              <LayerActions>
+                <LayerVisibilityToggle
+                  visible={el.visible}
+                  onToggle={() => updateElement(el.id, { visible: !el.visible })}
+                />
+                <LayerLockToggle
+                  locked={el.locked}
+                  onToggle={() => updateElement(el.id, { locked: !el.locked })}
+                />
+              </LayerActions>
+            </LayerItem>
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuItem onSelect={() => duplicateElement(el.id)}>
+              Duplicate <ContextMenuShortcut>⌘D</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem onSelect={() => deleteElement(el.id)}>
+              Delete <ContextMenuShortcut>⌫</ContextMenuShortcut>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+      ))}
+    </LayerList>
+  )
+}
+```
+
+---
+
+## Cross-references
+
+| Need | Skill |
+| --- | --- |
+| Panes and panels hosting layer/tree lists | **substrate-scaffold** |
+| Property controls for selected items | **substrate-controls** |
+| Viewport, snap, hit testing | **substrate-canvas** |
+| Toast for delete-with-undo notifications | **substrate-feedback** |
+| Node selection and graph undo | **substrate-nodes** |
+| Surface-specific interaction models | **substrate-surfaces** |

package/skills/substrate-nodes/SKILL.md

@@ -0,0 +1,208 @@
+---
+name: substrate-nodes
+description: "Substrate node graph system: node cards, typed ports, port colour theming, and node editor patterns. Use when building node-based editors, visual programming tools, shader graphs, or data flow UIs. Triggers on: node, port, graph, visual programming, shader graph, data flow, pipeline, wire, connection."
+user-invocable: true
+---
+
+# Substrate nodes
+
+The node system provides card-based nodes with typed ports, a CSS variable colour scheme for port types, and compound components for building node editor UIs.
+
+## When to use this skill
+
+Use the nodes skill when you need to:
+
+- Build a node-based editor (shader graph, data flow, automation pipeline)
+- Add typed input/output ports to nodes
+- Theme port types with custom colours
+- Render node previews, badges, or dividers
+- Plan a node graph architecture
+
+For the canvas that hosts nodes (pan/zoom/selection), see **substrate-canvas**.
+For the scaffold shell around the editor, see **substrate-scaffold**.
+
+---
+
+## Components
+
+### Node compound component
+
+`registry/substrate/components/node.tsx`
+
+10 exports forming a complete node card:
+
+| Component | Slot | Purpose |
+| --- | --- | --- |
+| `NodeCard` | `node-card` | Outer card. Selected state adds accent ring. |
+| `NodeHeader` | `node-header` | Optional coloured header strip. Pass `colour` for a category tint. |
+| `NodeTitle` | `node-title` | Node name inside the header. |
+| `NodeBadge` | `node-badge` | Small label (e.g. "GPU", "Deprecated"). |
+| `NodeBody` | `node-body` | Content area below the header. |
+| `NodePorts` | `node-ports` | Container for a column of ports (left or right side). |
+| `NodePort` | `node-port` | A single port row: dot + label. Props: `type`, `label`, `direction`, `connected`. |
+| `NodePortDot` | `node-port-dot` | The coloured circle. Filled when connected, hollow when not. |
+| `NodePreview` | `node-preview` | Thumbnail/preview area inside the node body. |
+| `NodeDivider` | `node-divider` | Thin horizontal line between body sections. |
+
+### Port type system
+
+7 built-in port types, each with a themed CSS variable:
+
+| Type | CSS variable | Default colour |
+| --- | --- | --- |
+| `number` | `--node-port-number` | `#4a9eff` (blue) |
+| `colour` | `--node-port-colour` | `#e84393` (pink) |
+| `image` | `--node-port-image` | `#00b894` (green) |
+| `geometry` | `--node-port-geometry` | `#fdcb6e` (amber) |
+| `text` | `--node-port-text` | `#a29bfe` (violet) |
+| `boolean` | `--node-port-boolean` | `#fd79a8` (rose) |
+| `any` | `--node-port-any` | `#636e72` (grey) |
+
+These follow the standard Substrate CSS variable fallback chain in `globals.css`:
+
+```css
+--color-node-port-number: var(--node-port-number, #4a9eff);
+```
+
+Consumers override `--node-port-number` to change the colour across their entire app.
+
+### Node chrome variables
+
+4 additional CSS variables for the node card itself:
+
+| Variable | Default | Purpose |
+| --- | --- | --- |
+| `--node-bg` | `var(--popover)` | Node card background |
+| `--node-border` | `var(--border)` | Node card border |
+| `--node-header-bg` | `var(--muted)` | Header strip background |
+| `--node-selected-ring` | `var(--accent)` | Selected ring colour |
+
+---
+
+## Usage
+
+### Basic node
+
+```tsx
+<NodeCard selected={isSelected}>
+  <NodeHeader colour="#4a9eff">
+    <NodeTitle>Add</NodeTitle>
+    <NodeBadge>Math</NodeBadge>
+  </NodeHeader>
+  <NodeBody>
+    <div className="flex justify-between">
+      <NodePorts>
+        <NodePort type="number" label="A" direction="input" connected />
+        <NodePort type="number" label="B" direction="input" />
+      </NodePorts>
+      <NodePorts>
+        <NodePort type="number" label="Result" direction="output" connected />
+      </NodePorts>
+    </div>
+  </NodeBody>
+</NodeCard>
+```
+
+### Node with preview
+
+```tsx
+<NodeCard>
+  <NodeHeader colour="#00b894">
+    <NodeTitle>Blur</NodeTitle>
+  </NodeHeader>
+  <NodeBody>
+    <NodePreview>
+      <img src={previewUrl} alt="Preview" />
+    </NodePreview>
+    <NodeDivider />
+    <div className="flex justify-between">
+      <NodePorts>
+        <NodePort type="image" label="Input" direction="input" connected />
+        <NodePort type="number" label="Radius" direction="input" />
+      </NodePorts>
+      <NodePorts>
+        <NodePort type="image" label="Output" direction="output" />
+      </NodePorts>
+    </div>
+  </NodeBody>
+</NodeCard>
+```
+
+---
+
+## Architecture recommendations
+
+### Node graph store
+
+A node editor typically needs a Zustand store with:
+
+```ts
+interface NodeGraphState {
+  nodes: Record<string, NodeData>
+  connections: Connection[]
+  selectedNodeIds: Set<string>
+
+  // CRUD
+  addNode: (type: string, position: Point) => void
+  updateNode: (id: string, changes: Partial<NodeData>) => void
+  removeNodes: (ids: string[]) => void
+
+  // Connections
+  connect: (from: PortRef, to: PortRef) => void
+  disconnect: (connectionId: string) => void
+
+  // History
+  pushSnapshot: () => void
+  undo: () => void
+  redo: () => void
+}
+
+interface NodeData {
+  id: string
+  type: string
+  position: Point
+  inputs: PortDefinition[]
+  outputs: PortDefinition[]
+  properties: Record<string, unknown>
+}
+
+interface Connection {
+  id: string
+  from: PortRef
+  to: PortRef
+}
+
+interface PortRef {
+  nodeId: string
+  portId: string
+}
+```
+
+### Rendering connections
+
+Connection wires between ports are typically rendered as SVG `<path>` elements (cubic beziers) in a layer above the nodes. The path control points depend on port direction:
+
+- Output ports: bezier exits rightward
+- Input ports: bezier enters from the left
+
+Use `useViewport` (substrate-canvas) for the pan/zoom transform that applies to both nodes and wires.
+
+### Port type validation
+
+When the user drags a wire from an output port to an input port, validate type compatibility:
+
+- Same type → allow
+- `any` type → allow
+- Different types → show visual feedback (red wire, shake animation) and reject
+
+---
+
+## Cross-references
+
+| Need | Skill |
+| --- | --- |
+| Pan/zoom canvas hosting nodes | **substrate-canvas** |
+| App shell, breadcrumbs for nested groups | **substrate-scaffold** |
+| Property controls for selected node | **substrate-controls** |
+| Selection, undo, keyboard shortcuts | **substrate-interaction** |
+| Command palette for "Add Node" | **substrate-feedback** |

package/skills/substrate-scaffold/SKILL.md

@@ -0,0 +1,206 @@
+---
+name: substrate-scaffold
+description: "Substrate app shell: toolbar, panels, panes, document tabs, status bar, zoom controls, breadcrumbs, and resizer. Use when building the frame around a surface – layout, navigation, and structural chrome. Triggers on: app shell, layout, toolbar, panel, sidebar, tabs, status bar, zoom, breadcrumbs, split pane, resizer."
+user-invocable: true
+---
+
+# Substrate scaffold
+
+The scaffold is the structural shell around a Substrate surface – everything that isn't the central creative area itself. It provides toolbar, panels, panes, tabs, status bar, and layout primitives.
+
+## When to use this skill
+
+Use the scaffold skill when you need to:
+
+- Build or modify the app shell around a surface
+- Add toolbar items or customise toolbar behaviour
+- Create or restructure side panels
+- Add property panes inside panels
+- Wire up document tabs, breadcrumbs, or status bar
+- Add resizable split regions
+
+For the controls *inside* panes, see **substrate-controls**.
+For the central surface area, see **substrate-surfaces** and **substrate-canvas**.
+
+---
+
+## Components in this domain
+
+### Toolbar
+
+`registry/substrate/components/toolbar.tsx`
+
+Floating bottom bar. Renders tool buttons, separators, and groups. Uses `data-slot="toolbar"` and provides **compaction styling** – children with `data-slot` attributes are automatically resized:
+
+| Child slot | Compacted to |
+| --- | --- |
+| `number-input` | h-6, w-16 |
+| `colour-swatch` | size-6 |
+| `slider` / `slider-track` | h-6 |
+| `history-controls` | gap-0 |
+
+**Exports**: `Toolbar`, `ToolbarButton`, `ToolbarSeparator`, `ToolbarGroup`
+
+**Typical use**: One per playground, positioned at the bottom. Connect each `ToolbarButton` to `useToolStore` for active-tool state.
+
+**Related**: substrate-controls (for inputs inside the toolbar), substrate-interaction (for keyboard shortcuts bound to tools)
+
+---
+
+### Panel
+
+`registry/substrate/components/panel.tsx`
+
+Side panel (left or right). Controlled by `usePanelStore`. Renders as a fixed-width column with a header and scrollable body.
+
+**Exports**: `Panel`, `PanelHeader`, `PanelBody`
+
+**Typical use**: Left panel for structure (layers, tree), right panel for properties (panes with controls). Wire visibility to `usePanelStore`.
+
+---
+
+### Pane and CollapsiblePane
+
+`registry/substrate/components/pane.tsx`
+`registry/substrate/components/collapsible-pane.tsx`
+
+Sections within a panel. A pane is a labelled group of controls. CollapsiblePane wraps Radix Collapsible for expand/collapse with animated content.
+
+**PaneHeader** is slot-aware – it auto-positions `HistoryControls` via:
+```
+**:data-[slot=history-controls]:ml-auto
+**:data-[slot=history-button]:size-6
+```
+
+**Pane exports**: `Pane`, `PaneHeader`, `PaneLabel`, `PaneAction`
+**CollapsiblePane exports**: `CollapsiblePane`, `CollapsiblePaneHeader`, `CollapsiblePaneLabel`, `CollapsiblePaneContent`
+
+**Typical use**: Group related controls (Transform, Fill, Stroke, Typography) inside the right panel.
+
+**Related**: substrate-controls (for controls inside panes)
+
+---
+
+### DocumentTabs
+
+`registry/substrate/components/document-tabs.tsx`
+
+Tab bar for multiple open documents. Built on Radix Tabs. Close button uses `<span role="button">` to avoid nested-button HTML violation.
+
+**Exports**: `DocumentTabs`, `DocumentTabList`, `DocumentTab`, `DocumentTabContent`
+
+**Typical use**: Top of the layout, above the surface. Each tab maps to a document/file.
+
+---
+
+### StatusBar
+
+`registry/substrate/components/status-bar.tsx`
+
+Thin bottom bar (h-7) for metadata display. Sections align left/centre/right via flexbox auto-margins. Uses `text-[11px]` and `tabular-nums`.
+
+**Exports**: `StatusBar`, `StatusBarSection`, `StatusBarItem`, `StatusBarSeparator`
+
+**Typical use**: Below the surface. Show cursor position, zoom level, selection count, element type.
+
+---
+
+### ZoomControls
+
+`registry/substrate/components/zoom-controls.tsx`
+
+Zoom in/out/fit/reset buttons with percentage display. Click the percentage to reset to 100%.
+
+**Exports**: `ZoomControls`, `ZoomButton`
+
+**Props**: `zoom`, `onZoomChange`, `onZoomToFit`, `min`, `max`, `step`
+
+**Typical use**: Inside the StatusBar or floating over the surface. Wire to `useViewport` from substrate-canvas.
+
+**Related**: substrate-canvas (`useViewport` hook)
+
+---
+
+### Breadcrumbs
+
+`registry/substrate/components/breadcrumbs.tsx`
+
+Navigation trail for hierarchical contexts (e.g. Frame → Group → Element). Auto-truncates labels at `max-w-32`.
+
+**Exports**: `Breadcrumbs`, `BreadcrumbItem`
+
+**Typical use**: Above the surface or in a panel header when navigating into nested frames/groups.
+
+---
+
+### Resizer
+
+`registry/substrate/components/resizer.tsx`
+
+Draggable divider between regions. 1px visual line with a wider hit area. Three grab dots appear on hover.
+
+**Exports**: `Resizer`
+
+**Props**: `orientation` (`"vertical"` | `"horizontal"`)
+
+**Typical use**: Between the panel and the surface, or between two panes in a split layout.
+
+---
+
+## Recommended combinations
+
+### Standard creative app shell
+
+```
+Toolbar + Panel (left + right) + StatusBar + DocumentTabs
+```
+
+Panels contain Panes/CollapsiblePanes. StatusBar contains ZoomControls. Toolbar is connected to useToolStore.
+
+### Minimal single-document tool
+
+```
+Toolbar + Panel (right only) + StatusBar
+```
+
+No tabs, no left panel. Good for focused single-surface tools like an image editor or easing curve designer.
+
+### Node editor shell
+
+```
+Toolbar + Panel (right) + StatusBar + Breadcrumbs
+```
+
+Breadcrumbs show the path into nested node groups. Right panel shows properties of the selected node. See **substrate-nodes** for node components.
+
+---
+
+## Layout pattern
+
+```tsx
+<div className="flex h-screen flex-col">
+  <DocumentTabList>{/* tabs */}</DocumentTabList>
+  <div className="flex flex-1 overflow-hidden">
+    <Panel side="left">{/* layers/tree */}</Panel>
+    <div className="relative flex-1">
+      <Surface />{/* central area */}
+    </div>
+    <Panel side="right">{/* property panes */}</Panel>
+  </div>
+  <StatusBar>{/* metadata */}</StatusBar>
+  <Toolbar>{/* tools */}</Toolbar>
+</div>
+```
+
+---
+
+## Cross-references
+
+| Need | Skill |
+| --- | --- |
+| Controls inside panes (sliders, inputs, selects) | **substrate-controls** |
+| The central rendering surface | **substrate-surfaces** |
+| Spatial hooks (viewport, snap, bounds) | **substrate-canvas** |
+| Selection, undo, clipboard, shortcuts | **substrate-interaction** |
+| Toasts, progress, empty states | **substrate-feedback** |
+| Node cards and port wiring | **substrate-nodes** |