@open-slide/core 0.0.10 → 0.0.12

package/src/app/components/player.tsx

@@ -0,0 +1,341 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
+import { cn } from '@/lib/utils';
+import type { DesignSystem } from '../../design';
+import type { Page } from '../lib/sdk';
+import { PresentBlackoutOverlay } from './present/blackout-overlay';
+import { PresentControlBar } from './present/control-bar';
+import { PresentHelpOverlay } from './present/help-overlay';
+import { PresentJumpInput } from './present/jump-input';
+import { PresentLaserPointer } from './present/laser-pointer';
+import { PresentOverviewGrid } from './present/overview-grid';
+import { PresentProgressBar } from './present/progress-bar';
+import { useIdle } from './present/use-idle';
+import { usePointerNearBottom } from './present/use-pointer-near-bottom';
+import {
+  type PresenterCommand,
+  type PresenterState,
+  usePresenterChannel,
+} from './present/use-presenter-channel';
+import { useTouchSwipe } from './present/use-touch-swipe';
+import { SlideCanvas } from './slide-canvas';
+
+const IDLE_HIDE_MS = 2000;
+// Bottom band of the viewport that reveals the control bar + progress bar.
+// Generous enough to feel forgiving with a trackpad, tight enough not to
+// flash on incidental cursor moves.
+const BAR_HOTZONE_PX = 160;
+
+type Props = {
+  pages: Page[];
+  design?: DesignSystem;
+  index: number;
+  onIndexChange: (index: number) => void;
+  onExit: () => void;
+  allowExit?: boolean;
+  /**
+   * When true, render the full presenter chrome (control bar, progress bar,
+   * overview, blackout, laser pointer, jump-to-slide, help overlay, and
+   * the BroadcastChannel sync that powers Presenter View). Defaults to
+   * false so the static HTML export and any other minimal embeddings stay
+   * untouched.
+   */
+  controls?: boolean;
+  /** Optional id used to namespace the BroadcastChannel for Presenter View. */
+  slideId?: string;
+};
+
+export function Player({
+  pages,
+  design,
+  index,
+  onIndexChange,
+  onExit,
+  allowExit = true,
+  controls = false,
+  slideId,
+}: Props) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  // Mirrored as state so children that need to portal *into* the player
+  // (tooltips, popovers — the body is outside the fullscreen subtree and
+  // therefore invisible) can subscribe and re-render once the node mounts.
+  const [rootEl, setRootEl] = useState<HTMLDivElement | null>(null);
+  const setRoot = useCallback((el: HTMLDivElement | null) => {
+    rootRef.current = el;
+    setRootEl(el);
+  }, []);
+
+  // ── Overlay state (only meaningful when `controls` is true) ────────────
+  const [overviewOpen, setOverviewOpen] = useState(false);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [blackout, setBlackout] = useState<'black' | 'white' | null>(null);
+  const [laser, setLaser] = useState(false);
+  const [startedAt] = useState(() => Date.now());
+
+  const goPrev = useCallback(() => {
+    if (index > 0) onIndexChange(index - 1);
+  }, [index, onIndexChange]);
+  const goNext = useCallback(() => {
+    if (index < pages.length - 1) onIndexChange(index + 1);
+  }, [index, pages.length, onIndexChange]);
+
+  const overlayActive = controls && (overviewOpen || helpOpen);
+
+  useWheelPageNavigation({
+    ref: rootRef,
+    enabled: !overlayActive,
+    canPrev: index > 0,
+    canNext: index < pages.length - 1,
+    onPrev: goPrev,
+    onNext: goNext,
+  });
+
+  useTouchSwipe({
+    ref: rootRef,
+    enabled: controls && !overlayActive,
+    onPrev: goPrev,
+    onNext: goNext,
+  });
+
+  // ── Fullscreen lifecycle ───────────────────────────────────────────────
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    if (document.fullscreenElement !== el) {
+      el.requestFullscreen?.().catch(() => {});
+    }
+    return () => {
+      if (document.fullscreenElement) document.exitFullscreen?.().catch(() => {});
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!allowExit) return;
+    const onFsChange = () => {
+      if (!document.fullscreenElement) onExit();
+    };
+    document.addEventListener('fullscreenchange', onFsChange);
+    return () => document.removeEventListener('fullscreenchange', onFsChange);
+  }, [onExit, allowExit]);
+
+  // ── Presenter View sync ────────────────────────────────────────────────
+  // Player is the source of truth. It re-publishes state on every change
+  // and answers `request-state` pings so newly opened presenter windows
+  // hydrate immediately. Notes are loaded by Presenter View itself from
+  // the same slide module, so they don't cross the channel.
+  const presenterState = useMemo<PresenterState>(
+    () => ({ index, pageCount: pages.length, blackout, startedAt }),
+    [index, pages.length, blackout, startedAt],
+  );
+  const presenterStateRef = useRef(presenterState);
+  presenterStateRef.current = presenterState;
+
+  const handlePresenterCommand = useCallback(
+    (msg: PresenterCommand, send: (m: PresenterCommand) => void) => {
+      if (msg.type === 'next') goNext();
+      else if (msg.type === 'prev') goPrev();
+      else if (msg.type === 'goto') {
+        onIndexChange(Math.max(0, Math.min(pages.length - 1, msg.index)));
+      } else if (msg.type === 'toggle-blackout') {
+        setBlackout((cur) => (cur === msg.mode ? null : msg.mode));
+      } else if (msg.type === 'request-state') {
+        send({ type: 'state', state: presenterStateRef.current });
+      }
+    },
+    [goNext, goPrev, onIndexChange, pages.length],
+  );
+
+  const channel = usePresenterChannel(slideId ?? '__none__', (msg) => {
+    if (!controls) return;
+    handlePresenterCommand(msg, (m) => channel.send(m));
+  });
+
+  useEffect(() => {
+    if (!controls || !channel.available) return;
+    channel.send({ type: 'state', state: presenterState });
+  }, [controls, channel, presenterState]);
+
+  // ── Keyboard ───────────────────────────────────────────────────────────
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const tgt = e.target;
+      if (tgt instanceof HTMLElement && tgt.matches('input, textarea')) return;
+
+      // While an overlay is open, only Esc and the toggle that owns it
+      // should reach the Player. Overview installs its own capture-phase
+      // listener and stops propagation, so it won't double-fire here.
+      if (overlayActive) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          if (overviewOpen) setOverviewOpen(false);
+          if (helpOpen) setHelpOpen(false);
+        } else if (helpOpen && (e.key === '?' || e.key === 'h' || e.key === 'H')) {
+          e.preventDefault();
+          setHelpOpen(false);
+        }
+        return;
+      }
+
+      // Esc → close blackout if any, otherwise exit fullscreen.
+      if (e.key === 'Escape') {
+        if (controls && blackout) {
+          e.preventDefault();
+          setBlackout(null);
+          return;
+        }
+        if (allowExit) onExit();
+        return;
+      }
+
+      const isNext =
+        e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ' || e.key === 'PageDown';
+      const isPrev = e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp';
+
+      if (isNext || isPrev) {
+        if (controls && blackout) setBlackout(null);
+      }
+
+      if (isNext) {
+        e.preventDefault();
+        goNext();
+        return;
+      }
+      if (isPrev) {
+        e.preventDefault();
+        goPrev();
+        return;
+      }
+      if (e.key === 'Home') {
+        onIndexChange(0);
+        return;
+      }
+      if (e.key === 'End') {
+        onIndexChange(pages.length - 1);
+        return;
+      }
+
+      if (!controls) return;
+      // Single-letter shortcuts only fire when no modifier is held — keeps
+      // browser shortcuts (Cmd/Ctrl-something) from being hijacked.
+      if (e.altKey || e.ctrlKey || e.metaKey) return;
+
+      if (e.key === 'b' || e.key === 'B') {
+        e.preventDefault();
+        setBlackout((c) => (c === 'black' ? null : 'black'));
+      } else if (e.key === 'w' || e.key === 'W') {
+        e.preventDefault();
+        setBlackout((c) => (c === 'white' ? null : 'white'));
+      } else if (e.key === 'o' || e.key === 'O') {
+        e.preventDefault();
+        setOverviewOpen((v) => !v);
+      } else if (e.key === 'l' || e.key === 'L') {
+        e.preventDefault();
+        setLaser((v) => !v);
+      } else if (e.key === 'h' || e.key === 'H' || e.key === '?') {
+        e.preventDefault();
+        setHelpOpen((v) => !v);
+      } else if ((e.key === 'p' || e.key === 'P') && slideId) {
+        e.preventDefault();
+        openPresenterWindow(slideId);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [
+    controls,
+    overlayActive,
+    overviewOpen,
+    helpOpen,
+    blackout,
+    allowExit,
+    onExit,
+    goNext,
+    goPrev,
+    onIndexChange,
+    pages.length,
+    slideId,
+  ]);
+
+  // ── Chrome visibility / cursor ─────────────────────────────────────────
+  // The control bar + progress strip only surface when the pointer is in
+  // the bottom hot zone. Keyboard nav (arrows / space / PgDn) never
+  // reveals them — that's intentional so the deck stays clean.
+  const pointerNearBottom = usePointerNearBottom(BAR_HOTZONE_PX, controls && !overlayActive);
+  const chromeVisible = pointerNearBottom || overlayActive;
+  const idle = useIdle(IDLE_HIDE_MS, controls && !overlayActive);
+  const hideCursor = controls && (laser || (idle && !overlayActive && !pointerNearBottom));
+
+  const PageComp = pages[index];
+
+  return (
+    <div
+      ref={setRoot}
+      className={cn(
+        'relative flex h-dvh w-screen items-center justify-center bg-black',
+        hideCursor && 'cursor-none',
+      )}
+    >
+      <SlideCanvas flat design={design}>
+        {PageComp ? <PageComp /> : null}
+      </SlideCanvas>
+
+      {/* Invisible side click zones — the original mobile-friendly nav. */}
+      <button
+        type="button"
+        aria-label="Previous page"
+        onClick={goPrev}
+        disabled={index === 0}
+        className="absolute inset-y-0 left-0 z-10 w-[30%]"
+      />
+      <button
+        type="button"
+        aria-label="Next page"
+        onClick={goNext}
+        disabled={index === pages.length - 1}
+        className="absolute inset-y-0 right-0 z-10 w-[30%]"
+      />
+
+      {controls && (
+        <>
+          <PresentProgressBar index={index} total={pages.length} visible={chromeVisible} />
+          <PresentBlackoutOverlay mode={blackout} />
+          <PresentJumpInput pageCount={pages.length} onJump={onIndexChange} />
+          <PresentLaserPointer enabled={laser} />
+          <PresentControlBar
+            tooltipContainer={rootEl}
+            index={index}
+            total={pages.length}
+            visible={chromeVisible}
+            startedAt={startedAt}
+            blackout={blackout}
+            laser={laser}
+            allowExit={allowExit}
+            onPrev={goPrev}
+            onNext={goNext}
+            onOverview={() => setOverviewOpen(true)}
+            onBlackout={(mode) => setBlackout((c) => (c === mode ? null : mode))}
+            onLaser={() => setLaser((v) => !v)}
+            onPresenter={() => slideId && openPresenterWindow(slideId)}
+            onHelp={() => setHelpOpen(true)}
+            onExit={onExit}
+          />
+          <PresentOverviewGrid
+            pages={pages}
+            design={design}
+            open={overviewOpen}
+            current={index}
+            onClose={() => setOverviewOpen(false)}
+            onSelect={onIndexChange}
+          />
+          <PresentHelpOverlay open={helpOpen} onOpenChange={setHelpOpen} container={rootEl} />
+        </>
+      )}
+    </div>
+  );
+}
+
+function openPresenterWindow(slideId: string) {
+  if (typeof window === 'undefined') return;
+  const url = `/s/${encodeURIComponent(slideId)}/presenter`;
+  window.open(url, `open-slide-presenter-${slideId}`, 'popup,width=1280,height=800');
+}

