@flamingo-stack/openframe-frontend-core 0.0.730 → 0.0.732

package/src/components/ui/notification-stack.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { useEffect, useState, type ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+
+export interface NotificationStackItem {
+  key: string;
+  node: ReactNode;
+}
+
+export interface NotificationStackProps {
+  /** What has arrived so far, OLDEST FIRST. The newest is drawn on top. */
+  items: readonly NotificationStackItem[];
+  /** How many are shown whole when a new one has just arrived. Default 3. */
+  maxExpanded?: number;
+  /** How long they all stay whole after an arrival before the oldest starts to fold. Default 1800. */
+  lingerMs?: number;
+  /** The pause between one fold and the next: they go one at a time, never together. Default 900. */
+  foldEveryMs?: number;
+  className?: string;
+}
+
+/** The most card edges drawn for the folded pile: past two a pile only reads as "more". */
+const MAX_PILE_EDGES = 2;
+
+// Gentle on purpose: a notification eases into place and the ones under it
+// drift down with it. Soft springs with no overshoot; nothing snaps or bounces.
+const ARRIVE = { type: 'spring', stiffness: 90, damping: 22, mass: 1 } as const;
+const PUSH = { type: 'spring', stiffness: 60, damping: 20, mass: 1.1 } as const;
+const FOLD = { type: 'spring', stiffness: 140, damping: 28, mass: 1 } as const;
+
+/**
+ * Notifications as a phone keeps them: the most recent on top, the list
+ * starting where its host puts it (the lock screen: right under the clock). A
+ * new one DROPS IN FROM ABOVE into the top place and PUSHES the ones still
+ * whole DOWN. They stay
+ * whole for a moment (`lingerMs`, long enough to see that one more joined
+ * them), then fold away ONE AT A TIME, oldest first (`foldEveryMs` apart):
+ * each slips behind the ones above it and leaves its edge under the newest,
+ * until only the newest is whole on a pile of edges. Nothing that arrived is
+ * taken away, and the eye follows every one of them.
+ *
+ * The caller passes only what has arrived, oldest first; each `node` is the
+ * notification itself (`NotificationTile`). Under reduced motion the stack
+ * changes in place, with no travel.
+ */
+export function NotificationStack({
+  items,
+  maxExpanded = 3,
+  lingerMs = 1800,
+  foldEveryMs = 900,
+  className,
+}: NotificationStackProps) {
+  const reducedMotion = useReducedMotion();
+  const count = items.length;
+  const opened = Math.min(maxExpanded, count);
+
+  // How many are whole now. A new arrival joins the ones still whole (the ones
+  // already folded stay folded); a list that restarts opens afresh. State
+  // derived from the prop during render, React's own pattern for it.
+  const [seenCount, setSeenCount] = useState(count);
+  const [whole, setWhole] = useState(opened);
+  const [justArrived, setJustArrived] = useState(false);
+  if (seenCount !== count) {
+    setSeenCount(count);
+    setWhole(count > seenCount ? Math.min(opened, whole + (count - seenCount)) : opened);
+    setJustArrived(true);
+  }
+
+  // Fold the oldest whole one: the first after the linger, each next one a beat later.
+  useEffect(() => {
+    if (whole <= 1) return undefined;
+    const timer = setTimeout(
+      () => {
+        setWhole(current => current - 1);
+        setJustArrived(false);
+      },
+      justArrived ? lingerMs : foldEveryMs,
+    );
+    return () => clearTimeout(timer);
+  }, [whole, justArrived, lingerMs, foldEveryMs]);
+
+  const shown = items.slice(-Math.max(1, Math.min(whole, count))).reverse();
+  const folded = Math.min(MAX_PILE_EDGES, Math.max(0, count - shown.length));
+  const still = { duration: 0 };
+
+  return (
+    <div className={cn('flex w-full flex-col gap-1.5 pb-2.5', className)}>
+      <AnimatePresence initial={false} mode="popLayout">
+        {shown.map((item, index) => (
+          <motion.div
+            key={item.key}
+            layout={reducedMotion ? false : 'position'}
+            // It drops in from above, into the top place.
+            initial={{ opacity: 0, y: reducedMotion ? 0 : -20, scale: reducedMotion ? 1 : 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1, transition: reducedMotion ? still : ARRIVE }}
+            // Folding: it slips up behind the one above it.
+            exit={{
+              opacity: 0,
+              y: reducedMotion ? 0 : -28,
+              scale: reducedMotion ? 1 : 0.94,
+              transition: reducedMotion ? still : FOLD,
+            }}
+            // The push: how the ones already there make room.
+            transition={reducedMotion ? still : PUSH}
+            // `isolate`: the pile's edges sit behind the notification, never behind the screen.
+            className="relative isolate min-w-0"
+          >
+            {/* The pile: one edge per folded notification, under the last whole one. */}
+            {index === shown.length - 1 && (
+              <AnimatePresence initial={false}>
+                {Array.from({ length: folded }, (_, edge) => (
+                  <motion.span
+                    key={edge}
+                    aria-hidden
+                    initial={{ opacity: 0, y: 0 }}
+                    animate={{ opacity: 1 - (edge + 1) * 0.3, y: (edge + 1) * 6 }}
+                    exit={{ opacity: 0, y: 0 }}
+                    transition={reducedMotion ? still : FOLD}
+                    className="absolute inset-0 rounded-2xl border border-ods-border bg-ods-card"
+                    style={{ scaleX: 1 - (edge + 1) * 0.06, zIndex: -1 - edge }}
+                  />
+                ))}
+              </AnimatePresence>
+            )}
+            {item.node}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/components/ui/numbered-step.tsx

@@ -0,0 +1,81 @@
+import { cn } from '../../utils/cn';
+
+export interface StepNumberProps {
+  /** The step's number, as shown (1-based). */
+  number: number;
+  /** The step being shown now: its ring and number take the accent. */
+  current?: boolean;
+  /** The lit colour (a CSS colour, such as the hex an agent's identity stores). Omitted, it is the platform's accent. */
+  accent?: string;
+  className?: string;
+}
+
+/**
+ * THE number of a numbered step, wherever a page counts steps: a bold number
+ * in a ring. Grey at rest, the accent when it is the current one.
+ */
+export function StepNumber({ number, current = false, accent, className }: StepNumberProps) {
+  return (
+    <span
+      className={cn(
+        'grid h-6 w-6 shrink-0 place-items-center rounded-full border-2 font-bold transition-colors duration-200 text-h6 motion-reduce:transition-none',
+        current ? !accent && 'border-ods-accent text-ods-accent' : 'border-ods-text-secondary text-ods-text-secondary',
+        className,
+      )}
+      style={current && accent ? { borderColor: accent, color: accent } : undefined}
+    >
+      {number}
+    </span>
+  );
+}
+
+export interface NumberedStepProps extends StepNumberProps {
+  title: string;
+  description?: string;
+  /** The title's element. Default `h3`. */
+  titleAs?: 'h3' | 'h4' | 'p';
+}
+
+/**
+ * THE head of a numbered step: its number (`StepNumber`), its title and one
+ * line under it. One look everywhere steps are counted (a list of steps beside
+ * a demo, the head of a column of a flow). At rest the title reads at full
+ * strength and the description steps back; the current one's number and title
+ * take the accent and its description reads at full strength.
+ */
+export function NumberedStep({
+  number,
+  title,
+  description,
+  current = false,
+  accent,
+  titleAs: Title = 'h3',
+  className,
+}: NumberedStepProps) {
+  return (
+    <div className={cn('flex items-start gap-[var(--spacing-system-xs)]', className)}>
+      <StepNumber number={number} current={current} accent={accent} />
+      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+        <Title
+          className={cn(
+            'm-0 transition-colors duration-200 text-h3 motion-reduce:transition-none',
+            current ? !accent && 'text-ods-accent' : 'text-ods-text-primary',
+          )}
+          style={current && accent ? { color: accent } : undefined}
+        >
+          {title}
+        </Title>
+        {description && (
+          <p
+            className={cn(
+              'm-0 transition-colors duration-200 text-h4 motion-reduce:transition-none',
+              current ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+            )}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/phone-frame.tsx

@@ -1,39 +1,103 @@
-import type { ReactNode } from 'react';
+'use client';
+
+import { useSyncExternalStore, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { DEVICE_WALLPAPER_CLASS } from './device-wallpaper';
+import { LockCameraGlyph } from './phone-glyphs/lock-camera-glyph';
+import { LockFlashlightGlyph } from './phone-glyphs/lock-flashlight-glyph';
+import { StatusBarGlyphs } from './phone-glyphs/status-bar-glyphs';
 
 export interface PhoneFrameProps {
-  /** Lock-screen date line, e.g. "Thursday, October 1". */
+  /** A fixed lock-screen date line ("Thursday, October 1"). Omitted, it is today's, in the visitor's own locale. */
   dateLabel?: string;
-  /** Lock-screen clock, e.g. "5:09". */
+  /** A fixed lock-screen clock ("5:09"). Omitted, it is the visitor's own time, kept current. */
   timeLabel?: string;
-  /** The notification slot, directly under the clock. One at a time. */
+  /** The notifications, right under the clock, the newest first (`NotificationStack`). */
   children?: ReactNode;
   className?: string;
 }
 
+/** How often the clock is re-read. The label only changes with the minute, so most readings change nothing. */
+const CLOCK_TICK_MS = 1000;
+
+function subscribeToClock(onTick: () => void): () => void {
+  const timer = setInterval(onTick, CLOCK_TICK_MS);
+  return () => clearInterval(timer);
+}
+
+/** "9:41": the hour and minute as a lock screen shows them, with no AM/PM. */
+function readClock(): string {
+  const parts = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).formatToParts(new Date());
+  const part = (type: string) => parts.find(p => p.type === type)?.value ?? '';
+  return `${part('hour')}:${part('minute')}`;
+}
+
+/** "Monday, October 12". */
+function readDate(): string {
+  return new Intl.DateTimeFormat(undefined, { weekday: 'long', month: 'long', day: 'numeric' }).format(new Date());
+}
+
+// The server cannot know the visitor's time: it (and the hydrating render) draw none, in the same box.
+const noTime = () => '';
+
+/** One of the lock screen's two round shortcuts. A drawing: it does nothing. */
+function LockShortcut({ children }: { children: ReactNode }) {
+  return (
+    <span className="grid size-[34px] place-items-center rounded-full bg-ods-text-primary/35 text-ods-text-primary backdrop-blur-md">
+      {children}
+    </span>
+  );
+}
+
 /**
- * A phone lock screen: island, date, clock, and one notification slot directly
- * under the clock, where a notification that has just arrived is read first
- * (it drops in from the top of the screen). Decorative chrome for showing what
- * lands on a phone.
+ * A phone lock screen: the status bar and island, the date and clock on the
+ * device wallpaper (`DEVICE_WALLPAPER_CLASS`, the one every drawn device
+ * shares), the notifications stacked under the clock, then the two
+ * shortcuts and the home indicator. Decorative chrome for showing what lands
+ * on a phone.
+ *
+ * The clock is REAL: the visitor's own date and time, kept current, unless a
+ * caller fixes them. The server draws neither (it cannot know them); their
+ * lines keep their height, so nothing moves when they appear.
  *
- * It is sized by its class (default 236 x 480), never scaled, so the text
+ * It is sized by its class (default 299 x 617), never scaled, so the text
  * inside stays the size the page set.
  */
 export function PhoneFrame({ dateLabel, timeLabel, children, className }: PhoneFrameProps) {
+  const liveTime = useSyncExternalStore(subscribeToClock, readClock, noTime);
+  const liveDate = useSyncExternalStore(subscribeToClock, readDate, noTime);
+  const time = timeLabel ?? liveTime;
+  const date = dateLabel ?? liveDate;
   return (
     <div
-      className={cn('h-[480px] w-[236px] shrink-0 rounded-[44px] border border-ods-border bg-black p-2.5', className)}
+      className={cn('h-[617px] w-[299px] shrink-0 rounded-[48px] border border-ods-border bg-black p-2.5', className)}
     >
-      <div className="flex h-full flex-col items-center rounded-[36px] bg-ods-bg px-2.5 py-3.5">
-        <span className="h-6 w-20 rounded-full bg-black" aria-hidden />
-        {dateLabel && <span className="mt-4 text-ods-text-secondary text-h6">{dateLabel}</span>}
-        {timeLabel && (
-          <span className="text-[56px] font-medium leading-[60px] tracking-tight text-ods-text-primary">
-            {timeLabel}
-          </span>
-        )}
-        <div className="mt-4 flex min-h-0 w-full flex-1 flex-col gap-1.5">{children}</div>
+      <div className={cn('relative flex h-full flex-col overflow-hidden rounded-[38px]', DEVICE_WALLPAPER_CLASS)}>
+        <div
+          className="grid shrink-0 grid-cols-[1fr_auto_1fr] items-center px-5 pt-2.5 text-ods-text-primary"
+          aria-hidden
+        >
+          <span className="font-semibold tabular-nums text-h6">{time}</span>
+          <span className="h-6 w-20 rounded-full bg-black" />
+          <StatusBarGlyphs className="h-2.5 w-[54px] justify-self-end" />
+        </div>
+        <div className="flex shrink-0 flex-col items-center pt-4 text-ods-text-primary">
+          <span className="min-h-[var(--font-line-space-h4-body)] text-h4">{date}</span>
+          <span className="h-[68px] text-[64px] font-bold tabular-nums leading-[68px] tracking-tight">{time}</span>
+        </div>
+        {/* Right under the clock, growing down; clipped at the foot, so a tall stack never runs over the shortcuts. */}
+        <div className="flex min-h-0 w-full flex-1 flex-col justify-start overflow-hidden px-2.5 pb-3 pt-4">
+          {children}
+        </div>
+        <div className="flex shrink-0 items-center justify-between px-8" aria-hidden>
+          <LockShortcut>
+            <LockFlashlightGlyph className="size-[34px]" />
+          </LockShortcut>
+          <LockShortcut>
+            <LockCameraGlyph className="size-[34px]" />
+          </LockShortcut>
+        </div>
+        <span className="mx-auto mb-2 mt-3 h-1 w-24 shrink-0 rounded-full bg-ods-text-primary" aria-hidden />
       </div>
     </div>
   );

package/src/components/ui/phone-glyphs/lock-camera-glyph.tsx

@@ -0,0 +1,14 @@
+// The camera shortcut of the drawn phone's lock screen, as the design draws it. It belongs to `PhoneFrame` and
+// nothing else, so it is not part of the icon set. It takes the text colour around it.
+
+/** The camera shortcut's glyph, in its 34px round button's own box. */
+export function LockCameraGlyph({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 34.0257 34.0257" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M10.4883 23.8176H23.5348C25.0193 23.8176 25.7758 23.0753 25.7758 21.6051V14.1326C25.7758 12.6624 25.0193 11.9273 23.5348 11.9273H21.4936C20.9297 11.9273 20.7585 11.8131 20.4373 11.4563L19.8663 10.8139C19.5095 10.4214 19.1455 10.2073 18.4104 10.2073H15.5627C14.8276 10.2073 14.4636 10.4214 14.1068 10.8139L13.5358 11.4563C13.2146 11.806 13.0362 11.9273 12.4795 11.9273H10.4883C8.99665 11.9273 8.24726 12.6624 8.24726 14.1326V21.6051C8.24726 23.0753 8.99665 23.8176 10.4883 23.8176ZM17.0115 21.7122C14.849 21.7122 13.1147 19.985 13.1147 17.8082C13.1147 15.6386 14.849 13.9114 17.0115 13.9114C19.174 13.9114 20.9012 15.6386 20.9012 17.8082C20.9012 19.985 19.1669 21.7122 17.0115 21.7122ZM21.3794 15.1818C21.3794 14.6965 21.8076 14.2682 22.3072 14.2682C22.7996 14.2682 23.2207 14.6965 23.2207 15.1818C23.2207 15.6885 22.7996 16.0953 22.3072 16.1025C21.8076 16.1025 21.3794 15.6956 21.3794 15.1818ZM17.0115 20.6273C18.5674 20.6273 19.8235 19.3784 19.8235 17.8082C19.8235 16.2452 18.5674 14.9891 17.0115 14.9891C15.4556 14.9891 14.1924 16.2452 14.1924 17.8082C14.1924 19.3784 15.4628 20.6273 17.0115 20.6273Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/ui/phone-glyphs/lock-flashlight-glyph.tsx

@@ -0,0 +1,14 @@
+// The flashlight shortcut of the drawn phone's lock screen, as the design draws it. It belongs to `PhoneFrame` and
+// nothing else, so it is not part of the icon set. It takes the text colour around it.
+
+/** The flashlight shortcut's glyph, in its 34px round button's own box. */
+export function LockFlashlightGlyph({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 34.0257 34.0257" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M13.8216 11.1597H20.8833V10.8248C20.8833 9.94557 20.4507 9.5269 19.6133 9.5269H15.0916C14.2543 9.5269 13.8216 9.94557 13.8216 10.8248V11.1597ZM16.5151 25.1505H18.1898C19.0272 25.1505 19.4528 24.7318 19.4528 23.8526V16.442C19.4528 15.7093 19.6273 15.179 19.8924 14.7743L20.346 14.1044C20.667 13.609 20.8833 13.1415 20.8833 12.5483V11.9762H13.8216V12.5483C13.8216 13.1415 14.038 13.609 14.3589 14.1044L14.8055 14.7743C15.0777 15.179 15.2451 15.7093 15.2451 16.442V23.8526C15.2451 24.7318 15.6778 25.1505 16.5151 25.1505ZM17.3525 19.7845C16.7803 19.7845 16.4105 19.3658 16.4105 18.7796V16.8677C16.4105 16.2746 16.7803 15.8768 17.3525 15.8908C17.9177 15.8978 18.2945 16.2955 18.2945 16.8677V18.7796C18.2945 19.3658 17.9177 19.7845 17.3525 19.7845ZM17.3525 19.289C17.6595 19.289 17.9247 19.0308 17.9247 18.7168C17.9247 18.4028 17.6595 18.1377 17.3525 18.1377C17.0385 18.1377 16.7733 18.4028 16.7733 18.7168C16.7733 19.0308 17.0385 19.289 17.3525 19.289Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/ui/phone-glyphs/status-bar-glyphs.tsx

@@ -0,0 +1,45 @@
+// The status bar's signal, Wi-Fi and battery of the drawn phone's lock screen, as the design draws it. It belongs to `PhoneFrame` and
+// nothing else, so it is not part of the icon set. It takes the text colour around it.
+
+/** The status bar's right side: signal, Wi-Fi and battery, as one drawing. */
+export function StatusBarGlyphs({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 54.441 9.78982" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M6.89491 2.89491C6.89491 2.51412 7.20361 2.20542 7.5844 2.20542H8.27389C8.65469 2.20542 8.96338 2.51412 8.96338 2.89491V8.41084C8.96338 8.79164 8.65469 9.10033 8.27389 9.10033H7.5844C7.20361 9.10033 6.89491 8.79164 6.89491 8.41084V2.89491Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.3424 1.51593C10.3424 1.13513 10.6511 0.826438 11.0319 0.826438H11.7213C12.1021 0.826438 12.4108 1.13513 12.4108 1.51593V8.41084C12.4108 8.79164 12.1021 9.10033 11.7213 9.10033H11.0319C10.6511 9.10033 10.3424 8.79164 10.3424 8.41084V1.51593Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.44746 5.30813C3.44746 4.92733 3.75615 4.61864 4.13695 4.61864H4.82644C5.20723 4.61864 5.51593 4.92733 5.51593 5.30813V8.41084C5.51593 8.79164 5.20723 9.10033 4.82644 9.10033H4.13695C3.75615 9.10033 3.44746 8.79164 3.44746 8.41084V5.30813Z"
+        fill="currentColor"
+      />
+      <path
+        d="M0 7.03186C0 6.65106 0.308696 6.34237 0.689491 6.34237H1.37898C1.75978 6.34237 2.06847 6.65106 2.06847 7.03186V8.41084C2.06847 8.79164 1.75978 9.10033 1.37898 9.10033H0.689491C0.308696 9.10033 0 8.79164 0 8.41084V7.03186Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22.1436 6.97595C23.1225 6.13113 24.5563 6.13095 25.5352 6.97595C25.5844 7.02139 25.6129 7.08596 25.6143 7.15368C25.6156 7.22145 25.5894 7.28687 25.542 7.33435L24.0088 8.91345C23.9639 8.95973 23.9027 8.98571 23.8389 8.98571C23.775 8.98566 23.7138 8.9598 23.669 8.91345L22.1358 7.33435C22.0884 7.28683 22.0621 7.22144 22.0635 7.15368C22.0649 7.08593 22.0943 7.02136 22.1436 6.97595ZM20.0703 5.0863C22.1795 3.08361 25.4465 3.08362 27.5557 5.0863C27.6033 5.13326 27.6302 5.19841 27.6309 5.26599C27.6314 5.33341 27.6052 5.39784 27.5586 5.44567L26.6729 6.35974C26.5815 6.45307 26.4335 6.45548 26.3399 6.36462C25.6473 5.72459 24.7467 5.36952 23.8125 5.3695C22.8788 5.3699 21.9783 5.72488 21.2861 6.36462C21.1925 6.45548 21.0445 6.45307 20.9531 6.35974L20.0674 5.44567C20.0209 5.39792 19.9946 5.33335 19.9951 5.26599C19.9958 5.19843 20.0227 5.13325 20.0703 5.0863ZM18.001 3.19958C21.236 0.0354236 26.3393 0.0353572 29.5742 3.19958C29.6211 3.2466 29.6481 3.31125 29.6485 3.37829C29.6488 3.44529 29.6224 3.50946 29.5762 3.557L28.6895 4.47107C28.5981 4.56485 28.4493 4.56633 28.3565 4.474C27.124 3.27797 25.4887 2.61088 23.7881 2.61071C22.0873 2.61071 20.4515 3.27787 19.2188 4.474C19.126 4.56648 18.9771 4.565 18.8858 4.47107L17.9981 3.557C17.952 3.50946 17.9264 3.44515 17.9268 3.37829C17.9272 3.31125 17.9541 3.24656 18.001 3.19958Z"
+        fill="currentColor"
+      />
+      <path
+        opacity="0.35"
+        d="M37.9222 0.363281H50.0277C51.3498 0.363404 52.4211 1.43566 52.4212 2.75781V6.20508C52.4212 7.5273 51.3499 8.59949 50.0277 8.59961H37.9222C36.6 8.59953 35.5277 7.52732 35.5277 6.20508V2.75781C35.5278 1.43564 36.6 0.363363 37.9222 0.363281Z"
+        stroke="currentColor"
+        strokeWidth="0.727473"
+      />
+      <path
+        opacity="0.4"
+        d="M53.4749 3.44746V6.35735C54.0603 6.1109 54.441 5.53758 54.441 4.9024C54.441 4.26722 54.0603 3.69391 53.4749 3.44746Z"
+        fill="currentColor"
+      />
+      <path
+        d="M36.5434 2.75797C36.5434 1.99638 37.1608 1.37898 37.9224 1.37898H50.0274C50.789 1.37898 51.4064 1.99637 51.4064 2.75796V6.20542C51.4064 6.96701 50.789 7.5844 50.0274 7.5844H37.9224C37.1608 7.5844 36.5434 6.96701 36.5434 6.20542V2.75797Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/ui/photo-wall.tsx

@@ -41,6 +41,8 @@ const WIDE_MIN_RATIO = 1.2;
 // A picture the browser has neither loaded nor refused by now is laid out as a landscape.
 const MEASURE_TIMEOUT_MS = 4000;
 const COLUMN_GAP_PX = 12;
+/** How many of a column's first frames load at once (they are in view when the wall is drawn). */
+const EAGER_PHOTOS_PER_COLUMN = 2;
 // A column is repeated until it is this much taller than the wall.
 const FILL_FACTOR = 1.25;
 const MAX_REPEATS = 8;
@@ -280,6 +282,10 @@ export function PhotoWall({ images, columns = 2, speed = 24, fadeColor, classNam
                     // caller's url is drawn as it is (already sized by its own image service).
                     optimizedWidth={drawnWidth}
                     unoptimized
+                    // A column's first frames are on screen when the wall appears (one of them is
+                    // usually the page's largest paint), so they are not left to lazy loading.
+                    loading={i < EAGER_PHOTOS_PER_COLUMN ? 'eager' : 'lazy'}
+                    fetchPriority={index === 0 && i === 0 ? 'high' : undefined}
                   />
                 </div>
               ))}

package/src/components/ui/snap-carousel.tsx

@@ -6,7 +6,6 @@ import { useInView } from '../../hooks/ui/use-in-view';
 import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
-import { PlaybackToggle } from './playback-toggle';
 
 /** The row under the track: the dots, the counter, the pause and the two arrows (the arrows set its height). */
 const SNAP_CAROUSEL_CONTROLS_CLASS = 'mt-3 flex items-center gap-2';
@@ -28,9 +27,6 @@ export interface SnapCarouselProps<T> {
   label: string;
   /** Move to the next slide after this long. `0` turns auto-advance off. Default 5000. */
   autoAdvanceMs?: number;
-  /** Names of the stop/start control. */
-  playLabel?: string;
-  pauseLabel?: string;
   /** Width of one slide. Default `basis-[300px]`. */
   slideClassName?: string;
   prevLabel?: string;
@@ -67,10 +63,10 @@ function DotFill({ durationMs }: { durationMs: number }) {
  *
  * WHEN IT ADVANCES is `useAutoplay`'s rule, the same one the looping demos
  * use: mostly on screen, tab visible, not paused, motion allowed. A swipe or
- * an arrow moves it and it carries on from there after a full interval; it
- * waits only while a finger or the mouse button is actually down on it. The
- * small pause control stops it for good, and starts it again. While it is
- * auto-playing the active dot fills over the interval, so the wait is visible.
+ * an arrow moves it and it carries on from there after a full interval. It
+ * waits while the visitor holds it (`useAutoplay`'s hold: a finger or the
+ * mouse button down on it, the keyboard inside it); there is no pause button. While it is auto-playing the active dot fills over the
+ * interval, so the wait is visible.
  */
 export function SnapCarousel<T>({
   items,
@@ -78,8 +74,6 @@ export function SnapCarousel<T>({
   getKey,
   label,
   autoAdvanceMs = 5000,
-  playLabel,
-  pauseLabel,
   slideClassName = 'basis-[300px]',
   prevLabel = 'Previous',
   nextLabel = 'Next',
@@ -88,8 +82,6 @@ export function SnapCarousel<T>({
 }: SnapCarouselProps<T>) {
   const trackRef = useRef<HTMLDivElement | null>(null);
   const [index, setIndex] = useState(0);
-  // Held only while a finger or the mouse button is down on it: the visitor is mid-swipe.
-  const [pressed, setPressed] = useState(false);
   const { ref: viewRef, inView } = useInView<HTMLDivElement>({ threshold: 0.5 });
   const auto = useAutoplay(inView);
   const count = items.length;
@@ -127,24 +119,8 @@ export function SnapCarousel<T>({
     setIndex(Math.min(count - 1, Math.round(track.scrollLeft / step)));
   }, [count, slideStep]);
 
-  // The release is listened for on the WINDOW: a press that ends outside the
-  // carousel (a drag that leaves it, a scroll the browser takes over) must
-  // still end, or the carousel would wait forever.
-  useEffect(() => {
-    if (!pressed) return undefined;
-    const release = () => setPressed(false);
-    window.addEventListener('pointerup', release);
-    window.addEventListener('pointercancel', release);
-    window.addEventListener('blur', release);
-    return () => {
-      window.removeEventListener('pointerup', release);
-      window.removeEventListener('pointercancel', release);
-      window.removeEventListener('blur', release);
-    };
-  }, [pressed]);
-
   const canAutoAdvance = autoAdvanceMs > 0 && count > 1;
-  const playing = auto.playing && canAutoAdvance && !pressed;
+  const playing = auto.playing && canAutoAdvance;
 
   // Restarts on every slide change, so a swipe or an arrow is followed by a full interval.
   useEffect(() => {
@@ -164,7 +140,7 @@ export function SnapCarousel<T>({
   if (count === 0) return null;
 
   return (
-    <div className={className} onPointerDown={() => setPressed(true)}>
+    <div className={className} {...auto.holdProps}>
       <div
         ref={setRefs}
         onScroll={onScroll}
@@ -212,14 +188,6 @@ export function SnapCarousel<T>({
         >
           {index + 1} / {count}
         </span>
-        {canAutoAdvance && !auto.reducedMotion && (
-          <PlaybackToggle
-            paused={auto.paused}
-            onChange={auto.setPaused}
-            playLabel={playLabel}
-            pauseLabel={pauseLabel}
-          />
-        )}
         <button
           type="button"
           aria-label={prevLabel}