@open-slide/core 0.0.11 → 0.0.12

package/src/app/components/sidebar/{Sidebar.tsx → sidebar.tsx}

@@ -1,8 +1,9 @@
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
+import { ThemeToggle } from '@/components/theme-toggle';
 import type { Folder, FolderIcon } from '@/lib/sdk';
-import { FolderItem } from './FolderItem';
-import { PRESET_COLORS } from './IconPicker';
+import { FolderItem } from './folder-item';
+import { PRESET_COLORS } from './icon-picker';
 
 export const DRAFT_ID = 'draft';
 
@@ -46,9 +47,10 @@ export function Sidebar({
   };
 
   return (
-    <aside className="flex h-full w-[17rem] shrink-0 flex-col border-r bg-card/40">
-      <div className="px-5 pt-6 pb-3">
+    <aside className="paper relative flex h-full w-[16.5rem] shrink-0 flex-col border-r border-hairline bg-sidebar text-sidebar-foreground">
+      <div className="flex items-center justify-between px-4 pt-5 pb-4">
         <h1 className="font-heading text-lg font-bold tracking-tight">open-slide</h1>
+        <ThemeToggle />
       </div>
 
       <div className="px-2">
@@ -61,8 +63,10 @@ export function Sidebar({
         />
       </div>
 
-      <div className="mt-4 px-4 pb-1 text-xs font-medium tracking-wide text-muted-foreground/70">
-        FOLDERS
+      <div className="mt-5 flex items-center gap-2 px-4 pb-1.5">
+        <span className="eyebrow">Folders</span>
+        <span className="h-px flex-1 bg-hairline" aria-hidden />
+        <span className="folio">{folders.length.toString().padStart(2, '0')}</span>
       </div>
 
       <div className="flex-1 overflow-y-auto px-2 pb-2">
@@ -83,34 +87,36 @@ export function Sidebar({
           />
         ))}
 
-        {creating ? (
-          <div className="mt-1 flex items-center gap-2 rounded-md border border-dashed bg-background px-2 py-1.5">
-            <input
-              value={newName}
-              onChange={(e) => setNewName(e.target.value)}
-              onBlur={commitCreate}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') commitCreate();
-                if (e.key === 'Escape') {
-                  setCreating(false);
-                  setNewName('');
-                }
-              }}
-              placeholder="Folder name"
-              maxLength={40}
-              className="min-w-0 flex-1 bg-transparent text-sm outline-none"
-            />
-          </div>
-        ) : (
-          <button
-            type="button"
-            onClick={() => setCreating(true)}
-            className="mt-1 flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:border-border hover:bg-muted/40 hover:text-foreground"
-          >
-            <Plus className="size-3.5" />
-            Add folder
-          </button>
-        )}
+        {import.meta.env.DEV &&
+          (creating ? (
+            <div className="mt-1 flex items-center gap-2 rounded-[5px] border border-dashed border-foreground/30 bg-card px-2 py-1.5">
+              <span className="size-2 shrink-0 rounded-[2px] bg-brand" aria-hidden />
+              <input
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onBlur={commitCreate}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') commitCreate();
+                  if (e.key === 'Escape') {
+                    setCreating(false);
+                    setNewName('');
+                  }
+                }}
+                placeholder="Folder name"
+                maxLength={40}
+                className="min-w-0 flex-1 bg-transparent text-[12.5px] outline-none placeholder:text-muted-foreground/60"
+              />
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setCreating(true)}
+              className="mt-1 flex w-full items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
+            >
+              <Plus className="size-3.5" />
+              <span>New folder</span>
+            </button>
+          ))}
       </div>
     </aside>
   );

package/src/app/components/{SlideCanvas.tsx → slide-canvas.tsx}

@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
 import { cn } from '@/lib/utils';
