makersclaw 0.7.0 → 0.8.1

package/r/chat.json

@@ -5,7 +5,7 @@
   "title": "Chat",
   "description": "The parts of a chat: messages with avatars, times, grouping, sending/failed/streaming states, hover actions, thumbs up/down feedback, in-place editing and a folding reasoning section; a scroller that sticks to the bottom with day separators and older-message loading; a composer (a box or an \"ask anything\" pill) with attachments, a + menu, tools, suggestion chips, Enter to send and Stop; a header; and ChatThread, which composes them from messages + onSend.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.7.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -61,7 +61,7 @@
       "path": "registry/blocks/chat/README.md",
       "type": "registry:file",
       "target": "@components/makersclaw/blocks/chat/README.md",
-      "content": "# Chat\n\nThe parts of a chat, and a thread made of them. `Message` is one turn:\navatar, name, time, the words in a `Bubble`, its files, its state\n(sending, streaming, failed with Retry) and the actions that appear on\nhover or focus (copy, regenerate, a menu of yours). `MessageScroller` is\nthe list: it keeps to the bottom while a reply streams unless the reader\nscrolled up, then offers \"Jump to latest\"; it puts a day between days,\nruns consecutive messages from one author together, loads older messages\nfrom the top and says each finished reply to a screen reader.\n`Composer` is the input: it grows with the text, Enter sends,\nShift+Enter is a new line, files come by paperclip, paste or drop, and\nSend becomes Stop while a reply streams; it comes as a box or as the\nround \"ask anything\" pill, with a \"+\" menu, your tools in its bar and\nsuggestion chips. An assistant reply can fold its reasoning away\n(\"Thought for 4s\") and take a thumbs up or down; a user message can be\nedited in place. `ChatHeader` is the strip over a thread (name, status,\nactions). `Attachment` is one file. `ChatThread` puts them together from\n`messages` and `onSend`.\n\n```jsx\nimport { ChatThread } from \"../components/blocks/chat\";   // a Makersclaw app (\"./blocks/chat\" from components/)\nimport { ChatThread } from \"@/components/makersclaw/blocks/chat\";   // a shadcn project\n```\n\nEvery part is a client component: render them from a `\"use client\"`\ncomponent. The block imports nothing but React and the kit — it holds no\nconversation and calls no model. The messages come in as a prop and the\nsend goes out as `onSend`; where the reply comes from (your server action,\nthe AI SDK's `useChat`, a support inbox table) is the surface's.\n\nThis is not the app window's Agent tab — the OS draws that. It is for a\nconversation that lives on your own screen: a support reply pane, a\ncustomer-facing assistant, comments on a record.\n\n## The data\n\nA message:\n\n```js\n{\n  id: \"m5\",                       // stable; the list is keyed on it\n  role: \"user\",                   // user · assistant · system\n  content: \"It's still showing…\", // a string — or `parts: [{ type: \"text\", text }]`\n  createdAt: \"2026-09-23T10:04:00Z\",\n  author: { name: \"Maya Chen\", src: \"https://…\" },   // optional\n  status: \"failed\",               // sending · streaming · failed · nothing (sent)\n  error: \"you are offline\",       // shown with a failed message\n  attachments: [{ id, name, size, type, url }],      // size in bytes; url shows an image's thumbnail\n  reasoning: \"They asked about the double charge…\",  // assistant only: folded over the reply\n  reasoningDuration: 4,           // seconds: \"Thought for 4s\"\n  feedback: \"up\",                 // up · down — the thumbs already given (assistant only)\n}\n```\n\n`reasoning` is drawn in a kit `Collapsible`, closed, over the reply.\nWhile the message streams with no answer yet it reads \"Thinking…\"; give\n`reasoning: \"\"` from the start to show that line instead of the three\ndots.\n\nA message with `parts` (the AI SDK's shape) is drawn from its text parts;\nother parts are not drawn. A `system` message is a centred muted line.\nAn assistant message with `status: \"streaming\"` and no text yet shows\nthree dots; with text it shows a caret after it.\n\nThe words are drawn by a small safe renderer — never as HTML, and with no\nmarkdown library. It understands fenced code blocks (with a Copy button;\nan unclosed fence runs to the end, so a block still streaming already\nlooks like one), `code spans`, `**bold**` and line breaks. Everything else\n(links, lists, headings) is plain text. `<script>` in a message is shown,\nnot run.\n\n## Props\n\n### ChatThread\n\n- `messages` — the conversation, oldest first.\n- `onSend(text, attachments)` — send it. The composer clears at once;\n  return `{ ok: false, error }` (or throw) and the text comes back to the\n  field with the reason under it. The usual pattern is to add the message\n  with `status: \"sending\"` here, then mark it sent or `failed`.\n- `streaming` — a reply is streaming: Send becomes Stop, Esc stops.\n  Default: true while any message has `status: \"streaming\"`.\n- `onStop()` — stop the reply.\n- `onRetry(message)` — the Retry on a failed message. Without it, a\n  failed message says so and offers nothing.\n- `onRegenerate(message)` — a regenerate button on assistant messages.\n- `actionsOf(message)` — more items for a message's menu, kit `Menu`\n  shape: `[{ label, onSelect, icon?, tone?: \"danger\" }]`.\n- `onFeedback(message, \"up\" | \"down\" | null)` — thumbs up and down on\n  assistant replies (pressing the chosen one again clears it: `null`).\n  The choice shows at once; return `{ ok: false, error }` (or throw) and\n  it goes back, with the reason under the message. Store it and pass it\n  back as `message.feedback`.\n- `onEdit(message, text)` — an edit button on your own messages. The\n  words come back in a field: Enter or Save saves, Esc or Cancel leaves\n  them. Return `{ ok: false, error }` and the field stays open with the\n  reason. Up arrow in an empty composer edits the last message you sent.\n  What an edit does next (drop the replies after it, ask again) is yours.\n- `header` — a node over the list, or the props of a `ChatHeader`\n  (`{ title, status, actions, menu }`).\n- `shape` — the composer: `\"box\"` (default) or `\"pill\"` (see Composer).\n- `tools` · `menu` — the composer's bar: nodes of yours, and kit `Menu`\n  items behind a \"+\" (see Composer).\n- `suggestions` — prompt chips over the composer:\n  `[{ label, prompt?, icon?, description? }]`. Shown while the thread is\n  empty; `suggestionsWhen=\"always\"` keeps them. `suggestionMode`\n  `\"send\"` (the default here: a press sends `prompt ?? label`) or\n  `\"fill\"` (puts it in the field). `suggestionsLook` `\"chips\"` (default)\n  or `\"cards\"`.\n- `onLoadMore()` · `hasMore` (false) · `loadingMore` (false) — older\n  messages. Reaching the top (or pressing \"Load earlier messages\") calls\n  `onLoadMore`; prepend them to `messages` and the reader keeps their place.\n- `attachments` · `onAttach(files)` · `onRemoveAttachment(att)` · `accept`\n  — files waiting in the composer. `onAttach` gets the browser's `File`s:\n  upload them and pass them back in `attachments` as\n  `{ id, name, size, type, url?, progress?, error? }` (`progress` 0–100\n  draws a bar; Send waits until every upload is at 100). Without\n  `onAttach` there is no paperclip. They reach `onSend` as its second\n  argument.\n- `disabled` (false) · `disabledPlaceholder` · `placeholder` — a closed\n  or read-only thread.\n- `variant` — how assistant words sit: `\"plain\"` (default, on the page)\n  or `\"bubble\"`. User messages are always filled bubbles at the end.\n- `assistantName` (\"Assistant\") · `assistantAvatar` · `userName` (\"You\")\n  · `userAvatar` · `showUserAvatar` (false) — who is who, when a message\n  has no `author`.\n- `emptyTitle` · `emptyBody` · `emptyState` — what an empty thread says;\n  `emptyState` replaces the whole thing.\n- `height` — default `\"min(40rem, 80dvh)\"`; the list scrolls inside it.\n- `label` — what the thread is called to a screen reader.\n- `className` — layout around it (width, margin). Never colour.\n\n### Message\n\n`message` (the shape above), `first` / `last` (its place in a run from\none author: `first` shows the avatar, name and time), `latest` (the\nnewest reply: its actions stay in view instead of waiting for hover), and `variant`,\n`assistantName`, `assistantAvatar`, `userName`, `userAvatar`,\n`showUserAvatar`, `onRetry`, `onRegenerate`, `actionsOf`, `onFeedback`,\n`onEdit` as above. `editing` / `onEditingChange(next)` control the edit\nfield (leave them out and the message keeps its own).\n`onCopy(message, text)` replaces the clipboard write; `formatTime(date)`\nreplaces the time's format.\n\n### Bubble\n\n`from` (`\"user\"` · `\"assistant\"`), `variant` (`\"bubble\"` · `\"plain\"`),\n`first` / `last`, `streaming` (draws the caret), and `text` (drawn by the\nsafe renderer) or `children`.\n\n### ChatHeader\n\n`title`, then `status` (`{ tone: \"success\", label: \"Online\", pulse? }`,\na kit `StatusDot`) or `subtitle` (a muted line) under it, `avatar`\n(`{ name?, src?, status? }`), `actions` (nodes at the end: a \"New chat\"\nButton), `menu` (kit `Menu` items behind a \"⋯\") and `menuLabel`.\n\n### Attachment\n\n`name`, `size` (bytes), `type` (MIME; the extension is used when it is\nmissing), `url` (an image shows itself; anything else opens it),\n`href` (open this instead), `progress` (0–100, a bar until 100), `error`,\n`onRemove`, `removeLabel`. An image's thumbnail is a kit `Image`: a\nskeleton while it loads, the image glyph if it fails.\n\n### MessageScroller\n\n`messages`, `renderMessage(message, { first, last, latest })` (default: a plain\n`Message`), `idOf(message, i)`, `onLoadMore` · `hasMore` · `loadingMore`,\n`emptyState`, `formatDay(date)` (\"Today\", \"Yesterday\", \"Mon 21 Sep\"),\n`announce(message)` (what a screen reader hears when a reply is whole),\n`jumpLabel`, `loadMoreLabel`, `label`, `className` (give it a bounded\nheight, or put it in a flex column), `children` (drawn after the last\nmessage — a typing line, say).\n\nThe list is a kit `ScrollArea`. Once it overflows it joins the tab order\nas a region named `label`, so a keyboard can scroll it.\n\n### Composer\n\n`onSend`, `onStop`, `streaming`, `disabled`, `disabledPlaceholder`,\n`placeholder`, `attachments` · `onAttach` · `onRemoveAttachment` ·\n`accept` as in ChatThread, and `value` / `onValueChange` (control the\ntext — to quote a message into it, say), `maxRows` (8), `canSendEmpty`\n(false), `label` (\"Message\"), `hint` (true: the Enter / Shift+Enter keys\nunder the field, from md up), `autoFocus`, and:\n\n- `shape` — `\"box\"` (default: the text on top, the bar under it) or\n  `\"pill\"`: the \"ask anything\" box, one round row with the \"+\" menu and\n  the paperclip before the text and `tools` and Send after it. Past one\n  line (or with files waiting) it opens into a rounded box, text on top;\n  emptied, it is a pill again. The pill shows no key hint.\n- `tools` — nodes in the bar: a model `Select`, a kit `Menu` of\n  settings with checkbox items, a `Toggle` for \"Auto\", a mic. The\n  composer draws them; what they choose is yours (read it in `onSend`).\n- `menu` · `menuLabel` (\"Add to the message\") — kit `Menu` items behind\n  a \"+\" at the start of the bar: \"Add files\", \"Search the web\".\n- `suggestions` — `[{ label, prompt?, icon?, description?, onSelect? }]`,\n  drawn `suggestionsPlacement` `\"below\"` (default) or `\"above\"` the\n  field. `suggestionMode` `\"fill\"` (default: the prompt goes in the\n  field, caret at its end) or `\"send\"`; an item's own `onSelect(item)`\n  replaces both. `suggestionsLook` `\"chips\"` (round, centred) or\n  `\"cards\"` (a two-column grid with `description` under each label).\n  `suggestionsLabel` names the list to a reader.\n- `onEditLast()` — Up arrow in the empty field (ChatThread opens the last\n  message you sent for editing).\n\nThe field is the kit's multi-line `InputGroup`: the waiting files sit\nabove the text inside its one border, the paperclip (a kit `FileInput`)\nand the hint in its bar, Send at the end. The picker leaves out files\n`accept` rules out; a drop or a paste is passed on as it comes.\n\n## Example\n\n```jsx\n// surfaces/ticket.jsx — client: one ticket's conversation\n\"use client\";\nimport { useState } from \"react\";\nimport { useSearchParams } from \"next/navigation\";\nimport { loadRows, useRow, useRows, whenLanded } from \"../lib/data\";\nimport { insertRow } from \"../lib/actions\";\nimport { ChatThread } from \"../components/blocks/chat\";\n\nconst source = \"ticket_messages\";\nconst PAGE = 200;\nconst oldestFirst = (rows) => [...rows].reverse();\nconst asMessage = (r) => ({ id: r.id, role: r.from_agent ? \"assistant\" : \"user\", content: r.body, createdAt: r.created_at });\n\nexport default function SupportChat() {\n  const id = useSearchParams().get(\"row\");\n  const { row: ticket } = useRow({ source: \"tickets\", id });\n  // The newest page, read again after every write.\n  const { rows, loading } = useRows({ source, filter: { ticket_id: id }, orderBy: \"created_at desc\", limit: PAGE });\n  const [earlier, setEarlier] = useState({ rows: [], more: true }); // what onLoadMore read, oldest first\n  const [sending, setSending] = useState([]);                        // sent, not read back yet\n  const seen = new Map([...earlier.rows, ...oldestFirst(rows)].map((r) => [r.id, r]));\n  const shown = [...seen.values()];\n\n  async function loadMore() {\n    const oldest = shown[0]?.created_at;\n    if (!oldest) return;\n    const r = await loadRows({ source, filter: { ticket_id: id, created_at: { lt: oldest } }, orderBy: \"created_at desc\", limit: PAGE });\n    // What is on screen is kept too: new messages push the oldest out of the page above.\n    if (!r.error) setEarlier({ rows: [...oldestFirst(r.rows), ...shown], more: r.rows.length === PAGE });\n  }\n\n  async function send(text) {\n    const mid = crypto.randomUUID();\n    setSending((all) => [...all, { id: mid, role: \"user\", content: text, createdAt: new Date().toISOString(), status: \"sending\" }]);\n    const r = await insertRow({ source, values: { id: mid, ticket_id: id, body: text }, detail: text });\n    if (r.ok) await whenLanded(); // read back: it is in `rows` now\n    setSending((all) => (r.ok ? all.filter((m) => m.id !== mid) : all.map((m) => (m.id === mid ? { ...m, status: \"failed\", error: r.error } : m))));\n  }\n\n  if (loading || !ticket) return null;\n  return (\n    <ChatThread\n      messages={[...shown.map(asMessage), ...sending.filter((m) => !seen.has(m.id))]}\n      onSend={send}\n      onRetry={(m) => { setSending((all) => all.filter((x) => x.id !== m.id)); send(m.content); }}\n      onLoadMore={loadMore}\n      hasMore={rows.length === PAGE && earlier.more}\n      assistantName={ticket.agent_name}\n      userName=\"You\"\n      label={`Ticket ${ticket.number}`}\n    />\n  );\n}\n```\n\n`onLoadMore` reads the page before the oldest message shown:\n`loadRows({ source, filter: { ticket_id, created_at: { lt: oldest } } })`,\nthe same filter in a server app's `loadRows` and the door.\n\nIn a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.\n\nWith the AI SDK in a shadcn project, `useChat()` already has the shape:\n`<ChatThread messages={messages} onSend={(text) => sendMessage({ text })}\nstreaming={status === \"streaming\" || status === \"submitted\"} onStop={stop}\nonRegenerate={() => regenerate()} />`.\n\n## What it will not do\n\n- Call a model, store a message or upload a file: those are the\n  surface's, through `onSend`, `onAttach` and the rows it passes back.\n- Render HTML or full markdown: links, lists, tables and images inside\n  the text stay plain text.\n- Keep the feedback or the edit: `onFeedback` and `onEdit` hand them to\n  you, and the rows you pass back are what shows. Emoji reactions are\n  yours, in `actionsOf`.\n- Record audio or pick a model: a mic or a model `Select` is a node you\n  put in `tools`.\n- Draw the app window's Agent tab, or a job the founder commissioned —\n  that is `job-panel`.\n\nA chat it cannot be is your own component in `components/`, built from\nthese parts and the kit — not an edit to this block. Its files are fixed:\n`npm run check` refuses a change, and `makersclaw add chat` restores them.\n\n## Credits\n\nThe pill composer, tools, suggestions, feedback, edit, reasoning and header are ported from blocks.so (https://blocks.so, ai-01–05 and chat-01–03, MIT) and Creative Tim UI (https://github.com/creativetimofficial/ui, ai-chat-streaming-01, MIT), rewritten on the Makersclaw kit.\n"
+      "content": "# Chat\n\nThe parts of a chat, and a thread made of them. `Message` is one turn:\navatar, name, time, the words in a `Bubble`, its files, its state\n(sending, streaming, failed with Retry) and the actions that appear on\nhover or focus (copy, regenerate, a menu of yours). `MessageScroller` is\nthe list: it keeps to the bottom while a reply streams unless the reader\nscrolled up, then offers \"Jump to latest\"; it puts a day between days,\nruns consecutive messages from one author together, loads older messages\nfrom the top and says each finished reply to a screen reader.\n`Composer` is the input: it grows with the text, Enter sends,\nShift+Enter is a new line, files come by paperclip, paste or drop, and\nSend becomes Stop while a reply streams; it comes as a box or as the\nround \"ask anything\" pill, with a \"+\" menu, your tools in its bar and\nsuggestion chips. An assistant reply can fold its reasoning away\n(\"Thought for 4s\") and take a thumbs up or down; a user message can be\nedited in place. `ChatHeader` is the strip over a thread (name, status,\nactions). `Attachment` is one file. `ChatThread` puts them together from\n`messages` and `onSend`.\n\n```jsx\nimport { ChatThread } from \"../components/blocks/chat\";   // a Makersclaw app (\"./blocks/chat\" from components/)\nimport { ChatThread } from \"@/components/makersclaw/blocks/chat\";   // a shadcn project\n```\n\nEvery part is a client component: render them from a `\"use client\"`\ncomponent. The block imports nothing but React and the kit — it holds no\nconversation and calls no model. The messages come in as a prop and the\nsend goes out as `onSend`; where the reply comes from (your server action,\nthe AI SDK's `useChat`, a support inbox table) is the surface's.\n\nThis is not the app window's Agent tab — the OS draws that. It is for a\nconversation that lives on your own screen: a support reply pane, a\ncustomer-facing assistant, comments on a record.\n\n## The data\n\nA message:\n\n```js\n{\n  id: \"m5\",                       // stable; the list is keyed on it\n  role: \"user\",                   // user · assistant · system\n  content: \"It's still showing…\", // a string — or `parts: [{ type: \"text\", text }]`\n  createdAt: \"2026-09-23T10:04:00Z\",\n  author: { name: \"Maya Chen\", src: \"https://…\" },   // optional\n  status: \"failed\",               // sending · streaming · failed · nothing (sent)\n  error: \"you are offline\",       // shown with a failed message\n  attachments: [{ id, name, size, type, url }],      // size in bytes; url shows an image's thumbnail\n  reasoning: \"They asked about the double charge…\",  // assistant only: folded over the reply\n  reasoningDuration: 4,           // seconds: \"Thought for 4s\"\n  feedback: \"up\",                 // up · down — the thumbs already given (assistant only)\n}\n```\n\n`reasoning` is drawn in a kit `Collapsible`, closed, over the reply.\nWhile the message streams with no answer yet it reads \"Thinking…\"; give\n`reasoning: \"\"` from the start to show that line instead of the three\ndots.\n\nA message with `parts` (the AI SDK's shape) is drawn from its text parts;\nother parts are not drawn. A `system` message is a centred muted line.\nAn assistant message with `status: \"streaming\"` and no text yet shows\nthree dots; with text it shows a caret after it.\n\nThe words are drawn by a small safe renderer — never as HTML, and with no\nmarkdown library. It understands fenced code blocks (with a Copy button;\nan unclosed fence runs to the end, so a block still streaming already\nlooks like one), `code spans`, `**bold**` and line breaks. Everything else\n(links, lists, headings) is plain text. `<script>` in a message is shown,\nnot run.\n\n## Props\n\n### ChatThread\n\n- `messages` — the conversation, oldest first.\n- `onSend(text, attachments)` — send it. The composer clears at once;\n  return `{ ok: false, error }` (or throw) and the text comes back to the\n  field with the reason under it. The usual pattern is to add the message\n  with `status: \"sending\"` here, then mark it sent or `failed`.\n- `streaming` — a reply is streaming: Send becomes Stop, Esc stops.\n  Default: true while any message has `status: \"streaming\"`.\n- `onStop()` — stop the reply.\n- `onRetry(message)` — the Retry on a failed message. Without it, a\n  failed message says so and offers nothing.\n- `onRegenerate(message)` — a regenerate button on assistant messages.\n- `actionsOf(message)` — more items for a message's menu, kit `Menu`\n  shape: `[{ label, onSelect, icon?, tone?: \"danger\" }]`.\n- `onFeedback(message, \"up\" | \"down\" | null)` — thumbs up and down on\n  assistant replies (pressing the chosen one again clears it: `null`).\n  The choice shows at once; return `{ ok: false, error }` (or throw) and\n  it goes back, with the reason under the message. Store it and pass it\n  back as `message.feedback`.\n- `onEdit(message, text)` — an edit button on your own messages. The\n  words come back in a field: Enter or Save saves, Esc or Cancel leaves\n  them. Return `{ ok: false, error }` and the field stays open with the\n  reason. Up arrow in an empty composer edits the last message you sent.\n  What an edit does next (drop the replies after it, ask again) is yours.\n- `header` — a node over the list, or the props of a `ChatHeader`\n  (`{ title, status, actions, menu }`).\n- `shape` — the composer: `\"box\"` (default) or `\"pill\"` (see Composer).\n- `tools` · `menu` — the composer's bar: nodes of yours, and kit `Menu`\n  items behind a \"+\" (see Composer).\n- `suggestions` — prompt chips over the composer:\n  `[{ label, prompt?, icon?, description? }]`. Shown while the thread is\n  empty; `suggestionsWhen=\"always\"` keeps them. `suggestionMode`\n  `\"send\"` (the default here: a press sends `prompt ?? label`) or\n  `\"fill\"` (puts it in the field). `suggestionsLook` `\"chips\"` (default)\n  or `\"cards\"`.\n- `onLoadMore()` · `hasMore` (false) · `loadingMore` (false) — older\n  messages. Reaching the top (or pressing \"Load earlier messages\") calls\n  `onLoadMore`; prepend them to `messages` and the reader keeps their place.\n- `attachments` · `onAttach(files)` · `onRemoveAttachment(att)` · `accept`\n  — files waiting in the composer. `onAttach` gets the browser's `File`s:\n  upload them and pass them back in `attachments` as\n  `{ id, name, size, type, url?, progress?, error? }` (`progress` 0–100\n  draws a bar; Send waits until every upload is at 100). Without\n  `onAttach` there is no paperclip. They reach `onSend` as its second\n  argument.\n- `disabled` (false) · `disabledPlaceholder` · `placeholder` — a closed\n  or read-only thread.\n- `variant` — how assistant words sit: `\"plain\"` (default, on the page)\n  or `\"bubble\"`. User messages are always filled bubbles at the end.\n- `assistantName` (\"Assistant\") · `assistantAvatar` · `userName` (\"You\")\n  · `userAvatar` · `showUserAvatar` (false) — who is who, when a message\n  has no `author`.\n- `emptyTitle` · `emptyBody` · `emptyState` — what an empty thread says;\n  `emptyState` replaces the whole thing.\n- `height` — default `\"min(40rem, 80dvh)\"` (the block's own); the list\n  scrolls inside it. Yours is a length (`\"40rem\"`) or `\"100%\"` in a sized\n  box, such as the kit's `AppLayout contentMode=\"fill\"`: a `vh` length in\n  your code is refused by `npm run check`.\n- `label` — what the thread is called to a screen reader.\n- `className` — layout around it (width, margin). Never colour.\n\n### Message\n\n`message` (the shape above), `first` / `last` (its place in a run from\none author: `first` shows the avatar, name and time), `latest` (the\nnewest reply: its actions stay in view instead of waiting for hover), and `variant`,\n`assistantName`, `assistantAvatar`, `userName`, `userAvatar`,\n`showUserAvatar`, `onRetry`, `onRegenerate`, `actionsOf`, `onFeedback`,\n`onEdit` as above. `editing` / `onEditingChange(next)` control the edit\nfield (leave them out and the message keeps its own).\n`onCopy(message, text)` replaces the clipboard write; `formatTime(date)`\nreplaces the time's format.\n\n### Bubble\n\n`from` (`\"user\"` · `\"assistant\"`), `variant` (`\"bubble\"` · `\"plain\"`),\n`first` / `last`, `streaming` (draws the caret), and `text` (drawn by the\nsafe renderer) or `children`.\n\n### ChatHeader\n\n`title`, then `status` (`{ tone: \"success\", label: \"Online\", pulse? }`,\na kit `StatusDot`) or `subtitle` (a muted line) under it, `avatar`\n(`{ name?, src?, status? }`), `actions` (nodes at the end: a \"New chat\"\nButton), `menu` (kit `Menu` items behind a \"⋯\") and `menuLabel`.\n\n### Attachment\n\n`name`, `size` (bytes), `type` (MIME; the extension is used when it is\nmissing), `url` (an image shows itself; anything else opens it),\n`href` (open this instead), `progress` (0–100, a bar until 100), `error`,\n`onRemove`, `removeLabel`. An image's thumbnail is a kit `Image`: a\nskeleton while it loads, the image glyph if it fails.\n\n### MessageScroller\n\n`messages`, `renderMessage(message, { first, last, latest })` (default: a plain\n`Message`), `idOf(message, i)`, `onLoadMore` · `hasMore` · `loadingMore`,\n`emptyState`, `formatDay(date)` (\"Today\", \"Yesterday\", \"Mon 21 Sep\"),\n`announce(message)` (what a screen reader hears when a reply is whole),\n`jumpLabel`, `loadMoreLabel`, `label`, `className` (give it a bounded\nheight, or put it in a flex column), `children` (drawn after the last\nmessage — a typing line, say).\n\nThe list is a kit `ScrollArea`. Once it overflows it joins the tab order\nas a region named `label`, so a keyboard can scroll it.\n\n### Composer\n\n`onSend`, `onStop`, `streaming`, `disabled`, `disabledPlaceholder`,\n`placeholder`, `attachments` · `onAttach` · `onRemoveAttachment` ·\n`accept` as in ChatThread, and `value` / `onValueChange` (control the\ntext — to quote a message into it, say), `maxRows` (8), `canSendEmpty`\n(false), `label` (\"Message\"), `hint` (true: the Enter / Shift+Enter keys\nunder the field, from md up), `autoFocus`, and:\n\n- `shape` — `\"box\"` (default: the text on top, the bar under it) or\n  `\"pill\"`: the \"ask anything\" box, one round row with the \"+\" menu and\n  the paperclip before the text and `tools` and Send after it. Past one\n  line (or with files waiting) it opens into a rounded box, text on top;\n  emptied, it is a pill again. The pill shows no key hint.\n- `tools` — nodes in the bar: a model `Select`, a kit `Menu` of\n  settings with checkbox items, a `Toggle` for \"Auto\", a mic. The\n  composer draws them; what they choose is yours (read it in `onSend`).\n- `menu` · `menuLabel` (\"Add to the message\") — kit `Menu` items behind\n  a \"+\" at the start of the bar: \"Add files\", \"Search the web\".\n- `suggestions` — `[{ label, prompt?, icon?, description?, onSelect? }]`,\n  drawn `suggestionsPlacement` `\"below\"` (default) or `\"above\"` the\n  field. `suggestionMode` `\"fill\"` (default: the prompt goes in the\n  field, caret at its end) or `\"send\"`; an item's own `onSelect(item)`\n  replaces both. `suggestionsLook` `\"chips\"` (round, centred) or\n  `\"cards\"` (a two-column grid with `description` under each label).\n  `suggestionsLabel` names the list to a reader.\n- `onEditLast()` — Up arrow in the empty field (ChatThread opens the last\n  message you sent for editing).\n\nThe field is the kit's multi-line `InputGroup`: the waiting files sit\nabove the text inside its one border, the paperclip (a kit `FileInput`)\nand the hint in its bar, Send at the end. The picker leaves out files\n`accept` rules out; a drop or a paste is passed on as it comes.\n\n## Example\n\n```jsx\n// surfaces/ticket.jsx — client: one ticket's conversation\n\"use client\";\nimport { useState } from \"react\";\nimport { useSearchParams } from \"next/navigation\";\nimport { loadRows, useRow, useRows, whenLanded } from \"../lib/data\";\nimport { insertRow } from \"../lib/actions\";\nimport { ChatThread } from \"../components/blocks/chat\";\n\nconst source = \"ticket_messages\";\nconst PAGE = 200;\nconst oldestFirst = (rows) => [...rows].reverse();\nconst asMessage = (r) => ({ id: r.id, role: r.from_agent ? \"assistant\" : \"user\", content: r.body, createdAt: r.created_at });\n\nexport default function SupportChat() {\n  const id = useSearchParams().get(\"row\");\n  const { row: ticket } = useRow({ source: \"tickets\", id });\n  // The newest page, read again after every write.\n  const { rows, loading } = useRows({ source, filter: { ticket_id: id }, orderBy: \"created_at desc\", limit: PAGE });\n  const [earlier, setEarlier] = useState({ rows: [], more: true }); // what onLoadMore read, oldest first\n  const [sending, setSending] = useState([]);                        // sent, not read back yet\n  const seen = new Map([...earlier.rows, ...oldestFirst(rows)].map((r) => [r.id, r]));\n  const shown = [...seen.values()];\n\n  async function loadMore() {\n    const oldest = shown[0]?.created_at;\n    if (!oldest) return;\n    const r = await loadRows({ source, filter: { ticket_id: id, created_at: { lt: oldest } }, orderBy: \"created_at desc\", limit: PAGE });\n    // What is on screen is kept too: new messages push the oldest out of the page above.\n    if (!r.error) setEarlier({ rows: [...oldestFirst(r.rows), ...shown], more: r.rows.length === PAGE });\n  }\n\n  async function send(text) {\n    const mid = crypto.randomUUID();\n    setSending((all) => [...all, { id: mid, role: \"user\", content: text, createdAt: new Date().toISOString(), status: \"sending\" }]);\n    const r = await insertRow({ source, values: { id: mid, ticket_id: id, body: text }, detail: text });\n    if (r.ok) await whenLanded(); // read back: it is in `rows` now\n    setSending((all) => (r.ok ? all.filter((m) => m.id !== mid) : all.map((m) => (m.id === mid ? { ...m, status: \"failed\", error: r.error } : m))));\n  }\n\n  if (loading || !ticket) return null;\n  return (\n    <ChatThread\n      messages={[...shown.map(asMessage), ...sending.filter((m) => !seen.has(m.id))]}\n      onSend={send}\n      onRetry={(m) => { setSending((all) => all.filter((x) => x.id !== m.id)); send(m.content); }}\n      onLoadMore={loadMore}\n      hasMore={rows.length === PAGE && earlier.more}\n      assistantName={ticket.agent_name}\n      userName=\"You\"\n      label={`Ticket ${ticket.number}`}\n    />\n  );\n}\n```\n\n`onLoadMore` reads the page before the oldest message shown:\n`loadRows({ source, filter: { ticket_id, created_at: { lt: oldest } } })`,\nthe same filter in a server app's `loadRows` and the door.\n\nIn a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.\n\nWith the AI SDK in a shadcn project, `useChat()` already has the shape:\n`<ChatThread messages={messages} onSend={(text) => sendMessage({ text })}\nstreaming={status === \"streaming\" || status === \"submitted\"} onStop={stop}\nonRegenerate={() => regenerate()} />`.\n\n## What it will not do\n\n- Call a model, store a message or upload a file: those are the\n  surface's, through `onSend`, `onAttach` and the rows it passes back.\n- Render HTML or full markdown: links, lists, tables and images inside\n  the text stay plain text.\n- Keep the feedback or the edit: `onFeedback` and `onEdit` hand them to\n  you, and the rows you pass back are what shows. Emoji reactions are\n  yours, in `actionsOf`.\n- Record audio or pick a model: a mic or a model `Select` is a node you\n  put in `tools`.\n- Draw the app window's Agent tab, or a job the founder commissioned —\n  that is `job-panel`.\n\nA chat it cannot be is your own component in `components/`, built from\nthese parts and the kit — not an edit to this block. Its files are fixed:\n`npm run check` refuses a change, and `makersclaw add chat` restores them.\n\n## Credits\n\nThe pill composer, tools, suggestions, feedback, edit, reasoning and header are ported from blocks.so (https://blocks.so, ai-01–05 and chat-01–03, MIT) and Creative Tim UI (https://github.com/creativetimofficial/ui, ai-chat-streaming-01, MIT), rewritten on the Makersclaw kit.\n"
     }
   ],
   "categories": [
@@ -88,7 +88,7 @@
   "docs": "Installed to components/makersclaw/blocks/chat. Import: import { ChatThread, ChatHeader, Message, Bubble, Attachment, MessageScroller, Composer } from \"@/components/makersclaw/blocks/chat\". Props and an example: components/makersclaw/blocks/chat/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.7.0",
+      "version": "0.8.1",
       "useWhen": "A conversation lives inside the app's own screen: a support inbox reply pane, a customer-facing assistant, comments between teammates on a record, a thread per object. Not the app window's Agent tab (the OS draws that) and not a one-off job the founder commissions (job-panel)."
     }
   }

