makersclaw 0.2.0 → 0.3.1

package/r/search-dialog.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "search-dialog",
+  "type": "registry:block",
+  "title": "SearchDialog",
+  "description": "One ⌘K search over every kind of record — chats, documents, images, projects, people. Before typing it shows your sections (Last opened, Recent); while typing, ranked matches with the typed text marked, a date, image thumbnails, and kind chips (All, Chats, Images…) to narrow them. Searches your list in the browser, or your server through an async onSearch. Built on the kit's Command; SearchPanel is the same box inline.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.3.1/r/core.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/search-dialog/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/search-dialog/index.js",
+      "content": "// The SearchDialog block — `makersclaw add search-dialog`. Fixed:\n// compose it through its props (README.md beside this file).\nexport { SearchDialog, SearchPanel } from \"./search-dialog\";\n"
+    },
+    {
+      "path": "registry/blocks/search-dialog/search-dialog.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/search-dialog/search-dialog.jsx",
+      "content": "\"use client\";\n\nimport { isValidElement, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Command, IconButton, Image, Sheet, ToggleGroup, commandScore, cx } from \"../../ui\";\n\n// SearchDialog — one ⌘K box over every kind of record: chats, documents,\n// images, projects, people. Before anything is typed it shows your\n// sections (\"Last opened\", \"Recent\"); while typing, the matches with the\n// typed text marked, and kind chips (All, Chats, Images…) to narrow them.\n// Built on the kit's Command (the list, keys and ARIA) inside the kit's\n// Sheet. SearchPanel is the same box inline. See README.md beside this file.\n\nconst KINDS = {\n  chat: { label: \"Chats\", icon: \"message-circle\" },\n  document: { label: \"Documents\", icon: \"file\" },\n  image: { label: \"Images\", icon: \"image\" },\n  project: { label: \"Projects\", icon: \"folder\" },\n  person: { label: \"People\", icon: \"user\" },\n  company: { label: \"Companies\", icon: \"building\" },\n  task: { label: \"Tasks\", icon: \"circle-check\" },\n  page: { label: \"Pages\", icon: \"file\" },\n};\n\nconst cap = (s) => String(s).charAt(0).toUpperCase() + String(s).slice(1);\n\nfunction kindOf(kinds, value) {\n  return kinds.find((k) => k.value === value) ?? { value, label: KINDS[value]?.label ?? cap(value), icon: KINDS[value]?.icon ?? \"file\" };\n}\n\n/** The typed text marked inside `text`, once, ignoring case. */\nfunction Marked({ text, needle }) {\n  const s = String(text ?? \"\");\n  const at = needle ? s.toLowerCase().indexOf(needle) : -1;\n  if (at < 0) return s;\n  return (\n    <>\n      {s.slice(0, at)}\n      <mark className=\"rounded-sm bg-transparent font-semibold text-foreground underline decoration-primary decoration-2 underline-offset-2\">{s.slice(at, at + needle.length)}</mark>\n      {s.slice(at + needle.length)}\n    </>\n  );\n}\n\nfunction Thumb({ thumb, title }) {\n  if (isValidElement(thumb)) return <span className=\"flex size-8 shrink-0 overflow-hidden rounded-sm\">{thumb}</span>;\n  return <Image src={thumb || undefined} alt=\"\" ratio=\"square\" rounded=\"sm\" className=\"size-8 shrink-0\" title={title} />;\n}\n\n// The best of a result's fields against the query, 0 when none match.\nfunction score(r, q) {\n  return Math.max(commandScore(r.title, q), r.snippet ? commandScore(r.snippet, q) * 0.7 : 0, ...(r.keywords ?? []).map((k) => commandScore(k, q) * 0.9));\n}\n\n/** A server search: debounced, the older query aborted, failures kept. */\nfunction useServerSearch(onSearch, query) {\n  const fn = useRef(onSearch);\n  fn.current = onSearch;\n  const on = Boolean(onSearch) && Boolean(query);\n  const [state, setState] = useState({ items: null, loading: false, error: null, query: \"\" });\n  useEffect(() => {\n    if (!on) return;\n    const ctl = new AbortController();\n    setState((s) => ({ ...s, loading: true, error: null }));\n    const timer = setTimeout(async () => {\n      try {\n        const items = await fn.current(query, { signal: ctl.signal });\n        if (!ctl.signal.aborted) setState({ items: items ?? [], loading: false, error: null, query });\n      } catch (error) {\n        if (!ctl.signal.aborted) setState((s) => ({ ...s, loading: false, error }));\n      }\n    }, 200);\n    return () => {\n      clearTimeout(timer);\n      ctl.abort();\n    };\n  }, [on, query]);\n  return state;\n}\n\nexport function SearchPanel({\n  results = [],\n  sections,\n  kinds: kindsProp,\n  onSelect,\n  onSearch,\n  loading = false,\n  placeholder = \"Search…\",\n  label = \"Search\",\n  hint = \"Type to search.\",\n  showDate = true,\n  onClose,\n  autoFocus = false,\n  bare = false,\n  className,\n}) {\n  const [query, setQuery] = useState(\"\");\n  const [kind, setKind] = useState(\"all\");\n  const needle = query.trim().toLowerCase();\n  const server = useServerSearch(onSearch, needle);\n\n  // The chips: the kinds given, or every kind the data holds, in order.\n  const kinds = useMemo(() => {\n    if (kindsProp) return kindsProp;\n    const seen = [];\n    for (const r of [...results, ...(sections ?? []).flatMap((s) => s.results ?? [])]) if (r?.kind && !seen.includes(r.kind)) seen.push(r.kind);\n    return seen.map((v) => kindOf([], v));\n  }, [kindsProp, results, sections]);\n\n  const pass = (r) => kind === \"all\" || r.kind === kind;\n\n  // `at` keeps values unique when one result sits in two sections.\n  const toItem = (r, group, at = \"\") => {\n    const k = kindOf(kinds, r.kind);\n    const meta = [r.snippet, showDate && needle ? r.date : null].filter(Boolean);\n    return {\n      value: `${at}${r.id}`,\n      label: <Marked text={r.title} needle={needle} />,\n      description: meta.length ? (\n        <>\n          {r.snippet ? <Marked text={r.snippet} needle={needle} /> : null}\n          {meta.length > 1 ? \" · \" : null}\n          {showDate && needle && r.date ? r.date : null}\n        </>\n      ) : undefined,\n      icon: r.kind === \"image\" || r.thumb ? <Thumb thumb={r.thumb} title={r.title} /> : r.icon ?? k.icon,\n      group,\n      result: r,\n    };\n  };\n\n  let items;\n  if (!needle) {\n    items = (sections ?? []).flatMap((s, n) => (s.results ?? []).filter(pass).map((r) => toItem(r, s.heading, `${n}:`)));\n  } else if (onSearch) {\n    items = (server.items ?? []).filter(pass).map((r) => toItem(r));\n  } else {\n    items = results\n      .map((r, i) => ({ r, i, s: pass(r) ? score(r, needle) : 0 }))\n      .filter((x) => x.s > 0)\n      .sort((a, b) => b.s - a.s || a.i - b.i)\n      .map((x) => toItem(x.r));\n  }\n\n  const busy = loading || (Boolean(onSearch) && Boolean(needle) && (server.loading || server.query !== needle) && !server.error);\n  const kindLabel = kind === \"all\" ? \"\" : ` in ${kindOf(kinds, kind).label.toLowerCase()}`;\n  const empty = server.error && needle\n    ? \"Search failed. Check your connection and try again.\"\n    : needle\n      ? `No results for “${query.trim()}”${kindLabel}.`\n      : kind !== \"all\" && (sections ?? []).length\n        ? `Nothing recent${kindLabel}. Type to search.`\n        : hint;\n\n  const chips = kinds.length > 1 ? [{ value: \"all\", label: \"All\" }, ...kinds.map((k) => ({ value: k.value, label: k.label }))] : null;\n\n  return (\n    <div className={cx(\"flex min-w-0 flex-col overflow-hidden bg-popover text-popover-foreground\", !bare && \"rounded-lg border border-border\", className)}>\n      <Command\n        bare\n        label={label}\n        placeholder={placeholder}\n        items={items}\n        filter={false}\n        query={query}\n        onQueryChange={setQuery}\n        loading={busy}\n        empty={empty}\n        autoFocus={autoFocus}\n        listClassName=\"max-h-[min(24rem,55dvh)]\"\n        onSelect={(item) => onSelect?.(item.result)}\n      />\n      {chips || onClose ? (\n        <div className=\"flex items-center gap-2 border-t border-border px-2 py-1.5\">\n          {chips ? (\n            <div className=\"min-w-0 flex-1 overflow-x-auto\">\n              <ToggleGroup size=\"sm\" aria-label=\"Show only\" items={chips} value={kind} onChange={setKind} className=\"w-max\" />\n            </div>\n          ) : (\n            <span className=\"flex-1\" />\n          )}\n          {onClose ? <IconButton icon=\"x\" label=\"Close search\" size=\"sm\" onClick={onClose} /> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** SearchPanel in the kit's Sheet: a dialog near the top of a wide window,\n *  a bottom sheet on a phone. `open` + `onOpenChange`, or uncontrolled\n *  with `defaultOpen`; `hotkey=\"k\"` binds ⌘K / Ctrl+K to open and close\n *  it. Choosing a result closes it. */\nexport function SearchDialog({ open, defaultOpen = false, onOpenChange, hotkey, label = \"Search\", onSelect, className, ...panel }) {\n  const controlled = open !== undefined;\n  const [own, setOwn] = useState(defaultOpen);\n  const isOpen = controlled ? open : own;\n  const openRef = useRef(isOpen);\n  openRef.current = isOpen;\n  const changeRef = useRef(null);\n  changeRef.current = (next) => {\n    if (next === openRef.current) return;\n    openRef.current = next;\n    if (!controlled) setOwn(next);\n    onOpenChange?.(next);\n  };\n\n  useEffect(() => {\n    if (!hotkey) return;\n    function onKey(e) {\n      if (e.key?.toLowerCase() !== String(hotkey).toLowerCase() || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey) return;\n      e.preventDefault();\n      changeRef.current(!openRef.current);\n    }\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [hotkey]);\n\n  return (\n    <Sheet bare label={label} open={isOpen} onClose={() => changeRef.current(false)} side=\"center\" className={cx(\"sm:mt-[12dvh] sm:max-w-xl\", className)}>\n      {/* Mounted only while open, so each opening starts empty on \"All\". */}\n      {isOpen ? (\n        <SearchPanel\n          bare\n          autoFocus\n          label={label}\n          onClose={() => changeRef.current(false)}\n          onSelect={(r) => {\n            changeRef.current(false);\n            onSelect?.(r);\n          }}\n          {...panel}\n        />\n      ) : null}\n    </Sheet>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/search-dialog/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/search-dialog/README.md",
+      "content": "# SearchDialog\n\nOne search over every kind of record in an app: chats, documents, images,\nprojects, people. Before anything is typed it shows your sections (\"Last\nopened\", \"Recent chats\"). While typing it shows the matches, best first,\nwith the typed text marked, a date, and a thumbnail for an image. Chips\nunder the list (All, Chats, Images, Documents, Projects) narrow it to one\nkind. Arrow keys move, Enter opens, Esc closes, ⌘K / Ctrl+K toggles it.\n\nIt is the kit's `Command` (the list, the keys, the screen-reader wiring)\ninside the kit's `Sheet`: a dialog near the top of a wide window, a\nbottom sheet on a phone. `SearchPanel` is the same box inline, for a\nsearch page or a sidebar.\n\n```jsx\nimport { SearchDialog, SearchPanel } from \"../components/blocks/search-dialog\";   // a Makersclaw app (\"./blocks/search-dialog\" from components/)\nimport { SearchDialog, SearchPanel } from \"@/components/makersclaw/blocks/search-dialog\";   // a shadcn project\n```\n\nA client component: render it from a `\"use client\"` component.\n\n## The data\n\nA result is `{ id, kind, title, snippet?, date?, thumb?, icon?, keywords? }`.\n\n- `id` — unique within its kind list.\n- `kind` — `\"chat\"`, `\"document\"`, `\"image\"`, `\"project\"`, `\"person\"`,\n  `\"company\"`, `\"task\"`, `\"page\"`, or your own word. It picks the icon\n  and the chip.\n- `title` — the line that is searched and marked.\n- `snippet` — a line under it: an excerpt, a file type. Searched too.\n- `date` — shown after the snippet while searching (\"Sep 4\", \"Today\").\n  Format it yourself.\n- `thumb` — an image URL (or a node) shown instead of the icon. Every\n  `image` result gets a square, with an image glyph when there is no URL.\n- `icon` — a kit `Icon` name, instead of the kind's.\n- `keywords` — matched, never shown (a person's company, a project's client).\n\n## Props\n\nBoth components take these.\n\n- `results` — everything that can be found, searched in the browser. Leave\n  it out when `onSearch` does the searching.\n- `onSelect(result)` — the result chosen (click or Enter). Open it here.\n  The dialog closes itself first.\n- `sections` — what shows before anything is typed:\n  `[{ heading, results }]`, in order. A result may sit in two sections.\n  Leave it out and the empty box shows `hint`.\n- `onSearch(query, { signal })` — async; return the results for `query`.\n  Called 200ms after typing stops. A newer query aborts the older one\n  (pass `signal` to `fetch`). A throw shows \"Search failed\". The chips\n  filter what comes back.\n- `kinds` — the chips, in order: `[{ value, label, icon? }]`. Default:\n  every kind in `results` and `sections`, in order of first appearance,\n  labelled from the list above (\"Chats\", \"Images\"). One kind, no chips.\n- `loading` — `true` while you fetch `results` yourself.\n- `placeholder` — default \"Search…\".\n- `hint` — what the empty box says before typing. Default \"Type to search.\"\n- `showDate` — default `true`.\n- `label` — what a screen reader calls the box. Default \"Search\".\n- `className` — on the box (`SearchPanel`) or the dialog (`SearchDialog`).\n\n`SearchDialog` also takes:\n\n- `open` · `onOpenChange(open)` — controlled; or `defaultOpen`.\n- `hotkey` — `\"k\"` binds ⌘K / Ctrl+K anywhere on the page to open and\n  close it. Bind no key an input on the page already uses.\n\n## Example\n\n```jsx\n\"use client\";\nimport { useRouter } from \"next/navigation\";\nimport { useState } from \"react\";\nimport { Button } from \"../components/ui\";\nimport { SearchDialog } from \"../components/blocks/search-dialog\";\n\nexport function GlobalSearch({ recent, search }) {\n  const router = useRouter();\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <Button icon=\"search\" onClick={() => setOpen(true)}>Search</Button>\n      <SearchDialog\n        open={open}\n        onOpenChange={setOpen}\n        hotkey=\"k\"\n        sections={[{ heading: \"Recent\", results: recent }]}\n        onSearch={(q) => search(q)}   // a server action returning results\n        onSelect={(r) => router.push(`/${r.kind}s/${r.id}`)}\n      />\n    </>\n  );\n}\n```\n\n## What it will not do\n\n- Index anything. It searches the list you give it, or asks your server.\n- Lay images out as a grid. An image result is a row with a thumbnail.\n- Remember recent searches. Keep them yourself and pass them as a section.\n- Run commands (\"New invoice\", \"Go to settings\"). For a command palette\n  use the kit's `CommandDialog`.\n\n## Credits\n\nPorted from blocks.so (https://blocks.so, command-menu-04, MIT), rewritten on the Makersclaw kit.\n"
+    }
+  ],
+  "categories": [
+    "search",
+    "global search",
+    "command",
+    "cmdk",
+    "command palette",
+    "spotlight",
+    "find",
+    "filter",
+    "recent",
+    "quick open",
+    "jump to"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/search-dialog. Import: import { SearchDialog, SearchPanel } from \"@/components/makersclaw/blocks/search-dialog\". Props and an example: components/makersclaw/blocks/search-dialog/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.3.1",
+      "useWhen": "An app has more than one kind of record and wants one global search box or ⌘K palette to find any of them, or a search page with type filters."
+    }
+  }
+}

