@open-aippt/core 1.13.2

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

@@ -0,0 +1,315 @@
+import {
+  ChevronLeft,
+  ChevronRight,
+  Crosshair,
+  Grid2x2,
+  Keyboard,
+  LogOut,
+  Maximize,
+  Minimize,
+  MonitorSpeaker,
+  Square,
+  Sun,
+} from 'lucide-react';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useLocale } from '@/lib/use-locale';
+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;
+  windowed: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+  onMobileInteraction: () => void;
+  onOverview: () => void;
+  onBlackout: (mode: 'black' | 'white') => void;
+  onLaser: () => void;
+  onPresenter: () => void;
+  onToggleFullscreen: () => 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,
+  windowed,
+  onPrev,
+  onNext,
+  onMobileInteraction,
+  onOverview,
+  onBlackout,
+  onLaser,
+  onPresenter,
+  onToggleFullscreen,
+  onHelp,
+  onExit,
+  tooltipContainer,
+}: Props) {
+  const t = useLocale();
+  const fullscreenAria = windowed ? t.present.enterFullscreenAria : t.present.exitFullscreenAria;
+  const handleMobileAction = (action: () => void) => {
+    action();
+    onMobileInteraction();
+  };
+
+  return (
+    <div
+      data-state={visible ? 'visible' : 'hidden'}
+      className={cn(
+        'pointer-events-none absolute inset-x-0 bottom-0 z-40 flex justify-center px-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] md:px-4 md: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={cn(
+              'hidden 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 md:flex',
+              visible ? 'pointer-events-auto' : 'pointer-events-none',
+            )}
+          >
+            <BarButton label={t.present.prevSlideAria} onClick={onPrev} disabled={index === 0}>
+              <ChevronLeft className="size-4" />
+            </BarButton>
+            <BarButton
+              label={t.present.nextSlideAria}
+              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={t.present.overviewAria} onClick={onOverview}>
+              <Grid2x2 className="size-4" />
+            </BarButton>
+            <BarButton
+              label={t.present.blackoutAria}
+              onClick={() => onBlackout('black')}
+              active={blackout === 'black'}
+            >
+              <Square className="size-4 fill-current" />
+            </BarButton>
+            <BarButton
+              label={t.present.whiteoutAria}
+              onClick={() => onBlackout('white')}
+              active={blackout === 'white'}
+            >
+              <Sun className="size-4" />
+            </BarButton>
+            <BarButton label={t.present.laserAria} onClick={onLaser} active={laser}>
+              <Crosshair className="size-4" />
+            </BarButton>
+            <BarButton label={t.present.presenterAria} onClick={onPresenter}>
+              <MonitorSpeaker className="size-4" />
+            </BarButton>
+            <BarButton label={fullscreenAria} onClick={onToggleFullscreen}>
+              {windowed ? <Maximize className="size-4" /> : <Minimize className="size-4" />}
+            </BarButton>
+            <BarButton label={t.present.helpAria} onClick={onHelp}>
+              <Keyboard className="size-4" />
+            </BarButton>
+
+            {allowExit && (
+              <>
+                <Divider />
+                <BarButton label={t.present.exitAria} onClick={onExit}>
+                  <LogOut className="size-4" />
+                </BarButton>
+              </>
+            )}
+          </div>
+
+          <div
+            className={cn(
+              'flex w-fit max-w-[calc(100vw-1.5rem)] md:hidden',
+              visible ? 'pointer-events-auto' : 'pointer-events-none',
+            )}
+          >
+            <div className="flex h-10 w-fit items-center gap-0.5 rounded-full border border-white/10 bg-black/60 px-1 text-white/85 shadow-[0_8px_30px_-8px_oklch(0_0_0/0.65)] backdrop-blur-md">
+              <MobileBarButton
+                label={t.present.prevSlideAria}
+                onClick={() => handleMobileAction(onPrev)}
+                disabled={index === 0}
+              >
+                <ChevronLeft className="size-4" />
+              </MobileBarButton>
+              <span className="min-w-[3.5rem] px-1 text-center font-mono text-[11.5px] tabular-nums text-white/80 select-none">
+                <span className="text-white">{index + 1}</span>
+                <span className="px-1 text-white/35">/</span>
+                <span>{total}</span>
+              </span>
+              <MobileBarButton
+                label={t.present.nextSlideAria}
+                onClick={() => handleMobileAction(onNext)}
+                disabled={index >= total - 1}
+              >
+                <ChevronRight className="size-4" />
+              </MobileBarButton>
+              <MobileDivider />
+              <MobileBarButton
+                label={t.present.overviewAria}
+                onClick={() => handleMobileAction(onOverview)}
+              >
+                <Grid2x2 className="size-4" />
+              </MobileBarButton>
+              {allowExit && (
+                <MobileBarButton
+                  label={t.present.exitAria}
+                  onClick={() => handleMobileAction(onExit)}
+                >
+                  <LogOut className="size-4" />
+                </MobileBarButton>
+              )}
+            </div>
+          </div>
+        </TooltipContainerCtx.Provider>
+      </TooltipProvider>
+    </div>
+  );
+}
+
+function MobileBarButton({
+  children,
+  label,
+  onClick,
+  disabled,
+}: {
+  children: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      disabled={disabled}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+      className={cn(
+        'inline-flex size-8 shrink-0 touch-manipulation items-center justify-center rounded-full transition-colors',
+        'text-white/85 hover:bg-white/12 focus-visible:bg-white/12 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/35',
+        'disabled:pointer-events-none disabled:opacity-30',
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function MobileDivider() {
+  return <span aria-hidden className="mx-0.5 h-3.5 w-px shrink-0 bg-white/15" />;
+}
+
+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={(event) => {
+            event.stopPropagation();
+            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());
+  const t = useLocale();
+  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={t.present.elapsedTime}
+      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,57 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useLocale } from '@/lib/use-locale';
+
+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) {
+  const t = useLocale();
+  const shortcuts: Array<{ keys: string[]; label: string }> = [
+    { keys: ['→', '↓', 'Space', 'PgDn'], label: t.present.shortcutNext },
+    { keys: ['←', '↑', 'PgUp'], label: t.present.shortcutPrev },
+    { keys: ['Home', 'End'], label: t.present.shortcutFirstLast },
+    { keys: ['1–9', 'Enter'], label: t.present.shortcutJump },
+    { keys: ['O'], label: t.present.shortcutOverview },
+    { keys: ['B'], label: t.present.shortcutBlack },
+    { keys: ['W'], label: t.present.shortcutWhite },
+    { keys: ['L'], label: t.present.shortcutLaser },
+    { keys: ['P'], label: t.present.shortcutPresenter },
+    { keys: ['?', 'H'], label: t.present.shortcutToggleHelp },
+    { keys: ['Esc'], label: t.present.shortcutCloseExit },
+  ];
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent container={container ?? undefined} className="max-w-lg sm:max-w-lg">
+        <DialogHeader>
+          <span className="eyebrow">{t.present.helpEyebrow}</span>
+          <DialogTitle>{t.present.helpTitle}</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>
+  );
+}

package/src/app/components/present/laser-pointer.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+type Pos = { x: number; y: number } | null;
+
+/**
+ * Soft red dot that follows the cursor when the laser tool is active.
+ * Hides the system cursor on the player root via a `cursor-none` class
+ * applied by the parent.
+ */
+export function PresentLaserPointer({ enabled }: { enabled: boolean }) {
+  const [pos, setPos] = useState<Pos>(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      setPos(null);
+      return;
+    }
+    const onMove = (e: MouseEvent) => setPos({ x: e.clientX, y: e.clientY });
+    window.addEventListener('mousemove', onMove, { passive: true });
+    return () => window.removeEventListener('mousemove', onMove);
+  }, [enabled]);
+
+  if (!enabled || !pos) return null;
+  return (
+    <div
+      aria-hidden
+      className="pointer-events-none fixed top-0 left-0 z-[60]"
+      style={{
+        width: 18,
+        height: 18,
+        transform: `translate3d(${pos.x - 9}px, ${pos.y - 9}px, 0)`,
+        willChange: 'transform',
+        borderRadius: '50%',
+        background: 'radial-gradient(circle, oklch(0.66 0.24 28 / 0.95) 30%, transparent 70%)',
+        boxShadow: '0 0 18px 4px oklch(0.66 0.24 28 / 0.55)',
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,26 @@
+import { cn } from '@/lib/utils';
+
+type Props = {
+  index: number;
+  total: number;
+  visible: boolean;
+};
+
+export function PresentProgressBar({ index, total, visible }: Props) {
+  const pct = total > 0 ? (index + 1) / total : 0;
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-x-0 top-0 z-30 h-[2px] overflow-hidden bg-white/8',
+        'motion-safe:transition-opacity motion-safe:duration-200',
+        visible ? 'opacity-100' : 'opacity-0',
+      )}
+    >
+      <div
+        className="h-full w-full origin-left bg-[var(--brand,#ef4444)] transition-transform duration-200 ease-out"
+        style={{ transform: `scaleX(${pct})` }}
+      />
+    </div>
+  );
+}

package/src/app/components/present/use-idle.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Reports whether the user has been idle (no pointer / touch input) for at
+ * least `delayMs`. Resets on any pointer-related event. The hook starts in
+ * the non-idle state so freshly-mounted UI is visible while the user
+ * orients themselves.
+ *
+ * Keyboard input is intentionally excluded — during a talk the presenter
+ * drives slides with arrow keys, and we want the cursor to stay hidden
+ * while they do.
+ *
+ * Pass `enabled = false` to short-circuit (useful when the player is
+ * paused on an overlay and we don't want to hide chrome behind it).
+ */
+export function useIdle(delayMs: number, enabled = true) {
+  const [idle, setIdle] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setIdle(false);
+      return;
+    }
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const reset = () => {
+      setIdle(false);
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => setIdle(true), delayMs);
+    };
+    reset();
+    const opts = { passive: true } as const;
+    window.addEventListener('mousemove', reset, opts);
+    window.addEventListener('mousedown', reset, opts);
+    window.addEventListener('touchstart', reset, opts);
+    window.addEventListener('wheel', reset, opts);
+    return () => {
+      if (timer) clearTimeout(timer);
+      window.removeEventListener('mousemove', reset);
+      window.removeEventListener('mousedown', reset);
+      window.removeEventListener('touchstart', reset);
+      window.removeEventListener('wheel', reset);
+    };
+  }, [delayMs, enabled]);
+
+  return idle;
+}

