pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/Theme/tokens/builders/sidebarAccent.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSidebarTokens = exports.buildSidebarTokens = exports.sidebarActiveSurface = exports.ACTIVE_SURFACE_TINT = exports.AA_NORMAL_TEXT = void 0;
+exports.withSidebarTokens = exports.buildSidebarTokens = exports.sidebarDivider = exports.sidebarHoverSurface = exports.DIVIDER_SURFACE_TINT = exports.HOVER_SURFACE_TINT = exports.sidebarRowPeak = exports.sidebarActiveSurface = exports.ACTIVE_SURFACE_TINT = exports.AA_NORMAL_TEXT = void 0;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const semanticText_1 = require("./semanticText");
@@ -10,6 +10,17 @@ exports.AA_NORMAL_TEXT = 4.5;
 exports.ACTIVE_SURFACE_TINT = "#ffffff3d";
 const sidebarActiveSurface = (background) => (0, color_1.compositeOver)(exports.ACTIVE_SURFACE_TINT, background[500]);
 exports.sidebarActiveSurface = sidebarActiveSurface;
+/** Lightest a row ever gets on ANY rail surface — what chrome inside a row must clear. */
+const sidebarRowPeak = (surface) => (0, color_1.compositeOver)(exports.ACTIVE_SURFACE_TINT, surface);
+exports.sidebarRowPeak = sidebarRowPeak;
+/** Stronger than the divider — a hover fill must read as an action, not a rule. */
+exports.HOVER_SURFACE_TINT = "#ffffff20";
+/** Chakra whiteAlpha.100 (0.06) — a divider only needs to read, not shout. */
+exports.DIVIDER_SURFACE_TINT = "#ffffff0f";
+const sidebarHoverSurface = (background) => (0, outlineRung_1.resolveHoverTint)((0, color_1.compositeOver)(exports.HOVER_SURFACE_TINT, background[500]), background[500]);
+exports.sidebarHoverSurface = sidebarHoverSurface;
+const sidebarDivider = (background) => (0, outlineRung_1.resolveHoverTint)((0, color_1.compositeOver)(exports.DIVIDER_SURFACE_TINT, background[500]), background[500]);
+exports.sidebarDivider = sidebarDivider;
 /** The rail never inverts, so both modes take the accent from the LIGHT primary. */
 const buildSidebarTokens = (background, lightPrimary, semantic) => {
     const surface = (0, exports.sidebarActiveSurface)(background);
@@ -22,6 +33,9 @@ const buildSidebarTokens = (background, lightPrimary, semantic) => {
         mutedIcon: (0, outlineRung_1.liftToContrast)(background[300], elevated, outlineRung_1.AA_NON_TEXT),
         mutedLabel: (0, outlineRung_1.liftToContrast)(background[100], elevated, exports.AA_NORMAL_TEXT),
         semanticText: (0, semanticText_1.buildSemanticText)(semantic, elevated),
+        hoverBg: (0, exports.sidebarHoverSurface)(background),
+        activeBg: surface,
+        divider: (0, exports.sidebarDivider)(background),
     };
 };
 exports.buildSidebarTokens = buildSidebarTokens;

package/dist/Theme/tokens/builders/statusTone.d.ts

@@ -7,28 +7,10 @@ export type StatusTone = {
     /** Chip outline, guaranteed >= 3:1 on `bg`. */
     border: string;
 };
-/**
- * Status chips (open / in-progress / resolved …) were authored as `X.500` text on an `X.100`
- * tint, which measures 3.3-4.4:1 — under the 4.5:1 body-text bar in BOTH modes. The ink is
- * resolved from the scale's own hue instead of pinned, so every brand and both modes land on the
- * lightest ink that still passes rather than a hand-copied hex that goes stale.
- *
- * `reverseScale` flips the utility ramps in dark, so `X.100` is already a dark tint there and the
- * ink walks lighter instead of darker — hence the mode argument.
- */
 export declare function resolveStatusTone(scale: ColorScale, mode: ResolvedColorMode): StatusTone;
