basalt-ui 1.26.0 → 1.28.0

package/dist/controls/panel-row.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SegmentedControl, Select } from "@mantine/core";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../common/props.js";
+import { CtlSlot } from "../theme/index.js";
+import { InfoGlyph } from "../widget-header/widget-header.js";
+import classes from "./panel-row.module.css";
+const PANEL_TRACK_MAX = 3;
+function PanelRow({
+  label,
+  hint,
+  readout,
+  end,
+  disabled,
+  labelId,
+  htmlFor,
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(classes.row, className),
+      ...disabled === true && { "data-disabled": true },
+      ...style !== void 0 && { style },
+      children: /* @__PURE__ */ jsxs(CtlSlot, { children: [
+        /* @__PURE__ */ jsxs("div", { className: classes.head, children: [
+          htmlFor !== void 0 ? /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor,
+              className: classes.label,
+              ...labelId !== void 0 && { id: labelId },
+              children: label
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: classes.label, ...labelId !== void 0 && { id: labelId }, children: label }),
+          hint !== void 0 && /* @__PURE__ */ jsx(InfoGlyph, { text: hint }),
+          readout !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.readout, children: readout }),
+          end !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.end, children: end })
+        ] }),
+        children !== void 0 && /* @__PURE__ */ jsx("div", { className: classes.control, children })
+      ] })
+    }
+  );
+}
+function layoutParent(el) {
+  let parent = el.parentElement;
+  while (parent !== null && getComputedStyle(parent).display === "contents") {
+    parent = parent.parentElement;
+  }
+  return parent;
+}
+const TRACK_LABEL_SELECTOR = ".mantine-SegmentedControl-label";
+function measureMounted(root, parent) {
+  if (parent.clientWidth === 0) return "unknown";
+  if (root.offsetWidth > parent.clientWidth) return "overflow";
+  const labels = root.querySelectorAll(TRACK_LABEL_SELECTOR);
+  for (const label of labels) {
+    if (label.scrollWidth > label.clientWidth) return "overflow";
+  }
+  return "fits";
+}
+function useTrackFits(countFits, dataKey) {
+  const rootRef = useRef(null);
+  const [rootFits, setRootFits] = useState(true);
+  const observerRef = useRef(null);
+  const parentRef = useRef(null);
+  const trackWidthRef = useRef(0);
+  const observedRootRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!countFits) return;
+    const root = rootRef.current;
+    if (root === null) return;
+    const parent = layoutParent(root);
+    if (parent === null) return;
+    parentRef.current = parent;
+    trackWidthRef.current = root.offsetWidth;
+    const resolve = () => {
+      const p = parentRef.current;
+      if (p === null) return;
+      const liveRoot = rootRef.current;
+      if (liveRoot !== null) {
+        const result = measureMounted(liveRoot, p);
+        trackWidthRef.current = liveRoot.offsetWidth;
+        if (result === "unknown") return;
+        const fits = result === "fits";
+        setRootFits((current) => current === fits ? current : fits);
+        return;
+      }
+      if (p.clientWidth === 0 || trackWidthRef.current === 0) return;
+      if (p.clientWidth >= trackWidthRef.current) setRootFits(true);
+    };
+    if (typeof ResizeObserver === "undefined") {
+      resolve();
+      return;
+    }
+    const observer = new ResizeObserver(resolve);
+    observerRef.current = observer;
+    observer.observe(parent);
+    observer.observe(root);
+    observedRootRef.current = root;
+    resolve();
+    return () => {
+      observer.disconnect();
+      observerRef.current = null;
+      observedRootRef.current = null;
+    };
+  }, [countFits, dataKey]);
+  useLayoutEffect(() => {
+    const observer = observerRef.current;
+    const root = rootRef.current;
+    const parent = parentRef.current;
+    if (observer === null || root === null || observedRootRef.current === root) return;
+    if (observedRootRef.current !== null) observer.unobserve(observedRootRef.current);
+    observer.observe(root);
+    observedRootRef.current = root;
+    trackWidthRef.current = root.offsetWidth;
+    if (parent === null) return;
+    const result = measureMounted(root, parent);
+    if (result === "unknown") return;
+    const fits = result === "fits";
+    setRootFits((current) => current === fits ? current : fits);
+  });
+  return { rootRef, fits: countFits && rootFits };
+}
+function PanelChoice({
+  nameProps,
+  value,
+  options,
+  numeric,
+  onChange
+}) {
+  const data = options.map((option) => ({
+    value: option.value,
+    label: option.label,
+    disabled: option.disabled === true
+  }));
+  const countFits = options.length <= PANEL_TRACK_MAX;
+  const { rootRef, fits } = useTrackFits(countFits, data.map((d) => d.value).join("|"));
+  if (fits) {
+    return /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        ref: rootRef,
+        ...nameProps,
+        fullWidth: true,
+        value,
+        data,
+        ...numeric === true && { "data-numeric": true },
+        onChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...nameProps,
+      value,
+      allowDeselect: false,
+      data,
+      onChange: (next) => {
+        if (next !== null) onChange(next);
+      }
+    }
+  );
+}
+export {
+  PANEL_TRACK_MAX,
+  PanelChoice,
+  PanelRow,
+  useTrackFits
+};

