@ai-matrx/records-ui 0.56.0 → 0.58.0

package/dist/index.cjs

@@ -2731,9 +2731,18 @@ function EnrichPanel({ tableId, fieldId, className }) {
 var import_react17 = require("react");
 var import_design_system8 = require("@ai-matrx/design-system");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function PastePreview({ plan, noun, nounPlural, onConfirm, onCancel }) {
+function PastePreview({
+  plan,
+  noun,
+  nounPlural,
+  onConfirm,
+  onCancel,
+  onAddOptions
+}) {
   const [busy, setBusy] = (0, import_react17.useState)(false);
   const [outcome, setOutcome] = (0, import_react17.useState)(null);
+  const [adding, setAdding] = (0, import_react17.useState)(null);
+  const [addFailed, setAddFailed] = (0, import_react17.useState)(null);
   const nothingToDo = plan.cells === 0;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
@@ -2772,6 +2781,37 @@ function PastePreview({ plan, noun, nounPlural, onConfirm, onCancel }) {
               " more of the same kinds."
             ] }) : null
           ] }) : null,
+          onAddOptions && plan.unmatchedOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-matrx-paste-add-options": true, className: "flex flex-col gap-2", children: [
+            plan.unmatchedOptions.map((group) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium", children: group.column }),
+                " does not offer",
+                " ",
+                group.words.map((w) => `\u201C${w}\u201D`).join(", "),
+                "."
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_design_system8.Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "outline",
+                  disabled: adding !== null || busy,
+                  onClick: () => {
+                    setAddFailed(null);
+                    setAdding(group.fieldKey);
+                    void onAddOptions(group.fieldKey, group.words).catch(
+                      (err) => setAddFailed(
+                        `Those options were not added: ${err instanceof Error ? err.message : String(err)}`
+                      )
+                    ).finally(() => setAdding(null));
+                  },
+                  children: adding === group.fieldKey ? "Adding\u2026" : group.words.length === 1 ? `Add \u201C${group.words[0]}\u201D as an option` : `Add these ${group.words.length} options`
+                }
+              )
+            ] }, group.fieldKey)),
+            addFailed ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-destructive", children: addFailed }) : null
+          ] }) : null,
           plan.pastRightEdge > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
             plan.pastRightEdge,
             " ",