-/**
- * Avatar initials are drawn white on a generated fill. The seed hues in use measured 1.92:1
- * (`#eab308`), 2.54:1 (`#10b981`) and 3.76:1 (`#ef4444`) — failing in light mode too, not just
- * dark. Darkening the fill keeps the intended hue and the white-initials look while clearing AA.
- */
 export declare function resolveAvatarFill(hex: string, target?: number): string;
-/**
- * Hue set for generated avatars. Values are seeds, not final fills — always pass them through
- * `resolveAvatarFill` so the white initials stay legible.
- */
 export declare const AVATAR_SEEDS: readonly ["#ef4444", "#f97316", "#eab308", "#22c55e", "#10b981", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899"];
-/** Stable per-name avatar fill: same name always yields the same accessible colour. */
+/** @deprecated Use `resolveAvatarColorway(seed, colors)` — different arity and returns `{bg, color}`. */
 export declare function avatarFillFor(seedText: string): string;
 /** True when `fg` clears the body-text bar on `bg` — exported for consumer assertions. */
 export declare const meetsBodyText: (fg: string, bg: string) => boolean;

package/dist/Theme/tokens/builders/statusTone.js

@@ -7,15 +7,7 @@ exports.avatarFillFor = avatarFillFor;
 const color_1 = require("./color");
 const accentText_1 = require("./accentText");
 const outlineRung_1 = require("./outlineRung");
-/**
- * Status chips (open / in-progress / resolved …) were authored as `X.500` text on an `X.100`
- * tint, which measures 3.3-4.4:1 — under the 4.5:1 body-text bar in BOTH modes. The ink is
- * resolved from the scale's own hue instead of pinned, so every brand and both modes land on the
- * lightest ink that still passes rather than a hand-copied hex that goes stale.
- *
- * `reverseScale` flips the utility ramps in dark, so `X.100` is already a dark tint there and the
- * ink walks lighter instead of darker — hence the mode argument.
- */
+// NOTE: X.500-on-X.100 measured 3.3-4.4:1 (under AA) — ink is resolved per brand/mode instead of pinned.
 function resolveStatusTone(scale, mode) {
     const bg = scale[100];
     const inkSeed = mode === "dark" ? scale[300] : scale[700];
@@ -26,18 +18,11 @@ function resolveStatusTone(scale, mode) {
         border: (0, outlineRung_1.liftToContrast)(edgeSeed, bg, outlineRung_1.AA_NON_TEXT),
     };
 }
-/**
- * Avatar initials are drawn white on a generated fill. The seed hues in use measured 1.92:1
- * (`#eab308`), 2.54:1 (`#10b981`) and 3.76:1 (`#ef4444`) — failing in light mode too, not just
- * dark. Darkening the fill keeps the intended hue and the white-initials look while clearing AA.
- */
+// NOTE: seed hues measured as low as 1.92:1 for white initials — darkened here to clear AA, hue kept.
 function resolveAvatarFill(hex, target = accentText_1.AA_NORMAL_TEXT) {
     return (0, outlineRung_1.liftToContrast)(hex, "#ffffff", target);
 }
-/**
- * Hue set for generated avatars. Values are seeds, not final fills — always pass them through
- * `resolveAvatarFill` so the white initials stay legible.
- */
+// Seeds only, not final fills — always pass through resolveAvatarFill so white initials stay legible.
 exports.AVATAR_SEEDS = [
     "#ef4444",
     "#f97316",
@@ -49,7 +34,7 @@ exports.AVATAR_SEEDS = [
     "#8b5cf6",
     "#ec4899",
 ];
-/** Stable per-name avatar fill: same name always yields the same accessible colour. */
+/** @deprecated Use `resolveAvatarColorway(seed, colors)` — different arity and returns `{bg, color}`. */
 function avatarFillFor(seedText) {
     let hash = 0;
     for (let i = 0; i < seedText.length; i++) {

package/dist/Theme/tokens/builders/surfaceRaised.d.ts

@@ -0,0 +1,6 @@
+import type { PaletteProps } from "../types";
+export declare const RAISED_OVERLAY = 0.07;
+export type SurfaceRaisedSource = Pick<PaletteProps, "backgroundColor" | "background" | "white">;
+export declare const buildSurfaceRaised: (source: SurfaceRaisedSource) => string;
+export declare const withSurfaceRaised: (palette: PaletteProps) => PaletteProps;
+export declare const raisedRule: (colors: Pick<PaletteProps, "boxborder" | "background" | "surfaceRaised">) => string;

package/dist/Theme/tokens/builders/surfaceRaised.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.raisedRule = exports.withSurfaceRaised = exports.buildSurfaceRaised = exports.RAISED_OVERLAY = void 0;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+exports.RAISED_OVERLAY = 0.07;
+// Never below the card, and at least one white-overlay step above the canvas.
+const buildSurfaceRaised = (source) => {
+    const overlay = (0, color_1.mix)(source.backgroundColor.main, source.white, exports.RAISED_OVERLAY);
+    const card = source.background[50];
+    return (0, color_1.relativeLuminance)(overlay) > (0, color_1.relativeLuminance)(card) ? overlay : card;
+};
+exports.buildSurfaceRaised = buildSurfaceRaised;
+const withSurfaceRaised = (palette) => ({
+    ...palette,
+    surfaceRaised: (0, exports.buildSurfaceRaised)(palette),
+});
+exports.withSurfaceRaised = withSurfaceRaised;
+// A divider inside an overlay, at the weight `boxborder[200]` has on a card.
+const raisedRule = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[200], colors.surfaceRaised, (0, color_1.contrastRatio)(colors.boxborder[200], colors.background[50]));
+exports.raisedRule = raisedRule;

package/dist/Theme/tokens/builders/surfaceRungs.d.ts

@@ -1,8 +1,4 @@
 import type { PaletteProps } from "../types";
-/**
- * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
- * reads as one already typed into. See CHROME-CONSISTENCY.md.
- */
 export declare const PLACEHOLDER_TEXT = 3;
 export declare const namedSurfaces: (palette: PaletteProps) => string[];
 /** The surface an ink is closest to — clearing it clears every other one. */

package/dist/Theme/tokens/builders/surfaceRungs.js

@@ -6,14 +6,12 @@ const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const accentText_1 = require("./accentText");
 const semanticText_1 = require("./semanticText");
-/**
- * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
- * reads as one already typed into. See CHROME-CONSISTENCY.md.
- */
+// NOTE: hint held to the non-text floor, not body-text — at 4.5 an empty field reads as typed-into. See CHROME-CONSISTENCY.md.
 exports.PLACEHOLDER_TEXT = outlineRung_1.AA_NON_TEXT;
 const namedSurfaces = (palette) => [
     ...Object.values(palette.backgroundColor),
     palette.background[50],
+    palette.surfaceRaised,
     palette.table.hover[500],
 ];
 exports.namedSurfaces = namedSurfaces;
@@ -37,14 +35,10 @@ function withSurfaceRungs(palette) {
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], accentText_1.AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], accentText_1.AA_NORMAL_TEXT) },
-        // `placeholder` is deliberately absent: the brand authors that rung and the published
-        // library ships it untouched. Its floor is enforced in `placeholderInk`, against the
-        // surfaces a FIELD renders on — not `table.hover`, which no field sits on.
-        // Settled, not lifted: this rung already passed through `withOutlineRung`, and lifting it
-        // again here to AA_NON_TEXT is what shipped 3.85-4.95:1 outlines. See CHROME_BORDER.
         boxborder: {
             ...palette.boxborder,
             200: rule(palette.boxborder[200]),
+            // NOTE: settled, not lifted — lifting again here to AA_NON_TEXT shipped 3.85-4.95:1 outlines.
             500: settle(palette.boxborder[500], outlineRung_1.CHROME_BORDER),
         },
         // The 200 rung of both ramps is the same job under two names; settle them together or an

