@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/app/test/fixtures/consumer-check/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.consumer.json",
+  "include": ["Unfixed.svelte"]
+}

package/vendor/ds/kits/app/test/fixtures/markers/fixture-badge.variants.ts

@@ -0,0 +1,12 @@
+// A stand-in component for `markers.test.ts`, not part of the Kit.
+//
+// Its vocabulary is chosen to break a marker map in the way that matters:
+// `inline-flex rounded-full border` is an idiom `fixture-chip` writes too, so
+// a marker cut from it names both components, while `fixture-badge-cap` is
+// this component's alone and names one.
+
+import { tv } from "tailwind-variants";
+
+export const fixtureBadge = tv({
+  base: "fixture-badge-cap inline-flex rounded-full border",
+});

package/vendor/ds/kits/app/test/fixtures/markers/fixture-chip.variants.ts

@@ -0,0 +1,8 @@
+// The neighbour that makes `fixture-badge`'s shared idiom shared. See
+// `fixture-badge.variants.ts` for what the pair is for.
+
+import { tv } from "tailwind-variants";
+
+export const fixtureChip = tv({
+  base: "fixture-chip-cap inline-flex rounded-full border",
+});

package/vendor/ds/kits/app/test/fixtures/tree-shaking/button-only.ts

@@ -0,0 +1,7 @@
+// The same application, importing one Primitive instead. Its bundle is what
+// makes the other one's evidence readable: the behavior base has to be absent
+// from somewhere for its presence to mean anything.
+
+import { Button } from "@reddb-io/design-system/base";
+
+export default Button;

package/vendor/ds/kits/app/test/fixtures/tree-shaking/menu-only.ts

@@ -0,0 +1,9 @@
+// An application that imports one inherited Base Composite and nothing else.
+//
+// Committed rather than generated, because it is the input to a claim about
+// the build: the entry a consumer writes, from the canonical public subpath,
+// so what the bundler sees here is what it sees out there.
+
+import { DropdownMenu } from "@reddb-io/design-system/base";
+
+export default DropdownMenu;

package/vendor/ds/kits/app/test/fixtures/tree-shaking/number-field-only.ts

@@ -0,0 +1 @@
+export { NumberField } from "@reddb-io/design-system/base";

package/vendor/ds/kits/app/test/fixtures/tree-shaking/task-list-only.ts

@@ -0,0 +1 @@
+export { TaskList } from "../../../src/index";

package/vendor/ds/kits/app/test/framework-app.test.ts

