makersclaw 0.3.2 → 0.5.1

package/registry/blocks/job-panel/job-panel.jsx

@@ -8,7 +8,8 @@ import { Button, Card, Empty, Field, Icon, Skeleton, Textarea, cx } from "../../
 // keeps the four rules a hand-drawn panel breaks: it is not there when
 // nothing runs, it shows each step's label (the founder's phrase, never
 // the tool's name), the agent's text is its account and not the
-// deliverable (the rows are), and Stop / Close are always one press away.
+// deliverable (the rows are), and Stop / Close are always one press away
+// (Answer in Stop's place while the agent waits on the founder).
 //
 //   const job = useJob();
 //   <Button onClick={() => job.start("Draft a launch plan for Rowhouse")}>Generate a launch plan</Button>
@@ -24,10 +25,21 @@ import { Button, Card, Empty, Field, Icon, Skeleton, Textarea, cx } from "../../
 //             options={<Field …><Select …/></Field>}
 //             onGenerate={(prompt) => job.start(`Make a product photo: ${prompt}. Size ${size}.`)}
 //             results={photos.map((p) => <PhotoCard key={p.id} photo={p} />)} />
+//
+// Since 0.4.0 a job is a request, and its conversation lives in the
+// desk's agent column: the agent's questions and the founder's yes are
+// there, not here. So the panel reads two more states off the job, when
+// the job has them: needsYou (the agent waits on the founder — the
+// heading says so and Answer, in Stop's place, opens the question in the
+// column) and queued (one job per list runs at a time — the heading names
+// the job it waits behind). A 0.3.x job object has neither and draws
+// exactly as it always did.
 
 function StepMark({ status }) {
   if (status === "done") return <Icon name="check" size={14} className="shrink-0 text-success" />;
   if (status === "failed") return <Icon name="warning" size={14} className="shrink-0 text-destructive" />;
+  if (status === "needs") return <Icon name="circle-help" size={14} className="shrink-0 text-warning" />;
+  if (status === "queued") return <Icon name="clock" size={14} className="shrink-0 text-muted-foreground" />;
   return <span aria-hidden="true" className="mx-[3px] size-2 shrink-0 animate-pulse rounded-full bg-primary" />;
 }
 
@@ -36,11 +48,17 @@ export function JobPanel({ variant = "panel", ...props }) {
   return <Panel {...props} />;
 }
 
