@open-slide/core 1.3.0 → 1.4.0

package/src/app/components/player.tsx

@@ -32,6 +32,12 @@ type Props = {
   allowExit?: boolean;
   controls?: boolean;
   slideId?: string;
+  /**
+   * When true, the Player enters the browser Fullscreen API on mount.
+   * When false, it renders as a window-sized overlay (viewport-filling)
+   * without entering fullscreen. Defaults to true for back-compat.
+   */
+  fullscreen?: boolean;
 };
 
 export function Player({
@@ -43,8 +49,9 @@ export function Player({
   allowExit = true,
   controls = false,
   slideId,
+  fullscreen = true,
 }: Props) {
-  const rootRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
   // 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.
@@ -60,6 +67,12 @@ export function Player({
   const [laser, setLaser] = useState(false);
   const [keyboardDriven, setKeyboardDriven] = useState(false);
   const [startedAt] = useState(() => Date.now());
+  const [windowed, setWindowed] = useState(!fullscreen);
+  // Mirror windowed into a ref so the fullscreenchange listener can read the
+  // latest value without re-binding — exits from window mode must not call
+  // onExit, but exits initiated by the browser (Esc in fullscreen) must.
+  const windowedRef = useRef(windowed);
+  windowedRef.current = windowed;
 
   const canPrev = index > 0;
   const canNext = index < pages.length - 1;
@@ -90,6 +103,7 @@ export function Player({
   });
 
   useEffect(() => {
+    if (windowed) return;
     const el = rootRef.current;
     if (!el) return;
     if (document.fullscreenElement !== el) {
@@ -98,17 +112,21 @@ export function Player({
     return () => {
       if (document.fullscreenElement) document.exitFullscreen?.().catch(() => {});
     };
-  }, []);
+  }, [windowed]);
 
   useEffect(() => {
     if (!allowExit) return;
     const onFsChange = () => {
-      if (!document.fullscreenElement) onExit();
+      if (!document.fullscreenElement && !windowedRef.current) onExit();
     };
     document.addEventListener('fullscreenchange', onFsChange);
     return () => document.removeEventListener('fullscreenchange', onFsChange);
   }, [onExit, allowExit]);
 
+  const toggleFullscreen = useCallback(() => {
+    setWindowed((w) => !w);
+  }, []);
+
   // 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.
@@ -271,7 +289,7 @@ export function Player({
     <div
       ref={setRoot}
       className={cn(
-        'relative flex h-dvh w-screen items-center justify-center bg-black',
+        'fixed inset-0 flex items-center justify-center overflow-hidden bg-black',
         controls && 'select-none',
         controls && (hideCursor ? 'cursor-none' : 'cursor-default'),
       )}
@@ -310,12 +328,14 @@ export function Player({
             blackout={blackout}
             laser={laser}
             allowExit={allowExit}
+            windowed={windowed}
             onPrev={goPrev}
             onNext={goNext}
             onOverview={() => setOverviewOpen(true)}
             onBlackout={(mode) => setBlackout((c) => (c === mode ? null : mode))}
             onLaser={() => setLaser((v) => !v)}
             onPresenter={() => slideId && openPresenterWindow(slideId)}
+            onToggleFullscreen={toggleFullscreen}
             onHelp={() => setHelpOpen(true)}
             onExit={onExit}
           />
@@ -334,7 +354,7 @@ export function Player({
   );
 }
 
-function openPresenterWindow(slideId: string) {
+export function openPresenterWindow(slideId: string) {
   if (typeof window === 'undefined') return;
   const url = `/s/${encodeURIComponent(slideId)}/presenter`;
   window.open(url, `open-slide-presenter-${slideId}`, 'popup,width=1280,height=800');

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

@@ -5,6 +5,8 @@ import {
   Grid2x2,
   Keyboard,
   LogOut,
+  Maximize,
+  Minimize,
   MonitorSpeaker,
   Square,
   Sun,
@@ -24,12 +26,14 @@ type Props = {
   blackout: 'black' | 'white' | null;
   laser: boolean;
   allowExit: boolean;
+  windowed: boolean;
   onPrev: () => void;
   onNext: () => void;
   onOverview: () => void;
   onBlackout: (mode: 'black' | 'white') => void;
   onLaser: () => void;
   onPresenter: () => void;
+  onToggleFullscreen: () => void;
   onHelp: () => void;
   onExit: () => void;
   /**
@@ -48,12 +52,14 @@ export function PresentControlBar({
   blackout,
   laser,
   allowExit,
+  windowed,
   onPrev,
   onNext,
   onOverview,
   onBlackout,
   onLaser,
   onPresenter,
+  onToggleFullscreen,
   onHelp,
   onExit,
   tooltipContainer,
@@ -123,6 +129,12 @@ export function PresentControlBar({
             <BarButton label={t.present.presenterAria} onClick={onPresenter}>
               <MonitorSpeaker className="size-4" />
             </BarButton>
+            <BarButton
+              label={windowed ? t.present.enterFullscreenAria : t.present.exitFullscreenAria}
+              onClick={onToggleFullscreen}
+            >
+              {windowed ? <Maximize className="size-4" /> : <Minimize className="size-4" />}
+            </BarButton>
             <BarButton label={t.present.helpAria} onClick={onHelp}>
               <Keyboard className="size-4" />
             </BarButton>

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

@@ -70,6 +70,9 @@ type Row =
     }
   | {
       kind: 'themes';
+    }
+  | {
+      kind: 'assets';
     };
 
 export function FolderItem({
@@ -92,7 +95,7 @@ export function FolderItem({
   const slideDragActive = useSlideDragActive();
   const t = useLocale();
 
-  const acceptsSlideDrop = row.kind !== 'themes';
+  const acceptsSlideDrop = row.kind !== 'themes' && row.kind !== 'assets';
   const isSlideDrag = (e: React.DragEvent) =>
     acceptsSlideDrop && e.dataTransfer.types.includes(SLIDE_DND_MIME);
   const handleDragEnter = (e: React.DragEvent) => {
@@ -125,9 +128,17 @@ export function FolderItem({
       ? { type: 'emoji', value: '📝' }
       : row.kind === 'themes'
         ? { type: 'emoji', value: '🎨' }
-        : row.folder.icon;
+        : row.kind === 'assets'
+          ? { type: 'emoji', value: '🗂️' }
+          : row.folder.icon;
   const label =
-    row.kind === 'draft' ? t.home.draft : row.kind === 'themes' ? t.home.themes : row.folder.name;
+    row.kind === 'draft'
+      ? t.home.draft
+      : row.kind === 'themes'
+        ? t.home.themes
+        : row.kind === 'assets'
+          ? t.home.assets
+          : row.folder.name;
 
   const commitRename = () => {
     if (row.kind !== 'folder') return;

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

@@ -10,11 +10,13 @@ import { IconPicker, PRESET_COLORS } from './icon-picker';
 
 export const DRAFT_ID = 'draft';
 export const THEMES_ID = '__themes__';
+export const ASSETS_ID = '__assets__';
 
 export function Sidebar({
   folders,
   countFor,
   themesCount,
+  assetsCount,
   selectedId,
   onSelect,
   onCreate,
@@ -27,6 +29,7 @@ export function Sidebar({
   folders: Folder[];
   countFor: (folderId: string | null) => number;
   themesCount: number;
+  assetsCount: number;
   selectedId: string;
   onSelect: (id: string) => void;
   onCreate: (name: string, icon: FolderIcon) => Promise<Folder> | undefined;
@@ -121,6 +124,13 @@ export function Sidebar({
           onSelect={() => onSelect(THEMES_ID)}
           onDropSlide={() => {}}
         />
+        <FolderItem
+          row={{ kind: 'assets' }}
+          count={assetsCount}
+          selected={selectedId === ASSETS_ID}
+          onSelect={() => onSelect(ASSETS_ID)}
+          onDropSlide={() => {}}
+        />
       </div>
 
       <div className="mt-5 flex items-center gap-2 px-4 pb-1.5">

package/src/app/lib/export-pdf.ts

@@ -65,6 +65,12 @@ const PRINT_STYLES = `
 }
 `;
 
+export function isSafari(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent;
+  return /Safari/.test(ua) && !/Chrome|Chromium|Edg|OPR|Firefox/.test(ua);
+}
+
 export type PdfExportProgress = {
   phase: 'processing' | 'printing' | 'done';
   /** Number of pages whose intro animations have finished (0..total). */

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

@@ -1,8 +1,16 @@
 import { useCallback } from 'react';
 
 export type EditOp =
-  | { kind: 'set-style'; key: string; value: string | null }
+  | { kind: 'set-style'; key: string; value: string | null; prevText?: string }
   | { kind: 'set-text'; value: string; prevText?: string }
+  | {
+      kind: 'set-text-range-style';
+      start: number;
+      end: number;
+      key: string;
+      value: string | null;
+      prevText?: string;
+    }
   | { kind: 'set-attr-asset'; attr: string; assetPath: string; previewUrl: string }
   | { kind: 'replace-placeholder-with-image'; assetPath: string };
 

package/src/app/lib/slides.ts

@@ -15,3 +15,10 @@ export function slidesByTheme(themeId: string): string[] {
 export async function loadSlide(id: string): Promise<SlideModule> {
   return load(id);
 }
+
+export function slideChangeIncludes(data: unknown, slideId: string): boolean {
+  if (!data || typeof data !== 'object') return false;
+  const payload = data as { slideId?: unknown; slideIds?: unknown };
+  if (payload.slideId === slideId) return true;
+  return Array.isArray(payload.slideIds) && payload.slideIds.includes(slideId);
+}

package/src/app/lib/use-slide-module.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { SlideModule } from './sdk';
+import { loadSlide, slideChangeIncludes } from './slides';
+
+export function useSlideModule(slideId: string) {
+  const [slide, setSlide] = useState<SlideModule | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const loadSeqRef = useRef(0);
+
+  const reload = useCallback(
+    (reset: boolean) => {
+      const seq = ++loadSeqRef.current;
+      if (reset) setSlide(null);
+      setError(null);
+      loadSlide(slideId)
+        .then((mod) => {
+          if (seq === loadSeqRef.current) setSlide(mod);
+        })
+        .catch((e) => {
+          if (seq === loadSeqRef.current) setError(String(e?.message ?? e));
+        });
+    },
+    [slideId],
+  );
+
+  useEffect(() => {
+    reload(true);
+  }, [reload]);
+
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    let cancelled = false;
+    const handler = (data: unknown) => {
+      if (slideChangeIncludes(data, slideId)) {
+        queueMicrotask(() => {
+          if (!cancelled) reload(false);
+        });
+      }
+    };
+    import.meta.hot.on('open-slide:slide-changed', handler);
+    return () => {
+      cancelled = true;
+      import.meta.hot?.off('open-slide:slide-changed', handler);
+    };
+  }, [slideId, reload]);
+
+  return { slide, error, reload };
+}

package/src/app/routes/assets.tsx

@@ -0,0 +1,9 @@
+import { AssetView } from '../components/asset-view';
+
+export function AssetsPage() {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <AssetView slideId={null} />
+    </div>
+  );
+}

package/src/app/routes/home-shell.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
+import { useAssets } from '@/lib/assets';
 import { useFolders } from '@/lib/folders';
 import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
 import { MobileFolderPill } from '../components/sidebar/mobile-pill';
-import { DRAFT_ID, Sidebar, THEMES_ID } from '../components/sidebar/sidebar';
+import { ASSETS_ID, DRAFT_ID, Sidebar, THEMES_ID } from '../components/sidebar/sidebar';
 import type { FoldersManifest } from '../lib/sdk';
 import { slideIds } from '../lib/slides';
 import { themes as themeRegistry } from '../lib/themes';
@@ -25,6 +27,7 @@ export type HomeOutletContext = {
 
 function pathToSelectedId(pathname: string, search: URLSearchParams): string {
   if (pathname === '/themes' || pathname.startsWith('/themes/')) return THEMES_ID;
+  if (pathname === '/assets') return ASSETS_ID;
   return search.get('f') ?? DRAFT_ID;
 }
 
@@ -48,12 +51,16 @@ export function HomeShell() {
   const selectFolder = useCallback(
     (id: string) => {
       if (id === THEMES_ID) navigate('/themes', { replace: true });
+      else if (id === ASSETS_ID) navigate('/assets', { replace: true });
       else if (id === DRAFT_ID) navigate('/', { replace: true });
       else navigate(`/?f=${encodeURIComponent(id)}`, { replace: true });
     },
     [navigate],
   );
 
+  const { assets: globalAssets } = useAssets('@global');
+  const isAssetsRoute = location.pathname === '/assets';
+
   const { draftSlides, slidesByFolder } = useMemo(() => {
     const byFolder: Record<string, string[]> = {};
     const draft: string[] = [];
@@ -111,6 +118,7 @@ export function HomeShell() {
           folders={manifest.folders}
           countFor={countFor}
           themesCount={themeRegistry.length}
+          assetsCount={globalAssets.length}
           selectedId={selectedId}
           onSelect={selectFolder}
           onCreate={(name, icon) => create(name, icon)}
@@ -151,6 +159,13 @@ export function HomeShell() {
               active={selectedId === THEMES_ID}
               onClick={() => selectFolder(THEMES_ID)}
             />
+            <MobileFolderPill
+              icon={{ type: 'emoji', value: '🗂️' }}
+              label={t.home.assets}
+              count={globalAssets.length}
+              active={selectedId === ASSETS_ID}
+              onClick={() => selectFolder(ASSETS_ID)}
+            />
             {manifest.folders.map((f) => (
               <MobileFolderPill
                 key={f.id}
@@ -164,7 +179,13 @@ export function HomeShell() {
           </div>
         </div>
 
-        <div className="mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12">
+        <div
+          className={cn(
+            isAssetsRoute
+              ? 'flex min-h-0 flex-1 flex-col'
+              : 'mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12',
+          )}
+        >
           <Outlet context={ctx} />
         </div>
       </div>

package/src/app/routes/presenter.tsx

@@ -9,14 +9,12 @@ import {
   usePresenterChannel,
 } from '../components/present/use-presenter-channel';
 import { SlideCanvas } from '../components/slide-canvas';
-import type { SlideModule } from '../lib/sdk';
 import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
-import { loadSlide } from '../lib/slides';
+import { useSlideModule } from '../lib/use-slide-module';
 
 export function Presenter() {
   const { slideId = '' } = useParams();
-  const [slide, setSlide] = useState<SlideModule | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const { slide, error } = useSlideModule(slideId);
 
   // Presenter view is a passive mirror of the projection window. It only
   // tracks the index it last heard about; navigation buttons send commands
@@ -29,22 +27,6 @@ export function Presenter() {
   const requestedRef = useRef(false);
   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 channel = usePresenterChannel(slideId, (msg) => {
     if (msg.type === 'state') {
       setState(msg.state);

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';
@@ -33,45 +44,28 @@ 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(() => {
@@ -221,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') {
@@ -231,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 (
@@ -315,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'}
       />
     );
   }
@@ -417,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(
@@ -460,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>