@bearmenu/ui 0.8.9 → 0.8.10

package/dist/chunk-MZL7CGCL.js

@@ -0,0 +1,109 @@
+import { stagger, ease, duration, springSnappy } from './chunk-LEAYBICI.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import { __spreadValues, __spreadProps } from './chunk-3GWWZKX7.js';
+import { motion, useReducedMotion } from 'framer-motion';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LINE_LEAD = 0.15;
+var TARGET_DELAY = 0.38;
+var sourcesContainer = {
+  hidden: {},
+  show: { transition: { delayChildren: 0.06, staggerChildren: stagger.tight } }
+};
+var sourceItem = {
+  hidden: { opacity: 0, x: -8 },
+  show: { opacity: 1, x: 0, transition: { duration: duration.quick, ease: ease.enter } }
+};
+var targetItem = {
+  hidden: { opacity: 0, scale: 0.92 },
+  show: { opacity: 1, scale: 1, transition: __spreadValues({ delay: TARGET_DELAY }, springSnappy) }
+};
+var LINES_WIDTH = 40;
+var LINES_HEIGHT = 100;
+function ConvergeLines({ count, animate = true, className }) {
+  const mid = LINES_HEIGHT / 2;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: `0 0 ${LINES_WIDTH} ${LINES_HEIGHT}`,
+      preserveAspectRatio: "none",
+      className: cn("h-full w-10 text-border", className),
+      children: Array.from({ length: count }, (_, index) => {
+        const y = (index + 0.5) / count * LINES_HEIGHT;
+        const d = `M0 ${y} C ${LINES_WIDTH / 2} ${y}, ${LINES_WIDTH / 2} ${mid}, ${LINES_WIDTH} ${mid}`;
+        const stroke = {
+          d,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          vectorEffect: "non-scaling-stroke"
+        };
+        return animate ? /* @__PURE__ */ jsx(
+          motion.path,
+          __spreadProps(__spreadValues({}, stroke), {
+            initial: { pathLength: 0, opacity: 0 },
+            animate: { pathLength: 1, opacity: 1 },
+            transition: {
+              delay: LINE_LEAD + index * stagger.tight,
+              duration: duration.standard,
+              ease: ease.standard
+            }
+          }),
+          index
+        ) : /* @__PURE__ */ jsx("path", __spreadValues({}, stroke), index);
+      })
+    }
+  );
+}
+function Convergence({
+  sources,
+  target,
+  animate = true,
+  linesClassName,
+  className
+}) {
+  const reduce = useReducedMotion();
+  const run = animate && !reduce;
+  const fadeOnly = animate && reduce;
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: cn("grid grid-cols-[minmax(0,1fr)_auto_auto] items-center", className),
+      initial: fadeOnly ? { opacity: 0 } : false,
+      animate: fadeOnly ? { opacity: 1 } : void 0,
+      transition: { duration: duration.quick, ease: ease.standard },
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: cn(
+              "flex min-w-0 flex-col items-start justify-center gap-2 py-1",
+              /* The fan: the middle sources sit a little further right than the
+                 ends, so five chips read as one hand of cards, not as a menu. */
+              "[&>*:nth-child(2)]:translate-x-1.5 [&>*:nth-child(3)]:translate-x-3 [&>*:nth-child(4)]:translate-x-1.5"
+            ),
+            variants: run ? sourcesContainer : void 0,
+            initial: run ? "hidden" : false,
+            animate: run ? "show" : void 0,
+            children: sources.map((node, index) => /* @__PURE__ */ jsx(motion.div, { className: "flex max-w-full", variants: run ? sourceItem : void 0, children: node }, index))
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "self-stretch", children: /* @__PURE__ */ jsx(ConvergeLines, { count: sources.length, animate: run, className: linesClassName }) }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "flex items-center",
+            variants: run ? targetItem : void 0,
+            initial: run ? "hidden" : false,
+            animate: run ? "show" : void 0,
+            children: target
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ConvergeLines, Convergence };

package/dist/chunk-SY6RV476.js

