@svg-gen/tech-svg-generator 1.0.0

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpG,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,KAAK,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG7E,OAAO,EAAE,oBAAoB,EAAE,KAAK,kBAAkB,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AACjH,OAAO,EACL,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACpB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,WAAW,GACjB,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,17 @@
+/**
+ * Tech SVG Generator
+ * Generate clean, professional SVG illustrations for technical content
+ *
+ * @packageDocumentation
+ */
+// Core generation
+export { generateSVG, generateIllustration, detectScene, getAvailableScenes } from './generator.js';
+export { SCENES } from './scenes.js';
+export { THEMES, getTheme } from './themes.js';
+export { ICONS } from './icons.js';
+// Cartoon strip generation
+export { generateCartoonStrip } from './cartoon.js';
+export { renderCharacter, createCharacter, getCharacterPresets, getEmotions, CHARACTER_PRESETS } from './characters.js';
+// YAML/JSON parsing
+export { parseYAML, parseJSON, generateFromYAML, generateFromJSON, generateFromDescription, SCENE_YAML_EXAMPLE, CARTOON_YAML_EXAMPLE, CARTOON_JSON_EXAMPLE, } from './parser.js';
+//# sourceMappingURL=index.js.map

package/dist/parser.d.ts

@@ -0,0 +1,83 @@
+/**
+ * YAML/JSON scene description parser
+ * Allows defining scenes and cartoon strips in declarative format
+ */
+import type { SceneType } from './types.js';
+/**
+ * Scene description format for technical illustrations
+ */
+export interface SceneDescription {
+    type: 'scene';
+    title: string;
+    content?: string;
+    scene?: SceneType;
+    theme?: string;
+    width?: number;
+    height?: number;
+}
+/**
+ * Cartoon strip description format
+ */
+export interface CartoonDescription {
+    type: 'cartoon';
+    title?: string;
+    theme?: string;
+    width?: number;
+    height?: number;
+    layout?: string;
+    characters: Record<string, {
+        name: string;
+        preset?: string;
+        style?: {
+            primary?: string;
+            secondary?: string;
+            skin?: string;
+            hairStyle?: 'short' | 'long' | 'bald' | 'spiky' | 'curly';
+            accessory?: 'none' | 'glasses' | 'hat' | 'headphones';
+        };
+    }>;
+    panels: Array<{
+        characters: string[];
+        caption?: string;
+        dialogue: Array<{
+            character: string;
+            text: string;
+            emotion?: string;
+            type?: 'speech' | 'thought' | 'shout';
+        }>;
+    }>;
+}
+export type Description = SceneDescription | CartoonDescription;
+/**
+ * Parse YAML string into description object
+ */
+export declare function parseYAML(yamlString: string): Description;
+/**
+ * Parse JSON string into description object
+ */
+export declare function parseJSON(jsonString: string): Description;
+/**
+ * Generate SVG from description object
+ */
+export declare function generateFromDescription(desc: Description): string;
+/**
+ * Generate SVG from YAML string
+ */
+export declare function generateFromYAML(yamlString: string): string;
+/**
+ * Generate SVG from JSON string
+ */
+export declare function generateFromJSON(jsonString: string): string;
+/**
+ * Example YAML for a scene
+ */
+export declare const SCENE_YAML_EXAMPLE: string;
+/**
+ * Example YAML for a cartoon strip
+ */
+export declare const CARTOON_YAML_EXAMPLE: string;
+/**
+ * Example JSON for a cartoon strip
+ */
+export declare const CARTOON_JSON_EXAMPLE: string;
+//# sourceMappingURL=parser.d.ts.map

package/dist/parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../src/parser.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;YAC1D,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,GAAG,YAAY,CAAC;SACvD,CAAC;KACH,CAAC,CAAC;IACH,MAAM,EAAE,KAAK,CAAC;QACZ,UAAU,EAAE,MAAM,EAAE,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,KAAK,CAAC;YACd,SAAS,EAAE,MAAM,CAAC;YAClB,IAAI,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;SACvC,CAAC,CAAC;KACJ,CAAC,CAAC;CACJ;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,kBAAkB,CAAC;AAEhE;;GAEG;AACH,wBAAgB,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,WAAW,CAIzD;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,WAAW,CAIzD;AAoDD;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAgCjE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAG3D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAG3D;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,QAQvB,CAAC;AAET;;GAEG;AACH,eAAO,MAAM,oBAAoB,QAoCzB,CAAC;AAET;;GAEG;AACH,eAAO,MAAM,oBAAoB,QA2BtB,CAAC"}

