@taloswork/ose-shared 0.1.8 → 0.1.9

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.
Files changed (155) hide show
  1. package/package.json +3 -3
  2. package/skills/cozy-static-svg/SKILL.md +76 -0
  3. package/skills/cozy-static-svg/references/approved-preview.png +0 -0
  4. package/skills/cozy-static-svg/references/cross-platform.md +73 -0
  5. package/skills/cozy-static-svg/references/moon_keeps_watch.svg +229 -0
  6. package/skills/cozy-static-svg/references/style-anchor.md +271 -0
  7. package/skills/cozy-static-svg/scripts/artkit.py +321 -0
  8. package/skills/cozy-static-svg/scripts/to_png.py +333 -0
  9. package/skills/diagram-design/SKILL.md +568 -0
  10. package/skills/diagram-design/assets/example-architecture-dark.html +182 -0
  11. package/skills/diagram-design/assets/example-architecture-full.html +194 -0
  12. package/skills/diagram-design/assets/example-architecture.html +183 -0
  13. package/skills/diagram-design/assets/example-bar-dark.html +129 -0
  14. package/skills/diagram-design/assets/example-bar-full.html +105 -0
  15. package/skills/diagram-design/assets/example-bar.html +129 -0
  16. package/skills/diagram-design/assets/example-data-flow-dark.html +143 -0
  17. package/skills/diagram-design/assets/example-data-flow-full.html +185 -0
  18. package/skills/diagram-design/assets/example-data-flow.html +143 -0
  19. package/skills/diagram-design/assets/example-datalake-dark.html +243 -0
  20. package/skills/diagram-design/assets/example-datalake-full.html +248 -0
  21. package/skills/diagram-design/assets/example-datalake.html +269 -0
  22. package/skills/diagram-design/assets/example-dp-integration-dark.html +80 -0
  23. package/skills/diagram-design/assets/example-dp-integration-full.html +90 -0
  24. package/skills/diagram-design/assets/example-dp-integration.html +80 -0
  25. package/skills/diagram-design/assets/example-dp-security-matrix-dark.html +31 -0
  26. package/skills/diagram-design/assets/example-dp-security-matrix-full.html +32 -0
  27. package/skills/diagram-design/assets/example-dp-security-matrix.html +88 -0
  28. package/skills/diagram-design/assets/example-er-dark.html +202 -0
  29. package/skills/diagram-design/assets/example-er-full.html +205 -0
  30. package/skills/diagram-design/assets/example-er.html +202 -0
  31. package/skills/diagram-design/assets/example-flowchart-dark.html +156 -0
  32. package/skills/diagram-design/assets/example-flowchart-full.html +159 -0
  33. package/skills/diagram-design/assets/example-flowchart.html +156 -0
  34. package/skills/diagram-design/assets/example-gantt-dark.html +137 -0
  35. package/skills/diagram-design/assets/example-gantt-full.html +127 -0
  36. package/skills/diagram-design/assets/example-gantt.html +137 -0
  37. package/skills/diagram-design/assets/example-high-level-dark.html +251 -0
  38. package/skills/diagram-design/assets/example-high-level-full.html +247 -0
  39. package/skills/diagram-design/assets/example-high-level-vertical-dark.html +274 -0
  40. package/skills/diagram-design/assets/example-high-level-vertical-full.html +252 -0
  41. package/skills/diagram-design/assets/example-high-level-vertical.html +325 -0
  42. package/skills/diagram-design/assets/example-high-level.html +301 -0
  43. package/skills/diagram-design/assets/example-import-drawio.html +185 -0
  44. package/skills/diagram-design/assets/example-import-mermaid.html +70 -0
  45. package/skills/diagram-design/assets/example-it-state-dark.html +90 -0
  46. package/skills/diagram-design/assets/example-it-state-full.html +69 -0
  47. package/skills/diagram-design/assets/example-it-state.html +128 -0
  48. package/skills/diagram-design/assets/example-layers-dark.html +123 -0
  49. package/skills/diagram-design/assets/example-layers-full.html +126 -0
  50. package/skills/diagram-design/assets/example-layers.html +123 -0
  51. package/skills/diagram-design/assets/example-line-dark.html +111 -0
  52. package/skills/diagram-design/assets/example-line-full.html +105 -0
  53. package/skills/diagram-design/assets/example-line.html +111 -0
  54. package/skills/diagram-design/assets/example-loop-dark.html +100 -0
  55. package/skills/diagram-design/assets/example-loop-full.html +137 -0
  56. package/skills/diagram-design/assets/example-loop-terminal.html +347 -0
  57. package/skills/diagram-design/assets/example-loop.html +100 -0
  58. package/skills/diagram-design/assets/example-medallion-dark.html +159 -0
  59. package/skills/diagram-design/assets/example-medallion-full.html +201 -0
  60. package/skills/diagram-design/assets/example-medallion.html +159 -0
  61. package/skills/diagram-design/assets/example-nested-dark.html +132 -0
  62. package/skills/diagram-design/assets/example-nested-full.html +135 -0
  63. package/skills/diagram-design/assets/example-nested.html +136 -0
  64. package/skills/diagram-design/assets/example-org-chart-dark.html +45 -0
  65. package/skills/diagram-design/assets/example-org-chart-full.html +45 -0
  66. package/skills/diagram-design/assets/example-org-chart.html +45 -0
  67. package/skills/diagram-design/assets/example-paved-road-animated.html +546 -0
  68. package/skills/diagram-design/assets/example-policy-trace-animated.html +490 -0
  69. package/skills/diagram-design/assets/example-process-dark.html +64 -0
  70. package/skills/diagram-design/assets/example-process-full.html +74 -0
  71. package/skills/diagram-design/assets/example-process.html +64 -0
  72. package/skills/diagram-design/assets/example-pyramid-dark.html +119 -0
  73. package/skills/diagram-design/assets/example-pyramid-full.html +122 -0
  74. package/skills/diagram-design/assets/example-pyramid.html +119 -0
  75. package/skills/diagram-design/assets/example-quadrant-consultant.html +166 -0
  76. package/skills/diagram-design/assets/example-quadrant-dark.html +135 -0
  77. package/skills/diagram-design/assets/example-quadrant-full.html +138 -0
  78. package/skills/diagram-design/assets/example-quadrant.html +135 -0
  79. package/skills/diagram-design/assets/example-queue-animated.html +577 -0
  80. package/skills/diagram-design/assets/example-radar-dark.html +139 -0
  81. package/skills/diagram-design/assets/example-radar-full.html +135 -0
  82. package/skills/diagram-design/assets/example-radar.html +139 -0
  83. package/skills/diagram-design/assets/example-scatter-dark.html +141 -0
  84. package/skills/diagram-design/assets/example-scatter-full.html +116 -0
  85. package/skills/diagram-design/assets/example-scatter.html +141 -0
  86. package/skills/diagram-design/assets/example-sequence-dark.html +222 -0
  87. package/skills/diagram-design/assets/example-sequence-full.html +388 -0
  88. package/skills/diagram-design/assets/example-sequence-oauth-dark.html +188 -0
  89. package/skills/diagram-design/assets/example-sequence-oauth-full.html +350 -0
  90. package/skills/diagram-design/assets/example-sequence-oauth.html +227 -0
  91. package/skills/diagram-design/assets/example-sequence.html +222 -0
  92. package/skills/diagram-design/assets/example-state-dark.html +147 -0
  93. package/skills/diagram-design/assets/example-state-full.html +150 -0
  94. package/skills/diagram-design/assets/example-state.html +147 -0
  95. package/skills/diagram-design/assets/example-swimlane-dark.html +172 -0
  96. package/skills/diagram-design/assets/example-swimlane-full.html +175 -0
  97. package/skills/diagram-design/assets/example-swimlane.html +172 -0
  98. package/skills/diagram-design/assets/example-timeline-dark.html +135 -0
  99. package/skills/diagram-design/assets/example-timeline-full.html +138 -0
  100. package/skills/diagram-design/assets/example-timeline.html +135 -0
  101. package/skills/diagram-design/assets/example-tree-dark.html +173 -0
  102. package/skills/diagram-design/assets/example-tree-full.html +176 -0
  103. package/skills/diagram-design/assets/example-tree.html +173 -0
  104. package/skills/diagram-design/assets/example-venn-dark.html +132 -0
  105. package/skills/diagram-design/assets/example-venn-full.html +135 -0
  106. package/skills/diagram-design/assets/example-venn.html +110 -0
  107. package/skills/diagram-design/assets/icons.html +230 -0
  108. package/skills/diagram-design/assets/index.html +369 -0
  109. package/skills/diagram-design/assets/template-dark.html +85 -0
  110. package/skills/diagram-design/assets/template-full.html +413 -0
  111. package/skills/diagram-design/assets/template-motion.html +434 -0
  112. package/skills/diagram-design/assets/template-terminal.html +173 -0
  113. package/skills/diagram-design/assets/template.html +86 -0
  114. package/skills/diagram-design/references/animation.md +141 -0
  115. package/skills/diagram-design/references/export.md +136 -0
  116. package/skills/diagram-design/references/import-drawio.md +171 -0
  117. package/skills/diagram-design/references/import-mermaid.md +126 -0
  118. package/skills/diagram-design/references/onboarding.md +297 -0
  119. package/skills/diagram-design/references/output-spec.md +181 -0
  120. package/skills/diagram-design/references/primitive-annotation.md +36 -0
  121. package/skills/diagram-design/references/primitive-icons.md +827 -0
  122. package/skills/diagram-design/references/primitive-sketchy.md +43 -0
  123. package/skills/diagram-design/references/primitive-terminal.md +76 -0
  124. package/skills/diagram-design/references/semantic-patterns.md +122 -0
  125. package/skills/diagram-design/references/style-guide.md +139 -0
  126. package/skills/diagram-design/references/type-architecture.md +78 -0
  127. package/skills/diagram-design/references/type-bar.md +48 -0
  128. package/skills/diagram-design/references/type-data-flow.md +374 -0
  129. package/skills/diagram-design/references/type-dp-integration.md +410 -0
  130. package/skills/diagram-design/references/type-dp-security-matrix.md +379 -0
  131. package/skills/diagram-design/references/type-er.md +23 -0
  132. package/skills/diagram-design/references/type-flowchart.md +23 -0
  133. package/skills/diagram-design/references/type-gantt.md +45 -0
  134. package/skills/diagram-design/references/type-high-level.md +458 -0
  135. package/skills/diagram-design/references/type-it-state.md +470 -0
  136. package/skills/diagram-design/references/type-layers.md +26 -0
  137. package/skills/diagram-design/references/type-line.md +44 -0
  138. package/skills/diagram-design/references/type-loop.md +223 -0
  139. package/skills/diagram-design/references/type-medallion.md +356 -0
  140. package/skills/diagram-design/references/type-nested.md +22 -0
  141. package/skills/diagram-design/references/type-org-chart.md +44 -0
  142. package/skills/diagram-design/references/type-process.md +495 -0
  143. package/skills/diagram-design/references/type-pyramid.md +33 -0
  144. package/skills/diagram-design/references/type-quadrant.md +81 -0
  145. package/skills/diagram-design/references/type-radar.md +80 -0
  146. package/skills/diagram-design/references/type-scatter.md +39 -0
  147. package/skills/diagram-design/references/type-sequence.md +130 -0
  148. package/skills/diagram-design/references/type-state.md +21 -0
  149. package/skills/diagram-design/references/type-swimlane.md +20 -0
  150. package/skills/diagram-design/references/type-timeline.md +20 -0
  151. package/skills/diagram-design/references/type-tree.md +24 -0
  152. package/skills/diagram-design/references/type-venn.md +26 -0
  153. package/skills/diagram-design/scripts/drawio_extract.py +856 -0
  154. package/skills/diagram-design/scripts/mermaid_extract.py +1285 -0
  155. package/skills/diagram-design/scripts/self_check.py +389 -0
