@bearmenu/ui 0.8.7 → 0.8.9

package/dist/chunk-YS6BHKZO.js

@@ -0,0 +1,92 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { jsx } from 'react/jsx-runtime';
+
+var GHOST_ROWS = 13;
+var GHOST_CENTRE = (GHOST_ROWS - 1) / 2;
+var ALPHA_PEAK = 0.44;
+var ALPHA_EDGE = 0;
+var FALLOFF_EXPONENT = 3.4;
+var GHOST_LINE_CHARS = 56;
+function hashString(input) {
+  let hash = 5381;
+  for (let i = 0; i < input.length; i++) hash = hash * 33 ^ input.charCodeAt(i);
+  return Math.abs(hash);
+}
+function MenuField({
+  name,
+  gradient,
+  seedKey,
+  variant = "repeat",
+  className
+}) {
+  if (variant === "display") {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    const longestWord = Math.max(1, ...words.map((word) => word.length));
+    const lineCount = Math.max(1, words.length);
+    const byWidth = (96 / (longestWord * 0.62)).toFixed(1);
+    const byHeight = (90 / (lineCount * 0.9)).toFixed(1);
+    const fontSize = `clamp(9cqw, min(19cqw, ${byWidth}cqw, ${byHeight}cqh), 19cqw)`;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("relative isolate overflow-hidden", className),
+        style: { backgroundImage: gradient, containerType: "size" },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 flex select-none items-center justify-center p-[4cqw] text-center font-black uppercase leading-[0.9] tracking-[-0.03em] text-white/[0.26]",
+            style: { fontSize },
+            children: name
+          }
+        )
+      }
+    );
+  }
+  const unit = `${name} \xB7 `;
+  const repeats = Math.max(2, Math.ceil(GHOST_LINE_CHARS / Math.max(unit.length, 1)));
+  const ghostLine = unit.repeat(repeats);
+  const seed = hashString(seedKey != null ? seedKey : name);
+  const rows = Array.from({ length: GHOST_ROWS }, (_, row) => {
+    const distance = Math.abs(row - GHOST_CENTRE) / GHOST_CENTRE;
+    const alpha = ALPHA_EDGE + (ALPHA_PEAK - ALPHA_EDGE) * Math.pow(1 - distance, FALLOFF_EXPONENT);
+    return { row, alpha, offset: (seed >> row % 12) % 90 - 45 };
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative isolate overflow-hidden", className),
+      style: { backgroundImage: gradient },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute left-1/2 top-1/2 flex h-[180%] w-[180%] -translate-x-1/2 -translate-y-1/2 -rotate-[11deg] select-none flex-col justify-center",
+          children: rows.map(({ row, alpha, offset }) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "block whitespace-nowrap text-center text-[15px] font-bold leading-[1.45] tracking-[-0.01em]",
+              style: {
+                color: `oklch(1 0 0 / ${alpha.toFixed(3)})`,
+                // Emboss, both edges scaled by this row's alpha: a dark edge below
+                // cuts the letterform into the field, a light edge above lifts its
+                // top. The dark edge is kept well under the fill — at parity it
+                // ringed every glyph and dragged the type back toward grey, which
+                // is the opposite of what the fill is doing.
+                textShadow: [
+                  `0 1px 1px oklch(0 0 0 / ${(alpha * 0.4).toFixed(3)})`,
+                  `0 -1px 0 oklch(1 0 0 / ${(alpha * 0.4).toFixed(3)})`
+                ].join(", "),
+                transform: `translateX(${offset}px)`
+              },
+              children: ghostLine
+            },
+            row
+          ))
+        }
+      )
+    }
+  );
+}
+
+export { MenuField };

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" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "success" | "warning" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "overlay" | "glass" | "success" | "warning" | "brown" | 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?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "brown" | "antagonist" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "overlay" | "glass" | "brown" | "link" | "ghost" | "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/category-deck.js

