@ai-matrx/records-ui 0.56.0 → 0.57.0

package/dist/index.js

@@ -8810,7 +8810,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__ */ jsxs29("section", { className: cn27("flex flex-col gap-3", className), children: [
+  return /* @__PURE__ */ jsxs29("section", { className: cn27("@container flex flex-col gap-3", className), children: [
     /* @__PURE__ */ jsxs29("header", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx33("h3", { className: "text-sm font-medium", children: existing ? "Portal" : "New client portal" }),
       /* @__PURE__ */ jsx33("div", { className: "flex-1" }),
@@ -8951,7 +8951,7 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
             /* @__PURE__ */ jsx33(
               BasicInput8,
               {
-                className: "h-8 w-56",
+                className: "h-8 w-full @md:w-56",
                 value: inviteEmail,
                 onChange: (e) => setInviteEmail(e.target.value)
               }
@@ -8962,7 +8962,7 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
             /* @__PURE__ */ jsx33(
               BasicInput8,
               {
-                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)
@@ -9661,7 +9661,7 @@ function DigestScheduler({
     setPreview(answered.data);
   }
   if (views === null && !error) return /* @__PURE__ */ jsx36(Skeleton16, { className: cn30("h-56 w-full", className) });
-  return /* @__PURE__ */ jsxs32("section", { className: cn30("flex flex-col gap-3", className), children: [
+  return /* @__PURE__ */ jsxs32("section", { className: cn30("@container flex flex-col gap-3", className), children: [
     /* @__PURE__ */ jsxs32("header", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx36("h3", { className: "text-sm font-medium", children: "Send this on a schedule" }),
       /* @__PURE__ */ jsx36("div", { className: "flex-1" }),
@@ -9696,7 +9696,7 @@ function DigestScheduler({
       ),
       /* @__PURE__ */ jsx36("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__ */ jsxs32("div", { className: "grid grid-cols-2 gap-2", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2", children: [
       /* @__PURE__ */ jsxs32("label", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx36(Label5, { className: "text-xs font-medium", children: "How often" }),
         /* @__PURE__ */ jsx36(
@@ -10445,7 +10445,7 @@ function FormBuilder({ tableId, seed, activeFormId, onActiveForm, className }) {
   if (!rights.admin) {
     return /* @__PURE__ */ jsx39("p", { className: cn33("text-xs text-muted-foreground", className), children: rights.why("structure") });
   }
-  return /* @__PURE__ */ jsxs35("div", { className: cn33("flex min-h-0 gap-3", className), children: [
+  return /* @__PURE__ */ jsxs35("div", { className: cn33("@container flex min-h-0 flex-col gap-3 @3xl:flex-row", className), children: [
     /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 flex-1 flex-col gap-2 overflow-auto", children: [
       /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-1 overflow-x-auto", role: "group", "aria-label": "Forms", children: [
         forms.map((form) => /* @__PURE__ */ jsx39(
@@ -10606,7 +10606,7 @@ function FormBuilder({ tableId, seed, activeFormId, onActiveForm, className }) {
         ] })
       ] })
     ] }),
-    draft ? /* @__PURE__ */ jsxs35("aside", { className: "w-96 shrink-0 overflow-auto rounded border p-2", children: [
+    draft ? /* @__PURE__ */ jsxs35("aside", { className: "w-full shrink-0 overflow-auto rounded border p-2 @3xl:w-96", children: [
       /* @__PURE__ */ jsx39("h4", { className: "px-1 text-sm font-medium", children: draft.name }),
       /* @__PURE__ */ jsx39(FormRunner, { form: draft, preview: true })
     ] }) : null
@@ -12394,195 +12394,200 @@ function BookingBuilder({ tableId, bookingId, onSaved, onClose, className }) {
   }
   const url = formId ? `${publicOrigin}${bookingPath(formId)}` : null;
   const shown = offer ?? null;
-  return /* @__PURE__ */ jsxs44("section", { className: cn42("flex flex-col gap-3", className), children: [
-    /* @__PURE__ */ jsxs44("header", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx48("h3", { className: "text-sm font-medium", children: existing ? "Booking page" : "New booking page" }),
-      /* @__PURE__ */ jsx48("div", { className: "flex-1" }),
-      /* @__PURE__ */ jsx48(Button39, { size: "sm", disabled: saving, onClick: () => void save(), children: saving ? "Saving\u2026" : "Save" }),
-      onClose ? /* @__PURE__ */ jsx48(Button39, { size: "sm", variant: "ghost", onClick: onClose, children: "Close" }) : null
-    ] }),
-    error ? /* @__PURE__ */ jsx48(RefusalNotice, { error }) : null,
-    /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "What it is called" }),
-      /* @__PURE__ */ jsx48(BasicInput15, { value: title, onChange: (e) => setTitle(e.target.value) })
-    ] }),
-    /* @__PURE__ */ jsxs44("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "How long one appointment is" }),
-        /* @__PURE__ */ jsx48(
-          "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__ */ jsxs44("option", { value: n, children: [
-              n,
-              " minutes"
-            ] }, n))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "Gap kept after each one" }),
-        /* @__PURE__ */ jsx48(
-          "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__ */ jsx48("option", { value: n, children: n === 0 ? "No gap \u2014 back to back" : `${n} minutes` }, n))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "Earliest somebody may book" }),
-        /* @__PURE__ */ jsx48(
-          "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__ */ jsx48("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__ */ jsxs44("section", { className: cn42("@container flex flex-col gap-3", className), children: [
+      /* @__PURE__ */ jsxs44("header", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx48("h3", { className: "text-sm font-medium", children: existing ? "Booking page" : "New booking page" }),
+        /* @__PURE__ */ jsx48("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsx48(Button39, { size: "sm", disabled: saving, onClick: () => void save(), children: saving ? "Saving\u2026" : "Save" }),
+        onClose ? /* @__PURE__ */ jsx48(Button39, { size: "sm", variant: "ghost", onClick: onClose, children: "Close" }) : null
       ] }),
+      error ? /* @__PURE__ */ jsx48(RefusalNotice, { error }) : null,
       /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "Most in one day" }),
-        /* @__PURE__ */ jsx48(
-          BasicInput15,
-          {
-            type: "number",
-            min: 1,
-            value: perDay,
-            onChange: (e) => setPerDay(Math.max(1, Number(e.target.value) || 1))
-          }
-        )
+        /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "What it is called" }),
+        /* @__PURE__ */ jsx48(BasicInput15, { value: title, onChange: (e) => setTitle(e.target.value) })
       ] }),
-      /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "How far ahead the page offers" }),
-        /* @__PURE__ */ jsx48(
-          "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__ */ jsxs44("option", { value: n, children: [
-              n,
-              " days"
-            ] }, n))
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "Hours you are free" }),
-      windows.map((w, i) => /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs44("label", { className: "flex w-20 items-center gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsxs44("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "How long one appointment is" }),
           /* @__PURE__ */ jsx48(
-            Checkbox7,
+            "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__ */ jsxs44("option", { value: n, children: [
+                n,
+                " minutes"
+              ] }, n))
             }
-          ),
-          DAYS[i]?.label
+          )
         ] }),
