@open-slide/core 0.0.11 → 0.0.12

package/src/app/components/inspector/{InspectorProvider.tsx → inspector-provider.tsx}

@@ -9,9 +9,10 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useHistory } from '@/components/history-provider';
 import { Button } from '@/components/ui/button';
-import { type SlideComment, useComments } from '@/lib/inspector/useComments';
-import { type Edit, type EditOp, useEditor } from '@/lib/inspector/useEditor';
+import { type SlideComment, useComments } from '@/lib/inspector/use-comments';
+import { type Edit, type EditOp, useEditor } from '@/lib/inspector/use-editor';
 
 export type SelectedTarget = {
   line: number;
@@ -71,6 +72,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
   const [selected, setSelected] = useState<SelectedTarget | null>(null);
   const { comments, error, refetch, add, remove } = useComments(slideId);
   const { applyEdit, applyEdits } = useEditor(slideId);
+  const history = useHistory();
 
   const pendingRef = useRef<Map<string, Bucket>>(new Map());
   const [pendingCount, setPendingCount] = useState(0);
@@ -84,8 +86,17 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     setPendingCount(n);
   }, []);
 
-  const bufferOps = useCallback(
-    (line: number, column: number, anchor: HTMLElement, ops: EditOp[]) => {
+  // Find the live anchor for a buffered loc. Used by history undo/redo
+  // since the original `anchor` reference may have unmounted.
+  const findAnchor = useCallback((line: number, column: number) => {
+    const root = document.querySelector<HTMLElement>('[data-inspector-root]');
+    return root?.querySelector<HTMLElement>(`[data-slide-loc="${line}:${column}"]`) ?? null;
+  }, []);
+
+  // Mutate bucket + DOM without recording history. Shared by `bufferOps`
+  // (the public, history-recording entry point) and by `redo` closures.
+  const applyOpsRaw = useCallback(
+    (line: number, column: number, anchor: HTMLElement | null, ops: EditOp[]) => {
       const key = `${line}:${column}`;
       let bucket = pendingRef.current.get(key);
       if (!bucket) {
@@ -101,29 +112,29 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
         };
         pendingRef.current.set(key, bucket);
       }
-      const style = anchor.style as unknown as Record<string, string>;
+      const style = (anchor?.style ?? {}) as unknown as Record<string, string>;
       for (const op of ops) {
         if (op.kind === 'set-style') {
-          if (!bucket.origStyle.has(op.key)) {
+          if (anchor && !bucket.origStyle.has(op.key)) {
             bucket.origStyle.set(op.key, style[op.key] ?? '');
           }
           bucket.styleOps.set(op.key, op.value);
-          if (anchor.isConnected) style[op.key] = op.value ?? '';
+          if (anchor?.isConnected) style[op.key] = op.value ?? '';
         } else if (op.kind === 'set-text') {
-          if (bucket.origText === null) {
+          if (anchor && bucket.origText === null) {
             bucket.origText = { value: anchor.textContent ?? '' };
           }
           bucket.textOp = { value: op.value };
-          if (anchor.isConnected) anchor.textContent = op.value;
+          if (anchor?.isConnected) anchor.textContent = op.value;
         } else if (op.kind === 'set-attr-asset') {
-          if (!bucket.origAttrs.has(op.attr)) {
+          if (anchor && !bucket.origAttrs.has(op.attr)) {
             bucket.origAttrs.set(
               op.attr,
               anchor.hasAttribute(op.attr) ? anchor.getAttribute(op.attr) : null,
             );
           }
           bucket.attrOps.set(op.attr, { assetPath: op.assetPath, previewUrl: op.previewUrl });
-          if (anchor.isConnected) anchor.setAttribute(op.attr, op.previewUrl);
+          if (anchor?.isConnected) anchor.setAttribute(op.attr, op.previewUrl);
         }
       }
       refreshCount();
@@ -131,6 +142,149 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     [refreshCount],
   );
 
+  // Pre-edit snapshot for history: capture the *currently effective* value of
+  // each touched field so undo can restore exactly the prior state, including
+  // the case where the bucket already had a buffered edit before this op.
+  type StyleSnap = { kind: 'style'; key: string; value: string | null; existed: boolean };
+  type TextSnap = { kind: 'text'; value: string | null; existed: boolean };
+  type AttrSnap = {
+    kind: 'attr';
+    attr: string;
+    value: AssetAttrOp | string | null;
+    source: 'op' | 'orig' | 'dom-missing' | 'dom-present';
+  };
+  type Snap = StyleSnap | TextSnap | AttrSnap;
+
+  const snapshotForOps = useCallback(
+    (line: number, column: number, anchor: HTMLElement, ops: EditOp[]): Snap[] => {
+      const key = `${line}:${column}`;
+      const bucket = pendingRef.current.get(key);
+      const style = anchor.style as unknown as Record<string, string>;
+      const snaps: Snap[] = [];
+      for (const op of ops) {
+        if (op.kind === 'set-style') {
+          if (bucket?.styleOps.has(op.key)) {
+            snaps.push({
+              kind: 'style',
+              key: op.key,
+              value: bucket.styleOps.get(op.key) ?? null,
+              existed: true,
+            });
+          } else {
+            snaps.push({
+              kind: 'style',
+              key: op.key,
+              value: style[op.key] ?? '',
+              existed: false,
+            });
+          }
+        } else if (op.kind === 'set-text') {
+          if (bucket?.textOp) {
+            snaps.push({ kind: 'text', value: bucket.textOp.value, existed: true });
+          } else {
+            snaps.push({ kind: 'text', value: anchor.textContent ?? '', existed: false });
+          }
+        } else if (op.kind === 'set-attr-asset') {
+          const prev = bucket?.attrOps.get(op.attr);
+          if (prev) {
+            snaps.push({ kind: 'attr', attr: op.attr, value: prev, source: 'op' });
+          } else if (bucket?.origAttrs.has(op.attr)) {
+            snaps.push({
+              kind: 'attr',
+              attr: op.attr,
+              value: bucket.origAttrs.get(op.attr) ?? null,
+              source: 'orig',
+            });
+          } else if (anchor.hasAttribute(op.attr)) {
+            snaps.push({
+              kind: 'attr',
+              attr: op.attr,
+              value: anchor.getAttribute(op.attr),
+              source: 'dom-present',
+            });
+          } else {
+            snaps.push({ kind: 'attr', attr: op.attr, value: null, source: 'dom-missing' });
+          }
+        }
+      }
+      return snaps;
+    },
+    [],
+  );
+
+  // Restore the snapshotted values to bucket + DOM. Mirrors the bucket-empty
+  // logic of `cancelEdits` so an undo back to the absolute baseline cleans up.
+  const restoreSnapshot = useCallback(
+    (line: number, column: number, snaps: Snap[]) => {
+      const key = `${line}:${column}`;
+      const bucket = pendingRef.current.get(key);
+      if (!bucket) return;
+      const anchor = findAnchor(line, column);
+      const style = (anchor?.style ?? {}) as unknown as Record<string, string>;
+      for (const snap of snaps) {
+        if (snap.kind === 'style') {
+          if (snap.existed) {
+            const v = snap.value ?? '';
+            bucket.styleOps.set(snap.key, snap.value);
+            if (anchor?.isConnected) style[snap.key] = v;
+          } else {
+            bucket.styleOps.delete(snap.key);
+            const orig = bucket.origStyle.get(snap.key);
+            if (anchor?.isConnected) style[snap.key] = orig ?? '';
+          }
+        } else if (snap.kind === 'text') {
+          if (snap.existed) {
+            bucket.textOp = { value: snap.value ?? '' };
+            if (anchor?.isConnected) anchor.textContent = snap.value ?? '';
+          } else {
+            bucket.textOp = null;
+            if (anchor?.isConnected) anchor.textContent = bucket.origText?.value ?? '';
+          }
+        } else if (snap.kind === 'attr') {
+          if (snap.source === 'op') {
+            const op = snap.value as AssetAttrOp;
+            bucket.attrOps.set(snap.attr, op);
+            if (anchor?.isConnected) anchor.setAttribute(snap.attr, op.previewUrl);
+          } else {
+            bucket.attrOps.delete(snap.attr);
+            const orig = bucket.origAttrs.get(snap.attr);
+            if (anchor?.isConnected) {
+              if (orig === null || orig === undefined) anchor.removeAttribute(snap.attr);
+              else anchor.setAttribute(snap.attr, orig);
+            }
+          }
+        }
+      }
+      if (bucket.styleOps.size === 0 && bucket.textOp === null && bucket.attrOps.size === 0) {
+        pendingRef.current.delete(key);
+      }
+      refreshCount();
+    },
+    [findAnchor, refreshCount],
+  );
+
+  const bufferOps = useCallback(
+    (line: number, column: number, anchor: HTMLElement, ops: EditOp[]) => {
+      const snaps = snapshotForOps(line, column, anchor, ops);
+      applyOpsRaw(line, column, anchor, ops);
+      const first = ops[0];
+      const opKey = first
+        ? first.kind === 'set-style'
+          ? first.key
+          : first.kind === 'set-attr-asset'
+            ? first.attr
+            : 'text'
+        : 'noop';
+      const coalesceKey = `inspector:${line}:${column}:${first?.kind ?? 'noop'}:${opKey}`;
+      history.record({
+        coalesceKey,
+        undo: () => restoreSnapshot(line, column, snaps),
+        redo: () => applyOpsRaw(line, column, findAnchor(line, column), ops),
+      });
+    },
+    [applyOpsRaw, snapshotForOps, restoreSnapshot, findAnchor, history],
+  );
+
   const commitEdits = useCallback(async () => {
     const buckets = pendingRef.current;
     if (buckets.size === 0) return;
@@ -151,17 +305,24 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     }
     pendingRef.current = new Map();
     setPendingCount(0);
-    if (edits.length === 0) return;
+    if (edits.length === 0) {
+      history.clear();
+      return;
+    }
     setCommitting(true);
     try {
       await applyEdits(edits);
     } finally {
       setCommitting(false);
+      history.clear();
     }
-  }, [applyEdits]);
+  }, [applyEdits, history]);
 
   const cancelEdits = useCallback(() => {
-    if (pendingRef.current.size === 0) return;
+    if (pendingRef.current.size === 0) {
+      history.clear();
+      return;
+    }
     const root = document.querySelector<HTMLElement>('[data-inspector-root]');
     for (const b of pendingRef.current.values()) {
       const el = root?.querySelector<HTMLElement>(`[data-slide-loc="${b.line}:${b.column}"]`);
@@ -176,7 +337,8 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     }
     pendingRef.current = new Map();
     setPendingCount(0);
-  }, []);
+    history.clear();
+  }, [history]);
 
   // Auto-flush on inspector close and on route unmount so toggling
   // off or navigating away doesn't drop buffered edits.
