@open-slide/core 1.0.6 → 1.2.0

package/src/app/lib/design-presets.ts

@@ -0,0 +1,94 @@
+import { type DesignSystem, defaultDesign } from './design';
+
+const SANS_SYSTEM = '-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif';
+const SANS_INTER = '"Inter", system-ui, sans-serif';
+const SANS_HELV = '"Helvetica Neue", Helvetica, Arial, sans-serif';
+const SERIF_GEORGIA = 'Georgia, "Times New Roman", serif';
+const SERIF_TIMES = '"Times New Roman", Times, serif';
+const MONO_SF = '"SF Mono", "JetBrains Mono", Menlo, monospace';
+
+export const designPresets: DesignSystem[] = [
+  defaultDesign,
+  {
+    palette: { bg: '#0f1115', text: '#f5f3ee', accent: '#7cc4ff' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_SYSTEM },
+    typeScale: { hero: 192, body: 32 },
+    radius: 6,
+  },
+  {
+    palette: { bg: '#eef1f4', text: '#1c2733', accent: '#ff6a5b' },
+    fonts: { display: SANS_HELV, body: SANS_SYSTEM },
+    typeScale: { hero: 156, body: 30 },
+    radius: 8,
+  },
+  {
+    palette: { bg: '#fdf6e3', text: '#073642', accent: '#b58900' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_INTER },
+    typeScale: { hero: 144, body: 28 },
+    radius: 14,
+  },
+  {
+    palette: { bg: '#ede2cc', text: '#3a2a1a', accent: '#2f6e3a' },
+    fonts: { display: SERIF_TIMES, body: SERIF_GEORGIA },
+    typeScale: { hero: 168, body: 32 },
+    radius: 4,
+  },
+  {
+    palette: { bg: '#ffffff', text: '#0a0a0a', accent: '#e11d48' },
+    fonts: { display: SANS_HELV, body: SANS_HELV },
+    typeScale: { hero: 200, body: 28 },
+    radius: 0,
+  },
+  {
+    palette: { bg: '#fde9d9', text: '#3a1f3d', accent: '#f97316' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_SYSTEM },
+    typeScale: { hero: 184, body: 36 },
+    radius: 24,
+  },
+  {
+    palette: { bg: '#e9f5ee', text: '#0f3324', accent: '#ec4899' },
+    fonts: { display: SANS_INTER, body: SANS_INTER },
+    typeScale: { hero: 160, body: 32 },
+    radius: 16,
+  },
+  {
+    palette: { bg: '#0a0a0a', text: '#f3edd9', accent: '#eab308' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_HELV },
+    typeScale: { hero: 200, body: 32 },
+    radius: 2,
+  },
+  {
+    palette: { bg: '#ece2f5', text: '#2a1c4a', accent: '#facc15' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_SYSTEM },
+    typeScale: { hero: 168, body: 34 },
+    radius: 20,
+  },
+  {
+    palette: { bg: '#101418', text: '#a7f3d0', accent: '#fbbf24' },
+    fonts: { display: MONO_SF, body: MONO_SF },
+    typeScale: { hero: 144, body: 24 },
+    radius: 4,
+  },
+  {
+    palette: { bg: '#fafafa', text: '#0a0a0a', accent: '#facc15' },
+    fonts: { display: SANS_HELV, body: SANS_HELV },
+    typeScale: { hero: 220, body: 32 },
+    radius: 0,
+  },
+];
+
+function pickRandom(): DesignSystem {
+  const idx = Math.floor(Math.random() * designPresets.length);
+  return designPresets[idx] ?? defaultDesign;
+}
+
+export function shuffleDesign(current?: DesignSystem | null): DesignSystem {
+  if (designPresets.length === 0) return defaultDesign;
+  if (designPresets.length === 1) return designPresets[0] ?? defaultDesign;
+  const currentJson = current ? JSON.stringify(current) : null;
+  for (let i = 0; i < 8; i++) {
+    const pick = pickRandom();
+    if (JSON.stringify(pick) !== currentJson) return pick;
+  }
+  return pickRandom();
+}

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

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export type NoteSaveStatus =
+  | { kind: 'idle' }
+  | { kind: 'saving' }
+  | { kind: 'saved' }
+  | { kind: 'error'; message: string };
+
+const DEBOUNCE_MS = 600;
+
+type Target = { slideId: string; index: number };
+
+// HMR is suppressed for our writes, so the cached slide module's `notes`
+// stays stale across navigation. Cache last-saved text per target so
+// switching slides and back doesn't surface the old value.
+const sessionCache = new Map<string, string>();
+const cacheKey = (slideId: string, index: number) => `${slideId}:${index}`;
+
+// Remap the per-target cache after a reorder. `order[i]` is the original
+// page index that lands at new position `i`, matching the contract used by
+// the `/__slides/:id/reorder` endpoint.
+export function remapNotesSessionCacheAfterReorder(slideId: string, order: number[]): void {
+  const prev = new Map<number, string>();
+  for (let i = 0; i < order.length; i++) {
+    const cached = sessionCache.get(cacheKey(slideId, i));
+    if (cached !== undefined) prev.set(i, cached);
+    sessionCache.delete(cacheKey(slideId, i));
+  }
+  for (let newIdx = 0; newIdx < order.length; newIdx++) {
+    const oldIdx = order[newIdx];
+    const text = prev.get(oldIdx);
+    if (text !== undefined) sessionCache.set(cacheKey(slideId, newIdx), text);
+  }
+}
+
+export function useNotes(slideId: string, index: number, initial: string | undefined) {
+  const initialText = sessionCache.get(cacheKey(slideId, index)) ?? initial ?? '';
+  const [value, setValueState] = useState(initialText);
+  const [status, setStatus] = useState<NoteSaveStatus>({ kind: 'idle' });
+
+  const lastSavedRef = useRef(initialText);
+  const dirtyRef = useRef(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const inflightRef = useRef<AbortController | null>(null);
+  const targetRef = useRef<Target>({ slideId, index });
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const cancelTimer = useCallback(() => {
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const persist = useCallback(async (target: Target, text: string) => {
+    inflightRef.current?.abort();
+    const ctl = new AbortController();
+    inflightRef.current = ctl;
+    setStatus({ kind: 'saving' });
+    try {
+      const res = await fetch('/__notes', {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ slideId: target.slideId, index: target.index, text }),
+        signal: ctl.signal,
+      });
+      const body = (await res.json().catch(() => ({}))) as { error?: string };
+      if (!res.ok) throw new Error(body.error ?? `PUT /__notes → ${res.status}`);
+      sessionCache.set(cacheKey(target.slideId, target.index), text);
+      if (inflightRef.current !== ctl) return;
+      lastSavedRef.current = text;
+      dirtyRef.current = false;
+      setStatus({ kind: 'saved' });
+    } catch (err) {
+      if ((err as { name?: string }).name === 'AbortError') return;
+      setStatus({ kind: 'error', message: String((err as Error).message ?? err) });
+    } finally {
+      if (inflightRef.current === ctl) inflightRef.current = null;
+    }
+  }, []);
+
+  const flush = useCallback(async () => {
+    cancelTimer();
+    if (!dirtyRef.current) return;
+    const target = targetRef.current;
+    await persist(target, valueRef.current);
+  }, [cancelTimer, persist]);
+
+  // When the (slideId, index) target changes, flush pending edits for the
+  // previous target before adopting the new initial text.
+  useEffect(() => {
+    const prev = targetRef.current;
+    const targetChanged = prev.slideId !== slideId || prev.index !== index;
+    if (targetChanged && dirtyRef.current) {
+      cancelTimer();
+      const pending = valueRef.current;
+      if (lastSavedRef.current !== pending) void persist(prev, pending);
+    }
+    targetRef.current = { slideId, index };
+    cancelTimer();
+    setValueState(initialText);
+    lastSavedRef.current = initialText;
+    dirtyRef.current = false;
+    setStatus({ kind: 'idle' });
+  }, [slideId, index, initialText, persist, cancelTimer]);
+
+  useEffect(() => {
+    return () => {
+      cancelTimer();
+      inflightRef.current?.abort();
+    };
+  }, [cancelTimer]);
+
+  const setValue = useCallback(
+    (next: string) => {
+      setValueState(next);
+      dirtyRef.current = next !== lastSavedRef.current;
+      cancelTimer();
+      if (!dirtyRef.current) {
+        setStatus({ kind: 'idle' });
+        return;
+      }
+      const target = targetRef.current;
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        void persist(target, next);
+      }, DEBOUNCE_MS);
+    },
+    [persist, cancelTimer],
+  );
+
+  return { value, setValue, status, flush };
+}

