makersclaw 0.2.0 → 0.3.0

package/registry/blocks/flow-canvas/README.md

@@ -0,0 +1,420 @@
+# FlowCanvas
+
+A Miro-like board in the workspace theme. Sticky notes, shapes, text,
+frames, cards and images on an infinite dotted canvas. A tool rail on the
+left (a bar along the bottom on a narrow canvas), double-click anywhere
+for a sticky, drag from a card's dot to another card to connect them —
+or drop on empty canvas to pick what to add there. A floating toolbar
+over the selection, a right-click menu, undo/redo, copy/paste, snap to
+grid, a minimap, a list view for keyboards and screen readers, and a
+presentation mode that steps through the frames.
+
+It is [React Flow](https://reactflow.dev) (`@xyflow/react`, MIT)
+underneath, with its colours mapped onto the workspace's tokens. The
+canvas blocks — `account-map`, `process-map`, `journey-map`, `idea-board`
+— are built on this one: they import it, never `@xyflow/react`.
+
+```jsx
+import { FlowCanvas, boardToText } from "../components/blocks/flow-canvas";   // a Makersclaw app ("./blocks/flow-canvas" from components/)
+import { FlowCanvas, boardToText } from "@/components/makersclaw/blocks/flow-canvas";   // a shadcn project
+```
+
+`FlowCanvas` is a client component: render it from a `"use client"`
+component. The helpers (`boardToText`, `autoLayout`, `createNode`…) are
+plain functions and work on the server too.
+
+`makersclaw add flow-canvas` adds `@xyflow/react` (pinned, exact) to
+package.json: run `npm install` after. It loads with the page (no
+`import()`): the board mounts after the first render; until then — on the
+server — the box holds the board as text for a screen reader.
+
+## The data
+
+A board is plain JSON. Store it as it comes out of `onChange` (one `jsonb`
+column).
+
+```js
+{
+  nodes: [
+    { id: "s1", type: "sticky", position: { x: 40, y: 80 }, width: 200, height: 200,
+      data: { text: "Interview churned customers", color: "warning", badge: 3, meta: "Priya" } },
+    { id: "f1", type: "frame", position: { x: 0, y: 0 }, width: 720, height: 420, zIndex: -1,
+      data: { title: "Discover", color: "chart-2" } },
+  ],
+  edges: [
+    { id: "e1", source: "s1", target: "s2", label: "feeds",
+      data: { line: "curved", arrow: "end", dashed: false } },
+  ],
+  viewport: { x: 0, y: 0, zoom: 1 },   // where the person last looked; optional
+}
+```
+
+- **Positions are absolute**, top-left corner, in board pixels. A card in a
+  frame is not stored relative to it: a frame holds whatever lies inside
+  its rectangle (`frameContents`, `frameOf`). Dragging a frame moves what
+  is inside it.
+- **Colours are token names**, never colour values, so a board repaints
+  with the theme: `"warning"` (the yellow sticky), `"chart-1"` … `"chart-5"`,
+  `"success"`, `"info"`, `"destructive"`, `"muted"`. `COLORS` lists them;
+  `STICKY_COLORS` is the sticky palette.
+- **Paint order is list order** (later is on top); frames always sit
+  under everything (`zIndex: -1`).
+- `width`/`height` are set by resizing; `text` and `card` nodes leave
+  `height` out and grow with their content.
+- A node may carry React Flow's own flags: `draggable: false`,
+  `deletable: false`, `selectable: false`, `connectable: false`. Locking
+  (the toolbar's lock) sets `data.locked: true` with `draggable` and
+  `deletable` false.
+
+The built-in node types and their `data`:
+
+| type | data |
+| --- | --- |
+| `sticky` | `text`, `color` (default `"warning"`), `badge?` (a count in the corner: votes), `meta?` (a small line at the foot: an author) |
+| `shape` | `text`, `shape`: `rect` · `ellipse` · `diamond` · `pill`, `color` (default `"muted"`), `textSize`: `sm` · `md` · `lg` · `xl` |
+| `text` | `text`, `textSize`, `align?`: `left` · `center` · `right` |
+| `frame` | `title`, `color?` (a faint wash and edge; none = the card surface) |
+| `card` | `title`, `body?`, `icon?` (a kit icon name), `badge?`, `color?` (a strip on top), `kind?`, anything else your `renderCard` reads |
+| `image` | `src`, `alt` |
+
+Connectors: `data.line` `curved` (default) · `straight` · `elbow`;
+`data.arrow` `end` (default) · `both` · `none`; `data.dashed`. They leave
+and enter by the sides of the two cards that face each other, so they
+re-route as cards move; handle ids are not stored.
+
+## Props
+
+- `value` — the board, controlled. A new `value` that differs from what
+  the canvas last sent through `onChange` replaces it (loading another
+  board, or a change made elsewhere — a vote count); that replacement can
+  be undone. Pass back exactly what `onChange` gave you and nothing resets.
+- `defaultValue` — the starting board, uncontrolled. With neither, it
+  starts empty (and shows the empty state).
+- `onChange(board)` — after each committed change (a drag ends, a card is
+  placed, words stop being edited, a colour is picked), debounced by
+  `changeDelay` (default 400 ms). The board is clean JSON (see above).
+  Selection, typing in progress and panning never call it.
+- `onSave(board)` — `async`, return `{ ok: true }` or `{ ok: false, error }`
+  (a throw counts as failed). Called after `onChange`, and on ⌘S. The
+  canvas shows "Saving…", "Saved", or the error with a Retry beside
+  undo/redo. Leave it out when `onChange` already saves.
+- `changeDelay` — ms, default 400.
+- `readOnly` — `false` (default). `true`: no rail, no editing, no
+  connecting; pan, zoom, fit, the list view and `onOpenNode` still work.
+- `presentation` — `false` (default). `true`: read-only, and a bar steps
+  through the frames in reading order (← → or the buttons; each fills the
+  screen). `onExitPresentation()` — Esc and the bar's Exit call it; turn
+  `presentation` off there.
+- `height` — the canvas's height, default `560` (px; any CSS length works:
+  `"70vh"`, `"100%"` inside a sized box).
+- `bare` — `false` (default: rounded, bordered). `true`: no border or
+  radius, for a full-page board.
+- `label` — the board's accessible name, default `"Board"`; also the list
+  view's heading.
+- `className` — layout around it (margin, width). Never colour.
+- `palette` — the sticky colours offered, token names, default
+  `STICKY_COLORS` (six). The toolbar adds a few more for shapes and frames.
+- `snap` — `true` (default): positions and sizes snap to `grid` (default
+  `20` px — the dot spacing). The person can turn it off from the view menu.
+- `minimap` — `false` (default): whether the minimap starts open (a toggle
+  in the zoom bar either way; hidden on a narrow canvas).
+- `hideAttribution` — `false` (default). React Flow asks that its small
+  credit stays; its MIT licence allows hiding it.
+- `canvasRef` — a ref (`useFlowCanvas()`) that receives the handle (below).
+- `onSelectionChange(nodes, edges)` — the selection changed (a side panel
+  for the selected person).
+- `onOpenNode(node)` — double-click or Enter on a node that has no words of
+  its own to edit: your own node types, cards drawn by `renderCard`, and
+  every node in read-only mode. Open your `Sheet` there. Without it,
+  double-click edits the words.
+- `describeNode(node)` — a one-line description of one of YOUR node types,
+  for the list view, `boardToText` and the server placeholder; return
+  nothing for the default (`Sticky: "…"`).
+
+Extending it — how a block makes the canvas its own:
+
+- `nodeTypes` — `{ person: PersonNode, … }`: your own node components,
+  added to the built-in ones (a key that matches a built-in replaces it).
+  See "Your own node types".
+- `renderCard(node, ctx)` — draws the inside of every `card` node; return
+  `undefined` for the default (title + body). `ctx`: `{ selected, editing,
+  update(patch), api }`. Kit parts only (Avatar, Badge, Stat…); give an
+  interactive part inside `className="nodrag"` so pressing it does not drag
+  the card. The simplest way to put your own card on the board.
+- `tools` — more rail tools: `[{ id, label, icon, shortcut?, create?,
+  onSelect?, sizable?, connectable? }]`. See "Rail tools".
+- `rail` — the rail's contents, in order: built-in ids (`"select"`,
+  `"hand"`, `"sticky"`, `"shape"`, `"text"`, `"connector"`, `"frame"`,
+  `"image"`), your tools' ids, and `"|"` for a divider. Default: all the
+  built-ins, then your tools (and `"image"` when `pickImage` is set). A
+  process map drops the sticky: `rail={["select", "hand", "|", "shape", "connector", "step"]}`.
+- `pickImage()` — `async () => ({ src, alt, width?, height? }) | null`: turns
+  on the image tool (your upload, your picker). Without it there is no
+  image tool; image nodes in the data still show.
+- `topBar` — a node shown floating at the top centre: a title, a save
+  button, a share menu, a timer.
+- `toolbarExtra(selection, api)` — more controls at the end of the
+  floating toolbar over a selection (`selection.nodes`): kit
+  `IconButton size="sm"` / `Menu` parts. "Vote", "Assign owner".
+- `contextMenuItems(selection, api)` — more right-click items, kit `Menu`
+  shape (`[{ label, onSelect, icon?, shortcut?, tone? }]`); `selection.nodes`
+  is empty for a right-click on the empty canvas.
+- `emptyState` — a node in place of the first-run hint; `false` for none.
+- `templates` — the starters on the empty state: `[{ id, label, icon?,
+  description?, board }]` (`board` a board or a function returning one).
+  Default `starterTemplates()` (Brainstorm, Flowchart, Retro); `[]` for none.
+- `constrain(node, { reason, board })` — runs on every node a change
+  touched before it is committed (`reason`: `"move"` after a drag or a
+  nudge, `"create"`, `"paste"`, `"resize"`, `"align"`, `"layout"`). Return
+  the node adjusted (a new position, size or data), or nothing to keep it.
+  This is how a journey map snaps a sticky into its cell and records it.
+- `beforeChange(next, prev, reason)` — runs on the whole board at every
+  commit (`next` and `prev` are clean boards). Return `false` to refuse the
+  change (the board goes back), a board to commit instead, or nothing to
+  accept it.
+- `canConnect(connection, board)` — `false` refuses a connector
+  (`connection`: `{ source, target }`). A card never connects to itself.
+
+## The handle
+
+`const board = useFlowCanvas()`, `<FlowCanvas canvasRef={board} />`, then
+`board.current?.…`. Tools' `create`/`onSelect`, `renderCard`,
+`toolbarExtra` and `contextMenuItems` get the same object as `api`, and a
+node component reaches it with `useCanvas().api`. Every change made through
+it commits (undoable, then `onChange`) unless `{ commit: false }` says not.
+
+- Read: `getBoard()` (clean JSON, with the viewport) · `getSelection()` →
+  `{ nodes, edges }` · `toText()` · `toMarkdown({ title })` · `canUndo()` ·
+  `canRedo()` · `getTool()` · `readOnly`
+- Nodes: `addNodes(node | nodes, { select = true, edit = false, edges })` →
+  ids · `updateNode(id, patch | (node) => patch, { commit })` ·
+  `updateNodeData(id, patch | (data) => patch, { commit })` ·
+  `updateNodesData(ids, patch)` · `removeNodes(ids)` · `duplicate(ids)` ·
+  `lock(ids, on)` · `arrange(ids, "front" | "back")` · `align(ids, "left" |
+  "center" | "right" | "top" | "middle" | "bottom")` · `distribute(ids,
+  "horizontal" | "vertical")` · `frameSelection(ids)`
+- Connectors: `addEdge({ source, target, label?, data? })` → id ·
+  `updateEdge(id, patch, { commit })` · `removeEdges(ids)`
+- The whole board: `setBoard(board, { fit = true })` (undoable) ·
+  `autoLayout({ direction: "LR" | "TB", ids?, rankGap?, nodeGap? })` ·
+  `undo()` · `redo()` · `save()` (send now, skipping the debounce)
+- Editing: `edit(id)` (start editing a node's words) · `editEdge(id)` ·
+  `stopEditing()` · `commit(reason, ids?)` (after `{ commit: false }` changes)
+- View: `select(ids, edgeIds?)` · `focusNode(id)` (select, centre, focus) ·
+  `fitView({ nodes?: [{ id }] })` · `zoomIn()` · `zoomOut()` · `zoomTo(z)` ·
+  `centerPoint()` (the board point at the middle of the screen — where a
+  picker's choice lands) · `screenToFlow({ x, y })` · `setTool(id)`
+
+## Your own node types
+
+A node component gets React Flow's props: `{ id, type, data, selected,
+width, height, dragging }`. Wrap its body in `NodeShell` — it draws the
+selection box, the four connection dots (shown on hover), the resize
+handles, the lock mark and the whole-card drop target while a connector is
+dragged. Without it (or `NodeHandles`), connectors cannot reach the node.
+Read the canvas with `useCanvas()`; change the node through `api`.
+
+```jsx
+import { FlowCanvas, NodeShell, EditableText, useCanvas, createNode } from "./blocks/flow-canvas";
+import { Avatar, Badge } from "./ui";
+
+function PersonNode({ id, data, selected }) {
+  const { api, editingNode, readOnly } = useCanvas();
+  return (
+    <NodeShell id={id} selected={selected} locked={data.locked} resizable={false}>
+      <div className="flex w-64 items-center gap-3 rounded-lg border border-border bg-card p-3 shadow-sm">
+        <Avatar name={data.name} src={data.avatar} />
+        <div className="min-w-0 flex-1">
+          <EditableText
+            singleLine
+            editing={!readOnly && editingNode === id}
+            value={data.name}
+            onChange={(v) => api.updateNodeData(id, { name: v }, { commit: false })}
+            onDone={() => api.stopEditing()}
+            label="Name"
+            className="truncate text-sm font-medium"
+          />
+          <p className="truncate text-xs text-muted-foreground">{data.title}</p>
+        </div>
+        <Badge tone={data.role === "blocker" ? "danger" : "neutral"}>{data.role}</Badge>
+      </div>
+    </NodeShell>
+  );
+}
+const NODE_TYPES = { person: PersonNode };   // module level: a new object each render remounts every node
+
+<FlowCanvas nodeTypes={NODE_TYPES} describeNode={(n) => n.type === "person" ? `Person: ${n.data.name} (${n.data.role})` : undefined} … />
+```
+
+- `NodeShell` props: `id`, `selected`, `locked`, `resizable` (default
+  true), `minWidth`/`minHeight` (40/30), `keepAspectRatio`, `autoHeight`
+  (height follows content), `handles` (false: nothing connects), `ring`
+  (false: draw your own selection), `className` (layout only).
+- `EditableText` props: `value`, `editing`, `onChange(text)`, `onDone()`,
+  `placeholder`, `singleLine` (Enter finishes), `label`, `className`,
+  `style`. Shown and edited in the same box, so nothing jumps.
+- Double-click and Enter call `onOpenNode(node)` for your types when you
+  pass it, else they set `editingNode` to the node's id (use it as above).
+- Colour your node from a token in its data with `colorClasses(token)` →
+  `{ tint, solid, fill, stroke, wash, edge }` class strings
+  (`colorClasses("chart-3").tint` is `bg-chart-3/30`). `Palette`,
+  `StickySwatch`, `ColorDot` and `ShapeGlyph` are the canvas's own pickers
+  and swatches, for a legend or a side panel.
+- An interactive kit part inside a node takes `className="nodrag"`.
+- Put a node's actions in `toolbarExtra` or `contextMenuItems`, not in a
+  kit `Menu`/`Popover` inside the node: the node lives in the zoomed and
+  panned viewport (a CSS transform), and the kit's floating panels anchor
+  to their button without knowing about it. The canvas's own toolbars sit
+  outside the viewport for this reason.
+
+## Rail tools
+
+```js
+const TOOLS = [
+  // A placing tool: pick it (or press P), click the canvas, a node appears there.
+  { id: "person", label: "Person", icon: "user", shortcut: "P",
+    create: (point, { rect, api }) => createNode("person", point, { width: 256, data: { name: "", role: "user" } }) },
+  // An action: pressing it runs onSelect — open your picker, then add.
+  { id: "pick", label: "Add from CRM", icon: "search",
+    onSelect: (api) => openPicker((p) => api.addNodes(createNode("person", api.centerPoint(), { data: p }))) },
+];
+```
+
+- `create(point, { rect, api, grid })` returns a node or several (use
+  `createNode`: it centres on `point` and snaps). With `sizable: true` the
+  person can drag out a rectangle and you get it as `rect`.
+- A tool with `create` is also offered in the menu that opens when a
+  connector is dropped on empty canvas (the new node arrives connected);
+  `connectable: false` leaves it out.
+- The tool returns to Select after one placement. `shortcut` is one key.
+
+## Constraining behaviour — recipes
+
+- **Snap stickies into cells** (journey map): compute the cells from your
+  lanes, then
+  `constrain={(n) => { if (n.type !== "sticky") return; const r = nodeRect(n); const c = snapToCell(r, cells); return c && { position: { x: c.x, y: c.y }, data: { ...n.data, cell: c.cellId } }; }}`.
+- **Lock the lanes**: lanes are `frame` nodes with `draggable: false,
+  deletable: false, selectable: false` (and `data.locked: true` to hide the
+  resize handles). They still hold what is dropped inside them.
+- **Only steps connect** (process map): `canConnect={(c, b) => isStep(c.source) && isStep(c.target)}`.
+- **At most N votes** (idea board): keep votes in `data.badge` (the sticky
+  shows it) and refuse extra ones in your own handler; or
+  `beforeChange={(next) => votesOk(next) || false}`.
+- **Tidy a flow**: `api.autoLayout({ direction: "LR" })`, or in data
+  `autoLayout(nodes, edges, { direction: "TB" })` before passing `value`.
+
+## The helpers
+
+Import them from the block; they take a board and never throw on a partial
+one.
+
+- `emptyBoard()` — `{ nodes: [], edges: [] }`.
+- `createNode(type, point, { id?, data?, width?, height?, rect?, grid = 20, … })`
+  — a node centred on `point` with its type's defaults, snapped. Extra keys
+  (`draggable`, `zIndex`…) go on the node.
+- `createEdge(source, target, { id?, label?, data? })`.
+- `cleanBoard(board)` — what is stored (React Flow's working fields gone).
+- `boardToText(board, { describe? })` — plain text for an agent or a screen
+  reader: `Board: 12 items, 5 connectors.`, then each frame with what it
+  holds (reading order, nested), loose items, and `Connectors:` as
+  `"A" → "B" (label)`.
+- `boardToMarkdown(board, { title?, describe? })` — a heading per frame, a
+  bullet per item, a Connections list.
+- `autoLayout(nodes, edges, { direction = "LR", rankGap = 80, nodeGap = 40, ids?, grid = 20 })`
+  — a layered layout written here (no dagre/elk): cycles broken, ranks by
+  longest path, barycentre sweeps against crossings; unconnected nodes in
+  a row after; the top-left corner kept. Returns every node, the laid-out
+  ones moved. Frames are left alone unless named in `ids`.
+- `alignNodes(nodes, ids, how)`, `distributeNodes(nodes, ids, axis)`,
+  `duplicateNodes(board, ids, { offset })` → `{ nodes, edges }`,
+  `removeNodes(board, ids)`.
+- `frameContents(board, frameId)` → ids inside it; `frameOf(board)` →
+  Map(nodeId → the smallest frame holding it).
+- `nodeRect(node)`, `boardBounds(nodes)`, `snapPoint(p, grid)`,
+  `snapToCell(rect, cells, { pad })` → `{ x, y, cellId }`,
+  `fitFontSize(text, width, height)` (the sticky's shrinking words).
+- `historyInit(board)`, `historyReducer(state, { type: "push" | "undo" |
+  "redo" | "reset", present? })` — the undo stack the canvas uses, for a
+  block that keeps its own.
+- `starterTemplates()`, `describeNode(node, describe?)`, `nodeText(node)`,
+  `COLORS`, `STICKY_COLORS`, `COLOR_NAMES`, `SHAPES`, `GRID`.
+
+## Mouse and keyboard
+
+- Scroll or Space + drag pans; pinch or Ctrl/⌘ + scroll zooms; the middle
+  button drags the canvas in any tool.
+- Drag on empty canvas draws a selection box (what it fully encloses);
+  Shift-click adds to the selection; drag a frame by its title.
+- Tools: V select, H hand, N sticky, S shape, T text, L connector, F frame,
+  and your tools' keys. Shapes, text and frames can be dragged out to a size.
+- Enter edits the selected card's words, Esc stops; Delete/Backspace
+  deletes; ⌘D duplicates; ⌘C/⌘X/⌘V copy, cut, paste (paste lines of text
+  from elsewhere: a sticky each); ⌘A selects all; ⌘Z / ⇧⌘Z undo, redo;
+  arrows nudge 1 px (⇧ 10); ⌘] / ⌘[ front, back; ⇧⌘L lock; ⇧1 fit;
+  ⇧2 zoom to selection; ⌘+ / ⌘− / ⌘0 zoom; ? the shortcuts sheet.
+- Tab walks the cards (each selected as it gets focus); Shift+F10 or the
+  Menu key opens the actions menu; the List view (zoom bar) shows the board
+  as a list, and choosing a row goes back to that card.
+
+## Example
+
+```jsx
+// components/LaunchBoard.jsx — client
+"use client";
+import { useState } from "react";
+import { updateRow } from "../lib/actions";
+import { FlowCanvas } from "./blocks/flow-canvas";
+
+export default function LaunchBoard({ project }) {
+  const [board, setBoard] = useState(project.board);   // jsonb, may be null
+  return (
+    <FlowCanvas
+      value={board ?? undefined}
+      onChange={setBoard}
+      onSave={(b) => updateRow({ source: "public.projects", id: project.id, patch: { board: b } })}
+      label={`${project.name} board`}
+      height="calc(100dvh - 8rem)"
+    />
+  );
+}
+```
+
+A card drawn with kit parts, and an agent reading the board:
+
+```jsx
+<FlowCanvas
+  value={board}
+  onChange={setBoard}
+  renderCard={(n) => n.data.kind === "deal" ? (
+    <div className="grid gap-1 p-3">
+      <p className="text-sm font-medium">{n.data.title}</p>
+      <Stat size="sm" label="Value" value={n.data.amount} />
+    </div>
+  ) : undefined}
+/>
+
+const context = boardToText(board);   // hand this to the agent
+```
+
+## What it will not do
+
+- Collaborate live (several cursors at once). Saves are last-write-wins.
+- Draw freehand (that is `sketch-canvas`), or export an image.
+- Nest data under frames: membership is geometric, so a card dragged out
+  of a frame simply leaves it.
+- Route connectors around cards; they take the shortest curve between the
+  facing sides.
+- Upload images itself: pass `pickImage`.
+- Render on the server: the server shows the board as text until the
+  canvas mounts. For a read-only page that must be rich in the HTML, render
+  `boardToMarkdown` yourself.
+
+A board it cannot be is your own component in `components/` — not an edit
+to this block. Its files are fixed: `npm run check` refuses a change, and
+`makersclaw add flow-canvas` restores them.
+
+## Credits
+
+React Flow (https://github.com/xyflow/xyflow), MIT, by webkid GmbH —
+installed from npm as a dependency, not copied here. Its attribution link
+stays in the corner unless `hideAttribution`. See THIRD-PARTY-NOTICES.md.

package/registry/blocks/flow-canvas/block.json

@@ -0,0 +1,13 @@
+{
+  "name": "flow-canvas",
+  "title": "FlowCanvas",
+  "description": "A Miro-like board (React Flow) in the workspace theme: sticky notes, shapes, text, frames, cards and images on an infinite dotted canvas; a tool rail with shortcuts, double-click for a sticky, drag-out connectors that re-route as cards move, labels on connectors, a floating toolbar over the selection, right-click menu, undo/redo, copy/paste, snap to grid, minimap, list view and presentation mode. The board is plain JSON; helpers turn it into text or markdown and lay it out. Other blocks add their own node types and rail tools.",
+  "useWhen": "A screen where people arrange things spatially and connect them: a brainstorm, a flowchart or process map, an account or org map, a journey map, a retro, a planning board. The canvas blocks (account-map, process-map, journey-map, idea-board) are built on it. Not for freehand drawing (sketch-canvas), records in stage columns (board), or a chart of numbers (chart).",
+  "tags": ["canvas", "whiteboard", "miro", "flowchart", "diagram", "sticky notes", "mind map", "react flow", "nodes", "connectors", "frames", "brainstorm", "infinite canvas", "org chart", "process map"],
+  "exports": ["FlowCanvas", "useFlowCanvas", "useCanvas", "NodeShell", "NodeHandles", "EditableText", "Palette", "StickySwatch", "ColorDot", "ShapeGlyph", "colorClasses", "emptyBoard", "createNode", "createEdge", "cleanBoard", "boardToText", "boardToMarkdown", "autoLayout", "snapToCell", "frameContents", "historyReducer", "starterTemplates"],
+  "files": ["index.js", "flow-canvas.jsx", "nodes.jsx", "edges.jsx", "chrome.jsx", "context.jsx", "board.js", "theme.js"],
+  "requires": [],
+  "dependencies": {
+    "@xyflow/react": "12.11.6"
+  }
+}