@bearmenu/ui 0.8.16 → 0.8.18

package/dist/components/calendar.js

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

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/carousel.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/coach-marks.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+
+/**
+ * CoachMarks — a guided tour drawn OVER the real page.
+ *
+ * Four things, one at a time: the page dims, the current stop's target is cut
+ * out of the dimming in a spotlight, its step number sits on the spotlight's
+ * corner, and one callout beside the spotlight says what the target is. Only
+ * the current stop is marked — a map of every stop's number over the page
+ * competes with the page's own numerals and with the callout's "Step N of
+ * M"; the way through is Next, Back and the arrow keys. The reader learns
+ * the surface by looking at the surface, not at a picture of it; nothing on
+ * the page moves or re-renders to be taught.
+ *
+ * Targets are found by `data-coach-mark="<stop id>"` on the page's own
+ * elements, so the page keeps its markup and the tour attaches from outside.
+ * The tour is built from the stops whose target is ON THE PAGE when it opens
+ * (or when the itinerary changes): a stop with nothing to point at is not
+ * counted, so "Step 3 of 5" is always a step the reader will reach. Where
+ * the same id is on two elements — a desktop and a phone rendering of one
+ * control — the visible one is taken.
+ *
+ * The consumer owns the words (`labels`, `stops`) and the open state; the
+ * tour owns its position, the geometry (8px breathing room, the callout's
+ * side, re-measure on scroll and resize) and the keys (Escape closes, the
+ * arrows step). `onProgress` reports the current stop for a toolbar label.
+ *
+ * Rendered into `document.body`: a page wrapper with an opacity or transform
+ * transition is a stacking context, and the tour must sit above everything
+ * the page and its chrome draw, whatever wraps the consumer.
+ */
+type CoachMarkStop = {
+    /** Matches the target's `data-coach-mark` attribute. */
+    id: string;
+    title: string;
+    body: string;
+};
+type CoachMarksLabels = {
+    /** "Step 2 of 4". */
+    progress: (step: number, total: number) => string;
+    back: string;
+    next: string;
+    /** The last stop's forward action, e.g. "Done". */
+    done: string;
+    skip: string;
+};
+type CoachMarksProps = {
+    open: boolean;
+    stops: CoachMarkStop[];
+    /** Skip, Done, Escape and a tap on the dimmed page all end here. */
+    onClose: () => void;
+    /**
+     * 1-based position, the count of stops the page actually has, and the
+     * stop being shown — its id is what a consumer remembers, since the
+     * position shifts when a stop's target is missing.
+     */
+    onProgress?: (step: number, total: number, stop: CoachMarkStop) => void;
+    labels: CoachMarksLabels;
+    className?: string;
+};
+declare function CoachMarks({ open, stops, onClose, onProgress, labels, className }: CoachMarksProps): React.ReactPortal | null;
+
+export { type CoachMarkStop, CoachMarks, type CoachMarksLabels, type CoachMarksProps };

package/dist/components/coach-marks.js