@@ -57,7 +57,10 @@ function CategoryDeck({
         {
           className: cn(
             "absolute left-1/2 top-0 aspect-[4/5] w-24 overflow-hidden rounded-[10px] bg-muted",
+            // Keyed to --foreground so the shadow is ink in light mode; in
+            // dark mode that same 18% is a light halo, so it drops to 7%.
             "shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_18%,transparent)]",
+            "dark:shadow-[0_10px_26px_color-mix(in_oklch,var(--foreground)_7%,transparent)]",
             "sm:w-[120px]",
             transform.rest,
             transform.spread,
@@ -86,7 +89,13 @@ function CategoryDeck({
         /* @__PURE__ */ jsx("div", { className: "truncate text-[14.5px] font-extrabold tracking-[-0.015em] sm:text-base", children: name }),
         /* @__PURE__ */ jsx("div", { className: "truncate font-mono text-[11.5px] text-muted-foreground", children: meta })
       ] }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": true })
+      /* @__PURE__ */ jsx(
+        ChevronRight,
+        {
+          className: "ml-auto h-4 w-4 shrink-0 text-muted-foreground",
+          "aria-hidden": true
+        }
+      )
     ] })
   ] });
   const rootClasses = cn(

package/dist/components/command.d.ts

@@ -8,7 +8,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     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" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     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" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & 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" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     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" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "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" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     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" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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

@@ -0,0 +1,73 @@
+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.
+ *
+ * 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.
+ *
+ * ## The row is place-led
+ *
+ * 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.
+ *
+ * ## Two layouts, one component
+ *
+ * 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.
+ */
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+type ConceptCompareLinkProps = MenuLinkProps;
+type ConceptCompareFigure = {
+    /** Pre-formatted, e.g. "44". */
+    value: string;
+    label: string;
+};
+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;
+};
+type ConceptCompareProps = {
+    concept: MenuConceptPreview;
+    labels: ConceptCompareLabels;
+    /** Passed to the mobile `<MenuItem>` rows. */
+    itemLabels: MenuItemLabels;
+    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. */
+    hrefs?: Record<string, string>;
+    /** The provenance note in the footer. */
+    footnote?: string;
+    /** Actions in the footer — pass rendered links or buttons. */
+    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;
+
+export { ConceptCompare, type ConceptCompareFigure, type ConceptCompareLabels, type ConceptCompareLinkProps, type ConceptCompareProps };

package/dist/components/concept-compare.js

@@ -0,0 +1,162 @@
+import { MenuItem } from '../chunk-TH6W2PWG.js';
+import '../chunk-Q6QH52LJ.js';
+import { MenuField } from '../chunk-YS6BHKZO.js';
+import '../chunk-UKBNQO6Q.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { Star, MessageSquare } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function ConceptCompare({
+  concept,
+  labels,
+  itemLabels,
+  formatPrice,
+  formatCount,
+  gradient,
+  imageUrl,
+  figures,
+  hrefs,
+  footnote,
+  actions,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  var _a;
+  const rows = (_a = concept.rows) != null ? _a : [];
+  const cheapest = rows.reduce(
+    (lowest, row) => lowest === void 0 || row.price < lowest ? row.price : lowest,
+    void 0
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("overflow-hidden rounded-[18px] border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:gap-6 lg:p-5", children: [
+      imageUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageUrl,
+            alt: "",
+            className: "aspect-[16/9] w-full shrink-0 rounded-xl object-cover lg:aspect-auto lg:h-[88px] lg:w-[88px]"
+          }
+        )
+      ) : /* @__PURE__ */ jsx(
+        MenuField,
+        {
+          name: concept.title,
+          gradient,
+          seedKey: concept.slug,
+          className: "aspect-[16/9] w-full shrink-0 rounded-xl lg:aspect-auto lg:h-[88px] lg:w-[88px]"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[9.5px] font-bold uppercase tracking-[0.12em] text-muted-foreground", children: labels.kind }),
+        /* @__PURE__ */ jsx("h3", { className: "mt-1 font-serif text-2xl font-semibold tracking-[-0.02em] lg:text-[30px]", children: concept.title })
+      ] }),
+      figures && figures.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 gap-6 lg:gap-8", children: figures.map((figure) => /* @__PURE__ */ jsxs("div", { className: "text-left lg:text-right", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xl font-extrabold leading-none tracking-[-0.03em] tabular-nums lg:text-2xl", children: figure.value }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-[10.5px] text-muted-foreground", children: figure.label })
+      ] }, figure.label)) })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "border-t border-border lg:hidden", children: rows.map((row) => /* @__PURE__ */ jsx("li", { className: "border-b border-border last:border-b-0", children: /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        item: {
+          id: row.place_slug,
+          slug: row.place_slug,
+          // The kitchen's OWN wording leads the row — that IS the point
+          // of the module.
+          name: row.alias,
+          kind: concept.kind,
+          mentions: row.mentions,
+          sizes_and_prices: [{ size: 0, price: row.price }]
+        },
+        labels: itemLabels,
+        formatPrice,
+        formatCount,
+        venueName: row.place_name,
+        href: hrefs == null ? void 0 : hrefs[row.place_slug],
+        linkComponent: LinkComponent,
+        className: cn(row.price === cheapest && "bg-accent-subtle/40")
+      }
+    ) }, row.place_slug)) }),
+    /* @__PURE__ */ jsx("ol", { className: "hidden border-t border-border lg:block", children: rows.map((row, index) => {
+      const isCheapest = row.price === cheapest;
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 text-center text-xs font-bold tabular-nums text-muted-foreground", children: index + 1 }),
+        /* @__PURE__ */ jsxs("span", { className: "relative h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]", children: [
+          row.place_thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: row.place_thumbnail_url,
+              alt: "",
+              loading: "lazy",
+              className: "h-full w-full object-cover"
+            }
+          ),
+          row.open_now && /* @__PURE__ */ jsx(
+            "i",
+            {
+              "aria-hidden": true,
+              className: "absolute right-0.5 top-0.5 h-[6px] w-[6px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 w-[200px] shrink-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-bold tracking-[-0.01em]", children: row.place_name }),
+          /* @__PURE__ */ jsxs("span", { className: "mt-px flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+            row.rating != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Star, { className: "h-2.5 w-2.5", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: row.rating })
+            ] }),
+            row.place_area && /* @__PURE__ */ jsx("span", { className: "truncate", children: row.place_area })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-[9.5px] font-bold uppercase tracking-[0.1em] text-muted-foreground", children: labels.alias }),
+          /* @__PURE__ */ jsx("span", { className: "block truncate font-serif text-[13px] italic", children: row.alias })
+        ] }),
+        row.mentions != null && row.mentions > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-[11px] tabular-nums text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(MessageSquare, { className: "h-[11px] w-[11px]", "aria-hidden": true }),
+          row.mentions
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "w-[92px] shrink-0 text-right", children: [
+          /* @__PURE__ */ jsx(
+            "b",
+            {
+              className: cn(
+                "block text-sm font-extrabold tabular-nums",
+                isCheapest && "text-[var(--free,currentColor)]"
+              ),
+              children: formatPrice(row.price)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "block text-[10px] text-muted-foreground", children: isCheapest && labels.cheapest ? labels.cheapest : labels.perPortion })
+        ] })
+      ] });
+      const rowClasses = "flex items-center gap-4 px-5 py-3";
+      return /* @__PURE__ */ jsx("li", { className: "border-b border-border last:border-b-0", children: (hrefs == null ? void 0 : hrefs[row.place_slug]) ? /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          href: hrefs[row.place_slug],
+          className: cn(
+            rowClasses,
+            "transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+          ),
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: rowClasses, children: content }) }, row.place_slug);
+    }) }),
+    (footnote || actions) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 p-4", children: [
+      footnote && /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-muted-foreground", children: footnote }),
+      actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
+    ] })
+  ] });
+}
+
+export { ConceptCompare };

