makersclaw 0.4.0 → 0.5.2

package/r/flow-canvas.json

@@ -5,7 +5,7 @@
   "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.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json"
   ],
   "dependencies": [
     "@xyflow/react@12.11.6"
@@ -33,7 +33,7 @@
       "path": "registry/blocks/flow-canvas/edges.jsx",
       "type": "registry:component",
       "target": "@components/makersclaw/blocks/flow-canvas/edges.jsx",
-      "content": "\"use client\";\n\n// The connector: a line between two cards that finds its own way. It\n// leaves and enters by the sides that face each other (board.js\n// facingSides), so it re-routes as the cards move — Miro's behaviour, not\n// React Flow's fixed handles. Curved (default), straight or elbow; an\n// arrowhead at the end, both ends or none; dashed or not; a label in the\n// middle that edits on double-click. Painted with token classes only.\nimport { EdgeLabelRenderer, useInternalNode } from \"@xyflow/react\";\nimport { cx } from \"../../ui\";\nimport { facingSides, sidePoint } from \"./board\";\nimport { useCanvas } from \"./context\";\nimport { EditableText } from \"./nodes\";\n\nconst NORMAL = { left: { x: -1, y: 0 }, right: { x: 1, y: 0 }, top: { x: 0, y: -1 }, bottom: { x: 0, y: 1 } };\n\nfunction rectOf(n) {\n  const p = n.internals?.positionAbsolute ?? n.position ?? { x: 0, y: 0 };\n  return { x: p.x, y: p.y, width: n.measured?.width ?? n.width ?? 0, height: n.measured?.height ?? n.height ?? 0 };\n}\n\nconst unit = (v) => {\n  const l = Math.hypot(v.x, v.y) || 1;\n  return { x: v.x / l, y: v.y / l };\n};\n\n/** The path, its middle and the direction at each end, for one connector. */\nexport function connectorGeometry(a, sa, b, sb, line = \"curved\") {\n  if (line === \"straight\") {\n    const dir = unit({ x: b.x - a.x, y: b.y - a.y });\n    return { d: `M${a.x},${a.y} L${b.x},${b.y}`, mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }, end: dir, start: { x: -dir.x, y: -dir.y } };\n  }\n  if (line === \"elbow\") {\n    const horizontal = sa === \"left\" || sa === \"right\";\n    if (horizontal) {\n      const mx = (a.x + b.x) / 2;\n      return { d: `M${a.x},${a.y} H${mx} V${b.y} H${b.x}`, mid: { x: mx, y: (a.y + b.y) / 2 }, end: { x: -NORMAL[sb].x, y: 0 }, start: { x: -NORMAL[sa].x, y: 0 } };\n    }\n    const my = (a.y + b.y) / 2;\n    return { d: `M${a.x},${a.y} V${my} H${b.x} V${b.y}`, mid: { x: (a.x + b.x) / 2, y: my }, end: { x: 0, y: -NORMAL[sb].y }, start: { x: 0, y: -NORMAL[sa].y } };\n  }\n  const k = Math.min(160, Math.max(30, Math.hypot(b.x - a.x, b.y - a.y) * 0.4));\n  const c1 = { x: a.x + NORMAL[sa].x * k, y: a.y + NORMAL[sa].y * k };\n  const c2 = { x: b.x + NORMAL[sb].x * k, y: b.y + NORMAL[sb].y * k };\n  const mid = { x: (a.x + 3 * c1.x + 3 * c2.x + b.x) / 8, y: (a.y + 3 * c1.y + 3 * c2.y + b.y) / 8 };\n  return { d: `M${a.x},${a.y} C${c1.x},${c1.y} ${c2.x},${c2.y} ${b.x},${b.y}`, mid, end: { x: -NORMAL[sb].x, y: -NORMAL[sb].y }, start: { x: -NORMAL[sa].x, y: -NORMAL[sa].y } };\n}\n\nfunction arrowAt(tip, dir, size = 10) {\n  const base = { x: tip.x - dir.x * size, y: tip.y - dir.y * size };\n  const px = -dir.y * size * 0.5;\n  const py = dir.x * size * 0.5;\n  return `M${tip.x},${tip.y} L${base.x + px},${base.y + py} L${base.x - px},${base.y - py} Z`;\n}\n\nconst INK = \"transition-[stroke,fill] duration-150 motion-reduce:transition-none\";\n\nexport function FlowEdge({ id, source, target, selected, data, label }) {\n  const s = useInternalNode(source);\n  const t = useInternalNode(target);\n  const { api, editingEdge, readOnly } = useCanvas();\n  if (!s || !t) return null;\n  const a = rectOf(s);\n  const b = rectOf(t);\n  const sides = facingSides(a, b);\n  const p1 = sidePoint(a, sides.source);\n  const p2 = sidePoint(b, sides.target);\n  const g = connectorGeometry(p1, sides.source, p2, sides.target, data?.line ?? \"curved\");\n  const arrow = data?.arrow ?? \"end\";\n  const editing = !readOnly && editingEdge === id;\n  const ink = selected ? \"stroke-primary\" : \"stroke-muted-foreground [.react-flow__edge:hover_&]:stroke-foreground\";\n  const fill = selected ? \"fill-primary\" : \"fill-muted-foreground [.react-flow__edge:hover_&]:fill-foreground\";\n  return (\n    <>\n      <path d={g.d} fill=\"none\" stroke=\"transparent\" strokeWidth={18} className=\"react-flow__edge-interaction\" />\n      <path d={g.d} fill=\"none\" strokeWidth={selected ? 2.5 : 2} strokeDasharray={data?.dashed ? \"6 5\" : undefined} strokeLinecap=\"round\" className={cx(ink, INK)} />\n      {arrow !== \"none\" ? <path d={arrowAt(p2, g.end)} className={cx(fill, INK)} /> : null}\n      {arrow === \"both\" ? <path d={arrowAt(p1, g.start)} className={cx(fill, INK)} /> : null}\n      <EdgeLabelRenderer>\n        {label || editing ? (\n          <div\n            className=\"nodrag nopan pointer-events-auto absolute top-0 left-0\"\n            style={{ transform: `translate(${g.mid.x}px, ${g.mid.y}px) translate(-50%, -50%)` }}\n            onClick={() => !readOnly && !editing && api?.select([], [id])}\n            onDoubleClick={() => !readOnly && api?.editEdge(id)}\n          >\n            <EditableText\n              singleLine\n              editing={editing}\n              value={label}\n              label=\"Connector label\"\n              placeholder=\"Label\"\n              onChange={(v) => api?.updateEdge(id, { label: v }, { commit: false })}\n              onDone={() => api?.stopEditing()}\n              className={cx(\n                \"min-w-10 max-w-60 rounded-md border bg-background px-1.5 py-0.5 text-center text-xs leading-snug break-words text-foreground shadow-sm\",\n                selected ? \"border-primary\" : \"border-border\",\n              )}\n            />\n          </div>\n        ) : null}\n      </EdgeLabelRenderer>\n    </>\n  );\n}\n\nexport const BUILT_IN_EDGES = { flow: FlowEdge };\n"
+      "content": "\"use client\";\n\n// The connector: a line between two cards that finds its own way. It\n// leaves and enters by the sides that face each other (board.js\n// facingSides), so it re-routes as the cards move — Miro's behaviour, not\n// React Flow's fixed handles. Curved (default), straight or elbow; an\n// arrowhead at the end, both ends or none; dashed or not; a label in the\n// middle that edits on double-click. Painted with token classes only.\nimport { EdgeLabelRenderer, useInternalNode } from \"@xyflow/react\";\nimport { cx } from \"../../ui\";\nimport { facingSides, sidePoint } from \"./board\";\nimport { useCanvas } from \"./context\";\nimport { EditableText } from \"./nodes\";\n\nconst NORMAL = { left: { x: -1, y: 0 }, right: { x: 1, y: 0 }, top: { x: 0, y: -1 }, bottom: { x: 0, y: 1 } };\n\nfunction rectOf(n) {\n  const p = n.internals?.positionAbsolute ?? n.position ?? { x: 0, y: 0 };\n  return { x: p.x, y: p.y, width: n.measured?.width ?? n.width ?? 0, height: n.measured?.height ?? n.height ?? 0 };\n}\n\nconst unit = (v) => {\n  const l = Math.hypot(v.x, v.y) || 1;\n  return { x: v.x / l, y: v.y / l };\n};\n\n/** The path, its middle and the direction at each end, for one connector. */\nexport function connectorGeometry(a, sa, b, sb, line = \"curved\") {\n  if (line === \"straight\") {\n    const dir = unit({ x: b.x - a.x, y: b.y - a.y });\n    return { d: `M${a.x},${a.y} L${b.x},${b.y}`, mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }, end: dir, start: { x: -dir.x, y: -dir.y } };\n  }\n  if (line === \"elbow\") {\n    const horizontal = sa === \"left\" || sa === \"right\";\n    if (horizontal) {\n      const mx = (a.x + b.x) / 2;\n      return { d: `M${a.x},${a.y} H${mx} V${b.y} H${b.x}`, mid: { x: mx, y: (a.y + b.y) / 2 }, end: { x: -NORMAL[sb].x, y: 0 }, start: { x: -NORMAL[sa].x, y: 0 } };\n    }\n    const my = (a.y + b.y) / 2;\n    return { d: `M${a.x},${a.y} V${my} H${b.x} V${b.y}`, mid: { x: (a.x + b.x) / 2, y: my }, end: { x: 0, y: -NORMAL[sb].y }, start: { x: 0, y: -NORMAL[sa].y } };\n  }\n  const k = Math.min(160, Math.max(30, Math.hypot(b.x - a.x, b.y - a.y) * 0.4));\n  const c1 = { x: a.x + NORMAL[sa].x * k, y: a.y + NORMAL[sa].y * k };\n  const c2 = { x: b.x + NORMAL[sb].x * k, y: b.y + NORMAL[sb].y * k };\n  const mid = { x: (a.x + 3 * c1.x + 3 * c2.x + b.x) / 8, y: (a.y + 3 * c1.y + 3 * c2.y + b.y) / 8 };\n  return { d: `M${a.x},${a.y} C${c1.x},${c1.y} ${c2.x},${c2.y} ${b.x},${b.y}`, mid, end: { x: -NORMAL[sb].x, y: -NORMAL[sb].y }, start: { x: -NORMAL[sa].x, y: -NORMAL[sa].y } };\n}\n\nfunction arrowAt(tip, dir, size = 10) {\n  const base = { x: tip.x - dir.x * size, y: tip.y - dir.y * size };\n  const px = -dir.y * size * 0.5;\n  const py = dir.x * size * 0.5;\n  return `M${tip.x},${tip.y} L${base.x + px},${base.y + py} L${base.x - px},${base.y - py} Z`;\n}\n\nconst INK = \"transition-[stroke,fill] duration-150 motion-reduce:transition-none\";\n\nexport function FlowEdge({ id, source, target, selected, data, label }) {\n  const s = useInternalNode(source);\n  const t = useInternalNode(target);\n  const { api, editingEdge, readOnly } = useCanvas();\n  if (!s || !t) return null;\n  const a = rectOf(s);\n  const b = rectOf(t);\n  const sides = facingSides(a, b);\n  const p1 = sidePoint(a, sides.source);\n  const p2 = sidePoint(b, sides.target);\n  const g = connectorGeometry(p1, sides.source, p2, sides.target, data?.line ?? \"curved\");\n  const arrow = data?.arrow ?? \"end\";\n  const editing = !readOnly && editingEdge === id;\n  // `\\_\\_` and String.raw: an underscore in [...] is a space to Tailwind\n  // (theme.js says why).\n  const ink = selected ? \"stroke-primary\" : String.raw`stroke-muted-foreground [.react-flow\\_\\_edge:hover_&]:stroke-foreground`;\n  const fill = selected ? \"fill-primary\" : String.raw`fill-muted-foreground [.react-flow\\_\\_edge:hover_&]:fill-foreground`;\n  return (\n    <>\n      <path d={g.d} fill=\"none\" stroke=\"transparent\" strokeWidth={18} className=\"react-flow__edge-interaction\" />\n      <path d={g.d} fill=\"none\" strokeWidth={selected ? 2.5 : 2} strokeDasharray={data?.dashed ? \"6 5\" : undefined} strokeLinecap=\"round\" className={cx(ink, INK)} />\n      {arrow !== \"none\" ? <path d={arrowAt(p2, g.end)} className={cx(fill, INK)} /> : null}\n      {arrow === \"both\" ? <path d={arrowAt(p1, g.start)} className={cx(fill, INK)} /> : null}\n      <EdgeLabelRenderer>\n        {label || editing ? (\n          <div\n            className=\"nodrag nopan pointer-events-auto absolute top-0 left-0\"\n            style={{ transform: `translate(${g.mid.x}px, ${g.mid.y}px) translate(-50%, -50%)` }}\n            onClick={() => !readOnly && !editing && api?.select([], [id])}\n            onDoubleClick={() => !readOnly && api?.editEdge(id)}\n          >\n            <EditableText\n              singleLine\n              editing={editing}\n              value={label}\n              label=\"Connector label\"\n              placeholder=\"Label\"\n              onChange={(v) => api?.updateEdge(id, { label: v }, { commit: false })}\n              onDone={() => api?.stopEditing()}\n              className={cx(\n                \"min-w-10 max-w-60 rounded-md border bg-background px-1.5 py-0.5 text-center text-xs leading-snug break-words text-foreground shadow-sm\",\n                selected ? \"border-primary\" : \"border-border\",\n              )}\n            />\n          </div>\n        ) : null}\n      </EdgeLabelRenderer>\n    </>\n  );\n}\n\nexport const BUILT_IN_EDGES = { flow: FlowEdge };\n"
     },
     {
       "path": "registry/blocks/flow-canvas/chrome.jsx",
@@ -57,7 +57,7 @@
       "path": "registry/blocks/flow-canvas/theme.js",
       "type": "registry:component",
       "target": "@components/makersclaw/blocks/flow-canvas/theme.js",
-      "content": "// React Flow in the workspace theme — the one place its look is mapped.\n//\n// React Flow paints itself from CSS variables (--xy-background-pattern-\n// color, --xy-selection-border…) and a few fixed rules in its stylesheet\n// (@xyflow/react/dist/style.css, imported by flow-canvas.jsx). Each one is\n// pointed at a token here, as Tailwind arbitrary properties on the flow's\n// root. Every class ends in `!`: the library's stylesheet is unlayered, and\n// an unlayered rule beats any Tailwind utility (those live in @layer\n// utilities) whatever its specificity; `!important` inside a layer is the\n// one thing that outranks it. Our own nodes and connectors draw with\n// token classes directly (nodes.jsx, edges.jsx), so the library's node and\n// edge colours are never seen.\nexport const THEME = [\n  // the canvas: the page's background with dots in the muted ink\n  \"[--xy-background-color:transparent]!\",\n  \"[--xy-background-pattern-color:var(--color-muted-foreground)]!\",\n  \"[&_.react-flow__background]:opacity-35!\",\n  // the marquee, and the box around a multi-selection\n  \"[&_.react-flow__selection]:bg-primary/8!\",\n  \"[&_.react-flow__selection]:border!\",\n  \"[&_.react-flow__selection]:border-solid!\",\n  \"[&_.react-flow__selection]:border-primary/70!\",\n  \"[&_.react-flow__selection]:rounded-sm!\",\n  \"[&_.react-flow__nodesselection-rect]:bg-transparent!\",\n  \"[&_.react-flow__nodesselection-rect]:border!\",\n  \"[&_.react-flow__nodesselection-rect]:border-dashed!\",\n  \"[&_.react-flow__nodesselection-rect]:border-primary/60!\",\n  \"[&_.react-flow__nodesselection-rect]:rounded-sm!\",\n  // the line drawn while a connector is being dragged out\n  \"[&_.react-flow__connection-path]:stroke-primary!\",\n  \"[&_.react-flow__connection-path]:[stroke-width:2]!\",\n  // cursors that match the tool (flow-canvas.jsx sets data-tool on the root)\n  \"[&_.react-flow__pane.selection]:cursor-default!\",\n  \"[&_.react-flow__node.draggable]:cursor-default!\",\n  \"[&_.react-flow__node.draggable.dragging]:cursor-grabbing!\",\n  \"data-[tool=hand]:[&_.react-flow__pane]:cursor-grab!\",\n  \"data-[tool=hand]:[&_.react-flow__pane.dragging]:cursor-grabbing!\",\n  \"data-[tool=hand]:[&_.react-flow__node]:cursor-grab!\",\n  \"data-[tool=place]:[&_.react-flow__pane]:cursor-crosshair!\",\n  \"data-[tool=text]:[&_.react-flow__pane]:cursor-text!\",\n  \"data-[tool=connector]:[&_.react-flow__node]:cursor-crosshair!\",\n  // keyboard focus on a card: a visible ring (the library turns it off)\n  \"[&_.react-flow__node:focus-visible]:outline-2!\",\n  \"[&_.react-flow__node:focus-visible]:outline-offset-4!\",\n  \"[&_.react-flow__node:focus-visible]:outline-ring!\",\n  \"[&_.react-flow__node:focus-visible]:[outline-style:solid]!\",\n  // frames: only their title and edge take the pointer, so a double-click\n  // or a marquee inside one lands on the canvas (nodes.jsx)\n  \"[&_.react-flow__node-frame]:pointer-events-none!\",\n  // the resize handles on a selected card\n  \"[&_.react-flow__resize-control.handle]:size-2.5!\",\n  \"[&_.react-flow__resize-control.handle]:rounded-xs!\",\n  \"[&_.react-flow__resize-control.handle]:border-primary!\",\n  \"[&_.react-flow__resize-control.handle]:bg-background!\",\n  \"[&_.react-flow__resize-control.handle]:pointer-events-auto!\",\n  \"[&_.react-flow__resize-control.line]:border-primary/0!\",\n  \"[&_.react-flow__resize-control.line]:pointer-events-auto!\",\n  \"[&_.react-flow__resize-control.line.left]:w-2!\",\n  \"[&_.react-flow__resize-control.line.right]:w-2!\",\n  \"[&_.react-flow__resize-control.line.top]:h-2!\",\n  \"[&_.react-flow__resize-control.line.bottom]:h-2!\",\n  // the minimap: a card with the board in muted ink\n  \"[--xy-minimap-background-color:var(--color-card)]!\",\n  \"[--xy-minimap-node-background-color:var(--color-muted-foreground)]!\",\n  \"[--xy-minimap-mask-background-color:var(--color-muted)]!\",\n  \"[&_.react-flow__minimap]:rounded-lg!\",\n  \"[&_.react-flow__minimap]:border!\",\n  \"[&_.react-flow__minimap]:border-border!\",\n  \"[&_.react-flow__minimap]:shadow-md!\",\n  \"[&_.react-flow__minimap]:overflow-hidden!\",\n  \"[&_.react-flow__minimap-node]:opacity-50!\",\n  \"[&_.react-flow__minimap-mask]:opacity-70!\",\n  // React Flow's credit: kept (they ask for it), in the muted ink\n  \"[&_.react-flow__attribution]:bg-transparent!\",\n  \"[&_.react-flow__attribution_a]:text-muted-foreground!\",\n  // panels: ours sit in the corners with our own spacing\n  \"[&_.react-flow__panel]:m-3!\",\n].join(\" \");\n\n// Colour TOKENS → classes, written out whole so Tailwind generates them. A\n// board stores the token name (\"chart-3\", \"warning\"); these turn it into\n// paint. A sticky is the card surface with the hue laid over it, so it\n// reads the same on a light or a dark workspace.\nexport const TINT = {\n  warning: \"bg-warning/35\",\n  \"chart-1\": \"bg-chart-1/25\",\n  \"chart-2\": \"bg-chart-2/30\",\n  \"chart-3\": \"bg-chart-3/30\",\n  \"chart-4\": \"bg-chart-4/30\",\n  \"chart-5\": \"bg-chart-5/30\",\n  success: \"bg-success/30\",\n  info: \"bg-info/30\",\n  destructive: \"bg-destructive/25\",\n  muted: \"bg-muted\",\n};\n/** A full-strength dot of the colour: the palette's swatches. */\nexport const SOLID = {\n  warning: \"bg-warning\",\n  \"chart-1\": \"bg-chart-1\",\n  \"chart-2\": \"bg-chart-2\",\n  \"chart-3\": \"bg-chart-3\",\n  \"chart-4\": \"bg-chart-4\",\n  \"chart-5\": \"bg-chart-5\",\n  success: \"bg-success\",\n  info: \"bg-info\",\n  destructive: \"bg-destructive\",\n  muted: \"bg-muted-foreground/40\",\n};\n/** Shapes (svg): a tinted fill over the card surface, the hue as the edge. */\nexport const FILL = {\n  warning: \"fill-warning/35\",\n  \"chart-1\": \"fill-chart-1/25\",\n  \"chart-2\": \"fill-chart-2/30\",\n  \"chart-3\": \"fill-chart-3/30\",\n  \"chart-4\": \"fill-chart-4/30\",\n  \"chart-5\": \"fill-chart-5/30\",\n  success: \"fill-success/30\",\n  info: \"fill-info/30\",\n  destructive: \"fill-destructive/25\",\n  muted: \"fill-muted\",\n};\nexport const STROKE = {\n  warning: \"stroke-warning\",\n  \"chart-1\": \"stroke-chart-1\",\n  \"chart-2\": \"stroke-chart-2\",\n  \"chart-3\": \"stroke-chart-3\",\n  \"chart-4\": \"stroke-chart-4\",\n  \"chart-5\": \"stroke-chart-5\",\n  success: \"stroke-success\",\n  info: \"stroke-info\",\n  destructive: \"stroke-destructive\",\n  muted: \"stroke-border\",\n};\n/** A frame's faint wash of its colour (none: the plain card surface). */\nexport const WASH = {\n  warning: \"bg-warning/8\",\n  \"chart-1\": \"bg-chart-1/8\",\n  \"chart-2\": \"bg-chart-2/8\",\n  \"chart-3\": \"bg-chart-3/8\",\n  \"chart-4\": \"bg-chart-4/8\",\n  \"chart-5\": \"bg-chart-5/8\",\n  success: \"bg-success/8\",\n  info: \"bg-info/8\",\n  destructive: \"bg-destructive/8\",\n  muted: \"bg-muted/60\",\n};\n/** A frame's edge in its colour. */\nexport const EDGE = {\n  warning: \"border-warning/60\",\n  \"chart-1\": \"border-chart-1/60\",\n  \"chart-2\": \"border-chart-2/60\",\n  \"chart-3\": \"border-chart-3/60\",\n  \"chart-4\": \"border-chart-4/60\",\n  \"chart-5\": \"border-chart-5/60\",\n  success: \"border-success/60\",\n  info: \"border-info/60\",\n  destructive: \"border-destructive/60\",\n  muted: \"border-border\",\n};\n/** An unknown token falls back to this. */\nexport const tone = (map, token, fallback = \"muted\") => map[token] ?? map[fallback];\n\n/** Every class for one colour token, for a block's own node types:\n *  colorClasses(\"chart-3\").tint → \"bg-chart-3/30\". */\nexport function colorClasses(token) {\n  return {\n    tint: tone(TINT, token),\n    solid: tone(SOLID, token),\n    fill: tone(FILL, token),\n    stroke: tone(STROKE, token),\n    wash: tone(WASH, token),\n    edge: tone(EDGE, token),\n  };\n}\n"
+      "content": "// React Flow in the workspace theme — the one place its look is mapped.\n//\n// React Flow paints itself from CSS variables (--xy-background-pattern-\n// color, --xy-selection-border…) and a few fixed rules in its stylesheet\n// (@xyflow/react/dist/style.css, imported by flow-canvas.jsx). Each one is\n// pointed at a token here, as Tailwind arbitrary properties on the flow's\n// root. Every class ends in `!`: the library's stylesheet is unlayered, and\n// an unlayered rule beats any Tailwind utility (those live in @layer\n// utilities) whatever its specificity; `!important` inside a layer is the\n// one thing that outranks it. Our own nodes and connectors draw with\n// token classes directly (nodes.jsx, edges.jsx), so the library's node and\n// edge colours are never seen.\n//\n// React Flow's classes are BEM, `react-flow__node`, and Tailwind reads an\n// underscore inside [...] as a space: written plainly, every rule below\n// compiled to `.react-flow node`, which matches nothing, and none of this\n// theme ever reached the page — the attribution was the library's grey box\n// with its grey text, unreadable on a dark workspace (makersclaw-store\n// BLOCKS.md, mind-maps 0.1.0). `\\_` keeps an underscore, and String.raw\n// keeps the backslash in the class name, where the rule Tailwind builds\n// from this file's text expects it. Every React Flow class below is\n// written rf`…`; test/cli.test.mjs refuses a plain one in any block.\nconst rf = String.raw;\nexport const THEME = [\n  // the canvas: the page's background with dots in the muted ink\n  \"[--xy-background-color:transparent]!\",\n  \"[--xy-background-pattern-color:var(--color-muted-foreground)]!\",\n  rf`[&_.react-flow\\_\\_background]:opacity-35!`,\n  // the marquee, and the box around a multi-selection\n  rf`[&_.react-flow\\_\\_selection]:bg-primary/8!`,\n  rf`[&_.react-flow\\_\\_selection]:border!`,\n  rf`[&_.react-flow\\_\\_selection]:border-solid!`,\n  rf`[&_.react-flow\\_\\_selection]:border-primary/70!`,\n  rf`[&_.react-flow\\_\\_selection]:rounded-sm!`,\n  rf`[&_.react-flow\\_\\_nodesselection-rect]:bg-transparent!`,\n  rf`[&_.react-flow\\_\\_nodesselection-rect]:border!`,\n  rf`[&_.react-flow\\_\\_nodesselection-rect]:border-dashed!`,\n  rf`[&_.react-flow\\_\\_nodesselection-rect]:border-primary/60!`,\n  rf`[&_.react-flow\\_\\_nodesselection-rect]:rounded-sm!`,\n  // the line drawn while a connector is being dragged out\n  rf`[&_.react-flow\\_\\_connection-path]:stroke-primary!`,\n  rf`[&_.react-flow\\_\\_connection-path]:[stroke-width:2]!`,\n  // cursors that match the tool (flow-canvas.jsx sets data-tool on the root)\n  rf`[&_.react-flow\\_\\_pane.selection]:cursor-default!`,\n  rf`[&_.react-flow\\_\\_node.draggable]:cursor-default!`,\n  rf`[&_.react-flow\\_\\_node.draggable.dragging]:cursor-grabbing!`,\n  rf`data-[tool=hand]:[&_.react-flow\\_\\_pane]:cursor-grab!`,\n  rf`data-[tool=hand]:[&_.react-flow\\_\\_pane.dragging]:cursor-grabbing!`,\n  rf`data-[tool=hand]:[&_.react-flow\\_\\_node]:cursor-grab!`,\n  rf`data-[tool=place]:[&_.react-flow\\_\\_pane]:cursor-crosshair!`,\n  rf`data-[tool=text]:[&_.react-flow\\_\\_pane]:cursor-text!`,\n  rf`data-[tool=connector]:[&_.react-flow\\_\\_node]:cursor-crosshair!`,\n  // keyboard focus on a card: a visible ring (the library turns it off)\n  rf`[&_.react-flow\\_\\_node:focus-visible]:outline-2!`,\n  rf`[&_.react-flow\\_\\_node:focus-visible]:outline-offset-4!`,\n  rf`[&_.react-flow\\_\\_node:focus-visible]:outline-ring!`,\n  rf`[&_.react-flow\\_\\_node:focus-visible]:[outline-style:solid]!`,\n  // frames: only their title and edge take the pointer, so a double-click\n  // or a marquee inside one lands on the canvas (nodes.jsx)\n  rf`[&_.react-flow\\_\\_node-frame]:pointer-events-none!`,\n  // the resize handles on a selected card\n  rf`[&_.react-flow\\_\\_resize-control.handle]:size-2.5!`,\n  rf`[&_.react-flow\\_\\_resize-control.handle]:rounded-xs!`,\n  rf`[&_.react-flow\\_\\_resize-control.handle]:border-primary!`,\n  rf`[&_.react-flow\\_\\_resize-control.handle]:bg-background!`,\n  rf`[&_.react-flow\\_\\_resize-control.handle]:pointer-events-auto!`,\n  rf`[&_.react-flow\\_\\_resize-control.line]:border-primary/0!`,\n  rf`[&_.react-flow\\_\\_resize-control.line]:pointer-events-auto!`,\n  rf`[&_.react-flow\\_\\_resize-control.line.left]:w-2!`,\n  rf`[&_.react-flow\\_\\_resize-control.line.right]:w-2!`,\n  rf`[&_.react-flow\\_\\_resize-control.line.top]:h-2!`,\n  rf`[&_.react-flow\\_\\_resize-control.line.bottom]:h-2!`,\n  // the minimap: a card with the board in muted ink\n  \"[--xy-minimap-background-color:var(--color-card)]!\",\n  \"[--xy-minimap-node-background-color:var(--color-muted-foreground)]!\",\n  \"[--xy-minimap-mask-background-color:var(--color-muted)]!\",\n  rf`[&_.react-flow\\_\\_minimap]:rounded-lg!`,\n  rf`[&_.react-flow\\_\\_minimap]:border!`,\n  rf`[&_.react-flow\\_\\_minimap]:border-border!`,\n  rf`[&_.react-flow\\_\\_minimap]:shadow-md!`,\n  rf`[&_.react-flow\\_\\_minimap]:overflow-hidden!`,\n  rf`[&_.react-flow\\_\\_minimap-node]:opacity-50!`,\n  rf`[&_.react-flow\\_\\_minimap-mask]:opacity-70!`,\n  // React Flow's credit: kept (they ask for it), in the muted ink\n  rf`[&_.react-flow\\_\\_attribution]:bg-transparent!`,\n  rf`[&_.react-flow\\_\\_attribution_a]:text-muted-foreground!`,\n  // panels: ours sit in the corners with our own spacing\n  rf`[&_.react-flow\\_\\_panel]:m-3!`,\n].join(\" \");\n\n// Colour TOKENS → classes, written out whole so Tailwind generates them. A\n// board stores the token name (\"chart-3\", \"warning\"); these turn it into\n// paint. A sticky is the card surface with the hue laid over it, so it\n// reads the same on a light or a dark workspace.\nexport const TINT = {\n  warning: \"bg-warning/35\",\n  \"chart-1\": \"bg-chart-1/25\",\n  \"chart-2\": \"bg-chart-2/30\",\n  \"chart-3\": \"bg-chart-3/30\",\n  \"chart-4\": \"bg-chart-4/30\",\n  \"chart-5\": \"bg-chart-5/30\",\n  success: \"bg-success/30\",\n  info: \"bg-info/30\",\n  destructive: \"bg-destructive/25\",\n  muted: \"bg-muted\",\n};\n/** A full-strength dot of the colour: the palette's swatches. */\nexport const SOLID = {\n  warning: \"bg-warning\",\n  \"chart-1\": \"bg-chart-1\",\n  \"chart-2\": \"bg-chart-2\",\n  \"chart-3\": \"bg-chart-3\",\n  \"chart-4\": \"bg-chart-4\",\n  \"chart-5\": \"bg-chart-5\",\n  success: \"bg-success\",\n  info: \"bg-info\",\n  destructive: \"bg-destructive\",\n  muted: \"bg-muted-foreground/40\",\n};\n/** Shapes (svg): a tinted fill over the card surface, the hue as the edge. */\nexport const FILL = {\n  warning: \"fill-warning/35\",\n  \"chart-1\": \"fill-chart-1/25\",\n  \"chart-2\": \"fill-chart-2/30\",\n  \"chart-3\": \"fill-chart-3/30\",\n  \"chart-4\": \"fill-chart-4/30\",\n  \"chart-5\": \"fill-chart-5/30\",\n  success: \"fill-success/30\",\n  info: \"fill-info/30\",\n  destructive: \"fill-destructive/25\",\n  muted: \"fill-muted\",\n};\nexport const STROKE = {\n  warning: \"stroke-warning\",\n  \"chart-1\": \"stroke-chart-1\",\n  \"chart-2\": \"stroke-chart-2\",\n  \"chart-3\": \"stroke-chart-3\",\n  \"chart-4\": \"stroke-chart-4\",\n  \"chart-5\": \"stroke-chart-5\",\n  success: \"stroke-success\",\n  info: \"stroke-info\",\n  destructive: \"stroke-destructive\",\n  muted: \"stroke-border\",\n};\n/** A frame's faint wash of its colour (none: the plain card surface). */\nexport const WASH = {\n  warning: \"bg-warning/8\",\n  \"chart-1\": \"bg-chart-1/8\",\n  \"chart-2\": \"bg-chart-2/8\",\n  \"chart-3\": \"bg-chart-3/8\",\n  \"chart-4\": \"bg-chart-4/8\",\n  \"chart-5\": \"bg-chart-5/8\",\n  success: \"bg-success/8\",\n  info: \"bg-info/8\",\n  destructive: \"bg-destructive/8\",\n  muted: \"bg-muted/60\",\n};\n/** A frame's edge in its colour. */\nexport const EDGE = {\n  warning: \"border-warning/60\",\n  \"chart-1\": \"border-chart-1/60\",\n  \"chart-2\": \"border-chart-2/60\",\n  \"chart-3\": \"border-chart-3/60\",\n  \"chart-4\": \"border-chart-4/60\",\n  \"chart-5\": \"border-chart-5/60\",\n  success: \"border-success/60\",\n  info: \"border-info/60\",\n  destructive: \"border-destructive/60\",\n  muted: \"border-border\",\n};\n/** An unknown token falls back to this. */\nexport const tone = (map, token, fallback = \"muted\") => map[token] ?? map[fallback];\n\n/** Every class for one colour token, for a block's own node types:\n *  colorClasses(\"chart-3\").tint → \"bg-chart-3/30\". */\nexport function colorClasses(token) {\n  return {\n    tint: tone(TINT, token),\n    solid: tone(SOLID, token),\n    fill: tone(FILL, token),\n    stroke: tone(STROKE, token),\n    wash: tone(WASH, token),\n    edge: tone(EDGE, token),\n  };\n}\n"
     },
     {
       "path": "registry/blocks/flow-canvas/README.md",
@@ -86,7 +86,7 @@
   "docs": "Installed to components/makersclaw/blocks/flow-canvas. Import: import { FlowCanvas, useFlowCanvas, useCanvas, NodeShell, NodeHandles, EditableText, Palette, StickySwatch, ColorDot, ShapeGlyph, colorClasses, emptyBoard, createNode, createEdge, cleanBoard, boardToText, boardToMarkdown, autoLayout, snapToCell, frameContents, historyReducer, starterTemplates } from \"@/components/makersclaw/blocks/flow-canvas\". Props and an example: components/makersclaw/blocks/flow-canvas/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "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)."
     }
   }