@@ -0,0 +1,162 @@
+import { Button } from '../chunk-5LTILG3L.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';
+import { useState, useLayoutEffect, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Lightbulb, ArrowRight } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PAD = 8;
+var CALLOUT_WIDTH = 320;
+var CALLOUT_GAP = 14;
+var CALLOUT_ROOM = 280;
+var EDGE = 12;
+var PIN = "pointer-events-none absolute z-[1] flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-[oklch(0.26_0.03_60)] text-[13px] font-extrabold text-[oklch(0.82_0.15_85)] ring-2 ring-[oklch(0.82_0.15_85)] shadow-[0_2px_8px_oklch(0.16_0.012_55_/_0.45)] transition-[top,left] duration-300 motion-reduce:transition-none";
+function findTarget(id) {
+  if (typeof document === "undefined") return null;
+  const candidates = document.querySelectorAll(`[data-coach-mark="${id}"]`);
+  for (const candidate of candidates) {
+    if (candidate.getClientRects().length > 0) return candidate;
+  }
+  return null;
+}
+function measure(element) {
+  const box = element.getBoundingClientRect();
+  return { top: box.top, left: box.left, width: box.width, height: box.height };
+}
+function CoachMarks({ open, stops, onClose, onProgress, labels, className }) {
+  const [available, setAvailable] = useState([]);
+  const [index, setIndex] = useState(0);
+  const [rect, setRect] = useState(null);
+  const [viewport, setViewport] = useState({ width: 0, height: 0 });
+  const itinerary = stops.map((stop) => stop.id).join("|");
+  useLayoutEffect(() => {
+    if (!open) return;
+    const present = stops.filter((stop) => findTarget(stop.id));
+    setAvailable(present);
+    setIndex(0);
+    if (present.length === 0) onClose();
+  }, [open, itinerary]);
+  const current = available[index];
+  const currentId = current == null ? void 0 : current.id;
+  const remeasure = useCallback(() => {
+    const element = currentId ? findTarget(currentId) : null;
+    setRect(element ? measure(element) : null);
+    setViewport({ width: window.innerWidth, height: window.innerHeight });
+  }, [currentId]);
+  useLayoutEffect(() => {
+    if (!open || !current) return;
+    const element = findTarget(current.id);
+    if (!element) {
+      const forward = available.findIndex((stop, at) => at > index && findTarget(stop.id));
+      if (forward !== -1) setIndex(forward);
+      else onClose();
+      return;
+    }
+    element.scrollIntoView({ block: "center", behavior: "smooth", inline: "nearest" });
+    remeasure();
+    const settle = setTimeout(remeasure, 400);
+    return () => clearTimeout(settle);
+  }, [open, current, index, available, remeasure, onClose]);
+  useEffect(() => {
+    if (!open || !current) return;
+    onProgress == null ? void 0 : onProgress(index + 1, available.length, current);
+  }, [open, current, index, available.length, onProgress]);
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener("resize", remeasure);
+    window.addEventListener("scroll", remeasure, true);
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+      if (event.key === "ArrowRight") setIndex((at) => Math.min(at + 1, available.length - 1));
+      if (event.key === "ArrowLeft") setIndex((at) => Math.max(at - 1, 0));
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("resize", remeasure);
+      window.removeEventListener("scroll", remeasure, true);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open, remeasure, onClose, available.length]);
+  if (!open || !current || !rect) return null;
+  const last = index === available.length - 1;
+  const spot = {
+    top: rect.top - PAD,
+    left: rect.left - PAD,
+    width: rect.width + PAD * 2,
+    height: rect.height + PAD * 2
+  };
+  const roomBelow = viewport.height - (spot.top + spot.height);
+  const calloutLeft = Math.min(
+    Math.max(spot.left, EDGE),
+    Math.max(EDGE, viewport.width - CALLOUT_WIDTH - EDGE)
+  );
+  const calloutPlace = roomBelow > CALLOUT_ROOM ? { top: spot.top + spot.height + CALLOUT_GAP, left: calloutLeft } : spot.top > CALLOUT_ROOM ? { bottom: viewport.height - spot.top + CALLOUT_GAP, left: calloutLeft } : { bottom: EDGE, left: calloutLeft };
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("fixed inset-0 z-[80]", className),
+        role: "dialog",
+        "aria-modal": true,
+        "aria-label": current.title,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.skip,
+              onClick: onClose,
+              className: "absolute inset-0 cursor-default"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute rounded-[18px] shadow-[0_0_0_9999px_oklch(0.16_0.012_55_/_0.55)] ring-2 ring-[oklch(0.82_0.15_85)] transition-[top,left,width,height] duration-300 motion-reduce:transition-none",
+              style: spot
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: PIN, style: { top: rect.top - 2, left: rect.left - 2 }, children: index + 1 }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute z-[2] w-[min(320px,calc(100vw-24px))] rounded-2xl border border-border bg-card p-4 text-card-foreground shadow-xl",
+              style: calloutPlace,
+              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-[10.5px] 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("p", { className: "mt-3 text-[15px] font-bold 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: "sm", onClick: () => setIndex(index - 1), children: labels.back }),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      type: "button",
+                      size: "sm",
+                      onClick: () => last ? onClose() : setIndex(index + 1),
+                      children: [
+                        last ? labels.done : labels.next,
+                        !last && /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", className: "ml-auto", onClick: onClose, children: labels.skip })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+export { CoachMarks };

package/dist/components/combobox.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandLoading, 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/command.d.ts

@@ -4,11 +4,11 @@ import { DialogProps } from '@radix-ui/react-dialog';
 
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -28,61 +28,61 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/concept-compare-rail.js

@@ -1,5 +1,5 @@
-export { ConceptCompareRail } from '../chunk-ZLPWEHZO.js';
-import '../chunk-WYTJR2YU.js';
-import '../chunk-CNJQUHCU.js';
+export { ConceptCompareRail } from '../chunk-EQYB4Q77.js';
+import '../chunk-5CPBSNWQ.js';
+import '../chunk-SWD6CJ35.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/concept-compare.js

@@ -1,7 +1,7 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
-import { ConceptCompareRail } from '../chunk-ZLPWEHZO.js';
-import '../chunk-WYTJR2YU.js';
-import { PhotoGround, PHOTO_GROUND } from '../chunk-CNJQUHCU.js';
+import { ConceptCompareRail } from '../chunk-EQYB4Q77.js';
+import '../chunk-5CPBSNWQ.js';
+import { PhotoGround, PHOTO_GROUND } from '../chunk-SWD6CJ35.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';

package/dist/components/concept-convergence.js

@@ -1,7 +1,7 @@
-import { PhotoGround } from '../chunk-CNJQUHCU.js';
+import { PhotoGround } from '../chunk-SWD6CJ35.js';
 import { Convergence } from '../chunk-4XDJXMLF.js';
 import '../chunk-OIV7B44M.js';
-import { Badge } from '../chunk-P43B3ONY.js';
+import { Badge } from '../chunk-5XREWOBB.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/components/doorway-tiles.d.ts

@@ -33,6 +33,17 @@ type DoorwayTile = {
     gradient?: string;
     /** Pre-resolved photograph of the CLASS, from the consumer's own origin. */
     photoUrl?: string;
+    /**
+     * A glyph in the photograph's place — for a tile about an ACTION, not a
+     * thing. A search door has no class to photograph, and any subject put on
+     * it (a table, a lens, a book) reads as one more family; the initial the
+     * fallback draws is a family's initial too. So the print holds the glyph
+     * instead, on the photo ground with the photo fallback's drop shadow, and
+     * the tile keeps its siblings' silhouette. Wins over `photoUrl`.
+     *
+     * A node rather than a name: the app owns its iconography.
+     */
+    icon?: React.ReactNode;
 };
 type DoorwayTilesTreatment = "polaroid" | "ground";
 type DoorwayTilesProps = {

package/dist/components/doorway-tiles.js

@@ -1,4 +1,4 @@
-import { PhotoGround } from '../chunk-CNJQUHCU.js';
+import { PHOTO_GROUND, PHOTO_GLYPH_SHADOW, PhotoGround } from '../chunk-SWD6CJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -13,6 +13,8 @@ var SCRIM = "after:pointer-events-none after:absolute after:inset-x-0 after:bott
 var GROUND_PHOTO = "absolute inset-0 z-0 h-full w-full object-cover mix-blend-multiply transition-transform duration-500 ease-out group-hover:scale-[1.04] motion-reduce:transition-none motion-reduce:group-hover:scale-100";
 var GROUND_LIFT = "absolute inset-0 z-0 opacity-[0.22]";
 var GROUND_GLYPH = "absolute inset-0 z-0 flex items-center justify-center font-serif text-[64px] font-semibold leading-none text-white/15";
+var PRINT_ICON = `absolute inset-0 flex items-center justify-center ${PHOTO_GROUND} text-white/90 [&_svg]:h-[44%] [&_svg]:w-[44%] [&_svg]:${PHOTO_GLYPH_SHADOW}`;
+var GROUND_ICON = "absolute inset-0 z-0 flex items-center justify-center text-white/15 [&_svg]:h-[40%] [&_svg]:w-[40%]";
 function DoorwayTiles({
   tiles,
   all,
@@ -31,7 +33,7 @@ function DoorwayTiles({
         className: cn(TILE, SCRIM),
         style: ground,
         children: [
-          isPolaroid ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: POLAROID, children: tile.photoUrl ? (
+          isPolaroid ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: POLAROID, children: tile.icon ? /* @__PURE__ */ jsx("span", { className: PRINT_ICON, children: tile.icon }) : tile.photoUrl ? (
             /* Not lazy: the grid sits directly under the hero, and these
                photographs are the first thing the reader looks at. */
             // eslint-disable-next-line @next/next/no-img-element
@@ -52,7 +54,7 @@ function DoorwayTiles({
               mode: "stack",
               glyphClassName: "text-[44px]"
             }
-          ) }) : tile.photoUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          ) }) : tile.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: GROUND_ICON, children: tile.icon }) : tile.photoUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("img", { src: tile.photoUrl, alt: "", decoding: "async", className: GROUND_PHOTO }),
             /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: GROUND_LIFT, style: ground })
           ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: GROUND_GLYPH, children: tile.label.charAt(0) }),

