@open-slide/core 1.6.0 → 1.8.0

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

@@ -5,6 +5,7 @@ import { ThemeToggle } from '@/components/theme-toggle';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { Folder, FolderIcon } from '@/lib/sdk';
 import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
 import { FolderIconChip, FolderItem } from './folder-item';
 import { IconPicker, PRESET_COLORS } from './icon-picker';
 
@@ -12,6 +13,8 @@ export const DRAFT_ID = 'draft';
 export const THEMES_ID = '__themes__';
 export const ASSETS_ID = '__assets__';
 
+export const FOLDER_DND_MIME = 'application/x-folder-id';
+
 export function Sidebar({
   folders,
   countFor,
@@ -25,6 +28,7 @@ export function Sidebar({
   onDelete,
   onDropToFolder,
   onDropToDraft,
+  onReorder,
 }: {
   folders: Folder[];
   countFor: (folderId: string | null) => number;
@@ -38,7 +42,23 @@ export function Sidebar({
   onDelete: (id: string) => void;
   onDropToFolder: (folderId: string, slideId: string) => void;
   onDropToDraft: (slideId: string) => void;
+  onReorder: (ids: string[]) => void;
 }) {
+  const [dragId, setDragId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<{ id: string; before: boolean } | null>(null);
+
+  const finishReorder = (toId: string, before: boolean) => {
+    const fromId = dragId;
+    setDragId(null);
+    setDropTarget(null);
+    if (!fromId || fromId === toId) return;
+    const ids = folders.map((f) => f.id);
+    if (!ids.includes(fromId) || !ids.includes(toId)) return;
+    const next = ids.filter((id) => id !== fromId);
+    next.splice(next.indexOf(toId) + (before ? 0 : 1), 0, fromId);
+    if (next.every((id, i) => id === ids[i])) return;
+    onReorder(next);
+  };
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
   const [newIcon, setNewIcon] = useState<FolderIcon>(() => ({
@@ -139,22 +159,73 @@ export function Sidebar({
       </div>
 
       <div className="flex-1 overflow-y-auto px-2 pb-2">
-        {folders.map((folder) => (
-          <FolderItem
-            key={folder.id}
-            row={{
-              kind: 'folder',
-              folder,
-              onRename: (name) => onRename(folder.id, name),
-              onChangeIcon: (icon) => onChangeIcon(folder.id, icon),
-              onDelete: () => onDelete(folder.id),
-            }}
-            count={countFor(folder.id)}
-            selected={selectedId === folder.id}
-            onSelect={() => onSelect(folder.id)}
-            onDropSlide={(slideId) => onDropToFolder(folder.id, slideId)}
-          />
-        ))}
+        {folders.map((folder) => {
+          const isDropTarget = dropTarget?.id === folder.id;
+          const before = isDropTarget && dropTarget.before;
+          const after = isDropTarget && !dropTarget.before;
+          return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop handle wraps the row
+            <div
+              key={folder.id}
+              className={cn(
+                'relative',
+                before &&
+                  'before:absolute before:inset-x-2 before:-top-px before:h-[2px] before:rounded-full before:bg-brand',
+                after &&
+                  'after:absolute after:inset-x-2 after:-bottom-px after:h-[2px] after:rounded-full after:bg-brand',
+                dragId === folder.id && 'opacity-50',
+              )}
+              draggable={import.meta.env.DEV}
+              onDragStart={(e) => {
+                if (!import.meta.env.DEV) return;
+                e.dataTransfer.setData(FOLDER_DND_MIME, folder.id);
+                e.dataTransfer.effectAllowed = 'move';
+                setDragId(folder.id);
+              }}
+              onDragEnd={() => {
+                setDragId(null);
+                setDropTarget(null);
+              }}
+              onDragOver={(e) => {
+                if (!e.dataTransfer.types.includes(FOLDER_DND_MIME)) return;
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isBefore = e.clientY < rect.top + rect.height / 2;
+                if (!dropTarget || dropTarget.id !== folder.id || dropTarget.before !== isBefore) {
+                  setDropTarget({ id: folder.id, before: isBefore });
+                }
+              }}
+              onDragLeave={(e) => {
+                if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
+                if (dropTarget?.id === folder.id) setDropTarget(null);
+              }}
+              onDrop={(e) => {
+                const fromId = e.dataTransfer.getData(FOLDER_DND_MIME);
+                if (!fromId) return;
+                e.preventDefault();
+                e.stopPropagation();
+                const rect = e.currentTarget.getBoundingClientRect();
+                const isBefore = e.clientY < rect.top + rect.height / 2;
+                finishReorder(folder.id, isBefore);
+              }}
+            >
+              <FolderItem
+                row={{
+                  kind: 'folder',
+                  folder,
+                  onRename: (name) => onRename(folder.id, name),
+                  onChangeIcon: (icon) => onChangeIcon(folder.id, icon),
+                  onDelete: () => onDelete(folder.id),
+                }}
+                count={countFor(folder.id)}
+                selected={selectedId === folder.id}
+                onSelect={() => onSelect(folder.id)}
+                onDropSlide={(slideId) => onDropToFolder(folder.id, slideId)}
+              />
+            </div>
+          );
+        })}
 
         {import.meta.env.DEV &&
           (creating ? (

package/src/app/components/slide-transition-layer.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useRef, useState } from 'react';
+import { SlidePageProvider } from '../lib/page-context';
+import type { Page } from '../lib/sdk';
+import { resolveTransition, type SlideTransition, type TransitionPhase } from '../lib/transition';
+
+type Props = {
+  pages: Page[];
+  index: number;
+  total: number;
+  moduleTransition?: SlideTransition;
+  disabled?: boolean;
+};
+
+type Direction = 'forward' | 'backward';
+
+const DEFAULT_EASING = 'cubic-bezier(.4, 0, .2, 1)';
+
+function runPhase(
+  el: HTMLElement,
+  phase: TransitionPhase | undefined,
+  fallbackDuration: number,
+  fallbackEasing: string,
+): Animation | null {
+  if (!phase) return null;
+  return el.animate(phase.keyframes, {
+    duration: phase.duration ?? fallbackDuration,
+    easing: phase.easing ?? fallbackEasing,
+    delay: phase.delay ?? 0,
+    fill: 'both',
+  });
+}
+
+export function SlideTransitionLayer({ pages, index, total, moduleTransition, disabled }: Props) {
+  const [current, setCurrent] = useState(index);
+  const [outgoing, setOutgoing] = useState<number | null>(null);
+  const [direction, setDirection] = useState<Direction>('forward');
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const outgoingLayerRef = useRef<HTMLDivElement | null>(null);
+  const incomingLayerRef = useRef<HTMLDivElement | null>(null);
+  const animsRef = useRef<Animation[]>([]);
+  const currentRef = useRef(current);
+  currentRef.current = current;
+
+  useEffect(() => {
+    if (index === currentRef.current) return;
+
+    const prev = currentRef.current;
+    const next = index;
+
+    // Interrupt: cancel in-flight animations. The previously-incoming page
+    // (currentRef) becomes the new outgoing; React reuses its DOM slot.
+    for (const a of animsRef.current) {
+      try {
+        a.cancel();
+      } catch {}
+    }
+    animsRef.current = [];
+
+    const transition = resolveTransition(pages, next, moduleTransition);
+    if (disabled || !transition) {
+      setCurrent(next);
+      setOutgoing(null);
+      return;
+    }
+
+    setDirection(next > prev ? 'forward' : 'backward');
+    setOutgoing(prev);
+    setCurrent(next);
+  }, [index, pages, moduleTransition, disabled]);
+
+  useEffect(() => {
+    if (outgoing === null) return;
+
+    const transition = resolveTransition(pages, current, moduleTransition);
+    const wrapper = wrapperRef.current;
+    const out = outgoingLayerRef.current;
+    const inc = incomingLayerRef.current;
+    if (!transition || !wrapper || !out || !inc) {
+      setOutgoing(null);
+      return;
+    }
+
+    wrapper.dataset.osdDir = direction;
+    wrapper.style.setProperty('--osd-dir', direction === 'forward' ? '1' : '-1');
+
+    const easing = transition.easing ?? DEFAULT_EASING;
+    const duration = transition.duration;
+
+    const anims: Animation[] = [];
+    const exitAnim = runPhase(out, transition.exit, duration, easing);
+    const enterAnim = runPhase(inc, transition.enter, duration, easing);
+    if (exitAnim) anims.push(exitAnim);
+    if (enterAnim) anims.push(enterAnim);
+    animsRef.current = anims;
+
+    if (anims.length === 0) {
+      setOutgoing(null);
+      return;
+    }
+
+    let cancelled = false;
+    Promise.all(anims.map((a) => a.finished))
+      .then(() => {
+        if (cancelled) return;
+        animsRef.current = [];
+        setOutgoing(null);
+      })
+      .catch(() => {
+        // AbortError fires when we cancel mid-flight on an interrupt.
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [outgoing, current, direction, pages, moduleTransition]);
+
+  useEffect(() => {
+    return () => {
+      for (const a of animsRef.current) {
+        try {
+          a.cancel();
+        } catch {}
+      }
+      animsRef.current = [];
+    };
+  }, []);
+
+  const CurrentPage = pages[current];
+  const OutgoingPage = outgoing !== null ? pages[outgoing] : null;
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="relative h-full w-full"
+      style={{ background: 'var(--osd-bg)' }}
+    >
+      {OutgoingPage && outgoing !== null ? (
+        <div ref={outgoingLayerRef} className="absolute inset-0">
+          <SlidePageProvider index={outgoing} total={total}>
+            <OutgoingPage />
+          </SlidePageProvider>
+        </div>
+      ) : null}
+      {CurrentPage ? (
+        <div ref={incomingLayerRef} className="absolute inset-0">
+          <SlidePageProvider index={current} total={total}>
+            <CurrentPage />
+          </SlidePageProvider>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/app/components/style-panel/style-panel.tsx

@@ -211,6 +211,9 @@ export function DesignToggleButton({
     >
       <Palette className="size-3.5" />
       <span className="hidden md:inline">{t.stylePanel.designToggle}</span>
+      <kbd className="ml-1 hidden rounded-[3px] bg-foreground/10 px-1 font-mono text-[9.5px] tracking-[0.04em] md:inline">
+        D
+      </kbd>
     </Button>
   );
 }

package/src/app/lib/folders.ts

@@ -88,12 +88,22 @@ async function putAssign(slideId: string, folderId: string | null): Promise<void
   if (!res.ok) throw new Error(`PUT /__folders/assign ${res.status}`);
 }
 
+async function putReorder(ids: string[]): Promise<void> {
+  const res = await fetch('/__folders/reorder', {
+    method: 'PUT',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ ids }),
+  });
+  if (!res.ok) throw new Error(`PUT /__folders/reorder ${res.status}`);
+}
+
 export type UseFoldersResult = {
   manifest: FoldersManifest;
   loading: boolean;
   create: (name: string, icon: FolderIcon) => Promise<Folder>;
   update: (id: string, patch: { name?: string; icon?: FolderIcon }) => Promise<void>;
   remove: (id: string) => Promise<void>;
+  reorder: (ids: string[]) => Promise<void>;
   assign: (slideId: string, folderId: string | null) => Promise<void>;
   renameSlide: (slideId: string, name: string) => Promise<void>;
   duplicateSlide: (slideId: string, newId?: string) => Promise<string>;
@@ -163,6 +173,23 @@ export function useFolders(): UseFoldersResult {
     [refresh],
   );
 
+  const reorder = useCallback(
+    async (ids: string[]) => {
+      const prev = manifest;
+      const byId = new Map(prev.folders.map((f) => [f.id, f]));
+      const next = ids.map((id) => byId.get(id)).filter((f): f is Folder => Boolean(f));
+      if (next.length !== prev.folders.length) return;
+      setManifest({ ...prev, folders: next });
+      try {
+        await putReorder(ids);
+      } catch (err) {
+        setManifest(prev);
+        throw err;
+      }
+    },
+    [manifest],
+  );
+
   const assign = useCallback(
     async (slideId: string, folderId: string | null) => {
       await putAssign(slideId, folderId);
@@ -202,6 +229,7 @@ export function useFolders(): UseFoldersResult {
     create,
     update,
     remove,
+    reorder,
     assign,
     renameSlide,
     duplicateSlide,

package/src/app/lib/inspector/fiber.test.ts

@@ -0,0 +1,154 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { findSlideSource } from './fiber.ts';
+
+class FakeHTMLElement {
+  dataset: Record<string, string> = {};
+  private closestSelf: FakeHTMLElement | null = null;
+  setClosestSelfForSlideLoc() {
+    this.closestSelf = this;
+  }
+  closest(selector: string): FakeHTMLElement | null {
+    if (selector === '[data-slide-loc]') return this.closestSelf;
+    return null;
+  }
+}
+
+type DebugSource = { fileName?: string; lineNumber?: number; columnNumber?: number };
+type FakeFiber = {
+  return: FakeFiber | null;
+  stateNode?: unknown;
+  _debugSource?: DebugSource;
+};
+
+function makeEl(opts: { slideLoc?: string; fiber?: FakeFiber } = {}): FakeHTMLElement {
+  const el = new FakeHTMLElement();
+  if (opts.slideLoc) {
+    el.dataset.slideLoc = opts.slideLoc;
+    el.setClosestSelfForSlideLoc();
+  }
+  if (opts.fiber) {
+    (el as unknown as Record<string, FakeFiber>).__reactFiber$test = opts.fiber;
+  }
+  return el;
+}
+
+function makeFiber(opts: {
+  fileName?: string;
+  line?: number;
+  column?: number;
+  host?: boolean;
+  parent?: FakeFiber | null;
+}): FakeFiber {
+  const source: DebugSource | undefined =
+    opts.fileName !== undefined
+      ? { fileName: opts.fileName, lineNumber: opts.line, columnNumber: opts.column }
+      : undefined;
+  return {
+    return: opts.parent ?? null,
+    stateNode: opts.host ? new FakeHTMLElement() : undefined,
+    _debugSource: source,
+  };
+}
+
+beforeAll(() => {
+  vi.stubGlobal('HTMLElement', FakeHTMLElement);
+});
+
+afterAll(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('findSlideSource primary path', () => {
+  it('reads line:column from data-slide-loc', () => {
+    const el = makeEl({ slideLoc: '42:7' });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(42);
+    expect(hit?.column).toBe(7);
+    expect(hit?.anchor).toBe(el as unknown as HTMLElement);
+  });
+});
+
+describe('findSlideSource fallback', () => {
+  it('matches a POSIX fileName', () => {
+    const fiber = makeFiber({
+      fileName: '/repo/slides/cover/index.tsx',
+      line: 10,
+      column: 4,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(10);
+    expect(hit?.column).toBe(4);
+  });
+
+  it('matches a Windows-backslash fileName', () => {
+    const fiber = makeFiber({
+      fileName: 'C:\\repo\\slides\\cover\\index.tsx',
+      line: 11,
+      column: 2,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(11);
+    expect(hit?.column).toBe(2);
+  });
+
+  it('matches a fileName carrying an HMR ?t= query', () => {
+    const fiber = makeFiber({
+      fileName: '/repo/slides/cover/index.tsx?t=1700000000000',
+      line: 12,
+      column: 0,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(12);
+  });
+
+  it('matches a Windows fileName with an HMR query', () => {
+    const fiber = makeFiber({
+      fileName: 'C:\\repo\\slides\\cover\\index.tsx?t=1700000000000',
+      line: 13,
+      column: 1,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(13);
+    expect(hit?.column).toBe(1);
+  });
+
+  it('returns null when the fiber fileName points at a different slideId', () => {
+    const fiber = makeFiber({
+      fileName: '/repo/slides/other/index.tsx',
+      line: 10,
+      column: 4,
+      host: true,
+    });
+    const el = makeEl({ fiber });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).toBeNull();
+  });
+
+  it('walks up the fiber chain until it finds a matching source', () => {
+    const parent = makeFiber({
+      fileName: '/repo/slides/cover/index.tsx',
+      line: 99,
+      column: 3,
+      host: true,
+    });
+    const leaf = makeFiber({ parent, host: true });
+    const el = makeEl({ fiber: leaf });
+    const hit = findSlideSource(el as unknown as HTMLElement, 'cover');
+    expect(hit).not.toBeNull();
+    expect(hit?.line).toBe(99);
+    expect(hit?.column).toBe(3);
+  });
+});

package/src/app/lib/inspector/fiber.ts

@@ -28,6 +28,12 @@ function getSource(fiber: FiberLike) {
   return fiber._debugSource ?? fiber.memoizedProps?.__source;
 }
 
+// `_debugSource.fileName` may carry Vite's HMR query (`?t=…`) and, on
+// Windows, backslash separators. Both break the naive `endsWith` match.
+function normalizeDebugFileName(fileName: string): string {
+  return fileName.split(/[?#]/)[0].replace(/\\/g, '/');
+}
+
 export function findSlideSource(
   el: HTMLElement,
   slideId: string,
@@ -58,7 +64,12 @@ export function findSlideSource(
   while (fiber) {
     const src = getSource(fiber);
     const isHost = fiber.stateNode instanceof HTMLElement;
-    if (src?.fileName?.endsWith(needle) && src.lineNumber && (!opts?.hostOnly || isHost)) {
+    if (
+      src?.fileName &&
+      normalizeDebugFileName(src.fileName).endsWith(needle) &&
+      src.lineNumber &&
+      (!opts?.hostOnly || isHost)
+    ) {
       return {
         line: src.lineNumber,
         column: src.columnNumber ?? 0,

package/src/app/lib/sdk.ts

@@ -1,7 +1,8 @@
 import type { ComponentType } from 'react';
 import type { DesignSystem } from './design.ts';
+import type { SlideTransition } from './transition.ts';
 
-export type Page = ComponentType;
+export type Page = ComponentType & { transition?: SlideTransition };
 
 export type SlideMeta = {
   title?: string;
@@ -16,6 +17,7 @@ export type SlideModule = {
   design?: DesignSystem;
   // Index-aligned with `default`.
   notes?: (string | undefined)[];
+  transition?: SlideTransition;
 };
 
 export type FolderIcon = { type: 'emoji'; value: string } | { type: 'color'; value: string };

package/src/app/lib/transition.ts

@@ -0,0 +1,23 @@
+import type { Page } from './sdk';
+
+export type TransitionPhase = {
+  keyframes: Keyframe[] | PropertyIndexedKeyframes;
+  easing?: string;
+  duration?: number;
+  delay?: number;
+};
+
+export type SlideTransition = {
+  duration: number;
+  easing?: string;
+  enter?: TransitionPhase;
+  exit?: TransitionPhase;
+};
+
+export function resolveTransition(
+  pages: Page[],
+  index: number,
+  moduleDefault?: SlideTransition,
+): SlideTransition | undefined {
+  return pages[index]?.transition ?? moduleDefault;
+}

package/src/app/lib/use-click-page-navigation.ts

@@ -0,0 +1,52 @@
+import { type RefObject, useEffect } from 'react';
+
+// Clicks that land on (or inside) these never navigate — interactive slide
+// content keeps its click, and present chrome is excluded via data-osd-chrome.
+// Authors can opt any element out with a data-osd-interactive attribute.
+const NAV_PASSTHROUGH =
+  'a, button, input, textarea, select, label, summary, iframe, video, audio, embed, object, [role="button"], [role="link"], [contenteditable="true"], [data-osd-interactive], [data-osd-chrome]';
+
+type UseClickPageNavigationOptions<T extends HTMLElement> = {
+  ref: RefObject<T>;
+  enabled?: boolean;
+  /** Fraction of the width on each side that navigates; the center is inert. */
+  edgeRatio?: number;
+  canPrev: boolean;
+  canNext: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+};
+
+export function useClickPageNavigation<T extends HTMLElement>({
+  ref,
+  enabled = true,
+  edgeRatio = 0.3,
+  canPrev,
+  canNext,
+  onPrev,
+  onNext,
+}: UseClickPageNavigationOptions<T>) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+
+    const onClick = (event: MouseEvent) => {
+      if (event.button !== 0 || event.defaultPrevented) return;
+      const target = event.target;
+      if (target instanceof HTMLElement && target.closest(NAV_PASSTHROUGH)) return;
+      if (window.getSelection()?.toString()) return;
+
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const x = (event.clientX - rect.left) / rect.width;
+      if (x < edgeRatio) {
+        if (canPrev) onPrev();
+      } else if (x > 1 - edgeRatio) {
+        if (canNext) onNext();
+      }
+    };
+
+    el.addEventListener('click', onClick);
+    return () => el.removeEventListener('click', onClick);
+  }, [ref, enabled, edgeRatio, canPrev, canNext, onPrev, onNext]);
+}

package/src/app/lib/use-is-mobile.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+// Matches Tailwind's `md` breakpoint — below it the slide viewer hides desktop
+// navigation chrome and relies on tap-to-navigate instead.
+const QUERY = '(max-width: 767.98px)';
+
+export function useIsMobile(): boolean {
+  const [mobile, setMobile] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(QUERY).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const onChange = (e: MediaQueryListEvent) => setMobile(e.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return mobile;
+}

package/src/app/lib/use-prefers-reduced-motion.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+const QUERY = '(prefers-reduced-motion: reduce)';
+
+export function usePrefersReducedMotion(): boolean {
+  const [reduce, setReduce] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(QUERY).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const onChange = (e: MediaQueryListEvent) => setReduce(e.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return reduce;
+}