@open-slide/core 1.2.0 → 1.4.0

package/src/app/routes/slide.tsx

@@ -1,5 +1,16 @@
 import config from 'virtual:open-slide/config';
-import { ChevronLeft, Download, FileCode2, FileText, Loader2, Pencil, Play } from 'lucide-react';
+import {
+  ChevronDown,
+  ChevronLeft,
+  Download,
+  FileCode2,
+  FileText,
+  Loader2,
+  Maximize,
+  MonitorSpeaker,
+  Pencil,
+  Play,
+} from 'lucide-react';
 import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
@@ -26,51 +37,35 @@ import {
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useFolders } from '@/lib/folders';
+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 { openPresenterWindow, Player } from '../components/player';
 import { SlideCanvas } from '../components/slide-canvas';
 import { type ThumbnailActions, ThumbnailRail } from '../components/thumbnail-rail';
 import { exportSlideAsHtml } from '../lib/export-html';
-import { exportSlideAsPdf } from '../lib/export-pdf';
+import { exportSlideAsPdf, isSafari } from '../lib/export-pdf';
 import { remapNotesSessionCacheAfterReorder } from '../lib/inspector/use-notes';
 import type { SlideModule } from '../lib/sdk';
-import { loadSlide } from '../lib/slides';
+import { useSlideModule } from '../lib/use-slide-module';
 
 const { showSlideUi, showSlideBrowser, allowHtmlDownload } = config.build;
 
 export function Slide() {
   const { slideId = '' } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [slide, setSlide] = useState<SlideModule | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [playing, setPlaying] = useState(false);
+  const { slide, error } = useSlideModule(slideId);
+  const [playMode, setPlayMode] = useState<'window' | 'fullscreen' | null>(null);
   const [exporting, setExporting] = useState(false);
   const [designOpen, setDesignOpen] = useState(false);
   const { renameSlide } = useFolders();
   const slideViewportRef = useRef<HTMLElement>(null);
   const t = useLocale();
 
-  useEffect(() => {
-    let cancelled = false;
-    setSlide(null);
-    setError(null);
-    loadSlide(slideId)
-      .then((mod) => {
-        if (!cancelled) setSlide(mod);
-      })
-      .catch((e) => {
-        if (!cancelled) setError(String(e?.message ?? e));
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [slideId]);
-
   const modulePages = useMemo(() => slide?.default ?? [], [slide]);
   const [pages, setPages] = useState<typeof modulePages>(modulePages);
   useEffect(() => {
@@ -220,7 +215,7 @@ export function Slide() {
   );
 
   useEffect(() => {
-    if (playing) return;
+    if (playMode) return;
     const onKey = (e: KeyboardEvent) => {
       if (e.target instanceof HTMLElement && e.target.matches('input, textarea')) return;
       if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown') {
@@ -230,12 +225,12 @@ export function Slide() {
         e.preventDefault();
         goTo(index - 1);
       } else if (e.key === 'f' || e.key === 'F') {
-        setPlaying(true);
+        setPlayMode('fullscreen');
       }
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [index, goTo, playing]);
+  }, [index, goTo, playMode]);
 
   if (error) {
     return (
@@ -314,16 +309,17 @@ export function Slide() {
     );
   }
 
-  if (playing) {
+  if (playMode) {
     return (
       <Player
         pages={pages}
         design={slide.design}
         index={index}
         onIndexChange={goTo}
-        onExit={() => setPlaying(false)}
+        onExit={() => setPlayMode(null)}
         controls
         slideId={slideId}
+        fullscreen={playMode === 'fullscreen'}
       />
     );
   }
@@ -416,6 +412,10 @@ export function Slide() {
                       disabled={exporting}
                       onSelect={async () => {
                         if (!slide || exporting) return;
+                        if (isSafari()) {
+                          toast.error(t.slide.pdfExportSafariUnsupported, { duration: 5000 });
+                          return;
+                        }
                         setExporting(true);
                         const toastId = `pdf-export-${slideId}`;
                         toast.custom(
@@ -459,18 +459,52 @@ export function Slide() {
               {view === 'slides' && <InspectToggleButton />}
               <span aria-hidden className="mx-0.5 hidden h-5 w-px bg-hairline md:block" />
               {view === 'slides' && (
-                <Button
-                  size="sm"
-                  variant="brand"
-                  onClick={() => setPlaying(true)}
-                  className="px-2.5 md:px-3"
-                >
-                  <Play className="size-3.5 fill-current" />
-                  <span className="hidden md:inline">{t.slide.present}</span>
-                  <kbd className="ml-1 hidden rounded-[3px] bg-brand-foreground/15 px-1 font-mono text-[9.5px] tracking-[0.04em] md:inline">
-                    F
-                  </kbd>
-                </Button>
+                <div className="inline-flex items-stretch">
+                  <Button
+                    size="sm"
+                    variant="brand"
+                    onClick={() => setPlayMode('fullscreen')}
+                    className="rounded-r-none px-2.5 md:px-3"
+                  >
+                    <Play className="size-3.5 fill-current" />
+                    <span className="hidden md:inline">{t.slide.present}</span>
+                    <kbd className="ml-1 hidden rounded-[3px] bg-brand-foreground/15 px-1 font-mono text-[9.5px] tracking-[0.04em] md:inline">
+                      F
+                    </kbd>
+                  </Button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      type="button"
+                      aria-label={t.slide.presentMenuAria}
+                      title={t.slide.presentMenuAria}
+                      className={cn(
+                        buttonVariants({ variant: 'brand', size: 'sm' }),
+                        'rounded-l-none px-1.5 shadow-[inset_1px_0_0_oklch(0_0_0/0.12),inset_0_1px_0_oklch(1_0_0/0.18),0_1px_0_oklch(0_0_0/0.16)]',
+                      )}
+                    >
+                      <ChevronDown className="size-3.5" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="min-w-[200px]">
+                      <DropdownMenuItem onSelect={() => setPlayMode('window')}>
+                        <Play />
+                        {t.slide.presentInWindow}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onSelect={() => setPlayMode('fullscreen')}>
+                        <Maximize />
+                        {t.slide.presentFullscreen}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onSelect={() => {
+                          if (slideId) openPresenterWindow(slideId);
+                          setPlayMode('window');
+                        }}
+                      >
+                        <MonitorSpeaker />
+                        {t.slide.presentPresenter}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
               )}
             </div>
           </header>
@@ -483,19 +517,18 @@ export function Slide() {
             <DesignProvider slideId={slideId}>
               <div className="flex min-h-0 flex-1 flex-col">
                 <div className="flex min-h-0 flex-1 flex-col md:flex-row">
-                  <div className="hidden w-[16.5rem] shrink-0 md:block">
-                    <ThumbnailRail
-                      pages={pages}
-                      design={slide.design}
-                      current={index}
-                      onSelect={goTo}
-                      onReorder={import.meta.env.DEV ? reorderPage : undefined}
-                      actions={thumbnailActions}
-                    />
-                  </div>
+                  <ResizableRail
+                    pages={pages}
+                    design={slide.design}
+                    current={index}
+                    onSelect={goTo}
+                    onReorder={import.meta.env.DEV ? reorderPage : undefined}
+                    actions={thumbnailActions}
+                  />
                   <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
@@ -553,8 +586,132 @@ 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>
@@ -564,14 +721,20 @@ function AgentConnectedBadge() {
             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">
-              <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" />
+              {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>
-            {t.slide.agentConnected}
+            {connected ? t.slide.agentConnected : t.slide.agentDisconnected}
           </button>
         </TooltipTrigger>
         <TooltipContent side="bottom" align="start" className="max-w-[280px] leading-relaxed">
-          {t.slide.agentConnectedTooltip}
+          {connected ? t.slide.agentConnectedTooltip : t.slide.agentDisconnectedTooltip}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

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,8 @@ export const en: Locale = {
   home: {
     appTitle: 'open-slide',
     draft: 'Draft',
+    themes: 'Themes',
+    assets: 'Assets',
     folders: 'Folders',
     newFolder: 'New folder',
     folderName: 'Folder name',
@@ -51,9 +53,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',
@@ -85,12 +86,21 @@ export const en: Locale = {
     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.',
+      'The current slide and inspector selection are synced to your agent in real time.',
+    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',
     pdfExportFailed: 'PDF export failed',
+    pdfExportSafariUnsupported:
+      'Export as PDF is not supported on Safari. Please try a Chromium-based browser instead.',
     present: 'Present',
+    presentMenuAria: 'Present options',
+    presentInWindow: 'Play',
+    presentFullscreen: 'Fullscreen',
+    presentPresenter: 'Presenter mode',
     slidesTab: 'Slides',
     assetsTab: 'Assets',
     renameSlide: 'Rename slide',
@@ -134,6 +144,8 @@ export const en: Locale = {
     whiteoutAria: 'White screen (W)',
     laserAria: 'Laser pointer (L)',
     presenterAria: 'Presenter view (P)',
+    enterFullscreenAria: 'Enter fullscreen',
+    exitFullscreenAria: 'Exit fullscreen',
     helpAria: 'Keyboard shortcuts (?)',
     exitAria: 'Exit (Esc)',
     elapsedTime: 'Elapsed time',
@@ -160,8 +172,10 @@ export const en: Locale = {
     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.',
+    agentWatchingTooltip: 'The selected element is synced to your agent in real time.',
+    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',
@@ -245,6 +259,8 @@ export const en: Locale = {
     devOnlyMessage: 'Asset management is only available in dev mode.',
     sectionAria: 'Slide assets',
     eyebrow: 'Assets',
+    scopeSlide: 'This slide',
+    scopeGlobal: 'Global',
     fileCount: { one: '{count} file', other: '{count} files' },
     searchLogos: 'Search logos',
     upload: 'Upload',
@@ -260,7 +276,7 @@ export const en: Locale = {
     renameMenuItem: 'Rename',
     deleteMenuItem: 'Delete',
     conflictTitle: 'File already exists',
-    conflictDescription: "{name} is already in this slide's assets folder.",
+    conflictDescription: '{name} is already in the assets folder.',
     conflictReplace: 'Replace',
     conflictRenameCopy: 'Rename copy',
     deleteAssetTitle: 'Delete asset',
@@ -301,6 +317,7 @@ export const en: Locale = {
     toastDeleted: 'Deleted page {n}',
     toastDuplicateFailed: 'Could not duplicate page',
     toastDeleteFailed: 'Could not delete page',
+    resizeRail: 'Resize thumbnail rail',
   },
 
   pdfToast: {
@@ -323,6 +340,12 @@ export const en: Locale = {
     nextAria: 'Next page',
   },
 
+  imagePlaceholder: {
+    dropOverlay: 'Drop image to use here',
+    uploading: 'Uploading…',
+    uploadFailed: "Couldn't upload image",
+  },
+
   notesDrawer: {
     toggle: 'Notes',
     pageLabel: 'page {n}/{total}',
@@ -331,4 +354,23 @@ export const en: Locale = {
     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',
+  },
 };