@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/app/test/density.test.ts

@@ -0,0 +1,487 @@
+// The Kit under the Density axis.
+//
+// ADR 0003 makes Density the DS's third axis and names the price: "component
+// size maps must route spatial values through density-aware tokens instead of
+// raw utilities". A Tailwind step compiles to a fixed rem, so a Kit written in
+// steps is frozen against a stop the same way a Kit written in hex would be
+// frozen against a Theme. This file is the proof that the price was paid, and
+// it asks the three questions that make the migration true rather than merely
+// done:
+//
+//   1. Does each spatial position name a density role instead of a step?
+//   2. Does that role still render, under `comfortable`, exactly the length the
+//      step it replaced rendered at? (The axis was adopted, not applied — the
+//      Kit's appearance must not have moved.)
+//   3. Does it render something else under `tiny`, `compact`, and `spacious`? (Otherwise
+//      the routing is decoration.)
+//
+// The lengths come from the Tokens Layer's own artifacts, resolved through
+// direct Brand references or the compact midpoint calculation the browser
+// follows, so nothing here is a second opinion about what a stop means — it is
+// the stop's own output, read back.
+//
+// What is NOT routed is as deliberate as what is. The axis ships nine spatial
+// roles, three steps each of control height, inset and gap; a Kit value that is
+// not one of them has nothing to route through, and routing it anyway would
+// either move what `comfortable` renders or invent a role the Tokens Layer does
+// not ship. That is the same refusal the colour rule already makes, so a Kbd's
+// cap height (which tracks the text it sits in, and which density is forbidden
+// to touch) and a spinner's icon scale stay on Tailwind's own steps.
+
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { describe, expect, it } from "vitest";
+import {
+  Button,
+  Card,
+  EmptyState,
+  Kbd,
+  button,
+  card,
+  emptyState,
+  kbdChord,
+} from "@reddb-io/design-system/base";
+import ListRow from "../src/primitives/ListRow.svelte";
+import NavItem from "../src/primitives/NavItem.svelte";
+import NodeBadge from "../src/primitives/NodeBadge.svelte";
+import Pill from "../src/primitives/Pill.svelte";
+import SplitView from "../src/primitives/SplitView.svelte";
+import ApplicationShell from "../src/composites/ApplicationShell.svelte";
+import CommandPalette from "../src/composites/CommandPalette.svelte";
+import MultiColumnLayout from "../src/composites/MultiColumnLayout.svelte";
+import ContextMenu from "../src/composites/ContextMenu.svelte";
+import Menubar from "../src/composites/Menubar.svelte";
+import SidebarLayout from "../src/composites/SidebarLayout.svelte";
+import SpeedDial from "../src/composites/SpeedDial.svelte";
+import Toolbar from "../src/composites/Toolbar.svelte";
+import { listRow } from "../src/primitives/list-row.variants";
+import { navItem } from "../src/primitives/nav-item.variants";
+import { nodeBadge } from "../src/primitives/node-badge.variants";
+import { pill } from "../src/primitives/pill.variants";
+import { applicationShell } from "../src/composites/application-shell.variants";
+import { commandPalette } from "../src/composites/command-palette.variants";
+import { multiColumnLayout } from "../src/composites/multi-column-layout.variants";
+import { contextMenu } from "../src/composites/context-menu.variants";
+import { menubar } from "../src/composites/menubar.variants";
+import { sidebarLayout } from "../src/composites/sidebar-layout.variants";
+import { speedDial } from "../src/composites/speed-dial.variants";
+import { toolbar } from "../src/composites/toolbar.variants";
+import { kitSourceFiles } from "../tools/paths";
+import { classesOf, render } from "./mount";
+
+const require_ = createRequire(import.meta.url);
+
+/** A generated artifact, read through the Tokens Layer's own exports map. */
+function artifact(specifier: string): string {
+  return readFileSync(require_.resolve(specifier), "utf8");
+}
+
+// A stop's artifact ends with its coarse-pointer floor (ADR 0022), a rule
+// nested in \`@media (pointer: coarse)\`. Read as flat text it would replace
+// every control height with the 44px floor, so the fine pointer (the default
+// these assertions describe) reads the stop without it, and the floor is read
+// on its own.
+const COARSE_BLOCK_RE = /@media\s*\(pointer:\s*coarse\)\s*\{(?:[^{}]*\{[^{}]*\})*[^{}]*\}/g;
+
+/** Every `--reddb-*: value` declaration in a generated stylesheet, under a fine pointer. */
+function declarations(css: string): Map<string, string> {
+  const declared = new Map<string, string>();
+  for (const match of css.replace(COARSE_BLOCK_RE, "").matchAll(/(--reddb-[a-z0-9_-]+)\s*:\s*([^;]+);/g)) {
+    declared.set(match[1]!, match[2]!.trim());
+  }
+  return declared;
+}
+
+/** The declarations a coarse pointer adds on top of a stop. */
+function coarseDeclarations(css: string): Map<string, string> {
+  const declared = new Map<string, string>();
+  for (const block of css.match(COARSE_BLOCK_RE) ?? []) {
+    for (const match of block.matchAll(/(--reddb-[a-z0-9_-]+)\s*:\s*([^;]+);/g)) {
+      declared.set(match[1]!, match[2]!.trim());
+    }
+  }
+  return declared;
+}
+
+/** The four stops of the axis (ADR 0003), each read from its own artifact. */
+const STOPS = ["tiny", "compact", "comfortable", "spacious"] as const;
+type Stop = (typeof STOPS)[number];
+
+const brandScale = declarations(artifact("@reddb-io/tokens/tokens.css"));
+const stops = new Map<Stop, Map<string, string>>(
+  STOPS.map((stop) => [stop, declarations(artifact(`@reddb-io/tokens/density-${stop}.css`))]),
+);
+
+/**
+ * The length `role` renders at under `stop` — the stop's reassignment followed
+ * through to the step of the Brand's spacing scale it lands on.
+ */
+function renders(role: string, stop: Stop): string {
+  const declared = stops.get(stop)!.get(`--reddb-spatial-${role}`);
+  expect(declared, `the ${stop} stop declares no --reddb-spatial-${role}`).toBeDefined();
+  const reference = /^var\(\s*(--reddb-[a-z0-9_-]+)\s*\)$/.exec(declared!);
+  if (reference) {
+    const length = brandScale.get(reference[1]!);
+    expect(length, `nothing declares ${reference[1]}`).toBeDefined();
+    return length!;
+  }
+  const midpoint = /^calc\(\(var\(\s*(--reddb-[a-z0-9_-]+)\s*\) \+ var\(\s*(--reddb-[a-z0-9_-]+)\s*\)\) \/ 2\)$/.exec(
+    declared!,
+  );
+  expect(midpoint, `${role} at ${stop} is neither a Brand step nor its midpoint`).not.toBeNull();
+  const left = brandScale.get(midpoint![1]!);
+  const right = brandScale.get(midpoint![2]!);
+  expect(left, `nothing declares ${midpoint![1]}`).toBeDefined();
+  expect(right, `nothing declares ${midpoint![2]}`).toBeDefined();
+  const leftLength = /^(\d+(?:\.\d+)?)([a-z%]+)$/.exec(left!);
+  const rightLength = /^(\d+(?:\.\d+)?)([a-z%]+)$/.exec(right!);
+  expect(leftLength?.[2]).toBe(rightLength?.[2]);
+  return `${(Number(leftLength![1]) + Number(rightLength![1])) / 2}${leftLength![2]}`;
+}
+
+/** One spatial position a Kit class routes through the axis. */
+interface Routed {
+  /** The Tailwind position the value sits in: `h`, `px`, `py`, `pb`, `gap`. */
+  position: string;
+  /** The density role that position now names. */
+  role: string;
+  /** The fixed step it replaced… */
+  was: string;
+  /** …and the length that step rendered at, which `comfortable` must keep. */
+  length: string;
+}
+
+/** One class string the Kit produces, and what it routes. */
+interface Specimen {
+  name: string;
+  classes: () => string;
+  routed: readonly Routed[];
+}
+
+const HEIGHT_SM: Routed = { position: "h", role: "control-height-sm", was: "h-6", length: "1.5rem" };
+const HEIGHT_MD: Routed = {
+  position: "h",
+  role: "control-height-md",
+  was: "h-8",
+  length: "2rem",
+};
+const HEIGHT_LG: Routed = {
+  position: "h",
+  role: "control-height-lg",
+  was: "h-10",
+  length: "2.5rem",
+};
+
+const inset = (position: string, step: "sm" | "md" | "lg"): Routed =>
+  ({
+    sm: { position, role: "inset-sm", was: `${position}-3`, length: "0.75rem" },
+    md: { position, role: "inset-md", was: `${position}-4`, length: "1rem" },
+    lg: { position, role: "inset-lg", was: `${position}-6`, length: "1.5rem" },
+  })[step];
+
+const GAP_SM: Routed = { position: "gap", role: "gap-sm", was: "gap-1", length: "0.25rem" };
+const GAP_MD: Routed = { position: "gap", role: "gap-md", was: "gap-2", length: "0.5rem" };
+const GAP_LG: Routed = { position: "gap", role: "gap-lg", was: "gap-3", length: "0.75rem" };
+// The layout tier (ADR 0024): the space between a layout primitive's own blocks.
+const LAYOUT_GAP_MD: Routed = { position: "gap", role: "layout-gap-md", was: "gap-6", length: "1.5rem" };
+
+// Every spatial value in the Kit that the axis owns, component by component.
+// A position missing from a row is a value the axis ships no role for — see the
+// header note; the guard below is what stops a routed one quietly coming back.
+const SPECIMENS: readonly Specimen[] = [
+  {
+    name: "ApplicationShell header container",
+    classes: () => applicationShell().headerContainer(),
+    routed: [inset("py", "sm")],
+  },
+  {
+    name: "ApplicationShell main container",
+    classes: () => applicationShell().mainContainer(),
+    routed: [inset("py", "lg")],
+  },
+  {
+    name: "CommandPalette content",
+    classes: () => commandPalette().content(),
+    routed: [inset("p", "md")],
+  },
+  {
+    name: "MultiColumnLayout root",
+    classes: () => multiColumnLayout().root(),
+    routed: [LAYOUT_GAP_MD],
+  },
+  {
+    name: "SidebarLayout root",
+    classes: () => sidebarLayout().root(),
+    routed: [LAYOUT_GAP_MD],
+  },
+  {
+    name: "Button, size sm",
+    classes: () => button({ size: "sm" }),
+    routed: [HEIGHT_SM, inset("px", "sm"), GAP_MD],
+  },
+  {
+    name: "Button, size md",
+    classes: () => button({ size: "md" }),
+    routed: [HEIGHT_MD, inset("px", "md"), GAP_MD],
+  },
+  {
+    name: "Button, size lg",
+    classes: () => button({ size: "lg" }),
+    routed: [HEIGHT_LG, inset("px", "lg"), GAP_MD],
+  },
+  {
+    name: "Card header, padding md",
+    classes: () => card({ padding: "md" }).header(),
+    routed: [inset("p", "md"), GAP_SM],
+  },
+  { name: "Card body, padding md", classes: () => card({ padding: "md" }).body(), routed: [inset("p", "md")] },
+  {
+    name: "Card footer, padding md",
+    classes: () => card({ padding: "md" }).footer(),
+    routed: [inset("p", "md"), GAP_MD],
+  },
+  {
+    name: "Card header, padding sm",
+    classes: () => card({ padding: "sm" }).header(),
+    routed: [inset("p", "sm"), GAP_SM],
+  },
+  { name: "Card body, padding sm", classes: () => card({ padding: "sm" }).body(), routed: [inset("p", "sm")] },
+  {
+    name: "Card footer, padding sm",
+    classes: () => card({ padding: "sm" }).footer(),
+    routed: [inset("p", "sm"), GAP_MD],
+  },
+  {
+    name: "EmptyState root, size sm",
+    classes: () => emptyState({ size: "sm" }).root(),
+    routed: [GAP_MD, inset("px", "md"), inset("py", "lg")],
+  },
+  {
+    name: "EmptyState root, size md",
+    classes: () => emptyState({ size: "md" }).root(),
+    routed: [GAP_LG, inset("px", "lg")],
+  },
+  { name: "EmptyState actions", classes: () => emptyState().actions(), routed: [GAP_MD] },
+  { name: "Kbd chord", classes: () => kbdChord().root(), routed: [GAP_SM] },
+  {
+    name: "ListRow root, size md",
+    classes: () => listRow({ size: "md" }).root(),
+    routed: [GAP_LG, inset("px", "md"), inset("py", "sm")],
+  },
+  {
+    name: "ListRow root, size sm",
+    classes: () => listRow({ size: "sm" }).root(),
+    routed: [GAP_MD, inset("px", "sm")],
+  },
+  { name: "ListRow trailing", classes: () => listRow().trailing(), routed: [GAP_MD] },
+  { name: "NavItem root", classes: () => navItem().root(), routed: [GAP_MD, inset("px", "sm")] },
+  { name: "NodeBadge root", classes: () => nodeBadge().root(), routed: [GAP_MD] },
+  { name: "Pill, size md", classes: () => pill({ size: "md" }), routed: [inset("px", "sm")] },
+  {
+    name: "ContextMenu item, size md",
+    classes: () => contextMenu({ size: "md" }).item(),
+    routed: [HEIGHT_MD, inset("px", "md")],
+  },
+  {
+    name: "ContextMenu content",
+    classes: () => contextMenu().content(),
+    routed: [inset("p", "sm")],
+  },
+  {
+    name: "Menubar root",
+    classes: () => menubar().root(),
+    routed: [GAP_SM],
+  },
+  {
+    name: "Menubar item, size md",
+    classes: () => menubar({ size: "md" }).item(),
+    routed: [HEIGHT_MD, inset("px", "md")],
+  },
+  {
+    name: "Toolbar root",
+    classes: () => toolbar().root(),
+    routed: [GAP_SM, inset("p", "sm")],
+  },
+  {
+    name: "Toolbar item, size md",
+    classes: () => toolbar({ size: "md" }).item(),
+    routed: [HEIGHT_MD, inset("px", "md")],
+  },
+  {
+    name: "SpeedDial content",
+    classes: () => speedDial().content(),
+    routed: [GAP_SM, inset("p", "sm")],
+  },
+];
+
+/** Every fixed step the axis owns, i.e. every step the Kit stopped writing. */
+const OWNED: readonly string[] = [
+  ...new Set(SPECIMENS.flatMap((specimen) => specimen.routed.map((routed) => routed.was))),
+].sort();
+
+describe("every spatial value the Density axis owns is named through it", () => {
+  for (const specimen of SPECIMENS) {
+    it(`${specimen.name} names roles, not steps`, () => {
+      const worn = classesOf(specimen.classes());
+      for (const { position, role, was } of specimen.routed) {
+        const named = worn.has(`${position}-[var(--reddb-spatial-${role})]`);
+        expect(named, `${specimen.name} does not name ${role} in its ${position} position`).toBe(
+          true,
+        );
+        expect(worn.has(was), `${specimen.name} still wears the fixed ${was}`).toBe(false);
+      }
+    });
+  }
+});
+
+/** Roles the Density axis never shrinks below the WCAG 2.2 target size (#519). */
+const TARGET_FLOORED = new Set(["control-height-sm"]);
+
+describe("what a coarse pointer resolves the control heights to (ADR 0022)", () => {
+  /** A Brand step, or the midpoint of two, in rem. */
+  const rem = (value: string): number => {
+    const step = /^var\(\s*(--reddb-[a-z0-9_-]+)\s*\)$/.exec(value);
+    if (step) return Number.parseFloat(brandScale.get(step[1]!)!);
+    const mid = /^calc\(\(var\(\s*(--reddb-[a-z0-9_-]+)\s*\) \+ var\(\s*(--reddb-[a-z0-9_-]+)\s*\)\) \/ 2\)$/.exec(value);
+    expect(mid, `${value} is neither a Brand step nor its midpoint`).not.toBeNull();
+    return (Number.parseFloat(brandScale.get(mid![1]!)!) + Number.parseFloat(brandScale.get(mid![2]!)!)) / 2;
+  };
+
+  for (const stop of STOPS) {
+    it(`raises every control height to a 44px target at ${stop}`, () => {
+      const coarse = coarseDeclarations(artifact(`@reddb-io/tokens/density-${stop}.css`));
+      for (const size of ["sm", "md", "lg"]) {
+        const declared = coarse.get(`--reddb-spatial-control-height-${size}`);
+        expect(declared, `${stop} declares no coarse control-height-${size}`).toBeDefined();
+        expect(rem(declared!), `control-height-${size} at ${stop}`).toBeGreaterThanOrEqual(2.75);
+      }
+    });
+  }
+});
+
+describe("what a stop resolves those roles to", () => {
+  const routed = new Map<string, Routed>(
+    SPECIMENS.flatMap((specimen) => specimen.routed).map((entry) => [entry.role, entry]),
+  );
+
+  for (const [role, { was, length }] of routed) {
+    it(`renders ${role} at ${length} under comfortable — what ${was} rendered at`, () => {
+      // The neutral is the whole reason this migration is safe to land: adopting
+      // the axis changes nothing until a consumer declares another stop.
+      expect(renders(role, "comfortable")).toBe(length);
+    });
+
+    it(`moves ${role} monotonically from tiny through spacious`, () => {
+      if (TARGET_FLOORED.has(role)) {
+        // A pointer target holds the WCAG 2.2 24px floor (#519): it may not
+        // shrink below comfortable, but it still grows at spacious.
+        expect(renders(role, "tiny")).toBe(renders(role, "comfortable"));
+        expect(renders(role, "compact")).toBe(renders(role, "comfortable"));
+        expect(renders(role, "spacious")).not.toBe(length);
+        return;
+      }
+      expect(Number.parseFloat(renders(role, "tiny"))).toBeLessThan(
+        Number.parseFloat(renders(role, "compact")),
+      );
+      expect(renders(role, "compact")).not.toBe(length);
+      expect(Number.parseFloat(renders(role, "compact"))).toBeLessThan(
+        Number.parseFloat(renders(role, "comfortable")),
+      );
+      expect(renders(role, "spacious")).not.toBe(length);
+    });
+  }
+});
+
+/** Class names the Kit writes, read the way the anti-hardcode lint reads them. */
+function classesWritten(file: string): string[] {
+  const source = readFileSync(file, "utf8");
+  const pattern = file.endsWith(".variants.ts")
+    ? /"([^"\\\n]*)"|'([^'\\\n]*)'/g
+    : /\bclass\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
+  return [...source.matchAll(pattern)]
+    .flatMap((match) => (match[1] ?? match[2] ?? "").split(/\s+/))
+    .filter(Boolean);
+}
+
+describe("the Kit's source", () => {
+  it("writes no fixed step the axis owns", () => {
+    // Prose may still name a step — this reads class positions only, exactly as
+    // the anti-hardcode lint does, so the guard cannot be tripped by a comment.
+    const owned = new Set(OWNED);
+    const offenders = kitSourceFiles().flatMap((file) =>
+      classesWritten(file)
+        .filter((written) => owned.has(written))
+        .map((written) => `${file}: ${written}`),
+    );
+    expect(OWNED.length).toBeGreaterThan(0);
+    expect(offenders).toEqual([]);
+  });
+
+  it("names only spatial roles the Tokens Layer declares", () => {
+    // A typo in a role name is invisible in the browser — the variable simply
+    // resolves to nothing and the property is dropped — so it is caught here.
+    const declared = new Set(stops.get("comfortable")!.keys());
+    const named = new Set<string>();
+    for (const file of kitSourceFiles()) {
+      for (const match of readFileSync(file, "utf8").matchAll(/--reddb-spatial-[a-z0-9-]+/g)) {
+        named.add(match[0]);
+      }
+    }
+    expect(named.size).toBeGreaterThan(0);
+    expect([...named].filter((name) => !declared.has(name))).toEqual([]);
+  });
+});
+
+/** Every class worn anywhere in a rendered component's tree. */
+function wornAnywhere(target: HTMLElement): Set<string> {
+  const worn = new Set<string>();
+  for (const element of target.querySelectorAll("*")) {
+    for (const name of classesOf(element.getAttribute("class") ?? "")) worn.add(name);
+  }
+  return worn;
+}
+
+describe("no component renders a fixed step the axis owns", () => {
+  // The variants modules are where the classes are written, but it is the
+  // components that wear them — and a component that reached around its own
+  // variants module would pass every assertion above.
+  const MOUNTED: readonly [string, () => HTMLElement][] = [
+    ["ApplicationShell", () => render(ApplicationShell, {})],
+    [
+      "CommandPalette",
+      () => render(CommandPalette, {
+        triggerLabel: "Search commands",
+        contentLabel: "Commands",
+        label: "Command",
+      }),
+    ],
+    ["Button", () => render(Button, {})],
+    ["Button, size sm", () => render(Button, { size: "sm" })],
+    ["Button, size lg", () => render(Button, { size: "lg", loading: true })],
+    ["Card", () => render(Card, { title: "alpha", description: "a node" })],
+    ["Card, padding sm", () => render(Card, { title: "alpha", padding: "sm" })],
+    ["EmptyState", () => render(EmptyState, { title: "No nodes yet", hint: "reddb node add" })],
+    ["Kbd", () => render(Kbd, { keys: ["Ctrl", "K"] })],
+    ["ListRow", () => render(ListRow, { title: "alpha", description: "a node" })],
+    ["ListRow, size sm", () => render(ListRow, { title: "alpha", size: "sm" })],
+    ["NavItem", () => render(NavItem, { label: "Nodes" })],
+    ["NodeBadge", () => render(NodeBadge, { name: "alpha" })],
+    ["Pill", () => render(Pill, {})],
+    ["SplitView", () => render(SplitView, {})],
+    ["ContextMenu", () => render(ContextMenu, { triggerLabel: "Actions", contentLabel: "Actions" })],
+    ["Menubar", () => render(Menubar, { label: "Commands" })],
+    ["MultiColumnLayout", () => render(MultiColumnLayout, {})],
+    ["SidebarLayout", () => render(SidebarLayout, {})],
+    ["SpeedDial", () => render(SpeedDial, { triggerLabel: "Create", contentLabel: "Create actions" })],
+    ["Toolbar", () => render(Toolbar, { label: "Formatting" })],
+  ];
+
+  const owned = new Set(OWNED);
+
+  for (const [name, mount] of MOUNTED) {
+    it(`${name} wears none of them`, () => {
+      const worn = [...wornAnywhere(mount())].filter((written) => owned.has(written));
+      expect(worn).toEqual([]);
+    });
+  }
+});

