@ai-matrx/records-ui 0.53.0 → 0.57.0

package/dist/index.cjs

@@ -94,6 +94,7 @@ __export(src_exports, {
   MyChecklistSteps: () => MyChecklistSteps,
   NEEDS_A_SENTENCE: () => NEEDS_A_SENTENCE,
   NOT_ANSWERED_YET: () => NOT_ANSWERED_YET,
+  NOT_DRAWN_HERE: () => NOT_DRAWN_HERE,
   NO_AGENT_PORT: () => NO_AGENT_PORT,
   NO_CHAT_REASON: () => NO_CHAT_REASON,
   NO_COLUMNS_WHY: () => NO_COLUMNS_WHY,
@@ -162,6 +163,8 @@ __export(src_exports, {
   chooseSurface: () => chooseSurface,
   colorFromTheValue: () => colorFromTheValue,
   columnForField: () => columnForField,
+  conditionInWords: () => conditionInWords,
+  conditionIsSimple: () => conditionIsSimple,
   conditionValue: () => conditionValue,
   controlFor: () => controlFor,
   currencyCodeFor: () => currencyCodeFor,
@@ -2728,7 +2731,7 @@ 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, onConfirm, onCancel }) {
+function PastePreview({ plan, noun, nounPlural, onConfirm, onCancel }) {
   const [busy, setBusy] = (0, import_react17.useState)(false);
   const [outcome, setOutcome] = (0, import_react17.useState)(null);
   const nothingToDo = plan.cells === 0;
@@ -2748,7 +2751,7 @@ function PastePreview({ plan, noun, onConfirm, onCancel }) {
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_design_system8.Separator, {}),
         outcome === null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           nothingToDo ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm", children: "Nothing in what you pasted can be written to this table. Every cell is listed below with the reason." }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-sm", children: [
-            sentence(plan, noun),
+            sentence(plan, noun, nounPlural),
             " The values below are exactly what will be stored."
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlanTable, { plan }),
@@ -2788,7 +2791,7 @@ function PastePreview({ plan, noun, onConfirm, onCancel }) {
                   setBusy(true);
                   void onConfirm().then(setOutcome).finally(() => setBusy(false));
                 },
-                children: busy ? "Writing\u2026" : confirmLabel(plan, noun)
+                children: busy ? "Writing\u2026" : confirmLabel(plan, noun, nounPlural)
               }
             )
           ] })
