makersclaw 0.8.0 → 0.8.2

package/r/cost.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cost",
+  "type": "registry:block",
+  "title": "Cost",
+  "description": "What a press will spend, said before the press. CostTag is the price on a control that spends (\"about 700 cr\", \"up to 2,000 cr\", \"1 call · 2 cr\"). CostConfirm is the confirm before a big spend: what it uses and at most, what is left, Go ahead, and an optional cheaper first step (\"Try the first 10 rows\"); with too few credits it says so and points at the desk, where credits are added. Allowance is the week's credits as a meter. Fed by useLlmAction's estimate, useJobs' budget and credits (lib/hooks.js); it reads no wallet and spends nothing itself.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/cost/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/cost/index.js",
+      "content": "// The cost block — `makersclaw add cost`. Fixed: compose it through its\n// props (README.md beside this file).\nexport { CostTag, CostConfirm, Allowance, creditsWords } from \"./cost\";\n"
+    },
+    {
+      "path": "registry/blocks/cost/cost.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/cost/cost.jsx",
+      "content": "\"use client\";\n\n// What a press will spend, said before the press: the price on a control\n// (CostTag), the confirm before a big spend with a cheaper second choice\n// (CostConfirm), and the week's allowance (Allowance). Props in,\n// callbacks out; the block reads no wallet and spends nothing itself.\n// Tokens only. Money stays on the desk: topping up opens it, never a\n// form here. Its own width decides its layout (@container).\n\nimport { Button, Icon, cx } from \"../../ui\";\n\n/** Credits as the kit says them: to a tenth under 10 (\"1.2\"), whole above,\n *  thousands marked the same on the server and in the browser (\"2,000\"). */\nexport function creditsWords(n) {\n  if (typeof n !== \"number\" || !Number.isFinite(n)) return null;\n  const v = n < 10 ? Math.round(n * 10) / 10 : Math.round(n);\n  return v.toLocaleString(\"en-US\", { maximumFractionDigits: 1 });\n}\n\n/** The price words: \"about 700 cr\", \"up to 2,000 cr\", \"1 call · 2 cr\". */\nfunction tagWords({ credits, max, calls, words }) {\n  if (words) return words;\n  const c = creditsWords(credits);\n  const m = creditsWords(max);\n  if (typeof calls === \"number\" && calls > 0) {\n    const n = `${calls} ${calls === 1 ? \"call\" : \"calls\"}`;\n    return c ? `${n} · ${c} cr` : m ? `${n} · up to ${m} cr` : n;\n  }\n  if (c) return `about ${c} cr`;\n  if (m) return `up to ${m} cr`;\n  return null;\n}\n\n/**\n * The price on a control that spends.\n *\n *   credits   the estimate (\"about 700 cr\")\n *   max       the ceiling: alone, \"up to 2,000 cr\"; with credits, said on hover\n *   calls     model calls: \"1 call · 2 cr\"\n *   words     your own words instead (\"free\", \"about a minute of reading\")\n *   loading   the price is being asked for: a quiet \"pricing…\"\n *   icon      false for no mark (inside a Button that has its own icon)\n *\n * Nothing at all when there is no price to say.\n */\nexport function CostTag({ credits, max, calls, words, loading = false, icon = true, className }) {\n  const said = tagWords({ credits, max, calls, words });\n  if (!said && !loading) return null;\n  const ceiling = creditsWords(max);\n  return (\n    <span\n      className={cx(\"inline-flex min-w-0 items-center gap-1 whitespace-nowrap text-xs font-normal tabular-nums text-muted-foreground\", className)}\n      title={credits != null && ceiling ? `at most ${ceiling} credits` : undefined}\n    >\n      {icon ? <Icon name=\"zap\" size={12} className=\"shrink-0\" /> : null}\n      <span className=\"truncate\">{said ?? \"pricing…\"}</span>\n    </span>\n  );\n}\n\n/**\n * The confirm before a big spend, in the member's own app: what it uses,\n * at most, what is left, Go ahead or a cheaper first step.\n *\n *   estimate   credits it is likely to use (700)\n *   max        at most (1,000), or null\n *   left       credits left (12,400), or words (\"12,400 left this week\"), or null\n *   onConfirm, confirmLabel (\"Go ahead\"), busy (the press is out)\n *   onCancel, cancelLabel (\"Not now\")\n *   cheaper    { label: \"Try the first 10 rows\", price?: \"about 70 cr\", onChoose }\n *   onTopUp    opens the desk to add credits, when there is not enough\n *   title      the head (default \"Before it starts\")\n */\nexport function CostConfirm({\n  estimate,\n  max,\n  left,\n  onConfirm,\n  confirmLabel = \"Go ahead\",\n  busy = false,\n  onCancel,\n  cancelLabel = \"Not now\",\n  cheaper,\n  onTopUp,\n  title = \"Before it starts\",\n  className,\n}) {\n  const e = creditsWords(estimate);\n  const m = creditsWords(max);\n  const leftNumber = typeof left === \"number\" && Number.isFinite(left) ? left : null;\n  const leftWords = leftNumber != null ? `${creditsWords(leftNumber)} left.` : typeof left === \"string\" && left ? left : null;\n  const short = leftNumber != null && typeof estimate === \"number\" && leftNumber < estimate;\n  const use = e ? `This uses about ${e} credits${m && max !== estimate ? `, at most ${m}` : \"\"}.` : m ? `This uses at most ${m} credits.` : null;\n  return (\n    <section role=\"group\" aria-label={title} className={cx(\"@container grid min-w-0 gap-3 rounded-[var(--radius)] border border-border bg-card p-3 text-[13px] text-card-foreground\", className)}>\n      <div className=\"flex min-w-0 items-start gap-2\">\n        <Icon name=\"zap\" size={16} className=\"mt-0.5 shrink-0 text-muted-foreground\" />\n        <div className=\"grid min-w-0 gap-0.5\">\n          <b className=\"font-semibold\">{title}</b>\n          <p className=\"m-0\">\n            {use} {leftWords ? <span className={short ? \"text-destructive\" : \"text-muted-foreground\"}>{leftWords}</span> : null}\n          </p>\n          {short ? (\n            <p className=\"m-0 flex items-center gap-1 text-xs text-destructive\">\n              <Icon name=\"warning\" size={12} />\n              Not enough credits for this. Adding them is on the desk.\n            </p>\n          ) : null}\n        </div>\n      </div>\n      <div className=\"flex flex-col items-stretch gap-2 @sm:flex-row @sm:flex-wrap @sm:items-center\">\n        {short && onTopUp ? (\n          <Button size=\"sm\" variant=\"primary\" icon=\"external\" onClick={onTopUp}>\n            Add credits on the desk\n          </Button>\n        ) : (\n          <Button size=\"sm\" variant=\"primary\" icon=\"play\" loading={busy} disabled={short} onClick={onConfirm}>\n            {confirmLabel}\n          </Button>\n        )}\n        {cheaper ? (\n          <Button size=\"sm\" variant=\"secondary\" onClick={cheaper.onChoose} disabled={busy}>\n            <span className=\"truncate\">{cheaper.label}</span>\n            {cheaper.price ? <span className=\"font-normal text-muted-foreground\">{cheaper.price}</span> : null}\n          </Button>\n        ) : null}\n        {onCancel ? (\n          <Button size=\"sm\" variant=\"quiet\" onClick={onCancel} disabled={busy}>\n            {cancelLabel}\n          </Button>\n        ) : null}\n      </div>\n    </section>\n  );\n}\n\n/**\n * The week's allowance as a meter.\n *\n *   used, of   credits used and the cap (4,180 of 10,000)\n *   words      the line (\"2,840 credits left this week\"); default \"<used> of <of> credits this week\"\n *   title      the label over it (default \"This week\"); null for none\n */\nexport function Allowance({ used, of, words, title = \"This week\", className }) {\n  const pct = typeof used === \"number\" && of > 0 ? Math.max(0, Math.min(1, used / of)) : null;\n  const full = pct != null && pct >= 1;\n  const said = words ?? (pct != null ? `${creditsWords(used)} of ${creditsWords(of)} credits this week` : null);\n  return (\n    <div className={cx(\"grid min-w-0 gap-1 text-xs\", className)}>\n      {title || said ? (\n        <div className=\"flex min-w-0 flex-wrap items-baseline justify-between gap-x-3\">\n          {title ? <span className=\"font-medium text-foreground\">{title}</span> : null}\n          {said ? (\n            <span className={cx(\"inline-flex min-w-0 items-center gap-1 tabular-nums\", full ? \"text-destructive\" : \"text-muted-foreground\")}>\n              {full ? <Icon name=\"warning\" size={12} className=\"shrink-0\" /> : null}\n              <span className=\"truncate\">{said}</span>\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      {pct != null ? (\n        <span\n          role=\"meter\"\n          aria-label={title ?? \"Credits this week\"}\n          aria-valuemin={0}\n          aria-valuemax={of}\n          aria-valuenow={Math.min(used, of)}\n          aria-valuetext={said ?? undefined}\n          className=\"block h-1.5 overflow-hidden rounded-sm bg-border\"\n        >\n          <span className={cx(\"block h-full\", full ? \"bg-destructive\" : \"bg-muted-foreground\")} style={{ width: `${pct * 100}%` }} />\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/cost/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/cost/README.md",
+      "content": "# Cost\n\nWhat a press will spend, said before the press. Part of the agent kit\n(0.8.1): **every control that spends shows its price on the control.**\n\n- `CostTag` — the price on a control: \"about 700 cr\", \"up to 2,000 cr\",\n  \"1 call · 2 cr\".\n- `CostConfirm` — the confirm before a big spend: \"This uses about 700\n  credits, at most 1,000. 12,400 left.\", **Go ahead**, and a cheaper\n  first step as a second choice (\"Try the first 10 rows\").\n- `Allowance` — the week's credits as a meter: \"2,840 credits left this\n  week\".\n- `creditsWords(n)` — credits as the kit says them: to a tenth under 10\n  (\"1.2\"), whole above, thousands marked (\"2,000\").\n\n```jsx\nimport { CostTag, CostConfirm, Allowance } from \"../components/blocks/cost\";   // a Makersclaw app\nimport { CostTag, CostConfirm, Allowance } from \"@/components/makersclaw/blocks/cost\";   // a shadcn project\n```\n\nClient components. They read no wallet and spend nothing: the screen\npasses the figures and the press goes out as a callback. 1 USD is 1,000\ncredits.\n\n## Props\n\n### CostTag\n\n- `credits` — the estimate. `max` — the ceiling: alone it is \"up to\n  2,000 cr\"; with `credits` it is said on hover.\n- `calls` — model calls: \"1 call · 2 cr\".\n- `words` — your own words instead.\n- `loading` — the price is being asked for: a quiet \"pricing…\".\n- `icon` — `false` for no mark. `className`.\n\nNothing is drawn when there is no price to say.\n\n### CostConfirm\n\n- `estimate`, `max` — credits it is likely to use, and at most.\n- `left` — credits left (a number), or your own words.\n- `onConfirm`, `confirmLabel` (\"Go ahead\"), `busy` (the press is out).\n- `onCancel`, `cancelLabel` (\"Not now\").\n- `cheaper` — `{ label, price?, onChoose }`: the smaller first step.\n- `onTopUp` — opens the desk to add credits. When `left` is under\n  `estimate`, the confirm says there are not enough and offers this\n  instead of Go ahead.\n- `title` — default \"Before it starts\". `className`.\n\nUnder about 384 px of its own width its buttons stack, full width.\n\n### Allowance\n\n- `used`, `of` — credits used this week and the week's cap.\n- `words` — the line (default \"4,180 of 10,000 credits this week\").\n- `title` — default \"This week\"; `null` for none. `className`.\n\n## Where the figures come from (lib/hooks.js)\n\n- A model call: `useLlmAction({ input, … }).estimate` — `{ credits,\n  credits_max }`, asked of `POST _claw/llm` with `estimate: true`\n  (priced, never sent to a model, never charged), once per input.\n- A job: `useJobs().budget` — `{ week_cap_credits, week_used_credits }`\n  for Allowance; the job's own price is the app's to say (\"about 700\n  cr\"), from what its runs cost (`useRuns`' `credits`).\n- What is left: `useJobs().credits`, as `_claw/me` gives them.\n\n## Who may do what\n\nThe confirm is the member's own act, in their own app, with credits the\nworkspace already holds. Adding credits, a plan, a card: the desk's,\nalways. `onTopUp` opens the desk; nothing here takes money.\n\n## Never\n\n- Never a control that spends without its price on it.\n- Never a payment form, a card field or a plan picker: money is the\n  desk's.\n- Never a price made up: say what the estimate, the runs or the\n  declared price say, or say nothing.\n\n## Example\n\n```jsx\n\"use client\";\nimport { useState } from \"react\";\nimport { useJobs } from \"../lib/hooks\";\nimport { Button } from \"../components/ui\";\nimport { Allowance, CostConfirm, CostTag } from \"../components/blocks/cost\";\n\nexport default function EnrichAll({ rows, enrich }) {\n  const { budget } = useJobs();\n  const [asking, setAsking] = useState(false);\n  const each = 1.4;\n  return (\n    <div className=\"grid gap-3\">\n      {asking ? (\n        <CostConfirm\n          estimate={rows.length * each}\n          max={rows.length * each * 1.5}\n          left={budget ? budget.week_cap_credits - budget.week_used_credits : null}\n          onConfirm={() => enrich(rows)}\n          onCancel={() => setAsking(false)}\n          cheaper={{ label: \"Try the first 10 rows\", price: `about ${Math.round(10 * each)} cr`, onChoose: () => enrich(rows.slice(0, 10)) }}\n        />\n      ) : (\n        <Button icon=\"sparkles\" onClick={() => setAsking(true)}>\n          Enrich {rows.length} rows <CostTag credits={rows.length * each} icon={false} />\n        </Button>\n      )}\n      {budget ? <Allowance used={budget.week_used_credits} of={budget.week_cap_credits} /> : null}\n    </div>\n  );\n}\n```\n"
+    }
+  ],
+  "categories": [
+    "cost",
+    "price",
+    "credits",
+    "estimate",
+    "spend",
+    "confirm",
+    "budget",
+    "allowance",
+    "meter",
+    "billing",
+    "kit"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/cost. Import: import { CostTag, CostConfirm, Allowance, creditsWords } from \"@/components/makersclaw/blocks/cost\". Props and an example: components/makersclaw/blocks/cost/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.8.2",
+      "useWhen": "Every control that spends credits says its price on it: Run now, Read now, Enrich 500 rows, Summarize, Generate. Put CostConfirm before a spend big enough to pause over (a whole table, a long run), and Allowance where an app shows its agent's week (beside a schedule-card, in a run's overview)."
+    }
+  }
+}

