makersclaw 0.4.0 → 0.5.1

package/r/testimonials.json

@@ -5,7 +5,7 @@
   "title": "Testimonials",
   "description": "A marketing section of customer quotes: name, role, company, face or logo, the quote, an optional star rating, a verified mark and a \"view on X\" source, and optional headline numbers (stats). Layouts: a grid of cards (plain, card or raised; hover can light one and dim the rest; a \"write a review\" tile), one large quote, a switcher of faces, and a carousel, optionally over a picture.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -45,7 +45,7 @@
   "docs": "Installed to components/makersclaw/blocks/testimonials. Import: import { Testimonials } from \"@/components/makersclaw/blocks/testimonials\". Props and an example: components/makersclaw/blocks/testimonials/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.1",
       "useWhen": "Social proof on a public page: a landing page, a pricing page, a product page, a case-study teaser. Not for reviews a signed-in user writes and manages (a record list or form), or an app's own activity feed."
     }
   }

package/r/transaction-list.json

@@ -5,7 +5,7 @@
   "title": "TransactionList",
   "description": "Money records as a plain list, in two variants: history (payments in and out, grouped by month, a received / paid / pending / failed mark and a signed amount) and invoices (number, date, a Paid / Due in N days / N days overdue badge, amount, download). Optional date-range filter, Export and per-row download. Empty, loading and error states built in.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/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/transaction-list. Import: import { TransactionList } from \"@/components/makersclaw/blocks/transaction-list\". Props and an example: components/makersclaw/blocks/transaction-list/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.1",
       "useWhen": "A billing page's invoices, an account's payment history, a wallet's recent activity: records read top to bottom, newest first. Not for records the founder sorts, filters by column or totals (data-table), or for one order (order-detail)."
     }
   }

package/r/whiteboard.json

@@ -5,8 +5,8 @@
   "title": "Whiteboard",
   "description": "A full-page freeform whiteboard on sketch-canvas: a top bar with the board's title (click to rename), the save state (Saving…, Saved, or the error with Retry), a Board / Text view switch, Export PNG and an optional Share button; under it the Miro-style canvas (tool rail, floating toolbar, zoom, undo). An empty board offers starter templates — blank, a grid of titled areas, a 2×2 matrix — and the Text view lists every word on the board for a screen reader or an agent. With onCreateTask, a selected note or text becomes a task from the top bar (\"Create task\", editable title; several notes make one task each), and a small badge marks it on the board from then on. The sketch is plain JSON; saves are async callbacks answering { ok }.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.4.0/r/sketch-canvas.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.5.1/r/sketch-canvas.json"
   ],
   "dependencies": [],
   "files": [
@@ -59,7 +59,7 @@
   "docs": "Installed to components/makersclaw/blocks/whiteboard. Import: import { Whiteboard, WHITEBOARD_TEMPLATES, gridSketch, matrixSketch } from \"@/components/makersclaw/blocks/whiteboard\". Props and an example: components/makersclaw/blocks/whiteboard/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.4.0",
+      "version": "0.5.1",
       "useWhen": "A screen is one board to think on: a team whiteboard, a planning or prioritisation board, a place to sketch an idea and keep it with a record. Not for marking up a screenshot (annotate), sketching a UI to build (sketch-to-app), a structured board of cards and connectors (flow-canvas), or a kanban (board)."
     }
   }

package/registry/blocks/approval-request/README.md

@@ -44,7 +44,8 @@ and pass its fields in.
 - `decidedBy` · `decidedAt` · `decisionNote` — for a request decided
   before: who, when, and the reason, shown under the outcome.
 - `kind` — a small badge beside the title ("Per seat", "Refund").
-- `requestedAt` — an ISO date or a `Date`.
+- `requestedAt` — an ISO time, a `Date`, or a day (`"2026-09-28"`, a
+  `date` column), which reads as that day wherever the viewer is.
 - `justification` — the requester's reason, as a paragraph.
 - `reasonRequired` — default `true`: Reject opens a reason field and
   sends only when it is filled. `false`: Reject sends at once.

