@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/app/test/sidebar-rail.test.ts

@@ -0,0 +1,320 @@
+import { createRawSnippet, flushSync, tick } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import {
+  SidebarLayout,
+  SidebarRail,
+  sidebarLayout,
+  sidebarRail,
+  type SidebarRailItem,
+} from "../src/index";
+import { labelInName } from "./label-in-name";
+import { classes, classesOf, render, rendered } from "./mount";
+
+const snippet = (html: string) => createRawSnippet(() => ({ render: () => html }));
+
+const ITEMS: readonly SidebarRailItem[] = [
+  { id: "acme", label: "Acme workspace", fallback: "AC" },
+  { id: "orbit", label: "Orbit workspace", fallback: "OR" },
+  { id: "add", label: "Add workspace", fallback: "+" },
+];
+
+async function settle(): Promise<void> {
+  await tick();
+  flushSync();
+}
+
+describe("SidebarRail", () => {
+  it("names every icon-only control and roves focus with vertical arrow keys", async () => {
+    const root = render(SidebarRail, {
+      label: "Organizations",
+      items: ITEMS,
+      currentId: "acme",
+    });
+    const rail = root.querySelector<HTMLElement>("nav[data-sidebar-rail]")!;
+    const controls = [...rail.querySelectorAll<HTMLButtonElement>("[data-sidebar-rail-item]")];
+
+    expect(rail.getAttribute("aria-label")).toBe("Organizations");
+    expect(controls.map((control) => control.getAttribute("aria-label"))).toEqual([
+      "AC, Acme workspace",
+      "OR, Orbit workspace",
+      "Add workspace",
+    ]);
+    expect(controls.map((control) => control.tabIndex)).toEqual([0, -1, -1]);
+
+    controls[0]!.focus();
+    controls[0]!.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true, cancelable: true }),
+    );
+    await settle();
+
+    expect(document.activeElement).toBe(controls[1]);
+    expect(controls.map((control) => control.tabIndex)).toEqual([-1, 0, -1]);
+    expect(document.body.querySelector('[role="tooltip"]')?.textContent).toBe("Orbit workspace");
+  });
+
+  it("keeps native destinations in the same roving focus order as section buttons", async () => {
+    const root=render(SidebarRail,{label:"Primary",currentId:"home",items:[{id:"home",label:"Home",href:"/home"},{id:"users",label:"Users"},{id:"reports",label:"Reports",href:"/reports",disabled:true}]});
+    const entries=[...root.querySelectorAll<HTMLElement>("[data-sidebar-rail-item]")];
+    expect(entries.map(entry=>entry.tagName)).toEqual(["A","BUTTON","A"]);
+    expect(entries.map(entry=>entry.tabIndex)).toEqual([0,-1,-1]);
+    entries[0]!.focus();entries[0]!.dispatchEvent(new KeyboardEvent("keydown",{key:"ArrowDown",bubbles:true,cancelable:true}));await settle();
+    expect(document.activeElement).toBe(entries[1]);
+    expect(entries[2]!.hasAttribute("href")).toBe(false);
+  });
+
+  it("leads a tile's name with the initials it shows (WCAG 2.5.3, Label in Name)", () => {
+    const root = render(SidebarRail, {
+      label: "Organizations",
+      items: [
+        { id: "reddb", label: "RedDB", fallback: "RD" },
+        { id: "derived", label: "Northstar" },
+        { id: "held", label: "QA lab", fallback: "QA" },
+        { id: "add", label: "Add organization", fallback: "+" },
+      ],
+    });
+    const controls = [...root.querySelectorAll<HTMLButtonElement>("[data-sidebar-rail-item]")];
+
+    expect(controls.map((control) => control.getAttribute("aria-label"))).toEqual([
+      "RD, RedDB",
+      "NO, Northstar",
+      "QA lab",
+      "Add organization",
+    ]);
+    for (const control of controls) expect(labelInName(control), control.getAttribute("aria-label")!).toBe(true);
+    // The tile still shows only the initials; the label stays the Tooltip content.
+    expect(controls[0]!.textContent?.trim()).toBe("RD");
+  });
+
+  it("shows labels below faces and separates groups without adding focus stops", async () => {
+    const root = render(SidebarRail, { label: "Areas", showLabels: true, items: [
+      { id: "users", label: "Users" },
+      { id: "workspaces", label: "Workspaces", separatorBefore: true, disabled: true },
+      { id: "settings", label: "Settings", separatorBefore: true },
+    ] });
+    expect(root.querySelectorAll("[data-sidebar-rail-label]")).toHaveLength(3);
+    expect(root.querySelectorAll('[role="separator"]')).toHaveLength(2);
+    const buttons = [...root.querySelectorAll<HTMLButtonElement>("[data-sidebar-rail-item]")];
+    expect(buttons.filter(button => !button.disabled && button.tabIndex === 0)).toHaveLength(1);
+    buttons[0]!.focus();
+    buttons[0]!.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true, cancelable: true }));
+    await settle();
+    expect(document.activeElement).toBe(buttons[2]);
+    for (const button of buttons) expect(labelInName(button)).toBe(true);
+  });
+
+  it("emits the selected id without taking ownership of organization state", () => {
+    const onselect = vi.fn();
+    const root = render(SidebarRail, {
+      label: "Organizations",
+      items: ITEMS,
+      currentId: "acme",
+      onselect,
+    });
+    const controls = [...root.querySelectorAll<HTMLButtonElement>("[data-sidebar-rail-item]")];
+
+    expect(controls[0]!.getAttribute("aria-pressed")).toBe("true");
+    expect(controls[1]!.getAttribute("aria-pressed")).toBe("false");
+
+    controls[1]!.click();
+    flushSync();
+
+    expect(onselect).toHaveBeenCalledOnce();
+    expect(onselect).toHaveBeenCalledWith("orbit");
+    expect(controls[0]!.getAttribute("aria-pressed")).toBe("true");
+    expect(controls[1]!.getAttribute("aria-pressed")).toBe("false");
+  });
+
+  it("portals a middle-region tooltip beyond the rail overflow container", () => {
+    const root = render(SidebarRail, {
+      label: "Organizations",
+      items: ITEMS,
+      currentId: "acme",
+    });
+    const middle = root.querySelector<HTMLElement>('[data-sidebar-rail-region="middle"]')!;
+    middle.querySelector<HTMLButtonElement>('[data-sidebar-rail-item="orbit"]')!.focus();
+    flushSync();
+
+    expect(middle.querySelector('[role="tooltip"]')).toBeNull();
+    expect(document.body.querySelector<HTMLElement>('[role="tooltip"]')?.textContent).toBe(
+      "Orbit workspace",
+    );
+  });
+
+  it("keeps the selected tile's focus ring inside the scrolling middle region", () => {
+    const root = render(SidebarRail, {
+      label: "Organizations",
+      items: ITEMS,
+      currentId: "orbit",
+    });
+    const middle = root.querySelector<HTMLElement>('[data-sidebar-rail-region="middle"]')!;
+    const selected = middle.querySelector<HTMLElement>(
+      '[data-sidebar-rail-item="orbit"]',
+    )!;
+
+    expect(classes(middle).has("overflow-y-auto")).toBe(true);
+    expect(selected.getAttribute("aria-pressed")).toBe("true");
+    expect(classes(selected).has("aria-pressed:border-foreground")).toBe(true);
+    expect(classes(selected).has("aria-pressed:border-primary")).toBe(false);
+    // The ink focus outline (ADR 0023), drawn inside the tile: an outline
+    // outside it would be clipped by the scroll region on both sides.
+    expect(classes(selected).has("focus-visible:outline-focus")).toBe(true);
+    expect(classes(selected).has("focus-visible:-outline-offset-2")).toBe(true);
+  });
+
+  it("marks the selected tile with a neutral surface and a start-edge Brand bar, never a red fill or outline", () => {
+    const root = render(SidebarRail, {
+      label: "Organizations",
+      items: ITEMS,
+      currentId: "orbit",
+    });
+    for (const item of root.querySelectorAll<HTMLElement>("[data-sidebar-rail-item]")) {
+      const itemClasses = classes(item);
+      // Every tile carries the same 2px start edge, so selection moves nothing.
+      expect(itemClasses.has("border-s-2")).toBe(true);
+      expect(itemClasses.has("border-transparent")).toBe(true);
+      expect(itemClasses.has("aria-pressed:bg-foreground/10")).toBe(true);
+      expect(itemClasses.has("aria-pressed:text-foreground")).toBe(true);
+      expect([...itemClasses].some((name) => /(?:^|:)bg-primary(?:\/|$)/.test(name))).toBe(false);
+      expect([...itemClasses].some((name) => /(?:^|:)(?:ring|outline)-primary$/.test(name) && !name.startsWith("focus-visible:"))).toBe(false);
+      expect(itemClasses.has("border")).toBe(false);
+    }
+  });
+
+  it("keeps rail, tile, and gap dimensions live on Density roles", () => {
+    const rail = rendered(
+      render(SidebarRail, { label: "Organizations", items: ITEMS, currentId: "acme" }),
+    );
+    const list = rail.querySelector<HTMLElement>("[data-sidebar-rail-items]")!;
+    const item = rail.querySelector<HTMLElement>("[data-sidebar-rail-item]")!;
+
+    expect(classes(rail)).toEqual(classesOf(sidebarRail().root()));
+    expect(
+      classes(rail).has(
+        "w-[calc(var(--reddb-spatial-control-height-md)+2*var(--reddb-spatial-inset-sm))]",
+      ),
+    ).toBe(true);
+    expect(classes(list).has("gap-[var(--reddb-spatial-gap-md)]")).toBe(true);
+    expect(classes(item).has("size-[var(--reddb-spatial-control-height-md)]")).toBe(true);
+    expect(rail.hasAttribute("data-density")).toBe(false);
+  });
+
+  it("keeps explicit top, middle, and bottom regions in one navigation landmark", () => {
+    const rail = rendered(
+      render(SidebarRail, {
+        label: "Application rail",
+        items: ITEMS,
+        currentId: "acme",
+        top: snippet('<a href="/" aria-label="Home">Brand</a>'),
+        bottom: snippet('<button type="button" aria-label="Account">JD</button>'),
+      }),
+    );
+
+    expect([...rail.children].map((region) => region.getAttribute("data-sidebar-rail-region")))
+      .toEqual(["top", "middle", "bottom"]);
+    expect(rail.querySelector('[data-sidebar-rail-region="top"] a')?.getAttribute("href"))
+      .toBe("/");
+    expect(rail.querySelector('[data-sidebar-rail-region="bottom"] button')?.getAttribute("aria-label"))
+      .toBe("Account");
+  });
+});
+
+describe("the double-sidebar composition", () => {
+  it.each([
+    {
+      railOpen: true,
+      panelOpen: true,
+      columns:
+        "md:grid-cols-[auto_minmax(12rem,1fr)_minmax(0,3fr)]",
+    },
+    {
+      railOpen: true,
+      panelOpen: false,
+      columns:
+        "md:grid-cols-[auto_0_minmax(0,1fr)]",
+    },
+    {
+      railOpen: false,
+      panelOpen: true,
+      columns: "md:grid-cols-[0_minmax(12rem,1fr)_minmax(0,3fr)]",
+    },
+    {
+      railOpen: false,
+      panelOpen: false,
+      columns: "md:grid-cols-[0_0_minmax(0,1fr)]",
+    },
+  ])(
+    "reflows content when rail open is $railOpen and panel open is $panelOpen",
+    ({ railOpen, panelOpen, columns }) => {
+      const layout = rendered(
+        render(SidebarLayout, {
+          rail: snippet('<nav aria-label="Organizations">Rail</nav>'),
+          sidebar: snippet('<nav aria-label="Workspace">Panel</nav>'),
+          railOpen,
+          panelOpen,
+          children: snippet("<h1>Dashboard</h1>"),
+        }),
+      );
+      const rail = layout.querySelector<HTMLElement>("[data-sidebar-layout-region=rail]")!;
+
+      expect(layout.getAttribute("data-rail-open")).toBe(String(railOpen));
+      expect(layout.getAttribute("data-panel-open")).toBe(String(panelOpen));
+      expect(classes(layout).has(columns)).toBe(true);
+      expect(classes(layout).has("transition-[grid-template-columns]")).toBe(true);
+      expect(classes(layout).has("motion-reduce:transition-none")).toBe(true);
+      expect(classes(rail).has("md:w-0")).toBe(!railOpen);
+    },
+  );
+
+  it("pairs rail and panel navigation while exposing the panel as a mobile drawer", () => {
+    const layout = rendered(
+      render(SidebarLayout, {
+        rail: snippet('<nav aria-label="Organizations">Rail</nav>'),
+        sidebar: snippet('<nav aria-label="Workspace">Panel</nav>'),
+        panelOpen: true,
+        children: snippet("<h1>Dashboard</h1>"),
+      }),
+    );
+    const panel = layout.querySelector<HTMLElement>("[data-sidebar-layout-region=sidebar]")!;
+
+    expect([...layout.querySelectorAll("nav")].map((nav) => nav.getAttribute("aria-label")))
+      .toEqual(["Organizations", "Workspace"]);
+    expect(layout.getAttribute("data-sidebar-layout-mode")).toBe("rail-panel");
+    expect(layout.getAttribute("data-panel-open")).toBe("true");
+    expect(classes(layout)).toEqual(
+      classesOf(sidebarLayout({ side: "start", rail: true, panelOpen: true }).root()),
+    );
+    expect(classes(panel).has("max-md:fixed")).toBe(true);
+    expect(panel.getAttribute("data-mobile-presentation")).toBe("drawer");
+  });
+
+  it("removes and restores the desktop panel track without motion dependence", () => {
+    const layout = (panelOpen: boolean) =>
+      rendered(
+        render(SidebarLayout, {
+          rail: snippet('<nav aria-label="Organizations">Rail</nav>'),
+          sidebar: snippet('<nav aria-label="Workspace">Panel</nav>'),
+          panelOpen,
+          children: snippet("<h1>Dashboard</h1>"),
+        }),
+      );
+    const closed = layout(false);
+    const open = layout(true);
+    const closedPanel = closed.querySelector<HTMLElement>(
+      "[data-sidebar-layout-region=sidebar]",
+    )!;
+
+    expect(classes(closed).has("transition-[grid-template-columns]")).toBe(true);
+    expect(classes(closed).has("motion-reduce:transition-none")).toBe(true);
+    expect(
+      classes(closed).has(
+        "md:grid-cols-[auto_0_minmax(0,1fr)]",
+      ),
+    ).toBe(true);
+    expect(classes(closedPanel).has("md:w-0")).toBe(true);
+    expect(
+      classes(open).has(
+        "md:grid-cols-[auto_minmax(12rem,1fr)_minmax(0,3fr)]",
+      ),
+    ).toBe(true);
+  });
+});

