basalt-ui 1.26.0 → 1.28.0

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), () => {
-    setValue(field.fallback);
+    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"}

package/dist/controls-dates/date-range-picker.js

@@ -1,6 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { DatePicker } from "@mantine/dates";
-function DateRangePicker({ value, onChange }) {
+import { assertRequiredProps } from "../common/validate.js";
+function DateRangePicker(props) {
+  assertRequiredProps("DateRangePicker", props, ["value"], {
+    value: "pass `{ from, to }` \u2014 usually injected by `RangeFilter`'s `customPicker`."
+  });
+  const { value, onChange } = props;
   return /* @__PURE__ */ jsx(
     DatePicker,
     {

package/dist/dashboard/delta-badge.d.ts

@@ -2,6 +2,10 @@
  * `DeltaBadge` moved to `src/widget-header/` (docs/CONTROLS-SPEC.md §2.2) so `WidgetHeader` can
  * compose it Mantine-free. Re-exported here unchanged so this deep import path — and `StatCard`'s
  * own `./delta-badge` import — keep working without a wave-3 edit.
+ *
+ * `basalt-ui/widget-header` is canonical — this alias exists only so `basalt-ui/dashboard`-style
+ * deep imports keep resolving; the root barrel (`src/index.ts`) sources `DeltaBadge` from
+ * `../widget-header`, not from here.
  */
-export { DeltaBadge, type DeltaBadgeProps } from '../widget-header/delta-badge.js';
+export { DeltaBadge, type DeltaBadgeProps, type DeltaPolarity } from '../widget-header/delta-badge.js';
 //# sourceMappingURL=delta-badge.d.ts.map

package/dist/dashboard/delta-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"delta-badge.d.ts","sourceRoot":"","sources":["../../src/dashboard/delta-badge.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAA"}
+{"version":3,"file":"delta-badge.d.ts","sourceRoot":"","sources":["../../src/dashboard/delta-badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAA"}

package/dist/dashboard/empty-state.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
-export type EmptyStateProps = {
+import type { BasaltProps, SlotStylesProps } from '../common/props.js';
+/** The five boxes `EmptyState` paints, and the whole styling seam it offers (`common/props.ts`). */
+export type EmptyStateSlot = 'root' | 'icon' | 'title' | 'description' | 'action';
+export type EmptyStateProps = BasaltProps & SlotStylesProps<EmptyStateSlot> & {
     /** Optional glyph slot, rendered faint at ~28-32px. No shipped illustration assets. */
     icon?: ReactNode;
     /** Head-font title (18px, weight 550, ink). */
@@ -12,8 +15,12 @@ export type EmptyStateProps = {
     description?: string;
     /** Optional call-to-action rendered below the description. */
     action?: ReactNode;
-    /** `'page'` (default) = generous padding for a full-page state; `'section'` = compact. */
+    /** How loud this state is: `'page'` (default) = generous padding for a full-page state;
+     * `'section'` = compact. */
+    tier?: 'page' | 'section';
+    /** @deprecated Renamed to `tier` (audit B #19) — `tier` is the package's word for "how loud is
+     * this". Still honoured; `tier` wins when both are passed. */
     variant?: 'page' | 'section';
 };
-export declare function EmptyState({ icon, title, description, action, variant, }: EmptyStateProps): import("react").JSX.Element;
+export declare function EmptyState({ icon, title, description, action, tier, variant, className, style, classNames, }: EmptyStateProps): import("react").JSX.Element;
 //# sourceMappingURL=empty-state.d.ts.map

package/dist/dashboard/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/dashboard/empty-state.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,eAAe,GAAG;IAC5B,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAgB,GACjB,EAAE,eAAe,+BA4BjB"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/dashboard/empty-state.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEnE,oGAAoG;AACpG,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAA;AAEjF,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,eAAe,CAAC,cAAc,CAAC,GAAG;IAChC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;gCAC4B;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB;kEAC8D;IAC9D,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B,CAAA;AAaH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,eAAe,+BAkDjB"}

package/dist/dashboard/empty-state.js

@@ -1,27 +1,50 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Center, Stack } from "@mantine/core";
 import { VX } from "../tokens/index.js";
+import { cx } from "../common/props.js";
+const STACK_XS = "var(--vx-space-stack-xs, 0.25rem)";
+const PAGE_PADDING_Y = `calc(${STACK_XS} * 16)`;
+const PAGE_PADDING_X = `calc(${STACK_XS} * 6)`;
+const SECTION_PADDING_Y = `calc(${STACK_XS} * 8)`;
+const SECTION_PADDING_X = `calc(${STACK_XS} * 5)`;
 function EmptyState({
   icon,
   title,
   description,
   action,
-  variant = "page"
+  tier,
+  variant,
+  className,
+  style,
+  classNames
 }) {
+  const resolved = tier ?? variant ?? "page";
   return /* @__PURE__ */ jsxs(
     Stack,
     {
       align: "center",
       gap: "xs",
+      className: cx(classNames?.root, className),
       style: {
-        padding: variant === "page" ? "64px 24px" : "32px 20px",
-        textAlign: "center"
+        padding: resolved === "page" ? `${PAGE_PADDING_Y} ${PAGE_PADDING_X}` : `${SECTION_PADDING_Y} ${SECTION_PADDING_X}`,
+        textAlign: "center",
+        ...style
       },
       children: [
-        icon && /* @__PURE__ */ jsx(Center, { style: { width: 32, height: 32, color: VX.faint }, children: icon }),
+        icon && // 32px is a fixed glyph-box size, not a density-tracking inset — no `--vx-icon-*` token
+        // exists for a generic (non-`WidgetHeader`-tiered) icon slot, so it stays a structural rem.
+        /* @__PURE__ */ jsx(
+          Center,
+          {
+            ...classNames?.icon !== void 0 && { className: classNames.icon },
+            style: { width: "2rem", height: "2rem", color: VX.faint },
+            children: icon
+          }
+        ),
         /* @__PURE__ */ jsx(
           "span",
           {
+            className: classNames?.title,
             style: {
               fontFamily: "var(--basalt-font-head)",
               fontStretch: "88%",
@@ -32,8 +55,16 @@ function EmptyState({
             children: title
           }
         ),
-        description !== void 0 && /* @__PURE__ */ jsx("span", { style: { fontSize: VX.text.md, color: VX.muted, maxWidth: 360 }, children: description }),
-        action
+        description !== void 0 && // 360px (22.5rem) is a reading-width cap, not a density inset — kept structural.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames?.description,
+            style: { fontSize: VX.text.md, color: VX.muted, maxWidth: "22.5rem" },
+            children: description
+          }
+        ),
+        action !== void 0 && /* @__PURE__ */ jsx("div", { className: classNames?.action, children: action })
       ]
     }
   );

package/dist/dashboard/index.d.ts

@@ -1,6 +1,8 @@
 export { DeltaBadge, type DeltaBadgeProps } from './delta-badge.js';
-export { StatCard, type StatCardProps, type StatCardTone } from './stat-card.js';
-export { EmptyState, type EmptyStateProps } from './empty-state.js';
-export { SettingsSection, type SettingsSectionProps, SettingsRow, type SettingsRowProps, DangerZone, type DangerZoneProps, } from './settings-section.js';
-export { QueryState, type QueryStateProps, type QueryStateLike, type QueryStateVariant, type QueryEmptyCopy, LoadingState, type LoadingStateProps, ErrorState, type ErrorStateProps, } from './query-state.js';
+export { StatCard, type StatCardBreakdownRow, type StatCardProps, type StatCardSlot, type StatCardTone, } from './stat-card.js';
+export { WidgetGrid, type WidgetGridCols, type WidgetGridItemProps, type WidgetGridProps, } from './widget-grid.js';
+export { StatGroup, type StatGroupCols, type StatGroupProps } from './stat-group.js';
+export { EmptyState, type EmptyStateProps, type EmptyStateSlot } from './empty-state.js';
+export { SettingsSection, type SettingsSectionProps, type SettingsSectionSlot, SettingsRow, type SettingsRowProps, type SettingsRowSlot, DangerZone, type DangerZoneProps, } from './settings-section.js';
+export { QueryState, type QueryStateProps, type QueryStateLike, type QueryStateSlot, type QueryStateTier, type QueryStateVariant, type QueryEmptyCopy, LoadingState, type LoadingStateProps, ErrorState, type ErrorStateProps, } from './query-state.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/dashboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dashboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAA;AAC7E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,WAAW,EACX,KAAK,gBAAgB,EACrB,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,YAAY,EACZ,KAAK,iBAAiB,EACtB,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dashboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EACL,QAAQ,EACR,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,YAAY,GAClB,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AACjF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAA;AACrF,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,YAAY,EACZ,KAAK,iBAAiB,EACtB,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA"}

package/dist/dashboard/index.js

@@ -1,5 +1,11 @@
 import { DeltaBadge } from "./delta-badge.js";
-import { StatCard } from "./stat-card.js";
+import {
+  StatCard
+} from "./stat-card.js";
+import {
+  WidgetGrid
+} from "./widget-grid.js";
+import { StatGroup } from "./stat-group.js";
 import { EmptyState } from "./empty-state.js";
 import {
   SettingsSection,
@@ -20,5 +26,7 @@ export {
   QueryState,
   SettingsRow,
   SettingsSection,
-  StatCard
+  StatCard,
+  StatGroup,
+  WidgetGrid
 };