@@ -0,0 +1,48 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { __spreadProps, __spreadValues } from './chunk-3GWWZKX7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var STOPS = [0, 0.25, 0.5, 0.75, 1];
+var EASE = [0, 0.06, 0.25, 0.56, 1];
+var FROST_SOFT = "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s0),rgba(0,0,0,0.25)_var(--glass-s1),black_var(--glass-s2))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s0),rgba(0,0,0,0.25)_var(--glass-lg-s1),black_var(--glass-lg-s2))]";
+var FROST_HEAVY = "[mask-image:linear-gradient(var(--glass-dir),transparent_var(--glass-s1),rgba(0,0,0,0.25)_var(--glass-s2),rgba(0,0,0,0.6)_var(--glass-s3),black_var(--glass-s4))] lg:[mask-image:linear-gradient(var(--glass-lg-dir),transparent_var(--glass-lg-s1),rgba(0,0,0,0.25)_var(--glass-lg-s2),rgba(0,0,0,0.6)_var(--glass-lg-s3),black_var(--glass-lg-s4))]";
+var INK = "bg-[linear-gradient(var(--glass-dir),oklch(0.16_0.012_55_/_0)_var(--glass-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)] lg:bg-[linear-gradient(var(--glass-lg-dir),oklch(0.16_0.012_55_/_0)_var(--glass-lg-s0),oklch(0.16_0.012_55_/_var(--glass-a1))_var(--glass-lg-s1),oklch(0.16_0.012_55_/_var(--glass-a2))_var(--glass-lg-s2),oklch(0.16_0.012_55_/_var(--glass-a3))_var(--glass-lg-s3),oklch(0.16_0.012_55_/_var(--glass-a4))_var(--glass-lg-s4),oklch(0.16_0.012_55_/_var(--glass-a-peak))_100%)]";
+var BLUR = {
+  sm: ["backdrop-blur-[2px]", "backdrop-blur-sm"],
+  md: ["backdrop-blur-sm", "backdrop-blur-md"],
+  lg: ["backdrop-blur-md", "backdrop-blur-lg"],
+  xl: ["backdrop-blur-lg", "backdrop-blur-xl"]
+};
+function measure(value) {
+  const match = value.trim().match(/^(-?\d*\.?\d+)\s*([a-z%]*)$/i);
+  if (!match) throw new Error(`GlassGround: cannot read stop "${value}"`);
+  return [Number(match[1]), match[2] || "px"];
+}
+function positions(clear, full) {
+  const [from, unit] = measure(clear);
+  const [to] = measure(full);
+  return STOPS.map((fraction) => `${from + (to - from) * fraction}${unit}`);
+}
+function GlassGround({
+  stops,
+  lgStops = stops,
+  peak = 0.96,
+  blur = "xl",
+  className
+}) {
+  const base = positions(stops.clear, stops.full);
+  const lg = positions(lgStops.clear, lgStops.full);
+  const style = __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+    "--glass-dir": stops.direction,
+    "--glass-lg-dir": lgStops.direction
+  }, Object.fromEntries(base.map((position, index) => [`--glass-s${index}`, position]))), Object.fromEntries(lg.map((position, index) => [`--glass-lg-s${index}`, position]))), Object.fromEntries(EASE.slice(1).map((share, index) => [`--glass-a${index + 1}`, String(peak * 0.8 * share)]))), {
+    "--glass-a-peak": String(peak)
+  });
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-0 block", className), style, children: [
+    /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0", BLUR[blur][0], FROST_SOFT) }),
+    /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0", BLUR[blur][1], FROST_HEAVY) }),
+    /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0", INK) })
+  ] });
+}
+
+export { GlassGround };

package/dist/chunk-UDN7UHJW.js