package/r/csv-import.json

@@ -5,8 +5,8 @@
   "title": "CsvImport",
   "description": "Import a CSV in three calm steps: drop a file (or paste text, or download a template), match each file column to a field with automatic matches and sample values (or, with no fields, name and type a new table's fields from guessed types), then review every row in an editable spreadsheet where cells that do not fit their type are marked red and fixed in place, delete rows or leave the bad ones out, and import through one async onImport that answers { ok }. Quoted commas and newlines, TSV and semicolon files, byte-order marks, 50,000 rows.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/spreadsheet.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/spreadsheet.json"
   ],
   "dependencies": [
     "papaparse@5.7.0"
@@ -56,7 +56,7 @@
   "docs": "Installed to components/makersclaw/blocks/csv-import. Import: import { CsvImport, parseCsvText, readCsvFile, headersOf, autoMatch, guessColumns, buildRows, cleanRow, templateCsv } from \"@/components/makersclaw/blocks/csv-import\". Props and an example: components/makersclaw/blocks/csv-import/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.0",
+      "version": "0.8.2",
       "useWhen": "People bring records in from a spreadsheet or another tool: contacts, leads, products, a price list, an old CRM export, a first table for a new app. Built on spreadsheet. Not for uploading files to keep (file-upload) or for editing records already in the app (spreadsheet, data-table)."
     }
   }