package/dist/parser.js

@@ -0,0 +1,204 @@
+/**
+ * YAML/JSON scene description parser
+ * Allows defining scenes and cartoon strips in declarative format
+ */
+import yaml from 'js-yaml';
+import { generateSVG } from './generator.js';
+import { generateCartoonStrip } from './cartoon.js';
+/**
+ * Parse YAML string into description object
+ */
+export function parseYAML(yamlString) {
+    const parsed = yaml.load(yamlString);
+    validateDescription(parsed);
+    return parsed;
+}
+/**
+ * Parse JSON string into description object
+ */
+export function parseJSON(jsonString) {
+    const parsed = JSON.parse(jsonString);
+    validateDescription(parsed);
+    return parsed;
+}
+/**
+ * Validate description object
+ */
+function validateDescription(desc) {
+    if (!desc || typeof desc !== 'object') {
+        throw new Error('Invalid description: must be an object');
+    }
+    if (!desc.type) {
+        throw new Error('Invalid description: missing "type" field (must be "scene" or "cartoon")');
+    }
+    if (desc.type === 'scene') {
+        if (!desc.title || typeof desc.title !== 'string') {
+            throw new Error('Invalid scene description: missing or invalid "title" field');
+        }
+    }
+    else if (desc.type === 'cartoon') {
+        if (!desc.characters || typeof desc.characters !== 'object') {
+            throw new Error('Invalid cartoon description: missing "characters" field');
+        }
+        if (!Array.isArray(desc.panels) || desc.panels.length === 0) {
+            throw new Error('Invalid cartoon description: missing or empty "panels" array');
+        }
+        // Validate panels
+        for (let i = 0; i < desc.panels.length; i++) {
+            const panel = desc.panels[i];
+            if (!Array.isArray(panel.characters)) {
+                throw new Error(`Invalid panel ${i}: missing "characters" array`);
+            }
+            if (!Array.isArray(panel.dialogue)) {
+                throw new Error(`Invalid panel ${i}: missing "dialogue" array`);
+            }
+            // Validate dialogue
+            for (let j = 0; j < panel.dialogue.length; j++) {
+                const line = panel.dialogue[j];
+                if (!line.character || typeof line.character !== 'string') {
+                    throw new Error(`Invalid dialogue in panel ${i}, line ${j}: missing "character" field`);
+                }
+                if (!line.text || typeof line.text !== 'string') {
+                    throw new Error(`Invalid dialogue in panel ${i}, line ${j}: missing "text" field`);
+                }
+            }
+        }
+    }
+    else {
+        throw new Error(`Invalid description type: "${desc.type}" (must be "scene" or "cartoon")`);
+    }
+}
+/**
+ * Generate SVG from description object
+ */
+export function generateFromDescription(desc) {
+    if (desc.type === 'scene') {
+        const options = {
+            width: desc.width,
+            height: desc.height,
+            theme: desc.theme,
+            scene: desc.scene,
+        };
+        return generateSVG(desc.title, desc.content || '', options).svg;
+    }
+    else if (desc.type === 'cartoon') {
+        const config = {
+            title: desc.title,
+            theme: desc.theme,
+            width: desc.width,
+            height: desc.height,
+            layout: desc.layout,
+            characters: desc.characters,
+            panels: desc.panels.map(p => ({
+                characters: p.characters,
+                caption: p.caption,
+                dialogue: p.dialogue.map(d => ({
+                    character: d.character,
+                    text: d.text,
+                    emotion: d.emotion,
+                    type: d.type,
+                })),
+            })),
+        };
+        return generateCartoonStrip(config);
+    }
+    throw new Error('Unknown description type');
+}
+/**
+ * Generate SVG from YAML string
+ */
+export function generateFromYAML(yamlString) {
+    const desc = parseYAML(yamlString);
+    return generateFromDescription(desc);
+}
+/**
+ * Generate SVG from JSON string
+ */
+export function generateFromJSON(jsonString) {
+    const desc = parseJSON(jsonString);
+    return generateFromDescription(desc);
+}
+/**
+ * Example YAML for a scene
+ */
+export const SCENE_YAML_EXAMPLE = `
+type: scene
+title: "Database Migration Strategy"
+content: "PostgreSQL replication and failover"
+scene: database
+theme: github-dark
+width: 700
+height: 420
+`.trim();
+/**
+ * Example YAML for a cartoon strip
+ */
+export const CARTOON_YAML_EXAMPLE = `
+type: cartoon
+title: "The Code Review"
+theme: github-dark
+width: 800
+height: 500
+layout: "2x1"
+
+characters:
+  alice:
+    name: Alice
+    preset: dev1
+  bob:
+    name: Bob
+    preset: dev2
+
+panels:
+  - characters: [alice, bob]
+    caption: "Monday morning..."
+    dialogue:
+      - character: alice
+        text: "Did you see the PR I submitted?"
+        emotion: neutral
+      - character: bob
+        text: "The one with 2000 lines?"
+        emotion: surprised
+
+  - characters: [alice, bob]
+    caption: "Later..."
+    dialogue:
+      - character: bob
+        text: "Maybe we should split this up?"
+        emotion: thinking
+      - character: alice
+        text: "Good idea!"
+        emotion: happy
+`.trim();
+/**
+ * Example JSON for a cartoon strip
+ */
+export const CARTOON_JSON_EXAMPLE = JSON.stringify({
+    type: 'cartoon',
+    title: 'Debugging Session',
+    theme: 'dracula',
+    width: 800,
+    height: 400,
+    layout: '2x1',
+    characters: {
+        dev: { name: 'Dev', preset: 'dev1' },
+        rubber: { name: 'Rubber Duck', preset: 'robot' }
+    },
+    panels: [
+        {
+            characters: ['dev', 'rubber'],
+            dialogue: [
+                { character: 'dev', text: "Why isn't this working?!", emotion: 'angry' },
+                { character: 'rubber', text: '...', emotion: 'neutral' }
+            ]
+        },
+        {
+            characters: ['dev', 'rubber'],
+            dialogue: [
+                { character: 'dev', text: 'Oh wait, I see it now!', emotion: 'excited' },
+                { character: 'rubber', text: '...', emotion: 'neutral' }
+            ]
+        }
+    ]
+}, null, 2);
+//# sourceMappingURL=parser.js.map