package/r/settings-list.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "settings-list",
+  "type": "registry:block",
+  "title": "SettingsList",
+  "description": "A card of settings, one row each — icon, label, description, meta lines, a badge, and its control: a Switch, a Select, a Button, a remove button or a menu of actions, with optional details that open under the row. Every change saves on its own through an async callback; the row shows the new value at once, a spinner while it saves, and on failure the old value back with the reason and Try again. variant=\"matrix\" is the notification grid: events by group down the side, channels (email, push, SMS) across, a switch per cell, stacked on a phone.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.3.1/r/core.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/settings-list/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/settings-list/index.js",
+      "content": "// The SettingsList block — `makersclaw add settings-list`. Fixed: compose\n// it through its props (README.md beside this file); a settings screen it\n// cannot be is your own component in components/.\nexport { SettingsList } from \"./settings-list\";\n"
+    },
+    {
+      "path": "registry/blocks/settings-list/settings-list.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/settings-list/settings-list.jsx",
+      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { Badge, Button, Card, Confirm, Empty, Icon, IconButton, Kicker, Menu, Notice, Select, Skeleton, Switch, cx } from \"../../ui\";\nimport { Failure, Saving, useSaves } from \"./row-state\";\nimport { SettingsMatrix } from \"./settings-matrix\";\n\n// SettingsList — a card of settings, one row each: an icon, a label, a\n// description, meta lines, a badge, and the row's control (a Switch, a\n// Select, a Button, or a menu of actions). Every change saves on its own\n// through an async callback; the row shows its new value at once, a\n// spinner while it saves, and — when the save fails — the old value back\n// and why, with Try again. `variant=\"matrix\"` is the notification grid:\n// events down the side, channels across the top.\n\n/** A badge from a string or { label, tone, hue, icon }. */\nfunction RowBadge({ badge }) {\n  if (!badge) return null;\n  const b = typeof badge === \"string\" ? { label: badge } : badge;\n  return (\n    <Badge tone={b.tone} hue={b.hue} variant={b.variant ?? \"soft\"}>\n      {b.icon ? <Icon name={b.icon} size={12} className=\"-ml-0.5 mr-1 inline-block align-[-0.125em]\" /> : null}\n      {b.label}\n    </Badge>\n  );\n}\n\n/** The meta lines: strings, or { icon, text } for \"globe London\". */\nfunction Meta({ meta }) {\n  const list = (Array.isArray(meta) ? meta : [meta]).filter(Boolean);\n  if (list.length === 0) return null;\n  return (\n    <ul className=\"mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground\">\n      {list.map((m, i) => {\n        const item = typeof m === \"object\" && !Array.isArray(m) && m !== null && \"text\" in m ? m : { text: m };\n        return (\n          <li key={i} className=\"inline-flex min-w-0 items-center gap-1.5\">\n            {item.icon ? <Icon name={item.icon} size={14} className=\"shrink-0\" /> : null}\n            <span className=\"min-w-0 break-words\">{item.text}</span>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nfunction Header({ title, description, icon, badge, actions }) {\n  if (!title && !description && !actions && !badge) return null;\n  return (\n    <div className=\"flex flex-wrap items-start justify-between gap-3 px-4 pb-3 pt-4\">\n      <div className=\"flex min-w-0 flex-1 items-start gap-3\">\n        {icon ? (\n          <span className=\"grid size-10 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground\">\n            <Icon name={icon} size={18} />\n          </span>\n        ) : null}\n        <div className=\"min-w-0\">\n          {title ? <h2 className=\"text-base font-semibold leading-tight\">{title}</h2> : null}\n          {description ? <p className=\"mt-0.5 text-sm text-muted-foreground\">{description}</p> : null}\n        </div>\n      </div>\n      {badge || actions ? (\n        <div className=\"flex shrink-0 flex-wrap items-center gap-2\">\n          <RowBadge badge={badge} />\n          {actions}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** Rows under their `group` headings, in the order groups first appear. */\nexport function grouped(rows) {\n  const out = [];\n  for (const r of rows) {\n    const g = r.group ?? null;\n    let bucket = out.find((b) => b.group === g);\n    if (!bucket) out.push((bucket = { group: g, rows: [] }));\n    bucket.rows.push(r);\n  }\n  return out;\n}\n\nexport function GroupHeading({ children }) {\n  return (\n    <li className=\"border-t border-border bg-muted/50 px-4 py-2\" role=\"presentation\">\n      <Kicker>{children}</Kicker>\n    </li>\n  );\n}\n\nfunction Row({ row, saves, onChange, onAction, ask, disabled }) {\n  const id = useId();\n  const [open, setOpen] = useState(row.defaultOpen ?? false);\n  const c = row.control ?? null;\n  const key = row.key;\n  const busy = saves.isBusy(key);\n  const failure = saves.failure(key);\n  const off = disabled || row.disabled;\n  const detailsId = `${id}-details`;\n  const details = typeof row.details === \"function\" ? row.details(row) : row.details;\n  const inline = c?.type === \"switch\";\n  const switchId = `${id}-switch`;\n  const noAction = !onAction;\n\n  function change(value) {\n    if (!onChange) return;\n    saves.run(key, () => onChange(row, value), { value, stored: c.value });\n  }\n\n  function act(action) {\n    const go = () => saves.run(key, () => onAction(row, action.key ?? action.label), { fallback: `${action.label} did not go through.` });\n    if (action.confirm) ask({ ...action.confirm, run: go, tone: action.confirm.tone ?? (action.tone === \"danger\" ? \"danger\" : undefined) });\n    else go();\n  }\n\n  let control = null;\n  if (c?.type === \"switch\") {\n    const on = saves.valueOf(key, c.value) === true;\n    control = (\n      <Switch id={switchId} checked={on} disabled={off || busy || !onChange} onChange={(e) => change(e.target.checked)} />\n    );\n  } else if (c?.type === \"select\") {\n    control = (\n      <Select\n        aria-label={row.label}\n        value={saves.valueOf(key, c.value) ?? \"\"}\n        options={c.options}\n        disabled={off || busy || !onChange}\n        onChange={(e) => change(e.target.value)}\n        className=\"sm:w-48\"\n      />\n    );\n  } else if (c?.type === \"button\") {\n    const action = { key: c.key ?? \"button\", label: c.label, tone: c.tone, confirm: c.confirm };\n    control = (\n      <Button\n        size=\"sm\"\n        icon={c.icon}\n        variant={c.variant ?? (c.tone === \"danger\" ? \"danger\" : \"secondary\")}\n        loading={busy}\n        disabled={off || noAction}\n        onClick={() => act(action)}\n      >\n        {c.label}\n      </Button>\n    );\n  } else if (c?.type === \"actions\") {\n    const items = (c.items ?? []).filter(Boolean);\n    control = (\n      <div className=\"flex items-center gap-1\">\n        {busy ? <Saving label=\"Working\" /> : null}\n        {c.menu || items.length > 2 ? (\n          <Menu\n            label={`${row.label}, actions`}\n            items={items.map((a) => ({ label: a.label, icon: a.icon, tone: a.tone, disabled: off || busy || noAction, onSelect: () => act(a) }))}\n          />\n        ) : (\n          items.map((a) => (\n            <Button key={a.key ?? a.label} size=\"sm\" variant={a.tone === \"danger\" ? \"danger\" : \"quiet\"} icon={a.icon} disabled={off || busy || noAction} onClick={() => act(a)}>\n              {a.label}\n            </Button>\n          ))\n        )}\n      </div>\n    );\n  } else if (c?.type === \"remove\") {\n    control = (\n      <IconButton\n        icon=\"x\"\n        label={c.label ?? `Remove ${row.label}`}\n        variant=\"secondary\"\n        size=\"sm\"\n        disabled={off || busy || noAction}\n        onClick={() => act({ key: \"remove\", label: c.label ?? \"Remove\", tone: \"danger\", confirm: c.confirm })}\n      />\n    );\n  }\n\n  return (\n    <li className=\"border-t border-border px-4 py-4\">\n      <div className={cx(\"flex items-start gap-3\", !inline && \"flex-wrap\")}>\n        {row.media ? (\n          <span className=\"shrink-0\">{row.media}</span>\n        ) : row.icon ? (\n          <span className=\"grid size-10 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground\">\n            <Icon name={row.icon} size={18} />\n          </span>\n        ) : null}\n        <div className={cx(\"min-w-0 flex-1\", !inline && \"basis-52\")}>\n          <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n            {inline ? (\n              <label htmlFor={switchId} className=\"font-medium leading-tight text-foreground\">\n                {row.label}\n              </label>\n            ) : (\n              <p className=\"font-medium leading-tight text-foreground\">{row.label}</p>\n            )}\n            <RowBadge badge={row.badge} />\n          </div>\n          {row.description ? <p className=\"mt-1 text-sm text-muted-foreground\">{row.description}</p> : null}\n          {row.value ? (\n            <p className={cx(\"mt-1 inline-flex items-center gap-1.5 text-sm\", row.valueTone === \"set\" ? \"font-medium text-foreground\" : \"text-muted-foreground\")}>\n              {row.valueTone === \"set\" ? <Icon name=\"circle-check\" size={14} className=\"shrink-0 text-success\" /> : null}\n              {row.value}\n            </p>\n          ) : null}\n          <Meta meta={row.meta} />\n        </div>\n        {control || details ? (\n          <div className={cx(\"flex shrink-0 items-center gap-2\", !inline && (row.icon || row.media) && \"max-sm:ml-13\")}>\n            {busy && c?.type !== \"button\" && c?.type !== \"actions\" ? <Saving /> : null}\n            {control}\n            {details ? (\n              <IconButton\n                icon={open ? \"chevron-up\" : \"chevron-down\"}\n                label={`${open ? \"Hide\" : \"Show\"} details for ${row.label}`}\n                size=\"sm\"\n                aria-expanded={open}\n                aria-controls={detailsId}\n                onClick={() => setOpen((v) => !v)}\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n      <Failure failure={failure} className=\"mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-destructive\" />\n      {details ? (\n        <div id={detailsId} hidden={!open} className=\"mt-3 rounded-md border border-border bg-muted/40 p-3 text-sm\">\n          {details}\n        </div>\n      ) : null}\n    </li>\n  );\n}\n\nexport function SettingsList({\n  rows = [],\n  variant = \"list\",\n  channels = [],\n  onChange,\n  onAction,\n  title,\n  description,\n  icon,\n  badge,\n  actions,\n  footer,\n  loading = false,\n  error,\n  onRetry,\n  emptyTitle = \"Nothing here yet\",\n  emptyBody,\n  emptyAction,\n  disabled = false,\n  failedText = \"Not saved. The old value is back.\",\n  className,\n}) {\n  const saves = useSaves(failedText);\n  const [asking, setAsking] = useState(null);\n  const [confirming, setConfirming] = useState(false);\n\n  async function confirmNow() {\n    if (!asking) return;\n    setConfirming(true);\n    await asking.run();\n    setConfirming(false);\n    setAsking(null);\n  }\n\n  let body;\n  if (error) {\n    body = (\n      <div className=\"border-t border-border p-4\">\n        <Notice tone=\"danger\" title=\"These settings could not be loaded\" action={onRetry ? <Button size=\"sm\" onClick={onRetry}>Try again</Button> : null}>\n          {error}\n        </Notice>\n      </div>\n    );\n  } else if (loading) {\n    body = (\n      <ul aria-busy=\"true\" aria-label=\"Loading\">\n        {[0, 1, 2].map((i) => (\n          <li key={i} className=\"flex items-center gap-3 border-t border-border px-4 py-4\">\n            <Skeleton shape=\"rect\" className=\"size-10 shrink-0\" />\n            <div className=\"grid min-w-0 flex-1 gap-2\">\n              <Skeleton className=\"w-1/3\" />\n              <Skeleton className=\"w-2/3\" />\n            </div>\n            <Skeleton shape=\"rect\" className=\"h-6 w-10 shrink-0 rounded-full\" />\n          </li>\n        ))}\n      </ul>\n    );\n  } else if (rows.length === 0) {\n    body = (\n      <div className=\"border-t border-border p-4\">\n        <Empty icon={icon ?? \"settings\"} title={emptyTitle} body={emptyBody} action={emptyAction} />\n      </div>\n    );\n  } else if (variant === \"matrix\") {\n    body = <SettingsMatrix rows={rows} channels={channels} onChange={onChange} saves={saves} disabled={disabled} />;\n  } else {\n    body = (\n      <ul>\n        {grouped(rows).map((b) => (\n          <GroupRows key={b.group ?? \"_\"} bucket={b}>\n            {b.rows.map((row) => (\n              <Row key={row.key} row={row} saves={saves} onChange={onChange} onAction={onAction} ask={setAsking} disabled={disabled} />\n            ))}\n          </GroupRows>\n        ))}\n      </ul>\n    );\n  }\n\n  const headed = Boolean(title || description || actions || badge);\n  return (\n    <Card padding=\"none\" className={cx(!headed && \"[&>ul>li:first-child]:border-t-0\", className)}>\n      <Header title={title} description={description} icon={icon} badge={badge} actions={actions} />\n      {body}\n      {footer ? <div className=\"border-t border-border p-4\">{footer}</div> : null}\n      <Confirm\n        open={Boolean(asking)}\n        onClose={() => {\n          if (!confirming) setAsking(null);\n        }}\n        onConfirm={confirmNow}\n        busy={confirming}\n        tone={asking?.tone ?? \"neutral\"}\n        title={asking?.title ?? \"Are you sure?\"}\n        body={asking?.body}\n        confirmLabel={asking?.confirmLabel ?? \"Confirm\"}\n        consequences={asking?.consequences}\n        requireText={asking?.requireText}\n        acknowledge={asking?.acknowledge}\n      />\n    </Card>\n  );\n}\n\nfunction GroupRows({ bucket, children }) {\n  return (\n    <>\n      {bucket.group ? <GroupHeading>{bucket.group}</GroupHeading> : null}\n      {children}\n    </>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/settings-list/settings-matrix.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/settings-list/settings-matrix.jsx",
+      "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { Icon, Kicker, Switch, cx } from \"../../ui\";\nimport { Failure, Saving } from \"./row-state\";\n\n// The notification grid of a SettingsList (variant=\"matrix\"): events down\n// the side, grouped; channels (email, push, SMS…) across the top; a Switch\n// in every cell that saves on its own. From 768px it is a grid with the\n// channels as column heads. On a phone each event's switches stack under\n// it, each one named by its channel, so nothing scrolls sideways.\n\nfunction groupsOf(rows) {\n  const out = [];\n  for (const r of rows) {\n    const g = r.group ?? null;\n    let b = out.find((x) => x.group === g);\n    if (!b) out.push((b = { group: g, rows: [] }));\n    b.rows.push(r);\n  }\n  return out;\n}\n\n// The grid's columns: the event, then one fixed column per channel. The\n// count comes in as a custom property so one class serves any number.\nconst GRID = \"md:grid md:items-center md:gap-x-2 md:[grid-template-columns:minmax(0,1fr)_repeat(var(--channels),5.5rem)]\";\n\nfunction Cell({ row, channel, saves, onChange, disabled }) {\n  const id = useId();\n  const key = `${row.key}:${channel.key}`;\n  const stored = row.values?.[channel.key];\n  if (stored === undefined || stored === null) {\n    // This event cannot be sent on this channel.\n    return (\n      <div className=\"flex min-h-11 items-center gap-2 text-sm text-muted-foreground md:justify-center\">\n        <span className=\"md:sr-only\">{channel.label}</span>\n        <span aria-hidden=\"true\">—</span>\n        <span className=\"sr-only\">not offered</span>\n      </div>\n    );\n  }\n  const locked = (row.locked ?? []).includes(channel.key);\n  const busy = saves.isBusy(key);\n  const on = saves.valueOf(key, stored) === true;\n  return (\n    <div className=\"flex min-h-11 items-center gap-2 md:justify-center\">\n      <Switch\n        id={id}\n        checked={on}\n        disabled={disabled || locked || busy || !onChange}\n        onChange={(e) => {\n          const value = e.target.checked;\n          saves.run(key, () => onChange(row, value, channel.key), { value, stored });\n        }}\n        label={\n          <span className=\"md:sr-only\">\n            {channel.label}\n            {locked ? <span className=\"sr-only\"> (always on)</span> : null}\n          </span>\n        }\n      />\n      {locked ? <Icon name=\"lock\" size={12} className=\"shrink-0 text-muted-foreground\" /> : null}\n      {busy ? <Saving /> : null}\n    </div>\n  );\n}\n\nexport function SettingsMatrix({ rows, channels, onChange, saves, disabled }) {\n  const base = useId();\n  return (\n    <div style={{ \"--channels\": channels.length }}>\n      <div className={cx(\"hidden border-t border-border px-4 py-2\", GRID)} aria-hidden=\"true\">\n        <Kicker>Event</Kicker>\n        {channels.map((c) => (\n          <span key={c.key} className=\"inline-flex items-center justify-center gap-1.5 text-xs font-medium text-muted-foreground\">\n            {c.icon ? <Icon name={c.icon} size={14} /> : null}\n            {c.label}\n          </span>\n        ))}\n      </div>\n      {groupsOf(rows).map((g) => (\n        <section key={g.group ?? \"_\"} aria-label={g.group ?? undefined}>\n          {g.group ? (\n            <div className=\"border-t border-border bg-muted/50 px-4 py-2\">\n              <Kicker>{g.group}</Kicker>\n            </div>\n          ) : null}\n          <ul>\n            {g.rows.map((row) => {\n              const labelId = `${base}-${row.key}`;\n              const failures = channels.map((c) => ({ c, f: saves.failure(`${row.key}:${c.key}`) })).filter((x) => x.f);\n              return (\n                <li key={row.key} role=\"group\" aria-labelledby={labelId} className=\"border-t border-border px-4 py-3\">\n                  <div className={GRID}>\n                    <div className=\"min-w-0 pb-1 md:pb-0\">\n                      <p id={labelId} className=\"text-sm font-medium text-foreground\">\n                        {row.label}\n                      </p>\n                      {row.description ? <p className=\"text-sm text-muted-foreground\">{row.description}</p> : null}\n                    </div>\n                    <div className=\"flex flex-wrap gap-x-5 md:contents\">\n                      {channels.map((c) => (\n                        <Cell key={c.key} row={row} channel={c} saves={saves} onChange={onChange} disabled={disabled} />\n                      ))}\n                    </div>\n                  </div>\n                  {failures.map(({ c, f }) => (\n                    <Failure key={c.key} failure={{ ...f, error: `${c.label}: ${f.error}` }} className=\"mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-destructive\" />\n                  ))}\n                </li>\n              );\n            })}\n          </ul>\n        </section>\n      ))}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/settings-list/row-state.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/settings-list/row-state.jsx",
+      "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button, Icon, Spinner } from \"../../ui\";\n\n// Each control in a SettingsList saves on its own. This keeps, per control\n// (a row, or a row × channel in the matrix), what it shows while its save\n// runs (the new value, at once), that it is saving, and why its last save\n// failed — with the attempt kept so \"Try again\" repeats it.\n\n/** Run `save()` → { ok } | { ok: false, error }; a throw counts as failed. */\nasync function attempt(save) {\n  try {\n    const res = await save();\n    return res?.ok ? { ok: true } : { ok: false, error: res?.error };\n  } catch (e) {\n    return { ok: false, error: e?.message };\n  }\n}\n\nfunction sameValue(a, b) {\n  return a === b || (a == null && b == null);\n}\n\nexport function useSaves(failedText = \"Not saved.\") {\n  const [shown, setShown] = useState({}); // key → { value, from }: the new value, over the stored `from`\n  const [busy, setBusy] = useState({}); // key → true\n  const [failed, setFailed] = useState({}); // key → { error, retry }\n  const alive = useRef(true);\n  useEffect(() => {\n    alive.current = true;\n    return () => {\n      alive.current = false;\n    };\n  }, []);\n\n  const drop = (setter, key) =>\n    setter((m) => {\n      if (!(key in m)) return m;\n      const { [key]: _gone, ...rest } = m;\n      return rest;\n    });\n\n  /** Save `key`: show `value` (optional; `stored` is what the rows hold\n   *  now) at once, run `save`, put the stored value back on failure.\n   *  `fallback` words a failure that came back without an error. */\n  async function run(key, save, { value, stored, fallback } = {}) {\n    const retry = () => run(key, save, { value, stored, fallback });\n    if (value !== undefined) setShown((m) => ({ ...m, [key]: { value, from: stored } }));\n    setBusy((m) => ({ ...m, [key]: true }));\n    drop(setFailed, key);\n    const res = await attempt(save);\n    if (!alive.current) return res;\n    drop(setBusy, key);\n    // Good: the new value stays on screen until the rows catch up (see\n    // valueOf). Bad: the stored one returns.\n    if (!res.ok) {\n      drop(setShown, key);\n      setFailed((m) => ({ ...m, [key]: { error: res.error || fallback || failedText, retry } }));\n    }\n    return res;\n  }\n\n  return {\n    run,\n    // The new value while the rows still hold what they held before the\n    // save; once they change (the save landed, or anything else moved\n    // them) the rows are the truth again.\n    valueOf: (key, stored) => (key in shown && sameValue(shown[key].from, stored) ? shown[key].value : stored),\n    isBusy: (key) => Boolean(busy[key]),\n    failure: (key) => failed[key] ?? null,\n    dismiss: (key) => drop(setFailed, key),\n  };\n}\n\n/** The line under a row whose save failed: why, and Try again. */\nexport function Failure({ failure, id, className }) {\n  if (!failure) return null;\n  return (\n    <p id={id} role=\"alert\" className={className ?? \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-destructive\"}>\n      <Icon name=\"warning\" size={14} className=\"shrink-0\" />\n      <span className=\"min-w-0\">{failure.error}</span>\n      <Button variant=\"link\" size=\"sm\" onClick={failure.retry}>\n        Try again\n      </Button>\n    </p>\n  );\n}\n\n/** A small spinner that says what is happening. */\nexport function Saving({ label = \"Saving\" }) {\n  return <Spinner size=\"sm\" label={label} className=\"text-muted-foreground\" />;\n}\n"
+    },
+    {
+      "path": "registry/blocks/settings-list/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/settings-list/README.md",
+      "content": "# SettingsList\n\nA card of settings, one row each: an icon, a label, a description, a few\nmeta lines, a badge, and the row's control. Every change saves on its own —\nno Save button. A flipped switch or a new choice shows at once, a spinner\nsits beside it while it saves, and when the save fails the old value comes\nback with the reason and Try again, on that row only. `variant=\"matrix\"`\nis the notification grid: events down the side, channels across the top.\n\n```jsx\nimport { SettingsList } from \"../components/blocks/settings-list\";   // a Makersclaw app (\"./blocks/settings-list\" from components/)\nimport { SettingsList } from \"@/components/makersclaw/blocks/settings-list\";   // a shadcn project\n```\n\nIt is a client component: render it from a `\"use client\"` component, and\nload the settings in the server surface (README §4).\n\n## The data\n\nA row:\n\n- `key` — unique in the list (required).\n- `label` — what the setting is (required).\n- `description` — a muted line under it.\n- `icon` — a kit `Icon` name in a muted square; or `media`, any node (an\n  Avatar, a logo).\n- `badge` — `\"Current\"` or `{ label, tone?, hue?, icon? }` beside the label.\n  `tone` for a status (\"Recommended\", success), `hue` 1–5 for a kind\n  (\"Development\").\n- `value` — a line saying what is set now (\"+44 7700 900 461\", \"Not set\n  up\"); `valueTone: \"set\"` draws it in full weight with a check.\n- `meta` — small lines under it: strings, or `{ icon, text }` (\"globe\n  Lisbon\", \"clock Active now\").\n- `group` — rows with the same group sit under one heading, in the order\n  the groups first appear.\n- `control` — one of:\n  - `{ type: \"switch\", value: true }` — saves through `onChange(row, bool)`.\n  - `{ type: \"select\", value, options: [{ value, label }] }` — saves\n    through `onChange(row, value)`.\n  - `{ type: \"button\", label, icon?, variant?, tone?, confirm? }` — runs\n    `onAction(row, \"button\")` (or `key` if given).\n  - `{ type: \"actions\", items: [{ key, label, icon?, tone?, confirm? }],\n    menu? }` — up to two buttons, or a \"⋯\" menu for three or more (or\n    `menu: true`); runs `onAction(row, item.key)`.\n  - `{ type: \"remove\", label?, confirm? }` — an × button (sign a device out,\n    disconnect); runs `onAction(row, \"remove\")`.\n  - none — a row that only says something.\n  `confirm` asks first, with the kit Confirm: `{ title, body?,\n  confirmLabel?, tone?, consequences?, requireText?, acknowledge? }`.\n- `details` — a node, or `(row) => node`, that opens under the row from a\n  chevron button (the connected account, a copyable code). `defaultOpen`\n  starts it open.\n- `disabled` — the control is shown and cannot be used.\n\nThe matrix (`variant=\"matrix\"`) rows are events:\n\n- `key`, `label`, `description`, `group` — as above.\n- `values` — `{ email: true, push: false, sms: null }`, one per channel\n  key. `null` (or missing) means the event is not sent on that channel: a\n  dash, not a switch.\n- `locked` — channel keys that cannot be turned off (`[\"email\"]` for a\n  security alert): the switch shows, disabled, with a lock.\n\n## Props\n\n- `rows` — the rows above. Keep them as the saved truth: when a save\n  succeeds, update the row (or let the server revalidate). Until the rows\n  change, the row shows the new value it saved.\n- `onChange(row, value, channel?)` — save a switch or a select (in the\n  matrix, `channel` is the channel key). Return `{ ok: true }` or `{ ok:\n  false, error }`; a throw counts as failed. Without it, switches and\n  selects are shown and cannot be changed. In a Makersclaw app it is one\n  line over `saveSetting` (lib/actions.js):\n  `onChange={(row, value) => saveSetting({ source: \"public.settings\", key: row.key, value })}`.\n- `onAction(row, actionKey)` — run a button, a menu item or a remove.\n  Return `{ ok }` like `onChange`. Remove the row from `rows` on success\n  when it is gone (a signed-out device).\n- `variant` — `\"list\"` (default) or `\"matrix\"`.\n- `channels` — the matrix's columns: `[{ key, label, icon? }]`.\n- `title`, `description`, `icon` — the card's heading; `icon` in a muted\n  square before it.\n- `badge` — a state beside the heading (`{ label: \"On\", tone: \"success\",\n  icon: \"circle-check\" }`).\n- `actions` — nodes at the heading's end (\"Add profile\").\n- `footer` — a node under the rows (a Notice with a tip).\n- `loading` — skeleton rows.\n- `error` — the settings could not be loaded: a Notice in place of the\n  rows; `onRetry` adds \"Try again\".\n- `emptyTitle` (`\"Nothing here yet\"`) · `emptyBody` · `emptyAction` —\n  shown when `rows` is empty.\n- `disabled` — every control shown and none usable.\n- `failedText` — the reason shown when a save fails without an `error`.\n- `className` — layout around it (width, margin). Never colour.\n\n## Example\n\n```jsx\n// components/Preferences.jsx — client\n\"use client\";\nimport { saveSetting } from \"../lib/actions\";\nimport { SettingsList } from \"./blocks/settings-list\";\n\nexport default function Preferences({ settings }) {\n  const rows = [\n    { key: \"digest\", icon: \"mail\", label: \"Weekly digest\", description: \"Every Monday at 8:00.\", control: { type: \"switch\", value: settings.digest === true } },\n    {\n      key: \"currency\",\n      icon: \"dollar\",\n      label: \"Currency\",\n      control: { type: \"select\", value: settings.currency ?? \"usd\", options: [{ value: \"usd\", label: \"US dollar\" }, { value: \"eur\", label: \"Euro\" }] },\n    },\n  ];\n  return (\n    <SettingsList\n      title=\"Preferences\"\n      rows={rows}\n      onChange={(row, value) => saveSetting({ source: \"public.settings\", key: row.key, value })}\n    />\n  );\n}\n```\n\nNotifications per channel:\n\n```jsx\n<SettingsList\n  variant=\"matrix\"\n  title=\"Notifications\"\n  channels={[{ key: \"email\", label: \"Email\", icon: \"mail\" }, { key: \"push\", label: \"Push\", icon: \"smartphone\" }]}\n  rows={[\n    { key: \"mentions\", group: \"Conversations\", label: \"Mentions\", values: { email: true, push: true } },\n    { key: \"signin\", group: \"Security\", label: \"New sign-in\", values: { email: true, push: false }, locked: [\"email\"] },\n  ]}\n  onChange={(row, on, channel) => saveSetting({ mode: \"json\", source: \"public.members\", column: \"notify\", id: me.id, key: `${row.key}.${channel}`, value: on })}\n/>\n```\n\nSigned-in devices, each with sign-out:\n\n```jsx\n<SettingsList\n  icon=\"shield-check\"\n  title=\"Signed-in devices\"\n  rows={sessions.map((s) => ({\n    key: s.id,\n    icon: s.kind === \"phone\" ? \"smartphone\" : \"laptop\",\n    label: s.device,\n    badge: s.current ? { label: \"This device\", tone: \"info\" } : null,\n    meta: [{ icon: \"globe\", text: s.place }, { icon: \"clock\", text: s.lastSeen }],\n    control: s.current ? null : { type: \"remove\", label: `Sign out ${s.device}`, confirm: { title: \"Sign out this device?\", confirmLabel: \"Sign out\" } },\n  }))}\n  onAction={(row) => deleteRow({ source: \"public.sessions\", id: row.key })}\n/>\n```\n\n## What it will not do\n\n- Save several settings with one button: that is `record-form`.\n- Open a setup flow: a button's `onAction` is yours — open your `Sheet`\n  from it and return `{ ok: true }`.\n- Scroll the matrix sideways on a phone: under 768px each event's switches\n  stack under it, named by channel.\n\nA settings screen it cannot be is your own component in `components/`,\nbuilt from the kit — not an edit to this block. Its files are fixed: `npm\nrun check` refuses a change, and `makersclaw add settings-list` restores\nthem.\n\n## Credits\n\nShapes from Creative Tim UI (https://github.com/creativetimofficial/ui, MIT); this is a rewrite on the Makersclaw kit.\n"
+    }
+  ],
+  "categories": [
+    "settings",
+    "preferences",
+    "toggle",
+    "switch",
+    "notifications",
+    "channels",
+    "matrix",
+    "security",
+    "sessions",
+    "devices",
+    "integrations",
+    "two-factor",
+    "billing",
+    "account"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/settings-list. Import: import { SettingsList } from \"@/components/makersclaw/blocks/settings-list\". Props and an example: components/makersclaw/blocks/settings-list/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.3.1",
+      "useWhen": "An account or workspace settings screen where each setting applies the moment it is changed: preferences, two-step sign-in methods, signed-in devices, connected integrations, billing profiles, notification preferences per channel. Not for a form of fields saved together with one button (record-form)."
+    }
+  }
+}