package/r/footer.json

@@ -5,7 +5,7 @@
   "title": "Footer",
   "description": "A public site's footer: brand and tagline, link columns or one row of links, social buttons in the kit's brand marks (X, LinkedIn, GitHub, YouTube, Instagram, Facebook), and the legal line with its links; optionally a newsletter sign-up with consent (validates, saves through an async onSubscribe returning { ok }, shows the failure), a call to action, a large brand statement, language and currency selects, and a version badge. Simple, columns or centred.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -45,7 +45,7 @@
   "docs": "Installed to components/makersclaw/blocks/footer. Import: import { Footer } from \"@/components/makersclaw/blocks/footer\". Props and an example: components/makersclaw/blocks/footer/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "useWhen": "The bottom of every page of a public site: a marketing site, a docs hub, a shop, a customer portal. Not for an app's own status bar or a toolbar pinned to the bottom of a screen."
     }
   }

package/r/gantt.json

@@ -5,8 +5,8 @@
   "title": "Gantt",
   "description": "The Gantt view of work, like Linear's timeline or TeamGantt: a task list on the left (groups that fold, subtasks indented under a summary bar) beside a timeline with a two-tier date header, bars coloured by project or status with their progress, milestones as diamonds, dependency arrows (red when the dates disagree), a today line and weekend shading. Drag a bar to move it, an edge to change its start or end, the dot past its end onto another bar to link them; tasks waiting on a moved one slide along while you drag and the finish date shows what the move cost. Zoom day, week, month or quarter; highlight the critical path; click an empty row to schedule an undated task; quick-add per group; arrow keys move a focused bar; search, filters, group and sort from the shared toolbar. One async onChange saves every change; failures roll back with a notice.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/task-model.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/task-model.json"
   ],
   "dependencies": [],
   "files": [
@@ -63,7 +63,7 @@
   "docs": "Installed to components/makersclaw/blocks/gantt. Import: import { Gantt, ZOOMS, ganttRange, headerTiers, planMove, afterBlockersPatch, isMilestone, summarySpan, arrowPath } from \"@/components/makersclaw/blocks/gantt\". Props and an example: components/makersclaw/blocks/gantt/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "useWhen": "A screen that plans dated work and shows what waits on what: a launch plan, a project schedule, a content calendar with lead times, an office move, a release. Not for an undated to-do list (task-list), stage columns (board), or days on a month grid (calendar)."
     }
   }

