@open-slide/core 1.0.4 → 1.0.5

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

@@ -1,18 +1,5 @@
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-
-const SHORTCUTS: Array<{ keys: string[]; label: string }> = [
-  { keys: ['→', '↓', 'Space', 'PgDn'], label: 'Next slide' },
-  { keys: ['←', '↑', 'PgUp'], label: 'Previous slide' },
-  { keys: ['Home', 'End'], label: 'First / last slide' },
-  { keys: ['1–9', 'Enter'], label: 'Jump to slide' },
-  { keys: ['O'], label: 'Slide overview' },
-  { keys: ['B'], label: 'Black screen' },
-  { keys: ['W'], label: 'White screen' },
-  { keys: ['L'], label: 'Laser pointer' },
-  { keys: ['P'], label: 'Open Presenter View' },
-  { keys: ['?', 'H'], label: 'Toggle this help' },
-  { keys: ['Esc'], label: 'Close overlay / exit' },
-];
+import { useLocale } from '@/lib/use-locale';
 
 type Props = {
   open: boolean;
@@ -23,15 +10,29 @@ type Props = {
 };
 
 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">Present mode</span>
-          <DialogTitle>Keyboard shortcuts</DialogTitle>
+          <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) => (
+          {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"

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

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../../lib/design';
 import type { Page } from '../../lib/sdk';
@@ -26,6 +27,7 @@ export function PresentOverviewGrid({ pages, design, open, current, onClose, onS
   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(() => {
@@ -88,11 +90,11 @@ export function PresentOverviewGrid({ pages, design, open, current, onClose, onS
     <div
       role="dialog"
       aria-modal="true"
-      aria-label="Slide overview"
+      aria-label={t.present.overviewDialogAria}
       className="absolute inset-0 z-50 flex flex-col bg-black/95 backdrop-blur-sm"
     >
       <div className="flex shrink-0 items-baseline justify-between px-8 pt-6 pb-3">
-        <span className="eyebrow text-white/55">Overview</span>
+        <span className="eyebrow text-white/55">{t.present.overviewEyebrow}</span>
         <span className="font-mono text-[11px] text-white/55 tabular-nums">
           {(focused + 1).toString().padStart(2, '0')} · {pages.length.toString().padStart(2, '0')}
         </span>
@@ -118,7 +120,7 @@ export function PresentOverviewGrid({ pages, design, open, current, onClose, onS
                   onClose();
                 }}
                 onMouseEnter={() => setFocused(i)}
-                aria-label={`Go to slide ${i + 1}`}
+                aria-label={format(t.present.overviewGoToAria, { n: i + 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',
@@ -146,7 +148,7 @@ export function PresentOverviewGrid({ pages, design, open, current, onClose, onS
                       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"
                     >
-                      Now
+                      {t.present.nowBadge}
                     </span>
                   )}
                 </div>

package/src/app/components/sidebar/folder-item.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { Folder, FolderIcon } from '@/lib/sdk';
+import { useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import { IconPicker } from './icon-picker';
 
@@ -86,6 +87,7 @@ export function FolderItem({
   const dragDepth = useRef(0);
   const [draftName, setDraftName] = useState(row.kind === 'folder' ? row.folder.name : '');
   const slideDragActive = useSlideDragActive();
+  const t = useLocale();
 
   const isSlideDrag = (e: React.DragEvent) => e.dataTransfer.types.includes(SLIDE_DND_MIME);
   const handleDragEnter = (e: React.DragEvent) => {
@@ -114,7 +116,7 @@ export function FolderItem({
 
   const icon =
     row.kind === 'draft' ? ({ type: 'emoji', value: '📝' } satisfies FolderIcon) : row.folder.icon;
-  const label = row.kind === 'draft' ? 'Draft' : row.folder.name;
+  const label = row.kind === 'draft' ? t.home.draft : row.folder.name;
 
   const commitRename = () => {
     if (row.kind !== 'folder') return;
@@ -148,7 +150,7 @@ export function FolderItem({
             <button
               type="button"
               className="flex size-5 shrink-0 items-center justify-center rounded transition-transform hover:scale-110"
-              aria-label="Change icon"
+              aria-label={t.home.changeIcon}
               onClick={(e) => e.stopPropagation()}
             >
               <FolderIconChip icon={icon} />
@@ -185,7 +187,14 @@ export function FolderItem({
         </button>
       )}
 
-      <span className={cn('folio shrink-0', count === 0 && 'opacity-0 group-hover:opacity-100')}>
+      <span
+        className={cn(
+          'folio ml-auto shrink-0 transition-opacity',
+          row.kind === 'folder' &&
+            import.meta.env.DEV &&
+            'group-hover:opacity-0 group-has-[[aria-expanded=true]]:opacity-0',
+        )}
+      >
         {count.toString().padStart(2, '0')}
       </span>
 
@@ -195,8 +204,8 @@ export function FolderItem({
             <button
               type="button"
               onClick={(e) => e.stopPropagation()}
-              className="size-5 shrink-0 rounded opacity-0 transition-opacity hover:bg-foreground/10 group-hover:opacity-100 aria-expanded:opacity-100"
-              aria-label="Folder actions"
+              className="absolute right-2 top-1/2 size-5 -translate-y-1/2 rounded opacity-0 transition-opacity hover:bg-foreground/10 group-hover:opacity-100 aria-expanded:opacity-100"
+              aria-label={t.home.folderActions}
             >
               <MoreHorizontal className="mx-auto size-3.5" />
             </button>
@@ -209,11 +218,11 @@ export function FolderItem({
               }}
             >
               <Pencil />
-              Rename
+              {t.common.rename}
             </DropdownMenuItem>
             <DropdownMenuItem variant="destructive" onSelect={() => row.onDelete()}>
               <Trash2 />
-              Delete
+              {t.common.delete}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

package/src/app/components/sidebar/icon-picker.tsx

@@ -1,6 +1,7 @@
 import EmojiPicker, { EmojiStyle, Theme } from 'emoji-picker-react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import type { FolderIcon } from '@/lib/sdk';
+import { useLocale } from '@/lib/use-locale';
 
 // Editorial palette — restrained warm/earth tones, no shadcn defaults
 // (no #8b5cf6 violet, no #3b82f6 blue, etc.). Picked to coexist with the
@@ -23,11 +24,12 @@ export function IconPicker({
   value: FolderIcon;
   onChange: (icon: FolderIcon) => void;
 }) {
+  const t = useLocale();
   return (
     <Tabs defaultValue={value.type} className="w-[320px]">
       <TabsList className="w-full">
-        <TabsTrigger value="emoji">Emoji</TabsTrigger>
-        <TabsTrigger value="color">Color</TabsTrigger>
+        <TabsTrigger value="emoji">{t.home.iconEmojiTab}</TabsTrigger>
+        <TabsTrigger value="color">{t.home.iconColorTab}</TabsTrigger>
       </TabsList>
 
       <TabsContent value="emoji">

package/src/app/components/sidebar/sidebar.tsx

@@ -1,9 +1,12 @@
 import { Plus } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
 import { ThemeToggle } from '@/components/theme-toggle';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { Folder, FolderIcon } from '@/lib/sdk';
-import { FolderItem } from './folder-item';
-import { PRESET_COLORS } from './icon-picker';
+import { format, useLocale } from '@/lib/use-locale';
+import { FolderIconChip, FolderItem } from './folder-item';
+import { IconPicker, PRESET_COLORS } from './icon-picker';
 
 export const DRAFT_ID = 'draft';
 
@@ -32,25 +35,72 @@ export function Sidebar({
 }) {
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
+  const [newIcon, setNewIcon] = useState<FolderIcon>(() => ({
+    type: 'color',
+    value: PRESET_COLORS[0],
+  }));
+  const [iconOpen, setIconOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const t = useLocale();
 
-  const commitCreate = () => {
-    const trimmed = newName.trim();
-    if (!trimmed) {
-      setCreating(false);
-      setNewName('');
-      return;
-    }
+  const startCreating = () => {
     const color = PRESET_COLORS[folders.length % PRESET_COLORS.length];
-    onCreate(trimmed, { type: 'color', value: color });
+    setNewIcon({ type: 'color', value: color });
     setNewName('');
+    setCreating(true);
+  };
+
+  useEffect(() => {
+    if (creating) inputRef.current?.focus();
+  }, [creating]);
+
+  const stateRef = useRef({ name: newName, icon: newIcon, iconOpen });
+  stateRef.current = { name: newName, icon: newIcon, iconOpen };
+
+  const exitCreate = () => {
     setCreating(false);
+    setNewName('');
+    setIconOpen(false);
   };
 
+  const commitCreate = async () => {
+    const trimmed = stateRef.current.name.trim();
+    const icon = stateRef.current.icon;
+    if (!trimmed) {
+      exitCreate();
+      return;
+    }
+    exitCreate();
+    try {
+      const folder = await onCreate(trimmed, icon);
+      toast.success(format(t.home.toastFolderCreated, { name: folder?.name ?? trimmed }));
+    } catch {
+      toast.error(t.home.toastFolderCreateFailed);
+    }
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: commitCreate reads latest state via stateRef
+  useEffect(() => {
+    if (!creating) return;
+    const onDown = (e: MouseEvent) => {
+      if (stateRef.current.iconOpen) return;
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+      if (target.closest('[data-folder-create]')) return;
+      if (target.closest('[data-radix-popper-content-wrapper]')) return;
+      commitCreate();
+    };
+    document.addEventListener('mousedown', onDown);
+    return () => document.removeEventListener('mousedown', onDown);
+  }, [creating]);
+
   return (
     <aside className="paper relative flex h-full w-[16.5rem] shrink-0 flex-col border-r border-hairline bg-sidebar text-sidebar-foreground">
       <div className="flex items-center justify-between px-4 pt-5 pb-4">
-        <h1 className="font-heading text-lg font-bold tracking-tight">open-slide</h1>
-        <ThemeToggle />
+        <h1 className="font-heading text-lg font-bold tracking-tight">{t.home.appTitle}</h1>
+        <div className="-mr-1.5">
+          <ThemeToggle />
+        </div>
       </div>
 
       <div className="px-2">
@@ -64,9 +114,8 @@ export function Sidebar({
       </div>
 
       <div className="mt-5 flex items-center gap-2 px-4 pb-1.5">
-        <span className="eyebrow">Folders</span>
+        <span className="eyebrow">{t.home.folders}</span>
         <span className="h-px flex-1 bg-hairline" aria-hidden />
-        <span className="folio">{folders.length.toString().padStart(2, '0')}</span>
       </div>
 
       <div className="flex-1 overflow-y-auto px-2 pb-2">
@@ -89,20 +138,33 @@ export function Sidebar({
 
         {import.meta.env.DEV &&
           (creating ? (
-            <div className="mt-1 flex items-center gap-2 rounded-[5px] border border-dashed border-foreground/30 bg-card px-2 py-1.5">
-              <span className="size-2 shrink-0 rounded-[2px] bg-brand" aria-hidden />
+            <div
+              data-folder-create
+              className="mt-1 flex items-center gap-2.5 rounded-[5px] border border-dashed border-foreground/30 bg-card px-2 py-[5px]"
+            >
+              <Popover open={iconOpen} onOpenChange={setIconOpen}>
+                <PopoverTrigger asChild>
+                  <button
+                    type="button"
+                    className="flex size-5 shrink-0 items-center justify-center rounded transition-transform hover:scale-110"
+                    aria-label={t.home.pickIcon}
+                  >
+                    <FolderIconChip icon={newIcon} />
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent side="right" align="start" className="w-auto p-2">
+                  <IconPicker value={newIcon} onChange={setNewIcon} />
+                </PopoverContent>
+              </Popover>
               <input
+                ref={inputRef}
                 value={newName}
                 onChange={(e) => setNewName(e.target.value)}
-                onBlur={commitCreate}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') commitCreate();
-                  if (e.key === 'Escape') {
-                    setCreating(false);
-                    setNewName('');
-                  }
+                  if (e.key === 'Escape') exitCreate();
                 }}
-                placeholder="Folder name"
+                placeholder={t.home.folderName}
                 maxLength={40}
                 className="min-w-0 flex-1 bg-transparent text-[12.5px] outline-none placeholder:text-muted-foreground/60"
               />
@@ -110,11 +172,11 @@ export function Sidebar({
           ) : (
             <button
               type="button"
-              onClick={() => setCreating(true)}
+              onClick={startCreating}
               className="mt-1 flex w-full items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
             >
               <Plus className="size-3.5" />
-              <span>New folder</span>
+              <span>{t.home.newFolder}</span>
             </button>
           ))}
       </div>

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

@@ -2,6 +2,7 @@ import { Palette, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Field, NumberField, Section } from '@/components/panel/panel-fields';
 import { PanelShell, usePanelMount } from '@/components/panel/panel-shell';
+import { useLocale } from '@/lib/use-locale';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
@@ -29,6 +30,7 @@ type DesignPanelProps = {
 export function DesignPanel({ open, onClose }: DesignPanelProps) {
   const { draft, exists, warning, loaded, dirty, update } = useDesignPanelState();
   const { mounted, animVisible } = usePanelMount(open);
+  const t = useLocale();
 
   if (!loaded) return null;
   if (!mounted) return null;
@@ -43,15 +45,19 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           <div className="flex min-w-0 items-center gap-2">
             <Palette className="size-3.5 text-muted-foreground" />
             <span className="font-heading text-[12px] font-semibold tracking-tight">
-              Design tokens
+              {t.stylePanel.designTokens}
             </span>
             {!exists && (
               <span className="rounded-[3px] border border-hairline bg-muted/60 px-1.5 py-px font-mono text-[9.5px] uppercase tracking-[0.08em] text-muted-foreground">
-                draft
+                {t.stylePanel.draftBadge}
               </span>
             )}
             {dirty && (
-              <span className="size-1.5 rounded-full bg-brand" title="Unsaved" aria-hidden />
+              <span
+                className="size-1.5 rounded-full bg-brand"
+                title={t.stylePanel.unsavedTitle}
+                aria-hidden
+              />
             )}
           </div>
           <Button
@@ -59,7 +65,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
             size="icon-sm"
             className="text-muted-foreground hover:text-foreground"
             onClick={onClose}
-            aria-label="Close design panel"
+            aria-label={t.stylePanel.closePanelAria}
           >
             <X className="size-3.5" />
           </Button>
@@ -74,9 +80,9 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
         )
       }
     >
-      <Section title="Colors">
+      <Section title={t.stylePanel.colorsSection}>
         <ColorField
-          label="Background"
+          label={t.stylePanel.backgroundLabel}
           value={draft.palette.bg}
           onChange={(v) =>
             update((d) => {
@@ -85,7 +91,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <ColorField
-          label="Text"
+          label={t.stylePanel.textLabel}
           value={draft.palette.text}
           onChange={(v) =>
             update((d) => {
@@ -94,7 +100,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <ColorField
-          label="Accent"
+          label={t.stylePanel.accentLabel}
           value={draft.palette.accent}
           onChange={(v) =>
             update((d) => {
@@ -106,9 +112,9 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
 
       <Separator />
 
-      <Section title="Typography">
+      <Section title={t.stylePanel.typographySection}>
         <FontField
-          label="Display"
+          label={t.stylePanel.displayFontLabel}
           value={draft.fonts.display}
           onChange={(v) =>
             update((d) => {
@@ -117,7 +123,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <FontField
-          label="Body"
+          label={t.stylePanel.bodyFontLabel}
           value={draft.fonts.body}
           onChange={(v) =>
             update((d) => {
@@ -126,7 +132,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <SliderField
-          label="Hero"
+          label={t.stylePanel.heroLabel}
           value={draft.typeScale.hero}
           min={48}
           max={240}
@@ -139,7 +145,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <SliderField
-          label="Body"
+          label={t.stylePanel.bodyLabel}
           value={draft.typeScale.body}
           min={16}
           max={72}
@@ -155,9 +161,9 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
 
       <Separator />
 
-      <Section title="Shape">
+      <Section title={t.stylePanel.shapeSection}>
         <SliderField
-          label="Radius"
+          label={t.stylePanel.radiusLabel}
           value={draft.radius}
           min={0}
           max={80}
@@ -181,6 +187,7 @@ export function DesignToggleButton({
   active: boolean;
   onToggle: () => void;
 }) {
+  const t = useLocale();
   if (import.meta.env.PROD) return null;
   return (
     <Button
@@ -188,10 +195,10 @@ export function DesignToggleButton({
       variant={active ? 'default' : 'ghost'}
       onClick={onToggle}
       data-design-ui
-      title="Design tokens"
+      title={t.stylePanel.designToggleTitle}
     >
       <Palette className="size-3.5" />
-      <span className="hidden md:inline">Design</span>
+      <span className="hidden md:inline">{t.stylePanel.designToggle}</span>
     </Button>
   );
 }
@@ -247,6 +254,7 @@ function FontField({
   onChange: (v: string) => void;
 }) {
   const matched = FONT_PRESETS.find((p) => p.value === value);
+  const tFont = useLocale();
   return (
     <Field label={label}>
       <Select
@@ -266,7 +274,7 @@ function FontField({
           ))}
           {!matched && (
             <SelectItem value="__custom__" className="text-xs">
-              Custom…
+              {tFont.stylePanel.fontPresetCustom}
             </SelectItem>
           )}
         </SelectContent>

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

@@ -8,11 +8,13 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
+  const t = useLocale();
 
   useEffect(() => {
     setMounted(true);
@@ -22,8 +24,8 @@ export function ThemeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger
         type="button"
-        aria-label="Toggle theme"
-        title="Theme"
+        aria-label={t.themeToggle.toggleAria}
+        title={t.themeToggle.title}
         className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), 'relative')}
       >
         <Sun className="size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
@@ -35,21 +37,21 @@ export function ThemeToggle() {
           data-active={mounted && theme === 'light'}
         >
           <Sun />
-          Light
+          {t.themeToggle.light}
         </DropdownMenuItem>
         <DropdownMenuItem
           onSelect={() => setTheme('dark')}
           data-active={mounted && theme === 'dark'}
         >
           <Moon />
-          Dark
+          {t.themeToggle.dark}
         </DropdownMenuItem>
         <DropdownMenuItem
           onSelect={() => setTheme('system')}
           data-active={mounted && theme === 'system'}
         >
           <Monitor />
-          System
+          {t.themeToggle.system}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

package/src/app/components/thumbnail-rail.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
 import type { Page } from '../lib/sdk';
@@ -27,6 +28,7 @@ export function ThumbnailRail({
   orientation = 'vertical',
 }: Props) {
   const activeRef = useRef<HTMLButtonElement | null>(null);
+  const t = useLocale();
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: `current` triggers re-scroll on selection change
   useEffect(() => {
@@ -55,7 +57,7 @@ export function ThumbnailRail({
                   type="button"
                   ref={active ? activeRef : undefined}
                   onClick={() => onSelect(i)}
-                  aria-label={`Go to page ${i + 1}`}
+                  aria-label={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
                   aria-current={active ? 'true' : undefined}
                   className={cn('group/thumb relative flex shrink-0 flex-col items-center gap-1.5')}
                 >
@@ -95,7 +97,7 @@ export function ThumbnailRail({
     <ScrollArea className="h-full border-r border-hairline bg-sidebar">
       <aside className="flex flex-col gap-2 px-3 py-3">
         <div className="flex items-baseline justify-between px-1 pb-1">
-          <span className="eyebrow">Pages</span>
+          <span className="eyebrow">{t.thumbnailRail.pages}</span>
           <span className="folio">{pages.length.toString().padStart(2, '0')}</span>
         </div>
         {pages.map((PageComp, i) => {

package/src/app/lib/inspector/use-editor.ts

@@ -2,12 +2,14 @@ import { useCallback } from 'react';
 
 export type EditOp =
   | { kind: 'set-style'; key: string; value: string | null }
-  | { kind: 'set-text'; value: string }
+  | { kind: 'set-text'; value: string; prevText?: string }
   | { kind: 'set-attr-asset'; attr: string; assetPath: string; previewUrl: string }
   | { kind: 'replace-placeholder-with-image'; assetPath: string };
 
 export type Edit = { line: number; column: number; ops: EditOp[] };
 
+export type EditResult = { ok: boolean; error?: string };
+
 export class NoOpEditError extends Error {
   constructor() {
     super(
@@ -37,9 +39,11 @@ export function useEditor(slideId: string) {
   );
 
   // Batch many element edits into one file write and one HMR tick.
+  // Returns one result per input edit so callers can keep failed
+  // edits buffered while clearing the ones that landed.
   const applyEdits = useCallback(
-    async (edits: Edit[]) => {
-      if (edits.length === 0) return;
+    async (edits: Edit[]): Promise<EditResult[]> => {
+      if (edits.length === 0) return [];
       const res = await fetch('/__edit/batch', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
@@ -47,14 +51,12 @@ export function useEditor(slideId: string) {
       });
       const body = (await res.json().catch(() => ({}))) as {
         error?: string;
-        changed?: boolean;
-        results?: Array<{ ok: boolean; error?: string }>;
+        results?: EditResult[];
       };
       if (!res.ok) {
         throw new Error(body.error ?? `POST /__edit/batch → ${res.status}`);
       }
-      const failed = body.results?.find((r) => !r.ok);
-      if (failed?.error) throw new Error(failed.error);
+      return body.results ?? [];
     },
     [slideId],
   );