@bearmenu/ui 0.8.47 → 0.8.49

package/dist/components/alert.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
+    variant?: "secondary" | "success" | "warning" | "default" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
     size?: "status" | "chip" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "secondary" | "default" | "link" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
-    size?: "default" | "icon" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "secondary" | "warning" | "default" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
+    size?: "icon" | "default" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/coach-marks.d.ts

@@ -77,6 +77,7 @@ type CoachMarksLabels = {
     next: string;
     /** The last stop's forward action, e.g. "Done". */
     done: string;
+    /** The corner X's accessible name, e.g. "Skip tour"; not drawn as text. */
     skip: string;
 };
 type CoachMarksProps = {

package/dist/components/coach-marks.js

@@ -5,7 +5,7 @@ import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { useState, useLayoutEffect, useCallback, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { Lightbulb, ArrowRight } from 'lucide-react';
+import { Lightbulb, X, ArrowRight } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var PAD = 8;
@@ -203,14 +203,38 @@ function CoachMarks({
                     style: { left: caretLeft }
                   }
                 ),
-                /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[oklch(0.82_0.15_85)] px-2.5 py-1 text-xs font-extrabold uppercase tracking-[0.08em] text-[oklch(0.26_0.03_60)]", children: [
-                  /* @__PURE__ */ jsx(Lightbulb, { className: "h-3 w-3", "aria-hidden": true }),
-                  labels.progress(index + 1, available.length)
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[oklch(0.82_0.15_85)] px-2.5 py-1 text-xs font-extrabold uppercase tracking-[0.08em] text-[oklch(0.26_0.03_60)]", children: [
+                    /* @__PURE__ */ jsx(Lightbulb, { className: "h-3 w-3", "aria-hidden": true }),
+                    labels.progress(index + 1, available.length)
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "-my-2.5 -mr-2.5 shrink-0 text-muted-foreground hover:text-foreground",
+                      "aria-label": labels.skip,
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": true })
+                    }
+                  )
                 ] }),
                 /* @__PURE__ */ jsx("p", { className: "mt-3 text-base font-semibold leading-snug", children: current.title }),
                 /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm leading-relaxed text-muted-foreground", children: current.body }),
-                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2", children: [
-                  index > 0 && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "pill", onClick: () => setIndex(index - 1), children: labels.back }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center justify-end gap-2", children: [
+                  index > 0 && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "pill",
+                      className: "mr-auto",
+                      onClick: () => setIndex(index - 1),
+                      children: labels.back
+                    }
+                  ),
                   /* @__PURE__ */ jsxs(
                     Button,
                     {
@@ -222,17 +246,6 @@ function CoachMarks({
                         !last && /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true })
                       ]
                     }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "link",
-                      size: "sm",
-                      className: "ml-auto min-h-11",
-                      onClick: onClose,
-                      children: labels.skip
-                    }
                   )
                 ] })
               ]

package/dist/components/command.d.ts

@@ -28,7 +28,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -64,7 +64,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -82,7 +82,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "value" | "disabled"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "onSelect" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/concept-compare.d.ts

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

package/dist/components/doorway-tiles.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-C4rR3LTs.js';
+import '../place-types-DCVqWmk_.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/grade-atom.d.ts

@@ -1,3 +1,3 @@
 import 'react/jsx-runtime';
 import '../lib/grade.js';
-export { G as GradeAtom, h as GradeAtomLabels, i as GradeAtomProps, j as GradeAtomSize } from '../place-types-C4rR3LTs.js';
+export { G as GradeAtom, h as GradeAtomLabels, i as GradeAtomProps, j as GradeAtomSize } from '../place-types-DCVqWmk_.js';

