@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/customThemes/themeControls.tsx

@@ -1,229 +0,0 @@
-/**
- * themeControls — presentational form rows shared by the ThemeCustomizerPanel
- * popover and the CustomThemeDialog. Pure/controlled; they carry the existing
- * `squisq-theme-customizer-*` classes so both surfaces style identically.
- */
-
-import { AVAILABLE_FONT_STACKS, isHex } from '@bendyline/squisq/schemas';
-import {
-  type CustomFontInput,
-  type FallbackOption,
-  type AccentInput,
-  FALLBACK_OPTIONS,
-  nextAccent,
-} from './themeDraft';
-
-export 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>
-  );
-}
-
-export 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>
-  );
-}
-
-export function FontPicker({
-  label,
-  value,
-  onChange,
-}: {
-  label: string;
-  value: CustomFontInput;
-  onChange: (next: CustomFontInput) => void;
-}) {
-  // Render the closed <select> (and each option) in the font it names, so the
-  // dropdown doubles as a live font preview. Faces are provided by the host
-  // (the site links `/fonts/fonts.css`; the same fonts the player renders
-  // with) — no external font fetch here. Unloaded faces fall back gracefully.
-  const selectedFamily =
-    value.kind === 'curated'
-      ? AVAILABLE_FONT_STACKS.find((s) => s.id === value.stackId)?.family
-      : undefined;
-
-  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"
-        style={selectedFamily ? { fontFamily: selectedFamily } : undefined}
-        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} style={{ fontFamily: stack.family }}>
-            {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>
-  );
-}
-
-export 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>
-  );
-}
-
-/**
- * AccentEditor — the "N accent colors" list. Add / edit / remove accent
- * colors; each maps to a per-block color scheme in the compiled theme.
- */
-export function AccentEditor({
-  accents,
-  onChange,
-}: {
-  accents: AccentInput[];
-  onChange: (next: AccentInput[]) => void;
-}) {
-  const setColor = (idx: number, color: string) =>
-    onChange(accents.map((a, i) => (i === idx ? { ...a, color } : a)));
-  const remove = (idx: number) => onChange(accents.filter((_, i) => i !== idx));
-  const add = () => onChange([...accents, nextAccent(accents)]);
-
-  return (
-    <div className="squisq-theme-customizer-accents">
-      {accents.map((a, idx) => (
-        <div
-          key={a.key}
-          className="squisq-theme-customizer-row squisq-theme-customizer-row--accent"
-        >
-          <input
-            type="color"
-            className="squisq-theme-customizer-color"
-            value={isHex(a.color) ? a.color : '#000000'}
-            onChange={(e) => setColor(idx, e.target.value)}
-            aria-label={`Accent ${idx + 1}`}
-          />
-          <input
-            type="text"
-            className="squisq-theme-customizer-input squisq-theme-customizer-input--hex"
-            value={a.color}
-            onChange={(e) => setColor(idx, e.target.value)}
-            spellCheck={false}
-            aria-label={`Accent ${idx + 1} hex value`}
-          />
-          <button
-            type="button"
-            className="squisq-theme-customizer-accent-remove"
-            onClick={() => remove(idx)}
-            aria-label={`Remove accent ${idx + 1}`}
-            title="Remove accent"
-          >
-            ×
-          </button>
-        </div>
-      ))}
-      <button
-        type="button"
-        className="squisq-theme-customizer-button squisq-theme-customizer-accent-add"
-        onClick={add}
-      >
-        + Add accent
-      </button>
-    </div>
-  );
-}

package/src/customThemes/themeDraft.ts

