@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/base/test/framework-code-actions.test.ts

@@ -0,0 +1,123 @@
+import { mount, unmount, flushSync, tick } from "svelte";
+import { act, createElement as h, createRef, type ComponentType } from "react";
+import { createRoot, hydrateRoot } 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/FrameworkCodeActions.svelte";
+import type { CodeTokenizer } from "../src/code-block.variants";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+const source = 'const request = "<sample>";\n\treturn 42;\n';
+const grammar: CodeTokenizer = { tokenize: code => [...code.matchAll(/const|return|\d+|"[^"]*"|[\s\S]/g)].map(([value]) => ({ value, kind: value === "const" || value === "return" ? "keyword" : /^\d+$/.test(value) ? "number" : value.startsWith('"') ? "string" : "text" })) };
+type Name = "Swap" | "CodeBlock";
+async function render(name: Name, options: Record<string, any> = {}) {
+  const a = document.createElement("div"), b = document.createElement("div"); document.body.append(a, b);
+  const events = { svelte: [] as unknown[], react: [] as unknown[] };
+  const changed = { svelte: vi.fn(next => events.svelte.push(next)), react: vi.fn(next => events.react.push(next)) };
+  const clicked = { svelte: () => events.svelte.push("click"), react: () => events.react.push("click") };
+  const base = { label: "Pin request", code: source, ...options };
+  const svelte = mount(Fixture, { target: a, props: { name, options: base, clicked: clicked.svelte, changed: changed.svelte } }); flushSync();
+  const root = createRoot(b);
+  const element = (next: Record<string, any>) => {
+    const { class: className, faces, ...props } = next;
+    return h(react[name] as ComponentType<any>, { ...props, className, ...(name === "Swap" ? { onClick: clicked.react, onSwappedChange: changed.react } : {}), ...(faces ? { off: [h("span", { key: "icon", "aria-hidden": true }, "◇"), " Pin"], on: [h("span", { key: "icon", "aria-hidden": true }, "◆"), " Pin"] } : {}) });
+  };
+  await act(() => root.render(element(base)));
+  return { a, b, events, changed, update: async (next: Record<string, any>) => { const props = { label: "Pin request", code: source, ...next }; flushSync(() => svelte.update(props)); await act(() => root.render(element(props))); }, cleanup: async () => { await act(() => root.unmount()); await unmount(svelte); a.remove(); b.remove(); } };
+}
+async function interact(fn: () => void | Promise<void>) { await act(async () => { await fn(); flushSync(); await tick(); }); }
+function snapshot(target: HTMLElement) {
+  return [...target.querySelectorAll("*")].map(element => ({ tag: element.tagName, classes: [...element.classList].sort(),
+    attributes: Object.fromEntries([...element.attributes].filter(a => a.name !== "class" && !a.name.startsWith("data-svelte"))
+      .map(a => [a.name, a.name.startsWith("data-") && a.value === "true" ? "" : a.value]).sort()),
+    text: element.children.length ? undefined : element.textContent?.trim() }));
+}
+afterEach(() => { Reflect.deleteProperty(navigator, "clipboard"); vi.unstubAllGlobals(); });
+for (const [name, options] of [
+  ["Swap", {}], ["Swap", { defaultSwapped: true }], ["Swap", { swapped: true, faces: true }], ["Swap", { faces: true, disabled: true, class: "shrink-0" }],
+  ["CodeBlock", {}], ["CodeBlock", { language: "TypeScript", grammar }], ["CodeBlock", { grammar: { tokenize: () => [{ kind: "keyword", value: "lost whitespace" }] } }],
+  ["CodeBlock", { code: "", copyLabel: "Copy query", copiedLabel: "Query copied", copyErrorLabel: "Retry copy", regionLabel: "Request query" }],
+] as [Name, Record<string, any>][]) it(`matches ${name} native semantics and appearance ${JSON.stringify(options)}`, async () => {
+  const r = await render(name, options); try { expect(snapshot(r.b)).toEqual(snapshot(r.a)); } finally { await r.cleanup(); }
+});
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} code and state actions`, () => {
+  it("swaps only one face, preserves its name, and reports click before the next state", async () => {
+    const r = await render("Swap", { faces: true });
+    try {
+      const target = flavor === "react" ? r.b : r.a, button = target.querySelector("button")!;
+      expect(button.type).toBe("button"); expect(button.getAttribute("aria-pressed")).toBe("false");
+      await interact(() => button.click());
+      expect(button.getAttribute("aria-pressed")).toBe("true"); expect(button.textContent).toContain("◆"); expect(button.textContent).not.toContain("◇");
+      expect(button.getAttribute("aria-label")).toBe("Pin request"); expect(r.events[flavor]).toEqual(["click", true]);
+      await interact(() => button.click()); expect(r.events[flavor]).toEqual(["click", true, "click", false]);
+      await r.update({ faces: true, disabled: true }); await interact(() => button.click()); expect(r.events[flavor]).toHaveLength(4);
+    } finally { await r.cleanup(); }
+  });
+  it("keeps the initial default face through unrelated updates", async () => {
+    const r = await render("Swap", { defaultSwapped: true });
+    try {
+      const button = (flavor === "react" ? r.b : r.a).querySelector("button")!;
+      await interact(() => button.click()); expect(button.getAttribute("aria-pressed")).toBe("false");
+      await r.update({ defaultSwapped: true, title: "Inspect request" }); expect(button.getAttribute("aria-pressed")).toBe("false");
+    } finally { await r.cleanup(); }
+  });
+  it("copies exact source, reports failure, permits retry and resets feedback on new source", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined); Object.defineProperty(navigator, "clipboard", { configurable: true, value: { writeText } });
+    const r = await render("CodeBlock", { grammar });
+    try {
+      const target = flavor === "react" ? r.b : r.a, button = target.querySelector("button")!;
+      expect(target.querySelector("code")!.textContent).toBe(source);
+      await interact(() => button.click()); expect(writeText).toHaveBeenCalledExactlyOnceWith(source); expect(button.textContent?.trim()).toBe("Copied");
+      await r.update({ code: "select 1;" }); expect(button.textContent?.trim()).toBe("Copy code");
+      writeText.mockRejectedValueOnce(new Error("denied")); await interact(() => button.click()); expect(button.textContent?.trim()).toBe("Copy failed. Try again.");
+      await interact(() => button.click()); expect(button.textContent?.trim()).toBe("Copied"); expect(writeText).toHaveBeenLastCalledWith("select 1;");
+      Reflect.deleteProperty(navigator, "clipboard"); await interact(() => button.click()); expect(button.textContent?.trim()).toBe("Copy failed. Try again.");
+    } finally { await r.cleanup(); }
+  });
+  it("ignores superseded clipboard completions and completions after source changes or unmount", async () => {
+    const completions: (() => void)[] = [];
+    const writeText = vi.fn(() => new Promise<void>(resolve => completions.push(resolve)));
+    Object.defineProperty(navigator, "clipboard", { configurable: true, value: { writeText } });
+    const r = await render("CodeBlock");
+    const button = (flavor === "react" ? r.b : r.a).querySelector("button")!;
+    await interact(() => button.click()); await r.update({ code: "new source" }); await interact(() => completions.shift()!()); expect(button.textContent?.trim()).toBe("Copy code");
+    await interact(() => button.click()); await interact(() => button.click()); await interact(() => completions.shift()!()); expect(button.textContent?.trim()).toBe("Copy code");
+    await interact(() => completions.shift()!()); expect(button.textContent?.trim()).toBe("Copied");
+    await interact(() => button.click()); await r.cleanup(); await interact(() => completions.shift()!());
+  });
+  it("measures overflowing source changes, gives the region a name and disposes observers", async () => {
+    const disconnects: ReturnType<typeof vi.fn>[] = [];
+    const callbacks: (() => void)[] = [];
+    vi.stubGlobal("ResizeObserver", class { disconnect = vi.fn(); constructor(callback: () => void) { disconnects.push(this.disconnect); callbacks.push(callback); } observe() {} });
+    const r = await render("CodeBlock", { language: "SQL" });
+    const pre = (flavor === "react" ? r.b : r.a).querySelector("pre")!;
+    try {
+      expect(pre.hasAttribute("tabindex")).toBe(false);
+      Object.defineProperty(pre, "scrollWidth", { configurable: true, value: 900 }); Object.defineProperty(pre, "clientWidth", { configurable: true, value: 300 });
+      await interact(() => callbacks.forEach(callback => callback()));
+      expect(pre.tabIndex).toBe(0); expect(pre.getAttribute("role")).toBe("region"); expect(pre.getAttribute("aria-label")).toBe("SQL code");
+      await r.update({ code: "select 1;", regionLabel: "Query" }); expect(pre.getAttribute("aria-label")).toBe("Query");
+      Object.defineProperty(pre, "scrollWidth", { configurable: true, value: 100 });
+      await r.update({ code: "1" }); expect(pre.hasAttribute("tabindex")).toBe(false); expect(pre.hasAttribute("aria-label")).toBe(false);
+    } finally { await r.cleanup(); }
+    expect(disconnects.every(disconnect => disconnect.mock.calls.length === 1)).toBe(true);
+  });
+});
+it("keeps caller-owned React faces until the caller accepts the requested change", async () => {
+  const r = await render("Swap", { swapped: false });
+  try {
+    const button = r.b.querySelector("button")!; await interact(() => button.click());
+    expect(button.getAttribute("aria-pressed")).toBe("false"); expect(r.events.react).toEqual(["click", true]);
+    await r.update({ swapped: true }); expect(button.getAttribute("aria-pressed")).toBe("true");
+  } finally { await r.cleanup(); }
+});
+for (const name of ["Swap", "CodeBlock"] as const) it(`hydrates useful ${name} SSR with native refs and unchanged DOM`, async () => {
+  const target = document.createElement("div"); document.body.append(target);
+  const ref = createRef<any>(), component = h(react[name] as ComponentType<any>, { label: "Pin request", code: source, grammar, ref });
+  target.innerHTML = renderToString(component); const original = target.firstElementChild, errors: unknown[] = [];
+  if (name === "CodeBlock") { expect(target.querySelector("code")!.textContent).toBe(source); expect(target.querySelector('[data-code-token="keyword"]')).not.toBeNull(); expect(target.querySelector("pre")!.hasAttribute("tabindex")).toBe(false); }
+  let root: ReturnType<typeof hydrateRoot>;
+  await act(() => { root = hydrateRoot(target, component, { onRecoverableError: error => errors.push(error) }); });
+  try { expect(target.firstElementChild).toBe(original); expect(ref.current).toBe(original); expect(errors).toEqual([]); }
+  finally { await act(() => root!.unmount()); target.remove(); }
+});

package/vendor/ds/kits/base/test/framework-composition.test.ts

@@ -0,0 +1,91 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h, type ComponentType } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import * as react from "../react/src";
+import { TONES } from "../src/tone";
+import Fixture from "./fixtures/FrameworkComposition.svelte";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+type Scenario = { name: "Link" | "Alert" | "Notification" | "EmptyState" | "MediaObject" | "ListContainer" | "Breadcrumbs" | "BrowserMockup" | "WindowMockup" | "PhoneMockup"; options?: Record<string, unknown>; content?: boolean; rich?: boolean };
+function props({ name, options = {}, content = true, rich }: Scenario) {
+  const { ondismiss, ...native } = options;
+  const common = { ...native, ...(ondismiss ? { onDismiss: ondismiss } : {}), className: "consumer-extra", ...(name === "Breadcrumbs" ? {} : { "data-consumer": "forwarded" }) };
+  if (name === "Breadcrumbs") return common;
+  if (name === "EmptyState") return { ...common, ...(rich ? { media: h("span", { "data-slot": "media" }, "M"), actions: h("button", { type: "button" }, "Create") } : {}) };
+  if (name === "MediaObject") return { ...common, media: h("span", { "data-slot": "media" }, "M"), children: h("a", { href: "/detail", "data-slot": "content" }, "Details") };
+  if (name === "ListContainer") return { ...common, ...(rich ? { header: h("strong", null, "Custom title"), footer: h("button", { type: "button" }, "Create") } : {}), children: h("ul", null, h("li", null, "Destination")) };
+  return { ...common, ...(content ? { children: h("span", { "data-slot": "body" }, "Content") } : {}) };
+}
+async function render(scenario: Scenario) {
+  const a = document.createElement("div"); const b = document.createElement("div"); document.body.append(a, b);
+  const native = (options: Record<string, unknown> = {}) => ({ ...options, class: "consumer-extra", ...(scenario.name === "Breadcrumbs" ? {} : { "data-consumer": "forwarded" }) });
+  const svelte = mount(Fixture, { target: a, props: { ...scenario, options: native(scenario.options) } }); flushSync();
+  const root = createRoot(b);
+  await act(() => root.render(h(react[scenario.name] as ComponentType<any>, props(scenario))));
+  return { a, b, update: async (options: Record<string, unknown>) => {
+    flushSync(() => svelte.update(native(options)));
+    await act(() => root.render(h(react[scenario.name] as ComponentType<any>, props({ ...scenario, options }))));
+  }, cleanup: async () => { await act(() => root.unmount()); await unmount(svelte); a.remove(); b.remove(); } };
+}
+function snapshot(target: HTMLElement) {
+  return [...target.querySelectorAll("*")].map(element => ({ tag: element.tagName, classes: [...element.classList].sort(),
+    attributes: Object.fromEntries([...element.attributes].filter(a => a.name !== "class" && a.name !== "style" && !a.name.startsWith("data-svelte"))
+      .map(a => [a.name, a.name.startsWith("data-") && a.value === "true" ? "" : a.value]).sort()),
+    style: element.getAttribute("style") ? Object.fromEntries([...((element as HTMLElement).style)].sort().map(n => [n, (element as HTMLElement).style.getPropertyValue(n)])) : undefined,
+    text: element.children.length ? undefined : element.textContent?.trim() }));
+}
+const items = [{ id: "home", label: "Home", href: "/" }, { id: "group", label: "Clusters" }, { id: "current", label: "Production", href: "/production", current: true }];
+const scenarios: Scenario[] = [
+  { name: "Link", options: { href: "/destination", target: "_blank", rel: "noreferrer", "aria-label": "Destination", download: "report" } },
+  ...["Alert", "Notification"].flatMap(name => [undefined, ...TONES].flatMap(tone => [false, true].map(content => ({ name: name as "Alert" | "Notification", content, options: { tone, title: "Workspace updated" } })))),
+  { name: "Alert" }, { name: "Alert", content: false },
+  ...["sm", "md"].flatMap(size => [false, true].flatMap(bordered => [false, true].map(rich => ({ name: "EmptyState" as const, rich, options: { title: "No requests", description: "Create a request to begin", hint: "red request new", size, bordered } })))),
+  { name: "EmptyState", options: { title: "No results" } },
+  ...["start", "center", "end"].flatMap(align => ["sm", "md", "lg"].map(gap => ({ name: "MediaObject" as const, options: { align, gap, mediaClass: "media-extra", contentClass: "content-extra" } }))),
+  ...["plain", "outline"].flatMap(variant => ["none", "sm", "md"].flatMap(padding => [false, true].map(rich => ({ name: "ListContainer" as const, rich, options: { title: "Destinations", description: "Pinned regions", variant, padding } })))),
+  ...[false, true, { origin: "https://console.example.com" }].map(structuredData => ({ name: "Breadcrumbs" as const, options: { items, structuredData, label: "Cluster location" } })),
+  { name: "Breadcrumbs", options: { items: [] } },
+  { name: "Breadcrumbs", options: { items: [{ id: "unsafe", label: '</script><img src=x onerror="alert(1)">&\u2028', href: "/?x=1&y=2" }], structuredData: true } },
+  ...["BrowserMockup", "WindowMockup", "PhoneMockup"].flatMap(name => [undefined, 1, 4 / 3, -1, Number.NaN].map(ratio => ({ name: name as "BrowserMockup" | "WindowMockup" | "PhoneMockup", options: { ...(ratio === undefined ? {} : { ratio }), ...(name === "BrowserMockup" ? { address: "https://example.com" } : name === "WindowMockup" ? { title: "Workspace" } : {}) } }))),
+];
+for (const scenario of scenarios) it(`matches ${scenario.name} content, appearance and semantics ${JSON.stringify(scenario.options ?? {})}`, async () => {
+  const r = await render(scenario);
+  try { expect(snapshot(r.b)).toEqual(snapshot(r.a)); } finally { await r.cleanup(); }
+});
+for (const framework of ["svelte", "react"] as const) describe(`${framework} composition behavior`, () => {
+  it("updates Notification urgency and text, then dismisses using its native control", async () => {
+    let dismissals = 0;
+    const r = await render({ name: "Notification", options: { title: "Saved", tone: "success", ondismiss: () => dismissals++ } });
+    try {
+      const target = framework === "react" ? r.b : r.a;
+      expect(target.querySelector('[role="status"]')).not.toBeNull();
+      await r.update({ title: "Request failed", tone: "danger", dismissLabel: "Dismiss error", ondismiss: () => dismissals++ });
+      expect(target.querySelector('[role="alert"]')?.textContent).toContain("Request failed");
+      const button = target.querySelector("button")!; button.focus(); expect(document.activeElement).toBe(button);
+      await act(() => { button.click(); flushSync(); });
+      expect(target.querySelector("[data-notification]")).toBeNull(); expect(dismissals).toBe(1);
+    } finally { await r.cleanup(); }
+  });
+  it("omits an empty Notification detail region", async () => {
+    const r = await render({ name: "Notification", content: false, options: { title: "Saved" } });
+    try { expect((framework === "react" ? r.b : r.a).querySelector('[role="status"] > div')).toBeNull(); } finally { await r.cleanup(); }
+  });
+  it("keeps breadcrumb positions, current page semantics and JSON-LD aligned after updates", async () => {
+    const r = await render({ name: "Breadcrumbs", options: { items, structuredData: { origin: "https://example.com" } } });
+    try {
+      const target = framework === "react" ? r.b : r.a;
+      expect(target.querySelector('[aria-current="page"]')?.tagName).toBe("SPAN");
+      expect(JSON.parse(target.querySelector("script")!.textContent!).itemListElement[0].item).toBe("https://example.com/");
+      await r.update({ items: [{ id: "only", label: "Home", current: true }], structuredData: false });
+      expect(target.querySelectorAll("li")).toHaveLength(1); expect(target.querySelector("a")).toBeNull(); expect(target.querySelector("script")).toBeNull();
+    } finally { await r.cleanup(); }
+  });
+});
+it("safely emits React breadcrumb JSON-LD in server HTML, preserving original labels", () => {
+  const label = '</script><img src=x onerror="alert(1)">';
+  const html = renderToString(h(react.Breadcrumbs, { items: [{ id: "unsafe", label, current: true }], structuredData: true }));
+  const target = document.createElement("div"); target.innerHTML = html;
+  expect(target.querySelectorAll("script")).toHaveLength(1); expect(target.querySelector("img")).toBeNull();
+  expect(JSON.parse(target.querySelector("script")!.textContent!).itemListElement[0].name).toBe(label);
+});

package/vendor/ds/kits/base/test/framework-contracts.test.ts

@@ -0,0 +1,126 @@
+import { mount, unmount, flushSync } from "svelte";
+import { act, createElement as h, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import SvelteField from "./fixtures/FrameworkField.svelte";
+import SvelteTextarea from "./fixtures/FrameworkTextarea.svelte";
+import { Textarea as ReactTextarea } from "../react/src/Textarea";
+import SvelteInput from "./fixtures/FrameworkInput.svelte";
+import { Field as ReactField } from "../react/src/Field";
+import { Input as ReactInput } from "../react/src/Input";
+import type { FieldContractProps } from "../src/core/field";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+let cleanup: (() => Promise<unknown>) | undefined;
+afterEach(async () => { await cleanup?.(); cleanup = undefined; document.body.replaceChildren(); });
+
+async function renderField(framework: "svelte" | "react", props: FieldContractProps) {
+  const target = document.createElement("div"); document.body.append(target);
+  if (framework === "svelte") {
+    const component = mount(SvelteField, { target, props }); flushSync();
+    cleanup = () => unmount(component);
+    return { target, clearError: async () => flushSync(() => component.clearError()) };
+  }
+  const root = createRoot(target);
+  const render = (next: FieldContractProps) => h(ReactField, { ...next, children: control => h(ReactInput<"text">, { ...control, name: "name" }) });
+  await act(() => root.render(render(props)));
+  cleanup = async () => { await act(() => root.unmount()); };
+  return { target, clearError: async () => { await act(() => root.render(render({ ...props, error: undefined }))); } };
+}
+
+type InputType = "text" | "number" | "range";
+async function renderInput(framework: "svelte" | "react", type: InputType, initialValue: string | number | null, changed: (value: unknown) => void) {
+  const target = document.createElement("div"); document.body.append(target);
+  if (framework === "svelte") {
+    const component = mount(SvelteInput, { target, props: { type, initialValue, onValueChange: changed } }); flushSync();
+    cleanup = () => unmount(component);
+    return { target, update: async (value: string | number | null) => flushSync(() => component.setValue(value)) };
+  }
+  let update: (value: string | number | null) => void = () => {};
+  function Control() {
+    const [value, setValue] = useState(initialValue);
+    update = setValue;
+    return h(ReactInput<InputType>, { type, value, min: 0, max: 10, step: "any", "aria-label": "Value", name: "value", onValueChange: next => { changed(next); setValue(next); } });
+  }
+  const root: Root = createRoot(target);
+  await act(() => root.render(h(Control)));
+  cleanup = async () => { await act(() => root.unmount()); };
+  return { target, update: async (value: string | number | null) => { await act(() => update(value)); } };
+}
+
+for (const framework of ["svelte", "react"] as const) describe(`${framework}: shared component contracts`, () => {
+  for (const layout of ["stacked", "inline"] as const) for (const required of [false, true]) for (const messages of [
+    {}, { help: "Use a recognizable name" }, { error: "Choose a name" }, { help: "Use a recognizable name", error: "Choose a name" },
+  ]) it(`Field associates its native control (${layout}, required=${required}, ${JSON.stringify(messages)})`, async () => {
+    const { target, clearError } = await renderField(framework, { label: "Name", layout, required, ...messages });
+    const input = target.querySelector("input")!;
+    expect(input.labels?.[0]?.htmlFor).toBe(input.id);
+    expect(input.labels?.[0]?.textContent).toContain("Name");
+    expect(input.required).toBe(required);
+    expect(input.validity.valueMissing).toBe(required);
+    expect(target.querySelector("[data-field-layout]")?.getAttribute("data-field-layout")).toBe(layout);
+    const descriptions = input.getAttribute("aria-describedby")?.split(" ").map(id => document.getElementById(id)?.textContent) ?? [];
+    expect(descriptions).toEqual([messages.help, messages.error].filter(Boolean));
+    expect(input.getAttribute("aria-invalid")).toBe(messages.error ? "true" : null);
+    expect(target.querySelector('[role="alert"]')?.textContent).toBe(messages.error);
+    const original = input.id;
+    await clearError();
+    expect(input.id).toBe(original);
+    expect(input.getAttribute("aria-invalid")).toBe(null);
+    expect(input.getAttribute("aria-errormessage")).toBe(null);
+    expect(target.querySelector('[role="alert"]')).toBe(null);
+  });
+
+  for (const scenario of [
+    { type: "text", initial: "before", typed: "after", expected: "after" },
+    { type: "number", initial: 0.3, typed: "0.5", expected: 0.5 },
+    { type: "number", initial: 3, typed: "", expected: null },
+    { type: "number", initial: 3, typed: "0", expected: 0 },
+    { type: "range", initial: 2, typed: "3.5", expected: 3.5 },
+  ] as const) it(`Input preserves native value meaning: ${scenario.type} ${JSON.stringify(scenario.typed)}`, async () => {
+    const values: unknown[] = [];
+    const { target } = await renderInput(framework, scenario.type, scenario.initial, value => values.push(value));
+    const input = target.querySelector("input")!;
+    await act(() => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(input, scenario.typed);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      flushSync();
+    });
+    expect(values).toEqual([scenario.expected]);
+    expect(input.value).toBe(scenario.typed);
+  });
+
+  it("Textarea preserves multiline payloads, form values and controlled clearing", async () => {
+    const values: string[] = [];
+    const target = document.createElement("form"); document.body.append(target);
+    let update: (value: string) => Promise<unknown>;
+    if (framework === "svelte") {
+      const component = mount(SvelteTextarea, { target, props: { initialValue: "before", onValueChange: (value: string) => values.push(value) } }); flushSync();
+      cleanup = () => unmount(component);
+      update = async value => flushSync(() => component.setValue(value));
+    } else {
+      const root = createRoot(target);
+      const render = (value: string) => h(ReactTextarea, { value, name: "notes", "aria-label": "Notes", onValueChange: next => { values.push(next); root.render(render(next)); } });
+      await act(() => root.render(render("before")));
+      update = async value => { await act(() => root.render(render(value))); };
+      cleanup = async () => { await act(() => root.unmount()); };
+    }
+    const textarea = target.querySelector("textarea")!;
+    await act(() => {
+      Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")!.set!.call(textarea, "first\nsecond");
+      textarea.dispatchEvent(new Event("input", { bubbles: true })); flushSync();
+    });
+    expect(values).toEqual(["first\nsecond"]);
+    expect(new FormData(target).get("notes")).toBe("first\nsecond");
+    await update("");
+    expect(textarea.value).toBe("");
+    expect(textarea.getAttribute("aria-label")).toBe("Notes");
+  });
+
+  it("Input clears a controlled number when its model becomes null", async () => {
+    const { target, update } = await renderInput(framework, "number", 7, () => {});
+    expect(target.querySelector("input")!.value).toBe("7");
+    await update(null);
+    expect(target.querySelector("input")!.value).toBe("");
+  });
+});

package/vendor/ds/kits/base/test/framework-edit-reveal.test.ts

@@ -0,0 +1,183 @@
+import { mount, unmount, flushSync, tick } from "svelte";
+import { act, createElement as h, createRef, type ComponentType } from "react";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { InlineEdit, Reveal } from "../react/src";
+import Fixture from "./fixtures/FrameworkEditReveal.svelte";
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+type Name = "InlineEdit" | "Reveal";
+async function render(name: Name, options: Record<string, any> = {}) {
+  const a = document.createElement("div"), b = document.createElement("div"); document.body.append(a, b);
+  const changed = { svelte: vi.fn(), react: vi.fn() }, editingChanged = { svelte: vi.fn(), react: vi.fn() };
+  const base = name === "InlineEdit" ? { label: "Project name", value: "Original", ...options } : options;
+  const svelte = mount(Fixture, { target: a, props: { name, options: base, changed: changed.svelte, editingChanged: editingChanged.svelte } }); flushSync();
+  const root = createRoot(b); let current = base;
+  const element = () => {
+    const { class: className, maxlength, onconfirm, ...native } = current;
+    return name === "Reveal" ? h(Reveal, { ...native, className }, h("p", null, "Review details")) : h(InlineEdit, {
+      ...native, label: native.label, value: native.value, className, maxLength: maxlength, onConfirm: onconfirm,
+      onValueChange: value => { changed.react(value); current = { ...current, value }; root.render(element()); },
+      onEditingChange: editing => { editingChanged.react(editing); if (current.editing !== undefined) { current = { ...current, editing }; root.render(element()); } },
+    });
+  };
+  await act(() => root.render(element()));
+  return { a, b, changed, editingChanged,
+    update: async (next: Record<string, any>) => { current = name === "InlineEdit" ? { label: "Project name", value: "Original", ...next } : next; flushSync(() => svelte.update(current)); await act(() => root.render(element())); },
+    cleanup: async () => { await act(() => root.unmount()); await unmount(svelte); a.remove(); b.remove(); } };
+}
+async function interact(fn: () => void | Promise<void>) { await act(async () => { await fn(); flushSync(); await tick(); }); }
+async function input(field: HTMLInputElement, value: string) { await interact(() => { Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(field, value); field.dispatchEvent(new Event("input", { bubbles: true })); }); }
+async function submit(target: HTMLElement) { await interact(() => { target.querySelector("form")!.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true })); }); }
+function snapshot(target: HTMLElement) {
+  const ids = [...target.querySelectorAll("[id]")].map(element => element.id);
+  return [...target.querySelectorAll("*")].map(element => ({ tag: element.tagName, classes: [...element.classList].sort(),
+    attributes: Object.fromEntries([...element.attributes].filter(a => !["class", "value", "style"].includes(a.name) && !a.name.startsWith("data-svelte"))
+      .map(a => [a.name, ["id", "aria-labelledby", "aria-describedby"].includes(a.name) ? `id-${ids.indexOf(a.value)}` : a.name.startsWith("data-") && a.value === "true" ? "" : a.value]).sort()),
+    style: element.getAttribute("style")?.replace(/\s+/g, ""), value: element instanceof HTMLInputElement ? element.value : undefined,
+    text: element.children.length ? undefined : element.textContent?.trim() }));
+}
+const originalAnimate = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "animate");
+afterEach(() => {
+  vi.unstubAllGlobals();
+  if (originalAnimate) Object.defineProperty(HTMLElement.prototype, "animate", originalAnimate);
+  else Reflect.deleteProperty(HTMLElement.prototype, "animate");
+});
+for (const [name, options] of [
+  ["InlineEdit", {}], ["InlineEdit", { value: "", emptyLabel: "No name" }], ["InlineEdit", { disabled: true }],
+  ["InlineEdit", { defaultEditing: true, maxlength: 32 }], ["InlineEdit", { editing: true, value: "Initial draft", required: false }],
+  ["Reveal", {}], ["Reveal", { direction: "left", delay: 120, debug: true, class: "consumer-reveal" }],
+] as [Name, Record<string, any>][]) it(`matches ${name} semantics, appearance and initial state ${JSON.stringify(options)}`, async () => {
+  const r = await render(name, options); try { expect(snapshot(r.b)).toEqual(snapshot(r.a)); } finally { await r.cleanup(); }
+});
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} inline draft transaction`, () => {
+  it("keeps drafts private, cancels with Escape and commits once before returning focus", async () => {
+    const confirm = vi.fn().mockResolvedValue(undefined), r = await render("InlineEdit", { onconfirm: confirm });
+    try {
+      const target = flavor === "react" ? r.b : r.a;
+      await interact(() => target.querySelector<HTMLButtonElement>("button")!.click());
+      let field = target.querySelector("input")!; expect(document.activeElement).toBe(field); expect(field.value).toBe("Original");
+      await input(field, "Discarded"); expect(r.changed[flavor]).not.toHaveBeenCalled();
+      await interact(() => field.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true })));
+      expect(document.activeElement).toBe(target.querySelector("button"));
+      await interact(() => target.querySelector<HTMLButtonElement>("button")!.click()); field = target.querySelector("input")!; expect(field.value).toBe("Original");
+      await input(field, "Accepted"); await submit(target);
+      expect(confirm).toHaveBeenCalledExactlyOnceWith("Accepted"); expect(r.changed[flavor]).toHaveBeenCalledExactlyOnceWith("Accepted");
+      expect(target.textContent).toContain("Accepted"); expect(target.querySelector("input")).toBeNull(); expect(document.activeElement).toBe(target.querySelector("button"));
+      expect(r.editingChanged[flavor].mock.calls.map(call => call[0])).toEqual([true, false, true, false]);
+    } finally { await r.cleanup(); }
+  });
+  it("retains invalid/rejected drafts, names the error, recovers focus and retries", async () => {
+    const confirm = vi.fn().mockRejectedValueOnce(new Error("offline")).mockResolvedValue(undefined);
+    const r = await render("InlineEdit", { defaultEditing: true, onconfirm: confirm, validate: (value: string) => value === "Duplicate" ? "Already used." : undefined });
+    try {
+      const target = flavor === "react" ? r.b : r.a, field = target.querySelector("input")!;
+      for (const [draft, error] of [["   ", "Enter a value."], ["Duplicate", "Already used."]]) {
+        await input(field, draft!); await submit(target); expect(confirm).not.toHaveBeenCalled();
+        const alert = target.querySelector('[role="alert"]')!; expect(alert.textContent).toBe(error); expect(field.getAttribute("aria-describedby")).toBe(alert.id);
+      }
+      await input(field, "Retry me"); await submit(target); expect(field.value).toBe("Retry me"); expect(document.activeElement).toBe(field);
+      expect(field.disabled).toBe(false); expect(target.querySelector('[role="alert"]')!.textContent).toBe("Could not save. Try again."); expect(r.changed[flavor]).not.toHaveBeenCalled();
+      await submit(target); expect(r.changed[flavor]).toHaveBeenCalledExactlyOnceWith("Retry me");
+    } finally { await r.cleanup(); }
+  });
+  it("blocks duplicate saves and ignores confirmations after a newer value or closed session", async () => {
+    const completions: (() => void)[] = [], confirm = vi.fn(() => new Promise<void>(resolve => completions.push(resolve)));
+    const r = await render("InlineEdit", { defaultEditing: true, onconfirm: confirm });
+    try {
+      const target = flavor === "react" ? r.b : r.a, field = target.querySelector("input")!;
+      await input(field, "Pending");
+      await interact(() => { const form = target.querySelector("form")!; form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true })); form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true })); });
+      expect(confirm).toHaveBeenCalledTimes(1); expect(field.disabled).toBe(true);
+      await r.update({ editing: true, value: "Newer committed value", onconfirm: confirm }); expect(field.value).toBe("Newer committed value");
+      await interact(() => completions.shift()!()); expect(r.changed[flavor]).not.toHaveBeenCalled();
+      await input(field, "Another pending draft"); await submit(target); await r.update({ editing: false, value: "Newer committed value", onconfirm: confirm });
+      await interact(() => completions.shift()!()); expect(r.changed[flavor]).not.toHaveBeenCalled(); expect(target.querySelector("input")).toBeNull();
+    } finally { await r.cleanup(); }
+  });
+  it("ignores confirmations after unmount and keeps IME Enter inside the input", async () => {
+    let finish!: () => void; const confirm = vi.fn(() => new Promise<void>(resolve => { finish = resolve; }));
+    const r = await render("InlineEdit", { defaultEditing: true, onconfirm: confirm });
+    const target = flavor === "react" ? r.b : r.a, field = target.querySelector("input")!;
+    const event = new KeyboardEvent("keydown", { key: "Enter", isComposing: true, bubbles: true, cancelable: true });
+    await interact(() => field.dispatchEvent(event)); expect(event.defaultPrevented).toBe(true);
+    await submit(target); await r.cleanup(); await interact(() => finish()); expect(r.changed[flavor]).not.toHaveBeenCalled();
+  });
+});
+for (const name of ["InlineEdit", "Reveal"] as const) it(`hydrates useful ${name} HTML without replacing its native elements`, async () => {
+  const target = document.createElement("div"); document.body.append(target);
+  const ref = createRef<HTMLDivElement>(), props = name === "InlineEdit" ? { label: "Project", value: "Initial draft", defaultEditing: true, ref } : { ref };
+  const element = h((name === "InlineEdit" ? InlineEdit : Reveal) as ComponentType<any>, props, ...(name === "Reveal" ? [h("p", null, "Review details")] : []));
+  target.innerHTML = renderToString(element); const original = target.firstElementChild, errors: unknown[] = [];
+  if (name === "InlineEdit") expect(target.querySelector("input")!.value).toBe("Initial draft");
+  else { expect(target.textContent).toBe("Review details"); expect(target.firstElementChild!.classList).toContain("opacity-100"); }
+  let root: ReturnType<typeof hydrateRoot>;
+  await act(() => { root = hydrateRoot(target, element, { onRecoverableError: error => errors.push(error) }); });
+  try { expect(target.firstElementChild).toBe(original); expect(ref.current).toBe(original); expect(errors).toEqual([]); }
+  finally { await act(() => root!.unmount()); target.remove(); }
+});
+
+function motionPreference(legacy = false) {
+  let matches = false;
+  const listeners = new Set<() => void>();
+  const add = (_name: string, listener: () => void) => listeners.add(listener), remove = (_name: string, listener: () => void) => listeners.delete(listener);
+  vi.stubGlobal("matchMedia", () => ({ get matches() { return matches; }, ...(legacy ? { addListener: (listener: () => void) => listeners.add(listener), removeListener: (listener: () => void) => listeners.delete(listener) } : { addEventListener: add, removeEventListener: remove }) }));
+  return { listeners, set: async (next: boolean) => { await interact(() => { matches = next; listeners.forEach(listener => listener()); }); } };
+}
+for (const flavor of ["svelte", "react"] as const) describe(`${flavor} native entry motion lifecycle`, () => {
+  it("enters on intersection, follows live reduced motion and disconnects observers/listeners", async () => {
+    vi.stubGlobal("CSS", { supports: () => false }); const preference = motionPreference();
+    const observers: { target?: Element; callback: (entries: { isIntersecting: boolean }[]) => void; disconnect: ReturnType<typeof vi.fn> }[] = [];
+    vi.stubGlobal("IntersectionObserver", class { item: typeof observers[number]; constructor(callback: typeof observers[number]["callback"]) { this.item = { callback, disconnect: vi.fn() }; observers.push(this.item); } observe(target: Element) { this.item.target = target; } disconnect() { this.item.disconnect(); } });
+    const r = await render("Reveal", { direction: "right", delay: 180 });
+    try {
+      const element = (flavor === "react" ? r.b : r.a).querySelector<HTMLElement>("[data-reveal]")!, observer = observers.find(item => item.target === element)!;
+      expect(element.hasAttribute("data-reveal-entered")).toBe(false); expect(element.style.getPropertyValue("--reveal-delay")).toBe("180ms");
+      await interact(() => observer.callback([{ isIntersecting: false }])); expect(element.hasAttribute("data-reveal-entered")).toBe(false);
+      await interact(() => observer.callback([{ isIntersecting: true }])); expect(element.hasAttribute("data-reveal-entered")).toBe(true); expect(observer.disconnect).toHaveBeenCalledTimes(1);
+      await preference.set(true); expect(element.getAttribute("data-reveal-motion")).toBe("fade"); expect(element.style.getPropertyValue("--reveal-x")).toBe("0px");
+      await preference.set(false); expect(element.style.getPropertyValue("--reveal-x")).toBe(""); expect(element.hasAttribute("data-reveal-entered")).toBe(true);
+      expect(observers).toHaveLength(2);
+    } finally { await r.cleanup(); }
+    expect(preference.listeners.size).toBe(0); expect(observers.every(observer => observer.disconnect.mock.calls.length === 1)).toBe(true);
+  });
+  it("cancels native timelines on option/preference changes and cleanup", async () => {
+    vi.stubGlobal("CSS", { supports: () => true }); vi.stubGlobal("ViewTimeline", class { constructor(public options: { subject: Element }) {} });
+    const preference = motionPreference();
+    const animations: { target: HTMLElement; frames: Keyframe[]; cancel: ReturnType<typeof vi.fn> }[] = [];
+    Object.defineProperty(HTMLElement.prototype, "animate", { configurable: true, value: function(this: HTMLElement, frames: Keyframe[]) { const item = { target: this, frames, cancel: vi.fn() }; animations.push(item); return item; } });
+    const r = await render("Reveal", { direction: "down" });
+    try {
+      const element = (flavor === "react" ? r.b : r.a).querySelector<HTMLElement>("[data-reveal]")!, animation = animations.find(item => item.target === element)!;
+      expect(element.getAttribute("data-reveal-path")).toBe("css"); expect(animation.frames[0]!.transform).toContain("var(--reddb-spatial-inset-lg)");
+      await r.update({ direction: "left" }); expect(animation.cancel).toHaveBeenCalledTimes(1); expect(animations).toHaveLength(4);
+      await preference.set(true); expect(element.hasAttribute("data-reveal-entered")).toBe(true); expect(element.getAttribute("data-reveal-motion")).toBe("fade");
+      await preference.set(false); expect(animations).toHaveLength(4);
+    } finally { await r.cleanup(); }
+    expect(preference.listeners.size).toBe(0); expect(animations.every(animation => animation.cancel.mock.calls.length === 1)).toBe(true);
+  });
+  it("settles visible content when motion APIs fail or are unavailable, including legacy media listeners", async () => {
+    vi.stubGlobal("CSS", { supports: () => true }); vi.stubGlobal("ViewTimeline", class {});
+    Object.defineProperty(HTMLElement.prototype, "animate", { configurable: true, value: () => { throw new Error("unsupported timeline"); } });
+    const preference = motionPreference(true), r = await render("Reveal");
+    try {
+      const element = (flavor === "react" ? r.b : r.a).querySelector<HTMLElement>("[data-reveal]")!;
+      expect(element.hasAttribute("data-reveal-entered")).toBe(true); await preference.set(true); expect(element.getAttribute("data-reveal-motion")).toBe("fade");
+    } finally { await r.cleanup(); }
+    expect(preference.listeners.size).toBe(0);
+  });
+});
+it("keeps caller-owned React values and editing state until acknowledged", async () => {
+  const target = document.createElement("div"); document.body.append(target); const root = createRoot(target);
+  const changed = vi.fn(), editing = vi.fn();
+  await act(() => root.render(h(InlineEdit, { label: "Project", value: "Original", editing: true, onValueChange: changed, onEditingChange: editing })));
+  try {
+    await input(target.querySelector("input")!, "Proposed"); await submit(target);
+    expect(changed).toHaveBeenCalledExactlyOnceWith("Proposed"); expect(editing).toHaveBeenCalledExactlyOnceWith(false); expect(target.querySelector("input")).not.toBeNull();
+    await act(() => root.render(h(InlineEdit, { label: "Project", value: "Original", editing: false })));
+    expect(target.textContent).toContain("Original"); expect(target.textContent).not.toContain("Proposed");
+  } finally { await act(() => root.unmount()); target.remove(); }
+});
+it("refuses unusable motion delays during SSR", () => {
+  for (const delay of [-1, Infinity, NaN]) expect(() => renderToString(h(Reveal, { delay }, "Details"))).toThrow("Reveal: delay");
+});