@bearmenu/ui 0.8.21 → 0.8.23

package/dist/components/place-card.js

@@ -1,7 +1,7 @@
 import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
 import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
 import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
-import { GradeAtom } from '../chunk-DJD3EMPK.js';
+import { GradeAtom } from '../chunk-YE4ZQUTI.js';
 import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';

package/dist/components/place-details-mobile.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PlacePreview, e as PlaceDetailsMobileLabels } from '../place-types-BHdeMMiG.js';
+import { P as PlacePreview, e as PlaceDetailsMobileLabels } from '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 interface PlaceDetailsMobileProps {

package/dist/components/place-schedule-week.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { f as PlaceSchedule, g as PlaceScheduleWeekLabels } from '../place-types-BHdeMMiG.js';
+import { f as PlaceSchedule, g as PlaceScheduleWeekLabels } from '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 interface PlaceScheduleWeekProps {

package/dist/components/place-types.d.ts

@@ -1,3 +1,3 @@
-export { C as CitedText, k as CitedValue, M as MenuSizeAndPrice, b as PlaceAboutTabLabels, d as PlaceCardLabels, e as PlaceDetailsMobileLabels, l as PlaceGrade, a as PlaceGradeDimensions, m as PlaceHourBlock, c as PlaceLinkKind, n as PlaceMustTry, P as PlacePreview, o as PlacePriceRange, p as PlaceReviewsDigest, f as PlaceSchedule, g as PlaceScheduleWeekLabels, W as WeekdayKey } from '../place-types-BHdeMMiG.js';
+export { C as CitedText, k as CitedValue, M as MenuSizeAndPrice, b as PlaceAboutTabLabels, d as PlaceCardLabels, e as PlaceDetailsMobileLabels, l as PlaceGrade, a as PlaceGradeDimensions, m as PlaceHourBlock, c as PlaceLinkKind, n as PlaceMustTry, P as PlacePreview, o as PlacePriceRange, p as PlaceReviewsDigest, f as PlaceSchedule, g as PlaceScheduleWeekLabels, W as WeekdayKey } from '../place-types-C4rR3LTs.js';
 import 'react/jsx-runtime';
 import '../lib/grade.js';

package/dist/components/qa-block.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { QaItem } from './menu-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "warning" | "success" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "outline" | "warning" | "success" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,9 +22,9 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
-    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
+    variant?: "small" | "display" | "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "medium" | "bold" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;

package/dist/components/top-comparison.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import { TopComparisonRow } from './top-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 type TopComparisonLabels = {

package/dist/components/top-cross-link.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 type TopCrossLinkProps = {

package/dist/components/top-ranking-entry.d.ts

@@ -3,7 +3,7 @@ import { MenuItemLabels } from './menu-item.js';
 import { MenuItemPreview, MenuLinkComponent } from './menu-types.js';
 import { TopRankEntry } from './top-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 type TopRankingEntryLabels = {

package/dist/components/top-ranking-hero.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import { TopExit } from './top-types.js';
 import 'react';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 type TopRankingHeroProps = {

package/dist/components/top-types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { MenuItemPreview } from './menu-types.js';
-import '../place-types-BHdeMMiG.js';
+import '../place-types-C4rR3LTs.js';
 import 'react/jsx-runtime';
 import '../lib/grade.js';
 

package/dist/components/venue-grade-dimensions.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as PlaceGradeDimensions } from '../place-types-BHdeMMiG.js';
+import { a as PlaceGradeDimensions } from '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/venue-quotes.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CitedText } from '../place-types-BHdeMMiG.js';
+import { C as CitedText } from '../place-types-C4rR3LTs.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/venue-wall.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import { P as PlacePreview } from '../place-types-BHdeMMiG.js';
+import { P as PlacePreview } from '../place-types-C4rR3LTs.js';
 import 'react';
 import '../lib/grade.js';
 

package/dist/{place-types-BHdeMMiG.d.ts → place-types-C4rR3LTs.d.ts}

@@ -12,6 +12,13 @@ type GradeAtomLabels = {
     aria: (value: string) => string;
     /** Title + aria suffix when `grade.capped`, e.g. "Capped for low confidence". */
     capped: string;
+    /**
+     * The number as the locale writes it, e.g. `8,7` in Romanian. Receives the
+     * grade already rounded to one decimal; return the glyphs to print. Defaults
+     * to `formatGrade` (`8.7`, a trailing `.0` dropped). It is a label because the
+     * decimal mark is translation, not styling — and `aria` gets the same string.
+     */
+    value?: (overall: number) => string;
 };
 type GradeAtomProps = {
     grade: PlaceGrade;

package/package.json

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

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

@@ -12,7 +12,7 @@ const meta: Meta<typeof CoachMarks> = {
     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.",
+          "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. The spotlight is a hole in the dimming: a tap on the ringed control reaches it and ends the tour. A `region` stop (a list, a rail) is cut out without the ring; a pinned control passes `scroll: false`; `inset` names the page's fixed chrome.",
       },
     },
   },