package/r/code-editor.json

@@ -5,7 +5,7 @@
   "title": "CodeEditor",
   "description": "A code editor (CodeMirror 6) in the workspace theme: SQL with the database's tables and columns in autocomplete, JSON checked as you type with plain-words errors, or plain text; line numbers, problems underlined in the text with a dot in the gutter, find and replace, folding, and a run hook on Cmd/Ctrl+Enter that runs the selection or the statement under the cursor. A quiet status line shows problems, the cursor, the mode and a Run button. Helpers split SQL into statements and check or format JSON anywhere, the server included.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.7.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json"
   ],
   "dependencies": [
     "@codemirror/state@6.7.6",
@@ -87,7 +87,7 @@
   "docs": "Installed to components/makersclaw/blocks/code-editor. Import: import { CodeEditor, useCodeEditor, LANGUAGES, SQL_DIALECTS, splitStatements, statementAt, sqlNamespace, checkJson, formatJson, stringifyJson, lineCol, offsetOf, normalizeDiagnostics } from \"@/components/makersclaw/blocks/code-editor\". Props and an example: components/makersclaw/blocks/code-editor/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.7.0",
+      "version": "0.8.1",
       "useWhen": "A screen edits code or structured text: a SQL console, a query in a report, a JSON config or payload, a webhook body, a template, a script. json-editor and sql-console are built on it. Not for prose (doc-editor), one line of text (the kit's Input), or showing a diagram (diagram)."
     }
   }

