@open-slide/core 1.0.4 → 1.0.6

package/src/app/components/inspector/inspector-provider.tsx

@@ -9,10 +9,12 @@ import {
   useRef,
   useState,
 } from 'react';
+import { toast } from 'sonner';
 import { useHistory } from '@/components/history-provider';
 import { Button } from '@/components/ui/button';
 import { type SlideComment, useComments } from '@/lib/inspector/use-comments';
-import { type Edit, type EditOp, useEditor } from '@/lib/inspector/use-editor';
+import { type Edit, type EditOp, type EditResult, useEditor } from '@/lib/inspector/use-editor';
+import { useLocale } from '@/lib/use-locale';
 
 export type SelectedTarget = {
   line: number;
@@ -26,15 +28,25 @@ type Bucket = {
   line: number;
   column: number;
   styleOps: Map<string, string | null>;
-  textOp: { value: string } | null;
+  // Text edits are scoped per DOM instance: a reused component renders
+  // the same JSX `<h2>{title}</h2>` at multiple call sites with the same
+  // `data-slide-loc`, but each call site's prop literal is independent.
+  // Style/attr ops stay shared because they edit the JSX definition.
+  textOps: Map<string /* instanceId */, { value: string }>;
   attrOps: Map<string, AssetAttrOp>;
   // Pre-edit snapshot of the DOM, captured the first time we touch
   // each style key / text / attribute. Used by `cancelEdits` to revert.
   origStyle: Map<string, string>;
-  origText: { value: string } | null;
+  origTexts: Map<string /* instanceId */, { value: string }>;
   origAttrs: Map<string, string | null>;
 };
 
+const INSTANCE_ID_ATTR = 'data-slide-instance-id';
+
+function readInstanceId(el: HTMLElement): string | null {
+  return el.getAttribute(INSTANCE_ID_ATTR);
+}
+
 type InspectorCtx = {
   slideId: string;
   active: boolean;
@@ -48,7 +60,7 @@ type InspectorCtx = {
   selected: SelectedTarget | null;
   setSelected: (s: SelectedTarget | null) => void;
   applyEdit: (line: number, column: number, ops: EditOp[]) => Promise<void>;
-  applyEdits: (edits: Edit[]) => Promise<void>;
+  applyEdits: (edits: Edit[]) => Promise<EditResult[]>;
   // Mutate the DOM optimistically, snapshot the pre-edit values, and
   // remember the ops. `commitEdits` (manual Save or auto-flush on
   // close) is what actually writes to disk; `cancelEdits` reverts.
@@ -75,22 +87,39 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
   const history = useHistory();
 
   const pendingRef = useRef<Map<string, Bucket>>(new Map());
+  const instanceCounterRef = useRef(0);
   const [pendingCount, setPendingCount] = useState(0);
   const [committing, setCommitting] = useState(false);
+  const t = useLocale();
+
+  const ensureInstanceId = useCallback((el: HTMLElement): string => {
+    const existing = el.getAttribute(INSTANCE_ID_ATTR);
+    if (existing) return existing;
+    const next = `inst-${++instanceCounterRef.current}`;
+    el.setAttribute(INSTANCE_ID_ATTR, next);
+    return next;
+  }, []);
 
   const refreshCount = useCallback(() => {
     let n = 0;
     for (const b of pendingRef.current.values()) {
-      if (b.styleOps.size > 0 || b.textOp !== null || b.attrOps.size > 0) n++;
+      if (b.styleOps.size > 0 || b.textOps.size > 0 || b.attrOps.size > 0) n++;
     }
     setPendingCount(n);
   }, []);
 
   // 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) => {
+  // since the original `anchor` reference may have unmounted. With an
+  // instance id, prefer the matching DOM node so per-instance text edits
+  // round-trip onto the right element.
+  const findAnchor = useCallback((line: number, column: number, instanceId?: string) => {
     const root = document.querySelector<HTMLElement>('[data-inspector-root]');
-    return root?.querySelector<HTMLElement>(`[data-slide-loc="${line}:${column}"]`) ?? null;
+    if (!root) return null;
+    if (instanceId) {
+      const byInstance = root.querySelector<HTMLElement>(`[${INSTANCE_ID_ATTR}="${instanceId}"]`);
+      if (byInstance) return byInstance;
+    }
+    return root.querySelector<HTMLElement>(`[data-slide-loc="${line}:${column}"]`);
   }, []);
 
   // Mutate bucket + DOM without recording history. Shared by `bufferOps`
@@ -104,10 +133,10 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
           line,
           column,
           styleOps: new Map(),
-          textOp: null,
+          textOps: new Map(),
           attrOps: new Map(),
           origStyle: new Map(),
-          origText: null,
+          origTexts: new Map(),
           origAttrs: new Map(),
         };
         pendingRef.current.set(key, bucket);
@@ -121,11 +150,16 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
           bucket.styleOps.set(op.key, op.value);
           if (anchor?.isConnected) style[op.key] = op.value ?? '';
         } else if (op.kind === 'set-text') {
-          if (anchor && bucket.origText === null) {
-            bucket.origText = { value: anchor.textContent ?? '' };
+          // Reused JSX renders multiple DOM nodes with the same
+          // `data-slide-loc` but distinct call-site literals; without an
+          // anchor we can't tell which instance to route to, so skip.
+          if (!anchor) continue;
+          const instanceId = ensureInstanceId(anchor);
+          if (!bucket.origTexts.has(instanceId)) {
+            bucket.origTexts.set(instanceId, { value: anchor.textContent ?? '' });
           }
-          bucket.textOp = { value: op.value };
-          if (anchor?.isConnected) anchor.textContent = op.value;
+          bucket.textOps.set(instanceId, { value: op.value });
+          if (anchor.isConnected) anchor.textContent = op.value;
         } else if (op.kind === 'set-attr-asset') {
           if (anchor && !bucket.origAttrs.has(op.attr)) {
             bucket.origAttrs.set(
@@ -139,14 +173,19 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       }
       refreshCount();
     },
-    [refreshCount],
+    [refreshCount, ensureInstanceId],
   );
 
   // 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 TextSnap = {
+    kind: 'text';
+    instanceId: string;
+    value: string | null;
+    existed: boolean;
+  };
   type AttrSnap = {
     kind: 'attr';
     attr: string;
@@ -179,10 +218,17 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
             });
           }
         } else if (op.kind === 'set-text') {
-          if (bucket?.textOp) {
-            snaps.push({ kind: 'text', value: bucket.textOp.value, existed: true });
+          const instanceId = ensureInstanceId(anchor);
+          const existing = bucket?.textOps.get(instanceId);
+          if (existing) {
+            snaps.push({ kind: 'text', instanceId, value: existing.value, existed: true });
           } else {
-            snaps.push({ kind: 'text', value: anchor.textContent ?? '', existed: false });
+            snaps.push({
+              kind: 'text',
+              instanceId,
+              value: anchor.textContent ?? '',
+              existed: false,
+            });
           }
         } else if (op.kind === 'set-attr-asset') {
           const prev = bucket?.attrOps.get(op.attr);
@@ -209,7 +255,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       }
       return snaps;
     },