package/src/app/routes/home.tsx

@@ -27,7 +27,8 @@ import type { Folder, FolderIcon, SlideModule } from '../lib/sdk';
 import { loadSlide, slideIds } from '../lib/slides';
 
 export function Home() {
-  const { manifest, create, update, remove, assign, renameSlide, deleteSlide } = useFolders();
+  const { manifest, loading, create, update, remove, assign, renameSlide, deleteSlide } =
+    useFolders();
   const [searchParams, setSearchParams] = useSearchParams();
   const selectedId = searchParams.get('f') ?? DRAFT_ID;
   const t = useLocale();
@@ -168,23 +169,27 @@ export function Home() {
               <h1 className="font-heading text-[32px] font-semibold leading-[1.05] tracking-[-0.025em] md:text-[44px]">
                 {title}
               </h1>
-              <span className="folio ml-1 self-end pb-2">
-                {(isSearching ? filteredSlides.length : visibleSlides.length)
-                  .toString()
-                  .padStart(2, '0')}
-                {isSearching && (
-                  <span className="opacity-40">
-                    /{visibleSlides.length.toString().padStart(2, '0')}
-                  </span>
-                )}
-              </span>
+              {!loading && (
+                <span className="folio ml-1 self-end pb-2">
+                  {(isSearching ? filteredSlides.length : visibleSlides.length)
+                    .toString()
+                    .padStart(2, '0')}
+                  {isSearching && (
+                    <span className="opacity-40">
+                      /{visibleSlides.length.toString().padStart(2, '0')}
+                    </span>
+                  )}
+                </span>
+              )}
               <div className="ml-auto w-full md:w-auto">
                 <SearchInput value={query} onChange={setQuery} />
               </div>
             </div>
           </header>
 
-          {visibleSlides.length === 0 ? (
+          {loading ? (
+            <HomeLoading />
+          ) : visibleSlides.length === 0 ? (
             <EmptyState isDraft={isDraft} folderName={selectedFolder?.name} />
           ) : filteredSlides.length === 0 ? (
             <NoResultsState query={query} onClear={() => setQuery('')} />
@@ -271,6 +276,23 @@ function SearchInput({ value, onChange }: { value: string; onChange: (value: str
   );
 }
 
+function HomeLoading() {
+  const t = useLocale();
+  return (
+    <div className="grid place-items-center px-8 py-24 text-muted-foreground">
+      <div className="flex flex-col items-center gap-4">
+        <div className="relative h-px w-56 overflow-hidden bg-hairline">
+          <span
+            aria-hidden
+            className="line-loader-bar absolute inset-y-[-0.5px] left-0 w-1/4 bg-foreground"
+          />
+        </div>
+        <span className="eyebrow text-[11.5px]">{t.slide.loadingEyebrow}</span>
+      </div>
+    </div>
+  );
+}
+
 function NoResultsState({ query, onClear }: { query: string; onClear: () => void }) {
   const t = useLocale();
   return (

package/src/app/routes/presenter.tsx

@@ -100,11 +100,11 @@ export function Presenter() {
 
   if (error) {
     return (
-      <div className="grid h-dvh place-items-center bg-zinc-950 p-8 text-zinc-300">
+      <div className="dark grid h-dvh place-items-center bg-background p-8 text-foreground">
         <div className="max-w-md text-center">
-          <span className="eyebrow text-red-300/80">{t.common.loadFailed}</span>
+          <span className="eyebrow text-destructive/80">{t.common.loadFailed}</span>
           <h2 className="mt-2 font-heading text-xl font-semibold">{t.common.failedToLoadSlide}</h2>
-          <pre className="mt-4 overflow-auto rounded-[6px] border border-white/10 bg-black/40 p-4 text-left text-[11.5px] whitespace-pre-wrap">
+          <pre className="mt-4 overflow-auto rounded-[6px] border border-border bg-card p-4 text-left text-[11.5px] whitespace-pre-wrap shadow-edge">
             {error}
           </pre>
         </div>
@@ -114,15 +114,15 @@ export function Presenter() {
 
   if (!slide) {
     return (
-      <div className="grid h-dvh place-items-center bg-zinc-950 text-zinc-400">
+      <div className="dark grid h-dvh place-items-center bg-background text-muted-foreground">
         <div className="flex flex-col items-center gap-4">
-          <div className="relative h-px w-56 overflow-hidden bg-white/10">
+          <div className="relative h-px w-56 overflow-hidden bg-border">
             <span
               aria-hidden
-              className="line-loader-bar absolute inset-y-[-0.5px] left-0 w-1/4 bg-zinc-100"
+              className="line-loader-bar absolute inset-y-[-0.5px] left-0 w-1/4 bg-foreground"
             />
           </div>
-          <div className="text-[12.5px]">{format(t.presenter.loadingSlide, { slideId })}</div>
+          <div className="text-[11.5px]">{format(t.presenter.loadingSlide, { slideId })}</div>
         </div>
       </div>
     );
@@ -141,7 +141,7 @@ export function Presenter() {
   const NextPage = hasNext ? pages[nextIndex] : null;
 
   return (
-    <div className="flex h-dvh w-screen flex-col overflow-hidden bg-zinc-950 text-zinc-100">
+    <div className="dark flex h-dvh w-screen flex-col overflow-hidden bg-background text-foreground">
       <PresenterTopBar
         index={index}
         total={total}
@@ -154,7 +154,7 @@ export function Presenter() {
         {/* Now-showing */}
         <section className="flex min-h-0 flex-col gap-3">
           <SectionLabel>{t.presenter.nowShowing}</SectionLabel>
-          <div className="relative min-h-0 flex-1 overflow-hidden rounded-[8px] bg-black ring-1 ring-white/10">
+          <div className="relative min-h-0 flex-1 overflow-hidden rounded-[8px] bg-black ring-1 ring-border">
             <SlideCanvas flat design={slide.design}>
               <CurrentPage />
             </SlideCanvas>
@@ -177,7 +177,7 @@ export function Presenter() {
           <div className="flex flex-col gap-2">
             <SectionLabel>{hasNext ? t.presenter.upNext : t.presenter.lastSlide}</SectionLabel>
             <div
-              className="relative w-full overflow-hidden rounded-[6px] bg-black ring-1 ring-white/10"
+              className="relative w-full overflow-hidden rounded-[8px] bg-black ring-1 ring-border"
               style={{ aspectRatio: `${CANVAS_WIDTH}/${CANVAS_HEIGHT}` }}
             >
               {NextPage ? (
@@ -185,7 +185,7 @@ export function Presenter() {
                   <NextPage />
                 </SlideCanvas>
               ) : (
-                <div className="grid h-full place-items-center text-[11.5px] text-white/40">
+                <div className="grid h-full place-items-center text-[11.5px] text-muted-foreground">
                   {t.presenter.endOfDeck}
                 </div>
               )}
@@ -194,13 +194,13 @@ export function Presenter() {
 
           <div className="flex min-h-0 flex-1 flex-col gap-2">
             <SectionLabel>{t.presenter.speakerNotes}</SectionLabel>
-            <div className="min-h-0 flex-1 overflow-y-auto rounded-[6px] border border-white/10 bg-black/40 p-3 text-[13.5px] leading-relaxed whitespace-pre-wrap text-white/85">
+            <div className="min-h-0 flex-1 overflow-y-auto rounded-[6px] border border-border bg-card p-3 text-[13.5px] leading-relaxed whitespace-pre-wrap text-card-foreground">
               {note?.trim() ? (
                 note
               ) : (
-                <span className="text-white/40">
+                <span className="text-muted-foreground">
                   {t.presenter.noNotesPrefix}
-                  <code className="rounded-[3px] bg-white/10 px-1 py-0.5 font-mono text-[12px]">
+                  <code className="rounded-[3px] bg-muted px-1 py-0.5 font-mono text-[12px]">
                     export const notes = […]
                   </code>
                   {t.presenter.noNotesSuffix}
@@ -241,7 +241,7 @@ function PresenterTopBar({
 }) {
   const t = useLocale();
   return (
-    <header className="flex shrink-0 items-center justify-between border-b border-white/10 px-6 py-3">
+    <header className="flex h-12 shrink-0 items-center justify-between border-b border-hairline px-6">
       <div className="flex items-baseline gap-3">
         <span className="eyebrow text-white/45">{t.presenter.eyebrow}</span>
         <span className="truncate font-heading text-[14px] font-semibold tracking-tight">
@@ -257,9 +257,9 @@ function PresenterTopBar({
         <Clock />
         <ElapsedClock startedAt={startedAt} />
         <div className="font-mono text-[18px] tabular-nums">
-          <span className="text-white">{(index + 1).toString().padStart(2, '0')}</span>
-          <span className="text-white/35"> / </span>
-          <span className="text-white/55">{total.toString().padStart(2, '0')}</span>
+          <span className="text-foreground">{(index + 1).toString().padStart(2, '0')}</span>
+          <span className="text-foreground/30"> / </span>
+          <span className="text-muted-foreground">{total.toString().padStart(2, '0')}</span>
         </div>
       </div>
     </header>
@@ -285,7 +285,7 @@ function PresenterBottomBar({
 }) {
   const t = useLocale();
   return (
-    <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-white/10 px-6 py-3">
+    <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-hairline px-6 py-3">
       <div className="flex items-center gap-2">
         <Button variant="outline" onClick={onPrev} disabled={index === 0}>
           <ChevronLeft className="size-4" /> {t.presenter.prev}
@@ -352,15 +352,15 @@ function PresenterJumpControl({
         value={value}
         onChange={(e) => setValue(e.target.value)}
         placeholder={(current + 1).toString()}
-        className="h-8 w-20 rounded-[5px] border border-white/15 bg-black/40 px-2 font-mono text-[12px] tabular-nums outline-none focus-visible:border-white/30"
+        className="h-8 w-20 rounded-[5px] border border-border bg-card px-2 font-mono text-[12px] tabular-nums outline-none focus-visible:border-foreground/30"
       />
-      <span className="font-mono text-[11px] text-white/45">/ {total}</span>
+      <span className="font-mono text-[11px] text-muted-foreground">/ {total}</span>
     </form>
   );
 }
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
-  return <span className="eyebrow text-white/45">{children}</span>;
+  return <span className="eyebrow">{children}</span>;
 }
 
 function Clock() {
@@ -373,7 +373,7 @@ function Clock() {
   return (
     <time
       title={t.presenter.currentTime}
-      className="font-mono text-[12px] tabular-nums text-white/55"
+      className="font-mono text-[12px] tabular-nums text-muted-foreground"
     >
       {now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
     </time>
@@ -396,7 +396,10 @@ function ElapsedClock({ startedAt }: { startedAt: number }) {
       ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
       : `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
   return (
-    <time title={t.presenter.elapsed} className="font-mono text-[18px] tabular-nums text-white">
+    <time
+      title={t.presenter.elapsed}
+      className="font-mono text-[18px] tabular-nums text-foreground"
+    >
       {text}
     </time>
   );