@bendyline/squisq 1.0.1 → 1.1.1

package/src/schemas/themeLibrary.ts

@@ -19,11 +19,32 @@ import type { Theme, ThemeColorScheme } from './Theme.js';
 // Shared constants
 // ============================================
 
-const SERIF = '"PT Serif", Georgia, "Times New Roman", serif';
-const SANS = '"Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-const MONO = '"JetBrains Mono", "Fira Code", "Consolas", monospace';
-const MERRIWEATHER = '"Merriweather", Georgia, "Times New Roman", serif';
-const GEORGIA = 'Georgia, "Times New Roman", serif';
+// ── Font stacks ──────────────────────────────────────────────────
+// Each stack lists the recommended Google Font first (works when the
+// wrapping site loads it), then degrades to safe system fonts.
+// Squisq itself does NOT load Google Fonts.
+
+/** System fonts only — no external dependencies. */
+const SYSTEM_SANS = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+const SYSTEM_SERIF = 'Georgia, "Times New Roman", serif';
+const SYSTEM_MONO = 'Consolas, "Courier New", monospace';
+
+/** Theme-specific stacks with Google Font leads. */
+const PLAYFAIR = '"Playfair Display", Georgia, serif';
+const SOURCE_SERIF = '"Source Serif 4", "PT Serif", Georgia, serif';
+const INTER = '"Inter", "Segoe UI", Roboto, sans-serif';
+const OSWALD = '"Oswald", Impact, "Arial Black", sans-serif';
+const ROBOTO = '"Roboto", "Segoe UI", Arial, sans-serif';
+const MERRIWEATHER = '"Merriweather", Georgia, serif';
+const LORA = '"Lora", "Merriweather", Georgia, serif';
+const JETBRAINS_MONO = '"JetBrains Mono", "Fira Code", Consolas, monospace';
+const IBM_PLEX_SANS = '"IBM Plex Sans", "Segoe UI", Roboto, sans-serif';
+const DM_SERIF = '"DM Serif Display", Georgia, serif';
+const DM_SANS = '"DM Sans", "Segoe UI", Roboto, sans-serif';
+const CORMORANT = '"Cormorant Garamond", Garamond, Georgia, serif';
+const CRIMSON = '"Crimson Text", Georgia, serif';
+const PT_SERIF = '"PT Serif", Georgia, serif';
+const HANKEN_GROTESK = '"Hanken Grotesk", system-ui, sans-serif';
 
 /** Standard 6-scheme set used by the documentary theme (migrated from old COLOR_SCHEMES). */
 const CLASSIC_COLOR_SCHEMES: Record<string, ThemeColorScheme> = {
@@ -36,13 +57,60 @@ const CLASSIC_COLOR_SCHEMES: Record<string, ThemeColorScheme> = {
 };
 
 // ============================================
-// 1. Documentary (default — migrated from old DEFAULT_THEME)
+// 1. Standard (default — safe system fonts, no external dependencies)
+// ============================================
+
+const standard: Theme = {
+  id: 'standard',
+  name: 'Standard',
+  description: 'Clean and safe. System fonts only — no external font dependencies.',
+  colors: {
+    primary: '#3182ce',
+    secondary: '#4a5568',
+    background: '#1a202c',
+    backgroundLight: '#2d3748',
+    text: '#f7fafc',
+    textMuted: '#a0aec0',
+    highlight: '#4299e1',
+    warning: '#fc8181',
+  },
+  typography: {
+    bodyFontFamily: SYSTEM_SANS,
+    titleFontFamily: SYSTEM_SERIF,
+    monoFontFamily: SYSTEM_MONO,
+    titleWeight: 'bold',
+  },
+  style: {
+    textShadow: true,
+    overlayOpacity: 0.45,
+    animationSpeed: 1.0,
+  },
+  renderStyle: {
+    name: 'standard',
+    defaultTextAnimation: 'fadeIn',
+    defaultImageAnimation: 'slowZoom',
+    ambientMotion: true,
+    defaultTransition: { type: 'fade', duration: 0.7 },
+  },
+  colorSchemes: CLASSIC_COLOR_SCHEMES,
+  persistentLayers: {
+    bottomLayers: [
+      {
+        template: 'gradientBackground',
+        config: { type: 'gradientBackground', preset: 'dark-vignette' },
+      },
+    ],
+  },
+};
+
+// ============================================
+// 2. Documentary
 // ============================================
 
 const documentary: Theme = {
   id: 'documentary',
   name: 'Documentary',
-  description: 'Classic dark cinematic look with serif typography. The original Squisq style.',
+  description: 'Classic dark cinematic look with elegant serif typography.',
   colors: {
     primary: '#3d5a80',
     secondary: '#63b3ed',
@@ -54,8 +122,8 @@ const documentary: Theme = {
     warning: '#fc8181',
   },
   typography: {
-    bodyFontFamily: SERIF,
-    titleFontFamily: SERIF,
+    bodyFontFamily: SOURCE_SERIF,
+    titleFontFamily: PLAYFAIR,
     titleWeight: 'bold',
   },
   style: {
@@ -100,8 +168,8 @@ const minimalist: Theme = {
     warning: '#e53e3e',
   },
   typography: {
-    bodyFontFamily: SANS,
-    titleFontFamily: SANS,
+    bodyFontFamily: INTER,
+    titleFontFamily: INTER,
     titleWeight: 'bold',
     lineHeight: 1.6,
   },
@@ -149,8 +217,8 @@ const bold: Theme = {
     warning: '#fc8181',
   },
   typography: {
-    bodyFontFamily: SANS,
-    titleFontFamily: SANS,
+    bodyFontFamily: ROBOTO,
+    titleFontFamily: OSWALD,
     titleWeight: 'bold',
     titleScale: 1.15,
     bodyScale: 1.0,
@@ -201,7 +269,7 @@ const morningLight: Theme = {
     warning: '#c53030',
   },
   typography: {
-    bodyFontFamily: MERRIWEATHER,
+    bodyFontFamily: LORA,
     titleFontFamily: MERRIWEATHER,
     titleWeight: 'bold',
     lineHeight: 1.7,
@@ -247,9 +315,9 @@ const techDark: Theme = {
     warning: '#ff5252',
   },
   typography: {
-    bodyFontFamily: SANS,
-    titleFontFamily: MONO,
-    monoFontFamily: MONO,
+    bodyFontFamily: IBM_PLEX_SANS,
+    titleFontFamily: JETBRAINS_MONO,
+    monoFontFamily: JETBRAINS_MONO,
     titleWeight: 'bold',
     titleScale: 0.9,
     lineHeight: 1.5,
@@ -299,8 +367,8 @@ const magazine: Theme = {
     warning: '#fc8181',
   },
   typography: {
-    bodyFontFamily: SANS,
-    titleFontFamily: GEORGIA,
+    bodyFontFamily: DM_SANS,
+    titleFontFamily: DM_SERIF,
     titleWeight: 'bold',
     titleScale: 1.05,
     lineHeight: 1.5,
@@ -347,8 +415,8 @@ const cinematic: Theme = {
     warning: '#fc8181',
   },
   typography: {
-    bodyFontFamily: SERIF,
-    titleFontFamily: SERIF,
+    bodyFontFamily: CRIMSON,
+    titleFontFamily: CORMORANT,
     titleWeight: 'bold',
     lineHeight: 1.5,
     titleLineHeight: 1.2,
@@ -405,8 +473,8 @@ const warmEarth: Theme = {
     warning: '#e53e3e',
   },
   typography: {
-    bodyFontFamily: GEORGIA,
-    titleFontFamily: GEORGIA,
+    bodyFontFamily: HANKEN_GROTESK,
+    titleFontFamily: PT_SERIF,
     titleWeight: 'bold',
     lineHeight: 1.6,
   },
@@ -448,6 +516,7 @@ const warmEarth: Theme = {
  * All built-in themes, keyed by id.
  */
 export const THEMES: Record<string, Theme> = {
+  standard,
   documentary,
   minimalist,
   bold,
@@ -459,10 +528,10 @@ export const THEMES: Record<string, Theme> = {
 };
 
 /** The default theme id. */
-export const DEFAULT_THEME_ID = 'documentary';
+export const DEFAULT_THEME_ID = 'standard';
 
-/** The default theme (documentary — migrated from old DEFAULT_THEME). */
-export const DEFAULT_THEME: Theme = documentary;
+/** The default theme (standard — safe system fonts, no external dependencies). */
+export const DEFAULT_THEME: Theme = standard;
 
 /**
  * Resolve a theme by id. Returns the default theme when `id` is

package/src/storage/ContentContainer.ts

@@ -0,0 +1,200 @@
+/**
+ * ContentContainer — virtual file system for document containers.
+ *
+ * A Squisq document is more than just markdown: it's a container of files
+ * including the primary markdown document, images, audio, timing data, and
+ * other media. ContentContainer provides an abstract async file system
+ * interface for reading, writing, and listing these files.
+ *
+ * Paths are forward-slash separated strings relative to the container root
+ * (e.g., 'images/hero.jpg', 'index.md'). No leading slash.
+ *
+ * Implementations:
+ * - MemoryContentContainer — in-memory Map (for zip import, tests, transient use)
+ * - SlotContentContainer — backed by IndexedDB slot storage (in the site package)
+ */
+
+/**
+ * Metadata about a file in a ContentContainer.
+ */
+export interface ContentEntry {
+  /** Relative path within the container (e.g., 'images/hero.jpg') */
+  path: string;
+  /** MIME type (e.g., 'image/jpeg') */
+  mimeType: string;
+  /** File size in bytes */
+  size: number;
+}
+
+/**
+ * Abstract async file system for document containers.
+ *
+ * All paths are forward-slash separated, relative to the container root,
+ * with no leading slash. Example: 'images/hero.jpg', 'index.md'.
+ */
+export interface ContentContainer {
+  /** Read a file's binary content. Returns null if the file does not exist. */
+  readFile(path: string): Promise<ArrayBuffer | null>;
+
+  /** Write a file. Creates or overwrites. */
+  writeFile(path: string, data: ArrayBuffer | Uint8Array, mimeType?: string): Promise<void>;
+
+  /** Remove a file. No-op if the file does not exist. */
+  removeFile(path: string): Promise<void>;
+
+  /**
+   * List files in the container.
+   * @param prefix — Optional path prefix to filter by (e.g., 'images/')
+   */
+  listFiles(prefix?: string): Promise<ContentEntry[]>;
+
+  /** Check whether a file exists. */
+  exists(path: string): Promise<boolean>;
+
+  /**
+   * Find the primary markdown document path.
+   *
+   * Discovery order: index.md → doc.md → document.md → first *.md at root.
+   * Returns null if no markdown file is found at the root level.
+   */
+  getDocumentPath(): Promise<string | null>;
+
+  /**
+   * Convenience: read the primary markdown document as a UTF-8 string.
+   * Returns null if no markdown file is found.
+   */
+  readDocument(): Promise<string | null>;
+
+  /**
+   * Convenience: write a markdown document.
+   * @param markdown — The markdown content
+   * @param filename — Filename to use (defaults to 'index.md')
+   */
+  writeDocument(markdown: string, filename?: string): Promise<void>;
+}
+
+// ============================================
+// Well-known markdown filenames in priority order
+// ============================================
+
+const MARKDOWN_PRIORITY = ['index.md', 'doc.md', 'document.md'];
+
+/**
+ * Find the primary markdown path from a list of file entries.
+ * Exported for reuse by other ContentContainer implementations.
+ */
+export function findDocumentPath(entries: ContentEntry[]): string | null {
+  // Only consider root-level files (no '/' in path)
+  const rootFiles = entries.filter((e) => !e.path.includes('/'));
+
+  for (const name of MARKDOWN_PRIORITY) {
+    if (rootFiles.some((e) => e.path.toLowerCase() === name)) {
+      return name;
+    }
+  }
+
+  // Fallback: first .md file at root
+  const firstMd = rootFiles.find((e) => e.path.toLowerCase().endsWith('.md'));
+  return firstMd?.path ?? null;
+}
+
+// ============================================
+// MemoryContentContainer
+// ============================================
+
+interface MemoryFile {
+  data: ArrayBuffer;
+  mimeType: string;
+}
+
+/**
+ * In-memory ContentContainer backed by a Map.
+ *
+ * Used for zip import (deserialize into memory), tests, and transient operations.
+ */
+export class MemoryContentContainer implements ContentContainer {
+  private files = new Map<string, MemoryFile>();
+
+  async readFile(path: string): Promise<ArrayBuffer | null> {
+    return this.files.get(path)?.data ?? null;
+  }
+
+  async writeFile(path: string, data: ArrayBuffer | Uint8Array, mimeType?: string): Promise<void> {
+    const buffer = data instanceof ArrayBuffer ? data : data.slice().buffer;
+    this.files.set(path, {
+      data: buffer,
+      mimeType: mimeType ?? guessMimeType(path),
+    });
+  }
+
+  async removeFile(path: string): Promise<void> {
+    this.files.delete(path);
+  }
+
+  async listFiles(prefix?: string): Promise<ContentEntry[]> {
+    const entries: ContentEntry[] = [];
+    for (const [path, file] of this.files) {
+      if (prefix && !path.startsWith(prefix)) continue;
+      entries.push({
+        path,
+        mimeType: file.mimeType,
+        size: file.data.byteLength,
+      });
+    }
+    return entries;
+  }
+
+  async exists(path: string): Promise<boolean> {
+    return this.files.has(path);
+  }
+
+  async getDocumentPath(): Promise<string | null> {
+    return findDocumentPath(await this.listFiles());
+  }
+
+  async readDocument(): Promise<string | null> {
+    const docPath = await this.getDocumentPath();
+    if (!docPath) return null;
+    const data = await this.readFile(docPath);
+    if (!data) return null;
+    return new TextDecoder().decode(data);
+  }
+
+  async writeDocument(markdown: string, filename?: string): Promise<void> {
+    const name = filename ?? 'index.md';
+    const data = new TextEncoder().encode(markdown);
+    await this.writeFile(name, data, 'text/markdown');
+  }
+}
+
+// ============================================
+// MIME type guessing
+// ============================================
+
+const EXTENSION_MIME_MAP: Record<string, string> = {
+  '.md': 'text/markdown',
+  '.txt': 'text/plain',
+  '.json': 'application/json',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.png': 'image/png',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.avif': 'image/avif',
+  '.mp4': 'video/mp4',
+  '.webm': 'video/webm',
+  '.mp3': 'audio/mpeg',
+  '.wav': 'audio/wav',
+  '.ogg': 'audio/ogg',
+  '.css': 'text/css',
+  '.html': 'text/html',
+  '.js': 'application/javascript',
+};
+
+function guessMimeType(path: string): string {
+  const dot = path.lastIndexOf('.');
+  if (dot === -1) return 'application/octet-stream';
+  const ext = path.slice(dot).toLowerCase();
+  return EXTENSION_MIME_MAP[ext] ?? 'application/octet-stream';
+}

package/src/storage/MediaProviderFromContainer.ts

@@ -0,0 +1,92 @@
+/**
+ * MediaProviderFromContainer — bridges ContentContainer to MediaProvider.
+ *
+ * Creates a MediaProvider that resolves relative paths by reading binary data
+ * from a ContentContainer and generating blob URLs. Blob URLs are cached and
+ * revoked on dispose().
+ *
+ * This allows any ContentContainer (memory, slot-backed, zip-loaded) to be
+ * used with existing rendering components (DocPlayer, ImageLayer, VideoLayer)
+ * that consume MediaProvider.
+ */
+
+import type { MediaProvider, MediaEntry } from '../schemas/MediaProvider.js';
+import type { ContentContainer } from './ContentContainer.js';
+
+/**
+ * Create a MediaProvider backed by a ContentContainer.
+ *
+ * @param container — The ContentContainer to read/write media from
+ * @returns A MediaProvider that resolves paths to blob URLs
+ */
+export function createMediaProviderFromContainer(container: ContentContainer): MediaProvider {
+  const blobUrlCache = new Map<string, string>();
+
+  return {
+    async resolveUrl(relativePath: string): Promise<string> {
+      const cached = blobUrlCache.get(relativePath);
+      if (cached) return cached;
+
+      const data = await container.readFile(relativePath);
+      if (!data) return relativePath;
+
+      const entries = await container.listFiles();
+      const entry = entries.find((e) => e.path === relativePath);
+      const mimeType = entry?.mimeType ?? 'application/octet-stream';
+
+      const blob = new Blob([data], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      blobUrlCache.set(relativePath, url);
+      return url;
+    },
+
+    async listMedia(): Promise<MediaEntry[]> {
+      const entries = await container.listFiles();
+      return entries
+        .filter((e) => !e.path.toLowerCase().endsWith('.md'))
+        .map((e) => ({
+          name: e.path,
+          mimeType: e.mimeType,
+          size: e.size,
+        }));
+    },
+
+    async addMedia(
+      name: string,
+      data: ArrayBuffer | Blob | Uint8Array,
+      mimeType: string,
+    ): Promise<string> {
+      // Invalidate any cached blob URL for this path before overwriting
+      const cached = blobUrlCache.get(name);
+      if (cached) {
+        URL.revokeObjectURL(cached);
+        blobUrlCache.delete(name);
+      }
+
+      let buffer: ArrayBuffer | Uint8Array;
+      if (data instanceof Blob) {
+        buffer = await data.arrayBuffer();
+      } else {
+        buffer = data;
+      }
+      await container.writeFile(name, buffer, mimeType);
+      return name;
+    },
+
+    async removeMedia(relativePath: string): Promise<void> {
+      const cached = blobUrlCache.get(relativePath);
+      if (cached) {
+        URL.revokeObjectURL(cached);
+        blobUrlCache.delete(relativePath);
+      }
+      await container.removeFile(relativePath);
+    },
+
+    dispose(): void {
+      for (const url of blobUrlCache.values()) {
+        URL.revokeObjectURL(url);
+      }
+      blobUrlCache.clear();
+    },
+  };
+}

package/src/storage/index.ts

@@ -3,3 +3,6 @@ export { MemoryStorageAdapter } from './MemoryStorageAdapter.js';
 export { LocalStorageAdapter } from './LocalStorageAdapter.js';
 export { LocalForageAdapter } from './LocalForageAdapter.js';
 export type { LocalForageAdapterOptions } from './LocalForageAdapter.js';
+export type { ContentContainer, ContentEntry } from './ContentContainer.js';
+export { MemoryContentContainer, findDocumentPath } from './ContentContainer.js';
+export { createMediaProviderFromContainer } from './MediaProviderFromContainer.js';

package/src/transform/applyTransform.ts

@@ -0,0 +1,83 @@
+/**
+ * Apply Transform
+ *
+ * Main entry point for the transform module. Takes a Doc and a style,
+ * analyzes block content, selects extractions to promote, and returns
+ * a new Doc with blocks optimized for visual presentation.
+ *
+ * The input Doc is never mutated — a fresh Doc is always returned.
+ */
+
+import type { Doc } from '../schemas/Doc.js';
+import type { TransformStyleId, TransformOptions, TransformResult } from './types.js';
+import { resolveTransformStyle } from './registry.js';
+import { analyzeBlocks, extractDocImages } from './blockAnalyzer.js';
+import { selectAndBuild } from './templateSelector.js';
+import { allocateTiming } from './timingAllocator.js';
+import { hashString } from '../random/SeededRandom.js';
+
+/**
+ * Apply a transform style to a Doc, producing a new Doc with blocks
+ * optimized for visual presentation.
+ *
+ * @param doc - The source Doc (not mutated).
+ * @param styleId - Registered transform style id (e.g. 'documentary', 'magazine').
+ * @param options - Optional seed, images, theme override.
+ * @returns TransformResult with the new Doc and stats.
+ */
+export function applyTransform(
+  doc: Doc,
+  styleId: TransformStyleId,
+  options?: TransformOptions,
+): TransformResult {
+  const baseConfig = resolveTransformStyle(styleId);
+  const config = options?.overrides
+    ? { ...baseConfig, ...options.overrides, id: baseConfig.id }
+    : baseConfig;
+
+  const seed = options?.seed ?? hashString(doc.articleId || 'transform');
+
+  // Use provided images or auto-extract from the doc's markdown content
+  const images = options?.images ?? extractDocImages(doc.blocks);
+
+  // 1. Analyze blocks
+  const analyzed = analyzeBlocks(doc.blocks, {
+    minConfidence: config.minConfidence,
+    types: config.preferredTypes,
+  });
+
+  // If no blocks have meaningful content, return the doc unchanged
+  const hasContent = analyzed.some((ab) => ab.bodyWordCount >= 5);
+  if (!hasContent) {
+    return {
+      doc: { ...doc },
+      stats: {
+        totalInputBlocks: doc.blocks.length,
+        transformedBlocks: 0,
+        insertedBlocks: 0,
+      },
+    };
+  }
+
+  // 2. Select extractions and build template blocks
+  const selection = selectAndBuild(analyzed, config, images, seed);
+
+  // 3. Allocate timing across the new block sequence
+  const timedBlocks = allocateTiming(selection.blocks, doc.duration);
+
+  // 4. Assemble the output Doc
+  const transformedDoc: Doc = {
+    ...doc,
+    blocks: timedBlocks,
+    themeId: options?.themeId ?? doc.themeId,
+  };
+
+  return {
+    doc: transformedDoc,
+    stats: {
+      totalInputBlocks: doc.blocks.length,
+      transformedBlocks: selection.transformedCount,
+      insertedBlocks: selection.insertedCount,
+    },
+  };
+}