basalt-ui 1.27.0 → 1.29.0

package/dist/controls/actions.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
-import type { NavAnchor } from '../nav/types.js';
+import type { BasaltProps } from '../common/props.js';
+import type { NavAnchor } from '../shell/nav-types.js';
 import type { AnyNavLink } from '../router-tanstack/nav.js';
 /**
  * A button-shaped action. `Anchor` is the router seam basalt HOSTS (the same seam `SidebarItem`
@@ -51,7 +52,7 @@ export type BarAction = BarActionItem | BarActionMenu | BarActionCustom;
  * A home's `actions` slot. `primary` is SINGULAR by type — that is the whole enforcement of law
  * C6's "exactly one primary"; there is no runtime check because a second one cannot be written.
  */
-export type ActionGroupProps = {
+export type ActionGroupProps = BasaltProps & {
     primary?: BarAction;
     secondary?: BarAction[];
 };
@@ -99,7 +100,7 @@ export declare function barActionMobile(action: BarAction, isPrimary: boolean):
 export declare function globalActionMobile(action: GlobalAction, index: number): 'bar' | 'more' | 'hidden';
 /** A `GlobalAction` reaching a `BarAction` slot — the kebab renders one row shape, not two. */
 export declare function globalActionAsBarAction(action: GlobalAction): BarActionCustom;
-export type OverflowMenuProps = {
+export type OverflowMenuProps = BasaltProps & {
     actions: readonly BarAction[];
     /**
      * `more` — the labelled desktop `More` button. `kebab` — the mobile ⋯ icon button.
@@ -114,7 +115,7 @@ export type OverflowMenuProps = {
  * `sm` (`--vx-space-sheet-row-height`), so the mobile kebab is already a touch surface without a
  * second, sheet-shaped component.
  */
-export declare function OverflowMenu({ actions, trigger, label, }: OverflowMenuProps): ReactNode;
+export declare function OverflowMenu({ actions, trigger, label, className, style, }: OverflowMenuProps): ReactNode;
 /**
  * Internal — the shared projection behind `ActionGroup` (and `PageBar`'s two rows).
  *
@@ -130,8 +131,9 @@ type BarActionRowProps = ActionGroupProps & {
     host: 'page' | 'slot';
     /**
      * `desktop` renders the desktop variant only — `PageBar` row 2, whose items live in the row-1
-     * kebab below `sm` (spec §2.1: mobile row 2 is tabs + the first pill + `Filters (n)`, nothing
-     * else). @default 'both'
+     * kebab below `sm` (`docs/CONTROLS-SPEC.md` §2.1: mobile row 2 is two lines — tabs, then the
+     * first pill + `Filters (n)` + the aside's `Panel` pill; `docs/CONTROLS-SPEC.md` §2.1 still
+     * describes the pre-aside one-line form). @default 'both'
      */
     viewport?: 'both' | 'desktop';
     /**
@@ -147,7 +149,7 @@ type BarActionRowProps = ActionGroupProps & {
      */
     syncNode?: ReactNode;
 };
-export declare function BarActionRow({ primary, secondary, host, viewport, mobileOnly, syncNode, }: BarActionRowProps): ReactNode;
+export declare function BarActionRow({ primary, secondary, host, viewport, mobileOnly, syncNode, className, style, }: BarActionRowProps): ReactNode;
 /**
  * A home's `actions` slot, projected for both viewports.
  *
@@ -165,5 +167,46 @@ export declare function BarActionRow({ primary, secondary, host, viewport, mobil
  *                     secondary: [{ key: 'export', label: 'Export', onClick: exportCsv }] }} />
  */
 export declare function ActionGroup(props: ActionGroupProps): ReactNode;
+/**
+ * A home's `actions` slot in the two forms it accepts (law C15): typed `BarAction[]` DATA, or an
+ * opaque `ReactNode` row the caller drew itself.
+ *
+ * Three homes took a bare `ReactNode` (`Section`, `BasaltDataTable`, `StatCard`) while `PageBar` and
+ * the shell took typed data, so only half the framework got the C6 budget and the C7 overflow fold —
+ * the `ReactNode` half was clipped on a phone with no kebab to fold into. Widening those slots to
+ * this union is what puts the fold back in basalt's hands without moving any existing call site: a
+ * node still renders verbatim.
+ */
+export type SlotActions = BarAction[] | ReactNode;
+/**
+ * Which arm of {@link SlotActions} a value is, at runtime — the union has no discriminant, and a
+ * `ReactNode` can itself be an array (a fragment list), so "is it an array" is not the test.
+ *
+ * A `BarAction` is a plain object carrying a STRING `key`; a React element carries `key` too (often
+ * `null`) but answers `isValidElement`, which is what separates the two. An EMPTY array takes the
+ * DATA arm: `[]` is what a caller's `.filter()` returns when nothing survived it, and the data path
+ * renders exactly nothing for it (`BarActionRow` bails on an empty row) — so both arms paint the
+ * same pixels and the typed one keeps `Section`'s ≤3 count and every other reader on one branch,
+ * instead of re-deciding per emptiness.
+ */
+export declare function isBarActionList(actions: SlotActions): actions is BarAction[];
+/**
+ * Renders a {@link SlotActions} slot: the typed form goes through the SAME projection `PageBar` and
+ * `ActionGroup` use — inline up to {@link DESKTOP_SECONDARY_MAX}, the rest folded into `More`, and a
+ * mobile kebab below `sm` — and the node form is returned untouched.
+ *
+ * Every entry lands in `secondary`: a `BarAction[]` carries no primary marker, and law C6's "exactly
+ * one primary" is the page bar's rule, enforced by `ActionGroupProps.primary` being singular. A home
+ * that wants a filled action passes a node, or an `ActionGroup` of its own.
+ *
+ * `host="slot"`, never `'page'` — only `PageBar` row 1 may read the shell's global actions and claim
+ * the single mobile kebab (see {@link BarActionRowProps}).
+ *
+ * @example
+ * <Section title="Runs" actions={[{ key: 'export', label: 'Export', onClick: exportCsv }]} />
+ */
+export declare function BarActionSlot({ actions }: {
+    actions: SlotActions;
+}): ReactNode;
 export {};
 //# sourceMappingURL=actions.d.ts.map

package/dist/controls/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/controls/actions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/controls/actions.tsx"],"names":[],"mappings":"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"}

package/dist/controls/actions.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ActionIcon, Button, Group, Menu } from "@mantine/core";
-import { createContext, useContext, useEffect } from "react";
+import { createContext, isValidElement, useContext, useEffect } from "react";
 import { IconSlot } from "../theme/icon-slot.js";
 import { ControlGroup } from "./control-group.js";
 import classes from "./actions.module.css";
@@ -129,7 +129,9 @@ function menuRows(actions) {
 function OverflowMenu({
   actions,
   trigger = "more",
-  label = "More"
+  label = "More",
+  className,
+  style
 }) {
   if (actions.length === 0) return null;
   return /* @__PURE__ */ jsxs(
@@ -150,12 +152,24 @@ function OverflowMenu({
           // `size="ctl"` explicitly, not inherited: the kebab is rendered by `HeaderGlobalActions`
           // too, which is shell chrome rather than a home's slot, so there is no `CtlSlot` above it
           // there. 28px beside 30px buttons is the mismatch the header read as.
-          /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "ctl", "aria-label": label, children: /* @__PURE__ */ jsx(IconSlot, { className: classes.kebabIcon, children: /* @__PURE__ */ jsx(DotsGlyph, {}) }) })
+          /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "ctl",
+              "aria-label": label,
+              ...className !== void 0 && { className },
+              ...style !== void 0 && { style },
+              children: /* @__PURE__ */ jsx(IconSlot, { className: classes.kebabIcon, children: /* @__PURE__ */ jsx(DotsGlyph, {}) })
+            }
+          )
         ) : /* @__PURE__ */ jsx(
           Button,
           {
             variant: "default",
             rightSection: /* @__PURE__ */ jsx(IconSlot, { className: classes.chevronIcon, children: /* @__PURE__ */ jsx(ChevronGlyph, {}) }),
+            ...className !== void 0 && { className },
+            ...style !== void 0 && { style },
             children: label
           }
         ) }),
