makersclaw 0.8.0 → 0.8.1

package/r/record-grid.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "record-grid",
+  "type": "registry:block",
+  "title": "RecordGrid",
+  "description": "A dense grid for reading many records at once: a row number and a tick at the start of each row, the name column pinned beside them while the rest scrolls sideways, headers and cells you draw yourself (a column's live progress, its cost, its menu; an answer with its mark), whole-row marks (selected, highlighted, struck, dimmed), one active cell moved by the arrow keys and opened with Enter, and a line after the last row. Only the rows in the window are drawn, so 2,000 rows of 32px scroll smoothly. It scrolls itself inside a bounded parent.",
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/blocks/record-grid/index.js",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/record-grid/index.js",
+      "content": "// The RecordGrid block — `makersclaw add record-grid`. Fixed: compose it\n// through its props (README.md beside this file).\nexport { RecordGrid } from \"./record-grid\";\n"
+    },
+    {
+      "path": "registry/blocks/record-grid/record-grid.jsx",
+      "type": "registry:component",
+      "target": "@components/makersclaw/blocks/record-grid/record-grid.jsx",
+      "content": "\"use client\";\n\n// RecordGrid — a dense grid for reading many records at once: a row\n// number and a tick at the start of every row, the name column pinned\n// beside them while the rest scrolls sideways, a header that is yours to\n// draw (a column's live progress, its cost, its menu), a cell that is\n// yours to draw, marks on whole rows (selected, highlighted, struck,\n// dimmed), one active cell, and the keyboard. Only the rows in the window\n// are drawn, so 2,000 rows scroll like twenty. It scrolls itself: give it\n// a bounded parent (h-full, flex-1 min-h-0).\n//\n// Props in, callbacks out; it never fetches and formats nothing. Tokens\n// only.\n\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from \"react\";\nimport { cx } from \"../../ui\";\n\nconst keyOf = (row, rowKey) => (typeof rowKey === \"function\" ? rowKey(row) : row?.[rowKey ?? \"id\"]);\n\n/**\n *   rows         the records, in order\n *   columns      [{ key, width (px), header (node), cell(row, index) (node),\n *                 className?, headerClassName?, label? (a screen reader's\n *                 name for the column when the header is not words) }]\n *   lead         [{ key, width, header, cell(row, index), className? }]:\n *                 the columns before the pinned ones (a row number, a tick)\n *   pinned       how many of `columns` stay put beside `lead` (default 1)\n *   rowKey       a key or (row) => key (default \"id\")\n *   rowHeight    px (default 32); headerHeight px (default 50)\n *   rowMark(row) { selected, highlighted, struck, dimmed }\n *   active       { row: key, column: key } the active cell, or null\n *   onActiveChange(next)  the keyboard or a click moved it\n *   onCellClick(row, columnKey)  a click on a cell (open it)\n *   onOpen(row, columnKey)  Enter on the active cell\n *   after        a node in a row of its own after the last row\n *   empty        what an empty grid says\n *   label        what a screen reader calls the grid\n *   className    layout around it\n *   ref          { scrollToRow(key), scrollToEnd(), focus() }\n */\nexport const RecordGrid = forwardRef(function RecordGrid(\n  {\n    rows,\n    columns,\n    lead = [],\n    pinned = 1,\n    rowKey = \"id\",\n    rowHeight = 32,\n    headerHeight = 50,\n    overscan = 8,\n    rowMark,\n    active,\n    onActiveChange,\n    onCellClick,\n    onOpen,\n    after,\n    empty,\n    label = \"Records\",\n    className,\n  },\n  ref,\n) {\n  const box = useRef(null);\n  const [scroll, setScroll] = useState({ top: 0, left: 0, height: 600 });\n\n  const all = useMemo(() => [...lead.map((c) => ({ ...c, lead: true })), ...columns], [lead, columns]);\n  const stuck = lead.length + Math.max(0, Math.min(pinned, columns.length));\n  const offsets = useMemo(() => {\n    const out = [];\n    let x = 0;\n    for (const c of all) {\n      out.push(x);\n      x += Number(c.width) || 120;\n    }\n    return { at: out, width: x };\n  }, [all]);\n\n  const onScroll = useCallback(() => {\n    const el = box.current;\n    if (!el) return;\n    setScroll((s) => (s.top === el.scrollTop && s.left === el.scrollLeft && s.height === el.clientHeight ? s : { top: el.scrollTop, left: el.scrollLeft, height: el.clientHeight }));\n  }, []);\n\n  useEffect(() => {\n    const el = box.current;\n    if (!el) return;\n    onScroll();\n    const ro = typeof ResizeObserver === \"function\" ? new ResizeObserver(onScroll) : null;\n    ro?.observe(el);\n    return () => ro?.disconnect();\n  }, [onScroll]);\n\n  const total = rows.length;\n  const first = Math.max(0, Math.floor((scroll.top - headerHeight) / rowHeight) - overscan);\n  const last = Math.min(total, Math.ceil((scroll.top + scroll.height) / rowHeight) + overscan);\n  const shown = rows.slice(first, last);\n\n  const indexOf = useCallback((key) => rows.findIndex((r) => keyOf(r, rowKey) === key), [rows, rowKey]);\n\n  const scrollToIndex = useCallback(\n    (i, block = \"nearest\") => {\n      const el = box.current;\n      if (!el || i < 0) return;\n      const top = headerHeight + i * rowHeight;\n      const view = el.clientHeight;\n      if (block === \"end\") el.scrollTop = Math.max(0, top + rowHeight - view);\n      else if (top < el.scrollTop + headerHeight) el.scrollTop = Math.max(0, top - headerHeight);\n      else if (top + rowHeight > el.scrollTop + view) el.scrollTop = top + rowHeight - view;\n    },\n    [headerHeight, rowHeight],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToRow: (key) => scrollToIndex(indexOf(key)),\n      scrollToEnd: () => {\n        const el = box.current;\n        if (el) el.scrollTop = el.scrollHeight;\n      },\n      focus: () => box.current?.focus({ preventScroll: true }),\n    }),\n    [indexOf, scrollToIndex],\n  );\n\n  // The active cell stays in view.\n  useEffect(() => {\n    if (active?.row != null) scrollToIndex(indexOf(active.row));\n  }, [active?.row, indexOf, scrollToIndex]);\n\n  const keys = columns.map((c) => c.key);\n  const onKeyDown = (e) => {\n    if (!rows.length || !keys.length) return;\n    const at = active ? indexOf(active.row) : -1;\n    const col = active ? Math.max(0, keys.indexOf(active.column)) : 0;\n    let next = null;\n    if (e.key === \"ArrowDown\") next = { i: Math.min(total - 1, at + 1), c: col };\n    else if (e.key === \"ArrowUp\") next = { i: Math.max(0, at < 0 ? 0 : at - 1), c: col };\n    else if (e.key === \"ArrowRight\") next = { i: Math.max(0, at), c: Math.min(keys.length - 1, col + 1) };\n    else if (e.key === \"ArrowLeft\") next = { i: Math.max(0, at), c: Math.max(0, col - 1) };\n    else if (e.key === \"Home\") next = { i: e.metaKey || e.ctrlKey ? 0 : Math.max(0, at), c: 0 };\n    else if (e.key === \"End\") next = { i: e.metaKey || e.ctrlKey ? total - 1 : Math.max(0, at), c: keys.length - 1 };\n    else if (e.key === \"PageDown\") next = { i: Math.min(total - 1, at + Math.max(1, Math.floor(scroll.height / rowHeight) - 1)), c: col };\n    else if (e.key === \"PageUp\") next = { i: Math.max(0, at - Math.max(1, Math.floor(scroll.height / rowHeight) - 1)), c: col };\n    else if (e.key === \"Enter\" && active) {\n      e.preventDefault();\n      const row = rows[at];\n      if (row) onOpen?.(row, active.column);\n      return;\n    }\n    if (!next) return;\n    e.preventDefault();\n    const row = rows[next.i];\n    if (row) onActiveChange?.({ row: keyOf(row, rowKey), column: keys[next.c] });\n  };\n\n  const stick = (i, head = false) => {\n    if (i >= stuck) return null;\n    return { position: \"sticky\", left: offsets.at[i], zIndex: head ? 3 : 1 };\n  };\n  const edge = (i) => i === stuck - 1 && scroll.left > 0;\n\n  return (\n    <div\n      ref={box}\n      role=\"grid\"\n      aria-label={label}\n      aria-rowcount={total + 1}\n      aria-colcount={all.length}\n      tabIndex={0}\n      onScroll={onScroll}\n      onKeyDown={onKeyDown}\n      className={cx(\"relative h-full min-h-0 overflow-auto overscroll-contain outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\", className)}\n    >\n      <div style={{ width: offsets.width, minWidth: \"100%\", height: headerHeight + total * rowHeight + (after ? 48 : 0) }} className=\"relative\">\n        <div role=\"row\" aria-rowindex={1} className=\"sticky top-0 z-[2] flex bg-background\" style={{ height: headerHeight, width: offsets.width }}>\n          {all.map((c, i) => (\n            <div\n              key={c.key}\n              role=\"columnheader\"\n              aria-label={c.label}\n              className={cx(\n                \"shrink-0 overflow-hidden border-b border-r border-border bg-background px-2 pb-1 pt-1.5 text-left align-top\",\n                edge(i) && \"shadow-[6px_0_8px_-6px_var(--color-foreground)]\",\n                c.headerClassName,\n              )}\n              style={{ width: Number(c.width) || 120, ...stick(i, true) }}\n            >\n              {c.header}\n            </div>\n          ))}\n        </div>\n        {total === 0 ? (\n          <div className=\"px-3 py-6 text-sm text-muted-foreground\">{empty ?? \"Nothing here.\"}</div>\n        ) : null}\n        <div style={{ position: \"absolute\", top: headerHeight + first * rowHeight, left: 0, width: offsets.width }}>\n          {shown.map((row, j) => {\n            const index = first + j;\n            const key = keyOf(row, rowKey);\n            const mark = rowMark?.(row) ?? {};\n            const tint = mark.selected ? \"bg-accent text-accent-foreground\" : \"bg-background\";\n            return (\n              <div\n                key={key}\n                role=\"row\"\n                aria-rowindex={index + 2}\n                aria-selected={mark.selected ? true : undefined}\n                className={cx(\"flex\", mark.struck && \"text-muted-foreground\")}\n                style={{ height: rowHeight }}\n              >\n                {all.map((c, i) => {\n                  const on = active && active.row === key && active.column === c.key;\n                  return (\n                    <div\n                      key={c.key}\n                      role=\"gridcell\"\n                      aria-selected={on ? true : undefined}\n                      onClick={c.lead ? undefined : () => {\n                        onActiveChange?.({ row: key, column: c.key });\n                        onCellClick?.(row, c.key);\n                      }}\n                      className={cx(\n                        \"flex shrink-0 items-center overflow-hidden whitespace-nowrap border-b border-r border-border px-2\",\n                        tint,\n                        !c.lead && onCellClick && \"cursor-pointer\",\n                        mark.dimmed && !c.lead && i >= stuck && \"opacity-55\",\n                        mark.struck && i === stuck - 1 && \"line-through decoration-muted-foreground\",\n                        mark.highlighted && i === 0 && \"border-l-2 border-l-primary\",\n                        edge(i) && \"shadow-[6px_0_8px_-6px_var(--color-foreground)]\",\n                        on && \"outline outline-2 -outline-offset-2 outline-ring\",\n                        c.className,\n                      )}\n                      style={{ width: Number(c.width) || 120, height: rowHeight, ...stick(i) }}\n                    >\n                      {c.cell ? c.cell(row, index) : row[c.key]}\n                    </div>\n                  );\n                })}\n              </div>\n            );\n          })}\n        </div>\n        {after && total ? (\n          <div className=\"absolute left-0 flex items-center px-3 text-sm text-muted-foreground\" style={{ top: headerHeight + total * rowHeight, minHeight: 48, width: \"100%\" }}>\n            <div className=\"sticky left-3\">{after}</div>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"
+    },
+    {
+      "path": "registry/blocks/record-grid/README.md",
+      "type": "registry:file",
+      "target": "@components/makersclaw/blocks/record-grid/README.md",
+      "content": "# RecordGrid\n\nA dense grid for reading many records at once. Each row starts with what\nyou put in `lead` (a row number, a tick), then the pinned columns (the\nname), then the rest, which scroll sideways under a sticky header. Every\nheader and every cell is yours to draw: a column whose header carries its\nlive progress, its price and its own menu; a cell that draws an answer\nwith its mark. Whole rows take marks (selected, highlighted, struck,\ndimmed), one cell is active (an outline), the arrow keys move it, Enter\nopens it, a click opens it. Only the rows in the window are drawn, at a\nfixed height, so 2,000 rows scroll like twenty. It scrolls itself: put it\nin a bounded parent (`h-full`, `flex-1 min-h-0`, an AppLayout's content\nwith `contentMode=\"fill\"`) that can also shrink sideways: in a grid or\nflex row give that parent `min-w-0`, or the grid's columns widen the\nparent instead of scrolling inside it.\n\nBorn in Data Enrichment (0.5.0), moved into the template with the app kit: the list, with\neach agent column a job whose header says how far it got and what a row\ncosts, and the receipt of an answer opened beside it.\n\n```jsx\nimport { RecordGrid } from \"../components/blocks/record-grid\";   // a Makersclaw app (\"./blocks/record-grid\" from components/)\nimport { RecordGrid } from \"@/components/makersclaw/blocks/record-grid\";   // a shadcn project\n```\n\n## Props\n\n- `rows` — the records, in order. Each has a key (`rowKey`).\n- `columns` — `[{ key, width, header, cell(row, index), className?,\n  headerClassName?, label? }]`. `width` in px (default 120). `header` is\n  any node, drawn at the top of a `headerHeight` cell; `cell(row, index)`\n  any node, in a one-line cell of `rowHeight` (it clips: truncate your\n  text). `label` names the column for a screen reader when the header is\n  not words.\n- `lead` — columns before the pinned ones, the same shape: a row number,\n  a tick. They are pinned too, and a click on them is theirs (no active\n  cell).\n- `pinned` — how many of `columns` stay put beside `lead` (default 1).\n  When the grid has scrolled sideways the last pinned column casts an\n  edge.\n- `rowKey` — a key or `(row) => key` (default `\"id\"`).\n- `rowHeight` (32) · `headerHeight` (50) · `overscan` (8 rows drawn past\n  each end of the window).\n- `rowMark(row)` — `{ selected, highlighted, struck, dimmed }`: selected\n  tints the row with `accent`; highlighted draws a bar in `primary` at\n  its start (the rows a fill will work on); struck lines through the\n  last pinned column and quiets the row (a skipped row); dimmed fades the\n  unpinned cells.\n- `active` — `{ row, column }`, the cell with the outline, or null.\n- `onActiveChange(next)` — a click or a key moved it. Keep it in state.\n- `onCellClick(row, columnKey)` — a click on an unpinned or pinned\n  (not `lead`) cell: open what it shows.\n- `onOpen(row, columnKey)` — Enter on the active cell.\n- `after` — a node in a row of its own after the last row (\"+ Add rows\").\n- `empty` — what an empty grid says.\n- `label` — what a screen reader calls the grid (`\"Records\"`).\n- `className` — layout around it. Never colour.\n- `ref` — `{ scrollToRow(key), scrollToEnd(), focus() }`.\n\nKeys, with the grid focused: ↑ ↓ ← → move the active cell · Home / End\nthe row's ends (⌘ for the grid's) · Page Up / Down · Enter opens. Your\nown keys (J and K for the next answer to check) go on a parent.\n\n## Example\n\n```jsx\n\"use client\";\nimport { useState } from \"react\";\nimport { RecordGrid } from \"./blocks/record-grid\";\n\nexport function Companies({ rows, open }) {\n  const [active, setActive] = useState(null);\n  return (\n    <div className=\"h-full min-h-0\">\n      <RecordGrid\n        label=\"Companies\"\n        rows={rows}\n        lead={[{ key: \"n\", width: 44, header: \"#\", cell: (r, i) => i + 1 }]}\n        columns={[\n          { key: \"name\", width: 180, header: <b>Company</b>, cell: (r) => <span className=\"truncate\">{r.name}</span> },\n          { key: \"headcount\", width: 120, header: <b>Headcount</b>, cell: (r) => r.headcount },\n        ]}\n        active={active}\n        onActiveChange={setActive}\n        onCellClick={(r, key) => open(r, key)}\n        onOpen={(r, key) => open(r, key)}\n        rowMark={(r) => ({ selected: active?.row === r.id })}\n      />\n    </div>\n  );\n}\n```\n\n## What it will not do\n\n- Edit a cell, sort, filter or page: the rows come in as you want them\n  shown, and your cells' buttons do the work.\n- Rows of their own heights: one height keeps 2,000 rows smooth.\n- Draw a phone layout: below 768px draw your own cards, or let it scroll\n  sideways inside its box.\n"
+    }
+  ],
+  "categories": [
+    "grid",
+    "table",
+    "records",
+    "virtual",
+    "pinned column",
+    "header",
+    "dense",
+    "keyboard",
+    "rows",
+    "review",
+    "enrichment",
+    "list"
+  ],
+  "docs": "Installed to components/makersclaw/blocks/record-grid. Import: import { RecordGrid } from \"@/components/makersclaw/blocks/record-grid\". Props and an example: components/makersclaw/blocks/record-grid/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
+  "meta": {
+    "makersclaw": {
+      "version": "0.8.1",
+      "useWhen": "A list that is read and worked rather than typed into, where each column needs its own header (an agent's column with its progress and price, a column with a menu) and each cell its own drawing: a research list being enriched, a review queue across many records, a report of a long job's rows. Not for editing cells like a sheet (spreadsheet) or a few dozen rows with sort and filters built in (data-table)."
+    }
+  }
+}

package/r/record-notes.json

@@ -5,9 +5,9 @@
   "title": "RecordNotes",
   "description": "Dated rich-text notes on one record (a deal, a contact, a company), to sit beside record-form: a composer with @mentions and Cmd/Ctrl+Enter adds a note; the notes follow newest first (or oldest), grouped by day, each with author avatar, name and relative time; your own notes edit in place and delete after a confirm. Every save is an async callback answering { ok }; a failure keeps the words and says why where it happened.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/comment-box.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.0/r/doc-editor.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/comment-box.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/doc-editor.json"
   ],
   "dependencies": [],
   "files": [
@@ -48,7 +48,7 @@
   "docs": "Installed to components/makersclaw/blocks/record-notes. Import: import { RecordNotes } from \"@/components/makersclaw/blocks/record-notes\". Props and an example: components/makersclaw/blocks/record-notes/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.0",
+      "version": "0.8.1",
       "useWhen": "A record page keeps a running log of notes: call notes on a deal, context on a contact, a history on a customer or a candidate. Not a discussion thread without edit and delete (comment-box), not one long document per record (doc-editor or doc-page), not an automatic activity feed."
     }
   }