package/r/data-picker.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-picker",
+  "type": "registry:block",
+  "title": "DataPicker",
+  "description": "Mapping data from earlier steps into a field. DataPicker is the menu (this run, this item inside a for-each, the questions a manual run asks, and every earlier step's output, with the fields inside it and a taste of their values where a real run left a sample); DataButton is the { } button that opens it; DataInput is a labelled text field (one line or several) with the menu beside it; DataPairs is a list of name and value rows with a menu on each value. A press inserts {{ steps.mail.output.messages }} where the cursor was.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/automation-model.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/data-picker/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/data-picker/index.js",
+      "content": "// The DataPicker block — `makersclaw add data-picker`. Fixed: compose it\n// through its props (README.md beside this file).\nexport { DataButton, DataInput, DataPairs, DataPicker } from \"./data-picker\";\nexport { fieldsOf, menuGroups, preview } from \"./fields\";\n"
+    },
+    {
+      "path": "registry/blocks/data-picker/data-picker.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/data-picker/data-picker.jsx",
+      "content": "\"use client\";\n\n// Mapping data from earlier steps into a field. The menu lists what a step\n// may read: this run (when it started, the clock), this item (inside a\n// for-each) and every earlier step's output, and where a real run left a\n// sample, the fields inside it with a taste of their values. A press\n// inserts `{{ steps.mail.output.messages }}` where the cursor was. The\n// platform checks every reference when the automation is saved.\n//\n// DataInput is a labelled text field (one line or several) with the menu\n// beside it; DataPairs is a list of name and value rows (a step's input,\n// a Set's values), each value with its own menu. Props in, callbacks out;\n// tokens only.\n\nimport { useId, useRef, useState } from \"react\";\nimport { Field, Input, Popover, Textarea, cx } from \"../../ui\";\nimport { textToValue, valueToText } from \"../automation-model\";\nimport { menuGroups } from \"./fields\";\n\nconst ROW = \"flex w-full min-w-0 items-baseline justify-between gap-3 rounded-md px-2 py-1.5 text-left text-[13px] hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\";\n\n/**\n * The menu itself, for a place of your own.\n *   available   automation-model's availableBefore()\n *   samples     { [stepId]: a real output } or null\n *   onPick(text)\n */\nexport function DataPicker({ available, samples = null, onPick }) {\n  const groups = menuGroups(available, samples);\n  return (\n    <div role=\"menu\" aria-label=\"Insert data\" className=\"grid gap-1\">\n      {groups.map((g) => (\n        <section key={g.title} className=\"grid gap-px\">\n          <h5 className=\"m-0 px-2 pt-1.5 text-2xs font-semibold uppercase tracking-wide text-muted-foreground\">{g.title}</h5>\n          {g.items.map((it) =>\n            it.fields?.length ? (\n              <details key={it.text} className=\"group\">\n                <summary className={cx(ROW, \"cursor-pointer list-none\")}>\n                  <span className=\"min-w-0 truncate\">{it.label}</span>\n                  <span className=\"shrink-0 text-xs text-muted-foreground\">{it.preview}</span>\n                </summary>\n                <div className=\"grid gap-px border-l border-border pl-2 ml-3\">\n                  <button type=\"button\" role=\"menuitem\" onClick={() => onPick(it.text)} className={ROW}>\n                    <span className=\"min-w-0 truncate\">Everything it made</span>\n                    <span className=\"shrink-0 font-mono text-2xs text-muted-foreground\">output</span>\n                  </button>\n                  {it.fields.map((f) => (\n                    <button key={f.path} type=\"button\" role=\"menuitem\" onClick={() => onPick(f.text)} className={ROW}>\n                      <span className=\"min-w-0 truncate font-mono text-xs\">{f.label}</span>\n                      <span className=\"shrink-0 text-xs text-muted-foreground\">{f.preview}</span>\n                    </button>\n                  ))}\n                </div>\n              </details>\n            ) : (\n              <button key={it.text} type=\"button\" role=\"menuitem\" onClick={() => onPick(it.text)} className={ROW}>\n                <span className=\"min-w-0 truncate\">{it.label}</span>\n                {it.preview ? <span className=\"shrink-0 text-xs text-muted-foreground\">{it.preview}</span> : it.hint ? <span className=\"shrink-0 font-mono text-2xs text-muted-foreground\">{it.hint}</span> : null}\n              </button>\n            ),\n          )}\n        </section>\n      ))}\n      <p className=\"m-0 px-2 pb-1 pt-0.5 text-xs text-muted-foreground\">It goes in where the cursor is, and the step it comes from runs first.</p>\n    </div>\n  );\n}\n\n/** The { } button and its menu, for a field of your own. */\nexport function DataButton({ available, samples, onPick, disabled }) {\n  const [open, setOpen] = useState(false);\n  return (\n    <Popover\n      open={open}\n      onOpenChange={setOpen}\n      side=\"bottom\"\n      align=\"end\"\n      width=\"md\"\n      label=\"Insert data\"\n      className=\"max-h-80 overflow-y-auto p-1\"\n      trigger={(props) => (\n        <button\n          {...props}\n          type=\"button\"\n          disabled={disabled}\n          title=\"Insert data from an earlier step\"\n          className=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-secondary font-mono text-xs text-secondary-foreground hover:bg-accent disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          {\"{ }\"}\n        </button>\n      )}\n    >\n      <DataPicker\n        available={available}\n        samples={samples}\n        onPick={(text) => {\n          onPick(text);\n          setOpen(false);\n        }}\n      />\n    </Popover>\n  );\n}\n\n/** Put `text` into `value` where the caret was, and say where the caret goes. */\nfunction splice(value, caret, text) {\n  const at = Math.min(caret?.start ?? value.length, value.length);\n  const end = Math.min(caret?.end ?? at, value.length);\n  return { next: `${value.slice(0, at)}${text}${value.slice(end)}`, caret: { start: at + text.length, end: at + text.length } };\n}\n\n/**\n * A labelled text field. With `available`, a { } button beside it.\n *   label, value, onChange(text), help, placeholder, mono, multiline, rows, disabled\n *   available   automation-model's availableBefore(); leave out for plain text\n *   samples     { [stepId]: a real output } or null\n */\nexport function DataInput({ label, value, onChange, help, placeholder, mono = false, multiline = false, rows = 4, available, samples, disabled = false }) {\n  const id = useId();\n  const caret = useRef(null);\n  const remember = (el) => {\n    caret.current = { start: el.selectionStart ?? el.value.length, end: el.selectionEnd ?? el.value.length };\n  };\n  const insert = (text) => {\n    const r = splice(value, caret.current, text);\n    caret.current = r.caret;\n    onChange(r.next);\n  };\n  const common = { id, value, disabled, placeholder, className: mono ? \"font-mono text-[13px]\" : undefined, onChange: (e) => onChange(e.target.value), onBlur: (e) => remember(e.currentTarget) };\n  return (\n    <Field id={id} label={label} hint={help}>\n      <div className=\"flex min-w-0 items-start gap-1.5\">\n        <div className=\"min-w-0 flex-1\">{multiline ? <Textarea {...common} rows={rows} /> : <Input {...common} type=\"text\" />}</div>\n        {available && !disabled ? <DataButton available={available} samples={samples} onPick={insert} /> : null}\n      </div>\n    </Field>\n  );\n}\n\n/**\n * A list of name and value rows (a step's `input`, a Set's `values`).\n *   value       { name: value }\n *   onChange(next)\n *   keyLabel, addLabel, help, available, samples, disabled\n */\nexport function DataPairs({ label, value, onChange, help, available, samples, disabled = false, keyLabel = \"Name\", addLabel = \"Add a field\" }) {\n  const entries = Object.entries(value ?? {});\n  const setAt = (i, key, text) => {\n    const next = entries.map(([k, v]) => [k, v]);\n    // A name another row already has would swallow it: keep what was typed apart.\n    if (text !== null && entries.some(([other], j) => j !== i && other === key)) return;\n    if (text === null) next.splice(i, 1);\n    else next[i] = [key, textToValue(text)];\n    onChange(Object.fromEntries(next));\n  };\n  return (\n    <fieldset className=\"m-0 grid min-w-0 gap-2 border-0 p-0\">\n      <legend className=\"mb-1.5 p-0 text-sm font-medium text-foreground\">{label}</legend>\n      {entries.length === 0 ? <p className=\"m-0 text-xs text-muted-foreground\">Nothing yet.</p> : null}\n      {entries.map(([k, v], i) => (\n        <PairRow key={i} index={i} k={k} text={valueToText(v)} keyLabel={keyLabel} available={available} samples={samples} disabled={disabled} onChange={(key, text) => setAt(i, key, text)} onRemove={() => setAt(i, k, null)} />\n      ))}\n      {!disabled ? (\n        <button\n          type=\"button\"\n          onClick={() => {\n            let n = entries.length + 1;\n            while (value && `field_${n}` in value) n += 1;\n            onChange({ ...(value ?? {}), [`field_${n}`]: \"\" });\n          }}\n          className=\"inline-flex min-h-9 items-center justify-self-start rounded-md border border-border bg-secondary px-3 text-sm text-secondary-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          + {addLabel}\n        </button>\n      ) : null}\n      {help ? <p className=\"m-0 text-xs text-muted-foreground\">{help}</p> : null}\n    </fieldset>\n  );\n}\n\nfunction PairRow({ index, k, text, keyLabel, available, samples, disabled, onChange, onRemove }) {\n  const caret = useRef(null);\n  const insert = (t) => {\n    const r = splice(text, caret.current, t);\n    caret.current = r.caret;\n    onChange(k, r.next);\n  };\n  return (\n    <div className=\"flex min-w-0 items-center gap-1.5\">\n      <Input className=\"w-[34%] min-w-0 font-mono text-[13px]\" aria-label={`${keyLabel} ${index + 1}`} value={k} disabled={disabled} onChange={(e) => onChange(e.target.value, text)} />\n      <Input\n        className=\"min-w-0 flex-1 font-mono text-[13px]\"\n        aria-label={`Value ${index + 1}`}\n        value={text}\n        disabled={disabled}\n        placeholder=\"a value, or {{ data }}\"\n        onChange={(e) => onChange(k, e.target.value)}\n        onBlur={(e) => {\n          caret.current = { start: e.currentTarget.selectionStart ?? text.length, end: e.currentTarget.selectionEnd ?? text.length };\n        }}\n      />\n      {available && !disabled ? <DataButton available={available} samples={samples} onPick={insert} /> : null}\n      {!disabled ? (\n        <button type=\"button\" aria-label={`Remove ${k || \"field\"}`} onClick={onRemove} className=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\">\n          ×\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/data-picker/fields.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/data-picker/fields.js",
+      "content": "// The pure part of the data picker: what can be pointed at, as text.\n//\n// A step reads an earlier step's output with `{{ steps.read_mail.output.messages }}`.\n// The picker offers the trigger, the clock, the loop's item, and every\n// earlier step's output, and, when a real run left a sample of an output,\n// the fields inside it with a taste of their values, so a person picks\n// what they can see.\n\nconst MAX_FIELDS = 24;\nconst MAX_DEPTH = 3;\n\n/** A value as a short taste: \"ana@x.com\", \"12 items\", \"yes\". */\nexport function preview(value) {\n  if (value === null || value === undefined) return \"empty\";\n  if (typeof value === \"string\") return value.length > 40 ? `${value.slice(0, 39)}…` : value || \"empty text\";\n  if (typeof value === \"number\") return String(value);\n  if (typeof value === \"boolean\") return value ? \"yes\" : \"no\";\n  if (Array.isArray(value)) return value.length === 1 ? \"1 item\" : `${value.length} items`;\n  return \"a record\";\n}\n\n/**\n * The fields inside a sample, as [{ path, text, label, preview }]:\n * `path` is what goes after `steps.<id>.output` (\".messages[0].from\"),\n * `text` the whole reference. Objects go down a few levels; a list shows\n * its first item's fields under `[0]`. A key that is not a plain name\n * (spaces, dashes) is left out: the expression language cannot read it.\n */\nexport function fieldsOf(sample, base, depth = 0, out = [], path = \"\") {\n  if (depth >= MAX_DEPTH || out.length >= MAX_FIELDS || sample === null || typeof sample !== \"object\") return out;\n  const list = Array.isArray(sample);\n  const entries = list ? (sample.length ? [[0, sample[0]]] : []) : Object.entries(sample).filter(([key]) => /^[A-Za-z_][A-Za-z0-9_]*$/.test(key));\n  for (const [key, value] of entries) {\n    if (out.length >= MAX_FIELDS) break;\n    const next = list ? `${path}[${key}]` : `${path}.${key}`;\n    out.push({ path: next, text: `{{ ${base}${next} }}`, label: next.replace(/^\\./, \"\"), preview: preview(value) });\n    if (value && typeof value === \"object\") fieldsOf(value, base, depth + 1, out, next);\n  }\n  return out;\n}\n\n/**\n * The groups the menu shows.\n *   available   automation-model's availableBefore(): { steps: [{ id, kind, label }], inLoop },\n *               and optionally `inputs: [{ name, label }]`, what a manual run asks first\n *   samples     { [stepId]: a real output } or null\n * → [{ title, items: [{ text, label, hint?, preview?, fields? }] }]\n */\nexport function menuGroups(available, samples = null) {\n  const groups = [\n    {\n      title: \"This run\",\n      items: [\n        { text: \"{{ trigger.at }}\", label: \"When it started\", hint: \"trigger.at\" },\n        { text: \"{{ now }}\", label: \"Right now\", hint: \"now\" },\n        { text: \"{{ run.id }}\", label: \"This run's id\", hint: \"run.id\" },\n      ],\n    },\n  ];\n  if (available?.inputs?.length) {\n    groups.push({ title: \"Your questions\", items: available.inputs.map((q) => ({ text: `{{ inputs.${q.name} }}`, label: q.label || q.name, hint: `inputs.${q.name}` })) });\n  }\n  if (available?.inLoop) {\n    groups.push({\n      title: \"This item\",\n      items: [\n        { text: \"{{ item }}\", label: \"The item\", hint: \"item\" },\n        { text: \"{{ index }}\", label: \"Its place in the list\", hint: \"index\" },\n      ],\n    });\n  }\n  if (available?.steps?.length) {\n    groups.push({\n      title: \"Earlier steps\",\n      items: [...available.steps].reverse().map((s) => {\n        const base = `steps.${s.id}.output`;\n        const sample = samples ? samples[s.id] : undefined;\n        return {\n          text: `{{ ${base} }}`,\n          label: s.label,\n          hint: base,\n          preview: sample === undefined ? undefined : preview(sample),\n          fields: sample && typeof sample === \"object\" ? fieldsOf(sample, base) : undefined,\n        };\n      }),\n    });\n  }\n  return groups;\n}\n"
+    },
+    {
+      "path": "registry/blocks/data-picker/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/data-picker/README.md",
+      "content": "# DataPicker\n\nMapping data from earlier steps into a field of an automation. A step reads\nwhat an earlier step made with `{{ steps.read_mail.output.messages }}`; the\ndata picker is how a person writes that without knowing the syntax.\n\n- `DataPicker` — the menu. **This run** (when it started, the clock, the\n  run's id); **This item** (inside a for-each: the item and its place in\n  the list); **Your questions** (what a manual run asks first); **Earlier\n  steps** (every step that runs before this one, nearest first). Where a\n  real run left a sample of a step's output, the step opens to the fields\n  inside it, each with a taste of its value (\"ana@x.com\", \"12 items\").\n- `DataButton` — the **{ }** button and the menu in a popover.\n- `DataInput` — a labelled text field (one line, or several with\n  `multiline`) with the button beside it. A press inserts the reference\n  where the cursor was.\n- `DataPairs` — a list of name and value rows (a step's `input`, a Set's\n  `values`), each value with its own button. A value that reads as a\n  number, true, false, null, a list or an object is kept as that; anything\n  else is text, and `{{ … }}` is a reference the platform reads later.\n\n```jsx\nimport { DataInput, DataPairs } from \"../components/blocks/data-picker\";   // a Makersclaw app\nimport { DataInput, DataPairs } from \"@/components/makersclaw/blocks/data-picker\";   // a shadcn project\n```\n\n`makersclaw add data-picker` lays `automation-model` with it\n(`availableBefore` says what a step may read). Client components. The\nplatform checks every reference when the automation is saved; a reference\nto a field no earlier step makes is refused with the step and the field\nnamed.\n\n## Props\n\n### DataInput\n\n- `label`, `value`, `onChange(text)`, `help`, `placeholder`, `mono`,\n  `multiline`, `rows`, `disabled`.\n- `available` — automation-model's `availableBefore(def, stepId,\n  stepTitle)`: `{ steps: [{ id, kind, label }], inLoop }`, and optionally\n  `inputs: [{ name, label }]`. Leave it out and the field is plain text.\n- `samples` — `{ [stepId]: a real output }`, from a run, so the menu can\n  show fields and values; or null.\n\n### DataPairs\n\n- `label`, `value` (`{ name: value }`), `onChange(next)`, `help`,\n  `keyLabel` (\"Name\"), `addLabel` (\"Add a field\"), `disabled`, `available`,\n  `samples`.\n\n### DataPicker / DataButton\n\n- `available`, `samples`, `onPick(text)`; `DataButton` also `disabled`.\n\n### Helpers\n\n`menuGroups(available, samples)`, `fieldsOf(sample, base)` and\n`preview(value)`: the menu's data as plain objects.\n\n## Never\n\n- Never put a secret in a value: an account is chosen by kind, and the\n  platform resolves the token when the step runs.\n- Never rename a step to change a reference: a step's id is what a run's\n  rows and an app update match steps by.\n\n## Example\n\n```jsx\n\"use client\";\nimport { useState } from \"react\";\nimport { DataInput } from \"../components/blocks/data-picker\";\n\nconst available = { steps: [{ id: \"mail\", kind: \"tool\", label: \"Read the mail\" }], inLoop: false };\nconst samples = { mail: { messages: [{ from: \"ana@x.com\", subject: \"Quote\" }], count: 1 } };\n\nexport default function Note() {\n  const [message, setMessage] = useState(\"Read {{ steps.mail.output.count }} emails.\");\n  return <DataInput label=\"Message\" value={message} onChange={setMessage} multiline rows={3} available={available} samples={samples} />;\n}\n```\n"
+    }
+  ],
+  "categories": [
+    "automation",
+    "workflow",
+    "data",
+    "mapping",
+    "expression",
+    "variable",
+    "reference",
+    "picker",
+    "insert",
+    "fields",
+    "step input",
+    "n8n",
+    "make"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/data-picker. Import: import { DataButton, DataInput, DataPairs, DataPicker, fieldsOf, menuGroups, preview } from \"@/components/makersclaw/blocks/data-picker\". Props and an example: components/makersclaw/blocks/data-picker/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.8.2",
+      "useWhen": "A form edits a step's input and the value may come from an earlier step: the step-settings block does this for you. Use it on its own for a field of your own that takes `{{ … }}` references."
+    }
+  }
+}