@@ -0,0 +1,140 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h, type ComponentType } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import * as react from "../react/src";
+import Fixture from "./fixtures/FrameworkApp.svelte";
+import { labelInName, visibleText, accessibleName } from "./label-in-name";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+HTMLElement.prototype.scrollIntoView ??= () => {};
+const cleanups: (() => Promise<void>)[] = [];
+afterEach(async () => { while (cleanups.length) await cleanups.pop()!(); });
+const destinations = [{ id: "requests", label: "Requests", href: "#requests", badge: 123, status: { label: "Connected", tone: "success" } }, { id: "settings", label: "Settings", href: "#settings" }];
+const defaults = {
+ NodeBadge: { name: "sao-01", status: "online" }, Pill: {}, ListRow: { title: "Request 204", description: "Completed" }, NavItem: { label: "Requests", href: "#requests", current: true },
+ SplitView: {}, ActionPanel: { title: "Retention" }, ActivityFeed: { label: "Recent events", items: [{ id: "completed", title: "Request completed", datetime: "2026-10-20", time: "Now" }] }, ApplicationShell: { embedded: true },
+ BottomNavigation: { label: "Workspace", items: destinations, currentId: "requests" }, CardHeading: { title: "Recent requests" }, CategoryFilter: { legend: "Services", name: "service", options: [{ value: "api", label: "API" }, { value: "worker", label: "Worker" }, { value: "off", label: "Offline", disabled: true }] },
+ CategoryPreview: { name: "Compute", href: "#compute" }, ChatMessage: { author: "Ana", avatarFallback: "AN", datetime: "2026-10-20", time: "Now" },
+ CheckoutForm: { sections: [{ legend: "Billing", fields: [{ name: "company", label: "Company", value: "RedDB", required: true }] }], submitLabel: "Continue" },
+ CommandPalette: { triggerLabel: "Commands", contentLabel: "Workspace commands", label: "Find a command", commands: [{ id: "inspect", label: "Inspect request" }] },
+ ContextMenu: { triggerLabel: "Request actions", contentLabel: "Request commands", items: [{ id: "inspect", label: "Inspect" }] },
+ Diff: { rows: [{ before: "GET /old", after: "GET /new" }] },
+ Filter: { legend: "Environment", name: "env", options: [{ value: "prod", label: "Production" }, { value: "stg", label: "Staging" }, { value: "off", label: "Offline", disabled: true }] },
+ Incentive: { title: "Faster requests" }, Menubar: { label: "Editor", menus: [{ id: "file", label: "File", items: [{ id: "save", label: "Save" }] }] }, MultiColumnLayout: {},
+ OrderHistory: { title: "Invoices", caption: "Recent invoices", orders: [{ id: "INV-42", placed: "Today", placedAt: "2026-10-20", status: "Paid", total: "$42" }] },
+ OrderSummary: { title: "Monthly usage", lines: [{ label: "Requests", value: "$42" }], totalLabel: "Total", total: "$42" }, PageHeading: { title: "Requests" },
+ ProductFeature: { title: "Request tracing" }, ProductList: { label: "Services", items: [{ id: "api", name: "API", href: "#api", price: "$42" }] }, ProductOverview: { title: "API", price: "$42" },
+ ProductQuickview: { title: "API", triggerLabel: "Inspect API" }, Review: { author: "Ana", avatarFallback: "AN", rating: 4 },
+ ShoppingCart: { title: "Resources", items: [{ id: "api", name: "API", price: "$42", quantity: 2, quantityName: "quantity" }], totalLabel: "Total", total: "$84" },
+ SidebarNavigation: { label: "Workspace", items: destinations, currentId: "requests" }, SidebarPanel: { title: "Requests", badge: 123, status: { label: "Connected", tone: "success" } },
+ SidebarRail: { label: "Workspace", items: destinations, currentId: "requests", showLabels: true }, SidebarLayout: { main: false, sidebarLabel: "Workspace" },
+ SpeedDial: { triggerLabel: "Create", contentLabel: "Create resource", actions: [{ id: "request", label: "New request" }] },
+ StoreNavigation: { label: "Workspace", items: destinations, currentId: "requests" },
+ TaskList: { label: "Requests", items: [{ id: "api", title: "Replay requests", state: "running", progress: 40 }, { id: "worker", title: "Rebuild index", state: "blocked", reason: "Waiting for a worker" }] },
+ Toolbar: { label: "Request actions", items: [{ id: "inspect", label: "Inspect" }, { id: "guide", label: "Guide", href: "#guide" }, { id: "off", label: "Offline", disabled: true }] },
+};
+type Name = keyof typeof defaults;
+async function interact(fn: () => void) { await act(async () => { fn(); flushSync(); }); }
+async function render(name: Name, flavor: "svelte" | "react", extra: Record<string, any> = {}, slotNames: string[] = []) {
+ const target = document.createElement("div"); document.body.append(target); let root: Root | undefined, instance: ReturnType<typeof mount<typeof Fixture>> | undefined;
+ const native = (extra: Record<string, any>) => Object.fromEntries(Object.entries({ ...defaults[name], ...extra }).map(([key, value]) => [key === "className" ? "class" : key.startsWith("on") ? key.toLowerCase() : key, value]));
+ const element = (extra: Record<string, any>) => {
+  const props: Record<string, any> = { ...defaults[name], ...extra };
+  if (name === "SplitView") Object.assign(props, { start: "Before", end: "After" });
+  if (name === "SidebarLayout") Object.assign(props, { sidebar: ({ item, close }: any) => h("div", null, h("button", { onClick: close }, "Close context"), h("a", { href: "#detail" }, `${item?.label ?? "Navigation"} detail`)) });
+  if (!["CheckoutForm", "ShoppingCart", "CategoryFilter", "Filter"].includes(name)) props.children = h("span", null, "Request details");
+  for (const slot of slotNames) props[slot] = ["TaskList", "ProductQuickview"].includes(name) && slot === "actions" ? (context: any) => h("span", {"data-provided-slot":true}, "Caller detail", context.close ? h("button", {onClick:context.close}, "Close via slot") : undefined) : h("span", {"data-provided-slot":true}, "Caller detail");
+  const node = h(react[name] as ComponentType<any>, props);
+  return ["CategoryFilter", "Filter"].includes(name) ? h("form", null, node) : node;
+ };
+ if (flavor === "svelte") { instance = mount(Fixture, { target, props: { name, options: native(extra), slotNames } }); flushSync(); }
+ else { root = createRoot(target); await act(() => root!.render(element(extra))); }
+ cleanups.push(async () => { if (root) await act(() => root!.unmount()); if (instance) await unmount(instance); target.remove(); });
+ return { target, update: async (extra: Record<string, any>) => { if (instance) flushSync(() => instance!.update(native(extra))); else await act(() => root!.render(element(extra))); } };
+}
+for (const name of Object.keys(defaults) as Name[]) it(`renders ${name} as native React SSR without assigning appearance axes`, () => {
+ const html = renderToString(h(react[name] as ComponentType<any>, defaults[name])); expect(html.length).toBeGreaterThan(0); expect(html).not.toMatch(/data-(?:theme|color-scheme|density)=/);
+});
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} App contracts`, () => {
+ for (const name of Object.keys(defaults) as Name[]) it(`mounts ${name} with its required content and updates without losing the root`, async () => {
+  const r = await render(name, flavor), first = r.target.firstElementChild; expect(first).toBeTruthy(); await r.update({ className: "consumer-extension" }); expect(r.target.firstElementChild).toBe(first);
+ });
+ it("dismisses a Pill once and preserves a native link's destination and current token", async () => {
+  const dismiss = vi.fn(), p = await render("Pill", flavor, { onDismiss: dismiss }); await interact(() => p.target.querySelector("button")!.click()); expect(dismiss).toHaveBeenCalledTimes(1);
+  const r = await render("NavItem", flavor, { current: "location" }), link = r.target.querySelector("a")!; expect(link.getAttribute("href")).toBe("#requests"); expect(link.getAttribute("aria-current")).toBe("location");
+  await r.update({ disabled: true }); expect(r.target.querySelector("a")!.hasAttribute("href")).toBe(false);
+ });
+ it("serializes and resets category choices silently, then continues from the reset state", async () => {
+  const changed = vi.fn(), r = await render("CategoryFilter", flavor, { onValueChange: changed }), form = r.target.querySelector("form")!, boxes = [...form.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')];
+  await interact(() => boxes[0]!.click()); await interact(() => boxes[1]!.click()); expect(new FormData(form).getAll("service")).toEqual(["api", "worker"]);
+  await interact(() => form.reset()); await act(() => new Promise(resolve => setTimeout(resolve, 20))); expect(changed).toHaveBeenCalledTimes(2); expect(new FormData(form).getAll("service")).toEqual([]);
+  await interact(() => boxes[1]!.click()); expect(changed.mock.calls.at(-1)?.[0]).toEqual(["worker"]); expect(boxes[2]!.disabled).toBe(true);
+ });
+ it("selects one filter and omits disabled choices from activation", async () => {
+  const changed = vi.fn(), r = await render("Filter", flavor, { onValueChange: changed }), buttons = [...r.target.querySelectorAll("button")];
+  await interact(() => buttons[1]!.click()); expect(new FormData(r.target.querySelector("form")!).get("env")).toBe("stg"); expect(changed).toHaveBeenCalledWith("stg"); expect(buttons[2]!.disabled).toBe(true);
+ });
+ it("updates external checkout data while allowing edits and preserving the native reset baseline", async () => {
+  const r = await render("CheckoutForm", flavor), input = r.target.querySelector("input")!; input.value = "Edited"; expect(new FormData(r.target.querySelector("form")!).get("company")).toBe("Edited");
+  await r.update({ sections: [{ legend: "Billing", fields: [{ name: "company", label: "Company", value: "Updated", required: true }] }] }); expect(r.target.querySelector("input")).toBe(input); expect(r.target.querySelector("input")!.value).toBe("Updated");
+  expect(r.target.querySelector("label")!.htmlFor).toBe(input.id); await interact(() => r.target.querySelector("form")!.reset()); expect(input.value).toBe("RedDB");
+ });
+ it("preserves exact notification counts and never turns a status marker into another focus target", async () => {
+  for (const name of ["SidebarNavigation", "SidebarRail", "BottomNavigation"] as const) { const r = await render(name, flavor), links = [...r.target.querySelectorAll("a")]; expect(links[0]!.getAttribute("aria-label")).toContain("123"); expect(links[0]!.getAttribute("aria-label")).toContain("Connected"); expect(links[0]!.getAttribute("aria-current")).toBe("page"); expect(labelInName(links[0]!), `${name}: ${visibleText(links[0]!)} / ${accessibleName(links[0]!)}`).toBe(true); expect(links[0]!.querySelectorAll("button, a, [tabindex]")).toHaveLength(0); }
+ });
+ it("resizes panes by keyboard within bounds and reports the clamped percentage", async () => {
+  const changed = vi.fn(), r = await render("SplitView", flavor, { onFractionChange: changed }), divider = r.target.querySelector<HTMLElement>('[role="separator"]')!;
+  await interact(() => divider.dispatchEvent(new KeyboardEvent("keydown", { key: "End", bubbles: true, cancelable: true }))); expect(Number(divider.getAttribute("aria-valuenow"))).toBeLessThanOrEqual(90); expect(changed).toHaveBeenCalled();
+  await interact(() => divider.dispatchEvent(new KeyboardEvent("keydown", { key: "Home", bubbles: true, cancelable: true }))); expect(Number(divider.getAttribute("aria-valuenow"))).toBeGreaterThanOrEqual(10);
+ });
+ it("renders task lifecycle, observed progress and a meaningful empty state", async () => {
+  const r = await render("TaskList", flavor); expect(r.target.querySelector('[data-state="blocked"]')?.textContent).toContain("Waiting for a worker"); expect(r.target.querySelector('[role="progressbar"]')?.getAttribute("aria-valuenow")).toBe("40");
+  await r.update({ items: [], emptyDescription: "Run a request to see its progress" }); expect(r.target.textContent).toContain("No tasks"); expect(r.target.textContent).toContain("Run a request");
+ });
+ it("keeps exactly one main landmark across nested layout boundaries", async () => {
+  const r = await render("SidebarLayout", flavor, { main: true }); expect(r.target.querySelectorAll("main")).toHaveLength(1); expect(r.target.querySelector("main")!.id).toBe("main-content");
+ });
+ it("opens a native quickview and returns focus to its named trigger", async () => {
+  const r = await render("ProductQuickview", flavor), trigger = r.target.querySelector("button")!, dialog = r.target.querySelector("dialog")!; trigger.focus(); await interact(() => trigger.click()); expect(dialog.open).toBe(true);
+  await interact(() => dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }))); expect(dialog.open).toBe(false); expect(document.activeElement).toBe(trigger);
+ });
+ it("keeps context-menu commands accessible from Shift+F10 and suppresses disabled commands", async () => {
+  const action = vi.fn(), r = await render("ContextMenu", flavor, { items: [{ id: "inspect", label: "Inspect", onselect: action }, { id: "off", label: "Offline", disabled: true }] }), trigger = r.target.querySelector("button")!; trigger.focus();
+  await interact(() => trigger.dispatchEvent(new KeyboardEvent("keydown", { key: "F10", shiftKey: true, bubbles: true, cancelable: true })));
+  const menu = document.querySelector('[data-context-menu-surface]')!, items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]'); expect(items[1]!.getAttribute("aria-disabled")).toBe("true"); await interact(() => items[0]!.click()); expect(action).toHaveBeenCalledTimes(1);
+ });
+});
+
+const slotCases: Partial<Record<Name, string[]>> = {
+ ActionPanel:["actions"],ApplicationShell:["header","footer"],CardHeading:["actions"],CategoryPreview:["media"],ChatMessage:["actions"],CheckoutForm:["actions"],Incentive:["icon","actions"],ListRow:["leading","trailing"],MultiColumnLayout:["start","end"],NavItem:["icon","trailing"],OrderSummary:["actions"],PageHeading:["context","actions"],ProductFeature:["media","actions"],ProductOverview:["media","actions"],Review:["actions"],ShoppingCart:["actions"],SidebarNavigation:["toolbar"],SidebarPanel:["toolbar","actions","controls","footer"],SidebarRail:["top","bottom"],StoreNavigation:["brand","actions","announcement"],TaskList:["actions"],
+};
+for (const flavor of ["svelte","react"] as const) for (const [name, slots] of Object.entries(slotCases) as [Name,string[]][]) it(`${flavor} ${name} keeps caller content in every named seam`, async () => {
+ const r=await render(name,flavor,{},slots); expect(r.target.querySelectorAll("[data-provided-slot]").length).toBeGreaterThanOrEqual(slots.length);
+});
+
+for (const flavor of ["svelte","react"] as const) describe(`${flavor} optional App content and navigation`,()=>{
+ it("retains custom empty states for products, carts and tasks",async()=>{
+  for(const name of ["ProductList","ShoppingCart","TaskList"] as const){const r=await render(name,flavor,{items:[]},["empty"]);expect(r.target.querySelector("[data-provided-slot]")?.textContent).toBe("Caller detail");}
+ });
+ it("lets a quickview action receive the same close operation while replacing its trigger content",async()=>{
+  const r=await render("ProductQuickview",flavor,{},["trigger","media","actions"]),trigger=r.target.querySelector("button")!;
+  expect(trigger.getAttribute("aria-label")).toBe("Inspect API");await interact(()=>trigger.click());expect(r.target.querySelectorAll("[data-provided-slot]")).toHaveLength(3);
+  await interact(()=>[...r.target.querySelectorAll("button")].find(button=>button.textContent==="Close via slot")!.click());expect(r.target.querySelector("dialog")!.open).toBe(false);
+ });
+ it("keeps a custom speed-dial trigger inside its named button and activates only enabled actions",async()=>{
+  const action=vi.fn(),r=await render("SpeedDial",flavor,{actions:[{id:"create",label:"New request",onselect:action},{id:"locked",label:"Unavailable",disabled:true}]},["trigger"]),trigger=r.target.querySelector("button")!;
+  expect(trigger.querySelector("[data-provided-slot]")).toBeTruthy();await interact(()=>trigger.click());const surface=document.querySelector("[data-popover-surface]")!;
+  expect([...surface.querySelectorAll("button")].find(button=>button.textContent?.trim()==="Unavailable")!.disabled).toBe(true);await interact(()=>[...surface.querySelectorAll("button")].find(button=>button.textContent?.trim()==="New request")!.click());expect(action).toHaveBeenCalledTimes(1);
+ });
+ it("retains an explicit legacy rail while removing closed contextual content from keyboard navigation",async()=>{
+  const r=await render("SidebarLayout",flavor,{panelOpen:false},["rail"]);expect(r.target.querySelector("[data-sidebar-layout-region=rail] [data-provided-slot]")).toBeTruthy();expect(r.target.querySelector("aside")!.hasAttribute("inert") || (r.target.querySelector("aside") as HTMLElement & {inert?:boolean}).inert === true).toBe(true);
+ });
+ it("keeps primary-navigation identity caller-owned while activating a contextual section",async()=>{
+  const action=vi.fn(),r=await render("SidebarLayout",flavor,{navigation:[{id:"requests",label:"Requests",fallback:"RQ",onselect:action},{id:"settings",label:"Settings",href:"#settings"}],currentId:"settings"},["header"]);
+  expect(r.target.querySelector("[data-primary-navigation-header] [data-provided-slot]")).toBeTruthy();await interact(()=>r.target.querySelector<HTMLButtonElement>('[data-sidebar-rail-item="requests"]')!.click());expect(action).toHaveBeenCalledTimes(1);expect(r.target.querySelector('[data-sidebar-rail-item="settings"]')!.getAttribute("aria-current")).toBe("page");expect(r.target.querySelector("[data-primary-navigation-panel]")?.textContent).toContain("Requests detail");
+ });
+ it("activates menubar commands once and keeps disabled entries unavailable",async()=>{
+  const action=vi.fn(),r=await render("Menubar",flavor,{menus:[{id:"file",label:"File",items:[{id:"save",label:"Save",onselect:action},{id:"off",label:"Offline",disabled:true}]}]});const trigger=r.target.querySelector("button")!;trigger.focus();await interact(()=>trigger.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter",bubbles:true,cancelable:true})));if(flavor==="react")await interact(()=>trigger.click());const menu=document.querySelector("[data-menubar-surface]")!,items=menu.querySelectorAll<HTMLElement>('[role="menuitem"]');expect(items[1]!.getAttribute("aria-disabled")).toBe("true");await interact(()=>items[0]!.click());expect(action).toHaveBeenCalledTimes(1);
+ });
+});

package/vendor/ds/kits/app/test/framework-operational.test.ts

@@ -0,0 +1,97 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h, type ComponentType } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import * as ReactKit from "../react/src";
+import Fixture from "./fixtures/Operational.svelte";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+const cases = {
+  TaskCard: {
+    item: {
+      id: "job",
+      title: "Compile",
+      state: "blocked",
+      progress: 100,
+      reason: "Waiting for approval",
+    },
+  },
+  TelemetryRow: {
+    label: "Worker",
+    value: 32,
+    max: 96,
+    stateLabel: "Running",
+    condition: "Locked",
+  },
+  PropertyPanel: {
+    title: "Machine",
+    items: [{ label: "Capacity", value: 96 }],
+  },
+  PhaseSummary: {
+    label: "Release",
+    gates: [
+      { id: "execute", label: "Execute", state: "passed" },
+      { id: "approve", label: "Approve", state: "pending" },
+    ],
+  },
+  PlaybackControls: {
+    label: "Replay",
+    playing: false,
+    position: 2,
+    duration: 10,
+  },
+};
+for (const flavor of ["svelte", "react"])
+  for (const [name, base] of Object.entries(cases))
+    it(`${flavor} ${name} uses independent state and native controls`, async () => {
+      const target = document.createElement("div");
+      document.body.append(target);
+      const changed = vi.fn(),
+        step = vi.fn(),
+        options = { ...base, onplayingchange: changed, onstep: step };
+      let dispose: () => Promise<void>;
+      if (flavor === "svelte") {
+        const app = mount(Fixture, { target, props: { name, options } });
+        flushSync();
+        dispose = () => unmount(app);
+      } else {
+        const root = createRoot(target);
+        await act(() =>
+          root.render(
+            h((ReactKit as Record<string, ComponentType<any>>)[name]!, options),
+          ),
+        );
+        dispose = async () => {
+          await act(() => root.unmount());
+        };
+      }
+      try {
+        if (name === "TaskCard") {
+          expect(target.textContent).toContain("Blocked");
+          expect(target.textContent).toContain("Waiting for approval");
+        }
+        if (name === "TelemetryRow") {
+          expect(target.textContent).toContain("Running");
+          expect(target.textContent).toContain("Locked");
+        }
+        if (name === "PhaseSummary") {
+          expect(
+            target
+              .querySelector("[data-gate-id=approve]")
+              ?.getAttribute("data-state"),
+          ).toBe("pending");
+        }
+        if (name === "PropertyPanel")
+          expect(target.querySelector("dt")?.textContent).toContain("Capacity");
+        if (name === "PlaybackControls") {
+          await act(() => {
+            (target.querySelector("button") as HTMLButtonElement).click();
+            flushSync();
+          });
+          expect(changed).toHaveBeenCalledWith(true);
+          expect(step).not.toHaveBeenCalled();
+        }
+      } finally {
+        await dispose();
+        target.remove();
+      }
+    });

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

@@ -0,0 +1,38 @@
+// Wave 5A: composites that name their items with a heading take the outline
+// level from the caller, so a page outline never skips a level (axe
+// heading-order). The default stays the level each composite always used.
+
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import CategoryPreview from "../src/composites/CategoryPreview.svelte";
+import ProductList from "../src/composites/ProductList.svelte";
+import { render, rendered } from "./mount";
+
+const media = createRawSnippet(() => ({ render: () => '<img src="/desks.jpg" alt="Oak writing desk">' }));
+const items = [
+  { id: "notebook", name: "Dot grid notebook", price: "$18" },
+  { id: "pen", name: "Fountain pen", price: "$42" },
+];
+
+describe("headingLevel", () => {
+  it("defaults CategoryPreview's name to h3 and follows the caller from 2 to 6", () => {
+    const preview = (headingLevel?: 2 | 3 | 4 | 5 | 6) =>
+      rendered(render(CategoryPreview, { name: "Desks", href: "/desks", media, headingLevel }));
+
+    expect(preview().querySelector("[data-heading]")?.tagName).toBe("H3");
+    for (const level of [2, 3, 4, 5, 6] as const) {
+      expect(preview(level).querySelector("[data-heading]")?.tagName).toBe(`H${level}`);
+    }
+  });
+
+  it("defaults every ProductList name to h3 and follows the caller from 2 to 6", () => {
+    const list = (headingLevel?: 2 | 3 | 4 | 5 | 6) =>
+      rendered(render(ProductList, { label: "Stationery", items, headingLevel }));
+
+    expect([...list().querySelectorAll("[data-product-list-name]")].map((name) => name.tagName)).toEqual(["H3", "H3"]);
+    for (const level of [2, 3, 4, 5, 6] as const) {
+      const names = [...list(level).querySelectorAll("[data-product-list-name]")].map((name) => name.tagName);
+      expect(names).toEqual([`H${level}`, `H${level}`]);
+    }
+  });
+});

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

@@ -0,0 +1,60 @@
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import Incentive from "../src/composites/Incentive.svelte";
+import { incentive } from "../src/composites/incentive.variants";
+import MerchandisingSurfacesConsumer from "./fixtures/MerchandisingSurfacesConsumer.svelte";
+import { expectLayoutReadiness } from "./layout-readiness";
+import { classes, classesOf, render, rendered } from "./mount";
+
+describe("Incentive", () => {
+  it("composes canonical MediaObject and SectionHeading contracts into a named value proposition", () => {
+    const icon = createRawSnippet(() => ({
+      render: () => '<svg viewBox="0 0 24 24"><path d="M4 12h16" /></svg>',
+    }));
+    const incentive = rendered(
+      render(Incentive, {
+        title: "Complimentary delivery",
+        description: "Orders over $50 ship free.",
+        level: 3,
+        icon,
+      }),
+    );
+    const heading = incentive.querySelector("[data-section-heading] h3")!;
+
+    expect(incentive.matches("[data-media-object][data-incentive][role=region]")).toBe(true);
+    expect(incentive.getAttribute("aria-labelledby")).toBe(heading.id);
+    expect(heading.textContent).toBe("Complimentary delivery");
+    expect(incentive.textContent).toContain("Orders over $50 ship free.");
+    expect(incentive.querySelector("[data-incentive-icon]")?.getAttribute("aria-hidden")).toBe(
+      "true",
+    );
+  });
+
+  it("preserves focus for caller-owned incentive actions", () => {
+    const root = render(MerchandisingSurfacesConsumer);
+    const action = root.querySelector<HTMLAnchorElement>("[data-incentive] a")!;
+
+    action.focus();
+    expect(document.activeElement).toBe(action);
+  });
+
+  it("routes incentive rhythm through Density and inherits every nested appearance axis", () => {
+    const root = render(MerchandisingSurfacesConsumer);
+    const surface = root.querySelector<HTMLElement>("[data-incentive]")!;
+    const icon = surface.querySelector<HTMLElement>("[data-incentive-icon]")!;
+
+    expect(classes(surface)).toEqual(classesOf(incentive().root()));
+    expect(classes(surface)).toContain("gap-[var(--reddb-spatial-gap-md)]");
+    expect(classes(icon)).toContain("p-[var(--reddb-spatial-inset-sm)]");
+    expect(surface.closest('[data-theme="base"][data-color-scheme="dark"][data-density="compact"]'))
+      .not.toBeNull();
+    expect(surface.hasAttribute("data-theme")).toBe(false);
+    expect(surface.hasAttribute("data-color-scheme")).toBe(false);
+    expect(surface.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("ships showcase, consumer, distributed export, and readiness evidence", () => {
+    expect(render(MerchandisingSurfacesConsumer).querySelector("[data-incentive]")).not.toBeNull();
+    expectLayoutReadiness("incentive", "Incentive");
+  });
+});

package/vendor/ds/kits/app/test/label-in-name.ts

@@ -0,0 +1,43 @@
+// WCAG 2.5.3 (Label in Name) as axe-core 4.14 checks it in
+// `label-content-name-mismatch`, reduced to what a DOM test can see. The
+// visible text is the element's text less `.sr-only` content (aria-hidden text
+// is still on screen, so it counts); both strings are cut into words, with
+// parentheticals and punctuation dropped, and the visible words must run, in
+// order, inside the accessible name. The axe gate proves the rule in a real
+// browser; this lets a unit test pin a component's naming without it.
+
+const words = (text: string): string[] =>
+  text
+    .normalize("NFKD")
+    .replace(/\([^()]*\)/g, " ")
+    .toLowerCase()
+    .split(/[^\p{L}\p{N}]+/u)
+    .filter(Boolean);
+
+/** The text a sighted reader sees on `element`: its text content less `.sr-only` nodes. */
+export function visibleText(element: Element): string {
+  const clone = element.cloneNode(true) as Element;
+  for (const hidden of clone.querySelectorAll(".sr-only")) hidden.remove();
+  return (clone.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+
+/** The accessible name: `aria-labelledby`, then `aria-label`, then the element's text. */
+export function accessibleName(element: Element): string {
+  const labelledby = element.getAttribute("aria-labelledby");
+  if (labelledby) {
+    return labelledby
+      .split(/\s+/)
+      .map((id) => element.ownerDocument.getElementById(id)?.textContent ?? "")
+      .join(" ")
+      .trim();
+  }
+  return (element.getAttribute("aria-label") ?? element.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+
+/** Whether the visible words run, in order, inside the accessible name. */
+export function labelInName(element: Element): boolean {
+  const shown = words(visibleText(element));
+  if (shown.length === 0) return true;
+  const named = words(accessibleName(element));
+  return named.some((_, start) => shown.every((word, offset) => named[start + offset] === word));
+}

package/vendor/ds/kits/app/test/layout-readiness.ts

@@ -0,0 +1,49 @@
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { expect } from "vitest";
+
+const REPO_ROOT = join(import.meta.dirname, "..", "..", "..");
+
+type Readiness = {
+  id: string;
+  baselineDisposition: string;
+  canonicalKit: string;
+  export: string;
+  evidence: Record<string, string[]>;
+};
+
+/** Pin one layout's release evidence at the same seam the producer consumes. */
+export function expectLayoutReadiness(id: string, exported: string): void {
+  const definitions = JSON.parse(
+    readFileSync(join(REPO_ROOT, "scripts", "producer", "readiness.json"), "utf8"),
+  ) as Readiness[];
+  const definition = definitions.find((candidate) => candidate.id === id);
+
+  expect(definition).toMatchObject({
+    id,
+    baselineDisposition: "implemented",
+    // The Baseline classification a definition declares, which is the direction
+    // ("application"); "app" is the subpath it is distributed under, asserted
+    // through the barrel below rather than read back out of the declaration.
+    canonicalKit: "application",
+    export: exported,
+  });
+  for (const paths of Object.values(definition!.evidence)) {
+    expect(paths.length).toBeGreaterThan(0);
+    for (const path of paths) expect(existsSync(join(REPO_ROOT, path)), path).toBe(true);
+  }
+
+  const snapshot = JSON.parse(
+    readFileSync(
+      join(REPO_ROOT, "packages", "baseline", "snapshot", "baseline-v1.json"),
+      "utf8",
+    ),
+  ) as { capabilities: Array<{ id: string; classification: string; status: string }> };
+  expect(snapshot.capabilities.find((capability) => capability.id === id)).toMatchObject({
+    classification: "application",
+    status: "implemented",
+  });
+
+  const barrel = readFileSync(join(REPO_ROOT, "kits", "app", "src", "index.ts"), "utf8");
+  expect(barrel).toContain(`export { default as ${exported} }`);
+}

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

@@ -0,0 +1,54 @@
+// The anti-hardcode lint, asked of THIS Kit.
+//
+// The rule and its counter-examples live with the linter
+// (packages/kit-lint/test/lint.test.ts), because they are facts about the rule.
+// What is a fact about the application Kit is only this: every file it ships is
+// clean, and the command CI runs says so with a zero exit code.
+//
+// This file IS acceptance criterion 2 of issue #7 ("each component's styling
+// resolves through Theme/Tokens variables — the anti-hardcode lint passes on
+// the Kit"), in the same way packages/theme/test/lint.test.ts is the Theme
+// Layer's.
+
+import { spawnSync } from "node:child_process";
+import { join } from "node:path";
+import {
+  lintKitFiles,
+  readInteractionAllowlist,
+  readTypeLedger,
+  readVocabulary,
+  settleInteractionAllowlist,
+  settleTypeLedger,
+} from "@reddb-io/kit-lint";
+import { describe, expect, it } from "vitest";
+import { KIT_ROOT, kitSourceFiles } from "../tools/paths";
+
+describe("anti-hardcode lint", () => {
+  it("passes on every file of the real Kit", () => {
+    const files = kitSourceFiles();
+    expect(files.length).toBeGreaterThan(0);
+    // Type debt the Kit carried when the type rule arrived is deferred by its
+    // ledger (ADR 0025); nothing else is, and no ledger entry may outlive its debt.
+    const outcome = settleTypeLedger(lintKitFiles(files, readVocabulary()), KIT_ROOT, readTypeLedger(KIT_ROOT), files);
+    // Rule 8 (wave 6A): an interactive element that draws its own states is
+    // justified in the Kit's interaction allowlist, which may not outlive it.
+    const interaction = settleInteractionAllowlist(outcome.violations, KIT_ROOT, readInteractionAllowlist(KIT_ROOT), files);
+    expect(interaction.violations).toEqual([]);
+    expect(outcome.stale).toEqual([]);
+    expect(interaction.stale).toEqual([]);
+  });
+});
+
+describe("the lint command", () => {
+  // A rule CI cannot act on is not a contract, so the exit code is asserted
+  // rather than the library's return value. That the command can also FAIL is
+  // the linter's own test to make, against a fixture built to break it.
+  const TSX = join(KIT_ROOT, "node_modules", ".bin", "tsx");
+  const CLI = join(KIT_ROOT, "tools", "lint-cli.ts");
+
+  it("exits zero on the real Kit", () => {
+    const { status, stdout } = spawnSync(TSX, [CLI], { cwd: KIT_ROOT, encoding: "utf8" });
+    expect(stdout).toContain("passed");
+    expect(status).toBe(0);
+  }, 30_000);
+});