@@ -1,288 +0,0 @@
-/**
- * themeDraft — the editable subset of the Theme schema, shared by the
- * ThemeCustomizerPanel popover and the CustomThemeDialog.
- *
- * A `Draft` mirrors the handful of fields a user actually edits (name, seed
- * colors, N accents, fonts, style presets, and a base theme to inherit from).
- * `compileDraft` turns it into a full validated `Theme` via `compileTheme`;
- * everything the draft doesn't mention inherits from the chosen base (or the
- * compiler's neutral STARTER_THEME when no base is picked).
- */
-
-import type {
-  Theme,
-  FontFamily,
-  ThemeSeedColors,
-  ThemeColorScheme,
-} from '@bendyline/squisq/schemas';
-import { accentToColorScheme, compileTheme } from '@bendyline/squisq/schemas';
-
-// ── Preset → schema-value tables ────────────────────────────────────
-
-export const BORDER_RADIUS_PRESETS = {
-  sharp: 0,
-  soft: 6,
-  rounded: 16,
-} as const;
-export type BorderRadiusPreset = keyof typeof BORDER_RADIUS_PRESETS;
-
-export const ANIMATION_SPEED_PRESETS = {
-  static: 0,
-  subtle: 1.4,
-  normal: 1.0,
-  expressive: 0.7,
-} as const;
-export type AnimationSpeedPreset = keyof typeof ANIMATION_SPEED_PRESETS;
-
-export const TEXT_SHADOW_PRESETS = {
-  off: false,
-  on: true,
-} as const;
-export type TextShadowPreset = keyof typeof TEXT_SHADOW_PRESETS;
-
-export const CONTRAST_PRESETS = ['subtle', 'balanced', 'high'] as const;
-export type ContrastPreset = (typeof CONTRAST_PRESETS)[number];
-
-export const IMAGE_TREATMENT_PRESETS = ['none', 'mono', 'duotone', 'warm', 'cool'] as const;
-export type ImageTreatmentPreset = (typeof IMAGE_TREATMENT_PRESETS)[number];
-
-export const FALLBACK_OPTIONS = ['sans-serif', 'serif', 'monospace', 'system-ui'] as const;
-export type FallbackOption = (typeof FALLBACK_OPTIONS)[number];
-
-// ── Draft state — reflects the editable subset of the schema ────────
-
-export interface CustomFontInput {
-  kind: 'curated' | 'custom';
-  stackId?: string;
-  customName?: string;
-  customFallback?: FallbackOption;
-}
-
-/** One editable accent: a color plus the colorScheme key it maps to. */
-export interface AccentInput {
-  key: string;
-  color: string;
-}
-
-export interface Draft {
-  name: string;
-  /** Id of the base theme this draft inherits render style / layout from. */
-  baseId?: string;
-  seeds: ThemeSeedColors;
-  /** The "N accents" — each becomes a `colorSchemes` entry. */
-  accents: AccentInput[];
-  /** True once the user has touched the accent list; gates wholesale replace. */
-  accentsEdited: boolean;
-  titleFont: CustomFontInput;
-  bodyFont: CustomFontInput;
-  borderRadius: BorderRadiusPreset;
-  animationSpeed: AnimationSpeedPreset;
-  textShadow: TextShadowPreset;
-  contrast: ContrastPreset;
-  imageTreatment: ImageTreatmentPreset;
-}
-
-export const DEFAULT_DRAFT: Draft = {
-  name: 'My Theme',
-  seeds: {
-    primary: '#3182ce',
-    secondary: '#4a5568',
-    accent: '#63b3ed',
-    background: '#1a202c',
-    text: '#f7fafc',
-  },
-  accents: [],
-  accentsEdited: false,
-  titleFont: { kind: 'curated', stackId: 'system-serif' },
-  bodyFont: { kind: 'curated', stackId: 'system-sans' },
-  borderRadius: 'soft',
-  animationSpeed: 'normal',
-  textShadow: 'on',
-  contrast: 'balanced',
-  imageTreatment: 'none',
-};
-
-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',
-    },
-  };
-}
-
-/** Read a theme's per-block color schemes back into the editable accent list. */
-export function accentsFromTheme(theme: Theme | null): AccentInput[] {
-  if (!theme) return [];
-  return Object.entries(theme.colorSchemes).map(([key, scheme]) => ({ key, color: scheme.accent }));
-}
-
-/**
- * Expand one accent color into a full `{bg, text, accent}` color scheme.
- * Delegates to core's `accentToColorScheme` so file-import theme inference
- * and the editor's accent list derive identical schemes.
- */
-export function schemeFromAccent(accent: string): ThemeColorScheme {
-  return accentToColorScheme(accent);
-}
-
-export 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,
-    baseId: theme.basedOn,
-    seeds: {
-      primary: seeds.primary,
-      secondary: seeds.secondary,
-      accent: seeds.accent,
-      background: seeds.background,
-      text: seeds.text,
-    },
-    accents: accentsFromTheme(theme),
-    // Populated for display, but NOT treated as authored by default: with
-    // `accentsEdited` false the compiled theme inherits the base's color
-    // schemes verbatim. The dialog flips this true when the user actually
-    // edits an accent (or when re-opening an existing custom theme, so its
-    // own accents survive a re-save). The popover panel never edits accents,
-    // so it always inherits — preserving its prior behavior.
-    accentsEdited: false,
-    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',
-    imageTreatment: theme.style.imageTreatment?.type ?? 'none',
-  };
-}
-
-export function slugify(s: string): string {
-  return (
-    s
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/^-+|-+$/g, '') || 'custom'
-  );
-}
-
-/**
- * Draft patch from a theme inferred from an imported office file: name,
- * seeds, accents (marked authored so the file's schemes survive a re-save),
- * and fonts. Deliberately leaves `baseId` and the style presets untouched —
- * the user's in-progress choices there aren't the file's to overwrite.
- */
-export function draftPatchFromImportedTheme(theme: Theme): Partial<Draft> {
-  const d = themeToDraft(theme);
-  return {
-    name: d.name,
-    seeds: d.seeds,
-    accents: d.accents,
-    accentsEdited: d.accents.length > 0,
-    titleFont: d.titleFont,
-    bodyFont: d.bodyFont,
-  };
-}
-
-export interface CompileDraftOptions {
-  /** Existing id to preserve across edits (keeps `squisq-theme` selection stable). */
-  existingId?: string;
-  /** Base theme to inherit render style / color schemes / typography from. */
-  base?: Theme;
-}
-
-/**
- * Compile a `Draft` into a full validated `Theme`. Colors derive from the seed
- * colors; the accent list (when edited) replaces `colorSchemes` wholesale; and
- * everything else inherits from `opts.base` (or the neutral STARTER_THEME).
- */
-export function compileDraft(draft: Draft, opts: CompileDraftOptions = {}): Theme {
-  const existingId = opts.existingId;
-  const id =
-    existingId && existingId.startsWith('custom-') ? existingId : `custom-${slugify(draft.name)}`;
-
-  const colorSchemes =
-    draft.accentsEdited && draft.accents.length > 0
-      ? Object.fromEntries(draft.accents.map((a) => [a.key, schemeFromAccent(a.color)]))
-      : undefined;
-
-  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],
-        ...(draft.imageTreatment !== 'none'
-          ? { imageTreatment: { type: draft.imageTreatment, strength: 0.5 } }
-          : {}),
-      },
-      ...(colorSchemes ? { colorSchemes } : {}),
-    },
-    { contrast: draft.contrast, base: opts.base },
-  );
-}
-
-/** Add a fresh accent slot with a sensible starting color. */
-export function nextAccent(accents: AccentInput[]): AccentInput {
-  const n = accents.length + 1;
-  return { key: `accent${n}`, color: '#63b3ed' };
-}