package/r/job-panel.json

@@ -5,7 +5,7 @@
   "title": "JobPanel",
   "description": "The panel that follows work the founder asked the app's agent for (useJob): each step's label as it runs, Stop, \"Needs your answer\" with Answer while the agent waits on the founder, \"Queued · after …\" while it waits its turn, then done or the reason it stopped — and nothing on screen when no job runs. variant=\"generator\" wraps it in a prompt, the surface's options, Generate and a results shelf, with no model, provider or API key of its own.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -52,7 +52,7 @@
   "docs": "Installed to components/makersclaw/blocks/job-panel. Import: import { JobPanel } from \"@/components/makersclaw/blocks/job-panel\". Props and an example: components/makersclaw/blocks/job-panel/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "useWhen": "A surface has a verb that asks the agent to make or find something (\"Generate a launch plan\", \"Find 20 leads\", \"Plan next sprint\") and the founder should watch it happen where the result will land. variant=\"generator\" when the screen IS the place to ask: a prompt and a few options, the results under them (product photos, ad copy, names)."
     }
   }

package/r/json-editor.json

@@ -5,8 +5,8 @@
   "title": "JsonEditor",
   "description": "A JSON editor in the workspace theme with two views of one value: a Tree of folding rows (edit a value or rename a key in place, add keys and items, change a type, copy a path, delete with Undo, arrow keys throughout) and Code (the code-editor block in JSON mode). Checked as it changes: the status line says what is wrong in plain words and which line, and clicking it goes there. A Format button, copy as pretty or one-line JSON, a friendly empty state with starters, and an optional Save that is optimistic and rolls back with a notice when it fails.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/code-editor.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/code-editor.json"
   ],
   "dependencies": [],
   "files": [
@@ -59,7 +59,7 @@
   "docs": "Installed to components/makersclaw/blocks/json-editor. Import: import { JsonEditor, JsonTree, typeOf, pathLabel, getAt, setAt, removeAt, insertAt, renameKey, flattenTree, expandedTo, summary, preview } from \"@/components/makersclaw/blocks/json-editor\". Props and an example: components/makersclaw/blocks/json-editor/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "useWhen": "A screen edits or inspects a JSON value: an integration's settings, a webhook payload, a record's metadata or custom fields column (jsonb), an API response, feature flags. Not for editing SQL or other code (code-editor), a form of known fields (record-form), or a table of rows (data-table)."
     }
   }