package/dist/components/empty-state.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 { Text } from '../chunk-ZLMRVBD7.js';

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

@@ -37,8 +37,22 @@ type EventCardProps = {
      * `Coverflow`) — it crops less than `3/4` and is not the same as it.
      */
     posterAspect?: "4/3" | "3/4" | "4/5";
-    /** Larger title — the featured/highlight slot. Never a clamp: the title wraps in full either way. */
-    emphasis?: boolean;
+    /**
+     * Larger title — the featured/highlight slot. Never a clamp: the title
+     * wraps in full either way. `"lg"` applies it from the `lg` breakpoint
+     * only: the timeline's day hero is an ordinary card in the phone column and
+     * the lane's feature poster on desktop, one node.
+     */
+    emphasis?: boolean | "lg";
+    /**
+     * `card` (default) at every width. `row-lg`: the card below `lg`, and from
+     * `lg` the compact row `EventCompactRow` draws — a 64px portrait poster
+     * beside the text, overlay pills off, the fee as a chip on the tags row.
+     * The timeline demotes an hour's later events to rows on desktop only, and
+     * a server render cannot swap components per viewport; this is the one
+     * node that paints both.
+     */
+    density?: "card" | "row-lg";
     /** Top-left overlay pill (the design's "Busy" hype marker). Include its icon. */
     badge?: React.ReactNode;
     /** Bottom-left overlay pill naming the category. Include its icon. */
@@ -59,8 +73,12 @@ type EventCardProps = {
      * locale, and "is this live" depends on the app's clock, not the DS's.
      */
     liveStatus?: string;
-    /** Hide the day/time line — the timeline supplies its own hour heading. */
-    hideWhen?: boolean;
+    /**
+     * Hide the day/time line — the timeline supplies its own hour heading.
+     * `"below-lg"` hides it on the phone only: the desktop lane's hero sits
+     * beside whatever hour is passing and has to carry its own start time.
+     */
+    hideWhen?: boolean | "below-lg";
     /**
      * Already over — dims the poster, mutes the title and shows the `endedLabel`
      * chip. Never row-level opacity, which composites the text below AA. Same