package/r/comment-box.json

@@ -5,8 +5,8 @@
   "title": "CommentBox",
   "description": "A minimal rich comment field (DocEditor in minimal mode): bold, italic, links and lists from the selection toolbar or markdown shortcuts, @mentions as chips, Cmd/Ctrl+Enter to post. It posts through an async onPost(doc) that answers { ok }, keeps the draft and says why when it fails, and clears when it lands. With `comments` it draws the thread above it: avatar, name, relative time, the rich body. Also exports the composer alone, the read-only body renderer and the timestamp.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.7.0/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.7.0/r/doc-editor.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/doc-editor.json"
   ],
   "dependencies": [],
   "files": [
@@ -57,7 +57,7 @@
   "docs": "Installed to components/makersclaw/blocks/comment-box. Import: import { CommentBox, CommentComposer, CommentBody, CommentTime } from \"@/components/makersclaw/blocks/comment-box\". Props and an example: components/makersclaw/blocks/comment-box/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.7.0",
+      "version": "0.8.1",
       "useWhen": "People comment on something in the app: a task, a design, a document, an approval, a support ticket; a reply field with @mentions under a thread. Not dated notes kept on a record with edit and delete (record-notes), not a conversation with an assistant (chat), not a long document (doc-editor, doc-page)."
     }
   }

