@ai-matrx/records-ui 0.115.72 → 0.115.74

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.115.74
+
+UNVERIFIED: this release has no Unreleased entry and the source comparison could not be made (the caller supplied no source comparison). Whether source changed is unknown; consumer action is unknown.
+Check the package's gitHead on npm against this version's gitHead: `git diff <previous gitHead> <this gitHead> -- apps/shared/records-ui/src`.
+
+## 0.115.73
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/records-ui/v0.115.72..npm/records-ui/v0.115.73 -- apps/shared/records-ui`).
+No source changes intended and no consumer action required.
+
 ## 0.115.72
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see
@@ -9,6 +20,7 @@ No source changes intended and no consumer action required.
 ## 0.115.71
 ### Unreleased
 
+- **No native `<select>` left in the package.** The last nine screens (bookings, checklists, form flow, portals, stage rules, notify rules, dashboard shape/width, digest schedule) and the demo shell now use the design system's `Select` (`@ai-matrx/design-system/controls`); the native-select allowlist is empty, so the guard fails on any new one. `NotifyRuleEditor` keeps its form field names through hidden inputs.
 - **`@ai-matrx/records-ui/helpers` — the light door (page-weight campaign, 2026-10-13).** The root entry is one "use client" bundle of every screen (~2.4 MB, the grid and recharts with it), and a host service that imported one helper from it put the whole package on every page. `/helpers` (~25 KB, no React, no "use client", shaken) serves `personActor`, `recordsDataSource`, `setPersonTimeZone` / `getPersonTimeZone` / `personWallNow` / `subscribePersonTimeZone`, `tableRightsAt`, `NO_RIGHTS`, the names (`tableName`, `fieldName`, `recordName`, …), `whenWords` and the other who-changed words, `withheldNoticeOf` / `withheldSentence` / `WITHHELD_WORD`, `fieldTypeLabel` and the parity helpers, `tablePickerEntries` / `isValueSet` / `isKeptTable`, `declareTable` and the table builders, `resolveTableStyle` / `styleFromDecorations`, and the host contract's types (`RecordsUiHost`, `OpenRecordsAsk`, `AgentBuildAsk`, `TableRights`, `PickerTable`, `NewFieldSpec`, …). The root re-exports every name (new: `subscribePersonTimeZone`). The person's zone and the one-data-source-per-client cache moved into realm-wide `globalSlot`s, so `/helpers` and the root share ONE instance though each bundles its own copy of the code. The pure halves were split out of their screens: `dataSource.ts` (from `RecordsMount.tsx`), `personZone.ts` (from `personTime.ts`), `tableRights.ts` (from `host.tsx`), `withheldNotice.ts` (from `withheld.tsx`), `tablePickerEntries.ts` (from `tablePicking.tsx`); `choiceLooks.ts` / `presentation.ts` read their colour values from design-system's pure `data-table/table-style` instead of the data-table root. Guard: `src/helpers-entry-is-light.test.tsx` (the helper graph reaches no React, screen or heavy entry; every helper is also a root export; the zone and the cache are shared by a second copy of the code — red with a module-level `let`). Consumer action: a module that imports only these helpers from the root imports them from `/helpers`.
 
 ## 0.115.70

package/dist/index.cjs

@@ -19964,7 +19964,7 @@ function EnrichBadge({ cell: cell2, onPin, className }) {
   const read = Array.isArray(source.read) ? source.read : [];
   const alternates = cell2.alternates ?? [];
   const word = state2 === "yours" ? "yours" : state2 === "unsure" ? "unsure" : "agent";
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_design_system60.HoverCard, { openDelay: 120, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_design_system60.HoverCard, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_design_system60.HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: (0, import_design_system60.cn)("inline-flex items-center gap-1 align-middle", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         import_design_system60.Badge,
@@ -29393,6 +29393,7 @@ var import_react158 = require("@ai-matrx/records/react");
 var import_format8 = require("@ai-matrx/kit/format");
 var import_records48 = require("@ai-matrx/records");
 var import_design_system79 = require("@ai-matrx/design-system");
+var import_controls2 = require("@ai-matrx/design-system/controls");
 
 // src/publicQuestions.ts
 var CANNOT_ASK = {
@@ -29695,39 +29696,39 @@ function BookingBuilder({ tableId, bookingId, onSaved, onClose, startNew, classN
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_design_system79.Label, { className: "text-xs font-medium", children: "How long one appointment is" }),
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-            "select",
+            import_controls2.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_runtime94.jsxs)("option", { value: n, children: [
-                n,
-                " minutes"
-              ] }, n))
+              "aria-label": "How long one appointment is",
+              value: String(minutes),
+              onValueChange: (v) => setMinutes(Number(v)),
+              options: LENGTHS.map((n) => ({ value: String(n), label: `${n} minutes` }))
             }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_design_system79.Label, { className: "text-xs font-medium", children: "Gap kept after each one" }),
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-            "select",
+            import_controls2.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_runtime94.jsx)("option", { value: n, children: n === 0 ? "No gap \u2014 back to back" : `${n} minutes` }, n))
+              "aria-label": "Gap kept after each one",
+              value: String(buffer),
+              onValueChange: (v) => setBuffer(Number(v)),
+              options: [0, 5, 10, 15, 30].map((n) => ({ value: String(n), label: n === 0 ? "No gap \u2014 back to back" : `${n} minutes` }))
             }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_design_system79.Label, { className: "text-xs font-medium", children: "Earliest somebody may book" }),
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-            "select",
+            import_controls2.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_runtime94.jsx)("option", { value: n, children: n === 0 ? "Right away" : n === 1440 ? "A day from now" : `${(0, import_format8.formatDurationMinutes)(n, { style: "long" })} from now` }, n))
+              "aria-label": "Earliest somebody may book",
+              value: String(lead),
+              onValueChange: (v) => setLead(Number(v)),
+              options: [0, 60, 120, 240, 1440].map((n) => ({
+                value: String(n),
+                label: n === 0 ? "Right away" : n === 1440 ? "A day from now" : `${(0, import_format8.formatDurationMinutes)(n, { style: "long" })} from now`
+              }))
             }
           )
         ] }),
@@ -29746,15 +29747,12 @@ function BookingBuilder({ tableId, bookingId, onSaved, onClose, startNew, classN
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_design_system79.Label, { className: "text-xs font-medium", children: "How far ahead the page offers" }),
           /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-            "select",
+            import_controls2.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_runtime94.jsxs)("option", { value: n, children: [
-                n,
-                " days"
-              ] }, n))
+              "aria-label": "How far ahead the page offers",
+              value: String(days),
+              onValueChange: (v) => setDays(Number(v)),
+              options: [7, 14, 30, 60, 90].map((n) => ({ value: String(n), label: `${n} days` }))
             }
           )
         ] }),
@@ -31237,6 +31235,7 @@ function SaveToTable({ source, shapeIndex = 0, onOpenTable, onSaved, onClose, ma
 var import_react169 = require("react");
 var import_react170 = require("@ai-matrx/records/react");
 var import_design_system86 = require("@ai-matrx/design-system");
+var import_controls3 = require("@ai-matrx/design-system/controls");
 var import_jsx_runtime101 = 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.";
@@ -31367,16 +31366,15 @@ function StageRulesSection({ tableId, stage, className }) {
     /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "font-medium", children: "Rules for entering" }),
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
-        "select",
+        import_controls3.Select,
         {
           "aria-label": "Stage",
-          className: "h-7 rounded border bg-background px-1 text-xs",
           value: stageKey ?? "",
-          onChange: (e) => {
-            setChosen(e.target.value);
+          onValueChange: (v) => {
+            setChosen(v);
             setDraft(null);
           },
-          children: stages.filter((s) => !s.retired).map((s) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("option", { value: s.key, children: s.label }, s.key))
+          options: stages.filter((s) => !s.retired).map((s) => ({ value: s.key, label: s.label }))
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "text-muted-foreground", children: gates.length }),
@@ -31444,13 +31442,12 @@ function StageRulesSection({ tableId, stage, className }) {
       /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "text-muted-foreground", children: "and when it does not" }),
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
-          "select",
+          import_controls3.Select,
           {
             "aria-label": "What happens",
-            className: "h-8 rounded border bg-background px-1 text-xs",
             value: draft.on_fail ?? "refuse",
-            onChange: (e) => setDraft({ ...draft, on_fail: e.target.value }),
-            children: ON_FAIL.map((o) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("option", { value: o.value, children: o.label }, o.value))
+            onValueChange: (on_fail) => setDraft({ ...draft, on_fail }),
+            options: ON_FAIL.map((o) => ({ value: o.value, label: o.label }))
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "text-muted-foreground", children: ON_FAIL.find((o) => o.value === (draft.on_fail ?? "refuse"))?.note })
@@ -39716,7 +39713,7 @@ function ArchivedPortals({
 var import_react231 = require("react");
 var import_react232 = require("@ai-matrx/records/react");
 var import_design_system112 = require("@ai-matrx/design-system");
-var import_controls2 = require("@ai-matrx/design-system/controls");
+var import_controls4 = require("@ai-matrx/design-system/controls");
 var import_core22 = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
 var import_utilities = require("@dnd-kit/utilities");
@@ -40115,7 +40112,7 @@ function ViewBar({ tableId, activeViewId, onActiveView, seed, settings, onViews,
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "group flex min-h-7 items-center gap-1 px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
               /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
-                import_controls2.Button,
+                import_controls4.Button,
                 {
                   variant: "quiet",
                   className: "min-w-0 flex-1 justify-start gap-1 px-0",
@@ -40130,12 +40127,12 @@ function ViewBar({ tableId, activeViewId, onActiveView, seed, settings, onViews,
                 }
               ),
               rights.admin ? /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls2.Button, { variant: "quiet", className: "shrink-0 normal-case", "data-view-section-rename": "", onClick: () => setRenamingSection({ from: group.name, draft: group.name }), children: "Rename" }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls2.Button, { variant: "danger", className: "shrink-0 normal-case", "data-view-section-delete": "", title: "The views stay; they leave the section", onClick: () => void renameSection(group.name, null), children: "Delete" })
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls4.Button, { variant: "quiet", className: "shrink-0 normal-case", "data-view-section-rename": "", onClick: () => setRenamingSection({ from: group.name, draft: group.name }), children: "Rename" }),
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls4.Button, { variant: "danger", className: "shrink-0 normal-case", "data-view-section-delete": "", title: "The views stay; they leave the section", onClick: () => void renameSection(group.name, null), children: "Delete" })
               ] }) : null
             ] }) : null,
             group.name !== null && shut.includes(group.name) && !group.views.some((v) => v.id === active) ? null : group.views.map((view) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(SortableRow, { id: view.id, disabled: !(rights.admin || view.personal) || view.presentation?.locked === true, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-              import_controls2.Tile,
+              import_controls4.Tile,
               {
                 variant: "quiet",
                 selected: view.id === active,
@@ -40182,7 +40179,7 @@ function ViewBar({ tableId, activeViewId, onActiveView, seed, settings, onViews,
               /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_design_system112.Button, { size: "sm", type: "submit", className: "h-7", children: "Save" })
             ] }),
             rights.admin ? /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("label", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls2.Switch, { checked: namingPersonal, onCheckedChange: setNamingPersonal, "data-view-new-personal": "" }),
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls4.Switch, { checked: namingPersonal, onCheckedChange: setNamingPersonal, "data-view-new-personal": "" }),
               "Personal (only you see it)"
             ] }) : null
           ]
@@ -40194,8 +40191,8 @@ function ViewBar({ tableId, activeViewId, onActiveView, seed, settings, onViews,
           current.name,
           "\u201D to"
         ] }),
-        (0, import_views2.sectionNames)(views).map((name) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls2.Tile, { variant: "quiet", disabled: current.section === name, title: name, onClick: () => void moveToSection(current, name) }, name)),
-        current.section ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls2.Tile, { variant: "quiet", "data-view-section-none": "", title: "No section", onClick: () => void moveToSection(current, null) }) : null,
+        (0, import_views2.sectionNames)(views).map((name) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls4.Tile, { variant: "quiet", disabled: current.section === name, title: name, onClick: () => void moveToSection(current, name) }, name)),
+        current.section ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_controls4.Tile, { variant: "quiet", "data-view-section-none": "", title: "No section", onClick: () => void moveToSection(current, null) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
           "form",
           {
@@ -40255,7 +40252,7 @@ function ViewBar({ tableId, activeViewId, onActiveView, seed, settings, onViews,
         return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
           reasons.map((reason) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "truncate px-2 py-1 text-xs text-muted-foreground", "data-view-actions-reason": "", title: reason, children: reason }, reason)),
           actions.map((action3) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-            import_controls2.Tile,
+            import_controls4.Tile,
             {
               variant: "quiet",
               ...action3.destructive ? { danger: true } : {},
@@ -40393,6 +40390,7 @@ var import_format11 = require("@ai-matrx/kit/format");
 var import_react236 = require("react");
 var import_react237 = require("@ai-matrx/records/react");
 var import_design_system114 = require("@ai-matrx/design-system");
+var import_controls5 = require("@ai-matrx/design-system/controls");
 var import_text_case15 = require("@ai-matrx/kit/text-case");
 var import_jsx_runtime133 = require("react/jsx-runtime");
 var DUE_WORD = DUE_STATE_LABEL;
@@ -40544,16 +40542,13 @@ function ChecklistRunner({
         active.overdue > 0 ? ` \xB7 ${active.overdue} overdue` : ""
       ] }) : null,
       runs && runs.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-        "select",
+        import_controls5.Select,
         {
           "aria-label": "Checklist run",
-          className: "ml-auto h-7 rounded border bg-background px-1 text-xs",
+          className: "ml-auto",
           value: activeId ?? "",
-          onChange: (e) => setActiveId(e.target.value),
-          children: runs.map((r) => /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("option", { value: r.run_id, children: [
-            r.name,
-            r.about ? ` \u2014 ${r.about}` : ""
-          ] }, r.run_id))
+          onValueChange: (v) => setActiveId(v),
+          options: runs.map((r) => ({ value: r.run_id, label: `${r.name}${r.about ? ` \u2014 ${r.about}` : ""}` }))
         }
       ) : null
     ] }),
@@ -40636,19 +40631,18 @@ function StepRow({
         ] }),
         unassigned && onAssign && members && members.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("label", { className: "mt-1 flex items-center gap-1.5 pl-7 text-[11px] text-muted-foreground", children: [
           "Give it to",
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
-            "select",
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            import_controls5.Select,
             {
-              className: "h-7 rounded border bg-background px-1 text-xs text-foreground",
               "aria-label": `Give ${step2.title} to`,
               value: "",
               disabled: busy,
-              onChange: (e) => {
-                if (e.target.value) onAssign(e.target.value);
+              onValueChange: (v) => {
+                if (v) onAssign(v);
               },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("option", { value: "", children: "Choose a person" }),
-                members.map((m) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("option", { value: m.userId, children: m.name || m.email || "A member" }, m.userId))
+              options: [
+                { value: "", label: "Choose a person" },
+                ...members.map((m) => ({ value: m.userId, label: m.name || m.email || "A member" }))
               ]
             }
           )
@@ -41126,13 +41120,12 @@ function ChecklistTemplateEditor({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-          "select",
+          import_controls5.Select,
           {
             "aria-label": `Step ${index + 1} asks for`,
-            className: "h-7 rounded border bg-background px-1 text-xs",
             value: row.requires,
-            onChange: (e) => change(index, { requires: e.target.value }),
-            children: REQUIRES_KINDS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("option", { value: kind, children: kind === "none" ? "just a tick" : REQUIRES_WORD[kind] ?? kind }, kind))
+            onValueChange: (v) => change(index, { requires: v }),
+            options: REQUIRES_KINDS.map((kind) => ({ value: kind, label: kind === "none" ? "just a tick" : REQUIRES_WORD[kind] ?? kind }))
           }
         ),
         row.requires === "answer" || row.requires === "record_field" ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
@@ -42077,7 +42070,7 @@ var import_react240 = require("react");
 var import_records64 = require("@ai-matrx/records");
 var import_react241 = require("@ai-matrx/records/react");
 var import_design_system116 = require("@ai-matrx/design-system");
-var import_controls3 = require("@ai-matrx/design-system/controls");
+var import_controls6 = require("@ai-matrx/design-system/controls");
 var import_text_case16 = require("@ai-matrx/kit/text-case");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 function endOfDayIso(day2, zone = getPersonTimeZone()) {
@@ -42118,7 +42111,7 @@ function AsOfControl({ value, onChange, className }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: (0, import_design_system116.cn)("flex h-6 items-center gap-1", className), "data-records-as-of": "", children: [
     /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-      import_controls3.Field,
+      import_controls6.Field,
       {
         type: "text",
         inputMode: "numeric",
@@ -42148,7 +42141,7 @@ function AsOfControl({ value, onChange, className }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { role: "group", "aria-label": "Clock", className: "flex overflow-hidden rounded border text-[11px]", children: ["recorded", "world"].map((which) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-      import_controls3.Button,
+      import_controls6.Button,
       {
         variant: clock === which ? "primary" : "quiet",
         pressed: clock === which,
@@ -43317,6 +43310,7 @@ function FormResultsPanel({ form, className }) {
 var import_react252 = require("react");
 var import_react253 = require("@ai-matrx/records/react");
 var import_design_system122 = require("@ai-matrx/design-system");
+var import_controls7 = require("@ai-matrx/design-system/controls");
 var import_jsx_runtime141 = require("react/jsx-runtime");
 var RESTATING_REPLACES = "Saving replaces what this portal shows: a table you untick stops being visible to every client the moment you save. Who is invited is not touched.";
 function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
@@ -43523,15 +43517,15 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("label", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_design_system122.Label, { className: "text-xs font-medium", children: "Which table holds your clients" }),
-      /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
-        "select",
+      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+        import_controls7.Select,
         {
-          className: "h-9 rounded border bg-background px-2 text-sm",
+          "aria-label": "Which table holds your clients",
           value: clientTableId ?? "",
-          onChange: (e) => setClientTableId(e.target.value || null),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("option", { value: "", children: "Pick the table whose records are the people signing in" }),
-            all.map((t) => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("option", { value: t.id, children: t.name }, t.id))
+          onValueChange: (v) => setClientTableId(v || null),
+          options: [
+            { value: "", label: "Pick the table whose records are the people signing in" },
+            ...all.map((t) => ({ value: t.id, label: t.name }))
           ]
         }
       ),
@@ -43576,15 +43570,15 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
             ) : /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "mt-2 flex flex-col gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("label", { className: "flex flex-col gap-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_design_system122.Label, { className: "text-xs font-medium", children: "Which field says whose row it is" }),
-                /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
-                  "select",
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+                  import_controls7.Select,
                   {
-                    className: "h-8 rounded border bg-background px-2 text-sm",
+                    "aria-label": "Which field says whose row it is",
                     value: exposure?.namesVia ?? "",
-                    onChange: (e) => patch(t.id, { namesVia: e.target.value }),
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("option", { value: "", children: "Pick the field that names the client" }),
-                      ties.map((f) => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("option", { value: f.key, children: fieldName(f) }, f.key))
+                    onValueChange: (v) => patch(t.id, { namesVia: v }),
+                    options: [
+                      { value: "", label: "Pick the field that names the client" },
+                      ...ties.map((f) => ({ value: f.key, label: fieldName(f) }))
                     ]
                   }
                 )
@@ -44812,6 +44806,7 @@ var import_react258 = require("react");
 var import_react259 = require("@ai-matrx/records/react");
 var import_records66 = require("@ai-matrx/records");
 var import_design_system127 = require("@ai-matrx/design-system");
+var import_controls8 = require("@ai-matrx/design-system/controls");
 
 // src/scheduleWords.ts
 var DAYS3 = {
@@ -45015,15 +45010,15 @@ function DigestScheduler({
     ] }),
     savedViewId ? null : /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("label", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_design_system127.Label, { className: "text-xs font-medium", children: "What it summarises" }),
-      /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
-        "select",
+      /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+        import_controls8.Select,
         {
-          className: "h-9 rounded border bg-background px-2 text-sm",
+          "aria-label": "What it summarises",
           value: viewId,
-          onChange: (e) => setViewId(e.target.value),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("option", { value: "new", children: subjectName?.trim() ? `What I am looking at now (${subjectName.trim()})` : "What I am looking at now" }),
-            (views ?? []).map((v) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("option", { value: v.view_id, children: v.name }, v.view_id))
+          onValueChange: setViewId,
+          options: [
+            { value: "new", label: subjectName?.trim() ? `What I am looking at now (${subjectName.trim()})` : "What I am looking at now" },
+            ...(views ?? []).map((v) => ({ value: v.view_id, label: v.name }))
           ]
         }
       ),
@@ -45033,24 +45028,27 @@ function DigestScheduler({
       /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("label", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_design_system127.Label, { className: "text-xs font-medium", children: "How often" }),
         /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-          "select",
+          import_controls8.Select,
           {
-            className: "h-9 rounded border bg-background px-2 text-sm",
+            "aria-label": "How often",
             value: cadence,
-            onChange: (e) => setCadence(e.target.value),
-            children: (cadences.length > 0 ? cadences : ["hourly", "daily", "weekly"]).map((c) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("option", { value: c, children: CADENCE_WORDS[c] ?? c }, c))
+            onValueChange: (c) => setCadence(c),
+            options: (cadences.length > 0 ? cadences : ["hourly", "daily", "weekly"]).map((c) => ({
+              value: c,
+              label: CADENCE_WORDS[c] ?? c
+            }))
           }
         )
       ] }),
       cadence === "weekly" ? /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("label", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_design_system127.Label, { className: "text-xs font-medium", children: "Which day" }),
         /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-          "select",
+          import_controls8.Select,
           {
-            className: "h-9 rounded border bg-background px-2 text-sm",
+            "aria-label": "Which day",
             value: weekday,
-            onChange: (e) => setWeekday(e.target.value),
-            children: WEEKDAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("option", { value: d, children: d[0].toUpperCase() + d.slice(1) }, d))
+            onValueChange: setWeekday,
+            options: WEEKDAYS.map((d) => ({ value: d, label: d[0].toUpperCase() + d.slice(1) }))
           }
         )
       ] }) : null,
@@ -45074,12 +45072,12 @@ function DigestScheduler({
       /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("label", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_design_system127.Label, { className: "text-xs font-medium", children: "Where it arrives" }),
         /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-          "select",
+          import_controls8.Select,
           {
-            className: "h-9 rounded border bg-background px-2 text-sm",
+            "aria-label": "Where it arrives",
             value: channel,
-            onChange: (e) => setChannel(e.target.value),
-            children: Object.entries(CHANNEL_WORDS).map(([key, words2]) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("option", { value: key, children: words2 }, key))
+            onValueChange: setChannel,
+            options: Object.entries(CHANNEL_WORDS).map(([key, words2]) => ({ value: key, label: words2 }))
           }
         )
       ] })
@@ -45611,6 +45609,7 @@ function SubscriptionsPanel({ tableId, activeRuleId, className }) {
 // src/FormBuilder.tsx
 var import_clipboard10 = require("@ai-matrx/kit/clipboard");
 var import_design_system132 = require("@ai-matrx/design-system");
+var import_controls9 = require("@ai-matrx/design-system/controls");
 var import_react267 = require("react");
 var import_core23 = require("@dnd-kit/core");
 var import_sortable2 = require("@dnd-kit/sortable");
@@ -47057,12 +47056,15 @@ function FormBuilder({ tableId, seed, activeFormId, onActiveForm, startWithOne,
             /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("label", { className: "flex flex-col gap-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(import_design_system133.Label, { className: "text-xs font-medium", children: "Flow" }),
               /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-                "select",
+                import_controls9.Select,
                 {
-                  className: "h-9 rounded border bg-background px-2 text-sm",
+                  "aria-label": "Flow",
                   value: draft.flow ?? "one-at-a-time",
-                  onChange: (e) => patch({ flow: e.target.value }),
-                  children: import_forms3.FORM_FLOWS.map((flow) => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("option", { value: flow, children: flow === "one-at-a-time" ? "One question at a time" : "All on one page" }, flow))
+                  onValueChange: (flow) => patch({ flow }),
+                  options: import_forms3.FORM_FLOWS.map((flow) => ({
+                    value: flow,
+                    label: flow === "one-at-a-time" ? "One question at a time" : "All on one page"
+                  }))
                 }
               )
             ] }),
@@ -48008,6 +48010,7 @@ var import_react276 = require("react");
 var import_react277 = require("@ai-matrx/records/react");
 var import_records69 = require("@ai-matrx/records");
 var import_design_system137 = require("@ai-matrx/design-system");
+var import_controls10 = require("@ai-matrx/design-system/controls");
 var import_jsx_runtime155 = require("react/jsx-runtime");
 var CADENCE_WORDS2 = SUBSCRIPTION_CADENCE_LABEL;
 var CHANNEL_WORDS3 = SUBSCRIPTION_CHANNEL_LABEL;
@@ -48021,6 +48024,9 @@ function NotifyRuleEditor({ tableId, seed, chosenRuleId, onChoose, className })
   const [views, setViews] = (0, import_react276.useState)(null);
   const [error, setError] = (0, import_react276.useState)(null);
   const [busy, setBusy] = (0, import_react276.useState)(false);
+  const [pickView, setPickView] = (0, import_react276.useState)("");
+  const [pickCadence, setPickCadence] = (0, import_react276.useState)("");
+  const [pickChannel, setPickChannel] = (0, import_react276.useState)("in_app");
   const [stopping, setStopping] = (0, import_react276.useState)(null);
   const load = (0, import_react276.useCallback)(async () => {
     const [held, offered] = await Promise.all([
@@ -48218,9 +48224,36 @@ function NotifyRuleEditor({ tableId, seed, chosenRuleId, onChoose, className })
           if (view) void subscribe(view, name, cadence, channel, schedule, quiet2);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("select", { name: "view", "aria-label": "View to be told about", className: "h-7 rounded border bg-background px-1 text-xs", children: views.map((view) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("option", { value: view.id, children: view.name }, view.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("select", { name: "cadence", "aria-label": "How often", className: "h-7 rounded border bg-background px-1 text-xs", children: (cadences.length > 0 ? cadences : ["instant"]).map((cadence) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("option", { value: cadence, children: CADENCE_WORDS2[cadence] ?? cadence }, cadence)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("select", { name: "channel", "aria-label": "Where it arrives", className: "h-7 rounded border bg-background px-1 text-xs", children: ["in_app", "email", "sms"].map((channel) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("option", { value: channel, children: CHANNEL_WORDS3[channel] }, channel)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("input", { type: "hidden", name: "view", value: pickView || (views[0]?.id ?? "") }),
+          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+            import_controls10.Select,
+            {
+              "aria-label": "View to be told about",
+              value: pickView || (views[0]?.id ?? ""),
+              onValueChange: setPickView,
+              options: views.map((view) => ({ value: view.id, label: view.name }))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("input", { type: "hidden", name: "cadence", value: pickCadence || (cadences.length > 0 ? cadences : ["instant"])[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+            import_controls10.Select,
+            {
+              "aria-label": "How often",
+              value: pickCadence || (cadences.length > 0 ? cadences : ["instant"])[0],
+              onValueChange: setPickCadence,
+              options: (cadences.length > 0 ? cadences : ["instant"]).map((cadence) => ({ value: cadence, label: CADENCE_WORDS2[cadence] ?? cadence }))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("input", { type: "hidden", name: "channel", value: pickChannel }),
+          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+            import_controls10.Select,
+            {
+              "aria-label": "Where it arrives",
+              value: pickChannel,
+              onValueChange: setPickChannel,
+              options: ["in_app", "email", "sms"].map((channel) => ({ value: channel, label: CHANNEL_WORDS3[channel] ?? channel }))
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
             "input",
             {
@@ -48268,6 +48301,7 @@ var import_core24 = require("@dnd-kit/core");
 var import_sortable3 = require("@dnd-kit/sortable");
 var import_utilities3 = require("@dnd-kit/utilities");
 var import_design_system138 = require("@ai-matrx/design-system");
+var import_controls11 = require("@ai-matrx/design-system/controls");
 
 // src/dashboardLayout.ts
 var SPAN_CHOICES = [
@@ -48385,13 +48419,13 @@ function GridCell2({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
-            "select",
+            import_controls11.Select,
             {
               "aria-label": `Width of ${item.title}`,
-              className: "ml-auto h-7 rounded border bg-background px-1 text-xs",
-              value: snapSpan(item.span),
-              onChange: (e) => onSpan(index, Number(e.target.value)),
-              children: SPAN_CHOICES.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("option", { value: choice.span, children: choice.label }, choice.span))
+              className: "ml-auto",
+              value: String(snapSpan(item.span)),
+              onValueChange: (v) => onSpan(index, Number(v)),
+              options: SPAN_CHOICES.map((choice) => ({ value: String(choice.span), label: choice.label }))
             }
           )
         ] }) : null,
@@ -48526,6 +48560,9 @@ function AddChart({ subject, onAdd, onClose }) {
   ] });
 }
 
+// src/DashboardCanvas.tsx
+var import_controls12 = require("@ai-matrx/design-system/controls");
+
 // src/pages.ts
 var import_records70 = require("@ai-matrx/records");
 var PAGE_BLOCK_KINDS = ["list", "record", "button", "form", "filter", "chart", "heading", "text", "applet"];
@@ -48968,13 +49005,12 @@ function BlockSettings({
   const fields = own3.data ?? [];
   return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "flex flex-col items-stretch gap-1.5 text-xs", children: [
     /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-      "select",
+      import_controls12.Select,
       {
         "aria-label": `Shape of ${title}`,
-        className: "h-7 rounded border bg-background px-1 text-xs",
         value: spec.kind,
-        onChange: (e) => onChange({ ...spec, kind: e.target.value }),
-        children: CHART_KINDS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("option", { value: kind, children: CHART_KIND_LABEL[kind] }, kind))
+        onValueChange: (kind) => onChange({ ...spec, kind }),
+        options: CHART_KINDS.map((kind) => ({ value: kind, label: CHART_KIND_LABEL[kind] }))
       }
     ),
     (spec.groupBy ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(