package/r/setup-checklist.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "setup-checklist",
+  "type": "registry:block",
+  "title": "SetupChecklist",
+  "description": "The steps to get set up: which are done, how far along the whole is (a ring, a bar, or \"Step 2 of 4\"), and the button for the next one, sent out through an async onAction that can fail on the step. Four shapes: folding rows in a card with a dismiss menu, numbered step cards, a plain step list with a help panel, and bordered accordion rows that can be locked until the step before is done.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.3.1/r/core.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/setup-checklist/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/setup-checklist/index.js",
+      "content": "// The SetupChecklist block — `makersclaw add setup-checklist`. Fixed:\n// compose it through its props (README.md beside this file); a checklist\n// it cannot be is your own component in components/.\nexport { SetupChecklist } from \"./setup-checklist\";\n"
+    },
+    {
+      "path": "registry/blocks/setup-checklist/setup-checklist.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/setup-checklist/setup-checklist.jsx",
+      "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { Accordion, Button, Card, Collapsible, Empty, Icon, Menu, Meter, Notice, Progress, Skeleton, cx } from \"../../ui\";\n\n// SetupChecklist — the steps to get set up: which are done, how far along\n// the whole is, and the button for the next one. The steps are the app's\n// (their `done` comes from its data); the block draws them and sends each\n// step's button out through `onAction`, showing a failure on the step.\n\n/* ------------------------------------------------------------------------\n   Pieces\n   ------------------------------------------------------------------------ */\n\nfunction Marker({ state, index, shape }) {\n  if (state === \"done\") {\n    return <Icon name=\"circle-check\" size={shape === \"number\" ? 24 : 20} className=\"shrink-0 text-success\" />;\n  }\n  if (shape === \"number\") {\n    return (\n      <span\n        aria-hidden=\"true\"\n        data-nums\n        className={cx(\n          \"flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold\",\n          state === \"current\" ? \"bg-primary text-primary-foreground\" : \"bg-muted text-muted-foreground\",\n        )}\n      >\n        {index + 1}\n      </span>\n    );\n  }\n  if (shape === \"ring\") {\n    return <span aria-hidden=\"true\" className=\"size-5 shrink-0 rounded-full border border-border\" />;\n  }\n  return <Icon name=\"circle-dashed\" size={20} className=\"shrink-0 text-muted-foreground\" />;\n}\n\n// What a reader hears after the title.\nconst SAID = { done: \"done\", current: \"next\", pending: \"not started\", locked: \"not started\" };\n\nfunction StepTitle({ step, state }) {\n  return (\n    <span className={cx(state === \"done\" ? \"text-muted-foreground line-through\" : state === \"locked\" ? \"text-muted-foreground\" : \"text-foreground\")}>\n      {step.title}\n      <span className=\"sr-only\">, {SAID[state]}</span>\n    </span>\n  );\n}\n\nfunction StepError({ message }) {\n  if (!message) return null;\n  return (\n    <p role=\"alert\" className=\"mt-2 text-sm text-destructive\">\n      {message}\n    </p>\n  );\n}\n\n/* ------------------------------------------------------------------------\n   SetupChecklist\n   ------------------------------------------------------------------------ */\n\nexport function SetupChecklist({\n  steps,\n  variant = \"collapsible\",\n  title = \"Get set up\",\n  description,\n  onAction,\n  onDismiss,\n  menuItems,\n  footer,\n  sequential = false,\n  doneLabel = \"All set\",\n  loading = false,\n  error,\n  onRetry,\n  className,\n}) {\n  const list = (steps ?? []).filter(Boolean);\n  const total = list.length;\n  const doneCount = list.filter((s) => s.done).length;\n  const current = list.findIndex((s) => !s.done);\n  const allDone = total > 0 && current < 0;\n\n  const uid = useId();\n  const [busy, setBusy] = useState(null);\n  const [errors, setErrors] = useState({});\n  const [dismissError, setDismissError] = useState(null);\n  const [open, setOpen] = useState(() => list[current]?.key ?? null);\n\n  // When the open step gets done, the next one opens.\n  const doneSig = list.map((s) => (s.done ? 1 : 0)).join(\"\");\n  const lastSig = useRef(doneSig);\n  useEffect(() => {\n    if (lastSig.current === doneSig) return;\n    lastSig.current = doneSig;\n    const openStep = list.find((s) => s.key === open);\n    if (!openStep || openStep.done) setOpen(list[current]?.key ?? null);\n    // The steps' done flags are what moved.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [doneSig]);\n\n  const stateOf = (i) => (list[i].done ? \"done\" : i === current ? \"current\" : sequential ? \"locked\" : \"pending\");\n\n  async function run(step) {\n    if (!onAction) return;\n    setBusy(step.key);\n    setErrors((e) => ({ ...e, [step.key]: null }));\n    let res;\n    try {\n      res = await onAction(step);\n    } catch (e) {\n      res = { ok: false, error: e?.message };\n    }\n    setBusy(null);\n    if (res && res.ok === false) setErrors((e) => ({ ...e, [step.key]: res.error || \"That did not work. Try again.\" }));\n  }\n\n  async function dismiss() {\n    setDismissError(null);\n    let res;\n    try {\n      res = await onDismiss();\n    } catch (e) {\n      res = { ok: false, error: e?.message };\n    }\n    if (res && res.ok === false) setDismissError(res.error || \"The checklist could not be hidden.\");\n  }\n\n  // A render helper, not a component: a component declared in here would\n  // remount on every render and drop the focus from its button.\n  function action(step, i, look) {\n    const state = stateOf(i);\n    const label = step.actionLabel ?? (state === \"done\" ? \"Open\" : \"Start\");\n    const variant = state === \"done\" || look === \"secondary\" ? \"secondary\" : \"primary\";\n    const disabled = state === \"locked\";\n    if (!step.href && !onAction) return null;\n    return (\n      <Button\n        size=\"sm\"\n        variant={variant}\n        icon={look === \"icon\" ? step.icon : undefined}\n        href={disabled ? undefined : step.href}\n        onClick={step.href ? () => onAction?.(step) : () => run(step)}\n        loading={busy === step.key}\n        disabled={disabled || (busy !== null && busy !== step.key)}\n        aria-describedby={disabled ? `${uid}-${step.key}-locked` : undefined}\n      >\n        {label}\n      </Button>\n    );\n  }\n\n  const menu = [onDismiss && { label: \"Dismiss\", icon: \"archive\", onSelect: dismiss }, ...(menuItems ?? [])].filter(Boolean);\n\n  /* ---- states that replace the steps -------------------------------- */\n\n  if (loading) {\n    return (\n      <div aria-busy=\"true\" aria-label={title} className={cx(\"grid gap-3 rounded-lg border border-border bg-card p-4\", className)}>\n        <Skeleton className=\"w-1/2\" />\n        <Skeleton className=\"h-1.5 w-full\" shape=\"rect\" />\n        {[0, 1, 2, 3].map((i) => (\n          <div key={i} className=\"flex items-center gap-3 py-2\">\n            <Skeleton shape=\"circle\" className=\"size-5\" />\n            <Skeleton className=\"w-2/3\" />\n          </div>\n        ))}\n      </div>\n    );\n  }\n  if (error) {\n    return (\n      <Notice\n        tone=\"danger\"\n        title=\"The checklist did not load\"\n        className={className}\n        action={\n          onRetry ? (\n            <Button size=\"sm\" icon=\"refresh\" onClick={onRetry}>\n              Retry\n            </Button>\n          ) : null\n        }\n      >\n        {error}\n      </Notice>\n    );\n  }\n  if (total === 0) {\n    return <Empty icon=\"circle-check\" title=\"Nothing to set up\" body=\"Every step is taken care of.\" className={className} />;\n  }\n\n  const bar = (\n    <Progress\n      value={doneCount}\n      max={total}\n      tone={allDone ? \"success\" : \"neutral\"}\n      aria-label={`${title}: ${doneCount} of ${total} steps done`}\n      valueText={`${doneCount} of ${total}`}\n    />\n  );\n  const menuButton = menu.length ? <Menu items={menu} label={`${title} options`} /> : null;\n  const dismissNotice = dismissError ? (\n    <Notice tone=\"danger\" onDismiss={() => setDismissError(null)}>\n      {dismissError}\n    </Notice>\n  ) : null;\n  const lockedNote = (step) =>\n    stateOf(list.indexOf(step)) === \"locked\" ? (\n      <p id={`${uid}-${step.key}-locked`} className=\"mt-2 text-xs text-muted-foreground\">\n        Finish the steps before this one first.\n      </p>\n    ) : null;\n\n  /* ---- collapsible: a card of folding rows, a ring in the header ----- */\n\n  if (variant === \"collapsible\") {\n    return (\n      <Card className={cx(\"grid gap-2\", className)}>\n        <div className=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2\">\n          <div className=\"min-w-0\">\n            <h2 className=\"font-semibold leading-tight\">{title}</h2>\n            {description ? <p className=\"mt-0.5 text-sm text-muted-foreground\">{description}</p> : null}\n          </div>\n          <div className=\"ml-auto flex items-center gap-1\">\n            <Meter\n              shape=\"ring\"\n              size=\"sm\"\n              value={doneCount}\n              max={total}\n              tone={allDone ? \"success\" : \"neutral\"}\n              center={null}\n              valueText={null}\n              aria-label={`${doneCount} of ${total} steps done`}\n            />\n            <span data-nums className=\"ml-1.5 mr-1 text-sm text-muted-foreground\">\n              {allDone ? (\n                doneLabel\n              ) : (\n                <>\n                  <span className=\"font-medium text-foreground\">{doneCount}</span> of <span className=\"font-medium text-foreground\">{total}</span> done\n                </>\n              )}\n            </span>\n            {menuButton}\n          </div>\n        </div>\n        {dismissNotice}\n        <Accordion\n          aria-label={title}\n          chevron=\"right\"\n          value={open}\n          onChange={setOpen}\n          items={list.map((step, i) => {\n            const state = stateOf(i);\n            return {\n              key: step.key,\n              title: (\n                <span className=\"flex items-center gap-3\">\n                  <Marker state={state} />\n                  <StepTitle step={step} state={state} />\n                </span>\n              ),\n              content: (\n                <div className=\"pl-8\">\n                  {step.description ? <p className=\"max-w-prose text-muted-foreground\">{step.description}</p> : null}\n                  <div className=\"mt-3\">\n                    {action(step, i)}\n                  </div>\n                  {lockedNote(step)}\n                  <StepError message={errors[step.key]} />\n                </div>\n              ),\n            };\n          })}\n        />\n        {footer ? <div className=\"border-t border-border pt-3 text-sm\">{footer}</div> : null}\n      </Card>\n    );\n  }\n\n  const header = (right) => (\n    <div className=\"grid gap-3\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <h2 className=\"text-lg font-semibold leading-tight\">{title}</h2>\n          {description ? <p className=\"mt-1 text-sm text-muted-foreground\">{description}</p> : null}\n        </div>\n        {menuButton}\n      </div>\n      {right}\n      {dismissNotice}\n    </div>\n  );\n\n  /* ---- accordion: bordered folding rows, a panel in each ------------- */\n\n  if (variant === \"accordion\") {\n    return (\n      <div className={cx(\"grid gap-4\", className)}>\n        {header(null)}\n        <div className=\"grid gap-2\" role=\"list\" aria-label={title}>\n          {list.map((step, i) => {\n            const state = stateOf(i);\n            return (\n              <div role=\"listitem\" key={step.key}>\n                <Collapsible\n                  variant=\"outline\"\n                  open={open === step.key}\n                  onOpenChange={(next) => setOpen(next ? step.key : null)}\n                  title={\n                    <span className=\"flex items-center gap-3\">\n                      <Marker state={state} shape=\"ring\" />\n                      <StepTitle step={step} state={state} />\n                    </span>\n                  }\n                >\n                  <div className=\"grid justify-items-center gap-1 rounded-md bg-muted px-4 py-5 text-center\">\n                    {step.icon ? <Icon name={step.icon} size={24} className=\"mb-2 text-muted-foreground\" /> : null}\n                    {step.summary ? <p className=\"font-medium text-foreground\">{step.summary}</p> : null}\n                    {step.description ? <p className=\"max-w-xs text-muted-foreground\">{step.description}</p> : null}\n                    <div className=\"mt-4\">\n                      {action(step, i)}\n                    </div>\n                    {lockedNote(step)}\n                    <StepError message={errors[step.key]} />\n                  </div>\n                </Collapsible>\n              </div>\n            );\n          })}\n        </div>\n        {footer ? <div className=\"text-sm\">{footer}</div> : null}\n      </div>\n    );\n  }\n\n  /* ---- cards: numbered step cards, a bar over them ------------------- */\n\n  if (variant === \"cards\") {\n    return (\n      <div className={cx(\"grid gap-4\", className)}>\n        {header(\n          <div className=\"grid gap-2\">\n            <p data-nums className=\"text-sm text-muted-foreground\">\n              {allDone ? (\n                <span className=\"font-medium text-success\">{doneLabel}</span>\n              ) : (\n                <>\n                  <span className=\"font-medium text-foreground\">{doneCount}</span> of {total} done\n                </>\n              )}\n            </p>\n            {bar}\n          </div>,\n        )}\n        <ol className=\"grid gap-3\" aria-label={title}>\n          {list.map((step, i) => {\n            const state = stateOf(i);\n            return (\n              <li\n                key={step.key}\n                aria-current={state === \"current\" ? \"step\" : undefined}\n                className={cx(\"rounded-lg border p-4\", state === \"current\" ? \"border-primary/40 bg-muted\" : \"border-border bg-card\")}\n              >\n                <div className=\"flex gap-3\">\n                  <Marker state={state} index={i} shape=\"number\" />\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"font-medium\">\n                      <StepTitle step={step} state={state} />\n                    </p>\n                    {step.description ? (\n                      <p className={cx(\"mt-0.5 text-sm\", state === \"current\" ? \"text-muted-foreground\" : \"text-muted-foreground/80\")}>{step.description}</p>\n                    ) : null}\n                    {state === \"current\" ? (\n                      <div className=\"mt-3\">\n                        {action(step, i, \"icon\")}\n                      </div>\n                    ) : null}\n                    <StepError message={errors[step.key]} />\n                  </div>\n                  {step.icon ? (\n                    <Icon name={step.icon} size={20} className={cx(\"shrink-0\", state === \"current\" ? \"text-primary\" : \"text-muted-foreground/60\")} />\n                  ) : null}\n                </div>\n              </li>\n            );\n          })}\n        </ol>\n        {footer ? <div className=\"text-sm\">{footer}</div> : null}\n      </div>\n    );\n  }\n\n  /* ---- list: plain step rows, \"Step n of N\" and a short bar ---------- */\n\n  return (\n    <div className={cx(\"grid gap-4\", className)}>\n      {header(\n        <div className=\"flex items-center justify-end gap-3\">\n          <span data-nums className=\"text-sm text-muted-foreground\">\n            {allDone ? doneLabel : `Step ${current + 1} of ${total}`}\n          </span>\n          <div className=\"w-32\">{bar}</div>\n        </div>,\n      )}\n      <ol className=\"grid gap-3\" aria-label={title}>\n        {list.map((step, i) => {\n          const state = stateOf(i);\n          return (\n            <li\n              key={step.key}\n              aria-current={state === \"current\" ? \"step\" : undefined}\n              className={cx(\"rounded-lg border bg-card p-4\", state === \"current\" ? \"border-foreground/25\" : \"border-border\")}\n            >\n              <div className=\"flex items-start gap-3\">\n                {state === \"done\" ? (\n                  <Marker state=\"done\" />\n                ) : (\n                  <span aria-hidden=\"true\" data-nums className=\"flex size-5 shrink-0 items-center justify-center text-sm font-medium text-muted-foreground\">\n                    {i + 1}.\n                  </span>\n                )}\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"font-medium\">\n                    <StepTitle step={step} state={state} />\n                  </p>\n                  {step.description ? <p className=\"mt-1 text-sm text-muted-foreground\">{step.description}</p> : null}\n                  {state === \"current\" ? (\n                    <div className=\"mt-3\">\n                      {action(step, i)}\n                    </div>\n                  ) : null}\n                  <StepError message={errors[step.key]} />\n                </div>\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n      {footer ? <div className=\"rounded-lg bg-muted p-4 text-sm\">{footer}</div> : null}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/setup-checklist/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/setup-checklist/README.md",
+      "content": "# SetupChecklist\n\nThe steps to get set up, which of them are done, how far along the whole\nis, and the button for the next one. The steps are yours: their `done`\ncomes from the app's data (the profile has a name, a teammate was\ninvited), so the list is never a second record of the truth. A step's\nbutton goes out through `onAction`; while it runs the button spins, and\nwhen it fails the step says why.\n\n```jsx\nimport { SetupChecklist } from \"../components/blocks/setup-checklist\";   // a Makersclaw app (\"./blocks/setup-checklist\" from components/)\nimport { SetupChecklist } from \"@/components/makersclaw/blocks/setup-checklist\";   // a shadcn project\n```\n\nA client component. Work out `done` for each step in the server surface\n(README §4) and pass the steps in.\n\n## The data\n\n`steps` — in order:\n`[{ key, title, description?, actionLabel?, href?, icon?, summary?, done }]`.\n\n- `key` — unique, stable.\n- `actionLabel` — the step's button (\"Send invites\"); default \"Start\"\n  (\"Open\" once done).\n- `href` — the button is a link to the page where the step is done;\n  `onAction` still hears about the click.\n- `icon` — a kit `Icon` name: on the right of a card and in its button\n  (`cards`), above the text (`accordion`).\n- `summary` — `accordion`: the bold line in the step's panel.\n\nThe next step is the first one not done.\n\n## Props\n\n- `steps` — as above. Required.\n- `variant` — default `\"collapsible\"`:\n  - `collapsible` — a card: the title, a ring with \"2 of 6 done\", a \"⋯\"\n    menu (Dismiss and `menuItems`), then each step a folding row with its\n    description and button. The next step starts open, and when the open\n    step gets done the next one opens.\n  - `cards` — the title, \"1 of 4 done\" and a bar, then a numbered card\n    per step. Only the next step shows its button.\n  - `list` — the title, \"Step 2 of 4\" and a short bar, then a row per\n    step, numbered \"1.\", \"2.\"; the next one is outlined and shows its\n    button. `footer` sits in a filled panel below (\"Need a hand?\").\n  - `accordion` — each step a bordered folding row; its panel is centred:\n    icon, `summary`, description, button. Pair it with `sequential`.\n- `onAction(step)` — the step's button (or a click on its link). Do the\n  thing, or open your `Sheet` for it; return `{ ok: true }` or\n  `{ ok: false, error }` (a throw counts as failed) and the step shows the\n  error under its button. Mark it done by passing the step back with\n  `done: true`; the block never marks a step itself. Without `onAction`\n  only steps with an `href` have a button.\n- `sequential` — a step's button stays disabled, with \"Finish the steps\n  before this one first\", until every step before it is done. Default\n  `false`: any step can be done in any order.\n- `title` — default \"Get set up\". `description` — a line under it.\n- `onDismiss()` — adds Dismiss to the \"⋯\" menu (`collapsible` shows the\n  menu in its header, the others beside the title). Hide the checklist\n  and remember that you did; return `{ ok: false, error }` to show why it\n  could not.\n- `menuItems` — more \"⋯\" items, kit `Menu` shape: `[{ label, onSelect,\n  icon? }]` (\"Send feedback\").\n- `footer` — a node under the steps: help, a link to the docs.\n- `doneLabel` — what the header says when every step is done, default\n  \"All set\" (the bar turns to the success tone).\n- `loading` — skeleton rows while the steps load.\n- `error` — a string: the steps did not load. Shown in a notice with\n  Retry when `onRetry` is given.\n- `className` — layout around it (width, margin). Never colour.\n\nWith no steps it says \"Nothing to set up\".\n\n## Example\n\n```jsx\n// surfaces/home.jsx — server: work out what is done\nimport { loadRows } from \"../lib/data\";\nimport GettingStarted from \"../components/GettingStarted\";\n\nexport default async function Home() {\n  const [{ rows: members }, { rows: deals }] = await Promise.all([\n    loadRows({ source: \"public.members\" }),\n    loadRows({ source: \"public.deals\", limit: 1 }),\n  ]);\n  return <GettingStarted invited={members.length > 1} hasDeal={deals.length > 0} />;\n}\n```\n\n```jsx\n// components/GettingStarted.jsx — client\n\"use client\";\nimport { SetupChecklist } from \"./blocks/setup-checklist\";\n\nexport default function GettingStarted({ invited, hasDeal, onHide }) {\n  return (\n    <SetupChecklist\n      title=\"Get started\"\n      steps={[\n        { key: \"invite\", title: \"Invite your team\", description: \"Bring in the people who own accounts.\", actionLabel: \"Invite\", href: \"/team\", done: invited },\n        { key: \"deal\", title: \"Add your first deal\", description: \"One deal is enough to see the pipeline work.\", actionLabel: \"Add a deal\", href: \"/deals?new=1\", done: hasDeal },\n      ]}\n      onDismiss={onHide}\n    />\n  );\n}\n```\n\nIn order, with buttons that do the work in place:\n\n```jsx\n<SetupChecklist\n  variant=\"accordion\"\n  sequential\n  title=\"Quick start\"\n  steps={steps}\n  onAction={async (step) => {\n    const res = await runSetupStep(step.key); // your server action, { ok, error }\n    if (res.ok) router.refresh(); // the step comes back done\n    return res;\n  }}\n/>\n```\n\n## What it will not do\n\n- Decide a step is done: `done` is yours, from your data.\n- Remember that it was dismissed: `onDismiss` is where you save that.\n- Nest steps inside steps, or show a running job's stages: that is the kit\n  `Steps` or the `job-panel` block.\n- Page through a wizard of forms: each step's button goes where the work\n  is.\n\nA checklist it cannot be is your own component in `components/`, built\nfrom the kit — not an edit to this block. Its files are fixed: `npm run\ncheck` refuses a change, and `makersclaw add setup-checklist` restores\nthem.\n\n## Credits\n\nPorted from blocks.so (https://blocks.so, onboarding 01–04, MIT), rewritten on the Makersclaw kit.\n"
+    }
+  ],
+  "categories": [
+    "onboarding",
+    "checklist",
+    "setup",
+    "getting started",
+    "steps",
+    "progress",
+    "tasks",
+    "welcome",
+    "quick start",
+    "wizard",
+    "dismiss"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/setup-checklist. Import: import { SetupChecklist } from \"@/components/makersclaw/blocks/setup-checklist\". Props and an example: components/makersclaw/blocks/setup-checklist/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.3.1",
+      "useWhen": "A new account, workspace or shop has a few things to do before it is useful (complete the profile, invite the team, connect a tool, launch) and the founder should see what is left. Not for a running job's stages (kit Steps or job-panel), and not for a multi-page form wizard."
+    }
+  }
+}