package/dist/components/coverflow.d.ts

@@ -3,9 +3,17 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 /**
  * Coverflow — the busiest-events browser: a 3D perspective lane with a large
  * lead poster flanked by up to three shrinking, desaturating posters on each
- * side. The lane itself drifts a few pixels back and forth
- * (`prefers-reduced-motion` stops this outright; an `IntersectionObserver`
- * pauses it off-screen).
+ * side.
+ *
+ * NOTHING MOVES ON ITS OWN. The lane used to drift ±40px on a loop; it was
+ * removed at product request — a stage that sways is read as a carousel that
+ * is about to advance, and the reader waits for it instead of touching it.
+ * The stage is driven by the reader: a horizontal drag (touch, pen or mouse)
+ * steps the ring one card in the drag's direction and the lane follows the
+ * finger a little on the way, so the gesture has weight. The prev/next arrows
+ * stay for desktop and keyboard; below `lg` they are hidden so nothing sits
+ * over the lead card — the swipe is the control there, and every card is
+ * still a focusable, named button for keyboard and screen-reader users.
  *
  * IT IS A RING, NOT A LANE. A card's slot comes from `ringOffset` — the
  * SIGNED SHORTEST WAY ROUND the list, not the raw `index - activeIndex`. With

package/dist/components/coverflow.js

@@ -1,7 +1,8 @@
+import { useDragSwipe } from '../chunk-IYDH5IU6.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
-import { useId, useRef, useState, useEffect } from 'react';
+import { __spreadProps, __spreadValues, __objRest } from '../chunk-3GWWZKX7.js';
+import { useId, useState } from 'react';
 import { ChevronLeft, ChevronRight, Gift } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -21,10 +22,8 @@ var COVERFLOW_CARD_FOCUS_CLASS = "focus-visible:outline-none focus-visible:ring-
 var COVERFLOW_SIDE_SHADOW_CLASS = "shadow-[0_11px_27px_oklch(0.3_0.02_60/0.22)]";
 var COVERFLOW_LEAD_SHADOW_CLASS = "shadow-[0_24px_56px_oklch(0.28_0.03_45/0.32)]";
 var COVERFLOW_PILL_CLASS = "inline-flex h-6 max-w-[85%] items-center gap-1 rounded-full px-2 text-[11px] font-semibold";
-var COVERFLOW_DRIFT_DURATION_SECONDS = 26;
-var COVERFLOW_DRIFT_PIXELS = 40;
 var COVERFLOW_LEAD_Z_INDEX = 6;
-var COVERFLOW_ARROW_CLASS = "absolute top-1/2 z-20 flex h-11 w-11 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-background/85 text-foreground shadow-[var(--shadow-overlay)] backdrop-blur-sm transition-colors duration-150 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none";
+var COVERFLOW_ARROW_CLASS = "absolute top-1/2 z-20 hidden h-11 w-11 -translate-y-1/2 lg:flex cursor-pointer items-center justify-center rounded-full bg-background/85 text-foreground shadow-[var(--shadow-overlay)] backdrop-blur-sm transition-colors duration-150 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none";
 function wrapIndex(index, length) {
   return (index % length + length) % length;
 }
@@ -141,7 +140,6 @@ function Coverflow({
 }) {
   const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
   const scopeClass = `coverflow-${scopeId}`;
-  const containerRef = useRef(null);
   const length = items.length;
   const active = length > 0 ? wrapIndex(activeIndex, length) : 0;
   const [step, setStep] = useState({ from: active, to: active, length });
@@ -150,21 +148,13 @@ function Coverflow({
       step.length === length ? { from: step.to, to: active, length } : { from: active, to: active, length }
     );
   }
-  useEffect(() => {
-    const node = containerRef.current;
-    if (!node || typeof IntersectionObserver === "undefined") return void 0;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        node.dataset.offscreen = entry.isIntersecting ? "false" : "true";
-      },
-      { threshold: 0 }
-    );
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, []);
+  const goTo = (index) => onActiveIndexChange == null ? void 0 : onActiveIndexChange(wrapIndex(index, length));
+  const { dragX, isDragging, handlers } = useDragSwipe({
+    onSwipe: (direction) => goTo(active + direction),
+    disabled: length < 2
+  });
   if (length === 0) return null;
   const activeItem = items[active];
-  const goTo = (index) => onActiveIndexChange == null ? void 0 : onActiveIndexChange(wrapIndex(index, length));
   const activeDelta = ringOffset(step.to - step.from, length);
   const visibleCards = items.map((item, index) => {
     const offset = ringOffset(index - active, length);
@@ -208,28 +198,11 @@ function Coverflow({
             --cf-tier-base: 0.5714;
           }
         }
-        .${scopeClass} .coverflow-lane {
-          animation: ${scopeClass}-drift ${COVERFLOW_DRIFT_DURATION_SECONDS}s ease-in-out infinite alternate;
-        }
-        .${scopeClass}[data-offscreen="true"] .coverflow-lane {
-          animation-play-state: paused;
-        }
-        @keyframes ${scopeClass}-drift {
-          from { transform: translateX(-${COVERFLOW_DRIFT_PIXELS}px); }
-          to { transform: translateX(${COVERFLOW_DRIFT_PIXELS}px); }
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .${scopeClass} .coverflow-lane {
-            animation: none;
-            transform: none;
-          }
-        }
       ` }),
     /* @__PURE__ */ jsxs(
       "div",
-      {
-        ref: containerRef,
-        className: "relative flex h-[300px] items-center justify-center overflow-x-clip overflow-y-visible [perspective:900px] sm:h-[380px] sm:[perspective:1400px]",
+      __spreadProps(__spreadValues({}, handlers), {
+        className: "relative flex h-[300px] select-none items-center justify-center overflow-x-clip overflow-y-visible [touch-action:pan-y] [perspective:900px] sm:h-[380px] sm:[perspective:1400px]",
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -267,21 +240,31 @@ function Coverflow({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "coverflow-lane relative h-full w-full [transform-style:preserve-3d] motion-reduce:[animation:none]", children: visibleCards.map(({ item, index, offset, suppressTransition }) => /* @__PURE__ */ jsx(
-            CoverflowCard,
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              item,
-              index,
-              offset,
-              suppressTransition,
-              freeLabel,
-              onActivate: goTo,
-              linkComponent: LinkComponent
-            },
-            item.id
-          )) })
+              className: cn(
+                "coverflow-lane relative h-full w-full [transform-style:preserve-3d]",
+                !isDragging && "transition-transform duration-300 ease-out motion-reduce:transition-none"
+              ),
+              style: { transform: `translateX(${dragX / 3}px)` },
+              children: visibleCards.map(({ item, index, offset, suppressTransition }) => /* @__PURE__ */ jsx(
+                CoverflowCard,
+                {
+                  item,
+                  index,
+                  offset,
+                  suppressTransition,
+                  freeLabel,
+                  onActivate: goTo,
+                  linkComponent: LinkComponent
+                },
+                item.id
+              ))
+            }
+          )
         ]
