@open-slide/core 1.0.5 → 1.1.0

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

@@ -11,6 +11,7 @@ import {
 import { toast } from 'sonner';
 import { useHistory } from '@/components/history-provider';
 import { type DesignSystem, defaultDesign, designToCssVars } from '../../lib/design';
+import { shuffleDesign } from '../../lib/design-presets';
 import { useDesign as useDesignFetch } from './use-design';
 
 type DesignCtx = {
@@ -26,6 +27,7 @@ type DesignCtx = {
   commit: () => Promise<void>;
   discard: () => void;
   resetToDefaults: () => void;
+  shuffle: () => void;
 };
 
 const Ctx = createContext<DesignCtx | null>(null);
@@ -48,7 +50,6 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
   const draftRef = useRef<DesignSystem | null>(null);
   draftRef.current = draft;
 
-  // Re-seed draft whenever the saved design changes (slide switch, post-save HMR).
   useEffect(() => {
     if (design) setDraft(clone(design));
   }, [design]);
@@ -99,11 +100,18 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
     });
   }, [history]);
 
-  // Live-preview overlay: rendered only while there are unsaved changes so the
-  // canvas reflects the draft instantly, before any file write. SlideCanvas
-  // emits its own CSS variables inline on the canvas root (so home thumbnails,
-  // player, and exports work without any extra plumbing). Inline styles win
-  // against external rules, so the overlay must use `!important` to override.
+  const shuffle = useCallback(() => {
+    const prev = draftRef.current;
+    const next = clone(shuffleDesign(prev));
+    setDraft(next);
+    history.record({
+      undo: () => setDraft(prev),
+      redo: () => setDraft(next),
+    });
+  }, [history]);
+
+  // SlideCanvas emits its design vars inline on the canvas root, so a draft
+  // overlay must use `!important` to outrank those inline styles.
   const previewCss = useMemo(() => {
     if (!dirty || !draft) return '';
     const lines = Object.entries(designToCssVars(draft))
@@ -125,6 +133,7 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
     commit,
     discard,
     resetToDefaults,
+    shuffle,
   };
 
   return (

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

@@ -1,4 +1,4 @@
-import { Palette, X } from 'lucide-react';
+import { Palette, Shuffle, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Field, NumberField, Section } from '@/components/panel/panel-fields';
 import { PanelShell, usePanelMount } from '@/components/panel/panel-shell';
@@ -28,7 +28,7 @@ type DesignPanelProps = {
 };
 
 export function DesignPanel({ open, onClose }: DesignPanelProps) {
-  const { draft, exists, warning, loaded, dirty, update } = useDesignPanelState();
+  const { draft, exists, warning, loaded, dirty, update, shuffle } = useDesignPanelState();
   const { mounted, animVisible } = usePanelMount(open);
   const t = useLocale();
 
@@ -60,15 +60,27 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
               />
             )}
           </div>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="text-muted-foreground hover:text-foreground"
-            onClick={onClose}
-            aria-label={t.stylePanel.closePanelAria}
-          >
-            <X className="size-3.5" />
-          </Button>
+          <div className="flex items-center gap-0.5">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={shuffle}
+              aria-label={t.stylePanel.shuffleAria}
+              title={t.stylePanel.shuffleTitle}
+            >
+              <Shuffle className="size-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={onClose}
+              aria-label={t.stylePanel.closePanelAria}
+            >
+              <X className="size-3.5" />
+            </Button>
+          </div>
         </>
       }
       banner={

package/src/app/components/thumbnail-rail.tsx

@@ -1,3 +1,19 @@
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useEffect, useRef } from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { format, useLocale } from '@/lib/use-locale';
@@ -14,6 +30,7 @@ type Props = {
   design?: DesignSystem;
   current: number;
   onSelect: (index: number) => void;
+  onReorder?: (from: number, to: number) => void;
   orientation?: Orientation;
 };
 