package/dist/components/kitchen-dossier.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { MenuVenueSignature, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import { P as PlacePreview, C as CitedText, a as PlaceGradeDimensions } from '../place-types-C4rR3LTs.js';
+import { P as PlacePreview, C as CitedText, a as PlaceGradeDimensions } from '../place-types-DCVqWmk_.js';
 import { VenueGradeDimensionKey } from './venue-grade-dimensions.js';
 import '../lib/grade.js';
 

package/dist/components/menu-dead-end.d.ts

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

package/dist/components/menu-family-block.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuKitchenListLabels } from './menu-kitchen-list.js';
 import { MenuFamilyBlockPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
 import 'react';
-import '../place-types-C4rR3LTs.js';
+import '../place-types-DCVqWmk_.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/menu-family-card.d.ts

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

package/dist/components/menu-filter-chips.d.ts

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

package/dist/components/menu-group-rows.d.ts

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

package/dist/components/menu-index-header.d.ts

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

package/dist/components/menu-index-list.d.ts

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

package/dist/components/menu-intent-hero.d.ts

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

package/dist/components/menu-item.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuItemPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import '../place-types-C4rR3LTs.js';
+import '../place-types-DCVqWmk_.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/menu-kitchen-list.d.ts

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

package/dist/components/menu-mocks.d.ts

@@ -1,6 +1,6 @@
 import { MenuFamilyBlockPreview, MenuConceptPreview, MenuFamilyPreview, MenuFilterChip, MenuIndexEntry, MenuIntentFigure, MenuItemPreview, MenuKitchenPreview, MenuLoosenOption, QaItem, MenuVenuePreview } from './menu-types.js';
 import { DoorwayTile } from './doorway-tiles.js';
-import { P as PlacePreview } from '../place-types-C4rR3LTs.js';
+import { P as PlacePreview } from '../place-types-DCVqWmk_.js';
 import 'react';
 import 'react/jsx-runtime';
 import '../lib/grade.js';

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

@@ -1,5 +1,5 @@
 import { ComponentType, CSSProperties, ReactNode } from 'react';
-import { M as MenuSizeAndPrice, P as PlacePreview } from '../place-types-C4rR3LTs.js';
+import { M as MenuSizeAndPrice, P as PlacePreview } from '../place-types-DCVqWmk_.js';
 import 'react/jsx-runtime';
 import '../lib/grade.js';
 

package/dist/components/open-now-list.d.ts

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

package/dist/components/place-about-tab.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PlacePreview, b as PlaceAboutTabLabels, c as PlaceLinkKind } from '../place-types-C4rR3LTs.js';
+import { P as PlacePreview, b as PlaceAboutTabLabels, c as PlaceLinkKind } from '../place-types-DCVqWmk_.js';
 import '../lib/grade.js';
 
 interface PlaceAboutTabProps {

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

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode, MouseEvent } from 'react';
-import { P as PlacePreview, d as PlaceCardLabels } from '../place-types-C4rR3LTs.js';
+import { P as PlacePreview, d as PlaceCardLabels } from '../place-types-DCVqWmk_.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/place-card.js

@@ -56,6 +56,10 @@ function PriceLevel({ level, label }) {
     /* @__PURE__ */ jsx("span", { className: "opacity-30", children: "$".repeat(4 - filled) })
   ] });
 }
+function launchYear(launchedAt) {
+  const match = launchedAt ? /^(\d{4})-\d{2}$/.exec(launchedAt) : null;
+  return match ? Number(match[1]) : void 0;
+}
 var STATIC_ROOT_CLASSES = `group relative flex w-full select-none flex-col ${HOVER_MOTION} ${HOVER_LIFT_GRID_GROUP}`;
 var ROOT_CLASSES = `${STATIC_ROOT_CLASSES} cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-xl`;
 var DEFAULT_SIZES = "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw";