package/dist/primitives.d.ts

@@ -0,0 +1,42 @@
+/**
+ * SVG primitive components for building illustrations
+ */
+import type { ThemeColors } from './themes.js';
+import type { CodeLine, TerminalLine } from './types.js';
+/**
+ * Escape HTML entities
+ */
+export declare function escapeHtml(text: string | null | undefined): string;
+/**
+ * Render an icon at position
+ */
+export declare function icon(name: string, x: number, y: number, size: number | undefined, color: string): string;
+/**
+ * Card with icon and label
+ */
+export declare function card(x: number, y: number, w: number, h: number, iconName: string, label: string, colors: ThemeColors, accentColor?: string, sublabel?: string): string;
+/**
+ * Metric display box
+ */
+export declare function metric(x: number, y: number, label: string, value: string, colors: ThemeColors, unit?: string, accentColor?: string): string;
+/**
+ * Status indicator with text
+ */
+export declare function status(x: number, y: number, state: 'ok' | 'warn' | 'error' | 'info', text: string, colors: ThemeColors): string;
+/**
+ * Arrow connector between points
+ */
+export declare function arrow(x1: number, y1: number, x2: number, y2: number, color: string, label?: string, dashed?: boolean, colors?: ThemeColors): string;
+/**
+ * Code snippet block
+ */
+export declare function codeSnippet(x: number, y: number, w: number, h: number, lines: CodeLine[], colors: ThemeColors, title?: string): string;
+/**
+ * Terminal block
+ */
+export declare function terminalBlock(x: number, y: number, w: number, h: number, lines: TerminalLine[], colors: ThemeColors): string;
+/**
+ * Title bar at bottom with multi-line support
+ */
+export declare function titleBar(text: string, width: number, height: number, colors: ThemeColors): string;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAIzD;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAKlE;AAED;;GAEG;AACH,wBAAgB,IAAI,CAClB,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,IAAI,EAAE,MAAM,YAAK,EACjB,KAAK,EAAE,MAAM,GACZ,MAAM,CAOR;AAED;;GAEG;AACH,wBAAgB,IAAI,CAClB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,WAAW,EACnB,WAAW,CAAC,EAAE,MAAM,EACpB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAQR;AAED;;GAEG;AACH,wBAAgB,MAAM,CACpB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,WAAW,EACnB,IAAI,GAAE,MAAW,EACjB,WAAW,CAAC,EAAE,MAAM,GACnB,MAAM,CAOR;AAED;;GAEG;AACH,wBAAgB,MAAM,CACpB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EACvC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,WAAW,GAClB,MAAM,CAWR;AAED;;GAEG;AACH,wBAAgB,KAAK,CACnB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,EACb,KAAK,GAAE,MAAW,EAClB,MAAM,GAAE,OAAe,EACvB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CAeR;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,QAAQ,EAAE,EACjB,MAAM,EAAE,WAAW,EACnB,KAAK,GAAE,MAAkB,GACxB,MAAM,CAUR;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,YAAY,EAAE,EACrB,MAAM,EAAE,WAAW,GAClB,MAAM,CASR;AAED;;GAEG;AACH,wBAAgB,QAAQ,CACtB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,WAAW,GAClB,MAAM,CA4BR"}

