@open-aippt/core 1.13.2

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

@@ -0,0 +1,148 @@
+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 '../../lib/design';
+import { shuffleDesign } from '../../lib/design-presets';
+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;
+  shuffle: () => 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;
+
+  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]);
+
+  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))
+      .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,
+    shuffle,
+  };
+
+  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,349 @@
+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';
+import { useLocale } from '@/lib/use-locale';
+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, shuffle } = useDesignPanelState();
+  const { mounted, animVisible } = usePanelMount(open);
+  const t = useLocale();
+
+  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">
+              {t.stylePanel.designTokens}
+            </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">
+                {t.stylePanel.draftBadge}
+              </span>
+            )}
+            {dirty && (
+              <span
+                className="size-1.5 rounded-full bg-brand"
+                title={t.stylePanel.unsavedTitle}
+                aria-hidden
+              />
+            )}
+          </div>
+          <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={
+        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={t.stylePanel.colorsSection}>
+        <ColorField
+          label={t.stylePanel.backgroundLabel}
+          value={draft.palette.bg}
+          onChange={(v) =>
+            update((d) => {
+              d.palette.bg = v;
+            }, 'design:palette.bg')
+          }
+        />
+        <ColorField
+          label={t.stylePanel.textLabel}
+          value={draft.palette.text}
+          onChange={(v) =>
+            update((d) => {
+              d.palette.text = v;
+            }, 'design:palette.text')
+          }
+        />
+        <ColorField
+          label={t.stylePanel.accentLabel}
+          value={draft.palette.accent}
+          onChange={(v) =>
+            update((d) => {
+              d.palette.accent = v;
+            }, 'design:palette.accent')
+          }
+        />
+      </Section>
+
+      <Separator />
+
+      <Section title={t.stylePanel.typographySection}>
+        <FontField
+          label={t.stylePanel.displayFontLabel}
+          value={draft.fonts.display}
+          onChange={(v) =>
+            update((d) => {
+              d.fonts.display = v;
+            }, 'design:fonts.display')
+          }
+        />
+        <FontField
+          label={t.stylePanel.bodyFontLabel}
+          value={draft.fonts.body}
+          onChange={(v) =>
+            update((d) => {
+              d.fonts.body = v;
+            }, 'design:fonts.body')
+          }
+        />
+        <SliderField
+          label={t.stylePanel.heroLabel}
+          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={t.stylePanel.bodyLabel}
+          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={t.stylePanel.shapeSection}>
+        <SliderField
+          label={t.stylePanel.radiusLabel}
+          value={draft.radius}
+          min={0}
+          max={80}
+          step={1}
+          suffix="px"
+          onChange={(n) =>
+            update((d) => {
+              d.radius = n;
+            }, 'design:radius')
+          }
+        />
+      </Section>
+    </PanelShell>
+  );
+}
+
+export function DesignToggleButton({
+  active,
+  onToggle,
+}: {
+  active: boolean;
+  onToggle: () => void;
+}) {
+  const t = useLocale();
+  if (import.meta.env.PROD) return null;
+  return (
+    <Button
+      size="sm"
+      variant={active ? 'default' : 'ghost'}
+      onClick={onToggle}
+      data-design-ui
+      title={t.stylePanel.designToggleTitle}
+    >
+      <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>
+  );
+}
+
+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);
+  const tFont = useLocale();
+  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">
+              {tFont.stylePanel.fontPresetCustom}
+            </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';
+}

package/src/app/components/style-panel/use-design.ts

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { DesignSystem } from '../../lib/design';
+
+type FetchedState = {
+  design: DesignSystem | null;
+  exists: boolean;
+  warning: string | null;
+  loaded: boolean;
+};
+
+export type UseDesignReturn = FetchedState & {
+  refresh: () => Promise<void>;
+  save: (patch: Partial<DesignSystem>) => Promise<{ ok: boolean; error?: string }>;
+  reset: () => Promise<{ ok: boolean; error?: string }>;
+};
+
+export function useDesign(slideId: string): UseDesignReturn {
+  const [state, setState] = useState<FetchedState>({
+    design: null,
+    exists: false,
+    warning: null,
+    loaded: false,
+  });
+  const slideIdRef = useRef(slideId);
+  slideIdRef.current = slideId;
+
+  const refresh = useCallback(async () => {
+    const id = slideIdRef.current;
+    if (!id) return;
+    try {
+      const res = await fetch(`/__design?slideId=${encodeURIComponent(id)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const body = (await res.json()) as {
+        design: DesignSystem;
+        exists: boolean;
+        warning: string | null;
+      };
+      setState({
+        design: body.design,
+        exists: body.exists,
+        warning: body.warning,
+        loaded: true,
+      });
+    } catch (err) {
+      setState((s) => ({ ...s, warning: String((err as Error).message), loaded: true }));
+    }
+  }, []);
+
+  useEffect(() => {
+    setState({ design: null, exists: false, warning: null, loaded: false });
+    void refresh();
+  }, [refresh]);
+
+  const save = useCallback(async (patch: Partial<DesignSystem>) => {
+    const id = slideIdRef.current;
+    if (!id) return { ok: false, error: 'no slide id' };
+    try {
+      const res = await fetch(`/__design?slideId=${encodeURIComponent(id)}`, {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ patch }),
+      });
+      const body = (await res.json()) as {
+        ok?: boolean;
+        error?: string;
+        design?: DesignSystem;
+        created?: boolean;
+      };
+      if (!res.ok || !body.ok) {
+        return { ok: false, error: body.error ?? `HTTP ${res.status}` };
+      }
+      if (body.design) {
+        setState((s) => ({
+          ...s,
+          design: body.design ?? s.design,
+          exists: true,
+          warning: null,
+        }));
+      }
+      return { ok: true };
+    } catch (err) {
+      return { ok: false, error: String((err as Error).message) };
+    }
+  }, []);
+
+  const reset = useCallback(async () => {
+    const id = slideIdRef.current;
+    if (!id) return { ok: false, error: 'no slide id' };
+    try {
+      const res = await fetch(`/__design/reset?slideId=${encodeURIComponent(id)}`, {
+        method: 'POST',
+      });
+      const body = (await res.json()) as { ok?: boolean; error?: string; design?: DesignSystem };
+      if (!res.ok || !body.ok) {
+        return { ok: false, error: body.error ?? `HTTP ${res.status}` };
+      }
+      if (body.design) {
+        setState((s) => ({
+          ...s,
+          design: body.design ?? s.design,
+          exists: true,
+          warning: null,
+        }));
+      }
+      return { ok: true };
+    } catch (err) {
+      return { ok: false, error: String((err as Error).message) };
+    }
+  }, []);
+
+  return { ...state, refresh, save, reset };
+}

package/src/app/components/theme-toggle.tsx

@@ -0,0 +1,59 @@
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import { buttonVariants } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const t = useLocale();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        type="button"
+        aria-label={t.themeToggle.toggleAria}
+        title={t.themeToggle.title}
+        className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), 'relative')}
+      >
+        <Sun className="size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+        <Moon className="absolute size-3.5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[140px]">
+        <DropdownMenuItem
+          onSelect={() => setTheme('light')}
+          data-active={mounted && theme === 'light'}
+        >
+          <Sun />
+          {t.themeToggle.light}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => setTheme('dark')}
+          data-active={mounted && theme === 'dark'}
+        >
+          <Moon />
+          {t.themeToggle.dark}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => setTheme('system')}
+          data-active={mounted && theme === 'system'}
+        >
+          <Monitor />
+          {t.themeToggle.system}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}