package/src/customThemes/useDocCustomThemes.ts

@@ -1,49 +0,0 @@
-/**
- * useDocCustomThemes — read + persist the active doc's custom themes (the
- * list inlined into the doc's frontmatter under `squisq-custom-themes`).
- *
- * The theme analog of `useDocCustomTemplates`. Both the CustomThemeProvider
- * and any manager surface need the same two things: the current
- * `Doc.customThemes` array and a way to write a new list back into the
- * markdown source. Centralizing the frontmatter encoding here keeps call
- * sites from drifting.
- */
-
-import { useCallback, useMemo } from 'react';
-import type { Theme } from '@bendyline/squisq/schemas';
-import {
-  FRONTMATTER_CUSTOM_THEMES_KEY,
-  writeCustomThemesToFrontmatter,
-} from '@bendyline/squisq/doc';
-import { setFrontmatterValues } from '@bendyline/squisq/markdown';
-import { useEditorContext } from '../EditorContext';
-
-export interface DocCustomThemes {
-  /** Custom themes inlined in the active doc's frontmatter. */
-  docThemes: Theme[];
-  /**
-   * Persist a new custom-themes list back into the markdown source's
-   * frontmatter so the doc round-trips through save/load. The whole list is
-   * encoded as a single compact JSON string per the flat YAML frontmatter
-   * parser's constraint.
-   */
-  onDocThemesChange: (next: Theme[]) => void;
-}
-
-export function useDocCustomThemes(): DocCustomThemes {
-  const { doc, markdownSource, setMarkdownSource } = useEditorContext();
-  // Memoized so identity is stable across renders that don't touch
-  // frontmatter — keeps the CustomThemeProvider value stable.
-  const docThemes = useMemo<Theme[]>(() => doc?.customThemes ?? [], [doc?.customThemes]);
-  const onDocThemesChange = useCallback(
-    (next: Theme[]) => {
-      const payload = writeCustomThemesToFrontmatter(next);
-      const updated = setFrontmatterValues(markdownSource, {
-        [FRONTMATTER_CUSTOM_THEMES_KEY]: payload ?? null,
-      });
-      if (updated !== markdownSource) setMarkdownSource(updated);
-    },
-    [markdownSource, setMarkdownSource],
-  );
-  return { docThemes, onDocThemesChange };
-}