package/src/app/components/present/blackout-overlay.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils';
+
+type Props = {
+  mode: 'black' | 'white' | null;
+};
+
+export function PresentBlackoutOverlay({ mode }: Props) {
+  if (!mode) return null;
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-0 z-20 motion-safe:transition-opacity motion-safe:duration-150',
+        mode === 'black' ? 'bg-black' : 'bg-white',
+      )}
+    />
+  );
+}

package/src/app/components/present/control-bar.tsx

@@ -0,0 +1,204 @@
+import {
+  ChevronLeft,
+  ChevronRight,
+  Crosshair,
+  Grid2x2,
+  Keyboard,
+  LogOut,
+  MonitorSpeaker,
+  Square,
+  Sun,
+} from 'lucide-react';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+
+const TooltipContainerCtx = createContext<HTMLElement | null>(null);
+
+type Props = {
+  index: number;
+  total: number;
+  visible: boolean;
+  startedAt: number;
+  blackout: 'black' | 'white' | null;
+  laser: boolean;
+  allowExit: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+  onOverview: () => void;
+  onBlackout: (mode: 'black' | 'white') => void;
+  onLaser: () => void;
+  onPresenter: () => void;
+  onHelp: () => void;
+  onExit: () => void;
+  /**
+   * Where to portal tooltips. Required because the Player runs fullscreen
+   * — the default `document.body` portal is outside the fullscreen element
+   * and therefore invisible. Pass the player root.
+   */
+  tooltipContainer?: HTMLElement | null;
+};
+
+export function PresentControlBar({
+  index,
+  total,
+  visible,
+  startedAt,
+  blackout,
+  laser,
+  allowExit,
+  onPrev,
+  onNext,
+  onOverview,
+  onBlackout,
+  onLaser,
+  onPresenter,
+  onHelp,
+  onExit,
+  tooltipContainer,
+}: Props) {
+  return (
+    <div
+      data-state={visible ? 'visible' : 'hidden'}
+      className={cn(
+        'pointer-events-none absolute inset-x-0 bottom-0 z-40 flex justify-center px-4 pb-4',
+        'will-change-[translate,scale,opacity,filter]',
+        'motion-safe:transition-[translate,scale,opacity,filter]',
+        'motion-safe:duration-[420ms] motion-safe:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
+        visible
+          ? 'translate-y-0 scale-100 opacity-100 blur-none'
+          : 'translate-y-8 scale-90 opacity-0 blur-md',
+      )}
+    >
+      <TooltipProvider delayDuration={300}>
+        <TooltipContainerCtx.Provider value={tooltipContainer ?? null}>
+        <div className="pointer-events-auto flex h-11 items-center gap-1 rounded-full border border-white/10 bg-black/55 px-2 text-white/85 shadow-[0_8px_30px_-8px_oklch(0_0_0/0.6)] backdrop-blur-md">
+          <BarButton label="Previous slide (←)" onClick={onPrev} disabled={index === 0}>
+            <ChevronLeft className="size-4" />
+          </BarButton>
+          <BarButton label="Next slide (→)" onClick={onNext} disabled={index >= total - 1}>
+            <ChevronRight className="size-4" />
+          </BarButton>
+
+          <Divider />
+
+          <span className="px-2 font-mono text-[11.5px] tracking-[0.08em] tabular-nums uppercase select-none text-white/85">
+            <span className="text-white">{(index + 1).toString().padStart(2, '0')}</span>
+            <span className="text-white/35"> / </span>
+            <span>{total.toString().padStart(2, '0')}</span>
+          </span>
+
+          <Divider />
+
+          <ElapsedClock startedAt={startedAt} />
+
+          <Divider />
+
+          <BarButton label="Slide overview (O)" onClick={onOverview}>
+            <Grid2x2 className="size-4" />
+          </BarButton>
+          <BarButton
+            label="Black screen (B)"
+            onClick={() => onBlackout('black')}
+            active={blackout === 'black'}
+          >
+            <Square className="size-4 fill-current" />
+          </BarButton>
+          <BarButton
+            label="White screen (W)"
+            onClick={() => onBlackout('white')}
+            active={blackout === 'white'}
+          >
+            <Sun className="size-4" />
+          </BarButton>
+          <BarButton label="Laser pointer (L)" onClick={onLaser} active={laser}>
+            <Crosshair className="size-4" />
+          </BarButton>
+          <BarButton label="Presenter view (P)" onClick={onPresenter}>
+            <MonitorSpeaker className="size-4" />
+          </BarButton>
+          <BarButton label="Keyboard shortcuts (?)" onClick={onHelp}>
+            <Keyboard className="size-4" />
+          </BarButton>
+
+          {allowExit && (
+            <>
+              <Divider />
+              <BarButton label="Exit (Esc)" onClick={onExit}>
+                <LogOut className="size-4" />
+              </BarButton>
+            </>
+          )}
+        </div>
+        </TooltipContainerCtx.Provider>
+      </TooltipProvider>
+    </div>
+  );
+}
+
+function BarButton({
+  children,
+  label,
+  onClick,
+  disabled,
+  active,
+}: {
+  children: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  active?: boolean;
+}) {
+  const container = useContext(TooltipContainerCtx);
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={label}
+          disabled={disabled}
+          onClick={onClick}
+          className={cn(
+            'inline-flex size-8 items-center justify-center rounded-full transition-colors',
+            'hover:bg-white/12 focus-visible:bg-white/12 focus-visible:outline-none',
+            'disabled:pointer-events-none disabled:opacity-30',
+            active && 'bg-[var(--brand,#ef4444)]/85 text-white hover:bg-[var(--brand,#ef4444)]',
+          )}
+        >
+          {children}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent
+        container={container ?? undefined}
+        side="top"
+        sideOffset={6}
+        className="bg-black/85 text-white"
+      >
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function Divider() {
+  return <span aria-hidden className="mx-1 h-4 w-px bg-white/15" />;
+}
+
+function ElapsedClock({ startedAt }: { startedAt: number }) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  const elapsed = Math.max(0, Math.floor((now - startedAt) / 1000));
+  const m = Math.floor(elapsed / 60);
+  const s = elapsed % 60;
+  return (
+    <time
+      title="Elapsed time"
+      className="px-2 font-mono text-[11.5px] tracking-[0.08em] tabular-nums uppercase select-none text-white/70"
+    >
+      {m.toString().padStart(2, '0')}:{s.toString().padStart(2, '0')}
+    </time>
+  );
+}