@@ -72,7 +76,7 @@ var PlaceCard = memo(function PlaceCard2({
   photoOverlay,
   className
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const [imgError, setImgError] = useState(false);
   const MotionLink = useMemo(() => motion.create(LinkComponent), [LinkComponent]);
   const coverUrl = imgError ? void 0 : place.cover_url;
@@ -81,6 +85,8 @@ var PlaceCard = memo(function PlaceCard2({
   const neighbourhood = (_e = (_d = place.areas) == null ? void 0 : _d[0]) == null ? void 0 : _e.name;
   const priceLevel = (_h = (_f = place.price_dishes) == null ? void 0 : _f.price_score) != null ? _h : (_g = place.price_drinks) == null ? void 0 : _g.price_score;
   const showPrice = priceLevel !== void 0 && priceLevel > 0;
+  const year = labels.established ? launchYear(place.launched_at) : void 0;
+  const established = year !== void 0 ? (_i = labels.established) == null ? void 0 : _i.call(labels, year) : void 0;
   const ariaLabel = labels.viewDetails(place.name);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -145,10 +151,12 @@ var PlaceCard = memo(function PlaceCard2({
         /* @__PURE__ */ jsx(HeadlineRating, { place, labels })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-        (cuisine || showPrice) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-          cuisine && /* @__PURE__ */ jsx("span", { className: "capitalize", children: cuisine }),
-          cuisine && showPrice && /* @__PURE__ */ jsx("span", { className: "text-border", children: "\xB7" }),
-          showPrice && /* @__PURE__ */ jsx(PriceLevel, { level: priceLevel, label: labels.priceLevel(priceLevel) })
+        (cuisine || showPrice || established) && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", children: [
+          cuisine && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate capitalize", children: cuisine }),
+          cuisine && showPrice && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-border", children: "\xB7" }),
+          showPrice && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsx(PriceLevel, { level: priceLevel, label: labels.priceLevel(priceLevel) }) }),
+          established && (cuisine || showPrice) && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-border", children: "\xB7" }),
+          established && /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap", children: established })
         ] }),
         distance !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),

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-C4rR3LTs.js';
+import { P as PlacePreview, e as PlaceDetailsMobileLabels } from '../place-types-DCVqWmk_.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-C4rR3LTs.js';
+import { f as PlaceSchedule, g as PlaceScheduleWeekLabels } from '../place-types-DCVqWmk_.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-C4rR3LTs.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-DCVqWmk_.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-C4rR3LTs.js';
+import '../place-types-DCVqWmk_.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?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "inherit" | "primary" | "default" | "destructive" | 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?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "inherit" | "primary" | "default" | "destructive" | 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?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "success" | "warning" | "default" | "destructive" | "outline" | "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?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "success" | "warning" | "default" | "destructive" | "outline" | "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,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
+    variant?: "body" | "small" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "inherit" | "primary" | "default" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/toggle.d.ts

@@ -11,7 +11,7 @@ import { VariantProps } from 'class-variance-authority';
  * `data-[state=on]:` utilities sort after `hover:` and still win while on.
  */
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "tab" | "outline" | "chip" | "segmented" | null | undefined;
+    variant?: "tab" | "default" | "outline" | "chip" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**

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-C4rR3LTs.js';
+import '../place-types-DCVqWmk_.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-C4rR3LTs.js';
+import '../place-types-DCVqWmk_.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-C4rR3LTs.js';
+import '../place-types-DCVqWmk_.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-C4rR3LTs.js';
+import '../place-types-DCVqWmk_.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-C4rR3LTs.js';
+import '../place-types-DCVqWmk_.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-C4rR3LTs.js';
+import { a as PlaceGradeDimensions } from '../place-types-DCVqWmk_.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-C4rR3LTs.js';
+import { C as CitedText } from '../place-types-DCVqWmk_.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-C4rR3LTs.js';
+import { P as PlacePreview } from '../place-types-DCVqWmk_.js';
 import 'react';
 import '../lib/grade.js';
 

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

@@ -123,6 +123,12 @@ type PlacePreview = {
      * bare storage key straight to `next/image`'s loader).
      */
     cover_url?: string;
+    /**
+     * Year and month the place launched (`YYYY-MM`), as the schema ships it.
+     * The backend approximates it from the earliest review it holds, so it is a
+     * floor rather than a founding date. `<PlaceCard>` shows the year only.
+     */
+    launched_at?: string;
 };
 type PlaceHourBlock = {
     opens_at: number;
@@ -248,6 +254,11 @@ type PlaceCardLabels = {
     viewDetails: (name: string) => string;
     /** Accessible name of the `$` price glyphs, e.g. "Price level 2 of 4". */
     priceLevel: (level: number) => string;
+    /**
+     * The launch year on the meta line, e.g. "Est. 2020" / "Din 2020". Optional:
+     * without it the card shows no year even when `launched_at` is set.
+     */
+    established?: (year: number) => string;
     grade: GradeAtomLabels;
 };
 /**

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.47",
+  "version": "0.8.49",
+  "packageManager": "pnpm@10.28.1",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -16,20 +17,223 @@
     "src"
   ],
   "exports": {
+    "./components/accordion": "./src/components/accordion.tsx",
+    "./components/action-bar": "./src/components/action-bar.tsx",
+    "./components/activity-row": "./src/components/activity-row.tsx",
+    "./components/alert": "./src/components/alert.tsx",
+    "./components/alert-dialog": "./src/components/alert-dialog.tsx",
+    "./components/aspect-ratio": "./src/components/aspect-ratio.tsx",
+    "./components/avatar": "./src/components/avatar.tsx",
+    "./components/badge": "./src/components/badge.tsx",
+    "./components/banner": "./src/components/banner.tsx",
+    "./components/booking-row": "./src/components/booking-row.tsx",
+    "./components/booking-summary-card": "./src/components/booking-summary-card.tsx",
+    "./components/breadcrumb": "./src/components/breadcrumb.tsx",
+    "./components/button": "./src/components/button.tsx",
+    "./components/button-group": "./src/components/button-group.tsx",
+    "./components/calendar": "./src/components/calendar.tsx",
+    "./components/card": "./src/components/card.tsx",
+    "./components/carousel": "./src/components/carousel.tsx",
+    "./components/category-deck": "./src/components/category-deck.tsx",
+    "./components/checkbox": "./src/components/checkbox.tsx",
+    "./components/circular-progress": "./src/components/circular-progress.tsx",
+    "./components/coach-marks": "./src/components/coach-marks.tsx",
+    "./components/collapsible": "./src/components/collapsible.tsx",
+    "./components/combobox": "./src/components/combobox.tsx",
+    "./components/command": "./src/components/command.tsx",
+    "./components/concept-card": "./src/components/concept-card.tsx",
+    "./components/concept-compare": "./src/components/concept-compare.tsx",
+    "./components/concept-compare-rail": "./src/components/concept-compare-rail.tsx",
+    "./components/concept-convergence": "./src/components/concept-convergence.tsx",
+    "./components/convergence": "./src/components/convergence.tsx",
+    "./components/coverflow": "./src/components/coverflow.tsx",
+    "./components/currency-input": "./src/components/currency-input.tsx",
+    "./components/date-input": "./src/components/date-input.tsx",
+    "./components/day-rail-chip": "./src/components/day-rail-chip.tsx",
+    "./components/description-list": "./src/components/description-list.tsx",
+    "./components/dialog": "./src/components/dialog.tsx",
+    "./components/doorway-tiles": "./src/components/doorway-tiles.tsx",
+    "./components/drawer": "./src/components/drawer.tsx",
+    "./components/drift-rail": "./src/components/drift-rail.tsx",
+    "./components/dropdown-menu": "./src/components/dropdown-menu.tsx",
+    "./components/empty-state": "./src/components/empty-state.tsx",
+    "./components/event-card": "./src/components/event-card.tsx",
+    "./components/event-compact-row": "./src/components/event-compact-row.tsx",
+    "./components/event-day-header": "./src/components/event-day-header.tsx",
+    "./components/event-day-separator": "./src/components/event-day-separator.tsx",
+    "./components/event-detail-panel": "./src/components/event-detail-panel.tsx",
+    "./components/event-hub-hero": "./src/components/event-hub-hero.tsx",
+    "./components/event-index-row": "./src/components/event-index-row.tsx",
+    "./components/event-list-row": "./src/components/event-list-row.tsx",
+    "./components/event-list-row-wide": "./src/components/event-list-row-wide.tsx",
+    "./components/event-poster-fallback": "./src/components/event-poster-fallback.tsx",
+    "./components/event-tonight-strip": "./src/components/event-tonight-strip.tsx",
+    "./components/event-types": "./src/components/event-types.ts",
+    "./components/events-empty-state": "./src/components/events-empty-state.tsx",
+    "./components/explainer-steps": "./src/components/explainer-steps.tsx",
+    "./components/facet-group": "./src/components/facet-group.tsx",
+    "./components/featured-rail-item": "./src/components/featured-rail-item.tsx",
+    "./components/field": "./src/components/field.tsx",
+    "./components/filter-category-row": "./src/components/filter-category-row.tsx",
+    "./components/form": "./src/components/form.tsx",
+    "./components/glass-ground": "./src/components/glass-ground.tsx",
+    "./components/grade-atom": "./src/components/grade-atom.tsx",
+    "./components/haptic-switch": "./src/components/haptic-switch.tsx",
+    "./components/hold-countdown": "./src/components/hold-countdown.tsx",
+    "./components/hub-surface": "./src/components/hub-surface.tsx",
+    "./components/hue-chip": "./src/components/hue-chip.tsx",
+    "./components/icon": "./src/components/icon.tsx",
+    "./components/input": "./src/components/input.tsx",
+    "./components/input-group": "./src/components/input-group.tsx",
+    "./components/input-otp": "./src/components/input-otp.tsx",
+    "./components/item": "./src/components/item.tsx",
+    "./components/kbd": "./src/components/kbd.tsx",
+    "./components/label": "./src/components/label.tsx",
+    "./components/kitchen-dossier": "./src/components/kitchen-dossier.tsx",
+    "./components/lazy-markdown": "./src/components/lazy-markdown.tsx",
+    "./components/link-button": "./src/components/link-button.tsx",
+    "./components/markdown-renderer": "./src/components/markdown-renderer.tsx",
+    "./components/menu-dead-end": "./src/components/menu-dead-end.tsx",
+    "./components/menu-family-block": "./src/components/menu-family-block.tsx",
+    "./components/menu-family-card": "./src/components/menu-family-card.tsx",
+    "./components/menu-field": "./src/components/menu-field.tsx",
+    "./components/menu-filter-chips": "./src/components/menu-filter-chips.tsx",
+    "./components/menu-group-rows": "./src/components/menu-group-rows.tsx",
+    "./components/menu-hub-hero": "./src/components/menu-hub-hero.tsx",
+    "./components/menu-index-header": "./src/components/menu-index-header.tsx",
+    "./components/menu-index-list": "./src/components/menu-index-list.tsx",
+    "./components/menu-intent-hero": "./src/components/menu-intent-hero.tsx",
+    "./components/menu-item": "./src/components/menu-item.tsx",
+    "./components/menu-pick-row": "./src/components/menu-pick-row.tsx",
+    "./components/menu-kitchen-list": "./src/components/menu-kitchen-list.tsx",
+    "./components/menu-mocks": "./src/components/menu-mocks.ts",
+    "./components/menu-types": "./src/components/menu-types.ts",
+    "./components/motion-icon": "./src/components/motion-icon.tsx",
+    "./components/motion-icon-actions": "./src/components/motion-icon-actions.tsx",
+    "./components/motion-icon-controls": "./src/components/motion-icon-controls.tsx",
+    "./components/motion-icon-set": "./src/components/motion-icon-set.tsx",
+    "./components/multi-select-combobox": "./src/components/multi-select-combobox.tsx",
+    "./components/multi-select-menu": "./src/components/multi-select-menu.tsx",
+    "./components/native-select": "./src/components/native-select.tsx",
+    "./components/open-now-list": "./src/components/open-now-list.tsx",
+    "./components/pagination": "./src/components/pagination.tsx",
+    "./components/pan-zoom-viewport": "./src/components/pan-zoom-viewport.tsx",
+    "./components/party-counter": "./src/components/party-counter.tsx",
+    "./components/phone-frame": "./src/components/phone-frame.tsx",
+    "./components/photo-ground": "./src/components/photo-ground.tsx",
+    "./components/place-about-tab": "./src/components/place-about-tab.tsx",
+    "./components/place-card": "./src/components/place-card.tsx",
+    "./components/place-details-mobile": "./src/components/place-details-mobile.tsx",
+    "./components/place-schedule-week": "./src/components/place-schedule-week.tsx",
+    "./components/place-types": "./src/components/place-types.ts",
+    "./components/popover": "./src/components/popover.tsx",
+    "./components/poster-stack": "./src/components/poster-stack.tsx",
+    "./components/poster-tape": "./src/components/poster-tape.tsx",
+    "./components/poster-wall": "./src/components/poster-wall.tsx",
+    "./components/progress": "./src/components/progress.tsx",
+    "./components/qa-block": "./src/components/qa-block.tsx",
+    "./components/qr-panel": "./src/components/qr-panel.tsx",
+    "./components/quiet-stretch": "./src/components/quiet-stretch.tsx",
+    "./components/radio-group": "./src/components/radio-group.tsx",
+    "./components/reconcile-bar": "./src/components/reconcile-bar.tsx",
+    "./components/responsive-overlay": "./src/components/responsive-overlay.tsx",
+    "./components/rating": "./src/components/rating.tsx",
+    "./components/scroll-area": "./src/components/scroll-area.tsx",
+    "./components/scroll-fade": "./src/components/scroll-fade.tsx",
+    "./components/search-bar": "./src/components/search-bar.tsx",
+    "./components/searchable-select": "./src/components/searchable-select.tsx",
+    "./components/section-header": "./src/components/section-header.tsx",
+    "./components/segmented-nav": "./src/components/segmented-nav.tsx",
+    "./components/select": "./src/components/select.tsx",
+    "./components/selection-bar": "./src/components/selection-bar.tsx",
+    "./components/separator": "./src/components/separator.tsx",
+    "./components/sheet": "./src/components/sheet.tsx",
+    "./components/signature-chip": "./src/components/signature-chip.tsx",
+    "./components/skeleton": "./src/components/skeleton.tsx",
+    "./components/skeleton-card": "./src/components/skeleton-card.tsx",
+    "./components/slider": "./src/components/slider.tsx",
+    "./components/sliding-panels": "./src/components/sliding-panels.tsx",
+    "./components/sonner": "./src/components/sonner.tsx",
+    "./components/sort-option-list": "./src/components/sort-option-list.tsx",
+    "./components/spinner": "./src/components/spinner.tsx",
+    "./components/split-share-row": "./src/components/split-share-row.tsx",
+    "./components/stat-banner": "./src/components/stat-banner.tsx",
+    "./components/stepper": "./src/components/stepper.tsx",
+    "./components/sticky-container": "./src/components/sticky-container.tsx",
+    "./components/story": "./src/components/story.tsx",
+    "./components/switch": "./src/components/switch.tsx",
+    "./components/table": "./src/components/table.tsx",
+    "./components/table-ledger-card": "./src/components/table-ledger-card.tsx",
+    "./components/table-trigger-band": "./src/components/table-trigger-band.tsx",
+    "./components/tabs": "./src/components/tabs.tsx",
+    "./components/tag": "./src/components/tag.tsx",
+    "./components/tag-group": "./src/components/tag-group.tsx",
+    "./components/text": "./src/components/text.tsx",
+    "./components/textarea": "./src/components/textarea.tsx",
+    "./components/time-slot": "./src/components/time-slot.tsx",
+    "./components/timeline-day": "./src/components/timeline-day.tsx",
+    "./components/timeline-hour": "./src/components/timeline-hour.tsx",
+    "./components/timeline-hour-puck": "./src/components/timeline-hour-puck.tsx",
+    "./components/toggle": "./src/components/toggle.tsx",
+    "./components/toggle-group": "./src/components/toggle-group.tsx",
+    "./components/tooltip": "./src/components/tooltip.tsx",
+    "./components/top-comparison": "./src/components/top-comparison.tsx",
+    "./components/top-cross-link": "./src/components/top-cross-link.tsx",
+    "./components/top-ranking-entry": "./src/components/top-ranking-entry.tsx",
+    "./components/top-ranking-hero": "./src/components/top-ranking-hero.tsx",
+    "./components/top-ranking-legend": "./src/components/top-ranking-legend.tsx",
+    "./components/top-types": "./src/components/top-types.ts",
+    "./components/use-mobile": "./src/components/use-mobile.tsx",
+    "./components/venue-events-block": "./src/components/venue-events-block.tsx",
+    "./components/venue-grade-dimensions": "./src/components/venue-grade-dimensions.tsx",
+    "./components/venue-quotes": "./src/components/venue-quotes.tsx",
+    "./components/venue-wall": "./src/components/venue-wall.tsx",
+    "./components/weekday-chip": "./src/components/weekday-chip.tsx",
+    "./components/weekday-theme-banner": "./src/components/weekday-theme-banner.tsx",
+    "./components/weekend-panel": "./src/components/weekend-panel.tsx",
     "./globals.css": "./src/globals.css",
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
-    },
-    "./hooks/*": {
-      "types": "./dist/hooks/*.d.ts",
-      "import": "./dist/hooks/*.js"
-    },
-    "./lib/*": {
-      "types": "./dist/lib/*.d.ts",
-      "import": "./dist/lib/*.js"
+    "./hooks/use-drag-swipe": "./src/hooks/use-drag-swipe.ts",
+    "./hooks/use-haptic": "./src/hooks/use-haptic.ts",
+    "./hooks/use-media-query": "./src/hooks/use-media-query.ts",
+    "./hooks/use-mobile": "./src/hooks/use-mobile.ts",
+    "./hooks/use-mounted-theme": "./src/hooks/use-mounted-theme.ts",
+    "./hooks/use-sticky": "./src/hooks/use-sticky.ts",
+    "./lib/card-hover": "./src/lib/card-hover.ts",
+    "./lib/grade": "./src/lib/grade.ts",
+    "./lib/icon-depth": "./src/lib/icon-depth.ts",
+    "./lib/icon-registry": "./src/lib/icon-registry.ts",
+    "./lib/motion": "./src/lib/motion.ts",
+    "./lib/overlay-pill": "./src/lib/overlay-pill.ts",
+    "./lib/utils": "./src/lib/utils.ts"
+  },
+  "publishConfig": {
+    "exports": {
+      "./globals.css": "./src/globals.css",
+      "./components/*": {
+        "types": "./dist/components/*.d.ts",
+        "import": "./dist/components/*.js"
+      },
+      "./hooks/*": {
+        "types": "./dist/hooks/*.d.ts",
+        "import": "./dist/hooks/*.js"
+      },
+      "./lib/*": {
+        "types": "./dist/lib/*.d.ts",
+        "import": "./dist/lib/*.js"
+      }
     }
   },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run build"
+  },
   "peerDependencies": {
     "@hookform/resolvers": "^3.0.0 || ^5.0.0",
     "@radix-ui/react-accordion": "*",
@@ -138,15 +342,5 @@
     "vaul": "^1.1.2",
     "vitest": "^4.1.5",
     "zod": "^3.25.67"
-  },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist"
   }
-}
+}

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

@@ -127,7 +127,7 @@ describe("CoachMarks", () => {
   it("Skip and Escape close; the dimmed page does not", () => {
     const onClose = vi.fn();
     render(<Page onClose={onClose} />);
-    fireEvent.click(screen.getByText("Skip"));
+    fireEvent.click(screen.getByRole("button", { name: "Skip" }));
     fireEvent.keyDown(window, { key: "Escape" });
     expect(onClose).toHaveBeenCalledTimes(2);
     expect(screen.getAllByRole("button", { name: "Skip" })).toHaveLength(1);

package/src/components/coach-marks.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { ArrowRight, Lightbulb } from "lucide-react";
+import { ArrowRight, Lightbulb, X } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 
@@ -86,6 +86,7 @@ export type CoachMarksLabels = {
   next: string;
   /** The last stop's forward action, e.g. "Done". */
   done: string;
+  /** The corner X's accessible name, e.g. "Skip tour"; not drawn as text. */
   skip: string;
 };
 
@@ -374,15 +375,35 @@ export function CoachMarks({
             style={{ left: caretLeft }}
           />
         )}
-        <span className="inline-flex items-center gap-1.5 rounded-full bg-[oklch(0.82_0.15_85)] px-2.5 py-1 text-xs font-extrabold uppercase tracking-[0.08em] text-[oklch(0.26_0.03_60)]">
-          <Lightbulb className="h-3 w-3" aria-hidden />
-          {labels.progress(index + 1, available.length)}
-        </span>
+        {/* Skip is chrome, not a step action: the corner X keeps the footer
+            to Back and Next, which fit the callout in any locale. */}
+        <div className="flex items-center justify-between gap-2">
+          <span className="inline-flex items-center gap-1.5 rounded-full bg-[oklch(0.82_0.15_85)] px-2.5 py-1 text-xs font-extrabold uppercase tracking-[0.08em] text-[oklch(0.26_0.03_60)]">
+            <Lightbulb className="h-3 w-3" aria-hidden />
+            {labels.progress(index + 1, available.length)}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="-my-2.5 -mr-2.5 shrink-0 text-muted-foreground hover:text-foreground"
+            aria-label={labels.skip}
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" aria-hidden />
+          </Button>
+        </div>
         <p className="mt-3 text-base font-semibold leading-snug">{current.title}</p>
         <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{current.body}</p>
-        <div className="mt-4 flex items-center gap-2">
+        <div className="mt-4 flex flex-wrap items-center justify-end gap-2">
           {index > 0 && (
-            <Button type="button" variant="ghost" size="pill" onClick={() => setIndex(index - 1)}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="pill"
+              className="mr-auto"
+              onClick={() => setIndex(index - 1)}
+            >
               {labels.back}
             </Button>
           )}
@@ -394,15 +415,6 @@ export function CoachMarks({
             {last ? labels.done : labels.next}
             {!last && <ArrowRight aria-hidden />}
           </Button>
-          <Button
-            type="button"
-            variant="link"
-            size="sm"
-            className="ml-auto min-h-11"
-            onClick={onClose}
-          >
-            {labels.skip}
-          </Button>
         </div>
       </div>
     </div>,

package/src/components/place-card.stories.tsx

@@ -10,6 +10,7 @@ const labels: PlaceCardLabels = {
   closed: "Closed",
   viewDetails: (name) => `View details for ${name}`,
   priceLevel: (level) => `Price level ${level} of 4`,
+  established: (year) => String(year),
   grade: {
     soft: "Worth exploring",
     bands: {
@@ -35,6 +36,7 @@ const basePlace: PlacePreview = {
   price_dishes: { price_range_low: 35, price_range_high: 90, price_score: 2 },
   reviews_digest: { grade: { overall: 8.4 } },
   cover_url: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&q=80",
+  launched_at: "2020-02",
 };
 
 const meta = {
@@ -101,6 +103,40 @@ export const WithFooter: Story = {
   },
 };
 
+/**
+ * The launch year closes the meta line, bare — fe's copy; `labels.established`
+ * may spell it out ("Est. 2020") where there is room. It is the backend's
+ * earliest-review estimate (`launched_at`, `YYYY-MM`). No year without the
+ * label or without a well-formed `launched_at`.
+ */
+export const Established: Story = {
+  args: { place: { ...basePlace, launched_at: "2012-09" } },
+};
+
+/** 220px rail with a long cuisine and full price: the cuisine gives way, price and year never do. */
+export const EstablishedNarrowRail: Story = {
+  args: {
+    place: { ...basePlace, cuisines: ["mediterranean"], price_dishes: { price_score: 4 } },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[220px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** Spelled out by the label, for a consumer with room for the word. */
+export const EstablishedWithLabel: Story = {
+  args: { labels: { ...labels, established: (year) => `Est. ${year}` } },
+};
+
+/** The year alone still gets a meta line: no cuisine, no price signal. */
+export const EstablishedOnly: Story = {
+  args: { place: { ...basePlace, cuisines: undefined, price_dishes: undefined } },
+};
+
 export const Minimal: Story = {
   args: { place: { id: "2", slug: "tiny", name: "The Tiny Spot" } },
 };

package/src/components/place-card.test.tsx

@@ -9,6 +9,7 @@ const LABELS: PlaceCardLabels = {
   closed: "Closed",
   viewDetails: (name) => `View details for ${name}`,
   priceLevel: (level) => `Price level ${level} of 4`,
+  established: (year) => `Est. ${year}`,
   grade: {
     soft: "Worth exploring",
     bands: {
@@ -104,6 +105,34 @@ describe("PlaceCard", () => {
     expect(screen.getByLabelText("Price level 2 of 4")).toBeInTheDocument();
   });
 
+  it("closes the meta line with the launch year", () => {
+    render(
+      <PlaceCard
+        place={makePlace({ cuisines: ["italian"], launched_at: "2020-02" })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("Est. 2020")).toBeInTheDocument();
+  });
+
+  it("shows the launch year on its own when there is no cuisine or price", () => {
+    const { container } = render(
+      <PlaceCard place={makePlace({ launched_at: "2012-09" })} labels={LABELS} />
+    );
+    expect(screen.getByText("Est. 2012")).toBeInTheDocument();
+    expect(container).not.toHaveTextContent("·");
+  });
+
+  it("shows no year without the label or a well-formed launched_at", () => {
+    const { established: _omit, ...withoutEstablished } = LABELS;
+    const { rerender } = render(
+      <PlaceCard place={makePlace({ launched_at: "2020-02" })} labels={withoutEstablished} />
+    );
+    expect(screen.queryByText(/2020/)).not.toBeInTheDocument();
+    rerender(<PlaceCard place={makePlace({ launched_at: "2020" })} labels={LABELS} />);
+    expect(screen.queryByText(/Est\./)).not.toBeInTheDocument();
+  });
+
   it("clamps an out-of-range price level instead of throwing", () => {
     render(<PlaceCard place={makePlace({ price_drinks: { price_score: 7 } })} labels={LABELS} />);
     expect(screen.getByLabelText("Price level 7 of 4")).toHaveTextContent("$$$$");

package/src/components/place-card.tsx

@@ -169,6 +169,12 @@ function PriceLevel({ level, label }: { level: number; label: string }) {
   );
 }
 
+/** The year out of the schema's `YYYY-MM`; anything else shows no year. */
+function launchYear(launchedAt: string | undefined): number | undefined {
+  const match = launchedAt ? /^(\d{4})-\d{2}$/.exec(launchedAt) : null;
+  return match ? Number(match[1]) : undefined;
+}
+
 const STATIC_ROOT_CLASSES = `group relative flex w-full select-none flex-col ${HOVER_MOTION} ${HOVER_LIFT_GRID_GROUP}`;
 const ROOT_CLASSES = `${STATIC_ROOT_CLASSES} cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-xl`;
 
@@ -202,6 +208,8 @@ export const PlaceCard = memo(function PlaceCard({
   const neighbourhood = place.areas?.[0]?.name;
   const priceLevel = place.price_dishes?.price_score ?? place.price_drinks?.price_score;
   const showPrice = priceLevel !== undefined && priceLevel > 0;
+  const year = labels.established ? launchYear(place.launched_at) : undefined;
+  const established = year !== undefined ? labels.established?.(year) : undefined;
   const ariaLabel = labels.viewDetails(place.name);
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
@@ -277,11 +285,22 @@ export const PlaceCard = memo(function PlaceCard({
         </div>
 
         <div className="flex flex-col gap-0.5">
-          {(cuisine || showPrice) && (
-            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              {cuisine && <span className="capitalize">{cuisine}</span>}
-              {cuisine && showPrice && <span className="text-border">·</span>}
-              {showPrice && <PriceLevel level={priceLevel} label={labels.priceLevel(priceLevel)} />}
+          {/* Cuisine · price · launch year. At rail width the three can
+              outrun the card, so the cuisine is the part that gives way: the
+              price glyphs and the year are short and fixed. */}
+          {(cuisine || showPrice || established) && (
+            <div className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+              {cuisine && <span className="min-w-0 truncate capitalize">{cuisine}</span>}
+              {cuisine && showPrice && <span className="shrink-0 text-border">·</span>}
+              {showPrice && (
+                <span className="shrink-0">
+                  <PriceLevel level={priceLevel} label={labels.priceLevel(priceLevel)} />
+                </span>
+              )}
+              {established && (cuisine || showPrice) && (
+                <span className="shrink-0 text-border">·</span>
+              )}
+              {established && <span className="shrink-0 whitespace-nowrap">{established}</span>}
             </div>
           )}
 

package/src/components/place-types.ts

@@ -58,6 +58,12 @@ export type PlacePreview = {
    * bare storage key straight to `next/image`'s loader).
    */
   cover_url?: string
+  /**
+   * Year and month the place launched (`YYYY-MM`), as the schema ships it.
+   * The backend approximates it from the earliest review it holds, so it is a
+   * floor rather than a founding date. `<PlaceCard>` shows the year only.
+   */
+  launched_at?: string
 }
 
 export type PlaceHourBlock = { opens_at: number; closes_at: number }
@@ -193,6 +199,11 @@ export type PlaceCardLabels = {
   viewDetails: (name: string) => string
   /** Accessible name of the `$` price glyphs, e.g. "Price level 2 of 4". */
   priceLevel: (level: number) => string
+  /**
+   * The launch year on the meta line, e.g. "Est. 2020" / "Din 2020". Optional:
+   * without it the card shows no year even when `launched_at` is set.
+   */
+  established?: (year: number) => string
   grade: GradeAtomLabels
 }