@open-slide/core 1.1.0 → 1.3.0

package/src/app/routes/slide.tsx

@@ -24,17 +24,21 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useFolders } from '@/lib/folders';
-import { useLocale } from '@/lib/use-locale';
+import { useAgentSocketConnected } from '@/lib/use-agent-socket';
+import { format, useLocale } from '@/lib/use-locale';
 import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
 import { cn } from '@/lib/utils';
 import { ClickNavZones } from '../components/click-nav-zones';
+import { NotesDrawer } from '../components/notes-drawer';
 import { PdfProgressToast } from '../components/pdf-progress-toast';
 import { Player } from '../components/player';
 import { SlideCanvas } from '../components/slide-canvas';
-import { ThumbnailRail } from '../components/thumbnail-rail';
+import { type ThumbnailActions, ThumbnailRail } from '../components/thumbnail-rail';
 import { exportSlideAsHtml } from '../lib/export-html';
 import { exportSlideAsPdf } from '../lib/export-pdf';
+import { remapNotesSessionCacheAfterReorder } from '../lib/inspector/use-notes';
 import type { SlideModule } from '../lib/sdk';
 import { loadSlide } from '../lib/slides';
 
@@ -78,6 +82,33 @@ export function Slide() {
   const index = Number.isFinite(rawIndex) ? Math.max(0, Math.min(pageCount - 1, rawIndex)) : 0;
   const view = searchParams.get('view') === 'assets' ? 'assets' : 'slides';
 
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    if (!slideId || !slide || pageCount === 0) return;
+    import.meta.hot.send('open-slide:current', {
+      slideId,
+      pageIndex: index,
+      totalPages: pageCount,
+      slideTitle: slide.meta?.title ?? slideId,
+      view,
+    });
+  }, [slideId, index, pageCount, slide, view]);
+
+  const goTo = useCallback(
+    (i: number) => {
+      const clamped = Math.max(0, Math.min(pageCount - 1, i));
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.set('p', String(clamped + 1));
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [pageCount, setSearchParams],
+  );
+
   const reorderPage = useCallback(
     async (from: number, to: number) => {
       if (from === to) return;
@@ -91,21 +122,14 @@ export function Slide() {
       const [movedIdx] = order.splice(from, 1);
       order.splice(to, 0, movedIdx);
 
+      remapNotesSessionCacheAfterReorder(slideId, order);
+
       // Keep the user looking at the same page they were on before the drag.
       let nextIndex = index;
       if (index === from) nextIndex = to;
       else if (from < index && to >= index) nextIndex = index - 1;
       else if (from > index && to <= index) nextIndex = index + 1;
-      if (nextIndex !== index) {
-        setSearchParams(
-          (prev) => {
-            const params = new URLSearchParams(prev);
-            params.set('p', String(nextIndex + 1));
-            return params;
-          },
-          { replace: true },
-        );
-      }
+      if (nextIndex !== index) goTo(nextIndex);
 
       try {
         const res = await fetch(`/__slides/${encodeURIComponent(slideId)}/reorder`, {
@@ -119,25 +143,81 @@ export function Slide() {
         }
       } catch (err) {
         setPages(before);
+        const inverse = order.map((_, i) => order.indexOf(i));
+        remapNotesSessionCacheAfterReorder(slideId, inverse);
         toast.error(`Reorder failed: ${String((err as Error).message ?? err)}`);
       }
     },
-    [pages, index, slideId, setSearchParams],
+    [pages, index, slideId, goTo],
   );
 
-  const goTo = useCallback(
-    (i: number) => {
-      const clamped = Math.max(0, Math.min(pageCount - 1, i));
-      setSearchParams(
-        (prev) => {
-          const next = new URLSearchParams(prev);
-          next.set('p', String(clamped + 1));
-          return next;
-        },
-        { replace: true },
-      );
+  const duplicatePage = useCallback(
+    async (i: number) => {
+      const before = pages;
+      if (i < 0 || i >= before.length) return;
+      const nextPages = [...before];
+      nextPages.splice(i + 1, 0, before[i]);
+      setPages(nextPages);
+      if (index > i) goTo(index + 1);
+
+      try {
+        const res = await fetch(`/__slides/${encodeURIComponent(slideId)}/pages/${i}/duplicate`, {
+          method: 'POST',
+        });
+        if (!res.ok) {
+          const detail = await res.json().catch(() => ({ error: res.statusText }));
+          throw new Error(detail.error ?? `HTTP ${res.status}`);
+        }
+        toast.success(format(t.thumbnailRail.toastDuplicated, { n: i + 1 }));
+      } catch (err) {
+        setPages(before);
+        toast.error(
+          `${t.thumbnailRail.toastDuplicateFailed}: ${String((err as Error).message ?? err)}`,
+        );
+      }
     },
-    [pageCount, setSearchParams],
+    [pages, index, slideId, goTo, t.thumbnailRail],
+  );
+
+  const deletePage = useCallback(
+    async (i: number) => {
+      const before = pages;
+      if (i < 0 || i >= before.length || before.length <= 1) return;
+      const nextPages = before.slice(0, i).concat(before.slice(i + 1));
+      setPages(nextPages);
+      if (index >= i && index > 0) {
+        const target = index === i ? Math.min(index, nextPages.length - 1) : index - 1;
+        goTo(target);
+      }
+
+      try {
+        const res = await fetch(`/__slides/${encodeURIComponent(slideId)}/pages/${i}`, {
+          method: 'DELETE',
+        });
+        if (!res.ok) {
+          const detail = await res.json().catch(() => ({ error: res.statusText }));
+          throw new Error(detail.error ?? `HTTP ${res.status}`);
+        }
+        toast.success(format(t.thumbnailRail.toastDeleted, { n: i + 1 }));
+      } catch (err) {
+        setPages(before);
+        toast.error(
+          `${t.thumbnailRail.toastDeleteFailed}: ${String((err as Error).message ?? err)}`,
+        );
+      }
+    },
+    [pages, index, slideId, goTo, t.thumbnailRail],
+  );
+
+  const thumbnailActions = useMemo<ThumbnailActions | undefined>(
+    () =>
+      import.meta.env.DEV
+        ? {
+            onDuplicate: duplicatePage,
+            onDelete: deletePage,
+          }
+        : undefined,
+    [duplicatePage, deletePage],
   );
 
   useEffect(() => {
@@ -255,6 +335,7 @@ export function Slide() {
   return (
     <HistoryProvider>
       <InspectorProvider slideId={slideId}>
+        <SelectionReporter />
         <div className="flex h-dvh flex-col overflow-hidden bg-background text-foreground">
           {/* Editorial toolbar — three zones, hairline separators, mono-folio center */}
           <header className="relative flex h-12 shrink-0 items-center justify-between border-b border-hairline bg-sidebar/85 px-2 backdrop-blur-md md:px-3">
@@ -288,6 +369,7 @@ export function Slide() {
                   </TabsList>
                 </Tabs>
               )}
+              {import.meta.env.DEV && <AgentConnectedBadge />}
             </div>
 
             {/* Centered title — the rail and mobile pill carry the page count. */}
@@ -400,57 +482,68 @@ export function Slide() {
             </div>
           ) : (
             <DesignProvider slideId={slideId}>
-              <div className="flex min-h-0 flex-1 flex-col md:flex-row">
-                <div className="hidden w-[16.5rem] shrink-0 md:block">
-                  <ThumbnailRail
+              <div className="flex min-h-0 flex-1 flex-col">
+                <div className="flex min-h-0 flex-1 flex-col md:flex-row">
+                  <ResizableRail
                     pages={pages}
                     design={slide.design}
                     current={index}
                     onSelect={goTo}
                     onReorder={import.meta.env.DEV ? reorderPage : undefined}
+                    actions={thumbnailActions}
                   />
-                </div>
-                <main
-                  ref={slideViewportRef}
-                  data-inspector-root
-                  className="paper relative min-h-0 min-w-0 flex-1 bg-canvas p-2 md:p-10"
-                >
-                  <SlideWheelNavigation
-                    targetRef={slideViewportRef}
-                    onPrev={() => goTo(index - 1)}
-                    onNext={() => goTo(index + 1)}
-                    canPrev={index > 0}
-                    canNext={index < pageCount - 1}
-                  />
-                  <SlideCanvas design={slide.design}>
-                    <CurrentPage />
-                  </SlideCanvas>
-                  <ClickNavZones
-                    onPrev={() => goTo(index - 1)}
-                    onNext={() => goTo(index + 1)}
-                    canPrev={index > 0}
-                    canNext={index < pageCount - 1}
-                  />
-                  <InspectOverlay />
-                  <SaveBar />
-                  {import.meta.env.DEV && <CommentWidget />}
-                </main>
-                {/* Mobile-only horizontal rail. Sits below the canvas and
+                  <main
+                    ref={slideViewportRef}
+                    data-inspector-root
+                    data-slide-id={slideId}
+                    className="paper relative min-h-0 min-w-0 flex-1 bg-canvas p-2 md:p-10"
+                  >
+                    <SlideWheelNavigation
+                      targetRef={slideViewportRef}
+                      onPrev={() => goTo(index - 1)}
+                      onNext={() => goTo(index + 1)}
+                      canPrev={index > 0}
+                      canNext={index < pageCount - 1}
+                    />
+                    <SlideCanvas design={slide.design}>
+                      <CurrentPage />
+                    </SlideCanvas>
+                    <ClickNavZones
+                      onPrev={() => goTo(index - 1)}
+                      onNext={() => goTo(index + 1)}
+                      canPrev={index > 0}
+                      canNext={index < pageCount - 1}
+                    />
+                    <InspectOverlay />
+                    <SaveBar />
+                    {import.meta.env.DEV && <CommentWidget />}
+                  </main>
+                  {/* Mobile-only horizontal rail. Sits below the canvas and
                     pads its bottom for the iOS home indicator / Safari URL bar. */}
-                <div
-                  className="shrink-0 border-t border-hairline md:hidden"
-                  style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
-                >
-                  <ThumbnailRail
-                    pages={pages}
-                    design={slide.design}
-                    current={index}
-                    onSelect={goTo}
-                    orientation="horizontal"
-                  />
+                  <div
+                    className="shrink-0 border-t border-hairline md:hidden"
+                    style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+                  >
+                    <ThumbnailRail
+                      pages={pages}
+                      design={slide.design}
+                      current={index}
+                      onSelect={goTo}
+                      orientation="horizontal"
+                      actions={thumbnailActions}
+                    />
+                  </div>
+                  <InspectorPanel />
+                  <DesignPanel open={designOpen} onClose={() => setDesignOpen(false)} />
                 </div>
-                <InspectorPanel />
-                <DesignPanel open={designOpen} onClose={() => setDesignOpen(false)} />
+                {import.meta.env.DEV && (
+                  <NotesDrawer
+                    slideId={slideId}
+                    index={index}
+                    total={pageCount}
+                    initial={slide.notes?.[index]}
+                  />
+                )}
               </div>
             </DesignProvider>
           )}
@@ -460,6 +553,178 @@ export function Slide() {
   );
 }
 
+const RAIL_WIDTH_STORAGE_KEY = 'open-slide:thumbnail-rail-width';
+const DEFAULT_RAIL_WIDTH = 264;
+const MIN_RAIL_WIDTH = 200;
+const MAX_RAIL_WIDTH = 480;
+
+function readStoredRailWidth(): number {
+  if (typeof window === 'undefined') return DEFAULT_RAIL_WIDTH;
+  const raw = window.localStorage.getItem(RAIL_WIDTH_STORAGE_KEY);
+  const parsed = raw == null ? Number.NaN : Number(raw);
+  if (!Number.isFinite(parsed)) return DEFAULT_RAIL_WIDTH;
+  return Math.min(MAX_RAIL_WIDTH, Math.max(MIN_RAIL_WIDTH, parsed));
+}
+
+function ResizableRail(props: {
+  pages: SlideModule['default'];
+  design?: SlideModule['design'];
+  current: number;
+  onSelect: (i: number) => void;
+  onReorder?: (from: number, to: number) => void;
+  actions?: ThumbnailActions;
+}) {
+  const t = useLocale();
+  const [width, setWidth] = useState<number>(readStoredRailWidth);
+  const [resizing, setResizing] = useState(false);
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    window.localStorage.setItem(RAIL_WIDTH_STORAGE_KEY, String(width));
+  }, [width]);
+
+  useEffect(() => {
+    if (!resizing) return;
+    const prev = {
+      cursor: document.body.style.cursor,
+      userSelect: document.body.style.userSelect,
+    };
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    return () => {
+      document.body.style.cursor = prev.cursor;
+      document.body.style.userSelect = prev.userSelect;
+    };
+  }, [resizing]);
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = { startX: e.clientX, startWidth: width };
+    setResizing(true);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragRef.current) return;
+    const delta = e.clientX - dragRef.current.startX;
+    const next = Math.min(
+      MAX_RAIL_WIDTH,
+      Math.max(MIN_RAIL_WIDTH, dragRef.current.startWidth + delta),
+    );
+    setWidth(next);
+  };
+
+  const onPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    dragRef.current = null;
+    setResizing(false);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = e.shiftKey ? 32 : 8;
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      e.stopPropagation();
+      setWidth((w) => Math.max(MIN_RAIL_WIDTH, w - step));
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      e.stopPropagation();
+      setWidth((w) => Math.min(MAX_RAIL_WIDTH, w + step));
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      e.stopPropagation();
+      setWidth(DEFAULT_RAIL_WIDTH);
+    }
+  };
+
+  return (
+    <div className="relative hidden shrink-0 md:block" style={{ width }}>
+      <ThumbnailRail width={width} {...props} />
+      {/* biome-ignore lint/a11y/useSemanticElements: focusable resize handle (splitter pattern), not a static <hr> */}
+      <div
+        role="separator"
+        aria-orientation="vertical"
+        aria-label={t.thumbnailRail.resizeRail}
+        aria-valuenow={width}
+        aria-valuemin={MIN_RAIL_WIDTH}
+        aria-valuemax={MAX_RAIL_WIDTH}
+        tabIndex={0}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onPointerCancel={onPointerUp}
+        onKeyDown={onKeyDown}
+        onDoubleClick={() => setWidth(DEFAULT_RAIL_WIDTH)}
+        className={cn(
+          'group/resize absolute inset-y-0 right-0 z-20 w-1.5 translate-x-1/2 cursor-col-resize touch-none outline-none',
+          'focus-visible:bg-brand/20',
+        )}
+      >
+        <span
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-brand opacity-0 transition-opacity',
+            'group-hover/resize:opacity-100 group-focus-visible/resize:opacity-100',
+            resizing && 'opacity-100',
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+function AgentConnectedBadge() {
+  const t = useLocale();
+  const connected = useAgentSocketConnected();
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="ml-1 flex shrink-0 cursor-help items-center gap-1.5 rounded-[3px] border border-hairline bg-card px-1.5 py-0.5 text-[10.5px] text-foreground/85 outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+          >
+            <span aria-hidden className="relative flex size-1.5 items-center justify-center">
+              {connected ? (
+                <>
+                  <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60" />
+                  <span className="relative inline-flex size-1.5 rounded-full bg-emerald-500" />
+                </>
+              ) : (
+                <span className="relative inline-flex size-1.5 rounded-full bg-rose-500" />
+              )}
+            </span>
+            {connected ? t.slide.agentConnected : t.slide.agentDisconnected}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" align="start" className="max-w-[280px] leading-relaxed">
+          {connected ? t.slide.agentConnectedTooltip : t.slide.agentDisconnectedTooltip}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+function SelectionReporter() {
+  const { selected } = useInspector();
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    const selection = selected
+      ? {
+          line: selected.line,
+          column: selected.column,
+          tagName: selected.anchor.tagName.toLowerCase(),
+          text: (selected.anchor.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 120),
+        }
+      : null;
+    import.meta.hot.send('open-slide:current', { selection });
+  }, [selected]);
+  return null;
+}
+
 function SlideWheelNavigation({
   targetRef,
   onPrev,

package/src/app/routes/themes.tsx

@@ -0,0 +1,34 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { useLocale } from '@/lib/use-locale';
+import { FolderIconChip } from '../components/sidebar/folder-item';
+import { ThemeDetail } from '../components/themes/theme-detail';
+import { ThemesGallery } from '../components/themes/themes-gallery';
+import { themes as themeRegistry } from '../lib/themes';
+
+export function ThemesGalleryPage() {
+  const navigate = useNavigate();
+  const t = useLocale();
+  return (
+    <>
+      <header className="mb-8 md:mb-12">
+        <div className="flex flex-wrap items-center gap-3">
+          <FolderIconChip icon={{ type: 'emoji', value: '🎨' }} className="size-7 text-2xl" />
+          <h1 className="font-heading text-[32px] font-semibold leading-[1.05] tracking-[-0.025em] md:text-[44px]">
+            {t.themes.title}
+          </h1>
+          <span className="folio ml-1 self-end pb-2">
+            {themeRegistry.length.toString().padStart(2, '0')}
+          </span>
+        </div>
+      </header>
+      <ThemesGallery onOpen={(id) => navigate(`/themes/${encodeURIComponent(id)}`)} />
+    </>
+  );
+}
+
+export function ThemeDetailPage() {
+  const { themeId } = useParams<{ themeId: string }>();
+  const navigate = useNavigate();
+  if (!themeId) return null;
+  return <ThemeDetail themeId={themeId} onBack={() => navigate('/themes')} />;
+}

package/src/app/virtual.d.ts

@@ -1,6 +1,7 @@
 declare module 'virtual:open-slide/slides' {
   import type { SlideModule } from './lib/sdk';
   export const slideIds: string[];
+  export const slideThemes: Record<string, string>;
   export function loadSlide(id: string): Promise<SlideModule>;
 }
 
@@ -26,3 +27,22 @@ declare module 'virtual:open-slide/folders' {
   const manifest: FoldersManifest;
   export default manifest;
 }
+
+declare module 'virtual:open-slide/themes' {
+  import type { DesignSystem } from './lib/design';
+  import type { Page } from './lib/sdk';
+
+  export type ThemeMeta = {
+    id: string;
+    name: string;
+    description: string;
+    body: string;
+    hasDemo: boolean;
+  };
+
+  export const themes: ThemeMeta[];
+  export function loadThemeDemo(id: string): Promise<{
+    default: Page[];
+    design?: DesignSystem;
+  }>;
+}

package/src/locale/en.ts

@@ -38,6 +38,7 @@ export const en: Locale = {
   home: {
     appTitle: 'open-slide',
     draft: 'Draft',
+    themes: 'Themes',
     folders: 'Folders',
     newFolder: 'New folder',
     folderName: 'Folder name',
@@ -51,9 +52,8 @@ export const en: Locale = {
     nothingMatchesPrefix: 'Nothing matches ',
     nothingMatchesSuffix: ' in this folder.',
     noSlidesYet: 'No slides yet',
-    createSlideHintPrefix: 'Create ',
-    createSlideHintMid: ' that ',
-    createSlideHintSuffix: '.',
+    createSlideHintPrefix: 'Run ',
+    createSlideHintSuffix: ' in your agent to scaffold one.',
     folderEmptyTitle: '{name} is empty',
     folderEmptyHint: 'Drag a slide from Draft into this folder in the sidebar.',
     slideActions: 'Slide actions',
@@ -83,6 +83,12 @@ export const en: Locale = {
   slide: {
     home: 'Home',
     backToHome: 'Back to home',
+    agentConnected: 'Agent connected',
+    agentConnectedTooltip:
+      'The dev server is publishing your current slide and inspector selection to your agent. Ask "this slide" or "this element" in chat and it will resolve. Disappears in production builds.',
+    agentDisconnected: 'Agent disconnected',
+    agentDisconnectedTooltip:
+      'Lost connection to the dev server, so your agent can no longer see the current slide or inspector selection. Restart the dev server to restore the connection.',
     download: 'Download',
     exportAsHtml: 'Export as HTML',
     exportAsPdf: 'Export as PDF',
@@ -156,6 +162,12 @@ export const en: Locale = {
   inspector: {
     inspect: 'Inspect',
     deselect: 'Deselect',
+    agentWatching: 'Agent is watching',
+    agentWatchingTooltip:
+      'Your agent already sees the selected element via the dev server — just ask it in chat. Leave comments here only when you want to queue a few before asking.',
+    agentNotWatching: 'Agent not watching',
+    agentNotWatchingTooltip:
+      'Lost connection to the dev server, so your agent can no longer see the selected element. Restart the dev server to restore the connection.',
     contentSection: 'Content',
     typographySection: 'Typography',
     colorSection: 'Color',
@@ -192,10 +204,10 @@ export const en: Locale = {
     cropFitContain: 'Fit',
     cropApply: 'Apply',
     cropResetAria: 'Reset crop',
-    noteForAgent: 'Note for the agent',
-    noteAgentPlaceholder: 'Describe a change for the agent…',
-    noteShortcutHint: '⌘↵ to send',
-    addNote: 'Add note',
+    leaveComment: 'Leave a comment',
+    commentPlaceholder: 'Describe a change for the agent…',
+    commentShortcutHint: '⌘↵ to add',
+    addComment: 'Add comment',
     unsavedChanges: {
       one: '{count} unsaved change',
       other: '{count} unsaved changes',
@@ -288,6 +300,14 @@ export const en: Locale = {
   thumbnailRail: {
     pages: 'Pages',
     goToPageAria: 'Go to page {n}',
+    duplicatePage: 'Duplicate',
+    deletePage: 'Delete',
+    pageActionsAria: 'Page {n} actions',
+    toastDuplicated: 'Duplicated page {n}',
+    toastDeleted: 'Deleted page {n}',
+    toastDuplicateFailed: 'Could not duplicate page',
+    toastDeleteFailed: 'Could not delete page',
+    resizeRail: 'Resize thumbnail rail',
   },
 
   pdfToast: {
@@ -309,4 +329,38 @@ export const en: Locale = {
     prevAria: 'Previous page',
     nextAria: 'Next page',
   },
+
+  imagePlaceholder: {
+    dropOverlay: 'Drop image to use here',
+    uploading: 'Uploading…',
+    uploadFailed: "Couldn't upload image",
+  },
+
+  notesDrawer: {
+    toggle: 'Notes',
+    pageLabel: 'page {n}/{total}',
+    placeholder: 'Write speaker notes for this slide…',
+    statusSaving: 'Saving…',
+    statusSaved: 'Saved',
+    statusError: 'Save failed: {msg}',
+  },
+
+  themes: {
+    title: 'Themes',
+    noThemesTitle: 'No themes yet',
+    noThemesHintPrefix: 'Run ',
+    noThemesHintSuffix: ' to author one — a markdown file under themes/ plus a sibling demo slide.',
+    noDemoYet: 'No demo yet',
+    noDemoHintPrefix: 'Re-run ',
+    noDemoHintSuffix: ' for this theme to generate a preview slide.',
+    backToGallery: 'Back to themes',
+    pageOf: 'page {n}/{total}',
+    nextPageAria: 'Next page',
+    prevPageAria: 'Previous page',
+    openThemeAria: 'Open theme {name}',
+    usedBy: 'Slides using this theme',
+    usedByEmpty: 'No slides use this theme yet.',
+    expandPromptAria: 'Expand prompt',
+    collapsePromptAria: 'Collapse prompt',
+  },
 };