package/r/share-dialog.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "share-dialog",
+  "type": "registry:block",
+  "title": "ShareDialog",
+  "description": "Who can see a record and how to let more people in: invite by email (comma separated, with an access level), each person with their access in a menu (can view, can edit, remove), sharing switches, and a link with a copy button that turns to a check. A dialog, or the same body inline (SharePanel). Every change is an async callback; a failure shows and the old value comes back.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.3.1/r/core.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/share-dialog/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/share-dialog/index.js",
+      "content": "// The ShareDialog block — `makersclaw add share-dialog`. Fixed: compose\n// it through its props (README.md beside this file).\nexport { ShareDialog, SharePanel } from \"./share-dialog\";\n"
+    },
+    {
+      "path": "registry/blocks/share-dialog/share-dialog.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/share-dialog/share-dialog.jsx",
+      "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { Avatar, Badge, Button, Icon, InputGroup, Item, Menu, Notice, Select, Sheet, Switch, cx } from \"../../ui\";\n\n// ShareDialog — who can see a thing, and how to let more people in:\n// invite by email, each person's access, a link to copy, a few sharing\n// switches. SharePanel is the same body without the dialog, for a\n// settings page. Every change goes out through an async callback that\n// returns { ok } or { ok: false, error }; the dialog shows the failure\n// and puts the old value back. See README.md beside this file.\n\nconst DEFAULT_ROLES = [\n  { value: \"view\", label: \"Can view\" },\n  { value: \"edit\", label: \"Can edit\" },\n];\n\nconst EMAIL = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\nfunction failure(result) {\n  return result && result.ok === false ? result.error || \"That did not save. Try again.\" : null;\n}\n\nasync function attempt(fn) {\n  try {\n    return failure(await fn());\n  } catch (e) {\n    return e?.message || String(e);\n  }\n}\n\n/** \"a@x.com, b@y.com; c@z.com\" → { good: [...], bad: [...] }, deduped. */\nfunction parseEmails(text) {\n  const all = String(text)\n    .split(/[\\s,;]+/)\n    .map((s) => s.trim())\n    .filter(Boolean);\n  const seen = new Set();\n  const good = [];\n  const bad = [];\n  for (const e of all) {\n    const k = e.toLowerCase();\n    if (seen.has(k)) continue;\n    seen.add(k);\n    (EMAIL.test(e) ? good : bad).push(e);\n  }\n  return { good, bad };\n}\n\nfunction InviteRow({ onInvite, roles, inviteRole, placeholder, people, label }) {\n  const id = useId();\n  const [text, setText] = useState(\"\");\n  const [role, setRole] = useState(inviteRole ?? roles[0]?.value);\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState(null);\n  const [note, setNote] = useState(null);\n\n  async function submit(e) {\n    e.preventDefault();\n    if (busy) return;\n    setNote(null);\n    const { good, bad } = parseEmails(text);\n    if (!good.length && !bad.length) {\n      setError(\"Type at least one email address.\");\n      return;\n    }\n    if (bad.length) {\n      setError(`${bad.join(\", \")} ${bad.length === 1 ? \"is not an email address\" : \"are not email addresses\"}.`);\n      return;\n    }\n    const have = new Set((people ?? []).map((p) => String(p.email ?? \"\").toLowerCase()));\n    const fresh = good.filter((e) => !have.has(e.toLowerCase()));\n    if (!fresh.length) {\n      setError(good.length === 1 ? `${good[0]} already has access.` : \"Everyone listed already has access.\");\n      return;\n    }\n    setError(null);\n    setBusy(true);\n    const failed = await attempt(() => onInvite(fresh, role));\n    setBusy(false);\n    if (failed) {\n      setError(failed);\n      return;\n    }\n    setText(\"\");\n    setNote(fresh.length === 1 ? `Invited ${fresh[0]}.` : `Invited ${fresh.length} people.`);\n  }\n\n  const picker =\n    roles.length > 1 && !inviteRole ? (\n      <Select\n        aria-label=\"Access for the people you invite\"\n        value={role}\n        onChange={(e) => setRole(e.target.value)}\n        options={roles}\n        disabled={busy}\n        className=\"sm:w-36\"\n      />\n    ) : null;\n\n  return (\n    <form onSubmit={submit} className=\"grid gap-2\" noValidate>\n      <label htmlFor={id} className=\"text-sm font-medium text-foreground\">\n        {label}\n      </label>\n      <div className=\"flex flex-col gap-2 sm:flex-row\">\n        <div className=\"min-w-0 flex-1\">\n          <InputGroup\n            id={id}\n            icon=\"user-plus\"\n            type=\"text\"\n            inputMode=\"email\"\n            autoComplete=\"off\"\n            placeholder={placeholder}\n            value={text}\n            onChange={(e) => {\n              setText(e.target.value);\n              if (error) setError(null);\n            }}\n            invalid={Boolean(error)}\n            aria-describedby={error ? `${id}-error` : note ? `${id}-note` : undefined}\n            disabled={busy}\n          />\n        </div>\n        {picker}\n        <Button type=\"submit\" variant=\"primary\" loading={busy}>\n          Invite\n        </Button>\n      </div>\n      {error ? (\n        <p id={`${id}-error`} role=\"alert\" className=\"text-xs text-destructive\">\n          {error}\n        </p>\n      ) : note ? (\n        <p id={`${id}-note`} role=\"status\" className=\"text-xs text-muted-foreground\">\n          {note}\n        </p>\n      ) : null}\n    </form>\n  );\n}\n\nfunction PersonRow({ person, roles, onRoleChange, onRemove, onError, you }) {\n  const [role, setRole] = useState(person.role);\n  const [busy, setBusy] = useState(false);\n  useEffect(() => setRole(person.role), [person.role]);\n\n  const known = roles.find((r) => r.value === role);\n  const editable = !person.locked && known && (onRoleChange || onRemove);\n\n  async function change(next) {\n    if (next === role || busy) return;\n    const before = role;\n    setRole(next); // shows at once; goes back if the save fails\n    setBusy(true);\n    const failed = await attempt(() => onRoleChange(person, next));\n    setBusy(false);\n    if (failed) {\n      setRole(before);\n      onError(`${person.name ?? person.email}: ${failed}`);\n    }\n  }\n\n  async function remove() {\n    setBusy(true);\n    const failed = await attempt(() => onRemove(person));\n    setBusy(false);\n    if (failed) onError(`${person.name ?? person.email} still has access: ${failed}`);\n  }\n\n  const roleLabel = known?.label ?? person.roleLabel ?? String(role ?? \"\");\n\n  const items = editable\n    ? [\n        onRoleChange && { type: \"radio\", label: \"Access\", value: role, onValueChange: change, options: roles },\n        onRoleChange && onRemove && { type: \"separator\" },\n        onRemove && { label: \"Remove access\", icon: \"trash\", tone: \"danger\", onSelect: remove },\n      ]\n    : [];\n\n  const meta = editable ? (\n    <Menu\n      label={`${roleLabel}, access for ${person.name ?? person.email}`}\n      trigger={\n        <span className=\"inline-flex items-center gap-1 text-sm\">\n          {busy ? <span className=\"text-muted-foreground\">Saving…</span> : roleLabel}\n          <Icon name=\"chevron-down\" size={14} className=\"text-muted-foreground\" />\n        </span>\n      }\n      items={items}\n    />\n  ) : (\n    <Badge variant=\"outline\">{roleLabel}</Badge>\n  );\n\n  return (\n    <li>\n      <Item\n        size=\"sm\"\n        media={<Avatar name={person.name ?? person.email} src={person.src} size=\"sm\" />}\n        title={\n          <>\n            {person.name ?? person.email}\n            {you ? <span className=\"font-normal text-muted-foreground\"> (you)</span> : null}\n          </>\n        }\n        description={person.name ? person.email : person.pending ? \"Invite sent\" : undefined}\n        meta={person.pending && person.name ? <Badge variant=\"soft\">Invited</Badge> : undefined}\n        actions={meta}\n        className={cx(busy && \"opacity-70\")}\n      />\n    </li>\n  );\n}\n\nfunction LinkRow({ link, onCopy, onPreview, previewHref, label }) {\n  const id = useId();\n  const [copied, setCopied] = useState(false);\n  const [error, setError] = useState(null);\n  const timer = useRef(null);\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  async function copy() {\n    setError(null);\n    let failed = null;\n    try {\n      if (!navigator.clipboard?.writeText) throw new Error(\"This browser blocks copying. Select the link and copy it by hand.\");\n      await navigator.clipboard.writeText(link);\n      failed = await attempt(() => onCopy?.(link));\n    } catch (e) {\n      failed = e?.message || \"Copying failed. Select the link and copy it by hand.\";\n    }\n    if (failed) {\n      setError(failed);\n      return;\n    }\n    setCopied(true);\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setCopied(false), 1600);\n  }\n\n  return (\n    <div className=\"grid gap-2\">\n      <label htmlFor={id} className=\"text-sm font-medium text-foreground\">\n        {label}\n      </label>\n      <InputGroup\n        id={id}\n        icon=\"link\"\n        readOnly\n        value={link}\n        onFocus={(e) => e.target.select()}\n        action={{ label: copied ? \"Copied\" : \"Copy link\", icon: copied ? \"check\" : \"copy\", onClick: copy }}\n      />\n      <p role=\"status\" className={cx(\"text-xs\", error ? \"text-destructive\" : \"text-muted-foreground\", !error && !copied && \"sr-only\")}>\n        {error ?? (copied ? \"Link copied.\" : \"\")}\n      </p>\n      <div className=\"flex flex-col gap-2 sm:flex-row\">\n        <Button variant=\"secondary\" icon={copied ? \"check\" : \"copy\"} onClick={copy} className=\"sm:flex-1\">\n          {copied ? \"Copied\" : \"Copy link\"}\n        </Button>\n        {previewHref || onPreview ? (\n          <Button variant=\"secondary\" icon=\"external\" href={previewHref} onClick={onPreview} target={previewHref ? \"_blank\" : undefined} rel={previewHref ? \"noreferrer\" : undefined} className=\"sm:flex-1\">\n            Preview\n          </Button>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nfunction SettingRow({ setting, onSettingChange, onError }) {\n  const id = useId();\n  const [on, setOn] = useState(Boolean(setting.checked));\n  const [busy, setBusy] = useState(false);\n  useEffect(() => setOn(Boolean(setting.checked)), [setting.checked]);\n\n  async function toggle(e) {\n    const next = e.target.checked;\n    setOn(next);\n    setBusy(true);\n    const failed = await attempt(() => onSettingChange?.(setting.id, next));\n    setBusy(false);\n    if (failed) {\n      setOn(!next);\n      onError(`${setting.label}: ${failed}`);\n    }\n  }\n\n  return (\n    <div className=\"flex items-center justify-between gap-4 rounded-md border border-border px-3\">\n      <div className=\"min-w-0 py-2\">\n        <label htmlFor={id} className=\"flex items-center gap-2 text-sm font-medium\">\n          {setting.icon ? <Icon name={setting.icon} size={16} className=\"shrink-0 text-muted-foreground\" /> : null}\n          {setting.label}\n        </label>\n        {setting.description ? <p className=\"text-xs text-muted-foreground\">{setting.description}</p> : null}\n      </div>\n      <Switch id={id} checked={on} onChange={toggle} disabled={busy || setting.disabled} />\n    </div>\n  );\n}\n\n/** The body: invite, people, settings, link — each shows when its data or\n *  callback is given. */\nexport function SharePanel({\n  people,\n  roles = DEFAULT_ROLES,\n  onInvite,\n  inviteRole,\n  onRoleChange,\n  onRemove,\n  link,\n  onCopy,\n  onPreview,\n  previewHref,\n  settings,\n  onSettingChange,\n  youId,\n  inviteLabel = \"Invite by email\",\n  invitePlaceholder = \"Emails, separated by commas\",\n  peopleLabel = \"People with access\",\n  linkLabel = \"Share link\",\n  empty = \"Only you have access so far.\",\n  className,\n}) {\n  const [error, setError] = useState(null);\n  const list = people ?? null;\n\n  return (\n    <div className={cx(\"grid gap-5\", className)}>\n      {onInvite ? <InviteRow onInvite={onInvite} roles={roles} inviteRole={inviteRole} placeholder={invitePlaceholder} people={list} label={inviteLabel} /> : null}\n\n      {settings?.length ? (\n        <div className=\"grid gap-2\">\n          {settings.map((s) => (\n            <SettingRow key={s.id} setting={s} onSettingChange={onSettingChange} onError={setError} />\n          ))}\n        </div>\n      ) : null}\n\n      {list ? (\n        <section className=\"grid gap-1\" aria-label={peopleLabel}>\n          <h3 className=\"text-sm font-medium\">{peopleLabel}</h3>\n          {list.length ? (\n            <ul className=\"grid divide-y divide-border\">\n              {list.map((p) => (\n                <PersonRow\n                  key={p.id ?? p.email}\n                  person={p}\n                  roles={roles}\n                  onRoleChange={onRoleChange}\n                  onRemove={onRemove}\n                  onError={setError}\n                  you={youId != null && (p.id ?? p.email) === youId}\n                />\n              ))}\n            </ul>\n          ) : (\n            <p className=\"py-3 text-sm text-muted-foreground\">{empty}</p>\n          )}\n        </section>\n      ) : null}\n\n      {error ? (\n        <Notice tone=\"danger\" onDismiss={() => setError(null)}>\n          {error}\n        </Notice>\n      ) : null}\n\n      {link ? <LinkRow link={link} onCopy={onCopy} onPreview={onPreview} previewHref={previewHref} label={linkLabel} /> : null}\n    </div>\n  );\n}\n\n/** SharePanel in the kit's Sheet: a dialog on a wide window, a bottom\n *  sheet on a phone. Controlled: `open` + `onClose`. */\nexport function ShareDialog({ open, onClose, title = \"Share\", description, footer, className, ...panel }) {\n  return (\n    <Sheet open={open} onClose={onClose} side=\"center\" title={title} description={description} footer={footer} className={className}>\n      {open ? <SharePanel {...panel} /> : null}\n    </Sheet>\n  );\n}\n"
+    },
+    {
+      "path": "registry/blocks/share-dialog/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/share-dialog/README.md",
+      "content": "# ShareDialog\n\nWho can see a record, and how to let more people in. An invite field\nthat takes several emails at once (with an access level), the people who\nalready have access (each with a menu: can view, can edit, remove),\nsharing switches (\"Allow comments\"), and a link with a copy button that\nturns to a check. Each section shows when you give its data or callback.\n`ShareDialog` puts it in the kit's `Sheet` (a dialog; a bottom sheet on a\nphone); `SharePanel` is the same body inline, for a settings page.\n\nEvery change goes out through an async callback that returns `{ ok: true }`\nor `{ ok: false, error }`. A role change or a switch shows at once and goes\nback when the save fails, with the reason on screen.\n\n```jsx\nimport { ShareDialog, SharePanel } from \"../components/blocks/share-dialog\";   // a Makersclaw app (\"./blocks/share-dialog\" from components/)\nimport { ShareDialog, SharePanel } from \"@/components/makersclaw/blocks/share-dialog\";   // a shadcn project\n```\n\nA client component: render it from a `\"use client\"` component.\n\n## The data\n\n`people` is who has access now: `[{ id?, name?, email, src?, role, roleLabel?, locked?, pending? }]`.\n\n- `role` is one of `roles`' values. A role outside them (an owner) shows\n  as a badge, with `roleLabel` as its words.\n- `locked: true` — no menu for this person (the owner, yourself).\n- `pending: true` — invited, not joined yet: \"Invite sent\" or an\n  \"Invited\" badge.\n- `src` — a photo; the kit's `Avatar` shows initials without one.\n\n## Props\n\nBoth components take these. Everything is optional; a section shows only\nwhen its data or callback is there.\n\n- `people` — the list above. `[]` shows `empty`; leave it out to hide the\n  section.\n- `roles` — the access levels, in order: `[{ value, label }]`. Default\n  `[{ value: \"view\", label: \"Can view\" }, { value: \"edit\", label: \"Can edit\" }]`.\n- `onInvite(emails, role)` — shows the invite field. Async, `{ ok, error }`.\n  The field splits on commas, spaces and semicolons, drops duplicates and\n  people who already have access, and refuses anything that is not an\n  email before it calls you. Add the invited people to `people` yourself\n  (with `pending: true`). With two or more `roles`, a picker beside the\n  field chooses the role.\n- `inviteRole` — every invite gets this role, and no picker shows.\n- `onRoleChange(person, role)` — each person's access becomes a menu.\n  Async, `{ ok, error }`. Update `people` on success.\n- `onRemove(person)` — \"Remove access\" in that menu. Async. Take the\n  person out of `people` on success.\n- `link` — a URL to share: a read-only field with a copy button, then a\n  \"Copy link\" button. Copying uses the browser's clipboard. A blocked\n  clipboard shows a message.\n- `onCopy(link)` — called after a copy (analytics, \"link created\"). Async\n  and optional; a failure shows.\n- `previewHref` or `onPreview` — a \"Preview\" button beside \"Copy link\".\n- `settings` — switches: `[{ id, label, description?, icon?, checked, disabled? }]`.\n- `onSettingChange(id, next)` — async, `{ ok, error }`. The switch goes\n  back when it fails.\n- `youId` — the `id` (or email) of the person looking: \"(you)\" after their name.\n- `inviteLabel` · `invitePlaceholder` · `peopleLabel` · `linkLabel` ·\n  `empty` — the words. Defaults: \"Invite by email\", \"Emails, separated by\n  commas\", \"People with access\", \"Share link\", \"Only you have access so far.\"\n- `className` — on the panel.\n\n`ShareDialog` also takes:\n\n- `open` · `onClose()` — controlled. Esc, a press outside and the ✕ close it.\n- `title` — default \"Share\". `description` — a line under it.\n- `footer` — buttons under the body (a \"Done\").\n\n## Example\n\n```jsx\n\"use client\";\nimport { useState } from \"react\";\nimport { Button } from \"../components/ui\";\nimport { ShareDialog } from \"../components/blocks/share-dialog\";\n\nexport function ShareProject({ project, members, invite, setRole, remove }) {\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <Button icon=\"share\" onClick={() => setOpen(true)}>Share</Button>\n      <ShareDialog\n        open={open}\n        onClose={() => setOpen(false)}\n        title={`Share “${project.name}”`}\n        people={members}\n        onInvite={(emails, role) => invite(project.id, emails, role)}   // server actions returning { ok, error }\n        onRoleChange={(person, role) => setRole(project.id, person.id, role)}\n        onRemove={(person) => remove(project.id, person.id)}\n        link={`https://app.example.com/p/${project.id}`}\n      />\n    </>\n  );\n}\n```\n\n## What it will not do\n\n- Send the invite email or create the access row: `onInvite` does.\n- Search your directory as you type. The field takes addresses; for a\n  people picker, use the kit's `Combobox`.\n- Make the link public or private by itself. Put that switch in `settings`\n  and change `link` from your callback.\n- Show a person's access per page or field. It has one role per person.\n\n## Credits\n\nPorted from blocks.so (https://blocks.so, dialogs 08 and 09, MIT) and Creative Tim UI (https://github.com/creativetimofficial/ui, modals-03, MIT), rewritten on the Makersclaw kit.\n"
+    }
+  ],
+  "categories": [
+    "share",
+    "invite",
+    "members",
+    "collaborators",
+    "access",
+    "permissions",
+    "roles",
+    "team",
+    "link",
+    "copy link",
+    "dialog",
+    "modal"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/share-dialog. Import: import { ShareDialog, SharePanel } from \"@/components/makersclaw/blocks/share-dialog\". Props and an example: components/makersclaw/blocks/share-dialog/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.3.1",
+      "useWhen": "A record, project, document or workspace can be shared: an \"Invite\" or \"Share\" button, a members list with roles, a public link to copy."
+    }
+  }
+}