package/dist/Theme/tokens/builders/tone.d.ts

@@ -0,0 +1,22 @@
+import type { ColorScale, PaletteProps, SemanticTone } from "../types";
+export type Tone = "neutral" | "info" | "success" | "warning" | "error";
+export type ToneColorScheme = "gray" | "blue" | "green" | "orange" | "red";
+export declare const TONES: readonly Tone[];
+export declare const toneToColorScheme: Readonly<Record<Tone, ToneColorScheme>>;
+export declare const toneToSemantic: Readonly<Record<Exclude<Tone, "neutral">, SemanticTone>>;
+export declare const isTone: (value: unknown) => value is Tone;
+export declare const toneScale: (colors: PaletteProps, tone: Tone) => ColorScale;
+/** Status ink on the canvas: `semanticText.<tone>`, or `textMuted` for neutral. */
+export declare const toneInk: (colors: PaletteProps, tone: Tone) => string;
+/** A soft fill + its hover/active steps, all translucent so they read correctly on any surface. */
+export type SoftTone = {
+    bg: string;
+    fg: string;
+    border: string;
+    hoverBg: string;
+    hoverBorder: string;
+    activeBg: string;
+    activeBorder: string;
+};
+/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
+export declare const resolveSoftTone: (colors: PaletteProps, scale: ColorScale, surface?: string) => SoftTone;