package/r/connect-card.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "connect-card",
+  "type": "registry:block",
+  "title": "ConnectCard",
+  "description": "The accounts the app declares, as rows like the window's Settings › Connections: what each is for, its kind (Mail, Calendar), needed or optional, live or not connected as a mark and a word, which accounts meet it, and Connect or Change. The press goes out as onConnect(key): useConnections() (lib/hooks.js) opens the desk's connections panel for that need, listing every provider of the kind (no agent turn), or hands out the link in a new tab outside the desk, then watches until the account is live. Signing in stays the member's, at the provider.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/connect-card/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/connect-card/index.js",
+      "content": "// The ConnectCard block — `makersclaw add connect-card`. Fixed: compose\n// it through its props (README.md beside this file).\nexport { ConnectCard, ConnectRow } from \"./connect-card\";\n"
+    },
+    {
+      "path": "registry/blocks/connect-card/connect-card.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/connect-card/connect-card.jsx",
+      "content": "\"use client\";\n\n// The app's declared accounts as rows, the way the window's Settings ›\n// Connections draws them: what each is for, live or not connected, which\n// accounts meet it, and Connect (or Change). Props in, callbacks out: the\n// press goes out as onConnect(key), which useConnections turns into the\n// desk's connections panel (every provider of the kind; no agent turn),\n// or a link in a new tab outside the desk. Signing in stays the member's,\n// at the provider. Tokens only; live or not is a mark AND a word. Its own\n// width decides its layout (@container): under about 384 px the state and\n// the button go under the words.\n\nimport { Button, Icon, cx } from \"../../ui\";\n\n/** Live or not, as a pill: a mark and a word. */\nfunction StatePill({ connected, waiting }) {\n  const look = connected\n    ? { icon: \"circle-check\", word: \"Live\", tone: \"text-success border-success\" }\n    : waiting\n      ? { icon: \"loader\", word: \"Waiting for sign-in\", tone: \"text-info border-info\" }\n      : { icon: \"circle-dashed\", word: \"Not connected\", tone: \"text-muted-foreground border-border\" };\n  return (\n    <span className={cx(\"inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-[11.5px]\", look.tone)}>\n      <Icon name={look.icon} size={12} className={waiting && !connected ? \"animate-spin motion-reduce:animate-none\" : undefined} />\n      {look.word}\n    </span>\n  );\n}\n\n/**\n * One declared account.\n *\n *   connection   { key, label, required, connected, accounts, category_label }\n *                (a row of useConnections' `connections`)\n *   onConnect(key)   Connect / Change; leave it out and no button is drawn\n *   connecting   this account is being connected: the pill waits\n *   connectLabel, changeLabel   the button's words (default \"Connect\", \"Change\")\n */\nexport function ConnectRow({ connection, onConnect, connecting = false, connectLabel = \"Connect\", changeLabel = \"Change\", className }) {\n  const c = connection ?? {};\n  const accounts = Array.isArray(c.accounts) ? c.accounts.filter(Boolean) : [];\n  const meta = [c.category_label, c.required === true ? \"Needed\" : c.required === false ? \"Optional\" : null].filter(Boolean).join(\" · \");\n  return (\n    <li className={cx(\"grid min-w-0 gap-2 px-3.5 py-3 @sm:grid-cols-[minmax(0,1fr)_auto] @sm:items-center @sm:gap-3\", className)}>\n      <div className=\"grid min-w-0 gap-0.5\">\n        <span className=\"line-clamp-2 text-[13px] text-card-foreground\">{c.label}</span>\n        {meta ? <span className=\"truncate text-xs text-muted-foreground\">{meta}</span> : null}\n        {c.connected && accounts.length ? (\n          <span className=\"truncate text-xs text-muted-foreground\" title={accounts.join(\", \")}>\n            {accounts.length === 1 ? accounts[0] : `${accounts[0]} and ${accounts.length - 1} more`}\n          </span>\n        ) : null}\n      </div>\n      <div className=\"flex min-w-0 flex-wrap items-center gap-2 @sm:flex-nowrap @sm:justify-end\">\n        <StatePill connected={Boolean(c.connected)} waiting={connecting} />\n        {onConnect ? (\n          <Button size=\"sm\" variant={c.connected ? \"quiet\" : \"secondary\"} onClick={() => onConnect(c.key)} disabled={connecting && !c.connected}>\n            {c.connected ? changeLabel : connectLabel}\n          </Button>\n        ) : null}\n      </div>\n    </li>\n  );\n}\n\n/**\n * The app's accounts on a card.\n *\n *   connections   useConnections' `connections`\n *   onConnect(key)    useConnections' `connect`\n *   connecting    the key being connected (useConnections' `connecting`)\n *   title         the card's head (default \"Accounts it uses\"); null for none\n *   description   one line under it: what the app does with them\n *   empty         what the card says with no accounts (null draws nothing)\n */\nexport function ConnectCard({ connections = [], onConnect, connecting = null, title = \"Accounts it uses\", description, empty = \"This app connects to no accounts.\", className }) {\n  const list = Array.isArray(connections) ? connections : [];\n  if (!list.length && empty === null) return null;\n  return (\n    <section aria-label={title ?? \"Accounts\"} className={cx(\"@container grid min-w-0 overflow-hidden rounded-[var(--radius)] border border-border bg-card text-card-foreground\", className)}>\n      {title || description ? (\n        <header className=\"grid gap-0.5 border-b border-border px-3.5 py-3\">\n          {title ? (\n            <span className=\"flex min-w-0 items-center gap-2\">\n              <Icon name=\"link\" size={14} className=\"shrink-0 text-muted-foreground\" />\n              <b className=\"truncate text-sm font-semibold\">{title}</b>\n            </span>\n          ) : null}\n          {description ? <span className=\"text-xs text-muted-foreground\">{description}</span> : null}\n        </header>\n      ) : null}\n      {list.length ? (\n        <ul className=\"m-0 grid list-none divide-y divide-border p-0\">\n          {list.map((c) => (\n            <ConnectRow key={c.key} connection={c} onConnect={onConnect} connecting={connecting === c.key} />\n          ))}\n        </ul>\n      ) : (\n        <p className=\"m-0 px-3.5 py-3 text-[13px] text-muted-foreground\">{empty}</p>\n      )}\n    </section>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/connect-card/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/connect-card/README.md",
+      "content": "# ConnectCard\n\nThe accounts the app declares, as rows the member already knows from the\nwindow's Settings › Connections: what each is for, its kind (Mail,\nCalendar), needed or optional, **live** or **not connected** (a mark and\na word), which accounts meet it, and **Connect** or **Change**. Part of\nthe agent kit (0.8.1): the member connects where the need is felt,\ninside the app.\n\n```jsx\nimport { ConnectCard, ConnectRow } from \"../components/blocks/connect-card\";   // a Makersclaw app\nimport { ConnectCard, ConnectRow } from \"@/components/makersclaw/blocks/connect-card\";   // a shadcn project\n```\n\nA client component. Its own width decides its layout: under about\n384 px each row's state and button go under its words.\n\n## What Connect does\n\nThe block only calls `onConnect(key)`. `useConnections().connect` then:\n\n1. Inside the desk, asks it to open its connections panel for that\n   need (`claw:open-connections`). The panel lists every provider of the\n   need's kind — a \"mail\" need shows Gmail, Outlook, Zoho Mail — and the\n   member signs in there. No agent turn, no chat.\n2. Outside the desk (the app on its own host), fetches the link (`POST\n   _claw/connect`) and opens it in a new tab.\n3. Either way, looks every 3 s for two minutes until the account is\n   live; `connecting` is its key meanwhile, and the row says \"Waiting\n   for sign-in\".\n\n## Props\n\n### ConnectCard\n\n- `connections` — useConnections' `connections`: `[{ key, label,\n  required, connected, accounts, category, category_label }]`.\n- `onConnect(key)` — useConnections' `connect`. Leave it out and no\n  button is drawn (a read-only list).\n- `connecting` — the key being connected (useConnections'\n  `connecting`).\n- `title` — the head (default \"Accounts it uses\"); `null` for none.\n  `description` — one line under it: what the app does with them.\n- `empty` — what it says with no accounts; `null` draws nothing.\n- `className` — layout around it. Never colour.\n\n### ConnectRow\n\nOne row, for a list of your own (an empty state, a setup step):\n`connection`, `onConnect(key)`, `connecting` (boolean), `connectLabel`\n(\"Connect\"), `changeLabel` (\"Change\"). Put it inside a `<ul>`, in an\nelement with `@container` so its layout follows its width.\n\n## useConnections (lib/hooks.js)\n\n```js\nconst { connections, connecting, connect } = useConnections();\n```\n\nIt reads `GET _claw/connect` once, then only while an account is being\nconnected, and again when the page comes back. `connect(key)` resolves\n`{ opened: \"desk\" | \"tab\" | false, connected?, error? }`. On a claw from\nbefore the door it is `unavailable`: draw the card with `empty`, never\nan error.\n\n## Who may do what\n\nAny member who opens the app sees the accounts and may connect one: the\nsign-in is theirs, at the provider, as on the desk. Which accounts an\napp may use is the app's declaration, not this block's.\n\n## Never\n\n- Never a sign-in form, a password or a key field: the member signs in\n  at the provider, on the desk's panel or the link's page.\n- Never an agent turn to connect an account (\"Ask the agent to connect\n  Gmail\"): Connect opens the panel.\n- Never live or not by colour alone.\n\n## Example\n\n```jsx\n\"use client\";\nimport { useConnections } from \"../lib/hooks\";\nimport { ConnectCard } from \"../components/blocks/connect-card\";\n\nexport default function WhatItReads() {\n  const { connections, connecting, connect } = useConnections();\n  return (\n    <ConnectCard\n      title=\"What the CRM reads\"\n      description=\"Your mail and calendar, to build each person's timeline.\"\n      connections={connections}\n      connecting={connecting}\n      onConnect={connect}\n    />\n  );\n}\n```\n"
+    }
+  ],
+  "categories": [
+    "connect",
+    "connections",
+    "accounts",
+    "integrations",
+    "oauth",
+    "mailbox",
+    "calendar",
+    "sign in",
+    "setup",
+    "live",
+    "kit"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/connect-card. Import: import { ConnectCard, ConnectRow } from \"@/components/makersclaw/blocks/connect-card\". Props and an example: components/makersclaw/blocks/connect-card/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.8.1",
+      "useWhen": "An app that reads or writes through an outside account shows what it uses and lets the member connect it where the need is felt: a CRM's \"What the CRM reads\" (mailbox, calendar), an inbox app's accounts, a setup step, the empty state of a screen that needs a mailbox. For a first-run checklist use setup-checklist; for the app's own settings page use settings-list."
+    }
+  }
+}

package/r/contact-section.json

@@ -5,7 +5,7 @@
   "title": "Contact Section",
   "description": "A public \"contact us\" section: a form (name, email, message; optional phone, company, subject, a topic as chips or radios, a consent box) and/or the ways to reach you (email, phone, address, hours, offices). The form alone, beside an info panel (plain or filled), or with info cards above or beside it; an optional picture beside or behind the form. Validates in place, submits through an async onSubmit that returns { ok }, and shows the failure or a sent state.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.7.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -46,7 +46,7 @@
   "docs": "Installed to components/makersclaw/blocks/contact-section. Import: import { ContactSection } from \"@/components/makersclaw/blocks/contact-section\". Props and an example: components/makersclaw/blocks/contact-section/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.7.0",
+      "version": "0.8.1",
       "useWhen": "The contact page or contact section of a public site: sales enquiries, support requests, a studio's \"start a project\" form. Not for a signed-in user's support inbox or ticket thread, or a general-purpose record form (use a form of your own from the kit)."
     }
   }