package/vendor/ds/kits/app/test/speed-dial.test.ts

@@ -0,0 +1,53 @@
+import { flushSync, tick } from "svelte";
+import { describe, expect, it } from "vitest";
+import { SpeedDial, speedDial, type SpeedDialAction } from "../src/index";
+import { classes, classesOf, render } from "./mount";
+
+const ACTIONS: readonly SpeedDialAction[] = [
+  { id: "note", label: "New note" },
+  { id: "upload", label: "Upload", href: "/upload" },
+];
+
+async function settle(): Promise<void> {
+  await tick();
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  flushSync();
+}
+
+describe("the application SpeedDial", () => {
+  it("opens its actions in the canonical Popover focus lifecycle", async () => {
+    const root = render(SpeedDial, {
+      triggerLabel: "Create",
+      contentLabel: "Create actions",
+      actions: ACTIONS,
+    });
+    const trigger = root.querySelector<HTMLButtonElement>("[data-popover-trigger]")!;
+    expect(trigger.getAttribute("aria-haspopup")).toBe("dialog");
+    trigger.focus();
+    trigger.click();
+    await settle();
+
+    const surface = document.querySelector<HTMLElement>("[data-popover-surface]")!;
+    const actions = [...surface.querySelectorAll<HTMLElement>("[data-speed-dial-action]")];
+    expect(actions).toHaveLength(2);
+    expect(document.activeElement).toBe(actions[0]);
+    expect(actions[1]!.tagName).toBe("A");
+  });
+
+  it("leaves arrangement local while exposing Density-aware action appearance", async () => {
+    const root = render(SpeedDial, {
+      triggerLabel: "Create",
+      contentLabel: "Create actions",
+      actions: ACTIONS,
+      size: "sm",
+      side: "top",
+      align: "end",
+    });
+    root.querySelector<HTMLButtonElement>("[data-popover-trigger]")!.click();
+    await settle();
+
+    const surface = document.querySelector<HTMLElement>("[data-popover-surface]")!;
+    expect(classes(surface)).toEqual(classesOf(speedDial({ size: "sm" }).content()));
+    expect(classes(surface.querySelector("[data-speed-dial-action]")!).has("h-[var(--reddb-spatial-control-height-sm)]")).toBe(true);
+  });
+});