package/dist/Theme/tokens/builders/tone.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.isTone = exports.toneToSemantic = exports.toneToColorScheme = exports.TONES = void 0;
+const accentText_1 = require("./accentText");
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+exports.TONES = ["neutral", "info", "success", "warning", "error"];
+exports.toneToColorScheme = {
+    neutral: "gray",
+    info: "blue",
+    success: "green",
+    warning: "orange",
+    error: "red",
+};
+exports.toneToSemantic = {
+    info: "info",
+    success: "success",
+    warning: "warning",
+    error: "error",
+};
+const isTone = (value) => typeof value === "string" && exports.TONES.includes(value);
+exports.isTone = isTone;
+const toneScale = (colors, tone) => colors[exports.toneToColorScheme[tone]];
+exports.toneScale = toneScale;
+/** Status ink on the canvas: `semanticText.<tone>`, or `textMuted` for neutral. */
+const toneInk = (colors, tone) => tone === "neutral" ? colors.textMuted : colors.semanticText[exports.toneToSemantic[tone]];
+exports.toneInk = toneInk;
+const BG_ALPHA = { light: 0.1, dark: 0.17 };
+const RING_ALPHA = { light: 0.22, dark: 0.28 };
+const STATE_STEP = 0.08;
+const SOFT_INK_TARGET = 6.5;
+const withAlpha = (hex, alpha) => `${hex}${Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+    .toString(16)
+    .padStart(2, "0")}`;
+/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
+const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => {
+    const dark = (0, accentText_1.isDarkCanvas)(surface);
+    const hue = scale[500];
+    const bgAlpha = dark ? BG_ALPHA.dark : BG_ALPHA.light;
+    const ringAlpha = dark ? RING_ALPHA.dark : RING_ALPHA.light;
+    const bg = withAlpha(hue, bgAlpha);
+    const border = withAlpha(hue, ringAlpha);
+    const fg = (0, outlineRung_1.liftToContrast)(hue, (0, color_1.compositeOver)(bg, surface), SOFT_INK_TARGET);
+    return {
+        bg,
+        fg,
+        border,
+        hoverBg: withAlpha(hue, bgAlpha + STATE_STEP),
+        hoverBorder: withAlpha(hue, ringAlpha + STATE_STEP * 1.5),
+        activeBg: withAlpha(hue, bgAlpha + STATE_STEP * 1.75),
+        activeBorder: withAlpha(hue, ringAlpha + STATE_STEP * 2),
+    };
+};
+exports.resolveSoftTone = resolveSoftTone;

