basalt-ui 1.41.0 → 2.0.0

package/dist/theme/index.d.ts

@@ -1,14 +1,14 @@
 import type { CSSVariablesResolver, MantineThemeOverride } from '@mantine/core';
 import type { RadiusValues, SpaceValues } from '../tokens/palette.js';
 import type { DeriveConfig } from '../tokens/derive.js';
-import type { BasaltFontsConfig } from '../tokens/index.js';
+import type { BasaltFontsConfig } from '../tokens/core.js';
 /**
- * The `fonts` option's resolved shape — defined in `basalt-ui/tokens` (`BasaltFontsConfig`,
- * paired with its pure builder `buildFontsCss` there); re-exported here since
+ * The `fonts` option's resolved shape — defined in `../tokens/core` (`BasaltFontsConfig`, paired
+ * with its pure builder `buildFontsCss` there, internal to the package); re-exported here since
  * `CreateBasaltThemeOptions.fonts` below is its primary production entry point. See
  * {@link CreateBasaltThemeOptions.fonts}.
  */
-export type { BasaltFontsConfig } from '../tokens/index.js';
+export type { BasaltFontsConfig } from '../tokens/core.js';
 export { useBasaltSpacing } from './use-basalt-spacing.js';
 export { CTL_THEME, CtlSlot, type CtlSlotProps } from './ctl-theme.js';
 declare module '@mantine/core' {
@@ -22,6 +22,10 @@ declare module '@mantine/core' {
 /** The static, shipped-identity theme — `buildTheme` evaluated once at
  * `DEFAULT_DERIVE_CONFIG` (memoized by `buildPaletteData`), not per import. */
 export declare const baseTheme: MantineThemeOverride;
+/** `radius` knob: an integer level, so an out-of-range value is a tsc error (V2-SPEC §3). */
+export type BasaltRadiusLevel = -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
+/** `density` knob: an integer level, so an out-of-range value is a tsc error (V2-SPEC §3). */
+export type BasaltDensityLevel = -3 | -2 | -1 | 0 | 1 | 2 | 3;
 /** The static, shipped-identity resolver — `buildCssVariablesResolver` evaluated once at
  * `DEFAULT_DERIVE_CONFIG`. Unchanged call signature (`cssVariablesResolver(theme)`), so it drops
  * straight into `<MantineProvider cssVariablesResolver={cssVariablesResolver}>` as before. */
@@ -76,7 +80,7 @@ export type CreateBasaltThemeOptions = {
      * @example
      * createBasaltTheme(undefined, { radius: 2 })
      */
-    radius?: number;
+    radius?: BasaltRadiusLevel;
     /**
      * Retune spacing DENSITY from a single integer level in `[-3, 3]` (default `0` = the shipped
      * identity) — narrower than `radius`'s `[-5, 5]` on purpose (see `deriveSpacing`'s JSDoc,
@@ -98,22 +102,7 @@ export type CreateBasaltThemeOptions = {
      * @example
      * createBasaltTheme(undefined, { density: -2 })
      */
-    density?: number;
-    /**
-     * Input sizing for the platform the app runs on. `'touch'` (default) keeps the shipped identity:
-     * `md` inputs (42px) with the 16px font floor that stops iOS Safari's focus-zoom. `'desktop'` is
-     * for an app that never runs in a mobile browser (a Tauri/Electron shell): the Input family
-     * (`TextInput`, `NumberInput`, `PasswordInput`, `Select`, `Textarea`, `Input`) defaults to
-     * Mantine's `sm` (36px, `--vx-text-sm` font) and the provider drops the 16px floor, so every
-     * input Mantine ships — `MultiSelect`/`TagsInput`/pills included, they already default to `sm` —
-     * renders at its own size. An explicit `size` prop still wins. Stashed on
-     * `theme.other.basaltInputs` (only when non-default); `BasaltProvider` emits the floor override,
-     * so `injectPalette={false}` also opts it out.
-     *
-     * @example
-     * createBasaltTheme(undefined, { inputs: 'desktop' })
-     */
-    inputs?: 'touch' | 'desktop';
+    density?: BasaltDensityLevel;
 };
 /**
  * Build the Basalt theme, optionally merged with consumer overrides. Overrides win on conflict

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EACV,oBAAoB,EAGpB,oBAAoB,EAErB,MAAM,eAAe,CAAA;AAStB,OAAO,KAAK,EAAe,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAGpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAQlD;;;;;GAKG;AACH,YAAY,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAIlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAMvD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAA;AAgBnE,OAAO,QAAQ,eAAe,CAAC;IAC7B,UAAU,iBAAiB;QACzB,YAAY,CAAC,EAAE,YAAY,CAAA;QAC3B,WAAW,CAAC,EAAE,iBAAiB,CAAA;QAC/B,YAAY,CAAC,EAAE,YAAY,CAAA;QAC3B,aAAa,CAAC,EAAE,WAAW,CAAA;KAC5B;CACF;AAuiCD;+EAC+E;AAC/E,eAAO,MAAM,SAAS,EAAE,oBAAuD,CAAA;AAkU/E;;8FAE8F;AAC9F,eAAO,MAAM,oBAAoB,EAAE,oBACc,CAAA;AAEjD,kEAAkE;AAClE,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAE9B;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;IAEzB;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC7B,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,EACrD,OAAO,CAAC,EAAE,wBAAwB,GACjC,oBAAoB,CAmCtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EACV,oBAAoB,EAGpB,oBAAoB,EAErB,MAAM,eAAe,CAAA;AAStB,OAAO,KAAK,EAAe,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAGpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAQvD;;;;;GAKG;AACH,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAMvD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAA;AAenE,OAAO,QAAQ,eAAe,CAAC;IAC7B,UAAU,iBAAiB;QACzB,YAAY,CAAC,EAAE,YAAY,CAAA;QAC3B,WAAW,CAAC,EAAE,iBAAiB,CAAA;QAC/B,YAAY,CAAC,EAAE,YAAY,CAAA;QAC3B,aAAa,CAAC,EAAE,WAAW,CAAA;KAC5B;CACF;AAyiCD;+EAC+E;AAC/E,eAAO,MAAM,SAAS,EAAE,oBAAuD,CAAA;AA8O/E,6FAA6F;AAC7F,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAE9E,8FAA8F;AAC9F,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAsF7D;;8FAE8F;AAC9F,eAAO,MAAM,oBAAoB,EAAE,oBACc,CAAA;AAEjD,kEAAkE;AAClE,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAE9B;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;IAEzB;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAE1B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;CAC7B,CAAA;AAYD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,EACrD,OAAO,CAAC,EAAE,wBAAwB,GACjC,oBAAoB,CAiCtB"}

package/dist/theme/index.js

@@ -55,7 +55,7 @@ import {
   SPACE_FIXED
 } from "../tokens/palette.js";
 import { DEFAULT_DERIVE_CONFIG, isDefaultDeriveConfig, resolveDeriveConfig } from "../tokens/derive.js";
-import { pxRem, VX } from "../tokens/index.js";
+import { pxRem, VX } from "../tokens/core.js";
 import { SIZE_CLASS_BREAKPOINTS } from "../tokens/size-classes.js";
 import controlsClasses from "./controls.module.css";
 import floatingClasses from "./floating.module.css";
@@ -181,6 +181,8 @@ function buildTheme(data, options = {}) {
     // Mantine's dark `--mantine-color-{c}-text`, which is hardcoded to shade 4 = `ACCENT.accent.dark`.
     primaryShade: 6,
     autoContrast: true,
+    // V2-SPEC § 5: Mantine's own transitions (modal, drawer, popover, menu) follow the OS setting.
+    respectReducedMotion: true,
     luminanceThreshold: 0.45,
     // Force the `light` variant to a faint, AA-legible tint in both schemes (see resolver above).
     variantColorResolver: basaltVariantColorResolver,
@@ -1056,17 +1058,6 @@ const cssVariablesResolver = buildCssVariablesResolver(DEFAULT_PALETTE_DATA);
 function hasFontsConfig(fonts) {
   return fonts !== void 0 && Object.values(fonts).some((value) => value !== void 0);
 }
-const DESKTOP_INPUTS_THEME = {
-  components: {
-    Input: Input.extend({ defaultProps: { size: "sm" } }),
-    TextInput: TextInput.extend({ defaultProps: { size: "sm" } }),
-    NumberInput: NumberInput.extend({ defaultProps: { size: "sm" } }),
-    PasswordInput: PasswordInput.extend({ defaultProps: { size: "sm" } }),
-    Select: Select.extend({ defaultProps: { size: "sm" } }),
-    Textarea: Textarea.extend({ defaultProps: { size: "sm" } })
-  },
-  other: { basaltInputs: "desktop" }
-};
 function createBasaltTheme(overrides, options) {
   const resolvedConfig = resolveDeriveConfig(options?.derive);
   const radiusLevel = options?.radius ?? 0;
@@ -1076,7 +1067,6 @@ function createBasaltTheme(overrides, options) {
   const spaceValues = deriveSpacing(densityLevel);
   const isDefaultDensity = densityLevel === 0;
   const isDefaultDerive = isDefaultDeriveConfig(resolvedConfig);
-  const desktopInputs = options?.inputs === "desktop";
   let theme;
   if (isDefaultDerive && isDefaultRadius && isDefaultDensity) {
     theme = baseTheme;
@@ -1097,7 +1087,6 @@ function createBasaltTheme(overrides, options) {
   if (hasFontsConfig(fontsConfig)) {
     theme = mergeThemeOverrides(theme, { other: { basaltFonts: fontsConfig } });
   }
-  if (desktopInputs) theme = mergeThemeOverrides(theme, DESKTOP_INPUTS_THEME);
   if (!overrides) return theme;
   return { ...mergeThemeOverrides(theme, overrides), breakpoints: SIZE_CLASS_BREAKPOINTS };
 }

package/dist/theme/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../src/theme/theme-toggle.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAqFlD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAOD,wBAAgB,WAAW,CAAC,EAC1B,SAAe,EACf,UAAgB,EAChB,SAAS,EACT,KAAK,GACN,GAAE,gBAAqB,+BA+DvB"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../src/theme/theme-toggle.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AA8DlD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAOD,wBAAgB,WAAW,CAAC,EAC1B,SAAe,EACf,UAAgB,EAChB,SAAS,EACT,KAAK,GACN,GAAE,gBAAqB,+BA8DvB"}

package/dist/theme/theme-toggle.js

@@ -1,16 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   ActionIcon,
-  Center,
   Popover,
   SegmentedControl,
   useComputedColorScheme,
   useMantineColorScheme
 } from "@mantine/core";
-import { useReducedMotion } from "@mantine/hooks";
-import { AnimatePresence, motion } from "motion/react";
 import { useRef, useState } from "react";
-import { MOTION_SPRING } from "../common/motion.js";
+import classes from "./theme-toggle.module.css";
 const CYCLE = ["light", "dark", "auto"];
 const LABEL = {
   light: "Light",
@@ -53,33 +50,11 @@ function MoonGlyph() {
     }
   ) });
 }
-function SchemeGlyph({ dark, reduceMotion }) {
-  if (reduceMotion) {
-    return /* @__PURE__ */ jsx(Center, { component: "span", inline: true, children: dark ? /* @__PURE__ */ jsx(MoonGlyph, {}) : /* @__PURE__ */ jsx(SunGlyph, {}) });
-  }
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: dark ? /* @__PURE__ */ jsx(
-    motion.span,
-    {
-      style: { display: "inline-flex" },
-      initial: { opacity: 0, scale: 0.6, rotate: 30 },
-      animate: { opacity: 1, scale: 1, rotate: 0 },
-      exit: { opacity: 0, scale: 0.6, rotate: -30 },
-      transition: MOTION_SPRING,
-      children: /* @__PURE__ */ jsx(MoonGlyph, {})
-    },
-    "moon"
-  ) : /* @__PURE__ */ jsx(
-    motion.span,
-    {
-      style: { display: "inline-flex" },
-      initial: { opacity: 0, scale: 0.6, rotate: -30 },
-      animate: { opacity: 1, scale: 1, rotate: 0 },
-      exit: { opacity: 0, scale: 0.6, rotate: 30 },
-      transition: MOTION_SPRING,
-      children: /* @__PURE__ */ jsx(SunGlyph, {})
-    },
-    "sun"
-  ) });
+function SchemeGlyph({ dark }) {
+  return /* @__PURE__ */ jsxs("span", { className: classes.glyph, "data-dark": dark, children: [
+    /* @__PURE__ */ jsx("span", { className: classes.sun, children: /* @__PURE__ */ jsx(SunGlyph, {}) }),
+    /* @__PURE__ */ jsx("span", { className: classes.moon, children: /* @__PURE__ */ jsx(MoonGlyph, {}) })
+  ] });
 }
 function nextScheme(current) {
   return CYCLE[(CYCLE.indexOf(current) + 1) % CYCLE.length];
@@ -92,7 +67,6 @@ function ThemeToggle({
 } = {}) {
   const { colorScheme, setColorScheme } = useMantineColorScheme();
   const resolved = useComputedColorScheme("dark");
-  const reduceMotion = useReducedMotion();
   const [opened, setOpened] = useState(false);
   const timer = useRef(void 0);
   const scheduleOpen = () => {
@@ -127,7 +101,7 @@ function ThemeToggle({
             onMouseLeave: scheduleClose,
             onFocus: scheduleOpen,
             onBlur: scheduleClose,
-            children: /* @__PURE__ */ jsx(SchemeGlyph, { dark, reduceMotion })
+            children: /* @__PURE__ */ jsx(SchemeGlyph, { dark })
           }
         ) }),
         /* @__PURE__ */ jsx(

package/dist/theme/theme-toggle.module.css

@@ -0,0 +1,30 @@
+/*
+ * The sun/moon glyph: both icons stacked in one grid cell, the inactive one faded, shrunk and
+ * rotated away. A CSS transition, not `motion` (V2-SPEC § 5); reduced motion swaps instantly.
+ */
+.glyph {
+  display: inline-grid;
+  place-items: center;
+}
+
+.sun,
+.moon {
+  grid-area: 1 / 1;
+  display: inline-flex;
+  transition:
+    opacity 150ms ease,
+    transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glyph[data-dark='true'] .sun,
+.glyph[data-dark='false'] .moon {
+  opacity: 0;
+  transform: scale(0.6) rotate(30deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sun,
+  .moon {
+    transition: none;
+  }
+}

package/dist/theme/theme-toggle.module.css.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 glyph: string
+  readonly sun: string
+  readonly moon: string
+}
+export default classes

package/dist/theme-lab/derive-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"derive-controls.d.ts","sourceRoot":"","sources":["../../src/theme-lab/derive-controls.tsx"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBtC,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAiDpG,MAAM,MAAM,mBAAmB,GAAG;IAChC,uFAAuF;IACvF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BA0FhE"}
+{"version":3,"file":"derive-controls.d.ts","sourceRoot":"","sources":["../../src/theme-lab/derive-controls.tsx"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBtC,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAiDpG,MAAM,MAAM,mBAAmB,GAAG;IAChC,uFAAuF;IACvF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BA4FhE"}

package/dist/theme-lab/derive-controls.js

@@ -10,7 +10,7 @@ import {
   Text
 } from "@mantine/core";
 import { useEffect, useState } from "react";
-import { buildDensityCss, buildPaletteCss, buildRadiusCss } from "../tokens/index.js";
+import { buildDensityCss, buildPaletteCss, buildRadiusCss } from "../tokens/core.js";
 import { buildPaletteData, deriveRadius, deriveSpacing } from "../tokens/palette.js";
 import {
   DEFAULT_STATE,
@@ -56,9 +56,11 @@ if (typeof document !== "undefined") {
 function DeriveControls({ resetIcon }) {
   const [state, setState] = useDeriveControlsState();
   const [accentDraft, setAccentDraft] = useState(state.accent);
-  useEffect(() => {
+  const [draftSource, setDraftSource] = useState(state.accent);
+  if (draftSource !== state.accent) {
+    setDraftSource(state.accent);
     setAccentDraft(state.accent);
-  }, [state.accent]);
+  }
   const handleAccentChange = (value) => {
     setAccentDraft(value);
     if (isAccentHex(value)) setState({ ...state, accent: value });

package/dist/theme-lab/derive-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"derive-state.d.ts","sourceRoot":"","sources":["../../src/theme-lab/derive-state.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AASpD,mGAAmG;AACnG,eAAO,MAAM,eAAe;;;GAK3B,CAAA;AAKD,uGAAuG;AACvG,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,KAAG,OAA6B,CAAA;AAEzE,mGAAmG;AACnG,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG;IAChD,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,oBAK3B,CAAA;AAWD;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,OAAO,GAAG,oBAAoB,GAAG,IAAI,CA2BrF;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,6EAgBjC,CAAA;AAEF;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhG;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,oBAAoB,GAAG,cAAc,GAAG,IAAI,CAcnF;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,IAAI,cAAc,GAAG,IAAI,CAGjE"}
+{"version":3,"file":"derive-state.d.ts","sourceRoot":"","sources":["../../src/theme-lab/derive-state.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AASpD,mGAAmG;AACnG,eAAO,MAAM,eAAe;;;GAK3B,CAAA;AAKD,uGAAuG;AACvG,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,KAAG,OAA6B,CAAA;AAEzE,mGAAmG;AACnG,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG;IAChD,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,oBAK3B,CAAA;AAWD;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,OAAO,GAAG,oBAAoB,GAAG,IAAI,CA2BrF;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,6EAgBjC,CAAA;AAEF;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhG;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,oBAAoB,GAAG,cAAc,GAAG,IAAI,CAcnF;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,IAAI,cAAc,GAAG,IAAI,CAGjE"}

package/dist/theme-lab/derive-state.js

@@ -1,4 +1,5 @@
-import { createPersistedState, readPersistedValue } from "../state.js";
+import { createPersistedState } from "../state.js";
+import { readPersistedValue } from "../state/persisted.js";
 import { DEFAULT_DERIVE_CONFIG, resolveDeriveConfig } from "../tokens/derive.js";
 const STORAGE_KEY = "theme-lab-derive";
 const STORAGE_VERSION = 4;

package/dist/tokens/core.d.ts

@@ -0,0 +1,360 @@
+/**
+ * Mantine-free token + palette layer.
+ *
+ * This module is PURE DATA + string helpers — ZERO `@mantine/*` imports (lint-enforced).
+ * Colors are CSS custom properties under the `--vx-*` prefix (do NOT rename the prefix).
+ * They resolve per color scheme in CSS, so `VX.*` works in components AND in non-component
+ * files. Apply opacity via `alpha(token, a)` (never raw `rgba()`) so the hue keeps resolving.
+ *
+ * Grounded in argo `packages/charts/src/{tokens,palette,theme-vars,utils/color}.ts`.
+ */
+import type { PaletteData, RadiusValues, SpaceValues } from './palette.js';
+export { BP, p } from './palette.js';
+export { DEFAULT_DERIVE_CONFIG, deriveTokens, resolveDeriveConfig } from './derive.js';
+export type { DeriveConfig, DerivedPalette } from './derive.js';
+export { deriveRadius } from './palette.js';
+export type { RadiusValues } from './palette.js';
+export { deriveSpacing } from './palette.js';
+export type { SpaceValues } from './palette.js';
+export { CONTAINER_CLASSES, CONTAINER_GRID_BREAKPOINTS, CONTAINER_KEYS, resolveContainerClass, SIZE_CLASSES, } from './size-classes.js';
+export type { ContainerClass } from './size-classes.js';
+/** A per-theme color pair: a hue keeps its identity but shifts shade across schemes. */
+export type ColorPair = {
+    light: string;
+    dark: string;
+};
+/** A map of token name → per-theme color pair (the input shape for series/group builders). */
+export type SeriesMap = Record<string, ColorPair>;
+/**
+ * Apply opacity to any palette token, theme-aware. Use instead of raw `rgba()` so the
+ * underlying hue still resolves per color scheme.
+ *
+ *   alpha(VX.neutral, 0.5)        // muted hairline
+ *   alpha(VX.status.warn, 0.1)    // zone-band fill
+ */
+export declare const alpha: (token: string, a: number) => string;
+export declare const VX: {
+    readonly lineWidth: 2.5;
+    readonly line2Width: 2;
+    readonly axisFont: 11;
+    readonly dotR: number;
+    readonly dashArray: "6 4";
+    readonly legendGap: number;
+    readonly legendFontSize: 13.5;
+    readonly text: {
+        readonly nano: 10;
+        readonly micro: 11;
+        readonly xs: 12.5;
+        readonly sm: 13.5;
+        readonly md: 15;
+        readonly lg: 16;
+        readonly xl: 18;
+        readonly h2: 21;
+        readonly kpi: 24;
+        readonly h1: 26;
+        readonly display: 30;
+    };
+    readonly radiusCard: "var(--vx-radius-card)";
+    readonly radiusCtrl: "var(--vx-radius-ctrl)";
+    readonly radiusPill: "var(--vx-radius-pill)";
+    readonly hit: "var(--vx-hit)";
+    readonly space: {
+        readonly controlHeightTag: "var(--vx-space-control-height-tag)";
+        readonly controlHeightWidget: "var(--vx-space-control-height-widget)";
+        readonly controlHeightCtl: "var(--vx-space-control-height-ctl)";
+        readonly pageBarRowHeight: "var(--vx-space-page-bar-row-height)";
+        readonly sectionHeaderHeight: "var(--vx-space-section-header-height)";
+        readonly widgetHeaderHeight: "var(--vx-space-widget-header-height)";
+        readonly sidebarBlockRowHeight: "var(--vx-space-sidebar-block-row-height)";
+        readonly controlGap: "var(--vx-space-control-gap)";
+        readonly sheetRowHeight: "var(--vx-space-sheet-row-height)";
+    };
+    readonly line2Dark: "var(--vx-line2)";
+    readonly good: "var(--vx-good)";
+    readonly goodSoft: "var(--vx-good-soft)";
+    readonly bad: "var(--vx-bad)";
+    readonly warn: "var(--vx-warn)";
+    readonly goodSolid: "var(--vx-good-solid)";
+    readonly badSolid: "var(--vx-bad-solid)";
+    readonly warnSolid: "var(--vx-warn-solid)";
+    readonly goodRef: "var(--vx-good-ref)";
+    readonly badRef: "var(--vx-bad-ref)";
+    readonly warnRef: "var(--vx-warn-ref)";
+    readonly line: "var(--vx-line)";
+    readonly line2: "var(--vx-line2)";
+    readonly axis: "var(--vx-axis)";
+    readonly axisStroke: "var(--vx-axis-stroke)";
+    readonly grid: "var(--vx-grid)";
+    readonly crosshair: "var(--vx-crosshair)";
+    readonly dotStroke: "var(--vx-dot-stroke)";
+    readonly legendText: "var(--vx-legend-text)";
+    readonly tooltipMuted: "var(--vx-tooltip-muted)";
+    readonly neutral: "var(--vx-neutral)";
+    readonly ink: "var(--vx-ink)";
+    readonly ink2: "var(--vx-ink2)";
+    readonly muted: "var(--vx-muted)";
+    readonly faint: "var(--vx-faint)";
+    readonly accent: "var(--vx-accent)";
+    readonly accentHover: "var(--vx-accent-hover)";
+    readonly accentFill: "var(--vx-accent-fill)";
+    readonly accentFillHover: "var(--vx-accent-fill-hover)";
+    readonly onAccent: "var(--vx-on-accent)";
+    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)";
+        readonly panel: "var(--vx-surface-panel)";
+        readonly panelHover: "var(--vx-surface-panel-hover)";
+        readonly elevated: "var(--vx-surface-elevated)";
+        readonly subtle: "var(--vx-surface-subtle)";
+        readonly overlay: "var(--vx-surface-overlay)";
+        readonly field: "var(--vx-surface-field)";
+        readonly border: "var(--vx-surface-border)";
+        readonly hairline: "var(--vx-surface-hairline)";
+    };
+    readonly status: {
+        readonly excellent: "var(--vx-status-excellent)";
+        readonly good: "var(--vx-status-good)";
+        readonly warn: "var(--vx-status-warn)";
+        readonly bad: "var(--vx-status-bad)";
+        readonly neutral: "var(--vx-status-neutral)";
+    };
+    readonly margin: {
+        readonly top: number;
+        readonly right: number;
+        readonly bottom: number;
+        readonly left: number;
+    };
+    readonly minPxPerTick: 55;
+    /**
+     * Floor on a chart's plot rect height, in px (the 1.x chart frame). A legend wrapping to five rows at
+     * phone width used to eat a fixed `height={240}` toward zero and the plot simply stopped
+     * rendering — the plot never shrinks past this, the frame grows instead (or, under `fill`, the
+     * legend rolls up).
+     */
+    readonly minPlotHeight: 120;
+    /** Every floating chart overlay portalled to `document.body` — a pinned tooltip, the legend's
+     * `All N` disclosure and its backdrop — shares one stacking value, so they always stack the same
+     * way relative to page chrome and to each other. */
+    readonly zIndexFloating: 9999;
+};
+/**
+ * Layout breakpoints, in px, for the places CSS cannot read a custom property.
+ *
+ * A `@media` query's condition is resolved before custom properties exist, so
+ * `@media (max-width: var(--x))` is invalid CSS — a stylesheet with a responsive rule has no
+ * choice but to write the number. This constant is the other half of that literal: the CSS states
+ * the number and names the token beside it, and a test asserts the two agree
+ * (`content/article-layout.breakpoint.test.ts`, the same "literal must match the token" idiom as
+ * `styles.floor.test.ts`).
+ *
+ * Only breakpoints that are genuinely a CSS-authored `@media` belong here. A component that can
+ * measure its own box uses the measurement instead (`CONTAINER_CLASSES`), and Mantine chrome uses
+ * `theme.breakpoints`.
+ */
+export declare const BREAKPOINTS: {
+    /**
+     * `content/article-layout.module.css` — below this the TOC rail is dropped and the article
+     * collapses to a single centred column. Well above the `sm` (52.5em/840px) shell breakpoint on
+     * purpose: the rail needs the prose measure PLUS its own width plus the column gap, which runs
+     * out long before the shell goes mobile.
+     */
+    readonly article: 1200;
+};
+/**
+ * A px number expressed as the plain rem STRING literal (16px base: `pxRem(6)` → `'0.375rem'`) —
+ * NOT Mantine's own `rem()` helper, which instead emits a `calc(...)` expression bound to
+ * `--mantine-scale` (a different value; that scaling happens at the Mantine-coupled call site
+ * instead — see `theme/index.ts`'s `Input.extend` `vars` for why `--vx-space-input-height` needs
+ * both halves). The SINGLE source for this conversion — `theme/index.ts` imports this instead of
+ * keeping its own copy, so the radius/spacing size-scale steps and this module's own rem-emitting
+ * vars (`--vx-space-input-height`) can never compute the conversion two different ways.
+ */
+export declare function pxRem(px: number): string;
+/**
+ * Wrap a map of `{ name: ColorPair }` into `var(--vx-<prefix><name>)` token refs — the runtime
+ * companion to `buildPaletteCss`. Lets a consumer define its own series and read stable refs.
+ *
+ * Returns an exact-keyed object: the return type mirrors the keys of the input map, so a renamed
+ * or removed key becomes a tsc error rather than silently widening to `Record<string, string>`.
+ */
+export declare function seriesTokens<const T extends SeriesMap>(map: T, prefix?: string): {
+    [K in keyof T]: string;
+};
+/**
+ * Define a named series map. Identity passthrough — gives consumers a typed authoring entry
+ * point and preserves the exact literal keys of the input (const-generic so callers get back T,
+ * not the widened SeriesMap, enabling downstream exact-key checks in groupTokens / seriesTokens).
+ */
+export declare function defineSeries<const T extends SeriesMap>(map: T): T;
+/** Runtime key of the {@link SeriesGroup} brand. */
+declare const SERIES_GROUP: unique symbol;
+/**
+ * The brand `groupTokens` puts on its return value. `BuildPaletteOpts.groups` takes these, so the
+ * `${name}-` key that emits the variables and the one that references them come from one call and
+ * cannot be spelled two ways.
+ */
+export type SeriesGroup = {
+    readonly [SERIES_GROUP]: {
+        readonly prefix: string;
+        readonly map: SeriesMap;
+    };
+};
+/**
+ * Build a single namespaced group's token refs (`var(--vx-<name>-<key>)`).
+ *
+ * Returns an exact-keyed object matching the keys of `map` — a stale or renamed key is a tsc
+ * error at the call site rather than a silent `Record<string, string>` widening.
+ */
+export declare function groupTokens<const T extends SeriesMap>(name: string, map: T): {
+    [K in keyof T]: string;
+} & SeriesGroup;
+/**
+ * The attribute + values the per-scheme blocks key off. Defaults reproduce Mantine's own toggle
+ * (`data-mantine-color-scheme` = `dark` / `light`), so a consumer only names the axis it differs
+ * on. Supplying this object at all switches the emitter onto the framework-neutral selector shape
+ * — see {@link BuildPaletteOpts.scheme}.
+ */
+export type ColorSchemeSelector = {
+    attribute?: string;
+    darkValue?: string;
+    lightValue?: string;
+};
+/** Options for {@link buildPaletteCss}. */
+export type BuildPaletteOpts = {
+    /** Extra named series maps to emit under the given prefixes (each one is the return value of `groupTokens`). */
+    groups?: readonly SeriesGroup[];
+    /** Theme-independent derived declarations (gradients, semantic fills) emitted once on `:root`. */
+    derived?: string[];
+    /**
+     * Attribute + values the per-scheme blocks key off — for a consumer whose scheme toggle is not
+     * Mantine's (a static site on `data-theme`, say). Default: Mantine's own
+     * `data-mantine-color-scheme` = `dark` / `light`.
+     *
+     * Setting ANY of `scheme` / `defaultScheme` / `mediaFallback` moves the emitter off the legacy
+     * `html[…]` selector onto `:root[…]`. That is deliberate and load-bearing, NOT cosmetic:
+     *
+     *   `:root[data-theme='dark']`   0-2-0   ← what this path emits
+     *   `html[data-theme='dark']`    0-1-1
+     *   `[data-theme='dark']`        0-1-0   ← same as a bare `:root`, so source order decides
+     *
+     * A light-default site whose own `:root` block happens to come last would beat the third form
+     * outright — dark mode silently does nothing. `:root[…]` sits above both a bare `:root` and
+     * `html[…]`, and carries no assumption about the element the attribute lands on.
+     *
+     * The no-options path keeps emitting `html[data-mantine-color-scheme='…']` verbatim, because a
+     * basalt consumer may already override `--vx-*` under that exact selector — raising basalt's own
+     * specificity would silently win over their override.
+     */
+    scheme?: ColorSchemeSelector;
+    /**
+     * Which scheme rides along on the bare `:root` block — the one that applies when the attribute
+     * is absent. Default: `'dark'` (the framework's own default scheme).
+     *
+     * `'none'` emits no bare-`:root` primitives at all: each scheme gets only its attribute block,
+     * and an unattributed document falls back to the theme-independent scalars alone. Pair it with
+     * `mediaFallback` unless the consumer always sets the attribute.
+     */
+    defaultScheme?: 'dark' | 'light' | 'none';
+    /**
+     * Also emit an `@media (prefers-color-scheme: …)` block for every scheme that is not the bare
+     * `:root` default, so a document with no attribute set follows the OS. Default: `false`.
+     *
+     * The block is a bare `:root` (0-1-0), so an explicit attribute block (0-2-0) always wins over
+     * it regardless of source order — the OS preference is a fallback, never an override.
+     */
+    mediaFallback?: boolean;
+    /**
+     * How much of the SPACING set to emit. Default: `'all'` (every one of the 108 `--vx-space-*`
+     * declarations the framework's own components read).
+     *
+     * `'core'` keeps the 9 generic anchors — the stack rhythm, the two control heights, the row
+     * insets — and drops the 99 named for a specific basalt component
+     * (`--vx-space-agent-transcript-inset`, `--vx-space-toc-sub-indent`, …), taking the emitted set
+     * from 204 variables to 105. Nothing outside basalt's own React components reads those, so a
+     * framework-free consumer is carrying them for nothing.
+     *
+     * This is a SPACING filter only: color, radius, shadow, type and status variables are identical
+     * in both modes. The partition is derived from the `SPACE` key set rather than a maintained list
+     * — see {@link CORE_SPACE_VARS}.
+     */
+    only?: 'core' | 'all';
+    /**
+     * Whether to also emit the 32 deprecated camelCase aliases (`--vx-accentFill`, `--vx-tooltipBg`,
+     * `--vx-fillHover-gray`, …) alongside the canonical kebab-case names the 1.4.0 normalization
+     * introduced. Default: `true`, so an existing consumer's hand-written CSS referencing a
+     * camelCase name keeps resolving. Each alias is defined as `var(--vx-<canonical>)` — it can
+     * never drift from the value it aliases. Pass `false` once every reference in your own code has
+     * migrated to the kebab names to drop the extra 32 lines.
+     */
+    legacyAliases?: boolean;
+};
+/**
+ * Emit the `--vx-*` stylesheet: a `:root` block of theme-independent scalars, then the
+ * dark (default) and light primitive blocks under `html[data-mantine-color-scheme='…']`.
+ *
+ * The framework chrome (STATUS/SEMANTIC/SURFACE pairs + the framework DERIVED defaults) is
+ * built in, so an empty `buildPaletteCss()` already emits every framework var. Consumer
+ * `opts.groups` / `opts.derived` append on top (e.g. argo's domain SERIES/ACTIVITY/USAGE).
+ *
+ * `data` defaults to the static, shipped palette (`buildPaletteData()` at `DEFAULT_DERIVE_CONFIG`)
+ * — pass the result of `buildPaletteData(config)` to emit CSS for a retuned derive config instead
+ * (this is how `BasaltProvider` follows `createBasaltTheme`'s `{ derive }` option; see `../theme`
+ * and `../provider`).
+ *
+ * Dark is the default (`:root`) since the framework defaults to dark; the
+ * `[data-mantine-color-scheme]` selectors track Mantine's toggle on `<html>`.
+ *
+ * A non-Mantine consumer retargets all three of those choices — the attribute, which scheme rides
+ * the bare `:root`, and whether the OS preference is honoured — via `opts.scheme` /
+ * `opts.defaultScheme` / `opts.mediaFallback`. Setting any of them also moves the per-scheme
+ * selector from `html[…]` to the framework-neutral, higher-specificity `:root[…]`; see
+ * `BuildPaletteOpts.scheme` for why that is not cosmetic. With none of them set the output is
+ * byte-identical to what the framework has always emitted (pinned by
+ * `tests/palette-css.test.ts`).
+ */
+export declare function buildPaletteCss(opts?: BuildPaletteOpts, data?: PaletteData): string;
+/**
+ * The `fonts` option's resolved shape — a full CSS font-family stack string per slot (with its own
+ * fallback chain), riding the `--basalt-font-sans/head/mono` override seam `styles.css` ships
+ * fallbacks for. Omitted keys keep the shipped fallback untouched. Lives here (not in `../theme`,
+ * which only re-exports the type) because its builder `buildFontsCss` below is a pure, Mantine-free
+ * string builder that belongs in the tokens layer — see `../theme`'s
+ * `CreateBasaltThemeOptions.fonts` for the production entry point that sets it.
+ */
+export type BasaltFontsConfig = {
+    sans?: string;
+    head?: string;
+    mono?: string;
+};
+/**
+ * Build the `:root` block of `--basalt-font-*` declarations for a resolved `basaltFonts` config —
+ * only for the keys the consumer actually set (`createBasaltTheme(overrides, { fonts })`); an
+ * omitted key keeps the shipped `styles.css` fallback chain untouched. Empty string when `fonts` is
+ * absent or every key is omitted, so callers can unconditionally concatenate the result. Internal
+ * (not on the `basalt-ui/tokens` barrel) — `BasaltProvider`'s bridge (`../provider`) calls this
+ * directly to append declarations to its injected `<style>`.
+ */
+export declare function buildFontsCss(fonts: BasaltFontsConfig | undefined): string;
+/**
+ * Build the `:root` block of overriding `--vx-radius-*` declarations for a resolved
+ * `basaltRadius` value (`createBasaltTheme(overrides, { radius })`) — analog of {@link buildFontsCss}.
+ * Empty string when `radius` is absent (the default level-0 path never sets `theme.other.basaltRadius`
+ * in the first place), so callers can unconditionally concatenate the result. Internal, like
+ * `buildFontsCss` above.
+ */
+export declare function buildRadiusCss(radius: RadiusValues | undefined): string;
+/**
+ * Build the `:root` block of overriding `--vx-space-*` declarations for a resolved `basaltDensity`
+ * value (`createBasaltTheme(overrides, { density })`) — analog of {@link buildRadiusCss}, reusing
+ * the SAME `spaceDecls` list `frameworkDerived` emits the shipped defaults from (so the two can
+ * never drift). Empty string when `space` is absent (the default level-0 path never sets
+ * `theme.other.basaltDensity` in the first place), so callers can unconditionally concatenate the
+ * result. Importable from `basalt-ui/tokens`, same SSR/custom-injection use as `buildRadiusCss`
+ * above.
+ */
+export declare function buildDensityCss(space: SpaceValues | undefined): string;
+//# sourceMappingURL=core.d.ts.map