package/r/data-table.json

@@ -5,7 +5,7 @@
   "title": "Data table",
   "description": "Records as a table the founder can work: sort by a column (shift for several), search every column, faceted filters with counts, column visibility, row selection with a bulk-actions bar, a menu per row or its first actions as buttons in the row (async, with a spinner and a failure notice), row click, pagination with a page size, loading, empty and no-matches states, and cards on a phone. Opt in to expandable rows, row groups with subtotals, an aligned totals row, arrow-key navigation and a sticky first column. Client-side over rows, or driven by a server.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -62,7 +62,7 @@
   "docs": "Installed to components/makersclaw/blocks/data-table. Import: import { DataTable, useControllable, processRows, sortRows, searchRows, filterRows, facetOptions, nextSort, groupRows, groupValueOf } from \"@/components/makersclaw/blocks/data-table\". Props and an example: components/makersclaw/blocks/data-table/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.0",
+      "version": "0.8.2",
       "useWhen": "A list of records to scan, find, sort and act on: invoices, customers, orders, leads, users, tickets. Not for records that move through stages (a board), a few key numbers (stats), or a grid of cards whose picture matters more than its columns."
     }
   }

package/r/diagram.json

@@ -5,7 +5,7 @@
   "title": "Diagram",
   "description": "Draws Mermaid text (flowcharts, sequence, class, state, ER, Gantt, pie, mind maps, timelines, git graphs…) in the workspace theme: the tokens are read from the page at run time and handed to Mermaid, so nodes, lines, text and chart colours are the theme's and follow light/dark. Zoom and pan (buttons, Cmd/Ctrl+scroll, pinch, drag, keys), fit to view, a Source tab with line numbers, copy the source or the SVG, download SVG. A mistake shows its line and Mermaid's words, and keeps the last drawing that worked. On the server the frame shows the Mermaid text.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json"
   ],
   "dependencies": [
     "mermaid@12.0.0"
@@ -67,7 +67,7 @@
   "docs": "Installed to components/makersclaw/blocks/diagram. Import: import { Diagram, diagramKind, diagramTitle, describeError, mermaidTheme } from \"@/components/makersclaw/blocks/diagram\". Props and an example: components/makersclaw/blocks/diagram/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.0",
+      "version": "0.8.2",
       "useWhen": "A screen shows a diagram written as text: a process or decision flow an agent wrote, a sequence of API calls, a data model, a project timeline, an org or system sketch in docs, a mind map. Not for a board people arrange by hand (flow-canvas), freehand drawing (sketch-canvas), or charts of numbers (chart)."
     }
   }

package/r/doc-editor.json

@@ -5,7 +5,7 @@
   "title": "DocEditor",
   "description": "A Notion-style rich-text editor (BlockNote) painted in the workspace theme: headings, lists, checklists, quotes, code, tables, images and dividers from a / menu or markdown shortcuts, a formatting toolbar, drag handles; @mentions and {merge fields} as inline chips; a minimal mode for comment boxes with Cmd/Ctrl+Enter to submit. The document is BlockNote JSON; helpers turn it into markdown or plain text and read its checklist, fields and mentions.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json"
   ],
   "dependencies": [
     "@blocknote/core@0.55.0",
@@ -75,7 +75,7 @@
   "docs": "Installed to components/makersclaw/blocks/doc-editor. Import: import { DocEditor, useDocEditor, docToMarkdown, docToText, emptyDoc, isDocEmpty, docChecklist, setChecklistItem, docFields, docMentions } from \"@/components/makersclaw/blocks/doc-editor\". Props and an example: components/makersclaw/blocks/doc-editor/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.0",
+      "version": "0.8.2",
       "useWhen": "A screen edits rich text: a wiki or doc page, notes on a record, a brief, meeting notes, an email body with merge fields, a comment field with mentions. The other text blocks (doc-page, record-notes, comment-box…) are built on it. Not for one line of plain text (the kit's Input) or a form of fields (record-form)."
     }
   }

package/r/doc-page.json

