From 91d423530bae0f35957d1e2035fe5d0a11b781b0 Mon Sep 17 00:00:00 2001
From: ajianaz <ajianaz@users.noreply.github.com>
Date: Thu, 17 Sep 2026 16:18:07 +0700
Subject: [PATCH 1/2] feat(templates): whatsapp-chat + notes-app cards, inline
 markup for twitter/tiktok/quote-stack

New templates (both 1080x1350, inline-markup enabled):
- whatsapp-chat: contact header + 6 message slots with side toggle,
  dynamic bubble heights, text_color per page
- notes-app: iOS notes paper card (note_bg/title_color/body_color),
  timestamp bar, markup-enabled body

Markup rollout: options=["markup"] + segments rendering added to
twitter-quote, tiktok-quote, and quote-stack q1/q2/q3. Default renders
are md5-identical to the pre-change baseline (backward compatible).

Docs: template pages, gallery cards, sidebar entries.
---
 docs/.vitepress/config.ts             |   2 +-
 docs/templates/index.md               |  14 ++
 docs/templates/notes-app.md           |  50 +++++++
 docs/templates/whatsapp-chat.md       |  59 +++++++++
 templates/notes-app/defaults.json     |  18 +++
 templates/notes-app/schema.json       | 108 ++++++++++++++++
 templates/notes-app/template.svg      |  51 ++++++++
 templates/quote-stack/schema.json     |  15 ++-
 templates/quote-stack/template.svg    |  16 ++-
 templates/tiktok-quote/schema.json    |   5 +-
 templates/tiktok-quote/template.svg   |   7 +-
 templates/twitter-quote/schema.json   |   5 +-
 templates/twitter-quote/template.svg  |   7 +-
 templates/whatsapp-chat/defaults.json |  29 +++++
 templates/whatsapp-chat/schema.json   | 180 ++++++++++++++++++++++++++
 templates/whatsapp-chat/template.svg  |  75 +++++++++++
 16 files changed, 629 insertions(+), 12 deletions(-)
 create mode 100644 docs/templates/notes-app.md
 create mode 100644 docs/templates/whatsapp-chat.md
 create mode 100644 templates/notes-app/defaults.json
 create mode 100644 templates/notes-app/schema.json
 create mode 100644 templates/notes-app/template.svg
 create mode 100644 templates/whatsapp-chat/defaults.json
 create mode 100644 templates/whatsapp-chat/schema.json
 create mode 100644 templates/whatsapp-chat/template.svg

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 58cdc7d..109a8e2 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -65,7 +65,7 @@ export default defineConfig({
           text: 'Social Media',
           collapsed: true,
           items: [
-            { text: 'Social Quote', link: '/templates/social-quote' },            { text: 'Dev Quote', link: '/templates/dev-quote' },            { text: 'Twitter/X Quote', link: '/templates/twitter-quote' },            { text: 'TikTok Quote', link: '/templates/tiktok-quote' },            { text: 'Instagram Story', link: '/templates/instagram-story' },            { text: 'LinkedIn Card', link: '/templates/linkedin-card' },            { text: 'Pinterest Pin', link: '/templates/pinterest-pin' },            { text: 'Social Poll', link: '/templates/social-poll' },            { text: 'Tweet Embed', link: '/templates/tweet-embed' }
+            { text: 'Social Quote', link: '/templates/social-quote' },            { text: 'Dev Quote', link: '/templates/dev-quote' },            { text: 'Twitter/X Quote', link: '/templates/twitter-quote' },            { text: 'TikTok Quote', link: '/templates/tiktok-quote' },            { text: 'WhatsApp Chat', link: '/templates/whatsapp-chat' },            { text: 'Notes App', link: '/templates/notes-app' },            { text: 'Instagram Story', link: '/templates/instagram-story' },            { text: 'LinkedIn Card', link: '/templates/linkedin-card' },            { text: 'Pinterest Pin', link: '/templates/pinterest-pin' },            { text: 'Social Poll', link: '/templates/social-poll' },            { text: 'Tweet Embed', link: '/templates/tweet-embed' }
           ],
         },
         {
diff --git a/docs/templates/index.md b/docs/templates/index.md
index 84b499a..1a6be72 100644
--- a/docs/templates/index.md
+++ b/docs/templates/index.md
@@ -759,6 +759,20 @@ Cosy ships with **148 templates** out of the box. Browse the gallery below, or u
     <span class="dims">1080×1350</span>
   </div>
 </a>
+<a href="./whatsapp-chat" class="template-card">
+  <img src="https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/whatsapp-chat.png" alt="WhatsApp Chat" loading="lazy" />
+  <div class="template-info">
+    <h3>WhatsApp Chat</h3>
+    <span class="dims">1080×1350</span>
+  </div>
+</a>
+<a href="./notes-app" class="template-card">
+  <img src="https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/notes-app.png" alt="Notes App" loading="lazy" />
+  <div class="template-info">
+    <h3>Notes App</h3>
+    <span class="dims">1080×1350</span>
+  </div>
+</a>
 <a href="./rate-limit" class="template-card">
   <img src="https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/rate-limit.png" alt="Rate Limit" loading="lazy" />
   <div class="template-info">
diff --git a/docs/templates/notes-app.md b/docs/templates/notes-app.md
new file mode 100644
index 0000000..385daa5
--- /dev/null
+++ b/docs/templates/notes-app.md
@@ -0,0 +1,50 @@
+# Notes App
+
+## Preview
+
+![Notes App](https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/notes-app.png)
+
+## Dimensions
+
+- **Width:** 1080px
+- **Height:** 1350px
+- **Aspect Ratio:** 1080:1350
+
+## Fonts
+
+- Inter
+
+## Slide Fields
+
+| Field | Type | Required | Max Length |
+|-------|------|----------|------------|
+| `title` | text | — | 40 |
+| `body` | text | ✅ | 400 |
+| `note_bg` | color | — | — |
+| `title_color` | color | — | — |
+| `body_color` | color | — | — |
+| `note_timestamp` | text | — | 30 |
+
+`body` supports inline markup: `*bold*`, `_italic_`, `*color:#hex*...*color*`.
+`note_bg` defaults to the iOS notes yellow (`#fef9c3`).
+
+## Brand Fields
+
+| Field | Type | Required | Default |
+|-------|------|----------|---------|
+| `brand_name` | text | ✅ | — |
+| `brand_handle` | text | ✅ | — |
+| `bg_color` | bg | — | #1e1e2e |
+| `bg_color_end` | bg | — | #11111b |
+| `accent_color` | text | — | #cba6f7 |
+| `accent_color_end` | text | — | #89b4fa |
+| `bg_image` | image | — | — |
+| `bg_image_opacity` | number | — | 0.15 |
+| `bg_overlay_opacity` | number | — | 0.7 |
+| `logo` | image | — | — |
+
+## Usage
+
+```bash
+cosy render --template notes-app --data input.json --output output.png
+```
diff --git a/docs/templates/whatsapp-chat.md b/docs/templates/whatsapp-chat.md
new file mode 100644
index 0000000..91c0400
--- /dev/null
+++ b/docs/templates/whatsapp-chat.md
@@ -0,0 +1,59 @@
+# WhatsApp Chat
+
+## Preview
+
+![WhatsApp Chat](https://s3.ajianaz.dev/hermes/codecoradev/cosy/preview/whatsapp-chat.png)
+
+## Dimensions
+
+- **Width:** 1080px
+- **Height:** 1350px
+- **Aspect Ratio:** 1080:1350
+
+## Fonts
+
+- Inter
+
+## Slide Fields
+
+| Field | Type | Required | Max Length |
+|-------|------|----------|------------|
+| `contact_name` | text | — | 24 |
+| `contact_status` | text | — | 24 |
+| `text_color` | color | — | — |
+| `m1_text` | text | — | 120 |
+| `m1_side` | text | — | 5 |
+| `m2_text` | text | — | 120 |
+| `m2_side` | text | — | 5 |
+| `m3_text` | text | — | 120 |
+| `m3_side` | text | — | 5 |
+| `m4_text` | text | — | 120 |
+| `m4_side` | text | — | 5 |
+| `m5_text` | text | — | 120 |
+| `m5_side` | text | — | 5 |
+| `m6_text` | text | — | 120 |
+| `m6_side` | text | — | 5 |
+
+Message fields support inline markup: `*bold*`, `_italic_`, `*color:#hex*...*color*`.
+Each `mN_side` is `left` (default) or `right`.
+
+## Brand Fields
+
+| Field | Type | Required | Default |
+|-------|------|----------|---------|
+| `brand_name` | text | ✅ | — |
+| `brand_handle` | text | ✅ | — |
+| `bg_color` | bg | — | #1e1e2e |
+| `bg_color_end` | bg | — | #11111b |
+| `accent_color` | text | — | #cba6f7 |
+| `accent_color_end` | text | — | #89b4fa |
+| `bg_image` | image | — | — |
+| `bg_image_opacity` | number | — | 0.15 |
+| `bg_overlay_opacity` | number | — | 0.7 |
+| `logo` | image | — | — |
+
+## Usage
+
+```bash
+cosy render --template whatsapp-chat --data input.json --output output.png
+```
diff --git a/templates/notes-app/defaults.json b/templates/notes-app/defaults.json
new file mode 100644
index 0000000..548df1a
--- /dev/null
+++ b/templates/notes-app/defaults.json
@@ -0,0 +1,18 @@
+{
+  "brand": {
+    "brand_name": "ajianaz",
+    "brand_handle": "@ajianaz",
+    "bg_color": "#1e1e2e",
+    "bg_color_end": "#11111b",
+    "accent_color": "#cba6f7",
+    "accent_color_end": "#89b4fa",
+    "show_brand": false
+  },
+  "slides": [
+    {
+      "title": "Catatan penting",
+      "body": " inget ya: *gaji bukan ukuran value kamu*. value itu pas kamu bisa bilang *nggak* ke hal yang _nggak ngerespon_. sisanya cuma _noise_.",
+      "note_timestamp": "Today 21:14"
+    }
+  ]
+}
diff --git a/templates/notes-app/schema.json b/templates/notes-app/schema.json
new file mode 100644
index 0000000..d74a06f
--- /dev/null
+++ b/templates/notes-app/schema.json
@@ -0,0 +1,108 @@
+{
+  "id": "notes-app",
+  "name": "Notes App",
+  "dimensions": {
+    "width": 1080,
+    "height": 1350
+  },
+  "fonts": [
+    "Inter"
+  ],
+  "brand_fields": {
+    "show_brand": {
+      "type": "boolean",
+      "required": false,
+      "default": false,
+      "description": "Show brand name/handle watermark at bottom. Default: false."
+    },
+    "brand_name": {
+      "type": "text",
+      "required": true,
+      "max": 30
+    },
+    "brand_handle": {
+      "type": "text",
+      "required": true,
+      "max": 30
+    },
+    "bg_color": {
+      "type": "bg",
+      "required": false,
+      "default": "#1e1e2e"
+    },
+    "bg_color_end": {
+      "type": "bg",
+      "required": false,
+      "default": "#11111b"
+    },
+    "accent_color": {
+      "type": "text",
+      "required": false,
+      "default": "#cba6f7"
+    },
+    "accent_color_end": {
+      "type": "text",
+      "required": false,
+      "default": "#89b4fa"
+    },
+    "bg_image": {
+      "type": "image",
+      "required": false,
+      "description": "Background image — local path or http(s) URL (PNG/JPG/WebP)."
+    },
+    "bg_image_opacity": {
+      "type": "number",
+      "required": false,
+      "default": 0.15,
+      "description": "Opacity of the background image (0.0-1.0)."
+    },
+    "bg_overlay_opacity": {
+      "type": "number",
+      "required": false,
+      "default": 0.7,
+      "description": "Opacity of the gradient overlay when bg_image is set. Default: 0.7."
+    },
+    "logo": {
+      "type": "image",
+      "required": false,
+      "description": "Brand logo path (PNG/SVG). Rendered at bottom-right corner."
+    }
+  },
+  "slide_fields": {
+    "title": {
+      "type": "text",
+      "required": false,
+      "max": 40,
+      "description": "Note title (first line, bold)."
+    },
+    "body": {
+      "type": "text",
+      "required": true,
+      "max": 400,
+      "wrap_width": 34,
+      "options": ["markup"],
+      "description": "Note body text. Supports *bold*, _italic_, *color:#hex*...*color*."
+    },
+    "note_bg": {
+      "type": "color",
+      "required": false,
+      "description": "Note paper color (default iOS yellow #fef9c3)."
+    },
+    "title_color": {
+      "type": "color",
+      "required": false,
+      "description": "Title text color (default #1e1e2e)."
+    },
+    "body_color": {
+      "type": "color",
+      "required": false,
+      "description": "Body text color (default #3a3a3c)."
+    },
+    "note_timestamp": {
+      "type": "text",
+      "required": false,
+      "max": 30,
+      "description": "Timestamp text in the window bar (default 'Today')."
+    }
+  }
+}
diff --git a/templates/notes-app/template.svg b/templates/notes-app/template.svg
new file mode 100644
index 0000000..d61b0b7
--- /dev/null
+++ b/templates/notes-app/template.svg
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1350" viewBox="0 0 1080 1350">
+  <defs>
+    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="{{ brand.bg_color | default('#1e1e2e') }}"/>
+      <stop offset="100%" stop-color="{{ brand.bg_color_end | default('#11111b') }}"/>
+    </linearGradient>
+    <linearGradient id="acc-grad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="{{ brand.accent_color | default('#cba6f7') }}"/>
+      <stop offset="100%" stop-color="{{ brand.accent_color_end | default('#89b4fa') }}"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="75%" cy="25%" r="55%">
+      <stop offset="0%" stop-color="{{ brand.accent_color | default('#cba6f7') }}" stop-opacity="0.07"/>
+      <stop offset="100%" stop-color="{{ brand.accent_color | default('#cba6f7') }}" stop-opacity="0"/>
+    </radialGradient>
+    <pattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
+      <circle cx="20" cy="20" r="1.5" fill="#ffffff" opacity="0.06"/>
+    </pattern>
+  </defs>
+
+  {% macro segout(seg) %}{% if seg.b %}<tspan font-weight="800">{% endif %}{% if seg.i %}<tspan font-style="italic">{% endif %}{% if seg.c %}<tspan fill="{{ seg.c }}">{{ seg.t }}</tspan>{% else %}{{ seg.t }}{% endif %}{% if seg.i %}</tspan>{% endif %}{% if seg.b %}</tspan>{% endif %}{% endmacro %}
+  {% macro lineout(line, first, x) %}{% if first %}{% for seg in line %}{{ segout(seg) }}{% endfor %}{% else %}<tspan x="{{ x }}" dy="46">{% for seg in line %}{{ segout(seg) }}{% endfor %}</tspan>{% endif %}{% endmacro %}
+  {% macro plainout(line, first, x) %}{% if first %}{{ line }}{% else %}<tspan x="{{ x }}" dy="46">{{ line }}</tspan>{% endif %}{% endmacro %}
+
+  <!-- Background -->
+  {% if bg_image_data_uri %}
+  <image href="{{ bg_image_data_uri }}" width="1080" height="1350" preserveAspectRatio="xMidYMid slice" opacity="{{ brand.bg_image_opacity | default(0.15) }}"/>
+  {% endif %}
+  <rect width="1080" height="1350" fill="url(#bg-grad)" opacity="{% if bg_image_data_uri %}{{ brand.bg_overlay_opacity | default(0.7) }}{% else %}1.0{% endif %}"/>
+  <rect width="1080" height="1350" fill="url(#glow)"/>
+  <rect width="1080" height="1350" fill="url(#dots)"/>
+
+  <!-- Notes app window -->
+  <rect x="80" y="90" width="920" height="1170" rx="24" fill="{{ slide.note_bg | default('#fef9c3') }}"/>
+  <!-- Window grip dots -->
+  <circle cx="120" cy="126" r="7" fill="#00000022"/>
+  <circle cx="146" cy="126" r="7" fill="#00000022"/>
+  <circle cx="172" cy="126" r="7" fill="#00000022"/>
+  <text x="540" y="133" text-anchor="middle" font-family="Inter,sans-serif" font-size="19" font-weight="600" fill="#00000055">{{ slide.note_timestamp | default('Today') }}</text>
+
+  <!-- Note title -->
+  <text x="140" y="248" font-family="Inter,sans-serif" font-size="44" font-weight="800" fill="{{ slide.title_color | default('#1e1e2e') }}">{{ slide.title | default('Notes') }}</text>
+  <line x1="140" y1="276" x2="940" y2="276" stroke="#00000018" stroke-width="2"/>
+
+  <!-- Note body -->
+  <text x="140" y="345" font-family="Inter,sans-serif" font-size="32" fill="{{ slide.body_color | default('#3a3a3c') }}">{% if body_segments %}{% for line in body_segments %}{{ lineout(line, loop.first, 140) }}{% endfor %}{% elif body_lines %}{% for line in body_lines %}{{ plainout(line, loop.first, 140) }}{% endfor %}{% else %}{{ slide.body }}{% endif %}</text>
+
+  <!-- Brand footer -->
+  {% if brand.show_brand %}
+  <text x="540" y="1320" text-anchor="middle" font-family="Inter,sans-serif" font-size="20" font-weight="600" fill="#7f849c">{{ brand.brand_name | default('') }}</text>
+  {% endif %}
+</svg>
diff --git a/templates/quote-stack/schema.json b/templates/quote-stack/schema.json
index 6c1cbf2..7c9c43a 100644
--- a/templates/quote-stack/schema.json
+++ b/templates/quote-stack/schema.json
@@ -80,7 +80,10 @@
       "type": "text",
       "required": true,
       "max": 120,
-      "wrap_width": 35
+      "wrap_width": 35,
+      "options": [
+        "markup"
+      ]
     },
     "q1_author": {
       "type": "text",
@@ -91,7 +94,10 @@
       "type": "text",
       "required": true,
       "max": 120,
-      "wrap_width": 35
+      "wrap_width": 35,
+      "options": [
+        "markup"
+      ]
     },
     "q2_author": {
       "type": "text",
@@ -102,7 +108,10 @@
       "type": "text",
       "required": true,
       "max": 120,
-      "wrap_width": 35
+      "wrap_width": 35,
+      "options": [
+        "markup"
+      ]
     },
     "q3_author": {
       "type": "text",
diff --git a/templates/quote-stack/template.svg b/templates/quote-stack/template.svg
index 95fd16c..8e8a300 100644
--- a/templates/quote-stack/template.svg
+++ b/templates/quote-stack/template.svg
@@ -20,6 +20,9 @@
       <circle cx="20" cy="20" r="1.5" fill="#ffffff" opacity="0.06"/>
     </pattern>
   </defs>
+  {# One styled segment #}
+  {% macro segout(seg) %}{% if seg.b %}<tspan font-weight="800">{% endif %}{% if seg.i %}<tspan font-style="italic">{% endif %}{% if seg.c %}<tspan fill="{{ seg.c }}">{{ seg.t }}</tspan>{% else %}{{ seg.t }}{% endif %}{% if seg.i %}</tspan>{% endif %}{% if seg.b %}</tspan>{% endif %}{% endmacro %}
+
   {% if bg_image_data_uri %}
   <image href="{{ bg_image_data_uri }}" width="1080" height="1350" preserveAspectRatio="xMidYMid slice" opacity="{{ brand.bg_image_opacity | default(0.15) }}"/>
   {% endif %}
@@ -30,9 +33,9 @@
   <text x="540" y="100" text-anchor="middle" font-family="Space Grotesk,sans-serif" font-size="36" font-weight="700" fill="{{ slide.text_color | default('#cdd6f4') }}">{{ slide.title }}</text>
   {% endif %}
   {% set items = [
-    (slide.q1_text, slide.q1_author, q1_text_lines),
-    (slide.q2_text, slide.q2_author, q2_text_lines),
-    (slide.q3_text, slide.q3_author, q3_text_lines)
+    (slide.q1_text, slide.q1_author, q1_text_lines, q1_text_segments),
+    (slide.q2_text, slide.q2_author, q2_text_lines, q2_text_segments),
+    (slide.q3_text, slide.q3_author, q3_text_lines, q3_text_segments)
   ] %}
   {% for q in items %}
   {% if q[0] %}
@@ -40,7 +43,12 @@
   <rect x="160" y="{{ cy - 80 }}" width="760" height="340" rx="20" fill="#313244" opacity="0.25"/>
   <text x="220" y="{{ cy - 15 }}" font-size="60" fill="url(#acc-grad)" opacity="0.3">&#x26;</text>
   {% set ql = q[2] %}
-  {% if ql %}
+  {% set qsegs = q[3] %}
+  {% if qsegs %}
+    {% for line in qsegs %}
+  <text x="220" y="{{ cy + 55 + loop.index0 * 38 }}" font-family="Inter,sans-serif" font-size="24" font-weight="500" fill="{{ slide.text_color | default('#cdd6f4') }}">{% for seg in line %}{{ segout(seg) }}{% endfor %}</text>
+    {% endfor %}
+  {% elif ql %}
     {% for line in ql %}
   <text x="220" y="{{ cy + 55 + loop.index0 * 38 }}" font-family="Inter,sans-serif" font-size="24" font-weight="500" fill="{{ slide.text_color | default('#cdd6f4') }}">{{ line }}</text>
     {% endfor %}
diff --git a/templates/tiktok-quote/schema.json b/templates/tiktok-quote/schema.json
index 3e4829b..34da4e5 100644
--- a/templates/tiktok-quote/schema.json
+++ b/templates/tiktok-quote/schema.json
@@ -75,7 +75,10 @@
       "type": "text",
       "required": true,
       "max": 200,
-      "wrap_width": 25
+      "wrap_width": 25,
+      "options": [
+        "markup"
+      ]
     },
     "author": {
       "type": "text",
diff --git a/templates/tiktok-quote/template.svg b/templates/tiktok-quote/template.svg
index 583c7a9..10bdc23 100644
--- a/templates/tiktok-quote/template.svg
+++ b/templates/tiktok-quote/template.svg
@@ -16,6 +16,11 @@
     <circle cx="20" cy="20" r="1.5" fill="#ffffff" opacity="0.06"/>
   </pattern>
   </defs>
+  {# One styled segment #}
+  {% macro segout(seg) %}{% if seg.b %}<tspan font-weight="800">{% endif %}{% if seg.i %}<tspan font-style="italic">{% endif %}{% if seg.c %}<tspan fill="{{ seg.c }}">{{ seg.t }}</tspan>{% else %}{{ seg.t }}{% endif %}{% if seg.i %}</tspan>{% endif %}{% if seg.b %}</tspan>{% endif %}{% endmacro %}
+  {# One quote line: segments variant #}
+  {% macro segline(line, first, x, dy) %}{% if first %}{% for seg in line %}{{ segout(seg) }}{% endfor %}{% else %}<tspan x="{{ x }}" dy="{{ dy }}">{% for seg in line %}{{ segout(seg) }}{% endfor %}</tspan>{% endif %}{% endmacro %}
+
   {% if bg_image_data_uri %}
   <image href="{{ bg_image_data_uri }}" width="1080" height="1350" preserveAspectRatio="xMidYMid slice" opacity="{{ brand.bg_image_opacity | default(0.15) }}"/>
   {% endif %}
@@ -23,7 +28,7 @@
   <rect width="1080" height="1350" fill="url(#glow)"/>
   <rect width="1080" height="1350" fill="url(#dots)"/>
   <text x="540" y="500" text-anchor="middle" font-family="Space Grotesk,sans-serif" font-size="56" font-weight="800" fill="{{ slide.text_color | default('#cdd6f4') }}">
-    {% for line in quote_lines %}<tspan x="540" dy="{% if loop.first %}0{% else %}72{% endif %}">{{ line }}</tspan>{% endfor %}
+    {% if quote_segments %}{% for line in quote_segments %}{{ segline(line, loop.first, "540", "72") }}{% endfor %}{% elif quote_lines %}{% for line in quote_lines %}<tspan x="540" dy="{% if loop.first %}0{% else %}72{% endif %}">{{ line }}</tspan>{% endfor %}{% endif %}
     {% if not quote_lines %}<tspan x="540" dy="0">{{ slide.quote }}</tspan>{% endif %}
   </text>
   <rect x="440" y="1050" width="200" height="6" rx="8" fill="url(#acc-grad)"/>
diff --git a/templates/twitter-quote/schema.json b/templates/twitter-quote/schema.json
index 112bf40..6132afc 100644
--- a/templates/twitter-quote/schema.json
+++ b/templates/twitter-quote/schema.json
@@ -75,7 +75,10 @@
       "type": "text",
       "required": true,
       "max": 280,
-      "wrap_width": 35
+      "wrap_width": 35,
+      "options": [
+        "markup"
+      ]
     },
     "author": {
       "type": "text",
diff --git a/templates/twitter-quote/template.svg b/templates/twitter-quote/template.svg
index 97b2bab..4e6eabd 100644
--- a/templates/twitter-quote/template.svg
+++ b/templates/twitter-quote/template.svg
@@ -16,6 +16,11 @@
     <circle cx="20" cy="20" r="1.5" fill="#ffffff" opacity="0.06"/>
   </pattern>
   </defs>
+  {# One styled segment #}
+  {% macro segout(seg) %}{% if seg.b %}<tspan font-weight="800">{% endif %}{% if seg.i %}<tspan font-style="italic">{% endif %}{% if seg.c %}<tspan fill="{{ seg.c }}">{{ seg.t }}</tspan>{% else %}{{ seg.t }}{% endif %}{% if seg.i %}</tspan>{% endif %}{% if seg.b %}</tspan>{% endif %}{% endmacro %}
+  {# One quote line: segments variant #}
+  {% macro segline(line, first, x, dy) %}{% if first %}{% for seg in line %}{{ segout(seg) }}{% endfor %}{% else %}<tspan x="{{ x }}" dy="{{ dy }}">{% for seg in line %}{{ segout(seg) }}{% endfor %}</tspan>{% endif %}{% endmacro %}
+
   {% if bg_image_data_uri %}
   <image href="{{ bg_image_data_uri }}" width="1200" height="675" preserveAspectRatio="xMidYMid slice" opacity="{{ brand.bg_image_opacity | default(0.15) }}"/>
   {% endif %}
@@ -30,7 +35,7 @@
   <text x="600" y="645" text-anchor="middle" font-family="Inter,sans-serif" font-size="20" font-weight="600" fill="#7f849c">{{ brand.brand_name | default('') }}{% if brand.brand_handle %} · {{ brand.brand_handle }}{% endif %}</text>
   {% endif %}
   <text x="80" y="280" font-family="Space Grotesk,sans-serif" font-size="42" font-weight="700" fill="{{ slide.text_color | default('#cdd6f4') }}">
-    {% for line in quote_lines %}<tspan x="80" dy="{% if loop.first %}0{% else %}55{% endif %}">{{ line }}</tspan>{% endfor %}
+    {% if quote_segments %}{% for line in quote_segments %}{{ segline(line, loop.first, "80", "55") }}{% endfor %}{% elif quote_lines %}{% for line in quote_lines %}<tspan x="80" dy="{% if loop.first %}0{% else %}55{% endif %}">{{ line }}</tspan>{% endfor %}{% endif %}
     {% if not quote_lines %}<tspan x="80" dy="0">{{ slide.quote }}</tspan>{% endif %}
   </text>
   <text x="80" y="560" font-family="Inter,sans-serif" font-size="26" font-weight="600" fill="#bac2de">{{ slide.author }}</text>
diff --git a/templates/whatsapp-chat/defaults.json b/templates/whatsapp-chat/defaults.json
new file mode 100644
index 0000000..9a848d1
--- /dev/null
+++ b/templates/whatsapp-chat/defaults.json
@@ -0,0 +1,29 @@
+{
+  "brand": {
+    "brand_name": "ajianaz",
+    "brand_handle": "@ajianaz",
+    "bg_color": "#1e1e2e",
+    "bg_color_end": "#11111b",
+    "accent_color": "#cba6f7",
+    "accent_color_end": "#89b4fa",
+    "show_brand": false
+  },
+  "slides": [
+    {
+      "contact_name": "Tim Lead",
+      "contact_status": "online",
+      "m1_text": "Bro, besok bisa cover standup aku?",
+      "m1_side": "left",
+      "m2_text": "Bisa. *Standup jam 9 kan?*",
+      "m2_side": "right",
+      "m3_text": "Ye. Tapi jangan bilang siapa siapa",
+      "m3_side": "left",
+      "m4_text": "Alasannya apa _anak baru_ ngerasa dikejar",
+      "m4_side": "left",
+      "m5_text": "*Tenang.* Aku bilang kita yang minta",
+      "m5_side": "right",
+      "m6_text": "Makasih bro, kamu nyelamatin minggu aku",
+      "m6_side": "left"
+    }
+  ]
+}
diff --git a/templates/whatsapp-chat/schema.json b/templates/whatsapp-chat/schema.json
new file mode 100644
index 0000000..df93462
--- /dev/null
+++ b/templates/whatsapp-chat/schema.json
@@ -0,0 +1,180 @@
+{
+  "id": "whatsapp-chat",
+  "name": "WhatsApp Chat",
+  "dimensions": {
+    "width": 1080,
+    "height": 1350
+  },
+  "fonts": [
+    "Inter"
+  ],
+  "brand_fields": {
+    "show_brand": {
+      "type": "boolean",
+      "required": false,
+      "default": false,
+      "description": "Show brand name/handle watermark at bottom. Default: false."
+    },
+    "brand_name": {
+      "type": "text",
+      "required": true,
+      "max": 30
+    },
+    "brand_handle": {
+      "type": "text",
+      "required": true,
+      "max": 30
+    },
+    "bg_color": {
+      "type": "bg",
+      "required": false,
+      "default": "#1e1e2e"
+    },
+    "bg_color_end": {
+      "type": "bg",
+      "required": false,
+      "default": "#11111b"
+    },
+    "accent_color": {
+      "type": "text",
+      "required": false,
+      "default": "#cba6f7"
+    },
+    "accent_color_end": {
+      "type": "text",
+      "required": false,
+      "default": "#89b4fa"
+    },
+    "bg_image": {
+      "type": "image",
+      "required": false,
+      "description": "Background image — local path or http(s) URL (PNG/JPG/WebP)."
+    },
+    "bg_image_opacity": {
+      "type": "number",
+      "required": false,
+      "default": 0.15,
+      "description": "Opacity of the background image (0.0-1.0)."
+    },
+    "bg_overlay_opacity": {
+      "type": "number",
+      "required": false,
+      "default": 0.7,
+      "description": "Opacity of the gradient overlay when bg_image is set. Lower = photo shows through more. Default: 0.7."
+    },
+    "logo": {
+      "type": "image",
+      "required": false,
+      "description": "Brand logo path (PNG/SVG). Rendered at bottom-right corner."
+    }
+  },
+  "slide_fields": {
+    "contact_name": {
+      "type": "text",
+      "required": false,
+      "max": 24,
+      "description": "Chat header contact name."
+    },
+    "contact_status": {
+      "type": "text",
+      "required": false,
+      "max": 24,
+      "description": "Chat header status line (e.g. 'online', 'last seen today')."
+    },
+    "text_color": {
+      "type": "color",
+      "required": false,
+      "description": "Message text color. Use a dark hex when the background is light."
+    },
+    "m1_text": {
+      "type": "text",
+      "required": false,
+      "max": 120,
+      "wrap_width": 34,
+      "options": ["markup"],
+      "description": "Message 1 text. Supports *bold*, _italic_, *color:#hex*...*color*."
+    },
+    "m1_side": {
+      "type": "text",
+      "required": false,
+      "max": 5,
+      "options": ["left", "right"],
+      "description": "Message 1 bubble side: left or right (default left)."
+    },
+    "m2_text": {
+      "type": "text",
+      "required": false,
+      "max": 120,
+      "wrap_width": 34,
+      "options": ["markup"],
+      "description": "Message 2 text. Supports inline markup."
+    },
+    "m2_side": {
+      "type": "text",
+      "required": false,
+      "max": 5,
+      "options": ["left", "right"],
+      "description": "Message 2 bubble side (default right)."
+    },
+    "m3_text": {
+      "type": "text",
+      "required": false,
+      "max": 120,
+      "wrap_width": 34,
+      "options": ["markup"],
+      "description": "Message 3 text. Supports inline markup."
+    },
+    "m3_side": {
+      "type": "text",
+      "required": false,
+      "max": 5,
+      "options": ["left", "right"],
+      "description": "Message 3 bubble side (default left)."
+    },
+    "m4_text": {
+      "type": "text",
+      "required": false,
+      "max": 120,
+      "wrap_width": 34,
+      "options": ["markup"],
+      "description": "Message 4 text. Supports inline markup."
+    },
+    "m4_side": {
+      "type": "text",
+      "required": false,
+      "max": 5,
+      "options": ["left", "right"],
+      "description": "Message 4 bubble side (default right)."
+    },
+    "m5_text": {
+      "type": "text",
+      "required": false,
+      "max": 120,
+      "wrap_width": 34,
+      "options": ["markup"],
+      "description": "Message 5 text. Supports inline markup."
+    },
+    "m5_side": {
+      "type": "text",
+      "required": false,
+      "max": 5,
+      "options": ["left", "right"],
+      "description": "Message 5 bubble side (default left)."
+    },
+    "m6_text": {
+      "type": "text",
+      "required": false,
+      "max": 120,
+      "wrap_width": 34,
+      "options": ["markup"],
+      "description": "Message 6 text. Supports inline markup."
+    },
+    "m6_side": {
+      "type": "text",
+      "required": false,
+      "max": 5,
+      "options": ["left", "right"],
+      "description": "Message 6 bubble side (default right)."
+    }
+  }
+}
diff --git a/templates/whatsapp-chat/template.svg b/templates/whatsapp-chat/template.svg
new file mode 100644
index 0000000..0f9e610
--- /dev/null
+++ b/templates/whatsapp-chat/template.svg
@@ -0,0 +1,75 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1350" viewBox="0 0 1080 1350">
+  <defs>
+    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="{{ brand.bg_color | default('#1e1e2e') }}"/>
+      <stop offset="100%" stop-color="{{ brand.bg_color_end | default('#11111b') }}"/>
+    </linearGradient>
+    <linearGradient id="acc-grad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="{{ brand.accent_color | default('#cba6f7') }}"/>
+      <stop offset="100%" stop-color="{{ brand.accent_color_end | default('#89b4fa') }}"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="75%" cy="25%" r="55%">
+      <stop offset="0%" stop-color="{{ brand.accent_color | default('#cba6f7') }}" stop-opacity="0.07"/>
+      <stop offset="100%" stop-color="{{ brand.accent_color | default('#cba6f7') }}" stop-opacity="0"/>
+    </radialGradient>
+    <pattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
+      <circle cx="20" cy="20" r="1.5" fill="#ffffff" opacity="0.06"/>
+    </pattern>
+  </defs>
+
+  {# One styled segment: bold/italic via nested tspan, color via fill #}
+  {% macro segout(seg) %}{% if seg.b %}<tspan font-weight="800">{% endif %}{% if seg.i %}<tspan font-style="italic">{% endif %}{% if seg.c %}<tspan fill="{{ seg.c }}">{{ seg.t }}</tspan>{% else %}{{ seg.t }}{% endif %}{% if seg.i %}</tspan>{% endif %}{% if seg.b %}</tspan>{% endif %}{% endmacro %}
+  {# One bubble line: first line flows in the text element, later lines get x/dy #}
+  {% macro lineout(line, first, x) %}{% if first %}{% for seg in line %}{{ segout(seg) }}{% endfor %}{% else %}<tspan x="{{ x }}" dy="38">{% for seg in line %}{{ segout(seg) }}{% endfor %}</tspan>{% endif %}{% endmacro %}
+  {# A plain (legacy) line #}
+  {% macro plainout(line, first, x) %}{% if first %}{{ line }}{% else %}<tspan x="{{ x }}" dy="38">{{ line }}</tspan>{% endif %}{% endmacro %}
+
+  <!-- Background -->
+  {% if bg_image_data_uri %}
+  <image href="{{ bg_image_data_uri }}" width="1080" height="1350" preserveAspectRatio="xMidYMid slice" opacity="{{ brand.bg_image_opacity | default(0.15) }}"/>
+  {% endif %}
+  <rect width="1080" height="1350" fill="url(#bg-grad)" opacity="{% if bg_image_data_uri %}{{ brand.bg_overlay_opacity | default(0.7) }}{% else %}1.0{% endif %}"/>
+  <rect width="1080" height="1350" fill="url(#glow)"/>
+  <rect width="1080" height="1350" fill="url(#dots)"/>
+
+  <!-- Phone frame -->
+  <rect x="70" y="80" width="940" height="1190" rx="40" fill="#181825" opacity="0.92"/>
+
+  <!-- Chat header -->
+  <rect x="70" y="80" width="940" height="110" rx="40" fill="#313244" opacity="0.9"/>
+  <rect x="70" y="150" width="940" height="40" fill="#313244" opacity="0.9"/>
+  <circle cx="140" cy="135" r="30" fill="url(#acc-grad)" opacity="0.85"/>
+  <text x="195" y="128" font-family="Inter,sans-serif" font-size="28" font-weight="700" fill="{{ slide.text_color | default('#cdd6f4') }}">{{ slide.contact_name | default('Chat') }}</text>
+  <text x="195" y="162" font-family="Inter,sans-serif" font-size="19" fill="#7f849c">{{ slide.contact_status | default('online') }}</text>
+
+  <!-- Bubbles: 6 message slots, 170px each; bubble height follows line count -->
+  {% set items = [
+    (slide.m1_text, slide.m1_side | default('left'), m1_text_lines, m1_text_segments),
+    (slide.m2_text, slide.m2_side | default('right'), m2_text_lines, m2_text_segments),
+    (slide.m3_text, slide.m3_side | default('left'), m3_text_lines, m3_text_segments),
+    (slide.m4_text, slide.m4_side | default('right'), m4_text_lines, m4_text_segments),
+    (slide.m5_text, slide.m5_side | default('left'), m5_text_lines, m5_text_segments),
+    (slide.m6_text, slide.m6_side | default('right'), m6_text_lines, m6_text_segments)
+  ] %}
+  {% for msg in items %}
+  {% if msg[0] %}
+  {% set segs = msg[3] %}
+  {% set lines = msg[2] %}
+  {% set n_lines = segs | default(lines) | length %}
+  {% set bh = 52 + n_lines * 38 %}
+  {% set by = 245 + loop.index0 * 170 %}
+  {% if msg[1] == 'right' %}
+  <rect x="480" y="{{ by }}" width="480" height="{{ bh }}" rx="20" fill="#1d3a52" opacity="0.95"/>
+  <text x="510" y="{{ by + 40 }}" font-family="Inter,sans-serif" font-size="26" fill="{{ slide.text_color | default('#cdd6f4') }}">{% if segs %}{% for line in segs %}{{ lineout(line, loop.first, 510) }}{% endfor %}{% else %}{% for line in lines %}{{ plainout(line, loop.first, 510) }}{% endfor %}{% endif %}</text>
+  {% else %}
+  <rect x="120" y="{{ by }}" width="620" height="{{ bh }}" rx="20" fill="#313244" opacity="0.85"/>
+  <text x="150" y="{{ by + 40 }}" font-family="Inter,sans-serif" font-size="26" fill="{{ slide.text_color | default('#cdd6f4') }}">{% if segs %}{% for line in segs %}{{ lineout(line, loop.first, 150) }}{% endfor %}{% else %}{% for line in lines %}{{ plainout(line, loop.first, 150) }}{% endfor %}{% endif %}</text>
+  {% endif %}
+  {% endif %}
+  {% endfor %}
+
+  <!-- Brand footer -->
+  {% if brand.show_brand %}
+  <text x="540" y="1320" text-anchor="middle" font-family="Inter,sans-serif" font-size="20" font-weight="600" fill="#7f849c">{{ brand.brand_name | default('') }}</text>
+  {% endif %}
+</svg>

From eaffd1100db5c162bf2f918f2c1fc0e9b5b69d03 Mon Sep 17 00:00:00 2001
From: ajianaz <ajianaz@users.noreply.github.com>
Date: Thu, 17 Sep 2026 16:30:28 +0700
Subject: [PATCH 2/2] fix(whatsapp-chat): dynamic bubble stacking + clamp
 message length

CodeCora finding on the PR was valid: fixed 170px slots with variable
bubble heights (schema allowed 4 wrapped lines = 204px) could overlap
the next bubble and push past the phone frame.

- Bubbles now stack via a minijinja namespace accumulator (y cursor),
  so heights can never collide
- mN_text max clamped 120 -> 60 chars (2 wrapped lines max), keeping
  the mathematically guaranteed fit: 6 x (52 + 2*38 + 24) = 1188px,
  inside the 1190px frame even when every message is at max length

Verified with a max-length stress render: 6 two-line bubbles, no
overlap, last bubble inside the frame, consistent gaps (vision QA).
---
 templates/whatsapp-chat/schema.json  | 66 ++++++++++++++++++++--------
 templates/whatsapp-chat/template.svg |  6 ++-
 2 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/templates/whatsapp-chat/schema.json b/templates/whatsapp-chat/schema.json
index df93462..f38f971 100644
--- a/templates/whatsapp-chat/schema.json
+++ b/templates/whatsapp-chat/schema.json
@@ -89,91 +89,121 @@
     "m1_text": {
       "type": "text",
       "required": false,
-      "max": 120,
+      "max": 60,
       "wrap_width": 34,
-      "options": ["markup"],
+      "options": [
+        "markup"
+      ],
       "description": "Message 1 text. Supports *bold*, _italic_, *color:#hex*...*color*."
     },
     "m1_side": {
       "type": "text",
       "required": false,
       "max": 5,
-      "options": ["left", "right"],
+      "options": [
+        "left",
+        "right"
+      ],
       "description": "Message 1 bubble side: left or right (default left)."
     },
     "m2_text": {
       "type": "text",
       "required": false,
-      "max": 120,
+      "max": 60,
       "wrap_width": 34,
-      "options": ["markup"],
+      "options": [
+        "markup"
+      ],
       "description": "Message 2 text. Supports inline markup."
     },
     "m2_side": {
       "type": "text",
       "required": false,
       "max": 5,
-      "options": ["left", "right"],
+      "options": [
+        "left",
+        "right"
+      ],
       "description": "Message 2 bubble side (default right)."
     },
     "m3_text": {
       "type": "text",
       "required": false,
-      "max": 120,
+      "max": 60,
       "wrap_width": 34,
-      "options": ["markup"],
+      "options": [
+        "markup"
+      ],
       "description": "Message 3 text. Supports inline markup."
     },
     "m3_side": {
       "type": "text",
       "required": false,
       "max": 5,
-      "options": ["left", "right"],
+      "options": [
+        "left",
+        "right"
+      ],
       "description": "Message 3 bubble side (default left)."
     },
     "m4_text": {
       "type": "text",
       "required": false,
-      "max": 120,
+      "max": 60,
       "wrap_width": 34,
-      "options": ["markup"],
+      "options": [
+        "markup"
+      ],
       "description": "Message 4 text. Supports inline markup."
     },
     "m4_side": {
       "type": "text",
       "required": false,
       "max": 5,
-      "options": ["left", "right"],
+      "options": [
+        "left",
+        "right"
+      ],
       "description": "Message 4 bubble side (default right)."
     },
     "m5_text": {
       "type": "text",
       "required": false,
-      "max": 120,
+      "max": 60,
       "wrap_width": 34,
-      "options": ["markup"],
+      "options": [
+        "markup"
+      ],
       "description": "Message 5 text. Supports inline markup."
     },
     "m5_side": {
       "type": "text",
       "required": false,
       "max": 5,
-      "options": ["left", "right"],
+      "options": [
+        "left",
+        "right"
+      ],
       "description": "Message 5 bubble side (default left)."
     },
     "m6_text": {
       "type": "text",
       "required": false,
-      "max": 120,
+      "max": 60,
       "wrap_width": 34,
-      "options": ["markup"],
+      "options": [
+        "markup"
+      ],
       "description": "Message 6 text. Supports inline markup."
     },
     "m6_side": {
       "type": "text",
       "required": false,
       "max": 5,
-      "options": ["left", "right"],
+      "options": [
+        "left",
+        "right"
+      ],
       "description": "Message 6 bubble side (default right)."
     }
   }
diff --git a/templates/whatsapp-chat/template.svg b/templates/whatsapp-chat/template.svg
index 0f9e610..62cc3db 100644
--- a/templates/whatsapp-chat/template.svg
+++ b/templates/whatsapp-chat/template.svg
@@ -42,7 +42,8 @@
   <text x="195" y="128" font-family="Inter,sans-serif" font-size="28" font-weight="700" fill="{{ slide.text_color | default('#cdd6f4') }}">{{ slide.contact_name | default('Chat') }}</text>
   <text x="195" y="162" font-family="Inter,sans-serif" font-size="19" fill="#7f849c">{{ slide.contact_status | default('online') }}</text>
 
-  <!-- Bubbles: 6 message slots, 170px each; bubble height follows line count -->
+  <!-- Bubbles: 6 message slots, dynamically stacked (no overlap); bubble height by line count -->
+  {% set ns = namespace(y = 245) %}
   {% set items = [
     (slide.m1_text, slide.m1_side | default('left'), m1_text_lines, m1_text_segments),
     (slide.m2_text, slide.m2_side | default('right'), m2_text_lines, m2_text_segments),
@@ -57,7 +58,8 @@
   {% set lines = msg[2] %}
   {% set n_lines = segs | default(lines) | length %}
   {% set bh = 52 + n_lines * 38 %}
-  {% set by = 245 + loop.index0 * 170 %}
+  {% set by = ns.y %}
+  {% set ns.y = by + bh + 24 %}
   {% if msg[1] == 'right' %}
   <rect x="480" y="{{ by }}" width="480" height="{{ bh }}" rx="20" fill="#1d3a52" opacity="0.95"/>
   <text x="510" y="{{ by + 40 }}" font-family="Inter,sans-serif" font-size="26" fill="{{ slide.text_color | default('#cdd6f4') }}">{% if segs %}{% for line in segs %}{{ lineout(line, loop.first, 510) }}{% endfor %}{% else %}{% for line in lines %}{{ plainout(line, loop.first, 510) }}{% endfor %}{% endif %}</text>