makersclaw 0.4.0 → 0.5.2

package/registry/blocks/chart/sparkline.jsx

@@ -2,7 +2,7 @@
 
 import { useId } from "react";
 import { cx } from "../../ui";
-import { defaultFormat, idFrom, num, tone, useReveal, useWidth } from "./core";
+import { defaultFormat, idFrom, num, runs, tone, useReveal, useWidth } from "./core";
 
 // Sparkline — a trend with no axes, the size of a line of text: beside a
 // KPI, in a table cell. Its scale is its own low to high (not zero), so
@@ -26,14 +26,20 @@ export function Sparkline({
   const [boxRef, width] = useWidth();
   const shown = useReveal(width > 0);
 
-  const vals = (Array.isArray(data) ? data : []).map((d) => num(typeof d === "object" && d !== null ? d[value] : d)).filter((v) => v != null);
+  // Every entry keeps its place along the width; a missing one is a gap —
+  // the line breaks there — never a zero. The scale is the values there are.
+  const raw = (Array.isArray(data) ? data : []).map((d) => num(typeof d === "object" && d !== null ? d[value] : d));
+  const vals = raw.filter((v) => v != null);
   const n = vals.length;
   const lo = n ? Math.min(...vals) : 0;
   const hi = n ? Math.max(...vals) : 0;
   const pad = 3;
-  const px = (i) => pad + (n === 1 ? (width - pad * 2) / 2 : (i * (width - pad * 2)) / (n - 1));
+  const px = (i) => pad + (raw.length === 1 ? (width - pad * 2) / 2 : (i * (width - pad * 2)) / (raw.length - 1));
   const py = (v) => pad + (hi === lo ? (height - pad * 2) / 2 : (1 - (v - lo) / (hi - lo)) * (height - pad * 2));
-  const line = vals.map((v, i) => `${i ? "L" : "M"}${f(px(i))},${f(py(v))}`).join("");
+  const segs = runs(raw.map((v, i) => (v == null ? null : [px(i), py(v)])));
+  const path = (seg) => seg.map(([x, y], i) => `${i ? "L" : "M"}${f(x)},${f(y)}`).join("");
+  const lastSeg = segs[segs.length - 1];
+  const last = lastSeg?.[lastSeg.length - 1];
   const words = n
     ? `${label}: from ${format(vals[0])} to ${format(vals[n - 1])}, low ${format(lo)}, high ${format(hi)}.`
     : `${label}: no data yet.`;
@@ -68,16 +74,28 @@ export function Sparkline({
                 </mask>
               </defs>
               <g clipPath={`url(#${uid}-clip)`}>
-                {area && n > 1 ? (
-                  <path
-                    d={`${line}L${f(px(n - 1))},${height}L${f(px(0))},${height}Z`}
-                    className={tone(t, "fill")}
-                    fillOpacity={0.3}
-                    mask={`url(#${uid}-fade)`}
-                  />
-                ) : null}
-                <path d={line} fill="none" className={tone(t, "stroke")} strokeWidth={1.75} strokeLinejoin="round" strokeLinecap="round" />
-                {dot ? <circle cx={px(n - 1)} cy={py(vals[n - 1])} r={2.5} className={tone(t, "fill")} /> : null}
+                {area
+                  ? segs.map((seg, k) =>
+                      seg.length > 1 ? (
+                        <path
+                          key={k}
+                          d={`${path(seg)}L${f(seg[seg.length - 1][0])},${height}L${f(seg[0][0])},${height}Z`}
+                          className={tone(t, "fill")}
+                          fillOpacity={0.3}
+                          mask={`url(#${uid}-fade)`}
+                        />
+                      ) : null,
+                    )
+                  : null}
+                {segs.map((seg, k) =>
+                  seg.length > 1 ? (
+                    <path key={k} d={path(seg)} fill="none" className={tone(t, "stroke")} strokeWidth={1.75} strokeLinejoin="round" strokeLinecap="round" />
+                  ) : dot && seg === lastSeg ? null : (
+                    // A value alone between two gaps: a dot the line's width.
+                    <circle key={k} cx={seg[0][0]} cy={seg[0][1]} r={1.75} className={tone(t, "fill")} />
+                  ),
+                )}
+                {dot ? <circle cx={last[0]} cy={last[1]} r={2.5} className={tone(t, "fill")} /> : null}
               </g>
             </>
           )}

package/registry/blocks/chat/message.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useId, useRef, useState } from "react";
-import { Avatar, Button, Collapsible, IconButton, Icon, Menu, Spinner, Textarea, Toggle, Tooltip, cx } from "../../ui";
+import { Avatar, Button, Collapsible, IconButton, Icon, Menu, Spinner, Textarea, Toggle, Tooltip, cx, toLocalDate } from "../../ui";
 import { Attachment } from "./attachment";
 import { ChatText } from "./text";
 
@@ -25,10 +25,10 @@ export function textOf(message) {
     .join("");
 }
 
+/** A Date, an ISO time or a day alone ("2026-09-28": that day's local
+ *  midnight, never UTC's) → a Date; null when it is none. */
 export function toDate(value) {
-  if (value == null || value === "") return null;
-  const d = value instanceof Date ? value : new Date(value);
-  return Number.isNaN(d.getTime()) ? null : d;
+  return toLocalDate(value);
 }
 
 export function formatTime(date) {

package/registry/blocks/comment-box/README.md

@@ -30,7 +30,7 @@ A comment in `comments`:
   id: "c-81",
   author: { id: "u-lena", name: "Lena Fischer", src: "https://…/lena.jpg" },   // or just "Lena Fischer"
   body: [ /* the doc onPost gave you */ ],   // 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)
   edited: false,                              // true adds "(edited)"
 }
 ```

package/registry/blocks/comment-box/comment-time.jsx

@@ -8,7 +8,7 @@
 // tick (not a timer per comment) keeps every label current. The full date
 // is always in the title.
 import { useEffect, useState } from "react";
-import { cx } from "../../ui";
+import { cx, toLocalDate } from "../../ui";
 
 const listeners = new Set();
 let timer = null;
@@ -34,11 +34,9 @@ export function useNow() {
   return now;
 }
 
-export const toDate = (v) => {
-  if (v === undefined || v === null || v === "") return null;
-  const d = v instanceof Date ? v : new Date(v);
-  return Number.isNaN(d.getTime()) ? null : d;
-};
+/** A Date, an ISO time or a day alone ("2026-09-28", a `date` column: that
+ *  day's local midnight, never UTC's) → a Date; null when it is none. */
+export const toDate = (v) => toLocalDate(v);
 
 const fmt = (opts) => new Intl.DateTimeFormat(undefined, opts);
 const TIME = { hour: "numeric", minute: "2-digit" };

package/registry/blocks/data-table/README.md

@@ -70,6 +70,10 @@ one can carry its own (report-table's `kind`).
 - `label` — what the table is called to a screen reader, default `"Table"`.
 - `noun` — what a row is ("invoice"): used in "1–10 of 60 invoices", the
   facet counts and the announcements. Default `"row"`.
+- `nounPlural` — the plural, when the regular ending is wrong for it:
+  `noun="person" nounPlural="people"`. Default: `noun` with the regular
+  English ending — "invoice" → "invoices", "company" → "companies",
+  "address" → "addresses", "batch" → "batches", "analysis" → "analyses".
 
 Search
 

package/registry/blocks/data-table/data-table.jsx

@@ -101,7 +101,19 @@ function humanize(key) {
   return text ? text.charAt(0).toUpperCase() + text.slice(1) : "";
 }
 
-function plural(n, one, many = `${one}s`) {
+/** A noun's plural by the regular English endings: "invoice" → "invoices",
+ *  "company" → "companies", "address" → "addresses", "batch" → "batches",
+ *  "analysis" → "analyses". Anything else is the table's `nounPlural`
+ *  ("person" → "people"). Until 0.5.1 it only added "s": "11 companys". */
+export function pluralOf(noun) {
+  const s = String(noun ?? "");
+  if (/[^aeiou]y$/.test(s)) return `${s.slice(0, -1)}ies`;
+  if (/sis$/.test(s)) return `${s.slice(0, -2)}es`;
+  if (/(?:s|x|z|ch|sh)$/.test(s)) return `${s}es`;
+  return `${s}s`;
+}
+
+function plural(n, one, many = pluralOf(one)) {
   return `${n.toLocaleString()} ${n === 1 ? one : many}`;
 }
 
@@ -186,12 +198,14 @@ export function DataTable({
   emptyAction,
   emptyIcon = "inbox",
   noun = "row",
+  nounPlural,
   mobile = "scroll",
   cardTitle,
   variant = "outline",
   className,
 }) {
   const uid = useId().replace(/[^\w-]/g, "");
+  const nouns = nounPlural || pluralOf(noun);
   const all = rows ?? NONE;
   const cols = useMemo(() => (columns ?? []).map((c) => ({ ...c, key: String(c.key), header: c.header ?? humanize(c.key) })), [columns]);
   const facetList = useMemo(
@@ -261,8 +275,8 @@ export function DataTable({
   }, [current, pageCount, loading]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (!loading && narrowed) setAnnounce(total === 0 ? "No matches" : `${plural(total, noun)} match`);
-  }, [total, narrowed, loading, noun]);
+    if (!loading && narrowed) setAnnounce(total === 0 ? "No matches" : `${plural(total, noun, nouns)} match`);
+  }, [total, narrowed, loading, noun, nouns]);
 
   // ---- changes that move back to page 1 ---------------------------------
 
@@ -358,7 +372,7 @@ export function DataTable({
       return;
     }
     if (action.keepSelection !== true) setPicked([]);
-    setAnnounce(`${action.label}: done for ${plural(real.length, noun)}`);
+    setAnnounce(`${action.label}: done for ${plural(real.length, noun, nouns)}`);
   }
 
   // ---- drawing -----------------------------------------------------------
@@ -588,7 +602,7 @@ export function DataTable({
     <Empty
       icon="search"
       title="No matches"
-      body={narrowed ? "Nothing matches the search and filters." : `No ${noun}s on this page.`}
+      body={narrowed ? "Nothing matches the search and filters." : `No ${nouns} on this page.`}
       action={
         narrowed ? (
           <Button size="sm" icon="x" onClick={clearFilters}>
@@ -1137,7 +1151,7 @@ export function DataTable({
       {paginate && !body && (total > 0 || loading) ? (
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
           <p data-nums className="w-full text-sm text-muted-foreground sm:w-auto" id={`${uid}-range`}>
-            {loading ? "Loading…" : `${from.toLocaleString()}–${to.toLocaleString()} of ${plural(total, noun)}`}
+            {loading ? "Loading…" : `${from.toLocaleString()}–${to.toLocaleString()} of ${plural(total, noun, nouns)}`}
           </p>
           <Pagination
             page={pageNow}

package/registry/blocks/flow-canvas/edges.jsx

@@ -68,8 +68,10 @@ export function FlowEdge({ id, source, target, selected, data, label }) {
   const g = connectorGeometry(p1, sides.source, p2, sides.target, data?.line ?? "curved");
   const arrow = data?.arrow ?? "end";
   const editing = !readOnly && editingEdge === id;
-  const ink = selected ? "stroke-primary" : "stroke-muted-foreground [.react-flow__edge:hover_&]:stroke-foreground";
-  const fill = selected ? "fill-primary" : "fill-muted-foreground [.react-flow__edge:hover_&]:fill-foreground";
+  // `\_\_` and String.raw: an underscore in [...] is a space to Tailwind
+  // (theme.js says why).
+  const ink = selected ? "stroke-primary" : String.raw`stroke-muted-foreground [.react-flow\_\_edge:hover_&]:stroke-foreground`;
+  const fill = selected ? "fill-primary" : String.raw`fill-muted-foreground [.react-flow\_\_edge:hover_&]:fill-foreground`;
   return (
     <>
       <path d={g.d} fill="none" stroke="transparent" strokeWidth={18} className="react-flow__edge-interaction" />

package/registry/blocks/flow-canvas/theme.js

@@ -10,71 +10,82 @@
 // one thing that outranks it. Our own nodes and connectors draw with
 // token classes directly (nodes.jsx, edges.jsx), so the library's node and
 // edge colours are never seen.
+//
+// React Flow's classes are BEM, `react-flow__node`, and Tailwind reads an
+// underscore inside [...] as a space: written plainly, every rule below
+// compiled to `.react-flow node`, which matches nothing, and none of this
+// theme ever reached the page — the attribution was the library's grey box
+// with its grey text, unreadable on a dark workspace (makersclaw-store
+// BLOCKS.md, mind-maps 0.1.0). `\_` keeps an underscore, and String.raw
+// keeps the backslash in the class name, where the rule Tailwind builds
+// from this file's text expects it. Every React Flow class below is
+// written rf`…`; test/cli.test.mjs refuses a plain one in any block.
+const rf = String.raw;
 export const THEME = [
   // the canvas: the page's background with dots in the muted ink
   "[--xy-background-color:transparent]!",
   "[--xy-background-pattern-color:var(--color-muted-foreground)]!",
-  "[&_.react-flow__background]:opacity-35!",
+  rf`[&_.react-flow\_\_background]:opacity-35!`,
   // the marquee, and the box around a multi-selection
-  "[&_.react-flow__selection]:bg-primary/8!",
-  "[&_.react-flow__selection]:border!",
-  "[&_.react-flow__selection]:border-solid!",
-  "[&_.react-flow__selection]:border-primary/70!",
-  "[&_.react-flow__selection]:rounded-sm!",
-  "[&_.react-flow__nodesselection-rect]:bg-transparent!",
-  "[&_.react-flow__nodesselection-rect]:border!",
-  "[&_.react-flow__nodesselection-rect]:border-dashed!",
-  "[&_.react-flow__nodesselection-rect]:border-primary/60!",
-  "[&_.react-flow__nodesselection-rect]:rounded-sm!",
+  rf`[&_.react-flow\_\_selection]:bg-primary/8!`,
+  rf`[&_.react-flow\_\_selection]:border!`,
+  rf`[&_.react-flow\_\_selection]:border-solid!`,
+  rf`[&_.react-flow\_\_selection]:border-primary/70!`,
+  rf`[&_.react-flow\_\_selection]:rounded-sm!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:bg-transparent!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:border!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:border-dashed!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:border-primary/60!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:rounded-sm!`,
   // the line drawn while a connector is being dragged out
-  "[&_.react-flow__connection-path]:stroke-primary!",
-  "[&_.react-flow__connection-path]:[stroke-width:2]!",
+  rf`[&_.react-flow\_\_connection-path]:stroke-primary!`,
+  rf`[&_.react-flow\_\_connection-path]:[stroke-width:2]!`,
   // cursors that match the tool (flow-canvas.jsx sets data-tool on the root)
-  "[&_.react-flow__pane.selection]:cursor-default!",
-  "[&_.react-flow__node.draggable]:cursor-default!",
-  "[&_.react-flow__node.draggable.dragging]:cursor-grabbing!",
-  "data-[tool=hand]:[&_.react-flow__pane]:cursor-grab!",
-  "data-[tool=hand]:[&_.react-flow__pane.dragging]:cursor-grabbing!",
-  "data-[tool=hand]:[&_.react-flow__node]:cursor-grab!",
-  "data-[tool=place]:[&_.react-flow__pane]:cursor-crosshair!",
-  "data-[tool=text]:[&_.react-flow__pane]:cursor-text!",
-  "data-[tool=connector]:[&_.react-flow__node]:cursor-crosshair!",
+  rf`[&_.react-flow\_\_pane.selection]:cursor-default!`,
+  rf`[&_.react-flow\_\_node.draggable]:cursor-default!`,
+  rf`[&_.react-flow\_\_node.draggable.dragging]:cursor-grabbing!`,
+  rf`data-[tool=hand]:[&_.react-flow\_\_pane]:cursor-grab!`,
+  rf`data-[tool=hand]:[&_.react-flow\_\_pane.dragging]:cursor-grabbing!`,
+  rf`data-[tool=hand]:[&_.react-flow\_\_node]:cursor-grab!`,
+  rf`data-[tool=place]:[&_.react-flow\_\_pane]:cursor-crosshair!`,
+  rf`data-[tool=text]:[&_.react-flow\_\_pane]:cursor-text!`,
+  rf`data-[tool=connector]:[&_.react-flow\_\_node]:cursor-crosshair!`,
   // keyboard focus on a card: a visible ring (the library turns it off)
-  "[&_.react-flow__node:focus-visible]:outline-2!",
-  "[&_.react-flow__node:focus-visible]:outline-offset-4!",
-  "[&_.react-flow__node:focus-visible]:outline-ring!",
-  "[&_.react-flow__node:focus-visible]:[outline-style:solid]!",
+  rf`[&_.react-flow\_\_node:focus-visible]:outline-2!`,
+  rf`[&_.react-flow\_\_node:focus-visible]:outline-offset-4!`,
+  rf`[&_.react-flow\_\_node:focus-visible]:outline-ring!`,
+  rf`[&_.react-flow\_\_node:focus-visible]:[outline-style:solid]!`,
   // frames: only their title and edge take the pointer, so a double-click
   // or a marquee inside one lands on the canvas (nodes.jsx)
-  "[&_.react-flow__node-frame]:pointer-events-none!",
+  rf`[&_.react-flow\_\_node-frame]:pointer-events-none!`,
   // the resize handles on a selected card
-  "[&_.react-flow__resize-control.handle]:size-2.5!",
-  "[&_.react-flow__resize-control.handle]:rounded-xs!",
-  "[&_.react-flow__resize-control.handle]:border-primary!",
-  "[&_.react-flow__resize-control.handle]:bg-background!",
-  "[&_.react-flow__resize-control.handle]:pointer-events-auto!",
-  "[&_.react-flow__resize-control.line]:border-primary/0!",
-  "[&_.react-flow__resize-control.line]:pointer-events-auto!",
-  "[&_.react-flow__resize-control.line.left]:w-2!",
-  "[&_.react-flow__resize-control.line.right]:w-2!",
-  "[&_.react-flow__resize-control.line.top]:h-2!",
-  "[&_.react-flow__resize-control.line.bottom]:h-2!",
+  rf`[&_.react-flow\_\_resize-control.handle]:size-2.5!`,
+  rf`[&_.react-flow\_\_resize-control.handle]:rounded-xs!`,
+  rf`[&_.react-flow\_\_resize-control.handle]:border-primary!`,
+  rf`[&_.react-flow\_\_resize-control.handle]:bg-background!`,
+  rf`[&_.react-flow\_\_resize-control.handle]:pointer-events-auto!`,
+  rf`[&_.react-flow\_\_resize-control.line]:border-primary/0!`,
+  rf`[&_.react-flow\_\_resize-control.line]:pointer-events-auto!`,
+  rf`[&_.react-flow\_\_resize-control.line.left]:w-2!`,
+  rf`[&_.react-flow\_\_resize-control.line.right]:w-2!`,
+  rf`[&_.react-flow\_\_resize-control.line.top]:h-2!`,
+  rf`[&_.react-flow\_\_resize-control.line.bottom]:h-2!`,
   // the minimap: a card with the board in muted ink
   "[--xy-minimap-background-color:var(--color-card)]!",
   "[--xy-minimap-node-background-color:var(--color-muted-foreground)]!",
   "[--xy-minimap-mask-background-color:var(--color-muted)]!",
-  "[&_.react-flow__minimap]:rounded-lg!",
-  "[&_.react-flow__minimap]:border!",
-  "[&_.react-flow__minimap]:border-border!",
-  "[&_.react-flow__minimap]:shadow-md!",
-  "[&_.react-flow__minimap]:overflow-hidden!",
-  "[&_.react-flow__minimap-node]:opacity-50!",
-  "[&_.react-flow__minimap-mask]:opacity-70!",
+  rf`[&_.react-flow\_\_minimap]:rounded-lg!`,
+  rf`[&_.react-flow\_\_minimap]:border!`,
+  rf`[&_.react-flow\_\_minimap]:border-border!`,
+  rf`[&_.react-flow\_\_minimap]:shadow-md!`,
+  rf`[&_.react-flow\_\_minimap]:overflow-hidden!`,
+  rf`[&_.react-flow\_\_minimap-node]:opacity-50!`,
+  rf`[&_.react-flow\_\_minimap-mask]:opacity-70!`,
   // React Flow's credit: kept (they ask for it), in the muted ink
-  "[&_.react-flow__attribution]:bg-transparent!",
-  "[&_.react-flow__attribution_a]:text-muted-foreground!",
+  rf`[&_.react-flow\_\_attribution]:bg-transparent!`,
+  rf`[&_.react-flow\_\_attribution_a]:text-muted-foreground!`,
   // panels: ours sit in the corners with our own spacing
-  "[&_.react-flow__panel]:m-3!",
+  rf`[&_.react-flow\_\_panel]:m-3!`,
 ].join(" ");
 
 // Colour TOKENS → classes, written out whole so Tailwind generates them. A

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)"
 }
 ```