mango-lollipop 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +69 -0
- package/LICENSE +21 -0
- package/README.md +264 -0
- package/bin/mango-lollipop.js +385 -0
- package/dist/excel.d.ts +4 -0
- package/dist/excel.js +342 -0
- package/dist/html.d.ts +4 -0
- package/dist/html.js +938 -0
- package/dist/schema.d.ts +120 -0
- package/dist/schema.js +211 -0
- package/lib/excel.ts +433 -0
- package/lib/html.ts +993 -0
- package/lib/schema.ts +394 -0
- package/package.json +44 -0
- package/skills/audit/SKILL.md +248 -0
- package/skills/dev-handoff/SKILL.md +295 -0
- package/skills/generate-dashboard/SKILL.md +195 -0
- package/skills/generate-matrix/SKILL.md +374 -0
- package/skills/generate-messages/SKILL.md +262 -0
- package/skills/iterate/SKILL.md +242 -0
- package/skills/start/SKILL.md +310 -0
- package/templates/copywriting-guide.md +155 -0
- package/templates/dashboard.html +522 -0
- package/templates/events/saas-collaboration.yaml +50 -0
- package/templates/events/saas-document.yaml +44 -0
- package/templates/events/saas-general.yaml +38 -0
- package/templates/events/saas-marketplace.yaml +48 -0
- package/templates/overview.html +598 -0
- package/templates/saas-matrix.json +172 -0
|
@@ -0,0 +1,598 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>{{PROJECT_NAME}} — Lifecycle Messaging Overview</title>
|
|
7
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
8
|
+
<style>
|
|
9
|
+
/* ===== Base ===== */
|
|
10
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
11
|
+
|
|
12
|
+
body {
|
|
13
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
14
|
+
color: #1a1a1a;
|
|
15
|
+
background: #ffffff;
|
|
16
|
+
line-height: 1.6;
|
|
17
|
+
max-width: 800px;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
padding: 40px 24px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
h1, h2, h3 {
|
|
23
|
+
font-family: Georgia, 'Times New Roman', serif;
|
|
24
|
+
font-weight: 700;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
h1 { font-size: 2rem; margin-bottom: 0.25rem; }
|
|
28
|
+
h2 { font-size: 1.35rem; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid #e5e7eb; }
|
|
29
|
+
h3 { font-size: 1.05rem; margin-top: 1.25rem; margin-bottom: 0.5rem; }
|
|
30
|
+
|
|
31
|
+
p { margin-bottom: 0.75rem; }
|
|
32
|
+
|
|
33
|
+
/* ===== Header ===== */
|
|
34
|
+
.overview-header {
|
|
35
|
+
border-bottom: 3px solid #1a1a1a;
|
|
36
|
+
padding-bottom: 1.5rem;
|
|
37
|
+
margin-bottom: 2rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.overview-header .subtitle {
|
|
41
|
+
color: #6b7280;
|
|
42
|
+
font-size: 0.95rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.overview-header .meta {
|
|
46
|
+
margin-top: 0.75rem;
|
|
47
|
+
font-size: 0.85rem;
|
|
48
|
+
color: #9ca3af;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* ===== Company Overview ===== */
|
|
52
|
+
.company-grid {
|
|
53
|
+
display: grid;
|
|
54
|
+
grid-template-columns: 1fr 1fr;
|
|
55
|
+
gap: 1rem;
|
|
56
|
+
margin-bottom: 1rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.company-item {
|
|
60
|
+
background: #f9fafb;
|
|
61
|
+
border: 1px solid #e5e7eb;
|
|
62
|
+
border-radius: 8px;
|
|
63
|
+
padding: 1rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.company-item .label {
|
|
67
|
+
font-size: 0.7rem;
|
|
68
|
+
font-weight: 600;
|
|
69
|
+
text-transform: uppercase;
|
|
70
|
+
letter-spacing: 0.05em;
|
|
71
|
+
color: #6b7280;
|
|
72
|
+
margin-bottom: 0.25rem;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.company-item .value {
|
|
76
|
+
font-size: 0.95rem;
|
|
77
|
+
color: #1a1a1a;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* ===== Stage Colors ===== */
|
|
81
|
+
.stage-tx { color: #6b7280; }
|
|
82
|
+
.stage-aq { color: #16a34a; }
|
|
83
|
+
.stage-ac { color: #2563eb; }
|
|
84
|
+
.stage-rv { color: #ca8a04; }
|
|
85
|
+
.stage-rt { color: #ea580c; }
|
|
86
|
+
.stage-rf { color: #9333ea; }
|
|
87
|
+
|
|
88
|
+
.stage-bg-tx { background-color: #f3f4f6; }
|
|
89
|
+
.stage-bg-aq { background-color: #dcfce7; }
|
|
90
|
+
.stage-bg-ac { background-color: #dbeafe; }
|
|
91
|
+
.stage-bg-rv { background-color: #fef9c3; }
|
|
92
|
+
.stage-bg-rt { background-color: #ffedd5; }
|
|
93
|
+
.stage-bg-rf { background-color: #f3e8ff; }
|
|
94
|
+
|
|
95
|
+
/* ===== AARRR Strategy ===== */
|
|
96
|
+
.strategy-list {
|
|
97
|
+
list-style: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.strategy-item {
|
|
101
|
+
display: flex;
|
|
102
|
+
gap: 1rem;
|
|
103
|
+
padding: 0.75rem 0;
|
|
104
|
+
border-bottom: 1px solid #f3f4f6;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.strategy-item:last-child { border-bottom: none; }
|
|
108
|
+
|
|
109
|
+
.strategy-badge {
|
|
110
|
+
flex-shrink: 0;
|
|
111
|
+
width: 3rem;
|
|
112
|
+
height: 2rem;
|
|
113
|
+
display: flex;
|
|
114
|
+
align-items: center;
|
|
115
|
+
justify-content: center;
|
|
116
|
+
font-size: 0.75rem;
|
|
117
|
+
font-weight: 700;
|
|
118
|
+
border-radius: 6px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.strategy-content {
|
|
122
|
+
flex: 1;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.strategy-content .stage-name {
|
|
126
|
+
font-weight: 600;
|
|
127
|
+
font-size: 0.95rem;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.strategy-content .stage-desc {
|
|
131
|
+
font-size: 0.85rem;
|
|
132
|
+
color: #6b7280;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* ===== Matrix Table ===== */
|
|
136
|
+
.matrix-table {
|
|
137
|
+
width: 100%;
|
|
138
|
+
border-collapse: collapse;
|
|
139
|
+
font-size: 0.85rem;
|
|
140
|
+
margin-bottom: 1rem;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.matrix-table th {
|
|
144
|
+
background: #f9fafb;
|
|
145
|
+
text-align: left;
|
|
146
|
+
padding: 0.5rem 0.75rem;
|
|
147
|
+
font-size: 0.7rem;
|
|
148
|
+
font-weight: 600;
|
|
149
|
+
text-transform: uppercase;
|
|
150
|
+
letter-spacing: 0.05em;
|
|
151
|
+
color: #6b7280;
|
|
152
|
+
border-bottom: 2px solid #e5e7eb;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.matrix-table td {
|
|
156
|
+
padding: 0.5rem 0.75rem;
|
|
157
|
+
border-bottom: 1px solid #f3f4f6;
|
|
158
|
+
vertical-align: top;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.matrix-table tr:last-child td { border-bottom: none; }
|
|
162
|
+
|
|
163
|
+
.matrix-table .id-cell {
|
|
164
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
165
|
+
font-size: 0.8rem;
|
|
166
|
+
font-weight: 600;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.matrix-table .stage-pill {
|
|
170
|
+
display: inline-block;
|
|
171
|
+
font-size: 0.7rem;
|
|
172
|
+
font-weight: 600;
|
|
173
|
+
padding: 0.1rem 0.5rem;
|
|
174
|
+
border-radius: 9999px;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.matrix-table .channels-cell {
|
|
178
|
+
font-size: 0.8rem;
|
|
179
|
+
color: #6b7280;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* ===== Journey Map ===== */
|
|
183
|
+
.journey-container {
|
|
184
|
+
background: #f9fafb;
|
|
185
|
+
border: 1px solid #e5e7eb;
|
|
186
|
+
border-radius: 8px;
|
|
187
|
+
padding: 1.5rem;
|
|
188
|
+
overflow-x: auto;
|
|
189
|
+
margin-bottom: 1rem;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.mermaid { max-width: 100%; }
|
|
193
|
+
|
|
194
|
+
/* ===== Inventory ===== */
|
|
195
|
+
.inventory-grid {
|
|
196
|
+
display: grid;
|
|
197
|
+
grid-template-columns: 1fr 1fr;
|
|
198
|
+
gap: 1rem;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.inventory-card {
|
|
202
|
+
border: 1px solid #e5e7eb;
|
|
203
|
+
border-radius: 8px;
|
|
204
|
+
padding: 1rem;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.inventory-card .card-title {
|
|
208
|
+
font-size: 0.7rem;
|
|
209
|
+
font-weight: 600;
|
|
210
|
+
text-transform: uppercase;
|
|
211
|
+
letter-spacing: 0.05em;
|
|
212
|
+
color: #6b7280;
|
|
213
|
+
margin-bottom: 0.5rem;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.inventory-row {
|
|
217
|
+
display: flex;
|
|
218
|
+
justify-content: space-between;
|
|
219
|
+
padding: 0.25rem 0;
|
|
220
|
+
font-size: 0.9rem;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.inventory-row .count {
|
|
224
|
+
font-weight: 600;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* ===== Tags ===== */
|
|
228
|
+
.tag-list {
|
|
229
|
+
display: flex;
|
|
230
|
+
flex-wrap: wrap;
|
|
231
|
+
gap: 0.5rem;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.tag-item {
|
|
235
|
+
background: #f3f4f6;
|
|
236
|
+
color: #374151;
|
|
237
|
+
font-size: 0.8rem;
|
|
238
|
+
padding: 0.25rem 0.75rem;
|
|
239
|
+
border-radius: 9999px;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
/* ===== Implementation Order ===== */
|
|
243
|
+
.impl-list {
|
|
244
|
+
list-style: none;
|
|
245
|
+
counter-reset: impl-counter;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.impl-item {
|
|
249
|
+
counter-increment: impl-counter;
|
|
250
|
+
display: flex;
|
|
251
|
+
gap: 0.75rem;
|
|
252
|
+
padding: 0.75rem 0;
|
|
253
|
+
border-bottom: 1px solid #f3f4f6;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.impl-item:last-child { border-bottom: none; }
|
|
257
|
+
|
|
258
|
+
.impl-item::before {
|
|
259
|
+
content: counter(impl-counter);
|
|
260
|
+
flex-shrink: 0;
|
|
261
|
+
width: 1.5rem;
|
|
262
|
+
height: 1.5rem;
|
|
263
|
+
background: #1a1a1a;
|
|
264
|
+
color: white;
|
|
265
|
+
border-radius: 50%;
|
|
266
|
+
display: flex;
|
|
267
|
+
align-items: center;
|
|
268
|
+
justify-content: center;
|
|
269
|
+
font-size: 0.75rem;
|
|
270
|
+
font-weight: 600;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.impl-content {
|
|
274
|
+
flex: 1;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.impl-content .impl-title {
|
|
278
|
+
font-weight: 600;
|
|
279
|
+
font-size: 0.95rem;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.impl-content .impl-desc {
|
|
283
|
+
font-size: 0.85rem;
|
|
284
|
+
color: #6b7280;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/* ===== Footer ===== */
|
|
288
|
+
.overview-footer {
|
|
289
|
+
margin-top: 3rem;
|
|
290
|
+
padding-top: 1rem;
|
|
291
|
+
border-top: 1px solid #e5e7eb;
|
|
292
|
+
font-size: 0.8rem;
|
|
293
|
+
color: #9ca3af;
|
|
294
|
+
text-align: center;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/* ===== Print Styles ===== */
|
|
298
|
+
@media print {
|
|
299
|
+
body { padding: 0; max-width: 100%; font-size: 11pt; }
|
|
300
|
+
h2 { page-break-after: avoid; }
|
|
301
|
+
.matrix-table, .strategy-item, .impl-item { page-break-inside: avoid; }
|
|
302
|
+
.journey-container { page-break-inside: avoid; }
|
|
303
|
+
.overview-footer { position: fixed; bottom: 0; width: 100%; }
|
|
304
|
+
|
|
305
|
+
.stage-bg-aq { background-color: #dcfce7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
306
|
+
.stage-bg-ac { background-color: #dbeafe !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
307
|
+
.stage-bg-rv { background-color: #fef9c3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
308
|
+
.stage-bg-rt { background-color: #ffedd5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
309
|
+
.stage-bg-rf { background-color: #f3e8ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
310
|
+
.stage-bg-tx { background-color: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
311
|
+
}
|
|
312
|
+
</style>
|
|
313
|
+
</head>
|
|
314
|
+
<body>
|
|
315
|
+
|
|
316
|
+
<!-- ===== HEADER ===== -->
|
|
317
|
+
<header class="overview-header">
|
|
318
|
+
<h1>{{PROJECT_NAME}}</h1>
|
|
319
|
+
<p class="subtitle">Lifecycle Messaging Overview</p>
|
|
320
|
+
<p class="meta">Generated {{GENERATED_AT}} · {{TOTAL_MESSAGES}} messages across {{TOTAL_CHANNELS}} channels</p>
|
|
321
|
+
</header>
|
|
322
|
+
|
|
323
|
+
<!-- ===== COMPANY OVERVIEW ===== -->
|
|
324
|
+
<section>
|
|
325
|
+
<h2>Company Overview</h2>
|
|
326
|
+
<div class="company-grid">
|
|
327
|
+
<div class="company-item">
|
|
328
|
+
<div class="label">Product</div>
|
|
329
|
+
<div class="value">{{COMPANY_NAME}}</div>
|
|
330
|
+
</div>
|
|
331
|
+
<div class="company-item">
|
|
332
|
+
<div class="label">Product Type</div>
|
|
333
|
+
<div class="value">{{PRODUCT_TYPE}}</div>
|
|
334
|
+
</div>
|
|
335
|
+
<div class="company-item">
|
|
336
|
+
<div class="label">Target Audience</div>
|
|
337
|
+
<div class="value">{{TARGET_AUDIENCE}}</div>
|
|
338
|
+
</div>
|
|
339
|
+
<div class="company-item">
|
|
340
|
+
<div class="label">Key Value Proposition</div>
|
|
341
|
+
<div class="value">{{KEY_VALUE_PROP}}</div>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="company-item">
|
|
344
|
+
<div class="label">Aha Moment</div>
|
|
345
|
+
<div class="value">{{AHA_MOMENT}}</div>
|
|
346
|
+
</div>
|
|
347
|
+
<div class="company-item">
|
|
348
|
+
<div class="label">Pricing Model</div>
|
|
349
|
+
<div class="value">{{PRICING_MODEL}}</div>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
<div class="company-item" style="margin-bottom: 0;">
|
|
353
|
+
<div class="label">Key Features</div>
|
|
354
|
+
<div class="value">{{KEY_FEATURES}}</div>
|
|
355
|
+
</div>
|
|
356
|
+
</section>
|
|
357
|
+
|
|
358
|
+
<!-- ===== AARRR STRATEGY ===== -->
|
|
359
|
+
<section>
|
|
360
|
+
<h2>AARRR Strategy Summary</h2>
|
|
361
|
+
<ul class="strategy-list">
|
|
362
|
+
<li class="strategy-item">
|
|
363
|
+
<div class="strategy-badge stage-bg-tx stage-tx">TX</div>
|
|
364
|
+
<div class="strategy-content">
|
|
365
|
+
<div class="stage-name">Transactional</div>
|
|
366
|
+
<div class="stage-desc">{{STRATEGY_TX}}</div>
|
|
367
|
+
</div>
|
|
368
|
+
</li>
|
|
369
|
+
<li class="strategy-item">
|
|
370
|
+
<div class="strategy-badge stage-bg-aq stage-aq">AQ</div>
|
|
371
|
+
<div class="strategy-content">
|
|
372
|
+
<div class="stage-name">Acquisition</div>
|
|
373
|
+
<div class="stage-desc">{{STRATEGY_AQ}}</div>
|
|
374
|
+
</div>
|
|
375
|
+
</li>
|
|
376
|
+
<li class="strategy-item">
|
|
377
|
+
<div class="strategy-badge stage-bg-ac stage-ac">AC</div>
|
|
378
|
+
<div class="strategy-content">
|
|
379
|
+
<div class="stage-name">Activation</div>
|
|
380
|
+
<div class="stage-desc">{{STRATEGY_AC}}</div>
|
|
381
|
+
</div>
|
|
382
|
+
</li>
|
|
383
|
+
<li class="strategy-item">
|
|
384
|
+
<div class="strategy-badge stage-bg-rv stage-rv">RV</div>
|
|
385
|
+
<div class="strategy-content">
|
|
386
|
+
<div class="stage-name">Revenue</div>
|
|
387
|
+
<div class="stage-desc">{{STRATEGY_RV}}</div>
|
|
388
|
+
</div>
|
|
389
|
+
</li>
|
|
390
|
+
<li class="strategy-item">
|
|
391
|
+
<div class="strategy-badge stage-bg-rt stage-rt">RT</div>
|
|
392
|
+
<div class="strategy-content">
|
|
393
|
+
<div class="stage-name">Retention</div>
|
|
394
|
+
<div class="stage-desc">{{STRATEGY_RT}}</div>
|
|
395
|
+
</div>
|
|
396
|
+
</li>
|
|
397
|
+
<li class="strategy-item">
|
|
398
|
+
<div class="strategy-badge stage-bg-rf stage-rf">RF</div>
|
|
399
|
+
<div class="strategy-content">
|
|
400
|
+
<div class="stage-name">Referral</div>
|
|
401
|
+
<div class="stage-desc">{{STRATEGY_RF}}</div>
|
|
402
|
+
</div>
|
|
403
|
+
</li>
|
|
404
|
+
</ul>
|
|
405
|
+
</section>
|
|
406
|
+
|
|
407
|
+
<!-- ===== CONDENSED MATRIX ===== -->
|
|
408
|
+
<section>
|
|
409
|
+
<h2>Message Matrix</h2>
|
|
410
|
+
|
|
411
|
+
<h3 class="stage-tx">Transactional Messages</h3>
|
|
412
|
+
<table class="matrix-table">
|
|
413
|
+
<thead>
|
|
414
|
+
<tr>
|
|
415
|
+
<th>ID</th>
|
|
416
|
+
<th>Name</th>
|
|
417
|
+
<th>Trigger</th>
|
|
418
|
+
<th>Channels</th>
|
|
419
|
+
</tr>
|
|
420
|
+
</thead>
|
|
421
|
+
<tbody>
|
|
422
|
+
{{MATRIX_TX_ROWS}}
|
|
423
|
+
<!-- Example (replaced by lib/html.ts):
|
|
424
|
+
<tr>
|
|
425
|
+
<td class="id-cell">TX-01</td>
|
|
426
|
+
<td>Verify your email</td>
|
|
427
|
+
<td>user.signed_up</td>
|
|
428
|
+
<td class="channels-cell">email</td>
|
|
429
|
+
</tr>
|
|
430
|
+
-->
|
|
431
|
+
</tbody>
|
|
432
|
+
</table>
|
|
433
|
+
|
|
434
|
+
<h3 class="stage-aq">Acquisition</h3>
|
|
435
|
+
<table class="matrix-table">
|
|
436
|
+
<thead>
|
|
437
|
+
<tr>
|
|
438
|
+
<th>ID</th>
|
|
439
|
+
<th>Name</th>
|
|
440
|
+
<th>Trigger</th>
|
|
441
|
+
<th>Wait</th>
|
|
442
|
+
<th>Channels</th>
|
|
443
|
+
</tr>
|
|
444
|
+
</thead>
|
|
445
|
+
<tbody>
|
|
446
|
+
{{MATRIX_AQ_ROWS}}
|
|
447
|
+
</tbody>
|
|
448
|
+
</table>
|
|
449
|
+
|
|
450
|
+
<h3 class="stage-ac">Activation</h3>
|
|
451
|
+
<table class="matrix-table">
|
|
452
|
+
<thead>
|
|
453
|
+
<tr>
|
|
454
|
+
<th>ID</th>
|
|
455
|
+
<th>Name</th>
|
|
456
|
+
<th>Trigger</th>
|
|
457
|
+
<th>Wait</th>
|
|
458
|
+
<th>Channels</th>
|
|
459
|
+
</tr>
|
|
460
|
+
</thead>
|
|
461
|
+
<tbody>
|
|
462
|
+
{{MATRIX_AC_ROWS}}
|
|
463
|
+
</tbody>
|
|
464
|
+
</table>
|
|
465
|
+
|
|
466
|
+
<h3 class="stage-rv">Revenue</h3>
|
|
467
|
+
<table class="matrix-table">
|
|
468
|
+
<thead>
|
|
469
|
+
<tr>
|
|
470
|
+
<th>ID</th>
|
|
471
|
+
<th>Name</th>
|
|
472
|
+
<th>Trigger</th>
|
|
473
|
+
<th>Wait</th>
|
|
474
|
+
<th>Channels</th>
|
|
475
|
+
</tr>
|
|
476
|
+
</thead>
|
|
477
|
+
<tbody>
|
|
478
|
+
{{MATRIX_RV_ROWS}}
|
|
479
|
+
</tbody>
|
|
480
|
+
</table>
|
|
481
|
+
|
|
482
|
+
<h3 class="stage-rt">Retention</h3>
|
|
483
|
+
<table class="matrix-table">
|
|
484
|
+
<thead>
|
|
485
|
+
<tr>
|
|
486
|
+
<th>ID</th>
|
|
487
|
+
<th>Name</th>
|
|
488
|
+
<th>Trigger</th>
|
|
489
|
+
<th>Wait</th>
|
|
490
|
+
<th>Channels</th>
|
|
491
|
+
</tr>
|
|
492
|
+
</thead>
|
|
493
|
+
<tbody>
|
|
494
|
+
{{MATRIX_RT_ROWS}}
|
|
495
|
+
</tbody>
|
|
496
|
+
</table>
|
|
497
|
+
|
|
498
|
+
<h3 class="stage-rf">Referral</h3>
|
|
499
|
+
<table class="matrix-table">
|
|
500
|
+
<thead>
|
|
501
|
+
<tr>
|
|
502
|
+
<th>ID</th>
|
|
503
|
+
<th>Name</th>
|
|
504
|
+
<th>Trigger</th>
|
|
505
|
+
<th>Wait</th>
|
|
506
|
+
<th>Channels</th>
|
|
507
|
+
</tr>
|
|
508
|
+
</thead>
|
|
509
|
+
<tbody>
|
|
510
|
+
{{MATRIX_RF_ROWS}}
|
|
511
|
+
</tbody>
|
|
512
|
+
</table>
|
|
513
|
+
</section>
|
|
514
|
+
|
|
515
|
+
<!-- ===== JOURNEY MAP ===== -->
|
|
516
|
+
<section>
|
|
517
|
+
<h2>Customer Journey</h2>
|
|
518
|
+
<div class="journey-container">
|
|
519
|
+
<div class="mermaid">
|
|
520
|
+
{{MERMAID_DIAGRAM}}
|
|
521
|
+
</div>
|
|
522
|
+
</div>
|
|
523
|
+
</section>
|
|
524
|
+
|
|
525
|
+
<!-- ===== MESSAGE INVENTORY ===== -->
|
|
526
|
+
<section>
|
|
527
|
+
<h2>Message Inventory</h2>
|
|
528
|
+
<div class="inventory-grid">
|
|
529
|
+
<div class="inventory-card">
|
|
530
|
+
<div class="card-title">By Stage</div>
|
|
531
|
+
<div class="inventory-row"><span>Transactional</span><span class="count">{{COUNT_TX}}</span></div>
|
|
532
|
+
<div class="inventory-row"><span>Acquisition</span><span class="count">{{COUNT_AQ}}</span></div>
|
|
533
|
+
<div class="inventory-row"><span>Activation</span><span class="count">{{COUNT_AC}}</span></div>
|
|
534
|
+
<div class="inventory-row"><span>Revenue</span><span class="count">{{COUNT_RV}}</span></div>
|
|
535
|
+
<div class="inventory-row"><span>Retention</span><span class="count">{{COUNT_RT}}</span></div>
|
|
536
|
+
<div class="inventory-row"><span>Referral</span><span class="count">{{COUNT_RF}}</span></div>
|
|
537
|
+
<div class="inventory-row" style="border-top: 2px solid #e5e7eb; margin-top: 0.25rem; padding-top: 0.5rem;">
|
|
538
|
+
<span style="font-weight: 600;">Total</span><span class="count">{{TOTAL_MESSAGES}}</span>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
<div class="inventory-card">
|
|
542
|
+
<div class="card-title">By Channel</div>
|
|
543
|
+
{{CHANNEL_INVENTORY}}
|
|
544
|
+
<!-- Example (replaced by lib/html.ts):
|
|
545
|
+
<div class="inventory-row"><span>email</span><span class="count">18</span></div>
|
|
546
|
+
<div class="inventory-row"><span>in-app</span><span class="count">6</span></div>
|
|
547
|
+
-->
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
</section>
|
|
551
|
+
|
|
552
|
+
<!-- ===== TAG SUMMARY ===== -->
|
|
553
|
+
<section>
|
|
554
|
+
<h2>Tag Summary</h2>
|
|
555
|
+
<div class="tag-list">
|
|
556
|
+
{{TAG_SUMMARY}}
|
|
557
|
+
<!-- Example (replaced by lib/html.ts):
|
|
558
|
+
<span class="tag-item">type:educational (8)</span>
|
|
559
|
+
<span class="tag-item">type:promotional (5)</span>
|
|
560
|
+
-->
|
|
561
|
+
</div>
|
|
562
|
+
</section>
|
|
563
|
+
|
|
564
|
+
<!-- ===== RECOMMENDED IMPLEMENTATION ORDER ===== -->
|
|
565
|
+
<section>
|
|
566
|
+
<h2>Recommended Implementation Order</h2>
|
|
567
|
+
<ol class="impl-list">
|
|
568
|
+
{{IMPLEMENTATION_ORDER}}
|
|
569
|
+
<!-- Example (replaced by lib/html.ts):
|
|
570
|
+
<li class="impl-item">
|
|
571
|
+
<div class="impl-content">
|
|
572
|
+
<div class="impl-title">Transactional Messages (TX-01 through TX-03)</div>
|
|
573
|
+
<div class="impl-desc">These are mandatory and expected by users. Set them up first.</div>
|
|
574
|
+
</div>
|
|
575
|
+
</li>
|
|
576
|
+
<li class="impl-item">
|
|
577
|
+
<div class="impl-content">
|
|
578
|
+
<div class="impl-title">Welcome & Getting Started (AQ-01, AQ-02)</div>
|
|
579
|
+
<div class="impl-desc">First impressions matter. Get your onboarding right.</div>
|
|
580
|
+
</div>
|
|
581
|
+
</li>
|
|
582
|
+
-->
|
|
583
|
+
</ol>
|
|
584
|
+
</section>
|
|
585
|
+
|
|
586
|
+
<!-- ===== FOOTER ===== -->
|
|
587
|
+
<footer class="overview-footer">
|
|
588
|
+
<a href="https://github.com/sr-kai/mango-lollipop" style="color: #6b7280; text-decoration: none; font-weight: 600;">Mango Lollipop</a> — AI-powered lifecycle messaging for SaaS<br>
|
|
589
|
+
Made by Sasha Kai with probably too much coffee. · {{GENERATED_AT}}
|
|
590
|
+
</footer>
|
|
591
|
+
|
|
592
|
+
<!-- ===== Mermaid Init ===== -->
|
|
593
|
+
<script>
|
|
594
|
+
mermaid.initialize({ startOnLoad: true, theme: 'default', securityLevel: 'loose' });
|
|
595
|
+
</script>
|
|
596
|
+
|
|
597
|
+
</body>
|
|
598
|
+
</html>
|