@tailor-platform/app-shell 1.16.0 → 1.18.0

package/dist/semantic-contrast.test.ts

@@ -0,0 +1,227 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+/**
+ * WCAG 1.4.3 contrast checks for the semantic colour roles, computed from
+ * `themes/default.css` itself. Nothing is copied into the test, so a change to
+ * a hue step or an alias that breaks a pair fails here.
+ *
+ * Scope of the guarantee: the default state of each pair, on the default
+ * palette's `--card` and `--background`. Not covered on purpose:
+ * - hover states (`surface-hover`) against 4.5:1: subtle-badge hover text is
+ *   below 4.5:1 for some roles (danger and success in light mode). They are held
+ *   at a documented floor (MIN_HOVER_TEXT) so they cannot get worse unnoticed,
+ *   see decisions/semantic-color-roles.md;
+ * - branded palettes (cream, bloom) and their tinted shell backgrounds;
+ * - the neutral intent, whose values are the pre-existing system tokens;
+ * - the warning `solid` fill against the card (a fill, not a text pair).
+ */
+const here = dirname(fileURLToPath(import.meta.url));
+const css = readFileSync(join(here, "themes/default.css"), "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
+
+type Rgba = { r: number; g: number; b: number; a: number };
+type Mode = "light" | "dark";
+
+/** Custom properties in effect on <html> for a mode, applying rules in source order. */
+function variablesFor(mode: Mode): Map<string, string> {
+  const vars = new Map<string, string>();
+  for (const rule of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const selectors = rule[1].split(",").map((s) => s.trim());
+    // <html class="dark"> matches both `:root` and `.dark`; light matches `:root` only.
+    const applies = selectors.some((s) => s === ":root" || (mode === "dark" && s === ".dark"));
+    if (!applies) continue;
+    for (const decl of rule[2].matchAll(/(--[a-z0-9-]+)\s*:\s*([^;]+);/g)) {
+      vars.set(decl[1], decl[2].replace(/\s+/g, " ").trim());
+    }
+  }
+  return vars;
+}
+
+function parseColor(value: string, vars: Map<string, string>): Rgba {
+  const v = value.trim();
+  const ref = /^var\((--[a-z0-9-]+)\)$/.exec(v);
+  if (ref) {
+    const target = vars.get(ref[1]);
+    if (target === undefined) throw new Error(`Undefined variable ${ref[1]}`);
+    return parseColor(target, vars);
+  }
+  const hex = /^#([0-9a-f]{3,8})$/i.exec(v);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("");
+    if (h.length !== 6 && h.length !== 8) throw new Error(`Bad hex colour ${v}`);
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16),
+      a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1,
+    };
+  }
+  const fn = /^rgba?\(([^)]+)\)$/.exec(v);
+  if (fn) {
+    const [r, g, b, a = "1"] = fn[1].split(",").map((p) => p.trim());
+    return { r: Number(r), g: Number(g), b: Number(b), a: Number(a) };
+  }
+  throw new Error(`Unsupported colour syntax: ${v}`);
+}
+
+function over(top: Rgba, base: Rgba): Rgba {
+  const a = top.a + base.a * (1 - top.a);
+  const mix = (t: number, b: number) => (t * top.a + b * base.a * (1 - top.a)) / a;
+  return { r: mix(top.r, base.r), g: mix(top.g, base.g), b: mix(top.b, base.b), a };
+}
+
+function linearize(channel: number): number {
+  const s = channel / 255;
+  return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+}
+
+function luminance({ r, g, b }: Rgba): number {
+  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+}
+
+function contrast(a: Rgba, b: Rgba): number {
+  const [hi, lo] = [luminance(a), luminance(b)].toSorted((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+const MIN_TEXT = 4.5;
+/** WCAG 1.4.11 non-text contrast, for the invalid-input border. */
+const MIN_NON_TEXT = 3;
+/** Known and accepted: subtle hover text is below AA for some roles. A floor, not a pass. */
+const MIN_HOVER_TEXT = 4.2;
+const modes: Mode[] = ["light", "dark"];
+const intents = ["info", "success", "warning", "danger"] as const;
+const alertVariantFor = { info: "info", success: "success", warning: "warning", danger: "error" };
+const pages = ["--card", "--background"] as const;
+
+describe.each(modes)("semantic colour contrast (%s)", (mode) => {
+  const vars = variablesFor(mode);
+  const color = (name: string) => parseColor(`var(${name})`, vars);
+  /** Foreground drawn on a translucent surface that sits on a page colour. */
+  const pair = (fg: string, surface: string, page: string) => {
+    const base = color(page);
+    const bg = over(color(surface), base);
+    return contrast(over(color(fg), bg), bg);
+  };
+
+  it("resolves the page colours to opaque values", () => {
+    for (const page of pages) expect(color(page).a).toBe(1);
+  });
+
+  describe.each(intents)("%s", (intent) => {
+    const role = (name: string) => `--${intent}-${name}`;
+
+    it("the contrast role meets 4.5:1 on solid", () => {
+      expect(contrast(color(role("contrast")), color(role("solid")))).toBeGreaterThanOrEqual(
+        MIN_TEXT,
+      );
+    });
+
+    it("the contrast role meets 4.5:1 on solid-hover", () => {
+      expect(contrast(color(role("contrast")), color(role("solid-hover")))).toBeGreaterThanOrEqual(
+        MIN_TEXT,
+      );
+    });
+
+    it.each(pages)("text meets 4.5:1 on surface over %s", (page) => {
+      expect(pair(role("text"), role("surface"), page)).toBeGreaterThanOrEqual(MIN_TEXT);
+    });
+
+    it.each(pages)(
+      "text stays above the documented hover floor on surface-hover over %s",
+      (page) => {
+        expect(pair(role("text"), role("surface-hover"), page)).toBeGreaterThanOrEqual(
+          MIN_HOVER_TEXT,
+        );
+      },
+    );
+
+    const variant = alertVariantFor[intent];
+
+    it.each(pages)("alert foreground meets 4.5:1 on alert background over %s", (page) => {
+      expect(
+        pair(`--alert-${variant}-foreground`, `--alert-${variant}-background`, page),
+      ).toBeGreaterThanOrEqual(MIN_TEXT);
+    });
+
+    it.each(pages)("alert description meets 4.5:1 on alert background over %s", (page) => {
+      expect(
+        pair(`--alert-${variant}-foreground-muted`, `--alert-${variant}-background`, page),
+      ).toBeGreaterThanOrEqual(MIN_TEXT);
+    });
+  });
+
+  describe("destructive aliases", () => {
+    it.each([
+      ["--destructive", "--danger-solid"],
+      ["--destructive-foreground", "--danger-contrast"],
+    ])("%s resolves to %s", (alias, role) => {
+      expect(vars.get(alias)).toBe(`var(${role})`);
+      expect(color(alias)).toEqual(color(role));
+    });
+
+    it.each(pages)("danger solid meets 3:1 against %s (invalid-input border)", (page) => {
+      expect(contrast(color("--danger-solid"), color(page))).toBeGreaterThanOrEqual(MIN_NON_TEXT);
+    });
+  });
+});
+
+describe("default palette neutral tokens", () => {
+  // Pinned when the BRAND and SYSTEM tokens moved from literals onto the gray,
+  // white and alpha scales. That move was meant to keep every value, so a step
+  // change that alters one of these colours fails here.
+  const expected: Record<Mode, Record<string, string>> = {
+    light: {
+      "--foreground": "#0a0a0a",
+      "--muted-foreground": "#737373",
+      "--primary": "#171717",
+      "--primary-foreground": "#fafafa",
+      "--secondary": "#f5f5f5",
+      "--secondary-foreground": "#171717",
+      "--accent-foreground": "#0a0a0a",
+      "--background": "#fafafa",
+      "--card": "#ffffff",
+      "--card-foreground": "#0a0a0a",
+      "--popover": "#ffffff",
+      "--popover-foreground": "#0a0a0a",
+      "--muted": "#f5f5f5",
+      "--border": "#e5e5e5",
+      "--input": "#e5e5e5",
+      "--sidebar": "#fafafa",
+      "--sidebar-foreground": "#0a0a0a",
+      "--sidebar-border": "#e5e5e5",
+      "--backdrop": "rgba(0, 0, 0, 0.5)",
+    },
+    dark: {
+      "--foreground": "#fafafa",
+      "--muted-foreground": "#a3a3a3",
+      "--primary": "#e5e5e5",
+      "--primary-foreground": "#171717",
+      "--secondary": "#262626",
+      "--secondary-foreground": "#fafafa",
+      "--accent-foreground": "#fafafa",
+      "--background": "#0a0a0a",
+      "--card": "#171717",
+      "--card-foreground": "#fafafa",
+      "--popover": "#262626",
+      "--popover-foreground": "#fafafa",
+      "--muted": "#262626",
+      "--border": "rgba(255, 255, 255, 0.1)",
+      "--input": "rgba(255, 255, 255, 0.15)",
+      "--sidebar": "#0a0a0a",
+      "--sidebar-foreground": "#fafafa",
+      "--sidebar-border": "rgba(255, 255, 255, 0.1)",
+      "--backdrop": "rgba(0, 0, 0, 0.5)",
+    },
+  };
+
+  describe.each(["light", "dark"] as const)("%s mode", (mode) => {
+    const vars = variablesFor(mode);
+    it.each(Object.entries(expected[mode]))("%s resolves to %s", (token, value) => {
+      expect(parseColor(`var(${token})`, vars)).toEqual(parseColor(value, vars));
+    });
+  });
+});

package/dist/style-entry.d.ts

@@ -31,12 +31,12 @@ declare namespace Root {
 }
 
 
-declare namespace Title {
+declare namespace Image {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace Fallback {
     var displayName: string;
 }
 
@@ -46,17 +46,17 @@ declare namespace Root {
 }
 
 
-declare namespace List {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace Tab {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace Panel {
+declare namespace Provider {
     var displayName: string;
 }
 
@@ -66,12 +66,27 @@ declare namespace Root {
 }
 
 
-declare namespace Image {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Fallback {
+declare namespace ClearAll {
+    var displayName: string;
+}
+
+
+declare namespace Sections {
+    var displayName: string;
+}
+
+
+declare namespace Trigger {
+    var displayName: string;
+}
+
+
+declare namespace Settings {
     var displayName: string;
 }
 
@@ -86,47 +101,47 @@ declare namespace Header {
 }
 
 
-declare namespace Body {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Row {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Head {
+declare namespace Body {
     var displayName: string;
 }
 
 
-declare namespace Cell {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace Caption {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Head {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace Cell {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Caption {
     var displayName: string;
 }
 
@@ -331,6 +346,26 @@ declare namespace Root {
 }
 
 
+declare namespace List {
+    var displayName: string;
+}
+
+
+declare namespace Tab {
+    var displayName: string;
+}
+
+
+declare namespace Panel {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
 declare namespace Row {
     var displayName: string;
 }
@@ -491,16 +526,6 @@ declare namespace ComboboxCollection {
 }
 
 
-declare namespace AutocompleteStandalone {
-    var displayName: string;
-}
-
-
-declare namespace AutocompleteAsyncStandalone {
-    var displayName: string;
-}
-
-
 declare namespace AutocompleteRoot {
     var displayName: string;
 }
@@ -571,6 +596,16 @@ declare namespace AutocompleteStatus {
 }
 
 
+declare namespace AutocompleteStandalone {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteAsyncStandalone {
+    var displayName: string;
+}
+
+
 declare namespace DataTableRoot {
     var displayName: string;
 }

package/dist/testing.d.ts

@@ -52,9 +52,11 @@ declare type AppShellPageProps = {
         icon?: ReactNode;
         /**
          * Custom breadcrumb segment title for this page.
-         * Can be a static string or a function that receives the URL segment.
+         * Can be a static string or a `labels.t("key")` translation function.
+         * Other callbacks receive the URL segment and may return a LocalizedString
+         * (e.g. `(segment) => labels.t("order", { id: segment })`), resolved using the current locale.
          */
-        breadcrumbTitle?: string | ((segment: string) => string);
+        breadcrumbTitle?: string | ((segment: string) => LocalizedString);
     };
     /**
      * Guards to control access to this page.
@@ -160,7 +162,7 @@ declare type CommonPageResource = {
     meta: {
         title: LocalizedString;
         icon?: ReactNode;
-        breadcrumbTitle?: string | ((segment: string) => string);
+        breadcrumbTitle?: string | ((segment: string) => LocalizedString);
     };
 };
 
@@ -570,12 +572,12 @@ declare namespace Root {
 }
 
 
-declare namespace Title {
+declare namespace Image {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace Fallback {
     var displayName: string;
 }
 
@@ -585,17 +587,17 @@ declare namespace Root {
 }
 
 
-declare namespace List {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace Tab {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace Panel {
+declare namespace Provider {
     var displayName: string;
 }
 
@@ -605,12 +607,27 @@ declare namespace Root {
 }
 
 
-declare namespace Image {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Fallback {
+declare namespace ClearAll {
+    var displayName: string;
+}
+
+
+declare namespace Sections {
+    var displayName: string;
+}
+
+
+declare namespace Trigger {
+    var displayName: string;
+}
+
+
+declare namespace Settings {
     var displayName: string;
 }
 
@@ -625,47 +642,47 @@ declare namespace Header {
 }
 
 
-declare namespace Body {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Row {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Head {
+declare namespace Body {
     var displayName: string;
 }
 
 
-declare namespace Cell {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace Caption {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Head {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace Cell {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Caption {
     var displayName: string;
 }
 
@@ -870,6 +887,26 @@ declare namespace Root {
 }
 
 
+declare namespace List {
+    var displayName: string;
+}
+
+
+declare namespace Tab {
+    var displayName: string;
+}
+
+
+declare namespace Panel {
+    var displayName: string;
+}
+
+
+declare namespace Root {
+    var displayName: string;
+}
+
+
 declare namespace Row {
     var displayName: string;
 }
@@ -1030,16 +1067,6 @@ declare namespace ComboboxCollection {
 }
 
 
-declare namespace AutocompleteStandalone {
-    var displayName: string;
-}
-
-
-declare namespace AutocompleteAsyncStandalone {
-    var displayName: string;
-}
-
-
 declare namespace AutocompleteRoot {
     var displayName: string;
 }
@@ -1110,6 +1137,16 @@ declare namespace AutocompleteStatus {
 }
 
 
+declare namespace AutocompleteStandalone {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteAsyncStandalone {
+    var displayName: string;
+}
+
+
 declare namespace DataTableRoot {
     var displayName: string;
 }

package/dist/testing.js

@@ -1,4 +1,4 @@
-import { n as e } from "./appshell-B0wh5Lq0.js";
+import { n as e } from "./appshell-Y1AYCuVJ.js";
 import { MemoryRouter as t, Route as n, Routes as r } from "react-router";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/testing/test-router.tsx