-    [],
+    [ensureInstanceId],
   );
 
   // Restore the snapshotted values to bucket + DOM. Mirrors the bucket-empty
@@ -219,43 +265,47 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       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>;
+      // Style/attr snaps share the loc-level anchor (first match);
+      // text snaps look up their per-instance node below.
+      const sharedAnchor = findAnchor(line, column);
+      const sharedStyle = (sharedAnchor?.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;
+            if (sharedAnchor?.isConnected) sharedStyle[snap.key] = v;
           } else {
             bucket.styleOps.delete(snap.key);
             const orig = bucket.origStyle.get(snap.key);
-            if (anchor?.isConnected) style[snap.key] = orig ?? '';
+            if (sharedAnchor?.isConnected) sharedStyle[snap.key] = orig ?? '';
           }
         } else if (snap.kind === 'text') {
+          const textAnchor = findAnchor(line, column, snap.instanceId);
           if (snap.existed) {
-            bucket.textOp = { value: snap.value ?? '' };
-            if (anchor?.isConnected) anchor.textContent = snap.value ?? '';
+            bucket.textOps.set(snap.instanceId, { value: snap.value ?? '' });
+            if (textAnchor?.isConnected) textAnchor.textContent = snap.value ?? '';
           } else {
-            bucket.textOp = null;
-            if (anchor?.isConnected) anchor.textContent = bucket.origText?.value ?? '';
+            bucket.textOps.delete(snap.instanceId);
+            const orig = bucket.origTexts.get(snap.instanceId);
+            if (textAnchor?.isConnected) textAnchor.textContent = orig?.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);
+            if (sharedAnchor?.isConnected) sharedAnchor.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 (sharedAnchor?.isConnected) {
+              if (orig === null || orig === undefined) sharedAnchor.removeAttribute(snap.attr);
+              else sharedAnchor.setAttribute(snap.attr, orig);
             }
           }
         }
       }