@@ -180,7 +194,9 @@ function BarActionRow({
   host,
   viewport = "both",
   mobileOnly = [],
-  syncNode
+  syncNode,
+  className,
+  style
 }) {
   const context = useContext(BarExtrasContext);
   const extras = host === "page" ? context : NO_EXTRAS;
@@ -211,8 +227,12 @@ function BarActionRow({
   const hasMobile = mobileBar.length > 0 || claimsKebab;
   if (!hasDesktop && !hasMobile && syncNode === void 0) return null;
   const desktopLead = inline.length > 0 || desktopOverflow.length > 0 || syncNode === void 0;
+  const rootProps = {
+    ...className !== void 0 && { className },
+    ...style !== void 0 && { style }
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    hasDesktop && desktopLead && /* @__PURE__ */ jsxs(Group, { gap: BAR_GAP, wrap: "nowrap", visibleFrom: "sm", children: [
+    hasDesktop && desktopLead && /* @__PURE__ */ jsxs(Group, { gap: BAR_GAP, wrap: "nowrap", visibleFrom: "sm", ...rootProps, children: [
       joinRuns(inline, { viewport: "desktop" }).map(
         (run) => run.length === 1 ? /* @__PURE__ */ jsx(BarEntry, { action: run[0], emphasis: "secondary" }, run[0].key) : /* @__PURE__ */ jsx(ControlGroup, { children: run.map((action) => /* @__PURE__ */ jsx(BarEntry, { action, emphasis: "secondary", iconOnly: true }, action.key)) }, `join-${run[0].key}`)
       ),
@@ -220,8 +240,8 @@ function BarActionRow({
       syncNode === void 0 && desktopPrimary
     ] }),
     syncNode,
-    syncNode !== void 0 && desktopPrimary !== null && /* @__PURE__ */ jsx(Group, { gap: BAR_GAP, wrap: "nowrap", visibleFrom: "sm", children: desktopPrimary }),
-    hasMobile && /* @__PURE__ */ jsxs(Group, { gap: BAR_GAP, wrap: "nowrap", hiddenFrom: "sm", children: [
+    syncNode !== void 0 && desktopPrimary !== null && /* @__PURE__ */ jsx(Group, { gap: BAR_GAP, wrap: "nowrap", visibleFrom: "sm", ...!desktopLead && rootProps, children: desktopPrimary }),
+    hasMobile && /* @__PURE__ */ jsxs(Group, { gap: BAR_GAP, wrap: "nowrap", hiddenFrom: "sm", ...rootProps, children: [
       joinRuns(mobileBar, { viewport: "mobile", excludeKey: primary?.key }).map(
         (run) => run.length === 1 ? /* @__PURE__ */ jsx(
           BarEntry,
@@ -246,6 +266,15 @@ function BarActionRow({
 function ActionGroup(props) {
   return /* @__PURE__ */ jsx(BarActionRow, { ...props, host: "slot" });
 }
+function isBarActionList(actions) {
+  return Array.isArray(actions) && actions.every(
+    (entry) => typeof entry === "object" && entry !== null && !isValidElement(entry) && typeof entry.key === "string"
+  );
+}
+function BarActionSlot({ actions }) {
+  if (!isBarActionList(actions)) return actions;
+  return /* @__PURE__ */ jsx(BarActionRow, { secondary: actions, host: "slot" });
+}
 function BarEntry({
   action,
   emphasis,
@@ -277,11 +306,13 @@ function MobileBarEntry({
 export {
   ActionGroup,
   BarActionRow,
+  BarActionSlot,
   BarExtrasProvider,
   DESKTOP_SECONDARY_MAX,
   MOBILE_GLOBAL_BAR_MAX,
   OverflowMenu,
   barActionMobile,
   globalActionAsBarAction,
-  globalActionMobile
+  globalActionMobile,
+  isBarActionList
 };

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

@@ -8,6 +8,7 @@
  * <CompareFilter field={analytics.field.compare} />
  */
 import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
 import type { EnumField, FieldHandle } from '../state.js';
 /** The three comparison bases — declare the field as `field.enum(COMPARE_VALUES, 'none')`. */
 export type CompareValue = 'none' | 'previous' | 'year';
@@ -29,7 +30,7 @@ export declare const COMPARE_VALUES: readonly CompareValue[];
  * has to be threaded through the store to ask the question.
  */
 export declare const COMPARE_LABELS: Readonly<Record<CompareValue, string>>;
-export type CompareFilterProps = {
+export type CompareFilterProps = BasaltProps & {
     readonly field: FieldHandle<EnumField<CompareValue>>;
     /** @default 'Compare' */
     readonly label?: string;
@@ -37,5 +38,5 @@ export type CompareFilterProps = {
      *  is part of what makes the pill legible as a period comparison. */
     readonly icon?: ReactNode;
 };
-export declare function CompareFilter({ field, label, icon }: CompareFilterProps): ReactNode;
+export declare function CompareFilter(props: CompareFilterProps): ReactNode;
 //# sourceMappingURL=compare-filter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"compare-filter.d.ts","sourceRoot":"","sources":["../../src/controls/compare-filter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAItD,8FAA8F;AAC9F,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;AAEvD,+FAA+F;AAC/F,eAAO,MAAM,cAAc,EAAE,SAAS,YAAY,EAAiC,CAAA;AAEnF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAIjE,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAA;IACpD,yBAAyB;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB;yEACqE;IACrE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAiB,EAAE,IAAI,EAAE,EAAE,kBAAkB,GAAG,SAAS,CAS/F"}
+{"version":3,"file":"compare-filter.d.ts","sourceRoot":"","sources":["../../src/controls/compare-filter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;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,MAAM,UAAU,CAAA;AAItD,8FAA8F;AAC9F,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;AAEvD,+FAA+F;AAC/F,eAAO,MAAM,cAAc,EAAE,SAAS,YAAY,EAAiC,CAAA;AAEnF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAIjE,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAA;IACpD,yBAAyB;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB;yEACqE;IACrE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAwBlE"}

package/dist/controls/compare-filter.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { assertRequiredProps } from "../common/validate.js";
 import { EnumFilter } from "./enum-filter.js";
 import { SwapGlyph } from "./glyphs.js";
 const COMPARE_VALUES = ["none", "previous", "year"];
@@ -7,11 +8,25 @@ const COMPARE_LABELS = {
   previous: "Previous period",
   year: "Same period last year"
 };
-function CompareFilter({ field, label = "Compare", icon }) {
+function CompareFilter(props) {
+  assertRequiredProps("CompareFilter", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
+  const { field, label = "Compare", icon, className, style } = props;
   const options = field.options.map(
     (option) => option.label === option.value && isCompareValue(option.value) ? { value: option.value, label: COMPARE_LABELS[option.value] } : option
   );
-  return /* @__PURE__ */ jsx(EnumFilter, { field, label, icon: icon ?? /* @__PURE__ */ jsx(SwapGlyph, {}), options });
+  return /* @__PURE__ */ jsx(
+    EnumFilter,
+    {
+      field,
+      label,
+      icon: icon ?? /* @__PURE__ */ jsx(SwapGlyph, {}),
+      options,
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style }
+    }
+  );
 }
 function isCompareValue(value) {
   return COMPARE_VALUES.includes(value);

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
-export type ControlGroupProps = {
+import type { BasaltProps } from '../common/props.js';
+export type ControlGroupProps = BasaltProps & {
     readonly children: ReactNode;
     /**
      * `none` (the default) JOINS the children: no gap, one shared hairline between each pair, and the
@@ -13,7 +14,6 @@ export type ControlGroupProps = {
      * @default 'none'
      */
     readonly gap?: 'none' | 'tight';
-    readonly className?: string;
 };
-export declare function ControlGroup({ children, gap, className }: ControlGroupProps): ReactNode;
+export declare function ControlGroup({ children, gap, className, style, }: ControlGroupProps): ReactNode;
 //# sourceMappingURL=control-group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-group.d.ts","sourceRoot":"","sources":["../../src/controls/control-group.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAY,EAAE,SAAS,EAAE,EAAE,iBAAiB,GAAG,SAAS,CAWhG"}
+{"version":3,"file":"control-group.d.ts","sourceRoot":"","sources":["../../src/controls/control-group.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAChC,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAY,EACZ,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,GAAG,SAAS,CAY/B"}

package/dist/controls/control-group.js

@@ -1,15 +1,22 @@
 import { jsx } from "react/jsx-runtime";
 import { Box } from "@mantine/core";
+import { cx } from "../common/props.js";
 import classes from "./controls.module.css";
-function ControlGroup({ children, gap = "none", className }) {
+function ControlGroup({
+  children,
+  gap = "none",
+  className,
+  style
+}) {
   return (
     // A Mantine `Box`, not a raw `<div>` — `basalt/raw-html-layout` flags layout styling on a bare
     // HTML tag, the same reason `CtlSlot` uses one.
     /* @__PURE__ */ jsx(
       Box,
       {
-        className: className === void 0 ? classes.group : `${classes.group} ${className}`,
+        className: cx(classes.group, className),
         "data-gap": gap,
+        ...style !== void 0 && { style },
         children
       }
     )