@bearmenu/ui 0.8.16 → 0.8.17

package/dist/components/photo-ground.d.ts

@@ -36,6 +36,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  */
 /** The ground under the photography. Fixed, and deliberately not a token. */
 declare const PHOTO_GROUND = "bg-[oklch(0.21_0.012_55)]";
+/**
+ * The shadow a glyph wears when it stands on `PHOTO_GROUND` in a photograph's
+ * place — the card family's fallback treatment: a ground and a lifted glyph,
+ * never a bare icon on a flat fill. Same literal family as the ground.
+ */
+declare const PHOTO_GLYPH_SHADOW = "drop-shadow-[0_2px_6px_oklch(0.16_0.012_55_/_0.6)]";
 type PhotoGroundProps = {
     /** One per slot. An absent one draws the slot's initial on the ground. */
     photos: (string | undefined)[];
@@ -67,4 +73,4 @@ type PhotoGroundProps = {
 };
 declare function PhotoGround({ photos, initials, mode, active, mosaicClassName, phoneTiles, gradient, overlay, overlayClassName, loading, glyphClassName, className, }: PhotoGroundProps): react_jsx_runtime.JSX.Element;
 
-export { PHOTO_GROUND, PhotoGround, type PhotoGroundProps };
+export { PHOTO_GLYPH_SHADOW, PHOTO_GROUND, PhotoGround, type PhotoGroundProps };

package/dist/components/photo-ground.js

@@ -1,3 +1,3 @@
-export { PHOTO_GROUND, PhotoGround } from '../chunk-CNJQUHCU.js';
+export { PHOTO_GLYPH_SHADOW, PHOTO_GROUND, PhotoGround } from '../chunk-SWD6CJ35.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/place-card.js

@@ -6,7 +6,7 @@ import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Badge } from '../chunk-P43B3ONY.js';
+import { Badge } from '../chunk-5XREWOBB.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { forwardRef, memo, useState, useMemo } from 'react';

package/dist/components/place-details-mobile.js

@@ -3,7 +3,7 @@ import '../chunk-FMTJGO76.js';
 import '../chunk-MWB7S54O.js';
 import '../chunk-NWZGSLPU.js';
 import { Text } from '../chunk-ZLMRVBD7.js';
-import { Badge } from '../chunk-P43B3ONY.js';
+import { Badge } from '../chunk-5XREWOBB.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { useState } from 'react';

package/dist/components/searchable-select.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-MCOHLWRS.js';
 import '../chunk-PDTPO6NG.js';
-import { Button } from '../chunk-36KEHCET.js';
+import { Button } from '../chunk-5LTILG3L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/section-header.d.ts

@@ -50,9 +50,15 @@ type SectionHeaderProps = {
      * would dilute the headings that matter. Defaults to `"h2"`.
      */
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
+    /**
+     * Controls at the end of the title row, after `action` — a rail's
+     * previous / next pair on desktop. The header owns none of their
+     * behaviour; it only holds the slot.
+     */
+    trailing?: React.ReactNode;
     className?: string;
 };
