@ai-matrx/records-ui 0.115.73 → 0.115.74

package/dist/index.js

@@ -28409,7 +28409,7 @@ import {
   Checkbox as Checkbox11,
   ConfirmDialog as ConfirmDialog6,
   Input as Input4,
-  Select as Select11,
+  Select as Select12,
   SelectContent as SelectContent11,
   SelectItem as SelectItem11,
   SelectTrigger as SelectTrigger11,
@@ -29171,6 +29171,7 @@ import {
   bookingPath
 } from "@ai-matrx/records";
 import { BasicInput as BasicInput17, BasicTextarea as BasicTextarea7, Button as Button54, Checkbox as Checkbox10, Label as Label18, Skeleton as Skeleton8, cn as cn44 } from "@ai-matrx/design-system";
+import { Select as Select11 } from "@ai-matrx/design-system/controls";
 
 // src/publicQuestions.ts
 var CANNOT_ASK = {
@@ -29473,39 +29474,39 @@ function BookingBuilder({ tableId, bookingId, onSaved, onClose, startNew, classN
         /* @__PURE__ */ jsxs83("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsx94(Label18, { className: "text-xs font-medium", children: "How long one appointment is" }),
           /* @__PURE__ */ jsx94(
-            "select",
+            Select11,
             {
-              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__ */ jsxs83("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__ */ jsxs83("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsx94(Label18, { className: "text-xs font-medium", children: "Gap kept after each one" }),
           /* @__PURE__ */ jsx94(
-            "select",
+            Select11,
             {
-              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__ */ jsx94("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__ */ jsxs83("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsx94(Label18, { className: "text-xs font-medium", children: "Earliest somebody may book" }),
           /* @__PURE__ */ jsx94(
-            "select",
+            Select11,
             {
-              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__ */ jsx94("option", { value: n, children: n === 0 ? "Right away" : n === 1440 ? "A day from now" : `${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" : `${formatDurationMinutes(n, { style: "long" })} from now`
+              }))
             }
           )
         ] }),
@@ -29524,15 +29525,12 @@ function BookingBuilder({ tableId, bookingId, onSaved, onClose, startNew, classN
         /* @__PURE__ */ jsxs83("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsx94(Label18, { className: "text-xs font-medium", children: "How far ahead the page offers" }),
           /* @__PURE__ */ jsx94(
-            "select",
+            Select11,
             {
-              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__ */ jsxs83("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` }))
             }
           )
         ] }),
@@ -30777,7 +30775,7 @@ function SaveToTable({ source, shapeIndex = 0, onOpenTable, onSaved, onClose, ma
   const busy = phase === "making" || phase === "writing";
   return /* @__PURE__ */ jsxs89("div", { className: cn48("flex min-w-0 flex-col gap-3 text-sm", className), "data-save-to-table": "", children: [
     /* @__PURE__ */ jsxs89("div", { className: "flex flex-wrap items-center gap-2", children: [
-      shapes.length > 1 ? /* @__PURE__ */ jsxs89(Select11, { value: String(which), onValueChange: (v) => chooseShape(Number(v)), disabled: busy || phase === "done", children: [
+      shapes.length > 1 ? /* @__PURE__ */ jsxs89(Select12, { value: String(which), onValueChange: (v) => chooseShape(Number(v)), disabled: busy || phase === "done", children: [
         /* @__PURE__ */ jsx100(SelectTrigger11, { size: "sm", "aria-label": "Which of these to save", className: "min-w-[16rem]", children: /* @__PURE__ */ jsx100(SelectValue11, {}) }),
         /* @__PURE__ */ jsx100(SelectContent11, { children: shapes.map((s, i) => /* @__PURE__ */ jsxs89(SelectItem11, { value: String(i), children: [
           s.name ? `${s.name} \u2014 ` : "",
@@ -30788,7 +30786,7 @@ function SaveToTable({ source, shapeIndex = 0, onOpenTable, onSaved, onClose, ma
         shape.said
       ] }),
       shape.splits.length > 0 ? /* @__PURE__ */ jsxs89(
-        Select11,
+        Select12,
         {
           value: split || "__one__",
           onValueChange: (v) => {
@@ -30902,7 +30900,7 @@ function SaveToTable({ source, shapeIndex = 0, onOpenTable, onSaved, onClose, ma
                   }
                 ),
                 /* @__PURE__ */ jsxs89(
-                  Select11,
+                  Select12,
                   {
                     value: c.guess.type,
                     disabled: busy || !c.use,
@@ -30942,7 +30940,7 @@ function SaveToTable({ source, shapeIndex = 0, onOpenTable, onSaved, onClose, ma
           /* @__PURE__ */ jsx100("span", { className: "text-xs text-muted-foreground", children: "Nothing is made until you press it." })
         ] })
       ] }) : /* @__PURE__ */ jsxs89("div", { className: "flex flex-col gap-2", "data-save-to-table-existing": "", children: [
-        tables.loading || levels.loading ? /* @__PURE__ */ jsx100("p", { className: "text-muted-foreground", children: "Reading your tables\u2026" }) : tables.error ? /* @__PURE__ */ jsx100(RefusalNotice, { error: tables.error }) : writable.length === 0 ? /* @__PURE__ */ jsx100("p", { className: "text-muted-foreground", children: "There is no table in this organization you can add rows to. Make a new one instead." }) : /* @__PURE__ */ jsxs89(Select11, { value: tableId, onValueChange: setTableId, disabled: busy, children: [
+        tables.loading || levels.loading ? /* @__PURE__ */ jsx100("p", { className: "text-muted-foreground", children: "Reading your tables\u2026" }) : tables.error ? /* @__PURE__ */ jsx100(RefusalNotice, { error: tables.error }) : writable.length === 0 ? /* @__PURE__ */ jsx100("p", { className: "text-muted-foreground", children: "There is no table in this organization you can add rows to. Make a new one instead." }) : /* @__PURE__ */ jsxs89(Select12, { value: tableId, onValueChange: setTableId, disabled: busy, children: [
           /* @__PURE__ */ jsx100(SelectTrigger11, { size: "sm", "aria-label": "Which table to add the rows to", className: "min-w-[16rem]", children: /* @__PURE__ */ jsx100(SelectValue11, { placeholder: "Choose a table" }) }),
           /* @__PURE__ */ jsx100(SelectContent11, { children: writable.map((t) => /* @__PURE__ */ jsx100(SelectItem11, { value: t.id, children: t.name }, t.id)) })
         ] }),
@@ -31023,6 +31021,7 @@ function SaveToTable({ source, shapeIndex = 0, onOpenTable, onSaved, onClose, ma
 import { useCallback as useCallback34, useEffect as useEffect64, useMemo as useMemo46, useState as useState81 } from "react";
 import { useFields as useFields16, useRecordsClient as useRecordsClient54, useTable as useTable14 } from "@ai-matrx/records/react";
 import { BasicInput as BasicInput18, BasicTextarea as BasicTextarea8, Button as Button61, Separator as Separator7, Skeleton as Skeleton11, cn as cn49 } from "@ai-matrx/design-system";
+import { Select as Select13 } from "@ai-matrx/design-system/controls";
 import { jsx as jsx101, jsxs as jsxs90 } from "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.";
@@ -31153,16 +31152,15 @@ function StageRulesSection({ tableId, stage, className }) {
     /* @__PURE__ */ jsxs90("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx101("span", { className: "font-medium", children: "Rules for entering" }),
       /* @__PURE__ */ jsx101(
-        "select",
+        Select13,
         {
           "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__ */ jsx101("option", { value: s.key, children: s.label }, s.key))
+          options: stages.filter((s) => !s.retired).map((s) => ({ value: s.key, label: s.label }))
         }
       ),
       /* @__PURE__ */ jsx101("span", { className: "text-muted-foreground", children: gates.length }),
@@ -31230,13 +31228,12 @@ function StageRulesSection({ tableId, stage, className }) {
       /* @__PURE__ */ jsxs90("div", { className: "flex flex-wrap items-center gap-1", children: [
         /* @__PURE__ */ jsx101("span", { className: "text-muted-foreground", children: "and when it does not" }),
         /* @__PURE__ */ jsx101(
-          "select",
+          Select13,
           {
             "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__ */ jsx101("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__ */ jsx101("span", { className: "text-muted-foreground", children: ON_FAIL.find((o) => o.value === (draft.on_fail ?? "refuse"))?.note })
@@ -31756,7 +31753,7 @@ import {
 import { useRecordsClient as useRecordsClient59, useTable as useTable15 } from "@ai-matrx/records/react";
 import {
   Button as Button65,
-  Select as Select12,
+  Select as Select14,
   SelectContent as SelectContent12,
   SelectItem as SelectItem12,
   SelectTrigger as SelectTrigger12,
@@ -31788,7 +31785,7 @@ function ShownToSelect({
   onChange,
   testId
 }) {
-  return /* @__PURE__ */ jsxs95(Select12, { value, onValueChange: (next) => isShownTo(next) ? onChange(next) : void 0, children: [
+  return /* @__PURE__ */ jsxs95(Select14, { value, onValueChange: (next) => isShownTo(next) ? onChange(next) : void 0, children: [
     /* @__PURE__ */ jsx106(SelectTrigger12, { size: "sm", "aria-label": label, className: "h-7 min-w-[8rem] text-xs", "data-testid": testId, children: /* @__PURE__ */ jsx106(SelectValue12, {}) }),
     /* @__PURE__ */ jsx106(SelectContent12, { children: allowed.map((word) => /* @__PURE__ */ jsx106(SelectItem12, { value: word, children: SHOWN_TO_LABEL[word] }, word)) })
   ] });
@@ -33223,7 +33220,7 @@ function lookAfterReset(look) {
 import { useEffect as useEffect87, useMemo as useMemo62, useState as useState106 } from "react";
 import { mayDrag as mayDrag4, useFields as useFields21, useRecordPage as useRecordPage2, useRecordsClient as useRecordsClient71, useTable as useTable21 } from "@ai-matrx/records/react";
 import { isButtonField as isButtonField5, newerKindOf as newerKindOf7, stableFilterKey as stableFilterKey4 } from "@ai-matrx/records";
-import { Button as Button77, Select as Select17, SelectContent as SelectContent17, SelectItem as SelectItem17, SelectTrigger as SelectTrigger17, SelectValue as SelectValue17, cn as cn62 } from "@ai-matrx/design-system";
+import { Button as Button77, Select as Select19, SelectContent as SelectContent17, SelectItem as SelectItem17, SelectTrigger as SelectTrigger17, SelectValue as SelectValue17, cn as cn62 } from "@ai-matrx/design-system";
 import {
   CHOICE_CHIP_CLASS as CHOICE_CHIP_CLASS5,
   EMPTY_TABLE_STYLE as EMPTY_TABLE_STYLE2,
@@ -34234,7 +34231,7 @@ function CardFieldsInline({ row, fields }) {
 // src/CalendarView.tsx
 import { useEffect as useEffect79, useMemo as useMemo56, useRef as useRef47, useState as useState98 } from "react";
 import { mayDrag as mayDrag2 } from "@ai-matrx/records/react";
-import { Button as Button74, Select as Select13, SelectContent as SelectContent13, SelectItem as SelectItem13, SelectTrigger as SelectTrigger13, SelectValue as SelectValue13, cn as cn57 } from "@ai-matrx/design-system";
+import { Button as Button74, Select as Select15, SelectContent as SelectContent13, SelectItem as SelectItem13, SelectTrigger as SelectTrigger13, SelectValue as SelectValue13, cn as cn57 } from "@ai-matrx/design-system";
 import { CHOICE_CHIP_CLASS as CHOICE_CHIP_CLASS3 } from "@ai-matrx/design-system/data-table";
 
 // src/weekStart.ts
@@ -34916,7 +34913,7 @@ function CalendarView({
   };
   const picker = (label, value, candidates, onPick, kept, unusual) => /* @__PURE__ */ jsxs108("div", { className: "flex items-center gap-1.5 whitespace-nowrap text-xs", "data-calendar-setting": label, children: [
     /* @__PURE__ */ jsx119("span", { className: "text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxs108(Select13, { value: value ?? NONE, onValueChange: (v) => onPick(v === NONE ? null : v), children: [
+    /* @__PURE__ */ jsxs108(Select15, { value: value ?? NONE, onValueChange: (v) => onPick(v === NONE ? null : v), children: [
       /* @__PURE__ */ jsx119(SelectTrigger13, { size: "sm", className: "h-7 min-w-24 text-xs", "aria-label": `${label} column`, ...kept ? {} : { title: "Kept for this visit only" }, children: /* @__PURE__ */ jsx119(SelectValue13, { placeholder: "Choose" }) }),
       /* @__PURE__ */ jsxs108(SelectContent13, { children: [
         /* @__PURE__ */ jsx119(SelectItem13, { value: NONE, children: "None" }),
@@ -35296,7 +35293,7 @@ function weekHeading(first) {
 // src/TimelineView.tsx
 import { useEffect as useEffect80, useMemo as useMemo57, useRef as useRef48, useState as useState99 } from "react";
 import { mayDrag as mayDrag3 } from "@ai-matrx/records/react";
-import { DropdownMenu as DropdownMenu8, DropdownMenuCheckboxItem as DropdownMenuCheckboxItem2, DropdownMenuContent as DropdownMenuContent8, DropdownMenuItem as DropdownMenuItem7, DropdownMenuRadioGroup as DropdownMenuRadioGroup2, DropdownMenuRadioItem as DropdownMenuRadioItem2, DropdownMenuSeparator as DropdownMenuSeparator4, DropdownMenuSub as DropdownMenuSub2, DropdownMenuSubContent as DropdownMenuSubContent2, DropdownMenuSubTrigger as DropdownMenuSubTrigger2, DropdownMenuTrigger as DropdownMenuTrigger8, Button as Button75, Select as Select14, SelectContent as SelectContent14, SelectItem as SelectItem14, SelectTrigger as SelectTrigger14, SelectValue as SelectValue14, cn as cn58 } from "@ai-matrx/design-system";
+import { DropdownMenu as DropdownMenu8, DropdownMenuCheckboxItem as DropdownMenuCheckboxItem2, DropdownMenuContent as DropdownMenuContent8, DropdownMenuItem as DropdownMenuItem7, DropdownMenuRadioGroup as DropdownMenuRadioGroup2, DropdownMenuRadioItem as DropdownMenuRadioItem2, DropdownMenuSeparator as DropdownMenuSeparator4, DropdownMenuSub as DropdownMenuSub2, DropdownMenuSubContent as DropdownMenuSubContent2, DropdownMenuSubTrigger as DropdownMenuSubTrigger2, DropdownMenuTrigger as DropdownMenuTrigger8, Button as Button75, Select as Select16, SelectContent as SelectContent14, SelectItem as SelectItem14, SelectTrigger as SelectTrigger14, SelectValue as SelectValue14, cn as cn58 } from "@ai-matrx/design-system";
 import { CHOICE_CHIP_CLASS as CHOICE_CHIP_CLASS4 } from "@ai-matrx/design-system/data-table";
 import { useOptionalRecordsClient as useOptionalRecordsClient15 } from "@ai-matrx/records/react";
 
@@ -36135,7 +36132,7 @@ function TimelineView({
   };
   const picker = (label, value, options, onPick, opts) => /* @__PURE__ */ jsxs109("div", { className: "flex items-center gap-1.5 whitespace-nowrap text-xs", "data-timeline-setting": label, children: [
     /* @__PURE__ */ jsx120("span", { className: "text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxs109(Select14, { value: value ?? NONE2, onValueChange: (v) => onPick(v === NONE2 ? null : v), children: [
+    /* @__PURE__ */ jsxs109(Select16, { value: value ?? NONE2, onValueChange: (v) => onPick(v === NONE2 ? null : v), children: [
       /* @__PURE__ */ jsx120(SelectTrigger14, { size: "sm", className: "h-7 min-w-24 text-xs", "aria-label": `${label} column`, ...opts?.kept === false ? { title: "Kept for this visit only" } : {}, children: /* @__PURE__ */ jsx120(SelectValue14, { placeholder: "Choose" }) }),
       /* @__PURE__ */ jsxs109(SelectContent14, { children: [
         opts?.none !== false ? /* @__PURE__ */ jsx120(SelectItem14, { value: NONE2, children: "None" }) : null,
@@ -36797,7 +36794,7 @@ function BoardOptions({
 
 // src/ListView.tsx
 import { useMemo as useMemo58 } from "react";
-import { Select as Select15, SelectContent as SelectContent15, SelectItem as SelectItem15, SelectTrigger as SelectTrigger15, SelectValue as SelectValue15, cn as cn59 } from "@ai-matrx/design-system";
+import { Select as Select17, SelectContent as SelectContent15, SelectItem as SelectItem15, SelectTrigger as SelectTrigger15, SelectValue as SelectValue15, cn as cn59 } from "@ai-matrx/design-system";
 import { resolveRowColor as resolveRowColor3, ROW_TINT_CLASS as ROW_TINT_CLASS2 } from "@ai-matrx/design-system/data-table";
 import { jsx as jsx124, jsxs as jsxs112 } from "react/jsx-runtime";
 var LIST_DEFAULT_FIELDS = 4;
@@ -36856,7 +36853,7 @@ function ListView({
       onGroupingChange ? /* @__PURE__ */ jsxs112("div", { className: "ml-auto flex items-center gap-1.5", "data-records-list-group": "", children: [
         /* @__PURE__ */ jsx124("span", { className: "text-muted-foreground", children: "Group by" }),
         /* @__PURE__ */ jsxs112(
-          Select15,
+          Select17,
           {
             value: groupKey ?? NO_GROUP,
             onValueChange: (next) => onGroupingChange(next === NO_GROUP ? void 0 : { ...grouping ?? {}, field: next, collapsed: [] }),
@@ -36980,7 +36977,7 @@ function ListRow({
 import { useEffect as useEffect86, useMemo as useMemo61, useState as useState105 } from "react";
 import { useRecordsClient as useRecordsClient70 } from "@ai-matrx/records/react";
 import { fieldKindFor as fieldKindFor2, measureKey as measureKey4 } from "@ai-matrx/records";
-import { Select as Select16, SelectContent as SelectContent16, SelectItem as SelectItem16, SelectTrigger as SelectTrigger16, SelectValue as SelectValue16 } from "@ai-matrx/design-system";
+import { Select as Select18, SelectContent as SelectContent16, SelectItem as SelectItem16, SelectTrigger as SelectTrigger16, SelectValue as SelectValue16 } from "@ai-matrx/design-system";
 
 // src/ChartBlock.tsx
 import { useMemo as useMemo60 } from "react";
@@ -37990,22 +37987,22 @@ function ChartLayout({ view, fields, filter, onChange, remembered }) {
   return /* @__PURE__ */ jsxs115("div", { className: "flex min-h-0 flex-col gap-2", "data-records-chart-layout": "", "data-records-chart-measure": pickMeasure, children: [
     /* @__PURE__ */ jsxs115("div", { className: "flex flex-wrap items-center gap-2 text-xs", children: [
       /* @__PURE__ */ jsx127("span", { className: "text-muted-foreground", children: "Group by" }),
-      /* @__PURE__ */ jsxs115(Select16, { value: (view.groupField === void 0 ? defaultChartGroup(fields) : view.groupField) ?? "__none", onValueChange: (next) => onChange({ groupField: next === "__none" ? null : next }), children: [
+      /* @__PURE__ */ jsxs115(Select18, { value: (view.groupField === void 0 ? defaultChartGroup(fields) : view.groupField) ?? "__none", onValueChange: (next) => onChange({ groupField: next === "__none" ? null : next }), children: [
         /* @__PURE__ */ jsx127(SelectTrigger16, { size: "sm", className: "h-7 w-auto min-w-[8rem] text-xs", "aria-label": "Chart group by", children: /* @__PURE__ */ jsx127(SelectValue16, {}) }),
         /* @__PURE__ */ jsxs115(SelectContent16, { children: [
           /* @__PURE__ */ jsx127(SelectItem16, { value: "__none", children: "Everything together" }),
           groupable.map((f) => /* @__PURE__ */ jsx127(SelectItem16, { value: f.key, children: fieldName(f) }, f.key))
         ] })
       ] }),
-      /* @__PURE__ */ jsxs115(Select16, { value: q.kind, onValueChange: (next) => onChange({ chartKind: next }), children: [
+      /* @__PURE__ */ jsxs115(Select18, { value: q.kind, onValueChange: (next) => onChange({ chartKind: next }), children: [
         /* @__PURE__ */ jsx127(SelectTrigger16, { size: "sm", className: "h-7 w-auto min-w-[6rem] text-xs", "aria-label": "Chart shape", children: /* @__PURE__ */ jsx127(SelectValue16, {}) }),
         /* @__PURE__ */ jsx127(SelectContent16, { children: Object.keys(KIND_LABEL).map((k) => /* @__PURE__ */ jsx127(SelectItem16, { value: k, children: KIND_LABEL[k] }, k)) })
       ] }),
-      /* @__PURE__ */ jsxs115(Select16, { value: isChartMeasure(view.chartMeasure) ? view.chartMeasure : "count", onValueChange: (next) => onChange({ chartMeasure: next }), children: [
+      /* @__PURE__ */ jsxs115(Select18, { value: isChartMeasure(view.chartMeasure) ? view.chartMeasure : "count", onValueChange: (next) => onChange({ chartMeasure: next }), children: [
         /* @__PURE__ */ jsx127(SelectTrigger16, { size: "sm", className: "h-7 w-auto min-w-[6rem] text-xs", "aria-label": "Chart measure", children: /* @__PURE__ */ jsx127(SelectValue16, {}) }),
         /* @__PURE__ */ jsx127(SelectContent16, { children: Object.keys(MEASURE_LABEL2).map((m) => /* @__PURE__ */ jsx127(SelectItem16, { value: m, children: MEASURE_LABEL2[m] }, m)) })
       ] }),
-      view.chartMeasure === "sum" || view.chartMeasure === "avg" ? /* @__PURE__ */ jsxs115(Select16, { value: view.measure ?? "", onValueChange: (next) => onChange({ measure: next === "" ? null : next }), children: [
+      view.chartMeasure === "sum" || view.chartMeasure === "avg" ? /* @__PURE__ */ jsxs115(Select18, { value: view.measure ?? "", onValueChange: (next) => onChange({ measure: next === "" ? null : next }), children: [
         /* @__PURE__ */ jsx127(SelectTrigger16, { size: "sm", className: "h-7 w-auto min-w-[8rem] text-xs", "aria-label": "Chart measured field", children: /* @__PURE__ */ jsx127(SelectValue16, { placeholder: "Of which field" }) }),
         /* @__PURE__ */ jsx127(SelectContent16, { children: numeric.map((f) => /* @__PURE__ */ jsx127(SelectItem16, { value: f.key, children: fieldName(f) }, f.key)) })
       ] }) : null,
@@ -38703,7 +38700,7 @@ function FieldPicker({
   const options = unusual ? [...offerable, unusual] : offerable;
   return /* @__PURE__ */ jsxs116("div", { className: "flex items-center gap-1.5 text-xs", "data-records-view-field": layout, children: [
     /* @__PURE__ */ jsx128("span", { className: "text-muted-foreground", id: `view-field-${layout}-label`, children: label }),
-    options.length === 1 && chosen === options[0].key ? /* @__PURE__ */ jsx128("span", { className: "font-medium", "data-records-view-field-only": "", children: fieldName(options[0]) }) : /* @__PURE__ */ jsxs116(Select17, { value: chosen ?? "", onValueChange: (next) => onPick(next === "" ? null : next), children: [
+    options.length === 1 && chosen === options[0].key ? /* @__PURE__ */ jsx128("span", { className: "font-medium", "data-records-view-field-only": "", children: fieldName(options[0]) }) : /* @__PURE__ */ jsxs116(Select19, { value: chosen ?? "", onValueChange: (next) => onPick(next === "" ? null : next), children: [
       /* @__PURE__ */ jsx128(
         SelectTrigger17,
         {
@@ -40261,6 +40258,7 @@ import { formatAbsoluteDate, formatDurationMs } from "@ai-matrx/kit/format";
 import { useCallback as useCallback44, useEffect as useEffect92, useMemo as useMemo63, useState as useState111 } from "react";
 import { useRecordsClient as useRecordsClient76, useTable as useTable24 } from "@ai-matrx/records/react";
 import { Badge as Badge17, BasicInput as BasicInput22, BasicTextarea as BasicTextarea9, Button as Button82, Skeleton as Skeleton19, cn as cn67 } from "@ai-matrx/design-system";
+import { Select as Select20 } from "@ai-matrx/design-system/controls";
 import { humanizeIdentifier as humanizeIdentifier15 } from "@ai-matrx/kit/text-case";
 import { Fragment as Fragment50, jsx as jsx133, jsxs as jsxs121 } from "react/jsx-runtime";
 var DUE_WORD = DUE_STATE_LABEL;
@@ -40412,16 +40410,13 @@ function ChecklistRunner({
         active.overdue > 0 ? ` \xB7 ${active.overdue} overdue` : ""
       ] }) : null,
       runs && runs.length > 1 ? /* @__PURE__ */ jsx133(
-        "select",
+        Select20,
         {
           "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__ */ jsxs121("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
     ] }),
@@ -40504,19 +40499,18 @@ function StepRow({
         ] }),
         unassigned && onAssign && members && members.length > 0 ? /* @__PURE__ */ jsxs121("label", { className: "mt-1 flex items-center gap-1.5 pl-7 text-[11px] text-muted-foreground", children: [
           "Give it to",
-          /* @__PURE__ */ jsxs121(
-            "select",
+          /* @__PURE__ */ jsx133(
+            Select20,
             {
-              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__ */ jsx133("option", { value: "", children: "Choose a person" }),
-                members.map((m) => /* @__PURE__ */ jsx133("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" }))
               ]
             }
           )
@@ -40994,13 +40988,12 @@ function ChecklistTemplateEditor({
           }
         ),
         /* @__PURE__ */ jsx133(
-          "select",
+          Select20,
           {
             "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__ */ jsx133("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__ */ jsx133(
@@ -43199,6 +43192,7 @@ function FormResultsPanel({ form, className }) {
 import { useCallback as useCallback50, useEffect as useEffect100, useMemo as useMemo68, useRef as useRef57, useState as useState119 } from "react";
 import { useRecordsClient as useRecordsClient83, useTables as useTables4 } from "@ai-matrx/records/react";
 import { BasicInput as BasicInput23, Button as Button90, Checkbox as Checkbox14, Label as Label20, Separator as Separator10, Skeleton as Skeleton26, cn as cn75 } from "@ai-matrx/design-system";
+import { Select as Select21 } from "@ai-matrx/design-system/controls";
 import { Fragment as Fragment55, jsx as jsx141, jsxs as jsxs129 } from "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 }) {
@@ -43405,15 +43399,15 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
     ] }),
     /* @__PURE__ */ jsxs129("label", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ jsx141(Label20, { className: "text-xs font-medium", children: "Which table holds your clients" }),
-      /* @__PURE__ */ jsxs129(
-        "select",
+      /* @__PURE__ */ jsx141(
+        Select21,
         {
-          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__ */ jsx141("option", { value: "", children: "Pick the table whose records are the people signing in" }),
-            all.map((t) => /* @__PURE__ */ jsx141("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 }))
           ]
         }
       ),
@@ -43458,15 +43452,15 @@ function PortalBuilder({ tableId, portalId, onSaved, onClose, className }) {
             ) : /* @__PURE__ */ jsxs129("div", { className: "mt-2 flex flex-col gap-2", children: [
               /* @__PURE__ */ jsxs129("label", { className: "flex flex-col gap-1", children: [
                 /* @__PURE__ */ jsx141(Label20, { className: "text-xs font-medium", children: "Which field says whose row it is" }),
-                /* @__PURE__ */ jsxs129(
-                  "select",
+                /* @__PURE__ */ jsx141(
+                  Select21,
                   {
-                    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__ */ jsx141("option", { value: "", children: "Pick the field that names the client" }),
-                      ties.map((f) => /* @__PURE__ */ jsx141("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) }))
                     ]
                   }
                 )
@@ -44699,6 +44693,7 @@ import { useCallback as useCallback52, useEffect as useEffect103, useMemo as use
 import { useRecordsClient as useRecordsClient86, useTable as useTable28 } from "@ai-matrx/records/react";
 import { hasQuietHours } from "@ai-matrx/records";
 import { BasicInput as BasicInput26, Button as Button93, Checkbox as Checkbox15, Label as Label21, Separator as Separator12, Skeleton as Skeleton28, cn as cn80 } from "@ai-matrx/design-system";
+import { Select as Select22 } from "@ai-matrx/design-system/controls";
 
 // src/scheduleWords.ts
 var DAYS3 = {
@@ -44902,15 +44897,15 @@ function DigestScheduler({
     ] }),
     savedViewId ? null : /* @__PURE__ */ jsxs134("label", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ jsx146(Label21, { className: "text-xs font-medium", children: "What it summarises" }),
-      /* @__PURE__ */ jsxs134(
-        "select",
+      /* @__PURE__ */ jsx146(
+        Select22,
         {
-          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__ */ jsx146("option", { value: "new", children: subjectName?.trim() ? `What I am looking at now (${subjectName.trim()})` : "What I am looking at now" }),
-            (views ?? []).map((v) => /* @__PURE__ */ jsx146("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 }))
           ]
         }
       ),
@@ -44920,24 +44915,27 @@ function DigestScheduler({
       /* @__PURE__ */ jsxs134("label", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx146(Label21, { className: "text-xs font-medium", children: "How often" }),
         /* @__PURE__ */ jsx146(
-          "select",
+          Select22,
           {
-            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__ */ jsx146("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__ */ jsxs134("label", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx146(Label21, { className: "text-xs font-medium", children: "Which day" }),
         /* @__PURE__ */ jsx146(
-          "select",
+          Select22,
           {
-            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__ */ jsx146("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,
@@ -44961,12 +44959,12 @@ function DigestScheduler({
       /* @__PURE__ */ jsxs134("label", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx146(Label21, { className: "text-xs font-medium", children: "Where it arrives" }),
         /* @__PURE__ */ jsx146(
-          "select",
+          Select22,
           {
-            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__ */ jsx146("option", { value: key, children: words2 }, key))
+            onValueChange: setChannel,
+            options: Object.entries(CHANNEL_WORDS).map(([key, words2]) => ({ value: key, label: words2 }))
           }
         )
       ] })
@@ -45498,6 +45496,7 @@ function SubscriptionsPanel({ tableId, activeRuleId, className }) {
 // src/FormBuilder.tsx
 import { copyText as copyText8 } from "@ai-matrx/kit/clipboard";
 import { ErrorBox as ErrorBox7 } from "@ai-matrx/design-system";
+import { Select as Select23 } from "@ai-matrx/design-system/controls";
 import { useCallback as useCallback56, useEffect as useEffect107, useMemo as useMemo73, useRef as useRef59, useState as useState127 } from "react";
 import { DndContext as DndContext2, KeyboardSensor, PointerSensor as PointerSensor2, closestCenter as closestCenter2, useSensor as useSensor2, useSensors as useSensors2 } from "@dnd-kit/core";
 import { SortableContext as SortableContext2, arrayMove, sortableKeyboardCoordinates, useSortable as useSortable2, verticalListSortingStrategy as verticalListSortingStrategy2 } from "@dnd-kit/sortable";
@@ -46970,12 +46969,15 @@ function FormBuilder({ tableId, seed, activeFormId, onActiveForm, startWithOne,
             /* @__PURE__ */ jsxs139("label", { className: "flex flex-col gap-1", children: [
               /* @__PURE__ */ jsx151(Label25, { className: "text-xs font-medium", children: "Flow" }),
               /* @__PURE__ */ jsx151(
-                "select",
+                Select23,
                 {
-                  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: FORM_FLOWS.map((flow) => /* @__PURE__ */ jsx151("option", { value: flow, children: flow === "one-at-a-time" ? "One question at a time" : "All on one page" }, flow))
+                  onValueChange: (flow) => patch({ flow }),
+                  options: FORM_FLOWS.map((flow) => ({
+                    value: flow,
+                    label: flow === "one-at-a-time" ? "One question at a time" : "All on one page"
+                  }))
                 }
               )
             ] }),
@@ -47921,6 +47923,7 @@ import { useCallback as useCallback60, useEffect as useEffect111, useState as us
 import { useRecordsClient as useRecordsClient93, useTable as useTable33 } from "@ai-matrx/records/react";
 import { hasQuietHours as hasQuietHours3 } from "@ai-matrx/records";
 import { Button as Button102, Skeleton as Skeleton36, cn as cn88 } from "@ai-matrx/design-system";
+import { Select as Select24 } from "@ai-matrx/design-system/controls";
 import { jsx as jsx155, jsxs as jsxs143 } from "react/jsx-runtime";
 var CADENCE_WORDS2 = SUBSCRIPTION_CADENCE_LABEL;
 var CHANNEL_WORDS3 = SUBSCRIPTION_CHANNEL_LABEL;
@@ -47934,6 +47937,9 @@ function NotifyRuleEditor({ tableId, seed, chosenRuleId, onChoose, className })
   const [views, setViews] = useState131(null);
   const [error, setError] = useState131(null);
   const [busy, setBusy] = useState131(false);
+  const [pickView, setPickView] = useState131("");
+  const [pickCadence, setPickCadence] = useState131("");
+  const [pickChannel, setPickChannel] = useState131("in_app");
   const [stopping, setStopping] = useState131(null);
   const load = useCallback60(async () => {
     const [held, offered] = await Promise.all([
@@ -48131,9 +48137,36 @@ function NotifyRuleEditor({ tableId, seed, chosenRuleId, onChoose, className })
           if (view) void subscribe(view, name, cadence, channel, schedule, quiet2);
         },
         children: [
-          /* @__PURE__ */ jsx155("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__ */ jsx155("option", { value: view.id, children: view.name }, view.id)) }),
-          /* @__PURE__ */ jsx155("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__ */ jsx155("option", { value: cadence, children: CADENCE_WORDS2[cadence] ?? cadence }, cadence)) }),
-          /* @__PURE__ */ jsx155("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__ */ jsx155("option", { value: channel, children: CHANNEL_WORDS3[channel] }, channel)) }),
+          /* @__PURE__ */ jsx155("input", { type: "hidden", name: "view", value: pickView || (views[0]?.id ?? "") }),
+          /* @__PURE__ */ jsx155(
+            Select24,
+            {
+              "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__ */ jsx155("input", { type: "hidden", name: "cadence", value: pickCadence || (cadences.length > 0 ? cadences : ["instant"])[0] }),
+          /* @__PURE__ */ jsx155(
+            Select24,
+            {
+              "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__ */ jsx155("input", { type: "hidden", name: "channel", value: pickChannel }),
+          /* @__PURE__ */ jsx155(
+            Select24,
+            {
+              "aria-label": "Where it arrives",
+              value: pickChannel,
+              onValueChange: setPickChannel,
+              options: ["in_app", "email", "sms"].map((channel) => ({ value: channel, label: CHANNEL_WORDS3[channel] ?? channel }))
+            }
+          ),
           /* @__PURE__ */ jsx155(
             "input",
             {
@@ -48180,7 +48213,7 @@ import {
   Popover as Popover17,
   PopoverContent as PopoverContent17,
   PopoverTrigger as PopoverTrigger17,
-  Select as Select19,
+  Select as Select27,
   SelectContent as SelectContent19,
   SelectItem as SelectItem19,
   SelectTrigger as SelectTrigger19,
@@ -48206,6 +48239,7 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS as CSS4 } from "@dnd-kit/utilities";
 import { cn as cn89 } from "@ai-matrx/design-system";
+import { Select as Select25 } from "@ai-matrx/design-system/controls";
 
 // src/dashboardLayout.ts
 var SPAN_CHOICES = [
@@ -48323,13 +48357,13 @@ function GridCell2({
             }
           ),
           /* @__PURE__ */ jsx156(
-            "select",
+            Select25,
             {
               "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__ */ jsx156("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,
@@ -48344,7 +48378,7 @@ import { useMemo as useMemo74, useState as useState132 } from "react";
 import { useFields as useFields31, useRecordsClient as useRecordsClient94 } from "@ai-matrx/records/react";
 import {
   Button as Button103,
-  Select as Select18,
+  Select as Select26,
   SelectContent as SelectContent18,
   SelectItem as SelectItem18,
   SelectTrigger as SelectTrigger18,
@@ -48424,7 +48458,7 @@ function AddChart({ subject, onAdd, onClose }) {
   return /* @__PURE__ */ jsxs145("div", { className: "flex flex-col gap-2 rounded border p-2 text-xs", role: "group", "aria-label": "Add chart", children: [
     /* @__PURE__ */ jsxs145("div", { className: "flex flex-wrap items-center gap-1", children: [
       /* @__PURE__ */ jsx157("div", { className: "min-w-[12rem]", children: /* @__PURE__ */ jsx157(TablePicker, { dataSource: client.config.dataSource, value: tableId, onChange: pickTable }) }),
-      /* @__PURE__ */ jsxs145(Select18, { value: measureKey5, onValueChange: setMeasureKey, children: [
+      /* @__PURE__ */ jsxs145(Select26, { value: measureKey5, onValueChange: setMeasureKey, children: [
         /* @__PURE__ */ jsx157(SelectTrigger18, { size: "sm", "aria-label": "What the chart counts", className: "h-7 min-w-[8rem] text-xs", children: /* @__PURE__ */ jsx157(SelectValue18, {}) }),
         /* @__PURE__ */ jsxs145(SelectContent18, { children: [
           /* @__PURE__ */ jsx157(SelectItem18, { value: "count", children: "How many" }),
@@ -48438,7 +48472,7 @@ function AddChart({ subject, onAdd, onClose }) {
           ] }, `avg:${f.key}`))
         ] })
       ] }),
-      /* @__PURE__ */ jsxs145(Select18, { value: splitKey, onValueChange: setSplitKey, children: [
+      /* @__PURE__ */ jsxs145(Select26, { value: splitKey, onValueChange: setSplitKey, children: [
         /* @__PURE__ */ jsx157(SelectTrigger18, { size: "sm", "aria-label": "How the chart splits", className: "h-7 min-w-[8rem] text-xs", children: /* @__PURE__ */ jsx157(SelectValue18, {}) }),
         /* @__PURE__ */ jsxs145(SelectContent18, { children: [
           /* @__PURE__ */ jsx157(SelectItem18, { value: "none", children: "No split" }),
@@ -48455,7 +48489,7 @@ function AddChart({ subject, onAdd, onClose }) {
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs145(Select18, { value: kind, onValueChange: (v) => setKind(v), children: [
+      /* @__PURE__ */ jsxs145(Select26, { value: kind, onValueChange: (v) => setKind(v), children: [
         /* @__PURE__ */ jsx157(SelectTrigger18, { size: "sm", "aria-label": "Chart shape", className: "h-7 min-w-[7rem] text-xs", children: /* @__PURE__ */ jsx157(SelectValue18, {}) }),
         /* @__PURE__ */ jsxs145(SelectContent18, { children: [
           /* @__PURE__ */ jsx157(SelectItem18, { value: "auto", children: CHART_KIND_LABEL[shape] }),
@@ -48471,6 +48505,9 @@ function AddChart({ subject, onAdd, onClose }) {
   ] });
 }
 
+// src/DashboardCanvas.tsx
+import { Select as ControlSelect } from "@ai-matrx/design-system/controls";
+
 // src/pages.ts
 import { isRuleFilter as isRuleFilter3 } from "@ai-matrx/records";
 var PAGE_BLOCK_KINDS = ["list", "record", "button", "form", "filter", "chart", "heading", "text", "applet"];
@@ -48749,7 +48786,7 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, createOnMount, on
       ) : null,
       board ? /* @__PURE__ */ jsxs146("span", { className: "ml-auto flex items-center gap-1", children: [
         (board.blocks ?? []).some((b) => !!b.bucket) ? /* @__PURE__ */ jsxs146(
-          Select19,
+          Select27,
           {
             value: grain ?? "saved",
             onValueChange: (v) => setGrain(v === "saved" ? null : v),
@@ -48913,13 +48950,12 @@ function BlockSettings({
   const fields = own3.data ?? [];
   return /* @__PURE__ */ jsxs146("div", { className: "flex flex-col items-stretch gap-1.5 text-xs", children: [
     /* @__PURE__ */ jsx158(
-      "select",
+      ControlSelect,
       {
         "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__ */ jsx158("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__ */ jsx158(
@@ -48966,7 +49002,7 @@ function GroupingPicker({
   const known = choices.some((c) => c.field.key === current);
   return /* @__PURE__ */ jsxs146(Fragment61, { children: [
     /* @__PURE__ */ jsx158("label", { className: "text-muted-foreground", htmlFor: `block-group-${block.title}`, children: "Group by" }),
-    /* @__PURE__ */ jsxs146(Select19, { value: known ? current : "", onValueChange: onPick, children: [
+    /* @__PURE__ */ jsxs146(Select27, { value: known ? current : "", onValueChange: onPick, children: [
       /* @__PURE__ */ jsx158(
         SelectTrigger19,
         {
@@ -49063,7 +49099,7 @@ function CompareControl({
   );
   return /* @__PURE__ */ jsxs146(Fragment61, { children: [
     /* @__PURE__ */ jsxs146(
-      Select19,
+      Select27,
       {
         value: current ?? "none",
         onValueChange: (v) => {
@@ -49086,7 +49122,7 @@ function CompareControl({
       }
     ),
     current && !explicitWindow ? /* @__PURE__ */ jsxs146(
-      Select19,
+      Select27,
       {
         value: period,
         onValueChange: (v) => onChange({ ...block.compare ?? { against: current, key }, period: v }),
@@ -49125,7 +49161,7 @@ function TargetControl({
   }
   return /* @__PURE__ */ jsxs146(Fragment61, { children: [
     /* @__PURE__ */ jsxs146(
-      Select19,
+      Select27,
       {
         value: mode,
         onValueChange: (v) => {
@@ -49159,7 +49195,7 @@ function TargetControl({
       }
     ) : null,
     mode === "field" ? /* @__PURE__ */ jsxs146(
-      Select19,
+      Select27,
       {
         value: block.target && "field" in block.target && block.target.field ? block.target.field : "",
         onValueChange: (key) => {
@@ -52464,7 +52500,7 @@ import {
   DialogContent as DialogContent18,
   DialogHeader as DialogHeader18,
   DialogTitle as DialogTitle18,
-  Select as Select20,
+  Select as Select28,
   SelectContent as SelectContent20,
   SelectItem as SelectItem20,
   SelectTrigger as SelectTrigger20,
@@ -52501,7 +52537,7 @@ function BreakDownDialog({
   const key = picked ?? held?.field ?? dimensions[0]?.key ?? "";
   return /* @__PURE__ */ jsx170(Dialog18, { open, onOpenChange, children: /* @__PURE__ */ jsxs158(DialogContent18, { "data-break-down": "", className: "max-w-sm", children: [
     /* @__PURE__ */ jsx170(DialogHeader18, { children: /* @__PURE__ */ jsx170(DialogTitle18, { children: "Break down by" }) }),
-    /* @__PURE__ */ jsxs158(Select20, { value: key, onValueChange: setPicked, children: [
+    /* @__PURE__ */ jsxs158(Select28, { value: key, onValueChange: setPicked, children: [
       /* @__PURE__ */ jsx170(SelectTrigger20, { "aria-label": "Column to break down by", "data-break-down-select": "", children: /* @__PURE__ */ jsx170(SelectValue20, { placeholder: def ? NO_DIMENSION_REASON : "Reading this table\u2026" }) }),
       /* @__PURE__ */ jsx170(SelectContent20, { children: dimensions.map((d) => /* @__PURE__ */ jsx170(SelectItem20, { value: d.key, children: d.label }, d.key)) })
     ] }),