@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/app/test/entity-inspector.test.ts

@@ -0,0 +1,97 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { EntityInspector } from "../react/src/EntityInspector";
+import { inspectedEntity } from "../src/core/entity-inspector";
+import Fixture from "./fixtures/EntityInspector.svelte";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+const items = [
+  { id: "a", label: "Canary" },
+  { id: "b", label: "Migration" },
+  { id: "c", label: "Traffic" },
+];
+it("navigates stable ids, rejects duplicates and treats removed selections as empty", () => {
+  expect(inspectedEntity(items, "b")).toMatchObject({
+    index: 1,
+    previous: "a",
+    next: "c",
+  });
+  expect(inspectedEntity(items, "missing")).toMatchObject({
+    index: -1,
+    entity: undefined,
+    previous: undefined,
+    next: undefined,
+  });
+  expect(() => inspectedEntity([items[0]!, items[0]!], "a")).toThrow();
+});
+for (const flavor of ["svelte", "react"])
+  it(`${flavor} requests navigation without owning selection and hides stale details`, async () => {
+    const target = document.createElement("div");
+    document.body.append(target);
+    const changed = vi.fn(),
+      close = vi.fn();
+    let options = {
+      label: "Inspector",
+      items,
+      selected: "a" as string | null,
+      onselectedchange: changed,
+      ondismiss: close,
+    };
+    let update: () => Promise<void>, dispose: () => Promise<void>;
+    if (flavor === "svelte") {
+      const app = mount(Fixture, { target, props: { options } });
+      flushSync();
+      update = async () => {
+        flushSync(() => app.update(options));
+      };
+      dispose = () => unmount(app);
+    } else {
+      const root = createRoot(target);
+      const render = () =>
+        h(
+          EntityInspector,
+          { ...options, actions: h("span", null, "Review controls") },
+          h("p", null, "Caller-owned details"),
+        );
+      await act(() => root.render(render()));
+      update = async () => {
+        await act(() => root.render(render()));
+      };
+      dispose = async () => {
+        await act(() => root.unmount());
+      };
+    }
+    try {
+      expect(target.textContent).toContain("Review controls");
+      const button = (label: string) =>
+        [...target.querySelectorAll("button")].find(
+          (item) => item.textContent?.trim() === label,
+        )!;
+      expect(button("Previous").disabled).toBe(true);
+      await act(() => {
+        button("Next").click();
+        flushSync();
+      });
+      expect(changed).toHaveBeenCalledWith("b");
+      expect(target.querySelector("h2")?.textContent).toBe("Canary");
+      options = { ...options, selected: "c" };
+      await update();
+      expect(button("Next").disabled).toBe(true);
+      await act(() => {
+        button("Close").click();
+        flushSync();
+      });
+      expect(close).toHaveBeenCalledOnce();
+      options = { ...options, selected: "removed" };
+      await update();
+      expect(target.textContent).toContain("Select an item to inspect");
+      expect(target.textContent).not.toContain("Caller-owned details");
+      expect(target.textContent).not.toContain("Review controls");
+      expect(button("Previous").disabled).toBe(true);
+      expect(button("Next").disabled).toBe(true);
+    } finally {
+      await dispose();
+      target.remove();
+    }
+  });

package/vendor/ds/kits/app/test/entity-journey.test.ts