package/src/detectMarkdown.ts

@@ -1,62 +0,0 @@
-/**
- * Markdown detection — heuristic for spotting markdown source in pasted text.
- *
- * Used by the WYSIWYG editor's paste handler to decide whether plain-text
- * paste content should be parsed as markdown rather than inserted literally.
- *
- * The heuristic prefers false negatives (treating markdown as plain text)
- * over false positives (mangling plain text that happens to contain a few
- * special characters).
- */
-
-/** Block-level patterns that strongly indicate markdown. Any one is enough. */
-const STRONG_BLOCK_PATTERNS: RegExp[] = [
-  /^#{1,6}\s+\S/, // # Heading
-  /^[-*+]\s+\S/, // - bullet
-  /^\d+\.\s+\S/, // 1. ordered
-  /^>\s+\S/, // > blockquote
-  /^```/, // ``` code fence
-  /^\|.+\|\s*$/, // | table | row |
-  /^[-*+]\s+\[[ xX]\]\s+/, // - [ ] task
-];
-
-/** Inline patterns that are weaker indicators on their own. */
-const INLINE_PATTERNS: RegExp[] = [
-  /\*\*[^*\n]+\*\*/, // **bold**
-  /__[^_\n]+__/, // __bold__
-  /`[^`\n]+`/, // `code`
-  /\[[^\]\n]+\]\([^)\n]+\)/, // [link](url)
-  /!\[[^\]\n]*\]\([^)\n]+\)/, // ![image](url)
-  /~~[^~\n]+~~/, // ~~strike~~
-];
-
-/**
- * Returns true if the text looks like markdown source.
- *
- * Detection rules:
- *  - Any line matching a strong block pattern → yes
- *  - Two or more inline pattern matches anywhere in the text → yes
- *  - Otherwise → no
- */
-export function looksLikeMarkdown(text: string): boolean {
-  if (!text || text.length < 2) return false;
-
-  const lines = text.split(/\r?\n/);
-  for (const line of lines) {
-    const trimmed = line.trim();
-    if (!trimmed) continue;
-    for (const re of STRONG_BLOCK_PATTERNS) {
-      if (re.test(trimmed)) return true;
-    }
-  }
-
-  let inlineHits = 0;
-  for (const re of INLINE_PATTERNS) {
-    if (re.test(text)) {
-      inlineHits++;
-      if (inlineHits >= 2) return true;
-    }
-  }
-
-  return false;
-}