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

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

@@ -1,47 +1,15 @@
 import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./color.js";
-/**
- * The floor a hover/active state's step off its own resting surface must clear to be seen at
- * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
- * A "hover" a user cannot perceive is not a hover.
- */
 export const MIN_PERCEPTIBLE_STEP = 1.15;
-/** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
 export const AA_NON_TEXT = 3;
-/**
- * Resting chrome — card, popover and field outlines — settles here, not at `AA_NON_TEXT`.
- * At 3:1 a container border is text-weight and the UI reads as a wireframe; every mainstream
- * system draws this line far lighter (Tailwind gray-200 1.24, Chakra gray.200 1.30, Material
- * outline-variant 1.61). 1.4.11 asks that a control be identifiable, not that its resting
- * border carry the whole job: the fill, the label and the focus ring do that.
- *
- * That defence was untrue when it was written. Buttons defined no `_focusVisible` at all, so the
- * focus ring was Chakra's stock `shadows.outline` — a fixed blue measuring 1.38:1 on a primary
- * button — and nothing in the library was held to `AA_NON_TEXT` at the moment of focus. It is
- * true now: `focusRing` (`builders/focusRing.ts`) is derived per brand per mode and gated at 3:1
- * on the canvas, on a card and on the button's own fill by `builders/focusRing.test.ts`. If that
- * gate is ever relaxed, this constant loses its justification with it.
- */
+// NOTE: settles below AA_NON_TEXT — focusRing.ts covers the 1.4.11 gate instead.
 export const CHROME_BORDER = 1.5;
-// The resting rule between two surfaces — a card edge, a divider, a menu outline. Lighter than
-// CHROME_BORDER, which outlines a control the user acts on.
 export const CHROME_RULE = 1.31;
-/**
- * A rule is decorative, so it has a ceiling and no floor: soften it until the surface it reads
- * hardest against sits at `target`, and leave a already-fainter rung alone. Never `settleAcross`
- * here — that clears a floor on EVERY surface, so one tinted surface drags the rule darker.
- */
 export function ruleInk(hex, surfaces, target) {
     const loudest = surfaces.reduce((worst, s) => contrastRatio(hex, s) > contrastRatio(hex, worst) ? s : worst);
     return contrastRatio(hex, loudest) > target
         ? softenToContrast(hex, loudest, target)
         : hex;
 }
-/**
- * Walks a hex toward `target` contrast against `backdrop`, keeping hue and saturation.
- * Direction is DERIVED from the backdrop, never passed: a mode argument here was redundant
- * with the backdrop in every call site, and a redundant argument is one that can be wrong.
- * Tries the far side first, falls back to the near side, and stops at the first passing step.
- */
 export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
     if (contrastRatio(hex, backdrop) >= target)
         return hex;
@@ -59,10 +27,6 @@ export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
     const ends = [withLightness(hex, 100, s), withLightness(hex, 0, s)];
     return contrastRatio(ends[0], backdrop) >= contrastRatio(ends[1], backdrop) ? ends[0] : ends[1];
 }
-/**
- * Mirror of `liftToContrast`: walks ink TOWARD the backdrop, stopping at the last step that
- * still clears `target`. For ink that must stay legible without reading as body copy.
- */
 export function softenToContrast(hex, backdrop, target) {
     if (contrastRatio(hex, backdrop) <= target)
         return hex;
@@ -77,20 +41,9 @@ export function softenToContrast(hex, backdrop, target) {
     }
     return softest;
 }