+// Waiting on the founder or on another job is still a live job: not over,
+// only paused. useJob counts both as running; an object of its own shape
+// that sets only the flag gets the same panel.
+const isLive = (job) => Boolean(job?.running || job?.needsYou || job?.queued);
+
 function Panel({
   job,
   title = "Working on it",
   doneTitle = "Done",
   failedTitle = "It stopped",
+  needsTitle = "Needs your answer",
   onRetry,
   autoClose = 6000,
   maxSteps = 6,
@@ -48,7 +66,9 @@ function Panel({
   className,
 }) {
   const textRef = useRef(null);
-  const running = Boolean(job?.running);
+  const needsYou = Boolean(job?.needsYou);
+  const queued = !needsYou && Boolean(job?.queued);
+  const running = isLive(job);
   const failed = !running && Boolean(job?.error);
   const done = !running && !failed && Boolean(job?.finishedAt);
 
@@ -67,23 +87,43 @@ function Panel({
 
   if (!job || !(running || failed || done)) return null;
 
-  const steps = job.steps ?? [];
+  // What the job waits on, if anything: its mark replaces the pulse.
+  const waiting = needsYou ? "needs" : queued ? "queued" : null;
+  const heading = needsYou
+    ? needsTitle
+    : queued
+      ? `Queued · after ${job.queuedAfter?.after_title ?? "the job before it"}`
+      : running
+        ? title
+        : failed
+          ? failedTitle
+          : doneTitle;
+  // A queued request's one step is its line, and its line is this
+  // heading again: say it once.
+  const steps = (job.steps ?? []).filter((step) => !(queued && step.label === heading));
   const hidden = Math.max(0, steps.length - maxSteps);
   const visible = steps.slice(hidden);
-  const heading = running ? title : failed ? failedTitle : doneTitle;
+  // The question is in the desk's agent column; open() takes the founder
+  // there. Without it there is nowhere to point, and Stop stays.
+  const answer = needsYou && typeof job.open === "function";
 
   return (
     <section
       aria-label={heading}
-      className={cx("rounded-lg border bg-card p-4 text-card-foreground", failed ? "border-destructive/50" : "border-border", className)}
+      className={cx(
+        "rounded-lg border bg-card p-4 text-card-foreground",
+        failed ? "border-destructive/50" : needsYou ? "border-warning/50" : "border-border",
+        className,
+      )}
     >
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <p aria-live="polite" className="flex items-center gap-2 text-sm font-semibold">
-            {running ? <StepMark status="running" /> : <StepMark status={failed ? "failed" : "done"} />}
+            <StepMark status={waiting ?? (running ? "running" : failed ? "failed" : "done")} />
             <span className="min-w-0">{heading}</span>
           </p>
           {failed ? <p className="mt-1 text-sm text-muted-foreground">{job.error}</p> : null}
+          {needsYou ? <p className="mt-1 text-sm text-muted-foreground">The question is in the agent column.</p> : null}
         </div>
         <div className="flex shrink-0 gap-2">
           {failed && onRetry ? (
@@ -91,7 +131,11 @@ function Panel({
               Try again
             </Button>
           ) : null}
-          {running ? (
+          {answer ? (
+            <Button size="sm" variant="secondary" onClick={() => job.open()}>
+              Answer
+            </Button>
+          ) : running ? (
             <Button size="sm" variant="quiet" onClick={() => job.cancel?.()}>
               Stop
             </Button>
@@ -107,12 +151,14 @@ function Panel({
           {hidden > 0 ? <li className="text-xs text-muted-foreground">{hidden} earlier {hidden === 1 ? "step" : "steps"}</li> : null}
           {visible.map((step, i) => (
             <li key={`${hidden + i}-${step.name}`} className="flex items-center gap-2">
-              <StepMark status={step.status} />
+              <StepMark status={waiting && step.status === "running" ? waiting : step.status} />
               <span className={step.status === "running" ? "text-foreground" : "text-muted-foreground"}>{step.label ?? "Working"}</span>
             </li>
           ))}
         </ol>
       ) : null}
+      {/* The agent's account, on the 0.3.x path. A request's text is empty
+          (its account is in the column), so the area is not drawn. */}
       {showText && job.text ? (
         <div
           ref={textRef}
@@ -159,6 +205,7 @@ function Generator({
   title = "Working on it",
   doneTitle = "Done",
   failedTitle = "It stopped",
+  needsTitle = "Needs your answer",
   onRetry,
   autoClose = 6000,
   maxSteps = 6,
@@ -175,7 +222,7 @@ function Generator({
     if (controlled === undefined) setOwn(v);
     onPromptChange?.(v);
   };
-  const running = Boolean(job?.running);
+  const running = isLive(job);
   const canGenerate = !disabled && !running && !starting && (canGenerateEmpty || value.trim().length > 0);
 
   async function generate(text = value) {
@@ -192,8 +239,9 @@ function Generator({
     setStarting(false);
     if (r && r.ok === false && !r.aborted) setError(r.error ?? "It did not start");
   }
-  // useJob's start resolves when the job ends; a failure it reports is
-  // already the panel's error, so the field says only what the panel does not.
+  // useJob's start resolves when the ask is taken (on a 0.3.x claw, when
+  // the job ends); a failure it reports is already the panel's error, so
+  // the field says only what the panel does not.
   const fieldError = error && !job?.error ? error : null;
 
   const cols = { 1: "grid-cols-1", 2: "grid-cols-1 sm:grid-cols-2", 3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", 4: "grid-cols-2 lg:grid-cols-4" };
@@ -236,6 +284,7 @@ function Generator({
           title={title}
           doneTitle={doneTitle}
           failedTitle={failedTitle}
+          needsTitle={needsTitle}
           onRetry={onRetry ?? (lastPrompt.current || canGenerateEmpty ? () => generate(lastPrompt.current) : undefined)}
           autoClose={autoClose}
           maxSteps={maxSteps}

package/registry/blocks/mind-map/README.md

@@ -14,6 +14,11 @@ reader, and a quick way to jump to a topic.
 It is built on `flow-canvas` (which draws it, pans and zooms): this block
 owns the tree, the layout and the keys.
 
+A map opens fitted to its view, but never smaller than its words can be
+read: 79%, where its smallest words (14px) draw at the kit's smallest
+text size (11px). A map too big for that — most maps on a phone — opens
+at 79% centred on its centre topic; ⇧1 still fits the whole of it.
+
 ```jsx
 import { MindMap } from "../components/blocks/mind-map";   // a Makersclaw app ("./blocks/mind-map" from components/)
 import { MindMap } from "@/components/makersclaw/blocks/mind-map";   // a shadcn project
@@ -64,7 +69,9 @@ string, or nothing (a fresh map). The component runs it on `value`.
 
 - `value` — the map, controlled. A new `value` that is not what the map
   last sent through `onChange` replaces it (loading another record); that
-  replacement can be undone. Pass back exactly what `onChange` gave you.
+  replacement can be undone, and when it is another map (a new centre, or
+  other main branches) the view fits it, as it fits a first one. Pass
+  back exactly what `onChange` gave you.
 - `defaultValue` — the starting map, uncontrolled. With neither, a centre
   topic called "Central topic" and the first-run card.
 - `onChange(map)` — the whole tree after a change settles (debounced by
@@ -114,7 +121,7 @@ With a topic selected (click one, or press an arrow):
 | ⌘Z / ⇧⌘Z | undo / redo |
 | Home | the centre |
 | Esc | clear the selection |
-| ⇧1 | fit the map to the screen |
+| ⇧1 | fit the whole map to the screen, however small |
 | ? | the shortcuts sheet |
 
 While typing a topic: **Enter** finishes it and starts the next one (on

package/registry/blocks/mind-map/mind-map.jsx

@@ -33,6 +33,7 @@ import {
   mindMapToText,
   moveTopic,
   normalizeMap,
+  openingView,
   outdentTopic,
   outlineToTopics,
   parentOf,
@@ -49,14 +50,20 @@ const EXTRA_COLORS = ["warning", "success", "info", "destructive"];
 const isMac = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || "");
 
 // Measures words in the map's own font (a canvas's measureText), so a
-// topic's box fits its words exactly. Until the page is there (the
-// server), a guess. Measured again once mounted (the font of the element
-// the map sits in, not the body's) and when web fonts finish loading.
+// topic's box fits its words exactly. Until the map is mounted, a guess —
+// on the server AND in the browser's first render, which must lay the
+// map out exactly as the server did: measured there, the topics landed
+// elsewhere, the canvas's placeholder listed them in another order, and
+// React threw a hydration error on every load of a saved map
+// (makersclaw-store BLOCKS.md, mind-maps 0.1.0). Measured once mounted
+// (the font of the element the map sits in, not the body's) and again
+// when web fonts finish loading.
 function useMeasure(hostRef) {
   const [tick, setTick] = useState(0);
-  const r = useRef({ ctx: null, family: null, cache: new Map() });
+  const r = useRef({ ctx: null, family: null, cache: new Map(), mounted: false });
   useEffect(() => {
     let live = true;
+    r.current.mounted = true;
     const again = () => {
       if (!live) return;
       r.current.cache.clear();
@@ -73,8 +80,8 @@ function useMeasure(hostRef) {
   }, []);
   return useCallback(
     (text, style) => {
-      if (typeof document === "undefined") return estimateText(text, style);
       const c = r.current;
+      if (typeof document === "undefined" || !c.mounted) return estimateText(text, style);
       if (!c.ctx) c.ctx = document.createElement("canvas").getContext("2d");
       if (!c.ctx) return estimateText(text, style);
       if (!c.family) {
@@ -111,6 +118,15 @@ function useCoarsePointer() {
   return coarse;
 }
 
+/** The same map, as far as the view goes: the same centre topic and the
+ *  same main branches (in any order). */
+export function sameBranches(a, b) {
+  if (!a || !b || a.id !== b.id) return false;
+  const ids = new Set((a.children ?? []).map((c) => c.id));
+  const next = b.children ?? [];
+  return next.length === ids.size && next.every((c) => ids.has(c.id));
+}
+
 async function settle(fn, ...args) {
   try {
     const res = await fn(...args);
@@ -217,24 +233,47 @@ export function MindMap({
   };
 
   // Controlled: a `value` that is not our own echo replaces the map (and
-  // can be undone).
+  // can be undone). One that is another map — a record loaded, the
+  // agent's first map over the starter — is fitted to the view like a
+  // first one: until 0.5.0 it stayed at the old map's zoom and place, and
+  // mind-maps remounted the block to get a fit. The same map back from a
+  // save (its branches unchanged) keeps the view where it is.
   const lastProp = useRef(value);
+  const [refit, setRefit] = useState(0);
   useEffect(() => {
     if (value === undefined || value === lastProp.current) return;
     lastProp.current = value;
     if (value === lastEmitted.current) return;
     const next = normalizeMap(value);
-    setHist({ past: [...histRef.current.past, treeRef.current].slice(-HISTORY), future: [] });
+    const before = treeRef.current;
+    setHist({ past: [...histRef.current.past, before].slice(-HISTORY), future: [] });
     setTree(next);
     if (selectedRef.current && !findTopic(next, selectedRef.current)) select(null);
     if (editingRef.current) setEditing(null);
+    if (!sameBranches(before, next)) setRefit((n) => n + 1);
   }, [value, select]);
 
   // ── what the canvas draws ────────────────────────────────────────────
   const board = useMemo(() => mindMapToBoard(tree, { measure, colors }), [tree, measure, colors]);
   const sizes = useMemo(() => new Map(board.nodes.map((n) => [n.id, n])), [board]);
+  const boardRef = useRef(board);
+  boardRef.current = board;
+
+  // Open a map fitted to the view, but never smaller than its words can be
+  // read: a map too big for that opens at READABLE_ZOOM on its centre
+  // topic (openingView). ⇧1 and "Fit to screen" still fit the whole map.
+  const fitOpen = useCallback(
+    (opts) => {
+      const api = canvas.current;
+      if (!api) return;
+      const pane = boxRef.current?.querySelector(".react-flow") ?? boxRef.current;
+      api.fitView({ ...opts, ...openingView(boardRef.current.nodes, { width: pane?.clientWidth, height: pane?.clientHeight, rootId: treeRef.current.id }) });
+    },
+    [canvas],
+  );
 
-  // Fit the map in view once its words are measured. The canvas fits only
+  // Fit the map in view once its words are measured, and again when a
+  // `value` puts another map in its place (above). The canvas fits only
   // on its own first mount, before the topics are sized in the map's font
   // (and again when web fonts land), so without this the map opened off to
   // the top-left of an empty-looking canvas (2026-09-24).
@@ -243,10 +282,10 @@ export function MindMap({
     // `value` in an effect of its own, and fits against what it holds.
     let raf = 0;
     const t = setTimeout(() => {
-      raf = requestAnimationFrame(() => (raf = requestAnimationFrame(() => canvas.current?.fitView({ duration: 0 }))));
+      raf = requestAnimationFrame(() => (raf = requestAnimationFrame(() => fitOpen({ duration: 0 }))));
     }, 300);
     return () => (clearTimeout(t), cancelAnimationFrame(raf));
-  }, [measure]);
+  }, [measure, refit, fitOpen]);
 
   // The canvas pans with a plain drag (its hand tool): a mind map has
   // nothing to lasso.
@@ -447,7 +486,7 @@ export function MindMap({
     finishEdit();
     commit(normalizeMap(map));
     select(null);
-    setTimeout(() => canvas.current?.fitView(), 80);
+    setTimeout(() => fitOpen(), 80);
   };
 
   // ── announcements ────────────────────────────────────────────────────
@@ -901,7 +940,7 @@ export function MindMap({
               emptyState={false}
               templates={[]}
               describeNode={describeTopic}
-              className="[&_.react-flow__node]:transition-transform [&_.react-flow__node]:duration-200 [&_.react-flow__node]:ease-out motion-reduce:[&_.react-flow__node]:transition-none"
+              className={String.raw`[&_.react-flow\_\_node]:transition-transform [&_.react-flow\_\_node]:duration-200 [&_.react-flow\_\_node]:ease-out motion-reduce:[&_.react-flow\_\_node]:transition-none`}
             />
           </MindContext.Provider>
         </div>

package/registry/blocks/mind-map/tree.js

@@ -377,6 +377,39 @@ export const LEVELS = [
   { font: 14, weight: 400, line: 20, padX: 6, padY: 5, min: 44, max: 240, gap: 28 },
 ];
 export const levelOf = (depth) => LEVELS[Math.min(depth, LEVELS.length - 1)];
+
+/** The smallest zoom a map opens at: its smallest words (14px, a main
+ *  branch's and a subtopic's) drawn no smaller than the kit's smallest
+ *  text, text-2xs (11px). 11 / 14 ≈ 0.79. */
+export const READABLE_ZOOM = 11 / Math.min(...LEVELS.map((l) => l.font));
+
+/**
+ * How a map opens in a view `width` × `height` px, as options for the
+ * canvas's fitView: the whole map when it fits at READABLE_ZOOM or more
+ * (→ {}), else READABLE_ZOOM centred on the centre topic `rootId`. Until
+ * 0.5.1 a big map opened fitted whole whatever the zoom: 31% on a phone,
+ * its words unreadable. `nodes` are the board's ({ position, width,
+ * height }); `padding` is the fit's share of the view (the canvas's 0.2),
+ * split as React Flow splits it.
+ */
+export function openingView(nodes, { width, height, rootId, padding = 0.2 } = {}) {
+  if (!(width > 0 && height > 0) || !nodes?.length || rootId == null) return {};
+  let x1 = Infinity;
+  let y1 = Infinity;
+  let x2 = -Infinity;
+  let y2 = -Infinity;
+  for (const n of nodes) {
+    const x = n.position?.x ?? 0;
+    const y = n.position?.y ?? 0;
+    x1 = Math.min(x1, x);
+    y1 = Math.min(y1, y);
+    x2 = Math.max(x2, x + (n.width ?? 0));
+    y2 = Math.max(y2, y + (n.height ?? 0));
+  }
+  const room = (v) => v - 2 * Math.floor((v - v / (1 + padding)) / 2);
+  const fit = Math.min(room(width) / Math.max(1, x2 - x1), room(height) / Math.max(1, y2 - y1));
+  return fit >= READABLE_ZOOM ? {} : { nodes: [{ id: rootId }], minZoom: READABLE_ZOOM, maxZoom: READABLE_ZOOM };
+}
 const SIBLING_GAP = [0, 20, 8];
 const siblingGap = (depth) => SIBLING_GAP[Math.min(depth, SIBLING_GAP.length - 1)];
 /** Room left under a subtopic for its coloured line. */

package/registry/blocks/org-chart/org-chart.jsx

@@ -485,7 +485,7 @@ export function OrgChart({
             emptyState={false}
             templates={[]}
             describeNode={describePerson}
-            className="[&_.react-flow__node]:transition-transform [&_.react-flow__node]:duration-200 [&_.react-flow__node]:ease-out motion-reduce:[&_.react-flow__node]:transition-none"
+            className={String.raw`[&_.react-flow\_\_node]:transition-transform [&_.react-flow\_\_node]:duration-200 [&_.react-flow\_\_node]:ease-out motion-reduce:[&_.react-flow\_\_node]:transition-none`}
           />
         </OrgContext.Provider>
 

package/registry/blocks/pdf-viewer/notes.jsx

@@ -5,7 +5,7 @@
 // viewer, a sheet on a narrow one (pdf-viewer.jsx decides). A click on an
 // entry takes the pages to it; its note is edited in place.
 import { useEffect, useRef, useState } from "react";
-import { Button, Icon, Menu, Textarea, cx } from "../../ui";
+import { Button, Icon, Menu, Textarea, cx, toLocalDate } from "../../ui";
 import { sortHighlights } from "./helpers";
 
 /** The colours a highlight can take, as token names (never a colour). */
@@ -188,8 +188,9 @@ function NoteItem({ h, active, editing, readOnly, onJump, onEdit, onSaveNote, on
   );
 }
 
+// A day alone ("2026-09-28") is that day in the reader's zone, not UTC's.
 function when(v) {
-  const d = new Date(v);
-  if (Number.isNaN(d.getTime())) return String(v);
+  const d = toLocalDate(v);
+  if (!d) return String(v);
   return new Intl.DateTimeFormat(undefined, { day: "numeric", month: "short" }).format(d);
 }

package/registry/blocks/record-notes/README.md

@@ -31,7 +31,7 @@ A note in `notes`:
   id: "n-204",
   author: { id: "u-lena", name: "Lena Fischer", src: "https://…/lena.jpg" },
   body: [ /* the doc onAdd gave you (BlockNote JSON) */ ],   // or a plain string
-  createdAt: "2026-09-23T09:12:00Z",   // ISO string, Date or ms
+  createdAt: "2026-09-23T09:12:00Z",   // ISO string, Date, ms, or a day ("2026-09-23": that day, never UTC's)
   updatedAt: null,                     // set → "(edited)"
 }
 ```

package/registry/blocks/record-notes/record-notes.jsx

@@ -14,7 +14,7 @@
 // browser: the server draws the notes as one list, and the day headings
 // appear once mounted — never a mismatch between the two renders.
 import { useEffect, useRef, useState } from "react";
-import { Avatar, Badge, Card, Confirm, Menu, cx } from "../../ui";
+import { Avatar, Badge, Card, Confirm, Menu, cx, toLocalDate } from "../../ui";
 import { CommentBody, CommentComposer, CommentTime } from "../comment-box";
 import { docToText } from "../doc-editor";
 
@@ -22,10 +22,9 @@ const nameOf = (author) => (typeof author === "string" ? author : author?.name)
 const srcOf = (author) => (typeof author === "object" && author ? author.src : undefined);
 const idOf = (author) => (typeof author === "object" && author ? author.id : undefined);
 
-const toMs = (v) => {
-  if (v === undefined || v === null || v === "") return NaN;
-  return (v instanceof Date ? v : new Date(v)).getTime();
-};
+// A note dated with a day alone ("2026-09-28", a `date` column) files
+// under that day wherever the reader is: local midnight, never UTC's.
+const toMs = (v) => toLocalDate(v)?.getTime() ?? NaN;
 
 function useMounted() {
   const [on, setOn] = useState(false);

package/registry/blocks/sidebar/sidebar-panel.jsx

@@ -69,9 +69,9 @@ export function PanelBody({ panel, onChoose, sheet = false }) {
     );
   } else if (panel.loading) {
     body = (
-      <ul aria-busy="true" aria-label={`Loading ${panel.title ?? "list"}`} className="grid">
+      <ul aria-busy="true" aria-label={`Loading ${panel.title ?? "list"}`} className="grid grid-cols-1">
         {[0, 1, 2, 3, 4].map((i) => (
-          <li key={i} className="grid gap-2 border-b border-border px-4 py-3">
+          <li key={i} className="grid grid-cols-1 gap-2 border-b border-border px-4 py-3">
             <Skeleton className="w-1/2" />
             <Skeleton className="w-3/4" />
             <Skeleton className="w-full" />
@@ -90,7 +90,7 @@ export function PanelBody({ panel, onChoose, sheet = false }) {
     );
   } else {
     body = (
-      <ul aria-label={panel.title ?? "List"} className="grid">
+      <ul aria-label={panel.title ?? "List"} className="grid grid-cols-1">
         {shown.map((it, i) => (
           <li key={it.key ?? it.href ?? `${it.title}-${i}`} className="border-b border-border">
             <Item
@@ -120,7 +120,7 @@ export function PanelBody({ panel, onChoose, sheet = false }) {
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       {panel.title || panel.actions || searchOn ? (
-        <div className="grid shrink-0 gap-3 border-b border-border p-3">
+        <div className="grid grid-cols-1 shrink-0 gap-3 border-b border-border p-3">
           {panel.title || panel.actions ? (
             <div className="flex min-h-9 items-center gap-2">
               {panel.title ? <h2 className="min-w-0 flex-1 truncate text-base font-semibold">{panel.title}</h2> : null}

package/registry/blocks/sidebar/sidebar.jsx

@@ -354,7 +354,7 @@ export function Sidebar({
           <Icon name={item.icon} className="shrink-0" />
         ) : null}
         {item.description ? (
-          <span className="grid min-w-0 flex-1 text-left leading-tight">
+          <span className="grid grid-cols-1 min-w-0 flex-1 text-left leading-tight">
             <span className="truncate">{item.label}</span>
             <span className="truncate text-xs text-muted-foreground">{item.description}</span>
           </span>
@@ -420,7 +420,7 @@ export function Sidebar({
             opts.sheet ? "[&>summary]:px-4" : "[&>summary]:min-h-9 [&>summary]:px-3 [&>summary]:py-1",
           )}
         >
-          <ul className="ml-5 grid gap-0.5 border-l border-border pl-2">
+          <ul className="ml-5 grid grid-cols-1 gap-0.5 border-l border-border pl-2">
             {item.items.map((child) => (
               <li key={keyOf(child)}>{leaf(child, opts)}</li>
             ))}
@@ -469,7 +469,7 @@ export function Sidebar({
   function replaced(item, { sheet, where }) {
     const headingId = `${uid}-${where}-drill`;
     return (
-      <div className="grid gap-0.5">
+      <div className="grid grid-cols-1 gap-0.5">
         <Button id={`${uid}-${where}-back`} variant="nav" size={sheet ? "md" : "sm"} onClick={() => closeDrill(where)}>
           <Icon name="arrow-left" className="shrink-0" />
           <span className="min-w-0 flex-1 truncate text-left">Back</span>
@@ -477,7 +477,7 @@ export function Sidebar({
         <h2 id={headingId} className="flex h-8 items-center px-3 text-xs font-medium text-muted-foreground">
           {item.label}
         </h2>
-        <ul aria-labelledby={headingId} className="grid gap-0.5">
+        <ul aria-labelledby={headingId} className="grid grid-cols-1 gap-0.5">
           {item.items.map((child) => (
             <li key={keyOf(child)}>{leaf(child, { sheet })}</li>
           ))}
@@ -513,7 +513,7 @@ export function Sidebar({
     // children stand in for the list.
     const drilledHere = drillItem && !icons && (drillMode === "replace" || (sheet && drillMode === "panel"));
     return (
-      <nav aria-label={label} className={cx("grid gap-3", icons ? "justify-items-center py-2" : "px-2 py-2")}>
+      <nav aria-label={label} className={cx("grid grid-cols-1 gap-3", icons ? "justify-items-center py-2" : "px-2 py-2")}>
         {primaryAction && !drilledHere ? primary({ icons, sheet }) : null}
         {drilledHere
           ? replaced(drillItem, { sheet, where })
@@ -524,7 +524,7 @@ export function Sidebar({
                 <ul
                   aria-labelledby={group.label && !icons && !group.collapsible ? headingId : undefined}
                   aria-label={group.label && !icons && group.collapsible ? group.label : undefined}
-                  className={cx("grid gap-0.5", icons && "justify-items-center")}
+                  className={cx("grid grid-cols-1 gap-0.5", icons && "justify-items-center")}
                 >
                   {group.items.map((item) => (
                     <li key={keyOf(item)}>{icons ? iconItem(item) : wideItem(item, { sheet, where })}</li>
@@ -546,7 +546,7 @@ export function Sidebar({
                 );
               }
               return (
-                <div key={group.key ?? group.label ?? gi} className="grid gap-0.5">
+                <div key={group.key ?? group.label ?? gi} className="grid grid-cols-1 gap-0.5">
                   {group.label && !icons ? (
                     <h2 id={headingId} className="flex h-8 items-center px-3 text-xs font-medium text-muted-foreground">
                       {group.label}
@@ -565,7 +565,7 @@ export function Sidebar({
 
   function brand({ icons, side = "bottom" }) {
     const words = (
-      <span className="grid min-w-0 flex-1 text-left leading-tight">
+      <span className="grid grid-cols-1 min-w-0 flex-1 text-left leading-tight">
         <span className="truncate text-sm font-semibold">{title}</span>
         {subtitle ? <span className="truncate text-xs font-normal text-muted-foreground">{subtitle}</span> : null}
       </span>
@@ -667,7 +667,7 @@ export function Sidebar({
     if (!user) return null;
     const face = <Avatar name={user.name} src={user.src} size="sm" />;
     const words = (
-      <span className="grid min-w-0 flex-1 text-left leading-tight">
+      <span className="grid grid-cols-1 min-w-0 flex-1 text-left leading-tight">
         <span className="truncate text-sm font-medium">{user.name}</span>
         {user.email ? <span className="truncate text-xs font-normal text-muted-foreground">{user.email}</span> : null}
       </span>
@@ -711,7 +711,7 @@ export function Sidebar({
     ) : null;
     if (!user && !plus && !footSwitch) return null;
     return (
-      <div className="grid gap-1">
+      <div className="grid grid-cols-1 gap-1">
         {footSwitch ? brand({ icons, side: "top" }) : null}
         {user || plus ? (
           <div className={cx("flex items-center gap-1", icons && "flex-col")}>
@@ -745,7 +745,7 @@ export function Sidebar({
             <IconButton icon="x" label={`Close ${drillItem.label}`} size="sm" onClick={() => closeDrill("r")} />
           </div>
           <ScrollArea label={drillItem.label} className="min-h-0 flex-1" fade>
-            <ul aria-labelledby={headingId} className="grid gap-0.5 p-2">
+            <ul aria-labelledby={headingId} className="grid grid-cols-1 gap-0.5 p-2">
               {drillItem.items.map((child, i) => (
                 <li key={keyOf(child)}>{leaf(child, { sheet: false, id: i === 0 ? `${uid}-drill-first` : undefined })}</li>
               ))}
@@ -813,7 +813,7 @@ export function Sidebar({
         >
           {ctx.mobileOpen ? (
             sheetPanel && panel ? (
-              <div className="-mx-2 -my-2 grid gap-2">
+              <div className="-mx-2 -my-2 grid grid-cols-1 gap-2">
                 <div className="px-2 pt-2">
                   <Button variant="nav" size="md" onClick={() => setSheetPanel(false)}>
                     <Icon name="arrow-left" className="shrink-0" />
@@ -823,7 +823,7 @@ export function Sidebar({
                 {panelIsNode ? panel : <PanelBody panel={panel} sheet onChoose={() => ctx.setMobileOpen(false)} />}
               </div>
             ) : (
-              <div className="-mx-2 -my-2 grid gap-2">
+              <div className="-mx-2 -my-2 grid grid-cols-1 gap-2">
                 {headerActions ? <div className="flex flex-wrap items-center gap-1 px-2">{headerActions}</div> : null}
                 {searchOpts ? <div className="px-2">{searchRow({ icons: false, sheet: true })}</div> : null}
                 {switcher?.length ? (

package/registry/blocks/signature-pad/signature.js

@@ -60,9 +60,16 @@ export function signatureRecord({ png, name, mode, signedAt }) {
   return { png, name: String(name ?? "").trim(), mode, signedAt: signedAt ?? new Date().toISOString() };
 }
 
+// A day alone ("2026-09-28", from a `date` column) is that day's local
+// midnight: new Date() would read it as UTC's, the day before west of
+// Greenwich. Written out here, not the kit's toLocalDate: these helpers
+// import nothing, so they run anywhere.
+const DAY = /^(\d{4})-(\d{2})-(\d{2})$/;
+
 /** "Sep 23, 2026, 2:04 PM" in the reader's own locale. */
 export function formatSignedAt(iso, locale) {
-  const d = new Date(iso);
+  const day = typeof iso === "string" ? DAY.exec(iso) : null;
+  const d = day ? new Date(+day[1], +day[2] - 1, +day[3]) : new Date(iso);
   if (Number.isNaN(d.getTime())) return "";
   return d.toLocaleString(locale, { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit" });
 }

package/registry/blocks/spreadsheet/cells.jsx

@@ -5,7 +5,7 @@
 // type's `editor` name. A custom type (the `types` prop) may bring its own
 // `render(value, column, ctx)` and `Editor` component.
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Avatar, AvatarGroup, Badge, Calendar, Command, Icon, Rating, cx, panelClass, usePopoverPosition } from "../../ui";
+import { Avatar, AvatarGroup, Badge, Calendar, Command, Icon, Rating, cx, panelClass, todayString, usePopoverPosition } from "../../ui";
 import { optionOf, optionValue } from "./types";
 
 const asList = (v) => (Array.isArray(v) ? v : v == null || v === "" ? [] : [v]);
@@ -303,7 +303,7 @@ function DateEditor({ value, column, type, ctx, initial, today, onCommit, onCanc
             <button
               type="button"
               className="rounded-sm px-1.5 py-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
-              onClick={() => onCommit(today ?? new Date().toISOString().slice(0, 10), null)}
+              onClick={() => onCommit(today ?? todayString(), null)}
             >
               Today
             </button>

package/src/shadcn.mjs

@@ -104,7 +104,7 @@ function coreItem() {
     title: "Makersclaw kit",
     description:
       "The kit every Makersclaw block is built from — Button, Field, Select, Sheet, Tabs, Menu, Notice, Icon, Depiction — " +
-      "and the parts bound to data (RecordSwitcher, useFixture). Native elements under the project's own theme tokens.",
+      "and the parts bound to data (RecordSwitcher, useFixture, LiveEmpty). Native elements under the project's own theme tokens.",
     files,
     cssVars: CSS_VARS,
     css: CSS,