package/r/map.json

@@ -5,7 +5,7 @@
   "title": "MapView",
   "description": "An interactive map (MapLibre) in the workspace theme: places from rows as markers in token tones or your own kit content, clustered when they crowd, a popup with kit parts, a searchable list beside the map that shares one selection and hover with it, fit-to-all, zoom controls, draggable markers with an optimistic save, and tinted areas for territories. Light and dark tiles follow the workspace scheme (OpenFreeMap by default, no key); `styleUrl` swaps them. Helpers for bounds, clustering and distances run anywhere.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json"
   ],
   "dependencies": [
     "maplibre-gl@6.11.1",
@@ -82,7 +82,7 @@
   "docs": "Installed to components/makersclaw/blocks/map. Import: import { MapView, useMapView, MAP_STYLES, DEFAULT_STYLE, TONES, readPosition, boundsOf, inBounds, clusterPoints, zoomToReveal, distanceKm, formatDistance, sortByDistance } from \"@/components/makersclaw/blocks/map\". Props and an example: components/makersclaw/blocks/map/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "useWhen": "A screen shows records that have a place: customers, stores, offices, field visits, deliveries, events, territories. The location-map and store-locator blocks and the Map view of work-views are built on it. Not for a chart of numbers by region (chart) or a hand-drawn diagram (sketch-canvas, flow-canvas)."
     }
   }

package/r/menubar.json

@@ -5,7 +5,7 @@
   "title": "Menubar",
   "description": "A desktop app's menu bar — File, Edit, View, Help — each a menu of actions with shortcuts, checkboxes, radio groups and submenus; click to open, hover to switch, arrow keys along the bar; one menu button on a phone.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.2/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -45,7 +45,7 @@
   "docs": "Installed to components/makersclaw/blocks/menubar. Import: import { Menubar } from \"@/components/makersclaw/blocks/menubar\". Props and an example: components/makersclaw/blocks/menubar/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.2",
       "useWhen": "A document-style tool with many commands grouped by kind: an editor, a canvas, a spreadsheet, an admin console that mimics a desktop app. Not for a site's navigation (a navigation menu) or one record's actions (a menu on the row)."
     }
   }