@open-slide/core 1.1.0 → 1.3.0

package/src/app/components/notes-drawer.tsx

@@ -0,0 +1,117 @@
+import { ChevronDown, ChevronUp, NotebookPen } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { PANEL_TRANSITION_MS, usePanelMount } from '@/components/panel/panel-shell';
+import { useNotes } from '@/lib/inspector/use-notes';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+const STORAGE_KEY = 'open-slide:notes-drawer-open';
+const DRAWER_CONTENT_H = 166;
+
+type Props = {
+  slideId: string;
+  index: number;
+  total: number;
+  initial: string | undefined;
+};
+
+export function NotesDrawer({ slideId, index, total, initial }: Props) {
+  const t = useLocale();
+  const [open, setOpen] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.localStorage.getItem(STORAGE_KEY) === '1';
+  });
+  const { value, setValue, status, flush } = useNotes(slideId, index, initial);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const { mounted, animVisible } = usePanelMount(open);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    window.localStorage.setItem(STORAGE_KEY, open ? '1' : '0');
+  }, [open]);
+
+  const statusLabel = (() => {
+    switch (status.kind) {
+      case 'saving':
+        return t.notesDrawer.statusSaving;
+      case 'saved':
+        return t.notesDrawer.statusSaved;
+      case 'error':
+        return format(t.notesDrawer.statusError, { msg: status.message });
+      default:
+        return '';
+    }
+  })();
+
+  return (
+    <aside
+      data-notes-drawer
+      className="hidden shrink-0 border-t border-hairline bg-sidebar/85 backdrop-blur md:block"
+    >
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((o) => {
+            if (o) void flush();
+            return !o;
+          });
+        }}
+        className="flex h-9 w-full items-center gap-2 px-3 text-[12px] text-foreground/80 hover:bg-muted/40"
+        aria-expanded={open}
+      >
+        <NotebookPen className="size-3.5 text-muted-foreground" />
+        <span className="font-medium">{t.notesDrawer.toggle}</span>
+        <span className="font-mono text-[11px] text-muted-foreground">
+          {format(t.notesDrawer.pageLabel, { n: index + 1, total })}
+        </span>
+        <span
+          className={cn(
+            'ml-auto truncate text-[11px]',
+            status.kind === 'error' ? 'text-destructive' : 'text-muted-foreground',
+          )}
+          aria-live="polite"
+        >
+          {statusLabel}
+        </span>
+        {open ? (
+          <ChevronDown className="size-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronUp className="size-3.5 text-muted-foreground" />
+        )}
+      </button>
+      {mounted && (
+        <div
+          className="overflow-hidden border-t border-hairline transition-[height] ease-out"
+          style={{
+            height: animVisible ? DRAWER_CONTENT_H : 0,
+            transitionDuration: `${PANEL_TRANSITION_MS}ms`,
+          }}
+        >
+          <div className="px-3 py-2">
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onBlur={() => {
+                void flush();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  e.preventDefault();
+                  textareaRef.current?.blur();
+                } else if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                  e.preventDefault();
+                  void flush();
+                }
+              }}
+              placeholder={t.notesDrawer.placeholder}
+              rows={6}
+              spellCheck
+              className="block h-[150px] w-full resize-none rounded-[6px] border border-border bg-card px-3 py-2 text-[13px] leading-relaxed text-card-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+            />
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}

package/src/app/components/player.tsx

@@ -61,6 +61,9 @@ export function Player({
   const [keyboardDriven, setKeyboardDriven] = useState(false);
   const [startedAt] = useState(() => Date.now());
 
+  const canPrev = index > 0;
+  const canNext = index < pages.length - 1;
+
   const goPrev = useCallback(() => {
     if (index > 0) onIndexChange(index - 1);
   }, [index, onIndexChange]);
@@ -73,8 +76,8 @@ export function Player({
   useWheelPageNavigation({
     ref: rootRef,
     enabled: !overlayActive,
-    canPrev: index > 0,
-    canNext: index < pages.length - 1,
+    canPrev,
+    canNext,
     onPrev: goPrev,
     onNext: goNext,
   });
@@ -269,7 +272,8 @@ export function Player({
       ref={setRoot}
       className={cn(
         'relative flex h-dvh w-screen items-center justify-center bg-black',
-        hideCursor && 'cursor-none',
+        controls && 'select-none',
+        controls && (hideCursor ? 'cursor-none' : 'cursor-default'),
       )}
     >
       <SlideCanvas flat design={design}>
@@ -280,15 +284,15 @@ export function Player({
         type="button"
         aria-label="Previous page"
         onClick={goPrev}
-        disabled={index === 0}
-        className="absolute inset-y-0 left-0 z-10 w-[30%]"
+        disabled={!canPrev}
+        className={cn('absolute inset-y-0 left-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
       />
       <button
         type="button"
         aria-label="Next page"
         onClick={goNext}
-        disabled={index === pages.length - 1}
-        className="absolute inset-y-0 right-0 z-10 w-[30%]"
+        disabled={!canNext}
+        className={cn('absolute inset-y-0 right-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
       />
 
       {controls && (

package/src/app/components/present/overview-grid.tsx

@@ -96,9 +96,9 @@ export function PresentOverviewGrid({ pages, design, open, current, onClose, onS
       </div>
       <div ref={gridRef} className="min-h-0 flex-1 overflow-auto px-8 pb-8">
         <div
-          className="grid gap-5"
+          className="grid justify-center gap-5"
           style={{
-            gridTemplateColumns: `repeat(auto-fill, minmax(${THUMB_W}px, 1fr))`,
+            gridTemplateColumns: `repeat(auto-fill, ${THUMB_W}px)`,
           }}
         >
           {pages.map((PageComp, i) => {

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

@@ -67,6 +67,9 @@ type Row =
     }
   | {
       kind: 'draft';
+    }
+  | {
+      kind: 'themes';
     };
 
 export function FolderItem({
@@ -89,7 +92,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';
+  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 +111,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 +120,14 @@ 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.folder.icon;
+  const label =
+    row.kind === 'draft' ? t.home.draft : row.kind === 'themes' ? t.home.themes : row.folder.name;
 
   const commitRename = () => {
     if (row.kind !== 'folder') return;
@@ -133,7 +144,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,12 @@ import { FolderIconChip, FolderItem } from './folder-item';
 import { IconPicker, PRESET_COLORS } from './icon-picker';
 
 export const DRAFT_ID = 'draft';
+export const THEMES_ID = '__themes__';
 
 export function Sidebar({
   folders,
   countFor,
+  themesCount,
   selectedId,
   onSelect,
   onCreate,
@@ -24,6 +26,7 @@ export function Sidebar({
 }: {
   folders: Folder[];
   countFor: (folderId: string | null) => number;
+  themesCount: number;
   selectedId: string;
   onSelect: (id: string) => void;
   onCreate: (name: string, icon: FolderIcon) => Promise<Folder> | undefined;
@@ -111,6 +114,13 @@ export function Sidebar({
           onSelect={() => onSelect(DRAFT_ID)}
           onDropSlide={onDropToDraft}
         />
+        <FolderItem
+          row={{ kind: 'themes' }}
+          count={themesCount}
+          selected={selectedId === THEMES_ID}
+          onSelect={() => onSelect(THEMES_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>
+  );
+}