makersclaw 0.6.0 → 0.7.0

package/registry/blocks/file-upload/README.md

@@ -79,7 +79,7 @@ for a file) are exported too, for your own file rows.
 ## Example
 
 ```jsx
-// components/DealFiles.jsx — client
+// components/DealFiles.jsx — client, in a server app
 "use client";
 import { FileUpload } from "./blocks/file-upload";
 
@@ -111,6 +111,12 @@ export default function DealFiles({ deal, onSaveFiles }) {
 }
 ```
 
+A server app's only. `put` needs a route of the app's own to take the
+file (`/api/files` here), and a browser app has none: the data door
+takes no files until uploads have a home. In a browser app, leave
+`onUpload` out and use the block as a picker: read the file in the
+browser, as csv-import does.
+
 One spreadsheet to import, and a profile picture:
 
 ```jsx

package/registry/blocks/flow-canvas/README.md

@@ -364,19 +364,28 @@ one.
 ## Example
 
 ```jsx
-// components/LaunchBoard.jsx — client
+// surfaces/launch.jsx — client: one project's board
 "use client";
 import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useRow } from "../lib/data";
 import { updateRow } from "../lib/actions";
-import { FlowCanvas } from "./blocks/flow-canvas";
+import { FlowCanvas } from "../components/blocks/flow-canvas";
 