@@ -0,0 +1,60 @@
+import { SnapRail, SnapRailDots } from './chunk-DTXNDLSE.js';
+import { PhotoGround } from './chunk-5RWTOT5Y.js';
+import { cn } from './chunk-FEK5XGZW.js';
+import * as React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var FOOT_GLASS = cn(
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:backdrop-blur-lg",
+  "before:bg-[oklch(0.16_0.012_55_/_0.9)]",
+  "lg:before:[mask-image:linear-gradient(to_top,black_60%,transparent_100%)] lg:before:bg-[linear-gradient(to_top,oklch(0.16_0.012_55_/_0.88)_0%,oklch(0.16_0.012_55_/_0.84)_60%,oklch(0.16_0.012_55_/_0.4)_85%,oklch(0.16_0.012_55_/_0)_100%)]"
+);
+function ConceptCompareRail({
+  backdrops,
+  railClassName,
+  foot,
+  children
+}) {
+  const [active, setActive] = React.useState(0);
+  const count = React.Children.count(children);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PhotoGround,
+      {
+        className: "-z-10 lg:hidden",
+        mode: "stack",
+        active,
+        photos: backdrops.map((backdrop) => backdrop.src),
+        initials: backdrops.map((backdrop) => backdrop.initial),
+        overlay: true,
+        loading: "eager"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SnapRail,
+      {
+        itemWidth: "full",
+        gap: "sm",
+        onActiveChange: setActive,
+        className: cn("pb-0 overscroll-x-contain", railClassName),
+        children
+      }
+    ),
+    foot && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative isolate flex flex-col gap-3 px-4 pb-4 pt-3",
+          "lg:absolute lg:inset-x-0 lg:bottom-0 lg:z-10 lg:flex-row lg:items-center lg:gap-5 lg:px-5 lg:pb-4 lg:pt-6",
+          FOOT_GLASS
+        ),
+        children: [
+          /* @__PURE__ */ jsx(SnapRailDots, { count, active, className: "lg:hidden" }),
+          foot
+        ]
+      }
+    )
+  ] });
+}
+
+export { ConceptCompareRail };

package/dist/{chunk-TT3WFS6S.js → chunk-YOKHBAIH.js}