package/dist/controls/panel-row.module.css

@@ -0,0 +1,86 @@
+/*
+ * The `panel` surface's row skeleton (`docs/ASIDE-SPEC.md` §1, §3) — the inspector archetype's
+ * geometry, and nothing else.
+ *
+ * **Label ABOVE, never beside (G4).** At an aside's ~300px a label, a control and a readout on one
+ * line leave the control ~90px, which for a 20-step slider is under 12px per step. So the row is two
+ * lines: a head line (label · hint · readout, or label · a `Switch`) and a full-width control line.
+ * The toggle is the one exception, because a switch beside a label costs nothing and a switch on its
+ * own line reads as a second control.
+ *
+ * Rows separate with a `--vx-divider` hairline rather than sitting in cards — Lightroom, not a
+ * dashboard (`docs/ASIDE-SPEC.md` §3). The vertical inset is `--vx-space-row-inset-y` (6), the
+ * INSPECTOR row's, deliberately not `--vx-space-settings-row-inset-y` (10), which belongs to a
+ * settings FORM row and is nearly twice the height in a column that has none to spare.
+ */
+
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vx-space-stack-xs, 0.25rem);
+  min-width: 0;
+  padding-block: var(--vx-space-row-inset-y);
+}
+
+/* Between rows only — never above the first or below the last, where the aside's own section
+ * chrome already draws the boundary. */
+.row + .row {
+  border-top: 1px solid var(--vx-divider);
+}
+
+/* `disabled` dims the BODY, it does not remove it: an inspector row that is off still states what it
+ * would control, and the control inside keeps its own `disabled` semantics. */
+.row[data-disabled] {
+  opacity: 0.55;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: var(--vx-space-control-gap, 0.375rem);
+  min-width: 0;
+}
+
+.label {
+  font-size: var(--vx-text-xs);
+  font-weight: 550;
+  color: var(--vx-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * The readout is MONO and right-aligned: it is a number that changes while a thumb is dragged, and a
+ * proportional face would reflow the head line on every frame. `margin-inline-start: auto` is what
+ * pushes it (or, in a toggle row, the `end` control) to the trailing edge without a spacer element.
+ */
+.readout {
+  margin-inline-start: auto;
+  flex: none;
+  font-family: var(--basalt-font-mono);
+  font-size: var(--vx-text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--vx-muted);
+}
+
+.end {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  margin-inline-start: auto;
+}
+
+/* A readout AND an `end` control: the readout already took the auto margin, so the control just
+ * follows it across the gap. */
+.readout + .end {
+  margin-inline-start: 0;
+}
+
+/* Column flex, so a control with no width of its own fills the row rather than shrinking to its
+ * content — the row IS the width, which is why no control in it carries a `w` (law C5). */
+.control {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}

package/dist/controls/panel-row.module.css.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Typed CSS-module declaration (the S4 CSS-modules path). Named string props — not an index
+ * signature — so dot access stays verbatim under the package's strict flags.
+ */
+declare const classes: {
+  readonly row: string
+  readonly head: string
+  readonly label: string
+  readonly readout: string
+  readonly end: string
+  readonly control: string
+}
+export default classes

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

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
 import type { FieldHandle, RangeField } from '../state.js';
 /**
  * The contract a custom-range picker satisfies — `basalt-ui/controls-dates`' `DateRangePicker`, or a
@@ -15,15 +16,29 @@ export type RangeCustomPickerProps = {
         to: string;
     }) => void;
 };
-export type RangeFilterProps<P extends string> = {
-    readonly field: FieldHandle<RangeField<P>>;
+/** Everything about the props that does not depend on the field's `custom` flag. */
+type RangeFilterBase<P extends string, C extends boolean> = BasaltProps & {
+    /**
+     * A range handle from either store factory. Generic over the field's `custom` flag so a
+     * `field.range({ ... })` WITHOUT `custom` (whose handle is `RangeField<P, false>`, and whose
+     * values therefore never include `'custom'`) binds with no cast — pinning `C` to its default
+     * `boolean` here made the setter contravariantly incompatible and forced one at every call site.
+     */
+    readonly field: FieldHandle<RangeField<P, C>>;
     /** Leading pill icon. Defaults to a calendar glyph — a range filter reads as a date control, so
      *  the glyph is part of the control's identity, not a per-call-site decision. */
     readonly icon?: ReactNode;
-    /** Rendered when the field declares `custom: true`. Omitted → presets only. */
-    readonly customPicker?: ComponentType<RangeCustomPickerProps>;
     /** Sheet-form heading. The pill's own label is the VALUE, which is what a bar reads. @default 'Range' */
     readonly label?: string;
 };
-export declare function RangeFilter<P extends string>({ field, icon, customPicker, label, }: RangeFilterProps<P>): ReactNode;
+export type RangeFilterProps<P extends string, C extends boolean = boolean> = RangeFilterBase<P, C> & {
+    /**
+     * Rendered when the field declares `custom: true`. Omitted → presets only, which stays LEGAL
+     * (a range that only ever shows presets is a real configuration) but warns once in dev when the
+     * field allows a custom window: the affordance is then unreachable, and nothing else says so.
+     */
+    readonly customPicker?: ComponentType<RangeCustomPickerProps>;
+};
+export declare function RangeFilter<P extends string, C extends boolean = boolean>(props: RangeFilterProps<P, C>): ReactNode;
+export {};
 //# sourceMappingURL=range-filter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"range-filter.d.ts","sourceRoot":"","sources":["../../src/controls/range-filter.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAc,MAAM,UAAU,CAAA;AAYnE;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAA;IACxF,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAChE,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC/C,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;IAC1C;qFACiF;IACjF,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,+EAA+E;IAC/E,QAAQ,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAA;IAC7D,yGAAyG;IACzG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5C,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAe,GAChB,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CA8FjC"}
+{"version":3,"file":"range-filter.d.ts","sourceRoot":"","sources":["../../src/controls/range-filter.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAc,MAAM,UAAU,CAAA;AAsCnE;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAA;IACxF,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAChE,CAAA;AAED,oFAAoF;AACpF,KAAK,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,OAAO,IAAI,WAAW,GAAG;IACxE;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;IAC7C;qFACiF;IACjF,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,yGAAyG;IACzG,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI,eAAe,CAC3F,CAAC,EACD,CAAC,CACF,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAA;CAC9D,CAAA;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,OAAO,EACvE,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC5B,SAAS,CA4IX"}

package/dist/controls/range-filter.js

@@ -1,58 +1,93 @@
 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 RangeFilter({
-  field,
-  icon,
-  customPicker,
-  label = "Range"
-}) {
+const noPickerWarned = /* @__PURE__ */ new Set();
+function warnCustomWithoutPicker(label, unreachable) {
+  if (!unreachable || !isDev() || noPickerWarned.has(label)) return;
+  noPickerWarned.add(label);
+  console.warn(
+    `[basalt-ui] RangeFilter('${label}'): the field declares \`custom: true\` but no \`customPicker\` was injected, so the custom window cannot be reached. Pass \`customPicker={DateRangePicker}\` (\`basalt-ui/controls-dates\`), or drop \`custom: true\` from the field. (dev only)`
+  );
+}
+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",
+    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;
   const [value, setValue] = field.use();
   const surface = useFilterSurface();
   const isDefault = field.isDefault(value);
   useFilterRegistration(!isDefault, () => {
-    setValue(field.fallback);
+    field.clear();
   });
   const options = field.options;
   const presets = options.filter((option) => option.value !== "custom");
   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;
-  const { labelId, nameProps } = useControlName(label, inSheet);
+  warnCustomWithoutPicker(label, allowsCustom && Picker === void 0);
+  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 },
@@ -61,9 +96,9 @@ function RangeFilter({
               }
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
   const body = /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
     /* @__PURE__ */ jsx(
@@ -97,6 +132,8 @@ function RangeFilter({
       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), () => {
-    setValue(field.fallback);
+    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"}