@@ -2863,9 +2903,26 @@ function confirmLabel(plan, noun, nounPlural) {
 
 // src/pasteValues.ts
 var import_core2 = require("@ai-matrx/records/core");
+var import_records5 = require("@ai-matrx/records");
+function choiceOptionsOf(options) {
+  const byWord = /* @__PURE__ */ new Map();
+  const labels = [];
+  for (const option of options) {
+    const id = option.id;
+    const key = (0, import_records5.optionKey)(option);
+    const label = recordName(option.data, null, "");
+    if (label) {
+      labels.push(label);
+      if (!byWord.has(label.toLowerCase())) byWord.set(label.toLowerCase(), id);
+    }
+    if (key && !byWord.has(String(key).toLowerCase())) byWord.set(String(key).toLowerCase(), id);
+    if (id && !byWord.has(id.toLowerCase())) byWord.set(id.toLowerCase(), id);
+  }
+  return { byWord, labels };
+}
 var TRUE_WORDS = /* @__PURE__ */ new Set(["true", "yes", "y", "1", "\u2713", "x", "checked", "on"]);
 var FALSE_WORDS = /* @__PURE__ */ new Set(["false", "no", "n", "0", "", "unchecked", "off"]);
-function valueFromPastedText(field, raw) {
+function valueFromPastedText(field, raw, options) {
   const label = fieldName(field);
   const text = raw.trim();
   const kind = editorKindFor(field);
@@ -2925,10 +2982,30 @@ function valueFromPastedText(field, raw) {
     // stop agreeing with it. So the cell is left alone and the person is told
     // which control does hold it.
     case "select":
-    case "multi_select":
-      return {
-        refusal: `${label} is a list, and a pasted word is not one of its options. Open the cell and pick the option \u2014 or add \u201C${raw}\u201D as an option first, and paste again.`
-      };
+    case "multi_select": {
+      if (!options) {
+        return {
+          refusal: `${label} is a list and its options have not been read yet, so nothing can be matched to \u201C${raw}\u201D. Reopen the paste once the column's choices have loaded.`
+        };
+      }
+      const wanted = kind === "multi_select" ? text.split(/[,;]/).map((w) => w.trim()).filter((w) => w.length > 0) : [text];
+      if (wanted.length === 0) return { value: kind === "multi_select" ? [] : null };
+      const matched = [];
+      const unmatched = [];
+      for (const word of wanted) {
+        const hit = options.byWord.get(word.toLowerCase());
+        if (hit === void 0) unmatched.push(word);
+        else matched.push(hit);
+      }
+      if (unmatched.length > 0) {
+        const offered = options.labels.length > 0 ? options.labels.join(", ") : "it has none yet";
+        return {
+          refusal: `${label} does not have ${unmatched.map((w) => `\u201C${w}\u201D`).join(" or ")} among its options. It offers: ${offered}.`,
+          unmatched
+        };
+      }
+      return { value: kind === "multi_select" ? matched : matched[0] };
+    }
     case "member":
       return {
         refusal: `${label} names a person in this organization, so it is chosen rather than typed. Open the cell and pick them.`
@@ -2955,6 +3032,7 @@ function planPastedBlock(args) {
   const byKey = new Map(args.fields.map((f) => [f.key, f]));
   const rows = [];
   const refusals = [];
+  const unmatched = /* @__PURE__ */ new Map();
   let cells = 0;
   const lines = [
     ...args.onExisting.map((r) => ({ recordId: r.recordId, raw: r.raw })),
@@ -2970,8 +3048,15 @@ function planPastedBlock(args) {
       const field = byKey.get(key);
       const raw = line.raw[c];
       if (field === void 0 || raw === void 0) continue;
-      const judged = valueFromPastedText(field, raw);
+      const judged = valueFromPastedText(field, raw, args.options?.get(key));
       if ("refusal" in judged) {
+        if ("unmatched" in judged) {
+          const seen = unmatched.get(key) ?? { column: fieldName(field), words: [] };
+          for (const word of judged.unmatched) {
+            if (!seen.words.some((w) => w.toLowerCase() === word.toLowerCase())) seen.words.push(word);
+          }
+          unmatched.set(key, seen);
+        }
         built.push({ key, raw, value: null, refusal: judged.refusal });
         refusals.push({ fromLine, column: fieldName(field), raw, why: judged.refusal });
         continue;
@@ -3007,7 +3092,12 @@ function planPastedBlock(args) {
     creates: keepers.filter((r) => r.recordId === null).length,
     cells,
     refusals,
-    pastRightEdge: args.pastRightEdge ?? 0
+    pastRightEdge: args.pastRightEdge ?? 0,
+    unmatchedOptions: [...unmatched.entries()].map(([fieldKey, seen]) => ({
+      fieldKey,
+      column: seen.column,
+      words: seen.words
+    }))
   };
 }
 function documentOf(row) {
@@ -3089,13 +3179,29 @@ function Grid({
     [client, host, refreshEnrich]
   );
   const [pastePlan, setPastePlan] = (0, import_react18.useState)(null);
+  const choiceOptions = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
+  const loadChoiceOptions = (0, import_react18.useCallback)(
+    async (fieldList) => {
+      const wanted = fieldList.filter(
+        (f) => (editorKindFor(f) === "select" || editorKindFor(f) === "multi_select") && !choiceOptions.current.has(f.key)
+      );
+      await Promise.all(
+        wanted.map(async (field) => {
+          const got = await client.fieldOptions({ field_id: field.id });
+          if (got.ok) choiceOptions.current.set(field.key, choiceOptionsOf(got.data ?? []));
+        })
+      );
+    },
+    [client]
+  );
   const pasteableKeys = (0, import_react18.useMemo)(
     () => ordered.filter((f) => fieldIsEditable(f)).map((f) => f.key),
     [ordered]
   );
   const receivePastePlan = (0, import_react18.useCallback)(
-    (sheetPlan) => {
+    async (sheetPlan) => {
       const fieldList = fields.data ?? [];
+      await loadChoiceOptions(fieldList);
       const byRecord = /* @__PURE__ */ new Map();
       const order = [];
       const take = (rowId, columnId, value) => {
@@ -3123,6 +3229,7 @@ function Grid({
       );
       const built = planPastedBlock({
         fields: fieldList,
+        options: choiceOptions.current,
         columnKeys,
         onExisting: touched.map((recordId) => ({
           recordId,
@@ -3146,7 +3253,37 @@ function Grid({
       }
       setPastePlan({ plan: built });
     },
-    [fields.data, rows]
+    [fields.data, loadChoiceOptions, rows]
+  );
+  const addPastedOptions = (0, import_react18.useCallback)(
+    async (fieldKey, words) => {
+      const field = (fields.data ?? []).find((f) => f.key === fieldKey);
+      if (!field) throw new Error(`This table has no column called ${fieldKey}.`);
+      const existing = choiceOptions.current.get(fieldKey)?.labels ?? [];
+      const written = await client.fieldUpdate({
+        field_id: field.id,
+        patch: { options: [...existing, ...words] }
+      });
+      if (!written.ok) throw new Error(written.error.message);
+      choiceOptions.current.delete(fieldKey);
+      await loadChoiceOptions(fields.data ?? []);
+      setPastePlan(
+        (held) => held ? {
+          plan: planPastedBlock({
+            fields: fields.data ?? [],
+            options: choiceOptions.current,
+            columnKeys: held.plan.rows[0]?.cells.map((c) => c.key) ?? [],
+            onExisting: held.plan.rows.filter((r) => r.recordId !== null).map((r) => ({
+              recordId: r.recordId,
+              raw: r.cells.map((c) => c.raw)
+            })),
+            onNew: held.plan.rows.filter((r) => r.recordId === null).map((r) => r.cells.map((c) => c.raw)),
+            pastRightEdge: held.plan.pastRightEdge
+          })
+        } : held
+      );
+    },
+    [client, fields.data, loadChoiceOptions]
   );
   const applyPaste = (0, import_react18.useCallback)(async () => {
     const held = pastePlan;
@@ -3154,39 +3291,56 @@ function Grid({
     const refusals = [];
     let written = 0;
     const expected = [];
-    for (const row of held.plan.rows) {
-      const document2 = documentOf(row);
-      if (Object.keys(document2).length === 0) continue;
-      if (row.recordId === null) {
-        const made = await client.recordWrite({ table_id: tableId, data: document2 });
-        if (!made.ok) {
-          refusals.push(`Row ${row.fromLine}: ${made.error.message}`);
-          continue;
-        }
-        written += 1;
-        expected.push({ recordId: made.data, document: document2 });
-      } else {
-        const done = await client.recordUpdate({ record_id: row.recordId, patch: document2 });
-        if (!done.ok) {
-          refusals.push(`Row ${row.fromLine}: ${done.error.message}`);
-          continue;
+    const creates = held.plan.rows.filter((row) => row.recordId === null).map((row) => ({ row, document: documentOf(row) })).filter((c) => Object.keys(c.document).length > 0);
+    const updates = held.plan.rows.filter((row) => row.recordId !== null).map((row) => ({ row, document: documentOf(row) })).filter((c) => Object.keys(c.document).length > 0);
+    for (let at = 0; at < creates.length; at += pageSize) {
+      const chunk = creates.slice(at, at + pageSize);
+      const made = await client.recordWriteMany({
+        table_id: tableId,
+        rows: chunk.map((c) => c.document)
+      });
+      if (!made.ok) {
+        refusals.push(
+          `Rows ${chunk[0].row.fromLine}-${chunk[chunk.length - 1].row.fromLine}: ${made.error.message}`
+        );
+        continue;
+      }
+      chunk.forEach((c, index) => {
+        const id = made.data[index];
+        if (id === void 0) {
+          refusals.push(`Row ${c.row.fromLine}: the store wrote the batch and named no id for this line.`);
+          return;
         }
         written += 1;
-        expected.push({ recordId: row.recordId, document: document2 });
+        expected.push({ recordId: id, document: c.document });
+      });
+    }
+    for (const { row, document: document2 } of updates) {
+      const done = await client.recordUpdate({ record_id: row.recordId, patch: document2 });
+      if (!done.ok) {
+        refusals.push(`Row ${row.fromLine}: ${done.error.message}`);
+        continue;
       }
+      written += 1;
+      expected.push({ recordId: row.recordId, document: document2 });
     }
     let readBack = 0;
     let missing = 0;
     const seen = /* @__PURE__ */ new Map();
-    const reread = await client.list({ table_id: tableId, limit: 500, offset: 0 });
-    if (reread.ok) {
+    const READ_BACK_PAGE = 500;
+    for (let offset = 0; ; offset += READ_BACK_PAGE) {
+      const reread = await client.list({ table_id: tableId, limit: READ_BACK_PAGE, offset });
+      if (!reread.ok) {
+        refusals.push(
+          `The rows were written and this could not read them back to check: ${reread.error.message}`
+        );
+        break;
+      }
       for (const row of reread.data.rows) {
         seen.set(row.id, row.document ?? {});
       }
-    } else {
-      refusals.push(
-        `The rows were written and this could not read them back to check: ${reread.error.message}`
-      );
+      if (reread.data.rows.length < READ_BACK_PAGE) break;
+      if (expected.every((e) => seen.has(e.recordId))) break;
     }
     for (const entry of expected) {
       const stored = seen.get(entry.recordId);
@@ -3459,6 +3613,7 @@ function Grid({
           noun: table.data?.label_singular ?? "record",
           nounPlural: table.data?.label_plural ?? `${table.data?.label_singular ?? "record"}s`,
           onConfirm: applyPaste,
+          onAddOptions: addPastedOptions,
           onCancel: () => setPastePlan(null)
         }
       ) : null,
@@ -8955,7 +9110,7 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
   const all = tables.data ?? [];
   const missingTie = ticked.filter((e) => e.namesVia.trim() === "");
   const ready = clientTableId !== null && ticked.length > 0 && missingTie.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { className: (0, import_design_system30.cn)("flex flex-col gap-3", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { className: (0, import_design_system30.cn)("@container flex flex-col gap-3", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-sm font-medium", children: existing ? "Portal" : "New client portal" }),
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1" }),
@@ -9096,7 +9251,7 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               import_design_system30.BasicInput,
               {
-                className: "h-8 w-56",
+                className: "h-8 w-full @md:w-56",
                 value: inviteEmail,
                 onChange: (e) => setInviteEmail(e.target.value)
               }
@@ -9107,7 +9262,7 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               import_design_system30.BasicInput,
               {
-                className: "h-8 w-80",
+                className: "h-8 w-full @md:w-80",
                 placeholder: "the record id",
                 value: inviteRecordId,
                 onChange: (e) => setInviteRecordId(e.target.value)
@@ -9133,7 +9288,7 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
 // src/PortalsPanel.tsx
 var import_react65 = require("react");
 var import_react66 = require("@ai-matrx/records/react");
-var import_records5 = require("@ai-matrx/records");
+var import_records6 = require("@ai-matrx/records");
 var import_design_system32 = require("@ai-matrx/design-system");
 
 // src/BuildOrAsk.tsx
@@ -9250,7 +9405,7 @@ function PortalsPanel({ tableId, className }) {
       }
     ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "flex flex-col gap-2", children: portals.map((portal) => {
-      const url = `${origin}${(0, import_records5.portalPath)(portal.slug)}`;
+      const url = `${origin}${(0, import_records6.portalPath)(portal.slug)}`;
       const open = openId === portal.portal_id;
       return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "rounded-md border border-border bg-card p-2.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -9804,7 +9959,7 @@ function DigestScheduler({
     setPreview(answered.data);
   }
   if (views === null && !error) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system33.Skeleton, { className: (0, import_design_system33.cn)("h-56 w-full", className) });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { className: (0, import_design_system33.cn)("flex flex-col gap-3", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { className: (0, import_design_system33.cn)("@container flex flex-col gap-3", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("header", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h3", { className: "text-sm font-medium", children: "Send this on a schedule" }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1" }),
@@ -9839,7 +9994,7 @@ function DigestScheduler({
       ),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs text-muted-foreground", children: "The first choice saves what is on screen as a view, so the summary and the screen stay the same thing." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system33.Label, { className: "text-xs font-medium", children: "How often" }),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -10154,7 +10309,7 @@ function SubscriptionsPanel({ tableId, className }) {
 // src/FormBuilder.tsx
 var import_react73 = require("react");
 var import_react74 = require("@ai-matrx/records/react");
-var import_records6 = require("@ai-matrx/records");
+var import_records7 = require("@ai-matrx/records");
 var import_design_system36 = require("@ai-matrx/design-system");
 
 // src/FormRunner.tsx
@@ -10580,7 +10735,7 @@ function FormBuilder({ tableId, seed, activeFormId, onActiveForm, className }) {
   if (!rights.admin) {
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: (0, import_design_system36.cn)("text-xs text-muted-foreground", className), children: rights.why("structure") });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_design_system36.cn)("flex min-h-0 gap-3", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_design_system36.cn)("@container flex min-h-0 flex-col gap-3 @3xl:flex-row", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2 overflow-auto", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-1 overflow-x-auto", role: "group", "aria-label": "Forms", children: [
         forms.map((form) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -10607,7 +10762,7 @@ function FormBuilder({ tableId, seed, activeFormId, onActiveForm, className }) {
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           PublishRow,
           {
-            url: `${publicOrigin}${(0, import_records6.publicFormPath)(draft.id)}`,
+            url: `${publicOrigin}${(0, import_records7.publicFormPath)(draft.id)}`,
             state: draft.state,
             mayPublish: rights.structure,
             why: rights.why("structure"),
@@ -10741,7 +10896,7 @@ function FormBuilder({ tableId, seed, activeFormId, onActiveForm, className }) {
         ] })
       ] })
     ] }),
-    draft ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("aside", { className: "w-96 shrink-0 overflow-auto rounded border p-2", children: [
+    draft ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("aside", { className: "w-full shrink-0 overflow-auto rounded border p-2 @3xl:w-96", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h4", { className: "px-1 text-sm font-medium", children: draft.name }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormRunner, { form: draft, preview: true })
     ] }) : null
@@ -11672,7 +11827,7 @@ function NotifyRuleEditor({ tableId, seed, className }) {
 // src/ChartBlock.tsx
 var import_react85 = require("react");
 var import_recharts = require("recharts");
-var import_records7 = require("@ai-matrx/records");
+var import_records8 = require("@ai-matrx/records");
 var import_core6 = require("@ai-matrx/records/core");
 var import_design_system42 = require("@ai-matrx/design-system");
 var import_jsx_runtime45 = require("react/jsx-runtime");
@@ -11693,7 +11848,7 @@ function ChartBlock({ block, subject, className }) {
   const kind = block.kind;
   const tableId = block.table_id ?? subject;
   const measures = block.measures && block.measures.length > 0 ? block.measures : [{ op: "count" }];
-  const primary = (0, import_records7.measureKey)(measures[0]);
+  const primary = (0, import_records8.measureKey)(measures[0]);
   const series = [primary];
   const points = (0, import_react85.useMemo)(() => {
     if (kind === "stuck") return [];
@@ -12227,7 +12382,7 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
 // src/FormsPanel.tsx
 var import_react88 = require("react");
 var import_react89 = require("@ai-matrx/records/react");
-var import_records8 = require("@ai-matrx/records");
+var import_records9 = require("@ai-matrx/records");
 var import_design_system44 = require("@ai-matrx/design-system");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var WHAT_A_FORM_IS = "A form asks for this table's own fields, and its answers land here as ordinary records stamped with the form they came through.";
@@ -12322,7 +12477,7 @@ function FormsPanel({ tableId, className }) {
       }
     ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { className: "flex flex-col gap-2", children: forms.map((form) => {
-      const url = `${origin}${(0, import_records8.publicFormPath)(form.form_id)}`;
+      const url = `${origin}${(0, import_records9.publicFormPath)(form.form_id)}`;
       return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("li", { className: "rounded-md border p-2.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: form.title ?? form.slug }),
@@ -12374,7 +12529,7 @@ function FormsPanel({ tableId, className }) {
 // src/BookingBuilder.tsx
 var import_react90 = require("react");
 var import_react91 = require("@ai-matrx/records/react");
-var import_records9 = require("@ai-matrx/records");
+var import_records10 = require("@ai-matrx/records");
 var import_design_system45 = require("@ai-matrx/design-system");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var STORE_ANSWERS_THESE = ["slot", "status", "booked_with"];
@@ -12505,203 +12660,208 @@ function BookingBuilder({ tableId, bookingId, onSaved, onClose, className }) {
   if (!rights.structure) {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: (0, import_design_system45.cn)("text-xs text-muted-foreground", className), children: rights.why("structure") ?? "Making a booking page needs the admin level on this table, because it lets people with no account take time in your calendar." });
   }
-  const url = formId ? `${publicOrigin}${(0, import_records9.bookingPath)(formId)}` : null;
+  const url = formId ? `${publicOrigin}${(0, import_records10.bookingPath)(formId)}` : null;
   const shown = offer ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("section", { className: (0, import_design_system45.cn)("flex flex-col gap-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("header", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "text-sm font-medium", children: existing ? "Booking page" : "New booking page" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Button, { size: "sm", disabled: saving, onClick: () => void save(), children: saving ? "Saving\u2026" : "Save" }),
-      onClose ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Button, { size: "sm", variant: "ghost", onClick: onClose, children: "Close" }) : null
-    ] }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefusalNotice, { error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "What it is called" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.BasicInput, { value: title, onChange: (e) => setTitle(e.target.value) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "How long one appointment is" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          "select",
-          {
-            className: "h-9 rounded border bg-background px-2 text-sm",
-            value: minutes,
-            onChange: (e) => setMinutes(Number(e.target.value)),
-            children: LENGTHS.map((n) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("option", { value: n, children: [
-              n,
-              " minutes"
-            ] }, n))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "Gap kept after each one" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          "select",
-          {
-            className: "h-9 rounded border bg-background px-2 text-sm",
-            value: buffer,
-            onChange: (e) => setBuffer(Number(e.target.value)),
-            children: [0, 5, 10, 15, 30].map((n) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("option", { value: n, children: n === 0 ? "No gap \u2014 back to back" : `${n} minutes` }, n))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "Earliest somebody may book" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          "select",
-          {
-            className: "h-9 rounded border bg-background px-2 text-sm",
-            value: lead,
-            onChange: (e) => setLead(Number(e.target.value)),
-            children: [0, 60, 120, 240, 1440].map((n) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("option", { value: n, children: n === 0 ? "Right away" : n === 1440 ? "A day from now" : `${n / 60} hour${n === 60 ? "" : "s"} from now` }, n))
-          }
-        )
+  return (
+    // THE RAIL IS 384px WIDE AND THE VIEWPORT IS NOT (walk 1, 2026-09-21):
+    // every split below is a CONTAINER query, so this screen is the same
+    // screen in a rail, a dialog and a full page.
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("section", { className: (0, import_design_system45.cn)("@container flex flex-col gap-3", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("header", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "text-sm font-medium", children: existing ? "Booking page" : "New booking page" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex-1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Button, { size: "sm", disabled: saving, onClick: () => void save(), children: saving ? "Saving\u2026" : "Save" }),
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Button, { size: "sm", variant: "ghost", onClick: onClose, children: "Close" }) : null
       ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefusalNotice, { error }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "Most in one day" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          import_design_system45.BasicInput,
-          {
-            type: "number",
-            min: 1,
-            value: perDay,
-            onChange: (e) => setPerDay(Math.max(1, Number(e.target.value) || 1))
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "What it is called" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.BasicInput, { value: title, onChange: (e) => setTitle(e.target.value) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "How far ahead the page offers" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          "select",
-          {
-            className: "h-9 rounded border bg-background px-2 text-sm",
-            value: days,
-            onChange: (e) => setDays(Number(e.target.value)),
-            children: [7, 14, 30, 60, 90].map((n) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("option", { value: n, children: [
-              n,
-              " days"
-            ] }, n))
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "Hours you are free" }),
-      windows.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex w-20 items-center gap-1.5 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "How long one appointment is" }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_design_system45.Checkbox,
+            "select",
             {
-              checked: w.on,
-              onCheckedChange: (on) => setWindows((prev) => prev.map((x, j) => i === j ? { ...x, on: Boolean(on) } : x))
+              className: "h-9 rounded border bg-background px-2 text-sm",
+              value: minutes,
+              onChange: (e) => setMinutes(Number(e.target.value)),
+              children: LENGTHS.map((n) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("option", { value: n, children: [
+                n,
+                " minutes"
+              ] }, n))
             }
-          ),
-          DAYS[i]?.label
+          )
         ] }),
-        w.on ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "Gap kept after each one" }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_design_system45.BasicInput,
+            "select",
             {
-              type: "time",
-              className: "h-8 w-28",
-              value: w.from,
-              onChange: (e) => setWindows((prev) => prev.map((x, j) => i === j ? { ...x, from: e.target.value } : x))
+              className: "h-9 rounded border bg-background px-2 text-sm",
+              value: buffer,
+              onChange: (e) => setBuffer(Number(e.target.value)),
+              children: [0, 5, 10, 15, 30].map((n) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("option", { value: n, children: n === 0 ? "No gap \u2014 back to back" : `${n} minutes` }, n))
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs text-muted-foreground", children: "to" }),
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "Earliest somebody may book" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            "select",
+            {
+              className: "h-9 rounded border bg-background px-2 text-sm",
+              value: lead,
+              onChange: (e) => setLead(Number(e.target.value)),
+              children: [0, 60, 120, 240, 1440].map((n) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("option", { value: n, children: n === 0 ? "Right away" : n === 1440 ? "A day from now" : `${n / 60} hour${n === 60 ? "" : "s"} from now` }, n))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "Most in one day" }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             import_design_system45.BasicInput,
             {
-              type: "time",
-              className: "h-8 w-28",
-              value: w.to,
-              onChange: (e) => setWindows((prev) => prev.map((x, j) => i === j ? { ...x, to: e.target.value } : x))
+              type: "number",
+              min: 1,
+              value: perDay,
+              onChange: (e) => setPerDay(Math.max(1, Number(e.target.value) || 1))
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs text-muted-foreground", children: "not taking bookings" })
-      ] }, w.weekday))
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "What to ask the person booking" }),
-      askable.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-xs text-muted-foreground", children: "This table has no fields yet, so there is nothing a booking page could ask for. Add a field first \u2014 every question is one of this table's own fields." }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-wrap gap-x-4 gap-y-1.5", children: askable.map((f) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex items-center gap-1.5 text-xs", children: [
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "How far ahead the page offers" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            "select",
+            {
+              className: "h-9 rounded border bg-background px-2 text-sm",
+              value: days,
+              onChange: (e) => setDays(Number(e.target.value)),
+              children: [7, 14, 30, 60, 90].map((n) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("option", { value: n, children: [
+                n,
+                " days"
+              ] }, n))
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "Hours you are free" }),
+        windows.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex w-20 items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_design_system45.Checkbox,
+              {
+                checked: w.on,
+                onCheckedChange: (on) => setWindows((prev) => prev.map((x, j) => i === j ? { ...x, on: Boolean(on) } : x))
+              }
+            ),
+            DAYS[i]?.label
+          ] }),
+          w.on ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_design_system45.BasicInput,
+              {
+                type: "time",
+                className: "h-8 w-28",
+                value: w.from,
+                onChange: (e) => setWindows((prev) => prev.map((x, j) => i === j ? { ...x, from: e.target.value } : x))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs text-muted-foreground", children: "to" }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_design_system45.BasicInput,
+              {
+                type: "time",
+                className: "h-8 w-28",
+                value: w.to,
+                onChange: (e) => setWindows((prev) => prev.map((x, j) => i === j ? { ...x, to: e.target.value } : x))
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs text-muted-foreground", children: "not taking bookings" })
+        ] }, w.weekday))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "What to ask the person booking" }),
+        askable.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-xs text-muted-foreground", children: "This table has no fields yet, so there is nothing a booking page could ask for. Add a field first \u2014 every question is one of this table's own fields." }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-wrap gap-x-4 gap-y-1.5", children: askable.map((f) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex items-center gap-1.5 text-xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            import_design_system45.Checkbox,
+            {
+              checked: asked.includes(f.key),
+              onCheckedChange: (on) => setAsked((prev) => on ? [...prev, f.key] : prev.filter((k) => k !== f.key))
+            }
+          ),
+          fieldName(f)
+        ] }, f.key)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-xs text-muted-foreground", children: "The time, whether it is booked or cancelled, and who it is with are filled in by the store \u2014 a booking page cannot ask a visitor for any of the three." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "What they see after booking" }),
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          import_design_system45.Checkbox,
+          import_design_system45.BasicTextarea,
           {
-            checked: asked.includes(f.key),
-            onCheckedChange: (on) => setAsked((prev) => on ? [...prev, f.key] : prev.filter((k) => k !== f.key))
+            rows: 2,
+            value: confirmation,
+            placeholder: "You're booked. We'll send a reminder the day before \u2014 reply to that message to move it.",
+            onChange: (e) => setConfirmation(e.target.value)
+          }
+        )
+      ] }),
+      shown ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "rounded-md border bg-muted/40 p-2.5 text-xs", children: [
+        "Saved. The page offers ",
+        shown.slot_minutes,
+        "-minute appointments in ",
+        shown.timezone,
+        ", up to",
+        " ",
+        shown.max_per_day,
+        " a day, ",
+        shown.days,
+        " days ahead",
+        shown.buffer_minutes > 0 ? `, with ${shown.buffer_minutes} minutes between them` : "",
+        ":",
+        " ",
+        shown.windows.map(
+          (w) => `${DAYS.find((d) => d.weekday === w.weekday)?.label ?? w.weekday} ${w.from}\u2013${w.to}`
+        ).join(", "),
+        "."
+      ] }) : null,
+      url ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-wrap items-center gap-2 rounded-md border p-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "min-w-0 flex-1 break-all text-xs", children: url }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          import_design_system45.Button,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: () => {
+              void navigator.clipboard.writeText(url).then(() => {
+                setCopied(true);
+                window.setTimeout(() => setCopied(false), 1600);
+              }).catch(() => setCopied(false));
+            },
+            children: copied ? "Copied" : "Copy link"
           }
         ),
-        fieldName(f)
-      ] }, f.key)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-xs text-muted-foreground", children: "The time, whether it is booked or cancelled, and who it is with are filled in by the store \u2014 a booking page cannot ask a visitor for any of the three." })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system45.Label, { className: "text-xs font-medium", children: "What they see after booking" }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-        import_design_system45.BasicTextarea,
-        {
-          rows: 2,
-          value: confirmation,
-          placeholder: "You're booked. We'll send a reminder the day before \u2014 reply to that message to move it.",
-          onChange: (e) => setConfirmation(e.target.value)
-        }
-      )
-    ] }),
-    shown ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "rounded-md border bg-muted/40 p-2.5 text-xs", children: [
-      "Saved. The page offers ",
-      shown.slot_minutes,
-      "-minute appointments in ",
-      shown.timezone,
-      ", up to",
-      " ",
-      shown.max_per_day,
-      " a day, ",
-      shown.days,
-      " days ahead",
-      shown.buffer_minutes > 0 ? `, with ${shown.buffer_minutes} minutes between them` : "",
-      ":",
-      " ",
-      shown.windows.map(
-        (w) => `${DAYS.find((d) => d.weekday === w.weekday)?.label ?? w.weekday} ${w.from}\u2013${w.to}`
-      ).join(", "),
-      "."
-    ] }) : null,
-    url ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-wrap items-center gap-2 rounded-md border p-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "min-w-0 flex-1 break-all text-xs", children: url }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-        import_design_system45.Button,
-        {
-          size: "sm",
-          variant: "outline",
-          onClick: () => {
-            void navigator.clipboard.writeText(url).then(() => {
-              setCopied(true);
-              window.setTimeout(() => setCopied(false), 1600);
-            }).catch(() => setCopied(false));
-          },
-          children: copied ? "Copied" : "Copy link"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-        import_design_system45.Button,
-        {
-          size: "sm",
-          disabled: publishing,
-          onClick: () => void publish(!(existing?.published_at && !existing.closed_at)),
-          children: publishing ? "\u2026" : existing?.published_at && !existing.closed_at ? "Unpublish" : "Publish"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-xs text-muted-foreground", children: existing?.published_at && !existing.closed_at ? "Open. Anyone with this link can book a time." : "Not open yet \u2014 the link does not take bookings until you publish it." })
-    ] }) : null
-  ] });
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          import_design_system45.Button,
+          {
+            size: "sm",
+            disabled: publishing,
+            onClick: () => void publish(!(existing?.published_at && !existing.closed_at)),
+            children: publishing ? "\u2026" : existing?.published_at && !existing.closed_at ? "Unpublish" : "Publish"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-xs text-muted-foreground", children: existing?.published_at && !existing.closed_at ? "Open. Anyone with this link can book a time." : "Not open yet \u2014 the link does not take bookings until you publish it." })
+      ] }) : null
+    ] })
+  );
 }
 
 // src/BookingSlots.tsx
 var import_react92 = require("react");
 var import_react93 = require("@ai-matrx/records/react");
