@open-slide/core 1.2.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

@@ -67,6 +67,12 @@ type Row =
     }
   | {
       kind: 'draft';
+    }
+  | {
+      kind: 'themes';
+    }
+  | {
+      kind: 'assets';
     };
 
 export function FolderItem({
@@ -89,7 +95,9 @@ export function FolderItem({
   const slideDragActive = useSlideDragActive();
   const t = useLocale();
 
-  const isSlideDrag = (e: React.DragEvent) => e.dataTransfer.types.includes(SLIDE_DND_MIME);
+  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) => {
     if (!isSlideDrag(e)) return;
     dragDepth.current += 1;
@@ -106,6 +114,7 @@ export function FolderItem({
     if (dragDepth.current === 0) setDragOver(false);
   };
   const handleDrop = (e: React.DragEvent) => {
+    if (!acceptsSlideDrop) return;
     const slideId = e.dataTransfer.getData(SLIDE_DND_MIME);
     dragDepth.current = 0;
     setDragOver(false);
@@ -114,9 +123,22 @@ export function FolderItem({
     onDropSlide(slideId);
   };
 
-  const icon =
-    row.kind === 'draft' ? ({ type: 'emoji', value: '📝' } satisfies FolderIcon) : row.folder.icon;
-  const label = row.kind === 'draft' ? t.home.draft : row.folder.name;
+  const icon: FolderIcon =
+    row.kind === 'draft'
+      ? { type: 'emoji', value: '📝' }
+      : row.kind === 'themes'
+        ? { type: 'emoji', value: '🎨' }
+        : row.kind === 'assets'
+          ? { type: 'emoji', value: '🗂️' }
+          : row.folder.icon;
+  const label =
+    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;
@@ -133,7 +155,7 @@ export function FolderItem({
         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',
-        slideDragActive && !dragOver && 'ring-1 ring-foreground/10',
+        slideDragActive && acceptsSlideDrop && !dragOver && 'ring-1 ring-foreground/10',
         dragOver &&
           'bg-brand/10 text-foreground ring-1 ring-brand ring-offset-1 ring-offset-sidebar motion-safe:scale-[1.01] motion-safe:transition-transform',
       )}

package/src/app/components/sidebar/mobile-pill.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import type { FolderIcon } from '../../lib/sdk';
+import { FolderIconChip } from './folder-item';
+
+export function MobileFolderPill({
+  icon,
+  label,
+  count,
+  active,
+  onClick,
+}: {
+  icon: FolderIcon;
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'flex shrink-0 items-center gap-1.5 rounded-[5px] border px-2.5 py-1 text-[11.5px] font-medium transition-colors',
+        active
+          ? 'border-foreground/40 bg-foreground text-background'
+          : 'border-border bg-card text-muted-foreground hover:text-foreground',
+      )}
+    >
+      <FolderIconChip icon={icon} className="size-3.5 text-sm" />
+      <span className="max-w-[8rem] truncate">{label}</span>
+      <span className="folio nums">{count.toString().padStart(2, '0')}</span>
+    </button>
+  );
+}

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

@@ -9,10 +9,14 @@ import { FolderIconChip, FolderItem } from './folder-item';
 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,
@@ -24,6 +28,8 @@ 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;
@@ -111,6 +117,20 @@ export function Sidebar({
           onSelect={() => onSelect(DRAFT_ID)}
           onDropSlide={onDropToDraft}
         />
+        <FolderItem
+          row={{ kind: 'themes' }}
+          count={themesCount}
+          selected={selectedId === THEMES_ID}
+          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/components/themes/theme-detail.tsx

@@ -0,0 +1,300 @@
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import type { SlideModule } from '../../lib/sdk';
+import { loadSlide, slidesByTheme } from '../../lib/slides';
+import { loadThemeDemo, type ThemeDemoModule, themes } from '../../lib/themes';
+import { SlideCanvas } from '../slide-canvas';
+
+export function ThemeDetail({ themeId, onBack }: { themeId: string; onBack: () => void }) {
+  const t = useLocale();
+  const theme = useMemo(() => themes.find((th) => th.id === themeId), [themeId]);
+  const [demo, setDemo] = useState<ThemeDemoModule | null>(null);
+  const [pageIndex, setPageIndex] = useState(0);
+
+  useEffect(() => {
+    setPageIndex(0);
+    setDemo(null);
+    if (!theme?.hasDemo) return;
+    let cancelled = false;
+    loadThemeDemo(theme.id)
+      .then((mod) => {
+        if (!cancelled) setDemo(mod);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [theme]);
+
+  const pages = demo?.default ?? [];
+  const totalPages = pages.length;
+  const usedBySlideIds = useMemo(() => (theme ? slidesByTheme(theme.id) : []), [theme]);
+
+  const promptRef = useRef<HTMLPreElement>(null);
+  const [promptExpanded, setPromptExpanded] = useState(false);
+  const [promptOverflows, setPromptOverflows] = useState(false);
+
+  const themeBody = theme?.body;
+  useEffect(() => {
+    setPromptExpanded(false);
+    const el = promptRef.current;
+    if (!el || !themeBody) return;
+    setPromptOverflows(el.scrollHeight > PROMPT_COLLAPSED_PX + 8);
+  }, [themeBody]);
+
+  useEffect(() => {
+    if (totalPages <= 1) return;
+    const onKey = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement | null)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+        setPageIndex((i) => Math.min(totalPages - 1, i + 1));
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+        setPageIndex((i) => Math.max(0, i - 1));
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [totalPages]);
+
+  if (!theme) {
+    return (
+      <div className="px-8 py-12">
+        <Button variant="ghost" size="sm" onClick={onBack}>
+          <ChevronLeft className="size-4" />
+          {t.themes.backToGallery}
+        </Button>
+      </div>
+    );
+  }
+
+  const Current = pages[pageIndex];
+
+  return (
+    <div className="flex flex-col gap-6 md:gap-8">
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm" onClick={onBack} className="-ml-2">
+          <ChevronLeft className="size-4" />
+          {t.themes.backToGallery}
+        </Button>
+      </div>
+
+      <header className="flex flex-wrap items-baseline gap-3">
+        <h2 className="font-heading text-[26px] font-semibold leading-[1.05] tracking-[-0.025em] md:text-[32px]">
+          {theme.name}
+        </h2>
+        {theme.description ? (
+          <p className="basis-full text-[13px] leading-relaxed text-muted-foreground">
+            {theme.description}
+          </p>
+        ) : null}
+      </header>
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] lg:gap-8">
+        <div className="flex min-w-0 flex-col gap-6">
+          <div className="flex flex-col gap-3">
+            <div className="relative aspect-video overflow-hidden rounded-[8px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04]">
+              {!theme.hasDemo ? (
+                <NoDemoLargeState />
+              ) : !demo ? (
+                <div className="grid h-full w-full place-items-center text-[11px] tracking-[0.16em] uppercase text-muted-foreground/60">
+                  {t.common.loading}
+                </div>
+              ) : Current ? (
+                <SlideCanvas flat freezeMotion design={demo.design}>
+                  <Current />
+                </SlideCanvas>
+              ) : null}
+            </div>
+
+            {totalPages > 1 ? (
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  aria-label={t.themes.prevPageAria}
+                  disabled={pageIndex === 0}
+                  onClick={() => setPageIndex((i) => Math.max(0, i - 1))}
+                  className="flex size-8 items-center justify-center rounded-[6px] border border-border bg-card text-foreground transition-colors hover:bg-muted disabled:opacity-40"
+                >
+                  <ChevronLeft className="size-4" />
+                </button>
+                <span className="folio">
+                  {format(t.themes.pageOf, { n: pageIndex + 1, total: totalPages })}
+                </span>
+                <button
+                  type="button"
+                  aria-label={t.themes.nextPageAria}
+                  disabled={pageIndex === totalPages - 1}
+                  onClick={() => setPageIndex((i) => Math.min(totalPages - 1, i + 1))}
+                  className="flex size-8 items-center justify-center rounded-[6px] border border-border bg-card text-foreground transition-colors hover:bg-muted disabled:opacity-40"
+                >
+                  <ChevronRight className="size-4" />
+                </button>
+              </div>
+            ) : null}
+          </div>
+
+          <div className="relative">
+            <pre
+              ref={promptRef}
+              style={
+                promptOverflows && !promptExpanded ? { maxHeight: PROMPT_COLLAPSED_PX } : undefined
+              }
+              className={cn(
+                'w-full rounded-[8px] border border-hairline bg-card p-4 font-mono text-[11.5px] leading-relaxed text-foreground/90',
+                promptOverflows && !promptExpanded ? 'overflow-hidden' : 'overflow-auto',
+              )}
+            >
+              {renderBodyWithSwatches(theme.body)}
+            </pre>
+            {promptOverflows && !promptExpanded ? (
+              <button
+                type="button"
+                aria-label={t.themes.expandPromptAria}
+                onClick={() => setPromptExpanded(true)}
+                className="absolute inset-x-0 bottom-0 flex h-24 items-end justify-center rounded-b-[8px] bg-gradient-to-t from-card via-card/85 to-transparent pb-3 text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <ChevronDown className="size-4" />
+              </button>
+            ) : null}
+            {promptOverflows && promptExpanded ? (
+              <div className="mt-2 flex justify-center">
+                <button
+                  type="button"
+                  aria-label={t.themes.collapsePromptAria}
+                  onClick={() => setPromptExpanded(false)}
+                  className="flex size-8 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <ChevronDown className="size-4 rotate-180" />
+                </button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <aside className="flex min-w-0 flex-col gap-4">
+          <div className="flex flex-wrap items-baseline gap-3">
+            <span className="eyebrow">{t.themes.usedBy}</span>
+            {usedBySlideIds.length > 0 ? (
+              <span className="folio">{usedBySlideIds.length.toString().padStart(2, '0')}</span>
+            ) : null}
+          </div>
+          {usedBySlideIds.length === 0 ? (
+            <p className="text-[12.5px] leading-relaxed text-muted-foreground">
+              {t.themes.usedByEmpty}
+            </p>
+          ) : (
+            <ul className="flex flex-col gap-5">
+              {usedBySlideIds.map((id) => (
+                <li key={id}>
+                  <ThemeSlideCard id={id} />
+                </li>
+              ))}
+            </ul>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function ThemeSlideCard({ id }: { id: string }) {
+  const t = useLocale();
+  const [slide, setSlide] = useState<SlideModule | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadSlide(id)
+      .then((mod) => {
+        if (!cancelled) setSlide(mod);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [id]);
+
+  const FirstPage = slide?.default[0];
+  const displayTitle = slide?.meta?.title ?? id;
+
+  return (
+    <Link to={`/s/${id}`} className="group block focus-visible:outline-none">
+      <div className="relative aspect-video overflow-hidden rounded-[6px] border border-hairline bg-card shadow-edge ring-1 ring-foreground/[0.04] group-hover:shadow-floating group-hover:ring-foreground/20 motion-safe:transition-[box-shadow,--tw-ring-color] motion-safe:duration-200">
+        {FirstPage ? (
+          <div className="h-full w-full motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]">
+            <SlideCanvas flat freezeMotion design={slide?.design}>
+              <FirstPage />
+            </SlideCanvas>
+          </div>
+        ) : (
+          <div className="grid h-full w-full place-items-center text-[10px] tracking-[0.16em] uppercase text-muted-foreground/60">
+            {t.common.loading}
+          </div>
+        )}
+      </div>
+      <div className="mt-2.5">
+        <h3 className="min-w-0 truncate font-heading text-[13px] font-medium tracking-tight">
+          {displayTitle}
+        </h3>
+        <p className="mt-0.5 truncate font-mono text-[10.5px] text-muted-foreground/80">{id}</p>
+      </div>
+    </Link>
+  );
+}
+
+const PROMPT_COLLAPSED_PX = 320;
+
+const HEX_RE = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})\b/g;
+
+function renderBodyWithSwatches(body: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null = HEX_RE.exec(body);
+  let key = 0;
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      out.push(<Fragment key={`t${key}`}>{body.slice(lastIndex, match.index)}</Fragment>);
+    }
+    const hex = match[0];
+    out.push(
+      <span
+        key={`s${key}`}
+        aria-hidden
+        className="mr-[0.25em] -translate-y-[0.1em] inline-block size-[0.85em] rounded-[2px] align-middle ring-1 ring-foreground/15"
+        style={{ background: hex }}
+      />,
+    );
+    out.push(<Fragment key={`h${key}`}>{hex}</Fragment>);
+    lastIndex = match.index + hex.length;
+    key += 1;
+    match = HEX_RE.exec(body);
+  }
+  if (lastIndex < body.length) {
+    out.push(<Fragment key={`t${key}`}>{body.slice(lastIndex)}</Fragment>);
+  }
+  return out;
+}
+
+function NoDemoLargeState() {
+  const t = useLocale();
+  return (
+    <div className="grid h-full w-full place-items-center bg-muted/40 px-8 text-center">
+      <div className="max-w-sm">
+        <p className="font-heading text-[15px] font-semibold tracking-tight">
+          {t.themes.noDemoYet}
+        </p>
+        <p className="mt-1.5 text-[12.5px] leading-relaxed text-muted-foreground">
+          {t.themes.noDemoHintPrefix}
+          <code className="rounded-[4px] bg-card px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
+            /create-theme
+          </code>
+          {t.themes.noDemoHintSuffix}
+        </p>
+      </div>
+    </div>
+  );
+}