-import { CANVAS_WIDTH, CANVAS_HEIGHT } from '../lib/sdk';
+import { type DesignSystem, designToCssVars } from '../../design';
+import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
 
 type Props = {
   children: ReactNode;
@@ -10,10 +11,27 @@ type Props = {
   center?: boolean;
   /** Flat mode: no rounded corners or drop shadow. */
   flat?: boolean;
+  /** Freeze descendant animations and transitions, useful for thumbnail previews. */
+  freezeMotion?: boolean;
   className?: string;
+  /**
+   * Per-slide design tokens. When set, the matching CSS custom properties
+   * are emitted on the canvas root so descendants can use `var(--osd-X)`
+   * regardless of which surface (editor, player, thumbnail, export) is
+   * rendering them.
+   */
+  design?: DesignSystem;
 };
 
-export function SlideCanvas({ children, scale, center = true, flat = false, className }: Props) {
+export function SlideCanvas({
+  children,
+  scale,
+  center = true,
+  flat = false,
+  freezeMotion = false,
+  className,
+  design,
+}: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [fitScale, setFitScale] = useState(1);
 
@@ -39,7 +57,9 @@ export function SlideCanvas({ children, scale, center = true, flat = false, clas
       <div
         className={cn(
           'overflow-hidden bg-white text-black',
-          !flat && 'rounded-md shadow-xl ring-1 ring-black/5',
+          // Inset shadow keeps the 1px edge inside the canvas box so it
+          // can't be clipped by the parent's overflow-hidden.
+          !flat && 'rounded-[6px] shadow-[inset_0_0_0_1px_oklch(0_0_0/0.08)]',
         )}
         style={{
           width: scaledW,
@@ -55,12 +75,17 @@ export function SlideCanvas({ children, scale, center = true, flat = false, clas
         }}
       >
         <div
-          style={{
-            width: CANVAS_WIDTH,
-            height: CANVAS_HEIGHT,
-            transform: `scale(${s})`,
-            transformOrigin: 'top left',
-          }}
+          data-osd-canvas
+          data-osd-freeze-motion={freezeMotion ? '' : undefined}
+          style={
+            {
+              width: CANVAS_WIDTH,
+              height: CANVAS_HEIGHT,
+              transform: `scale(${s})`,
+              transformOrigin: 'top left',
+              ...(design ? designToCssVars(design) : {}),
+            } as CSSProperties
+          }
         >
           {children}
         </div>

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

@@ -0,0 +1,139 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { toast } from 'sonner';
+import { useHistory } from '@/components/history-provider';
+import { type DesignSystem, defaultDesign, designToCssVars } from '../../../design';
+import { useDesign as useDesignFetch } from './use-design';
+
+type DesignCtx = {
+  slideId: string;
+  loaded: boolean;
+  exists: boolean;
+  warning: string | null;
+  design: DesignSystem | null;
+  draft: DesignSystem | null;
+  dirty: boolean;
+  committing: boolean;
+  update: (mut: (next: DesignSystem) => void, coalesceKey?: string) => void;
+  commit: () => Promise<void>;
+  discard: () => void;
+  resetToDefaults: () => void;
+};
+
+const Ctx = createContext<DesignCtx | null>(null);
+
+export function useDesignPanelState(): DesignCtx {
+  const v = useContext(Ctx);
+  if (!v) throw new Error('useDesignPanelState must be used inside <DesignProvider>');
+  return v;
+}
+
+function clone<T>(d: T): T {
+  return JSON.parse(JSON.stringify(d)) as T;
+}
+
+export function DesignProvider({ slideId, children }: { slideId: string; children: ReactNode }) {
+  const { design, exists, warning, loaded, save } = useDesignFetch(slideId);
+  const [draft, setDraft] = useState<DesignSystem | null>(null);
+  const [committing, setCommitting] = useState(false);
+  const history = useHistory();
+  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]);
+
+  const dirty = useMemo(() => {
+    if (!draft || !design) return false;
+    return JSON.stringify(draft) !== JSON.stringify(design);
+  }, [draft, design]);
+
+  const update = useCallback(
+    (mut: (d: DesignSystem) => void, coalesceKey?: string) => {
+      const prev = draftRef.current;
+      if (!prev) return;
+      const next = clone(prev);
+      mut(next);
+      setDraft(next);
+      history.record({
+        coalesceKey,
+        undo: () => setDraft(prev),
+        redo: () => setDraft(next),
+      });
+    },
+    [history],
+  );
+
+  const commit = useCallback(async () => {
+    if (!draft) return;
+    setCommitting(true);
+    const r = await save(draft);
+    setCommitting(false);
+    if (!r.ok) toast.error(r.error ?? 'Failed to save');
+    history.clear();
+  }, [draft, save, history]);
+
+  const discard = useCallback(() => {
+    if (design) setDraft(clone(design));
+    history.clear();
+  }, [design, history]);
+
+  const resetToDefaults = useCallback(() => {
+    const prev = draftRef.current;
+    const next = clone(defaultDesign);
+    setDraft(next);
+    history.record({
+      coalesceKey: 'design:reset',
+      undo: () => setDraft(prev),
+      redo: () => setDraft(next),
+    });
+  }, [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 previewCss = useMemo(() => {
+    if (!dirty || !draft) return '';
+    const lines = Object.entries(designToCssVars(draft))
+      .map(([k, v]) => `  ${k}: ${v} !important;`)
+      .join('\n');
+    return `[data-osd-canvas] {\n${lines}\n}`;
+  }, [dirty, draft]);
+
+  const value: DesignCtx = {
+    slideId,
+    loaded,
+    exists,
+    warning,
+    design,
+    draft,
+    dirty,
+    committing,
+    update,
+    commit,
+    discard,
+    resetToDefaults,
+  };
+
+  return (
+    <Ctx.Provider value={value}>
+      {previewCss && (
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: trusted local css from draft state.
+        <style dangerouslySetInnerHTML={{ __html: previewCss }} />
+      )}
+      {children}
+    </Ctx.Provider>
+  );
+}

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

@@ -0,0 +1,326 @@
+import { Palette, 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';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+import { Separator } from '../ui/separator';
+import { Slider } from '../ui/slider';
+import { useDesignPanelState } from './design-provider';
+
+const FONT_PRESETS: Array<{ label: string; value: string }> = [
+  {
+    label: 'System sans',
+    value: '-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif',
+  },
+  { label: 'Inter', value: '"Inter", system-ui, sans-serif' },
+  { label: 'Helvetica', value: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
+  { label: 'Georgia', value: 'Georgia, "Times New Roman", serif' },
+  { label: 'Times', value: '"Times New Roman", Times, serif' },
+  { label: 'SF Mono', value: '"SF Mono", "JetBrains Mono", Menlo, monospace' },
+];
+
+type DesignPanelProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export function DesignPanel({ open, onClose }: DesignPanelProps) {
+  const { draft, exists, warning, loaded, dirty, update } = useDesignPanelState();
+  const { mounted, animVisible } = usePanelMount(open);
+
+  if (!loaded) return null;
+  if (!mounted) return null;
+  if (!draft) return null;
+
+  return (
+    <PanelShell
+      uiAttr="design"
+      animVisible={animVisible}
+      header={
+        <>
+          <div className="flex min-w-0 items-center gap-2">
+            <Palette className="size-3.5 text-muted-foreground" />
+            <span className="font-heading text-[12px] font-semibold tracking-tight">
+              Design tokens
+            </span>
+            {!exists && (
+              <span className="rounded-[3px] border border-hairline bg-muted/60 px-1.5 py-px font-mono text-[9.5px] uppercase tracking-[0.08em] text-muted-foreground">
+                draft
+              </span>
+            )}
+            {dirty && (
+              <span className="size-1.5 rounded-full bg-brand" title="Unsaved" aria-hidden />
+            )}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={onClose}
+            aria-label="Close design panel"
+          >
+            <X className="size-3.5" />
+          </Button>
+        </>
+      }
+      banner={
+        warning && (
+          <div className="flex gap-2 border-b border-hairline bg-[oklch(0.97_0.04_85)] px-3 py-2 text-[11px] leading-relaxed text-[oklch(0.35_0.08_45)] dark:bg-[oklch(0.25_0.04_60)] dark:text-[oklch(0.85_0.08_85)]">
+            <span aria-hidden className="mt-0.5 size-1.5 shrink-0 rounded-full bg-brand" />
+            <span>{warning}</span>
+          </div>
+        )
+      }
+    >
+      <Section title="Colors">
+        <ColorField
+          label="Background"
+          value={draft.palette.bg}
+          onChange={(v) =>
+            update((d) => {
+              d.palette.bg = v;
+            }, 'design:palette.bg')
+          }
+        />
+        <ColorField
+          label="Text"
+          value={draft.palette.text}
+          onChange={(v) =>
+            update((d) => {
+              d.palette.text = v;
+            }, 'design:palette.text')
+          }
+        />
+        <ColorField
+          label="Accent"
+          value={draft.palette.accent}
+          onChange={(v) =>
+            update((d) => {
+              d.palette.accent = v;
+            }, 'design:palette.accent')
+          }
+        />
+      </Section>
+
+      <Separator />
+
+      <Section title="Typography">
+        <FontField
+          label="Display"
+          value={draft.fonts.display}
+          onChange={(v) =>
+            update((d) => {
+              d.fonts.display = v;
+            }, 'design:fonts.display')
+          }
+        />
+        <FontField
+          label="Body"
+          value={draft.fonts.body}
+          onChange={(v) =>
+            update((d) => {
+              d.fonts.body = v;
+            }, 'design:fonts.body')
+          }
+        />
+        <SliderField
+          label="Hero"
+          value={draft.typeScale.hero}
+          min={48}
+          max={240}
+          step={2}
+          suffix="px"
+          onChange={(n) =>
+            update((d) => {
+              d.typeScale.hero = n;
+            }, 'design:typeScale.hero')
+          }
+        />
+        <SliderField
+          label="Body"
+          value={draft.typeScale.body}
+          min={16}
+          max={72}
+          step={1}
+          suffix="px"
+          onChange={(n) =>
+            update((d) => {
+              d.typeScale.body = n;
+            }, 'design:typeScale.body')
+          }
+        />
+      </Section>
+
+      <Separator />
+
+      <Section title="Shape">
+        <SliderField
+          label="Radius"
+          value={draft.radius.md}
+          min={0}
+          max={80}
+          step={1}
+          suffix="px"
+          onChange={(n) =>
+            update((d) => {
+              d.radius.md = n;
+            }, 'design:radius.md')
+          }
+        />
+      </Section>
+    </PanelShell>
+  );
+}
+
+export function DesignToggleButton({
+  active,
+  onToggle,
+}: {
+  active: boolean;
+  onToggle: () => void;
+}) {
+  if (import.meta.env.PROD) return null;
+  return (
+    <Button
+      size="sm"
+      variant={active ? 'default' : 'ghost'}
+      onClick={onToggle}
+      data-design-ui
+      title="Design tokens"
+    >
+      <Palette className="size-3.5" />
+      <span className="hidden md:inline">Design</span>
+    </Button>
+  );
+}
+
+function ColorField({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const [hexDraft, setHexDraft] = useState(value);
+  useEffect(() => setHexDraft(value), [value]);
+
+  return (
+    <Field label={label}>
+      <label className="relative inline-flex size-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border bg-background shadow-xs">
+        <span className="size-5 rounded-sm" style={{ backgroundColor: value }} />
+        <input
+          type="color"
+          value={normalizeHex(value)}
+          onChange={(e) => onChange(e.target.value)}
+          className="absolute inset-0 cursor-pointer opacity-0"
+        />
+      </label>
+      <Input
+        type="text"
+        value={hexDraft}
+        onChange={(e) => {
+          const v = e.target.value;
+          setHexDraft(v);
+          if (/^#[0-9a-fA-F]{6}$/.test(v)) onChange(v);
+        }}
+        onBlur={() => {
+          if (!/^#[0-9a-fA-F]{6}$/.test(hexDraft)) setHexDraft(value);
+        }}
+        className="h-8 flex-1 font-mono text-[11px] uppercase"
+        spellCheck={false}
+      />
+    </Field>
+  );
+}
+
+function FontField({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const matched = FONT_PRESETS.find((p) => p.value === value);
+  return (
+    <Field label={label}>
+      <Select
+        value={matched ? matched.value : '__custom__'}
+        onValueChange={(v) => {
+          if (v !== '__custom__') onChange(v);
+        }}
+      >
+        <SelectTrigger size="sm" className="h-8 flex-1 text-xs">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {FONT_PRESETS.map((p) => (
+            <SelectItem key={p.label} value={p.value} className="text-xs">
+              {p.label}
+            </SelectItem>
+          ))}
+          {!matched && (
+            <SelectItem value="__custom__" className="text-xs">
+              Custom…
+            </SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    </Field>
+  );
+}
+
+function SliderField({
+  label,
+  value,
+  min,
+  max,
+  step = 1,
+  suffix,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  suffix?: string;
+  onChange: (n: number) => void;
+}) {
+  return (
+    <Field label={label}>
+      <Slider
+        min={min}
+        max={max}
+        step={step}
+        value={[value]}
+        onValueChange={([v]) => onChange(v ?? value)}
+        className="flex-1"
+      />
+      <NumberField
+        value={value}
+        onChange={onChange}
+        min={min}
+        max={max}
+        step={step}
+        suffix={suffix}
+      />
+    </Field>
+  );
+}
+
+function normalizeHex(value: string): string {
+  if (/^#[0-9a-fA-F]{6}$/.test(value)) return value;
+  if (/^#[0-9a-fA-F]{3}$/.test(value)) {
+    const r = value[1];
+    const g = value[2];
+    const b = value[3];
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  return '#000000';
+}