package/skills/diagram-design/assets/example-sequence-full.html ADDED
@@ -0,0 +1,388 @@
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>Article Request · Sequence</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+
11
+ :root {
12
+ --color-paper: #f5f5f5;
13
+ --color-paper-2: #ececec;
14
+ --color-ink: #2d3142;
15
+ --color-muted: #4f5d75;
16
+ --color-soft: #7a8399;
17
+ --color-rule: rgba(45,49,66,0.12);
18
+ --color-rule-solid: rgba(79,93,117,0.25);
19
+ --color-accent: #eb6c36;
20
+ --color-accent-tint: rgba(235,108,54,0.08);
21
+ --color-link: #2e5aa8;
22
+ --font-sans: 'Geist', system-ui, sans-serif;
23
+ --font-serif: 'Instrument Serif', 'Times New Roman', serif;
24
+ --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
25
+ }
26
+
27
+ body {
28
+ font-family: var(--font-sans);
29
+ background: var(--color-paper);
30
+ min-height: 100vh;
31
+ padding: 3rem 2rem;
32
+ color: var(--color-ink);
33
+ }
34
+
35
+ .container { max-width: 1200px; margin: 0 auto; }
36
+
37
+ .header { margin-bottom: 2.5rem; }
38
+
39
+ .header-eyebrow {
40
+ font-family: var(--font-mono);
41
+ font-size: 0.66rem;
42
+ font-weight: 500;
43
+ letter-spacing: 0.18em;
44
+ text-transform: uppercase;
45
+ color: var(--color-muted);
46
+ margin-bottom: 0.75rem;
47
+ }
48
+
49
+ h1 {
50
+ font-family: var(--font-serif);
51
+ font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
52
+ font-weight: 400;
53
+ letter-spacing: -0.02em;
54
+ line-height: 1.1;
55
+ color: var(--color-ink);
56
+ margin-bottom: 0.5rem;
57
+ }
58
+
59
+ .subtitle {
60
+ font-family: var(--font-sans);
61
+ font-size: 1rem;
62
+ line-height: 1.55;
63
+ color: var(--color-muted);
64
+ max-width: 58ch;
65
+ }
66
+
67
+ .diagram-container {
68
+ background: var(--color-paper-2);
69
+ border-radius: 8px;
70
+ border: 1px solid var(--color-rule);
71
+ padding: 1.5rem;
72
+ overflow-x: auto;
73
+ }
74
+
75
+ svg { width: 100%; min-width: 900px; display: block; }
76
+
77
+ .cards {
78
+ display: grid;
79
+ grid-template-columns: 1.1fr 1fr 0.9fr;
80
+ gap: 1rem;
81
+ margin-top: 1.5rem;
82
+ }
83
+
84
+ @media (max-width: 820px) {
85
+ .cards { grid-template-columns: 1fr; }
86
+ }
87
+
88
+ .card {
89
+ background: #ffffff;
90
+ border-radius: 6px;
91
+ border: 1px solid var(--color-rule);
92
+ padding: 1.25rem;
93
+ }
94
+
95
+ .card .eyebrow {
96
+ font-family: var(--font-mono);
97
+ font-size: 0.5rem;
98
+ letter-spacing: 0.18em;
99
+ text-transform: uppercase;
100
+ color: var(--color-muted);
101
+ margin-bottom: 0.5rem;
102
+ }
103
+
104
+ .card-header {
105
+ display: flex;
106
+ align-items: center;
107
+ gap: 0.6rem;
108
+ margin-bottom: 0.875rem;
109
+ padding-bottom: 0.875rem;
110
+ border-bottom: 1px solid rgba(45,49,66,0.08);
111
+ }
112
+
113
+ .card-dot {
114
+ width: 7px; height: 7px;
115
+ border-radius: 50%;
116
+ flex-shrink: 0;
117
+ }
118
+ .card-dot.ink { background: var(--color-ink); }
119
+ .card-dot.muted { background: var(--color-muted); }
120
+ .card-dot.coral { background: var(--color-accent); }
121
+ .card-dot.link { background: var(--color-link); }
122
+
123
+ .card h3 {
124
+ font-family: var(--font-sans);
125
+ font-size: 0.875rem;
126
+ font-weight: 600;
127
+ color: var(--color-ink);
128
+ letter-spacing: -0.005em;
129
+ }
130
+
131
+ .card p {
132
+ color: var(--color-muted);
133
+ font-size: 0.8125rem;
134
+ line-height: 1.55;
135
+ }
136
+
137
+ .card ul {
138
+ list-style: none;
139
+ color: var(--color-muted);
140
+ font-size: 0.8125rem;
141
+ line-height: 1.55;
142
+ }
143
+
144
+ .card li {
145
+ margin-bottom: 0.3rem;
146
+ padding-left: 0.875rem;
147
+ position: relative;
148
+ }
149
+
150
+ .card li::before {
151
+ content: '—';
152
+ position: absolute;
153
+ left: 0;
154
+ color: rgba(45,49,66,0.25);
155
+ font-size: 0.75rem;
156
+ }
157
+
158
+ .footer {
159
+ margin-top: 2rem;
160
+ padding-top: 1.5rem;
161
+ border-top: 1px solid rgba(45,49,66,0.10);
162
+ font-family: var(--font-mono);
163
+ font-size: 0.72rem;
164
+ letter-spacing: 0.06em;
165
+ color: var(--color-soft);
166
+ display: flex;
167
+ justify-content: space-between;
168
+ align-items: center;
169
+ flex-wrap: wrap;
170
+ gap: 0.5rem;
171
+ }
172
+ </style>
173
+ </head>
174
+ <body>
175
+ <div class="container">
176
+
177
+ <!-- Header -->
178
+ <div class="header">
179
+ <p class="header-eyebrow">Sequence · Diagram Design</p>
180
+ <h1>Article request, cold cache</h1>
181
+ <p class="subtitle">How a content site serves a reader when the requested slug isn't already sitting in Cloudflare's edge cache — origin render, beacon, and back in one round trip.</p>
182
+ </div>
183
+
184
+ <!-- Sequence Diagram -->
185
+ <div class="diagram-container">
186
+ <svg viewBox="0 0 1000 584" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-full-title sequence-full-desc">
187
+ <title id="sequence-full-title">Article request, cold cache</title>
188
+ <desc id="sequence-full-desc">Sequence diagram showing a cold-cache article request moving from reader and browser through Cloudflare to an Astro origin and analytics beacon.</desc>
189
+ <defs>
190
+ <!-- Dot grid background -->
191
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
192
+ <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/>
193
+ </pattern>
194
+
195
+ <!-- Arrow markers -->
196
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
197
+ <polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/>
198
+ </marker>
199
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
200
+ <polygon points="0 0, 8 3, 0 6" fill="#eb6c36"/>
201
+ </marker>
202
+ <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
203
+ <polygon points="0 0, 8 3, 0 6" fill="#2e5aa8"/>
204
+ </marker>
205
+ </defs>
206
+
207
+ <!-- Background: paper + dot grid -->
208
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
209
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
210
+
211
+ <!-- =================================================================
212
+ LIFELINES — dashed vertical lines from each actor, behind everything.
213
+ Actor lifeline x-coords: 128, 352, 584, 800
214
+ ================================================================= -->
215
+ <line x1="128" y1="128" x2="128" y2="488" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
216
+ <line x1="352" y1="128" x2="352" y2="488" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
217
+ <line x1="584" y1="128" x2="584" y2="488" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
218
+ <line x1="800" y1="128" x2="800" y2="488" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
219
+
220
+ <!-- =================================================================
221
+ ACTIVATION BARS — w=8 rects on lifelines showing control duration.
222
+ Drawn before message arrows so arrows land on their edges.
223
+ ================================================================= -->
224
+ <!-- Cloudflare activation: receives at y=176, responds at y=408 -->
225
+ <rect x="348" y="180" width="8" height="232" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
226
+ <!-- Astro activation: called at y=232, returns at y=352 -->
227
+ <rect x="580" y="236" width="8" height="120" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
228
+
229
+ <!-- =================================================================
230
+ MESSAGE ARROWS — time flows top→down.
231
+ Draw before labels so label masks cover the line.
232
+ ================================================================= -->
233
+
234
+ <!-- M1: Reader → Cloudflare (HTTPS request · link-blue) -->
235
+ <line x1="128" y1="176" x2="352" y2="176" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
236
+
237
+ <!-- M2: Cloudflare → Astro (cache miss · muted) -->
238
+ <line x1="352" y1="232" x2="580" y2="232" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
239
+
240
+ <!-- M3: Astro self-message (render MDX · muted U-loop) -->
241
+ <path d="M 588 284 L 624 284 L 624 316 L 588 316" fill="none" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
242
+
243
+ <!-- M4: Astro → Cloudflare (return HTML · muted dashed) -->
244
+ <line x1="580" y1="352" x2="356" y2="352" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
245
+
246
+ <!-- M5: Cloudflare → Reader (primary success · coral) -->
247
+ <line x1="348" y1="408" x2="128" y2="408" stroke="#eb6c36" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
248
+
249
+ <!-- M6: Reader → Analytics (async beacon · muted dashed) -->
250
+ <line x1="128" y1="464" x2="800" y2="464" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
251
+
252
+ <!-- =================================================================
253
+ MESSAGE LABELS — each with an opaque paper-colored mask.
254
+ ================================================================= -->
255
+
256
+ <!-- M1 label -->
257
+ <rect x="188" y="160" width="104" height="12" rx="2" fill="#f5f5f5"/>
258
+ <text x="240" y="170" fill="#2e5aa8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">GET /ARTICLES/SLUG</text>
259
+
260
+ <!-- M2 label -->
261
+ <rect x="416" y="216" width="100" height="12" rx="2" fill="#f5f5f5"/>
262
+ <text x="466" y="226" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">CACHE MISS · ORIGIN</text>
263
+
264
+ <!-- M3 label (to the right of the self-loop) -->
265
+ <rect x="632" y="292" width="72" height="12" rx="2" fill="#f5f5f5"/>
266
+ <text x="668" y="302" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">RENDER MDX</text>
267
+
268
+ <!-- M4 label -->
269
+ <rect x="420" y="336" width="96" height="12" rx="2" fill="#f5f5f5"/>
270
+ <text x="468" y="346" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · HTML + MAX-AGE</text>
271
+
272
+ <!-- M5 label (coral · primary response) -->
273
+ <rect x="192" y="392" width="96" height="12" rx="2" fill="#f5f5f5"/>
274
+ <text x="240" y="402" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · EDGE-CACHED</text>
275
+
276
+ <!-- M6 label (placed between Astro and Analytics lifelines, a clear gap) -->
277
+ <rect x="648" y="448" width="96" height="12" rx="2" fill="#f5f5f5"/>
278
+ <text x="696" y="458" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">PAGEVIEW BEACON</text>
279
+
280
+ <!-- =================================================================
281
+ ACTOR BOXES — drawn after arrows/labels.
282
+ Each actor: 144–160 wide × 56 tall. Centers: 128, 352, 584, 800.
283
+ ================================================================= -->
284
+
285
+ <!-- Actor 1: Reader (external / soft) -->
286
+ <rect x="56" y="72" width="144" height="56" rx="6" fill="#f5f5f5"/>
287
+ <rect x="56" y="72" width="144" height="56" rx="6" fill="rgba(79,93,117,0.10)" stroke="#7a8399" stroke-width="1"/>
288
+ <rect x="64" y="80" width="28" height="12" rx="2" fill="transparent" stroke="rgba(122,131,153,0.40)" stroke-width="0.8"/>
289
+ <text x="78" y="89" fill="#7a8399" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EXT</text>
290
+ <text x="128" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Reader</text>
291
+ <text x="128" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Browser</text>
292
+
293
+ <!-- Actor 2: Cloudflare (cloud / muted) -->
294
+ <rect x="280" y="72" width="144" height="56" rx="6" fill="#f5f5f5"/>
295
+ <rect x="280" y="72" width="144" height="56" rx="6" fill="rgba(45,49,66,0.03)" stroke="rgba(45,49,66,0.30)" stroke-width="1"/>
296
+ <rect x="288" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.22)" stroke-width="0.8"/>
297
+ <text x="304" y="89" fill="#7a8399" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EDGE</text>
298
+ <text x="352" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Cloudflare</text>
299
+ <text x="352" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Pages · cache</text>
300
+
301
+ <!-- Actor 3: Astro Origin (focal / coral) -->
302
+ <rect x="504" y="72" width="160" height="56" rx="6" fill="#f5f5f5"/>
303
+ <rect x="504" y="72" width="160" height="56" rx="6" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
304
+ <rect x="512" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(235,108,54,0.50)" stroke-width="0.8"/>
305
+ <text x="528" y="89" fill="#eb6c36" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">ORIG</text>
306
+ <text x="584" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Astro Origin</text>
307
+ <text x="584" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">SSR + MDX</text>
308
+
309
+ <!-- Actor 4: Analytics (optional / dashed) -->
310
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="#f5f5f5"/>
311
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="rgba(45,49,66,0.02)" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="4,3"/>
312
+ <rect x="736" y="80" width="28" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.22)" stroke-width="0.8"/>
313
+ <text x="750" y="89" fill="#7a8399" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">ASY</text>
314
+ <text x="800" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Analytics</text>
315
+ <text x="800" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Beacon · async</text>
316
+
317
+ <!-- =================================================================
318
+ LEGEND — horizontal strip at the bottom.
319
+ Separator at y=504, eyebrow at y=520, items at y=540–548.
320
+ ================================================================= -->
321
+ <line x1="56" y1="504" x2="944" y2="504" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
322
+ <text x="56" y="520" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
323
+
324
+ <!-- Item 1: Actor swatch (coral focal) -->
325
+ <rect x="56" y="540" width="14" height="10" rx="2" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
326
+ <text x="76" y="548" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Focal actor</text>
327
+
328
+ <!-- Item 2: Activation bar swatch -->
329
+ <rect x="188" y="536" width="4" height="18" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
330
+ <text x="200" y="548" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Activation</text>
331
+
332
+ <!-- Item 3: Request arrow (link-blue) -->
333
+ <line x1="308" y1="546" x2="336" y2="546" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
334
+ <text x="344" y="548" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">HTTP request</text>
335
+
336
+ <!-- Item 4: Return / async (muted dashed) -->
337
+ <line x1="476" y1="546" x2="504" y2="546" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
338
+ <text x="512" y="548" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Return / async</text>
339
+
340
+ <!-- Item 5: Primary response (coral) -->
341
+ <line x1="652" y1="546" x2="680" y2="546" stroke="#eb6c36" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
342
+ <text x="688" y="548" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Primary response</text>
343
+
344
+ </svg>
345
+ </div>
346
+
347
+ <!-- Summary cards -->
348
+ <div class="cards">
349
+ <div class="card">
350
+ <p class="eyebrow">THE HEADLINE</p>
351
+ <div class="card-header">
352
+ <span class="card-dot coral"></span>
353
+ <h3>Edge handles the hot path</h3>
354
+ </div>
355
+ <p>On subsequent reads the whole exchange collapses to M1 → M5. Cloudflare serves the cached HTML without waking the origin. The coral arrow is the only one the reader ever perceives.</p>
356
+ </div>
357
+
358
+ <div class="card">
359
+ <div class="card-header">
360
+ <span class="card-dot ink"></span>
361
+ <h3>Origin render on miss</h3>
362
+ </div>
363
+ <ul>
364
+ <li>Astro SSRs MDX on cold cache</li>
365
+ <li>Returns HTML + cache headers</li>
366
+ <li>Edge stores the result</li>
367
+ <li>Next reader skips the origin trip</li>
368
+ </ul>
369
+ </div>
370
+
371
+ <div class="card">
372
+ <div class="card-header">
373
+ <span class="card-dot muted"></span>
374
+ <h3>Analytics is fire-and-forget</h3>
375
+ </div>
376
+ <p>The pageview beacon is dashed for a reason: the reader never waits on it, and a failed beacon never breaks the page.</p>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Footer -->
381
+ <div class="footer">
382
+ <span>content site · article request sequence</span>
383
+ <span>example · schematic skill</span>
384
+ </div>
385
+
386
+ </div>
387
+ </body>
388
+ </html>
package/skills/diagram-design/assets/example-sequence-oauth-dark.html ADDED
@@ -0,0 +1,188 @@
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>Bearer call with refresh · Sequence</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
10
+ :root {
11
+ --color-paper: #2d3142;
12
+ --color-ink: #f5f5f5;
13
+ --color-muted: #bfc0c0;
14
+ --color-accent: #f08a59;
15
+ --font-sans: 'Geist', system-ui, sans-serif;
16
+ --font-serif: 'Instrument Serif', serif;
17
+ --font-mono: 'Geist Mono', ui-monospace, monospace;
18
+ }
19
+
20
+ body {
21
+ font-family: var(--font-sans);
22
+ background: var(--color-paper);
23
+ color: var(--color-ink);
24
+ min-height: 100vh;
25
+ display: flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ padding: 3rem 2rem;
29
+ }
30
+
31
+ .frame { max-width: 1100px; width: 100%; }
32
+
33
+ .eyebrow {
34
+ font-family: var(--font-mono);
35
+ font-size: 0.66rem;
36
+ font-weight: 500;
37
+ letter-spacing: 0.18em;
38
+ text-transform: uppercase;
39
+ color: var(--color-muted);
40
+ margin-bottom: 0.5rem;
41
+ }
42
+
43
+ h1 {
44
+ font-family: var(--font-serif);
45
+ font-size: clamp(1.5rem, 2.4vw + 0.75rem, 2rem);
46
+ font-weight: 400;
47
+ letter-spacing: -0.02em;
48
+ line-height: 1.15;
49
+ color: var(--color-ink);
50
+ margin-bottom: 1.5rem;
51
+ }
52
+
53
+ svg { width: 100%; min-width: 840px; display: block; }
54
+ </style>
55
+ </head>
56
+ <body>
57
+ <div class="frame">
58
+ <p class="eyebrow">Sequence · Diagram Design · Special</p>
59
+ <h1>Bearer call with refresh</h1>
60
+
61
+ <svg viewBox="0 0 960 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-oauth-dark-title sequence-oauth-dark-desc">
62
+ <title id="sequence-oauth-dark-title">Bearer call with refresh</title>
63
+ <desc id="sequence-oauth-dark-desc">Client calls API with a bearer token. An ALT fragment shows either a valid 200 response or a 401 path that refreshes via Auth and retries.</desc>
64
+ <defs>
65
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
66
+ <circle cx="1" cy="1" r="0.9" fill="rgba(245,245,245,0.10)"/>
67
+ </pattern>
68
+
69
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
70
+ <polygon points="0 0, 8 3, 0 6" fill="#bfc0c0"/>
71
+ </marker>
72
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
73
+ <polygon points="0 0, 8 3, 0 6" fill="#f08a59"/>
74
+ </marker>
75
+ <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
76
+ <polygon points="0 0, 8 3, 0 6" fill="#6a95d8"/>
77
+ </marker>
78
+ <marker id="arrow-open" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
79
+ <polyline points="0 0, 8 3, 0 6" fill="none" stroke="#bfc0c0" stroke-width="1.2"/>
80
+ </marker>
81
+ </defs>
82
+
83
+ <rect width="100%" height="100%" fill="#2d3142"/>
84
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
85
+
86
+ <line x1="160" y1="128" x2="160" y2="624" stroke="rgba(245,245,245,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
87
+ <line x1="480" y1="128" x2="480" y2="624" stroke="rgba(245,245,245,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
88
+ <line x1="800" y1="128" x2="800" y2="624" stroke="rgba(245,245,245,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
89
+
90
+ <!-- First API activation brackets M1 call through M2 success return -->
91
+ <rect x="476" y="180" width="8" height="104" fill="rgba(245,245,245,0.06)" stroke="#bfc0c0" stroke-width="0.8"/>
92
+ <rect x="156" y="360" width="8" height="200" fill="rgba(245,245,245,0.06)" stroke="#bfc0c0" stroke-width="0.8"/>
93
+ <rect x="796" y="400" width="8" height="64" fill="rgba(245,245,245,0.06)" stroke="#bfc0c0" stroke-width="0.8"/>
94
+ <rect x="476" y="496" width="8" height="64" fill="rgba(245,245,245,0.06)" stroke="#bfc0c0" stroke-width="0.8"/>
95
+
96
+ <line x1="160" y1="176" x2="476" y2="176" stroke="#6a95d8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
97
+ <rect x="248" y="160" width="128" height="12" rx="2" fill="#2d3142"/>
98
+ <text x="312" y="170" fill="#6a95d8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">GET /RESOURCE + BEARER</text>
99
+
100
+ <rect x="88" y="208" width="752" height="360" rx="4"
101
+ fill="rgba(245,245,245,0.04)" stroke="rgba(245,245,245,0.22)" stroke-width="1"/>
102
+ <rect x="88" y="208" width="40" height="16" rx="2"
103
+ fill="#2d3142" stroke="rgba(245,245,245,0.22)" stroke-width="1"/>
104
+ <text x="108" y="220" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.12em">ALT</text>
105
+
106
+ <text x="100" y="244" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.04em">[token valid]</text>
107
+
108
+ <line x1="476" y1="272" x2="168" y2="272" stroke="#f08a59" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
109
+ <rect x="256" y="256" width="88" height="12" rx="2" fill="#2d3142"/>
110
+ <text x="300" y="266" fill="#f08a59" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · BODY</text>
111
+
112
+ <line x1="96" y1="312" x2="832" y2="312"
113
+ stroke="rgba(245,245,245,0.20)" stroke-width="1" stroke-dasharray="4,3"/>
114
+
115
+ <text x="100" y="336" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.04em">[else · 401]</text>
116
+
117
+ <!-- M3: 401 return dashed -->
118
+ <line x1="476" y1="368" x2="168" y2="368" stroke="#bfc0c0" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
119
+ <rect x="272" y="352" width="56" height="12" rx="2" fill="#2d3142"/>
120
+ <text x="300" y="362" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">401</text>
121
+
122
+ <line x1="164" y1="416" x2="796" y2="416" stroke="#6a95d8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
123
+ <rect x="408" y="400" width="128" height="12" rx="2" fill="#2d3142"/>
124
+ <text x="472" y="410" fill="#6a95d8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">POST /TOKEN · REFRESH</text>
125
+
126
+ <line x1="796" y1="456" x2="168" y2="456" stroke="#bfc0c0" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
127
+ <rect x="424" y="440" width="96" height="12" rx="2" fill="#2d3142"/>
128
+ <text x="472" y="450" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · NEW ACCESS</text>
129
+
130
+ <line x1="164" y1="504" x2="476" y2="504" stroke="#6a95d8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
131
+ <rect x="248" y="488" width="112" height="12" rx="2" fill="#2d3142"/>
132
+ <text x="304" y="498" fill="#6a95d8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">GET /RESOURCE · RETRY</text>
133
+
134
+ <!-- M7: retry 200 return dashed -->
135
+ <line x1="476" y1="544" x2="168" y2="544" stroke="#bfc0c0" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
136
+ <rect x="256" y="528" width="88" height="12" rx="2" fill="#2d3142"/>
137
+ <text x="300" y="538" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · BODY</text>
138
+
139
+ <line x1="164" y1="600" x2="796" y2="600" stroke="#bfc0c0" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow-open)"/>
140
+ <rect x="424" y="584" width="96" height="12" rx="2" fill="#2d3142"/>
141
+ <text x="472" y="594" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">AUDIT · ASYNC</text>
142
+
143
+ <rect x="88" y="72" width="144" height="56" rx="6" fill="#2d3142"/>
144
+ <rect x="88" y="72" width="144" height="56" rx="6" fill="rgba(191,192,192,0.10)" stroke="#8e98ac" stroke-width="1"/>
145
+ <rect x="96" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(142,152,172,0.40)" stroke-width="0.8"/>
146
+ <text x="112" y="89" fill="#8e98ac" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">APP</text>
147
+ <text x="160" y="104" fill="#f5f5f5" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Client</text>
148
+ <text x="160" y="119" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">SPA · SDK</text>
149
+
150
+ <rect x="408" y="72" width="144" height="56" rx="6" fill="#2d3142"/>
151
+ <rect x="408" y="72" width="144" height="56" rx="6" fill="rgba(240,138,89,0.10)" stroke="#f08a59" stroke-width="1"/>
152
+ <rect x="416" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(240,138,89,0.50)" stroke-width="0.8"/>
153
+ <text x="432" y="89" fill="#f08a59" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">API</text>
154
+ <text x="480" y="104" fill="#f5f5f5" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Resource API</text>
155
+ <text x="480" y="119" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Bearer gate</text>
156
+
157
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="#2d3142"/>
158
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="rgba(245,245,245,0.04)" stroke="#f5f5f5" stroke-width="1"/>
159
+ <rect x="736" y="80" width="36" height="12" rx="2" fill="transparent" stroke="rgba(245,245,245,0.30)" stroke-width="0.8"/>
160
+ <text x="754" y="89" fill="#bfc0c0" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">AUTH</text>
161
+ <text x="800" y="104" fill="#f5f5f5" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Auth</text>
162
+ <text x="800" y="119" fill="#bfc0c0" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">token · refresh</text>
163
+
164
+ <line x1="56" y1="648" x2="904" y2="648" stroke="rgba(245,245,245,0.12)" stroke-width="0.8"/>
165
+ <text x="56" y="664" fill="#bfc0c0" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
166
+
167
+ <rect x="56" y="680" width="14" height="10" rx="2" fill="rgba(240,138,89,0.10)" stroke="#f08a59" stroke-width="1"/>
168
+ <text x="76" y="688" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Focal / success</text>
169
+
170
+ <rect x="200" y="676" width="28" height="18" rx="2" fill="rgba(245,245,245,0.04)" stroke="rgba(245,245,245,0.22)" stroke-width="1"/>
171
+ <text x="208" y="688" fill="#bfc0c0" font-size="7" font-family="'Geist Mono', monospace">ALT</text>
172
+ <text x="236" y="688" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Fragment</text>
173
+
174
+ <line x1="320" y1="684" x2="348" y2="684" stroke="#6a95d8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
175
+ <text x="356" y="688" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">HTTP call</text>
176
+
177
+ <line x1="448" y1="684" x2="476" y2="684" stroke="#bfc0c0" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
178
+ <text x="484" y="688" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Return</text>
179
+
180
+ <line x1="560" y1="684" x2="588" y2="684" stroke="#bfc0c0" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow-open)"/>
181
+ <text x="596" y="688" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Async open</text>
182
+
183
+ <line x1="696" y1="684" x2="724" y2="684" stroke="#f08a59" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
184
+ <text x="732" y="688" fill="#bfc0c0" font-size="8.5" font-family="'Geist', sans-serif">Headline</text>
185
+ </svg>
186
+ </div>
187
+ </body>
188
+ </html>