package/dist/primitives.js

@@ -0,0 +1,141 @@
+/**
+ * SVG primitive components for building illustrations
+ */
+import { ICONS } from './icons.js';
+const FONT = "'SF Mono', Menlo, Monaco, 'Courier New', monospace";
+/**
+ * Escape HTML entities
+ */
+export function escapeHtml(text) {
+    return String(text || '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+/**
+ * Render an icon at position
+ */
+export function icon(name, x, y, size = 24, color) {
+    const path = ICONS[name];
+    if (!path)
+        return '';
+    const scale = size / 24;
+    return `<g transform="translate(${x - size / 2}, ${y - size / 2}) scale(${scale})">
+    <path d="${path}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>`;
+}
+/**
+ * Card with icon and label
+ */
+export function card(x, y, w, h, iconName, label, colors, accentColor, sublabel) {
+    const color = accentColor || colors.blue;
+    return `
+  <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="12" fill="${colors.card}" stroke="${color}" stroke-width="2"/>
+  ${icon(iconName, x + w / 2, y + h / 2 - (sublabel ? 8 : 0), Math.min(w, h) * 0.35, color)}
+  <text x="${x + w / 2}" y="${y + h - 16}" text-anchor="middle" fill="${colors.text}" font-size="12" font-family="${FONT}">${escapeHtml(label.substring(0, 12))}</text>
+  ${sublabel ? `<text x="${x + w / 2}" y="${y + h - 4}" text-anchor="middle" fill="${colors.muted}" font-size="10" font-family="${FONT}">${escapeHtml(sublabel.substring(0, 15))}</text>` : ''}
+`;
+}
+/**
+ * Metric display box
+ */
+export function metric(x, y, label, value, colors, unit = '', accentColor) {
+    const color = accentColor || colors.blue;
+    return `
+  <rect x="${x}" y="${y}" width="110" height="60" rx="8" fill="${colors.card}" stroke="${colors.border}"/>
+  <text x="${x + 55}" y="${y + 22}" text-anchor="middle" fill="${colors.muted}" font-size="11" font-family="${FONT}">${escapeHtml(label.substring(0, 12))}</text>
+  <text x="${x + 55}" y="${y + 46}" text-anchor="middle" fill="${color}" font-size="18" font-family="${FONT}">${escapeHtml(value)}<tspan fill="${colors.muted}" font-size="11">${escapeHtml(unit)}</tspan></text>
+`;
+}
+/**
+ * Status indicator with text
+ */
+export function status(x, y, state, text, colors) {
+    const stateColors = {
+        ok: colors.green,
+        warn: colors.orange,
+        error: colors.red,
+        info: colors.cyan,
+    };
+    const color = stateColors[state] || colors.muted;
+    return `
+  <circle cx="${x}" cy="${y}" r="6" fill="${color}"/>
+  <text x="${x + 14}" y="${y + 4}" fill="${colors.text}" font-size="11" font-family="${FONT}">${escapeHtml(text.substring(0, 30))}</text>`;
+}
+/**
+ * Arrow connector between points
+ */
+export function arrow(x1, y1, x2, y2, color, label = '', dashed = false, colors) {
+    const mx = (x1 + x2) / 2;
+    const my = (y1 + y2) / 2;
+    const dash = dashed ? 'stroke-dasharray="6 4"' : '';
+    const markerId = `ah${x1}${y1}${x2}${y2}`;
+    const cardBg = colors?.card || '#161b22';
+    const mutedColor = colors?.muted || '#8b949e';
+    return `
+  <defs><marker id="${markerId}" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
+    <path d="M0,0 L8,4 L0,8 Z" fill="${color}"/>
+  </marker></defs>
+  <line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${color}" stroke-width="2" ${dash} marker-end="url(#${markerId})"/>
+  ${label ? `<rect x="${mx - 25}" y="${my - 10}" width="50" height="20" rx="4" fill="${cardBg}"/>
+  <text x="${mx}" y="${my + 4}" text-anchor="middle" fill="${mutedColor}" font-size="10" font-family="${FONT}">${escapeHtml(label.substring(0, 8))}</text>` : ''}`;
+}
+/**
+ * Code snippet block
+ */
+export function codeSnippet(x, y, w, h, lines, colors, title = 'code.ts') {
+    return `
+  <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="8" fill="${colors.elevated}" stroke="${colors.border}"/>
+  <rect x="${x}" y="${y}" width="${w}" height="28" rx="8" fill="${colors.card}"/>
+  <circle cx="${x + 16}" cy="${y + 14}" r="5" fill="${colors.red}" opacity="0.8"/>
+  <circle cx="${x + 32}" cy="${y + 14}" r="5" fill="${colors.orange}" opacity="0.8"/>
+  <circle cx="${x + 48}" cy="${y + 14}" r="5" fill="${colors.green}" opacity="0.8"/>
+  <text x="${x + w / 2}" y="${y + 18}" text-anchor="middle" fill="${colors.dim}" font-size="10" font-family="${FONT}">${escapeHtml(title.substring(0, 20))}</text>
+  ${lines.slice(0, 5).map((l, i) => `<text x="${x + 12}" y="${y + 48 + i * 18}" fill="${l.hl ? colors.cyan : colors.text}" font-size="11" font-family="${FONT}">${escapeHtml(l.t.substring(0, 32))}</text>`).join('')}
+`;
+}
+/**
+ * Terminal block
+ */
+export function terminalBlock(x, y, w, h, lines, colors) {
+    return `
+  <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="8" fill="${colors.bg}" stroke="${colors.green}"/>
+  <text x="${x + 12}" y="${y + 20}" fill="${colors.green}" font-size="11" font-family="${FONT}">$ terminal</text>
+  ${lines.slice(0, 4).map((l, i) => {
+        const col = l.err ? colors.red : l.ok ? colors.green : colors.text;
+        return `<text x="${x + 12}" y="${y + 44 + i * 18}" fill="${col}" font-size="11" font-family="${FONT}">${escapeHtml(l.t.substring(0, 35))}</text>`;
+    }).join('')}
+`;
+}
+/**
+ * Title bar at bottom with multi-line support
+ */
+export function titleBar(text, width, height, colors) {
+    const maxCharsPerLine = 60;
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = '';
+    for (const word of words) {
+        if ((currentLine + ' ' + word).trim().length <= maxCharsPerLine) {
+            currentLine = (currentLine + ' ' + word).trim();
+        }
+        else {
+            if (currentLine)
+                lines.push(currentLine);
+            currentLine = word;
+        }
+    }
+    if (currentLine)
+        lines.push(currentLine);
+    // Limit to 2 lines max
+    if (lines.length > 2) {
+        lines[1] = lines[1].substring(0, maxCharsPerLine - 3) + '...';
+        lines.length = 2;
+    }
+    const boxHeight = lines.length === 1 ? 36 : 50;
+    const startY = height - boxHeight - 8;
+    return `
+  <rect x="30" y="${startY}" width="${width - 60}" height="${boxHeight}" rx="8" fill="${colors.card}" stroke="${colors.border}"/>
+  ${lines.map((line, i) => `<text x="${width / 2}" y="${startY + 22 + i * 16}" text-anchor="middle" fill="${colors.text}" font-size="11" font-family="${FONT}">${escapeHtml(line)}</text>`).join('')}`;
+}
+//# sourceMappingURL=primitives.js.map

package/dist/scenes.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Scene definitions for different technical contexts
+ */
+import type { ThemeColors } from './themes.js';
+type SceneRenderer = (title: string, colors: ThemeColors, width: number, height: number) => string;
+/**
+ * All available scenes
+ */
+export declare const SCENES: Record<string, SceneRenderer>;
+export {};
+//# sourceMappingURL=scenes.d.ts.map

package/dist/scenes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scenes.d.ts","sourceRoot":"","sources":["../src/scenes.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;AAyPnG;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAehD,CAAC"}