-declare function SectionHeader({ title, count, subtitle, action, actionHref, actionTone, subtitleFrom, linkComponent: LinkComponent, onAction, as: Heading, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SectionHeader({ title, count, subtitle, action, actionHref, actionTone, subtitleFrom, linkComponent: LinkComponent, onAction, as: Heading, trailing, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
 type SectionHeaderSkeletonProps = {
     /** Shows the inline count placeholder, matching `SectionHeaderProps["count"]`. */
     showCount?: boolean;

package/dist/components/section-header.js

@@ -31,6 +31,7 @@ function SectionHeader({
   linkComponent: LinkComponent = DefaultLink,
   onAction,
   as: Heading = "h2",
+  trailing,
   className
 }) {
   const actionIcon = /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": true });
@@ -41,13 +42,16 @@ function SectionHeader({
         /* @__PURE__ */ jsx(Heading, { className: "truncate text-[17px] font-bold tracking-[-0.01em] text-foreground md:text-[18px]", children: title }),
         count !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-1.5 shrink-0 text-[12px] tabular-nums text-muted-foreground lg:ml-0.5", children: count })
       ] }),
-      action && (actionHref ? /* @__PURE__ */ jsxs(LinkComponent, { href: actionHref, className: actionClasses, onClick: onAction, children: [
-        action,
-        actionIcon
-      ] }) : onAction ? /* @__PURE__ */ jsxs("button", { type: "button", className: actionClasses, onClick: onAction, children: [
-        action,
-        actionIcon
-      ] }) : null)
+      (action || trailing) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+        action && (actionHref ? /* @__PURE__ */ jsxs(LinkComponent, { href: actionHref, className: actionClasses, onClick: onAction, children: [
+          action,
+          actionIcon
+        ] }) : onAction ? /* @__PURE__ */ jsxs("button", { type: "button", className: actionClasses, onClick: onAction, children: [
+          action,
+          actionIcon
+        ] }) : null),
+        trailing
+      ] })
     ] }),
     subtitle && /* @__PURE__ */ jsx(
       "p",

package/dist/components/signature-chip.js

@@ -1,4 +1,4 @@
-export { SignatureChip } from '../chunk-S33K4RC5.js';
-import '../chunk-P43B3ONY.js';
+export { SignatureChip } from '../chunk-BKKQ7GCZ.js';
+import '../chunk-5XREWOBB.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/sliding-panels.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-36KEHCET.js';
+import { Button } from '../chunk-5LTILG3L.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from '../chunk-HDR7V6IZ.js';
+import { toggleVariants } from '../chunk-TIQNM4XD.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
@@ -29,6 +29,9 @@ function ToggleGroup(_a) {
       "data-size": size,
       className: cn(
         "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        // The segmented control's capsule: muted ground, the on cell a raised
+        // card inside it (see `toggleVariants.segmented`). 44px tall.
+        "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted data-[variant=segmented]:p-0.5",
         className
       )
     }, props), {
@@ -49,18 +52,20 @@ function ToggleGroupItem(_a) {
     "size"
   ]);
   const context = React.useContext(ToggleGroupContext);