-export default function LaunchBoard({ project }) {
-  const [board, setBoard] = useState(project.board);   // jsonb, may be null
+export default function LaunchSurface() {
+  const id = useSearchParams().get("row");
+  const { row: project, loading } = useRow({ source: "projects", id });
+  if (loading || !project) return null;
+  return <LaunchBoard key={project.id} project={project} />;
+}
+
+function LaunchBoard({ project }) {
+  const [board, setBoard] = useState(project.board);   // jsonb, may be null; read once per project
   return (
     <FlowCanvas
       value={board ?? undefined}
       onChange={setBoard}
-      onSave={(b) => updateRow({ source: "public.projects", id: project.id, patch: { board: b } })}
+      onSave={(b) => updateRow({ source: "projects", id: project.id, patch: { board: b } })}
       label={`${project.name} board`}
       height="calc(100dvh - 8rem)"
     />
@@ -384,6 +393,8 @@ export default function LaunchBoard({ project }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 A card drawn with kit parts, and an agent reading the board:
 
 ```jsx

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

@@ -3,7 +3,7 @@
 // FlowCanvas — a Miro-like board on React Flow, in the workspace theme,
 // behind one set of props (README.md beside this file).
 //
-// Client only, one static bundle: the modules load with the page (the
+// Client only, one bundle: the modules load with the page (the
 // app's check refuses import()), and the board itself mounts after the
 // first effect (the mount guard). Until then — on the server and in the
 // first client paint — a box of the same size holds the board as text, so

package/registry/blocks/footer/README.md

@@ -87,7 +87,7 @@ button, named to a screen reader ("X", "LinkedIn"), opening a new tab.
 "use client";
 import { Icon } from "./ui";
 import { Footer } from "./blocks/footer";
-import { subscribe } from "../lib/actions";   // your server action
+import { insertRow } from "../lib/actions";
 
 export default function SiteFooter() {
   return (
@@ -102,7 +102,7 @@ export default function SiteFooter() {
       newsletter={{
         body: "One email a month.",
         consent: "I agree to the privacy policy.",
-        onSubscribe: async (email) => subscribe(email),
+        onSubscribe: (email) => insertRow({ source: "subscribers", values: { email } }), // { ok, id } or { ok: false, error }
       }}
       legal="© 2026 Fieldline Ltd. All rights reserved."
       legalLinks={[{ label: "Privacy", href: "/privacy" }, { label: "Terms", href: "/terms" }]}
@@ -111,6 +111,8 @@ export default function SiteFooter() {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 ## What it will not do
 
 - Change the language or currency by itself: `locales[].onChange` is

package/registry/blocks/gantt/README.md

@@ -145,15 +145,19 @@ drag saves, as `[{ id, patch }]`), `afterBlockersPatch(task, tasks)`,
 ## Example
 
 ```jsx
-// surfaces/plan.jsx — server: load, hand over
-import { loadRows } from "../lib/data";
+// surfaces/plan.jsx — client: read, hand over
+"use client";
+import { useRows } from "../lib/data";
 import Plan from "../components/Plan";
 
-export default async function PlanSurface() {
-  const { rows, error } = await loadRows({ source: "public.tasks", orderBy: "start asc" });
-  const people = await loadRows({ source: "public.people" });
-  const projects = await loadRows({ source: "public.projects" });
-  return <Plan tasks={rows} people={people.rows} projects={projects.rows} error={error} />;
+export default function PlanSurface() {
+  const tasks = useRows({ source: "tasks", orderBy: "start asc" });
+  const people = useRows({ source: "people" });
+  const projects = useRows({ source: "projects" });
+  return (
+    <Plan tasks={tasks.rows} people={people.rows} projects={projects.rows}
+      loading={tasks.loading || people.loading || projects.loading} error={tasks.error} />
+  );
 }
 ```
 
@@ -171,19 +175,19 @@ const COLUMNS = ["id", "title", "status", "assignees", "start", "due", "progress
 async function save(change) {
   for (const w of changeWrites(change, { columns: COLUMNS, keepNewIds: false })) {
     const r =
-      w.op === "insert" ? await insertRow({ source: "public.tasks", values: w.values, detail: w.values.title })
-      : w.op === "update" ? await updateRow({ source: "public.tasks", id: w.id, patch: w.patch })
-      : await deleteRow({ source: "public.tasks", id: w.id });
+      w.op === "insert" ? await insertRow({ source: "tasks", values: w.values, detail: w.values.title })
+      : w.op === "update" ? await updateRow({ source: "tasks", id: w.id, patch: w.patch })
+      : await deleteRow({ source: "tasks", id: w.id });
     if (r?.ok === false) return r;
   }
   return { ok: true };
 }
 
-export default function Plan({ tasks, people, projects, error }) {
+export default function Plan({ tasks, people, projects, loading, error }) {
   const [open, setOpen] = useState(null);
   return (
     <>
-      <Gantt tasks={tasks} people={people} projects={projects} onChange={save} onOpen={setOpen} error={error}
+      <Gantt tasks={tasks} people={people} projects={projects} onChange={save} onOpen={setOpen} loading={loading} error={error}
         starters={[{ label: "Product launch", tasks: [{ title: "Scope", days: 2 }, { title: "Build", days: 10 }, { title: "Launch", milestone: true }] }]} />
       <Sheet open={Boolean(open)} onClose={() => setOpen(null)} title={open?.title}>{/* the task's fields */}</Sheet>
     </>
@@ -191,6 +195,8 @@ export default function Plan({ tasks, people, projects, error }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 `keepNewIds: false` lets the table make a new task's id. A link made
 between two tasks created in the same change (a starter) refers to their
 client ids: keep them (`keepNewIds: true`, a text id column) when you

package/registry/blocks/job-panel/README.md

@@ -166,7 +166,7 @@ export default function PhotoStudio({ photos, reload }) {
                   options={[{ value: "square", label: "Square" }, { value: "portrait", label: "Portrait" }]} />
         </Field>
       }
-      onGenerate={(prompt) => job.start(`Make one ${size} product photo: ${prompt}. Save it to public.photos.`)}
+      onGenerate={(prompt) => job.start(`Make one ${size} product photo: ${prompt}. Save it to the photos table.`)}
       title="Making the photo"
       doneTitle="Photo saved"
       results={photos.map((p) => <Image key={p.id} src={p.url} alt={p.prompt} ratio="square" rounded="lg" />)}

package/registry/blocks/json-editor/README.md

@@ -98,24 +98,36 @@ tree on its own (`value`, `onEdit(next, { undo?, message? })`, `open`,
 ## Example
 
 ```jsx
+// surfaces/webhook.jsx — client: one integration's settings
 "use client";
 import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useRow } from "../lib/data";
+import { updateRow } from "../lib/actions";
 import { JsonEditor } from "../components/blocks/json-editor";
-import { saveIntegrationSettings } from "../lib/actions";   // your server action → { ok, error? }
 
-export function WebhookSettings({ integration }) {
-  const [settings, setSettings] = useState(integration.settings);
+export default function WebhookSurface() {
+  const id = useSearchParams().get("row");
+  const { row: integration, loading } = useRow({ source: "integrations", id });
+  if (loading || !integration) return null;
+  return <WebhookSettings key={integration.id} integration={integration} />;
+}
+
+function WebhookSettings({ integration }) {
+  const [settings, setSettings] = useState(integration.settings);   // jsonb; read once per integration
   return (
     <JsonEditor
       title="Webhook settings"
       value={settings}
       onChange={setSettings}
-      onSave={(v) => saveIntegrationSettings(integration.id, v)}
+      onSave={(v) => updateRow({ source: "integrations", id: integration.id, patch: { settings: v } })}
     />
   );
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 Inspect a payload, read-only, as text first:
 
 ```jsx

package/registry/blocks/map/README.md

@@ -170,10 +170,23 @@ map.current?.getMap();  // the maplibre Map, for what the props do not cover
 
 ## Example
 
+```jsx
+// surfaces/customers.jsx — client: read, hand over
+"use client";
+import { useRows } from "../lib/data";
+import Customers from "../components/Customers";
+
+export default function CustomersSurface() {
+  const { rows, error, loading } = useRows({ source: "customers", orderBy: "name asc" });
+  if (loading) return null; // rows only once read: to useFixture, a read in flight looks like an empty table
+  return <Customers customers={rows} error={error} />;
+}
+```
+
 ```jsx
 // components/Customers.jsx — client: the map, the list, the popup
 "use client";
-import { Badge, Button } from "./ui";
+import { Badge, Button, Notice } from "./ui";
 import { FixtureNotice, useFixture } from "./parts";
 import { MapView } from "./blocks/map";
 
@@ -182,10 +195,11 @@ const SAMPLE = [
   { name: "Acme Bakery", city: "Porto", lat: 41.1405, lng: -8.6132, status: "at risk" },
 ];
 
-export default function Customers({ customers }) {
+export default function Customers({ customers, error }) {
   const fixture = useFixture(customers, SAMPLE);
   return (
     <div className="grid gap-4">
+      {error ? <Notice tone="danger">{error}</Notice> : null}
       {fixture.isFixture ? <FixtureNotice onClear={fixture.clear} /> : null}
       <MapView
         items={fixture.rows}
@@ -198,7 +212,7 @@ export default function Customers({ customers }) {
           <div className="grid gap-2 pr-8">
             <p className="font-medium">{c.name}</p>
             <p className="text-muted-foreground">{c.city}</p>
-            <Button size="sm" variant="primary" href={`/customers/${c.id}`}>Open</Button>
+            <Button size="sm" variant="primary" href={`/s/customers?row=${c.id}`}>Open</Button>
           </div>
         )}
       />
@@ -207,6 +221,8 @@ export default function Customers({ customers }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 ## What it will not do
 
 - Geocode. It maps coordinates; turning an address into them is a

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

@@ -5,7 +5,7 @@
 // on them (markers, clusters, the popup) and every control is ours, in the
 // kit and the workspace's tokens.
 //
-// Client only, one static bundle: maplibre loads with the page (see
+// Client only, one bundle: maplibre loads with the page (see
 // maplibre.js), and the map itself mounts after the first effect (the
 // mount guard). Until then — on the server and in the first client paint —
 // the frame, the list and a quiet placeholder are already there, so the

package/registry/blocks/map/maplibre.js

@@ -11,7 +11,7 @@
 //
 //   mapLib     react-map-gl would otherwise load maplibre-gl with an
 //              import() of its own. Handing it the module we import here
-//              keeps the app one static bundle.
+//              keeps the app one bundle.
 //   WORKER_URL maplibre-gl 6 draws tiles in a Web Worker that it loads
 //              from a file beside its own module (import.meta.url). Inside
 //              an app bundle that URL is a build-time file:// path, so the

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

@@ -162,20 +162,29 @@ one as it was.
 ## Example
 
 ```jsx
-// components/PlanMap.jsx — client
+// surfaces/plan-map.jsx — client: one plan's map
 "use client";
 import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useRow } from "../lib/data";
 import { updateRow } from "../lib/actions";
-import { MindMap, mindMapToText } from "./blocks/mind-map";
+import { MindMap, mindMapToText } from "../components/blocks/mind-map";
 
-export default function PlanMap({ plan }) {
-  const [map, setMap] = useState(plan.map);   // jsonb, may be null
+export default function PlanMapSurface() {
+  const id = useSearchParams().get("row");
+  const { row: plan, loading } = useRow({ source: "plans", id });
+  if (loading || !plan) return null;
+  return <PlanMap key={plan.id} plan={plan} />;
+}
+
+function PlanMap({ plan }) {
+  const [map, setMap] = useState(plan.map);   // jsonb, may be null; read once per plan
   return (
     <MindMap
       value={map ?? undefined}
       defaultValue={{ text: plan.name }}
       onChange={setMap}
-      onSave={(m) => updateRow({ source: "public.plans", id: plan.id, patch: { map: m, map_text: mindMapToText(m) } })}
+      onSave={(m) => updateRow({ source: "plans", id: plan.id, patch: { map: m, map_text: mindMapToText(m) } })}
       label={`${plan.name} map`}
       className="h-[calc(100dvh-8rem)]"
     />
@@ -183,6 +192,8 @@ export default function PlanMap({ plan }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 An agent's outline, straight onto a map:
 
 ```jsx

package/registry/blocks/org-chart/README.md

@@ -106,21 +106,22 @@ One row per person, as a table holds them:
 ## Example
 
 ```jsx
-// components/TeamChart.jsx — client
+// surfaces/team.jsx — client: the chart, read and rearranged
 "use client";
-import { useState } from "react";
+import { useRows, whenLanded } from "../lib/data";
 import { updateRow } from "../lib/actions";
-import { OrgChart } from "./blocks/org-chart";
+import { OrgChart } from "../components/blocks/org-chart";
 
-export default function TeamChart({ employees }) {
-  const [people, setPeople] = useState(employees);   // rows of public.employees
+export default function TeamChart() {
+  const { rows: people, loading } = useRows({ source: "employees" });
+  if (loading) return null;
   return (
     <OrgChart
       people={people}
       managerKey="manager_id"
       onChangeManager={async (person, managerId) => {
-        const res = await updateRow({ source: "public.employees", id: person.id, patch: { manager_id: managerId } });
-        if (res.ok) setPeople((list) => list.map((p) => (p.id === person.id ? { ...p, manager_id: managerId } : p)));
+        const res = await updateRow({ source: "employees", id: person.id, patch: { manager_id: managerId } });
+        if (res.ok) await whenLanded(); // the people are read again: the chart draws the new manager
         return res;
       }}
       className="h-[calc(100dvh-8rem)]"
@@ -129,6 +130,8 @@ export default function TeamChart({ employees }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 ## What it will not do
 
 - Show a person under two managers (dotted lines, matrix orgs): one

package/registry/blocks/page-builder/README.md

@@ -83,7 +83,7 @@ variables the app's Tailwind utilities read. The built-in blocks' CSS
   workspace theme. Tailwind emits a theme variable only when some source
   names it, so this block names every token a page may use
   (`KEEP_TOKENS`). Installing the block is enough.
-- **Outside the app** (a download, a static host),
+- **Outside the app** (a download, a plain file host),
   `standaloneDocument(page, { root })` returns a full HTML document with
   the tokens resolved and inlined. `pageDocument(page, { tokens })` is the
   same function for the server, if you pass it the `:root{…}` string
@@ -208,31 +208,38 @@ the helpers the panel uses.
 ## Example
 
 ```jsx
+// surfaces/landing.jsx — client: edit one page
 "use client";
-import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useRow } from "../lib/data";
+import { updateRow } from "../lib/actions";
 import { PageBuilder, PageView } from "../components/blocks/page-builder";
-import { saveRow } from "../lib/db";
 
-export function LandingEditor({ row }) {
+export default function LandingEditor() {
+  const id = useSearchParams().get("row");
+  const { row, loading } = useRow({ source: "pages", id });
+  if (loading || !row) return null;
   return (
     <PageBuilder
       key={row.id}
       title={row.title}
       page={row.project ? { project: row.project } : { html: row.html, css: row.css }}
       onSave={async ({ html, css, project }) => {
-        const res = await saveRow("pages", row.id, { html, css, project });
+        const res = await updateRow({ source: "pages", id: row.id, patch: { html, css, project } });
         return res.ok ? { ok: true } : { ok: false, error: "The page was not saved. Check your connection and try again." };
       }}
     />
   );
 }
 
-// the public page, on the server:
+// The finished page, for a surface of its own that reads the row with the same useRow:
 export function LandingPage({ row }) {
   return <PageView page={row} label={row.title} />;
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 ## What it will not do
 
 - No live multiplayer. Two people editing the same page is last save wins.

package/registry/blocks/page-builder/page-builder.jsx

@@ -12,7 +12,7 @@
 // GrapesJS runs with <Canvas> from @grapesjs/react, so it creates none of
 // its own panels; theme.js repaints the few things it still draws.
 //
-// Client only, one static bundle: the modules load with the page (they are
+// Client only, one bundle: the modules load with the page (they are
 // safe on the server — see grapes.js); the editor is created in an effect
 // after the mount guard. Until then — on the server and in the first client
 // paint — the same frame shows with a skeleton.

package/registry/blocks/page-builder/page-view.jsx

@@ -27,7 +27,7 @@ export function PageView({ page, label, className }) {
 
 /** Browser only: the page as a standalone HTML document with the theme
  *  resolved where `root` sits (colours, faces, radius) — for a download or
- *  a static host that does not load the app's stylesheet. */
+ *  a plain file host that does not load the app's stylesheet. */
 export function standaloneDocument(page, { root, title = "Page", lang = "en" } = {}) {
   return pageDocument(page, { title, lang, tokens: tokenCss(root), fonts: fontLinks(), fontFaces: fontFaceCss() });
 }

package/registry/blocks/page-builder/page.js

@@ -91,7 +91,7 @@ export function templatePage(template) {
 const escapeText = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
 
 /** A standalone HTML document for the page — for a download, an email
- *  preview, a static host. `tokens` is the `:root{…}` rule tokenCss()
+ *  preview, a plain file host. `tokens` is the `:root{…}` rule tokenCss()
  *  returns in the browser (the theme, resolved); without it the page reads
  *  the variables from whatever stylesheet the host adds. */
 export function pageDocument(page, { title = "Page", lang = "en", tokens = "", fonts = [], fontFaces = "" } = {}) {

package/registry/blocks/pdf-viewer/README.md

@@ -128,40 +128,42 @@ cancels.
 ## Example
 
 ```jsx
+// surfaces/contract.jsx — client: one document and its highlights
 "use client";
-import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useRow, useRows, whenLanded } from "../lib/data";
+import { deleteRow, insertRow, updateRow } from "../lib/actions";
 import { PdfViewer } from "../components/blocks/pdf-viewer";
-import { insertRow, updateRow, deleteRow } from "../lib/actions";
 
-const source = "public.highlights";
+const source = "highlights";
 
-export function ContractReview({ doc, rows }) {
-  const [highlights, setHighlights] = useState(rows);
+// A write answers once the highlights are read again, so the viewer never
+// shows the list from before it.
+async function landed(res) {
+  if (res.ok) await whenLanded();
+  return res;
+}
+
+export default function ContractReview() {
+  const id = useSearchParams().get("row");
+  const { row: doc, loading } = useRow({ source: "documents", id });
+  const { rows: highlights } = useRows({ source, filter: { document_id: id } });
+  if (loading || !doc) return null;
   return (
     <PdfViewer
       file={doc.url}
       title={doc.title}
       highlights={highlights}
-      onHighlight={async (h) => {
-        const r = await insertRow({ source, values: { document_id: doc.id, ...h } });
-        if (r.ok) setHighlights((list) => [...list, { ...h, id: r.id }]);
-        return r;
-      }}
-      onHighlightChange={async (id, patch) => {
-        const r = await updateRow({ source, id, patch });
-        if (r.ok) setHighlights((list) => list.map((x) => (x.id === id ? { ...x, ...patch } : x)));
-        return r;
-      }}
-      onHighlightDelete={async (id) => {
-        const r = await deleteRow({ source, id });
-        if (r.ok) setHighlights((list) => list.filter((x) => x.id !== id));
-        return r;
-      }}
+      onHighlight={(h) => insertRow({ source, values: { document_id: doc.id, ...h } }).then(landed)}
+      onHighlightChange={(hid, patch) => updateRow({ source, id: hid, patch }).then(landed)}
+      onHighlightDelete={(hid) => deleteRow({ source, id: hid }).then(landed)}
     />
   );
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 Preview a PDF you make (the `pdf-document` block):
 
 ```jsx

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

@@ -6,7 +6,7 @@
 // callbacks. pdf.js (via react-pdf, see ./pdfjs.js) draws the pages; this
 // file is the viewer around them, in the kit and the workspace's tokens.
 //
-// Client only, one static bundle. pdf.js needs the DOM and a worker, and
+// Client only, one bundle. pdf.js needs the DOM and a worker, and
 // the app's check refuses import() (so no next/dynamic): the modules load
 // with the page (the server half through ssr-shim.js), and the viewer is
 // created only after the first effect — the mount guard. Until then, on

package/registry/blocks/pdf-viewer/pdfjs.js

@@ -19,7 +19,7 @@
 // expression with that asset's URL (the app's base path included). So the
 // worker ships with the app, is always the same version as the pdf.js that
 // calls it, and is served from the app's own origin. No import(), so the
-// app's one-static-bundle check is happy.
+// app's one-bundle check (no import()) is happy.
 //
 // It is set here, after react-pdf has loaded, because react-pdf sets its
 // own default when it loads and the later assignment must win. Only in the

package/registry/blocks/pdf-viewer/ssr-shim.js

@@ -7,7 +7,7 @@
 // document.createElement("div") (a CSS feature probe), and react-pdf reads
 // window.location. On the server those throw "window is not defined" and
 // the page fails to render — though the viewer itself only ever renders in
-// the browser (the mount guard). The app is one static bundle (no
+// the browser (the mount guard). The app is one bundle (no
 // import(), no next/dynamic), so the module cannot be kept off the server;
 // it is let load against these stand-ins instead — the same trick as
 // sketch-canvas's ssr-shim.js.

package/registry/blocks/product-detail/README.md

@@ -130,13 +130,16 @@ compareAt, currency })`, `formatPrice(amount, currency, locale)`.
 ## Example
 
 ```jsx
-// surfaces/product.jsx — server: load, hand over
-import { loadRow } from "../lib/data";
+// surfaces/product.jsx — client: read, hand over
+"use client";
+import { useSearchParams } from "next/navigation";
+import { useRow } from "../lib/data";
 import ProductPage from "../components/ProductPage";
 
-export default async function ProductSurface({ params }) {
-  const { row, error } = await loadRow({ source: "public.products", id: params.id });
-  return <ProductPage product={row} error={error} />;
+export default function ProductSurface() {
+  const id = useSearchParams().get("row"); // /s/product?row=<id>
+  const { row, error, loading } = useRow({ source: "products", id });
+  return <ProductPage product={row} loading={loading} error={error} />;
 }
 ```
 
@@ -146,10 +149,11 @@ export default async function ProductSurface({ params }) {
 import { insertRow } from "../lib/actions";
 import { ProductDetail } from "./blocks/product-detail";
 
-export default function ProductPage({ product, error }) {
+export default function ProductPage({ product, loading, error }) {
   return (
     <ProductDetail
       product={product}
+      loading={loading}
       error={error}
       breadcrumb={[{ label: "Shop", href: "/shop" }, { label: product?.name ?? "Product" }]}
       perks={[
@@ -158,7 +162,7 @@ export default function ProductPage({ product, error }) {
       ]}
       onAddToCart={(line) =>
         insertRow({
-          source: "public.cart_items",
+          source: "cart_items",
           values: { product_id: line.id, line_key: line.key, quantity: line.quantity, selected: line.selected },
           detail: `${line.quantity} × ${line.name}`,
         })
@@ -168,6 +172,8 @@ export default function ProductPage({ product, error }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 A digital product with plans, no quantity, and a straight-to-checkout
 button:
 

package/registry/blocks/product-detail/demo.jsx

@@ -142,7 +142,7 @@ const KIT = {
       key: "licence",
       label: "Choose your licence",
       values: [
-        { value: "html", label: "HTML", price: 39, per: "one-time", description: "Static pages with the styles compiled." },
+        { value: "html", label: "HTML", price: 39, per: "one-time", description: "Plain HTML pages with the styles compiled." },
         { value: "react", label: "React", price: 49, per: "one-time", badge: "Popular", description: "Components with props and typed data." },
         { value: "team", label: "Team", price: 149, per: "one-time", description: "React, for up to ten people." },
       ],