makersclaw 0.3.2 → 0.5.1

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.3.2/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/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.3.2",
+      "version": "0.5.1",
       "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.3.2/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/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.3.2",
+      "version": "0.5.1",
       "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.3.2/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/task-model.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/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.3.2",
+      "version": "0.5.1",
       "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

@@ -3,9 +3,9 @@
   "name": "job-panel",
   "type": "registry:block",
   "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, 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.",
+  "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.3.2/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -19,13 +19,13 @@
       "path": "registry/blocks/job-panel/job-panel.jsx",
       "type": "registry:component",
       "target": "@components/makersclaw/blocks/job-panel/job-panel.jsx",
-      "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { Button, Card, Empty, Field, Icon, Skeleton, Textarea, cx } from \"../../ui\";\n\n// JobPanel — the panel that follows work the founder asked the app's\n// agent for (useJob in lib/hooks.js, README §5 \"Commissioning work\"). It\n// keeps the four rules a hand-drawn panel breaks: it is not there when\n// nothing runs, it shows each step's label (the founder's phrase, never\n// the tool's name), the agent's text is its account and not the\n// deliverable (the rows are), and Stop / Close are always one press away.\n//\n//   const job = useJob();\n//   <Button onClick={() => job.start(\"Draft a launch plan for Rowhouse\")}>Generate a launch plan</Button>\n//   <JobPanel job={job} title=\"Drafting the launch plan\" doneTitle=\"Launch plan drafted\" />\n//\n// variant=\"generator\" is the same panel inside a small studio: a prompt,\n// the surface's own options, Generate, then the results the job made. The\n// block never calls a model and takes no API key or provider: Generate\n// hands the prompt to the app's agent (job.start, or `onGenerate`), and\n// the results are the rows the job wrote, passed back in as `results`.\n//\n//   <JobPanel variant=\"generator\" job={job} promptLabel=\"Describe the photo\"\n//             options={<Field …><Select …/></Field>}\n//             onGenerate={(prompt) => job.start(`Make a product photo: ${prompt}. Size ${size}.`)}\n//             results={photos.map((p) => <PhotoCard key={p.id} photo={p} />)} />\n\nfunction StepMark({ status }) {\n  if (status === \"done\") return <Icon name=\"check\" size={14} className=\"shrink-0 text-success\" />;\n  if (status === \"failed\") return <Icon name=\"warning\" size={14} className=\"shrink-0 text-destructive\" />;\n  return <span aria-hidden=\"true\" className=\"mx-[3px] size-2 shrink-0 animate-pulse rounded-full bg-primary\" />;\n}\n\nexport function JobPanel({ variant = \"panel\", ...props }) {\n  if (variant === \"generator\") return <Generator {...props} />;\n  return <Panel {...props} />;\n}\n\nfunction Panel({\n  job,\n  title = \"Working on it\",\n  doneTitle = \"Done\",\n  failedTitle = \"It stopped\",\n  onRetry,\n  autoClose = 6000,\n  maxSteps = 6,\n  showText = true,\n  className,\n}) {\n  const textRef = useRef(null);\n  const running = Boolean(job?.running);\n  const failed = !running && Boolean(job?.error);\n  const done = !running && !failed && Boolean(job?.finishedAt);\n\n  // The agent's account grows at the bottom; keep the newest line in view.\n  useEffect(() => {\n    const el = textRef.current;\n    if (el) el.scrollTop = el.scrollHeight;\n  }, [job?.text]);\n\n  // A clean finish closes itself: the rows it made are the answer.\n  useEffect(() => {\n    if (!done || !autoClose || !job?.reset) return undefined;\n    const t = setTimeout(() => job.reset(), autoClose);\n    return () => clearTimeout(t);\n  }, [done, autoClose, job?.finishedAt]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!job || !(running || failed || done)) return null;\n\n  const steps = job.steps ?? [];\n  const hidden = Math.max(0, steps.length - maxSteps);\n  const visible = steps.slice(hidden);\n  const heading = running ? title : failed ? failedTitle : doneTitle;\n\n  return (\n    <section\n      aria-label={heading}\n      className={cx(\"rounded-lg border bg-card p-4 text-card-foreground\", failed ? \"border-destructive/50\" : \"border-border\", className)}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <p aria-live=\"polite\" className=\"flex items-center gap-2 text-sm font-semibold\">\n            {running ? <StepMark status=\"running\" /> : <StepMark status={failed ? \"failed\" : \"done\"} />}\n            <span className=\"min-w-0\">{heading}</span>\n          </p>\n          {failed ? <p className=\"mt-1 text-sm text-muted-foreground\">{job.error}</p> : null}\n        </div>\n        <div className=\"flex shrink-0 gap-2\">\n          {failed && onRetry ? (\n            <Button size=\"sm\" variant=\"secondary\" onClick={onRetry}>\n              Try again\n            </Button>\n          ) : null}\n          {running ? (\n            <Button size=\"sm\" variant=\"quiet\" onClick={() => job.cancel?.()}>\n              Stop\n            </Button>\n          ) : (\n            <Button size=\"sm\" variant=\"quiet\" onClick={() => job.reset?.()}>\n              Close\n            </Button>\n          )}\n        </div>\n      </div>\n      {visible.length ? (\n        <ol className=\"mt-3 grid gap-1.5 text-sm\">\n          {hidden > 0 ? <li className=\"text-xs text-muted-foreground\">{hidden} earlier {hidden === 1 ? \"step\" : \"steps\"}</li> : null}\n          {visible.map((step, i) => (\n            <li key={`${hidden + i}-${step.name}`} className=\"flex items-center gap-2\">\n              <StepMark status={step.status} />\n              <span className={step.status === \"running\" ? \"text-foreground\" : \"text-muted-foreground\"}>{step.label ?? \"Working\"}</span>\n            </li>\n          ))}\n        </ol>\n      ) : null}\n      {showText && job.text ? (\n        <div\n          ref={textRef}\n          className=\"mt-3 max-h-32 overflow-y-auto whitespace-pre-wrap border-t border-border pt-3 text-xs leading-relaxed text-muted-foreground\"\n        >\n          {job.text}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\nconst isEmpty = (node) => node == null || node === false || node === \"\" || (Array.isArray(node) && node.filter(Boolean).length === 0);\n\n// The generator: a form (prompt, options, Generate), the running job's\n// panel under it, and the results. Stacked, or side by side from lg up.\nfunction Generator({\n  job,\n  prompt: controlled,\n  defaultPrompt = \"\",\n  onPromptChange,\n  onGenerate,\n  heading,\n  description,\n  promptLabel = \"What should it make?\",\n  placeholder = \"Describe what you want…\",\n  promptHint,\n  promptRows = 4,\n  options,\n  generateLabel = \"Generate\",\n  generateIcon = \"wand\",\n  canGenerateEmpty = false,\n  disabled = false,\n  aside,\n  results,\n  resultsTitle = \"Results\",\n  resultsActions,\n  resultsColumns = 1,\n  placeholderResult,\n  emptyTitle = \"Nothing made yet\",\n  emptyBody = \"Describe what you want and press Generate. What it makes lands here.\",\n  emptyState,\n  layout = \"stacked\",\n  title = \"Working on it\",\n  doneTitle = \"Done\",\n  failedTitle = \"It stopped\",\n  onRetry,\n  autoClose = 6000,\n  maxSteps = 6,\n  showText = true,\n  className,\n}) {\n  const id = useId();\n  const [own, setOwn] = useState(defaultPrompt);\n  const [error, setError] = useState(null);\n  const [starting, setStarting] = useState(false);\n  const lastPrompt = useRef(\"\");\n  const value = controlled ?? own;\n  const setValue = (v) => {\n    if (controlled === undefined) setOwn(v);\n    onPromptChange?.(v);\n  };\n  const running = Boolean(job?.running);\n  const canGenerate = !disabled && !running && !starting && (canGenerateEmpty || value.trim().length > 0);\n\n  async function generate(text = value) {\n    if (disabled || running || starting || (!canGenerateEmpty && !text.trim())) return;\n    lastPrompt.current = text.trim();\n    setError(null);\n    setStarting(true);\n    let r;\n    try {\n      r = onGenerate ? await onGenerate(text.trim()) : await job?.start?.(text.trim());\n    } catch (e) {\n      r = { ok: false, error: e?.message ?? String(e) };\n    }\n    setStarting(false);\n    if (r && r.ok === false && !r.aborted) setError(r.error ?? \"It did not start\");\n  }\n  // useJob's start resolves when the job ends; a failure it reports is\n  // already the panel's error, so the field says only what the panel does not.\n  const fieldError = error && !job?.error ? error : null;\n\n  const cols = { 1: \"grid-cols-1\", 2: \"grid-cols-1 sm:grid-cols-2\", 3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\", 4: \"grid-cols-2 lg:grid-cols-4\" };\n  const empty = isEmpty(results);\n  const split = layout === \"split\";\n\n  const form = (\n    <Card title={heading} description={description} className=\"min-w-0\">\n      <div className=\"grid gap-4\">\n        <Field id={id} label={promptLabel} hint={promptHint} error={fieldError ?? undefined}>\n          <Textarea\n            id={id}\n            rows={promptRows}\n            value={value}\n            placeholder={placeholder}\n            disabled={disabled}\n            invalid={Boolean(fieldError)}\n            aria-describedby={fieldError ? `${id}-error` : promptHint ? `${id}-hint` : undefined}\n            onChange={(e) => setValue(e.target.value)}\n            onKeyDown={(e) => {\n              // Cmd/Ctrl+Enter generates; Enter alone is a new line.\n              if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey) && !e.nativeEvent.isComposing) {\n                e.preventDefault();\n                generate();\n              }\n            }}\n          />\n        </Field>\n        {options ? <div className=\"grid gap-4 sm:grid-cols-2\">{options}</div> : null}\n        <div className=\"flex flex-wrap items-center gap-3\">\n          <Button variant=\"primary\" icon={running || starting ? undefined : generateIcon} loading={starting} disabled={!canGenerate} onClick={() => generate()}>\n            {running ? \"Working…\" : generateLabel}\n          </Button>\n          <p aria-hidden=\"true\" className=\"hidden text-xs text-muted-foreground md:block\">\n            ⌘/Ctrl + Enter\n          </p>\n        </div>\n        <Panel\n          job={job}\n          title={title}\n          doneTitle={doneTitle}\n          failedTitle={failedTitle}\n          onRetry={onRetry ?? (lastPrompt.current || canGenerateEmpty ? () => generate(lastPrompt.current) : undefined)}\n          autoClose={autoClose}\n          maxSteps={maxSteps}\n          showText={showText}\n        />\n      </div>\n    </Card>\n  );\n\n  const shelf = (\n    <section aria-label={resultsTitle} aria-busy={running || undefined} className=\"grid min-w-0 content-start gap-3\">\n      <div className=\"flex min-h-9 items-center justify-between gap-3\">\n        <h3 className=\"text-sm font-semibold\">{resultsTitle}</h3>\n        {resultsActions ? <div className=\"flex shrink-0 items-center gap-2\">{resultsActions}</div> : null}\n      </div>\n      {running ? (\n        <div className={cx(\"grid gap-3\", cols[resultsColumns] ?? cols[1])}>\n          {placeholderResult ?? <Skeleton shape=\"rect\" className=\"h-32 w-full\" />}\n        </div>\n      ) : null}\n      {empty ? (\n        running ? null : emptyState ?? <Empty icon=\"sparkles\" title={emptyTitle} body={emptyBody} className=\"rounded-lg border border-dashed border-border\" />\n      ) : (\n        <div className={cx(\"grid gap-3\", cols[resultsColumns] ?? cols[1])}>{results}</div>\n      )}\n    </section>\n  );\n\n  return (\n    <div className={cx(\"grid gap-4\", split && \"lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] lg:items-start\", className)}>\n      <div className=\"grid min-w-0 gap-4\">\n        {form}\n        {aside}\n      </div>\n      {shelf}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { Button, Card, Empty, Field, Icon, Skeleton, Textarea, cx } from \"../../ui\";\n\n// JobPanel — the panel that follows work the founder asked the app's\n// agent for (useJob in lib/hooks.js, README §5 \"Commissioning work\"). It\n// keeps the four rules a hand-drawn panel breaks: it is not there when\n// nothing runs, it shows each step's label (the founder's phrase, never\n// the tool's name), the agent's text is its account and not the\n// deliverable (the rows are), and Stop / Close are always one press away\n// (Answer in Stop's place while the agent waits on the founder).\n//\n//   const job = useJob();\n//   <Button onClick={() => job.start(\"Draft a launch plan for Rowhouse\")}>Generate a launch plan</Button>\n//   <JobPanel job={job} title=\"Drafting the launch plan\" doneTitle=\"Launch plan drafted\" />\n//\n// variant=\"generator\" is the same panel inside a small studio: a prompt,\n// the surface's own options, Generate, then the results the job made. The\n// block never calls a model and takes no API key or provider: Generate\n// hands the prompt to the app's agent (job.start, or `onGenerate`), and\n// the results are the rows the job wrote, passed back in as `results`.\n//\n//   <JobPanel variant=\"generator\" job={job} promptLabel=\"Describe the photo\"\n//             options={<Field …><Select …/></Field>}\n//             onGenerate={(prompt) => job.start(`Make a product photo: ${prompt}. Size ${size}.`)}\n//             results={photos.map((p) => <PhotoCard key={p.id} photo={p} />)} />\n//\n// Since 0.4.0 a job is a request, and its conversation lives in the\n// desk's agent column: the agent's questions and the founder's yes are\n// there, not here. So the panel reads two more states off the job, when\n// the job has them: needsYou (the agent waits on the founder — the\n// heading says so and Answer, in Stop's place, opens the question in the\n// column) and queued (one job per list runs at a time — the heading names\n// the job it waits behind). A 0.3.x job object has neither and draws\n// exactly as it always did.\n\nfunction StepMark({ status }) {\n  if (status === \"done\") return <Icon name=\"check\" size={14} className=\"shrink-0 text-success\" />;\n  if (status === \"failed\") return <Icon name=\"warning\" size={14} className=\"shrink-0 text-destructive\" />;\n  if (status === \"needs\") return <Icon name=\"circle-help\" size={14} className=\"shrink-0 text-warning\" />;\n  if (status === \"queued\") return <Icon name=\"clock\" size={14} className=\"shrink-0 text-muted-foreground\" />;\n  return <span aria-hidden=\"true\" className=\"mx-[3px] size-2 shrink-0 animate-pulse rounded-full bg-primary\" />;\n}\n\nexport function JobPanel({ variant = \"panel\", ...props }) {\n  if (variant === \"generator\") return <Generator {...props} />;\n  return <Panel {...props} />;\n}\n\n// Waiting on the founder or on another job is still a live job: not over,\n// only paused. useJob counts both as running; an object of its own shape\n// that sets only the flag gets the same panel.\nconst isLive = (job) => Boolean(job?.running || job?.needsYou || job?.queued);\n\nfunction Panel({\n  job,\n  title = \"Working on it\",\n  doneTitle = \"Done\",\n  failedTitle = \"It stopped\",\n  needsTitle = \"Needs your answer\",\n  onRetry,\n  autoClose = 6000,\n  maxSteps = 6,\n  showText = true,\n  className,\n}) {\n  const textRef = useRef(null);\n  const needsYou = Boolean(job?.needsYou);\n  const queued = !needsYou && Boolean(job?.queued);\n  const running = isLive(job);\n  const failed = !running && Boolean(job?.error);\n  const done = !running && !failed && Boolean(job?.finishedAt);\n\n  // The agent's account grows at the bottom; keep the newest line in view.\n  useEffect(() => {\n    const el = textRef.current;\n    if (el) el.scrollTop = el.scrollHeight;\n  }, [job?.text]);\n\n  // A clean finish closes itself: the rows it made are the answer.\n  useEffect(() => {\n    if (!done || !autoClose || !job?.reset) return undefined;\n    const t = setTimeout(() => job.reset(), autoClose);\n    return () => clearTimeout(t);\n  }, [done, autoClose, job?.finishedAt]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!job || !(running || failed || done)) return null;\n\n  // What the job waits on, if anything: its mark replaces the pulse.\n  const waiting = needsYou ? \"needs\" : queued ? \"queued\" : null;\n  const heading = needsYou\n    ? needsTitle\n    : queued\n      ? `Queued · after ${job.queuedAfter?.after_title ?? \"the job before it\"}`\n      : running\n        ? title\n        : failed\n          ? failedTitle\n          : doneTitle;\n  // A queued request's one step is its line, and its line is this\n  // heading again: say it once.\n  const steps = (job.steps ?? []).filter((step) => !(queued && step.label === heading));\n  const hidden = Math.max(0, steps.length - maxSteps);\n  const visible = steps.slice(hidden);\n  // The question is in the desk's agent column; open() takes the founder\n  // there. Without it there is nowhere to point, and Stop stays.\n  const answer = needsYou && typeof job.open === \"function\";\n\n  return (\n    <section\n      aria-label={heading}\n      className={cx(\n        \"rounded-lg border bg-card p-4 text-card-foreground\",\n        failed ? \"border-destructive/50\" : needsYou ? \"border-warning/50\" : \"border-border\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <p aria-live=\"polite\" className=\"flex items-center gap-2 text-sm font-semibold\">\n            <StepMark status={waiting ?? (running ? \"running\" : failed ? \"failed\" : \"done\")} />\n            <span className=\"min-w-0\">{heading}</span>\n          </p>\n          {failed ? <p className=\"mt-1 text-sm text-muted-foreground\">{job.error}</p> : null}\n          {needsYou ? <p className=\"mt-1 text-sm text-muted-foreground\">The question is in the agent column.</p> : null}\n        </div>\n        <div className=\"flex shrink-0 gap-2\">\n          {failed && onRetry ? (\n            <Button size=\"sm\" variant=\"secondary\" onClick={onRetry}>\n              Try again\n            </Button>\n          ) : null}\n          {answer ? (\n            <Button size=\"sm\" variant=\"secondary\" onClick={() => job.open()}>\n              Answer\n            </Button>\n          ) : running ? (\n            <Button size=\"sm\" variant=\"quiet\" onClick={() => job.cancel?.()}>\n              Stop\n            </Button>\n          ) : (\n            <Button size=\"sm\" variant=\"quiet\" onClick={() => job.reset?.()}>\n              Close\n            </Button>\n          )}\n        </div>\n      </div>\n      {visible.length ? (\n        <ol className=\"mt-3 grid gap-1.5 text-sm\">\n          {hidden > 0 ? <li className=\"text-xs text-muted-foreground\">{hidden} earlier {hidden === 1 ? \"step\" : \"steps\"}</li> : null}\n          {visible.map((step, i) => (\n            <li key={`${hidden + i}-${step.name}`} className=\"flex items-center gap-2\">\n              <StepMark status={waiting && step.status === \"running\" ? waiting : step.status} />\n              <span className={step.status === \"running\" ? \"text-foreground\" : \"text-muted-foreground\"}>{step.label ?? \"Working\"}</span>\n            </li>\n          ))}\n        </ol>\n      ) : null}\n      {/* The agent's account, on the 0.3.x path. A request's text is empty\n          (its account is in the column), so the area is not drawn. */}\n      {showText && job.text ? (\n        <div\n          ref={textRef}\n          className=\"mt-3 max-h-32 overflow-y-auto whitespace-pre-wrap border-t border-border pt-3 text-xs leading-relaxed text-muted-foreground\"\n        >\n          {job.text}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\nconst isEmpty = (node) => node == null || node === false || node === \"\" || (Array.isArray(node) && node.filter(Boolean).length === 0);\n\n// The generator: a form (prompt, options, Generate), the running job's\n// panel under it, and the results. Stacked, or side by side from lg up.\nfunction Generator({\n  job,\n  prompt: controlled,\n  defaultPrompt = \"\",\n  onPromptChange,\n  onGenerate,\n  heading,\n  description,\n  promptLabel = \"What should it make?\",\n  placeholder = \"Describe what you want…\",\n  promptHint,\n  promptRows = 4,\n  options,\n  generateLabel = \"Generate\",\n  generateIcon = \"wand\",\n  canGenerateEmpty = false,\n  disabled = false,\n  aside,\n  results,\n  resultsTitle = \"Results\",\n  resultsActions,\n  resultsColumns = 1,\n  placeholderResult,\n  emptyTitle = \"Nothing made yet\",\n  emptyBody = \"Describe what you want and press Generate. What it makes lands here.\",\n  emptyState,\n  layout = \"stacked\",\n  title = \"Working on it\",\n  doneTitle = \"Done\",\n  failedTitle = \"It stopped\",\n  needsTitle = \"Needs your answer\",\n  onRetry,\n  autoClose = 6000,\n  maxSteps = 6,\n  showText = true,\n  className,\n}) {\n  const id = useId();\n  const [own, setOwn] = useState(defaultPrompt);\n  const [error, setError] = useState(null);\n  const [starting, setStarting] = useState(false);\n  const lastPrompt = useRef(\"\");\n  const value = controlled ?? own;\n  const setValue = (v) => {\n    if (controlled === undefined) setOwn(v);\n    onPromptChange?.(v);\n  };\n  const running = isLive(job);\n  const canGenerate = !disabled && !running && !starting && (canGenerateEmpty || value.trim().length > 0);\n\n  async function generate(text = value) {\n    if (disabled || running || starting || (!canGenerateEmpty && !text.trim())) return;\n    lastPrompt.current = text.trim();\n    setError(null);\n    setStarting(true);\n    let r;\n    try {\n      r = onGenerate ? await onGenerate(text.trim()) : await job?.start?.(text.trim());\n    } catch (e) {\n      r = { ok: false, error: e?.message ?? String(e) };\n    }\n    setStarting(false);\n    if (r && r.ok === false && !r.aborted) setError(r.error ?? \"It did not start\");\n  }\n  // useJob's start resolves when the ask is taken (on a 0.3.x claw, when\n  // the job ends); a failure it reports is already the panel's error, so\n  // the field says only what the panel does not.\n  const fieldError = error && !job?.error ? error : null;\n\n  const cols = { 1: \"grid-cols-1\", 2: \"grid-cols-1 sm:grid-cols-2\", 3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\", 4: \"grid-cols-2 lg:grid-cols-4\" };\n  const empty = isEmpty(results);\n  const split = layout === \"split\";\n\n  const form = (\n    <Card title={heading} description={description} className=\"min-w-0\">\n      <div className=\"grid gap-4\">\n        <Field id={id} label={promptLabel} hint={promptHint} error={fieldError ?? undefined}>\n          <Textarea\n            id={id}\n            rows={promptRows}\n            value={value}\n            placeholder={placeholder}\n            disabled={disabled}\n            invalid={Boolean(fieldError)}\n            aria-describedby={fieldError ? `${id}-error` : promptHint ? `${id}-hint` : undefined}\n            onChange={(e) => setValue(e.target.value)}\n            onKeyDown={(e) => {\n              // Cmd/Ctrl+Enter generates; Enter alone is a new line.\n              if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey) && !e.nativeEvent.isComposing) {\n                e.preventDefault();\n                generate();\n              }\n            }}\n          />\n        </Field>\n        {options ? <div className=\"grid gap-4 sm:grid-cols-2\">{options}</div> : null}\n        <div className=\"flex flex-wrap items-center gap-3\">\n          <Button variant=\"primary\" icon={running || starting ? undefined : generateIcon} loading={starting} disabled={!canGenerate} onClick={() => generate()}>\n            {running ? \"Working…\" : generateLabel}\n          </Button>\n          <p aria-hidden=\"true\" className=\"hidden text-xs text-muted-foreground md:block\">\n            ⌘/Ctrl + Enter\n          </p>\n        </div>\n        <Panel\n          job={job}\n          title={title}\n          doneTitle={doneTitle}\n          failedTitle={failedTitle}\n          needsTitle={needsTitle}\n          onRetry={onRetry ?? (lastPrompt.current || canGenerateEmpty ? () => generate(lastPrompt.current) : undefined)}\n          autoClose={autoClose}\n          maxSteps={maxSteps}\n          showText={showText}\n        />\n      </div>\n    </Card>\n  );\n\n  const shelf = (\n    <section aria-label={resultsTitle} aria-busy={running || undefined} className=\"grid min-w-0 content-start gap-3\">\n      <div className=\"flex min-h-9 items-center justify-between gap-3\">\n        <h3 className=\"text-sm font-semibold\">{resultsTitle}</h3>\n        {resultsActions ? <div className=\"flex shrink-0 items-center gap-2\">{resultsActions}</div> : null}\n      </div>\n      {running ? (\n        <div className={cx(\"grid gap-3\", cols[resultsColumns] ?? cols[1])}>\n          {placeholderResult ?? <Skeleton shape=\"rect\" className=\"h-32 w-full\" />}\n        </div>\n      ) : null}\n      {empty ? (\n        running ? null : emptyState ?? <Empty icon=\"sparkles\" title={emptyTitle} body={emptyBody} className=\"rounded-lg border border-dashed border-border\" />\n      ) : (\n        <div className={cx(\"grid gap-3\", cols[resultsColumns] ?? cols[1])}>{results}</div>\n      )}\n    </section>\n  );\n\n  return (\n    <div className={cx(\"grid gap-4\", split && \"lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] lg:items-start\", className)}>\n      <div className=\"grid min-w-0 gap-4\">\n        {form}\n        {aside}\n      </div>\n      {shelf}\n    </div>\n  );\n}\n"
     },
     {
       "path": "registry/blocks/job-panel/README.md",
       "type": "registry:file",
       "target": "@components/makersclaw/blocks/job-panel/README.md",
-      "content": "# JobPanel\n\nThe panel that follows work the founder asked the app's agent for. It\nshows each step's label as the agent works, a Stop button while it runs,\nthen \"done\" (closing itself a few seconds later) or the reason it\nstopped. When no job runs it renders nothing — a panel that is always\nthere is a monitoring console, and apps do not have one.\n\n```jsx\nimport { JobPanel } from \"../components/blocks/job-panel\";   // a Makersclaw app (\"./blocks/job-panel\" from components/)\nimport { JobPanel } from \"@/components/makersclaw/blocks/job-panel\";   // a shadcn project\n```\n\nA client component. It takes the object `useJob()` returns (lib/hooks.js,\nREADME §5 \"Commissioning work\") and draws it; starting the job stays with\nyour surface.\n\n`variant=\"generator\"` is the panel inside a small studio: a prompt, your\noptions, Generate, the running job, and a shelf of what it made. It holds\nno model, provider or API key: Generate hands the prompt to the app's\nagent (`job.start`, or your `onGenerate`), the agent writes rows, and you\npass those rows back in as `results`.\n\n## Props\n\n- `job` — what `useJob()` returns. Required. Outside Makersclaw, any\n  object of the same shape: `running`, `steps` (`[{ name, label, status:\n  \"running\" | \"done\" | \"failed\" }]`), `text`, `error`, `finishedAt`, and\n  `cancel()` / `reset()`.\n- `title` — while it runs, what the agent is doing, in the founder's\n  words: `\"Drafting the launch plan\"`. Default `\"Working on it\"`.\n- `doneTitle` — after a clean finish: `\"Launch plan drafted\"`.\n- `failedTitle` — when it stopped with an error; the error follows it.\n- `onRetry` — shows \"Try again\" beside Close when the job failed: start\n  the same job again.\n- `autoClose` — milliseconds after a clean finish before the panel\n  closes itself (`job.reset()`); default 6000, `false` to keep it until\n  Close.\n- `maxSteps` — the newest steps shown, default 6; older ones become one\n  \"N earlier steps\" line.\n- `showText` — the agent's own account under the steps, default true. It\n  is what the agent says it did, never the result: the result is rows.\n- `className` — layout around it. Never colour.\n\n### The generator (`variant=\"generator\"`)\n\nEverything above (`job`, `title`, `doneTitle`, `failedTitle`, `onRetry`,\n`autoClose`, `maxSteps`, `showText`) goes to the panel inside it. Then:\n\n- `onGenerate(prompt)` — start the job. Build the ask from the prompt and\n  your options and call `job.start(ask)`; return what it returns, or\n  `{ ok: false, error }` and the reason shows under the prompt. Default:\n  `job.start(prompt)`. Cmd/Ctrl+Enter in the prompt presses Generate.\n  Without `onRetry`, the panel's \"Try again\" re-runs the last prompt.\n- `prompt` / `onPromptChange(text)` — control the prompt; or\n  `defaultPrompt`. `promptLabel` (\"What should it make?\"), `placeholder`,\n  `promptHint`, `promptRows` (4).\n- `options` — your fields, in a two-column grid under the prompt (one\n  column on a phone): a size `Select`, a style `ToggleGroup`, a `Slider`.\n  Their values are yours; read them in `onGenerate`.\n- `generateLabel` (\"Generate\") · `generateIcon` (\"wand\") ·\n  `canGenerateEmpty` (false) · `disabled` (false).\n- `heading` · `description` — the form card's title and line under it.\n- `aside` — a node under the form: tips, a note on cost.\n- `results` — what the job made, as nodes (an array of cards, say). The\n  shelf draws them in `resultsColumns` columns (1–4; fewer on a phone).\n  `resultsTitle` (\"Results\") and `resultsActions` (nodes beside it).\n- `placeholderResult` — drawn at the top of the shelf while the job runs\n  (default a skeleton); the shelf is `aria-busy` meanwhile.\n- `emptyTitle` · `emptyBody` · `emptyState` — the shelf before anything\n  is made.\n- `layout` — `\"stacked\"` (default: the form, then the shelf) or\n  `\"split\"` (side by side from lg up; stacked on a phone).\n\n## Example\n\n```jsx\n\"use client\";\nimport { useEffect } from \"react\";\nimport { useJob } from \"../lib/hooks\";\nimport { Button } from \"./ui\";\nimport { JobPanel } from \"./blocks/job-panel\";\n\nconst ASK = \"Draft a launch plan for the next product in the list, with dates and owners.\";\n\nexport default function Launches({ launches, reload }) {\n  const job = useJob();\n  useEffect(() => { reload?.(); }, [job.progress]);   // rows appear as they land\n\n  return (\n    <div className=\"grid gap-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Button variant=\"secondary\" onClick={() => job.start(ASK)} disabled={job.running}>Generate a launch plan</Button>\n        <Button variant=\"primary\" icon=\"plus\" onClick={openNewLaunch}>New launch plan</Button>\n      </div>\n      <JobPanel job={job} title=\"Drafting the launch plan\" doneTitle=\"Launch plan drafted\" onRetry={() => job.start(ASK)} />\n      {/* the launches list — the job's result lands here */}\n    </div>\n  );\n}\n```\n\nThe verb sits on the object list beside the manual \"New\" (README §5, rule\n1), and the panel sits where the result will appear.\n\nA generator for product photos:\n\n```jsx\n\"use client\";\nimport { useEffect, useState } from \"react\";\nimport { useJob } from \"../lib/hooks\";\nimport { Field, Image, Select } from \"./ui\";\nimport { JobPanel } from \"./blocks/job-panel\";\n\nexport default function PhotoStudio({ photos, reload }) {\n  const job = useJob();\n  const [size, setSize] = useState(\"square\");\n  useEffect(() => { reload?.(); }, [job.progress]);   // new photos appear as they land\n\n  return (\n    <JobPanel\n      variant=\"generator\"\n      job={job}\n      heading=\"New product photo\"\n      promptLabel=\"Describe the photo\"\n      options={\n        <Field id=\"size\" label=\"Size\">\n          <Select id=\"size\" value={size} onChange={(e) => setSize(e.target.value)}\n                  options={[{ value: \"square\", label: \"Square\" }, { value: \"portrait\", label: \"Portrait\" }]} />\n        </Field>\n      }\n      onGenerate={(prompt) => job.start(`Make one ${size} product photo: ${prompt}. Save it to public.photos.`)}\n      title=\"Making the photo\"\n      doneTitle=\"Photo saved\"\n      results={photos.map((p) => <Image key={p.id} src={p.url} alt={p.prompt} ratio=\"square\" rounded=\"lg\" />)}\n      resultsColumns={3}\n    />\n  );\n}\n```\n\nWhat it will not do: call a model, hold a provider or an API key, or\nkeep what was made. The agent does the work through the job; the rows\nare the results.\n\nIts files are fixed: `npm run check` refuses a change, and `makersclaw add\njob-panel` restores them. A different panel is your own component in\n`components/`, built from the kit.\n\n## Credits\n\nThe generator variant is ported from Creative Tim UI (https://github.com/creativetimofficial/ui, ai-image-generator-01 and ai-video-generator-01, MIT), rewritten on the Makersclaw kit without its provider and API-key fields.\n"
+      "content": "# JobPanel\n\nThe panel that follows work the founder asked the app's agent for. It\nshows each step's label as the agent works, a Stop button while it runs,\nthen \"done\" (closing itself a few seconds later) or the reason it\nstopped. When no job runs it renders nothing — a panel that is always\nthere is a monitoring console, and apps do not have one.\n\nThe conversation is not here. Since 0.4.0 a job is a request, and its\nconversation lives in the desk's agent column: the agent's questions,\nthe founder's answers and the yes before it acts are all there. The\npanel says where the work is and points there — \"Needs your answer\"\nwith an Answer button when the agent waits on the founder, \"Queued ·\nafter …\" when it waits its turn.\n\n```jsx\nimport { JobPanel } from \"../components/blocks/job-panel\";   // a Makersclaw app (\"./blocks/job-panel\" from components/)\nimport { JobPanel } from \"@/components/makersclaw/blocks/job-panel\";   // a shadcn project\n```\n\nA client component. It takes the object `useJob()` returns (lib/hooks.js,\nREADME §5 \"Commissioning work\") and draws it; starting the job stays with\nyour surface.\n\n`variant=\"generator\"` is the panel inside a small studio: a prompt, your\noptions, Generate, the running job, and a shelf of what it made. It holds\nno model, provider or API key: Generate hands the prompt to the app's\nagent (`job.start`, or your `onGenerate`), the agent writes rows, and you\npass those rows back in as `results`.\n\n## Props\n\n- `job` — what `useJob()` returns. Required. Outside Makersclaw, any\n  object of the same shape: `running`, `steps` (`[{ name, label, status:\n  \"running\" | \"done\" | \"failed\" }]`), `text`, `error`, `finishedAt`, and\n  `cancel()` / `reset()`. Optional, read when present (useJob sets them\n  since 0.4.0): `needsYou`, `queued`, `queuedAfter` (`{ after_title }`)\n  and `open()` — see \"Needs you and queued\" below. An object without\n  them (the 0.3.x shape) draws exactly as before.\n- `title` — while it runs, what the agent is doing, in the founder's\n  words: `\"Drafting the launch plan\"`. Default `\"Working on it\"`.\n- `doneTitle` — after a clean finish: `\"Launch plan drafted\"`.\n- `failedTitle` — when it stopped with an error; the error follows it.\n- `needsTitle` — while the agent waits on the founder's answer. Default\n  `\"Needs your answer\"`.\n- `onRetry` — shows \"Try again\" beside Close when the job failed: start\n  the same job again.\n- `autoClose` — milliseconds after a clean finish before the panel\n  closes itself (`job.reset()`); default 6000, `false` to keep it until\n  Close.\n- `maxSteps` — the newest steps shown, default 6; older ones become one\n  \"N earlier steps\" line.\n- `showText` — the agent's own account under the steps, default true. It\n  is what the agent says it did, never the result: the result is rows.\n  It hides itself when `job.text` is empty, as it is on a request: the\n  account is in the desk's agent column.\n- `className` — layout around it. Never colour.\n\n### The generator (`variant=\"generator\"`)\n\nEverything above (`job`, `title`, `doneTitle`, `failedTitle`,\n`needsTitle`, `onRetry`, `autoClose`, `maxSteps`, `showText`) goes to the\npanel inside it. Then:\n\n- `onGenerate(prompt)` — start the job. Build the ask from the prompt and\n  your options and call `job.start(ask)`; return what it returns, or\n  `{ ok: false, error }` and the reason shows under the prompt. Default:\n  `job.start(prompt)`. Cmd/Ctrl+Enter in the prompt presses Generate.\n  Without `onRetry`, the panel's \"Try again\" re-runs the last prompt.\n- `prompt` / `onPromptChange(text)` — control the prompt; or\n  `defaultPrompt`. `promptLabel` (\"What should it make?\"), `placeholder`,\n  `promptHint`, `promptRows` (4).\n- `options` — your fields, in a two-column grid under the prompt (one\n  column on a phone): a size `Select`, a style `ToggleGroup`, a `Slider`.\n  Their values are yours; read them in `onGenerate`.\n- `generateLabel` (\"Generate\") · `generateIcon` (\"wand\") ·\n  `canGenerateEmpty` (false) · `disabled` (false).\n- `heading` · `description` — the form card's title and line under it.\n- `aside` — a node under the form: tips, a note on cost.\n- `results` — what the job made, as nodes (an array of cards, say). The\n  shelf draws them in `resultsColumns` columns (1–4; fewer on a phone).\n  `resultsTitle` (\"Results\") and `resultsActions` (nodes beside it).\n- `placeholderResult` — drawn at the top of the shelf while the job runs\n  (default a skeleton); the shelf is `aria-busy` meanwhile.\n- `emptyTitle` · `emptyBody` · `emptyState` — the shelf before anything\n  is made.\n- `layout` — `\"stacked\"` (default: the form, then the shelf) or\n  `\"split\"` (side by side from lg up; stacked on a phone).\n\n## Needs you and queued\n\nA request can be live and still not moving. The panel draws two such\nstates from the job, and both count as running: no Close, Generate\nstays off, and the panel stays until the job moves on.\n\n- **Needs you** (`job.needsYou`) — the agent stopped to ask the founder\n  something, or for a yes before it acts. The heading is `needsTitle`\n  (\"Needs your answer\"), the panel takes the warning tone, a line says\n  the question is in the agent column, and **Answer** takes Stop's\n  place: it calls `job.open()`, which opens the request's conversation\n  in the desk's agent column. The founder answers there (or stops it\n  there), never in the app; the job then runs on and the panel follows\n  it. A job with no `open()` has nowhere to point, so Stop stays.\n- **Queued** (`job.queued`) — one job per list runs at a time, so this\n  one waits behind another. The heading names the job it waits for:\n  \"Queued · after Find 20 leads\" (`job.queuedAfter.after_title`, else\n  \"the job before it\"). Stop stays: it takes the job out of the queue.\n\nWhen it runs again the heading is back to `title`, and the one step\nunder it is the request's line (\"Drafting · 12 of 50\").\n\n## Example\n\n```jsx\n\"use client\";\nimport { useEffect } from \"react\";\nimport { useJob } from \"../lib/hooks\";\nimport { Button } from \"./ui\";\nimport { JobPanel } from \"./blocks/job-panel\";\n\nconst ASK = \"Draft a launch plan for the next product in the list, with dates and owners.\";\n\nexport default function Launches({ launches, reload }) {\n  const job = useJob();\n  useEffect(() => { reload?.(); }, [job.progress]);   // rows appear as they land\n\n  return (\n    <div className=\"grid gap-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Button variant=\"secondary\" onClick={() => job.start(ASK)} disabled={job.running}>Generate a launch plan</Button>\n        <Button variant=\"primary\" icon=\"plus\" onClick={openNewLaunch}>New launch plan</Button>\n      </div>\n      <JobPanel job={job} title=\"Drafting the launch plan\" doneTitle=\"Launch plan drafted\" onRetry={() => job.start(ASK)} />\n      {/* the launches list — the job's result lands here */}\n    </div>\n  );\n}\n```\n\nThe verb sits on the object list beside the manual \"New\" (README §5, rule\n1), and the panel sits where the result will appear.\n\nA generator for product photos:\n\n```jsx\n\"use client\";\nimport { useEffect, useState } from \"react\";\nimport { useJob } from \"../lib/hooks\";\nimport { Field, Image, Select } from \"./ui\";\nimport { JobPanel } from \"./blocks/job-panel\";\n\nexport default function PhotoStudio({ photos, reload }) {\n  const job = useJob();\n  const [size, setSize] = useState(\"square\");\n  useEffect(() => { reload?.(); }, [job.progress]);   // new photos appear as they land\n\n  return (\n    <JobPanel\n      variant=\"generator\"\n      job={job}\n      heading=\"New product photo\"\n      promptLabel=\"Describe the photo\"\n      options={\n        <Field id=\"size\" label=\"Size\">\n          <Select id=\"size\" value={size} onChange={(e) => setSize(e.target.value)}\n                  options={[{ value: \"square\", label: \"Square\" }, { value: \"portrait\", label: \"Portrait\" }]} />\n        </Field>\n      }\n      onGenerate={(prompt) => job.start(`Make one ${size} product photo: ${prompt}. Save it to public.photos.`)}\n      title=\"Making the photo\"\n      doneTitle=\"Photo saved\"\n      results={photos.map((p) => <Image key={p.id} src={p.url} alt={p.prompt} ratio=\"square\" rounded=\"lg\" />)}\n      resultsColumns={3}\n    />\n  );\n}\n```\n\nWhat it will not do: call a model, hold a provider or an API key, or\nkeep what was made. The agent does the work through the job; the rows\nare the results.\n\nIts files are fixed: `npm run check` refuses a change, and `makersclaw add\njob-panel` restores them. A different panel is your own component in\n`components/`, built from the kit.\n\n## Credits\n\nThe generator variant is ported from Creative Tim UI (https://github.com/creativetimofficial/ui, ai-image-generator-01 and ai-video-generator-01, MIT), rewritten on the Makersclaw kit without its provider and API-key fields.\n"
     }
   ],
   "categories": [
@@ -40,6 +40,9 @@
     "ai",
     "stop",
     "status",
+    "queued",
+    "needs-you",
+    "answer",
     "generator",
     "prompt",
     "results",
@@ -49,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.3.2",
+      "version": "0.5.1",
       "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.3.2/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/code-editor.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/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.3.2",
+      "version": "0.5.1",
       "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.3.2/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/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.3.2",
+      "version": "0.5.1",
       "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.3.2/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/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.3.2",
+      "version": "0.5.1",
       "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)."
     }
   }