package/vendor/ds/kits/app/test/diff.test.ts

@@ -0,0 +1,121 @@
+import { flushSync } from "svelte";
+import { describe, expect, it } from "vitest";
+import Diff, { type DiffRow } from "../src/composites/Diff.svelte";
+import { diff } from "../src/composites/diff.variants";
+import DiffContractFailures from "./fixtures/DiffContractFailures.svelte";
+import DiffConsumer from "./fixtures/DiffConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const ROWS: readonly DiffRow[] = [
+  { before: "[server]", after: "[server]" },
+  { before: "timeout = 30", after: "timeout = 60" },
+  { before: "legacy = true" },
+  { after: "retries = 3" },
+];
+
+describe("the deliberately failing Diff fixture", () => {
+  it("demonstrates additions and removals conveyed by colour alone", () => {
+    const broken = rendered(render(DiffContractFailures));
+
+    expect(broken.querySelectorAll(".text-danger, .text-success")).toHaveLength(2);
+    expect(broken.querySelector("[data-change-kind]")).toBeNull();
+    expect(broken.textContent).not.toMatch(/Added|Removed|[+−]/);
+  });
+});
+
+describe("Diff", () => {
+  it("presents an inline comparison with visible and announced change kinds", () => {
+    const diff = rendered(render(Diff, { label: "Configuration changes", rows: ROWS }));
+    const lines = [...diff.querySelectorAll<HTMLElement>("[data-diff-line]")];
+
+    expect(diff.matches('[data-diff][data-mode="inline"][aria-label="Configuration changes"]'))
+      .toBe(true);
+    expect(lines.map((line) => line.dataset.changeKind)).toEqual([
+      "context",
+      "removal",
+      "addition",
+      "removal",
+      "addition",
+    ]);
+    expect(lines.map((line) => line.getAttribute("aria-label"))).toEqual([
+      null,
+      "Removed: timeout = 30",
+      "Added: timeout = 60",
+      "Removed: legacy = true",
+      "Added: retries = 3",
+    ]);
+    expect(lines.map((line) => line.querySelector("[data-diff-marker]")?.textContent)).toEqual([
+      "",
+      "−",
+      "+",
+      "−",
+      "+",
+    ]);
+  });
+
+  it("composes the canonical keyboard-resizable SplitView for side-by-side changes", () => {
+    const diff = rendered(
+      render(Diff, {
+        label: "Configuration changes",
+        rows: ROWS,
+        mode: "side-by-side",
+        beforeLabel: "Current",
+        afterLabel: "Proposed",
+        separatorLabel: "Resize current and proposed configuration",
+      }),
+    );
+    const split = diff.querySelector<HTMLElement>('[data-orientation="horizontal"]')!;
+    const panes = [...diff.querySelectorAll<HTMLElement>("[data-diff-pane]")];
+    const separator = split.querySelector<HTMLElement>('[role="separator"]')!;
+
+    expect(diff.dataset.mode).toBe("side-by-side");
+    expect(panes.map((pane) => pane.getAttribute("aria-label"))).toEqual([
+      "Current",
+      "Proposed",
+    ]);
+    expect(panes.map((pane) => pane.querySelectorAll("[data-diff-line]").length)).toEqual([4, 4]);
+    expect(separator.getAttribute("aria-label")).toBe(
+      "Resize current and proposed configuration",
+    );
+
+    separator.focus();
+    separator.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true, cancelable: true }),
+    );
+    flushSync();
+    expect(document.activeElement).toBe(separator);
+    expect(separator.getAttribute("aria-valuenow")).toBe("52");
+  });
+
+  it("keeps Density tokenized and inherits every nested appearance axis", () => {
+    const scope = rendered(render(DiffConsumer));
+    const comparison = scope.querySelector<HTMLElement>("[data-diff]")!;
+
+    expect(classes(comparison)).toEqual(classesOf(diff().root()));
+    expect(classes(comparison)).toContain("border-muted");
+    expect(comparison.innerHTML).toContain("var(--reddb-spatial-inset-md)");
+    expect(
+      scope.matches(
+        '[data-theme="application"][data-color-scheme="dark"][data-density="compact"][data-motion="reduced"]',
+      ),
+    ).toBe(true);
+    for (const axis of ["data-theme", "data-color-scheme", "data-density", "data-motion"]) {
+      expect(comparison.hasAttribute(axis)).toBe(false);
+    }
+  });
+
+  it("merges caller classes and passes native attributes", () => {
+    const comparison = rendered(
+      render(Diff, { rows: ROWS, id: "release-diff", class: "shadow-sm" }),
+    );
+
+    expect(comparison.id).toBe("release-diff");
+    expect(classes(comparison).has("shadow-sm")).toBe(true);
+    expect(classes(comparison).has("border-muted")).toBe(true);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("diff", "Diff");
+  });
+});

