@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/ThemeCustomizerPanel.tsx

@@ -14,197 +14,32 @@
  *   else (templateHints, layoutOverrides, persistentLayers, individual
  *   colorSchemes, animation defaults) inherits from the compiler's
  *   STARTER_THEME and can only be edited by hand-modifying the JSON.
- * - **Industry-standard mental model** — primary / secondary / accent +
- *   derived lighter/darker variants, like Material UI / Tailwind / Radix.
+ * - **Shared editing model** — the draft model, `compileDraft`, and the
+ *   form rows live in `customThemes/themeDraft` + `customThemes/themeControls`,
+ *   shared with the fuller `CustomThemeDialog` (which adds a base-theme
+ *   picker and the N-accent editor).
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { Theme, FontFamily, ThemeSeedColors } from '@bendyline/squisq/schemas';
+import type { Theme, ThemeSeedColors } from '@bendyline/squisq/schemas';
+import { deriveScale, isHex, serializeTheme } from '@bendyline/squisq/schemas';
 import {
-  AVAILABLE_FONT_STACKS,
-  compileTheme,
-  deriveScale,
-  isHex,
-  serializeTheme,
-} from '@bendyline/squisq/schemas';
-
-// ── Preset → schema-value tables ────────────────────────────────────
-
-const BORDER_RADIUS_PRESETS = {
-  sharp: 0,
-  soft: 6,
-  rounded: 16,
-} as const;
-type BorderRadiusPreset = keyof typeof BORDER_RADIUS_PRESETS;
-
-const ANIMATION_SPEED_PRESETS = {
-  static: 0,
-  subtle: 1.4,
-  normal: 1.0,
-  expressive: 0.7,
-} as const;
-type AnimationSpeedPreset = keyof typeof ANIMATION_SPEED_PRESETS;
-
-const TEXT_SHADOW_PRESETS = {
-  off: false,
-  on: true,
-} as const;
-type TextShadowPreset = keyof typeof TEXT_SHADOW_PRESETS;
-
-const CONTRAST_PRESETS = ['subtle', 'balanced', 'high'] as const;
-type ContrastPreset = (typeof CONTRAST_PRESETS)[number];
-
-const FALLBACK_OPTIONS = ['sans-serif', 'serif', 'monospace', 'system-ui'] as const;
-type FallbackOption = (typeof FALLBACK_OPTIONS)[number];
-
-// ── Draft state — reflects the editable subset of the schema ────────
-
-interface CustomFontInput {
-  kind: 'curated' | 'custom';
-  stackId?: string;
-  customName?: string;
-  customFallback?: FallbackOption;
-}
-
-interface Draft {
-  name: string;
-  seeds: ThemeSeedColors;
-  titleFont: CustomFontInput;
-  bodyFont: CustomFontInput;
-  borderRadius: BorderRadiusPreset;
-  animationSpeed: AnimationSpeedPreset;
-  textShadow: TextShadowPreset;
-  contrast: ContrastPreset;
-}
-
-const DEFAULT_DRAFT: Draft = {
-  name: 'My Theme',
-  seeds: {
-    primary: '#3182ce',
-    secondary: '#4a5568',
-    accent: '#63b3ed',
-    background: '#1a202c',
-    text: '#f7fafc',
-  },
-  titleFont: { kind: 'curated', stackId: 'system-serif' },
-  bodyFont: { kind: 'curated', stackId: 'system-sans' },
-  borderRadius: 'soft',
-  animationSpeed: 'normal',
-  textShadow: 'on',
-  contrast: 'balanced',
-};
-
-function findRadiusPreset(value: number | undefined): BorderRadiusPreset {
-  if (value === undefined) return 'soft';
-  let best: BorderRadiusPreset = 'soft';
-  let bestDist = Infinity;
-  (Object.entries(BORDER_RADIUS_PRESETS) as [BorderRadiusPreset, number][]).forEach(([k, v]) => {
-    const d = Math.abs(v - value);
-    if (d < bestDist) {
-      best = k;
-      bestDist = d;
-    }
-  });
-  return best;
-}
-
-function findAnimationPreset(value: number | undefined): AnimationSpeedPreset {
-  if (value === undefined || value === 0) return value === 0 ? 'static' : 'normal';
-  let best: AnimationSpeedPreset = 'normal';
-  let bestDist = Infinity;
-  (Object.entries(ANIMATION_SPEED_PRESETS) as [AnimationSpeedPreset, number][]).forEach(
-    ([k, v]) => {
-      if (v === 0) return; // 'static' handled above
-      const d = Math.abs(v - value);
-      if (d < bestDist) {
-        best = k;
-        bestDist = d;
-      }
-    },
-  );
-  return best;
-}
-
-function fontFamilyToInput(f: FontFamily | undefined, fallbackStackId: string): CustomFontInput {
-  if (!f) return { kind: 'curated', stackId: fallbackStackId };
-  if ('stackId' in f) return { kind: 'curated', stackId: f.stackId };
-  if ('custom' in f)
-    return {
-      kind: 'custom',
-      customName: f.custom.name,
-      customFallback: f.custom.fallback,
-    };
-  return { kind: 'curated', stackId: fallbackStackId };
-}
-
-function inputToFontFamily(input: CustomFontInput): FontFamily {
-  if (input.kind === 'curated') {
-    return { stackId: input.stackId ?? 'system-sans' };
-  }
-  return {
-    custom: {
-      name: input.customName ?? 'Sans',
-      fallback: input.customFallback ?? 'sans-serif',
-    },
-  };
-}
-
-function themeToDraft(theme: Theme | null): Draft {
-  if (!theme) return { ...DEFAULT_DRAFT };
-  const seeds: ThemeSeedColors = theme.seedColors ?? {
-    primary: theme.colors.primary,
-    secondary: theme.colors.secondary,
-    accent: theme.colors.highlight,
-    background: theme.colors.background,
-    text: theme.colors.text,
-  };
-  return {
-    name: theme.name,
-    seeds: {
-      primary: seeds.primary,
-      secondary: seeds.secondary,
-      accent: seeds.accent,
-      background: seeds.background,
-      text: seeds.text,
-    },
-    titleFont: fontFamilyToInput(theme.typography.titleFont, 'system-serif'),
-    bodyFont: fontFamilyToInput(theme.typography.bodyFont, 'system-sans'),
-    borderRadius: findRadiusPreset(theme.style.borderRadius),
-    animationSpeed: findAnimationPreset(theme.style.animationSpeed),
-    textShadow: theme.style.textShadow === false ? 'off' : 'on',
-    contrast: 'balanced',
-  };
-}
-
-function slugify(s: string): string {
-  return (
-    s
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/^-+|-+$/g, '') || 'custom'
-  );
-}
-
-function compileDraft(draft: Draft, baseId?: string): Theme {
-  const id = baseId && baseId.startsWith('custom-') ? baseId : `custom-${slugify(draft.name)}`;
-  return compileTheme(
-    {
-      id,
-      name: draft.name,
-      seedColors: draft.seeds,
-      typography: {
-        titleFont: inputToFontFamily(draft.titleFont),
-        bodyFont: inputToFontFamily(draft.bodyFont),
-      },
-      style: {
-        borderRadius: BORDER_RADIUS_PRESETS[draft.borderRadius],
-        animationSpeed: ANIMATION_SPEED_PRESETS[draft.animationSpeed],
-        textShadow: TEXT_SHADOW_PRESETS[draft.textShadow],
-      },
-    },
-    { contrast: draft.contrast },
-  );
-}
+  type Draft,
+  DEFAULT_DRAFT,
+  themeToDraft,
+  compileDraft,
+  BORDER_RADIUS_PRESETS,
+  ANIMATION_SPEED_PRESETS,
+  TEXT_SHADOW_PRESETS,
+  CONTRAST_PRESETS,
+  IMAGE_TREATMENT_PRESETS,
+  type BorderRadiusPreset,
+  type AnimationSpeedPreset,
+  type TextShadowPreset,
+  type ContrastPreset,
+  type ImageTreatmentPreset,
+} from './customThemes/themeDraft';
+import { Section, SeedColorRow, FontPicker, PresetRow } from './customThemes/themeControls';
 
 // ── Component ───────────────────────────────────────────────────────
 