@@ -2843,19 +2846,19 @@ function plural(n, one, many) {
 function summarize(plan) {
   return `${plural(plan.cells, "value", "values")} across ${plural(plan.rows.length, "row", "rows")}`;
 }
-function sentence(plan, noun) {
+function sentence(plan, noun, nounPlural) {
   const parts = [];
-  if (plan.updates > 0) parts.push(`change ${plural(plan.updates, noun, `${noun}s`)}`);
-  if (plan.creates > 0) parts.push(`create ${plural(plan.creates, `new ${noun}`, `new ${noun}s`)}`);
+  if (plan.updates > 0) parts.push(`change ${plural(plan.updates, noun, nounPlural)}`);
+  if (plan.creates > 0) parts.push(`create ${plural(plan.creates, `new ${noun}`, `new ${nounPlural}`)}`);
   const what = parts.length === 2 ? `${parts[0]} and ${parts[1]}` : parts[0] ?? "write nothing";
   return `This will ${what}.`;
 }
-function confirmLabel(plan, noun) {
+function confirmLabel(plan, noun, nounPlural) {
   if (plan.creates > 0 && plan.updates === 0) {
-    return `Create ${plural(plan.creates, noun, `${noun}s`)}`;
+    return `Create ${plural(plan.creates, noun, nounPlural)}`;
   }
   if (plan.creates > 0) return `Write ${plural(plan.rows.length, "row", "rows")}`;
-  return `Update ${plural(plan.updates, noun, `${noun}s`)}`;
+  return `Update ${plural(plan.updates, noun, nounPlural)}`;
 }
 
 // src/pasteValues.ts
@@ -2890,13 +2893,21 @@ function valueFromPastedText(field, raw) {
       return { value: negative ? -n : n };
     }
     case "datetime": {
+      const wantsTime = String(field.config?.["kind"] ?? "date") === "datetime";
+      const plainDay = /^\s*(\d{4})-(\d{2})-(\d{2})\s*$/.exec(raw);
+      if (!wantsTime && plainDay) return { value: `${plainDay[1]}-${plainDay[2]}-${plainDay[3]}` };
       const at = Date.parse(text);
       if (Number.isNaN(at)) {
         return {
           refusal: `${label} holds a date, and \u201C${raw}\u201D is not one this can read. Paste it as 2026-09-21, or as your spreadsheet's own date format.`
         };
       }
-      return { value: new Date(at).toISOString() };
+      const parsed = new Date(at);
+      if (wantsTime) return { value: parsed.toISOString() };
+      const y = parsed.getFullYear();
+      const m = String(parsed.getMonth() + 1).padStart(2, "0");
+      const d = String(parsed.getDate()).padStart(2, "0");
+      return { value: `${y}-${m}-${d}` };
     }
     case "json": {
       try {
@@ -3087,42 +3098,55 @@ function Grid({
       const fieldList = fields.data ?? [];
       const byRecord = /* @__PURE__ */ new Map();
       const order = [];
-      for (const patch of sheetPlan.accepted) {
-        let held = byRecord.get(patch.rowId);
+      const take = (rowId, columnId, value) => {
+        let held = byRecord.get(rowId);
         if (held === void 0) {
           held = {};
-          byRecord.set(patch.rowId, held);
-          order.push(patch.rowId);
+          byRecord.set(rowId, held);
+          order.push(rowId);
         }
-        held[patch.columnId] = patch.value === null ? "" : String(patch.value);
+        held[columnId] = value === null || value === void 0 ? "" : String(value);
+      };
+      for (const patch of sheetPlan.accepted) take(patch.rowId, patch.columnId, patch.value);
+      for (const refused of sheetPlan.refusals) {
+        if (refused.rowId === null) continue;
+        take(refused.rowId, refused.columnId, refused.value);
       }
+      const onScreen = rows.map((r) => r.id).filter((id) => byRecord.has(id));
+      const touched = [...onScreen, ...order.filter((id) => !onScreen.includes(id))];
       const columnKeys = Array.from(
         /* @__PURE__ */ new Set([
           ...sheetPlan.accepted.map((p) => p.columnId),
+          ...sheetPlan.refusals.map((r) => r.columnId),
           ...sheetPlan.overflow.flatMap((row) => Object.keys(row))
         ])
       );
       const built = planPastedBlock({
         fields: fieldList,
         columnKeys,
-        onExisting: order.map((recordId) => ({
+        onExisting: touched.map((recordId) => ({
           recordId,
           raw: columnKeys.map((key) => byRecord.get(recordId)?.[key])
         })),
         onNew: sheetPlan.overflow.map((row) => columnKeys.map((key) => row[key])),
         pastRightEdge: sheetPlan.pastRightEdge
       });
+      const notWritable = /* @__PURE__ */ new Map();
       for (const refused of sheetPlan.refusals) {
+        if (built.refusals.some((r) => r.column === columnLabel(fieldList, refused.columnId))) continue;
+        notWritable.set(refused.columnId, refused.reason);
+      }
+      for (const [columnId, why] of notWritable) {
         built.refusals.push({
           fromLine: 0,
-          column: refused.columnId,
+          column: columnLabel(fieldList, columnId),
           raw: "",
-          why: refused.reason
+          why
         });
       }
       setPastePlan({ plan: built });
     },
-    [fields.data]
+    [fields.data, rows]
   );
   const applyPaste = (0, import_react18.useCallback)(async () => {
     const held = pastePlan;
@@ -3433,6 +3457,7 @@ function Grid({
         {
           plan: pastePlan.plan,
           noun: table.data?.label_singular ?? "record",
+          nounPlural: table.data?.label_plural ?? `${table.data?.label_singular ?? "record"}s`,
           onConfirm: applyPaste,
           onCancel: () => setPastePlan(null)
         }
@@ -3450,6 +3475,10 @@ function Grid({
     ] })
   ] }) });
 }
+function columnLabel(fields, columnId) {
+  const field = fields.find((f) => f.key === columnId);
+  return field ? fieldName(field) : humanize(columnId);
+}
 function AddFieldButton({ onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_design_system9.Button,
@@ -4788,6 +4817,60 @@ var CONDITION_OPS = [
   { op: "gt", label: "is more than" },
   { op: "lt", label: "is less than" }
 ];
+function conditionIsSimple(expr) {
+  if (expr === null || expr === void 0) return true;
+  const node = expr;
+  if (typeof node.op !== "string" || !CONDITION_OPS.some((c) => c.op === node.op)) return false;
+  if (!Array.isArray(node.args)) return false;
+  const first = node.args[0];
+  if (!first || typeof first.field !== "string") return false;
+  if (node.op === "present") return node.args.length === 1;
+  const second = node.args[1];
+  return node.args.length === 2 && !!second && "const" in second;
+}
+function conditionInWords(expr, fields) {
+  const name = (id) => {
+    const f = fields.find((x) => x.id === id);
+    return f ? f.label || f.key : "a column";
+  };
+  const said = {
+    eq: "is",
+    ne: "is not",
+    gt: "is more than",
+    lt: "is less than",
+    gte: "is at least",
+    lte: "is at most",
+    and: "and",
+    or: "or",
+    matches: "matches"
+  };
+  const walk = (node) => {
+    if (node === null || node === void 0) return "nothing";
+    const n = node;
+    if ("const" in n) return JSON.stringify(n["const"]);
+    if (typeof n["field"] === "string" && !("op" in n)) return name(n["field"]);
+    const op = typeof n["op"] === "string" ? n["op"] : "";
+    if (op === "previous" && typeof n["field"] === "string") return `what ${name(n["field"])} used to say`;
+    if (op === "sibling_count") {
+      const same = n["same"] ?? [];
+      const differs = n["differs"] ?? [];
+      const sameWords = same.length > 0 ? ` for the same ${same.map(name).join(" and ")}` : "";
+      const diffWords = differs.length > 0 ? ` from a different ${differs.map(name).join(" and ")}` : "";
+      return `how many others there are${sameWords}${diffWords}`;
+    }
+    if (op === "stage_count") return "how many are in that column already";
+    if (op === "actor_at_least") return `whoever is moving it is at least ${String(n["level"] ?? "somebody")}`;
+    const args = Array.isArray(n["args"]) ? n["args"] : [];
+    if (op === "not") return `not ${walk(args[0])}`;
+    if (op === "present") return `${walk(args[0])} has been answered`;
+    const word = said[op] ?? op;
+    if (op === "and" || op === "or") return args.map(walk).join(` ${word} `);
+    if (args.length === 2) return `${walk(args[0])} ${word} ${walk(args[1])}`;
+    if (args.length === 1) return `${walk(args[0])} ${word}`;
+    return op;
+  };
+  return walk(expr);
+}
 function conditionValue(typed) {
   const trimmed = typed.trim();
   if (trimmed === "") return typed;
@@ -4859,6 +4942,7 @@ function ConditionRow({ lead, expr, fields, onChange, emptyLabel = "always", cla
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var NO_RULES_YET = "Nothing has to be true to get here yet.";
 var NEEDS_A_SENTENCE = "Write the sentence somebody reads when this stops them, the way you would say it out loud.";
+var NOT_DRAWN_HERE = "This part of the rule is not something this builder can draw yet";
 var ON_FAIL = [
   { value: "refuse", label: "Turn it away", note: "The card stays where it is and the person is told why." },
   {
@@ -5039,7 +5123,7 @@ function StageRulesSection({ tableId, stage, className }) {
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        ConditionRow,
+        Clause,
         {
           lead: "When",
           emptyLabel: "every card",
@@ -5049,7 +5133,7 @@ function StageRulesSection({ tableId, stage, className }) {
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        ConditionRow,
+        Clause,
         {
           lead: "it cannot get here unless",
           emptyLabel: "\u2014 pick a column \u2014",
@@ -5093,6 +5177,50 @@ function StageRulesSection({ tableId, stage, className }) {
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system15.Separator, {})
   ] });
 }
+function Clause({
+  lead,
+  emptyLabel,
+  expr,
+  fields,
+  onChange
+}) {
+  const [replacing, setReplacing] = (0, import_react29.useState)(false);
+  const drawable = conditionIsSimple(expr) || replacing;
+  if (drawable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ConditionRow,
+      {
+        lead,
+        emptyLabel,
+        expr: replacing && !conditionIsSimple(expr) ? null : expr,
+        fields,
+        onChange
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-wrap items-center gap-1 text-xs", "data-testid": "stage-rule-clause-in-words", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-muted-foreground", children: lead }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "font-medium", children: conditionInWords(expr, fields) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-muted-foreground", children: [
+      "\u2014 ",
+      NOT_DRAWN_HERE,
+      ", so it is shown as it reads."
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_design_system15.Button,
+      {
+        size: "sm",
+        variant: "ghost",
+        className: "h-6",
+        onClick: () => {
+          setReplacing(true);
+          onChange(null);
+        },
+        children: "Replace it"
+      }
+    )
+  ] });
+}
 
 // src/TableSettings.tsx
 var import_react31 = require("react");
@@ -8827,7 +8955,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" }),
@@ -8968,7 +9096,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)
               }
@@ -8979,7 +9107,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)
@@ -9676,7 +9804,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" }),
@@ -9711,7 +9839,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)(
@@ -10452,7 +10580,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)(
@@ -10613,7 +10741,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
@@ -12379,195 +12507,200 @@ function BookingBuilder({ tableId, bookingId, onSaved, onClose, className }) {
   }
   const url = formId ? `${publicOrigin}${(0, import_records9.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