basalt-ui 1.5.0 → 1.7.0

package/dist/theme/index.js

@@ -147,6 +147,10 @@ const basaltVariantColorResolver = (input) => {
     const autoContrast = input.autoContrast ?? input.theme.autoContrast;
     return autoContrast ? { ...resolved, color: on } : resolved;
   }
+  if (input.variant === "subtle") {
+    const isDefaultColor = input.color === void 0 || input.color === input.theme.primaryColor;
+    return isDefaultColor ? { ...resolved, hover: `color-mix(in srgb, var(--vx-ink) 6%, transparent)` } : resolved;
+  }
   if (input.variant !== "light") return resolved;
   const ink = `var(--mantine-color-${colorName}-light-color)`;
   return {
@@ -295,17 +299,26 @@ function buildTheme(data, options = {}) {
         }
       }),
       // "Ink earns its color" — a nav selection is UI state, not the identity accent on the LABEL.
-      // The active item is panel bg + `shadow-card` (forced here at the THEME level via NavLink's
-      // `--nl-*` vars, so it holds for every render path — including a consumer's router `<Link>`
-      // via `renderNavLink`, which never sees the shell CSS module); the active ICON is
-      // accent-colored via `nav-link.module.css` (targets the `[data-position='left']` leftSection,
-      // which the flat `vars`/`styles` API can't express conditionally on `[data-active]`).
+      // The active item is a SELECTED ROW, not a raised control: the same ink-tint idiom as the
+      // hover state (one step stronger, ink-9%), no panel fill and no `shadow-card` — a raised,
+      // panel-filled row read as a button sitting in the nav rather than as the current location.
+      // Selection is carried by the tint + ink text + weight 600 + the accent icon instead. Forced
+      // here at the THEME level via NavLink's `--nl-*` vars so it holds for every render path —
+      // including a consumer's router `<Link>` via `renderNavLink`, which never sees the shell CSS
+      // module; the active ICON is accent-colored via `nav-link.module.css` (targets the
+      // `[data-position='left']` leftSection, which the flat `vars`/`styles` API can't express
+      // conditionally on `[data-active]`).
+      //
+      // `--nl-hover` (ink-13%) only ever reaches an ACTIVE row in practice — the inactive hover is
+      // set at ink-6% by higher-specificity `:not([data-active])` rules in `nav-link.module.css` /
+      // `app-sidebar.module.css` — so it exists to keep the active row responding to the pointer
+      // now that its rest state sits in the same tint family as an inactive hover.
       NavLink: NavLink.extend({
         vars: () => ({
           root: {
-            "--nl-bg": "var(--vx-surface-panel)",
+            "--nl-bg": "color-mix(in srgb, var(--vx-ink) 9%, transparent)",
             "--nl-color": "var(--vx-ink)",
-            "--nl-hover": "color-mix(in srgb, var(--vx-ink) 6%, transparent)"
+            "--nl-hover": "color-mix(in srgb, var(--vx-ink) 13%, transparent)"
           },
           children: {}
         }),
@@ -339,7 +352,7 @@ function buildTheme(data, options = {}) {
           label: { fontSize: VX.text.md, lineHeight: "var(--vx-space-row-line-height)" }
         }
       }),
-      // Field idiom (docs/DESIGN-SPEC.md §5): field surface + `shadow-card` depth + faint placeholder,
+      // Field idiom (docs/DESIGN-SPEC.md §5): field surface + `shadow-raised` depth + faint placeholder,
       // accent border + subtle accent ring on focus — see controls.module.css. The two slots carry
       // different halves of it: the `wrapper` is where Mantine declares the `--input-*` vars, the
       // `input` is the box that actually paints the surface (bg + radius) and therefore the only
