@bearmenu/ui 0.8.35 → 0.8.36

package/src/components/banner.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Banner } from "./banner";
+
+describe("Banner", () => {
+  it("paints the destructive tone with the ink token and a hairline", () => {
+    render(<Banner tone="destructive">The queue didn&apos;t load.</Banner>);
+    const banner = document.querySelector('[data-slot="banner"]');
+    expect(banner).toHaveClass("bg-destructive/10", "text-destructive-ink", "border");
+  });
+
+  it("draws the destructive tone's own glyph unless told otherwise", () => {
+    const { rerender } = render(<Banner tone="destructive">Failed</Banner>);
+    const banner = document.querySelector('[data-slot="banner"]');
+    expect(banner?.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
+    rerender(
+      <Banner tone="destructive" icon={null}>
+        Failed
+      </Banner>
+    );
+    expect(banner?.querySelector("svg")).toBeNull();
+  });
+
+  it("places the action after the text and leaves it working", async () => {
+    const onRetry = vi.fn();
+    render(
+      <Banner
+        tone="destructive"
+        action={
+          <button type="button" onClick={onRetry}>
+            Retry
+          </button>
+        }
+      >
+        Walk-ins didn&apos;t load.
+      </Banner>
+    );
+    const banner = document.querySelector('[data-slot="banner"]');
+    const slot = document.querySelector('[data-slot="banner-action"]');
+    expect(banner?.lastElementChild).toBe(slot);
+    await userEvent.click(screen.getByRole("button", { name: "Retry" }));
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it("renders no action slot without an action", () => {
+    render(<Banner>Walk-ins only.</Banner>);
+    expect(document.querySelector('[data-slot="banner-action"]')).toBeNull();
+  });
+
+  it("keeps the info and warning tones borderless", () => {
+    const { rerender } = render(<Banner tone="info">Note</Banner>);
+    const banner = document.querySelector('[data-slot="banner"]');
+    expect(banner).not.toHaveClass("border");
+    rerender(<Banner tone="warning">Note</Banner>);
+    expect(banner).not.toHaveClass("border");
+  });
+});

package/src/components/banner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Info, TriangleAlert } from "lucide-react";
+import { CircleAlert, Info, TriangleAlert } from "lucide-react";
 import { cn } from "../lib/utils";
 
 /**
@@ -21,6 +21,14 @@ import { cn } from "../lib/utils";
  * - `warning`: a 16% amber wash with the design's amber ink — darker than
  *   the solid `--warning`, which falls short of AA on its own wash at this
  *   size; dark mode uses the lifted token.
+ * - `destructive`: something did not load or did not happen — "The queue
+ *   didn't load", "Walk-ins didn't load" (today/04-d3, floor/02-s2,
+ *   reports/03-p9). A red wash with `--destructive-ink`, and the one tone
+ *   with a hairline: the booking frames draw it, because a failure has to
+ *   read as a boundary on a page already full of soft grounds.
+ *
+ * `action` takes the trailing control — the frames' "Retry". It sits on the
+ * right edge, centred on the text, and never wraps under it.
  */
 const bannerVariants = cva(
   "flex gap-2.5 rounded-xl px-3.5 py-3 text-[12.5px] leading-normal [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
@@ -30,6 +38,7 @@ const bannerVariants = cva(
         info: "bg-surface-2 text-ink-secondary",
         warning:
           "bg-[oklch(0.62_0.15_70/0.16)] text-[oklch(0.42_0.1_70)] dark:bg-warning/15 dark:text-warning",
+        destructive: "border border-destructive/25 bg-destructive/10 text-destructive-ink",
       },
     },
     defaultVariants: { tone: "info" },
@@ -45,22 +54,37 @@ export type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
     icon?: React.ReactNode;
     /** The bold first line — "19:30 just went". */
     title?: React.ReactNode;
+    /**
+     * A trailing control — "Retry". Pass a real button (a `Button
+     * variant="link"` reads as the frames draw it); the banner only places it.
+     * A banner that announces a failure the user did not just cause is
+     * usually worth `role="status"` from the caller.
+     */
+    action?: React.ReactNode;
   };
 
 /** Each tone's own glyph, so a caller never has to remember which. */
 const TONE_ICON = {
   info: <Info aria-hidden />,
   warning: <TriangleAlert aria-hidden />,
+  destructive: <CircleAlert aria-hidden />,
 } as const;
 
-function Banner({ tone, icon, title, className, children, ...props }: BannerProps) {
+function Banner({ tone, icon, title, action, className, children, ...props }: BannerProps) {
   return (
     <div data-slot="banner" className={cn(bannerVariants({ tone }), className)} {...props}>
       {icon === undefined ? TONE_ICON[tone ?? "info"] : icon}
-      <div className="min-w-0">
+      <div className="min-w-0 flex-1">
         {title ? <b className="mb-[3px] block text-[13px] font-bold">{title}</b> : null}
-        <div className={cn(tone === "warning" && title ? "opacity-90" : undefined)}>{children}</div>
+        <div className={cn((tone === "warning" || tone === "destructive") && title ? "opacity-90" : undefined)}>
+          {children}
+        </div>
       </div>
+      {action ? (
+        <div data-slot="banner-action" className="shrink-0 self-center">
+          {action}
+        </div>
+      ) : null}
     </div>
   );
 }

package/src/components/multi-select-combobox.tsx

@@ -93,7 +93,13 @@ export function MultiSelectCombobox({
           align="start"
         >
           <Command shouldFilter={shouldFilter}>
-            <CommandInput placeholder={searchPlaceholder} onValueChange={onSearchChange} />
+            {/* Spread rather than `onValueChange={onSearchChange}`: under a
+                consumer's `exactOptionalPropertyTypes`, passing a possibly
+                `undefined` value to cmdk's optional prop does not typecheck. */}
+            <CommandInput
+              placeholder={searchPlaceholder}
+              {...(onSearchChange ? { onValueChange: onSearchChange } : {})}
+            />
             <CommandList>
               <CommandEmpty>{loading ? "Loading…" : emptyText}</CommandEmpty>
               <CommandGroup>

package/src/components/pan-zoom-viewport.stories.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { PanZoomViewport, type PanZoomViewportHandle } from "./pan-zoom-viewport";
+
+const labels = {
+  viewport: "Floor plan, Inside",
+  instructions: "Arrow keys move the plan. Plus and minus zoom; 0 fits it.",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit",
+  controls: "Zoom",
+  zoomLevel: (percent: number) => `${percent}%`,
+};
+
+/** A stand-in plan, painted with tokens only: the real canvas is the app's. */
+const TABLES = [
+  { id: "T1", x: 120, y: 240, w: 90, h: 90, round: true },
+  { id: "T2", x: 270, y: 240, w: 90, h: 90, round: true },
+  { id: "T3", x: 420, y: 240, w: 90, h: 90, round: false },
+  { id: "T4", x: 120, y: 420, w: 120, h: 120, round: false },
+  { id: "T5", x: 300, y: 420, w: 220, h: 90, round: false },
+  { id: "T6", x: 300, y: 600, w: 180, h: 90, round: false },
+  { id: "T7", x: 900, y: 220, w: 180, h: 120, round: false },
+  { id: "T8", x: 700, y: 240, w: 120, h: 120, round: false },
+  { id: "T9", x: 700, y: 420, w: 120, h: 120, round: false },
+  { id: "T12", x: 900, y: 600, w: 180, h: 90, round: false },
+];
+
+function DemoPlan({ onPick }: { onPick?: (id: string) => void }) {
+  return (
+    <div className="relative size-full rounded-sm border border-border bg-[length:24px_24px] bg-[linear-gradient(to_right,var(--line-soft)_1px,transparent_1px),linear-gradient(to_bottom,var(--line-soft)_1px,transparent_1px)]">
+      <div className="absolute left-16 top-16 grid h-20 w-96 place-items-center border border-border text-xs text-muted-foreground">
+        Bar counter
+      </div>
+      {TABLES.map((table) => (
+        <button
+          key={table.id}
+          type="button"
+          onClick={() => onPick?.(table.id)}
+          aria-label={`Table ${table.id}`}
+          className={
+            "absolute grid place-items-center border border-border bg-card text-sm font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+            (table.round ? "rounded-full" : "rounded-md")
+          }
+          style={{ left: table.x, top: table.y, width: table.w, height: table.h }}
+        >
+          {table.id}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta<typeof PanZoomViewport> = {
+  title: "Booking/PanZoomViewport",
+  component: PanZoomViewport,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A window onto a plan that pans and zooms: drag, pinch, trackpad pinch or ctrl-wheel, arrows / + / − / 0 on the focused viewport, and the + / − / Fit controls. Fit never goes below `minScale`; past the floor the plan anchors top-left and the edges it runs past are shaded. Every string is injected through `labels`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PanZoomViewport>;
+
+/** floor/07-f0 desktop: the plan fits the viewport. Tap a table: the click still lands. */
+export const Desktop: Story = {
+  render: () => {
+    const [picked, setPicked] = React.useState<string | null>(null);
+    return (
+      <div className="flex flex-col gap-2">
+        <PanZoomViewport
+          contentWidth={1200}
+          contentHeight={800}
+          labels={labels}
+          className="h-[560px] w-[900px] rounded-xl border border-border bg-background"
+        >
+          <DemoPlan onPick={setPicked} />
+        </PanZoomViewport>
+        <p className="text-sm text-muted-foreground">Picked: {picked ?? "none"}</p>
+      </div>
+    );
+  },
+};
+
+/** floor/07-f0 phone: the fit would be unreadable, so it stops at the floor and pans. */
+export const PhoneAtTheFloor: Story = {
+  render: () => (
+    <PanZoomViewport
+      contentWidth={1200}
+      contentHeight={800}
+      minScale={0.55}
+      labels={labels}
+      className="h-[480px] w-[390px] border-y border-border bg-background"
+    >
+      <DemoPlan />
+    </PanZoomViewport>
+  ),
+};
+
+/** Driving it from outside: a "Show T12" link, a reset. */
+export const Imperative: Story = {
+  render: () => {
+    const api = React.useRef<PanZoomViewportHandle>(null);
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={() => api.current?.centerOn(990, 645)}>
+            Show T12
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => api.current?.fit()}>
+            Reset
+          </Button>
+        </div>
+        <PanZoomViewport
+          apiRef={api}
+          contentWidth={1200}
+          contentHeight={800}
+          minScale={0.8}
+          labels={labels}
+          className="h-[420px] w-[640px] rounded-xl border border-border bg-background"
+        >
+          <DemoPlan />
+        </PanZoomViewport>
+      </div>
+    );
+  },
+};

package/src/components/pan-zoom-viewport.test.tsx

@@ -0,0 +1,381 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  PanZoomViewport,
+  type PanZoomViewportHandle,
+  type PanZoomViewportProps,
+} from "./pan-zoom-viewport";
+
+/**
+ * jsdom lays nothing out, so each test states the viewport's size: the
+ * surface reports it as its client box. Its bounding rect stays at 0,0, so
+ * client coordinates in the pointer events are viewport coordinates.
+ */
+let viewportSize = { width: 800, height: 600 };
+
+function isSurface(element: HTMLElement) {
+  return element.getAttribute("data-slot") === "pan-zoom-viewport-surface";
+}
+
+beforeEach(() => {
+  viewportSize = { width: 800, height: 600 };
+  vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockImplementation(function (
+    this: HTMLElement
+  ) {
+    return isSurface(this) ? viewportSize.width : 0;
+  });
+  vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockImplementation(function (
+    this: HTMLElement
+  ) {
+    return isSurface(this) ? viewportSize.height : 0;
+  });
+});
+
+afterEach(() => vi.restoreAllMocks());
+
+const labels = {
+  viewport: "Floor plan, Inside",
+  instructions: "Arrow keys move the plan.",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit",
+  controls: "Zoom",
+  zoomLevel: (percent: number) => `${percent}%`,
+};
+
+function renderViewport(props: Partial<PanZoomViewportProps> = {}) {
+  return render(
+    <PanZoomViewport contentWidth={400} contentHeight={300} labels={labels} {...props}>
+      <button type="button">T1</button>
+    </PanZoomViewport>
+  );
+}
+
+const surface = () => screen.getByRole("group", { name: "Floor plan, Inside" });
+const content = () =>
+  document.querySelector<HTMLElement>('[data-slot="pan-zoom-viewport-content"]');
+
+/** The transform as numbers, rounded so float noise does not fail a test. */
+function transformOf() {
+  const match = /translate\((-?[\d.]+)px, (-?[\d.]+)px\) scale\(([\d.]+)\)/.exec(
+    content()?.style.transform ?? ""
+  );
+  if (!match) throw new Error(`no transform on the content: ${content()?.style.transform}`);
+  const [, x, y, scale] = match.map(Number);
+  const round = (value: number | undefined) => Math.round((value ?? NaN) * 1000) / 1000;
+  return { x: round(x), y: round(y), scale: round(scale) };
+}
+
+function edgeVisible(edge: "left" | "right" | "top" | "bottom") {
+  return (
+    document
+      .querySelector(`[data-slot="pan-zoom-viewport-edge"][data-edge="${edge}"]`)
+      ?.getAttribute("data-visible") === "true"
+  );
+}
+
+/** A phone-sized viewport onto a plan that would fit far below the floor. */
+function renderOnAPhone(props: Partial<PanZoomViewportProps> = {}) {
+  viewportSize = { width: 390, height: 500 };
+  return renderViewport({ contentWidth: 1200, contentHeight: 800, minScale: 0.5, ...props });
+}
+
+describe("PanZoomViewport", () => {
+  describe("fit", () => {
+    it("fits the content inside its padding and centres it", () => {
+      renderViewport();
+      // min((800 - 48) / 400, (600 - 48) / 300) = 1.84 → 736 × 552.
+      expect(transformOf()).toEqual({ x: 32, y: 24, scale: 1.84 });
+      expect(content()).not.toHaveClass("invisible");
+    });
+
+    it("stops at the floor, anchors top-left and shades the edge that runs on", () => {
+      renderOnAPhone();
+      // The fit would be 0.285; the floor holds it at 0.5 → 600 × 400.
+      // Too wide: anchored at the padding. Short enough: centred.
+      expect(transformOf()).toEqual({ x: 24, y: 50, scale: 0.5 });
+      expect(edgeVisible("right")).toBe(true);
+      expect(edgeVisible("left")).toBe(false);
+      expect(edgeVisible("top")).toBe(false);
+      expect(edgeVisible("bottom")).toBe(false);
+    });
+
+    it("never fits above the ceiling", () => {
+      renderViewport({ contentWidth: 100, contentHeight: 100, maxScale: 2 });
+      expect(transformOf().scale).toBe(2);
+    });
+  });
+
+  describe("controls", () => {
+    it("zooms in and out by one step about the centre", async () => {
+      renderViewport();
+      await userEvent.click(screen.getByRole("button", { name: "Zoom out" }));
+      // 1.84 / 1.25 = 1.472 → 588.8 × 441.6, centred.
+      expect(transformOf()).toEqual({ x: 105.6, y: 79.2, scale: 1.472 });
+      await userEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+      expect(transformOf().scale).toBe(1.84);
+    });
+
+    it("disables zoom out at the floor and zoom in at the ceiling", async () => {
+      renderOnAPhone({ maxScale: 0.625 });
+      expect(screen.getByRole("button", { name: "Zoom out" })).toBeDisabled();
+      await userEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+      expect(transformOf().scale).toBe(0.625);
+      expect(screen.getByRole("button", { name: "Zoom in" })).toBeDisabled();
+    });
+
+    it("returns to the fitted view", async () => {
+      renderViewport();
+      const fitted = transformOf();
+      await userEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+      expect(transformOf()).not.toEqual(fitted);
+      await userEvent.click(screen.getByRole("button", { name: "Fit" }));
+      expect(transformOf()).toEqual(fitted);
+    });
+
+    it("names the controls from the injected labels and can be left out", () => {
+      const view = renderViewport();
+      expect(screen.getByRole("group", { name: "Zoom" })).toBeInTheDocument();
+      view.unmount();
+      renderViewport({ controls: false });
+      expect(screen.queryByRole("button", { name: "Zoom in" })).toBeNull();
+    });
+
+    it("eases a zoom from the controls, and never under reduced motion", async () => {
+      renderViewport();
+      expect(content()?.className).not.toContain("transition-transform");
+      await userEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+      expect(content()).toHaveClass("transition-transform", "motion-reduce:transition-none");
+    });
+  });
+
+  describe("keyboard", () => {
+    it("pans with the arrows when the viewport has focus, four steps with Shift", async () => {
+      renderOnAPhone();
+      surface().focus();
+      await userEvent.keyboard("{ArrowRight}");
+      expect(transformOf().x).toBe(24 - 48);
+      await userEvent.keyboard("{Shift>}{ArrowRight}{/Shift}");
+      expect(transformOf().x).toBe(24 - 48 - 192);
+      // The far edge stops `fitPadding` inside the viewport: 390 − 600 − 24.
+      await userEvent.keyboard("{Shift>}{ArrowRight}{/Shift}");
+      expect(transformOf().x).toBe(-234);
+      await userEvent.keyboard("{ArrowLeft}");
+      expect(transformOf().x).toBe(-186);
+    });
+
+    it("does not pan content that already fits", async () => {
+      renderViewport();
+      surface().focus();
+      const before = transformOf();
+      await userEvent.keyboard("{ArrowRight}{ArrowDown}");
+      expect(transformOf()).toEqual(before);
+    });
+
+    it("zooms with + and -, and fits with 0", async () => {
+      renderViewport();
+      surface().focus();
+      await userEvent.keyboard("+");
+      expect(transformOf().scale).toBe(2.3);
+      await userEvent.keyboard("-");
+      expect(transformOf().scale).toBe(1.84);
+      await userEvent.keyboard("-");
+      await userEvent.keyboard("0");
+      expect(transformOf()).toEqual({ x: 32, y: 24, scale: 1.84 });
+    });
+
+    it("leaves the arrows to a focused child", async () => {
+      renderOnAPhone();
+      screen.getByRole("button", { name: "T1" }).focus();
+      const before = transformOf();
+      await userEvent.keyboard("{ArrowRight}");
+      expect(transformOf()).toEqual(before);
+    });
+
+    it("announces the zoom level through the injected formatter", async () => {
+      renderViewport();
+      surface().focus();
+      await userEvent.keyboard("+");
+      expect(screen.getByText("230%")).toBeInTheDocument();
+    });
+
+    it("is named and described by its labels", () => {
+      renderViewport();
+      expect(surface()).toHaveAccessibleName("Floor plan, Inside");
+      expect(surface()).toHaveAccessibleDescription("Arrow keys move the plan.");
+      expect(surface()).toHaveAttribute("tabindex", "0");
+    });
+  });
+
+  describe("pointer", () => {
+    function drag(target: Element, from: [number, number], to: [number, number], id = 1) {
+      fireEvent.pointerDown(target, {
+        pointerId: id,
+        pointerType: "mouse",
+        button: 0,
+        clientX: from[0],
+        clientY: from[1],
+      });
+      fireEvent.pointerMove(surface(), {
+        pointerId: id,
+        pointerType: "mouse",
+        clientX: to[0],
+        clientY: to[1],
+      });
+      fireEvent.pointerUp(surface(), {
+        pointerId: id,
+        pointerType: "mouse",
+        clientX: to[0],
+        clientY: to[1],
+      });
+    }
+
+    it("pans with a drag and swallows the click the drag would become", () => {
+      const onClick = vi.fn();
+      viewportSize = { width: 390, height: 500 };
+      render(
+        <PanZoomViewport contentWidth={1200} contentHeight={800} labels={labels}>
+          <button type="button" onClick={onClick}>
+            T1
+          </button>
+        </PanZoomViewport>
+      );
+      const table = screen.getByRole("button", { name: "T1" });
+      drag(table, [200, 200], [140, 200]);
+      fireEvent.click(table);
+      expect(transformOf().x).toBe(24 - 60);
+      expect(onClick).not.toHaveBeenCalled();
+      expect(edgeVisible("left")).toBe(true);
+    });
+
+    it("lets a tap through as a click", () => {
+      const onClick = vi.fn();
+      viewportSize = { width: 390, height: 500 };
+      render(
+        <PanZoomViewport contentWidth={1200} contentHeight={800} labels={labels}>
+          <button type="button" onClick={onClick}>
+            T1
+          </button>
+        </PanZoomViewport>
+      );
+      const table = screen.getByRole("button", { name: "T1" });
+      const before = transformOf();
+      drag(table, [200, 200], [202, 201]);
+      fireEvent.click(table);
+      expect(transformOf()).toEqual(before);
+      expect(onClick).toHaveBeenCalledOnce();
+    });
+
+    it("never starts a pan on an element marked data-pan-zoom-ignore", () => {
+      viewportSize = { width: 390, height: 500 };
+      render(
+        <PanZoomViewport contentWidth={1200} contentHeight={800} labels={labels}>
+          <div data-pan-zoom-ignore>handle</div>
+        </PanZoomViewport>
+      );
+      const before = transformOf();
+      drag(screen.getByText("handle"), [200, 200], [100, 200]);
+      expect(transformOf()).toEqual(before);
+    });
+
+    it("zooms with a two-finger pinch about the fingers", () => {
+      renderViewport();
+      const touch = (id: number, x: number, y: number) => ({
+        pointerId: id,
+        pointerType: "touch",
+        clientX: x,
+        clientY: y,
+      });
+      fireEvent.pointerDown(surface(), touch(1, 300, 300));
+      fireEvent.pointerDown(surface(), touch(2, 500, 300));
+      // The fingers spread from 200px apart to 250px apart: × 1.25.
+      fireEvent.pointerMove(surface(), touch(2, 550, 300));
+      fireEvent.pointerMove(surface(), touch(1, 300, 300));
+      expect(transformOf().scale).toBe(2.3);
+      fireEvent.pointerUp(surface(), touch(1, 300, 300));
+      fireEvent.pointerUp(surface(), touch(2, 550, 300));
+    });
+  });
+
+  describe("wheel", () => {
+    function wheel(init: WheelEventInit) {
+      const event = new WheelEvent("wheel", { bubbles: true, cancelable: true, ...init });
+      act(() => {
+        surface().dispatchEvent(event);
+      });
+      return event;
+    }
+
+    it("zooms on a trackpad pinch (a ctrl-wheel) and keeps the page from zooming", () => {
+      renderViewport();
+      const event = wheel({ deltaY: -10, ctrlKey: true, clientX: 400, clientY: 300 });
+      expect(event.defaultPrevented).toBe(true);
+      expect(transformOf().scale).toBeGreaterThan(1.84);
+    });
+
+    it("caps one ctrl-wheel notch so a mouse wheel does not jump", () => {
+      renderViewport({ maxScale: 10 });
+      wheel({ deltaY: -100, ctrlKey: true, clientX: 400, clientY: 300 });
+      expect(transformOf().scale).toBeCloseTo(1.84 * Math.exp(0.25), 2);
+    });
+
+    it("pans on a plain scroll while there is content that way", () => {
+      renderOnAPhone();
+      const event = wheel({ deltaX: 50 });
+      expect(event.defaultPrevented).toBe(true);
+      expect(transformOf().x).toBe(24 - 50);
+    });
+
+    it("hands the scroll back to the page when nothing can move", () => {
+      renderViewport();
+      const event = wheel({ deltaY: 80 });
+      expect(event.defaultPrevented).toBe(false);
+    });
+  });
+
+  describe("api", () => {
+    it("drives the view from outside and reports every transform", () => {
+      const api = React.createRef<PanZoomViewportHandle>();
+      const onTransformChange = vi.fn();
+      renderOnAPhone({ apiRef: api, onTransformChange });
+      expect(onTransformChange).toHaveBeenLastCalledWith({ scale: 0.5, x: 24, y: 50 });
+
+      act(() => api.current?.centerOn(1000, 400));
+      // The point (1000, 400) at 0.5 is 500 px in; centred it would put the
+      // content at 195 − 500 = −305, which the clamp holds at −234.
+      expect(api.current?.getTransform()).toEqual({ scale: 0.5, x: -234, y: 50 });
+      expect(onTransformChange).toHaveBeenLastCalledWith({ scale: 0.5, x: -234, y: 50 });
+
+      act(() => api.current?.zoomTo(1));
+      expect(api.current?.getTransform().scale).toBe(1);
+      act(() => api.current?.fit());
+      expect(api.current?.getTransform()).toEqual({ scale: 0.5, x: 24, y: 50 });
+    });
+
+    it("refits when the plan changes size", () => {
+      const view = renderViewport();
+      view.rerender(
+        <PanZoomViewport contentWidth={800} contentHeight={600} labels={labels}>
+          <button type="button">T1</button>
+        </PanZoomViewport>
+      );
+      // min(752 / 800, 552 / 600) = 0.92.
+      expect(transformOf().scale).toBe(0.92);
+    });
+
+    it("keeps a panned view, pulled inside the bounds, when the plan changes", async () => {
+      const view = renderOnAPhone();
+      surface().focus();
+      await userEvent.keyboard("{Shift>}{ArrowRight}{/Shift}");
+      view.rerender(
+        <PanZoomViewport contentWidth={700} contentHeight={800} minScale={0.5} labels={labels}>
+          <button type="button">T1</button>
+        </PanZoomViewport>
+      );
+      // 350 wide at 0.5 now: x may go no further than 390 − 350 − 24 = 16.
+      expect(transformOf()).toEqual({ scale: 0.5, x: 16, y: 50 });
+    });
+  });
+});