@@ -37,14 +37,23 @@ const STOPS: CoachMarkStop[] = [
     title: "Cards, or rows",
     body: "The same menu items either way: rows fit three times as many.",
   },
+  {
+    id: "results",
+    kind: "region",
+    title: "What matched",
+    body: "A region is cut out without the ring; tapping a row inside it navigates, and the tour steps out of the way.",
+  },
 ];
 
 function Demo() {
   const [open, setOpen] = useState(true);
+  const [taps, setTaps] = useState(0);
   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 data-coach-mark="search" onClick={() => setTaps((count) => count + 1)}>
+          Search and filter{taps > 0 ? ` · tapped ${taps}` : ""}
+        </Button>
         <Button variant="outline" data-coach-mark="view">
           Rows
         </Button>
@@ -57,9 +66,16 @@ function Demo() {
         <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.
+        The page beneath the tour. Nothing here re-renders; the overlay measures the targets and
+        draws over them. Tap the spotlit button: the tap lands, and the tour ends.
       </p>
+      <ul data-coach-mark="results" className="mt-6 max-w-md divide-y divide-border rounded-2xl border border-border">
+        {["Papanași", "Ciorbă de burtă", "Sarmale"].map((name) => (
+          <li key={name} className="px-4 py-3 text-sm">
+            {name}
+          </li>
+        ))}
+      </ul>
       <CoachMarks
         open={open}
         stops={STOPS}

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

@@ -1,4 +1,5 @@
-import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { CoachMarks, type CoachMarkStop } from "./coach-marks";
 
@@ -55,8 +56,10 @@ function pins(): string[] {
 }
 
 // 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();
+// target has boxes when it is in the document, none when it is not. The
+// scroll mock sits on HTMLElement, where the test setup's stub is.
+const scrollIntoView = vi.fn();
+HTMLElement.prototype.scrollIntoView = scrollIntoView;
 Element.prototype.getClientRects = function () {
   return (this.isConnected ? [{}] : []) as unknown as DOMRectList;
 };
@@ -121,13 +124,185 @@ describe("CoachMarks", () => {
     expect(onClose).not.toHaveBeenCalled();
   });
 
-  it("Skip, Escape and the dimmed page all close", () => {
+  it("Skip and Escape close; the dimmed page does not", () => {
     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);
+    expect(onClose).toHaveBeenCalledTimes(2);
+    expect(screen.getAllByRole("button", { name: "Skip" })).toHaveLength(1);
+    const dim = screen.getByRole("dialog").firstElementChild;
+    fireEvent.click(dim as Element);
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it("a tap on the spotlit target reaches it and ends the tour", () => {
+    const onClose = vi.fn();
+    const onTarget = vi.fn();
+    render(
+      <>
+        <button type="button" data-coach-mark="a" onClick={onTarget}>
+          a
+        </button>
+        <button type="button" data-coach-mark="b">
+          b
+        </button>
+        <CoachMarks open stops={STOPS.slice(0, 2)} onClose={onClose} labels={labels} />
+      </>
+    );
+    fireEvent.click(screen.getByRole("button", { name: "b" }));
+    expect(onClose).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "a" }));
+    expect(onTarget).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("hears a tap on a target that stops propagation", () => {
+    const onClose = vi.fn();
+    render(
+      <>
+        <div data-coach-mark="a">
+          <button type="button" onClick={(event) => event.stopPropagation()}>
+            inner
+          </button>
+        </div>
+        <CoachMarks open stops={STOPS.slice(0, 1)} onClose={onClose} labels={labels} />
+      </>
+    );
+    fireEvent.click(screen.getByRole("button", { name: "inner" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("settles when the consumer rebuilds its stops and inset on every render", () => {
+    const onProgress = vi.fn();
+    function Consumer() {
+      const [progress, setProgress] = useState<string>("");
+      return (
+        <>
+          <button type="button" data-coach-mark="a">
+            a
+          </button>
+          <span data-testid="progress">{progress}</span>
+          <CoachMarks
+            open
+            stops={STOPS.slice(0, 1).map((stop) => ({ ...stop }))}
+            inset={{ top: 68 }}
+            onClose={vi.fn()}
+            onProgress={(step, total, stop) => {
+              onProgress(step, total, stop);
+              setProgress(`${step}/${total}`);
+            }}
+            labels={labels}
+          />
+        </>
+      );
+    }
+    render(<Consumer />);
+    expect(screen.getByTestId("progress")).toHaveTextContent("1/1");
+    expect(onProgress).toHaveBeenCalledTimes(1);
+  });
+
+  it("a region is cut out without the control's ring", () => {
+    const { rerender } = render(<Page onClose={vi.fn()} />);
+    const spotlight = () => screen.getByRole("dialog").children[1];
+    expect(spotlight().className).toContain("ring-2");
+    rerender(<Page onClose={vi.fn()} stops={STOPS.map((stop) => ({ ...stop, kind: "region" }))} />);
+    expect(spotlight().className).not.toContain("ring-2");
+  });
+
+  describe("scrolling to the target", () => {
+    /** A page whose targets sit at `top`, `height` 40, in an 800px viewport. */
+    function placeTargets(top: number) {
+      vi.spyOn(window, "innerHeight", "get").mockReturnValue(800);
+      vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+        top,
+        bottom: top + 40,
+        left: 0,
+        right: 100,
+        width: 100,
+        height: 40,
+        x: 0,
+        y: top,
+        toJSON: () => ({}),
+      });
+    }
+
+    beforeEach(() => scrollIntoView.mockClear());
+    afterEach(() => vi.restoreAllMocks());
+
+    it("centres a target out of view", () => {
+      placeTargets(900);
+      render(<Page onClose={vi.fn()} />);
+      expect(scrollIntoView).toHaveBeenCalledWith(expect.objectContaining({ block: "center" }));
+    });
+
+    it("leaves the page where it is when the target is already in view", () => {
+      placeTargets(300);
+      render(<Page onClose={vi.fn()} />);
+      // Still a request — it aborts the previous stop's smooth scroll — but
+      // one that moves nothing.
+      expect(scrollIntoView).toHaveBeenCalledWith(expect.objectContaining({ block: "nearest" }));
+    });
+
+    it("aligns a target taller than the band to its top, clear of the chrome", () => {
+      vi.spyOn(window, "innerHeight", "get").mockReturnValue(800);
+      vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+        top: 900,
+        bottom: 2400,
+        left: 0,
+        right: 100,
+        width: 100,
+        height: 1500,
+        x: 0,
+        y: 900,
+        toJSON: () => ({}),
+      });
+      render(
+        <>
+          <button type="button" data-coach-mark="a">
+            a
+          </button>
+          <CoachMarks
+            open
+            stops={STOPS.slice(0, 1)}
+            onClose={vi.fn()}
+            labels={labels}
+            inset={{ top: 68 }}
+          />
+        </>
+      );
+      expect(scrollIntoView).toHaveBeenCalledWith(expect.objectContaining({ block: "start" }));
+      expect(screen.getByRole("button", { name: "a" }).style.scrollMarginTop).toBe("76px");
+    });
+
+    it("counts the fixed chrome as out of view", () => {
+      placeTargets(20);
+      const { unmount } = render(<Page onClose={vi.fn()} />);
+      expect(scrollIntoView).toHaveBeenCalledWith(expect.objectContaining({ block: "nearest" }));
+      unmount();
+      scrollIntoView.mockClear();
+      render(
+        <>
+          <button type="button" data-coach-mark="a">
+            a
+          </button>
+          <CoachMarks
+            open
+            stops={STOPS.slice(0, 1)}
+            onClose={vi.fn()}
+            labels={labels}
+            inset={{ top: 68 }}
+          />
+        </>
+      );
+      expect(scrollIntoView).toHaveBeenCalledWith(expect.objectContaining({ block: "center" }));
+    });
+
+    it("never scrolls a stop that opted out — a pinned control", () => {
+      placeTargets(900);
+      render(<Page onClose={vi.fn()} stops={STOPS.map((stop) => ({ ...stop, scroll: false }))} />);
+      expect(scrollIntoView).not.toHaveBeenCalled();
+    });
   });
 
   it("closes at once when no stop has a target, and renders nothing while closed", () => {