@tailor-platform/app-shell 1.16.0 → 1.17.0

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,32 +587,37 @@ declare namespace Root {
 }
 
 
-declare namespace List {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Tab {
+declare namespace Body {
     var displayName: string;
 }
 
 
-declare namespace Panel {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace Image {
+declare namespace Head {
     var displayName: string;
 }
 
 
-declare namespace Fallback {
+declare namespace Cell {
+    var displayName: string;
+}
+
+
+declare namespace Caption {
     var displayName: string;
 }
 
@@ -625,47 +632,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 Trigger {
     var displayName: string;
 }
 
 
-declare namespace Head {
+declare namespace Close {
     var displayName: string;
 }
 
 
-declare namespace Cell {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace Caption {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Description {
     var displayName: string;
 }
 
@@ -675,192 +682,197 @@ declare namespace Root {
 }
 
 
-declare namespace Trigger {
+declare namespace Legend {
     var displayName: string;
 }
 
 
-declare namespace Close {
+declare namespace ComboboxRoot {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace ComboboxInput {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace ComboboxTrigger {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace ComboboxInputGroup {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace ComboboxContent {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace ComboboxList {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace ComboboxItem {
     var displayName: string;
 }
 
 
-declare namespace Label {
+declare namespace ComboboxEmpty {
     var displayName: string;
 }
 
 
-declare namespace Control {
+declare namespace ComboboxGroup {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace ComboboxGroupLabel {
     var displayName: string;
 }
 
 
-declare namespace Error {
+declare namespace ComboboxClear {
     var displayName: string;
 }
 
 
-declare namespace Validity {
+declare namespace ComboboxChips {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace ComboboxChip {
     var displayName: string;
 }
 
 
-declare namespace Legend {
+declare namespace ComboboxChipRemove {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace ComboboxValue {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace ComboboxStatus {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace ComboboxCollection {
     var displayName: string;
 }
 
 
-declare namespace Item {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace LinkItem {
+declare namespace Label {
     var displayName: string;
 }
 
 
-declare namespace CheckboxItem {
+declare namespace Control {
     var displayName: string;
 }
 
 
-declare namespace CheckboxItemIndicator {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace RadioItem {
+declare namespace Error {
     var displayName: string;
 }
 
 
-declare namespace RadioItemIndicator {
+declare namespace Validity {
     var displayName: string;
 }
 
 
-declare namespace RadioGroup {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Group {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace GroupLabel {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace MenuSeparator {
+declare namespace Item {
     var displayName: string;
 }
 
 
-declare namespace SubmenuRoot {
+declare namespace LinkItem {
     var displayName: string;
 }
 
 
-declare namespace SubmenuTrigger {
+declare namespace CheckboxItem {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace CheckboxItemIndicator {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace RadioItem {
     var displayName: string;
 }
 
 
-declare namespace Close {
+declare namespace RadioItemIndicator {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace RadioGroup {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace Group {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace GroupLabel {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace MenuSeparator {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace SubmenuRoot {
+    var displayName: string;
+}
+
+
+declare namespace SubmenuTrigger {
     var displayName: string;
 }
 
@@ -885,47 +897,62 @@ declare namespace Separator {
 }
 
 
-declare namespace SelectRoot {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace SelectTrigger {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace SelectValue {
+declare namespace Close {
     var displayName: string;
 }
 
 
-declare namespace SelectContent {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace SelectItem {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace SelectGroup {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace SelectGroupLabel {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace SelectSeparator {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace Provider {
+declare namespace Root {
+    var displayName: string;
+}
+
+
+declare namespace List {
+    var displayName: string;
+}
+
+
+declare namespace Tab {
+    var displayName: string;
+}
+
+
+declare namespace Panel {
     var displayName: string;
 }
 
@@ -935,97 +962,107 @@ declare namespace Root {
 }
 
 
+declare namespace Title {
+    var displayName: string;
+}
+
+
+declare namespace Description {
+    var displayName: string;
+}
+
+
 declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Settings {
     var displayName: string;
 }
 
 
-declare namespace ComboboxRoot {
+declare namespace Provider {
     var displayName: string;
 }
 
 
-declare namespace ComboboxInput {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace ComboboxTrigger {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace ComboboxInputGroup {
+declare namespace ClearAll {
     var displayName: string;
 }
 
 
-declare namespace ComboboxContent {
+declare namespace Sections {
     var displayName: string;
 }
 
 
-declare namespace ComboboxList {
+declare namespace Provider {
     var displayName: string;
 }
 
 
-declare namespace ComboboxItem {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace ComboboxEmpty {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace ComboboxGroup {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace ComboboxGroupLabel {
+declare namespace SelectRoot {
     var displayName: string;
 }
 
 
-declare namespace ComboboxClear {
+declare namespace SelectTrigger {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChips {
+declare namespace SelectValue {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChip {
+declare namespace SelectContent {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChipRemove {
+declare namespace SelectItem {
     var displayName: string;
 }
 
 
-declare namespace ComboboxValue {
+declare namespace SelectGroup {
     var displayName: string;
 }
 
 
-declare namespace ComboboxStatus {
+declare namespace SelectGroupLabel {
     var displayName: string;
 }
 
 
-declare namespace ComboboxCollection {
+declare namespace SelectSeparator {
     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-CahhZy7v.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

package/dist/theme-bridge.test.ts

@@ -14,6 +14,9 @@ const here = dirname(fileURLToPath(import.meta.url));
 const bridge = readFileSync(join(here, "theme.bridge.css"), "utf8");
 const defaultTheme = readFileSync(join(here, "themes/default.css"), "utf8");
 
+/** Semantic colour roles: 5 intents x 8 roles, named `--{intent}-{role}`. */
+const SEMANTIC_PREFIX = "(?:info|success|warning|danger|neutral)";
+
 /** Token names defined in the default palette for a given prefix, e.g. `alert`. */
 function definedTokens(prefix: string): string[] {
   const matches = defaultTheme.matchAll(new RegExp(`^\\s*--(${prefix}-[a-z-]+):`, "gm"));
@@ -29,7 +32,11 @@ function bridgedTokens(prefix: string): Map<string, string> {
 }
 
 describe("theme bridge", () => {
-  describe.each(["alert", "status"])("--%s-* tokens", (prefix) => {
+  describe.each([
+    ["alert", "alert"],
+    ["status", "status"],
+    ["semantic colour role", SEMANTIC_PREFIX],
+  ])("--%s-* tokens", (_label, prefix) => {
     const defined = definedTokens(prefix);
     const bridged = bridgedTokens(prefix);
 
@@ -56,4 +63,97 @@ describe("theme bridge", () => {
     // both files — fails loudly.
     expect(bridgedTokens("alert").size).toBe(20);
   });
+
+  it("bridges all 40 semantic colour roles", () => {
+    // 5 intents x 8 roles, pinned for the same reason as the alert count.
+    expect(bridgedTokens(SEMANTIC_PREFIX).size).toBe(40);
+  });
+
+  describe("typography roles", () => {
+    const slots = ["size", "line-height", "weight", "letter-spacing"] as const;
+    /** `--app-shell-type-<role>-<slot>` variables in the default palette, grouped by role. */
+    const defined = new Map<string, Map<string, string>>();
+    for (const m of defaultTheme.matchAll(
+      /^\s*--app-shell-type-([a-z-]+)-(size|line-height|weight|letter-spacing):\s*([^;]+);/gm,
+    )) {
+      const role = m[1];
+      defined.set(role, (defined.get(role) ?? new Map()).set(m[2], m[3].trim()));
+    }
+    /** Bridge entries `--text-<role>[--<suffix>]: var(--app-shell-type-...)`, keyed by property name. */
+    const bridgedText = new Map(
+      [...bridge.matchAll(/^\s*(--text-[a-z-]+):\s*var\((--app-shell-type-[a-z-]+)\);/gm)].map(
+        (m) => [m[1], m[2]],
+      ),
+    );
+
+    it("pins the role count at 10", () => {
+      // Dropping a whole role from both files would still pass the symmetry checks.
+      expect(defined.size).toBe(10);
+    });
+
+    it("defines exactly four variables per role", () => {
+      for (const [role, values] of defined) {
+        expect([...values.keys()].toSorted(), role).toEqual([...slots].toSorted());
+      }
+    });
+
+    it("bridges every role slot to its own variable", () => {
+      const suffix = {
+        size: "",
+        "line-height": "--line-height",
+        weight: "--font-weight",
+        "letter-spacing": "--letter-spacing",
+      } as const;
+      const expected = new Map<string, string>();
+      for (const role of defined.keys()) {
+        for (const slot of slots) {
+          expected.set(`--text-${role}${suffix[slot]}`, `--app-shell-type-${role}-${slot}`);
+        }
+      }
+      expect(bridgedText).toEqual(expected);
+    });
+
+    it("does not collide with a --color-* token that Tailwind resolves first", () => {
+      // `text-<name>` resolves against --color-<name> before --text-<name>.
+      const colors = [...bridge.matchAll(/^\s*--color-([a-z0-9-]+):/gm)].map((m) => m[1]);
+      for (const role of defined.keys()) {
+        expect(colors, role).not.toContain(role);
+      }
+      for (const name of colors) {
+        expect(name).not.toMatch(/^(heading|body|label|code)(-|$)/);
+      }
+    });
+
+    it("keeps the line boxes on the spec values", () => {
+      // size (px) x line-height ratio = line box (px); weight and letter spacing are pinned too. Values from decisions/typography-roles.md.
+      const spec: Record<
+        string,
+        [size: number, lineBox: number, weight: number, letterSpacing: string]
+      > = {
+        "heading-lg": [24, 32, 700, "-0.025em"],
+        "heading-md": [18, 28, 600, "0em"],
+        "heading-sm": [14, 20, 600, "0em"],
+        "body-md": [14, 20, 400, "0em"],
+        "body-sm": [12, 16, 400, "0em"],
+        "label-md": [14, 20, 500, "0em"],
+        "label-sm": [12, 16, 500, "0em"],
+        "code-sm": [12, 18, 400, "0em"],
+        "body-md-relaxed": [14, 24, 400, "0em"],
+        "body-sm-relaxed": [12, 20, 400, "0em"],
+      };
+      expect([...defined.keys()].toSorted()).toEqual(Object.keys(spec).toSorted());
+      for (const [role, [size, lineBox, weight, letterSpacing]] of Object.entries(spec)) {
+        const values = defined.get(role)!;
+        const rem = /^([0-9.]+)rem$/.exec(values.get("size") ?? "");
+        expect(rem, `${role} size`).not.toBeNull();
+        expect(Number(rem![1]) * 16, `${role} size`).toBe(size);
+        const ratio = /^calc\((\d+) \/ (\d+)\)$/.exec(values.get("line-height") ?? "");
+        expect(ratio, `${role} line-height`).not.toBeNull();
+        expect(Number(ratio![2]), `${role} ratio base`).toBe(size);
+        expect(Number(ratio![1]), `${role} line box`).toBe(lineBox);
+        expect(Number(values.get("weight")), `${role} weight`).toBe(weight);
+        expect(values.get("letter-spacing"), `${role} letter-spacing`).toBe(letterSpacing);
+      }
+    });
+  });
 });