@@ -391,16 +404,19 @@ function buildTheme(data, options = {}) {
       PillsInput: PillsInput.extend({
         classNames: { wrapper: controlsClasses.inputWrapper, input: controlsClasses.input }
       }),
-      // Button / ActionIcon (`default` variant): same `shadow-card` depth as every other control
-      // surface (docs/DESIGN-SPEC.md §5: "search trigger … panel + shadow-card", "icon button …
-      // panel + shadow-card"; doctrine inversion #1). Background already resolves through the shared
+      // Button / ActionIcon: depth for EVERY variant that owns a box (docs/DESIGN-SPEC.md §5's
+      // Button idiom; doctrine inversion #1) — `default`/`filled`/`light` on the shared
+      // `shadow-raised`, `outline` on ring-free `shadow-ctrl`, `subtle` flat at rest. Emphasis stays
+      // in fill weight,
+      // never in z-height. Background for `default` already resolves through the shared
       // `--mantine-color-default` var (→ `--vx-surface-panel`, see cssVariablesResolver below) and
-      // the border through `--mantine-color-default-border` (→ transparent, same resolver) — neither
+      // its border through `--mantine-color-default-border` (→ transparent, same resolver) — neither
       // component had a `.extend()` block at all before this, which is why they never picked up
-      // either. Only the shadow needs adding here, in controls.module.css: Mantine's own
-      // `[data-variant='default']` rule never declares a `box-shadow`, so no specificity fight is
-      // needed to win one. `filled`/`subtle`/`light` variants are untouched — scoped by attribute
-      // selector in the CSS, not here.
+      // either. Everything else — the per-variant depth and the disabled/reduced-motion grounding —
+      // lives in controls.module.css, where the variant scoping
+      // is an attribute selector: Mantine declares no `box-shadow` on either component at any
+      // specificity, so none of it needs a specificity fight. Nothing about depth is expressible in
+      // the flat `styles` objects here, which is the whole reason that file exists.
       //
       // Density coupling: mirrors Input's `--input-height` override above — Mantine's OWN
       // `--button-height-md`/`--ai-size` (via `--ai-size-md`) are global, non-retunable statics
@@ -439,7 +455,8 @@ function buildTheme(data, options = {}) {
       // real attribute selectors ((0,2,0)) — Mantine's own rule wraps the same attribute in `:where()`
       // (0 specificity, landing at (0,1,0) total), so no `html[…]` prefix fight is needed here either.
       // Neither component sets a background of its own, so panel bg is added alongside the shadow —
-      // the same panel-bg + shadow-card + no-border triad as Card/Paper.
+      // the same panel-bg + depth + no-border triad as Card/Paper — on `shadow-raised`, the shared
+      // CONTROL depth, not Card/Paper's `shadow-card`: a selection card is something you click.
       CheckboxCard: CheckboxCard.extend({
         classNames: { card: controlsClasses.checkboxCardRoot }
       }),
@@ -780,8 +797,8 @@ function buildCssVariablesResolver(data) {
       "--mantine-color-default": `var(--vx-surface-panel, ${SURFACE.panel.light})`,
       // cards / default controls
       "--mantine-color-default-hover": `var(--vx-surface-elevated, ${SURFACE.elevated.light})`,
-      // THE central lever for doctrine inversion #1 on CONTROLS (docs/DESIGN-SPEC.md §8): depth is
-      // `shadow-card`, never a hairline, for every `variant="default"` control — not just Card/Paper.
+      // THE central lever for doctrine inversion #1 on CONTROLS (docs/DESIGN-SPEC.md §8): depth is a
+      // shadow, never a hairline, for every `variant="default"` control — not just Card/Paper.
       // `defaultVariantColorsResolver`'s `variant === 'default'` branch reads this ONE var for every
       // component that uses it (Button, ActionIcon, Chip, CheckboxCard, RadioCard, …), so pointing it
       // at `transparent` kills the stock 1px hairline everywhere at once. `transparent`, not `border:

package/dist/theme/nav-link.module.css

@@ -1,19 +1,19 @@
 /*
- * Active nav row = heavier weight + card depth, applied at the THEME level via `classNames` so it
- * reaches EVERY NavLink render path — including a consumer's router `<Link>` mounted through
- * `renderNavLink`, which a shell-scoped CSS module never sees. Mantine's `styles` prop only takes
- * flat inline properties (a nested `&[data-active]` there throws a React warning), so the state
- * selectors live here. React Router's NavLink marks the active item via `aria-current` rather than
- * the `active` prop's `data-active`, so both states are matched.
+ * Active nav row = heavier weight over the ink tint `--nl-bg` carries (set in theme/index.ts,
+ * applied unconditionally by Mantine's own `[data-active]` CSS). NO depth: an active row is a
+ * SELECTED ROW, not a raised control — it deliberately reads as a stronger version of the hover
+ * tint rather than as a button, so the row never competes with the real filled controls around it.
  *
- * The row's background comes from `--nl-bg` (set in theme/index.ts, applies unconditionally via
- * Mantine's own `[data-active]` CSS) — `shadow-card` is added here because there's no `--nl-*` var
- * for depth.
+ * Applied at the THEME level via `classNames` so it reaches EVERY NavLink render path — including a
+ * consumer's router `<Link>` mounted through `renderNavLink`, which a shell-scoped CSS module never
+ * sees. Mantine's `styles` prop only takes flat inline properties (a nested `&[data-active]` there
+ * throws a React warning), so the state selectors live here. React Router's NavLink marks the
+ * active item via `aria-current` rather than the `active` prop's `data-active`, so both states are
+ * matched.
  */
 .root[data-active],
 .root[aria-current='page'] {
   font-weight: 600;
-  box-shadow: var(--vx-shadow-card);
 }
 
 /*

package/dist/tokens/index.d.ts

@@ -86,6 +86,7 @@ export declare const VX: {
     readonly divider: "var(--vx-divider)";
     readonly shadowCard: "var(--vx-shadow-card)";
     readonly shadowCtrl: "var(--vx-shadow-ctrl)";
+    readonly shadowRaised: "var(--vx-shadow-raised)";
     readonly shadowOverlay: "var(--vx-shadow-overlay)";
     readonly surface: {
         readonly bg: "var(--vx-surface-bg)";

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

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

package/dist/tokens/index.js

@@ -119,6 +119,9 @@ const VX = {
   // Depth shadows — a whisper shadow + a 1px ring baked into the value (never a `border` prop).
   shadowCard: "var(--vx-shadow-card)",
   shadowCtrl: "var(--vx-shadow-ctrl)",
+  // Raised interactive controls — drop + a 1px INSET edge, the one depth every raised Button/
+  // ActionIcon variant shares (works over a fill, a tint or a panel alike; see SHADOW.raised).
+  shadowRaised: "var(--vx-shadow-raised)",
   // Floating-layer elevation (menus, popovers, tooltips, modals, drawers) — a real drop shadow.
   shadowOverlay: "var(--vx-shadow-overlay)",
   // App surfaces (cards, borders) — shared with the Mantine chrome
@@ -218,6 +221,7 @@ function frameworkPrimitives(side, data, legacyAliases) {
     decl("divider", su.divider[side]),
     decl("shadow-card", SHADOW.card[side]),
     decl("shadow-ctrl", SHADOW.ctrl[side]),
+    decl("shadow-raised", SHADOW.raised[side]),
     decl("shadow-overlay", SHADOW.overlay[side]),
     decl("surface-bg", su.bg[side]),
     decl("surface-panel", su.panel[side]),

package/dist/tokens/palette.d.ts

@@ -84,6 +84,37 @@ export declare const SHADOW: {
         readonly light: "0 1px 2px rgba(28,25,23,0.12)";
         readonly dark: "0 1px 2px rgba(0,0,0,0.35)";
     };
+    /**
+     * Interactive-control depth — the ONE value every raised Button/ActionIcon/Input variant shares
+     * (`docs/DESIGN-SPEC.md` §5's Button idiom). Exists rather than reusing `card` because `card`'s
+     * ring is OUTSET, and an outset ring paints in the color of whatever it is drawn over: fine
+     * between neutral panels, but on light scheme it resolves to `--vx-surface-hairline` and draws a
+     * pale grey outline around a saturated `filled` button, which reads as a rendering defect.
+     *
+     * THE TWO SCHEMES ARE SHAPED DIFFERENTLY, and the asymmetry is the whole design — do NOT "tidy"
+     * them into one shape. Both were arrived at by elimination, on screen:
+     *
+     *   - DARK = drop + a full inset rim. Its edge is a LIGHTENING, so it cannot collide with the
+     *     dark drop below the box; a uniform lightening on a dark surface reads as rim light wrapping
+     *     a raised object, which is exactly right.
+     *
+     *   - LIGHT = drop ONLY, no edge at all. A light-mode edge would have to be a DARKENING (there is
+     *     nothing lighter than a near-white control to lighten with), and every position for one
+     *     fails: a uniform dark ring does not read as depth, it reads as a BORDER — it made `default`
+     *     and `light` look like outlined buttons and every form field look boxed. Moving it to the
+     *     bottom edge alone then put a dark inner line directly above the dark drop, i.e. a visible
+     *     DOUBLE BOTTOM BORDER. There is no third position, because a light-mode raised object's only
+     *     honest cue is the shadow it casts. So light casts one and draws nothing.
+     *
+     * Consequence to know, on light only: a `default` control nested in a Card shares
+     * `--vx-surface-panel` with it and has no boundary but the drop. That is accepted — a wrong-
+     * looking border on every control in the app is worse than a soft edge in one nesting case. If it
+     * ever needs more, raise the DROP. Do not reintroduce an edge; both shapes have been tried.
+     */
+    readonly raised: {
+        readonly light: "0 1px 2px rgba(28,25,23,0.10)";
+        readonly dark: "0 1px 2px rgba(0,0,0,0.35), inset 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent)";
+    };
     readonly overlay: {
         readonly light: "0 8px 24px rgba(28,25,23,0.10)";
         readonly dark: "0 8px 24px rgba(0,0,0,0.5)";

package/dist/tokens/palette.d.ts.map

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

package/dist/tokens/palette.js

@@ -44,6 +44,37 @@ const SHADOW = {
     light: "0 1px 2px rgba(28,25,23,0.12)",
     dark: "0 1px 2px rgba(0,0,0,0.35)"
   },
+  /**
+   * Interactive-control depth — the ONE value every raised Button/ActionIcon/Input variant shares
+   * (`docs/DESIGN-SPEC.md` §5's Button idiom). Exists rather than reusing `card` because `card`'s
+   * ring is OUTSET, and an outset ring paints in the color of whatever it is drawn over: fine
+   * between neutral panels, but on light scheme it resolves to `--vx-surface-hairline` and draws a
+   * pale grey outline around a saturated `filled` button, which reads as a rendering defect.
+   *
+   * THE TWO SCHEMES ARE SHAPED DIFFERENTLY, and the asymmetry is the whole design — do NOT "tidy"
+   * them into one shape. Both were arrived at by elimination, on screen:
+   *
+   *   - DARK = drop + a full inset rim. Its edge is a LIGHTENING, so it cannot collide with the
+   *     dark drop below the box; a uniform lightening on a dark surface reads as rim light wrapping
+   *     a raised object, which is exactly right.
+   *
+   *   - LIGHT = drop ONLY, no edge at all. A light-mode edge would have to be a DARKENING (there is
+   *     nothing lighter than a near-white control to lighten with), and every position for one
+   *     fails: a uniform dark ring does not read as depth, it reads as a BORDER — it made `default`
+   *     and `light` look like outlined buttons and every form field look boxed. Moving it to the
+   *     bottom edge alone then put a dark inner line directly above the dark drop, i.e. a visible
+   *     DOUBLE BOTTOM BORDER. There is no third position, because a light-mode raised object's only
+   *     honest cue is the shadow it casts. So light casts one and draws nothing.
+   *
+   * Consequence to know, on light only: a `default` control nested in a Card shares
+   * `--vx-surface-panel` with it and has no boundary but the drop. That is accepted — a wrong-
+   * looking border on every control in the app is worse than a soft edge in one nesting case. If it
+   * ever needs more, raise the DROP. Do not reintroduce an edge; both shapes have been tried.
+   */
+  raised: {
+    light: "0 1px 2px rgba(28,25,23,0.10)",
+    dark: "0 1px 2px rgba(0,0,0,0.35), inset 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent)"
+  },
   // Floating-layer elevation (menus, popovers, tooltips, modals, drawers) — a REAL drop shadow, a
   // step above `card`, so detached surfaces read as lifted off the page (`docs/DESIGN-SPEC.md` §5).
   // Unlike `card`, no embedded ring: floating surfaces carry a real 1px `--vx-surface-border` so

package/dist/tokens.css

@@ -206,6 +206,7 @@ html[data-mantine-color-scheme='dark'] {
   --vx-divider: color-mix(in srgb, #ffffff 6%, transparent);
   --vx-shadow-card: 0 1px 3px rgba(0,0,0,0.4), inset 0 0 0 1px color-mix(in srgb, #ffffff 4%, transparent);
   --vx-shadow-ctrl: 0 1px 2px rgba(0,0,0,0.35);
+  --vx-shadow-raised: 0 1px 2px rgba(0,0,0,0.35), inset 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent);
   --vx-shadow-overlay: 0 8px 24px rgba(0,0,0,0.5);
   --vx-surface-bg: #27272a;
   --vx-surface-panel: #2b2b2e;
@@ -269,6 +270,7 @@ html[data-mantine-color-scheme='light'] {
   --vx-divider: color-mix(in srgb, #e5e5e5 65%, transparent);
   --vx-shadow-card: 0 1px 2px rgba(28,25,23,0.05), 0 0 0 1px var(--vx-surface-hairline);
   --vx-shadow-ctrl: 0 1px 2px rgba(28,25,23,0.12);
+  --vx-shadow-raised: 0 1px 2px rgba(28,25,23,0.10);
   --vx-shadow-overlay: 0 8px 24px rgba(28,25,23,0.10);
   --vx-surface-bg: #f2f2f5;
   --vx-surface-panel: #fafafd;

package/dist/vite.d.ts

@@ -25,6 +25,12 @@ export type BasaltViteOptions = {
     basaltSrc?: string;
     /** App version surfaced via the `__APP_VERSION__` define. Defaults to `0.0.0`. */
     version?: string;
+    /**
+     * Print a one-time notice when `basalt-ui init` has never been run in this project (no
+     * `.basalt/manifest.json` found at or above the cwd) — see `warnIfUnenforced`. Default `true`.
+     * Set `false` to adopt the components without the toolchain and stop being told about it.
+     */
+    enforcementNotice?: boolean;
 };
 export declare function basaltViteConfig(opts: BasaltViteOptions): UserConfig;
 export type BasaltAppOptions = {

package/dist/vite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAA6B,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AAI/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4FAA4F;IAC5F,IAAI,EAAE,MAAM,CAAA;IACZ,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,iBAAiB,GAAG,UAAU,CAyEpE;AAgBD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACrD,mGAAmG;IACnG,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,wDAAwD;IACxD,OAAO,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;IAChE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mGAAmG;IACnG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,wFAAwF;IACxF,KAAK,CAAC,EAAE,KAAK,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAChC,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC3B,oFAAoF;IACpF,GAAG,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,SAAS,GAAG,qBAAqB,CAAA;KAAE,CAAA;IACvF,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAClD,CAAA;AAuZD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,YAAY,EAAE,CAMzE"}
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAA6B,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AAI/E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4FAA4F;IAC5F,IAAI,EAAE,MAAM,CAAA;IACZ,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AA6CD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,iBAAiB,GAAG,UAAU,CAgFpE;AAgBD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACrD,mGAAmG;IACnG,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,wDAAwD;IACxD,OAAO,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;IAChE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mGAAmG;IACnG,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,wFAAwF;IACxF,KAAK,CAAC,EAAE,KAAK,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAChC,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAC3B,oFAAoF;IACpF,GAAG,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,SAAS,GAAG,qBAAqB,CAAA;KAAE,CAAA;IACvF,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAClD,CAAA;AAuZD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,YAAY,EAAE,CAMzE"}

package/dist/vite.js

@@ -1,10 +1,30 @@
-import { resolve } from "node:path";
+import { existsSync } from "node:fs";
+import { dirname, resolve } from "node:path";
 import { searchForWorkspaceRoot } from "vite";
 import { SURFACE } from "./tokens/palette.js";
 import { resolveColorMix } from "./vite-color-mix.js";
+const UNENFORCED_SEARCH_DEPTH = 3;
+let unenforcedNoticePrinted = false;
+function warnIfUnenforced(cwd) {
+  if (unenforcedNoticePrinted) return;
+  let dir = cwd;
+  for (let i = 0; i <= UNENFORCED_SEARCH_DEPTH; i++) {
+    if (existsSync(resolve(dir, ".basalt/manifest.json"))) return;
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  unenforcedNoticePrinted = true;
+  console.warn(
+    "\n[basalt-ui] Installed, but `basalt-ui init` has never run here \u2014 no oxlint preset, no theme\n            guard, no agent rules. You have the components and none of the enforcement.\n            Fix: `bunx basalt-ui init`, then add `oxlint . && basalt-ui check-theme` as your\n            lint script. Silence: pass `enforcementNotice: false` to basaltViteConfig().\n"
+  );
+}
 function basaltViteConfig(opts) {
   const { port, host, allowedHosts, apiTarget, version = "0.0.0" } = opts;
   const basaltSrc = opts.basaltSrc ?? process.env["BASALT_LOCAL"];
+  if (opts.enforcementNotice !== false && basaltSrc === void 0) {
+    warnIfUnenforced(process.cwd());
+  }
   const config = {
     define: {
       __APP_VERSION__: JSON.stringify(process.env["BUILD_VERSION"] ?? version),

package/llms.txt

@@ -1,4 +1,4 @@
-# basalt-ui v1.5.0
+# basalt-ui v1.7.0
 # Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets
 #
 # basalt-ui is an opinionated framework for Mantine-based React apps.
@@ -19,11 +19,11 @@
 # ./tokens.css subpath. Guide: docs/FRAMEWORK-FREE.md in the repo.
 
 Package: basalt-ui
-Version: 1.5.0
+Version: 1.7.0
 
 ## basalt-ui
 Import: import { ... } from 'basalt-ui'
-Description: BasaltProvider, createBasaltTheme, BasaltShell + sidebar/mobile-nav/breadcrumbs, NavCountBadge, ThemeToggle, ThreadWorkspace + thread-chat components, dashboard composites (DeltaBadge, StatCard, EmptyState, SettingsSection/SettingsRow/DangerZone)
+Description: BasaltProvider, createBasaltTheme, BasaltShell + sidebar/mobile-nav/breadcrumbs, NavCountBadge, ThemeToggle, ThreadWorkspace + thread-chat components, dashboard composites (DeltaBadge, StatCard with threshold tone, EmptyState, SettingsSection/SettingsRow/DangerZone)
 Layer: mantine-coupled
 Rule: basalt-mantine
 OptionalPeers: react-markdown@^10.1.0, remark-gfm@^4.0.1, shiki@^4.3.0, beautiful-mermaid@^1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basalt-ui",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Opinionated framework for Mantine-based React apps — theme, app shell, visx charts, toolchain presets",
   "keywords": [
     "charts",

package/src/agent/stick-to-bottom.tsx

@@ -81,7 +81,8 @@ const LazyStickToBottom = lazy(() =>
                   border: 'none',
                   cursor: 'pointer',
                   backgroundColor: 'var(--vx-surface-panel)',
-                  boxShadow: 'var(--vx-shadow-card)',
+                  // Control depth, not panel depth — this is a real <button> (DESIGN-SPEC §2).
+                  boxShadow: 'var(--vx-shadow-raised)',
                   color: 'var(--vx-faint)',
                   fontFamily: 'var(--basalt-font-mono)',
                   fontSize: VX.text.md,

package/src/agent-chat/composer.tsx

@@ -76,13 +76,14 @@ export function Composer({
     disabled,
     onChange: (event) => setValue(event.currentTarget.value),
     onKeyDown: handleKeyDown,
-    // Composer input surface (docs/DESIGN-SPEC.md §5): panel + shadow-card, control radius (6px,
-    // VX.radiusCtrl) — the ring
-    // lives in the shadow, so the input carries no separate border.
+    // Composer input surface (docs/DESIGN-SPEC.md §5): panel + control radius (6px, VX.radiusCtrl);
+    // the ring lives in the shadow, so the input carries no separate border. Depth is deliberately
+    // NOT set here — it arrives from the themed `.input` class (theme/controls.module.css), which
+    // also grounds it when disabled. A `boxShadow` in this `styles` object renders as an INLINE
+    // style and would beat that class unconditionally, leaving a disabled composer raised.
     styles: {
       input: {
         backgroundColor: 'var(--vx-surface-panel)',
-        boxShadow: 'var(--vx-shadow-card)',
         borderRadius: VX.radiusCtrl,
         border: 'none',
       },

package/src/cli/index.ts

@@ -80,6 +80,15 @@ export type BasaltConfig = {
    * surface tokens. Default: `true` (ON). Set `false` to disable the `off-system-surface-var` check.
    */
   offSystemSurfaceVar?: boolean
+  /**
+   * Flag a SHADE-PINNED Mantine color — `c="yellow.7"`, `bg="blue.4"`,
+   * `var(--mantine-color-red-6)`. A pinned step is one fixed swatch in BOTH color schemes, so it
+   * cannot stay legible in either; route a verdict color through `VX.status.*` / `--vx-status-*`,
+   * or drop the index (`c="red"`) and let the theme resolve the shade per scheme. `gray-*`/`dark-*`
+   * in `var()` form belong to `off-system-surface-var` instead. Default: `true` (ON). Set `false`
+   * to disable the `mantine-shade-index` check.
+   */
+  mantineShadeIndex?: boolean
   /**
    * Flag raw lowercase JSX layout/surface elements (`div`/`span`/`section`/…) carrying an inline
    * `style={{}}` with a layout/surface property — steer to a Mantine layout primitive
@@ -348,6 +357,7 @@ export function checkTheme(cwd: string = process.cwd()): number {
     spacingSteps: cfg.spacingSteps ?? DEFAULT_GUARD_CONFIG.spacingSteps,
     rawRadius: cfg.rawRadius ?? DEFAULT_GUARD_CONFIG.rawRadius,
     forbiddenAccents: cfg.forbiddenAccents ?? DEFAULT_GUARD_CONFIG.forbiddenAccents,
+    mantineShadeIndex: cfg.mantineShadeIndex ?? DEFAULT_GUARD_CONFIG.mantineShadeIndex,
     rawSurface: cfg.rawSurface ?? DEFAULT_GUARD_CONFIG.rawSurface,
     cardWithBorder: cfg.cardWithBorder ?? DEFAULT_GUARD_CONFIG.cardWithBorder,
     offSystemSurfaceVar: cfg.offSystemSurfaceVar ?? DEFAULT_GUARD_CONFIG.offSystemSurfaceVar,
@@ -1827,6 +1837,7 @@ export async function guardHook(cwd: string = process.cwd()): Promise<number> {
     spacingSteps: cfg.spacingSteps ?? DEFAULT_GUARD_CONFIG.spacingSteps,
     rawRadius: cfg.rawRadius ?? DEFAULT_GUARD_CONFIG.rawRadius,
     forbiddenAccents: cfg.forbiddenAccents ?? DEFAULT_GUARD_CONFIG.forbiddenAccents,
+    mantineShadeIndex: cfg.mantineShadeIndex ?? DEFAULT_GUARD_CONFIG.mantineShadeIndex,
     rawSurface: cfg.rawSurface ?? DEFAULT_GUARD_CONFIG.rawSurface,
     cardWithBorder: cfg.cardWithBorder ?? DEFAULT_GUARD_CONFIG.cardWithBorder,
     offSystemSurfaceVar: cfg.offSystemSurfaceVar ?? DEFAULT_GUARD_CONFIG.offSystemSurfaceVar,

package/src/dashboard/index.ts

@@ -1,5 +1,5 @@
 export { DeltaBadge, type DeltaBadgeProps } from './delta-badge'
-export { StatCard, type StatCardProps } from './stat-card'
+export { StatCard, type StatCardProps, type StatCardTone } from './stat-card'
 export { EmptyState, type EmptyStateProps } from './empty-state'
 export {
   SettingsSection,

package/src/dashboard/stat-card.tsx

@@ -8,6 +8,15 @@
  * `src/dashboard` stays @visx-free — `sparkline` is a plain `ReactNode` slot, never a chart import
  * here. Pass a `LineSparkline`/`BarSparkline` from `basalt-ui/charts` at the call site.
  *
+ * `tone` marks the card as past a threshold with an accent rail down its leading edge. It exists
+ * because `value` is typed `string`: without it, a card whose number has crossed a threshold reads
+ * exactly as calm as one that hasn't, and the only way out from the consumer side is to wrap the
+ * card in a hand-rolled positioned `<Box>` — which is a second card idiom in the app, drawn by code
+ * the guard has no way to recognize as one. The rail is the largest signal available without
+ * touching the value's own type: full card height, overlaying the card's edge rather than adding to
+ * it, so layout is unchanged. `undefined` renders nothing at all — absence of a reading is neither a
+ * good one nor a bad one, and must never be tinted.
+ *
  * @example
  * import { StatCard } from 'basalt-ui'
  * import { LineSparkline } from 'basalt-ui/charts'
@@ -18,12 +27,28 @@
  *   delta={4.2}
  *   sparkline={<LineSparkline data={history} width={160} height={32} />}
  * />
+ *
+ * @example
+ * // Past a threshold — an accent rail down the leading edge, value untouched.
+ * <StatCard label="Downtime" value="29 min" tone="bad" />
  */
-import { Card, Group } from '@mantine/core'
+import { Box, Card, Group, VisuallyHidden } from '@mantine/core'
 import type { ReactNode } from 'react'
 import { DeltaBadge } from './delta-badge'
 import { VX } from '../tokens'
 
+/** A threshold verdict on the card's value. `undefined` is never tinted — see the module docblock. */
+export type StatCardTone = 'warn' | 'bad'
+
+/** The rail's width, in px. Wide enough to read as a deliberate mark at a glance, narrow enough
+ * that it cannot be mistaken for the card's own edge. */
+const TONE_RAIL_WIDTH = 3
+
+const TONE_LABEL: Record<StatCardTone, string> = {
+  warn: 'Past the warning threshold',
+  bad: 'Past the severe threshold',
+}
+
 export type StatCardProps = {
   /** Mono uppercase micro-label (docs/DESIGN-SPEC.md §3: 12.5px, tracking 0.06em, faint). */
   label: string
@@ -38,9 +63,20 @@ export type StatCardProps = {
   sparkline?: ReactNode
   /** Optional header-right slot (e.g. a ghost "..." menu trigger) — consumer-owned. */
   menu?: ReactNode
+  /** Threshold verdict — draws an accent rail down the card's leading edge and announces itself to
+   * assistive tech. Omit it for a reading that is fine, and for one that is absent. */
+  tone?: StatCardTone
 }
 
-export function StatCard({ label, value, delta, deltaPeriod, sparkline, menu }: StatCardProps) {
+export function StatCard({
+  label,
+  value,
+  delta,
+  deltaPeriod,
+  sparkline,
+  menu,
+  tone,
+}: StatCardProps) {
   return (
     <Card
       style={{
@@ -56,8 +92,31 @@ export function StatCard({ label, value, delta, deltaPeriod, sparkline, menu }:
         flexDirection: 'column',
         gap: 'var(--vx-space-stat-card-gap)',
         overflow: 'hidden',
+        // Anchors the tone rail. Set unconditionally so a card's stacking context does not change
+        // depending on whether it happens to have crossed a threshold this render.
+        position: 'relative',
       }}
+      data-tone={tone}
     >
+      {tone !== undefined && (
+        <>
+          {/* The rail is decoration; the verdict it encodes is real information, so it is also
+              stated in text for anyone who cannot see a 3px colour bar. Colour alone is never the
+              only carrier of a threshold. */}
+          <VisuallyHidden>{TONE_LABEL[tone]}</VisuallyHidden>
+          <Box
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              insetBlock: 0,
+              insetInlineStart: 0,
+              width: TONE_RAIL_WIDTH,
+              background: tone === 'bad' ? VX.status.bad : VX.status.warn,
+            }}
+          />
+        </>
+      )}
+
       <Group justify="space-between" align="flex-start" wrap="nowrap" gap="xs">
         <span
           style={{