-      if (bucket.styleOps.size === 0 && bucket.textOp === null && bucket.attrOps.size === 0) {
+      if (bucket.styleOps.size === 0 && bucket.textOps.size === 0 && bucket.attrOps.size === 0) {
         pendingRef.current.delete(key);
       }
       refreshCount();
@@ -288,35 +338,96 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
   const commitEdits = useCallback(async () => {
     const buckets = pendingRef.current;
     if (buckets.size === 0) return;
-    const edits: Edit[] = [];
-    for (const { line, column, styleOps, textOp, attrOps } of buckets.values()) {
-      const list: EditOp[] = [];
-      for (const [k, v] of styleOps) list.push({ kind: 'set-style', key: k, value: v });
-      if (textOp !== null) list.push({ kind: 'set-text', value: textOp.value });
+    // Each bucket flattens to one Edit per text instance plus one Edit
+    // for the shared style/attr ops. We track which entries in `pending`
+    // belong to which bucket so a per-edit failure can clear just the
+    // landed pieces while leaving the rest buffered for retry.
+    type PendingItem = {
+      key: string;
+      edit: Edit;
+      onSuccess: (bucket: Bucket) => void;
+    };
+    const pending: PendingItem[] = [];
+    for (const [key, bucket] of buckets) {
+      const { line, column, styleOps, textOps, attrOps, origTexts } = bucket;
+      // Shared edit (style + asset attrs) — one per bucket.
+      const sharedOps: EditOp[] = [];
+      for (const [k, v] of styleOps) sharedOps.push({ kind: 'set-style', key: k, value: v });
       for (const [attr, op] of attrOps) {
-        list.push({
+        sharedOps.push({
           kind: 'set-attr-asset',
           attr,
           assetPath: op.assetPath,
           previewUrl: op.previewUrl,
         });
       }
-      if (list.length > 0) edits.push({ line, column, ops: list });
+      if (sharedOps.length > 0) {
+        pending.push({
+          key,
+          edit: { line, column, ops: sharedOps },
+          onSuccess: (b) => {
+            b.styleOps.clear();
+            b.attrOps.clear();
+          },
+        });
+      }
+      // Per-instance text edits — one Edit per call site, each with its
+      // own prevText so the server can disambiguate among siblings.
+      for (const [instanceId, textOp] of textOps) {
+        const orig = origTexts.get(instanceId);
+        pending.push({
+          key,
+          edit: {
+            line,
+            column,
+            ops: [{ kind: 'set-text', value: textOp.value, prevText: orig?.value }],
+          },
+          onSuccess: (b) => {
+            b.textOps.delete(instanceId);
+          },
+        });
+      }
     }
-    pendingRef.current = new Map();
-    setPendingCount(0);
-    if (edits.length === 0) {
+    if (pending.length === 0) {
+      pendingRef.current = new Map();
+      setPendingCount(0);
       history.clear();
       return;
     }
     setCommitting(true);
     try {
-      await applyEdits(edits);
+      const results = await applyEdits(pending.map((p) => p.edit));
+      const failures: string[] = [];
+      for (let i = 0; i < results.length; i++) {
+        const item = pending[i];
+        const r = results[i];
+        const bucket = pendingRef.current.get(item.key);
+        if (r.ok) {
+          if (bucket) {
+            item.onSuccess(bucket);
+            if (
+              bucket.styleOps.size === 0 &&
+              bucket.textOps.size === 0 &&
+              bucket.attrOps.size === 0
+            ) {
+              pendingRef.current.delete(item.key);
+            }
+          }
+        } else {
+          failures.push(`line ${item.edit.line}: ${r.error ?? 'edit failed'}`);
+        }
+      }
+      refreshCount();
+      if (failures.length > 0) toast.error(`${t.inspector.saveFailed} ${failures.join('; ')}`);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      toast.error(`${t.inspector.saveFailed} ${msg}`);
+      throw err;
     } finally {
       setCommitting(false);
       history.clear();
     }
-  }, [applyEdits, history]);
+  }, [applyEdits, history, refreshCount, t]);
 
   const cancelEdits = useCallback(() => {
     if (pendingRef.current.size === 0) {
@@ -325,14 +436,20 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     }
     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}"]`);
-      if (!el) continue;
-      const style = el.style as unknown as Record<string, string>;
-      for (const [k, v] of b.origStyle) style[k] = v;
-      if (b.origText !== null) el.textContent = b.origText.value;
-      for (const [attr, value] of b.origAttrs) {
-        if (value === null) el.removeAttribute(attr);
-        else el.setAttribute(attr, value);
+      const sharedEl = root?.querySelector<HTMLElement>(`[data-slide-loc="${b.line}:${b.column}"]`);
+      if (sharedEl) {
+        const style = sharedEl.style as unknown as Record<string, string>;
+        for (const [k, v] of b.origStyle) style[k] = v;
+        for (const [attr, value] of b.origAttrs) {
+          if (value === null) sharedEl.removeAttribute(attr);
+          else sharedEl.setAttribute(attr, value);
+        }
+      }
+      // Each text edit has its own anchor — locate by instance id.
+      for (const [instanceId, orig] of b.origTexts) {
+        const textEl =
+          root?.querySelector<HTMLElement>(`[${INSTANCE_ID_ATTR}="${instanceId}"]`) ?? null;
+        if (textEl?.isConnected) textEl.textContent = orig.value;
       }
     }
     pendingRef.current = new Map();
@@ -341,7 +458,9 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
   }, [history]);
 
   // Auto-flush on inspector close and on route unmount so toggling
-  // off or navigating away doesn't drop buffered edits.
+  // off or navigating away doesn't drop buffered edits. Failures are
+  // surfaced via toast inside `commitEdits`; the catch here only
+  // swallows the rethrown rejection.
   const commitRef = useRef(commitEdits);
   commitRef.current = commitEdits;
   useEffect(() => {
@@ -372,8 +491,15 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
         const v = value ?? '';
         if (style[key] !== v) style[key] = v;
       }
-      if (bucket.textOp !== null && el.textContent !== bucket.textOp.value) {
-        el.textContent = bucket.textOp.value;
+      // Text replays per-instance: only the originally clicked DOM node
+      // (stamped with its `data-slide-instance-id`) gets the buffered
+      // value, so siblings of a reused component aren't clobbered.
+      const instanceId = readInstanceId(el);
+      if (instanceId) {
+        const textOp = bucket.textOps.get(instanceId);
+        if (textOp && el.textContent !== textOp.value) {
+          el.textContent = textOp.value;
+        }
       }
       for (const [attr, op] of bucket.attrOps) {
         if (el.getAttribute(attr) !== op.previewUrl) el.setAttribute(attr, op.previewUrl);
@@ -449,6 +575,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
 }
 
 export function InspectToggleButton() {
+  const t = useLocale();
   const { active, toggle } = useInspector();
   if (import.meta.env.PROD) return null;
   return (
@@ -457,10 +584,10 @@ export function InspectToggleButton() {
       variant={active ? 'default' : 'ghost'}
       onClick={toggle}
       data-inspector-ui
-      title="Inspect"
+      title={t.inspector.inspect}
     >
       <Crosshair className="size-3.5" />
-      <span className="hidden md:inline">Inspect</span>
+      <span className="hidden md:inline">{t.inspector.inspect}</span>
     </Button>
   );
 }

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

@@ -1,15 +1,14 @@
 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';
 
-// 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 t = useLocale();
 
   const inspectorCount = insp.pendingCount;
   const designCount = design.dirty ? 1 : 0;
@@ -22,7 +21,9 @@ export function SaveBar() {
     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);
+    // 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 = () => {
@@ -37,7 +38,7 @@ export function SaveBar() {
       committing={committing}
       onSave={onSave}
       onDiscard={onDiscard}
-      unsavedLabel={`${total} unsaved ${total === 1 ? 'change' : 'changes'}`}
+      unsavedLabel={format(plural(total, t.inspector.unsavedChanges), { count: total })}
       onUndo={history.undo}
       onRedo={history.redo}
       canUndo={history.canUndo}

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

@@ -1,6 +1,7 @@
 import { Check, Loader2, Redo2, Save, Undo2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { useLocale } from '@/lib/use-locale';
 
 type SaveCardProps = {
   dirty: boolean;
@@ -25,14 +26,16 @@ export function SaveCard({
   onSave,
   onDiscard,
   unsavedLabel,
-  savedLabel = 'Saved',
+  savedLabel,
   uiAttr,
   onUndo,
   onRedo,
   canUndo = false,
   canRedo = false,
 }: SaveCardProps) {
+  const t = useLocale();
   const [justSaved, setJustSaved] = useState(false);
+  const resolvedSavedLabel = savedLabel ?? t.common.saved;
 
   useEffect(() => {
     if (!justSaved) return;
@@ -66,8 +69,8 @@ export function SaveCard({
               className="text-muted-foreground hover:text-foreground"
               onClick={onUndo}
               disabled={committing || !canUndo}
-              aria-label="Undo"
-              title="Undo"
+              aria-label={t.common.undo}
+              title={t.common.undo}
             >
               <Undo2 className="size-3.5" />
             </Button>
@@ -77,8 +80,8 @@ export function SaveCard({
               className="text-muted-foreground hover:text-foreground"
               onClick={onRedo}
               disabled={committing || !canRedo}
-              aria-label="Redo"
-              title="Redo"
+              aria-label={t.common.redo}
+              title={t.common.redo}
             >
               <Redo2 className="size-3.5" />
             </Button>
@@ -90,7 +93,7 @@ export function SaveCard({
         {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}
+            {resolvedSavedLabel}
           </span>
         ) : dirty || committing ? (
           <span className="inline-flex items-center gap-1.5 px-2.5 text-[12px] font-medium text-foreground">
@@ -109,7 +112,7 @@ export function SaveCard({
             onClick={onDiscard}
             disabled={committing || !dirty}
           >
-            Discard
+            {t.common.discard}
           </Button>
         )}
         {(dirty || committing) && (
@@ -123,12 +126,12 @@ export function SaveCard({
             {committing ? (
               <>
                 <Loader2 className="size-3.5 animate-spin" />
-                Saving
+                {t.common.saving}
               </>
             ) : (
               <>
                 <Save className="size-3.5" />
-                Save
+                {t.common.save}
               </>
             )}
           </Button>

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

@@ -1,20 +1,27 @@
 import { Loader2 } from 'lucide-react';
+import { format, useLocale } from '@/lib/use-locale';
 import type { PdfExportProgress } from '../lib/export-pdf';
 import { Progress } from './ui/progress';
 
 export function PdfProgressToast({ progress }: { progress: PdfExportProgress }) {
+  const t = useLocale();
   const text =
     progress.phase === 'processing'
-      ? `Processing page ${progress.current.toString().padStart(2, '0')} of ${progress.total.toString().padStart(2, '0')}`
+      ? format(t.pdfToast.processing, {
+          current: progress.current.toString().padStart(2, '0'),
+          total: progress.total.toString().padStart(2, '0'),
+        })
       : progress.phase === 'printing'
-        ? 'Opening print dialog…'
-        : 'Done';
+        ? t.pdfToast.printing
+        : t.pdfToast.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="font-heading text-[12.5px] font-semibold tracking-tight">
+          {t.pdfToast.title}
+        </p>
         <p className="truncate font-mono text-[10.5px] tracking-[0.04em] text-muted-foreground">
           {text}
         </p>