-      }
+      })
     ),
     /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-4 text-center", children: [
       /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [

package/dist/components/date-input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     /** Native input type. Defaults to "date". */
     type?: "date" | "datetime-local" | "time" | "month" | "week";
     size?: "sm" | "default" | "lg";

package/dist/components/drift-rail.d.ts

@@ -2,22 +2,36 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * DriftRail — an infinite horizontal marquee for logos, tag chips or small
- * poster tiles. The caller passes one set of children; the component renders
- * a second, `aria-hidden` copy right after it so a `translateX(-50%)` loop is
- * seamless. Because the loop depends on the duplicate being pixel-identical
- * to the first pass, keep `children` a fixed, ordered list — no per-render
- * randomisation.
+ * poster tiles that the reader can take hold of. The caller passes one set of
+ * children; the component renders a second, `aria-hidden` copy right after it
+ * so the loop is seamless. Because the loop depends on the duplicate being
+ * pixel-identical to the first pass, keep `children` a fixed, ordered list —
+ * no per-render randomisation.
  *
- * Motion is scoped to this instance via a generated id (no shared stylesheet,
- * no class collisions between multiple rails on one page) and is paused two
- * ways, per the source design: an `IntersectionObserver` stops the loop the
- * moment the rail scrolls off-screen, and `prefers-reduced-motion: reduce`
- * removes the animation outright rather than merely slowing it.
+ * IT IS A SCROLLER THAT DRIFTS, NOT AN ANIMATION. It used to be a CSS
+ * `translateX` keyframe, which is cheap but cannot be grabbed: a finger on it
+ * did nothing, and a marquee that ignores the hand on it reads as a broken
+ * scroller. Now the rail is a real horizontal scroll container with the
+ * scrollbar hidden, and a `requestAnimationFrame` loop advances `scrollLeft`
+ * at `width / durationSeconds` per second. When the scroll position passes
+ * the first copy it is wrapped back by exactly one copy's width — the two
+ * copies are identical, so the jump is invisible — and the same wrap holds
+ * while the reader scrolls, in either direction, so there is no end to hit.
+ *
+ * THE READER WINS. A touch scrolls natively (momentum and all); a mouse drag
+ * scrolls the rail by the drag distance; a wheel works because it is a
+ * scroller. Any of those stops the drift, and it resumes a few seconds after
+ * the last interaction. Hover pauses it too (`pauseOnHover`), and an
+ * `IntersectionObserver` stops the loop off-screen so the page is not doing
+ * work nobody can see. `prefers-reduced-motion` removes the drift entirely;
+ * the rail stays scrollable by hand, which is more than the static strip it
+ * used to collapse to.
  */
 type DriftRailProps = {
     children: React.ReactNode;
     /** Runs the loop right-to-left instead of left-to-right. */
     reverse?: boolean;
+    /** Seconds for one full pass of the children. */
     durationSeconds?: number;
     /** Pauses the loop while the pointer hovers the rail. */
     pauseOnHover?: boolean;