@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/app/src/primitives/split-view.variants.ts

@@ -0,0 +1,60 @@
+// SplitView's styling. See button.variants.ts for the split, the colour rule
+// and the spatial rule.
+//
+// The pane sizes are NOT here, and cannot be: the divider's position is a
+// runtime number, so it reaches the element as an inline `flex-basis` rather
+// than as a class. That is not a hardcoded value in the sense the Kit's lint
+// cares about — it carries no Brand decision, only where the user last let go
+// of the divider — and there is no class name that could express it.
+//
+// It follows that this is the one component in the Kit with nothing for the
+// Density axis to re-resolve. Everything spatial about a SplitView is either
+// that runtime fraction or the divider's own thickness, and a rule's thickness
+// is a width — a dimension the Brand ships no token family for at all, which is
+// the same reason nav-item.variants.ts draws its active state without an accent
+// bar. A stop still reaches the panes' contents, which is where the space a
+// reader actually sees lives.
+
+import { tv, type VariantProps } from "tailwind-variants";
+
+const ORIENTATION = {
+  /** Panes side by side, divided by a vertical rule. */
+  // The rule stays 4px; a transparent band around it takes the pointer, so the
+  // drag target is 24px across (WCAG 2.2 SC 2.5.8).
+  horizontal: {
+    root: "flex-row",
+    divider: "relative w-1 cursor-col-resize before:absolute before:inset-y-0 before:-inset-x-2.5 before:content-['']",
+  },
+  /** Panes stacked, divided by a horizontal one. */
+  vertical: {
+    root: "flex-col",
+    divider: "relative h-1 cursor-row-resize before:absolute before:inset-x-0 before:-inset-y-2.5 before:content-['']",
+  },
+} as const;
+
+const DRAGGING = {
+  /** While the divider is held: the rule takes the accent it is being moved by. */
+  true: { divider: "bg-primary" },
+  false: { divider: "bg-muted hover:bg-control-edge" },
+} as const;
+
+export const splitView = tv({
+  slots: {
+    root: "flex w-full items-stretch overflow-hidden",
+    // `min-w-0`/`min-h-0`: without them a flex item refuses to shrink below
+    // its content, and the divider stops halfway through a drag for reasons
+    // nothing on screen explains.
+    //
+    // Each pane is a named size container (ADR 0021): what it holds lays out
+    // against the pane it was given, not the window, so a GridList in a narrow
+    // pane steps down even on a wide screen.
+    pane: "@container/split-pane min-h-0 min-w-0 grow-0 overflow-auto",
+    // Focus is the ink focus outline every DS control draws (ADR 0023).
+    divider:
+      "shrink-0 touch-none select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+  },
+  variants: { orientation: ORIENTATION, dragging: DRAGGING },
+  defaultVariants: { orientation: "horizontal", dragging: false },
+});
+
+export type SplitViewVariants = VariantProps<typeof splitView>;

package/vendor/ds/kits/app/src/recipes.ts

@@ -0,0 +1,44 @@
+// Framework-independent visual recipes and their portable contracts.
+export * from "./composites/action-panel.variants";
+export * from "./composites/activity-feed.variants";
+export * from "./composites/application-shell.variants";
+export * from "./composites/bottom-navigation.variants";
+export * from "./composites/card-heading.variants";
+export * from "./composites/category-filter.variants";
+export * from "./composites/category-preview.variants";
+export * from "./composites/chat-message.variants";
+export * from "./composites/checkout-form.appearance";
+export * from "./composites/command-palette.variants";
+export * from "./composites/context-menu.variants";
+export * from "./composites/diff.variants";
+export * from "./composites/filter.variants";
+export * from "./composites/incentive.variants";
+export * from "./composites/menubar.variants";
+export * from "./composites/multi-column-layout.variants";
+export * from "./composites/order-history.variants";
+export * from "./composites/order-summary.variants";
+export * from "./composites/page-heading.variants";
+export * from "./composites/product-feature.variants";
+export * from "./composites/product-list.variants";
+export * from "./composites/product-overview.variants";
+export * from "./composites/product-quickview.variants";
+export * from "./composites/review.variants";
+export * from "./composites/shopping-cart.appearance";
+export * from "./composites/sidebar-layout.variants";
+export * from "./composites/sidebar-navigation.variants";
+export * from "./composites/sidebar-panel.variants";
+export * from "./composites/sidebar-rail.variants";
+export * from "./composites/speed-dial.variants";
+export * from "./composites/store-navigation.variants";
+export * from "./composites/task-list.variants";
+export * from "./composites/toolbar.variants";
+export * from "./operational.variants";
+export * from "./primitives/list-row.variants";
+export * from "./primitives/nav-item.variants";
+export * from "./primitives/node-badge.variants";
+export * from "./primitives/pill.variants";
+export * from "./primitives/split-view.variants";
+export * from "./composites/settings-row.variants";
+
+export * from "./entity-inspector.variants";
+export * from "./entity-journey.variants";

package/vendor/ds/kits/app/svelte.config.js

@@ -0,0 +1,6 @@
+// The Kit ships plain Svelte 5 source with no preprocessor: `lang="ts"` in a
+// component is handled by the compiler itself, and styling comes from the
+// Theme Layer's utilities rather than from anything that would need a CSS
+// pipeline. The config exists so the Svelte plugin stops guessing.
+/** @type {import('@sveltejs/vite-plugin-svelte').SvelteConfig} */
+export default {};

package/vendor/ds/kits/app/test/action-panel.test.ts

@@ -0,0 +1,63 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import ActionPanel from "../src/composites/ActionPanel.svelte";
+import { actionPanel } from "../src/composites/action-panel.variants";
+import TitlingSurfacesConsumer from "./fixtures/TitlingSurfacesConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const content = createRawSnippet(() => ({ render: () => "<p>Deployment configuration</p>" }));
+const actions = createRawSnippet(() => ({
+  render: () =>
+    '<span><button type="button" data-cancel>Cancel</button><button type="button" data-save>Save</button></span>',
+}));
+
+describe("ActionPanel", () => {
+  it("composes one canonical Card with a section heading, body, and associated actions", () => {
+    const panel = rendered(
+      render(ActionPanel, {
+        title: "Production deployment",
+        description: "Review before saving.",
+        children: content,
+        actions,
+      }),
+    );
+
+    expect(panel.matches("[data-card][data-action-panel]")).toBe(true);
+    expect(panel.getAttribute("role")).toBe("region");
+    expect(panel.getAttribute("aria-label")).toBe("Production deployment");
+    expect(panel.querySelector("[data-section-heading] h2")?.textContent).toBe("Production deployment");
+    expect(panel.querySelector("[data-card-body]")?.textContent).toContain("Deployment configuration");
+    expect(panel.querySelectorAll("[data-card-footer] button")).toHaveLength(2);
+  });
+
+  it("preserves native action order and focus", () => {
+    const panel = rendered(render(ActionPanel, { title: "Deployment", actions }));
+    const controls = [...panel.querySelectorAll<HTMLButtonElement>("button")];
+
+    expect(controls.map((control) => control.textContent)).toEqual(["Cancel", "Save"]);
+    controls[0]!.focus();
+    expect(document.activeElement).toBe(controls[0]);
+    controls[1]!.focus();
+    expect(document.activeElement).toBe(controls[1]);
+  });
+
+  it("routes panel rhythm through Density and inherits nested appearance", () => {
+    const root = render(TitlingSurfacesConsumer);
+    const panel = root.querySelector<HTMLElement>("[data-action-panel]")!;
+
+    expect(classes(panel)).toEqual(expect.objectContaining(classesOf(actionPanel().root())));
+    expect(classes(panel.querySelector("[data-action-panel-content]")!).has(
+      "gap-[var(--reddb-spatial-gap-md)]",
+    )).toBe(true);
+    expect(panel.closest('[data-theme="base"][data-color-scheme="dark"][data-density="compact"]'))
+      .not.toBeNull();
+    expect(panel.hasAttribute("data-theme")).toBe(false);
+    expect(panel.hasAttribute("data-color-scheme")).toBe(false);
+    expect(panel.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("action-panel", "ActionPanel");
+  });
+});

package/vendor/ds/kits/app/test/activity-feed.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import ActivityFeed from "../src/composites/ActivityFeed.svelte";
+import { activityFeed } from "../src/composites/activity-feed.variants";
+import SocialContractFailures from "./fixtures/SocialContractFailures.svelte";
+import SocialSurfacesConsumer from "./fixtures/SocialSurfacesConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const ITEMS = [
+  {
+    id: "queued",
+    title: "Ada queued the deployment",
+    datetime: "2026-08-08T19:00:00Z",
+    time: "19:00",
+    description: "Production",
+    href: "/deployments/queued",
+  },
+  {
+    id: "deployed",
+    title: "Lin deployed the release",
+    datetime: "2026-08-08T19:05:00Z",
+    time: "19:05",
+  },
+] as const;
+
+describe("the deliberately failing ActivityFeed fixture", () => {
+  it("demonstrates a chronological feed without ordered semantics", () => {
+    const broken = rendered(render(SocialContractFailures, { failure: "unordered-feed" }));
+
+    expect(broken.querySelectorAll("time")).toHaveLength(2);
+    expect(broken.querySelector("ol")).toBeNull();
+    expect(broken.querySelector("li")).toBeNull();
+  });
+});
+
+describe("ActivityFeed", () => {
+  it("composes the canonical Timeline as a named ordered feed", () => {
+    const feed = rendered(render(ActivityFeed, { label: "Deployment activity", items: ITEMS }));
+
+    expect(feed.tagName).toBe("OL");
+    expect(feed.matches("[data-timeline][data-activity-feed]")).toBe(true);
+    expect(feed.getAttribute("aria-label")).toBe("Deployment activity");
+    expect(feed.querySelectorAll(":scope > li")).toHaveLength(2);
+    expect([...feed.querySelectorAll("time")].map((time) => time.dateTime))
+      .toEqual(ITEMS.map((item) => item.datetime));
+  });
+
+  it("preserves canonical links and native focus order", () => {
+    const feed = rendered(render(ActivityFeed, { label: "Deployment activity", items: ITEMS }));
+    const link = feed.querySelector<HTMLAnchorElement>('a[href="/deployments/queued"]')!;
+
+    link.focus();
+    expect(document.activeElement).toBe(link);
+    expect(feed.querySelectorAll("a")).toHaveLength(1);
+  });
+
+  it("keeps Density tokenized and inherits every nested appearance axis", () => {
+    const scope = rendered(render(SocialSurfacesConsumer));
+    const feed = scope.querySelector<HTMLElement>("[data-activity-feed]")!;
+
+    expect(classes(feed)).toEqual(expect.objectContaining(classesOf(activityFeed().root())));
+    expect(classes(feed)).toContain("gap-[var(--reddb-spatial-gap-md)]");
+    expect(scope.matches('[data-theme="application"][data-color-scheme="dark"][data-density="compact"][data-motion="reduced"]'))
+      .toBe(true);
+    expect(feed.hasAttribute("data-theme")).toBe(false);
+    expect(feed.hasAttribute("data-color-scheme")).toBe(false);
+    expect(feed.hasAttribute("data-density")).toBe(false);
+    expect(feed.hasAttribute("data-motion")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("activity-feed", "ActivityFeed");
+  });
+});

package/vendor/ds/kits/app/test/application-shell.test.ts

@@ -0,0 +1,147 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { lintKitSource, readVocabulary } from "@reddb-io/kit-lint";
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import ApplicationShell from "../src/composites/ApplicationShell.svelte";
+import { applicationShell } from "../src/composites/application-shell.variants";
+import ApplicationLayoutsConsumer from "./fixtures/ApplicationLayoutsConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const FAILURE_FIXTURE = join(
+  import.meta.dirname,
+  "fixtures",
+  "ApplicationLayoutsContractFailures.svelte",
+);
+
+describe("the deliberately failing Application shell fixture", () => {
+  it("diagnoses a shell whose spatial inset is frozen against Density", () => {
+    const violations = lintKitSource(
+      readFileSync(FAILURE_FIXTURE, "utf8"),
+      FAILURE_FIXTURE,
+      readVocabulary(),
+    );
+
+    expect(violations.map(({ found }) => found)).toContain("p-4");
+  });
+});
+
+describe("ApplicationShell", () => {
+  it("provides the keyboard bypass and canonical focusable main landmark", () => {
+    const root = render(ApplicationShell, {
+      children: createRawSnippet(() => ({ render: () => "<h1>Deployments</h1>" })),
+    });
+    const shell = rendered(root);
+    const link = shell.querySelector<HTMLAnchorElement>("[data-skip-link]")!;
+    const main = shell.querySelector<HTMLElement>("main")!;
+
+    expect(link.getAttribute("href")).toBe("#main-content");
+    expect(main.id).toBe("main-content");
+    expect(main.tabIndex).toBe(-1);
+    expect(main.textContent).toBe("Deployments");
+
+    link.click();
+    expect(document.activeElement).toBe(main);
+  });
+
+  it("yields the main landmark to a host document when embedded", () => {
+    const root = render(ApplicationShell, {
+      embedded: true,
+      mainId: "preview-main",
+      children: createRawSnippet(() => ({ render: () => "<h1>Deployments</h1>" })),
+    });
+    const shell = rendered(root);
+    const region = shell.querySelector<HTMLElement>('[data-application-shell-region="main"]')!;
+    const link = shell.querySelector<HTMLAnchorElement>("[data-skip-link]")!;
+
+    expect(shell.querySelector("main")).toBeNull();
+    expect(region.tagName).toBe("DIV");
+    expect(region.id).toBe("preview-main");
+    expect(link.getAttribute("href")).toBe("#preview-main");
+    link.click();
+    expect(document.activeElement).toBe(region);
+  });
+
+  it("composes optional page landmarks around caller-owned content", () => {
+    const shell = rendered(
+      render(ApplicationShell, {
+        mainId: "workspace",
+        header: createRawSnippet(() => ({ render: () => "<nav>Product</nav>" })),
+        children: createRawSnippet(() => ({ render: () => "<p>Workspace</p>" })),
+        footer: createRawSnippet(() => ({ render: () => "<p>Status</p>" })),
+      }),
+    );
+
+    expect([...shell.children].map((child) => child.tagName)).toEqual([
+      "A",
+      "HEADER",
+      "MAIN",
+      "FOOTER",
+    ]);
+    expect(shell.querySelector("header nav")?.textContent).toBe("Product");
+    expect(shell.querySelector("main")?.id).toBe("workspace");
+    expect(shell.querySelector("footer")?.textContent).toBe("Status");
+    expect(shell.querySelectorAll("[data-container]")).toHaveLength(3);
+    expect(shell.querySelector("main [data-stack]")).not.toBeNull();
+  });
+
+  it("keeps every appearance axis inherited and every shell inset Density-owned", () => {
+    const shell = rendered(render(ApplicationShell, {}));
+    const slots = applicationShell();
+
+    expect(classes(shell)).toEqual(classesOf(slots.root()));
+    const mainContainer = classes(shell.querySelector("main [data-container]")!);
+    for (const className of classesOf(slots.mainContainer())) {
+      expect(mainContainer.has(className)).toBe(true);
+    }
+    expect(mainContainer.has(
+      "py-[var(--reddb-spatial-inset-lg)]",
+    )).toBe(true);
+    expect(shell.hasAttribute("data-theme")).toBe(false);
+    expect(shell.hasAttribute("data-color-scheme")).toBe(false);
+    expect(shell.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("passes native attributes and merges a caller class", () => {
+    const shell = rendered(
+      render(ApplicationShell, { class: "relative", "aria-label": "Product application" }),
+    );
+
+    expect(shell.getAttribute("aria-label")).toBe("Product application");
+    expect(classes(shell)).toEqual(classesOf(applicationShell().root({ class: "relative" })));
+  });
+
+  it("lets every region consume the viewport edge in full-width workspaces", () => {
+    const shell = rendered(
+      render(ApplicationShell, {
+        fullWidth: true,
+        header: createRawSnippet(() => ({ render: () => "<span>Header</span>" })),
+        children: createRawSnippet(() => ({ render: () => "<span>Workspace</span>" })),
+        footer: createRawSnippet(() => ({ render: () => "<span>Status</span>" })),
+      }),
+    );
+
+    for (const container of shell.querySelectorAll("[data-container]")) {
+      expect(classes(container as HTMLElement).has("max-w-none")).toBe(true);
+      expect(classes(container as HTMLElement).has("px-0")).toBe(true);
+    }
+    const header = shell.querySelector<HTMLElement>("header")!;
+    expect(classes(header).has("bg-navigation-surface")).toBe(true);
+    expect(classes(header).has("shadow-elevation-sunken")).toBe(false);
+    expect(classes(header.querySelector<HTMLElement>("[data-container]")!).has("py-0")).toBe(true);
+  });
+
+  it("compiles as a public consumer inside nested appearance scopes", () => {
+    const root = render(ApplicationLayoutsConsumer);
+    const shell = root.querySelector<HTMLElement>("[data-application-shell]")!;
+
+    expect(shell.closest('[data-theme="base"][data-color-scheme="dark"][data-density="compact"]'))
+      .not.toBeNull();
+    expect(shell.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("ships complete showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("application-shell", "ApplicationShell");
+  });
+});

package/vendor/ds/kits/app/test/base-contraction.test.ts

@@ -0,0 +1,60 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+import * as Application from "../src/index";
+import * as Base from "@reddb-io/design-system/base";
+
+const REPO_ROOT = join(import.meta.dirname, "..", "..", "..");
+
+interface Capability {
+  id: string;
+  classification: string;
+  status: string;
+}
+
+interface Readiness {
+  id: string;
+  baselineDisposition: string;
+  canonicalKit: string;
+  export: string;
+}
+
+describe("the Application-to-Base contraction", () => {
+  it("never exports a component that shadows an implemented Base capability", () => {
+    const capabilities = JSON.parse(
+      readFileSync(
+        join(REPO_ROOT, "packages", "baseline", "catalogues", "capabilities.json"),
+        "utf8",
+      ),
+    ) as Capability[];
+    const readiness = JSON.parse(
+      readFileSync(join(REPO_ROOT, "scripts", "producer", "readiness.json"), "utf8"),
+    ) as Readiness[];
+
+    const implementedBaseIds = new Set(
+      capabilities
+        .filter(({ classification, status }) => classification === "base" && status === "implemented")
+        .map(({ id }) => id),
+    );
+    const implementedBaseExports = readiness
+      .filter(
+        ({ id, baselineDisposition, canonicalKit }) =>
+          implementedBaseIds.has(id) &&
+          baselineDisposition === "implemented" &&
+          canonicalKit === "base",
+      )
+      .map(({ export: exported }) => exported);
+
+    expect(implementedBaseExports).toEqual(
+      expect.arrayContaining(["DropdownMenu", "Navbar"]),
+    );
+    expect(
+      implementedBaseExports.filter((exported) => !(exported in Base)),
+      "implemented Base capabilities must resolve from the Base subpath",
+    ).toEqual([]);
+    expect(
+      implementedBaseExports.filter((exported) => exported in Application),
+      "Application must inherit canonical Base contracts instead of shadowing them",
+    ).toEqual([]);
+  });
+});

package/vendor/ds/kits/app/test/button-migration.test.ts

@@ -0,0 +1,134 @@
+// The contracted Application-to-Base Button boundary.
+//
+// Active call sites name the canonical Base contract explicitly, Application
+// owns no Button source, export or catalogue entry, and its route still exists
+// only through the declared Base inheritance edge. The same guard holds the
+// release evidence to that one canonical source.
+
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { extname, join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+import * as Base from "@reddb-io/design-system/base";
+import * as Application from "../src/index";
+
+const REPO_ROOT = join(import.meta.dirname, "..", "..", "..");
+const THIS_FILE = "kits/app/test/button-migration.test.ts";
+const BUTTON_BINDINGS = new Set([
+  "Button",
+  "button",
+  "buttonSpinner",
+  "BUTTON_SIZES",
+  "BUTTON_VARIANTS",
+  "ButtonSize",
+  "ButtonVariant",
+  "ButtonVariants",
+]);
+
+function filesUnder(directory: string): string[] {
+  return readdirSync(directory, { recursive: true, withFileTypes: true })
+    .filter((entry) => entry.isFile())
+    .map((entry) => join(entry.parentPath, entry.name));
+}
+
+const census = [
+  join(REPO_ROOT, "README.md"),
+  join(REPO_ROOT, "kits", "app", "README.md"),
+  join(REPO_ROOT, "scripts", "producer", "README.md"),
+  ...filesUnder(join(REPO_ROOT, "kits", "app", "src", "composites")),
+  ...filesUnder(join(REPO_ROOT, "kits", "app", "test")),
+  ...filesUnder(join(REPO_ROOT, "apps", "showcase", "src")),
+].filter((file) => {
+  const path = relative(REPO_ROOT, file);
+  return path !== THIS_FILE && [".md", ".svelte", ".ts"].includes(extname(file));
+});
+
+/** Imported names in one static import declaration. */
+function importedNames(declaration: string): string[] {
+  const named = /\{([\s\S]*?)\}/.exec(declaration)?.[1] ?? "";
+  return named
+    .split(",")
+    .map((binding) => binding.trim().replace(/^type\s+/, "").split(/\s+as\s+/)[0] ?? "")
+    .filter(Boolean);
+}
+
+function legacyButtonBindings(file: string): string[] {
+  const source = readFileSync(file, "utf8");
+  const path = relative(REPO_ROOT, file);
+  const violations: string[] = [];
+
+  for (const match of source.matchAll(/^\s*import\s+[\s\S]*?\sfrom\s+["']([^"']+)["'];/gm)) {
+    const declaration = match[0];
+    const specifier = match[1]!;
+    const names = importedNames(declaration).filter((name) => BUTTON_BINDINGS.has(name));
+    const defaultButton = /^import\s+Button\s+from\b/.test(declaration);
+    const applicationBarrel = specifier === "@reddb-io/design-system/app";
+    const applicationSource = /(?:^|\/)primitives\/(?:Button\.svelte|button\.variants)$/.test(
+      specifier,
+    );
+    const applicationFixtureBarrel = specifier === "../../../src/index";
+
+    if (
+      (applicationBarrel && names.length > 0) ||
+      applicationSource ||
+      (applicationFixtureBarrel && names.includes("Button")) ||
+      (defaultButton && applicationSource)
+    ) {
+      violations.push(`${path}: ${names.join(", ") || "Button"} from ${specifier}`);
+    }
+  }
+
+  return violations;
+}
+
+describe("the Application Button migration", () => {
+  it("binds every active call site explicitly to the canonical Base contract", () => {
+    expect(census.flatMap(legacyButtonBindings)).toEqual([]);
+  });
+
+  it("contracts every canonical surface to the inherited Base Button", () => {
+    const legacySources = [
+      join(REPO_ROOT, "kits", "app", "src", "primitives", "Button.svelte"),
+      join(REPO_ROOT, "kits", "app", "src", "primitives", "button.variants.ts"),
+    ];
+    expect(legacySources.filter(existsSync)).toEqual([]);
+
+    expect(Object.keys(Application).filter((name) => BUTTON_BINDINGS.has(name))).toEqual([]);
+    expect(Application.PRIMITIVES).not.toContain("Button");
+    expect(Base.BASE_COMPONENTS).toContain("Button");
+
+    const routeOwners = [
+      ...Application.PRIMITIVES.map((name) => ({ name, kit: "app" })),
+      ...Base.BASE_COMPONENTS.map((name) => ({ name, kit: "base" })),
+    ].filter(({ name }) => name === "Button");
+    expect(routeOwners).toEqual([{ name: "Button", kit: "base" }]);
+
+    const applicationManifest = JSON.parse(
+      readFileSync(join(REPO_ROOT, "kits", "app", "kit.json"), "utf8"),
+    ) as { parents?: string[] };
+    expect(applicationManifest.parents).toContain("base");
+
+    const capabilities = JSON.parse(
+      readFileSync(
+        join(REPO_ROOT, "packages", "baseline", "catalogues", "capabilities.json"),
+        "utf8",
+      ),
+    ) as Array<{ id: string; classification: string; status: string }>;
+    expect(capabilities.find(({ id }) => id === "button")).toEqual(
+      expect.objectContaining({ classification: "base", status: "implemented" }),
+    );
+
+    const readiness = JSON.parse(
+      readFileSync(join(REPO_ROOT, "scripts", "producer", "readiness.json"), "utf8"),
+    ) as Array<{
+      id: string;
+      canonicalKit: string;
+      export: string;
+      evidence: Record<string, string[]>;
+    }>;
+    const button = readiness.find(({ id }) => id === "button");
+    expect(button).toEqual(
+      expect.objectContaining({ canonicalKit: "base", export: "Button" }),
+    );
+    expect(Object.values(button?.evidence ?? {}).every((paths) => paths.length > 0)).toBe(true);
+  });
+});

package/vendor/ds/kits/app/test/card-heading.test.ts

@@ -0,0 +1,53 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import CardHeading from "../src/composites/CardHeading.svelte";
+import { cardHeading } from "../src/composites/card-heading.variants";
+import TitlingSurfacesConsumer from "./fixtures/TitlingSurfacesConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("CardHeading", () => {
+  it("composes the canonical section-heading contract at the caller's outline level", () => {
+    const element = rendered(
+      render(CardHeading, {
+        title: "Environment",
+        description: "Production settings",
+        level: 4,
+      }),
+    );
+
+    expect(element.matches("[data-section-heading][data-card-heading]")).toBe(true);
+    expect(element.querySelector("h4")?.textContent).toBe("Environment");
+    expect(element.querySelector("p")?.textContent).toBe("Production settings");
+    for (const className of classesOf(cardHeading())) {
+      expect(classes(element).has(className)).toBe(true);
+    }
+  });
+
+  it("leaves its action cluster's native keyboard behavior intact", () => {
+    const actions = createRawSnippet(() => ({
+      render: () => '<button type="button">Edit environment</button>',
+    }));
+    const element = rendered(render(CardHeading, { title: "Environment", actions }));
+    const button = element.querySelector<HTMLButtonElement>("button")!;
+
+    button.focus();
+    expect(document.activeElement).toBe(button);
+  });
+
+  it("uses Density roles and inherits nested appearance", () => {
+    const root = render(TitlingSurfacesConsumer);
+    const element = root.querySelector<HTMLElement>("[data-card-heading]")!;
+
+    expect(classes(element).has("gap-[var(--reddb-spatial-gap-lg)]")).toBe(true);
+    expect(element.closest('[data-theme="base"][data-color-scheme="dark"][data-density="compact"]'))
+      .not.toBeNull();
+    expect(element.hasAttribute("data-theme")).toBe(false);
+    expect(element.hasAttribute("data-color-scheme")).toBe(false);
+    expect(element.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expectLayoutReadiness("card-heading", "CardHeading");
+  });
+});