@@ -257,7 +92,7 @@ export function ThemeCustomizerPanel({
       setDraft((prev) => {
         const next = typeof patch === 'function' ? patch(prev) : { ...prev, ...patch };
         try {
-          const compiled = compileDraft(next, value?.id);
+          const compiled = compileDraft(next, { existingId: value?.id });
           onChange(compiled);
         } catch {
           // Invalid intermediate state (e.g., bad hex while typing) — skip emit.
@@ -277,7 +112,7 @@ export function ThemeCustomizerPanel({
 
   const handleSave = useCallback(() => {
     try {
-      const compiled = compileDraft(draft, value?.id);
+      const compiled = compileDraft(draft, { existingId: value?.id });
       onSave?.(compiled, serializeTheme(compiled));
     } catch {
       // Validation should already have surfaced via the disabled state.
@@ -424,6 +259,12 @@ export function ThemeCustomizerPanel({
                 options={CONTRAST_PRESETS as readonly ContrastPreset[]}
                 onChange={(v) => updateDraft({ contrast: v })}
               />
+              <PresetRow
+                label="Image grade"
+                value={draft.imageTreatment}
+                options={IMAGE_TREATMENT_PRESETS as readonly ImageTreatmentPreset[]}
+                onChange={(v) => updateDraft({ imageTreatment: v })}
+              />
             </Section>
           </div>
 
@@ -446,150 +287,3 @@ export function ThemeCustomizerPanel({
     </div>
   );
 }
-
-// ── Subcomponents ───────────────────────────────────────────────────
-
-function Section({
-  title,
-  hint,
-  children,
-}: {
-  title: string;
-  hint?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="squisq-theme-customizer-section">
-      <div className="squisq-theme-customizer-section-title">{title}</div>
-      {hint && <div className="squisq-theme-customizer-section-hint">{hint}</div>}
-      <div className="squisq-theme-customizer-section-body">{children}</div>
-    </div>
-  );
-}
-
-function SeedColorRow({
-  label,
-  value,
-  onChange,
-}: {
-  label: string;
-  value: string;
-  onChange: (hex: string) => void;
-}) {
-  const safeValue = isHex(value) ? value : '#000000';
-  return (
-    <label className="squisq-theme-customizer-row">
-      <span className="squisq-theme-customizer-row-label">{label}</span>
-      <input
-        type="color"
-        className="squisq-theme-customizer-color"
-        value={safeValue}
-        onChange={(e) => onChange(e.target.value)}
-      />
-      <input
-        type="text"
-        className="squisq-theme-customizer-input squisq-theme-customizer-input--hex"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        spellCheck={false}
-        aria-label={`${label} hex value`}
-      />
-    </label>
-  );
-}
-
-function FontPicker({
-  label,
-  value,
-  onChange,
-}: {
-  label: string;
-  value: CustomFontInput;
-  onChange: (next: CustomFontInput) => void;
-}) {
-  return (
-    <div className="squisq-theme-customizer-row squisq-theme-customizer-row--font">
-      <span className="squisq-theme-customizer-row-label">{label}</span>
-      <select
-        className="squisq-theme-customizer-input"
-        value={value.kind === 'custom' ? '__custom__' : (value.stackId ?? '')}
-        onChange={(e) => {
-          const v = e.target.value;
-          if (v === '__custom__') {
-            onChange({
-              kind: 'custom',
-              customName: value.customName ?? '',
-              customFallback: value.customFallback ?? 'sans-serif',
-            });
-          } else {
-            onChange({ kind: 'curated', stackId: v });
-          }
-        }}
-        aria-label={`${label} font`}
-      >
-        {AVAILABLE_FONT_STACKS.map((stack) => (
-          <option key={stack.id} value={stack.id}>
-            {stack.label}
-          </option>
-        ))}
-        <option value="__custom__">Custom…</option>
-      </select>
-      {value.kind === 'custom' && (
-        <>
-          <input
-            type="text"
-            className="squisq-theme-customizer-input"
-            placeholder="Font name"
-            value={value.customName ?? ''}
-            onChange={(e) => onChange({ ...value, customName: e.target.value })}
-            aria-label={`${label} custom font name`}
-          />
-          <select
-            className="squisq-theme-customizer-input"
-            value={value.customFallback ?? 'sans-serif'}
-            onChange={(e) =>
-              onChange({ ...value, customFallback: e.target.value as FallbackOption })
-            }
-            aria-label={`${label} custom font fallback`}
-          >
-            {FALLBACK_OPTIONS.map((opt) => (
-              <option key={opt} value={opt}>
-                {opt}
-              </option>
-            ))}
-          </select>
-        </>
-      )}
-    </div>
-  );
-}
-
-function PresetRow<T extends string>({
-  label,
-  value,
-  options,
-  onChange,
-}: {
-  label: string;
-  value: T;
-  options: readonly T[];
-  onChange: (v: T) => void;
-}) {
-  return (
-    <label className="squisq-theme-customizer-row">
-      <span className="squisq-theme-customizer-row-label">{label}</span>
-      <select
-        className="squisq-theme-customizer-input"
-        value={value}
-        onChange={(e) => onChange(e.target.value as T)}
-        aria-label={label}
-      >
-        {options.map((o) => (
-          <option key={o} value={o}>
-            {o}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-}

package/src/ThemePicker.tsx

@@ -41,6 +41,18 @@ export interface ThemePickerProps {
   variant?: 'compact' | 'full';
   /** Accessible label, e.g. "Theme". */
   ariaLabel?: string;
+  /**
+   * User-authored themes to list in a "Custom" group (doc + library, from
+   * `useCustomThemes().allThemes`). When omitted, only built-ins show — so
+   * the base-theme picker and other embeds stay built-ins only.
+   */
+  customThemes?: Theme[];
+  /** When provided, renders a "+ Create custom theme" row that calls this. */
+  onCreateCustom?: () => void;
+  /** Per-custom-card edit affordance (opens the designer for that theme). */
+  onEditCustom?: (id: string) => void;
+  /** Per-custom-card delete affordance. */
+  onDeleteCustom?: (id: string) => void;
 }
 
 // ── Helpers ───────────────────────────────────────────────────────
@@ -113,15 +125,37 @@ export function ThemePicker({
   includeDefault,
   variant = 'compact',
   ariaLabel = 'Theme',
+  customThemes,
+  onCreateCustom,
+  onEditCustom,
+  onDeleteCustom,
 }: ThemePickerProps) {
   const [open, setOpen] = useState(false);
   const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
   const triggerRef = useRef<HTMLButtonElement>(null);
 
+  // Custom entries are computed per-render (built-ins stay static at module
+  // load). A custom theme is already a full Theme, so it becomes an entry
+  // directly — no `resolveTheme` needed.
+  const customEntries = useMemo<ThemeEntry[]>(
+    () =>
+      (customThemes ?? []).map((t) => ({
+        id: t.id,
+        name: t.name,
+        description: t.description,
+        theme: t,
+      })),
+    [customThemes],
+  );
+  const findEntry = useCallback(
+    (id: string): ThemeEntry | undefined => entryById(id) ?? customEntries.find((e) => e.id === id),
+    [customEntries],
+  );
+
   const selectedEntry = useMemo<ThemeEntry | null>(() => {
     if (!value) return null;
-    return entryById(value) ?? null;
-  }, [value]);
+    return findEntry(value) ?? null;
+  }, [value, findEntry]);
 
   // The trigger always wants *something* to preview. When `includeDefault`
   // is on and the value is empty, we treat the selection as the implicit
@@ -142,7 +176,12 @@ export function ThemePicker({
     const gap = 4;
     const vw = window.innerWidth;
     const vh = window.innerHeight;
-    const popoverWidth = Math.max(280, rect.width);
+    // Aim for a multi-column popover, but never wider than the viewport.
+    // The CSS grid packs as many theme cards per row as this width allows,
+    // so clamping to the available width makes a narrow window collapse to
+    // fewer columns (down to one) instead of overrunning the edge.
+    const available = vw - margin * 2;
+    const popoverWidth = Math.min(available, Math.max(560, rect.width));
     const maxLeft = Math.max(margin, vw - popoverWidth - margin);
     const left = Math.min(Math.max(margin, rect.left), maxLeft);
 
@@ -267,6 +306,76 @@ export function ThemePicker({
               </span>
             </button>
           ))}
+          {customEntries.length > 0 && (
+            <div className="squisq-theme-picker-group-label">Custom</div>
+          )}
+          {customEntries.map((entry) => (
+            <div key={entry.id} className="squisq-theme-picker-custom-wrap">
+              <button
+                type="button"
+                role="option"
+                aria-selected={value === entry.id}
+                aria-label={entry.name}
+                className={`squisq-theme-picker-row${value === entry.id ? ' squisq-theme-picker-row--selected' : ''}`}
+                onClick={() => handleSelect(entry.id)}
+                title={entry.description ?? entry.name}
+              >
+                <ThemeNameChip theme={entry.theme} label={entry.name} />
+                <span className="squisq-theme-picker-row-meta">
+                  <Swatches theme={entry.theme} />
+                  {entry.description && (
+                    <span className="squisq-theme-picker-row-desc">{entry.description}</span>
+                  )}
+                </span>
+              </button>
+              {(onEditCustom || onDeleteCustom) && (
+                <span className="squisq-theme-picker-card-actions">
+                  {onEditCustom && (
+                    <button
+                      type="button"
+                      className="squisq-theme-picker-card-action"
+                      onClick={() => onEditCustom(entry.id)}
+                      aria-label={`Edit ${entry.name}`}
+                      title="Edit theme"
+                    >
+                      ✎
+                    </button>
+                  )}
+                  {onDeleteCustom && (
+                    <button
+                      type="button"
+                      className="squisq-theme-picker-card-action"
+                      onClick={() => onDeleteCustom(entry.id)}
+                      aria-label={`Delete ${entry.name}`}
+                      title="Delete theme"
+                    >
+                      ×
+                    </button>
+                  )}
+                </span>
+              )}
+            </div>
+          ))}
+          {onCreateCustom && (
+            <button
+              type="button"
+              className="squisq-theme-picker-row squisq-theme-picker-create"
+              onClick={() => {
+                setOpen(false);
+                onCreateCustom();
+              }}
+            >
+              <span className="squisq-theme-picker-create-plus" aria-hidden="true">
+                +
+              </span>
+              <span className="squisq-theme-picker-row-meta">
+                <span className="squisq-theme-picker-row-name">Create custom theme…</span>
+                <span className="squisq-theme-picker-row-desc">
+                  Design your own colors, accents, and fonts.
+                </span>
+              </span>
+            </button>
+          )}
         </div>,
         document.body,
       )

package/src/TimelineBlockPreview.tsx

@@ -0,0 +1,37 @@
+/**
+ * TimelineBlockPreview
+ *
+ * Renders a tiny slideshow-style thumbnail of a single block, used to fill each
+ * bar on the timeline. Reuses the same rendering path as the inline preview
+ * gutter and the slideshow: `buildPreviewDoc` → `getLayers` → `BlockRenderer`.
+ */
+
+import { memo } from 'react';
+import type { Block, ViewportConfig, MediaProvider } from '@bendyline/squisq/schemas';
+import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import { BlockRenderer, MediaContext } from '@bendyline/squisq-react';
+
+export interface BlockThumbnailProps {
+  /** A block already resolved via `resolveBlockVisual`. */
+  visual: Block;
+  viewport?: ViewportConfig;
+  basePath?: string;
+  mediaProvider?: MediaProvider | null;
+}
+
+/**
+ * Memoized so the SVG only re-renders when the resolved block changes — keeps
+ * the timeline smooth while dragging (where bar geometry updates every frame).
+ */
+export const BlockThumbnail = memo(function BlockThumbnail({
+  visual,
+  viewport = VIEWPORT_PRESETS.landscape,
+  basePath = '/',
+  mediaProvider = null,
+}: BlockThumbnailProps) {
+  return (
+    <MediaContext.Provider value={mediaProvider}>
+      <BlockRenderer block={visual} blockTime={0} basePath={basePath} viewport={viewport} />
+    </MediaContext.Provider>
+  );
+});