@@ -290,9 +452,15 @@ export function InspectToggleButton() {
   const { active, toggle } = useInspector();
   if (import.meta.env.PROD) return null;
   return (
-    <Button size="sm" variant={active ? 'default' : 'outline'} onClick={toggle} data-inspector-ui>
-      <Crosshair className="size-4" />
-      Inspect
+    <Button
+      size="sm"
+      variant={active ? 'default' : 'ghost'}
+      onClick={toggle}
+      data-inspector-ui
+      title="Inspect"
+    >
+      <Crosshair className="size-3.5" />
+      <span className="hidden md:inline">Inspect</span>
     </Button>
   );
 }

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

@@ -0,0 +1,47 @@
+import { useHistory } from '@/components/history-provider';
+import { SaveCard } from '@/components/panel/save-card';
+import { useDesignPanelState } from '@/components/style-panel/design-provider';
+import { useInspector } from './inspector-provider';
+
+// Single save card for both inspector edits and design-token edits.
+// Counts the design draft as one unit; the user sees one combined
+// "N unsaved changes" pill. Save/Discard fan out to both providers.
+export function SaveBar() {
+  const insp = useInspector();
+  const design = useDesignPanelState();
+  const history = useHistory();
+
+  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()));
+    await Promise.all(tasks);
+  };
+
+  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={`${total} unsaved ${total === 1 ? 'change' : 'changes'}`}
+      onUndo={history.undo}
+      onRedo={history.redo}
+      canUndo={history.canUndo}
+      canRedo={history.canRedo}
+    />
+  );
+}

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>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+export const PANEL_W = 320;
+export const PANEL_TRANSITION_MS = 240;
+
+// Defer the width expansion to the next frame so the browser paints once
+// at width=0 first; otherwise the transition has no starting frame.
+export function useAnimatedOpen(open: boolean): boolean {
+  const [animVisible, setAnimVisible] = useState(false);
+  useEffect(() => {
+    if (open) {
+      const id = requestAnimationFrame(() => setAnimVisible(true));
+      return () => cancelAnimationFrame(id);
+    }
+    setAnimVisible(false);
+  }, [open]);
+  return animVisible;
+}
+
+// Stay mounted through the close-out width transition so the panel
+// visibly collapses instead of vanishing.
+export function usePanelMount(open: boolean): { mounted: boolean; animVisible: boolean } {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return;
+    }
+    const t = setTimeout(() => setMounted(false), PANEL_TRANSITION_MS);
+    return () => clearTimeout(t);
+  }, [open]);
+  const animVisible = useAnimatedOpen(open && mounted);
+  return { mounted, animVisible };
+}
+
+type PanelShellProps = {
+  animVisible: boolean;
+  uiAttr: 'inspector' | 'design';
+  header: React.ReactNode;
+  banner?: React.ReactNode;
+  footer?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export function PanelShell({
+  animVisible,
+  uiAttr,
+  header,
+  banner,
+  footer,
+  children,
+}: PanelShellProps) {
+  const dataAttrs = uiAttr === 'inspector' ? { 'data-inspector-ui': '' } : { 'data-design-ui': '' };
+  return (
+    <aside
+      {...dataAttrs}
+      className="flex h-full shrink-0 justify-end overflow-hidden bg-sidebar transition-[width,border-left-width] ease-out"
+      style={{
+        width: animVisible ? PANEL_W : 0,
+        borderLeftWidth: animVisible ? 1 : 0,
+        borderLeftColor: 'var(--hairline)',
+        transitionDuration: `${PANEL_TRANSITION_MS}ms`,
+      }}
+    >
+      <div style={{ width: PANEL_W }} className="flex h-full shrink-0 flex-col">
+        <header className="flex h-9 shrink-0 items-center justify-between gap-2 border-b border-hairline px-3">
+          {header}
+        </header>
+        {banner}
+        <ScrollArea className="flex flex-1 flex-col">
+          <div className="flex min-h-full flex-col">{children}</div>
+        </ScrollArea>
+        {footer && <div className="shrink-0 border-t border-hairline">{footer}</div>}
+      </div>
+    </aside>
+  );
+}

package/src/app/components/panel/save-card.tsx

@@ -0,0 +1,139 @@
+import { Check, Loader2, Redo2, Save, Undo2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+type SaveCardProps = {
+  dirty: boolean;
+  committing: boolean;
+  onSave: () => Promise<void> | void;
+  onDiscard: () => void;
+  unsavedLabel: React.ReactNode;
+  savedLabel?: string;
+  uiAttr: 'inspector' | 'design';
+  onUndo?: () => void;
+  onRedo?: () => void;
+  canUndo?: boolean;
+  canRedo?: boolean;
+};
+
+// Optimistic DOM updates make the canvas *look* saved, so without this
+// affordance a user could close the tab thinking their tweaks hit disk
+// when they're still buffered in memory.
+export function SaveCard({
+  dirty,
+  committing,
+  onSave,
+  onDiscard,
+  unsavedLabel,
+  savedLabel = 'Saved',
+  uiAttr,
+  onUndo,
+  onRedo,
+  canUndo = false,
+  canRedo = false,
+}: SaveCardProps) {
+  const [justSaved, setJustSaved] = useState(false);
+
+  useEffect(() => {
+    if (!justSaved) return;
+    const t = setTimeout(() => setJustSaved(false), 1200);
+    return () => clearTimeout(t);
+  }, [justSaved]);
+
+  const visible = dirty || committing || justSaved || canUndo || canRedo;
+  if (!visible) return null;
+
+  const handleSave = async () => {
+    await onSave();
+    setJustSaved(true);
+  };
+
+  const dataAttrs = uiAttr === 'inspector' ? { 'data-inspector-ui': '' } : { 'data-design-ui': '' };
+
+  const showHistory = !justSaved && (onUndo || onRedo);
+
+  return (
+    <div
+      {...dataAttrs}
+      className="pointer-events-none absolute bottom-6 left-1/2 z-30 -translate-x-1/2 animate-in fade-in slide-in-from-bottom-2 duration-200 ease-out"
+    >
+      <div className="pointer-events-auto flex h-9 items-center gap-1 rounded-[8px] border border-border bg-popover/95 py-0.5 pr-0.5 pl-1 shadow-overlay backdrop-blur-md">
+        {showHistory && (
+          <div className="flex items-center">
+            <Button
+              size="icon-sm"
+              variant="ghost"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={onUndo}
+              disabled={committing || !canUndo}
+              aria-label="Undo"
+              title="Undo"
+            >
+              <Undo2 className="size-3.5" />
+            </Button>
+            <Button
+              size="icon-sm"
+              variant="ghost"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={onRedo}
+              disabled={committing || !canRedo}
+              aria-label="Redo"
+              title="Redo"
+            >
+              <Redo2 className="size-3.5" />
+            </Button>
+            {(justSaved || dirty || committing) && (
+              <span aria-hidden className="ml-1 mr-0.5 h-4 w-px bg-hairline" />
+            )}
+          </div>
+        )}
+        {justSaved ? (
+          <span className="flex items-center gap-1.5 px-2.5 text-[12px] font-medium text-foreground">
+            <Check className="size-3.5 text-[oklch(0.55_0.13_165)]" strokeWidth={2.5} />
+            {savedLabel}
+          </span>
+        ) : dirty || committing ? (
+          <span className="inline-flex items-center gap-1.5 px-2.5 text-[12px] font-medium text-foreground">
+            <span
+              aria-hidden
+              className="size-1.5 rounded-full bg-brand shadow-[0_0_0_3px_var(--brand-soft)]"
+            />
+            <span className="nums">{unsavedLabel}</span>
+          </span>
+        ) : null}
+        {!justSaved && dirty && (
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={onDiscard}
+            disabled={committing || !dirty}
+          >
+            Discard
+          </Button>
+        )}
+        {(dirty || committing) && (
+          <Button
+            size="sm"
+            variant="brand"
+            className="h-7 px-3"
+            onClick={handleSave}
+            disabled={committing || !dirty}
+          >
+            {committing ? (
+              <>
+                <Loader2 className="size-3.5 animate-spin" />
+                Saving
+              </>
+            ) : (
+              <>
+                <Save className="size-3.5" />
+                Save
+              </>
+            )}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/components/pdf-progress-toast.tsx

@@ -0,0 +1,25 @@
+import { Loader2 } from 'lucide-react';
+import type { PdfExportProgress } from '../lib/export-pdf';
+import { Progress } from './ui/progress';
+
+export function PdfProgressToast({ progress }: { progress: PdfExportProgress }) {
+  const text =
+    progress.phase === 'processing'
+      ? `Processing page ${progress.current.toString().padStart(2, '0')} of ${progress.total.toString().padStart(2, '0')}`
+      : progress.phase === 'printing'
+        ? 'Opening print dialog…'
+        : 'Done';
+
+  return (
+    <div className="flex w-80 items-start gap-3 rounded-[8px] border border-border bg-popover px-3.5 py-3 text-popover-foreground shadow-floating">
+      <Loader2 className="mt-0.5 size-3.5 shrink-0 animate-spin text-brand" />
+      <div className="min-w-0 flex-1">
+        <p className="font-heading text-[12.5px] font-semibold tracking-tight">Exporting PDF</p>
+        <p className="truncate font-mono text-[10.5px] tracking-[0.04em] text-muted-foreground">
+          {text}
+        </p>
+        <Progress value={Math.round(progress.percent)} className="mt-2 h-[3px]" />
+      </div>
+    </div>
+  );
+}