package/vendor/ds/kits/app/test/split-view.behavior.test.ts

@@ -0,0 +1,137 @@
+// SplitView's behavior module, tested without a browser.
+//
+// This is the half of the component that is worth being paranoid about: a
+// divider is arithmetic, and every way a split goes wrong — a pane collapsed
+// to nothing, a NaN width the browser silently drops, a page that stops
+// scrolling because the separator ate the arrow keys — is a case in one of
+// these four functions. None of them needs a DOM to be wrong, so none of them
+// needs one to be checked.
+
+import { describe, expect, it } from "vitest";
+import {
+  SPLIT_BOUNDS,
+  SPLIT_ORIENTATIONS,
+  SPLIT_STEP,
+  clampFraction,
+  fractionAt,
+  fractionForKey,
+  percentOf,
+  separatorOrientation,
+} from "../src/primitives/split-view.behavior";
+
+describe("clampFraction", () => {
+  it("leaves a fraction inside the bounds alone", () => {
+    expect(clampFraction(0.5)).toBe(0.5);
+    expect(clampFraction(0.25)).toBe(0.25);
+  });
+
+  it("stops either pane collapsing to nothing", () => {
+    expect(clampFraction(0)).toBe(SPLIT_BOUNDS.min);
+    expect(clampFraction(1)).toBe(SPLIT_BOUNDS.max);
+    expect(clampFraction(-3)).toBe(SPLIT_BOUNDS.min);
+    expect(clampFraction(12)).toBe(SPLIT_BOUNDS.max);
+  });
+
+  it("takes the caller's own bounds", () => {
+    expect(clampFraction(0.05, { min: 0.02, max: 0.5 })).toBe(0.05);
+    expect(clampFraction(0.9, { min: 0.02, max: 0.5 })).toBe(0.5);
+  });
+
+  it("resolves a fraction that is not a number to the midpoint", () => {
+    // NaN would reach the DOM as a style the browser drops, leaving a split
+    // that is silently unsplit — worse than a divider in the wrong place.
+    expect(clampFraction(Number.NaN)).toBe(0.5);
+    expect(clampFraction(Number.POSITIVE_INFINITY)).toBe(0.5);
+  });
+
+  it("reads bounds given the wrong way round rather than inverting the split", () => {
+    expect(clampFraction(0.9, { min: 0.8, max: 0.2 })).toBe(0.8);
+  });
+});
+
+describe("fractionAt", () => {
+  it("reads a pointer offset as a share of the container", () => {
+    expect(fractionAt(50, 200)).toBe(0.25);
+    expect(fractionAt(160, 200)).toBe(0.8);
+  });
+
+  it("holds the result inside the bounds", () => {
+    expect(fractionAt(0, 200)).toBe(SPLIT_BOUNDS.min);
+    expect(fractionAt(400, 200)).toBe(SPLIT_BOUNDS.max);
+  });
+
+  it("refuses a container it cannot measure", () => {
+    // A hidden container, or one measured before layout, reports zero — and a
+    // drag that cannot be measured must leave the divider where it is.
+    expect(fractionAt(50, 0)).toBeNull();
+    expect(fractionAt(50, -10)).toBeNull();
+    expect(fractionAt(Number.NaN, 200)).toBeNull();
+    expect(fractionAt(50, Number.NaN)).toBeNull();
+  });
+});
+
+describe("fractionForKey", () => {
+  it("moves the divider by one step along its own axis", () => {
+    expect(fractionForKey("ArrowRight", 0.5, "horizontal")).toBeCloseTo(0.5 + SPLIT_STEP);
+    expect(fractionForKey("ArrowLeft", 0.5, "horizontal")).toBeCloseTo(0.5 - SPLIT_STEP);
+    expect(fractionForKey("ArrowDown", 0.5, "vertical")).toBeCloseTo(0.5 + SPLIT_STEP);
+    expect(fractionForKey("ArrowUp", 0.5, "vertical")).toBeCloseTo(0.5 - SPLIT_STEP);
+  });
+
+  it("leaves the other axis' keys to the page", () => {
+    // A separator that swallowed every arrow would take the page's scrolling
+    // with it.
+    for (const key of ["ArrowUp", "ArrowDown"]) {
+      expect(fractionForKey(key, 0.5, "horizontal")).toBeNull();
+    }
+    for (const key of ["ArrowLeft", "ArrowRight"]) {
+      expect(fractionForKey(key, 0.5, "vertical")).toBeNull();
+    }
+  });
+
+  it("leaves every key that is not a movement to the page", () => {
+    for (const key of ["Tab", "Enter", " ", "a", "Escape", "PageDown"]) {
+      expect(fractionForKey(key, 0.5, "horizontal")).toBeNull();
+    }
+  });
+
+  it("takes the divider to either end", () => {
+    for (const orientation of SPLIT_ORIENTATIONS) {
+      expect(fractionForKey("Home", 0.5, orientation)).toBe(SPLIT_BOUNDS.min);
+      expect(fractionForKey("End", 0.5, orientation)).toBe(SPLIT_BOUNDS.max);
+    }
+  });
+
+  it("stops at the bounds rather than stepping past them", () => {
+    expect(fractionForKey("ArrowLeft", SPLIT_BOUNDS.min, "horizontal")).toBe(SPLIT_BOUNDS.min);
+    expect(fractionForKey("ArrowRight", SPLIT_BOUNDS.max, "horizontal")).toBe(SPLIT_BOUNDS.max);
+  });
+
+  it("steps from a fraction that was already out of bounds", () => {
+    expect(fractionForKey("ArrowRight", -5, "horizontal")).toBeCloseTo(
+      SPLIT_BOUNDS.min + SPLIT_STEP,
+    );
+  });
+});
+
+describe("percentOf", () => {
+  it("writes a fraction as a CSS percentage", () => {
+    expect(percentOf(0.5)).toBe("50%");
+    expect(percentOf(0.425)).toBe("42.5%");
+  });
+
+  it("never writes a percentage the browser would drop", () => {
+    expect(percentOf(Number.NaN)).toBe("50%");
+    expect(percentOf(-1)).toBe("0%");
+    expect(percentOf(2)).toBe("100%");
+  });
+});
+
+describe("separatorOrientation", () => {
+  it("names the rule, not the layout", () => {
+    // Panes side by side are divided by a vertical rule. ARIA describes the
+    // separator, so this is a translation and not a synonym.
+    expect(separatorOrientation("horizontal")).toBe("vertical");
+    expect(separatorOrientation("vertical")).toBe("horizontal");
+  });
+});