@@ -0,0 +1,100 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { EntityJourney } from "../react/src/EntityJourney";
+import { journeyStages, type JourneyStage } from "../src/core/entity-journey";
+import Fixture from "./fixtures/EntityJourney.svelte";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+const items: JourneyStage[] = [
+  { id: "a", label: "Accepted", state: "complete", elapsed: "4 ms" },
+  {
+    id: "b",
+    label: "Database",
+    state: "blocked",
+    description: "Waiting for lock",
+  },
+  { id: "c", label: "Respond", state: "upcoming" },
+];
+it("keeps observed state independent of order and duration; rejects ambiguous ids and states", () => {
+  expect(journeyStages(items).map((item) => item.state)).toEqual([
+    "complete",
+    "blocked",
+    "upcoming",
+  ]);
+  expect(() => journeyStages([items[0]!, items[0]!])).toThrow();
+  expect(() =>
+    journeyStages([{ ...items[0]!, state: "unknown" as any }]),
+  ).toThrow();
+  expect(
+    journeyStages([{ ...items[0]!, stateLabel: "Concluído" }])[0]!.stateLabel,
+  ).toBe("Concluído");
+});
+for (const flavor of ["react", "svelte"])
+  it(`${flavor} inspects without advancing, preserves failure/skips and supports read-only and empty trails`, async () => {
+    const target = document.createElement("div");
+    document.body.append(target);
+    const changed = vi.fn();
+    let options: any = {
+      label: "Execution",
+      items,
+      selected: "a",
+      onselectedchange: changed,
+    };
+    let update: () => Promise<void>, dispose: () => Promise<void>;
+    if (flavor === "svelte") {
+      const app = mount(Fixture, { target, props: { options } });
+      flushSync();
+      update = async () => {
+        flushSync(() => app.update(options));
+      };
+      dispose = () => unmount(app);
+    } else {
+      const root = createRoot(target);
+      await act(() => root.render(h(EntityJourney, options)));
+      update = async () => {
+        await act(() => root.render(h(EntityJourney, options)));
+      };
+      dispose = async () => {
+        await act(() => root.unmount());
+      };
+    }
+    try {
+      const blocked = target.querySelector<HTMLButtonElement>(
+        "[data-journey-stage=b] button",
+      )!;
+      await act(() => {
+        blocked.click();
+        flushSync();
+      });
+      expect(changed).toHaveBeenLastCalledWith("b");
+      expect(blocked.getAttribute("aria-pressed")).toBe("false");
+      expect(target.querySelector("[aria-current=step]")).toBeNull();
+      options = {
+        ...options,
+        selected: "b",
+        items: [
+          { ...items[0], state: "skipped" },
+          { ...items[1], state: "failed" },
+          { ...items[2], state: "current" },
+        ],
+      };
+      await update();
+      expect(target.textContent).toContain("Failed");
+      expect(target.textContent).toContain("Skipped");
+      expect(
+        target
+          .querySelector("[aria-current=step]")
+          ?.getAttribute("data-journey-stage"),
+      ).toBe("c");
+      options = { ...options, onselectedchange: undefined };
+      await update();
+      expect(target.querySelector("button")).toBeNull();
+      options = { ...options, items: [] };
+      await update();
+      expect(target.textContent).toContain("No stages observed");
+    } finally {
+      await dispose();
+      target.remove();
+    }
+  });

package/vendor/ds/kits/app/test/event-dialect.test.ts