@@ -5,8 +5,8 @@
   "title": "DocPage",
   "description": "A Notion-style page: an emoji icon (picked from a grid), a big plain title, and the rich-text editor under it (doc-editor: / menu, markdown shortcuts, @mentions). Edits autosave through an async onSave a moment after typing stops, with Saved / Saving… / Couldn't save + Retry in the top bar, Cmd/Ctrl+S to save now and unsent edits sent when the page is left. A read-only mode shows the same page with nothing to edit; slots for a breadcrumb, actions and a meta line.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/doc-editor.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/doc-editor.json"
   ],
   "dependencies": [],
   "files": [
@@ -54,7 +54,7 @@
   "docs": "Installed to components/makersclaw/blocks/doc-page. Import: import { DocPage } from \"@/components/makersclaw/blocks/doc-page\". Props and an example: components/makersclaw/blocks/doc-page/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.0",
+      "version": "0.8.2",
       "useWhen": "A screen is one document someone reads and writes: a wiki or handbook page, a playbook, a policy, a project page, a one-pager. The knowledge-base block puts a page tree beside it. Not for a short field of rich text inside a form (doc-editor), notes on a record (record-notes) or a comment (comment-box)."
     }
   }

package/r/email-render.json

@@ -5,7 +5,7 @@
   "title": "EmailRender",
   "description": "Email HTML from React (react-email) in the workspace theme: a layout with the 600px column and the inbox preview line, a header brand line, a footer with the address and unsubscribe link, buttons, headings and text, and DocEmail, which draws a doc-editor document as email markup (lists, quotes, code, tables, images, merge fields). Email cannot read CSS variables, so resolveEmailTheme reads the tokens where the editor sits and hands the email plain hex values; renderEmail returns { html, text }, in the browser for a preview and on the server for a send.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json"
   ],
   "dependencies": [
     "@react-email/components@1.0.12",
@@ -66,7 +66,7 @@
   "docs": "Installed to components/makersclaw/blocks/email-render. Import: import { EmailLayout, EmailCard, EmailHeader, EmailFooter, EmailButton, EmailHeading, EmailText, EmailDivider, EMAIL_WIDTH, DocEmail, fieldText, renderEmail, emailPlainText, EMAIL_TOKENS, EMAIL_FALLBACK, resolveEmailTheme, emailColor, emailFontStack, emailThemeKey, luminance, toHex } from \"@/components/makersclaw/blocks/email-render\". Props and an example: components/makersclaw/blocks/email-render/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.0",
+      "version": "0.8.2",
       "useWhen": "Code that must produce an email's HTML: a newsletter, a transactional email (receipt, invite, reset), a digest, a notification, a test send from an editor. newsletter-builder is built on it. Not for writing the email (doc-editor or email-composer), sending it (your sender or the app's server) or a web page (page-builder)."
     }
   }

package/r/faq.json

@@ -5,7 +5,7 @@
   "title": "FAQ",
   "description": "A marketing section of questions and answers: an accordion (one open at a time, or several), a grid of cards with optional icons, or a plain list with every answer shown; the title above or beside them, and an optional \"need more help?\" call to action. Loading and empty states.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -43,7 +43,7 @@
   "docs": "Installed to components/makersclaw/blocks/faq. Import: import { Faq } from \"@/components/makersclaw/blocks/faq\". Props and an example: components/makersclaw/blocks/faq/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.0",
+      "version": "0.8.2",
       "useWhen": "The questions section of a public page: a landing page, pricing, a help centre's front page, a product page. Not for a searchable help centre with articles and categories, or collapsible settings inside an app (use the kit's Accordion)."
     }
   }

package/r/file-upload.json

@@ -5,7 +5,7 @@
   "title": "FileUpload",
   "description": "Files chosen or dropped, each uploaded through your async onUpload(file, { onProgress, signal }) with a progress bar, cancel while it runs, a retry when it fails and a remove once done. Variants: a list of file cards, one file at a time, Uploading/Finished sections, image thumbnails (one or two columns), and a profile picture.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -47,7 +47,7 @@
   "docs": "Installed to components/makersclaw/blocks/file-upload. Import: import { FileUpload, formatSize, fileIcon } from \"@/components/makersclaw/blocks/file-upload\". Props and an example: components/makersclaw/blocks/file-upload/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.0",
+      "version": "0.8.2",
       "useWhen": "A form or page takes files the app stores: attachments on a record, a CSV to import, product photos, a logo, a profile picture. Not for showing files already stored with no way to add (a table or list), and not for a chat message's attachments (the chat block's composer has those)."
     }
   }