package/vendor/ds/kits/app/test/split-view.dense-tooling.test.ts

@@ -0,0 +1,66 @@
+// SplitView as dense tooling composes it: drags cross pane contents and nested
+// separators remain independent keyboard controls.
+
+import { flushSync } from "svelte";
+import { describe, expect, it } from "vitest";
+import SplitView from "../src/primitives/SplitView.svelte";
+import NestedSplitViewConsumer from "./fixtures/NestedSplitViewConsumer.svelte";
+import { render, rendered } from "./mount";
+
+/** The start pane, divider, and end pane, in document order. */
+function parts(element: HTMLElement): [HTMLElement, HTMLElement, HTMLElement] {
+  const [start, divider, end] = [...element.children] as HTMLElement[];
+  return [start!, divider!, end!];
+}
+
+/** Give the split a measurable box, which jsdom does not provide. */
+function measured(element: HTMLElement, width: number, height: number): void {
+  element.getBoundingClientRect = () =>
+    ({ left: 0, top: 0, right: width, bottom: height, width, height, x: 0, y: 0 }) as DOMRect;
+}
+
+function pointer(element: HTMLElement, type: string, position: Partial<MouseEventInit> = {}): void {
+  element.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, ...position }));
+  flushSync();
+}
+
+function press(element: HTMLElement, key: string): void {
+  element.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  flushSync();
+}
+
+describe("SplitView dense-tooling contract", () => {
+  it("keeps dragging when the pointer crosses pane content", () => {
+    const split = rendered(render(SplitView, {}));
+    const [start, divider, end] = parts(split);
+    measured(split, 200, 100);
+
+    pointer(divider, "pointerdown", { clientX: 100 });
+    pointer(end, "pointermove", { clientX: 150 });
+
+    expect(start.style.flexBasis).toBe("75%");
+    expect(end.style.flexBasis).toBe("25%");
+  });
+
+  it("composes nested panes whose dividers remain independent keyboard controls", () => {
+    const outer = rendered(render(NestedSplitViewConsumer, {}));
+    const separators = [...outer.querySelectorAll<HTMLElement>('[role="separator"]')];
+    const [outerDivider, innerDivider] = separators;
+    const inner = innerDivider?.parentElement as HTMLElement;
+
+    expect(separators.map((separator) => separator.getAttribute("aria-label"))).toEqual([
+      "Resize navigation and workspace",
+      "Resize editor and console",
+    ]);
+    expect(outer.getAttribute("data-orientation")).toBe("horizontal");
+    expect(inner.getAttribute("data-orientation")).toBe("vertical");
+
+    press(innerDivider!, "ArrowDown");
+    expect(parts(inner)[0].style.flexBasis).toBe("62%");
+    expect(parts(outer)[0].style.flexBasis).toBe("40%");
+
+    press(outerDivider!, "ArrowRight");
+    expect(parts(outer)[0].style.flexBasis).toBe("42%");
+    expect(parts(inner)[0].style.flexBasis).toBe("62%");
+  });
+});