package/vendor/ds/kits/app/test/elevation.test.ts

@@ -0,0 +1,77 @@
+import {
+  ActionPanel,
+  applicationShell,
+  commandPalette,
+  contextMenu,
+  pageHeading,
+  sidebarLayout,
+  sidebarNavigation,
+  sidebarRail,
+} from "@reddb-io/design-system/app";
+import { popover } from "@reddb-io/design-system/base";
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const chromeContract = [
+  "bg-elevation-sunken-surface",
+  "border-elevation-sunken-border",
+  "shadow-elevation-sunken",
+] as const;
+
+describe("Application elevation", () => {
+  it("keeps content at base while only persistent shell chrome uses the complete sunken material", () => {
+    const shell = applicationShell();
+    expect(classesOf(shell.root()).has("bg-elevation-base-surface")).toBe(true);
+    expect(classesOf(shell.main()).has("bg-elevation-base-surface")).toBe(true);
+
+    const chrome = {
+      ShellHeader: shell.header(),
+      ShellFooter: shell.footer(),
+      SidebarRail: sidebarRail().root(),
+      SidebarPanel: sidebarLayout({ rail: true }).panel(),
+      SidebarNavigation: sidebarNavigation().root(),
+    };
+
+    for (const [name, surface] of Object.entries(chrome)) {
+      const worn = classesOf(surface);
+      for (const token of chromeContract) {
+        expect(worn.has(token), `${name} does not resolve ${token}`).toBe(true);
+      }
+    }
+
+    const heading = classesOf(pageHeading().root());
+    expect(heading.has("bg-transparent")).toBe(true);
+    expect(heading.has("bg-elevation-sunken-surface")).toBe(false);
+    expect(heading.has("border-elevation-sunken-border")).toBe(true);
+    expect(heading.has("shadow-elevation-sunken")).toBe(false);
+  });
+
+  it("keeps ContextMenu and CommandPalette on the inherited overlay material", () => {
+    const surfaces = {
+      ContextMenu: contextMenu().content(),
+      CommandPalette: popover({ class: commandPalette().content() }),
+    };
+
+    for (const [name, surface] of Object.entries(surfaces)) {
+      const worn = classesOf(surface);
+      for (const token of [
+        "bg-elevation-overlay-surface",
+        "border-elevation-overlay-border",
+        "shadow-elevation-overlay",
+      ]) {
+        expect(worn.has(token), `${name} does not resolve ${token}`).toBe(true);
+      }
+    }
+  });
+
+  it("raises application panels through the Card contract", () => {
+    const panel = rendered(render(ActionPanel, {
+      title: "Deployment actions",
+      actions: createRawSnippet(() => ({ render: () => "<button>Deploy</button>" })),
+    }));
+
+    expect(panel.dataset.raised).toBe("true");
+    expect(classes(panel).has("shadow-elevation-raised")).toBe(true);
+  });
+});