package/registry/blocks/approval-request/approval-request.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useId, useState } from "react";
-import { Avatar, Badge, Button, Empty, Field, Icon, Notice, Separator, Skeleton, Textarea, cx } from "../../ui";
+import { Avatar, Badge, Button, Empty, Field, Icon, Notice, Separator, Skeleton, Textarea, cx, toLocalDate } from "../../ui";
 
 // ApprovalRequest — one request waiting on a decision: what is asked for
 // (label/value facts), who asked and when, why, and Approve / Reject. The
@@ -15,10 +15,12 @@ const STATUS = {
   rejected: { tone: "danger", label: "Rejected" },
 };
 
+// A day alone ("2026-09-28", a `date` column) reads as that day wherever
+// the viewer is: toLocalDate makes it local midnight, never UTC's.
 function defaultFormat(value) {
   if (!value) return "";
-  const d = value instanceof Date ? value : new Date(value);
-  if (Number.isNaN(d.getTime())) return String(value);
+  const d = toLocalDate(value);
+  if (!d) return String(value);
   return new Intl.DateTimeFormat(undefined, { dateStyle: "long" }).format(d);
 }
 

package/registry/blocks/calendar-view/README.md

@@ -54,6 +54,11 @@ times; dropping a timed block on the all-day strip saves `start: null`;
 dropping on the tray saves both as `null`). A new task from a click is
 `draftTask(title, ctx, { due })` or `{ start, due }`.
 
+A task with `locked: true` stays where it is: no drag, resize, arrow
+keys, Delete or done tick for it, and it still opens (`onOpen`). For
+what the app shows but did not make — events mirrored from the person's
+calendar — beside what it may move.
+
 ## Props
 
 - `tasks` — the tasks. Pass `useFixture(rows, SAMPLE).rows` and the
@@ -64,6 +69,9 @@ dropping on the tray saves both as `null`). A new task from a click is
   `{ ok: false, error }` (a throw counts as failed). In a Makersclaw app,
   loop over `changeWrites(change)` (task-model README, "A change").
   Without it the calendar only shows: no drag, no quick-add, no checks.