package/dist/Theme/tokens/builders/tooltipSurface.d.ts

@@ -0,0 +1,6 @@
+import type { PaletteProps } from "../types";
+/** The one tooltip chip: the rail surface stays dark in both modes, so it floats over either canvas. */
+export declare const tooltipSurface: (colors: PaletteProps) => {
+    bg: string;
+    fg: string;
+};

package/dist/Theme/tokens/builders/tooltipSurface.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltipSurface = void 0;
+const accentText_1 = require("./accentText");
+/** The one tooltip chip: the rail surface stays dark in both modes, so it floats over either canvas. */
+const tooltipSurface = (colors) => {
+    const bg = colors.sidebar.background[500];
+    return { bg, fg: (0, accentText_1.onFilled)(bg, colors.white, colors.black) };
+};
+exports.tooltipSurface = tooltipSurface;

package/dist/Theme/tokens/builders/viewportHeight.d.ts

@@ -0,0 +1,8 @@
+/** Full viewport height. `dvh` excludes mobile browser chrome; `vh` does not. */
+export declare const fullViewportHeight: {
+    height: string;
+    "@supports (height: 100dvh)": {
+        height: string;
+    };
+};
+export default fullViewportHeight;

package/dist/Theme/tokens/builders/viewportHeight.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fullViewportHeight = void 0;
+/** Full viewport height. `dvh` excludes mobile browser chrome; `vh` does not. */
+exports.fullViewportHeight = {
+    height: "100vh",
+    "@supports (height: 100dvh)": { height: "100dvh" },
+};
+exports.default = exports.fullViewportHeight;

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

@@ -1,13 +1,3 @@
-/**
- * Pixelize design tokens — the portable core of the design system.
- *
- * PURITY CONTRACT: nothing in this folder imports Chakra, React, or CSS. It is plain
- * TypeScript data + pure functions, so the mobile design library can consume this
- * folder as-is. Keep it that way — a single Chakra/CSS import here breaks the mobile port.
- *
- * Web-only concerns (Chakra `extendTheme`, `cssVarPrefix`, the Inter font-face CSS import)
- * live in `Theme/chakra/` instead.
- */
 export * from "./types";
 export * from "./primitives";
 export * from "./brands";

package/dist/Theme/tokens/index.js

@@ -1,14 +1,4 @@
 "use strict";
-/**
- * Pixelize design tokens — the portable core of the design system.
- *
- * PURITY CONTRACT: nothing in this folder imports Chakra, React, or CSS. It is plain
- * TypeScript data + pure functions, so the mobile design library can consume this
- * folder as-is. Keep it that way — a single Chakra/CSS import here breaks the mobile port.
- *
- * Web-only concerns (Chakra `extendTheme`, `cssVarPrefix`, the Inter font-face CSS import)
- * live in `Theme/chakra/` instead.
- */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -24,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+// NOTE: purity contract — nothing here imports Chakra/React/CSS, so the mobile design library can consume it as-is.
 __exportStar(require("./types"), exports);
 __exportStar(require("./primitives"), exports);
 __exportStar(require("./brands"), exports);

package/dist/Theme/tokens/primitives/controlSizes.d.ts

@@ -0,0 +1,12 @@
+export type ControlSize = "xs" | "sm" | "md" | "lg";
+export type ControlSizeSpec = {
+    height: string;
+    fontSize: string;
+    paddingX: string;
+    iconSize: number;
+};
+/** One height scale for fields, selects and buttons, so controls side by side line up. */
+export declare const CONTROL_SIZES: Readonly<Record<ControlSize, ControlSizeSpec>>;
+export declare const CONTROL_SIZE_NAMES: readonly ControlSize[];
+export declare const DEFAULT_CONTROL_SIZE: ControlSize;
+export declare const isControlSize: (value: unknown) => value is ControlSize;