-var import_records10 = require("@ai-matrx/records");
+var import_records11 = require("@ai-matrx/records");
 var import_design_system46 = require("@ai-matrx/design-system");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var WHAT_A_BOOKING_PAGE_IS = "A booking page offers times you are free and writes each appointment into this table as an ordinary record.";
@@ -12809,7 +12969,7 @@ function BookingSlots({ tableId, className }) {
       " Open the table the appointments should land in to make one."
     ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { className: "flex flex-col gap-2", children: pages.map((page) => {
-      const url = `${origin}${(0, import_records10.bookingPath)(page.form_id)}`;
+      const url = `${origin}${(0, import_records11.bookingPath)(page.form_id)}`;
       const mayOpen = levels.data?.[page.table_id] === "admin";
       const open = page.published_at !== null && page.closed_at === null;
       return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { className: "rounded-md border p-2.5", "data-testid": "booking-page", children: [
@@ -12898,7 +13058,7 @@ var import_design_system48 = require("@ai-matrx/design-system");
 
 // src/CaptureRun.tsx
 var import_react94 = require("react");
-var import_records11 = require("@ai-matrx/records");
+var import_records12 = require("@ai-matrx/records");
 var import_react95 = require("@ai-matrx/records/react");
 var import_design_system47 = require("@ai-matrx/design-system");
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -12953,7 +13113,7 @@ function CaptureRun({ sheetId, face: given, className }) {
   const [sending, setSending] = (0, import_react94.useState)(false);
   const queueRef = (0, import_react94.useRef)(null);
   (0, import_react94.useEffect)(() => {
-    const q2 = (0, import_records11.openCaptureQueue)({
+    const q2 = (0, import_records12.openCaptureQueue)({
       onChange: (c, all) => {
         setCounts(c);
         setItems(all);