@ai-matrx/records-ui 0.56.0 → 0.57.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.57.0
+
+**The builders are usable where a person actually reaches them: a 384px rail.**
+
+The first browser walk (lane BUILDERS, Ironline Fitness, 2026-09-21) pressed
+"Build the form" on a real gym's members table and got a preview of an empty
+form and **no controls at all**. `FormBuilder` was authored as two desktop
+columns — controls left, live preview in a `w-96` aside right — and the rail it
+is mounted in is itself `w-96`, so the fixed-width preview took the entire rail
+and squeezed the controls to nothing. The screen looked like a builder and could
+not build.
+
+A viewport breakpoint cannot fix that: the viewport was 1680px wide while the
+container was 384px. Every split in these four screens is now a **container
+query**, so they are the same screen in a rail, a dialog or a full page:
+
+* `FormBuilder` stacks to one column and its preview goes full-width below the
+  controls until the component itself is wide enough for two (`@3xl`).
+* `BookingBuilder`, `PortalBuilder` and `DigestScheduler` drop their two-column
+  grids and fixed-width inputs to one column under `@md`.
+
+**Consumer action:** none. The host must already scan this package's `dist` for
+Tailwind classes (`@source "…/@ai-matrx/records-ui/dist"`), which matrx-frontend
+does; the container variants are generated from there like every other class.
+
 ## 0.56.0
 
 **A condition the builder cannot draw is said in words, not blanked.**

package/dist/index.cjs

@@ -8955,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" }),
@@ -9096,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)
               }
@@ -9107,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)
@@ -9804,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" }),
@@ -9839,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)(
@@ -10580,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)(
@@ -10741,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
@@ -12507,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.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.Checkbox,
+          import_design_system45.Button,
           {
-            checked: asked.includes(f.key),
-            onCheckedChange: (on) => setAsked((prev) => on ? [...prev, f.key] : prev.filter((k) => k !== f.key))
+            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