+  const resolved = context.variant || variant;
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     __spreadProps(__spreadValues({
       "data-slot": "toggle-group-item",
-      "data-variant": context.variant || variant,
+      "data-variant": resolved,
       "data-size": context.size || size,
       className: cn(
         toggleVariants({
-          variant: context.variant || variant,
+          variant: resolved,
           size: context.size || size
         }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        resolved === "segmented" ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]" : "rounded-none first:rounded-l-md last:rounded-r-md",
         className
       )
     }, props), {

package/dist/components/toggle.d.ts

@@ -5,7 +5,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { VariantProps } from 'class-variance-authority';
 
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;

package/dist/components/toggle.js

@@ -1,3 +1,3 @@
-export { Toggle, toggleVariants } from '../chunk-HDR7V6IZ.js';
+export { Toggle, toggleVariants } from '../chunk-TIQNM4XD.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/top-ranking-entry.js

@@ -1,8 +1,8 @@
-import { MenuItem } from '../chunk-T6S2ZBV6.js';
-import '../chunk-S33K4RC5.js';
+import { MenuItem } from '../chunk-SDWN6L4O.js';
+import '../chunk-BKKQ7GCZ.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import '../chunk-P43B3ONY.js';
+import '../chunk-5XREWOBB.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { MapPin, Star, MessageSquareQuote } from 'lucide-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/badge.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Badge } from "./badge";
+import { Button } from "./button";
 
 const meta = {
   title: "Components/Badge",
@@ -8,7 +9,18 @@ const meta = {
   argTypes: {
     variant: {
       control: "select",
-      options: ["default", "secondary", "destructive", "outline", "overlay", "glass", "success", "warning"],
+      options: [
+        "default",
+        "secondary",
+        "destructive",
+        "outline",
+        "overlay",
+        "glass",
+        "success",
+        "warning",
+        "brown",
+        "onPrimary",
+      ],
     },
   },
 } satisfies Meta<typeof Badge>;
@@ -44,6 +56,18 @@ export const Warning: Story = {
   args: { children: "Warning", variant: "warning" },
 };
 
+/** The count inside a filled button: a translucent step on the primary fill. */
+export const OnPrimary: Story = {
+  render: () => (
+    <Button size="pill">
+      Filters
+      <Badge as="span" variant="onPrimary">
+        3
+      </Badge>
+    </Button>
+  ),
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">
@@ -55,6 +79,12 @@ export const AllVariants: Story = {
       <Badge variant="glass">Glass</Badge>
       <Badge variant="success">Success</Badge>
       <Badge variant="warning">Warning</Badge>
+      <Badge variant="brown">Brown</Badge>
+      <span className="rounded-lg bg-primary p-1.5">
+        <Badge as="span" variant="onPrimary">
+          On primary
+        </Badge>
+      </span>
     </div>
   ),
 };

package/src/components/badge.tsx

@@ -21,6 +21,8 @@ const badgeVariants = cva(
         warning:
           "border-transparent bg-warning text-warning-foreground",
         brown: "border-transparent bg-brown text-brown-foreground",
+        /** A count sitting INSIDE a primary-filled control: its own ink, lifted a notch. */
+        onPrimary: "border-transparent bg-primary-foreground/20 text-primary-foreground",
       },
       // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
       // Pair with a colored variant (e.g. variant="destructive" live).

package/src/components/button.stories.tsx

@@ -18,9 +18,9 @@ const meta = {
         "link",
         "glass",
         "brown",
-        "antagonist",
         "overlay",
         "ink",
+        "warning",
       ],
     },
     size: {
@@ -86,8 +86,9 @@ export const Brown: Story = {
   args: { children: "Brown", variant: "brown" },
 };
 
-export const Antagonist: Story = {
-  args: { children: "Antagonist", variant: "antagonist" },
+/** A control that is ON in a mode the reader should notice — a guide while it runs. */
+export const Warning: Story = {
+  args: { children: "Guide · 2 of 6", variant: "warning", size: "pill" },
 };
 
 export const Small: Story = {
@@ -121,7 +122,7 @@ export const AllVariants: Story = {
       <Button variant="link">Link</Button>
       <Button variant="glass">Glass</Button>
       <Button variant="brown">Brown</Button>
-      <Button variant="antagonist">Antagonist</Button>
+      <Button variant="warning">Warning</Button>
     </div>
   ),
 };

package/src/components/button.test.tsx

@@ -22,7 +22,17 @@ describe("buttonVariants", () => {
     expect(buttonVariants({ variant: "link" })).toContain("text-primary");
     expect(buttonVariants({ variant: "glass" })).toContain("glass");
     expect(buttonVariants({ variant: "brown" })).toContain("bg-brown");
-    expect(buttonVariants({ variant: "antagonist" })).toContain("bg-primary-foreground");
+  });
+
+  // The quiet variants step the surface on hover; none of them inverts to
+  // the brand fill, which would read as a second primary on every row.
+  it("outline, secondary and ghost tint on hover and never fill with the accent", () => {
+    for (const variant of ["outline", "secondary", "ghost"] as const) {
+      const classes = buttonVariants({ variant });
+      expect(classes).toContain("hover:bg-accent-subtle");
+      expect(classes).not.toContain("hover:bg-accent ");
+      expect(classes).not.toContain("hover:text-accent-foreground");
+    }
   });
 
   it("maps size prop to correct classes", () => {

package/src/components/button.tsx

@@ -15,11 +15,21 @@ const buttonVariants = cva(
           "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/85 hover:shadow",
+        /**
+         * The quiet variants tint on hover, they do not invert. `--accent`
+         * here is the brand brown, so the shadcn default (`hover:bg-accent`,
+         * written for an accent that is a pale grey) turned every outline,
+         * ghost and secondary button into a filled brown block the moment the
+         * pointer touched it — a second primary on every row. The standard
+         * (shadcn on its own tokens, Radix, Polaris, Material) is a step of the
+         * surface: the fill darkens a notch, the border firms up, the type
+         * stays put. `--accent-subtle` is that step; `active:` goes one more.
+         */
         outline:
-          "border border-border bg-background hover:bg-accent hover:text-accent-foreground hover:border-accent",
+          "border border-border bg-background hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-accent hover:text-accent-foreground border border-border hover:border-accent",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+          "bg-secondary text-secondary-foreground shadow-sm border border-border hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
+        ghost: "hover:bg-accent-subtle active:bg-muted",
         link: "text-primary underline-offset-4 hover:underline",
         glass: "glass glass-hover text-foreground",
         /**
@@ -49,8 +59,9 @@ const buttonVariants = cva(
         ink: "border border-white/20 bg-white/[0.16] text-white hover:bg-white/25 focus-visible:ring-white/70 focus-visible:ring-offset-0",
         brown:
           "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
-        antagonist:
-          "bg-primary-foreground text-primary shadow-sm hover:bg-accent hover:text-accent-foreground border border-border hover:border-accent",
+        /** An ON state that is not the primary — a toggled mode, a guide running. */
+        warning:
+          "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90 hover:shadow",
       },
       size: {
         xs: "h-8 rounded-lg px-3 text-xs [&_svg]:size-3.5",

package/src/components/coach-marks.stories.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CoachMarks, type CoachMarkStop } from "./coach-marks";
+import { Button } from "./button";
+
+const meta: Meta<typeof CoachMarks> = {
+  title: "Overlays/CoachMarks",
+  component: CoachMarks,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A guided tour drawn over the real page: the page dims, the current step's target is cut out in a spotlight with its step number on the corner, one callout says what the target is. Targets are `data-coach-mark` attributes on the page's own elements.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CoachMarks>;
+
+const STOPS: CoachMarkStop[] = [
+  {
+    id: "search",
+    title: "One place to search",
+    body: "Type and tick in the same sheet. Nothing filters from the page itself, so there is only ever one thing open.",
+  },
+  {
+    id: "receipt",
+    title: "Your search, as a receipt",
+    body: "Whatever is applied prints here in the order it was added. Each chip's X takes it off again.",
+  },
+  {
+    id: "view",
+    title: "Cards, or rows",
+    body: "The same menu items either way: rows fit three times as many.",
+  },
+];
+
+function Demo() {
+  const [open, setOpen] = useState(true);
+  return (
+    <div className="min-h-[720px] bg-background p-8 text-foreground">
+      <div className="flex items-center gap-3">
+        <Button data-coach-mark="search">Search and filter</Button>
+        <Button variant="outline" data-coach-mark="view">
+          Rows
+        </Button>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          Guide
+        </Button>
+      </div>
+      <div data-coach-mark="receipt" className="mt-6 inline-flex gap-2 rounded-full border border-border px-3 py-2 text-sm">
+        <span>20–40 lei ×</span>
+        <span>Centru ×</span>
+      </div>
+      <p className="mt-10 max-w-[60ch] text-sm text-muted-foreground">
+        The page beneath the tour. Nothing here re-renders; the overlay measures the three targets
+        and draws over them.
+      </p>
+      <CoachMarks
+        open={open}
+        stops={STOPS}
+        onClose={() => setOpen(false)}
+        labels={{
+          progress: (n, total) => `Step ${n} of ${total}`,
+          back: "Back",
+          next: "Next",
+          done: "Done",
+          skip: "Skip the tour",
+        }}
+      />
+    </div>
+  );
+}
+
+export const Default: Story = { render: () => <Demo /> };

package/src/components/coach-marks.test.tsx

@@ -0,0 +1,140 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { CoachMarks, type CoachMarkStop } from "./coach-marks";
+
+const STOPS: CoachMarkStop[] = [
+  { id: "a", title: "First", body: "The first thing." },
+  { id: "b", title: "Second", body: "The second thing." },
+  { id: "c", title: "Third", body: "The third thing." },
+];
+
+const labels = {
+  progress: (n: number, total: number) => `Step ${n} of ${total}`,
+  back: "Back",
+  next: "Next",
+  done: "Done",
+  skip: "Skip",
+};
+
+function Page({
+  onClose,
+  onProgress,
+  open = true,
+  targets = ["a", "b", "c"],
+  stops = STOPS,
+}: {
+  onClose: () => void;
+  onProgress?: (step: number, total: number, stop: CoachMarkStop) => void;
+  open?: boolean;
+  targets?: string[];
+  stops?: CoachMarkStop[];
+}) {
+  return (
+    <>
+      {targets.map((id) => (
+        <button key={id} type="button" data-coach-mark={id}>
+          {id}
+        </button>
+      ))}
+      <CoachMarks
+        open={open}
+        stops={stops}
+        onClose={onClose}
+        onProgress={onProgress}
+        labels={labels}
+      />
+    </>
+  );
+}
+
+/** The numbered discs on the page, in order — only the current stop wears one. */
+function pins(): string[] {
+  return Array.from(document.querySelectorAll<HTMLElement>('[role="dialog"] > :is(span, button)'))
+    .map((pin) => pin.textContent?.trim() ?? "")
+    .filter((text) => /^\d+$/.test(text));
+}
+
+// jsdom has no layout: every rect is zero, which is enough to render. A
+// target has boxes when it is in the document, none when it is not.
+Element.prototype.scrollIntoView = vi.fn();
+Element.prototype.getClientRects = function () {
+  return (this.isConnected ? [{}] : []) as unknown as DOMRectList;
+};
+
+describe("CoachMarks", () => {
+  it("opens on the first stop, numbering only the stop the reader is at", () => {
+    render(<Page onClose={vi.fn()} />);
+    expect(screen.getByRole("dialog", { name: "First" })).toBeInTheDocument();
+    expect(screen.getByText("Step 1 of 3")).toBeInTheDocument();
+    expect(pins()).toEqual(["1"]);
+    fireEvent.click(screen.getByText("Next"));
+    expect(pins()).toEqual(["2"]);
+  });
+
+  it("renders above the page, not inside the consumer's wrapper", () => {
+    render(
+      <div data-testid="wrapper">
+        <Page onClose={vi.fn()} />
+      </div>
+    );
+    const dialog = screen.getByRole("dialog", { name: "First" });
+    expect(screen.getByTestId("wrapper")).not.toContainElement(dialog);
+    expect(dialog.parentElement).toBe(document.body);
+  });
+
+  it("rebuilds the tour when the itinerary changes, not when only its words do", () => {
+    const { rerender } = render(<Page onClose={vi.fn()} />);
+    fireEvent.click(screen.getByText("Next"));
+    expect(screen.getByText("Step 2 of 3")).toBeInTheDocument();
+    rerender(
+      <Page onClose={vi.fn()} stops={STOPS.map((stop) => ({ ...stop, title: `${stop.title}!` }))} />
+    );
+    expect(screen.getByText("Step 2 of 3")).toBeInTheDocument();
+    rerender(<Page onClose={vi.fn()} stops={STOPS.slice(0, 2)} />);
+    expect(screen.getByText("Step 1 of 2")).toBeInTheDocument();
+  });
+
+  it("Next and Back walk the stops; the last stop's forward action closes", () => {
+    const onClose = vi.fn();
+    const onProgress = vi.fn();
+    render(<Page onClose={onClose} onProgress={onProgress} />);
+    fireEvent.click(screen.getByText("Next"));
+    expect(screen.getByText("Step 2 of 3")).toBeInTheDocument();
+    expect(onProgress).toHaveBeenLastCalledWith(2, 3, STOPS[1]);
+    fireEvent.click(screen.getByText("Back"));
+    expect(screen.getByText("Step 1 of 3")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Next"));
+    fireEvent.click(screen.getByText("Next"));
+    expect(screen.getByText("Step 3 of 3")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Done"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("counts only the stops whose target is on the page, so every step is reachable", () => {
+    const onClose = vi.fn();
+    render(<Page onClose={onClose} targets={["a", "c"]} />);
+    expect(screen.getByText("Step 1 of 2")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Next"));
+    expect(screen.getByRole("dialog", { name: "Third" })).toBeInTheDocument();
+    expect(screen.getByText("Step 2 of 2")).toBeInTheDocument();
+    expect(screen.getByText("Done")).toBeInTheDocument();
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("Skip, Escape and the dimmed page all close", () => {
+    const onClose = vi.fn();
+    render(<Page onClose={onClose} />);
+    fireEvent.click(screen.getByText("Skip"));
+    fireEvent.keyDown(window, { key: "Escape" });
+    fireEvent.click(screen.getAllByRole("button", { name: "Skip" })[0]);
+    expect(onClose).toHaveBeenCalledTimes(3);
+  });
+
+  it("closes at once when no stop has a target, and renders nothing while closed", () => {
+    const onClose = vi.fn();
+    render(<Page onClose={onClose} targets={[]} />);
+    expect(onClose).toHaveBeenCalled();
+    render(<Page onClose={vi.fn()} open={false} />);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+});