-        w.on ? /* @__PURE__ */ jsxs44(Fragment22, { children: [
+        /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "Gap kept after each one" }),
           /* @__PURE__ */ jsx48(
-            BasicInput15,
+            "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__ */ jsx48("option", { value: n, children: n === 0 ? "No gap \u2014 back to back" : `${n} minutes` }, n))
             }
-          ),
-          /* @__PURE__ */ jsx48("span", { className: "text-xs text-muted-foreground", children: "to" }),
+          )
+        ] }),
+        /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "Earliest somebody may book" }),
+          /* @__PURE__ */ jsx48(
+            "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__ */ jsx48("option", { value: n, children: n === 0 ? "Right away" : n === 1440 ? "A day from now" : `${n / 60} hour${n === 60 ? "" : "s"} from now` }, n))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "Most in one day" }),
           /* @__PURE__ */ jsx48(
             BasicInput15,
             {
-              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__ */ jsx48("span", { className: "text-xs text-muted-foreground", children: "not taking bookings" })
-      ] }, w.weekday))
-    ] }),
-    /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "What to ask the person booking" }),
-      askable.length === 0 ? /* @__PURE__ */ jsx48("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__ */ jsx48("div", { className: "flex flex-wrap gap-x-4 gap-y-1.5", children: askable.map((f) => /* @__PURE__ */ jsxs44("label", { className: "flex items-center gap-1.5 text-xs", children: [
+        ] }),
+        /* @__PURE__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "How far ahead the page offers" }),
+          /* @__PURE__ */ jsx48(
+            "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__ */ jsxs44("option", { value: n, children: [
+                n,
+                " days"
+              ] }, n))
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "Hours you are free" }),
+        windows.map((w, i) => /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs44("label", { className: "flex w-20 items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx48(
+              Checkbox7,
+              {
+                checked: w.on,
+                onCheckedChange: (on) => setWindows((prev) => prev.map((x, j) => i === j ? { ...x, on: Boolean(on) } : x))
+              }
+            ),
+            DAYS[i]?.label
+          ] }),
+          w.on ? /* @__PURE__ */ jsxs44(Fragment22, { children: [
+            /* @__PURE__ */ jsx48(
+              BasicInput15,
+              {
+                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__ */ jsx48("span", { className: "text-xs text-muted-foreground", children: "to" }),
+            /* @__PURE__ */ jsx48(
+              BasicInput15,
+              {
+                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__ */ jsx48("span", { className: "text-xs text-muted-foreground", children: "not taking bookings" })
+        ] }, w.weekday))
+      ] }),
+      /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "What to ask the person booking" }),
+        askable.length === 0 ? /* @__PURE__ */ jsx48("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__ */ jsx48("div", { className: "flex flex-wrap gap-x-4 gap-y-1.5", children: askable.map((f) => /* @__PURE__ */ jsxs44("label", { className: "flex items-center gap-1.5 text-xs", children: [
+          /* @__PURE__ */ jsx48(
+            Checkbox7,
+            {
+              checked: asked.includes(f.key),
+              onCheckedChange: (on) => setAsked((prev) => on ? [...prev, f.key] : prev.filter((k) => k !== f.key))
+            }
+          ),
+          fieldName(f)
+        ] }, f.key)) }),
+        /* @__PURE__ */ jsx48("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__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "What they see after booking" }),
+        /* @__PURE__ */ jsx48(
+          BasicTextarea7,
+          {
+            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__ */ jsxs44("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__ */ jsxs44("div", { className: "flex flex-wrap items-center gap-2 rounded-md border p-2.5", children: [
+        /* @__PURE__ */ jsx48("span", { className: "min-w-0 flex-1 break-all text-xs", children: url }),
         /* @__PURE__ */ jsx48(
-          Checkbox7,
+          Button39,
           {
-            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__ */ jsx48("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__ */ jsxs44("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx48(Label8, { className: "text-xs font-medium", children: "What they see after booking" }),
-      /* @__PURE__ */ jsx48(
-        BasicTextarea7,
-        {
-          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__ */ jsxs44("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__ */ jsxs44("div", { className: "flex flex-wrap items-center gap-2 rounded-md border p-2.5", children: [
-      /* @__PURE__ */ jsx48("span", { className: "min-w-0 flex-1 break-all text-xs", children: url }),
-      /* @__PURE__ */ jsx48(
-        Button39,
-        {
-          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__ */ jsx48(
-        Button39,
-        {
-          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__ */ jsx48("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__ */ jsx48(
+          Button39,
+          {
+            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__ */ jsx48("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