package/src/app/components/present/use-pointer-near-bottom.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns true while the mouse pointer sits within `thresholdPx` of the
+ * viewport's bottom edge. Pure pointer-position tracking — keyboard input
+ * does not affect the result, so arrow-key navigation won't reveal the
+ * control chrome.
+ *
+ * Pass `enabled = false` to short-circuit (e.g. when an overlay owns
+ * visibility) and reset to false.
+ */
+export function usePointerNearBottom(thresholdPx: number, enabled = true) {
+  const [near, setNear] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setNear(false);
+      return;
+    }
+    const update = (clientY: number) => {
+      setNear(clientY >= window.innerHeight - thresholdPx);
+    };
+    const onMove = (e: MouseEvent) => update(e.clientY);
+    const onLeave = () => setNear(false);
+    window.addEventListener('mousemove', onMove, { passive: true });
+    document.addEventListener('mouseleave', onLeave);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseleave', onLeave);
+    };
+  }, [thresholdPx, enabled]);
+
+  return near;
+}

package/src/app/components/present/use-presenter-channel.ts

@@ -0,0 +1,66 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+export type PresenterState = {
+  index: number;
+  pageCount: number;
+  blackout: 'black' | 'white' | null;
+  startedAt: number; // epoch ms when present mode began
+  stepIndex: number;
+  stepCount: number;
+};
+
+export type PresenterCommand =
+  | { type: 'state'; state: PresenterState }
+  | { type: 'goto'; index: number }
+  | { type: 'next' }
+  | { type: 'prev' }
+  | { type: 'request-state' }
+  | { type: 'restart-timer' }
+  | { type: 'toggle-blackout'; mode: 'black' | 'white' };
+
+type Handler = (msg: PresenterCommand) => void;
+
+const SUPPORTED = typeof window !== 'undefined' && typeof BroadcastChannel !== 'undefined';
+
+// Channel ownership lives in the effect (not useMemo) so StrictMode's
+// double-invoke produces a fresh channel on remount rather than leaving a
+// closed one behind that throws on the next send().
+export function usePresenterChannel(slideId: string, onMessage?: Handler) {
+  const onMessageRef = useRef(onMessage);
+  onMessageRef.current = onMessage;
+
+  const channelRef = useRef<BroadcastChannel | null>(null);
+  const [available, setAvailable] = useState(false);
+
+  useEffect(() => {
+    if (!SUPPORTED) return;
+    const channel = new BroadcastChannel(`open-aippt:presenter:${slideId}`);
+    channelRef.current = channel;
+    setAvailable(true);
+    const handler = (e: MessageEvent<PresenterCommand>) => {
+      onMessageRef.current?.(e.data);
+    };
+    channel.addEventListener('message', handler);
+    return () => {
+      channel.removeEventListener('message', handler);
+      channel.close();
+      if (channelRef.current === channel) channelRef.current = null;
+      setAvailable(false);
+    };
+  }, [slideId]);
+
+  return useMemo(
+    () => ({
+      send(msg: PresenterCommand) {
+        try {
+          channelRef.current?.postMessage(msg);
+        } catch {
+          // Channel may have been closed between the availability check
+          // and the send (e.g. StrictMode unmount mid-flush). Treat as no-op.
+        }
+      },
+      available,
+    }),
+    [available],
+  );
+}