+- `canCreate` — `false` keeps every change to the tasks there are and
+  takes away every way to add one: a click or a drag across an empty
+  day or hour, C, the Add buttons (default `true`; with `onChange`).
 - `onOpen(task)` — clicking an item (or Enter on it) opens your `Sheet`.
 - `mode` · `defaultMode` (`"month"`) · `onModeChange(mode)` — month ·
   week · day · agenda. `modes` — which ones the switcher offers (default

package/registry/blocks/calendar-view/agenda.jsx

@@ -28,7 +28,7 @@ export function AgendaView({ days, events, api }) {
         title="Nothing scheduled in these days"
         body="Tasks with a date show up here, day by day. Give one a date, or add a new one."
         action={
-          api.editable ? (
+          api.creatable ? (
             <Button variant="primary" size="sm" icon="plus" onClick={() => api.startDraft({ day: days[0], allDay: true })}>
               {api.addLabel}
             </Button>
@@ -81,14 +81,14 @@ export function AgendaDay({ day, events, api, standalone = false }) {
         {!items.length && !drafting ? (
           <li className="flex min-h-11 items-center justify-between gap-2 px-2 text-sm text-muted-foreground">
             <span>{today ? "Nothing scheduled today" : "Nothing scheduled"}</span>
-            {api.editable ? (
+            {api.creatable ? (
               <Button size="sm" variant="quiet" icon="plus" onClick={() => api.startDraft({ day, allDay: true })}>
                 {api.addLabel}
               </Button>
             ) : null}
           </li>
         ) : null}
-        {items.length > 0 && standalone && api.editable && !drafting ? (
+        {items.length > 0 && standalone && api.creatable && !drafting ? (
           <li className="pt-1">
             <Button size="sm" variant="quiet" icon="plus" align="start" onClick={() => api.startDraft({ day, allDay: true })}>
               {api.addLabel}
@@ -101,8 +101,9 @@ export function AgendaDay({ day, events, api, standalone = false }) {
 }
 
 function AgendaRow({ event, day, api }) {
-  const { ctx, locale, editable } = api;
+  const { ctx, locale } = api;
   const task = event.task;
+  const editable = api.canEdit(task);
   const done = isDone(task, ctx);
   const title = task.title || "Untitled";
   const paint = paintOf(task, ctx, api.colorBy);

package/registry/blocks/calendar-view/calendar.jsx

@@ -61,6 +61,15 @@ import { isTyping } from "./paint";
 // (task-model's change shapes); the calendar shows each change at once
 // and takes it back, with a notice, when the save fails.
 //
+// Editing is per item, not all or nothing: `canCreate={false}` keeps the
+// dragging and takes away every way to add (a click or a drag on an empty
+// day or hour, C, the Add buttons), and a task with `locked: true` stays
+// where it is (no drag, resize, keys, delete or done) but still opens.
+// Until 0.5.0 an onChange that let items move also let a click create
+// one, and moved every item: an app that shows events it did not make (a
+// mirror of the person's calendar) beside proposals it may move could not
+// have one without the other (inbox-to-calendar 0.3.0).
+//
 // The available-time layer (closed hours muted, open slots as boxes you
 // can pick) is what booking-page builds on: `availability`, `slots` or
 // `getSlots`, `renderSlot`, `onSlotClick`. README.md lists every prop.
@@ -113,6 +122,7 @@ export function CalendarView({
   now: nowProp,
   locale,
   onChange,
+  canCreate = true,
   onOpen,
   mode: modeProp,
   defaultMode = "month",
@@ -152,6 +162,8 @@ export function CalendarView({
     [statuses, people, projects, fields, today, weekStartsOn, weekend, holidays],
   );
   const editable = typeof onChange === "function";
+  const creatable = editable && canCreate !== false;
+  const canEdit = (task) => editable && !task?.locked;
   const { tasks: all, commit, error, clearError } = useTaskChanges(tasks, onChange);
   const now = useNow(nowProp);
 
@@ -194,7 +206,7 @@ export function CalendarView({
   // ---- saving ----------------------------------------------------------
 
   function update(task, patch, words) {
-    if (!patch) return Promise.resolve({ ok: false });
+    if (!patch || !canEdit(task)) return Promise.resolve({ ok: false });
     return commit({ type: "update", id: task.id, patch }, { label: quote(task) }).then((r) => {
       if (r.ok !== false && words) say(words);
       return r;
@@ -202,13 +214,14 @@ export function CalendarView({
   }
 
   function remove(task) {
+    if (!canEdit(task)) return Promise.resolve({ ok: false });
     return commit(deleteChange(all, [task.id]), { label: quote(task), undo: `Deleted ${quote(task)}` });
   }
 
   function saveDraft(title) {
     const d = draft;
     setDraft(null);
-    if (!d || !editable) return undefined;
+    if (!d || !creatable) return undefined;
     const patch = d.allDay ? { due: d.day } : { start: withTime(d.day, d.from), due: withTime(d.day, d.to) };
     const task = draftTask(title, ctx, patch);
     return commit({ type: "create", task }, { label: quote(task) }).then((r) => {
@@ -301,7 +314,7 @@ export function CalendarView({
   }
 
   function addNew() {
-    if (!editable) return;
+    if (!creatable) return;
     const inView = mode === "month" ? ctx.today.slice(0, 7) === anchor.slice(0, 7) : range.days.includes(ctx.today);
     const day = inView ? ctx.today : mode === "month" ? startOfMonth(anchor) : range.days[0];
     if (mode === "week" || mode === "day") {
@@ -322,7 +335,7 @@ export function CalendarView({
     if (k === "t") goToday();
     else if (k === "j" || k === "n") go(1);
     else if (k === "k" || k === "p") go(-1);
-    else if (k === "c" && editable) addNew();
+    else if (k === "c" && creatable) addNew();
     else if (byKey[k] && modes.includes(byKey[k])) setMode(byKey[k]);
     else return;
     e.preventDefault();
@@ -357,7 +370,7 @@ export function CalendarView({
     const task = a.task;
     const grabbed = grab.current;
     grab.current = null;
-    if (!task) return;
+    if (!task || !canEdit(task)) return;
     const name = quote(task);
     const on = (day) => formatDay(day, ctx.today, { locale });
     if (a.kind === "resize-y") {
@@ -431,6 +444,8 @@ export function CalendarView({
   const api = {
     ctx,
     editable,
+    creatable,
+    canEdit,
     locale,
     colorBy,
     addLabel,
@@ -439,7 +454,7 @@ export function CalendarView({
     open: onOpen ?? null,
     openDay,
     draft,
-    startDraft: (d) => editable && setDraft(d),
+    startDraft: (d) => creatable && setDraft(d),
     cancelDraft: () => setDraft(null),
     saveDraft,
     commit,
@@ -456,7 +471,7 @@ export function CalendarView({
 
   const title = titleFor(mode, range, anchor, { today: ctx.today, locale });
   const trayShown = tray && (sidePanel ? trayOpen : traySheet);
-  const empty = editable && !loading && all.length === 0;
+  const empty = creatable && !loading && all.length === 0;
 
   let body;
   if (loading) body = <CalendarSkeleton />;
@@ -543,7 +558,7 @@ export function CalendarView({
                   {unscheduled.length ? `Unscheduled · ${unscheduled.length}` : "Unscheduled"}
                 </Button>
               ) : null}
-              {editable ? (
+              {creatable ? (
                 <Button size="sm" variant="primary" icon="plus" onClick={addNew} title={`${addLabel} (C)`}>
                   {addLabel}
                 </Button>

package/registry/blocks/calendar-view/demo.jsx

@@ -56,6 +56,8 @@ const TEAM_TASKS = [
   { id: "c16", title: "Choose the analytics events", status: "done", assignees: ["sam"], due: "2026-09-18", project: "site" },
   { id: "c17", title: "Brief the paid social agency", status: "done", assignees: ["maya"], start: "2026-09-17T15:00", due: "2026-09-17T16:00", project: "q4" },
   { id: "c18", title: "Accessibility pass on the new nav", status: "todo", assignees: ["priya"], due: "2026-09-29", project: "site" },
+  // Mirrored from someone's calendar: shown, opened, never moved here.
+  { id: "c19", title: "Investor call (from your calendar)", status: "todo", assignees: ["maya"], start: "2026-09-24T14:00", due: "2026-09-24T15:00", project: "team", locked: true },
   { id: "c19", title: "Draft the customer story", status: "todo", assignees: [], project: "q4", estimate: 3 },
   { id: "c20", title: "Refresh the pitch deck", status: "todo", assignees: ["maya"], project: "team", estimate: 2 },
   { id: "c21", title: "Shortlist offsite venues", status: "todo", assignees: ["priya"], project: "team" },

package/registry/blocks/calendar-view/month.jsx

@@ -75,7 +75,7 @@ function WeekRow({ week, month, events, api }) {
 }
 
 function DayCell({ day, inMonth, api, reserve, hidden, dayItems, overflow }) {
-  const { ctx, editable, locale } = api;
+  const { ctx, creatable, locale } = api;
   const today = day === ctx.today;
   const label = dayName(day, locale);
   const drop = useDropTarget(`cell:${day}`, { kind: "cell", day, label });
@@ -84,7 +84,7 @@ function DayCell({ day, inMonth, api, reserve, hidden, dayItems, overflow }) {
   const onBackground = (e) => {
     // Only the cell's own empty space: not its buttons, not the "more"
     // list (a popover inside the cell, whose clicks bubble here).
-    if (!editable || e.target.dataset?.calBg === undefined) return;
+    if (!creatable || e.target.dataset?.calBg === undefined) return;
     api.startDraft({ day, allDay: true });
   };
   return (
@@ -96,13 +96,13 @@ function DayCell({ day, inMonth, api, reserve, hidden, dayItems, overflow }) {
         "group/cell relative flex min-h-32 min-w-0 flex-col border-e border-border p-1 transition-colors duration-150 last:border-e-0",
         !inMonth && "bg-muted/40",
         inMonth && isWeekend(day, ctx.weekend) && "bg-muted/20",
-        editable && "cursor-default",
+        creatable && "cursor-default",
         drop.isOver && "bg-accent",
       )}
     >
       <div className="flex h-9 items-center justify-between gap-1">
         <DayNumber day={day} today={today} muted={!inMonth} label={firstOfMonth ? formatDate(day, { month: "short", day: "numeric" }, { locale }) : null} api={api} count={dayItems.length} />
-        {editable ? (
+        {creatable ? (
           <IconButton
             size="sm"
             icon="plus"
@@ -189,8 +189,9 @@ function MoreItems({ day, label, items, count, api }) {
 
 function MonthItem({ item, week, api, cellWidth }) {
   const { event, col, span, lane, clippedStart, clippedEnd } = item;
-  const { ctx, editable } = api;
+  const { ctx } = api;
   const task = event.task;
+  const editable = api.canEdit(task);
   const done = isDone(task, ctx);
   const paint = paintOf(task, ctx, api.colorBy);
   const title = task.title || "Untitled";

package/registry/blocks/calendar-view/time-grid.jsx

@@ -185,7 +185,7 @@ function StripCell({ day, api }) {
     <div
       ref={drop.setNodeRef}
       onClick={(e) => {
-        if (api.editable && e.target === e.currentTarget) api.startDraft({ day, allDay: true });
+        if (api.creatable && e.target === e.currentTarget) api.startDraft({ day, allDay: true });
       }}
       className={cx("border-s border-border transition-colors duration-150 first:border-s-0", drop.isOver && "bg-accent")}
     />
@@ -194,8 +194,9 @@ function StripCell({ day, api }) {
 
 function StripItem({ item, days, api, cellWidth }) {
   const { event, col, span, lane, clippedStart, clippedEnd } = item;
-  const { ctx, editable } = api;
+  const { ctx } = api;
   const task = event.task;
+  const editable = api.canEdit(task);
   const done = isDone(task, ctx);
   const paint = paintOf(task, ctx, api.colorBy);
   const title = task.title || "Untitled";
@@ -267,7 +268,7 @@ function StripItem({ item, days, api, cellWidth }) {
 // ---- one day's column of hours ------------------------------------------
 
 function DayColumn({ day, index, days, events, api, hourHeight, colWidth, closed, slots, renderSlot, onSlotClick, selectedSlot, slotLabel, nowMin, weekend }) {
-  const { editable, locale } = api;
+  const { creatable, locale } = api;
   const ppm = hourHeight / 60;
   const ref = useRef(null);
   const label = formatDate(day, { weekday: "long", month: "long", day: "numeric" }, { locale });
@@ -298,7 +299,7 @@ function DayColumn({ day, index, days, events, api, hourHeight, colWidth, closed
       )}
       onPointerDown={(e) => {
         lastPointer.current = e.pointerType;
-        if (!editable || e.pointerType !== "mouse" || e.button !== 0 || !onBg(e)) return;
+        if (!creatable || e.pointerType !== "mouse" || e.button !== 0 || !onBg(e)) return;
         const m = snapMinutes(minuteAt(e.clientY) - 7, 15);
         setMaking({ a: m, b: m + 15 });
         e.currentTarget.setPointerCapture?.(e.pointerId);
@@ -309,7 +310,7 @@ function DayColumn({ day, index, days, events, api, hourHeight, colWidth, closed
         if (making) {
           const b = snapMinutes(m, 15);
           setMaking((x) => (x && (b !== x.b ? { ...x, b: Math.max(b, x.a + 15) } : x)));
-        } else if (editable && onBg(e)) {
+        } else if (creatable && onBg(e)) {
           const h = Math.floor(m / 30) * 30;
           if (h !== hover) setHover(h);
         } else if (hover !== null) setHover(null);
@@ -329,7 +330,7 @@ function DayColumn({ day, index, days, events, api, hourHeight, colWidth, closed
       }}
       onClick={(e) => {
         // A tap on a touch screen: an hour from the half hour tapped.
-        if (!editable || lastPointer.current === "mouse" || !onBg(e)) return;
+        if (!creatable || lastPointer.current === "mouse" || !onBg(e)) return;
         const from = Math.floor(minuteAt(e.clientY) / 30) * 30;
         api.startDraft({ day, from, to: Math.min(DAY_MINUTES, from + api.defaultDuration) });
       }}
@@ -420,8 +421,9 @@ function Slot({ slot, ppm, renderSlot, onSlotClick, selected, label = "Open", lo
 }
 
 function EventBlock({ event, pos, ppm, api, index, days, colWidth }) {
-  const { ctx, editable, locale } = api;
+  const { ctx, locale } = api;
   const task = event.task;
+  const editable = api.canEdit(task);
   const done = isDone(task, ctx);
   const paint = paintOf(task, ctx, api.colorBy);
   const title = task.title || "Untitled";

package/registry/blocks/calendar-view/tray.jsx

@@ -53,7 +53,8 @@ export function UnscheduledTray({ tasks, api, mode = "panel", className }) {
 }
 
 function TrayItem({ task, api }) {
-  const d = useDraggableTask(`tray:${task.id}`, { kind: "tray", task }, { disabled: !api.editable });
+  const movable = api.canEdit(task);
+  const d = useDraggableTask(`tray:${task.id}`, { kind: "tray", task }, { disabled: !movable });
   const keys = withKeys(d.handle, (e) => e.key === "Enter");
   return (
     <li ref={d.setNodeRef} data-cal-id={task.id}>
@@ -62,8 +63,8 @@ function TrayItem({ task, api }) {
         ctx={api.ctx}
         onOpen={api.open ?? undefined}
         dragging={d.isDragging}
-        dragProps={api.editable ? keys : undefined}
-        className={cx("min-h-9", api.editable && "cursor-grab active:cursor-grabbing")}
+        dragProps={movable ? keys : undefined}
+        className={cx("min-h-9", movable && "cursor-grab active:cursor-grabbing")}
       />
     </li>
   );
@@ -73,7 +74,7 @@ function SheetItem({ task, api }) {
   return (
     <li className="group/row flex min-h-11 items-center gap-2">
       <TaskChip task={task} ctx={api.ctx} onOpen={api.open ?? undefined} className="min-h-9 flex-1" />
-      {api.editable ? (
+      {api.canEdit(task) ? (
         <DueLabel
           value={null}
           ctx={api.ctx}

package/registry/blocks/chart/README.md

@@ -24,8 +24,11 @@ and load the rows in the server surface (README §4). Put a chart in a
 
 Rows, as `loadRows` returns them. One key holds the x (a month, a stage,
 a week) and each series is another key holding a number, in the order the
-x should read — sort in `loadRows`. A value that is missing or not a number
-is a gap in a line and nothing in a bar or an area.
+x should read — sort in `loadRows`. A value that is missing (`null`,
+`undefined`, `""`) or not a number is a gap, never a zero: a line, an area
+and a sparkline break there (a value alone between two gaps is a dot), a
+bar or a slice is not drawn, a heatmap cell is blank, and the tooltip and
+the table say —. A real zero is `0`.
 
 ```js
 [{ month: "Jan", newBiz: 24600, expansion: 8100 }, { month: "Feb", newBiz: 26900, expansion: 8800 }]
@@ -117,7 +120,8 @@ instead: `"success"`, `"warning"`, `"danger"`, `"info"`, `"primary"`,
 - `data` — one row per slice.
 - `name` — the key holding a slice's name, default `"name"`.
 - `value` — the key holding its number, default `"value"`. Zero and
-  negative values draw nothing.
+  negative values draw nothing; a missing one draws nothing and reads —
+  in the legend and the table.
 - `donut` — open the middle. It shows the total, and the picked slice's
   value and share while one is picked. Default `false`.
 - `centerLabel` — a donut's middle instead of the total: a string, or
@@ -304,7 +308,8 @@ export default function SalesCharts({ months, stages, visits, error }) {
 - Sort, group or sum: the rows come shaped. Totals by month or by stage
   are a query (a view, or `loadRows` over one).
 - A time scale: x is a list of labels, evenly spaced, in row order. Give
-  every period a row (a month with no sales is a row with 0).
+  every period a row (a month with no sales is a row with 0; a day with
+  no data yet, a row with null).
 - Two value axes, scatter, radar, maps, zoom or brushing.
 - A colour outside the theme: series take the chart tones and the theme's
   status tones only. Colour by value is the heatmap's alone, on one chart

package/registry/blocks/chart/cartesian.jsx

@@ -12,6 +12,7 @@ import {
   idFrom,
   niceTicks,
   num,
+  runs,
   textWidth,
   tone,
   toneOf,
@@ -265,6 +266,7 @@ function Cartesian({
     const parts = live.map((s) => {
       const vals = rows.map((r) => num(r?.[s.key]));
       const idx = vals.reduce((best, v, i) => (v != null && (best < 0 || v > vals[best]) ? i : best), -1);
+      if (idx < 0) return `${s.label}: no data`;
       const first = vals.find((v) => v != null);
       const last = [...vals].reverse().find((v) => v != null);
       return `${s.label}: ${kind === "bar" ? "" : `from ${fmt(first)} to ${fmt(last)}, `}highest ${fmt(vals[idx])} at ${xNames[idx]}`;
@@ -276,7 +278,14 @@ function Cartesian({
     active == null
       ? []
       : live.map((s) => ({ key: s.key, label: s.label, tone: s.tone, dashed: s.dashed, value: fmt(num(rows[active]?.[s.key])) }));
-  const total = active == null ? null : live.reduce((sum, s) => sum + (num(rows[active]?.[s.key]) ?? 0), 0);
+  // The stack's total: what there is, or none (—) when every value is missing.
+  const total =
+    active == null
+      ? null
+      : live.reduce((sum, s) => {
+          const v = num(rows[active]?.[s.key]);
+          return v == null ? sum : (sum ?? 0) + v;
+        }, null);
   const announce = active == null ? "" : `${xNames[active]}: ${tipRows.map((r) => `${r.label} ${r.value}`).join(", ")}`;
 
   const legendNode = showLegend ? (
@@ -439,17 +448,20 @@ function Cartesian({
                 const s = live[j];
                 // A dashed series is a line only: a comparison has no fill.
                 if (s.dashed && !stack) return null;
-                const top = [];
-                const base = [];
-                spans[j].forEach((p, i) => {
-                  top.push([cPos(i), vPos(p ? p[1] : stack ? 0 : 0)]);
-                  base.push([cPos(i), vPos(p ? p[0] : 0)]);
-                });
-                const back = curvePath([...base].reverse(), curve).replace(/^M/, "L");
+                // One band per run of values: an area breaks where a value
+                // is missing, as its line does — never down to zero.
+                const d = runs(spans[j].map((p, i) => (p ? { x: cPos(i), top: vPos(p[1]), base: vPos(p[0]) } : null)))
+                  .filter((run) => run.length > 1)
+                  .map((run) => {
+                    const back = curvePath(run.map((q) => [q.x, q.base]).reverse(), curve).replace(/^M/, "L");
+                    return `${curvePath(run.map((q) => [q.x, q.top]), curve)}${back}Z`;
+                  })
+                  .join("");
+                if (!d) return null;
                 return (
                   <path
                     key={s.key}
-                    d={`${curvePath(top, curve)}${back}Z`}
+                    d={d}
                     className={tone(s.tone, "fill")}
                     fillOpacity={stack ? 0.4 : s.muted ? 0.2 : 0.45}
                     mask={stack ? undefined : `url(#${fade})`}
@@ -459,18 +471,9 @@ function Cartesian({
             : null}
           {order.map((j) => {
             const s = live[j];
-            // A line breaks where a value is missing.
-            const segs = [];
-            let cur = [];
-            spans[j].forEach((p, i) => {
-              if (!p && kind === "line") {
-                if (cur.length) segs.push(cur);
-                cur = [];
-                return;
-              }
-              cur.push([cPos(i), vPos(p ? p[1] : 0)]);
-            });
-            if (cur.length) segs.push(cur);
+            // A line (and an area's edge) breaks where a value is missing;
+            // a value alone between two gaps is a dot, so it still shows.
+            const segs = runs(spans[j].map((p, i) => (p ? [cPos(i), vPos(p[1])] : null)));
             return (
               <g
                 key={s.key}
@@ -481,9 +484,13 @@ function Cartesian({
                 strokeLinejoin="round"
                 strokeLinecap={s.dashed ? "butt" : "round"}
               >
-                {segs.map((seg, k) => (
-                  <path key={k} d={curvePath(seg, curve)} />
-                ))}
+                {segs.map((seg, k) =>
+                  seg.length > 1 ? (
+                    <path key={k} d={curvePath(seg, curve)} />
+                  ) : dots ? null : (
+                    <circle key={k} cx={seg[0][0]} cy={seg[0][1]} r={3} className={cx(tone(s.tone, "fill"), "stroke-card")} strokeWidth={1.5} strokeDasharray="none" />
+                  ),
+                )}
                 {dots
                   ? spans[j].map((p, i) =>
                       p ? <circle key={i} cx={cPos(i)} cy={vPos(p[1])} r={3} className={cx(tone(s.tone, "fill"), "stroke-card")} strokeWidth={1.5} strokeDasharray="none" /> : null,

package/registry/blocks/chart/core.jsx

@@ -48,11 +48,32 @@ export function defaultFormat(v) {
   return Math.abs(v) >= 10000 ? COMPACT.format(v) : PLAIN.format(v);
 }
 
+/** A value as a number, or null when there is none to draw: null,
+ *  undefined, an empty or blank string, or anything not a finite number.
+ *  null is a gap, never a zero — Number(null) and Number("") are 0, and
+ *  until 0.5.1 a day with no data plotted as a real zero. */
 export function num(v) {
+  if (v == null || (typeof v === "string" && !v.trim())) return null;
   const n = typeof v === "number" ? v : Number(v);
   return Number.isFinite(n) ? n : null;
 }
 
+/** Points split into runs wherever one is missing (null): a line or an
+ *  area breaks at a gap. [p | null, …] → [[p, …], …] */
+export function runs(points) {
+  const out = [];
+  let cur = [];
+  for (const p of points) {
+    if (p) cur.push(p);
+    else if (cur.length) {
+      out.push(cur);
+      cur = [];
+    }
+  }
+  if (cur.length) out.push(cur);
+  return out;
+}
+
 /** Round numbers that cover [min, max] in about `count` steps. */
 export function niceTicks(min, max, count = 5) {
   if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];

package/registry/blocks/chart/pie.jsx

@@ -61,18 +61,23 @@ export function PieChart({
   const rows = Array.isArray(data) ? data : [];
   const slices = useMemo(
     () =>
-      rows.map((r, i) => ({
-        row: r,
-        key: String(r?.[name] ?? i),
-        label: formatName(r?.[name], r) || humanize(r?.[name]),
-        tone: toneOf(r, i),
-        value: Math.max(0, num(r?.[value]) ?? 0),
-      })),
+      rows.map((r, i) => {
+        const v = num(r?.[value]);
+        return {
+          row: r,
+          key: String(r?.[name] ?? i),
+          label: formatName(r?.[name], r) || humanize(r?.[name]),
+          tone: toneOf(r, i),
+          // A missing value is no slice and reads —, never 0 or 0%.
+          value: v == null ? null : Math.max(0, v),
+        };
+      }),
     [rows, name, value], // eslint-disable-line react-hooks/exhaustive-deps
   );
   const live = slices.filter((s) => !hidden.has(s.key) && s.value > 0);
   const total = live.reduce((sum, s) => sum + s.value, 0);
-  const pct = (v) => (total ? `${Math.round((v / total) * 1000) / 10}%` : "0%");
+  const pct = (v) => (v == null ? "—" : total ? `${Math.round((v / total) * 1000) / 10}%` : "0%");
+  const fmt = (v) => (v == null ? "—" : format(v));
 
   const size = Math.max(0, Math.min(width, height));
   const c = { x: width / 2, y: height / 2 };
@@ -123,7 +128,7 @@ export function PieChart({
         key: s.key,
         label: s.label,
         tone: s.tone,
-        value: hidden.has(s.key) ? null : legendValues === "value" ? format(s.value) : legendValues === "percent" ? pct(s.value) : null,
+        value: hidden.has(s.key) ? null : legendValues === "value" ? fmt(s.value) : legendValues === "percent" ? pct(s.value) : null,
       }))}
       hidden={hidden}
       onToggle={(key) => {
@@ -238,7 +243,7 @@ export function PieChart({
       <DataTable
         caption={label}
         head={["", "Value", "Share"]}
-        body={slices.map((s) => [s.label, format(s.value), hidden.has(s.key) ? "hidden" : pct(s.value)])}
+        body={slices.map((s) => [s.label, fmt(s.value), hidden.has(s.key) ? "hidden" : pct(s.value)])}
       />
     </div>
   );