package/r/first-run.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "first-run",
+  "type": "registry:block",
+  "title": "FirstRun",
+  "description": "An app's first page, before anything is made, in working-tool style and not a landing page. In order, at the kit's normal sizes: one plain heading line and one line of what the app does; the first steps in a row as action cards, offered in a fixed order whatever order the app lists them in (the agent's way in first, then making the first thing yourself, then starting from the Library, then bringing it in from another tool; the first is the page's one main button, and a step with nothing to press is dropped); the starting points shelf (the app's LibraryShelf, passed as a node); what the agent will do by itself and the accounts it can use, side by side; and a worked example behind a \"See an example\" button, either revealed in place or handed to the app's own example mode, never filling the page. A node above the steps takes a Notice, a node after them a form. An agent step opens the agent's dock with a starting line and lets the agent ask for what it is missing; it never opens a form first. `npm run check` refuses an <h1> at 36px or more. The step order, the row width and the variants are exported as plain functions.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/first-run/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/first-run/index.js",
+      "content": "// The FirstRun block — `makersclaw add first-run`. Fixed: compose it through\n// its props (README.md beside this file). The model's helpers are plain\n// functions; they work on the server too.\nexport { FirstRun } from \"./first-run\";\nexport { KINDS, columnsFor, orderChoices, stepsOf, stepsWords, variantFor } from \"./first-run-model\";\n"
+    },
+    {
+      "path": "registry/blocks/first-run/first-run.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/first-run/first-run.jsx",
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { ActionCard, Button, Card, Icon, cx } from \"../../ui\";\nimport { columnsFor, stepsOf, stepsWords } from \"./first-run-model\";\n\n// FirstRun — an app's first page, before anything is made. Working-tool\n// style, not a landing page (UI review X10, 2026-10-12: Gantt Planner opened\n// on a 52px hero, four stacked cards, a big chart and a second shelf; each\n// app invented its own first run, Roadmap's, Newsletter's and Gantt's all\n// differed).\n//\n// In order, at the kit's normal sizes:\n//   1. one plain heading line, and one line of what the app does\n//   2. the first steps in a row, the agent's way in first (X9), then making\n//      the first thing yourself, then starting from the Library, then\n//      bringing it in from another tool. The first is the page's one main\n//      button\n//   3. the starting points shelf (the app passes its LibraryShelf)\n//   4. what the agent will do, and the accounts it can use, side by side\n//   5. a worked example, behind \"See an example\". Never filling the page\n//\n// `npm run check` (rule 24, hero) refuses an <h1> at 36px or more.\n//\n// One column, the page's own scroll (UI review X13, 2026-10-12: Newsletter\n// Engine's first run was a short intro on the left and a long \"Name it\" form\n// in the right column, so the left sat short and the right scrolled on). The\n// block has no side column and draws none: a form for \"type it yourself\"\n// (`children`) is revealed in the main flow, as its own card between the\n// steps and the shelf, when its step is pressed. Never beside them. Rule 27\n// (sidelong) refuses an app that puts a form in a side column.\n\n/** A step's button. */\nfunction StepButton({ action, variant, kind }) {\n  return (\n    <Button data-first-run-step={kind} variant={variant} icon={action.icon} href={action.href} onClick={action.onClick} disabled={action.disabled} loading={action.loading}>\n      {action.label}\n      {action.cost ? <span className=\"ml-1\">{action.cost}</span> : null}\n    </Button>\n  );\n}\n\nfunction WhatTheAgentDoes({ title, items }) {\n  return (\n    <section aria-label={title} className=\"grid content-start gap-3\">\n      <h2 className=\"text-xs font-semibold uppercase tracking-[0.06em] text-muted-foreground\">{title}</h2>\n      <ul className=\"m-0 grid list-none gap-3 p-0\">\n        {items.map((it) => (\n          <li key={it.name} className=\"flex gap-2.5\">\n            <Icon name=\"sparkles\" size={14} className=\"mt-1 shrink-0 text-muted-foreground\" />\n            <div className=\"min-w-0\">\n              <p className=\"font-semibold\">\n                {it.name}\n                {it.when ? <span className=\"font-normal text-muted-foreground\"> · {it.when}</span> : null}\n              </p>\n              {it.what ? <p className=\"text-[13px] text-muted-foreground\">{it.what}</p> : null}\n              {it.cost ? <p className=\"text-xs\">{it.cost}</p> : null}\n            </div>\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n}\n\n/**\n *   title         the heading: one plain line (\"Nothing is planned here yet.\")\n *   lede          one line of what the app does and what happens next\n *   notice        a node above the steps (a Notice: a missing account, a limit)\n *   choices       [{ key, kind, icon, title, description, action, status, note }]\n *                 kind: agent · hand · library · import · other (the order they\n *                 are offered in, whatever order they are given). action:\n *                 { label, href | onClick, icon, cost, variant, disabled,\n *                 loading }: a step with no action is dropped. An agent step\n *                 opens the agent's dock with a starting line (\"Draft a project\n *                 plan for me\") and the agent asks for what it is missing; it\n *                 never opens a form first. status: { tone, children } (an\n *                 ActionCard's); note: a node between the description and\n *                 the status (a price line)\n *   children      a node after the steps, in the main flow (a card that\n *                 reveals the form to name the first thing when its step is\n *                 pressed). Never a side column\n *   shelf         the starting points: your LibraryShelf, as a node\n *   agentDoes     [{ name, when, what, cost }]: what the agent will do, by\n *                 itself, and when. `agentTitle` (default \"What the agent will do\")\n *   accounts      a node: the accounts it can use, all optional (ConnectRow\n *                 list). `accountsTitle` (default \"Accounts, all optional\")\n *   example       { label, title, description, onOpen, children }: a worked\n *                 example behind a button. With `onOpen` the button calls it\n *                 (an example mode); with `children` it reveals them in place\n *   className     spacing around the page\n */\nexport function FirstRun({ title, lede, notice, choices, children, shelf, agentDoes, agentTitle = \"What the agent will do\", accounts, accountsTitle = \"Accounts, all optional\", example, className }) {\n  const steps = stepsOf(choices);\n  const [open, setOpen] = useState(false);\n  const wide = Boolean(agentDoes?.length) && Boolean(accounts);\n  return (\n    <div data-first-run className={cx(\"@container grid gap-6 p-4 sm:p-6\", className)}>\n      <header className=\"grid gap-1.5\">\n        <h1 className=\"font-display text-2xl font-semibold leading-tight\">{title}</h1>\n        {lede ? <p className=\"max-w-[62ch] text-[13px] text-muted-foreground\">{lede}</p> : null}\n      </header>\n\n      {notice ?? null}\n\n      {steps.length ? (\n        <section aria-label={stepsWords(steps.length)} className={cx(\"grid gap-3\", columnsFor(steps.length))}>\n          {steps.map((c) => (\n            <ActionCard\n              key={c.key ?? c.title}\n              icon={c.icon}\n              title={c.title}\n              description={c.description}\n              status={c.status}\n              action={<StepButton action={c.action} variant={c.variant} kind={c.kind} />}\n            >\n              {c.note ?? null}\n            </ActionCard>\n          ))}\n        </section>\n      ) : null}\n\n      {children ?? null}\n      {shelf ?? null}\n\n      {agentDoes?.length || accounts ? (\n        <div className={cx(\"grid gap-6\", wide && \"@3xl:grid-cols-2\")}>\n          {agentDoes?.length ? <WhatTheAgentDoes title={agentTitle} items={agentDoes} /> : null}\n          {accounts ? (\n            <section aria-label={accountsTitle} className=\"grid content-start gap-3\">\n              <h2 className=\"text-xs font-semibold uppercase tracking-[0.06em] text-muted-foreground\">{accountsTitle}</h2>\n              {accounts}\n            </section>\n          ) : null}\n        </div>\n      ) : null}\n\n      {example ? (\n        <section aria-label={example.title ?? \"Example\"} className=\"grid gap-3\">\n          <Card padding=\"sm\" className=\"border-dashed\">\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <div className=\"min-w-0 flex-1 basis-72\">\n                {example.title ? <p className=\"font-semibold\">{example.title}</p> : null}\n                {example.description ? <p className=\"text-[13px] text-muted-foreground\">{example.description}</p> : null}\n              </div>\n              <Button variant=\"secondary\" onClick={example.onOpen ?? (() => setOpen((v) => !v))} aria-expanded={example.onOpen ? undefined : open}>\n                {example.onOpen ? (example.label ?? \"See an example\") : open ? \"Hide the example\" : (example.label ?? \"See an example\")}\n              </Button>\n            </div>\n          </Card>\n          {open && !example.onOpen ? <div className=\"min-w-0\">{example.children}</div> : null}\n        </section>\n      ) : null}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/first-run/first-run-model.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/first-run/first-run-model.js",
+      "content": "// The first run's rules as plain functions: the order the first steps are\n// offered in, how many sit in a row at which width, and which step is the\n// page's one main button. No React here.\n//\n// The order is the founder's (UI review X9, 2026-10-12): \"the agent should be\n// able to create these\". The agent's way in comes first, then making the\n// first thing yourself, then starting from the Library, then bringing it in\n// from another tool. An app lists its steps in any order; the page offers\n// them in this one.\n\nexport const KINDS = [\"agent\", \"hand\", \"library\", \"import\", \"other\"];\n\n/** The steps in the order they are offered; steps of one kind keep the order\n *  given. A step with no kind goes last. A step without a way to take it\n *  (no `action`) is dropped: a card with nothing to press is a lie. */\nexport function orderChoices(choices) {\n  const rank = (c) => {\n    const i = KINDS.indexOf(c?.kind);\n    return i < 0 ? KINDS.length - 1 : i;\n  };\n  return (choices ?? [])\n    .map((c, at) => ({ c, at }))\n    .filter(({ c }) => c && c.title && c.action && (c.action.href || typeof c.action.onClick === \"function\") && c.action.label)\n    .sort((a, b) => rank(a.c) - rank(b.c) || a.at - b.at)\n    .map(({ c }) => c);\n}\n\n/** The container classes that set how many steps sit in a row: the page's\n *  own width, whole class names for Tailwind. */\nexport function columnsFor(count) {\n  if (count <= 1) return \"\";\n  if (count === 2) return \"@xl:grid-cols-2\";\n  if (count === 3) return \"@xl:grid-cols-2 @3xl:grid-cols-3\";\n  return \"@xl:grid-cols-2 @5xl:grid-cols-4\";\n}\n\n/** The step's button variant: the first step is the page's one main button\n *  (primary); the rest are secondary, unless a step names its own. */\nexport function variantFor(choice, index) {\n  return choice?.action?.variant ?? (index === 0 ? \"primary\" : \"secondary\");\n}\n\n/** The steps as the page will draw them: ordered, each with its variant. */\nexport function stepsOf(choices) {\n  return orderChoices(choices).map((c, i) => ({ ...c, variant: variantFor(c, i) }));\n}\n\n/** Words for a screen reader about how many ways in there are. */\nexport function stepsWords(count) {\n  return count === 1 ? \"1 way to begin\" : `${count} ways to begin`;\n}\n"
+    },
+    {
+      "path": "registry/blocks/first-run/probe-rules.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/first-run/probe-rules.js",
+      "content": "// The layout rules this block ships for the store's probe (makersclaw-store\n// scripts/probe.mjs --suite); see top-bar/probe-rules.js. Nothing imports this.\nexport default {\n  block: \"first-run\",\n  rules: [\n    {\n      id: \"no-hero-heading\",\n      kind: \"heading-max\",\n      note: \"UI review X10: a marketing hero on the first screen\",\n      scope: \"[data-first-run]\",\n      max: 32,\n    },\n    {\n      id: \"agent-step-opens-the-dock\",\n      kind: \"flow\",\n      note: \"UI review X9: a form before the agent\",\n      scope: \"[data-first-run-step='agent']\",\n      sizes: [\"375x812\", \"1280x900\"],\n      steps: [\n        { click: { selector: \"[data-first-run-step='agent']\" }, neverText: [] },\n        { expect: { dock: \"open\" } },\n        { expect: { noDialog: true } },\n      ],\n    },\n  ],\n};\n"
+    },
+    {
+      "path": "registry/blocks/first-run/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/first-run/README.md",
+      "content": "# FirstRun\n\nAn app's first page, before anything is made (0.8.1). Working-tool style, not\na landing page.\n\nThe founder's review of Gantt Planner, 2026-10-12: its home was a 52px hero\n(\"Plan a project that lands on its date.\"), four stacked cards, a big example\nchart and a second shelf, and it \"reads like a website, not an app's home\".\nRoadmap's first run and Newsletter's differed again. Each app had invented\nits own. This is the one.\n\nIn order, at the kit's normal sizes:\n\n1. **One plain heading line**, and one line of what the app does.\n2. **The first steps in a row** (action cards), offered in a fixed order\n   whatever order you list them in: the agent's way in, then making the first\n   thing yourself, then starting from the Library, then bringing it in from\n   another tool. The first is the page's one main button.\n3. **The starting points shelf**: your `LibraryShelf`, passed as a node.\n4. **What the agent will do**, and **the accounts it can use**, side by side.\n5. **A worked example, behind \"See an example\".** It never fills the page.\n\nA step with nothing to press is dropped: a card with no action is a lie.\n\n**An agent step never opens a form first.** Its `onClick` opens the agent's\ndock with a starting line (\"Draft a project plan for me\") and the agent asks\nfor what it is missing, in chat, then makes the thing through the app's own\nactions. A form belongs to \"type it yourself\". (UI review X9: the founder,\n\"the agent should be able to create these\".)\n\n**One column; a form is revealed in the main flow.** The block has no side\ncolumn. A \"Name it\" or \"Paste a list\" step, when pressed, reveals its own\ncard under the steps (`children`), in the page's own scroll, and the shelf\nand the rest move down. Never put that form in a side column beside a short\nintro: the side is the fixed, short one and the main is the one that scrolls\n(UI review X13: the founder, looking at exactly that, \"one small column and\nthen all the card long scrolling in other column\"). `npm run check` (rule\n`sidelong`) refuses an app that does.\n\n`npm run check` (rule `hero`) refuses an `<h1>` at 36px or more, so the page\ncannot go back to a hero.\n\n```jsx\nimport { FirstRun } from \"../components/blocks/first-run\";   // a Makersclaw app (\"./blocks/first-run\" from components/)\nimport { FirstRun } from \"@/components/makersclaw/blocks/first-run\";   // a shadcn project\n```\n\nA client component. It needs the kit and nothing else; the shelf, the\naccounts and the example come in as nodes.\n\n## Adopting it (an app that drew its own)\n\n1. Delete the app's own first-run page's layout: the hero, the card grid,\n   the headings of \"what the agent will do\" and \"accounts\". Keep what is the\n   app's: its copy, its starting points (`LibraryShelf`), its connect rows.\n2. Return `<FirstRun title lede choices shelf agentDoes accounts example />`\n   from the same place, inside the screen's `AppLayout` (the page pads\n   itself).\n3. Put the worked example behind `example`: `onOpen` if the app has an\n   example mode (Roadmap's `lookAround`), or `children` to reveal in place.\n   Do not draw it on the page.\n4. Make the agent step an opener of the dock, not a link to a form.\n\n## Props\n\n- `title`: the heading, one plain line.\n- `lede`: one line of what the app does and what happens next.\n- `notice`: a node above the steps (a `Notice`).\n- `choices`: `[{ key, kind, icon, title, description, action, status, note }]`.\n  `kind`: `agent` · `hand` · `library` · `import` · `other`. `action`:\n  `{ label, href | onClick, icon, cost, variant, disabled, loading }`; `cost`\n  is a node after the label (a `CostTag`). `status`: an ActionCard's\n  `{ tone, children }` (\"Connected\" only when an account is listed). `note`:\n  a node between the description and the status.\n- `children`: a node after the steps, in the main flow (a card that reveals\n  the form to name the first thing when its step is pressed).\n- `shelf`: your starting points, as a node.\n- `agentDoes`: `[{ name, when, what, cost }]`; `agentTitle`.\n- `accounts`: a node; `accountsTitle` (default \"Accounts, all optional\").\n- `example`: `{ label, title, description, onOpen, children }`.\n- `className`: spacing around the page.\n\n## The model (plain functions)\n\n`orderChoices(choices)`, `stepsOf(choices)` (ordered, each with its `variant`),\n`variantFor(choice, index)`, `columnsFor(count)` (the container classes that\nset how many sit in a row), `stepsWords(count)`, `KINDS`.\n\n## Example\n\n```jsx\n// components/first-run-page.jsx\n\"use client\";\nimport { FirstRun } from \"./blocks/first-run\";\nimport { openAgent } from \"./blocks/agent-dock\";\n\nexport function Nothing({ onType, onLibrary }) {\n  return (\n    <FirstRun\n      title=\"Nothing is planned here yet.\"\n      lede=\"Add one project. From the next weekday at 9:00 the agent checks the plan and tells you which dates will slip.\"\n      choices={[\n        { kind: \"hand\", icon: \"plus\", title: \"Add the first project\", description: \"A name, a start and a target.\", action: { label: \"New project\", onClick: onType } },\n        { kind: \"agent\", icon: \"sparkles\", title: \"Have the agent draft it\", description: \"Say what you are building; it asks for what it is missing.\", action: { label: \"Draft with the agent\", onClick: () => openAgent(\"Draft a project plan for me\") } },\n        { kind: \"library\", icon: \"layers\", title: \"Start from a starting point\", description: \"Phases and tasks already set.\", action: { label: \"Browse\", onClick: onLibrary } },\n      ]}\n      example={{ title: \"See it working first\", description: \"A made-up team of seven, read only.\", onOpen: () => {} }}\n    />\n  );\n}\n```\n\n## States drawn in the demo\n\nA plan's first run (four steps, listed out of order, a shelf, what the agent\nwill do, accounts, an example mode); a newsletter's (three steps, a Notice\nabove, an example revealed in place); the smallest (one heading, one line, one\nstep).\n"
+    }
+  ],
+  "categories": [
+    "first run",
+    "home",
+    "welcome",
+    "start",
+    "onboarding",
+    "empty",
+    "getting started",
+    "starting points",
+    "agent",
+    "example",
+    "steps"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/first-run. Import: import { FirstRun, KINDS, columnsFor, orderChoices, stepsOf, stepsWords, variantFor } from \"@/components/makersclaw/blocks/first-run\". Props and an example: components/makersclaw/blocks/first-run/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.8.2",
+      "useWhen": "Every app's first run: the page an app opens on while it has nothing yet, replacing each app's own components/<app>/first-run.jsx or home hero (Project Roadmap's four start cards, Newsletter Engine's start page, Gantt Planner's hero). Not for a screen that shows data (that is the app's own home), not an empty list inside a screen (the kit's Empty), and not a setup checklist that stays on the page after the first run (setup-checklist)."
+    }
+  }
+}