package/dist/Theme/tokens/primitives/controlSizes.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = void 0;
+/** One height scale for fields, selects and buttons, so controls side by side line up. */
+exports.CONTROL_SIZES = {
+    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
+    lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
+};
+exports.CONTROL_SIZE_NAMES = ["xs", "sm", "md", "lg"];
+exports.DEFAULT_CONTROL_SIZE = "sm";
+const isControlSize = (value) => typeof value === "string" && exports.CONTROL_SIZE_NAMES.includes(value);
+exports.isControlSize = isControlSize;

package/dist/Theme/tokens/primitives/index.d.ts

@@ -7,3 +7,5 @@ export { default as breakpoints } from "./breakpoints";
 export { default as lineHeights } from "./lineHeights";
 export { default as letterSpacings } from "./letterSpacings";
 export { default as typography, fonts, fontSizes, fontWeights } from "./typography";
+export * from "./controlSizes";
+export * from "./motion";

package/dist/Theme/tokens/primitives/index.js

@@ -1,4 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -25,3 +39,5 @@ Object.defineProperty(exports, "typography", { enumerable: true, get: function (
 Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return typography_1.fonts; } });
 Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return typography_1.fontSizes; } });
 Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return typography_1.fontWeights; } });
+__exportStar(require("./controlSizes"), exports);
+__exportStar(require("./motion"), exports);

package/dist/Theme/tokens/primitives/motion.d.ts

@@ -0,0 +1,8 @@
+export declare const MOTION_MS: {
+    readonly fast: 150;
+    readonly base: 200;
+};
+export type MotionSpeed = keyof typeof MOTION_MS;
+export declare const MOTION_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+/** A `transition` value for named properties only — `all` also animates layout and colour flips. */
+export declare const transitionFor: (properties: readonly string[], speed?: MotionSpeed) => string;

package/dist/Theme/tokens/primitives/motion.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transitionFor = exports.MOTION_EASE = exports.MOTION_MS = void 0;
+exports.MOTION_MS = { fast: 150, base: 200 };
+exports.MOTION_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+/** A `transition` value for named properties only — `all` also animates layout and colour flips. */
+const transitionFor = (properties, speed = "fast") => {
+    if (properties.includes("all"))
+        throw new Error("transitionFor: name the properties, never `all`");
+    return properties.map((p) => `${p} ${exports.MOTION_MS[speed]}ms ${exports.MOTION_EASE}`).join(", ");
+};
+exports.transitionFor = transitionFor;

package/dist/Theme/tokens/primitives/sizes.d.ts

