@svg-gen/tech-svg-generator 1.0.0

package/dist/characters.js

@@ -0,0 +1,422 @@
+/**
+ * Character definitions for cartoon strips
+ * Improved cartoon-style characters with better proportions and expressions
+ */
+/**
+ * Predefined character styles - diverse and visually distinct
+ */
+export const CHARACTER_PRESETS = {
+    alex: {
+        primary: '#4f46e5', // Indigo hair
+        secondary: '#3b82f6', // Blue hoodie
+        skin: '#fcd5b8',
+        hairStyle: 'short',
+        accessory: 'glasses',
+        eyeColor: '#1e40af',
+        shirtStyle: 'hoodie',
+    },
+    sam: {
+        primary: '#7c3aed', // Purple curly hair
+        secondary: '#10b981', // Green shirt
+        skin: '#d4a574',
+        hairStyle: 'curly',
+        accessory: 'none',
+        eyeColor: '#065f46',
+        shirtStyle: 'tshirt',
+    },
+    jordan: {
+        primary: '#f59e0b', // Blonde/orange long hair
+        secondary: '#ef4444', // Red shirt
+        skin: '#fce7d6',
+        hairStyle: 'long',
+        accessory: 'headphones',
+        eyeColor: '#92400e',
+        shirtStyle: 'tshirt',
+    },
+    casey: {
+        primary: '#1f2937', // Dark spiky hair
+        secondary: '#8b5cf6', // Purple hoodie
+        skin: '#8d6e4c',
+        hairStyle: 'spiky',
+        accessory: 'none',
+        eyeColor: '#1f2937',
+        shirtStyle: 'hoodie',
+    },
+    riley: {
+        primary: '#ec4899', // Pink hair
+        secondary: '#6366f1', // Indigo shirt
+        skin: '#fcd5b8',
+        hairStyle: 'ponytail',
+        accessory: 'none',
+        eyeColor: '#be185d',
+        shirtStyle: 'tshirt',
+    },
+    morgan: {
+        primary: '#059669', // Teal/green hair
+        secondary: '#f97316', // Orange hoodie
+        skin: '#e0c8a8',
+        hairStyle: 'mohawk',
+        accessory: 'sunglasses',
+        eyeColor: '#047857',
+        shirtStyle: 'hoodie',
+    },
+    taylor: {
+        primary: '#dc2626', // Red hair
+        secondary: '#1f2937', // Dark formal
+        skin: '#fce7d6',
+        hairStyle: 'short',
+        accessory: 'none',
+        eyeColor: '#166534',
+        shirtStyle: 'formal',
+    },
+    robot: {
+        primary: '#6b7280', // Gray metallic
+        secondary: '#3b82f6', // Blue accents
+        skin: '#d1d5db',
+        hairStyle: 'bald',
+        accessory: 'none',
+        eyeColor: '#3b82f6',
+        shirtStyle: 'tshirt',
+    },
+};
+// Legacy aliases for backward compatibility
+CHARACTER_PRESETS.dev1 = CHARACTER_PRESETS.alex;
+CHARACTER_PRESETS.dev2 = CHARACTER_PRESETS.sam;
+CHARACTER_PRESETS.dev3 = CHARACTER_PRESETS.jordan;
+CHARACTER_PRESETS.dev4 = CHARACTER_PRESETS.casey;
+CHARACTER_PRESETS.dev5 = CHARACTER_PRESETS.riley;
+/**
+ * Get facial features based on emotion
+ */
+function getFace(emotion, eyeColor) {
+    const pupil = eyeColor;
+    const faces = {
+        neutral: {
+            leftEye: `<ellipse cx="-8" cy="-2" rx="5" ry="6" fill="white" stroke="#374151" stroke-width="1.5"/>
+                <circle cx="-8" cy="-1" r="3" fill="${pupil}"/>
+                <circle cx="-7" cy="-2" r="1" fill="white"/>`,
+            rightEye: `<ellipse cx="8" cy="-2" rx="5" ry="6" fill="white" stroke="#374151" stroke-width="1.5"/>
+                 <circle cx="8" cy="-1" r="3" fill="${pupil}"/>
+                 <circle cx="9" cy="-2" r="1" fill="white"/>`,
+            mouth: `<path d="M-6,10 Q0,14 6,10" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+            extras: '',
+        },
+        happy: {
+            leftEye: `<path d="M-13,-2 Q-8,-6 -3,-2" fill="none" stroke="#374151" stroke-width="2.5" stroke-linecap="round"/>`,
+            rightEye: `<path d="M3,-2 Q8,-6 13,-2" fill="none" stroke="#374151" stroke-width="2.5" stroke-linecap="round"/>`,
+            mouth: `<path d="M-8,8 Q0,18 8,8" fill="#374151" stroke="#374151" stroke-width="2"/>
+              <path d="M-6,10 Q0,8 6,10" fill="#fca5a5" stroke="none"/>`,
+            extras: `<path d="M-18,2 L-14,0 M-18,-2 L-14,0" stroke="#f472b6" stroke-width="1.5" stroke-linecap="round"/>
+               <path d="M18,2 L14,0 M18,-2 L14,0" stroke="#f472b6" stroke-width="1.5" stroke-linecap="round"/>`,
+        },
+        sad: {
+            leftEye: `<ellipse cx="-8" cy="0" rx="5" ry="5" fill="white" stroke="#374151" stroke-width="1.5"/>
+                <circle cx="-8" cy="1" r="3" fill="${pupil}"/>
+                <ellipse cx="-8" cy="-4" rx="6" ry="2" fill="none" stroke="#374151" stroke-width="1.5"/>`,
+            rightEye: `<ellipse cx="8" cy="0" rx="5" ry="5" fill="white" stroke="#374151" stroke-width="1.5"/>
+                 <circle cx="8" cy="1" r="3" fill="${pupil}"/>
+                 <ellipse cx="8" cy="-4" rx="6" ry="2" fill="none" stroke="#374151" stroke-width="1.5"/>`,
+            mouth: `<path d="M-6,14 Q0,10 6,14" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+            extras: `<path d="M-5,6 Q-6,12 -8,16" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round"/>`,
+        },
+        angry: {
+            leftEye: `<ellipse cx="-8" cy="0" rx="4" ry="5" fill="white" stroke="#374151" stroke-width="1.5"/>
+                <circle cx="-8" cy="1" r="2.5" fill="${pupil}"/>
+                <path d="M-14,-6 L-3,-3" fill="none" stroke="#374151" stroke-width="2.5" stroke-linecap="round"/>`,
+            rightEye: `<ellipse cx="8" cy="0" rx="4" ry="5" fill="white" stroke="#374151" stroke-width="1.5"/>
+                 <circle cx="8" cy="1" r="2.5" fill="${pupil}"/>
+                 <path d="M3,-3 L14,-6" fill="none" stroke="#374151" stroke-width="2.5" stroke-linecap="round"/>`,
+            mouth: `<path d="M-8,12 L0,10 L8,12" fill="none" stroke="#374151" stroke-width="2.5" stroke-linecap="round"/>`,
+            extras: `<path d="M-2,-18 L0,-22 L2,-18" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>
+               <path d="M-6,-16 L-7,-20" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>
+               <path d="M6,-16 L7,-20" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>`,
+        },
+        surprised: {
+            leftEye: `<ellipse cx="-8" cy="-1" rx="6" ry="8" fill="white" stroke="#374151" stroke-width="1.5"/>
+                <circle cx="-8" cy="0" r="4" fill="${pupil}"/>
+                <circle cx="-6" cy="-2" r="1.5" fill="white"/>`,
+            rightEye: `<ellipse cx="8" cy="-1" rx="6" ry="8" fill="white" stroke="#374151" stroke-width="1.5"/>
+                 <circle cx="8" cy="0" r="4" fill="${pupil}"/>
+                 <circle cx="10" cy="-2" r="1.5" fill="white"/>`,
+            mouth: `<ellipse cx="0" cy="13" rx="5" ry="6" fill="#374151"/>
+              <ellipse cx="0" cy="12" rx="3" ry="4" fill="#fca5a5"/>`,
+            extras: `<path d="M-14,-10 L-14,-14" stroke="#374151" stroke-width="2" stroke-linecap="round"/>
+               <path d="M14,-10 L14,-14" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+        },
+        thinking: {
+            leftEye: `<ellipse cx="-8" cy="-2" rx="5" ry="6" fill="white" stroke="#374151" stroke-width="1.5"/>
+                <circle cx="-6" cy="-1" r="3" fill="${pupil}"/>
+                <circle cx="-5" cy="-2" r="1" fill="white"/>`,
+            rightEye: `<ellipse cx="8" cy="-2" rx="5" ry="6" fill="white" stroke="#374151" stroke-width="1.5"/>
+                 <circle cx="10" cy="-3" r="3" fill="${pupil}"/>
+                 <circle cx="11" cy="-4" r="1" fill="white"/>`,
+            mouth: `<path d="M-4,12 Q2,12 5,10" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+            extras: `<circle cx="20" cy="-15" r="3" fill="none" stroke="#9ca3af" stroke-width="1.5"/>
+               <circle cx="25" cy="-20" r="4" fill="none" stroke="#9ca3af" stroke-width="1.5"/>
+               <circle cx="32" cy="-24" r="5" fill="none" stroke="#9ca3af" stroke-width="1.5"/>`,
+        },
+        confused: {
+            leftEye: `<ellipse cx="-8" cy="-2" rx="5" ry="6" fill="white" stroke="#374151" stroke-width="1.5"/>
+                <circle cx="-8" cy="-1" r="3" fill="${pupil}"/>
+                <path d="M-13,-7 L-3,-5" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+            rightEye: `<ellipse cx="8" cy="0" rx="5" ry="6" fill="white" stroke="#374151" stroke-width="1.5"/>
+                 <circle cx="8" cy="1" r="3" fill="${pupil}"/>
+                 <path d="M3,-3 L13,-5" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+            mouth: `<path d="M-5,12 Q-2,10 0,12 Q2,14 5,12" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+            extras: `<text x="18" y="-12" font-size="16" fill="#9ca3af" font-family="sans-serif">?</text>`,
+        },
+        excited: {
+            leftEye: `<path d="M-12,-2 L-8,2 L-4,-2" fill="none" stroke="#374151" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+            rightEye: `<path d="M4,-2 L8,2 L12,-2" fill="none" stroke="#374151" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>`,
+            mouth: `<path d="M-10,8 Q0,22 10,8" fill="#374151"/>
+              <path d="M-7,12 Q0,10 7,12" fill="#fca5a5"/>`,
+            extras: `<path d="M-20,-5 L-16,-3 M-20,-8 L-15,-7" stroke="#fbbf24" stroke-width="2" stroke-linecap="round"/>
+               <path d="M20,-5 L16,-3 M20,-8 L15,-7" stroke="#fbbf24" stroke-width="2" stroke-linecap="round"/>
+               <circle cx="-15" cy="5" r="4" fill="#fca5a5" opacity="0.5"/>
+               <circle cx="15" cy="5" r="4" fill="#fca5a5" opacity="0.5"/>`,
+        },
+        worried: {
+            leftEye: `<ellipse cx="-8" cy="0" rx="5" ry="6" fill="white" stroke="#374151" stroke-width="1.5"/>
+                <circle cx="-8" cy="2" r="3" fill="${pupil}"/>
+                <path d="M-13,-5 Q-8,-8 -3,-5" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+            rightEye: `<ellipse cx="8" cy="0" rx="5" ry="6" fill="white" stroke="#374151" stroke-width="1.5"/>
+                 <circle cx="8" cy="2" r="3" fill="${pupil}"/>
+                 <path d="M3,-5 Q8,-8 13,-5" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+            mouth: `<path d="M-6,13 Q0,11 6,13" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"/>`,
+            extras: `<path d="M-12,6 L-10,4 L-8,6" stroke="#60a5fa" stroke-width="1.5" fill="none"/>
+               <path d="M12,6 L10,4 L8,6" stroke="#60a5fa" stroke-width="1.5" fill="none"/>`,
+        },
+    };
+    return faces[emotion] || faces.neutral;
+}
+/**
+ * Render hair based on style - improved designs
+ */
+function renderHair(style, skinColor) {
+    const c = style.primary;
+    switch (style.hairStyle) {
+        case 'short':
+            return `
+        <ellipse cx="0" cy="-22" rx="22" ry="14" fill="${c}"/>
+        <path d="M-20,-10 Q-22,-20 -18,-28 Q-10,-35 0,-36 Q10,-35 18,-28 Q22,-20 20,-10" fill="${c}"/>
+        <path d="M-15,-30 Q-10,-34 0,-35 Q10,-34 15,-30" fill="${c}" stroke="${c}" stroke-width="3"/>
+      `;
+        case 'long':
+            return `
+        <ellipse cx="0" cy="-22" rx="22" ry="14" fill="${c}"/>
+        <path d="M-22,-8 Q-26,15 -20,40 Q-18,45 -15,40 Q-18,20 -20,-5" fill="${c}"/>
+        <path d="M22,-8 Q26,15 20,40 Q18,45 15,40 Q18,20 20,-5" fill="${c}"/>
+        <path d="M-18,-28 Q0,-38 18,-28" fill="${c}"/>
+        <path d="M-8,-32 Q0,-36 8,-32" fill="${c}" stroke="${c}" stroke-width="4"/>
+      `;
+        case 'bald':
+            return `<ellipse cx="0" cy="-24" rx="20" ry="12" fill="${skinColor}" opacity="0.3"/>`;
+        case 'spiky':
+            return `
+        <path d="M-18,-20 L-22,-38 L-12,-28 L-8,-42 L-2,-28 L4,-45 L8,-28 L14,-40 L18,-28 L22,-36 L20,-20" fill="${c}"/>
+        <ellipse cx="0" cy="-20" rx="20" ry="10" fill="${c}"/>
+      `;
+        case 'curly':
+            return `
+        <circle cx="-14" cy="-28" r="8" fill="${c}"/>
+        <circle cx="-4" cy="-32" r="9" fill="${c}"/>
+        <circle cx="8" cy="-30" r="8" fill="${c}"/>
+        <circle cx="16" cy="-24" r="7" fill="${c}"/>
+        <circle cx="-18" cy="-20" r="7" fill="${c}"/>
+        <circle cx="0" cy="-26" r="10" fill="${c}"/>
+        <circle cx="-20" cy="-12" r="6" fill="${c}"/>
+        <circle cx="20" cy="-14" r="6" fill="${c}"/>
+      `;
+        case 'ponytail':
+            return `
+        <ellipse cx="0" cy="-22" rx="21" ry="13" fill="${c}"/>
+        <path d="M-18,-28 Q0,-38 18,-28" fill="${c}"/>
+        <ellipse cx="0" cy="-32" rx="8" ry="5" fill="${c}"/>
+        <path d="M0,-36 Q15,-38 20,-30 Q28,-25 25,-10 Q24,0 20,10" fill="${c}" stroke="${c}" stroke-width="8" stroke-linecap="round"/>
+        <circle cx="0" cy="-38" r="5" fill="${style.secondary}"/>
+      `;
+        case 'mohawk':
+            return `
+        <path d="M-6,-25 L-4,-50 L0,-42 L4,-52 L6,-25" fill="${c}"/>
+        <ellipse cx="0" cy="-22" rx="18" ry="8" fill="${skinColor}"/>
+        <path d="M-16,-18 Q-18,-22 -14,-26 Q-8,-30 0,-30 Q8,-30 14,-26 Q18,-22 16,-18" fill="${skinColor}"/>
+      `;
+        default:
+            return `<ellipse cx="0" cy="-22" rx="22" ry="14" fill="${c}"/>`;
+    }
+}
+/**
+ * Render accessory - improved designs
+ */
+function renderAccessory(style) {
+    switch (style.accessory) {
+        case 'glasses':
+            return `
+        <rect x="-14" y="-6" width="12" height="10" rx="2" fill="none" stroke="#374151" stroke-width="2"/>
+        <rect x="2" y="-6" width="12" height="10" rx="2" fill="none" stroke="#374151" stroke-width="2"/>
+        <path d="M-2,-1 L2,-1" stroke="#374151" stroke-width="2"/>
+        <path d="M-14,-1 L-18,-3" stroke="#374151" stroke-width="2"/>
+        <path d="M14,-1 L18,-3" stroke="#374151" stroke-width="2"/>
+      `;
+        case 'sunglasses':
+            return `
+        <path d="M-16,-4 L-14,-6 L-2,-6 L-2,4 L-14,4 L-16,-4" fill="#1f2937" stroke="#374151" stroke-width="1.5"/>
+        <path d="M16,-4 L14,-6 L2,-6 L2,4 L14,4 L16,-4" fill="#1f2937" stroke="#374151" stroke-width="1.5"/>
+        <path d="M-2,-2 L2,-2" stroke="#374151" stroke-width="2"/>
+        <path d="M-16,-2 L-20,-4" stroke="#374151" stroke-width="2"/>
+        <path d="M16,-2 L20,-4" stroke="#374151" stroke-width="2"/>
+        <path d="M-12,-4 L-6,-2" stroke="#60a5fa" stroke-width="1" opacity="0.5"/>
+        <path d="M4,-4 L10,-2" stroke="#60a5fa" stroke-width="1" opacity="0.5"/>
+      `;
+        case 'hat':
+            return `
+        <ellipse cx="0" cy="-32" rx="26" ry="6" fill="${style.primary}"/>
+        <path d="M-18,-32 L-18,-48 Q-18,-56 0,-56 Q18,-56 18,-48 L18,-32" fill="${style.primary}"/>
+        <rect x="-18" y="-38" width="36" height="4" fill="${style.secondary}"/>
+      `;
+        case 'headphones':
+            return `
+        <path d="M-22,-8 Q-26,-30 0,-34 Q26,-30 22,-8" stroke="#374151" stroke-width="4" fill="none"/>
+        <rect x="-28" y="-14" width="10" height="16" rx="3" fill="#374151"/>
+        <rect x="18" y="-14" width="10" height="16" rx="3" fill="#374151"/>
+        <rect x="-26" y="-12" width="6" height="12" rx="2" fill="#1f2937"/>
+        <rect x="20" y="-12" width="6" height="12" rx="2" fill="#1f2937"/>
+      `;
+        case 'beanie':
+            return `
+        <path d="M-20,-18 Q-22,-32 0,-36 Q22,-32 20,-18" fill="${style.secondary}"/>
+        <path d="M-20,-18 L20,-18" stroke="${style.secondary}" stroke-width="6"/>
+        <circle cx="0" cy="-38" r="5" fill="${style.secondary}"/>
+        <path d="M-18,-22 L18,-22" stroke="${style.primary}" stroke-width="2" opacity="0.5"/>
+        <path d="M-16,-26 L16,-26" stroke="${style.primary}" stroke-width="2" opacity="0.5"/>
+      `;
+        default:
+            return '';
+    }
+}
+/**
+ * Render body/clothing - improved designs
+ */
+function renderBody(style) {
+    const c = style.secondary;
+    switch (style.shirtStyle) {
+        case 'hoodie':
+            return `
+        <path d="M-24,25 Q-28,30 -30,50 L-30,70 L30,70 L30,50 Q28,30 24,25" fill="${c}"/>
+        <path d="M-24,25 Q-20,35 0,38 Q20,35 24,25" fill="${c}" stroke="${c}" stroke-width="2"/>
+        <path d="M-8,28 Q0,32 8,28" fill="none" stroke="${style.skin}" stroke-width="3"/>
+        <ellipse cx="0" cy="50" rx="12" ry="8" fill="${c}" stroke="${darken(c, 20)}" stroke-width="1"/>
+        <path d="M-6,46 L-6,54 M6,46 L6,54" stroke="${darken(c, 20)}" stroke-width="1"/>
+      `;
+        case 'formal':
+            return `
+        <path d="M-24,25 L-28,70 L28,70 L24,25" fill="${c}"/>
+        <path d="M-24,25 Q-15,30 0,32 Q15,30 24,25" fill="white"/>
+        <path d="M0,32 L0,70" stroke="${darken(c, 30)}" stroke-width="1"/>
+        <path d="M-3,35 L0,32 L3,35" fill="${style.primary}"/>
+        <circle cx="-2" cy="45" r="2" fill="${darken(c, 30)}"/>
+        <circle cx="-2" cy="55" r="2" fill="${darken(c, 30)}"/>
+        <path d="M-24,25 L-20,28 L-16,25" fill="${c}"/>
+        <path d="M24,25 L20,28 L16,25" fill="${c}"/>
+      `;
+        case 'tank':
+            return `
+        <path d="M-16,25 L-18,70 L18,70 L16,25" fill="${c}"/>
+        <path d="M-16,25 Q0,30 16,25" fill="${c}"/>
+        <ellipse cx="0" cy="28" rx="10" ry="4" fill="${style.skin}"/>
+      `;
+        case 'tshirt':
+        default:
+            return `
+        <path d="M-22,25 Q-26,35 -28,50 L-28,70 L28,70 L28,50 Q26,35 22,25" fill="${c}"/>
+        <path d="M-22,25 Q-12,32 0,34 Q12,32 22,25" fill="${c}"/>
+        <ellipse cx="0" cy="30" rx="8" ry="4" fill="${style.skin}"/>
+      `;
+    }
+}
+/**
+ * Darken a hex color
+ */
+function darken(hex, percent) {
+    const num = parseInt(hex.replace('#', ''), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = Math.max((num >> 16) - amt, 0);
+    const G = Math.max((num >> 8 & 0x00FF) - amt, 0);
+    const B = Math.max((num & 0x0000FF) - amt, 0);
+    return '#' + (0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1);
+}
+/**
+ * Render a character at position with emotion - completely redesigned
+ */
+export function renderCharacter(x, y, character, emotion = 'neutral', scale = 1, facing = 'right') {
+    const style = character.style;
+    const face = getFace(emotion, style.eyeColor);
+    const flip = facing === 'left' ? -1 : 1;
+    return `
+  <g transform="translate(${x}, ${y}) scale(${flip * scale}, ${scale})">
+    <!-- Shadow -->
+    <ellipse cx="0" cy="72" rx="20" ry="5" fill="#000" opacity="0.1"/>
+    
+    <!-- Body -->
+    ${renderBody(style)}
+    
+    <!-- Neck -->
+    <rect x="-8" y="18" width="16" height="12" fill="${style.skin}"/>
+    
+    <!-- Head shape -->
+    <ellipse cx="0" cy="0" rx="24" ry="26" fill="${style.skin}"/>
+    
+    <!-- Ears -->
+    <ellipse cx="-23" cy="0" rx="5" ry="7" fill="${style.skin}"/>
+    <ellipse cx="23" cy="0" rx="5" ry="7" fill="${style.skin}"/>
+    <ellipse cx="-23" cy="0" rx="3" ry="4" fill="${darken(style.skin, 10)}"/>
+    <ellipse cx="23" cy="0" rx="3" ry="4" fill="${darken(style.skin, 10)}"/>
+    
+    <!-- Hair (back layer for some styles) -->
+    ${style.hairStyle === 'long' || style.hairStyle === 'ponytail' ? `<path d="M-22,0 Q-24,20 -20,35" fill="${style.primary}" stroke="${style.primary}" stroke-width="6"/>
+    <path d="M22,0 Q24,20 20,35" fill="${style.primary}" stroke="${style.primary}" stroke-width="6"/>` : ''}
+    
+    <!-- Hair -->
+    ${renderHair(style, style.skin)}
+    
+    <!-- Face -->
+    <g class="face">
+      ${face.leftEye}
+      ${face.rightEye}
+      
+      <!-- Nose -->
+      <path d="M0,2 Q2,6 0,8" fill="none" stroke="${darken(style.skin, 15)}" stroke-width="1.5" stroke-linecap="round"/>
+      
+      ${face.mouth}
+      ${face.extras}
+    </g>
+    
+    <!-- Accessory -->
+    ${renderAccessory(style)}
+    
+    <!-- Name tag -->
+    <text x="0" y="85" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="'SF Mono', Menlo, monospace" font-weight="500">${character.name}</text>
+  </g>`;
+}
+/**
+ * Create a character from preset or custom style
+ */
+export function createCharacter(id, name, presetOrStyle = 'alex') {
+    const style = typeof presetOrStyle === 'string'
+        ? CHARACTER_PRESETS[presetOrStyle] || CHARACTER_PRESETS.alex
+        : presetOrStyle;
+    return { id, name, style };
+}
+/**
+ * Get available character presets
+ */
+export function getCharacterPresets() {
+    return Object.keys(CHARACTER_PRESETS);
+}
+/**
+ * Get available emotions
+ */
+export function getEmotions() {
+    return ['neutral', 'happy', 'sad', 'angry', 'surprised', 'thinking', 'confused', 'excited', 'worried'];
+}
+//# sourceMappingURL=characters.js.map

package/dist/generator.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Main SVG generator
+ */
+import type { SceneType, GenerateOptions, GenerateResult } from './types.js';
+/**
+ * Detect the best scene type based on title and content keywords
+ */
+export declare function detectScene(title: string, content?: string): SceneType;
+/**
+ * Get list of available scene types
+ */
+export declare function getAvailableScenes(): SceneType[];
+/**
+ * Generate an SVG illustration
+ *
+ * @param title - The title/topic for the illustration
+ * @param content - Optional additional content for better scene detection
+ * @param options - Generation options
+ * @returns Generated SVG result
+ *
+ * @example
+ * ```ts
+ * import { generateSVG } from 'tech-svg-generator';
+ *
+ * const result = generateSVG('Database Replication Strategies');
+ * console.log(result.svg); // SVG string
+ * console.log(result.scene); // 'database'
+ * ```
+ */
+export declare function generateSVG(title: string, content?: string, options?: GenerateOptions): GenerateResult;
+/**
+ * Generate an illustration and return as a complete result object
+ * Alias for generateSVG with a more descriptive name
+ */
+export declare function generateIllustration(title: string, content?: string, options?: GenerateOptions): GenerateResult;
+//# sourceMappingURL=generator.d.ts.map

package/dist/generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../src/generator.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAsB7E;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,MAAW,GAAG,SAAS,CAqB1E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,EAAE,CAEhD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,MAAW,EACpB,OAAO,GAAE,eAAoB,GAC5B,cAAc,CAgChB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,MAAW,EACpB,OAAO,GAAE,eAAoB,GAC5B,cAAc,CAEhB"}

package/dist/generator.js

@@ -0,0 +1,103 @@
+/**
+ * Main SVG generator
+ */
+import { SCENES } from './scenes.js';
+import { getTheme } from './themes.js';
+/**
+ * Keywords for automatic scene detection
+ */
+const KEYWORDS = {
+    architecture: ['architecture', 'design', 'pattern', 'system', 'infrastructure', 'microservice', 'distributed'],
+    scaling: ['scale', 'load', 'traffic', 'kubernetes', 'k8s', 'container', 'docker', 'cluster', 'replicas', 'horizontal', 'auto-scaling'],
+    database: ['database', 'sql', 'postgres', 'mysql', 'mongo', 'query', 'migration', 'schema', 'orm', 'redis', 'cache', 'replication'],
+    deployment: ['deploy', 'ci', 'cd', 'pipeline', 'release', 'ship', 'production', 'staging', 'github actions', 'jenkins', 'devops'],
+    security: ['security', 'auth', 'authentication', 'jwt', 'oauth', 'encrypt', 'ssl', 'tls', 'firewall', 'vulnerability', 'zero trust'],
+    debugging: ['debug', 'bug', 'error', 'fix', 'issue', 'trace', 'breakpoint', 'crash', 'exception', 'troubleshoot', 'root cause'],
+    testing: ['test', 'jest', 'vitest', 'playwright', 'cypress', 'coverage', 'unit', 'integration', 'e2e', 'tdd', 'mock'],
+    performance: ['performance', 'optimize', 'speed', 'latency', 'cache', 'profil', 'benchmark', 'bottleneck', 'memory', 'cpu'],
+    api: ['api', 'rest', 'graphql', 'endpoint', 'gateway', 'grpc', 'webhook', 'http', 'request', 'response'],
+    monitoring: ['monitor', 'observ', 'metric', 'log', 'alert', 'grafana', 'datadog', 'prometheus', 'dashboard', 'trace'],
+    frontend: ['frontend', 'react', 'vue', 'angular', 'svelte', 'css', 'tailwind', 'component', 'ui', 'web vitals', 'lcp', 'fid'],
+    success: ['success', 'complete', 'done', 'achieve', 'launch', 'milestone', 'shipped', 'celebrate', 'win'],
+    error: ['fail', 'crash', 'down', 'outage', 'incident', '500', '503', 'timeout', 'oom', 'killed', 'alert'],
+    default: [],
+};
+/**
+ * Detect the best scene type based on title and content keywords
+ */
+export function detectScene(title, content = '') {
+    const text = `${title} ${content}`.toLowerCase();
+    let best = 'default';
+    let score = 0;
+    for (const [scene, keywords] of Object.entries(KEYWORDS)) {
+        if (scene === 'default')
+            continue;
+        let s = 0;
+        for (const kw of keywords) {
+            if (text.includes(kw)) {
+                s += title.toLowerCase().includes(kw) ? 3 : 1;
+            }
+        }
+        if (s > score) {
+            score = s;
+            best = scene;
+        }
+    }
+    return best;
+}
+/**
+ * Get list of available scene types
+ */
+export function getAvailableScenes() {
+    return Object.keys(SCENES);
+}
+/**
+ * Generate an SVG illustration
+ *
+ * @param title - The title/topic for the illustration
+ * @param content - Optional additional content for better scene detection
+ * @param options - Generation options
+ * @returns Generated SVG result
+ *
+ * @example
+ * ```ts
+ * import { generateSVG } from 'tech-svg-generator';
+ *
+ * const result = generateSVG('Database Replication Strategies');
+ * console.log(result.svg); // SVG string
+ * console.log(result.scene); // 'database'
+ * ```
+ */
+export function generateSVG(title, content = '', options = {}) {
+    const { width = 700, height = 420, theme: themeName, scene: forcedScene, } = options;
+    const theme = getTheme(themeName);
+    const colors = theme.colors;
+    const sceneType = forcedScene || detectScene(title, content);
+    const sceneRenderer = SCENES[sceneType] || SCENES.default;
+    const sceneContent = sceneRenderer(title, colors, width, height);
+    const svg = `<?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)"/>
+  ${sceneContent}
+</svg>`;
+    return {
+        svg,
+        scene: sceneType,
+        width,
+        height,
+    };
+}
+/**
+ * Generate an illustration and return as a complete result object
+ * Alias for generateSVG with a more descriptive name
+ */
+export function generateIllustration(title, content = '', options = {}) {
+    return generateSVG(title, content, options);
+}
+//# sourceMappingURL=generator.js.map

package/dist/icons.d.ts

@@ -0,0 +1,10 @@
+/**
+ * SVG icon paths (24x24 viewBox)
+ * Lucide-style icons for technical illustrations
+ */
+export declare const ICONS: Record<string, string>;
+/**
+ * Get icon names
+ */
+export declare function getIconNames(): string[];
+//# sourceMappingURL=icons.d.ts.map

package/dist/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAgCxC,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,EAAE,CAEvC"}

package/dist/icons.js

@@ -0,0 +1,44 @@
+/**
+ * SVG icon paths (24x24 viewBox)
+ * Lucide-style icons for technical illustrations
+ */
+export const ICONS = {
+    server: 'M4 6h16M4 12h16M4 18h16M8 6v12M16 6v12',
+    database: 'M12 3c4.97 0 9 1.34 9 3s-4.03 3-9 3-9-1.34-9-3 4.03-3 9-3m9 3v12c0 1.66-4.03 3-9 3s-9-1.34-9-3V6m18 6c0 1.66-4.03 3-9 3s-9-1.34-9-3',
+    cloud: 'M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z',
+    code: 'M16 18l6-6-6-6M8 6l-6 6 6 6',
+    terminal: 'M4 17l6-6-6-6M12 19h8',
+    shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
+    zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
+    check: 'M20 6L9 17l-5-5',
+    x: 'M18 6L6 18M6 6l12 12',
+    alert: 'M12 9v4m0 4h.01M12 2L2 22h20L12 2z',
+    globe: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10z',
+    layers: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5',
+    rocket: 'M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z',
+    users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75',
+    target: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
+    cpu: 'M9 9h6v6H9zM9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3',
+    activity: 'M22 12h-4l-3 9L9 3l-3 9H2',
+    lock: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4',
+    eye: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
+    git: 'M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22',
+    package: 'M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z',
+    settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z',
+    wifi: 'M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01',
+    download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3',
+    upload: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12',
+    refresh: 'M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15',
+    search: 'M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM21 21l-4.35-4.35',
+    file: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',
+    folder: 'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z',
+    clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2',
+    bell: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0',
+};
+/**
+ * Get icon names
+ */
+export function getIconNames() {
+    return Object.keys(ICONS);
+}
+//# sourceMappingURL=icons.js.map

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Tech SVG Generator
+ * Generate clean, professional SVG illustrations for technical content
+ *
+ * @packageDocumentation
+ */
+export { generateSVG, generateIllustration, detectScene, getAvailableScenes } from './generator.js';
+export { SCENES } from './scenes.js';
+export { THEMES, getTheme, type Theme, type ThemeColors } from './themes.js';
+export { ICONS } from './icons.js';
+export type { GenerateOptions, GenerateResult, SceneType } from './types.js';
+export { generateCartoonStrip, type CartoonStripConfig, type CartoonPanel, type DialogLine } from './cartoon.js';
+export { renderCharacter, createCharacter, getCharacterPresets, getEmotions, CHARACTER_PRESETS, type Character, type CharacterStyle, type Emotion } from './characters.js';
+export { parseYAML, parseJSON, generateFromYAML, generateFromJSON, generateFromDescription, SCENE_YAML_EXAMPLE, CARTOON_YAML_EXAMPLE, CARTOON_JSON_EXAMPLE, type SceneDescription, type CartoonDescription, type Description, } from './parser.js';
+//# sourceMappingURL=index.d.ts.map