@svg-gen/tech-svg-generator 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Satishkumar Dhule
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,320 @@
+# Tech SVG Generator
+
+Generate clean, professional SVG illustrations for technical content. Perfect for blogs, documentation, presentations, and README files.
+
+[![CI](https://github.com/open-tech-svg-gen/tech-svg-generator/actions/workflows/ci.yml/badge.svg)](https://github.com/open-tech-svg-gen/tech-svg-generator/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/tech-svg-generator)](https://www.npmjs.com/package/tech-svg-generator)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue.svg)](https://www.typescriptlang.org/)
+[![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18-green.svg)](https://nodejs.org/)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/open-tech-svg-gen/tech-svg-generator/pulls)
+
+## Features
+
+- 🎨 **14 Scene Types** - Architecture, scaling, database, deployment, security, debugging, testing, performance, API, monitoring, frontend, success, error, and default
+- 🗨️ **Cartoon Strips** - Generate comic-style strips with characters, emotions, and speech bubbles
+- 📝 **YAML/JSON Support** - Define scenes and cartoons in declarative format
+- 🔍 **Auto-Detection** - Automatically selects the best scene based on title keywords
+- 🌙 **Multiple Themes** - GitHub Dark (default), Dracula, Nord, One Dark
+- 👤 **6 Character Presets** - Diverse developer characters with customizable styles
+- 😀 **9 Emotions** - Neutral, happy, sad, angry, surprised, thinking, confused, excited, worried
+- 📦 **Minimal Dependencies** - Only js-yaml for YAML parsing
+- 🖼️ **Consistent Style** - Professional, clean illustrations every time
+- ✏️ **Monospace Fonts** - All text uses developer-friendly monospace fonts
+
+## Installation
+
+```bash
+npm install tech-svg-generator
+```
+
+## Quick Start
+
+```typescript
+import { generateSVG } from 'tech-svg-generator';
+
+// Auto-detect scene from title
+const result = generateSVG('Database Replication Strategies');
+console.log(result.svg);   // SVG string
+console.log(result.scene); // 'database'
+
+// Save to file
+import fs from 'fs';
+fs.writeFileSync('illustration.svg', result.svg);
+```
+
+## API
+
+### `generateSVG(title, content?, options?)`
+
+Generate an SVG illustration.
+
+**Parameters:**
+- `title` (string) - The title/topic for the illustration
+- `content` (string, optional) - Additional content for better scene detection
+- `options` (object, optional):
+  - `width` (number) - SVG width (default: 700)
+  - `height` (number) - SVG height (default: 420)
+  - `theme` (string) - Theme name: 'github-dark', 'dracula', 'nord', 'one-dark'
+  - `scene` (string) - Force a specific scene type
+
+**Returns:** `GenerateResult`
+- `svg` (string) - The generated SVG string
+- `scene` (string) - The detected/used scene type
+- `width` (number) - SVG width
+- `height` (number) - SVG height
+
+### `detectScene(title, content?)`
+
+Detect the best scene type for given text.
+
+```typescript
+import { detectScene } from 'tech-svg-generator';
+
+detectScene('Kubernetes Pod Scheduling'); // 'scaling'
+detectScene('JWT Authentication Flow');   // 'security'
+detectScene('React Performance Tips');    // 'frontend'
+```
+
+### `getAvailableScenes()`
+
+Get list of all available scene types.
+
+```typescript
+import { getAvailableScenes } from 'tech-svg-generator';
+
+console.log(getAvailableScenes());
+// ['architecture', 'scaling', 'database', 'deployment', 'security', ...]
+```
+
+## Scene Types
+
+| Scene | Keywords | Description |
+|-------|----------|-------------|
+| `architecture` | architecture, design, pattern, system, microservice | System architecture diagrams |
+| `scaling` | scale, kubernetes, docker, cluster, load | Horizontal scaling visualization |
+| `database` | database, sql, postgres, redis, cache | Database with replication |
+| `deployment` | deploy, ci, cd, pipeline, release | CI/CD pipeline flow |
+| `security` | security, auth, jwt, oauth, firewall | Security flow diagram |
+| `debugging` | debug, bug, error, fix, trace | Code debugging scene |
+| `testing` | test, jest, coverage, unit, e2e | Test results dashboard |
+| `performance` | performance, optimize, latency, cpu | Performance metrics |
+| `api` | api, rest, graphql, endpoint, http | API request/response |
+| `monitoring` | monitor, metric, log, alert, grafana | Monitoring dashboard |
+| `frontend` | frontend, react, vue, css, component | Web vitals metrics |
+| `success` | success, complete, launch, shipped | Success celebration |
+| `error` | fail, crash, outage, incident, 503 | Error/incident scene |
+| `default` | - | Generic system overview |
+
+## Themes
+
+```typescript
+import { generateSVG, THEMES } from 'tech-svg-generator';
+
+// Use a specific theme
+const result = generateSVG('API Gateway Design', '', { theme: 'dracula' });
+
+// Available themes
+console.log(Object.keys(THEMES)); // ['github-dark', 'dracula', 'nord', 'one-dark']
+```
+
+## Examples
+
+### Blog Post Illustration
+
+```typescript
+import { generateSVG } from 'tech-svg-generator';
+import fs from 'fs';
+
+const posts = [
+  'How Netflix Handles Database Sharding',
+  'Implementing Zero Trust Security',
+  'React Server Components Deep Dive',
+];
+
+posts.forEach((title, i) => {
+  const { svg, scene } = generateSVG(title);
+  fs.writeFileSync(`post-${i + 1}-${scene}.svg`, svg);
+});
+```
+
+### Force Specific Scene
+
+```typescript
+const result = generateSVG('My Custom Topic', '', { scene: 'architecture' });
+```
+
+### Custom Dimensions
+
+```typescript
+const result = generateSVG('Wide Banner', '', { 
+  width: 1200, 
+  height: 300 
+});
+```
+
+## Output Example
+
+The generated SVGs feature:
+- Clean, fixed-grid layouts with no overlapping elements
+- Professional GitHub-inspired dark theme
+- Contextual icons and metrics
+- Multi-line title support for long titles
+- Consistent monospace typography
+
+## Cartoon Strips
+
+Generate comic-style strips with characters having conversations!
+
+### Quick Start
+
+```typescript
+import { generateCartoonStrip } from 'tech-svg-generator';
+import fs from 'fs';
+
+const svg = generateCartoonStrip({
+  title: 'The Daily Standup',
+  theme: 'github-dark',
+  width: 800,
+  height: 400,
+  layout: '2x1',
+  characters: {
+    dev: { name: 'Developer', preset: 'dev1' },
+    pm: { name: 'PM', preset: 'dev2' }
+  },
+  panels: [
+    {
+      characters: ['dev', 'pm'],
+      caption: 'Monday morning...',
+      dialogue: [
+        { character: 'pm', text: 'How is the feature going?', emotion: 'neutral' },
+        { character: 'dev', text: 'Almost done!', emotion: 'happy' }
+      ]
+    },
+    {
+      characters: ['dev', 'pm'],
+      caption: 'Friday...',
+      dialogue: [
+        { character: 'dev', text: 'Shipped!', emotion: 'excited' },
+        { character: 'pm', text: 'Great work!', emotion: 'happy' }
+      ]
+    }
+  ]
+});
+
+fs.writeFileSync('standup.svg', svg);
+```
+
+### Character Presets
+
+| Preset | Description |
+|--------|-------------|
+| `alex` | Indigo short hair, blue hoodie, glasses |
+| `sam` | Purple curly hair, green t-shirt |
+| `jordan` | Blonde long hair, red shirt, headphones |
+| `casey` | Dark spiky hair, purple hoodie |
+| `riley` | Pink ponytail, indigo t-shirt |
+| `morgan` | Teal mohawk, orange hoodie, sunglasses |
+| `taylor` | Red short hair, dark formal attire |
+| `robot` | Gray robot character with blue accents |
+
+Legacy aliases (`dev1`-`dev5`) are also supported for backward compatibility.
+
+### Emotions
+
+Characters can express: `neutral`, `happy`, `sad`, `angry`, `surprised`, `thinking`, `confused`, `excited`, `worried`
+
+### Speech Bubble Types
+
+- `speech` (default) - Regular speech bubble
+- `thought` - Cloud-style thought bubble
+- `shout` - Spiky exclamation bubble
+
+### Layout Options
+
+- `auto` - Automatically arrange panels
+- `1x2`, `2x1` - Single row/column
+- `2x2` - 2x2 grid
+- `3x1`, `1x3` - Three panels in row/column
+- `2x3`, `3x2` - Six panel layouts
+
+## YAML/JSON Scene Descriptions
+
+Define scenes and cartoons in declarative YAML or JSON format!
+
+### Scene from YAML
+
+```typescript
+import { generateFromYAML } from 'tech-svg-generator';
+
+const yaml = `
+type: scene
+title: "Database Migration Strategy"
+content: "PostgreSQL replication and failover"
+scene: database
+theme: github-dark
+width: 700
+height: 420
+`;
+
+const svg = generateFromYAML(yaml);
+```
+
+### Cartoon from YAML
+
+```typescript
+import { generateFromYAML } from 'tech-svg-generator';
+
+const yaml = `
+type: cartoon
+title: "Code Review"
+theme: dracula
+layout: "2x1"
+
+characters:
+  alice:
+    name: Alice
+    preset: dev1
+  bob:
+    name: Bob
+    preset: dev2
+
+panels:
+  - characters: [alice, bob]
+    dialogue:
+      - character: alice
+        text: "Can you review my PR?"
+        emotion: happy
+      - character: bob
+        text: "Sure!"
+        emotion: neutral
+`;
+
+const svg = generateFromYAML(yaml);
+```
+
+### JSON Support
+
+```typescript
+import { generateFromJSON } from 'tech-svg-generator';
+
+const json = JSON.stringify({
+  type: 'cartoon',
+  title: 'Debugging',
+  characters: {
+    dev: { name: 'Dev', preset: 'dev1' }
+  },
+  panels: [{
+    characters: ['dev'],
+    dialogue: [
+      { character: 'dev', text: 'Found it!', emotion: 'excited' }
+    ]
+  }]
+});
+
+const svg = generateFromJSON(json);
+```
+
+## License
+
+MIT © Satishkumar Dhule

package/dist/cartoon.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Cartoon strip generator with characters and speech bubbles
+ */
+import type { ThemeColors } from './themes.js';
+import { type Emotion } from './characters.js';
+export interface DialogLine {
+    /** Character ID speaking */
+    character: string;
+    /** The dialogue text */
+    text: string;
+    /** Emotion for this line */
+    emotion?: Emotion;
+    /** Type of speech bubble */
+    type?: 'speech' | 'thought' | 'shout';
+}
+export interface CartoonPanel {
+    /** Characters in this panel (by ID) */
+    characters: string[];
+    /** Dialogue lines in order */
+    dialogue: DialogLine[];
+    /** Optional panel title/caption */
+    caption?: string;
+}
+export interface CartoonStripConfig {
+    /** Title of the strip */
+    title?: string;
+    /** Character definitions */
+    characters: Record<string, {
+        name: string;
+        preset?: string;
+        style?: any;
+    }>;
+    /** Panels in the strip */
+    panels: CartoonPanel[];
+    /** Grid layout: 'auto' | '1x2' | '2x1' | '2x2' | '1x3' | '3x1' | '2x3' | '3x2' */
+    layout?: string;
+    /** Theme name */
+    theme?: string;
+    /** Total width */
+    width?: number;
+    /** Total height */
+    height?: number;
+}
+/**
+ * Render a speech bubble
+ */
+declare function speechBubble(x: number, y: number, text: string, colors: ThemeColors, type?: 'speech' | 'thought' | 'shout', tailDirection?: 'left' | 'right' | 'down', maxWidth?: number): string;
+/**
+ * Generate a cartoon strip SVG
+ */
+export declare function generateCartoonStrip(config: CartoonStripConfig): string;
+export { speechBubble };
+//# sourceMappingURL=cartoon.d.ts.map

package/dist/cartoon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cartoon.d.ts","sourceRoot":"","sources":["../src/cartoon.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAoD,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAKjG,MAAM,WAAW,UAAU;IACzB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;CACvC;AAED,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,8BAA8B;IAC9B,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAC3E,0BAA0B;IAC1B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,iBAAS,YAAY,CACnB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,WAAW,EACnB,IAAI,GAAE,QAAQ,GAAG,SAAS,GAAG,OAAkB,EAC/C,aAAa,GAAE,MAAM,GAAG,OAAO,GAAG,MAAe,EACjD,QAAQ,GAAE,MAAY,GACrB,MAAM,CAuGR;AAkHD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAqDvE;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/cartoon.js

@@ -0,0 +1,233 @@
+/**
+ * Cartoon strip generator with characters and speech bubbles
+ */
+import { getTheme } from './themes.js';
+import { renderCharacter, createCharacter } from './characters.js';
+import { escapeHtml } from './primitives.js';
+const FONT = "'SF Mono', Menlo, Monaco, 'Courier New', monospace";
+/**
+ * Render a speech bubble
+ */
+function speechBubble(x, y, text, colors, type = 'speech', tailDirection = 'down', maxWidth = 180) {
+    // Word wrap text
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = '';
+    const charsPerLine = Math.floor(maxWidth / 7);
+    for (const word of words) {
+        if ((currentLine + ' ' + word).trim().length <= charsPerLine) {
+            currentLine = (currentLine + ' ' + word).trim();
+        }
+        else {
+            if (currentLine)
+                lines.push(currentLine);
+            currentLine = word;
+        }
+    }
+    if (currentLine)
+        lines.push(currentLine);
+    // Limit lines
+    if (lines.length > 4) {
+        lines.length = 4;
+        lines[3] = lines[3].substring(0, charsPerLine - 3) + '...';
+    }
+    const lineHeight = 16;
+    const padding = 12;
+    const bubbleWidth = Math.min(maxWidth, Math.max(...lines.map(l => l.length * 7)) + padding * 2);
+    const bubbleHeight = lines.length * lineHeight + padding * 2;
+    let bubblePath;
+    let tailPath;
+    if (type === 'thought') {
+        // Thought bubble with cloud shape
+        bubblePath = `
+      <ellipse cx="${x}" cy="${y}" rx="${bubbleWidth / 2}" ry="${bubbleHeight / 2}" fill="${colors.card}" stroke="${colors.border}" stroke-width="2"/>
+    `;
+        const tailX = tailDirection === 'left' ? x - bubbleWidth / 2 - 5 : tailDirection === 'right' ? x + bubbleWidth / 2 + 5 : x;
+        const tailY = y + bubbleHeight / 2 + 10;
+        tailPath = `
+      <circle cx="${tailX}" cy="${tailY}" r="6" fill="${colors.card}" stroke="${colors.border}" stroke-width="2"/>
+      <circle cx="${tailX + (tailDirection === 'left' ? -8 : tailDirection === 'right' ? 8 : 0)}" cy="${tailY + 12}" r="4" fill="${colors.card}" stroke="${colors.border}" stroke-width="2"/>
+    `;
+    }
+    else if (type === 'shout') {
+        // Spiky shout bubble
+        const spikes = 8;
+        const innerR = Math.min(bubbleWidth, bubbleHeight) / 2;
+        const outerR = innerR * 1.3;
+        let points = '';
+        for (let i = 0; i < spikes * 2; i++) {
+            const angle = (i * Math.PI) / spikes;
+            const r = i % 2 === 0 ? outerR : innerR;
+            const px = x + r * Math.cos(angle - Math.PI / 2);
+            const py = y + r * Math.sin(angle - Math.PI / 2) * (bubbleHeight / bubbleWidth);
+            points += `${px},${py} `;
+        }
+        bubblePath = `<polygon points="${points.trim()}" fill="${colors.card}" stroke="${colors.orange}" stroke-width="2"/>`;
+        tailPath = '';
+    }
+    else {
+        // Regular speech bubble
+        const rx = 12;
+        bubblePath = `<rect x="${x - bubbleWidth / 2}" y="${y - bubbleHeight / 2}" width="${bubbleWidth}" height="${bubbleHeight}" rx="${rx}" fill="${colors.card}" stroke="${colors.border}" stroke-width="2"/>`;
+        // Tail pointing to speaker
+        const tailSize = 12;
+        let tx, ty, t1x, t1y, t2x, t2y;
+        if (tailDirection === 'left') {
+            tx = x - bubbleWidth / 2 - tailSize;
+            ty = y + bubbleHeight / 4;
+            t1x = x - bubbleWidth / 2;
+            t1y = y;
+            t2x = x - bubbleWidth / 2;
+            t2y = y + bubbleHeight / 4;
+        }
+        else if (tailDirection === 'right') {
+            tx = x + bubbleWidth / 2 + tailSize;
+            ty = y + bubbleHeight / 4;
+            t1x = x + bubbleWidth / 2;
+            t1y = y;
+            t2x = x + bubbleWidth / 2;
+            t2y = y + bubbleHeight / 4;
+        }
+        else {
+            tx = x;
+            ty = y + bubbleHeight / 2 + tailSize;
+            t1x = x - 8;
+            t1y = y + bubbleHeight / 2;
+            t2x = x + 8;
+            t2y = y + bubbleHeight / 2;
+        }
+        tailPath = `<polygon points="${t1x},${t1y} ${tx},${ty} ${t2x},${t2y}" fill="${colors.card}" stroke="${colors.border}" stroke-width="2"/>
+                <line x1="${t1x}" y1="${t1y}" x2="${t2x}" y2="${t2y}" stroke="${colors.card}" stroke-width="4"/>`;
+    }
+    const textContent = lines.map((line, i) => `<text x="${x}" y="${y - (lines.length - 1) * lineHeight / 2 + i * lineHeight + 5}" text-anchor="middle" fill="${colors.text}" font-size="12" font-family="${FONT}">${escapeHtml(line)}</text>`).join('');
+    return `
+    <g class="speech-bubble">
+      ${bubblePath}
+      ${tailPath}
+      ${textContent}
+    </g>
+  `;
+}
+/**
+ * Calculate grid layout dimensions
+ */
+function calculateLayout(panelCount, layout, totalWidth, totalHeight) {
+    let cols, rows;
+    if (layout === 'auto') {
+        if (panelCount <= 2) {
+            cols = panelCount;
+            rows = 1;
+        }
+        else if (panelCount <= 4) {
+            cols = 2;
+            rows = Math.ceil(panelCount / 2);
+        }
+        else if (panelCount <= 6) {
+            cols = 3;
+            rows = Math.ceil(panelCount / 3);
+        }
+        else {
+            cols = 4;
+            rows = Math.ceil(panelCount / 4);
+        }
+    }
+    else {
+        const match = layout.match(/(\d+)x(\d+)/);
+        if (match) {
+            cols = parseInt(match[1]);
+            rows = parseInt(match[2]);
+        }
+        else {
+            cols = 2;
+            rows = Math.ceil(panelCount / 2);
+        }
+    }
+    const gap = 10;
+    const panelWidth = (totalWidth - gap * (cols + 1)) / cols;
+    const panelHeight = (totalHeight - gap * (rows + 1) - 40) / rows; // 40 for title
+    return { cols, rows, panelWidth, panelHeight };
+}
+/**
+ * Render a single panel
+ */
+function renderPanel(panel, characters, x, y, width, height, colors, panelIndex) {
+    const panelChars = panel.characters.map(id => characters.get(id)).filter(Boolean);
+    const charCount = panelChars.length;
+    // Panel background
+    let content = `
+    <rect x="${x}" y="${y}" width="${width}" height="${height}" rx="8" fill="${colors.elevated}" stroke="${colors.border}" stroke-width="2"/>
+  `;
+    // Caption if present
+    if (panel.caption) {
+        content += `<text x="${x + width / 2}" y="${y + 18}" text-anchor="middle" fill="${colors.muted}" font-size="10" font-family="${FONT}">${escapeHtml(panel.caption)}</text>`;
+    }
+    // Position characters - adjusted for new larger character design
+    const charY = y + height - 100;
+    const charSpacing = width / (charCount + 1);
+    const charScale = Math.min(0.7, (height - 150) / 180); // Scale based on panel height
+    panelChars.forEach((char, i) => {
+        const charX = x + charSpacing * (i + 1);
+        const facing = i < charCount / 2 ? 'right' : 'left';
+        // Find emotion for this character in dialogue
+        const charDialogue = panel.dialogue.find(d => d.character === char.id);
+        const emotion = charDialogue?.emotion || 'neutral';
+        content += renderCharacter(charX, charY, char, emotion, charScale, facing);
+    });
+    // Render dialogue bubbles - positioned above characters
+    const dialogueStartY = y + (panel.caption ? 35 : 20);
+    const dialogueEndY = charY - 60 * charScale;
+    const bubbleSpacing = Math.min(70, (dialogueEndY - dialogueStartY) / Math.max(panel.dialogue.length, 1));
+    panel.dialogue.forEach((line, i) => {
+        const charIndex = panelChars.findIndex(c => c.id === line.character);
+        if (charIndex === -1)
+            return;
+        const charX = x + charSpacing * (charIndex + 1);
+        const bubbleX = charX;
+        const bubbleY = dialogueStartY + 25 + i * bubbleSpacing;
+        content += speechBubble(bubbleX, bubbleY, line.text, colors, line.type || 'speech', 'down', width * 0.65);
+    });
+    return content;
+}
+/**
+ * Generate a cartoon strip SVG
+ */
+export function generateCartoonStrip(config) {
+    const { title = '', characters: charDefs, panels, layout = 'auto', theme: themeName, width = 800, height = 600, } = config;
+    const theme = getTheme(themeName);
+    const colors = theme.colors;
+    // Create character instances
+    const characters = new Map();
+    for (const [id, def] of Object.entries(charDefs)) {
+        characters.set(id, createCharacter(id, def.name, def.preset || def.style || 'dev1'));
+    }
+    // Calculate layout
+    const { cols, rows, panelWidth, panelHeight } = calculateLayout(panels.length, layout, width, height);
+    const gap = 10;
+    // Build SVG
+    let content = '';
+    // Title
+    if (title) {
+        content += `<text x="${width / 2}" y="28" text-anchor="middle" fill="${colors.text}" font-size="16" font-weight="bold" font-family="${FONT}">${escapeHtml(title)}</text>`;
+    }
+    // Render panels
+    panels.forEach((panel, i) => {
+        const col = i % cols;
+        const row = Math.floor(i / cols);
+        const px = gap + col * (panelWidth + gap);
+        const py = (title ? 45 : gap) + row * (panelHeight + gap);
+        content += renderPanel(panel, characters, px, py, panelWidth, panelHeight, colors, i);
+    });
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="${colors.bg}"/>
+      <stop offset="100%" stop-color="${colors.card}"/>
+    </linearGradient>
+  </defs>
+  <rect width="${width}" height="${height}" fill="url(#bg)"/>
+  ${content}
+</svg>`;
+}
+export { speechBubble };
+//# sourceMappingURL=cartoon.js.map

package/dist/characters.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Character definitions for cartoon strips
+ * Improved cartoon-style characters with better proportions and expressions
+ */
+export type Emotion = 'neutral' | 'happy' | 'sad' | 'angry' | 'surprised' | 'thinking' | 'confused' | 'excited' | 'worried';
+export interface CharacterStyle {
+    /** Primary color (hair) */
+    primary: string;
+    /** Secondary color (shirt/clothing) */
+    secondary: string;
+    /** Skin tone */
+    skin: string;
+    /** Hair style */
+    hairStyle: 'short' | 'long' | 'bald' | 'spiky' | 'curly' | 'ponytail' | 'mohawk';
+    /** Accessory */
+    accessory: 'none' | 'glasses' | 'sunglasses' | 'hat' | 'headphones' | 'beanie';
+    /** Eye color */
+    eyeColor: string;
+    /** Shirt style */
+    shirtStyle: 'tshirt' | 'hoodie' | 'formal' | 'tank';
+}
+export interface Character {
+    id: string;
+    name: string;
+    style: CharacterStyle;
+}
+/**
+ * Predefined character styles - diverse and visually distinct
+ */
+export declare const CHARACTER_PRESETS: Record<string, CharacterStyle>;
+/**
+ * Render a character at position with emotion - completely redesigned
+ */
+export declare function renderCharacter(x: number, y: number, character: Character, emotion?: Emotion, scale?: number, facing?: 'left' | 'right'): string;
+/**
+ * Create a character from preset or custom style
+ */
+export declare function createCharacter(id: string, name: string, presetOrStyle?: string | CharacterStyle): Character;
+/**
+ * Get available character presets
+ */
+export declare function getCharacterPresets(): string[];
+/**
+ * Get available emotions
+ */
+export declare function getEmotions(): Emotion[];
+//# sourceMappingURL=characters.d.ts.map

package/dist/characters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"characters.d.ts","sourceRoot":"","sources":["../src/characters.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,OAAO,GACf,SAAS,GACT,OAAO,GACP,KAAK,GACL,OAAO,GACP,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB;IACjB,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;IACjF,gBAAgB;IAChB,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC/E,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACrD;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAyE5D,CAAC;AAsRF;;GAEG;AACH,wBAAgB,eAAe,CAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,SAAS,EAAE,SAAS,EACpB,OAAO,GAAE,OAAmB,EAC5B,KAAK,GAAE,MAAU,EACjB,MAAM,GAAE,MAAM,GAAG,OAAiB,GACjC,MAAM,CAkDR;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,aAAa,GAAE,MAAM,GAAG,cAAuB,GAC9C,SAAS,CAMX;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,EAAE,CAE9C;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,OAAO,EAAE,CAEvC"}