@@ -1,7 +1,3 @@
-/**
- * `screenW`/`screenH` use viewport units — a web concept. The mobile port should
- * map these to `Dimensions.get("window")` rather than consuming them literally.
- */
 declare const sizes: {
     full: string;
     screenW: string;

package/dist/Theme/tokens/primitives/sizes.js

@@ -4,10 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const space_1 = __importDefault(require("./space"));
-/**
- * `screenW`/`screenH` use viewport units — a web concept. The mobile port should
- * map these to `Dimensions.get("window")` rather than consuming them literally.
- */
+// NOTE: screenW/screenH use viewport units — the mobile port should map these to Dimensions.get("window").
 const sizes = {
     ...space_1.default,
     full: "100%",

package/dist/Theme/tokens/primitives/typography.d.ts

@@ -1,10 +1,3 @@
-/**
- * Pure typography tokens. Platform-agnostic.
- *
- * NOTE: the web build must additionally load the Inter Variable font face
- * (`Theme/chakra/fonts.web.ts` does the CSS side-effect import). That import is
- * deliberately NOT here — a CSS import would break the mobile port of this folder.
- */
 export declare const fonts: {
     body: string;
     heading: string;

package/dist/Theme/tokens/primitives/typography.js

@@ -1,13 +1,7 @@
 "use strict";
-/**
- * Pure typography tokens. Platform-agnostic.
- *
- * NOTE: the web build must additionally load the Inter Variable font face
- * (`Theme/chakra/fonts.web.ts` does the CSS side-effect import). That import is
- * deliberately NOT here — a CSS import would break the mobile port of this folder.
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fontWeights = exports.fontSizes = exports.fonts = void 0;
+// NOTE: pure/platform-agnostic — the Inter font-face CSS import lives in Theme/chakra/fonts.web.ts, not here.
 exports.fonts = {
     body: "Inter Variable, sans-serif",
     heading: "Inter Variable, sans-serif",

package/dist/Theme/tokens/types.d.ts

@@ -1,9 +1,3 @@
-/**
- * Pure token types — shared by web (Chakra) and mobile design libraries.
- *
- * PURITY RULE: nothing under `Theme/tokens/**` may import Chakra, React, or CSS.
- * This folder is copy-paste portable to the mobile design library as-is.
- */
 /** A 50→900 color ramp. Index roles are stable across light and dark. */
 export type ColorScale = {
     50: string;
@@ -64,19 +58,11 @@ export type SidebarTokens = {
     mutedLabel: string;
     /** Status ink resolved against the RAIL. `semanticText` is canvas-relative, not rail. */
     semanticText: SemanticTextTokens;
+    /** Row fills, opaque — replace `whiteAlpha` hover/active/divider chrome on the rail. */
+    hoverBg: string;
+    activeBg: string;
+    divider: string;
 };
-/**
- * The two-tone focus indicator. `ring` is the brand-toned band that carries WCAG 1.4.11
- * against whatever is BEHIND the control; `halo` is the inner band drawn between the ring
- * and the control's own fill, so the indicator stays visible on a filled button too.
- *
- * Two tones because one band cannot own both adjacencies. `ring` is resolved against three
- * backdrops (canvas, card, `primary[500]`) and clears all three on every brand — but a button
- * can be filled by any `colorScheme`, and widening the ring to cover the mid-tone named surfaces
- * as well leaves `skyline` and `storefront` with no solution at any hue (contrast is luminance
- * alone, and their bands come out empty). `halo` takes the fill-side adjacency instead, so the
- * pair holds whatever the button is filled with and whatever it sits on.
- */
 export type FocusRingTokens = {
     /** Outer band. >=3:1 against the canvas, a card surface, and the control's own fill. */
     ring: string;
@@ -88,10 +74,6 @@ export type BoxShadowTokens = {
     error: string;
     default: string;
 };
-/**
- * The full per-brand color palette. One of these exists per brand per color mode
- * (`palette.light.ts` / `palette.dark.ts`).
- */
 export type PaletteProps = {
     gradient: {
         from: string;
@@ -129,11 +111,7 @@ export type PaletteProps = {
         hover: ColorScale;
     };
     disabled: ColorScale;
-    /**
-     * Accent color for accent-COLORED TEXT on the canvas. Distinct from `primary[500]`, which
-     * must stay dark enough to carry a white label on a filled button and therefore cannot also
-     * be light enough to read as text on a dark canvas. Derived per brand (see `pickAccentText`).
-     */
+    /** Accent color for accent-colored text on the canvas — distinct from `primary[500]`. */
     accentText: string;
     semanticText: SemanticTextTokens;
     /** Secondary text on the canvas, resolved to 4.5:1 in both modes. */
@@ -142,10 +120,12 @@ export type PaletteProps = {
     onPrimary: string;
     /** Ink for a `semantic[tone][500]`-FILLED surface — never an ink on the canvas. */
     onSemantic: SemanticTextTokens;
+    /** Dialog/drawer/popover/menu surface: `background[50]` in light, one elevation step up in dark. */
+    surfaceRaised: string;
 };
 /** What a brand writes by hand; every token required, so a gap is a compile error. */
 /** Derived tokens are excluded — `finalizeLightPalette` resolves them per brand. */
-export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic" | "focusRing"> & {
+export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic" | "focusRing" | "surfaceRaised"> & {
     sidebar: {
         background: ColorScale;
     };

package/dist/Theme/tokens/types.js

@@ -1,8 +1,3 @@
 "use strict";
-/**
- * Pure token types — shared by web (Chakra) and mobile design libraries.
- *
- * PURITY RULE: nothing under `Theme/tokens/**` may import Chakra, React, or CSS.
- * This folder is copy-paste portable to the mobile design library as-is.
- */
+// NOTE: pure token types, shared with mobile — nothing under Theme/tokens/** may import Chakra, React, or CSS.
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Utils/accountHandoff.d.ts

@@ -1,25 +1,8 @@
-/**
- * Cross-app "Account handoff": deep-link from a product app (CRM, Tickets, HRMS)
- * into the Account app carrying the token, so the user lands signed in. Consuming
- * apps once copy-pasted this per repo; it lives here so they share one contract.
- *
- * Query-param contract (must stay in sync across every caller):
- * `sourceApp`, `returnUrl`, `orgId`, `api_key` (+ `userId` on the users page).
- *
- * The library is pre-bundled, so it must not read `import.meta.env` — that would
- * bake in the library's own build env. Env-derived values are injected as config.
- */
 export declare function isAllowedReturnUrl(url: string): boolean;
 export type ResolveReturnUrlOptions = {
     /** App-specific fallback (e.g. its own origin) used when the param is missing/disallowed. */
     defaultReturnUrl?: string;
 };
-/**
- * Receiver side (Account). Returns the `returnUrl` param only when it passes the
- * allowlist, else the caller's `defaultReturnUrl` when that is allowed, else null.
- * `fallbackOrgId` is accepted for caller symmetry; the app owns any org-derived
- * fallback via `opts.defaultReturnUrl`.
- */
 export declare function resolveReturnUrl(searchParams: URLSearchParams, fallbackOrgId?: number | string | null, opts?: ResolveReturnUrlOptions): string | null;
 export type AccountHandoffConfig = {
     sourceApp: string;

package/dist/Utils/accountHandoff.js

@@ -1,15 +1,5 @@
 "use strict";
-/**
- * Cross-app "Account handoff": deep-link from a product app (CRM, Tickets, HRMS)
- * into the Account app carrying the token, so the user lands signed in. Consuming
- * apps once copy-pasted this per repo; it lives here so they share one contract.
- *
- * Query-param contract (must stay in sync across every caller):
- * `sourceApp`, `returnUrl`, `orgId`, `api_key` (+ `userId` on the users page).
- *
- * The library is pre-bundled, so it must not read `import.meta.env` — that would
- * bake in the library's own build env. Env-derived values are injected as config.
- */
+// NOTE: pre-bundled, so this must never read import.meta.env — env-derived values come in via config.
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAllowedReturnUrl = isAllowedReturnUrl;
 exports.resolveReturnUrl = resolveReturnUrl;
@@ -32,12 +22,7 @@ function isAllowedReturnUrl(url) {
         return false;
     }
 }
-/**
- * Receiver side (Account). Returns the `returnUrl` param only when it passes the
- * allowlist, else the caller's `defaultReturnUrl` when that is allowed, else null.
- * `fallbackOrgId` is accepted for caller symmetry; the app owns any org-derived
- * fallback via `opts.defaultReturnUrl`.
- */
+// Receiver side (Account) — returns returnUrl only if allowlisted, else defaultReturnUrl if allowed, else null.
 function resolveReturnUrl(searchParams, fallbackOrgId, opts) {
     void fallbackOrgId;
     const returnUrl = searchParams.get("returnUrl");

package/dist/Utils/apiError.d.ts

@@ -0,0 +1,2 @@
+export declare function getApiErrorMessage(error: unknown, fallback?: string): string;
+export declare function getApiErrorStatus(error: unknown): number | null;