makersclaw 0.3.2 → 0.5.1

package/r/comment-box.json

@@ -5,8 +5,8 @@
   "title": "CommentBox",
   "description": "A minimal rich comment field (DocEditor in minimal mode): bold, italic, links and lists from the selection toolbar or markdown shortcuts, @mentions as chips, Cmd/Ctrl+Enter to post. It posts through an async onPost(doc) that answers { ok }, keeps the draft and says why when it fails, and clears when it lands. With `comments` it draws the thread above it: avatar, name, relative time, the rich body. Also exports the composer alone, the read-only body renderer and the timestamp.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.3.2/r/doc-editor.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/r/doc-editor.json"
   ],
   "dependencies": [],
   "files": [
@@ -32,13 +32,13 @@
       "path": "registry/blocks/comment-box/comment-time.jsx",
       "type": "registry:component",
       "target": "@components/makersclaw/blocks/comment-box/comment-time.jsx",
-      "content": "\"use client\";\n\n// CommentTime — when a comment was written, as a <time>.\n//\n// Relative words (\"5 min ago\") need the clock, and the server's clock and\n// time zone are not the reader's. So the server and the first paint show\n// the absolute date; after mount it turns relative, and one shared minute\n// tick (not a timer per comment) keeps every label current. The full date\n// is always in the title.\nimport { useEffect, useState } from \"react\";\nimport { cx } from \"../../ui\";\n\nconst listeners = new Set();\nlet timer = null;\nfunction subscribe(fn) {\n  listeners.add(fn);\n  if (!timer) timer = setInterval(() => listeners.forEach((l) => l(Date.now())), 60_000);\n  return () => {\n    listeners.delete(fn);\n    if (!listeners.size && timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n  };\n}\n\n/** Date.now(), refreshed each minute — null until mounted. */\nexport function useNow() {\n  const [now, setNow] = useState(null);\n  useEffect(() => {\n    setNow(Date.now());\n    return subscribe(setNow);\n  }, []);\n  return now;\n}\n\nexport const toDate = (v) => {\n  if (v === undefined || v === null || v === \"\") return null;\n  const d = v instanceof Date ? v : new Date(v);\n  return Number.isNaN(d.getTime()) ? null : d;\n};\n\nconst fmt = (opts) => new Intl.DateTimeFormat(undefined, opts);\nconst TIME = { hour: \"numeric\", minute: \"2-digit\" };\nconst startOfDay = (ms) => {\n  const d = new Date(ms);\n  d.setHours(0, 0, 0, 0);\n  return d.getTime();\n};\n\n/** \"12 Sep 2026, 14:05\" — the title, and the label before mount. */\nexport function fullDate(d) {\n  return fmt({ day: \"numeric\", month: \"short\", year: \"numeric\", ...TIME }).format(d);\n}\n\n/** \"just now\" · \"5 min ago\" · \"3 h ago\" (today) · \"Yesterday, 14:05\" · \"12 Sep, 14:05\" · \"12 Sep 2025\". */\nexport function relativeDate(d, now) {\n  const diff = now - d.getTime();\n  if (diff < 45_000 && diff > -60_000) return \"just now\";\n  const today = startOfDay(now);\n  if (diff > 0 && diff < 60 * 60_000) return `${Math.round(diff / 60_000)} min ago`;\n  if (d.getTime() >= today && diff > 0) return `${Math.floor(diff / 3_600_000)} h ago`;\n  if (d.getTime() >= today - 86_400_000 && d.getTime() < today) return `Yesterday, ${fmt(TIME).format(d)}`;\n  if (new Date(d).getFullYear() === new Date(now).getFullYear()) return fmt({ day: \"numeric\", month: \"short\", ...TIME }).format(d);\n  return fmt({ day: \"numeric\", month: \"short\", year: \"numeric\" }).format(d);\n}\n\nexport function CommentTime({ date, className }) {\n  const now = useNow();\n  const d = toDate(date);\n  if (!d) return null;\n  return (\n    <time dateTime={d.toISOString()} title={fullDate(d)} suppressHydrationWarning className={cx(\"text-xs text-muted-foreground\", className)}>\n      {now === null ? fullDate(d) : relativeDate(d, now)}\n    </time>\n  );\n}\n"
+      "content": "\"use client\";\n\n// CommentTime — when a comment was written, as a <time>.\n//\n// Relative words (\"5 min ago\") need the clock, and the server's clock and\n// time zone are not the reader's. So the server and the first paint show\n// the absolute date; after mount it turns relative, and one shared minute\n// tick (not a timer per comment) keeps every label current. The full date\n// is always in the title.\nimport { useEffect, useState } from \"react\";\nimport { cx, toLocalDate } from \"../../ui\";\n\nconst listeners = new Set();\nlet timer = null;\nfunction subscribe(fn) {\n  listeners.add(fn);\n  if (!timer) timer = setInterval(() => listeners.forEach((l) => l(Date.now())), 60_000);\n  return () => {\n    listeners.delete(fn);\n    if (!listeners.size && timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n  };\n}\n\n/** Date.now(), refreshed each minute — null until mounted. */\nexport function useNow() {\n  const [now, setNow] = useState(null);\n  useEffect(() => {\n    setNow(Date.now());\n    return subscribe(setNow);\n  }, []);\n  return now;\n}\n\n/** A Date, an ISO time or a day alone (\"2026-09-28\", a `date` column: that\n *  day's local midnight, never UTC's) → a Date; null when it is none. */\nexport const toDate = (v) => toLocalDate(v);\n\nconst fmt = (opts) => new Intl.DateTimeFormat(undefined, opts);\nconst TIME = { hour: \"numeric\", minute: \"2-digit\" };\nconst startOfDay = (ms) => {\n  const d = new Date(ms);\n  d.setHours(0, 0, 0, 0);\n  return d.getTime();\n};\n\n/** \"12 Sep 2026, 14:05\" — the title, and the label before mount. */\nexport function fullDate(d) {\n  return fmt({ day: \"numeric\", month: \"short\", year: \"numeric\", ...TIME }).format(d);\n}\n\n/** \"just now\" · \"5 min ago\" · \"3 h ago\" (today) · \"Yesterday, 14:05\" · \"12 Sep, 14:05\" · \"12 Sep 2025\". */\nexport function relativeDate(d, now) {\n  const diff = now - d.getTime();\n  if (diff < 45_000 && diff > -60_000) return \"just now\";\n  const today = startOfDay(now);\n  if (diff > 0 && diff < 60 * 60_000) return `${Math.round(diff / 60_000)} min ago`;\n  if (d.getTime() >= today && diff > 0) return `${Math.floor(diff / 3_600_000)} h ago`;\n  if (d.getTime() >= today - 86_400_000 && d.getTime() < today) return `Yesterday, ${fmt(TIME).format(d)}`;\n  if (new Date(d).getFullYear() === new Date(now).getFullYear()) return fmt({ day: \"numeric\", month: \"short\", ...TIME }).format(d);\n  return fmt({ day: \"numeric\", month: \"short\", year: \"numeric\" }).format(d);\n}\n\nexport function CommentTime({ date, className }) {\n  const now = useNow();\n  const d = toDate(date);\n  if (!d) return null;\n  return (\n    <time dateTime={d.toISOString()} title={fullDate(d)} suppressHydrationWarning className={cx(\"text-xs text-muted-foreground\", className)}>\n      {now === null ? fullDate(d) : relativeDate(d, now)}\n    </time>\n  );\n}\n"
     },
     {
       "path": "registry/blocks/comment-box/README.md",
       "type": "registry:file",
       "target": "@components/makersclaw/blocks/comment-box/README.md",
-      "content": "# CommentBox\n\nA comment field that takes rich text: select a word for bold, italic or a\nlink, start a line with `-` for a list, type `@` to mention a teammate\n(they go in as a chip). Cmd/Ctrl+Enter posts, as does the Post button.\nWhile a post is on its way the box is locked; when it fails the words\nstay and the box says why; when it lands the box clears. Give it\n`comments` and it draws the thread above: avatar, name, \"5 min ago\", the\nbody with its formatting and mentions.\n\nIt is `doc-editor` in its minimal mode (no `/` menu, no drag handles), so\na comment is BlockNote JSON — the same doc every text block uses.\n\n```jsx\nimport { CommentBox } from \"../components/blocks/comment-box\";   // a Makersclaw app (\"./blocks/comment-box\" from components/)\nimport { CommentBox } from \"@/components/makersclaw/blocks/comment-box\";   // a shadcn project\n```\n\nIt is a client component: render it from a `\"use client\"` component, and\nload the thread in the server surface (README §4). `makersclaw add\ncomment-box` adds `doc-editor` with it (and its npm packages: run\n`npm install` after).\n\n## The data\n\nA comment in `comments`:\n\n```js\n{\n  id: \"c-81\",\n  author: { id: \"u-lena\", name: \"Lena Fischer\", src: \"https://…/lena.jpg\" },   // or just \"Lena Fischer\"\n  body: [ /* the doc onPost gave you */ ],   // or a plain string\n  createdAt: \"2026-09-23T09:12:00Z\",          // ISO string, Date or ms\n  edited: false,                              // true adds \"(edited)\"\n}\n```\n\nStore `body` as it came out of `onPost` (a `jsonb` column). Keep a plain\ncopy beside it for search and notifications: `docToText(doc)` from\n`doc-editor`. The people mentioned are `docMentions(doc)` — notify them.\n\n## Props\n\n- `onPost(doc)` — required. `async`, returns `{ ok: true }` or\n  `{ ok: false, error? }` (`error` is shown under the box; without it,\n  \"Couldn't post…\"). A throw counts as a failure. Only an ok clears the\n  box. An empty box never posts.\n- `comments` — the thread, oldest first, drawn above the box. Leave it out\n  for the field alone; `[]` shows `emptyText`.\n- `author` — `{ name, src? }`, who is writing: their avatar sits beside\n  the box from 640px.\n- `mentions` — `async (query) => [{ id, label, description? }]`: turns on\n  `@` (doc-editor's `mentions`).\n- `placeholder` — `\"Write a comment…\"`.\n- `postLabel` — the button, `\"Post\"` (\"Reply\", \"Send\").\n- `label` — the field's accessible name, `\"Comment\"`.\n- `threadLabel` — the list's accessible name, `\"Comments\"`.\n- `emptyText` — `\"No comments yet.\"`.\n- `autoFocus` — `false`.\n- `disabled` — `false`; `true` locks the box (no edit, no post).\n- `className` — layout around it.\n\nThe other exports, for a thread of your own:\n\n- `CommentComposer` — the field and its buttons: `onSubmit(doc)` (same\n  answer as `onPost`), `author`, `mentions`, `defaultValue` (a doc to\n  start from — editing a comment), `placeholder`, `submitLabel`\n  (`\"Post\"`), `submitIcon` (a kit icon name, `\"send\"`; `null` for none),\n  `busyLabel` (shown while it runs), `failedText`,\n  `onCancel` (adds a Cancel button), `cancelLabel`, `label`,\n  `autoFocus`, `disabled`, `clearOnSubmit` (`true`; `false` when the\n  composer goes away after a save), `className`.\n- `CommentBody` — `{ doc, className }`: a doc drawn read-only as plain\n  HTML (server too): paragraphs, headings, lists, checklists, quotes,\n  code, tables, links, image links, mentions and fields as chips.\n- `CommentTime` — `{ date, className }`: a `<time>`; the absolute date on\n  the server, \"5 min ago\" once mounted, kept current each minute.\n\n## Example\n\n```jsx\n// components/TaskComments.jsx — client\n\"use client\";\nimport { useState } from \"react\";\nimport { insertRow } from \"../lib/actions\";\nimport { CommentBox } from \"./blocks/comment-box\";\nimport { docToText } from \"./blocks/doc-editor\";\n\nexport default function TaskComments({ task, me, team, initial }) {\n  const [comments, setComments] = useState(initial);\n  const findPeople = async (q) =>\n    team.filter((p) => p.name.toLowerCase().includes(q.toLowerCase())).map((p) => ({ id: p.id, label: p.name }));\n\n  async function post(doc) {\n    const res = await insertRow({\n      source: \"public.comments\",\n      values: { task_id: task.id, author_id: me.id, body: doc, body_text: docToText(doc) },\n    });\n    if (!res.ok) return { ok: false, error: res.error };\n    setComments((c) => [...c, { id: res.id, author: me, body: doc, createdAt: new Date() }]);\n    return { ok: true };\n  }\n\n  return <CommentBox comments={comments} onPost={post} author={me} mentions={findPeople} />;\n}\n```\n\n## What it will not do\n\n- Edit or delete a posted comment, react, or reply in a nested thread: the\n  thread is read-only. Notes you keep, edit and delete on a record are\n  `record-notes`; build a richer thread from `CommentComposer` +\n  `CommentBody` in your own component.\n- Attach files or images, or offer a `/` menu: it is a comment, not a\n  document (`doc-editor` for that).\n- Notify anyone: read the mentions off the doc (`docMentions`) and send\n  them yourself.\n- Load older comments or scroll the thread: it draws what it is given;\n  put it in a scrolling box and page it yourself.\n\nAn editor it cannot be is your own component in `components/` — not an\nedit to this block. Its files are fixed: `npm run check` refuses a\nchange, and `makersclaw add comment-box` restores them.\n"
+      "content": "# CommentBox\n\nA comment field that takes rich text: select a word for bold, italic or a\nlink, start a line with `-` for a list, type `@` to mention a teammate\n(they go in as a chip). Cmd/Ctrl+Enter posts, as does the Post button.\nWhile a post is on its way the box is locked; when it fails the words\nstay and the box says why; when it lands the box clears. Give it\n`comments` and it draws the thread above: avatar, name, \"5 min ago\", the\nbody with its formatting and mentions.\n\nIt is `doc-editor` in its minimal mode (no `/` menu, no drag handles), so\na comment is BlockNote JSON — the same doc every text block uses.\n\n```jsx\nimport { CommentBox } from \"../components/blocks/comment-box\";   // a Makersclaw app (\"./blocks/comment-box\" from components/)\nimport { CommentBox } from \"@/components/makersclaw/blocks/comment-box\";   // a shadcn project\n```\n\nIt is a client component: render it from a `\"use client\"` component, and\nload the thread in the server surface (README §4). `makersclaw add\ncomment-box` adds `doc-editor` with it (and its npm packages: run\n`npm install` after).\n\n## The data\n\nA comment in `comments`:\n\n```js\n{\n  id: \"c-81\",\n  author: { id: \"u-lena\", name: \"Lena Fischer\", src: \"https://…/lena.jpg\" },   // or just \"Lena Fischer\"\n  body: [ /* the doc onPost gave you */ ],   // or a plain string\n  createdAt: \"2026-09-23T09:12:00Z\",          // ISO string, Date, ms, or a day (\"2026-09-23\": that day, never UTC's)\n  edited: false,                              // true adds \"(edited)\"\n}\n```\n\nStore `body` as it came out of `onPost` (a `jsonb` column). Keep a plain\ncopy beside it for search and notifications: `docToText(doc)` from\n`doc-editor`. The people mentioned are `docMentions(doc)` — notify them.\n\n## Props\n\n- `onPost(doc)` — required. `async`, returns `{ ok: true }` or\n  `{ ok: false, error? }` (`error` is shown under the box; without it,\n  \"Couldn't post…\"). A throw counts as a failure. Only an ok clears the\n  box. An empty box never posts.\n- `comments` — the thread, oldest first, drawn above the box. Leave it out\n  for the field alone; `[]` shows `emptyText`.\n- `author` — `{ name, src? }`, who is writing: their avatar sits beside\n  the box from 640px.\n- `mentions` — `async (query) => [{ id, label, description? }]`: turns on\n  `@` (doc-editor's `mentions`).\n- `placeholder` — `\"Write a comment…\"`.\n- `postLabel` — the button, `\"Post\"` (\"Reply\", \"Send\").\n- `label` — the field's accessible name, `\"Comment\"`.\n- `threadLabel` — the list's accessible name, `\"Comments\"`.\n- `emptyText` — `\"No comments yet.\"`.\n- `autoFocus` — `false`.\n- `disabled` — `false`; `true` locks the box (no edit, no post).\n- `className` — layout around it.\n\nThe other exports, for a thread of your own:\n\n- `CommentComposer` — the field and its buttons: `onSubmit(doc)` (same\n  answer as `onPost`), `author`, `mentions`, `defaultValue` (a doc to\n  start from — editing a comment), `placeholder`, `submitLabel`\n  (`\"Post\"`), `submitIcon` (a kit icon name, `\"send\"`; `null` for none),\n  `busyLabel` (shown while it runs), `failedText`,\n  `onCancel` (adds a Cancel button), `cancelLabel`, `label`,\n  `autoFocus`, `disabled`, `clearOnSubmit` (`true`; `false` when the\n  composer goes away after a save), `className`.\n- `CommentBody` — `{ doc, className }`: a doc drawn read-only as plain\n  HTML (server too): paragraphs, headings, lists, checklists, quotes,\n  code, tables, links, image links, mentions and fields as chips.\n- `CommentTime` — `{ date, className }`: a `<time>`; the absolute date on\n  the server, \"5 min ago\" once mounted, kept current each minute.\n\n## Example\n\n```jsx\n// components/TaskComments.jsx — client\n\"use client\";\nimport { useState } from \"react\";\nimport { insertRow } from \"../lib/actions\";\nimport { CommentBox } from \"./blocks/comment-box\";\nimport { docToText } from \"./blocks/doc-editor\";\n\nexport default function TaskComments({ task, me, team, initial }) {\n  const [comments, setComments] = useState(initial);\n  const findPeople = async (q) =>\n    team.filter((p) => p.name.toLowerCase().includes(q.toLowerCase())).map((p) => ({ id: p.id, label: p.name }));\n\n  async function post(doc) {\n    const res = await insertRow({\n      source: \"public.comments\",\n      values: { task_id: task.id, author_id: me.id, body: doc, body_text: docToText(doc) },\n    });\n    if (!res.ok) return { ok: false, error: res.error };\n    setComments((c) => [...c, { id: res.id, author: me, body: doc, createdAt: new Date() }]);\n    return { ok: true };\n  }\n\n  return <CommentBox comments={comments} onPost={post} author={me} mentions={findPeople} />;\n}\n```\n\n## What it will not do\n\n- Edit or delete a posted comment, react, or reply in a nested thread: the\n  thread is read-only. Notes you keep, edit and delete on a record are\n  `record-notes`; build a richer thread from `CommentComposer` +\n  `CommentBody` in your own component.\n- Attach files or images, or offer a `/` menu: it is a comment, not a\n  document (`doc-editor` for that).\n- Notify anyone: read the mentions off the doc (`docMentions`) and send\n  them yourself.\n- Load older comments or scroll the thread: it draws what it is given;\n  put it in a scrolling box and page it yourself.\n\nAn editor it cannot be is your own component in `components/` — not an\nedit to this block. Its files are fixed: `npm run check` refuses a\nchange, and `makersclaw add comment-box` restores them.\n"
     }
   ],
   "categories": [
@@ -57,7 +57,7 @@
   "docs": "Installed to components/makersclaw/blocks/comment-box. Import: import { CommentBox, CommentComposer, CommentBody, CommentTime } from \"@/components/makersclaw/blocks/comment-box\". Props and an example: components/makersclaw/blocks/comment-box/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.3.2",
+      "version": "0.5.1",
       "useWhen": "People comment on something in the app: a task, a design, a document, an approval, a support ticket; a reply field with @mentions under a thread. Not dated notes kept on a record with edit and delete (record-notes), not a conversation with an assistant (chat), not a long document (doc-editor, doc-page)."
     }
   }

package/r/contact-section.json

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