@@ -25,6 +42,7 @@ export function ThumbnailRail({
   design,
   current,
   onSelect,
+  onReorder,
   orientation = 'vertical',
 }: Props) {
   const activeRef = useRef<HTMLButtonElement | null>(null);
@@ -93,61 +111,210 @@ export function ThumbnailRail({
 
   const scale = VERTICAL_THUMB_WIDTH / CANVAS_WIDTH;
   const height = CANVAS_HEIGHT * scale;
+
+  const renderThumb = (PageComp: Page, i: number) => {
+    const active = i === current;
+    const inner = (
+      <ThumbContents
+        index={i}
+        active={active}
+        page={PageComp}
+        design={design}
+        scale={scale}
+        height={height}
+      />
+    );
+
+    if (onReorder) {
+      return (
+        <SortableThumb
+          key={i}
+          index={i}
+          active={active}
+          activeRef={active ? activeRef : undefined}
+          onSelect={() => onSelect(i)}
+          ariaLabel={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
+        >
+          {inner}
+        </SortableThumb>
+      );
+    }
+
+    return (
+      <button
+        key={i}
+        type="button"
+        ref={active ? activeRef : undefined}
+        onClick={() => onSelect(i)}
+        aria-label={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
+        aria-current={active ? 'true' : undefined}
+        className={thumbButtonClass(active)}
+      >
+        {inner}
+      </button>
+    );
+  };
+
+  const list = (
+    <aside className="flex flex-col gap-2 px-3 py-3">
+      <div className="flex items-baseline justify-between px-1 pb-1">
+        <span className="eyebrow">{t.thumbnailRail.pages}</span>
+        <span className="folio">{pages.length.toString().padStart(2, '0')}</span>
+      </div>
+      {pages.map(renderThumb)}
+    </aside>
+  );
+
+  if (!onReorder) {
+    return <ScrollArea className="h-full border-r border-hairline bg-sidebar">{list}</ScrollArea>;
+  }
+
   return (
     <ScrollArea className="h-full border-r border-hairline bg-sidebar">
-      <aside className="flex flex-col gap-2 px-3 py-3">
-        <div className="flex items-baseline justify-between px-1 pb-1">
-          <span className="eyebrow">{t.thumbnailRail.pages}</span>
-          <span className="folio">{pages.length.toString().padStart(2, '0')}</span>
-        </div>
-        {pages.map((PageComp, i) => {
-          const active = i === current;
-          return (
-            <button
-              // biome-ignore lint/suspicious/noArrayIndexKey: pages list is render-stable
-              key={i}
-              type="button"
-              ref={active ? activeRef : undefined}
-              onClick={() => onSelect(i)}
-              aria-label={`Go to page ${i + 1}`}
-              aria-current={active ? 'true' : undefined}
-              className={cn(
-                'group/thumb flex items-start gap-2.5 rounded-[6px] p-1.5 text-left motion-safe:transition-colors',
-                'hover:bg-muted/60',
-                active && 'bg-muted',
-              )}
-            >
-              <span
-                className={cn(
-                  'mt-1.5 w-7 shrink-0 text-right font-mono text-[10px] font-medium tracking-[0.06em] tabular-nums uppercase',
-                  active ? 'text-brand' : 'text-muted-foreground/70',
-                )}
-              >
-                {(i + 1).toString().padStart(2, '0')}
-              </span>
-              <div
-                className={cn(
-                  'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
-                  active
-                    ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
-                    : 'border-hairline group-hover/thumb:border-foreground/25',
-                )}
-                style={{ width: VERTICAL_THUMB_WIDTH, height }}
-              >
-                <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
-                  <PageComp />
-                </SlideCanvas>
-                {active && (
-                  <span
-                    aria-hidden
-                    className="pointer-events-none absolute inset-y-0 left-0 w-[2px] bg-brand"
-                  />
-                )}
-              </div>
-            </button>
-          );
-        })}
-      </aside>
+      <SortableRail pages={pages} onReorder={onReorder}>
+        {list}
+      </SortableRail>
     </ScrollArea>
   );
 }
+
+function thumbButtonClass(active: boolean): string {
+  return cn(
+    'group/thumb flex w-full items-start gap-2.5 rounded-[6px] p-1.5 text-left motion-safe:transition-colors',
+    'hover:bg-muted/60',
+    active && 'bg-muted',
+  );
+}
+
+function ThumbContents({
+  index,
+  active,
+  page: PageComp,
+  design,
+  scale,
+  height,
+}: {
+  index: number;
+  active: boolean;
+  page: Page;
+  design?: DesignSystem;
+  scale: number;
+  height: number;
+}) {
+  return (
+    <>
+      <span
+        className={cn(
+          'mt-1.5 w-7 shrink-0 text-right font-mono text-[10px] font-medium tracking-[0.06em] tabular-nums uppercase',
+          active ? 'text-brand' : 'text-muted-foreground/70',
+        )}
+      >
+        {(index + 1).toString().padStart(2, '0')}
+      </span>
+      <div
+        className={cn(
+          'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
+          active
+            ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
+            : 'border-hairline group-hover/thumb:border-foreground/25',
+        )}
+        style={{ width: VERTICAL_THUMB_WIDTH, height }}
+      >
+        <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
+          <PageComp />
+        </SlideCanvas>
+        {active && (
+          <span
+            aria-hidden
+            className="pointer-events-none absolute inset-y-0 left-0 w-[2px] bg-brand"
+          />
+        )}
+      </div>
+    </>
+  );
+}
+
+function SortableRail({
+  pages,
+  onReorder,
+  children,
+}: {
+  pages: Page[];
+  onReorder: (from: number, to: number) => void;
+  children: React.ReactNode;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const items = pages.map((_, i) => i + 1);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const from = (active.id as number) - 1;
+    const to = (over.id as number) - 1;
+    if (from < 0 || to < 0 || from === to) return;
+    onReorder(from, to);
+  };
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        {children}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+function SortableThumb({
+  index,
+  active,
+  activeRef,
+  onSelect,
+  ariaLabel,
+  children,
+}: {
+  index: number;
+  active: boolean;
+  activeRef: React.MutableRefObject<HTMLButtonElement | null> | undefined;
+  onSelect: () => void;
+  ariaLabel: string;
+  children: React.ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: index + 1,
+  });
+
+  const setRef = (node: HTMLButtonElement | null) => {
+    setNodeRef(node);
+    if (activeRef) activeRef.current = node;
+  };
+
+  const yOnlyTransform = transform ? { ...transform, x: 0 } : transform;
+
+  return (
+    <button
+      ref={setRef}
+      type="button"
+      onClick={onSelect}
+      aria-label={ariaLabel}
+      aria-current={active ? 'true' : undefined}
+      style={{
+        transform: CSS.Transform.toString(yOnlyTransform),
+        transition,
+        touchAction: 'none',
+      }}
+      className={cn(
+        thumbButtonClass(active),
+        'cursor-grab active:cursor-grabbing',
+        isDragging && 'z-10 opacity-60 shadow-edge ring-1 ring-brand',
+      )}
+      {...attributes}
+      {...listeners}
+    >
+      {children}
+    </button>
+  );
+}

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/export-html.ts

@@ -1,8 +1,3 @@
-// Exports a slide as a standalone HTML file (or a .zip bundle if the slide
-// references bundled assets). The export is a static snapshot of each page's
-// post-mount DOM — runtime interactivity (useState click handlers, timers,
-// etc.) is captured at snapshot time only.
-
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { designToCssVars } from './design';
@@ -39,9 +34,7 @@ export async function exportSlideAsHtml(slide: SlideModule, slideId: string): Pr
       const buf = new Uint8Array(await res.arrayBuffer());
       const name = uniqueAssetName(absolute, usedNames);
       assets.set(url, { name, bytes: buf });
-    } catch {
-      // ignore unreachable assets
-    }
+    } catch {}
   }
 
   const rewrittenPages = pagesHtml.map((html) => rewriteUrls(html, assets, 'html'));
@@ -175,7 +168,6 @@ function looksLikeAsset(url: string): boolean {
   if (url.startsWith('mailto:') || url.startsWith('javascript:')) return false;
   const abs = toAbsolute(url);
   if (!abs) return false;
-  // Same-origin only: we can only fetch local assets.
   try {
     const u = new URL(abs);
     if (u.origin !== window.location.origin) return false;

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

@@ -1,8 +1,3 @@
-// Exports a slide as a PDF via the browser's native print engine.
-// Each page in `slide.default` becomes one PDF page at 1920×1080.
-// Text stays selectable and inline SVG remains vector — `window.print()`
-// preserves both. The user picks "Save as PDF" in the print dialog.
-
 import { createElement } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { designToCssVars } from './design';

package/src/app/lib/print-ready.ts

@@ -1,6 +1,3 @@
-// Helpers used by the PDF export flow to wait for the page to settle before
-// invoking window.print(). Browser-only — no Node / headless dependency.
-
 const DEFAULT_WAITFOR_TIMEOUT_MS = 10_000;
 
 export async function waitForFonts(): Promise<void> {
@@ -38,7 +35,6 @@ export async function waitForDataWaitfor(
   );
 }
 
-/** Returns true if `frame` has no running finite-iteration animations. */
 export function isFrameAnimationSettled(frame: Element): boolean {
   if (typeof document.getAnimations !== 'function') return true;
   for (const anim of document.getAnimations()) {

package/src/app/lib/sdk.ts

@@ -11,8 +11,7 @@ export type SlideModule = {
   default: Page[];
   meta?: SlideMeta;
   design?: DesignSystem;
-  // Index-aligned with `default`. Each entry is the speaker note for the
-  // page at the same position. Used by Presenter View only.
+  // Index-aligned with `default`.
   notes?: (string | undefined)[];
 };