pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Theme/tokens/builders/scrollbar.js

@@ -1,10 +1,7 @@
 /** One width everywhere. The 3px, 4px, 5px and 10px bars in use were all accidents. */
 export const SCROLLBAR_WIDTH = "6px";
 const RADIUS = "6px";
-/**
- * The single source of scrollbar chrome. `overlay` drops the track for bars that float over a
- * card; `hover` keeps the thumb invisible until the region is hovered.
- */
+// NOTE: single source of scrollbar chrome — `overlay` drops the track, `hover` hides the thumb until hovered.
 export function scrollbarStyles(palette, variant = "default") {
     const { gray } = palette;
     const track = variant === "default" ? gray[100] : "transparent";

package/dist/esm/Theme/tokens/builders/semanticText.js

@@ -1,11 +1,7 @@
 import { liftToContrast } from "./outlineRung.js";
 import { AA_NORMAL_TEXT, onFilled } from "./accentText.js";
 export const SEMANTIC_TONES = ["success", "error", "warning", "info"];
-/**
- * `semantic[tone][500]` is a FILL rung — as ink on a light canvas it measures 1.84-3.68:1 across
- * every brand. Each tone is stepped here until it clears AA as text, so a call site that wants
- * "error-coloured text" cannot pick the unreadable one.
- */
+// NOTE: semantic[tone][500] is a fill rung (1.84-3.68:1 as text) — stepped here until it clears AA.
 export const buildSemanticText = (semantic, canvas) => SEMANTIC_TONES.reduce((acc, tone) => {
     acc[tone] = liftToContrast(semantic[tone][500], canvas, AA_NORMAL_TEXT);
     return acc;

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

@@ -1,23 +1,36 @@
 import { compositeOver } from "./color.js";
-import { liftToContrast, resolveHoverTint, AA_NON_TEXT } from "./outlineRung.js";
+import { liftToContrast, resolveHoverTint, settleAcross, AA_NON_TEXT } from "./outlineRung.js";
 import { buildSemanticText } from "./semanticText.js";
 /** WCAG 1.4.3 — the active label is normal-size text. */
 export const AA_NORMAL_TEXT = 4.5;
 /** Lightest surface an active row reaches: Chakra `whiteAlpha.400` (0.24) on hover. */
 export const ACTIVE_SURFACE_TINT = "#ffffff3d";
 export const sidebarActiveSurface = (background) => compositeOver(ACTIVE_SURFACE_TINT, background[500]);
+/** Lightest a row ever gets on ANY rail surface — what chrome inside a row must clear. */
+export const sidebarRowPeak = (surface) => compositeOver(ACTIVE_SURFACE_TINT, surface);
+/** Stronger than the divider — a hover fill must read as an action, not a rule. */
+export const HOVER_SURFACE_TINT = "#ffffff20";
+/** Chakra whiteAlpha.100 (0.06) — a divider only needs to read, not shout. */
+export const DIVIDER_SURFACE_TINT = "#ffffff0f";
+export const sidebarHoverSurface = (background) => resolveHoverTint(compositeOver(HOVER_SURFACE_TINT, background[500]), background[500]);
+export const sidebarDivider = (background) => resolveHoverTint(compositeOver(DIVIDER_SURFACE_TINT, background[500]), background[500]);
 /** The rail never inverts, so both modes take the accent from the LIGHT primary. */
 export const buildSidebarTokens = (background, lightPrimary, semantic) => {
     const surface = sidebarActiveSurface(background);
     const elevated = resolveHoverTint(background[500], background[500]);
+    // Muted chrome must clear contrast on the bare rail AND the lightest row-hover overlay.
+    const rowPeak = sidebarRowPeak(elevated);
     return {
         background,
         elevated,
         activeIcon: liftToContrast(lightPrimary[300], surface, AA_NON_TEXT),
         activeLabel: liftToContrast(lightPrimary[100], surface, AA_NORMAL_TEXT),
-        mutedIcon: liftToContrast(background[300], elevated, AA_NON_TEXT),
-        mutedLabel: liftToContrast(background[100], elevated, AA_NORMAL_TEXT),
+        mutedIcon: settleAcross(background[300], [elevated, rowPeak], AA_NON_TEXT),
+        mutedLabel: settleAcross(background[100], [elevated, rowPeak], AA_NORMAL_TEXT),
         semanticText: buildSemanticText(semantic, elevated),
+        hoverBg: sidebarHoverSurface(background),
+        activeBg: surface,
+        divider: sidebarDivider(background),
     };
 };
 export const withSidebarTokens = (source) => buildSidebarTokens(source.sidebar.background, source.primary, source.semantic);

package/dist/esm/Theme/tokens/builders/skeletonShimmer.js

@@ -0,0 +1,21 @@
+import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./color.js";
+/** Same pulse depth as the mobile library's `SKELETON_SHIMMER_CONTRAST`. */
+export const SKELETON_SHIMMER_CONTRAST = 1.35;
+const settleAway = (seed, base, target) => {
+    const { s } = hexToHsl(seed);
+    let near = hexToHsl(base).l;
+    let far = relativeLuminance(base) < 0.5 ? 100 : 0;
+    for (let i = 0; i < 20; i += 1) {
+        const mid = (near + far) / 2;
+        if (contrastRatio(withLightness(seed, mid, s), base) < target)
+            near = mid;
+        else
+            far = mid;
+    }
+    return withLightness(seed, far, s);
+};
+/** The two colours a Skeleton pulses between: `gray[100]`, and `gray[300]`'s tint settled to the amplitude. */
+export const skeletonShimmer = (palette) => ({
+    start: palette.gray[100],
+    end: settleAway(palette.gray[300], palette.gray[100], SKELETON_SHIMMER_CONTRAST),
+});

package/dist/esm/Theme/tokens/builders/star.js

@@ -0,0 +1,4 @@
+import { relativeLuminance } from "./color.js";
+export const STAR_ON_LIGHT = "#f5a70a";
+export const STAR_ON_DARK = "#f6b93b";
+export const buildStar = (canvas) => relativeLuminance(canvas) > 0.18 ? STAR_ON_LIGHT : STAR_ON_DARK;

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

@@ -1,15 +1,7 @@
 import { contrastRatio } from "./color.js";
 import { AA_NORMAL_TEXT } from "./accentText.js";
 import { AA_NON_TEXT, liftToContrast } from "./outlineRung.js";
-/**
- * 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.
 export function resolveStatusTone(scale, mode) {
     const bg = scale[100];
     const inkSeed = mode === "dark" ? scale[300] : scale[700];
@@ -20,18 +12,11 @@ export function resolveStatusTone(scale, mode) {
         border: liftToContrast(edgeSeed, bg, 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.
 export function resolveAvatarFill(hex, target = AA_NORMAL_TEXT) {
     return 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.
 export const AVATAR_SEEDS = [
     "#ef4444",
     "#f97316",
@@ -43,7 +28,7 @@ export const 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}`. */
 export function avatarFillFor(seedText) {
     let hash = 0;
     for (let i = 0; i < seedText.length; i++) {

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

@@ -0,0 +1,24 @@
+import { contrastRatio, mix, relativeLuminance } from "./color.js";
+import { liftToContrast } from "./outlineRung.js";
+import { RAISED_LIFT, liftUnder } from "./planes.js";
+import { cardRule } from "./planeStep.js";
+import { SEMANTIC_TONES } from "./semanticText.js";
+export const RAISED_OVERLAY = 0.07;
+/** The filled fills a raised plane must keep at 3:1, or a button on a menu stops reading. */
+export const filledMarks = (colors) => [
+    colors.primary[500],
+    ...SEMANTIC_TONES.map((tone) => colors.semantic[tone][500]),
+];
+// Never below the card: the lighter of one white-overlay step off the canvas and a RAISED_LIFT step off the card.
+export const buildSurfaceRaised = (source, marks = []) => {
+    const card = source.background[50];
+    const overlay = mix(source.backgroundColor.main, source.white, RAISED_OVERLAY);
+    const stepped = liftUnder(source.white, card, RAISED_LIFT, marks);
+    return [overlay, stepped].reduce((top, c) => (relativeLuminance(c) > relativeLuminance(top) ? c : top), card);
+};
+export const withSurfaceRaised = (palette) => ({
+    ...palette,
+    surfaceRaised: buildSurfaceRaised(palette, filledMarks(palette)),
+});
+// A divider inside an overlay, at the weight a rule has inside a card.
+export const raisedRule = (colors) => liftToContrast(colors.boxborder[200], colors.surfaceRaised, contrastRatio(cardRule(colors), colors.background[50]));

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

@@ -2,14 +2,13 @@ import { contrastRatio } from "./color.js";
 import { liftToContrast, settleAcross, ruleInk, AA_NON_TEXT, CHROME_BORDER, CHROME_RULE } from "./outlineRung.js";
 import { AA_NORMAL_TEXT, pickAccentText } from "./accentText.js";
 import { SEMANTIC_TONES } from "./semanticText.js";
-/**
- * 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.
- */
+import { listRowBackgrounds } from "./rowStates.js";
+// 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.
 export const PLACEHOLDER_TEXT = AA_NON_TEXT;
 export const namedSurfaces = (palette) => [
     ...Object.values(palette.backgroundColor),
     palette.background[50],
+    palette.surfaceRaised,
     palette.table.hover[500],
 ];
 /** The surface an ink is closest to — clearing it clears every other one. */
@@ -17,6 +16,7 @@ export const hardestSurface = (ink, surfaces) => surfaces.reduce((worst, s) => c
 // Runs last: `table.hover` is one of the surfaces, and it settles in its own rung.
 export function withSurfaceRungs(palette) {
     const surfaces = namedSurfaces(palette);
+    const accentSurfaces = [...surfaces, ...Object.values(listRowBackgrounds(palette))];
     const lift = (ink, target) => liftToContrast(ink, hardestSurface(ink, surfaces), target);
     const settle = (ink, target) => settleAcross(ink, surfaces, target);
     const rule = (ink) => ruleInk(ink, [palette.backgroundColor.main, palette.background[50]], CHROME_RULE);
@@ -27,18 +27,14 @@ export function withSurfaceRungs(palette) {
     return {
         ...palette,
         textMuted: lift(palette.textMuted, AA_NORMAL_TEXT),
-        accentText: pickAccentText(palette.primary, hardestSurface(palette.accentText, surfaces)),
+        accentText: pickAccentText(palette.primary, hardestSurface(palette.accentText, accentSurfaces)),
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], 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], CHROME_BORDER),
         },
         // The 200 rung of both ramps is the same job under two names; settle them together or an

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

@@ -0,0 +1,48 @@
+import { isDarkCanvas } from "./accentText.js";
+import { compositeOver } from "./color.js";
+import { liftToContrast } from "./outlineRung.js";
+import { memoize } from "./memo.js";
+export const TONES = ["neutral", "info", "success", "warning", "error"];
+export const toneToColorScheme = {
+    neutral: "gray",
+    info: "blue",
+    success: "green",
+    warning: "orange",
+    error: "red",
+};
+export const toneToSemantic = {
+    info: "info",
+    success: "success",
+    warning: "warning",
+    error: "error",
+};
+export const isTone = (value) => typeof value === "string" && TONES.includes(value);
+export const toneScale = (colors, tone) => colors[toneToColorScheme[tone]];
+/** Status ink on the canvas: `semanticText.<tone>`, or `textMuted` for neutral. */
+export const toneInk = (colors, tone) => tone === "neutral" ? colors.textMuted : colors.semanticText[toneToSemantic[tone]];
+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")}`;
+const softToneMemo = memoize((hue, surface) => {
+    const dark = isDarkCanvas(surface);
+    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 = liftToContrast(hue, 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),
+    };
+}, (hue, surface) => `${hue}|${surface}`);
+/** Translucent tint of the scale's own `[500]` hue — one rung for every scheme, any surface. */
+export const resolveSoftTone = (colors, scale, surface = colors.backgroundColor.main) => ({ ...softToneMemo(scale[500], surface) });

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

@@ -0,0 +1,6 @@
+import { onFilled } from "./accentText.js";
+/** The one tooltip chip: the rail surface stays dark in both modes, so it floats over either canvas. */
+export const tooltipSurface = (colors) => {
+    const bg = colors.sidebar.background[500];
+    return { bg, fg: onFilled(bg, colors.white, colors.black) };
+};

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

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

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

@@ -1,13 +1,4 @@
-/**
- * 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.
- */
+// NOTE: purity contract — nothing here imports Chakra/React/CSS, so the mobile design library can consume it as-is.
 export * from "./types.js";
 export * from "./primitives/index.js";
 export * from "./brands/index.js";

package/dist/esm/Theme/tokens/primitives/borderWidths.js

@@ -0,0 +1,2 @@
+/** Stroke widths in px on purpose: a rem hairline grows with the user's root font size. */
+export const BORDER_WIDTHS = { hairline: "1px", thick: "2px" };

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

@@ -0,0 +1,16 @@
+/** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
+export const CONTROL_SIZES = {
+    xs: { height: "2rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2.375rem", 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 },
+};
+export const BUTTON_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 },
+};
+export const CONTROL_SIZE_NAMES = ["xs", "sm", "md", "lg"];
+export const DEFAULT_CONTROL_SIZE = "sm";
+export const isControlSize = (value) => typeof value === "string" && CONTROL_SIZE_NAMES.includes(value);

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

@@ -1,9 +1,13 @@
 export { default as space } from "./space.js";
 export { default as sizes } from "./sizes.js";
-export { default as radii } from "./radii.js";
-export { default as shadows } from "./shadows.js";
+export { default as radii, RADIUS_ROLE } from "./radii.js";
+export * from "./borderWidths.js";
+export * from "./states.js";
+export { default as shadows, shadowsDark, shadowsFor, shadowCss, ELEVATION_LAYERS, SHADOW_INK } from "./shadows.js";
 export { default as zIndices } from "./zIndices.js";
 export { default as breakpoints } from "./breakpoints.js";
 export { default as lineHeights } from "./lineHeights.js";
 export { default as letterSpacings } from "./letterSpacings.js";
-export { default as typography, fonts, fontSizes, fontWeights } from "./typography.js";
+export { default as typography, fonts, fontSizes, fontWeights, NUMERIC_TEXT, TEXT_STYLES } from "./typography.js";
+export * from "./controlSizes.js";
+export * from "./motion.js";

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

@@ -0,0 +1,25 @@
+export const MOTION_MS = { fast: 150, base: 200, enter: 200, exit: 200 };
+/** Pebble easing curves (mobile `pebble-spec.json` motion.easing); `in` is Pebble's `accelerate`. */
+export const MOTION_BEZIER = {
+    standard: [0.2, 0, 0, 1],
+    out: [0.16, 1, 0.3, 1],
+    in: [0.3, 0, 1, 1],
+};
+export const cubicBezierCss = (curve) => `cubic-bezier(${curve.join(", ")})`;
+export const MOTION_EASE = cubicBezierCss(MOTION_BEZIER.standard);
+export const MOTION_EASE_OUT = cubicBezierCss(MOTION_BEZIER.out);
+export const MOTION_EASE_IN = cubicBezierCss(MOTION_BEZIER.in);
+/** Periods for loops that are feedback, not transitions: skeleton pulse, spinner turn, progress sweep. */
+export const MOTION_LOOP_MS = { pulse: 700, spin: 800, sweep: 1200 };
+export const MOTION_PRESS_SCALE = 0.98;
+/** A `transition` value for named properties only — `all` also animates layout and colour flips. */
+export const transitionFor = (properties, speed = "fast", curve = "standard") => {
+    if (properties.includes("all"))
+        throw new Error("transitionFor: name the properties, never `all`");
+    const ease = cubicBezierCss(MOTION_BEZIER[curve]);
+    return properties.map((p) => `${p} ${MOTION_MS[speed]}ms ${ease}`).join(", ");
+};
+export const motionTransition = (speed = "base", curve = "standard") => {
+    const [x1, y1, x2, y2] = MOTION_BEZIER[curve];
+    return { duration: MOTION_MS[speed] / 1000, ease: [x1, y1, x2, y2] };
+};

package/dist/esm/Theme/tokens/primitives/optionRowSizes.js

@@ -0,0 +1,26 @@
+import { RADIUS_ROLE } from "./radii.js";
+/** One density for every option row — Select, SearchSelect, SelectSearch, table filters and Chakra's MenuItem. */
+export const OPTION_ROW_SIZES = {
+    xs: {
+        minH: "1.5rem", px: "0.5rem", py: "0.125rem", gap: "0.375rem", mx: "0.25rem",
+        fontSize: "0.75rem", descriptionFontSize: "0.6875rem", iconSize: 12,
+        avatarSize: "2xs", virtualRowHeightPx: 24,
+    },
+    sm: {
+        minH: "1.875rem", px: "0.625rem", py: "0.25rem", gap: "0.5rem", mx: "0.375rem",
+        fontSize: "0.8125rem", descriptionFontSize: "0.75rem", iconSize: 14,
+        avatarSize: "xs", virtualRowHeightPx: 30,
+    },
+    md: {
+        minH: "2.125rem", px: "0.75rem", py: "0.3125rem", gap: "0.5rem", mx: "0.375rem",
+        fontSize: "0.875rem", descriptionFontSize: "0.75rem", iconSize: 16,
+        avatarSize: "xs", virtualRowHeightPx: 34,
+    },
+    lg: {
+        minH: "2.5rem", px: "0.875rem", py: "0.375rem", gap: "0.625rem", mx: "0.5rem",
+        fontSize: "1rem", descriptionFontSize: "0.8125rem", iconSize: 18,
+        avatarSize: "sm", virtualRowHeightPx: 40,
+    },
+};
+export const OPTION_ROW_RADIUS = RADIUS_ROLE.option;
+export const optionRowSpec = (size) => OPTION_ROW_SIZES[size];

package/dist/esm/Theme/tokens/primitives/radii.js

@@ -9,4 +9,17 @@ const radii = {
     "3xl": "1.5rem",
     full: "9999px",
 };
+/** Radius by the role a surface plays; read this instead of picking a scale step. */
+export const RADIUS_ROLE = {
+    control: "lg",
+    field: "lg",
+    option: "md",
+    tooltip: "lg",
+    chip: "full",
+    card: "xl",
+    float: "xl",
+    dialog: "xl",
+    sheet: "xl",
+    media: "lg",
+};
 export default radii;

package/dist/esm/Theme/tokens/primitives/shadows.js

@@ -1,15 +1,66 @@
-/** Light-mode shadow ramp. Dark mode deepens these — see `builders/buildDarkShadows`. */
+const layer = (x, y, blur, spread, alphaHex) => ({
+    x,
+    y,
+    blur,
+    spread,
+    alphaHex,
+});
+export const SHADOW_INK = { light: "#141828", dark: "#000000" };
+/** Pebble elevation stacks (mobile `pebble/elevation.ts`), per mode and role. */
+export const ELEVATION_LAYERS = {
+    light: {
+        cardPress: [layer(0, 1, 2, 0, "0d"), layer(0, 2, 6, -2, "0d")],
+        card: [layer(0, 1, 2, 0, "0a"), layer(0, 3, 10, -2, "0d"), layer(0, 14, 32, -14, "1f")],
+        float: [layer(0, 2, 6, 0, "0f"), layer(0, 16, 40, -10, "38")],
+        dialog: [layer(0, 4, 12, 0, "0f"), layer(0, 28, 64, -16, "4d")],
+        sheet: [layer(0, -2, 8, 0, "0a"), layer(0, -18, 48, -14, "33")],
+    },
+    dark: {
+        cardPress: [layer(0, 1, 1, 0, "3d")],
+        card: [layer(0, 1, 2, 0, "47")],
+        float: [layer(0, 2, 8, 0, "52"), layer(0, 18, 44, -10, "9e")],
+        dialog: [layer(0, 4, 14, 0, "59"), layer(0, 28, 64, -16, "b3")],
+        sheet: [layer(0, -2, 10, 0, "4d"), layer(0, -18, 48, -14, "99")],
+    },
+};
+const length = (n) => (n === 0 ? "0" : `${n}px`);
+const rgbChannels = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)).join(", ");
+const alphaOf = (alphaHex) => Math.round((parseInt(alphaHex, 16) / 255) * 100) / 100;
+export const shadowCss = (layers, ink) => layers
+    .map((l) => `${length(l.x)} ${length(l.y)} ${length(l.blur)} ${length(l.spread)} rgba(${rgbChannels(ink)}, ${alphaOf(l.alphaHex)})`)
+    .join(", ");
+const elevationRamp = (mode) => {
+    const css = (role) => shadowCss(ELEVATION_LAYERS[mode][role], SHADOW_INK[mode]);
+    return {
+        sm: css("cardPress"),
+        base: css("card"),
+        md: css("float"),
+        lg: css("dialog"),
+        card: css("card"),
+        float: css("float"),
+        dialog: css("dialog"),
+        sheet: css("sheet"),
+    };
+};
+const lightElevation = elevationRamp("light");
+/** Light-mode ramp. A theme should carry `shadowsFor(mode)`, never this one in dark. */
 const shadows = {
     xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    sm: lightElevation.sm,
+    base: lightElevation.base,
+    md: lightElevation.md,
+    lg: lightElevation.lg,
     xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
     "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
     outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
     inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
     none: "none",
     darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5)",
+    card: lightElevation.card,
+    float: lightElevation.float,
+    dialog: lightElevation.dialog,
+    sheet: lightElevation.sheet,
 };
+export const shadowsDark = { ...shadows, ...elevationRamp("dark") };
+export const shadowsFor = (mode) => mode === "dark" ? shadowsDark : shadows;
 export default shadows;

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

@@ -1,8 +1,5 @@
 import space from "./space.js";
-/**
- * `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,
     full: "100%",

package/dist/esm/Theme/tokens/primitives/states.js

@@ -0,0 +1 @@
+export const DISABLED_OPACITY = 0.5;

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

@@ -1,17 +1,13 @@
-/**
- * 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.
- */
+// NOTE: pure/platform-agnostic — the Inter font-face CSS import lives in Theme/chakra/fonts.web.ts, not here.
 export const fonts = {
     body: "Inter Variable, sans-serif",
     heading: "Inter Variable, sans-serif",
-    mono: "Inter Variable, sans-serif",
+    mono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
 };
 export const fontSizes = {
+    "xs-minus": "0.6875rem",
     xs: "0.75rem",
+    "xs-plus": "0.8125rem",
     sm: "0.875rem",
     md: "1rem",
     lg: "1.125rem",
@@ -36,5 +32,23 @@ export const fontWeights = {
     extrabold: 800,
     black: 900,
 };
+export const NUMERIC_TEXT = { fontVariantNumeric: "tabular-nums" };
+/** Pebble's text variants at web density; bound to Chakra as `textStyle="<name>"`. */
+export const TEXT_STYLES = {
+    title: { fontSize: "1.5rem", lineHeight: "1.875rem", fontWeight: 700, letterSpacing: "-0.02em" },
+    heading: { fontSize: "1.25rem", lineHeight: "1.625rem", fontWeight: 600, letterSpacing: "-0.015em" },
+    subheading: { fontSize: "1rem", lineHeight: "1.375rem", fontWeight: 600, letterSpacing: "-0.006em" },
+    body: { fontSize: "0.875rem", lineHeight: "1.25rem", fontWeight: 400, letterSpacing: "0" },
+    ui: { fontSize: "0.8125rem", lineHeight: "1.125rem", fontWeight: 500, letterSpacing: "0" },
+    label: { fontSize: "0.8125rem", lineHeight: "1.125rem", fontWeight: 600, letterSpacing: "0" },
+    caption: { fontSize: "0.75rem", lineHeight: "1rem", fontWeight: 500, letterSpacing: "0" },
+    overline: {
+        fontSize: "0.6875rem",
+        lineHeight: "0.875rem",
+        fontWeight: 600,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+    },
+};
 const typography = { fonts, fontSizes, fontWeights };
 export default typography;

package/dist/esm/Theme/tokens/primitives/zIndices.js

@@ -9,6 +9,7 @@ const zIndices = {
     overlay: 1300,
     modal: 1400,
     popover: 1500,
+    popoverNested: 1510,
     skipLink: 1600,
     toast: 1700,
     tooltip: 1800,

package/dist/esm/Theme/tokens/types.js

@@ -1,7 +1,2 @@
-/**
- * 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.
 export {};

package/dist/esm/Theme/useChartTheme.js

@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { useCustomTheme } from "./useCustomTheme.js";
+import { buildRechartsTheme } from "./tokens/builders/rechartsTheme.js";
+export const useChartTheme = () => {
+    const { colors } = useCustomTheme();
+    return useMemo(() => buildRechartsTheme(colors), [colors]);
+};
+export default useChartTheme;

package/dist/esm/Utils/accountHandoff.js

@@ -1,14 +1,4 @@
-/**
- * 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.
 const ALLOWED_RETURN_HOST_PATTERNS = [
     /^localhost$/,
     /^127\.0\.0\.1$/,
@@ -27,12 +17,7 @@ export 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.
 export function resolveReturnUrl(searchParams, fallbackOrgId, opts) {
     void fallbackOrgId;
     const returnUrl = searchParams.get("returnUrl");

package/dist/esm/Utils/apiError.js

@@ -0,0 +1,24 @@
+const asRecord = (value) => typeof value === "object" && value !== null ? value : {};
+// Structural sniffing only — RTK Query's FetchBaseQueryError/SerializedError shapes, no @reduxjs/toolkit import.
+export function getApiErrorMessage(error, fallback = "Something went wrong. Please try again.") {
+    const record = asRecord(error);
+    if (Object.keys(record).length === 0)
+        return fallback;
+    if ("status" in record) {
+        const message = asRecord(record.data).message;
+        if (typeof message === "string" && message)
+            return message;
+        if (record.status === "FETCH_ERROR")
+            return "Network error. Check your connection and try again.";
+        if (record.status === "PARSING_ERROR")
+            return "Received an unreadable response from the server.";
+        if (record.status === "TIMEOUT_ERROR")
+            return "The request timed out. Please try again.";
+        return fallback;
+    }
+    return typeof record.message === "string" && record.message ? record.message : fallback;
+}
+export function getApiErrorStatus(error) {
+    const record = asRecord(error);
+    return typeof record.status === "number" ? record.status : null;
+}