package/src/app/components/present/help-overlay.tsx

@@ -0,0 +1,56 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+
+const SHORTCUTS: Array<{ keys: string[]; label: string }> = [
+  { keys: ['→', '↓', 'Space', 'PgDn'], label: 'Next slide' },
+  { keys: ['←', '↑', 'PgUp'], label: 'Previous slide' },
+  { keys: ['Home', 'End'], label: 'First / last slide' },
+  { keys: ['1–9', 'Enter'], label: 'Jump to slide' },
+  { keys: ['O'], label: 'Slide overview' },
+  { keys: ['B'], label: 'Black screen' },
+  { keys: ['W'], label: 'White screen' },
+  { keys: ['L'], label: 'Laser pointer' },
+  { keys: ['P'], label: 'Open Presenter View' },
+  { keys: ['?', 'H'], label: 'Toggle this help' },
+  { keys: ['Esc'], label: 'Close overlay / exit' },
+];
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Portal target — pass the player root so the dialog renders inside
+   *  the fullscreen subtree (otherwise it paints invisibly under it). */
+  container?: HTMLElement | null;
+};
+
+export function PresentHelpOverlay({ open, onOpenChange, container }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent container={container ?? undefined} className="max-w-lg sm:max-w-lg">
+        <DialogHeader>
+          <span className="eyebrow">Present mode</span>
+          <DialogTitle>Keyboard shortcuts</DialogTitle>
+        </DialogHeader>
+        <div className="grid grid-cols-1 gap-x-8 gap-y-2 sm:grid-cols-2">
+          {SHORTCUTS.map((row) => (
+            <div
+              key={row.label}
+              className="flex items-center justify-between gap-3 border-b border-hairline py-1.5 last:border-0"
+            >
+              <span className="text-[12.5px] text-foreground/85">{row.label}</span>
+              <span className="flex shrink-0 items-center gap-1">
+                {row.keys.map((k) => (
+                  <kbd
+                    key={k}
+                    className="rounded-[4px] border border-border bg-muted px-1.5 py-0.5 font-mono text-[10.5px] tabular-nums"
+                  >
+                    {k}
+                  </kbd>
+                ))}
+              </span>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/app/components/present/jump-input.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+
+const FLUSH_DELAY_MS = 1200;
+
+type Props = {
+  pageCount: number;
+  onJump: (index: number) => void;
+};
+
+/**
+ * Listens for digit keypresses anywhere on the document and shows a
+ * transient "→ 7" badge. Pressing Enter (or letting it idle) flushes the
+ * buffer and jumps to the slide. Designed to be invisible until the user
+ * starts typing — never steals focus, never shows an input element.
+ */
+export function PresentJumpInput({ pageCount, onJump }: Props) {
+  const [buffer, setBuffer] = useState('');
+  const flushRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const flush = () => {
+      setBuffer((current) => {
+        if (!current) return current;
+        const n = Number.parseInt(current, 10);
+        if (Number.isFinite(n) && n >= 1) {
+          onJump(Math.min(pageCount, n) - 1);
+        }
+        return '';
+      });
+    };
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLElement && e.target.matches('input, textarea')) return;
+      if (e.altKey || e.ctrlKey || e.metaKey) return;
+
+      if (/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+        setBuffer((b) => (b + e.key).slice(0, 4));
+        if (flushRef.current) clearTimeout(flushRef.current);
+        flushRef.current = setTimeout(flush, FLUSH_DELAY_MS);
+        return;
+      }
+      if (e.key === 'Enter') {
+        if (flushRef.current) clearTimeout(flushRef.current);
+        flush();
+        return;
+      }
+      if (e.key === 'Backspace') {
+        setBuffer((b) => b.slice(0, -1));
+        return;
+      }
+      if (e.key === 'Escape' || e.key === ' ') {
+        setBuffer('');
+      }
+    };
+
+    window.addEventListener('keydown', onKey);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      if (flushRef.current) clearTimeout(flushRef.current);
+    };
+  }, [pageCount, onJump]);
+
+  if (!buffer) return null;
+  return (
+    <div
+      aria-live="polite"
+      className="pointer-events-none absolute top-1/2 left-1/2 z-40 -translate-x-1/2 -translate-y-1/2 select-none rounded-[10px] bg-black/70 px-6 py-4 font-mono text-[44px] font-medium tracking-[0.05em] text-white tabular-nums shadow-[0_8px_40px_-8px_oklch(0_0_0/0.6)] backdrop-blur-md"
+    >
+      <span className="text-white/60">→ </span>
+      {buffer}
+    </div>
+  );
+}