-/**
- * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
- * pickers, the editor's inputs). Settled onto `CHROME_BORDER` — lifted when a brand authored it
- * invisibly pale, softened when it overshoots. It was previously lifted to `AA_NON_TEXT`, which
- * shipped 3.85-4.95:1 outlines: a text-weight box around every card and popover.
- * Resolved here rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
- *
- * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
- * and outside 1.4.11.
- */
+// NOTE: border[*] is untouched — it draws decorative table gridlines, outside 1.4.11.
 export function withOutlineRung(palette) {
     const current = palette.boxborder[500];
-    // The border sits between the control's fill and the surface behind it; hold it to the
-    // harder of the two.
     const backdrop = contrastRatio(current, palette.backgroundColor.main) <=
         contrastRatio(current, palette.background[50])
         ? palette.backgroundColor.main
@@ -102,23 +55,10 @@ export function withOutlineRung(palette) {
         return palette;
     return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
 }
-/**
- * A hover/active tint resolved against the surface it actually sits on, guaranteed to clear
- * `MIN_PERCEPTIBLE_STEP`. Written for the recurring shape found across NavigationBar, UserDetails
- * and Accordion: a pale `primary[50]`/`gray[50]` tint that measures near-1.0 on a near-white
- * surface — invisible — with no dark-mode branch, so the same call site is wrong in both modes at
- * once. `restSurface` is required rather than assumed white/black: a menu item's hover sits on
- * its OWN list background, not necessarily the page canvas.
- */
 export function resolveHoverTint(seed, restSurface) {
     return liftToContrast(seed, restSurface, MIN_PERCEPTIBLE_STEP);
 }
-/**
- * Settles ink into `target` against EVERY surface at once. Softening one step can change which
- * surface is hardest, so resolving against a single pre-computed "hardest" one lands under the
- * floor on another — that is how radiant and rosewood ended up with an invisible outline on
- * their muted surface.
- */
+// NOTE: settles against every surface at once — a single "hardest" surface can drop under target on another.
 export function settleAcross(hex, surfaces, target) {
     const clearsAll = (c) => surfaces.every((s) => contrastRatio(c, s) >= target);
     if (!clearsAll(hex)) {
@@ -135,13 +75,7 @@ export function settleAcross(hex, surfaces, target) {
     }
     return settled;
 }
-/**
- * A pure-grey surface sitting `target` contrast away from `backdrop`. Binary search, not a walk:
- * `liftToContrast` cannot move a seed already at lightness 0 or 100, and a pure-white panel seeded
- * itself straight to black. Neutral on purpose — the light palettes are hand-authored and tinted,
- * so lifting one of their surface rungs turns a selected row into a saturated brand block, while
- * the derived dark palettes land on grey and look right.
- */
+// NOTE: binary search, not liftToContrast — a seed already at lightness 0/100 can't walk.
 export function neutralStep(backdrop, target) {
     const grey = (l) => withLightness("#808080", l, 0);
     let lo = hexToHsl(backdrop).l;

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

@@ -1,14 +1,7 @@
 import { contrastRatio } from "./color.js";
 import { liftToContrast, softenToContrast } from "./outlineRung.js";
 import { PLACEHOLDER_TEXT } from "./surfaceRungs.js";
-/**
- * The hint ink for a field: the brand's authored rung settled onto `PLACEHOLDER_TEXT` against the
- * hardest surface a field can land on — lifted when it falls short, softened when it overshoots.
- *
- * Settled rather than floored because the authored rungs measured 3.96-7.73:1 across the brands,
- * and anything much past the floor reads as a field already typed into. The floor is the look:
- * one hint weight for every brand in both modes, instead of a per-brand accident.
- */
+// NOTE: settled (not floored) onto PLACEHOLDER_TEXT — one hint weight across brands, not a per-brand accident.
 export const placeholderInkOn = (palette, surfaces) => {
     const rung = palette.placeholder[500];
     const hardest = surfaces.reduce((worst, s) => contrastRatio(rung, s) < contrastRatio(rung, worst) ? s : worst);
@@ -16,10 +9,7 @@ export const placeholderInkOn = (palette, surfaces) => {
         ? softenToContrast(rung, hardest, PLACEHOLDER_TEXT)
         : liftToContrast(rung, hardest, PLACEHOLDER_TEXT);
 };
-/**
- * Every surface an ENABLED field renders on. Disabled fields are deliberately absent — 1.4.3
- * exempts them, and folding their dimmer fill in here would darken the hint on every other field.
- */
+// NOTE: enabled fields only — 1.4.3 exempts disabled ones, and folding their dimmer fill in would darken every other field's hint.
 export const fieldSurfaces = (palette) => [
     palette.gray[50],
     palette.background[50],

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

@@ -1,11 +1,7 @@
 import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
 import { AA_NORMAL_TEXT } from "./accentText.js";
 import { PLACEHOLDER_TEXT } from "./surfaceRungs.js";
-/**
- * A hint is floored at 3:1, not 4.5:1. Held to body-text contrast it stopped reading as a hint —
- * an empty field looked like one already typed into — and the published library ships this rung
- * as the brand authored it. See CHROME-CONSISTENCY.md.
- */
+// NOTE: hint floored at 3:1, not 4.5:1 — held to body-text contrast it read as already-typed-into. See CHROME-CONSISTENCY.md.
 export function withPlaceholderRung(palette) {
     const resolved = liftToContrast(palette.placeholder[500], palette.background[50], PLACEHOLDER_TEXT);
     if (resolved === palette.placeholder[500])

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

@@ -1,14 +1,10 @@
-import { resolveHoverTint } from "./outlineRung.js";
-/**
- * The three backgrounds a selectable list row can rest on. Every rung is NEUTRAL and pale, so a
- * row's ink stays the canvas ink `withSurfaceRungs` already settled. Seeding a row state from
- * `primary[500]` instead — the filled-button rung — is what painted SelectV2's hovered rows a
- * solid brand fill under unreadable text.
- */
+import { liftToContrast, MIN_PERCEPTIBLE_STEP, resolveHoverTint } from "./outlineRung.js";
+// NOTE: rungs stay neutral/pale — seeding from primary[500] instead once painted SelectV2's hover solid brand fill.
 export const listRowBackgrounds = (colors) => {
-    const selected = colors.backgroundColor.tertiary;
+    // Dark aliases backgroundColor.tertiary to the panel, leaving the selected row at 1.025:1.
+    const selected = liftToContrast(colors.backgroundColor.tertiary, colors.surfaceRaised, MIN_PERCEPTIBLE_STEP);
     return {
-        active: resolveHoverTint(colors.gray[50], colors.backgroundColor.light),
+        active: resolveHoverTint(colors.gray[50], colors.surfaceRaised),
         selected,
         selectedActive: resolveHoverTint(selected, selected),
     };

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

@@ -0,0 +1,12 @@
+import { hexToRgb } from "./color.js";
+export const SCRIM_OPACITY = 0.6;
+export const BACKDROP_SCRIM_OPACITY = 0.5;
+/** Modal/Drawer backdrop: `black` never remaps between modes, so one alpha works in both. */
+export const overlayScrim = (colors) => {
+    const { r, g, b } = hexToRgb(colors.black);
+    return `rgba(${r}, ${g}, ${b}, ${SCRIM_OPACITY})`;
+};
+export const backdropScrim = (colors) => {
+    const { r, g, b } = hexToRgb(colors.black);
+    return `rgba(${r}, ${g}, ${b}, ${BACKDROP_SCRIM_OPACITY})`;
+};

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

@@ -6,6 +6,14 @@ 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);
@@ -18,6 +26,9 @@ export const buildSidebarTokens = (background, lightPrimary, semantic) => {
         mutedIcon: liftToContrast(background[300], elevated, AA_NON_TEXT),
         mutedLabel: liftToContrast(background[100], elevated, 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/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,15 @@
+import { contrastRatio, mix, relativeLuminance } from "./color.js";
+import { liftToContrast } from "./outlineRung.js";
+export const RAISED_OVERLAY = 0.07;
+// Never below the card, and at least one white-overlay step above the canvas.
+export const buildSurfaceRaised = (source) => {
+    const overlay = mix(source.backgroundColor.main, source.white, RAISED_OVERLAY);
+    const card = source.background[50];
+    return relativeLuminance(overlay) > relativeLuminance(card) ? overlay : card;
+};
+export const withSurfaceRaised = (palette) => ({
+    ...palette,
+    surfaceRaised: buildSurfaceRaised(palette),
+});
+// A divider inside an overlay, at the weight `boxborder[200]` has on a card.
+export const raisedRule = (colors) => liftToContrast(colors.boxborder[200], colors.surfaceRaised, contrastRatio(colors.boxborder[200], colors.background[50]));

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

@@ -2,14 +2,12 @@ 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.
- */
+// 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. */
@@ -31,14 +29,10 @@ export function withSurfaceRungs(palette) {
         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,47 @@
+import { isDarkCanvas } from "./accentText.js";
+import { compositeOver } from "./color.js";
+import { liftToContrast } from "./outlineRung.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")}`;
+/** 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) => {
+    const dark = 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 = 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),
+    };
+};

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/controlSizes.js

@@ -0,0 +1,10 @@
+/** One height scale for fields, selects and buttons, so controls side by side line up. */
+export const 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 },
+};
+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

@@ -7,3 +7,5 @@ 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 * from "./controlSizes.js";
+export * from "./motion.js";

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

@@ -0,0 +1,8 @@
+export const MOTION_MS = { fast: 150, base: 200 };
+export 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 const transitionFor = (properties, speed = "fast") => {
+    if (properties.includes("all"))
+        throw new Error("transitionFor: name the properties, never `all`");
+    return properties.map((p) => `${p} ${MOTION_MS[speed]}ms ${MOTION_EASE}`).join(", ");
+};

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/typography.js

@@ -1,10 +1,4 @@
-/**
- * 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",

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/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;
+}

package/dist/esm/Utils/functions.js

@@ -1,7 +1,9 @@
+/** `deal_stage` / `nextFollowUp` / `close-date` → `Deal Stage` / `Next Follow Up` / `Close Date`. */
 export function toWords(str) {
     return str
-        .toLowerCase()
-        .split('_')
-        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .split(/[_\-\s]+/)
+        .filter(Boolean)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(" ");
 }

package/dist/esm/Utils/humanize.js

@@ -0,0 +1,15 @@
+/** `snake_case` / `kebab-case` → `Snake case` — first letter capitalized, rest untouched. */
+export function humanize(value) {
+    if (!value)
+        return "";
+    const text = value.replace(/[_-]/g, " ");
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+export function createEnumLabelResolver(keyMap) {
+    return (value) => {
+        var _a;
+        if (!value)
+            return "";
+        return (_a = keyMap[value]) !== null && _a !== void 0 ? _a : humanize(value);
+    };
+}

package/dist/esm/Utils/lazyWithRetry.js

@@ -0,0 +1,45 @@
+import { lazy } from "react";
+const RELOAD_GUARD_KEY = "pixelize:chunk-reloaded";
+const CHUNK_ERROR_PATTERNS = [
+    "failed to fetch dynamically imported module",
+    "error loading dynamically imported module",
+    "importing a module script failed",
+];
+export function isChunkLoadError(error) {
+    const message = error instanceof Error ? error.message : String(error !== null && error !== void 0 ? error : "");
+    const lower = message.toLowerCase();
+    return CHUNK_ERROR_PATTERNS.some((pattern) => lower.includes(pattern));
+}
+function reloadOnce() {
+    if (window.sessionStorage.getItem(RELOAD_GUARD_KEY))
+        return false;
+    window.sessionStorage.setItem(RELOAD_GUARD_KEY, "1");
+    window.location.reload();
+    return true;
+}
+/** Clears the one-shot reload guard; call once the app has rendered so a later deploy can reload again. */
+export function clearChunkReloadGuard() {
+    window.sessionStorage.removeItem(RELOAD_GUARD_KEY);
+}
+/** Wraps `React.lazy`; on a stale-chunk 404 it reloads once instead of leaving a broken import. */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mirrors React.lazy's own constraint
+export function lazyWithRetry(factory) {
+    return lazy(async () => {
+        try {
+            return await factory();
+        }
+        catch (error) {
+            if (isChunkLoadError(error) && reloadOnce()) {
+                return await new Promise(() => { });
+            }
+            throw error;
+        }
+    });
+}
+// Vite's vite:preloadError fires before any component renders; lazyWithRetry alone can't see it.
+export function installPreloadErrorReload() {
+    window.addEventListener("vite:preloadError", (event) => {
+        event.preventDefault();
+        reloadOnce();
+    });
+}

package/dist/esm/Utils/mergeRefs.js

@@ -5,11 +5,7 @@ export function setRef(ref, value) {
     else if (ref && typeof ref === "object")
         ref.current = value;
 }
-/**
- * Combine multiple refs into a single callback ref, so a value flows to all of
- * them. Useful when cloning an element to attach an internal ref while
- * preserving a ref the caller already set.
- */
+// Combines multiple refs into one callback ref — for cloning an element while preserving a caller's own ref.
 export function mergeRefs(...refs) {
     return (value) => refs.forEach((r) => setRef(r, value));
 }