@open-aippt/core 1.13.2

package/src/app/components/inspector/save-bar.tsx

@@ -0,0 +1,48 @@
+import { useHistory } from '@/components/history-provider';
+import { SaveCard } from '@/components/panel/save-card';
+import { useDesignPanelState } from '@/components/style-panel/design-provider';
+import { format, plural, useLocale } from '@/lib/use-locale';
+import { useInspector } from './inspector-provider';
+
+export function SaveBar() {
+  const insp = useInspector();
+  const design = useDesignPanelState();
+  const history = useHistory();
+  const t = useLocale();
+
+  const inspectorCount = insp.pendingCount;
+  const designCount = design.dirty ? 1 : 0;
+  const total = inspectorCount + designCount;
+
+  const dirty = total > 0;
+  const committing = insp.committing || design.committing;
+
+  const onSave = async () => {
+    const tasks: Promise<void>[] = [];
+    if (inspectorCount > 0) tasks.push(Promise.resolve(insp.commitEdits()));
+    if (designCount > 0) tasks.push(Promise.resolve(design.commit()));
+    // Each provider surfaces its own errors via toast; swallow here so
+    // one failure doesn't reject the combined save.
+    await Promise.all(tasks).catch(() => {});
+  };
+
+  const onDiscard = () => {
+    if (inspectorCount > 0) insp.cancelEdits();
+    if (designCount > 0) design.discard();
+  };
+
+  return (
+    <SaveCard
+      uiAttr="inspector"
+      dirty={dirty}
+      committing={committing}
+      onSave={onSave}
+      onDiscard={onDiscard}
+      unsavedLabel={format(plural(total, t.inspector.unsavedChanges), { count: total })}
+      onUndo={history.undo}
+      onRedo={history.redo}
+      canUndo={history.canUndo}
+      canRedo={history.canRedo}
+    />
+  );
+}

package/src/app/components/language-toggle.tsx

@@ -0,0 +1,39 @@
+import { Languages } from 'lucide-react';
+import { buttonVariants } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { LOCALE_OPTIONS, setLocale } from '@/lib/locale-store';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+export function LanguageToggle() {
+  const t = useLocale();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        type="button"
+        aria-label={t.languageToggle.toggleAria}
+        title={t.languageToggle.title}
+        className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }))}
+      >
+        <Languages className="size-3.5" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[140px]">
+        {LOCALE_OPTIONS.map((option) => (
+          <DropdownMenuItem
+            key={option.id}
+            onSelect={() => setLocale(option.id)}
+            data-active={t.id === option.id}
+          >
+            {option.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/app/components/notes-drawer.tsx

@@ -0,0 +1,120 @@
+import { ChevronDown, ChevronUp, NotebookPen } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { PANEL_TRANSITION_MS, usePanelMount } from '@/components/panel/panel-shell';
+import { useNotes } from '@/lib/inspector/use-notes';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+const STORAGE_KEY = 'open-aippt:notes-drawer-open';
+const DRAWER_CONTENT_H = 166;
+
+type Props = {
+  slideId: string;
+  index: number;
+  total: number;
+  initial: string | undefined;
+};
+
+export function NotesDrawer({ slideId, index, total, initial }: Props) {
+  const t = useLocale();
+  const [open, setOpen] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.localStorage.getItem(STORAGE_KEY) === '1';
+  });
+  const { value, setValue, status, flush } = useNotes(slideId, index, initial);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const { mounted, animVisible } = usePanelMount(open);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    window.localStorage.setItem(STORAGE_KEY, open ? '1' : '0');
+  }, [open]);
+
+  const statusLabel = (() => {
+    switch (status.kind) {
+      case 'saving':
+        return t.notesDrawer.statusSaving;
+      case 'saved':
+        return t.notesDrawer.statusSaved;
+      case 'error':
+        return format(t.notesDrawer.statusError, { msg: status.message });
+      default:
+        return '';
+    }
+  })();
+
+  return (
+    <aside
+      data-notes-drawer
+      className="hidden shrink-0 border-t border-hairline bg-sidebar/85 backdrop-blur md:block"
+    >
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((o) => {
+            if (o) void flush();
+            return !o;
+          });
+        }}
+        className="flex h-9 w-full items-center gap-2 px-3 text-[12px] text-foreground/80 hover:bg-muted/40"
+        aria-expanded={open}
+      >
+        <NotebookPen className="size-3.5 text-muted-foreground" />
+        <span className="font-medium">{t.notesDrawer.toggle}</span>
+        <span className="font-mono text-[11px] text-muted-foreground">
+          {format(t.notesDrawer.pageLabel, { n: index + 1, total })}
+        </span>
+        <span
+          className={cn(
+            'ml-auto truncate text-[11px]',
+            status.kind === 'error' ? 'text-destructive' : 'text-muted-foreground',
+          )}
+          aria-live="polite"
+        >
+          {statusLabel}
+        </span>
+        {open ? (
+          <ChevronDown className="size-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronUp className="size-3.5 text-muted-foreground" />
+        )}
+      </button>
+      {mounted && (
+        <div
+          className="overflow-hidden border-t border-hairline transition-[height] ease-out"
+          style={{
+            height: animVisible ? DRAWER_CONTENT_H : 0,
+            transitionDuration: `${PANEL_TRANSITION_MS}ms`,
+          }}
+        >
+          <div className="px-3 py-2">
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onBlur={() => {
+                void flush();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  // Escape during IME composition dismisses the candidate
+                  // list; it must not blur the textarea.
+                  if (e.nativeEvent.isComposing) return;
+                  e.preventDefault();
+                  textareaRef.current?.blur();
+                } else if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                  e.preventDefault();
+                  void flush();
+                }
+              }}
+              placeholder={t.notesDrawer.placeholder}
+              rows={6}
+              spellCheck
+              className="block h-[150px] w-full resize-none rounded-[6px] border border-border bg-card px-3 py-2 text-[13px] leading-relaxed text-card-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+            />
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}