@@ -0,0 +1,183 @@
+// One event dialect (ADR 0026), proven through the application Kit's own
+// components.
+//
+// A value control is `bind:value` plus `onvaluechange(value)`; a disclosure
+// or overlay is `bind:open` plus `onopenchange(open)`; any other bindable
+// state `<state>` reports through `on<state>change`; a discrete event is a
+// lowercase `on<noun>`. The App names the dialect replaced (`onDismiss`,
+// `values`/`onvalueschange`) stay one release as aliases that still work and
+// warn once in development. `onselect` (item activation) is the sanctioned
+// exception and is untouched.
+
+import { flushSync, tick } from "svelte";
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+import {
+  CategoryFilter,
+  CommandPalette,
+  ContextMenu,
+  Menubar,
+  Pill,
+  SplitView,
+  SpeedDial,
+} from "../src/index";
+import { click, render, rendered } from "./mount";
+
+const OPTIONS = [
+  { value: "shirts", label: "Shirts" },
+  { value: "shoes", label: "Shoes" },
+];
+
+async function settle(): Promise<void> {
+  await tick();
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  flushSync();
+}
+
+function press(element: Element, key: string): void {
+  element.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  flushSync();
+}
+
+async function escape(): Promise<void> {
+  press(document.activeElement ?? document.body, "Escape");
+  await settle();
+}
+
+let warn: MockInstance<typeof console.warn>;
+beforeEach(() => {
+  warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+});
+afterEach(() => {
+  warn.mockRestore();
+});
+
+/** The DS's own deprecation warnings (Svelte's dev diagnostics are not the subject here). */
+const warnings = () =>
+  warn.mock.calls.map(([message]) => String(message)).filter((message) => message.startsWith("[reddb "));
+
+describe("the canonical callbacks", () => {
+  it("reports a dismissal through ondismiss", () => {
+    const ondismiss = vi.fn();
+    const pill = rendered(render(Pill, { ondismiss }));
+    click(pill.querySelector<HTMLButtonElement>("[data-pill-dismiss]")!);
+    expect(ondismiss).toHaveBeenCalledTimes(1);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("reports CategoryFilter's active values through onvaluechange", () => {
+    const onvaluechange = vi.fn();
+    const root = rendered(
+      render(CategoryFilter, { legend: "Categories", options: OPTIONS, value: ["shirts"], onvaluechange }),
+    );
+    click(root.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')[1]!);
+    expect(onvaluechange).toHaveBeenLastCalledWith(["shirts", "shoes"]);
+    click(root.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')[0]!);
+    expect(onvaluechange).toHaveBeenLastCalledWith(["shoes"]);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("reports SplitView's fraction through onfractionchange, by keyboard and not when nothing moved", () => {
+    const onfractionchange = vi.fn();
+    const root = rendered(render(SplitView, { fraction: 0.5, onfractionchange }));
+    const divider = root.querySelector<HTMLElement>("[data-split-view-divider]")!;
+    press(divider, "ArrowRight");
+    expect(onfractionchange).toHaveBeenCalledTimes(1);
+    expect(onfractionchange.mock.calls[0]![0]).toBeGreaterThan(0.5);
+    // A key the splitter does not own moves nothing and reports nothing.
+    press(divider, "ArrowUp");
+    expect(onfractionchange).toHaveBeenCalledTimes(1);
+  });
+
+  it("reports open state through onopenchange on CommandPalette, SpeedDial and ContextMenu", async () => {
+    const paletteOpen = vi.fn();
+    const palette = render(CommandPalette, {
+      triggerLabel: "Search commands",
+      contentLabel: "Commands",
+      label: "Command",
+      commands: [{ id: "deploy", label: "Deploy" }],
+      onopenchange: paletteOpen,
+    });
+    palette.querySelector<HTMLButtonElement>("[data-popover-trigger]")!.click();
+    await settle();
+    expect(paletteOpen).toHaveBeenLastCalledWith(true);
+    // Choosing a command closes the palette, and the callback hears that too.
+    const input = document.querySelector<HTMLInputElement>('[role="combobox"]')!;
+    press(input, "ArrowDown");
+    await settle();
+    press(input, "Enter");
+    await settle();
+    expect(paletteOpen).toHaveBeenLastCalledWith(false);
+
+    const dialOpen = vi.fn();
+    const dial = render(SpeedDial, {
+      triggerLabel: "Create",
+      contentLabel: "Create actions",
+      actions: [{ id: "doc", label: "Document" }],
+      onopenchange: dialOpen,
+    });
+    dial.querySelector<HTMLButtonElement>("[data-popover-trigger]")!.click();
+    await settle();
+    expect(dialOpen).toHaveBeenLastCalledWith(true);
+    await escape();
+    expect(dialOpen).toHaveBeenLastCalledWith(false);
+
+    const menuOpen = vi.fn();
+    const menu = render(ContextMenu, {
+      triggerLabel: "Deployment actions",
+      contentLabel: "Deployment actions",
+      items: [{ id: "rename", label: "Rename" }],
+      onopenchange: menuOpen,
+    });
+    menu
+      .querySelector<HTMLElement>("[data-context-menu-trigger]")!
+      .dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, cancelable: true }));
+    await settle();
+    expect(menuOpen).toHaveBeenLastCalledWith(true);
+    await escape();
+    expect(menuOpen).toHaveBeenLastCalledWith(false);
+    expect(warnings()).toEqual([]);
+  });
+
+  it("reports the open menu of a Menubar through onvaluechange", async () => {
+    const onvaluechange = vi.fn();
+    const root = render(Menubar, {
+      label: "Editor commands",
+      menus: [{ id: "file", label: "File", items: [{ id: "new", label: "New file" }] }],
+      onvaluechange,
+    });
+    const trigger = root.querySelector<HTMLElement>("[data-menubar-trigger]")!;
+    trigger.focus();
+    press(trigger, "Enter");
+    await settle();
+    expect(onvaluechange).toHaveBeenLastCalledWith("file");
+    await escape();
+    expect(onvaluechange).toHaveBeenLastCalledWith("");
+  });
+});
+
+describe("the deprecated aliases (one release)", () => {
+  it("still fire, and warn once per name in development", () => {
+    const onDismiss = vi.fn();
+    for (const _ of [1, 2]) {
+      click(rendered(render(Pill, { onDismiss })).querySelector<HTMLButtonElement>("[data-pill-dismiss]")!);
+    }
+    expect(onDismiss).toHaveBeenCalledTimes(2);
+
+    const onvalueschange = vi.fn();
+    const root = rendered(
+      render(CategoryFilter, { legend: "Categories", options: OPTIONS, values: ["shirts"], onvalueschange }),
+    );
+    const boxes = () => root.querySelectorAll<HTMLInputElement>('input[type="checkbox"]');
+    expect([...boxes()].map(({ checked }) => checked)).toEqual([true, false]);
+    click(boxes()[1]!);
+    expect(onvalueschange).toHaveBeenLastCalledWith(["shirts", "shoes"]);
+    // The aliased `values` keeps driving the filter for one release.
+    expect([...boxes()].map(({ checked }) => checked)).toEqual([true, true]);
+
+    expect(warnings()).toEqual([
+      expect.stringMatching(/\[reddb Pill\] onDismiss is deprecated.*ondismiss/),
+      expect.stringMatching(/\[reddb CategoryFilter\] values is deprecated.*bind:value/),
+      expect.stringMatching(/\[reddb CategoryFilter\] onvalueschange is deprecated.*onvaluechange/),
+    ]);
+  });
+});

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

@@ -0,0 +1,161 @@
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { flushSync } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import Filter from "../src/composites/Filter.svelte";
+import { filter } from "../src/composites/filter.variants";
+import FilterContractFailures from "./fixtures/FilterContractFailures.svelte";
+import FilterSurfacesConsumer from "./fixtures/FilterSurfacesConsumer.svelte";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const OPTIONS = [
+  { value: "all", label: "All" },
+  { value: "svelte", label: "Svelte" },
+  { value: "react", label: "React" },
+] as const;
+const REPO_ROOT = join(import.meta.dirname, "..", "..", "..");
+
+function activeStateFailures(root: HTMLElement): string[] {
+  const controls = [...root.querySelectorAll<HTMLButtonElement>("button[aria-pressed]")];
+  return controls.filter((control) => control.ariaPressed === "true").length === 1
+    ? []
+    : ["filter does not announce exactly one active option"];
+}
+
+describe("the deliberately failing Filter fixture", () => {
+  it("diagnoses a filter whose active state is only visual", () => {
+    const broken = rendered(
+      render(FilterContractFailures, { failure: "active-state-is-only-visual" }),
+    );
+
+    expect(activeStateFailures(broken)).toEqual([
+      "filter does not announce exactly one active option",
+    ]);
+  });
+});
+
+describe("Filter", () => {
+  it("is consumer-compiled with CategoryFilter through the distributed app subpath", () => {
+    const scope = rendered(render(FilterSurfacesConsumer));
+
+    expect(scope.matches('[data-theme="application"][data-color-scheme="dark"][data-density="compact"]'))
+      .toBe(true);
+    expect(scope.querySelector("[data-filter]")).not.toBeNull();
+    expect(scope.querySelector("[data-category-filter]")).not.toBeNull();
+  });
+
+  it("composes one named, announced active filter from the canonical ToggleGroup", () => {
+    const root = rendered(
+      render(Filter, {
+        legend: "Framework",
+        options: OPTIONS,
+        value: "svelte",
+        name: "framework",
+      }),
+    );
+    const controls = [...root.querySelectorAll<HTMLButtonElement>("button[aria-pressed]")];
+
+    expect(root.tagName).toBe("FIELDSET");
+    expect(root.querySelector(":scope > legend")?.textContent).toBe("Framework");
+    expect(controls.map((control) => control.ariaPressed)).toEqual(["false", "true", "false"]);
+    expect(controls.map((control) => control.tabIndex)).toEqual([-1, 0, -1]);
+    expect(activeStateFailures(root)).toEqual([]);
+    expect(root.querySelector<HTMLInputElement>('input[name="framework"]')?.value).toBe("svelte");
+  });
+
+  it("moves focus and the announced active state with canonical keyboard behavior", () => {
+    const onvaluechange = vi.fn();
+    const root = rendered(
+      render(Filter, {
+        legend: "Framework",
+        options: OPTIONS,
+        value: "svelte",
+        onvaluechange,
+      }),
+    );
+    const controls = [...root.querySelectorAll<HTMLButtonElement>("button[aria-pressed]")];
+
+    controls[1]!.focus();
+    controls[1]!.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true, cancelable: true }),
+    );
+    flushSync();
+
+    expect(document.activeElement).toBe(controls[2]);
+    expect(controls.map((control) => control.ariaPressed)).toEqual(["false", "false", "true"]);
+    expect(onvaluechange).toHaveBeenCalledWith("react");
+  });
+
+  it("keeps Density tokenized and inherits every nested appearance axis", () => {
+    const scope = document.createElement("div");
+    scope.dataset.theme = "application";
+    scope.dataset.colorScheme = "dark";
+    scope.dataset.density = "compact";
+    const root = render(Filter, { legend: "Framework", options: OPTIONS, value: "all" });
+    scope.append(...root.children);
+    const surface = scope.querySelector<HTMLElement>("[data-filter]")!;
+    const list = surface.querySelector<HTMLElement>("[role='group']")!;
+    const styles = filter();
+
+    for (const name of classesOf(styles.root())) expect(classes(surface)).toContain(name);
+    expect(classes(list)).toContain("gap-[var(--reddb-spatial-gap-sm)]");
+    expect(surface.hasAttribute("data-theme")).toBe(false);
+    expect(surface.hasAttribute("data-color-scheme")).toBe(false);
+    expect(surface.hasAttribute("data-density")).toBe(false);
+  });
+});
+
+describe("filter release readiness", () => {
+  const capabilities = [
+    ["filter", "Filter"],
+    ["category-filter", "CategoryFilter"],
+  ] as const;
+
+  for (const [id, exported] of capabilities) {
+    it(`${id} is implemented, showcased, consumer-compiled, and distributed`, () => {
+      const definitions = JSON.parse(
+        readFileSync(join(REPO_ROOT, "scripts", "producer", "readiness.json"), "utf8"),
+      ) as Array<{
+        id: string;
+        baselineDisposition: string;
+        canonicalKit: string;
+        export: string;
+        evidence: Record<string, string[]>;
+      }>;
+      const definition = definitions.find((candidate) => candidate.id === id);
+
+      expect(definition).toMatchObject({
+        id,
+        baselineDisposition: "implemented",
+        canonicalKit: "application",
+        export: exported,
+      });
+      expect(Object.keys(definition!.evidence).sort()).toEqual([
+        "accessibility",
+        "appearance",
+        "behavior",
+        "consumerCompilation",
+        "documentation",
+        "showcase",
+      ]);
+      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/fixtures/ApplicationLayoutsConsumer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import {
+    ApplicationShell,
+    MultiColumnLayout,
+    SidebarLayout,
+  } from "@reddb-io/design-system/app";
+</script>
+
+<div data-theme="base" data-color-scheme="dark" data-density="compact">
+  <ApplicationShell aria-label="Deployment application">
+    {#snippet header()}<a href="/">Product</a>{/snippet}
+    {#snippet children()}
+      <SidebarLayout mainId="deployment-content" sidebarLabel="Deployment navigation">
+        {#snippet sidebar()}<a href="/deployments">Deployments</a>{/snippet}
+        {#snippet children()}
+          <MultiColumnLayout>
+            {#snippet start()}<button type="button">Filters</button>{/snippet}
+            {#snippet children()}<button type="button">Deploy</button>{/snippet}
+            {#snippet end()}<button type="button">Inspect</button>{/snippet}
+          </MultiColumnLayout>
+        {/snippet}
+      </SidebarLayout>
+    {/snippet}
+    {#snippet footer()}Status{/snippet}
+  </ApplicationShell>
+</div>

package/vendor/ds/kits/app/test/fixtures/ApplicationLayoutsContractFailures.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    failure: "density-frozen-shell" | "sidebar-without-main";
+  }
+
+  const { failure }: Props = $props();
+</script>
+
+{#if failure === "density-frozen-shell"}
+  <div data-broken-application-shell class="flex min-h-screen flex-col p-4">
+    <header>Product navigation</header>
+    <main>Workspace</main>
+  </div>
+{:else}
+  <div data-broken-sidebar-layout class="grid grid-cols-2 gap-4">
+    <aside aria-label="Workspace navigation">Navigation</aside>
+    <div data-broken-sidebar-main>Workspace</div>
+  </div>
+{/if}

package/vendor/ds/kits/app/test/fixtures/CommandPaletteConsumer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import {
+    CommandPalette,
+    type CommandPaletteCommand,
+  } from "@reddb-io/design-system/app";
+
+  let selected = $state("none");
+  const commands: readonly CommandPaletteCommand[] = [
+    { id: "settings", label: "Open settings", onselect: () => (selected = "settings") },
+    { id: "deploy", label: "Deploy application", onselect: () => (selected = "deploy") },
+  ];
+</script>
+
+<div data-theme="base" data-color-scheme="dark" data-density="compact" data-motion="reduced">
+  <CommandPalette
+    triggerLabel="Search commands"
+    contentLabel="Global commands"
+    label="Command"
+    {commands}
+  />
+  <output aria-live="polite">Selected command: {selected}</output>
+</div>

package/vendor/ds/kits/app/test/fixtures/CommandPaletteContractFailures.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props {
+    failure: "focus-not-restored";
+  }
+
+  const { failure }: Props = $props();
+  let open = $state(false);
+</script>
+
+{#if failure === "focus-not-restored"}
+  <button type="button" data-broken-palette-trigger onclick={() => (open = true)}>
+    Search commands
+  </button>
+  {#if open}
+    <div role="dialog" aria-label="Commands">
+      <input aria-label="Command" />
+      <button type="button" data-broken-command onclick={() => (open = false)}>Open settings</button>
+    </div>
+  {/if}
+{/if}

package/vendor/ds/kits/app/test/fixtures/CommandSurfaceContractFailures.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  interface Props {
+    failure: "pointer-only-context-menu" | "toolbar-without-roving-focus";
+  }
+
+  let { failure }: Props = $props();
+</script>
+
+{#if failure === "pointer-only-context-menu"}
+  <div
+    data-context-target
+    role="region"
+    aria-label="Pointer-only context target"
+    oncontextmenu={(event) => event.preventDefault()}
+  >
+    Right-click for actions
+  </div>
+{:else}
+  <div role="toolbar" aria-label="Formatting">
+    <button type="button">Bold</button>
+    <button type="button">Italic</button>
+    <button type="button">Underline</button>
+  </div>
+{/if}

package/vendor/ds/kits/app/test/fixtures/CommerceContractFailures.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  let { failure }: { failure: "checkout-error-is-unassociated" | "cart-total-is-silent" } =
+    $props();
+</script>
+
+{#if failure === "checkout-error-is-unassociated"}
+  <form data-broken-checkout>
+    <label for="postal-code">Postal code</label>
+    <input id="postal-code" name="postalCode" aria-invalid="true" />
+    <p id="postal-code-error" role="alert">Enter a postal code.</p>
+  </form>
+{:else}
+  <form data-broken-cart>
+    <p>Cart total</p>
+    <output>$48.00</output>
+  </form>
+{/if}