@taloswork/ose-shared 0.1.8 → 0.1.10

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 (208) hide show
  1. package/mcp/gen/mcp.json +2 -2
  2. package/package.json +3 -3
  3. package/skills/cozy-static-svg/SKILL.md +76 -0
  4. package/skills/cozy-static-svg/references/approved-preview.png +0 -0
  5. package/skills/cozy-static-svg/references/cross-platform.md +73 -0
  6. package/skills/cozy-static-svg/references/moon_keeps_watch.svg +229 -0
  7. package/skills/cozy-static-svg/references/style-anchor.md +271 -0
  8. package/skills/cozy-static-svg/scripts/artkit.py +321 -0
  9. package/skills/cozy-static-svg/scripts/to_png.py +333 -0
  10. package/skills/diagram-design/SKILL.md +568 -0
  11. package/skills/diagram-design/assets/example-architecture-dark.html +182 -0
  12. package/skills/diagram-design/assets/example-architecture-full.html +194 -0
  13. package/skills/diagram-design/assets/example-architecture.html +183 -0
  14. package/skills/diagram-design/assets/example-bar-dark.html +129 -0
  15. package/skills/diagram-design/assets/example-bar-full.html +105 -0
  16. package/skills/diagram-design/assets/example-bar.html +129 -0
  17. package/skills/diagram-design/assets/example-data-flow-dark.html +143 -0
  18. package/skills/diagram-design/assets/example-data-flow-full.html +185 -0
  19. package/skills/diagram-design/assets/example-data-flow.html +143 -0
  20. package/skills/diagram-design/assets/example-datalake-dark.html +243 -0
  21. package/skills/diagram-design/assets/example-datalake-full.html +248 -0
  22. package/skills/diagram-design/assets/example-datalake.html +269 -0
  23. package/skills/diagram-design/assets/example-dp-integration-dark.html +80 -0
  24. package/skills/diagram-design/assets/example-dp-integration-full.html +90 -0
  25. package/skills/diagram-design/assets/example-dp-integration.html +80 -0
  26. package/skills/diagram-design/assets/example-dp-security-matrix-dark.html +31 -0
  27. package/skills/diagram-design/assets/example-dp-security-matrix-full.html +32 -0
  28. package/skills/diagram-design/assets/example-dp-security-matrix.html +88 -0
  29. package/skills/diagram-design/assets/example-er-dark.html +202 -0
  30. package/skills/diagram-design/assets/example-er-full.html +205 -0
  31. package/skills/diagram-design/assets/example-er.html +202 -0
  32. package/skills/diagram-design/assets/example-flowchart-dark.html +156 -0
  33. package/skills/diagram-design/assets/example-flowchart-full.html +159 -0
  34. package/skills/diagram-design/assets/example-flowchart.html +156 -0
  35. package/skills/diagram-design/assets/example-gantt-dark.html +137 -0
  36. package/skills/diagram-design/assets/example-gantt-full.html +127 -0
  37. package/skills/diagram-design/assets/example-gantt.html +137 -0
  38. package/skills/diagram-design/assets/example-high-level-dark.html +251 -0
  39. package/skills/diagram-design/assets/example-high-level-full.html +247 -0
  40. package/skills/diagram-design/assets/example-high-level-vertical-dark.html +274 -0
  41. package/skills/diagram-design/assets/example-high-level-vertical-full.html +252 -0
  42. package/skills/diagram-design/assets/example-high-level-vertical.html +325 -0
  43. package/skills/diagram-design/assets/example-high-level.html +301 -0
  44. package/skills/diagram-design/assets/example-import-drawio.html +185 -0
  45. package/skills/diagram-design/assets/example-import-mermaid.html +70 -0
  46. package/skills/diagram-design/assets/example-it-state-dark.html +90 -0
  47. package/skills/diagram-design/assets/example-it-state-full.html +69 -0
  48. package/skills/diagram-design/assets/example-it-state.html +128 -0
  49. package/skills/diagram-design/assets/example-layers-dark.html +123 -0
  50. package/skills/diagram-design/assets/example-layers-full.html +126 -0
  51. package/skills/diagram-design/assets/example-layers.html +123 -0
  52. package/skills/diagram-design/assets/example-line-dark.html +111 -0
  53. package/skills/diagram-design/assets/example-line-full.html +105 -0
  54. package/skills/diagram-design/assets/example-line.html +111 -0
  55. package/skills/diagram-design/assets/example-loop-dark.html +100 -0
  56. package/skills/diagram-design/assets/example-loop-full.html +137 -0
  57. package/skills/diagram-design/assets/example-loop-terminal.html +347 -0
  58. package/skills/diagram-design/assets/example-loop.html +100 -0
  59. package/skills/diagram-design/assets/example-medallion-dark.html +159 -0
  60. package/skills/diagram-design/assets/example-medallion-full.html +201 -0
  61. package/skills/diagram-design/assets/example-medallion.html +159 -0
  62. package/skills/diagram-design/assets/example-nested-dark.html +132 -0
  63. package/skills/diagram-design/assets/example-nested-full.html +135 -0
  64. package/skills/diagram-design/assets/example-nested.html +136 -0
  65. package/skills/diagram-design/assets/example-org-chart-dark.html +45 -0
  66. package/skills/diagram-design/assets/example-org-chart-full.html +45 -0
  67. package/skills/diagram-design/assets/example-org-chart.html +45 -0
  68. package/skills/diagram-design/assets/example-paved-road-animated.html +546 -0
  69. package/skills/diagram-design/assets/example-policy-trace-animated.html +490 -0
  70. package/skills/diagram-design/assets/example-process-dark.html +64 -0
  71. package/skills/diagram-design/assets/example-process-full.html +74 -0
  72. package/skills/diagram-design/assets/example-process.html +64 -0
  73. package/skills/diagram-design/assets/example-pyramid-dark.html +119 -0
  74. package/skills/diagram-design/assets/example-pyramid-full.html +122 -0
  75. package/skills/diagram-design/assets/example-pyramid.html +119 -0
  76. package/skills/diagram-design/assets/example-quadrant-consultant.html +166 -0
  77. package/skills/diagram-design/assets/example-quadrant-dark.html +135 -0
  78. package/skills/diagram-design/assets/example-quadrant-full.html +138 -0
  79. package/skills/diagram-design/assets/example-quadrant.html +135 -0
  80. package/skills/diagram-design/assets/example-queue-animated.html +577 -0
  81. package/skills/diagram-design/assets/example-radar-dark.html +139 -0
  82. package/skills/diagram-design/assets/example-radar-full.html +135 -0
  83. package/skills/diagram-design/assets/example-radar.html +139 -0
  84. package/skills/diagram-design/assets/example-scatter-dark.html +141 -0
  85. package/skills/diagram-design/assets/example-scatter-full.html +116 -0
  86. package/skills/diagram-design/assets/example-scatter.html +141 -0
  87. package/skills/diagram-design/assets/example-sequence-dark.html +222 -0
  88. package/skills/diagram-design/assets/example-sequence-full.html +388 -0
  89. package/skills/diagram-design/assets/example-sequence-oauth-dark.html +188 -0
  90. package/skills/diagram-design/assets/example-sequence-oauth-full.html +350 -0
  91. package/skills/diagram-design/assets/example-sequence-oauth.html +227 -0
  92. package/skills/diagram-design/assets/example-sequence.html +222 -0
  93. package/skills/diagram-design/assets/example-state-dark.html +147 -0
  94. package/skills/diagram-design/assets/example-state-full.html +150 -0
  95. package/skills/diagram-design/assets/example-state.html +147 -0
  96. package/skills/diagram-design/assets/example-swimlane-dark.html +172 -0
  97. package/skills/diagram-design/assets/example-swimlane-full.html +175 -0
  98. package/skills/diagram-design/assets/example-swimlane.html +172 -0
  99. package/skills/diagram-design/assets/example-timeline-dark.html +135 -0
  100. package/skills/diagram-design/assets/example-timeline-full.html +138 -0
  101. package/skills/diagram-design/assets/example-timeline.html +135 -0
  102. package/skills/diagram-design/assets/example-tree-dark.html +173 -0
  103. package/skills/diagram-design/assets/example-tree-full.html +176 -0
  104. package/skills/diagram-design/assets/example-tree.html +173 -0
  105. package/skills/diagram-design/assets/example-venn-dark.html +132 -0
  106. package/skills/diagram-design/assets/example-venn-full.html +135 -0
  107. package/skills/diagram-design/assets/example-venn.html +110 -0
  108. package/skills/diagram-design/assets/icons.html +230 -0
  109. package/skills/diagram-design/assets/index.html +369 -0
  110. package/skills/diagram-design/assets/template-dark.html +85 -0
  111. package/skills/diagram-design/assets/template-full.html +413 -0
  112. package/skills/diagram-design/assets/template-motion.html +434 -0
  113. package/skills/diagram-design/assets/template-terminal.html +173 -0
  114. package/skills/diagram-design/assets/template.html +86 -0
  115. package/skills/diagram-design/references/animation.md +141 -0
  116. package/skills/diagram-design/references/export.md +136 -0
  117. package/skills/diagram-design/references/import-drawio.md +171 -0
  118. package/skills/diagram-design/references/import-mermaid.md +126 -0
  119. package/skills/diagram-design/references/onboarding.md +297 -0
  120. package/skills/diagram-design/references/output-spec.md +181 -0
  121. package/skills/diagram-design/references/primitive-annotation.md +36 -0
  122. package/skills/diagram-design/references/primitive-icons.md +827 -0
  123. package/skills/diagram-design/references/primitive-sketchy.md +43 -0
  124. package/skills/diagram-design/references/primitive-terminal.md +76 -0
  125. package/skills/diagram-design/references/semantic-patterns.md +122 -0
  126. package/skills/diagram-design/references/style-guide.md +139 -0
  127. package/skills/diagram-design/references/type-architecture.md +78 -0
  128. package/skills/diagram-design/references/type-bar.md +48 -0
  129. package/skills/diagram-design/references/type-data-flow.md +374 -0
  130. package/skills/diagram-design/references/type-dp-integration.md +410 -0
  131. package/skills/diagram-design/references/type-dp-security-matrix.md +379 -0
  132. package/skills/diagram-design/references/type-er.md +23 -0
  133. package/skills/diagram-design/references/type-flowchart.md +23 -0
  134. package/skills/diagram-design/references/type-gantt.md +45 -0
  135. package/skills/diagram-design/references/type-high-level.md +458 -0
  136. package/skills/diagram-design/references/type-it-state.md +470 -0
  137. package/skills/diagram-design/references/type-layers.md +26 -0
  138. package/skills/diagram-design/references/type-line.md +44 -0
  139. package/skills/diagram-design/references/type-loop.md +223 -0
  140. package/skills/diagram-design/references/type-medallion.md +356 -0
  141. package/skills/diagram-design/references/type-nested.md +22 -0
  142. package/skills/diagram-design/references/type-org-chart.md +44 -0
  143. package/skills/diagram-design/references/type-process.md +495 -0
  144. package/skills/diagram-design/references/type-pyramid.md +33 -0
  145. package/skills/diagram-design/references/type-quadrant.md +81 -0
  146. package/skills/diagram-design/references/type-radar.md +80 -0
  147. package/skills/diagram-design/references/type-scatter.md +39 -0
  148. package/skills/diagram-design/references/type-sequence.md +130 -0
  149. package/skills/diagram-design/references/type-state.md +21 -0
  150. package/skills/diagram-design/references/type-swimlane.md +20 -0
  151. package/skills/diagram-design/references/type-timeline.md +20 -0
  152. package/skills/diagram-design/references/type-tree.md +24 -0
  153. package/skills/diagram-design/references/type-venn.md +26 -0
  154. package/skills/diagram-design/scripts/drawio_extract.py +856 -0
  155. package/skills/diagram-design/scripts/mermaid_extract.py +1285 -0
  156. package/skills/diagram-design/scripts/self_check.py +389 -0
  157. package/skills/document/SKILL.md +63 -75
  158. package/skills/document/bin/deck-build.cjs +51 -1
  159. package/skills/document/bin/deck-qa.cjs +18745 -279
  160. package/skills/document/bin/doc-convert.cjs +9280 -76489
  161. package/skills/document/bin/doc-fill.cjs +0 -0
  162. package/skills/document/bin/doc-gen.cjs +3043 -46825
  163. package/skills/document/bin/doc-run.cjs +65095 -1967
  164. package/skills/document/bin/doc-scan.cjs +0 -0
  165. package/skills/document/bin/doc-text.cjs +0 -0
  166. package/skills/document/bin/doc-validate.cjs +18067 -226
  167. package/skills/document/bin/doc-xml.cjs +1 -1
  168. package/skills/document/bin/docx-annotate.cjs +0 -0
  169. package/skills/document/bin/html2pptx.cjs +32498 -145280
  170. package/skills/document/bin/ocr-worker.cjs +0 -0
  171. package/skills/document/bin/ocr.cjs +0 -0
  172. package/skills/document/bin/pdf-form.cjs +0 -0
  173. package/skills/document/bin/pdf-images.cjs +0 -0
  174. package/skills/document/bin/pdf-ops.cjs +0 -0
  175. package/skills/document/bin/pdf-render.cjs +11 -9
  176. package/skills/document/bin/pdf-tables.cjs +0 -0
  177. package/skills/document/bin/pptx-clone.cjs +21 -25
  178. package/skills/document/bin/pptx-embed-fonts.cjs +8 -6
  179. package/skills/document/bin/pptx-set-image.cjs +0 -0
  180. package/skills/document/bin/pptx-slide.cjs +22 -32
  181. package/skills/document/bin/pptx-theme.cjs +1 -20
  182. package/skills/document/bin/pptx-tokenize.cjs +1 -1
  183. package/skills/document/bin/xlsx-query.cjs +0 -0
  184. package/skills/document/bin/xlsx-recalc.cjs +0 -0
  185. package/skills/document/bin-reference.md +35 -0
  186. package/skills/document/content-pipeline.md +19 -18
  187. package/skills/document/deck-design.md +110 -211
  188. package/skills/document/layouts/README.md +4 -33
  189. package/skills/document/motion/README.md +4 -2
  190. package/skills/document/office.md +5 -1
  191. package/skills/document/rewrite.md +43 -99
  192. package/skills/document/styles/README.md +0 -7
  193. package/skills/document/theme-system.md +1 -0
  194. package/skills/document/themes/README.md +5 -5
  195. package/skills/document/themes/anthropic-clay.json +1 -7
  196. package/skills/document/themes/apple-keynote.json +1 -7
  197. package/skills/document/themes/black-gold.json +1 -2
  198. package/skills/document/themes/cinereel.json +1 -2
  199. package/skills/document/themes/cool-tech.json +1 -2
  200. package/skills/document/themes/hand-drawn.json +1 -2
  201. package/skills/document/themes/ivory-gold.json +1 -2
  202. package/skills/document/themes/magazine-ink.json +1 -2
  203. package/skills/document/themes/mckinsey-consulting.json +1 -7
  204. package/skills/document/themes/mono.json +1 -2
  205. package/skills/document/themes/swiss-grid.json +1 -2
  206. package/skills/document/themes/warm-editorial.json +1 -2
  207. package/skills/image-layout/SKILL.md +1 -1
  208. package/skills/image-layout/bin/html2img.cjs +0 -0