@@ -1,4 +1,4 @@
-import { beats, returnTransition, MotionIcon } from './chunk-2WDJR6K7.js';
+import { beats, returnTransition, MotionIcon, pivot } from './chunk-G7IFL4Z4.js';
 import { __spreadProps, __spreadValues } from './chunk-3GWWZKX7.js';
 import { motion } from 'framer-motion';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -19,7 +19,7 @@ function MotionHeart(props) {
     motion.path,
     {
       variants: heartBody,
-      style: { originX: "12px", originY: "13px" },
+      style: pivot(12, 13),
       fill: "currentColor",
       fillOpacity: 0,
       d: "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
@@ -43,7 +43,7 @@ function MotionBookmark(props) {
     motion.path,
     {
       variants: bookmarkBody,
-      style: { originX: "12px", originY: "21px" },
+      style: pivot(12, 21),
       fill: "currentColor",
       fillOpacity: 0,
       d: "M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"
@@ -89,7 +89,7 @@ var found = {
   }
 };
 function MotionSearch(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: lens, style: { originX: "21px", originY: "21px" }, children: [
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: lens, style: pivot(21, 21), children: [
     /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
     /* @__PURE__ */ jsx("path", { d: "m21 21-4.34-4.34" }),
     /* @__PURE__ */ jsx(
@@ -97,7 +97,7 @@ function MotionSearch(props) {
       {
         variants: found,
         opacity: 0,
-        style: { originX: "11px", originY: "11px" },
+        style: pivot(11, 11),
         fill: "currentColor",
         cx: "11",
         cy: "11",
@@ -207,7 +207,7 @@ var crescent = {
   }
 };
 function MotionTheme(props) {
-  const origin = { originX: "12px", originY: "12px" };
+  const origin = pivot(12, 12);
   return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
     /* @__PURE__ */ jsx(motion.g, { variants: rays, style: origin, children: SUN_RAYS.map((d) => /* @__PURE__ */ jsx("path", { d }, d)) }),
     /* @__PURE__ */ jsx(motion.circle, { variants: disc, style: origin, cx: "12", cy: "12", r: "4" }),
@@ -232,7 +232,7 @@ var chevron = {
   }
 };
 function MotionChevron(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(motion.path, { variants: chevron, style: { originX: "12px", originY: "12px" }, d: "m6 9 6 6 6-6" }) }));
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx(motion.path, { variants: chevron, style: pivot(12, 12), d: "m6 9 6 6 6-6" }) }));
 }
 var PLAYPAUSE_TIMES = [0, 0.24, 0.72, 1];
 var playHead = {
@@ -255,7 +255,7 @@ function pauseBar(dx) {
 var barLeft = pauseBar(5);
 var barRight = pauseBar(-5);
 function MotionPlayPause(props) {
-  const origin = { originX: "12px", originY: "12px" };
+  const origin = pivot(12, 12);
   return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
     /* @__PURE__ */ jsx(
       motion.path,
@@ -290,7 +290,7 @@ var slash = {
   }
 };
 function MotionEye(props) {
-  const origin = { originX: "12px", originY: "12px" };
+  const origin = pivot(12, 12);
   return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
     /* @__PURE__ */ jsx(
       motion.path,
@@ -320,7 +320,7 @@ function MotionStar(props) {
     motion.path,
     {
       variants: starBody,
-      style: { originX: "12px", originY: "12px" },
+      style: pivot(12, 12),
       fill: "currentColor",
       fillOpacity: 0,
       d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
@@ -368,7 +368,7 @@ var refreshRing = {
   }
 };
 function MotionRefresh(props) {
-  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: refreshRing, style: { originX: "12px", originY: "12px" }, children: [
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: refreshRing, style: pivot(12, 12), children: [
     /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
     /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
     /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),

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?: "default" | "secondary" | "destructive" | "outline" | "overlay" | "glass" | "success" | "warning" | "brown" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "success" | "warning" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "overlay" | "glass" | "brown" | "link" | "ghost" | "antagonist" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "brown" | "antagonist" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/command.d.ts

@@ -8,7 +8,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -38,7 +38,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -47,14 +47,14 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & 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>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -64,7 +64,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -73,7 +73,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -82,7 +82,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "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.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * ConceptCompareRail — the rooms as a rail, the card's backdrop following the
+ * active room, and the foot band that carries the page dots.
+ *
+ * On the phone the card IS the current room's photograph: the head, the rail
+ * and the foot all sit on it, and it cross-fades to the next room as the
+ * reader swipes. That needs the rail's active index, which is state — so this
+ * is the one client boundary in `ConceptCompare`. It takes only what can cross
+ * that boundary: photograph URLs, initials, and the pre-rendered rooms and
+ * foot as children. `labels`, `formatPrice` and the rest stay server-side.
+ *
+ * ## Why the backdrop lives here and not in each slide
+ *
+ * A slide carrying its own photograph is a boxed card sliding over a dark
+ * ground; the backdrop changing under a transparent slide is the reader
+ * turning to look at the next room. The second is the smoother thing, and it
+ * is also cheaper to look at — one photograph at a time instead of the edge of
+ * the next one peeking in.
+ *
+ * ## Why the foot is here too
+ *
+ * The dots need the rail's state, and on the phone they belong INSIDE the foot
+ * band's glass — under the rail they sat on a strip of bare photograph between
+ * the room's scrim and the foot's. So the foot renders here, with the dots as
+ * its first row below `lg`, and `ConceptCompare` hands it the foot's content.
+ *
+ * Desktop ignores the backdrop and the dots (`lg:hidden`); each room carries
+ * its own photograph there, side by side, and the foot is an absolute glass
+ * band over them.
+ */
+type ConceptCompareBackdrop = {
+    /** The room's photograph. Absent: the ground with the venue's initial. */
+    src?: string;
+    /** The venue's first letter, for the no-photograph fallback. */
+    initial: string;
+};
+type ConceptCompareRailProps = {
+    backdrops: ConceptCompareBackdrop[];
+    /** Classes for the rail itself — the desktop grid lives here. */
+    railClassName?: string;
+    /** The foot's content: the note and the action. Omit for no foot. */
+    foot?: React.ReactNode;
+    children: React.ReactNode;
+};
+declare function ConceptCompareRail({ backdrops, railClassName, foot, children, }: ConceptCompareRailProps): react_jsx_runtime.JSX.Element;
+
+export { type ConceptCompareBackdrop, ConceptCompareRail, type ConceptCompareRailProps };

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

@@ -0,0 +1,5 @@
+export { ConceptCompareRail } from '../chunk-UDN7UHJW.js';
+import '../chunk-DTXNDLSE.js';
+import '../chunk-5RWTOT5Y.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

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

@@ -1,73 +1,110 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MenuItemLabels } from './menu-item.js';
 import { MenuConceptPreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
 import 'react';
 import './place-types.js';
 
 /**
- * ConceptCompare — one dish or drink across every kitchen that makes it, under
- * whatever name each of them uses.
+ * ConceptCompare — one dish or drink across the kitchens that make it, under
+ * whatever name each of them uses. No surfaces at all.
  *
  * The keystone module: a single menu can list papanași, only a catalogue can
- * say that seventy kitchens make them under fifty different names between 8 and
- * 44 lei. The alias column is what makes it honest — these are not the same row
- * seventy times, they are seventy differently-named rows we matched, and
- * showing each kitchen's own wording is the evidence for that.
+ * say that forty-five kitchens make them under eight names between 29 and 52
+ * lei. Each kitchen's own wording is the evidence that these are matched rows
+ * rather than one row repeated.
  *
- * ## The row is place-led
+ * ## The card IS the rooms
  *
- * Each row leads with the VENUE PHOTOGRAPH, which is real and licensed. It
- * replaced a price bar, and the trade is not close: the bar measured the one
- * value already printed beside it in words, while the thing a reader is
- * actually choosing between — the restaurant — had no image at all. Five
- * restaurants that disagree about a name is the story; five bars of similar
- * length is not.
+ * Every panel is gone. Each room is a VENUE photograph — real and licensed
+ * where an item's would be generated — with the kitchen's line floating over
+ * it, and the three readable things sit on glass: the identity in a band
+ * across the top, each kitchen's line over its own photograph, the foot along
+ * the bottom.
  *
- * ## Two layouts, one component
+ * ## Read across on desktop, one at a time on the phone
  *
- * From `lg` the row is a table: rank, venue, alias, mentions, price. Below it,
- * the rows become the production `<MenuItem>` — the alias as the name, the
- * venue underneath — because a five-column table does not survive 390px and
- * the item row already solves this exact shape everywhere else in the app.
+ * From `lg` the rooms stand side by side — four kitchens, each with its own
+ * name for the dish and its own price, so comparing is a horizontal glance —
+ * and the head and foot are ABSOLUTE glass bands over them, so the photographs
+ * run the full height of the card beneath both. The head's glass fades out
+ * downward on the same curve as its mask; the foot's fades out upward the same
+ * way. It was the ink stopping short of the mask that drew a line where a band
+ * ended.
+ *
+ * Below `lg` four rooms in a 2×2 was too much happening in one card, so the
+ * rooms become a `SnapRail`: one room per swipe, page dots under it, the head
+ * and foot static on the card's ground above and below. The dots are the
+ * rail's own — the same object the hub's other rails use.
+ *
+ * ## The dark overlay, and the hover that lifts it
+ *
+ * Four busy interiors are four competing subjects, and type over them had
+ * nothing to sit on but its own local scrim — the eye could not settle. Every
+ * photograph carries a uniform dark overlay so the words lead and the picture
+ * supports; hovering a room lifts the overlay off THAT room only, so the reader
+ * can look at the place they are about to open.
+ *
+ * ## Light and dark
+ *
+ * There is nothing in it to theme. Photographs and their scrims are identical
+ * in both, because text over an image needs the same treatment either way —
+ * the content is `.dark`-scoped for exactly that. What adapts is the card's
+ * EDGE: a soft shadow and hairline on light, a deeper shadow and a light
+ * hairline on dark. The edge lives on the outer wrapper, outside the scope.
+ *
+ * ## No room here is a room that does not serve it
+ *
+ * The earlier card led with an AI-generated picture of the dish, and a
+ * generated image at the head of a block whose whole argument is "we counted
+ * real menus" undercut the argument. The rooms are real.
  */
 /** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
 type ConceptCompareLinkProps = MenuLinkProps;
 type ConceptCompareFigure = {
-    /** Pre-formatted, e.g. "44". */
+    /** Pre-formatted, e.g. "44" or "29–52". */
     value: string;
     label: string;
+    /** Draws the value in amber — the spread, which is the number the card is about. */
+    accent?: boolean;
 };
 type ConceptCompareLabels = {
     /** Small caps kicker, e.g. "DISH CONCEPT". */
     kind: string;
-    /** Column heading over the aliases, e.g. "ON THEIR MENU AS". */
-    alias: string;
-    /** Under each price, e.g. "per portion". */
-    perPortion?: string;
-    /** Badge on the lowest-priced row, e.g. "cheapest shown". */
-    cheapest?: string;
+    /** The badge on the lowest-priced room, e.g. "CHEAPEST". */
+    cheapest: string;
+    /** The badge on every other room, e.g. "#2". Defaults to `#${rank}`. */
+    rank?: (rank: number) => string;
+    /** Beside each price, e.g. "12 mentions". Pluralised by the caller. */
+    mentions: (count: number) => string;
+    /** Accessible name for a room's link, e.g. "Papanași at Casa Maramureșeană". */
+    openRoom: (alias: string, venue: string) => string;
 };
 type ConceptCompareProps = {
     concept: MenuConceptPreview;
     labels: ConceptCompareLabels;
-    /** Passed to the mobile `<MenuItem>` rows. */
-    itemLabels: MenuItemLabels;
+    /** One line under the title, e.g. "45 kitchens make it, and they do not agree on the name". */
+    lede?: string;
     formatPrice: (amount: number) => string;
-    formatCount?: (value: number) => string;
-    /** CSS gradient for the header swatch, when there is no photograph. */
-    gradient: string;
-    /** A real photograph of the concept, when the matched menu row carries one. */
-    imageUrl?: string;
     figures?: ConceptCompareFigure[];
-    /** Destination per row, keyed by place slug. */
+    /** Destination per room, keyed by place slug. A room without one is inert. */
     hrefs?: Record<string, string>;
-    /** The provenance note in the footer. */
+    /** The provenance note in the foot. */
     footnote?: string;
-    /** Actions in the footer — pass rendered links or buttons. */
+    /** The action in the foot — pass a rendered link or button. */
     actions?: React.ReactNode;
     linkComponent?: MenuLinkComponent;
     className?: string;
 };
-declare function ConceptCompare({ concept, labels, itemLabels, formatPrice, formatCount, gradient, imageUrl, figures, hrefs, footnote, actions, linkComponent: LinkComponent, className, }: ConceptCompareProps): react_jsx_runtime.JSX.Element;
+declare function ConceptCompare({ concept, labels, lede, formatPrice, figures, hrefs, footnote, actions, linkComponent: LinkComponent, className, }: ConceptCompareProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * The card's own loading state, at the card's footprint.
+ *
+ * The ground is the card's own dark surface, so the placeholder is already
+ * what the photographs will land on and nothing flashes from paper to ink.
+ * The phone shape is one room tall with the head above and the foot below;
+ * from `lg` it is the four-room row with the head and foot laid over it.
+ */
+declare function ConceptCompareSkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
-export { ConceptCompare, type ConceptCompareFigure, type ConceptCompareLabels, type ConceptCompareLinkProps, type ConceptCompareProps };
+export { ConceptCompare, type ConceptCompareFigure, type ConceptCompareLabels, type ConceptCompareLinkProps, type ConceptCompareProps, ConceptCompareSkeleton };