basalt-ui 1.27.0 → 1.28.0

package/dist/controls/range-filter.js

@@ -1,16 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { SegmentedControl, Stack } from "@mantine/core";
-import { useState } from "react";
+import { SegmentedControl, Select, Stack } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import { assertRequiredProps } from "../common/validate.js";
+import { isDev } from "../utils/is-dev.js";
 import classes from "./controls.module.css";
 import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
 import { FilterPill } from "./filter-pill.js";
 import { CalendarGlyph } from "./glyphs.js";
-import { SheetDisclosure, SheetField, SheetOptionList, useControlName } from "./filter-sheet.js";
+import { useControlName } from "./filter-sheet.js";
+import { PanelRow } from "./panel-row.js";
 const VERTICAL_FROM = 5;
+const CUSTOM_ROW_LABEL = "Custom range\u2026";
 const NUMERIC_LABEL = /^\d/;
-function isDev() {
-  return process.env["NODE_ENV"] !== "production";
-}
 const noPickerWarned = /* @__PURE__ */ new Set();
 function warnCustomWithoutPicker(label, unreachable) {
   if (!unreachable || !isDev() || noPickerWarned.has(label)) return;
@@ -20,11 +21,16 @@ function warnCustomWithoutPicker(label, unreachable) {
   );
 }
 function RangeFilter(props) {
+  assertRequiredProps("RangeFilter", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
   const {
     field,
     icon,
     customPicker,
-    label = "Range"
+    label = "Range",
+    className,
+    style
     // One cast, at the one boundary a generic `C` cannot be read through: `C` only ever describes
     // the FIELD's custom flag, and the body handles both.
   } = props;
@@ -39,35 +45,49 @@ function RangeFilter(props) {
   const allowsCustom = options.length !== presets.length;
   const numeric = presets.length > 0 && presets.every((option) => NUMERIC_LABEL.test(option.label));
   const inSheet = surface === "sheet";
+  const inPanel = surface === "panel";
   const Picker = customPicker;
   warnCustomWithoutPicker(label, allowsCustom && Picker === void 0);
-  const { labelId, nameProps } = useControlName(label, inSheet);
+  const { labelId, nameProps } = useControlName(label, inSheet || inPanel);
   const [customOpen, setCustomOpen] = useState(value.preset === "custom");
+  const seenPreset = useRef(value.preset);
+  useEffect(() => {
+    if (seenPreset.current === value.preset) return;
+    seenPreset.current = value.preset;
+    setCustomOpen(value.preset === "custom");
+  }, [value.preset]);
   const showPicker = allowsCustom && Picker !== void 0;
-  if (inSheet) {
-    return /* @__PURE__ */ jsxs(SheetField, { label, labelId, children: [
-      /* @__PURE__ */ jsx(
-        SheetOptionList,
-        {
-          mode: "single",
-          labelId,
-          selected: [value.preset],
-          options: presets.map((option) => ({ value: option.value, label: option.label })),
-          onToggle: (next) => {
-            setCustomOpen(false);
-            setValue({ preset: next });
-          }
-        }
-      ),
-      showPicker && /* @__PURE__ */ jsx(
-        SheetDisclosure,
-        {
-          label: "Custom range\u2026",
-          expanded: customOpen,
-          onToggle: () => {
-            setCustomOpen((open) => !open);
-          },
-          children: /* @__PURE__ */ jsx(
+  if (inPanel || inSheet) {
+    return /* @__PURE__ */ jsxs(
+      PanelRow,
+      {
+        label,
+        labelId,
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style },
+        children: [
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              ...nameProps,
+              allowDeselect: false,
+              value: customOpen ? "custom" : value.preset,
+              data: [
+                ...presets.map((option) => ({ value: option.value, label: option.label })),
+                ...showPicker ? [{ value: "custom", label: CUSTOM_ROW_LABEL }] : []
+              ],
+              onChange: (next) => {
+                if (next === null) return;
+                if (next === "custom") {
+                  setCustomOpen(true);
+                  return;
+                }
+                setCustomOpen(false);
+                setValue({ preset: next });
+              }
+            }
+          ),
+          showPicker && customOpen && /* @__PURE__ */ jsx(
             Picker,
             {
               value: { from: value.from, to: value.to },
@@ -76,9 +96,9 @@ function RangeFilter(props) {
               }
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
   const body = /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
     /* @__PURE__ */ jsx(
@@ -112,6 +132,8 @@ function RangeFilter(props) {
       active: !isDefault,
       numeric: numeric && value.preset !== "custom",
       icon: icon ?? /* @__PURE__ */ jsx(CalendarGlyph, {}),
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: body })
     }
   );

package/dist/controls/search-filter.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
 import type { FieldHandle, StringField } from '../state.js';
-export type SearchFilterProps = {
+export type SearchFilterProps = BasaltProps & {
     readonly field: FieldHandle<StringField>;
     readonly placeholder?: string;
     /** Sheet-form heading. @default 'Search' */
     readonly label?: string;
 };
-export declare function SearchFilter({ field, placeholder, label, }: SearchFilterProps): ReactNode;
+export declare function SearchFilter(props: SearchFilterProps): ReactNode;
 //# sourceMappingURL=search-filter.d.ts.map

package/dist/controls/search-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-filter.d.ts","sourceRoot":"","sources":["../../src/controls/search-filter.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAOxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,KAAgB,GACjB,EAAE,iBAAiB,GAAG,SAAS,CAiC/B"}
+{"version":3,"file":"search-filter.d.ts","sourceRoot":"","sources":["../../src/controls/search-filter.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAQxD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAoDhE"}

package/dist/controls/search-filter.js

@@ -1,21 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TextInput } from "@mantine/core";
 import { useEffect, useRef, useState } from "react";
+import { assertRequiredProps } from "../common/validate.js";
 import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
-import { SheetField, useControlName } from "./filter-sheet.js";
+import { useControlName } from "./filter-sheet.js";
+import { PanelRow } from "./panel-row.js";
 const DEBOUNCE_MS = 200;
-function SearchFilter({
-  field,
-  placeholder,
-  label = "Search"
-}) {
+function SearchFilter(props) {
+  assertRequiredProps("SearchFilter", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
+  const { field, placeholder, label = "Search", className, style } = props;
   const [value, setValue] = field.use();
   const surface = useFilterSurface();
   const draft = useDebouncedField(value, setValue);
   useFilterRegistration(!field.isDefault(value), () => {
     field.clear();
   });
-  const { labelId, nameProps } = useControlName(label, surface === "sheet");
+  const named = surface === "sheet" || surface === "panel";
+  const { labelId, nameProps } = useControlName(label, named);
+  const isPill = surface !== "panel" && surface !== "sheet";
   const input = /* @__PURE__ */ jsx(
     TextInput,
     {
@@ -26,11 +30,22 @@ function SearchFilter({
       ...placeholder !== void 0 && { placeholder },
       onChange: (event) => {
         draft.set(event.currentTarget.value);
-      }
+      },
+      ...isPill && className !== void 0 && { className },
+      ...isPill && style !== void 0 && { style }
     }
   );
-  if (surface === "sheet") {
-    return /* @__PURE__ */ jsx(SheetField, { label, labelId, children: input });
+  if (surface === "panel" || surface === "sheet") {
+    return /* @__PURE__ */ jsx(
+      PanelRow,
+      {
+        label,
+        labelId,
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style },
+        children: input
+      }
+    );
   }
   return input;
 }

package/dist/controls/select-filter.d.ts

@@ -30,6 +30,7 @@
  * />
  */
 import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
 import type { EnumField, FieldHandle, StringField } from '../state.js';
 /**
  * One row of a runtime catalogue. Wider than the store's own `FieldOption` by exactly one member:
@@ -42,7 +43,7 @@ export type FilterOption = {
     readonly label: string;
     readonly disabled?: boolean;
 };
-type SelectFilterCommon = {
+type SelectFilterCommon = BasaltProps & {
     readonly label: string;
     readonly icon?: ReactNode;
     /** Adds a `Clear` action that writes the field back to its fallback. */

package/dist/controls/select-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-filter.d.ts","sourceRoot":"","sources":["../../src/controls/select-filter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnE;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,wEAAwE;IACxE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAED,kGAAkG;AAClG,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,GAAG;IACzE,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACzC,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;CAC3C,CAAA;AAED,kGAAkG;AAClG,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GAAG;IACzD,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACxC,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG,uBAAuB,CAAA;AAEpG;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;AAC1F,wBAAgB,YAAY,CAAC,KAAK,EAAE,uBAAuB,GAAG,SAAS,CAAA"}
+{"version":3,"file":"select-filter.d.ts","sourceRoot":"","sources":["../../src/controls/select-filter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnE;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,KAAK,kBAAkB,GAAG,WAAW,GAAG;IACtC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,wEAAwE;IACxE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAED,kGAAkG;AAClG,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,GAAG;IACzE,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACzC,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;CAC3C,CAAA;AAED,kGAAkG;AAClG,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GAAG;IACzD,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACxC,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG,uBAAuB,CAAA;AAEpG;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;AAC1F,wBAAgB,YAAY,CAAC,KAAK,EAAE,uBAAuB,GAAG,SAAS,CAAA"}

package/dist/controls/select-filter.js

@@ -1,6 +1,10 @@
 import { jsx } from "react/jsx-runtime";
+import { assertRequiredProps } from "../common/validate.js";
 import { EnumFilter } from "./enum-filter.js";
 function SelectFilter(props) {
+  assertRequiredProps("SelectFilter", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
   const { field, ...rest } = props;
   if (field.kind === "string") return /* @__PURE__ */ jsx(EnumFilter, { ...rest, field });
   return /* @__PURE__ */ jsx(EnumFilter, { ...rest, field });

package/dist/controls/slider-control.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
+import type { FieldHandle, NumberField } from '../state.js';
+export type SliderControlProps = BasaltProps & {
+    readonly field: FieldHandle<NumberField>;
+    /** The row's label, and the thumb's accessible name. */
+    readonly label: string;
+    /** Info glyph + tooltip beside the label — see {@link PanelRow}. */
+    readonly hint?: string;
+    /**
+     * The mono readout on the label line. The raw number when omitted, so a unit, a precision or a
+     * ratio is one function rather than a second row.
+     *
+     * @default String(v)
+     */
+    readonly format?: (v: number) => string;
+    /**
+     * Replaces the formatted value in the row's readout slot.
+     *
+     * `format` prints the FIELD; this prints whatever the row is actually about. The composition row
+     * that motivated it states a metric's reading beside its weight — `0.35 · ×1.00` — which is one
+     * mono string over two numbers, only one of which this control owns. Prefer `format` whenever the
+     * readout is the field's own value. A FUNCTION form receives the live drag value, so a composed
+     * readout tracks the thumb per frame instead of updating on drag end.
+     */
+    readonly readout?: ReactNode | ((value: number) => ReactNode);
+    /**
+     * A control riding the LABEL line, forwarded to {@link PanelRow.end} — a `Switch` and, by design,
+     * almost nothing else. The composition row's use case is enabling the metric the slider weights:
+     * the toggle governs the row, so it cannot live inside the track it disables.
+     */
+    readonly end?: ReactNode;
+    readonly disabled?: boolean;
+};
+export declare function SliderControl(props: SliderControlProps): ReactNode;
+//# sourceMappingURL=slider-control.d.ts.map

package/dist/controls/slider-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-control.d.ts","sourceRoot":"","sources":["../../src/controls/slider-control.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGxD,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACxC,wDAAwD;IACxD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,oEAAoE;IACpE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;;;;;;;;OAQG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAA;IAC7D;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CA6ClE"}

package/dist/controls/slider-control.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { Slider } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import { assertRequiredProps } from "../common/validate.js";
+import { PanelRow } from "./panel-row.js";
+function SliderControl(props) {
+  assertRequiredProps("SliderControl", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
+  const { field, label, hint, format, readout, end, disabled, className, style } = props;
+  const [value, setValue] = field.use();
+  const draft = useDraggedNumber(value, setValue);
+  return /* @__PURE__ */ jsx(
+    PanelRow,
+    {
+      label,
+      readout: typeof readout === "function" ? readout(draft.value) : readout ?? (format ?? String)(draft.value),
+      ...hint !== void 0 && { hint },
+      ...end !== void 0 && { end },
+      ...disabled === true && { disabled: true },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
+      children: /* @__PURE__ */ jsx(
+        Slider,
+        {
+          size: "ctl",
+          label: null,
+          thumbLabel: label,
+          ...field.min !== void 0 && { min: field.min },
+          ...field.max !== void 0 && { max: field.max },
+          ...field.step !== void 0 && { step: field.step },
+          ...disabled === true && { disabled: true },
+          value: draft.value,
+          onChange: draft.set,
+          onChangeEnd: draft.commit
+        }
+      )
+    }
+  );
+}
+function useDraggedNumber(value, setValue) {
+  const [draft, setDraft] = useState(value);
+  const seen = useRef(value);
+  const commitRef = useRef(setValue);
+  commitRef.current = setValue;
+  useEffect(() => {
+    if (seen.current === value) return;
+    seen.current = value;
+    setDraft(value);
+  }, [value]);
+  return {
+    value: draft,
+    set: setDraft,
+    commit: (next) => {
+      setDraft(next);
+      if (next === value) return;
+      seen.current = next;
+      commitRef.current(next);
+    }
+  };
+}
+export {
+  SliderControl
+};

package/dist/controls/sync-button.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
-export type SyncButtonProps = {
+import type { BasaltProps } from '../common/props.js';
+export type SyncButtonProps = BasaltProps & {
     syncing: boolean;
     /** Last successful completion. `undefined`/`null` renders no age at all. */
     lastCompletedAt?: number | Date | null;
@@ -34,5 +35,5 @@ export declare function formatAge(ms: number): string;
  * <BasaltShell globalActions={[{ key: 'sync', mobile: 'bar',
  *   node: <SyncButton scope="global" syncing={s} lastCompletedAt={t} onSync={run} /> }]} />
  */
-export declare function SyncButton({ syncing, lastCompletedAt, onSync, scope, label, error, }: SyncButtonProps): ReactNode;
+export declare function SyncButton({ syncing, lastCompletedAt, onSync, scope, label, error, className, style, }: SyncButtonProps): ReactNode;
 //# sourceMappingURL=sync-button.d.ts.map

package/dist/controls/sync-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sync-button.d.ts","sourceRoot":"","sources":["../../src/controls/sync-button.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;IACtC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB;sEACkE;IAClE,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB;yBACqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,cAAc,QAAS,CAAA;AAEpC;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAO5C;AA0DD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,eAAe,EACf,MAAM,EACN,KAAK,EACL,KAAc,EACd,KAAK,GACN,EAAE,eAAe,GAAG,SAAS,CA4D7B"}
+{"version":3,"file":"sync-button.d.ts","sourceRoot":"","sources":["../../src/controls/sync-button.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAIlD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,OAAO,EAAE,OAAO,CAAA;IAChB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;IACtC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB;sEACkE;IAClE,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB;yBACqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,cAAc,QAAS,CAAA;AAEpC;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAO5C;AA0DD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,eAAe,EACf,MAAM,EACN,KAAK,EACL,KAAc,EACd,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,eAAe,GAAG,SAAS,CAkE7B"}

package/dist/controls/sync-button.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ActionIcon, Button, Tooltip } from "@mantine/core";
 import { useEffect, useState } from "react";
+import { cx } from "../common/props.js";
 import { IconSlot } from "../theme/icon-slot.js";
 import classes from "./sync-button.module.css";
 const AGE_REFRESH_MS = 3e4;
@@ -62,7 +63,9 @@ function SyncButton({
   onSync,
   scope,
   label = "Sync",
-  error
+  error,
+  className,
+  style
 }) {
   const age = useRelativeAge(lastCompletedAt);
   const tooltip = error ?? age;
@@ -95,11 +98,21 @@ function SyncButton({
         disabled: tooltip === void 0,
         events: { hover: true, focus: true, touch: true },
         withArrow: true,
-        children: scope === "global" ? /* @__PURE__ */ jsx(ActionIcon, { variant: "default", ...control, children: /* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(RefreshGlyph, { spinning: syncing }) }) }) : /* @__PURE__ */ jsxs(
+        children: scope === "global" ? /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "default",
+            ...control,
+            ...className !== void 0 && { className },
+            ...style !== void 0 && { style },
+            children: /* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(RefreshGlyph, { spinning: syncing }) })
+          }
+        ) : /* @__PURE__ */ jsxs(
           Button,
           {
             variant: "default",
-            className: classes.pageButton,
+            className: cx(classes.pageButton, className),
+            ...style !== void 0 && { style },
             leftSection: /* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(RefreshGlyph, { spinning: syncing }) }),
             ...control,
             children: [

package/dist/controls/toggle-filter.d.ts

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
 import type { BooleanField, FieldHandle } from '../state.js';
-export type ToggleFilterProps = {
+export type ToggleFilterProps = BasaltProps & {
     readonly field: FieldHandle<BooleanField>;
     readonly label: string;
     readonly icon?: ReactNode;
 };
-export declare function ToggleFilter({ field, label, icon }: ToggleFilterProps): ReactNode;
+export declare function ToggleFilter(props: ToggleFilterProps): ReactNode;
 //# sourceMappingURL=toggle-filter.d.ts.map

package/dist/controls/toggle-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-filter.d.ts","sourceRoot":"","sources":["../../src/controls/toggle-filter.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAKzD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,iBAAiB,GAAG,SAAS,CAoCjF"}
+{"version":3,"file":"toggle-filter.d.ts","sourceRoot":"","sources":["../../src/controls/toggle-filter.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAKzD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAmDhE"}

package/dist/controls/toggle-filter.js

@@ -1,25 +1,40 @@
 import { jsx } from "react/jsx-runtime";
 import { Switch } from "@mantine/core";
+import { useId } from "react";
+import { assertRequiredProps } from "../common/validate.js";
 import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
 import { FilterPill } from "./filter-pill.js";
-import { sheetRowClassNames } from "./filter-sheet.js";
-function ToggleFilter({ field, label, icon }) {
+import { PanelRow } from "./panel-row.js";
+function ToggleFilter(props) {
+  assertRequiredProps("ToggleFilter", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
+  const { field, label, icon, className, style } = props;
   const [value, setValue] = field.use();
   const surface = useFilterSurface();
+  const id = useId();
   useFilterRegistration(!field.isDefault(value), () => {
     field.clear();
   });
-  if (surface === "sheet") {
+  if (surface === "panel" || surface === "sheet") {
     return /* @__PURE__ */ jsx(
-      Switch,
+      PanelRow,
       {
-        classNames: sheetRowClassNames,
-        checked: value,
         label,
-        labelPosition: "left",
-        onChange: (event) => {
-          setValue(event.currentTarget.checked);
-        }
+        htmlFor: id,
+        end: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id,
+            "aria-label": label,
+            checked: value,
+            onChange: (event) => {
+              setValue(event.currentTarget.checked);
+            }
+          }
+        ),
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style }
       }
     );
   }
@@ -33,7 +48,9 @@ function ToggleFilter({ field, label, icon }) {
       ...icon !== void 0 && { icon },
       onClick: () => {
         setValue(!value);
-      }
+      },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style }
     }
   );
 }

package/dist/controls/view-tabs.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
 import type { EnumField, FieldHandle } from '../state.js';
 export type ViewTabsOption<T extends string> = {
     readonly value: T;
@@ -6,7 +7,7 @@ export type ViewTabsOption<T extends string> = {
     /** Render this option on ONE viewport only. Omitted → both. */
     readonly only?: 'sm-up' | 'sm-down';
 };
-export type ViewTabsProps<T extends string> = {
+export type ViewTabsProps<T extends string> = BasaltProps & {
     readonly field: FieldHandle<EnumField<T>>;
     /** Defaults to `field.options` (every declared value, labelled by `store.labels()`). */
     readonly options?: readonly ViewTabsOption<T>[];
@@ -19,5 +20,5 @@ export type ViewTabsProps<T extends string> = {
      */
     readonly label?: string;
 };
-export declare function ViewTabs<T extends string>({ field, options, label, }: ViewTabsProps<T>): ReactNode;
+export declare function ViewTabs<T extends string>(props: ViewTabsProps<T>): ReactNode;
 //# sourceMappingURL=view-tabs.d.ts.map

package/dist/controls/view-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-tabs.d.ts","sourceRoot":"","sources":["../../src/controls/view-tabs.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAMtD,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAA;IACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI;IAC5C,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACzC,wFAAwF;IACxF,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/C;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,KAAK,EACL,OAAO,EACP,KAAc,GACf,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAoD9B"}
+{"version":3,"file":"view-tabs.d.ts","sourceRoot":"","sources":["../../src/controls/view-tabs.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAStD,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAA;IACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI,WAAW,GAAG;IAC1D,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACzC,wFAAwF;IACxF,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/C;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAiG7E"}

package/dist/controls/view-tabs.js

@@ -1,19 +1,45 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { SegmentedControl, Select } from "@mantine/core";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
 import classes from "./controls.module.css";
+import { useFilterSurface } from "./filter-context.js";
+import { useControlName } from "./filter-sheet.js";
+import { PanelChoice, PanelRow, useTrackFits } from "./panel-row.js";
 const PHONE_TRACK_MAX = 3;
-function ViewTabs({
-  field,
-  options,
-  label = "View"
-}) {
+function ViewTabs(props) {
+  assertRequiredProps("ViewTabs", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
+  const { field, options, label = "View", className, style } = props;
   const [value, setValue] = field.use();
+  const surface = useFilterSurface();
+  const inPanel = surface === "panel";
+  const { labelId, nameProps } = useControlName(label, inPanel);
   const all = options ?? field.options.map((option) => ({ value: option.value, label: option.label }));
   const desktop = all.filter((option) => option.only !== "sm-down");
   const phone = all.filter((option) => option.only !== "sm-up");
   const commit = (next) => {
     setValue(next);
   };
+  const phoneData = phone.map((option) => ({ value: option.value, label: option.label }));
+  const phoneCountFits = phone.length <= PHONE_TRACK_MAX;
+  const { rootRef: phoneRootRef, fits: phoneFits } = useTrackFits(
+    phoneCountFits,
+    phoneData.map((d) => d.value).join("|")
+  );
+  if (inPanel) {
+    return /* @__PURE__ */ jsx(
+      PanelRow,
+      {
+        label,
+        labelId,
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style },
+        children: /* @__PURE__ */ jsx(PanelChoice, { nameProps, value, options: all, onChange: commit })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       SegmentedControl,
@@ -23,19 +49,24 @@ function ViewTabs({
         size: "ctl",
         value,
         data: desktop.map((option) => ({ value: option.value, label: option.label })),
-        onChange: commit
+        onChange: commit,
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style }
       }
     ),
-    phone.length <= PHONE_TRACK_MAX ? /* @__PURE__ */ jsx(
+    phoneFits ? /* @__PURE__ */ jsx(
       SegmentedControl,
       {
+        ref: phoneRootRef,
         "aria-label": label,
         hiddenFrom: "sm",
         size: "ctl",
         fullWidth: true,
         value,
-        data: phone.map((option) => ({ value: option.value, label: option.label })),
-        onChange: commit
+        data: phoneData,
+        onChange: commit,
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style }
       }
     ) : /* @__PURE__ */ jsx(
       Select,
@@ -43,10 +74,11 @@ function ViewTabs({
         "aria-label": label,
         hiddenFrom: "sm",
         size: "ctl",
-        className: classes.phoneSelect,
+        className: cx(classes.phoneSelect, className),
+        ...style !== void 0 && { style },
         value,
         allowDeselect: false,
-        data: phone.map((option) => ({ value: option.value, label: option.label })),
+        data: phoneData,
         onChange: (next) => {
           if (next !== null) commit(next);
         }

package/dist/controls-dates/date-range-picker.d.ts

@@ -1,4 +1,4 @@
 import type { ReactNode } from 'react';
 import type { RangeCustomPickerProps } from '../controls/range-filter.js';
-export declare function DateRangePicker({ value, onChange }: RangeCustomPickerProps): ReactNode;
+export declare function DateRangePicker(props: RangeCustomPickerProps): ReactNode;
 //# sourceMappingURL=date-range-picker.d.ts.map

package/dist/controls-dates/date-range-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../src/controls-dates/date-range-picker.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEtE,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,sBAAsB,GAAG,SAAS,CAatF"}
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../src/controls-dates/date-range-picker.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEtE,wBAAgB,eAAe,CAAC,KAAK,EAAE,sBAAsB,GAAG,SAAS,CAmBxE"}