@bearmenu/ui 0.6.1 → 0.7.0

package/src/components/place-schedule-week.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/utils";
+import { Text } from "./text";
+import type {
+  PlaceSchedule,
+  PlaceScheduleWeekLabels,
+  WeekdayKey,
+} from "./place-types";
+
+const WEEKDAY_KEYS: readonly WeekdayKey[] = [
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+] as const;
+
+function formatHour(h: number): string {
+  return `${h.toString().padStart(2, "0")}:00`;
+}
+
+/** JS Date.getDay(): Sunday=0 ... Saturday=6 → WEEKDAY_KEYS index where Monday=0 */
+function todayWeekdayIndex(): number {
+  const d = new Date().getDay();
+  return (d + 6) % 7;
+}
+
+export interface PlaceScheduleWeekProps {
+  schedule?: PlaceSchedule;
+  labels: PlaceScheduleWeekLabels;
+  /**
+   * When true, scrolls the today row into view on mount. Use inside a drawer/dialog
+   * where the schedule is the only content — auto-scrolling avoids weekend rows
+   * being clipped at the bottom of small viewports. Default false: do not auto-scroll
+   * when the schedule sits inline on a longer page, where the behaviour disorients
+   * the reader.
+   */
+  autoScrollToToday?: boolean;
+  className?: string;
+}
+
+export function PlaceScheduleWeek({
+  schedule,
+  labels,
+  autoScrollToToday = false,
+  className,
+}: PlaceScheduleWeekProps) {
+  const todayIdx = todayWeekdayIndex();
+  const todayRowRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (autoScrollToToday) {
+      todayRowRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [autoScrollToToday]);
+
+  if (!schedule) {
+    return (
+      <Text as="p" variant="body-sm" color="muted">
+        {labels.noHoursAvailable}
+      </Text>
+    );
+  }
+
+  return (
+    <div className={cn(className)}>
+      {WEEKDAY_KEYS.map((dayKey, idx) => {
+        const slots = schedule[dayKey] ?? [];
+        const isToday = idx === todayIdx;
+        const isClosed = slots.length === 0;
+        return (
+          <div
+            key={dayKey}
+            ref={isToday ? todayRowRef : null}
+            className={cn(
+              "relative flex items-start justify-between gap-3 rounded-lg px-3 py-1.5 overflow-hidden",
+              isToday && "bg-primary/8"
+            )}
+          >
+            {isToday && (
+              <span
+                aria-hidden
+                className="absolute left-0 top-0 bottom-0 w-1 bg-primary"
+              />
+            )}
+            <Text
+              as="span"
+              variant="body-sm"
+              weight={isToday ? "semibold" : "medium"}
+              className={isToday ? "text-foreground" : "text-muted-foreground"}
+            >
+              {labels.days[dayKey]}
+            </Text>
+            <div className="flex flex-col items-end gap-0.5">
+              {isClosed ? (
+                <Text
+                  as="span"
+                  variant="body-sm"
+                  className="line-through text-muted-foreground/50"
+                >
+                  {labels.closed}
+                </Text>
+              ) : (
+                slots.map((slot, i) => (
+                  <Text
+                    key={i}
+                    as="span"
+                    variant="body-sm"
+                    className={cn(
+                      "tabular-nums",
+                      isToday ? "text-foreground" : "text-muted-foreground"
+                    )}
+                  >
+                    {formatHour(slot.opens_at)} – {formatHour(slot.closes_at)}
+                  </Text>
+                ))
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/place-types.ts

@@ -15,6 +15,7 @@ export type PlacePreview = {
   review_count?: number
   hours?: PlaceHourBlock[]
   today_schedule?: PlaceHourBlock[]
+  schedule?: PlaceSchedule
   location?: {
     address?: string
     geolocation?: { lat: number | string; lon: number | string }
@@ -45,6 +46,17 @@ export type PlacePreview = {
 
 export type PlaceHourBlock = { opens_at: number; closes_at: number }
 
+export type WeekdayKey =
+  | 'monday'
+  | 'tuesday'
+  | 'wednesday'
+  | 'thursday'
+  | 'friday'
+  | 'saturday'
+  | 'sunday'
+
+export type PlaceSchedule = Record<WeekdayKey, PlaceHourBlock[]>
+
 export type PlacePriceRange = {
   price_range_low?: number
   price_range_high?: number
@@ -67,15 +79,14 @@ export type PlaceCardLabels = {
  * to the raw enum value (with underscores → spaces).
  */
 export type PlaceAboutTabLabels = {
-  overview: string
+  /** Section heading for the editorial prose block (generative summary + review summary + description). */
   description: string
-  whatPeopleSay: string
   contactAndLocation: string
-  address: string
   instagram: string
   facebook: string
+  /** Section heading for the inline weekly schedule. */
   todayHours: string
-  statusOpen: string
+  /** Used by the inline schedule's closed-day line-through. */
   statusClosed: string
   typicalBusyness: string
   cuisines: string
@@ -84,10 +95,10 @@ export type PlaceAboutTabLabels = {
   accessibility: string
   parking: string
   nearbyLandmarks: string
-  neighborhood: string
-  businessInformation: string
-  type: string
-  status: string
+  /** Weekday key → translated day name, consumed by the inline `<PlaceScheduleWeek>`. */
+  scheduleDays: Record<WeekdayKey, string>
+  /** Fallback shown by `<PlaceScheduleWeek>` when no schedule data is present. */
+  noHoursAvailable: string
   amenityLabels: Record<string, string>
   paymentLabels: Record<string, string>
   accessibilityLabels: Record<string, string>
@@ -99,6 +110,14 @@ export type PlaceAboutTabLabels = {
 /** Discriminator for `<PlaceAboutTab>`'s `onLinkClick` callback. */
 export type PlaceLinkKind = 'phone' | 'website' | 'instagram' | 'facebook' | 'address'
 
+/** Labels passed to `<PlaceScheduleWeek>`. */
+export type PlaceScheduleWeekLabels = {
+  days: Record<WeekdayKey, string>
+  closed: string
+  /** Shown when the `schedule` prop is missing or empty. */
+  noHoursAvailable: string
+}
+
 /**
  * Labels passed to `<PlaceDetailsMobile>`. Extends `PlaceAboutTabLabels` with
  * the header/tab-strip strings unique to the mobile place-details surface.

package/src/components/scroll-fade.tsx

@@ -99,9 +99,14 @@ const ScrollFade = React.forwardRef<HTMLDivElement, ScrollFadeProps>(
           aria-hidden
           className={cn(
             "pointer-events-none absolute z-10 transition-opacity duration-300",
+            // `from-30%` adds a solid plateau before the gradient starts
+            // fading — without it the gradient is a pure linear ramp and only
+            // the very top pixel reads as solid, leaving the cut edge visible.
+            // -4px inset pulls the fade past the container edge so the very
+            // edge of clipped content is covered by the solid plateau.
             orientation === "vertical"
-              ? `inset-x-0 top-0 ${fadeSize} bg-gradient-to-b`
-              : `inset-y-0 left-0 ${fadeSize} bg-gradient-to-r`,
+              ? `inset-x-0 -top-1 ${fadeSize} bg-gradient-to-b from-30%`
+              : `inset-y-0 -left-1 ${fadeSize} bg-gradient-to-r from-30%`,
             fromClass,
             atStart ? "opacity-0" : "opacity-100"
           )}
@@ -111,8 +116,8 @@ const ScrollFade = React.forwardRef<HTMLDivElement, ScrollFadeProps>(
           className={cn(
             "pointer-events-none absolute z-10 transition-opacity duration-300",
             orientation === "vertical"
-              ? `inset-x-0 bottom-0 ${fadeSize} bg-gradient-to-t`
-              : `inset-y-0 right-0 ${fadeSize} bg-gradient-to-l`,
+              ? `inset-x-0 -bottom-1 ${fadeSize} bg-gradient-to-t from-30%`
+              : `inset-y-0 -right-1 ${fadeSize} bg-gradient-to-l from-30%`,
             fromClass,
             atEnd ? "opacity-0" : "opacity-100"
           )}

package/src/components/sheet.tsx

@@ -30,7 +30,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-[1000] gap-4 bg-background border-border p-6 shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-[1000] gap-4 bg-background border-border p-6 shadow-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-[var(--duration-deliberate)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)]",
   {
     variants: {
       side: {

package/src/components/sliding-panels.tsx

@@ -12,6 +12,11 @@ export interface Panel {
   showBackButton?: boolean;
   backButtonLabel?: string;
   onBack?: () => void;
+  // When set, the panel is treated as a child of `parentId`. Siblings (panels
+  // sharing the same parent) stay off-screen on the right when not active —
+  // they no longer slide through during non-adjacent transitions. The default
+  // back button navigates to `parentId` instead of the previous array index.
+  parentId?: string;
 }
 
 export interface SlidingPanelsProps {
@@ -32,6 +37,23 @@ export const SlidingPanels = ({
   const panelRefs = useRef<(HTMLDivElement | null)[]>([]);
   const [containerHeight, setContainerHeight] = useState<number | undefined>();
 
+  // Tree mode: if any panel declares parentId, position based on hierarchy
+  // (ancestors slide left, everything else stays right). Otherwise fall back
+  // to the legacy index-based stack.
+  const usesTreeModel = panels.some((p) => p.parentId);
+
+  const activeAncestors = React.useMemo(() => {
+    if (!usesTreeModel) return new Set<string>();
+    const ancestors = new Set<string>();
+    let cursor = panels.find((p) => p.id === currentPanel);
+    while (cursor?.parentId) {
+      ancestors.add(cursor.parentId);
+      const nextId: string = cursor.parentId;
+      cursor = panels.find((p) => p.id === nextId);
+    }
+    return ancestors;
+  }, [panels, currentPanel, usesTreeModel]);
+
   // Measure active panel height on panel change and whenever content resizes
   useLayoutEffect(() => {
     const activeEl = panelRefs.current[currentIndex];
@@ -46,13 +68,16 @@ export const SlidingPanels = ({
   }, [currentIndex]);
 
   const handleBack = () => {
-    const previousPanel = panels[currentIndex - 1];
-    if (!previousPanel) return;
     if (currentPanelData?.onBack) {
       currentPanelData.onBack();
-    } else {
-      onPanelChange(previousPanel.id);
+      return;
+    }
+    if (currentPanelData?.parentId) {
+      onPanelChange(currentPanelData.parentId);
+      return;
     }
+    const previousPanel = panels[currentIndex - 1];
+    if (previousPanel) onPanelChange(previousPanel.id);
   };
 
   return (
@@ -65,8 +90,10 @@ export const SlidingPanels = ({
     >
       {panels.map((panel, index) => {
         const isActive = panel.id === currentPanel;
-        const isLeft = index < currentIndex;
-        const isRight = index > currentIndex;
+        const isLeft = usesTreeModel
+          ? activeAncestors.has(panel.id)
+          : index < currentIndex;
+        const isRight = !isActive && !isLeft;
 
         return (
           <div

package/src/components/sort-option-list.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export type SortOptionListItem<T extends string> = {
+  value: T;
+  label: string;
+};
+
+interface SortOptionListProps<T extends string> {
+  options: SortOptionListItem<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  ariaLabel: string;
+  className?: string;
+}
+
+export function SortOptionList<T extends string>({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  className,
+}: SortOptionListProps<T>) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={cn("px-2 pb-6", className)}
+    >
+      {options.map((option) => {
+        const isActive = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            onClick={() => onChange(option.value)}
+            className={cn(
+              "flex w-full items-center justify-between rounded-lg px-3 py-3 text-left text-sm cursor-pointer",
+              "transition-colors duration-150 motion-reduce:transition-none",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+              isActive
+                ? "bg-accent/10 text-accent font-semibold"
+                : "text-foreground hover:bg-muted/50"
+            )}
+          >
+            <span>{option.label}</span>
+            {isActive && <Check className="h-4 w-4" aria-hidden />}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/tabs.tsx

@@ -2,6 +2,8 @@
 
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { motion } from "framer-motion";
+import { archetype } from "../lib/motion";
 import { cn } from "../lib/utils";
 
 type TabsVariant = "pill" | "underline";
@@ -10,11 +12,15 @@ type TabsOrientation = "horizontal" | "vertical";
 type TabsContextValue = {
   variant: TabsVariant;
   orientation: TabsOrientation;
+  /** Unique id used by Framer Motion `layoutId` to morph the active indicator
+   * between triggers. Generated once per <TabsList>. */
+  indicatorId: string;
 };
 
 const TabsContext = React.createContext<TabsContextValue>({
   variant: "pill",
   orientation: "horizontal",
+  indicatorId: "tabs-indicator",
 });
 
 const Tabs = React.forwardRef<
@@ -45,9 +51,10 @@ const TabsList = React.forwardRef<
 >(({ className, variant = "pill", scrollable, children, ...props }, ref) => {
   const orientation: TabsOrientation = props["aria-orientation"] === "vertical" ? "vertical" : "horizontal";
   const allowScroll = scrollable ?? orientation === "horizontal";
+  const indicatorId = React.useId();
 
   return (
-    <TabsContext.Provider value={{ variant, orientation }}>
+    <TabsContext.Provider value={{ variant, orientation, indicatorId }}>
       <TabsPrimitive.List
         ref={ref}
         data-slot="tabs-list"
@@ -75,27 +82,80 @@ TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => {
-  const { variant, orientation } = React.useContext(TabsContext);
+>(({ className, children, ...props }, ref) => {
+  const { variant, orientation, indicatorId } = React.useContext(TabsContext);
+  // Inspect data-state at render to know whether to render the indicator.
+  // Radix sets data-state="active" | "inactive" on the trigger via its primitive.
+  const triggerRef = React.useRef<HTMLButtonElement | null>(null);
+  const [isActive, setIsActive] = React.useState(false);
+
+  // Sync isActive from Radix's data-state. Tracking via mutation observer
+  // keeps the indicator in sync without needing controlled state from consumers.
+  React.useEffect(() => {
+    const node = triggerRef.current;
+    if (!node) return;
+    const sync = () => setIsActive(node.getAttribute("data-state") === "active");
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(node, { attributes: true, attributeFilter: ["data-state"] });
+    return () => observer.disconnect();
+  }, []);
+
+  const composedRef = React.useCallback(
+    (node: HTMLButtonElement | null) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+    },
+    [ref]
+  );
 
   return (
     <TabsPrimitive.Trigger
-      ref={ref}
+      ref={composedRef}
       data-slot="tabs-trigger"
       className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
         variant === "pill" &&
-          "rounded-xl px-4 py-1.5 text-muted-foreground hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+          "rounded-xl px-4 py-1.5 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground",
         variant === "underline" &&
           orientation === "horizontal" &&
-          "relative h-11 rounded-none border-b-2 border-transparent px-4 text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground",
+          "h-11 rounded-none px-4 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground",
         variant === "underline" &&
           orientation === "vertical" &&
-          "relative rounded-none border-r-2 border-transparent px-4 py-2 -mr-px text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground justify-start",
+          "rounded-none px-4 py-2 -mr-px text-muted-foreground hover:text-foreground data-[state=active]:text-foreground justify-start",
         className
       )}
       {...props}
-    />
+    >
+      {/* Active indicator: shared-layout element morphs between triggers */}
+      {isActive && (
+        <motion.span
+          aria-hidden
+          layoutId={indicatorId}
+          transition={archetype.indicatorMorph}
+          className={cn(
+            "absolute inset-0 -z-0 motion-reduce:hidden",
+            variant === "pill" && "rounded-xl bg-background shadow-sm",
+            variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
+            variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
+          )}
+        />
+      )}
+      {/* Static fallback for reduced-motion: keep the legacy active styling */}
+      {isActive && (
+        <span
+          aria-hidden
+          className={cn(
+            "absolute inset-0 -z-0 hidden motion-reduce:block",
+            variant === "pill" && "rounded-xl bg-background shadow-sm",
+            variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
+            variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
+          )}
+        />
+      )}
+      <span className="relative z-10 flex items-center gap-2">{children}</span>
+    </TabsPrimitive.Trigger>
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
@@ -103,16 +163,21 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
     data-slot="tabs-content"
     className={cn(
       "flex-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md",
+      // v1.0 motion: content-swap on activation. CSS animation so this works
+      // even outside a Framer-Motion-wrapped layout. Disabled for reduced-motion.
+      "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=active]:duration-[var(--duration-quick)] data-[state=active]:ease-[var(--ease-standard)] motion-reduce:data-[state=active]:animate-none",
       className
     )}
     {...props}
-  />
+  >
+    {children}
+  </TabsPrimitive.Content>
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 

package/src/components/toast.tsx

@@ -24,7 +24,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl p-6 pr-8 shadow-2xl transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl p-6 pr-8 shadow-2xl transition-[transform,opacity] duration-[var(--duration-standard)] ease-[var(--ease-standard)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=open]:duration-[var(--duration-standard)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)] data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {

package/src/globals.css

@@ -89,18 +89,30 @@ h6 {
   --shadow-alpha-xl: 0.18;
   --shadow-alpha-2xl: 0.25;
 
-  /* Motion */
-  --duration-instant: 0ms;
-  --duration-fast: 150ms;
-  --duration-base: 200ms;
-  --duration-slow: 300ms;
-  --duration-slower: 500ms;
-  --duration-drawer: 350ms;
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
-  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
-  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
+  /* ─── Motion System v1.0 ─────────────────────────────────────────────
+     Three layers of tokens. Feature code reads only `--duration-*` and
+     `--ease-*` semantic names; raw values live here.
+
+     JS twin: @bearmenu/ui/lib/motion (duration / ease / archetype). */
+
+  /* Durations */
+  --duration-none: 0ms;             /* literal "no animation" */
+  --duration-instant: 120ms;        /* tap feedback, icon swap */
+  --duration-quick: 180ms;          /* chip toggle, tab indicator */
+  --duration-standard: 260ms;       /* component entrance — workhorse */
+  --duration-deliberate: 360ms;     /* drawer / sheet open */
+  --duration-narrative: 500ms;      /* editorial hero (sparingly) */
+  --duration-exit-quick: 110ms;     /* content exit inside a surface */
+  --duration-exit-standard: 210ms;  /* surface / overlay exit */
+
+  /* Easings */
+  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
+  /* CSS equivalents for the JS spring presets — for keyframe / transition use */
+  --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-spring-smooth: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);
 
   /* Z-index scale */
   --z-base: 0;
@@ -246,8 +258,8 @@ h6 {
   --shadow-2xl: 0 25px 50px -12px hsl(var(--shadow-color) / var(--shadow-alpha-2xl));
 
   /* Default transition tokens — consumed by Tailwind's `transition-*` utilities */
-  --default-transition-duration: var(--duration-base);
-  --default-transition-timing-function: var(--ease-out);
+  --default-transition-duration: var(--duration-standard);
+  --default-transition-timing-function: var(--ease-standard);
 
   --animate-highlight-ring: highlight-ring 5s ease-out forwards;
 }
@@ -296,8 +308,8 @@ h6 {
 
 .glass-hover {
   transition:
-    background-color var(--duration-base) var(--ease-out),
-    border-color var(--duration-base) var(--ease-out);
+    background-color var(--duration-standard) var(--ease-standard),
+    border-color var(--duration-standard) var(--ease-standard);
 }
 
 .glass-hover:hover {
@@ -407,11 +419,11 @@ h6 {
 }
 
 .animate-collapsible-down {
-  animation: collapsible-down var(--duration-slow) var(--ease-out);
+  animation: collapsible-down var(--duration-deliberate) var(--ease-enter);
 }
 
 .animate-collapsible-up {
-  animation: collapsible-up var(--duration-base) var(--ease-in);
+  animation: collapsible-up var(--duration-exit-standard) var(--ease-exit);
 }
 
 /* Shimmer — referenced by Skeleton (was undefined → animation was dead) */
@@ -421,13 +433,59 @@ h6 {
   }
 }
 
+/* Live-pulse — referenced by Badge `live` variant, EventBanner live indicator,
+   and any "this is happening right now" surface. Subtle to avoid distraction. */
+@keyframes live-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 0.7;
+  }
+}
+
+.motion-live-pulse {
+  animation: live-pulse 1.8s ease-in-out infinite;
+  transform-origin: center;
+}
+
+/* Image-enter — gallery / hero photographs. Slight scale-down + fade so images
+   read as "arriving" rather than popping. Standalone CSS so consumers don't
+   need framer-motion on every photo. */
+@keyframes image-enter {
+  from {
+    opacity: 0;
+    transform: scale(1.04);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.motion-image-enter {
+  animation: image-enter var(--duration-standard) var(--ease-standard) both;
+}
+
+/* Reduced-motion: instant — no scale, no fade. */
+@media (prefers-reduced-motion: reduce) {
+  .motion-image-enter {
+    animation: none;
+  }
+  .motion-live-pulse {
+    animation: none;
+  }
+}
+
 /* Swiper pagination styling for experience cards */
 .swiper-pagination-bullet {
   background: color-mix(in oklch, var(--foreground) 30%, transparent) !important;
   opacity: 1 !important;
   width: 6px !important;
   height: 6px !important;
-  transition: all var(--duration-slow) var(--ease-out) !important;
+  transition: width var(--duration-standard) var(--ease-standard), background var(--duration-standard) var(--ease-standard) !important;
 }
 
 .swiper-pagination-bullet-active {