@bendyline/squisq 2.0.1 → 2.2.0

package/src/schemas/themeValidator.ts

@@ -1,426 +0,0 @@
-/**
- * Theme Validator
- *
- * Hand-rolled validator for `Theme` JSON. No dependencies. Produces a
- * flat list of typed errors with JSON paths, suitable for surfacing in
- * the customizer UI or throwing at module init for built-in themes.
- *
- * Design: walk the candidate object, push errors for each violation.
- * Coverage is exhaustive for required fields and shapes; permissive on
- * forward-compatible fields (unknown keys are ignored, not rejected).
- */
-
-import type { Theme, ThemeColorPalette } from './Theme.js';
-import { THEME_SCHEMA_VERSION } from './themeConstants.js';
-import { isHex } from './colorUtils.js';
-import { isTransitionType } from './Transitions.js';
-
-export interface ValidationError {
-  path: string;
-  message: string;
-}
-
-export interface ValidationResult {
-  valid: boolean;
-  errors: ValidationError[];
-  /** Present only when `valid === true`. The same input typed as `Theme`. */
-  theme?: Theme;
-}
-
-const VALID_FALLBACK = new Set(['serif', 'sans-serif', 'monospace', 'system-ui']);
-const VALID_TITLE_WEIGHT = new Set(['normal', 'bold']);
-const VALID_GRADIENT_PRESETS = new Set([
-  'dark-vignette',
-  'radial-dark',
-  'warm-sunset',
-  'cool-blue',
-  'earth-tones',
-]);
-
-class V {
-  errors: ValidationError[] = [];
-  err(path: string, message: string): void {
-    this.errors.push({ path, message });
-  }
-  isObject(v: unknown): v is Record<string, unknown> {
-    return typeof v === 'object' && v !== null && !Array.isArray(v);
-  }
-  isString(v: unknown): v is string {
-    return typeof v === 'string';
-  }
-  isNumber(v: unknown): v is number {
-    return typeof v === 'number' && Number.isFinite(v);
-  }
-  isBoolean(v: unknown): v is boolean {
-    return typeof v === 'boolean';
-  }
-  hex(path: string, v: unknown): void {
-    if (!this.isString(v)) {
-      this.err(path, `expected hex color string, got ${typeof v}`);
-    } else if (!isHex(v)) {
-      this.err(path, `expected #rgb or #rrggbb hex color, got "${v}"`);
-    }
-  }
-
-  palette(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object');
-      return;
-    }
-    const required: (keyof ThemeColorPalette)[] = [
-      'primary',
-      'secondary',
-      'background',
-      'backgroundLight',
-      'text',
-      'textMuted',
-      'highlight',
-      'warning',
-    ];
-    for (const k of required) this.hex(`${path}.${k}`, v[k]);
-  }
-
-  colorScheme(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object');
-      return;
-    }
-    this.hex(`${path}.bg`, v.bg);
-    this.hex(`${path}.text`, v.text);
-    this.hex(`${path}.accent`, v.accent);
-  }
-
-  colorSchemes(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object map');
-      return;
-    }
-    for (const key of Object.keys(v)) {
-      this.colorScheme(`${path}.${key}`, v[key]);
-    }
-  }
-
-  fontFamily(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected FontFamily object ({ stackId } or { custom })');
-      return;
-    }
-    if ('stackId' in v) {
-      if (!this.isString(v.stackId) || v.stackId.length === 0) {
-        this.err(`${path}.stackId`, 'expected non-empty string');
-      }
-      return;
-    }
-    if ('custom' in v) {
-      const c = v.custom;
-      if (!this.isObject(c)) {
-        this.err(`${path}.custom`, 'expected { name, fallback } object');
-        return;
-      }
-      if (!this.isString(c.name) || c.name.length === 0) {
-        this.err(`${path}.custom.name`, 'expected non-empty string');
-      }
-      if (!this.isString(c.fallback) || !VALID_FALLBACK.has(c.fallback)) {
-        this.err(
-          `${path}.custom.fallback`,
-          `expected one of: serif, sans-serif, monospace, system-ui`,
-        );
-      }
-      return;
-    }
-    this.err(path, 'expected { stackId } or { custom: { name, fallback } }');
-  }
-
-  typography(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object');
-      return;
-    }
-    this.fontFamily(`${path}.bodyFont`, v.bodyFont);
-    this.fontFamily(`${path}.titleFont`, v.titleFont);
-    if (v.monoFont !== undefined) this.fontFamily(`${path}.monoFont`, v.monoFont);
-    for (const k of ['titleScale', 'bodyScale', 'lineHeight', 'titleLineHeight']) {
-      if (v[k] !== undefined && !this.isNumber(v[k])) {
-        this.err(`${path}.${k}`, `expected number, got ${typeof v[k]}`);
-      }
-    }
-    if (v.titleWeight !== undefined) {
-      if (!this.isString(v.titleWeight) || !VALID_TITLE_WEIGHT.has(v.titleWeight)) {
-        this.err(`${path}.titleWeight`, 'expected "normal" or "bold"');
-      }
-    }
-  }
-
-  style(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object');
-      return;
-    }
-    if (v.borderRadius !== undefined && !this.isNumber(v.borderRadius)) {
-      this.err(`${path}.borderRadius`, 'expected number');
-    }
-    if (v.textShadow !== undefined && !this.isBoolean(v.textShadow)) {
-      this.err(`${path}.textShadow`, 'expected boolean');
-    }
-    for (const k of ['overlayOpacity', 'animationSpeed']) {
-      if (v[k] !== undefined && !this.isNumber(v[k])) {
-        this.err(`${path}.${k}`, 'expected number');
-      }
-    }
-    if (v.blockPadding !== undefined && !this.isString(v.blockPadding)) {
-      this.err(`${path}.blockPadding`, 'expected string (percentage e.g. "5%")');
-    }
-    if (v.imageTreatment !== undefined) {
-      this.imageTreatment(`${path}.imageTreatment`, v.imageTreatment);
-    }
-  }
-
-  imageTreatment(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object');
-      return;
-    }
-    const kinds = ['none', 'mono', 'duotone', 'warm', 'cool'];
-    if (!this.isString(v.type) || !kinds.includes(v.type)) {
-      this.err(`${path}.type`, `expected one of ${kinds.join('|')}`);
-    }
-    if (v.strength !== undefined && !this.isNumber(v.strength)) {
-      this.err(`${path}.strength`, 'expected number (0..1)');
-    }
-    if (v.color !== undefined) this.hex(`${path}.color`, v.color);
-  }
-
-  renderStyle(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object');
-      return;
-    }
-    if (!this.isString(v.name) || v.name.length === 0) {
-      this.err(`${path}.name`, 'expected non-empty string');
-    }
-    if (v.ambientMotion !== undefined && !this.isBoolean(v.ambientMotion)) {
-      this.err(`${path}.ambientMotion`, 'expected boolean');
-    }
-    for (const k of ['defaultTextAnimation', 'defaultImageAnimation']) {
-      if (v[k] !== undefined && !this.isString(v[k])) {
-        this.err(`${path}.${k}`, 'expected animation type string');
-      }
-    }
-    if (v.defaultTransition !== undefined) {
-      const t = v.defaultTransition;
-      if (!this.isObject(t)) {
-        this.err(`${path}.defaultTransition`, 'expected object');
-      } else {
-        if (!this.isString(t.type) || !isTransitionType(t.type)) {
-          this.err(`${path}.defaultTransition.type`, 'expected valid transition type');
-        }
-        if (t.duration !== undefined && !this.isNumber(t.duration)) {
-          this.err(`${path}.defaultTransition.duration`, 'expected number');
-        }
-      }
-    }
-    if (v.layoutOverrides !== undefined && !this.isObject(v.layoutOverrides)) {
-      this.err(`${path}.layoutOverrides`, 'expected object');
-    }
-    if (v.templateHints !== undefined) {
-      if (!this.isObject(v.templateHints)) {
-        this.err(`${path}.templateHints`, 'expected object map');
-      } else {
-        for (const tplName of Object.keys(v.templateHints)) {
-          const hints = v.templateHints[tplName];
-          if (!this.isObject(hints)) {
-            this.err(`${path}.templateHints.${tplName}`, 'expected object');
-            continue;
-          }
-          for (const key of Object.keys(hints)) {
-            const val = hints[key];
-            const t = typeof val;
-            if (t !== 'string' && t !== 'number' && t !== 'boolean') {
-              this.err(
-                `${path}.templateHints.${tplName}.${key}`,
-                `expected string|number|boolean, got ${t}`,
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-
-  seedColors(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object');
-      return;
-    }
-    if (v.primary === undefined) {
-      this.err(`${path}.primary`, 'required when seedColors is present');
-    } else {
-      this.hex(`${path}.primary`, v.primary);
-    }
-    for (const k of ['secondary', 'accent', 'background', 'text']) {
-      if (v[k] !== undefined) this.hex(`${path}.${k}`, v[k]);
-    }
-  }
-
-  persistentLayer(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object');
-      return;
-    }
-    // Either { template, config } or a raw Layer — only validate the template form here
-    if ('template' in v) {
-      if (!this.isString(v.template)) {
-        this.err(`${path}.template`, 'expected string');
-        return;
-      }
-      const cfg = v.config;
-      if (!this.isObject(cfg)) {
-        this.err(`${path}.config`, 'expected object');
-        return;
-      }
-      if (cfg.type !== v.template) {
-        this.err(`${path}.config.type`, `expected "${v.template}", got "${String(cfg.type)}"`);
-      }
-      if (v.template === 'gradientBackground' && cfg.preset !== undefined) {
-        if (!this.isString(cfg.preset) || !VALID_GRADIENT_PRESETS.has(cfg.preset)) {
-          this.err(
-            `${path}.config.preset`,
-            `expected one of: ${Array.from(VALID_GRADIENT_PRESETS).join(', ')}`,
-          );
-        }
-      }
-      if (v.template === 'gradientBackground' && 'gradient' in cfg) {
-        this.err(
-          `${path}.config.gradient`,
-          'raw CSS gradient strings are not allowed in Theme JSON; use a `preset`',
-        );
-      }
-      if (v.template === 'patternBackground') {
-        const patterns = ['dots', 'grid', 'diagonal', 'noise'];
-        if (!this.isString(cfg.pattern) || !patterns.includes(cfg.pattern)) {
-          this.err(`${path}.config.pattern`, `expected one of ${patterns.join('|')}`);
-        }
-        for (const k of ['opacity', 'scale']) {
-          if (cfg[k] !== undefined && !this.isNumber(cfg[k])) {
-            this.err(`${path}.config.${k}`, 'expected number');
-          }
-        }
-        if (cfg.color !== undefined) this.hex(`${path}.config.color`, cfg.color);
-      }
-      if (v.template === 'vignette') {
-        if (cfg.strength !== undefined && !this.isNumber(cfg.strength)) {
-          this.err(`${path}.config.strength`, 'expected number (0..1)');
-        }
-        if (cfg.color !== undefined) this.hex(`${path}.config.color`, cfg.color);
-      }
-      if (v.template === 'ambientGradient') {
-        if (cfg.duration !== undefined && !this.isNumber(cfg.duration)) {
-          this.err(`${path}.config.duration`, 'expected number (seconds)');
-        }
-        for (const k of ['from', 'to']) {
-          if (cfg[k] !== undefined) this.hex(`${path}.config.${k}`, cfg[k]);
-        }
-      }
-    }
-    // Raw Layer form is permissive — no schema check here
-  }
-
-  persistentLayers(path: string, v: unknown): void {
-    if (!this.isObject(v)) {
-      this.err(path, 'expected object');
-      return;
-    }
-    for (const side of ['bottomLayers', 'topLayers']) {
-      const arr = v[side];
-      if (arr === undefined) continue;
-      if (!Array.isArray(arr)) {
-        this.err(`${path}.${side}`, 'expected array');
-        continue;
-      }
-      arr.forEach((entry, i) => this.persistentLayer(`${path}.${side}[${i}]`, entry));
-    }
-  }
-}
-
-export function validateTheme(input: unknown): ValidationResult {
-  const v = new V();
-  if (!v.isObject(input)) {
-    return { valid: false, errors: [{ path: '', message: 'expected object' }] };
-  }
-
-  if (input.schemaVersion !== THEME_SCHEMA_VERSION) {
-    v.err(
-      'schemaVersion',
-      `expected "${THEME_SCHEMA_VERSION}", got "${String(input.schemaVersion)}"`,
-    );
-  }
-  if (!v.isString(input.id) || input.id.length === 0) {
-    v.err('id', 'expected non-empty string');
-  }
-  if (!v.isString(input.name) || input.name.length === 0) {
-    v.err('name', 'expected non-empty string');
-  }
-  if (input.description !== undefined && !v.isString(input.description)) {
-    v.err('description', 'expected string');
-  }
-  if (input.basedOn !== undefined && !v.isString(input.basedOn)) {
-    v.err('basedOn', 'expected string');
-  }
-
-  if (input.seedColors !== undefined) v.seedColors('seedColors', input.seedColors);
-
-  if (input.colors === undefined) {
-    v.err('colors', 'required');
-  } else {
-    v.palette('colors', input.colors);
-  }
-
-  if (input.typography === undefined) {
-    v.err('typography', 'required');
-  } else {
-    v.typography('typography', input.typography);
-  }
-
-  if (input.style === undefined) {
-    v.err('style', 'required');
-  } else {
-    v.style('style', input.style);
-  }
-
-  if (input.renderStyle === undefined) {
-    v.err('renderStyle', 'required');
-  } else {
-    v.renderStyle('renderStyle', input.renderStyle);
-  }
-
-  if (input.colorSchemes === undefined) {
-    v.err('colorSchemes', 'required');
-  } else {
-    v.colorSchemes('colorSchemes', input.colorSchemes);
-  }
-
-  if (input.persistentLayers !== undefined) {
-    v.persistentLayers('persistentLayers', input.persistentLayers);
-  }
-
-  if (v.errors.length === 0) {
-    return { valid: true, errors: [], theme: input as unknown as Theme };
-  }
-  return { valid: false, errors: v.errors };
-}
-
-/** Throws on invalid input. Useful at module init for built-in themes. */
-export function assertTheme(input: unknown, source = 'theme'): Theme {
-  const result = validateTheme(input);
-  if (!result.valid || !result.theme) {
-    const summary = result.errors
-      .slice(0, 5)
-      .map((e) => `  ${e.path || '<root>'}: ${e.message}`)
-      .join('\n');
-    const more = result.errors.length > 5 ? `\n  ... and ${result.errors.length - 5} more` : '';
-    throw new Error(`Invalid ${source}:\n${summary}${more}`);
-  }
-  return result.theme;
-}
-
-// (Theme types are re-exported from `./Theme.js` via the schemas barrel.)

package/src/schemas/themes/bold.json

@@ -1,48 +0,0 @@
-{
-  "schemaVersion": "1",
-  "id": "bold",
-  "name": "Bold",
-  "description": "High-contrast black with vivid accents and dramatic animations.",
-  "colors": {
-    "primary": "#e53e3e",
-    "secondary": "#ed8936",
-    "background": "#000000",
-    "backgroundLight": "#1a1a1a",
-    "text": "#ffffff",
-    "textMuted": "#cbd5e0",
-    "highlight": "#f6e05e",
-    "warning": "#fc8181"
-  },
-  "typography": {
-    "bodyFont": { "stackId": "roboto" },
-    "titleFont": { "stackId": "oswald" },
-    "titleWeight": "bold",
-    "titleScale": 1.15,
-    "bodyScale": 1.0,
-    "titleLineHeight": 1.1
-  },
-  "style": {
-    "textShadow": true,
-    "overlayOpacity": 0.6,
-    "animationSpeed": 0.8
-  },
-  "renderStyle": {
-    "name": "bold",
-    "defaultTextAnimation": "zoomIn",
-    "defaultImageAnimation": "slowZoom",
-    "ambientMotion": true,
-    "defaultTransition": { "type": "dissolve", "duration": 0.5 },
-    "templateHints": {
-      "statHighlight": { "entrance": "dramatic" },
-      "fullBleedQuote": { "entrance": "dramatic" }
-    }
-  },
-  "colorSchemes": {
-    "blue": { "bg": "#1a202c", "text": "#63b3ed", "accent": "#90cdf4" },
-    "green": { "bg": "#1a202c", "text": "#48bb78", "accent": "#68d391" },
-    "purple": { "bg": "#1a202c", "text": "#b794f4", "accent": "#d6bcfa" },
-    "red": { "bg": "#1a202c", "text": "#fc8181", "accent": "#feb2b2" },
-    "orange": { "bg": "#1a202c", "text": "#f6ad55", "accent": "#fbd38d" },
-    "teal": { "bg": "#1a202c", "text": "#4fd1c5", "accent": "#81e6d9" }
-  }
-}

package/src/schemas/themes/cinematic.json

@@ -1,111 +0,0 @@
-{
-  "schemaVersion": "1",
-  "id": "cinematic",
-  "name": "Cinematic",
-  "description": "Ultra-dark with moody gradients, gold accents, and slow dissolve transitions.",
-  "colors": {
-    "primary": "#d69e2e",
-    "secondary": "#b7791f",
-    "background": "#0a0f1a",
-    "backgroundLight": "#1a202c",
-    "text": "#f7fafc",
-    "textMuted": "#a0aec0",
-    "highlight": "#ecc94b",
-    "warning": "#fc8181"
-  },
-  "typography": {
-    "bodyFont": {
-      "stackId": "crimson"
-    },
-    "titleFont": {
-      "stackId": "cormorant"
-    },
-    "titleWeight": "bold",
-    "lineHeight": 1.5,
-    "titleLineHeight": 1.2
-  },
-  "style": {
-    "textShadow": true,
-    "overlayOpacity": 0.55,
-    "animationSpeed": 1.2,
-    "imageTreatment": {
-      "type": "warm",
-      "strength": 0.5
-    }
-  },
-  "renderStyle": {
-    "name": "cinematic",
-    "defaultTextAnimation": "fadeIn",
-    "defaultImageAnimation": "slowZoom",
-    "ambientMotion": true,
-    "defaultTransition": {
-      "type": "dissolve",
-      "duration": 1.2
-    },
-    "templateHints": {
-      "title": {
-        "showAccentLine": true
-      }
-    }
-  },
-  "colorSchemes": {
-    "blue": {
-      "bg": "#0f1d33",
-      "text": "#9db8dc",
-      "accent": "#5d84b8"
-    },
-    "green": {
-      "bg": "#10251c",
-      "text": "#9ecfae",
-      "accent": "#55a878"
-    },
-    "purple": {
-      "bg": "#1f1433",
-      "text": "#c3aede",
-      "accent": "#8f74c0"
-    },
-    "red": {
-      "bg": "#2e1114",
-      "text": "#e0959a",
-      "accent": "#c05f66"
-    },
-    "orange": {
-      "bg": "#2e1d0b",
-      "text": "#e3b978",
-      "accent": "#d69e2e"
-    },
-    "teal": {
-      "bg": "#0d2626",
-      "text": "#93cfc7",
-      "accent": "#4d9e94"
-    }
-  },
-  "persistentLayers": {
-    "bottomLayers": [
-      {
-        "template": "gradientBackground",
-        "config": {
-          "type": "gradientBackground",
-          "preset": "radial-dark"
-        }
-      }
-    ],
-    "topLayers": [
-      {
-        "template": "vignette",
-        "config": {
-          "type": "vignette",
-          "strength": 0.35
-        }
-      },
-      {
-        "template": "patternBackground",
-        "config": {
-          "type": "patternBackground",
-          "pattern": "noise",
-          "opacity": 0.05
-        }
-      }
-    ]
-  }
-}

package/src/schemas/themes/documentary.json

@@ -1,96 +0,0 @@
-{
-  "schemaVersion": "1",
-  "id": "documentary",
-  "name": "Documentary",
-  "description": "Classic dark cinematic look with elegant serif typography.",
-  "colors": {
-    "primary": "#3d5a80",
-    "secondary": "#63b3ed",
-    "background": "#1a202c",
-    "backgroundLight": "#2d3748",
-    "text": "#ffffff",
-    "textMuted": "#a0aec0",
-    "highlight": "#63b3ed",
-    "warning": "#fc8181"
-  },
-  "typography": {
-    "bodyFont": {
-      "stackId": "source-serif"
-    },
-    "titleFont": {
-      "stackId": "playfair"
-    },
-    "titleWeight": "bold"
-  },
-  "style": {
-    "textShadow": true,
-    "overlayOpacity": 0.5,
-    "animationSpeed": 1.0,
-    "imageTreatment": {
-      "type": "mono",
-      "strength": 0.35
-    }
-  },
-  "renderStyle": {
-    "name": "documentary",
-    "defaultTextAnimation": "fadeIn",
-    "defaultImageAnimation": "slowZoom",
-    "ambientMotion": true,
-    "defaultTransition": {
-      "type": "fade",
-      "duration": 0.8
-    }
-  },
-  "colorSchemes": {
-    "blue": {
-      "bg": "#22354d",
-      "text": "#a8c3e0",
-      "accent": "#7fa3c9"
-    },
-    "green": {
-      "bg": "#26382e",
-      "text": "#a9c6ae",
-      "accent": "#82a88a"
-    },
-    "purple": {
-      "bg": "#35304a",
-      "text": "#beb3d6",
-      "accent": "#9d8fc2"
-    },
-    "red": {
-      "bg": "#45262a",
-      "text": "#d9a2a2",
-      "accent": "#c37f7c"
-    },
-    "orange": {
-      "bg": "#453522",
-      "text": "#d9bb90",
-      "accent": "#c29a64"
-    },
-    "teal": {
-      "bg": "#1f3a3d",
-      "text": "#9cc4c4",
-      "accent": "#6fa5a5"
-    }
-  },
-  "persistentLayers": {
-    "bottomLayers": [
-      {
-        "template": "gradientBackground",
-        "config": {
-          "type": "gradientBackground",
-          "preset": "dark-vignette"
-        }
-      }
-    ],
-    "topLayers": [
-      {
-        "template": "vignette",
-        "config": {
-          "type": "vignette",
-          "strength": 0.25
-        }
-      }
-    ]
-  }
-}