package/skills/diagram-design/assets/example-sequence-oauth-full.html ADDED
@@ -0,0 +1,350 @@
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
+
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: 1100px; 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: 840px; 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
+ <div class="header">
178
+ <p class="header-eyebrow">Sequence · Diagram Design · Special</p>
179
+ <h1>Bearer call with refresh</h1>
180
+ <p class="subtitle">A resource call under a bearer token, with an ALT fragment for the happy path versus a 401 that refreshes via Auth and retries. Async audit is fire-and-forget with an open arrowhead.</p>
181
+ </div>
182
+
183
+ <div class="diagram-container">
184
+ <svg viewBox="0 0 960 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-oauth-full-title sequence-oauth-full-desc">
185
+ <title id="sequence-oauth-full-title">Bearer call with refresh</title>
186
+ <desc id="sequence-oauth-full-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>
187
+ <defs>
188
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
189
+ <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/>
190
+ </pattern>
191
+
192
+ <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
193
+ <polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/>
194
+ </marker>
195
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
196
+ <polygon points="0 0, 8 3, 0 6" fill="#eb6c36"/>
197
+ </marker>
198
+ <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
199
+ <polygon points="0 0, 8 3, 0 6" fill="#2e5aa8"/>
200
+ </marker>
201
+ <marker id="arrow-open" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
202
+ <polyline points="0 0, 8 3, 0 6" fill="none" stroke="#4f5d75" stroke-width="1.2"/>
203
+ </marker>
204
+ </defs>
205
+
206
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
207
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
208
+
209
+ <line x1="160" y1="128" x2="160" y2="624" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
210
+ <line x1="480" y1="128" x2="480" y2="624" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
211
+ <line x1="800" y1="128" x2="800" y2="624" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
212
+
213
+ <!-- First API activation brackets M1 call through M2 success return -->
214
+ <rect x="476" y="180" width="8" height="104" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
215
+ <rect x="156" y="360" width="8" height="200" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
216
+ <rect x="796" y="400" width="8" height="64" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
217
+ <rect x="476" y="496" width="8" height="64" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
218
+
219
+ <line x1="160" y1="176" x2="476" y2="176" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
220
+ <rect x="248" y="160" width="128" height="12" rx="2" fill="#f5f5f5"/>
221
+ <text x="312" y="170" fill="#2e5aa8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">GET /RESOURCE + BEARER</text>
222
+
223
+ <rect x="88" y="208" width="752" height="360" rx="4"
224
+ fill="rgba(45,49,66,0.02)" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
225
+ <rect x="88" y="208" width="40" height="16" rx="2"
226
+ fill="#f5f5f5" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
227
+ <text x="108" y="220" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.12em">ALT</text>
228
+
229
+ <text x="100" y="244" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.04em">[token valid]</text>
230
+
231
+ <line x1="476" y1="272" x2="168" y2="272" stroke="#eb6c36" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
232
+ <rect x="256" y="256" width="88" height="12" rx="2" fill="#f5f5f5"/>
233
+ <text x="300" y="266" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · BODY</text>
234
+
235
+ <line x1="96" y1="312" x2="832" y2="312"
236
+ stroke="rgba(45,49,66,0.20)" stroke-width="1" stroke-dasharray="4,3"/>
237
+
238
+ <text x="100" y="336" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.04em">[else · 401]</text>
239
+
240
+ <!-- M3: 401 return dashed -->
241
+ <line x1="476" y1="368" x2="168" y2="368" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
242
+ <rect x="272" y="352" width="56" height="12" rx="2" fill="#f5f5f5"/>
243
+ <text x="300" y="362" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">401</text>
244
+
245
+ <line x1="164" y1="416" x2="796" y2="416" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
246
+ <rect x="408" y="400" width="128" height="12" rx="2" fill="#f5f5f5"/>
247
+ <text x="472" y="410" fill="#2e5aa8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">POST /TOKEN · REFRESH</text>
248
+
249
+ <line x1="796" y1="456" x2="168" y2="456" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
250
+ <rect x="424" y="440" width="96" height="12" rx="2" fill="#f5f5f5"/>
251
+ <text x="472" y="450" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · NEW ACCESS</text>
252
+
253
+ <line x1="164" y1="504" x2="476" y2="504" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
254
+ <rect x="248" y="488" width="112" height="12" rx="2" fill="#f5f5f5"/>
255
+ <text x="304" y="498" fill="#2e5aa8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">GET /RESOURCE · RETRY</text>
256
+
257
+ <!-- M7: retry 200 return dashed -->
258
+ <line x1="476" y1="544" x2="168" y2="544" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
259
+ <rect x="256" y="528" width="88" height="12" rx="2" fill="#f5f5f5"/>
260
+ <text x="300" y="538" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · BODY</text>
261
+
262
+ <line x1="164" y1="600" x2="796" y2="600" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow-open)"/>
263
+ <rect x="424" y="584" width="96" height="12" rx="2" fill="#f5f5f5"/>
264
+ <text x="472" y="594" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">AUDIT · ASYNC</text>
265
+
266
+ <rect x="88" y="72" width="144" height="56" rx="6" fill="#f5f5f5"/>
267
+ <rect x="88" y="72" width="144" height="56" rx="6" fill="rgba(79,93,117,0.10)" stroke="#7a8399" stroke-width="1"/>
268
+ <rect x="96" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(122,131,153,0.40)" stroke-width="0.8"/>
269
+ <text x="112" y="89" fill="#7a8399" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">APP</text>
270
+ <text x="160" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Client</text>
271
+ <text x="160" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">SPA · SDK</text>
272
+
273
+ <rect x="408" y="72" width="144" height="56" rx="6" fill="#f5f5f5"/>
274
+ <rect x="408" y="72" width="144" height="56" rx="6" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
275
+ <rect x="416" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(235,108,54,0.50)" stroke-width="0.8"/>
276
+ <text x="432" y="89" fill="#eb6c36" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">API</text>
277
+ <text x="480" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Resource API</text>
278
+ <text x="480" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Bearer gate</text>
279
+
280
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="#f5f5f5"/>
281
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="#ffffff" stroke="#2d3142" stroke-width="1"/>
282
+ <rect x="736" y="80" width="36" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.30)" stroke-width="0.8"/>
283
+ <text x="754" y="89" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">AUTH</text>
284
+ <text x="800" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Auth</text>
285
+ <text x="800" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">token · refresh</text>
286
+
287
+ <line x1="56" y1="648" x2="904" y2="648" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
288
+ <text x="56" y="664" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
289
+
290
+ <rect x="56" y="680" width="14" height="10" rx="2" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
291
+ <text x="76" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Focal / success</text>
292
+
293
+ <rect x="200" y="676" width="28" height="18" rx="2" fill="rgba(45,49,66,0.02)" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
294
+ <text x="208" y="688" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace">ALT</text>
295
+ <text x="236" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Fragment</text>
296
+
297
+ <line x1="320" y1="684" x2="348" y2="684" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
298
+ <text x="356" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">HTTP call</text>
299
+
300
+ <line x1="448" y1="684" x2="476" y2="684" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
301
+ <text x="484" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Return</text>
302
+
303
+ <line x1="560" y1="684" x2="588" y2="684" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow-open)"/>
304
+ <text x="596" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Async open</text>
305
+
306
+ <line x1="696" y1="684" x2="724" y2="684" stroke="#eb6c36" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
307
+ <text x="732" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Headline</text>
308
+ </svg>
309
+ </div>
310
+
311
+ <div class="cards">
312
+ <div class="card">
313
+ <p class="eyebrow">THE HEADLINE</p>
314
+ <div class="card-header">
315
+ <span class="card-dot coral"></span>
316
+ <h3>Valid token is one hop</h3>
317
+ </div>
318
+ <p>When the access token is still good, the ALT frame collapses to a single coral return. That is the path most readers should see first.</p>
319
+ </div>
320
+
321
+ <div class="card">
322
+ <div class="card-header">
323
+ <span class="card-dot link"></span>
324
+ <h3>401 drives refresh</h3>
325
+ </div>
326
+ <ul>
327
+ <li>API answers 401, not a hard fail</li>
328
+ <li>Client posts refresh to Auth</li>
329
+ <li>New access returns dashed</li>
330
+ <li>Retry re-enters the resource API</li>
331
+ </ul>
332
+ </div>
333
+
334
+ <div class="card">
335
+ <div class="card-header">
336
+ <span class="card-dot muted"></span>
337
+ <h3>Async uses open arrows</h3>
338
+ </div>
339
+ <p>The audit event is dashed with an open arrowhead so it never reads as a blocking return. Returns stay filled even when dashed.</p>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="footer">
344
+ <span>oauth · bearer + alt refresh sequence</span>
345
+ <span>example · schematic skill</span>
346
+ </div>
347
+
348
+ </div>
349
+ </body>
350
+ </html>
package/skills/diagram-design/assets/example-sequence-oauth.html ADDED
@@ -0,0 +1,227 @@
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: #f5f5f5;
12
+ --color-ink: #2d3142;
13
+ --color-muted: #4f5d75;
14
+ --color-accent: #eb6c36;
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-title sequence-oauth-desc">
62
+ <title id="sequence-oauth-title">Bearer call with refresh</title>
63
+ <desc id="sequence-oauth-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(45,49,66,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="#4f5d75"/>
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="#eb6c36"/>
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="#2e5aa8"/>
77
+ </marker>
78
+ <!-- Open arrowhead for async / fire-and-forget -->
79
+ <marker id="arrow-open" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
80
+ <polyline points="0 0, 8 3, 0 6" fill="none" stroke="#4f5d75" stroke-width="1.2"/>
81
+ </marker>
82
+ </defs>
83
+
84
+ <!-- Background: paper + optional dots -->
85
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
86
+ <rect width="100%" height="100%" fill="url(#dots)" opacity="0.55"/>
87
+
88
+ <!-- =================================================================
89
+ LIFELINES — Client 160 · API 480 · Auth 800
90
+ ================================================================= -->
91
+ <line x1="160" y1="128" x2="160" y2="624" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
92
+ <line x1="480" y1="128" x2="480" y2="624" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
93
+ <line x1="800" y1="128" x2="800" y2="624" stroke="rgba(45,49,66,0.22)" stroke-width="1" stroke-dasharray="3,3"/>
94
+
95
+ <!-- =================================================================
96
+ ACTIVATION BARS
97
+ ================================================================= -->
98
+ <!-- API holds control for the initial call -->
99
+ <!-- First API activation brackets M1 call through M2 success return -->
100
+ <rect x="476" y="180" width="8" height="104" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
101
+ <!-- Client activation during refresh region -->
102
+ <rect x="156" y="360" width="8" height="200" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
103
+ <!-- Auth activation for refresh -->
104
+ <rect x="796" y="400" width="8" height="64" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
105
+ <!-- API activation for retry -->
106
+ <rect x="476" y="496" width="8" height="64" fill="rgba(45,49,66,0.06)" stroke="#4f5d75" stroke-width="0.8"/>
107
+
108
+ <!-- =================================================================
109
+ M1: Client → API GET /resource (before ALT frame)
110
+ ================================================================= -->
111
+ <line x1="160" y1="176" x2="476" y2="176" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
112
+ <rect x="248" y="160" width="128" height="12" rx="2" fill="#f5f5f5"/>
113
+ <text x="312" y="170" fill="#2e5aa8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">GET /RESOURCE + BEARER</text>
114
+
115
+ <!-- =================================================================
116
+ ALT COMBINED FRAGMENT — spans Client · API · Auth
117
+ Frame: x=88 y=208 w=752 h=360
118
+ ================================================================= -->
119
+ <rect x="88" y="208" width="752" height="360" rx="4"
120
+ fill="rgba(45,49,66,0.02)" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
121
+ <!-- Operator tab: ALT -->
122
+ <rect x="88" y="208" width="40" height="16" rx="2"
123
+ fill="#f5f5f5" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
124
+ <text x="108" y="220" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.12em">ALT</text>
125
+
126
+ <!-- Region 1 guard -->
127
+ <text x="100" y="244" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.04em">[token valid]</text>
128
+
129
+ <!-- M2: API → Client 200 (coral headline success) -->
130
+ <line x1="476" y1="272" x2="168" y2="272" stroke="#eb6c36" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
131
+ <rect x="256" y="256" width="88" height="12" rx="2" fill="#f5f5f5"/>
132
+ <text x="300" y="266" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · BODY</text>
133
+
134
+ <!-- alt region divider -->
135
+ <line x1="96" y1="312" x2="832" y2="312"
136
+ stroke="rgba(45,49,66,0.20)" stroke-width="1" stroke-dasharray="4,3"/>
137
+
138
+ <!-- Region 2 guard -->
139
+ <text x="100" y="336" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.04em">[else · 401]</text>
140
+
141
+ <!-- M3: API → Client 401 (return: dashed + filled) -->
142
+ <line x1="476" y1="368" x2="168" y2="368" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
143
+ <rect x="272" y="352" width="56" height="12" rx="2" fill="#f5f5f5"/>
144
+ <text x="300" y="362" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">401</text>
145
+
146
+ <!-- M4: Client → Auth refresh (link-blue) -->
147
+ <line x1="164" y1="416" x2="796" y2="416" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
148
+ <rect x="408" y="400" width="128" height="12" rx="2" fill="#f5f5f5"/>
149
+ <text x="472" y="410" fill="#2e5aa8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">POST /TOKEN · REFRESH</text>
150
+
151
+ <!-- M5: Auth → Client access (return dashed, filled marker) -->
152
+ <line x1="796" y1="456" x2="168" y2="456" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
153
+ <rect x="424" y="440" width="96" height="12" rx="2" fill="#f5f5f5"/>
154
+ <text x="472" y="450" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · NEW ACCESS</text>
155
+
156
+ <!-- M6: Client → API retry -->
157
+ <line x1="164" y1="504" x2="476" y2="504" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
158
+ <rect x="248" y="488" width="112" height="12" rx="2" fill="#f5f5f5"/>
159
+ <text x="304" y="498" fill="#2e5aa8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">GET /RESOURCE · RETRY</text>
160
+
161
+ <!-- M7: API → Client 200 retry success (return dashed; coral already used on M2) -->
162
+ <line x1="476" y1="544" x2="168" y2="544" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
163
+ <rect x="256" y="528" width="88" height="12" rx="2" fill="#f5f5f5"/>
164
+ <text x="300" y="538" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">200 · BODY</text>
165
+
166
+ <!-- =================================================================
167
+ M8: Client → Auth async audit (open arrow, outside fragment)
168
+ ================================================================= -->
169
+ <line x1="164" y1="600" x2="796" y2="600" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow-open)"/>
170
+ <rect x="424" y="584" width="96" height="12" rx="2" fill="#f5f5f5"/>
171
+ <text x="472" y="594" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">AUDIT · ASYNC</text>
172
+
173
+ <!-- =================================================================
174
+ ACTOR BOXES — drawn after arrows
175
+ ================================================================= -->
176
+ <!-- Client (input / soft) -->
177
+ <rect x="88" y="72" width="144" height="56" rx="6" fill="#f5f5f5"/>
178
+ <rect x="88" y="72" width="144" height="56" rx="6" fill="rgba(79,93,117,0.10)" stroke="#7a8399" stroke-width="1"/>
179
+ <rect x="96" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(122,131,153,0.40)" stroke-width="0.8"/>
180
+ <text x="112" y="89" fill="#7a8399" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">APP</text>
181
+ <text x="160" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Client</text>
182
+ <text x="160" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">SPA · SDK</text>
183
+
184
+ <!-- API (focal) -->
185
+ <rect x="408" y="72" width="144" height="56" rx="6" fill="#f5f5f5"/>
186
+ <rect x="408" y="72" width="144" height="56" rx="6" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
187
+ <rect x="416" y="80" width="32" height="12" rx="2" fill="transparent" stroke="rgba(235,108,54,0.50)" stroke-width="0.8"/>
188
+ <text x="432" y="89" fill="#eb6c36" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">API</text>
189
+ <text x="480" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Resource API</text>
190
+ <text x="480" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Bearer gate</text>
191
+
192
+ <!-- Auth (backend) -->
193
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="#f5f5f5"/>
194
+ <rect x="728" y="72" width="144" height="56" rx="6" fill="#ffffff" stroke="#2d3142" stroke-width="1"/>
195
+ <rect x="736" y="80" width="36" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.30)" stroke-width="0.8"/>
196
+ <text x="754" y="89" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">AUTH</text>
197
+ <text x="800" y="104" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Auth</text>
198
+ <text x="800" y="119" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">token · refresh</text>
199
+
200
+ <!-- =================================================================
201
+ LEGEND
202
+ ================================================================= -->
203
+ <line x1="56" y1="648" x2="904" y2="648" stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
204
+ <text x="56" y="664" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.18em">LEGEND</text>
205
+
206
+ <rect x="56" y="680" width="14" height="10" rx="2" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
207
+ <text x="76" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Focal / success</text>
208
+
209
+ <rect x="200" y="676" width="28" height="18" rx="2" fill="rgba(45,49,66,0.02)" stroke="rgba(45,49,66,0.22)" stroke-width="1"/>
210
+ <text x="208" y="688" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace">ALT</text>
211
+ <text x="236" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Fragment</text>
212
+
213
+ <line x1="320" y1="684" x2="348" y2="684" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
214
+ <text x="356" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">HTTP call</text>
215
+
216
+ <line x1="448" y1="684" x2="476" y2="684" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow)"/>
217
+ <text x="484" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Return</text>
218
+
219
+ <line x1="560" y1="684" x2="588" y2="684" stroke="#4f5d75" stroke-width="1.2" stroke-dasharray="5,4" marker-end="url(#arrow-open)"/>
220
+ <text x="596" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Async open</text>
221
+
222
+ <line x1="696" y1="684" x2="724" y2="684" stroke="#eb6c36" stroke-width="1.4" marker-end="url(#arrow-accent)"/>
223
+ <text x="732" y="688" fill="#4f5d75" font-size="8.5" font-family="'Geist', sans-serif">Headline</text>
224
+ </svg>
225
+ </div>
226
+ </body>
227
+ </html>