package/r/fix-note.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "fix-note",
+  "type": "registry:block",
+  "title": "FixNote",
+  "description": "\"The agent fixed this\": what the agent changed when a step of an automation failed, so the run still finished the same job. A sentence on why, the value as it was and as it is now, what the fix cost, and \"Keep this fix for next time\", which asks for a proposed change a person keeps or drops (nothing the agent proposes goes live by itself). It draws a run step's `fix`, says whether a write can be taken back (a send cannot), words a person's own edit of a run's data as theirs, and shows what became of the change the agent drafted: kept as a new version, dropped, or waiting. FixProposal is that drafted change on the automation itself, to keep or drop.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/agent-marks.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/automation-model.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/fix-note/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/fix-note/index.js",
+      "content": "// The FixNote block — `makersclaw add fix-note`. Fixed: compose it\n// through its props (README.md beside this file).\nexport { FixNote, FixProposal } from \"./fix-note\";\n"
+    },
+    {
+      "path": "registry/blocks/fix-note/fix-note.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/fix-note/fix-note.jsx",
+      "content": "\"use client\";\n\n// \"The agent fixed this\": what the agent changed when a step failed, so\n// the run still finished the same job. It says why in a sentence, shows\n// the value as it was and as it is now, what the fix cost, whether it can\n// be taken back (only a write can; a send cannot), and what became of the\n// change the agent drafted for next time: kept as a new version, dropped,\n// or still waiting for a person. Nothing the agent proposes goes live by\n// itself. It draws what a run's step reports in `fix`:\n// { by, kind, before, after, why, credits, effect, undo }, and the draft\n// from the run's `fixes`. A person's own edit of a run's data is the same\n// shape with `by: \"member\"` and is worded as theirs. Props in, callbacks out.\n//\n// FixProposal is the other half: a change the agent drafted from a failed\n// run, shown on the automation itself, to keep or drop.\n\nimport { useState } from \"react\";\nimport { Button, cx } from \"../../ui\";\nimport { AgentMark } from \"../agent-marks\";\nimport { changeLines, creditsWords } from \"../automation-model\";\n\nconst KIND = {\n  input: \"A value it was given\",\n  mapping: \"Where a value came from\",\n  format: \"The way a value is written\",\n  prompt: \"The words it asked with\",\n  retry: \"How it tries again\",\n  skip: \"A step that was skipped\",\n};\n\n/** A value as text: words as they are, the rest as compact JSON. */\nconst show = (v) => (typeof v === \"string\" ? v : (JSON.stringify(v) ?? \"\"));\n\nfunction Side({ label, value, tone }) {\n  return (\n    <div className=\"grid min-w-0 gap-0.5\">\n      <dt className=\"text-2xs font-semibold uppercase tracking-wide text-muted-foreground\">{label}</dt>\n      <dd className={cx(\"m-0 min-w-0 break-words rounded-md border px-2 py-1 font-mono text-xs\", tone === \"now\" ? \"border-primary/50 bg-primary/10\" : \"border-border bg-muted\")}>{show(value) || \"nothing\"}</dd>\n    </div>\n  );\n}\n\n/** One press that may fail: busy while it runs, its refusal in words. */\nfunction usePress() {\n  const [busy, setBusy] = useState(null);\n  const [error, setError] = useState(null);\n  async function press(what, work) {\n    if (!work || busy) return null;\n    setBusy(what);\n    setError(null);\n    let r;\n    try {\n      r = await work();\n    } catch (e) {\n      r = { ok: false, error: e?.message ?? String(e) };\n    }\n    setBusy(null);\n    if (r && r.ok === false) {\n      setError(r.error || \"That did not work. Try again.\");\n      return false;\n    }\n    return true;\n  }\n  return { busy, error, press };\n}\n\n/**\n *   fix        { by, kind, before, after, why, credits, effect, undo }\n *   stepTitle  the step's name, when the note stands apart from its step\n *   draft      the change the agent drafted for next time, from the run's\n *              `fixes`: { id, status: proposed | kept | dropped, new_version }.\n *              With it, Keep and Drop act on that draft.\n *   onKeep()   async → { ok } | { ok: false, error }: keep the fix for next\n *              time. With a `draft` it saves a new version that runs; with\n *              no draft the platform drafts one from this fix (a person\n *              keeps it). Without onKeep there is no button.\n *   onDrop()   async: drop the drafted change. Needs a `draft`.\n *   onUndo()   async: take a write back. Without it the note only says it can be.\n *   kept       true once it was proposed (the note says so, with no button)\n *   compact    one paragraph, no before and after\n */\nexport function FixNote({ fix, stepTitle, draft = null, onKeep, onDrop, onUndo, kept: keptProp = false, compact = false, className }) {\n  const { busy, error, press } = usePress();\n  const [done, setDone] = useState(null);\n  if (!fix) return null;\n  const mine = fix.by === \"member\";\n  const has = fix.before !== undefined || fix.after !== undefined;\n  const state = draft && draft.status !== \"proposed\" ? draft.status : done;\n  const undone = done === \"undone\";\n\n  const keep = async () => {\n    if ((await press(\"keep\", onKeep)) === true) setDone(draft ? \"kept\" : \"proposed\");\n  };\n  const drop = async () => {\n    if ((await press(\"drop\", onDrop)) === true) setDone(\"dropped\");\n  };\n  const undo = async () => {\n    if ((await press(\"undo\", onUndo)) === true) setDone(\"undone\");\n  };\n\n  const heading = mine\n    ? fix.kind === \"skip\"\n      ? \"You skipped this step\"\n      : stepTitle\n        ? `You changed the data for “${stepTitle}”`\n        : \"You changed this step’s data\"\n    : stepTitle\n      ? `The agent fixed “${stepTitle}”`\n      : \"The agent fixed this\";\n\n  return (\n    <section aria-label={mine ? \"You changed this\" : \"The agent fixed this\"} className={cx(\"@container grid min-w-0 gap-2 rounded-lg border p-3 text-sm text-foreground\", mine ? \"border-border bg-muted\" : \"border-primary/50 bg-primary/10\", className)}>\n      <h4 className=\"m-0 flex min-w-0 items-center gap-1.5 text-[13px] font-semibold\">\n        {mine ? null : <AgentMark />}\n        <span className=\"min-w-0\">{heading}</span>\n      </h4>\n      {fix.why ? <p className=\"m-0 text-[13px]\">{fix.why}</p> : null}\n      {!compact && has ? (\n        <dl className=\"m-0 grid gap-2 @sm:grid-cols-2\">\n          <Side label=\"It was\" value={fix.before} />\n          <Side label=\"Now\" value={fix.after} tone=\"now\" />\n        </dl>\n      ) : null}\n      <p className=\"m-0 text-xs text-muted-foreground\">\n        {KIND[fix.kind] ? `${KIND[fix.kind]}, for this run only.` : \"For this run only.\"}\n        {!mine && fix.credits ? ` It cost ${creditsWords(fix.credits)}.` : \"\"}\n      </p>\n      {fix.effect === \"write\" && fix.undo ? (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <p className=\"m-0 text-xs text-muted-foreground\">{undone ? \"Taken back.\" : \"It wrote to the app. That can be taken back.\"}</p>\n          {onUndo && !undone ? (\n            <Button size=\"sm\" variant=\"quiet\" icon=\"undo\" loading={busy === \"undo\"} onClick={undo}>\n              Undo\n            </Button>\n          ) : null}\n        </div>\n      ) : fix.effect === \"send\" ? (\n        <p className=\"m-0 text-xs text-muted-foreground\">It sent something, so it cannot be taken back.</p>\n      ) : null}\n      {state === \"kept\" ? (\n        <p role=\"status\" className=\"m-0 text-xs text-muted-foreground\">\n          {draft?.new_version ? `Kept as version ${draft.new_version}. It runs this way from now on.` : \"Kept. It runs this way from now on.\"}\n        </p>\n      ) : state === \"dropped\" ? (\n        <p role=\"status\" className=\"m-0 text-xs text-muted-foreground\">\n          Dropped. The automation stays as it was.\n        </p>\n      ) : state === \"proposed\" || keptProp ? (\n        <p role=\"status\" className=\"m-0 text-xs text-muted-foreground\">\n          Proposed as a change to this automation. It waits for you to keep it.\n        </p>\n      ) : onKeep ? (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <Button size=\"sm\" variant=\"secondary\" loading={busy === \"keep\"} disabled={busy !== null} onClick={keep}>\n            Keep this fix for next time\n          </Button>\n          {draft && onDrop ? (\n            <Button size=\"sm\" variant=\"quiet\" loading={busy === \"drop\"} disabled={busy !== null} onClick={drop}>\n              Drop it\n            </Button>\n          ) : null}\n        </div>\n      ) : null}\n      {error ? (\n        <p role=\"alert\" className=\"m-0 text-xs text-destructive\">\n          {error}\n        </p>\n      ) : null}\n    </section>\n  );\n}\n\n/**\n * A change the agent drafted from a failed run, for the automation as it\n * stands: why, which steps it would touch and what in them (named, never\n * shown), and Keep or Drop. Keeping saves a new version that runs; dropping\n * forgets it. A change drafted against an older version is stale: it can only\n * be dropped.\n *\n *   proposal   { id, why, stale, patch, base_version }  (GET automations/<id> `suggestions`)\n *   def        the definition, to name the steps\n *   onKeep(), onDrop()   async → { ok } | { ok: false, error }\n *   blocked    words for why Keep waits (\"Save or discard your changes first\")\n */\nexport function FixProposal({ proposal, def, onKeep, onDrop, blocked = null, className }) {\n  const { busy, error, press } = usePress();\n  const [done, setDone] = useState(null);\n  if (!proposal) return null;\n  const lines = changeLines(proposal.patch, def);\n\n  return (\n    <section aria-label=\"The agent suggests a change\" className={cx(\"@container grid min-w-0 gap-2 rounded-lg border border-primary/50 bg-primary/10 p-3 text-sm text-foreground\", className)}>\n      <h4 className=\"m-0 flex min-w-0 items-center gap-1.5 text-[13px] font-semibold\">\n        <AgentMark />\n        <span className=\"min-w-0\">The agent suggests a change for next time</span>\n      </h4>\n      {proposal.why ? <p className=\"m-0 text-[13px]\">{proposal.why}</p> : null}\n      {lines.length > 0 ? (\n        <ul className=\"m-0 grid list-disc gap-0.5 pl-5 text-[13px]\">\n          {lines.map((l) => (\n            <li key={l.stepId} className=\"min-w-0 break-words\">\n              <span className=\"font-medium\">{l.title}</span>: {l.what}\n            </li>\n          ))}\n        </ul>\n      ) : null}\n      {done ? (\n        <p role=\"status\" className=\"m-0 text-xs text-muted-foreground\">\n          {done === \"kept\" ? \"Kept. This version runs now.\" : \"Dropped. The automation stays as it was.\"}\n        </p>\n      ) : (\n        <>\n          {proposal.stale ? <p className=\"m-0 text-xs text-muted-foreground\">The automation changed after this was suggested, so it is out of date. You can drop it.</p> : blocked ? <p className=\"m-0 text-xs text-muted-foreground\">{blocked}</p> : null}\n          <div className=\"flex flex-wrap items-center gap-2\">\n            {onKeep ? (\n              <Button size=\"sm\" variant=\"secondary\" loading={busy === \"keep\"} disabled={busy !== null || proposal.stale || Boolean(blocked)} onClick={async () => ((await press(\"keep\", onKeep)) === true ? setDone(\"kept\") : null)}>\n                Keep it\n              </Button>\n            ) : null}\n            {onDrop ? (\n              <Button size=\"sm\" variant=\"quiet\" loading={busy === \"drop\"} disabled={busy !== null} onClick={async () => ((await press(\"drop\", onDrop)) === true ? setDone(\"dropped\") : null)}>\n                Drop it\n              </Button>\n            ) : null}\n          </div>\n        </>\n      )}\n      {error ? (\n        <p role=\"alert\" className=\"m-0 text-xs text-destructive\">\n          {error}\n        </p>\n      ) : null}\n    </section>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/fix-note/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/fix-note/README.md",
+      "content": "# FixNote\n\n\"The agent fixed this.\" When a step of an automation fails, the agent may\nchange what it needs to so **this run** still finishes the same job: a date\nformat, a missing field, a trimmed address, a different path that holds the\nsame thing. This block says what it changed, in the run, in words.\n\n- A sentence on **why** (\"The mail tool refuses spaces\").\n- The value **as it was** and **as it is now**, side by side.\n- What kind of change it was, and what the fix cost.\n- **Keep this fix for next time** — keeps the change the agent drafted: a\n  new version of the automation, which runs from now on. A person keeps or\n  drops it; nothing the agent proposes goes live by itself, and the agent\n  never changes who gets what, an approved word, a schedule or a limit.\n- Whether it can be **taken back**: a write can, a send cannot.\n\n```jsx\nimport { FixNote } from \"../components/blocks/fix-note\";   // a Makersclaw app\nimport { FixNote } from \"@/components/makersclaw/blocks/fix-note\";   // a shadcn project\n```\n\n`makersclaw add fix-note` lays `agent-marks` and `automation-model` with\nit. A client component. Its own width decides its layout: before and after\nsit side by side from about 384 px.\n\n## Props\n\n- `fix` — what a run's step reports: `{ by, kind, before, after, why,\n  credits, effect, undo }`. `by` is `agent` or `member` (a person's own edit\n  of a run's data, worded as theirs). `kind` is `input` · `mapping` ·\n  `format` · `prompt` · `retry` · `skip`. `effect` is `read` · `write` ·\n  `send`: only a **write** offers to be taken back (`undo: true`); a send\n  says it cannot be. Null draws nothing.\n- `stepTitle` — the step's name, when the note stands apart from its step.\n- `draft` — the change the agent drafted for next time, from the run's\n  `fixes`: `{ id, status: proposed | kept | dropped, new_version }`. A kept\n  one says \"Kept as version 3\"; a dropped one says so; a proposed one shows\n  Keep and Drop.\n- `onKeep()` — async → `{ ok }` or `{ ok: false, error }`. With a `draft` it\n  keeps that draft (a new version that runs); with none it asks the platform\n  to draft one from this fix. Without it there is no button (the member may\n  not).\n- `onDrop()` — drops the drafted change. Needs a `draft`.\n- `onUndo()` — takes a write back. Without it the note only says it can be.\n- `kept` — true once it was proposed (the note says so, with no button).\n- `compact` — one paragraph with no before and after.\n- `className`.\n\n## FixProposal\n\nThe same change on the automation itself: what the agent drafted from a\nfailed run, for the automation as it stands. Why, which steps it would touch\n(named, never shown), **Keep it** and **Drop it**. A stale one (the\nautomation moved on) can only be dropped.\n\n- `proposal` — `{ id, why, stale, patch }`, one of `suggestions` from\n  `useAutomation`.\n- `def` — the definition, to name the steps.\n- `onKeep()`, `onDrop()` — async, as above.\n- `blocked` — words for why Keep waits (\"Save or discard your changes first\").\n\n## Never\n\n- Never a fix that looks like the member's own edit: it is the agent's, and\n  the note says so.\n- Never \"Keep\" that publishes without a person: the agent drafts, a person\n  keeps, and kept saves a new version (the old one stays in the history).\n- Never an Undo for a send: a message that went out cannot be taken back.\n\n## Example\n\n```jsx\n\"use client\";\nimport { FixNote } from \"../components/blocks/fix-note\";\n\nexport default function Fixed({ step, onKeep }) {\n  return <FixNote fix={step.fix} stepTitle=\"Send the follow-up\" onKeep={onKeep} />;\n}\n```\n"
+    }
+  ],
+  "categories": [
+    "automation",
+    "workflow",
+    "agent",
+    "fix",
+    "repair",
+    "run",
+    "failed step",
+    "before and after",
+    "keep",
+    "proposal",
+    "provenance",
+    "undo",
+    "draft",
+    "suggestion",
+    "version"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/fix-note. Import: import { FixNote, FixProposal } from \"@/components/makersclaw/blocks/fix-note\". Props and an example: components/makersclaw/blocks/fix-note/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.8.2",
+      "useWhen": "A run's screen shows a step the agent repaired: run-view and step-settings place it for you. Use it on its own in a needs-you list or an activity line about an automation."
+    }
+  }
+}

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.8.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.2/r/core.json"
   ],
   "dependencies": [
     "@xyflow/react@12.11.6"
@@ -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.8.0",
+      "version": "0.8.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)."
     }
   }