package/src/app/components/overview-grid.tsx

@@ -0,0 +1,363 @@
+import { ListOrdered, type LucideIcon, Sparkles, X } from 'lucide-react';
+import { type Ref, useEffect, useRef, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import type { DesignSystem } from '../lib/design';
+import { SlidePageProvider } from '../lib/page-context';
+import type { Page } from '../lib/sdk';
+import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
+import type { SlideTransition } from '../lib/transition';
+import { SlideCanvas } from './slide-canvas';
+
+const THUMB_W = 320;
+const THUMB_H = (THUMB_W * CANVAS_HEIGHT) / CANVAS_WIDTH;
+
+export type OverviewVariant = 'present' | 'editor';
+
+type Props = {
+  pages: Page[];
+  design?: DesignSystem;
+  open: boolean;
+  current: number;
+  onClose: () => void;
+  onSelect: (index: number) => void;
+  variant?: OverviewVariant;
+  moduleTransition?: SlideTransition;
+  tooltipContainer?: HTMLElement | null;
+};
+
+export function OverviewGrid({
+  pages,
+  design,
+  open,
+  current,
+  onClose,
+  onSelect,
+  variant = 'present',
+  moduleTransition,
+  tooltipContainer,
+}: Props) {
+  const [focused, setFocused] = useState(current);
+  const gridRef = useRef<HTMLDivElement>(null);
+  const focusedRef = useRef<HTMLButtonElement | null>(null);
+  const t = useLocale();
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only re-sync on open transition
+  useEffect(() => {
+    if (open) setFocused(current);
+  }, [open]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `focused` swaps which button holds the ref; we must re-run to focus the new node
+  useEffect(() => {
+    if (!open) return;
+    focusedRef.current?.focus();
+    focusedRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }, [focused, open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLElement && e.target.matches('input, textarea')) return;
+      const cols = computeCols(gridRef.current);
+      if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused((i) => Math.min(pages.length - 1, i + 1));
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused((i) => Math.max(0, i - 1));
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused((i) => Math.min(pages.length - 1, i + cols));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused((i) => Math.max(0, i - cols));
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused(0);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocused(pages.length - 1);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        onSelect(focused);
+        onClose();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [open, pages.length, focused, onClose, onSelect]);
+
+  if (!open) return null;
+
+  const styles = variant === 'present' ? presentStyles : editorStyles;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={t.present.overviewDialogAria}
+      className={cn('absolute inset-0 z-50 flex flex-col backdrop-blur-sm', styles.surface)}
+    >
+      <div className="flex shrink-0 items-center justify-between px-8 pt-6 pb-3">
+        <span className={cn('eyebrow', styles.eyebrow)}>{t.present.overviewEyebrow}</span>
+        <div className="flex items-center gap-3">
+          <span className={cn('font-mono text-[11px] tabular-nums', styles.eyebrow)}>
+            {(focused + 1).toString().padStart(2, '0')} · {pages.length.toString().padStart(2, '0')}
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label={t.common.close}
+            className={cn(
+              'flex size-6 items-center justify-center rounded-[4px] outline-none transition-colors',
+              styles.closeButton,
+            )}
+          >
+            <X className="size-3.5" />
+          </button>
+        </div>
+      </div>
+      <div ref={gridRef} className="min-h-0 flex-1 overflow-auto px-8 pb-8">
+        <TooltipProvider delayDuration={200}>
+          <div
+            className="grid justify-center gap-5"
+            style={{
+              gridTemplateColumns: `repeat(auto-fill, ${THUMB_W}px)`,
+            }}
+          >
+            {pages.map((PageComp, i) => {
+              const isFocused = i === focused;
+              const isCurrent = i === current;
+              return (
+                <OverviewThumb
+                  // biome-ignore lint/suspicious/noArrayIndexKey: pages list is render-stable
+                  key={i}
+                  buttonRef={isFocused ? focusedRef : undefined}
+                  page={PageComp}
+                  index={i}
+                  total={pages.length}
+                  design={design}
+                  isFocused={isFocused}
+                  isCurrent={isCurrent}
+                  styles={styles}
+                  moduleTransition={moduleTransition}
+                  tooltipContainer={tooltipContainer}
+                  onFocus={() => setFocused(i)}
+                  onSelect={() => {
+                    onSelect(i);
+                    onClose();
+                  }}
+                />
+              );
+            })}
+          </div>
+        </TooltipProvider>
+      </div>
+    </div>
+  );
+}
+
+function OverviewThumb({
+  page: PageComp,
+  index,
+  total,
+  design,
+  isFocused,
+  isCurrent,
+  styles,
+  moduleTransition,
+  tooltipContainer,
+  onFocus,
+  onSelect,
+  buttonRef,
+}: {
+  page: Page;
+  index: number;
+  total: number;
+  design?: DesignSystem;
+  isFocused: boolean;
+  isCurrent: boolean;
+  styles: OverviewStyles;
+  moduleTransition?: SlideTransition;
+  tooltipContainer?: HTMLElement | null;
+  onFocus: () => void;
+  onSelect: () => void;
+  buttonRef?: Ref<HTMLButtonElement>;
+}) {
+  const t = useLocale();
+  const boxRef = useRef<HTMLDivElement | null>(null);
+  const [hasSteps, setHasSteps] = useState(false);
+  const hasTransition = Boolean(PageComp.transition ?? moduleTransition);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-detect when the page at this slot changes
+  useEffect(() => {
+    setHasSteps(boxRef.current?.querySelector('[data-osd-step]') != null);
+  }, [PageComp]);
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      onClick={onSelect}
+      onMouseEnter={onFocus}
+      onFocus={onFocus}
+      aria-label={format(t.present.overviewGoToAria, { n: index + 1 })}
+      aria-current={isCurrent ? 'true' : undefined}
+      className={cn(
+        'group/thumb flex flex-col items-start gap-2 rounded-[6px] p-1.5 outline-none transition-colors',
+        isFocused ? styles.thumbFocused : styles.thumbHover,
+      )}
+    >
+      <div
+        ref={boxRef}
+        className={cn(
+          'relative w-full overflow-hidden rounded-[4px] ring-1 transition-shadow',
+          styles.thumbSurface,
+          isFocused ? 'ring-2 ring-[var(--brand,#ef4444)]' : styles.thumbRing,
+        )}
+        style={{ height: THUMB_H }}
+      >
+        <SlideCanvas
+          scale={THUMB_W / CANVAS_WIDTH}
+          center={false}
+          flat
+          freezeMotion
+          design={design}
+        >
+          <SlidePageProvider index={index} total={total}>
+            <PageComp />
+          </SlidePageProvider>
+        </SlideCanvas>
+        {isCurrent && (
+          <span
+            aria-hidden
+            className="pointer-events-none absolute top-1.5 right-1.5 rounded-[3px] bg-[var(--brand,#ef4444)] px-1.5 py-0.5 font-mono text-[9.5px] tracking-[0.06em] uppercase text-white"
+          >
+            {t.present.nowBadge}
+          </span>
+        )}
+      </div>
+      <div className="flex h-4 w-full items-center justify-between gap-2">
+        <span
+          className={cn(
+            'font-mono text-[10.5px] tracking-[0.08em] tabular-nums uppercase',
+            isFocused || isCurrent ? styles.labelActive : styles.labelMuted,
+          )}
+        >
+          {(index + 1).toString().padStart(2, '0')}
+        </span>
+        {(hasTransition || hasSteps) && (
+          <span className="flex items-center gap-1">
+            {hasTransition && (
+              <OverviewIndicator
+                icon={Sparkles}
+                label={t.thumbnailRail.transitionIndicator}
+                className={styles.indicator}
+                tooltipContainer={tooltipContainer}
+              />
+            )}
+            {hasSteps && (
+              <OverviewIndicator
+                icon={ListOrdered}
+                label={t.thumbnailRail.stepsIndicator}
+                className={styles.indicator}
+                tooltipContainer={tooltipContainer}
+              />
+            )}
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}
+
+function OverviewIndicator({
+  icon: Icon,
+  label,
+  className,
+  tooltipContainer,
+}: {
+  icon: LucideIcon;
+  label: string;
+  className: string;
+  tooltipContainer?: HTMLElement | null;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          role="img"
+          aria-label={label}
+          className={cn('flex size-4 items-center justify-center', className)}
+        >
+          <Icon className="size-3.5" strokeWidth={1.9} />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="top" sideOffset={6} container={tooltipContainer ?? undefined}>
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+type OverviewStyles = {
+  surface: string;
+  eyebrow: string;
+  thumbFocused: string;
+  thumbHover: string;
+  thumbSurface: string;
+  thumbRing: string;
+  labelActive: string;
+  labelMuted: string;
+  indicator: string;
+  closeButton: string;
+};
+
+const presentStyles = {
+  surface: 'bg-black/95',
+  eyebrow: 'text-white/55',
+  thumbFocused: 'bg-white/10',
+  thumbHover: 'hover:bg-white/5',
+  thumbSurface: 'bg-black',
+  thumbRing: 'ring-white/10',
+  labelActive: 'text-white/85',
+  labelMuted: 'text-white/45',
+  indicator: 'text-white/45 transition-colors group-hover/thumb:text-white/75',
+  closeButton:
+    'text-white/55 hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-white/40',
+} as const;
+
+const editorStyles = {
+  surface: 'bg-background/95',
+  eyebrow: 'text-muted-foreground',
+  thumbFocused: 'bg-muted',
+  thumbHover: 'hover:bg-muted/60',
+  thumbSurface: 'bg-card',
+  thumbRing: 'ring-hairline',
+  labelActive: 'text-foreground',
+  labelMuted: 'text-muted-foreground/60',
+  indicator: 'text-muted-foreground/60 transition-colors group-hover/thumb:text-muted-foreground',
+  closeButton:
+    'text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring',
+} as const;
+
+function computeCols(grid: HTMLDivElement | null) {
+  if (!grid) return 4;
+  const inner = grid.firstElementChild as HTMLElement | null;
+  if (!inner) return 4;
+  const cs = getComputedStyle(inner);
+  const cols = cs.gridTemplateColumns.split(' ').filter(Boolean).length;
+  return Math.max(1, cols);
+}

package/src/app/components/panel/panel-fields.tsx

@@ -0,0 +1,60 @@
+import { Label } from '@/components/ui/label';
+
+export function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="px-3.5 py-3.5">
+      <div className="mb-2.5 flex items-center gap-2">
+        <span className="eyebrow">{title}</span>
+        <span aria-hidden className="h-px flex-1 bg-hairline" />
+      </div>
+      <div className="flex flex-col gap-2.5">{children}</div>
+    </section>
+  );
+}
+
+export function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-[68px_1fr] items-center gap-3">
+      <Label className="text-[11px] font-normal text-muted-foreground">{label}</Label>
+      <div className="flex min-w-0 items-center gap-1.5">{children}</div>
+    </div>
+  );
+}
+
+export function NumberField({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  suffix,
+}: {
+  value: number;
+  onChange: (n: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  suffix?: string;
+}) {
+  return (
+    <div className="flex h-7 shrink-0 items-center rounded-[5px] border border-border bg-background pr-1.5 transition-colors focus-within:border-foreground/40 focus-within:ring-2 focus-within:ring-ring/30">
+      <input
+        type="number"
+        value={value}
+        onChange={(e) => {
+          const n = Number(e.target.value);
+          if (Number.isFinite(n)) onChange(n);
+        }}
+        min={min}
+        max={max}
+        step={step}
+        className="nums h-full w-12 bg-transparent px-2 text-right font-mono text-[11px] outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      {suffix && (
+        <span className="font-mono text-[9.5px] uppercase tracking-[0.06em] text-muted-foreground/80">
+          {suffix}
+        </span>
+      )}
+    </div>
+  );
+}