@open-slide/core 1.0.4 → 1.0.6

package/src/app/components/player.tsx

@@ -21,9 +21,6 @@ import { useTouchSwipe } from './present/use-touch-swipe';
 import { SlideCanvas } from './slide-canvas';
 
 const IDLE_HIDE_MS = 2000;
-// Bottom band of the viewport that reveals the control bar + progress bar.
-// Generous enough to feel forgiving with a trackpad, tight enough not to
-// flash on incidental cursor moves.
 const BAR_HOTZONE_PX = 160;
 
 type Props = {
@@ -33,15 +30,7 @@ type Props = {
   onIndexChange: (index: number) => void;
   onExit: () => void;
   allowExit?: boolean;
-  /**
-   * When true, render the full presenter chrome (control bar, progress bar,
-   * overview, blackout, laser pointer, jump-to-slide, help overlay, and
-   * the BroadcastChannel sync that powers Presenter View). Defaults to
-   * false so the static HTML export and any other minimal embeddings stay
-   * untouched.
-   */
   controls?: boolean;
-  /** Optional id used to namespace the BroadcastChannel for Presenter View. */
   slideId?: string;
 };
 
@@ -56,16 +45,15 @@ export function Player({
   slideId,
 }: Props) {
   const rootRef = useRef<HTMLDivElement>(null);
-  // Mirrored as state so children that need to portal *into* the player
-  // (tooltips, popovers — the body is outside the fullscreen subtree and
-  // therefore invisible) can subscribe and re-render once the node mounts.
+  // Mirrored as state so descendants portaling *into* the player subtree
+  // (tooltips, popovers — the body is outside the fullscreen tree) re-render
+  // once the node mounts.
   const [rootEl, setRootEl] = useState<HTMLDivElement | null>(null);
   const setRoot = useCallback((el: HTMLDivElement | null) => {
     rootRef.current = el;
     setRootEl(el);
   }, []);
 
-  // ── Overlay state (only meaningful when `controls` is true) ────────────
   const [overviewOpen, setOverviewOpen] = useState(false);
   const [helpOpen, setHelpOpen] = useState(false);
   const [blackout, setBlackout] = useState<'black' | 'white' | null>(null);
@@ -97,7 +85,6 @@ export function Player({
     onNext: goNext,
   });
 
-  // ── Fullscreen lifecycle ───────────────────────────────────────────────
   useEffect(() => {
     const el = rootRef.current;
     if (!el) return;
@@ -118,11 +105,9 @@ export function Player({
     return () => document.removeEventListener('fullscreenchange', onFsChange);
   }, [onExit, allowExit]);
 
-  // ── Presenter View sync ────────────────────────────────────────────────
-  // Player is the source of truth. It re-publishes state on every change
+  // Player is the source of truth: it re-publishes state on every change
   // and answers `request-state` pings so newly opened presenter windows
-  // hydrate immediately. Notes are loaded by Presenter View itself from
-  // the same slide module, so they don't cross the channel.
+  // hydrate immediately.
   const presenterState = useMemo<PresenterState>(
     () => ({ index, pageCount: pages.length, blackout, startedAt }),
     [index, pages.length, blackout, startedAt],
@@ -155,7 +140,6 @@ export function Player({
     channel.send({ type: 'state', state: presenterState });
   }, [controls, channel, presenterState]);
 
-  // ── Keyboard ───────────────────────────────────────────────────────────
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       const tgt = e.target;
@@ -256,10 +240,9 @@ export function Player({
     slideId,
   ]);
 
-  // ── Chrome visibility / cursor ─────────────────────────────────────────
   // The control bar + progress strip only surface when the pointer is in
-  // the bottom hot zone. Keyboard nav (arrows / space / PgDn) never
-  // reveals them — that's intentional so the deck stays clean.
+  // the bottom hot zone. Keyboard nav (arrows / space / PgDn) never reveals
+  // them — intentional so the deck stays clean during a talk.
   const pointerNearBottom = usePointerNearBottom(BAR_HOTZONE_PX, controls && !overlayActive);
   const chromeVisible = pointerNearBottom || overlayActive;
   const idle = useIdle(IDLE_HIDE_MS, controls && !overlayActive);
@@ -279,7 +262,6 @@ export function Player({
         {PageComp ? <PageComp /> : null}
       </SlideCanvas>
 
-      {/* Invisible side click zones — the original mobile-friendly nav. */}
       <button
         type="button"
         aria-label="Previous page"

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

@@ -11,6 +11,7 @@ import {
 } from 'lucide-react';
 import { createContext, useContext, useEffect, useState } from 'react';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 
 const TooltipContainerCtx = createContext<HTMLElement | null>(null);
@@ -57,6 +58,7 @@ export function PresentControlBar({
   onExit,
   tooltipContainer,
 }: Props) {
+  const t = useLocale();
   return (
     <div
       data-state={visible ? 'visible' : 'hidden'}
@@ -73,10 +75,14 @@ export function PresentControlBar({
       <TooltipProvider delayDuration={300}>
         <TooltipContainerCtx.Provider value={tooltipContainer ?? null}>
           <div className="pointer-events-auto flex h-11 items-center gap-1 rounded-full border border-white/10 bg-black/55 px-2 text-white/85 shadow-[0_8px_30px_-8px_oklch(0_0_0/0.6)] backdrop-blur-md">
-            <BarButton label="Previous slide (←)" onClick={onPrev} disabled={index === 0}>
+            <BarButton label={t.present.prevSlideAria} onClick={onPrev} disabled={index === 0}>
               <ChevronLeft className="size-4" />
             </BarButton>
-            <BarButton label="Next slide (→)" onClick={onNext} disabled={index >= total - 1}>
+            <BarButton
+              label={t.present.nextSlideAria}
+              onClick={onNext}
+              disabled={index >= total - 1}
+            >
               <ChevronRight className="size-4" />
             </BarButton>
 
@@ -94,37 +100,37 @@ export function PresentControlBar({
 
             <Divider />
 
-            <BarButton label="Slide overview (O)" onClick={onOverview}>
+            <BarButton label={t.present.overviewAria} onClick={onOverview}>
               <Grid2x2 className="size-4" />
             </BarButton>
             <BarButton
-              label="Black screen (B)"
+              label={t.present.blackoutAria}
               onClick={() => onBlackout('black')}
               active={blackout === 'black'}
             >
               <Square className="size-4 fill-current" />
             </BarButton>
             <BarButton
-              label="White screen (W)"
+              label={t.present.whiteoutAria}
               onClick={() => onBlackout('white')}
               active={blackout === 'white'}
             >
               <Sun className="size-4" />
             </BarButton>
-            <BarButton label="Laser pointer (L)" onClick={onLaser} active={laser}>
+            <BarButton label={t.present.laserAria} onClick={onLaser} active={laser}>
               <Crosshair className="size-4" />
             </BarButton>
-            <BarButton label="Presenter view (P)" onClick={onPresenter}>
+            <BarButton label={t.present.presenterAria} onClick={onPresenter}>
               <MonitorSpeaker className="size-4" />
             </BarButton>
-            <BarButton label="Keyboard shortcuts (?)" onClick={onHelp}>
+            <BarButton label={t.present.helpAria} onClick={onHelp}>
               <Keyboard className="size-4" />
             </BarButton>
 
             {allowExit && (
               <>
                 <Divider />
-                <BarButton label="Exit (Esc)" onClick={onExit}>
+                <BarButton label={t.present.exitAria} onClick={onExit}>
                   <LogOut className="size-4" />
                 </BarButton>
               </>
@@ -186,6 +192,7 @@ function Divider() {
 
 function ElapsedClock({ startedAt }: { startedAt: number }) {
   const [now, setNow] = useState(() => Date.now());
+  const t = useLocale();
   useEffect(() => {
     const id = setInterval(() => setNow(Date.now()), 1000);
     return () => clearInterval(id);
@@ -195,7 +202,7 @@ function ElapsedClock({ startedAt }: { startedAt: number }) {
   const s = elapsed % 60;
   return (
     <time
-      title="Elapsed time"
+      title={t.present.elapsedTime}
       className="px-2 font-mono text-[11.5px] tracking-[0.08em] tabular-nums uppercase select-none text-white/70"
     >
       {m.toString().padStart(2, '0')}:{s.toString().padStart(2, '0')}

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';
@@ -17,15 +18,11 @@ type Props = {
   onSelect: (index: number) => void;
 };
 
-/**
- * Full-screen grid of slide thumbnails. Reuses SlideCanvas at fixed scale
- * so each preview is rendered with the slide's design tokens but with
- * motion frozen. Arrow keys move focus; Enter/click jumps and closes.
- */
 export function PresentOverviewGrid({ pages, design, open, current, onClose, onSelect }: 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(() => {
@@ -88,11 +85,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 +115,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 +143,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/present/use-presenter-channel.ts

@@ -20,16 +20,9 @@ type Handler = (msg: PresenterCommand) => void;
 
 const SUPPORTED = typeof window !== 'undefined' && typeof BroadcastChannel !== 'undefined';
 
-/**
- * BroadcastChannel wrapper used by both the projection window (Player) and
- * the Presenter View. The channel is keyed by slideId so multiple decks
- * open in different tabs do not cross-talk. Falls back to no-op when the
- * API is missing (older browsers, SSR).
- *
- * The channel is owned by the effect (not useMemo) so React 18 StrictMode's
- * double-invoke creates a fresh channel on the second mount instead of
- * leaving a closed one behind that throws on the next `send()`.
- */
+// Channel ownership lives in the effect (not useMemo) so StrictMode's
+// double-invoke produces a fresh channel on remount rather than leaving a
+// closed one behind that throws on the next send().
 export function usePresenterChannel(slideId: string, onMessage?: Handler) {
   const onMessageRef = useRef(onMessage);
   onMessageRef.current = onMessage;

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;
@@ -128,8 +130,6 @@ export function FolderItem({
     <div
       className={cn(
         'group relative flex items-center gap-2.5 rounded-[5px] px-2 py-[5px] text-[12.5px] transition-colors',
-        // Editorial selected state: subtle warm tint + a thin vermillion
-        // ink-mark on the leading edge. Avoids the heavy "filled pill" look.
         selected
           ? 'bg-muted text-foreground before:absolute before:inset-y-1.5 before:-left-0.5 before:w-[2px] before:rounded-full before:bg-brand'
           : 'text-foreground/70 hover:bg-muted/60 hover:text-foreground',
@@ -148,7 +148,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 +185,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 +202,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 +216,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,10 +1,8 @@
 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
-// vermillion brand accent without shouting over it.
 export const PRESET_COLORS = [
   '#c0392b', // vermillion
   '#b8743e', // ochre
@@ -23,11 +21,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/slide-canvas.tsx

@@ -5,21 +5,12 @@ import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
 
 type Props = {
   children: ReactNode;
-  /** If set, use this scale directly (e.g., thumbnails). Otherwise fit to container. */
+  /** If set, use this scale directly. Otherwise fit to container. */
   scale?: number;
-  /** Center the canvas within the container (default true). */
   center?: boolean;
-  /** Flat mode: no rounded corners or drop shadow. */
   flat?: boolean;
-  /** Freeze descendant animations and transitions, useful for thumbnail previews. */
   freezeMotion?: boolean;
   className?: string;
-  /**
-   * Per-slide design tokens. When set, the matching CSS custom properties
-   * are emitted on the canvas root so descendants can use `var(--osd-X)`
-   * regardless of which surface (editor, player, thumbnail, export) is
-   * rendering them.
-   */
   design?: DesignSystem;
 };
 

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

@@ -48,7 +48,6 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
   const draftRef = useRef<DesignSystem | null>(null);
   draftRef.current = draft;
 
-  // Re-seed draft whenever the saved design changes (slide switch, post-save HMR).
   useEffect(() => {
     if (design) setDraft(clone(design));
   }, [design]);
@@ -99,11 +98,8 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
     });
   }, [history]);
 
-  // Live-preview overlay: rendered only while there are unsaved changes so the
-  // canvas reflects the draft instantly, before any file write. SlideCanvas
-  // emits its own CSS variables inline on the canvas root (so home thumbnails,
-  // player, and exports work without any extra plumbing). Inline styles win
-  // against external rules, so the overlay must use `!important` to override.
+  // SlideCanvas emits its design vars inline on the canvas root, so a draft
+  // overlay must use `!important` to outrank those inline styles.
   const previewCss = useMemo(() => {
     if (!dirty || !draft) return '';
     const lines = Object.entries(designToCssVars(draft))