@taloswork/ose-shared 0.1.7 → 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 (166) 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
  156. package/skills/document/bin/doc-gen.cjs +3 -6
  157. package/skills/document/bin/html2pptx.cjs +17 -9
  158. package/skills/document/bin/pptx-clone.cjs +41 -30
  159. package/skills/document/bin/pptx-embed-fonts.cjs +6 -2
  160. package/skills/document/bin/pptx-slide.cjs +46 -50
  161. package/skills/document/content-pipeline.md +54 -5
  162. package/skills/document/layouts/README.md +8 -0
  163. package/skills/document/layouts/blocks-2x2.tpl +19 -9
  164. package/skills/document/layouts/cards-3.tpl +1 -1
  165. package/skills/document/layouts/org-tree.tpl +1 -1
  166. package/skills/document/layouts/steps-vertical.tpl +1 -1
package/skills/diagram-design/assets/template-full.html ADDED
@@ -0,0 +1,413 @@
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] Architecture</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
+ /* ── Tokens ─────────────────────────────────────────────────── */
12
+ :root {
13
+ --color-paper: #f5f5f5;
14
+ --color-paper-2: #ececec;
15
+ --color-ink: #2d3142;
16
+ --color-muted: #4f5d75;
17
+ --color-soft: #7a8399;
18
+ --color-rule: rgba(45,49,66,0.12);
19
+ --color-rule-solid: rgba(79,93,117,0.25);
20
+ --color-accent: #eb6c36;
21
+ --color-accent-tint: rgba(235,108,54,0.08);
22
+ --color-link: #2e5aa8;
23
+ --font-sans: 'Geist', system-ui, sans-serif;
24
+ --font-serif: 'Instrument Serif', 'Times New Roman', serif;
25
+ --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
26
+ }
27
+
28
+ body {
29
+ font-family: var(--font-sans);
30
+ background: var(--color-paper);
31
+ min-height: 100vh;
32
+ padding: 3rem 2rem;
33
+ color: var(--color-ink);
34
+ }
35
+
36
+ .container { max-width: 1200px; margin: 0 auto; }
37
+
38
+ /* ── Header ─────────────────────────────────────────────────── */
39
+ .header { margin-bottom: 2.5rem; }
40
+
41
+ .header-eyebrow {
42
+ font-family: var(--font-mono);
43
+ font-size: 0.66rem;
44
+ font-weight: 500;
45
+ letter-spacing: 0.18em;
46
+ text-transform: uppercase;
47
+ color: var(--color-muted);
48
+ margin-bottom: 0.75rem;
49
+ }
50
+
51
+ h1 {
52
+ font-family: var(--font-serif);
53
+ font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
54
+ font-weight: 400;
55
+ letter-spacing: -0.02em;
56
+ line-height: 1.1;
57
+ color: var(--color-ink);
58
+ margin-bottom: 0.5rem;
59
+ }
60
+
61
+ .subtitle {
62
+ font-family: var(--font-sans);
63
+ font-size: 1rem;
64
+ line-height: 1.55;
65
+ color: var(--color-muted);
66
+ max-width: 52ch;
67
+ }
68
+
69
+ /* ── Diagram container ────────────────────────────────────────── */
70
+ /* Default: clean, borderless — diagram sits directly on the page paper.
71
+ For the framed/boxed variant, uncomment the background/border/padding below. */
72
+ .diagram-container {
73
+ background: transparent;
74
+ border: none;
75
+ padding: 0;
76
+ overflow-x: auto;
77
+ /* background: var(--color-paper-2); */
78
+ /* border: 1px solid var(--color-rule); */
79
+ /* border-radius: 8px; */
80
+ /* padding: 1.5rem; */
81
+ }
82
+
83
+ svg { width: 100%; min-width: 900px; display: block; }
84
+
85
+ /* ── Info cards ───────────────────────────────────────────────── */
86
+ .cards {
87
+ display: grid;
88
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
89
+ gap: 1rem;
90
+ margin-top: 1.5rem;
91
+ }
92
+
93
+ .card {
94
+ background: #ffffff;
95
+ border-radius: 6px;
96
+ border: 1px solid var(--color-rule);
97
+ padding: 1.25rem;
98
+ }
99
+
100
+ .card-header {
101
+ display: flex;
102
+ align-items: center;
103
+ gap: 0.6rem;
104
+ margin-bottom: 0.875rem;
105
+ padding-bottom: 0.875rem;
106
+ border-bottom: 1px solid rgba(45,49,66,0.08);
107
+ }
108
+
109
+ .card-dot {
110
+ width: 7px; height: 7px;
111
+ border-radius: 50%;
112
+ flex-shrink: 0;
113
+ }
114
+ .card-dot.ink { background: var(--color-ink); }
115
+ .card-dot.muted { background: var(--color-muted); }
116
+ .card-dot.coral { background: var(--color-accent); }
117
+ .card-dot.link { background: var(--color-link); }
118
+ .card-dot.soft { background: var(--color-soft); }
119
+
120
+ .card h3 {
121
+ font-family: var(--font-sans);
122
+ font-size: 0.875rem;
123
+ font-weight: 600;
124
+ color: var(--color-ink);
125
+ letter-spacing: -0.005em;
126
+ }
127
+
128
+ .card ul {
129
+ list-style: none;
130
+ color: var(--color-muted);
131
+ font-size: 0.8125rem;
132
+ line-height: 1.55;
133
+ }
134
+
135
+ .card li {
136
+ margin-bottom: 0.3rem;
137
+ padding-left: 0.875rem;
138
+ position: relative;
139
+ }
140
+
141
+ .card li::before {
142
+ content: '—';
143
+ position: absolute;
144
+ left: 0;
145
+ color: rgba(45,49,66,0.25);
146
+ font-size: 0.75rem;
147
+ }
148
+
149
+ /* ── Footer ─────────────────────────────────────────────────── */
150
+ .footer {
151
+ margin-top: 2rem;
152
+ padding-top: 1.5rem;
153
+ border-top: 1px solid rgba(45,49,66,0.10);
154
+ font-family: var(--font-mono);
155
+ font-size: 0.72rem;
156
+ letter-spacing: 0.06em;
157
+ color: var(--color-soft);
158
+ display: flex;
159
+ justify-content: space-between;
160
+ align-items: center;
161
+ flex-wrap: wrap;
162
+ gap: 0.5rem;
163
+ }
164
+ </style>
165
+ </head>
166
+ <body>
167
+ <div class="container">
168
+
169
+ <!-- Header -->
170
+ <div class="header">
171
+ <p class="header-eyebrow">Architecture · [Date]</p>
172
+ <h1>[Project Name]</h1>
173
+ <p class="subtitle">[One-sentence description of what this diagram shows.]</p>
174
+ </div>
175
+
176
+ <!-- Main Diagram -->
177
+ <div class="diagram-container">
178
+ <!-- Replace [diagram-slug] with a unique slug for this diagram before export. -->
179
+ <svg viewBox="0 0 1000 700" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">
180
+ <title id="[diagram-slug]-title">[Diagram title]</title>
181
+ <desc id="[diagram-slug]-desc">[One sentence describing what the diagram shows]</desc>
182
+ <defs>
183
+
184
+ <!-- OPTIONAL: dot-pattern background. Uncomment the <pattern> below and the second <rect> in the bg section to enable. -->
185
+ <!--
186
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
187
+ <circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/>
188
+ </pattern>
189
+ -->
190
+
191
+ <!-- Arrow: muted (default — generic / internal connections) -->
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
+
196
+ <!-- Arrow: coral (accent — primary / highlighted flows) -->
197
+ <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
198
+ <polygon points="0 0, 8 3, 0 6" fill="#eb6c36"/>
199
+ </marker>
200
+
201
+ <!-- Arrow: link-blue (#2e5aa8 — HTTP/API / external calls) -->
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
+
206
+ </defs>
207
+
208
+ <!-- Background: paper + dot grid -->
209
+ <rect width="100%" height="100%" fill="#f5f5f5"/>
210
+ <!-- <rect width="100%" height="100%" fill="url(#dots)" opacity="0.6"/> -->
211
+
212
+ <!-- =================================================================
213
+ DRAW ARROWS FIRST — they paint behind boxes (SVG document order).
214
+ ================================================================= -->
215
+
216
+ <!-- HTTP/API arrow (link-blue) with label -->
217
+ <line x1="130" y1="305" x2="195" y2="305" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
218
+ <text x="162" y="297" fill="#2e5aa8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">HTTPS</text>
219
+
220
+ <!-- Generic internal arrow -->
221
+ <line x1="310" y1="305" x2="356" y2="305" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
222
+
223
+ <!-- Vertical arrow -->
224
+ <line x1="253" y1="332" x2="253" y2="376" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
225
+
226
+ <!-- Auth / security flow (dashed coral) -->
227
+ <path d="M 80 140 L 80 200 Q 80 218 98 218 L 200 218 Q 218 218 218 236 L 218 276"
228
+ fill="none" stroke="#eb6c36" stroke-width="1.2" stroke-dasharray="5,4"
229
+ marker-end="url(#arrow-accent)"/>
230
+ <text x="148" y="212" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">JWT</text>
231
+
232
+ <!-- Primary data flow (coral) -->
233
+ <line x1="620" y1="305" x2="696" y2="305" stroke="#eb6c36" stroke-width="1.2" marker-end="url(#arrow-accent)"/>
234
+ <text x="655" y="297" fill="#eb6c36" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">TLS</text>
235
+
236
+
237
+ <!-- =================================================================
238
+ COMPONENT BOXES
239
+ Pattern: opaque paper rect first (masks arrows), then styled rect.
240
+ Mono type labels use Geist Mono — mono is dominant in tool/data.
241
+ ================================================================= -->
242
+
243
+ <!-- ── External / User ──────────────────────────────────────── -->
244
+ <rect x="30" y="278" width="100" height="54" rx="6" fill="#f5f5f5"/>
245
+ <rect x="30" y="278" width="100" height="54" rx="6" fill="rgba(79,93,117,0.10)" stroke="#7a8399" stroke-width="1"/>
246
+ <!-- Rectangular type tag (not rounded — brand rule) -->
247
+ <rect x="38" y="284" width="26" height="12" rx="2" fill="transparent" stroke="rgba(122,131,153,0.4)" stroke-width="0.8"/>
248
+ <text x="51" y="293" fill="#7a8399" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">EXT</text>
249
+ <!-- Main label -->
250
+ <text x="80" y="308" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Users</text>
251
+ <text x="80" y="323" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Browser / Mobile</text>
252
+
253
+ <!-- ── Security / Auth ──────────────────────────────────────── -->
254
+ <rect x="30" y="78" width="100" height="56" rx="6" fill="#f5f5f5"/>
255
+ <rect x="30" y="78" width="100" height="56" rx="6" fill="rgba(235,108,54,0.06)" stroke="rgba(235,108,54,0.50)" stroke-width="1"/>
256
+ <rect x="38" y="84" width="28" height="12" rx="2" fill="transparent" stroke="rgba(235,108,54,0.40)" stroke-width="0.8"/>
257
+ <text x="52" y="93" fill="rgba(235,108,54,0.8)" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">AUTH</text>
258
+ <text x="80" y="110" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Auth Provider</text>
259
+ <text x="80" y="125" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">OAuth 2.0</text>
260
+
261
+ <!-- ── Region boundary (dashed) ─────────────────────────────── -->
262
+ <rect x="158" y="38" width="822" height="624" rx="8" fill="transparent" stroke="rgba(45,49,66,0.18)" stroke-width="1" stroke-dasharray="6,4"/>
263
+ <text x="170" y="55" fill="#4f5d75" font-size="8" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.12em">AWS REGION · US-WEST-2</text>
264
+
265
+ <!-- ── Cloud / CDN (with faded watermark numeral — slide card pattern) -->
266
+ <rect x="198" y="278" width="112" height="54" rx="6" fill="#f5f5f5"/>
267
+ <rect x="198" y="278" width="112" height="54" rx="6" fill="rgba(45,49,66,0.03)" stroke="rgba(45,49,66,0.30)" stroke-width="1"/>
268
+ <!-- Faded mono watermark numeral (background) -->
269
+ <text x="294" y="323" fill="rgba(45,49,66,0.06)" font-size="40" font-weight="600" font-family="'Geist Mono', monospace" text-anchor="end">01</text>
270
+ <rect x="206" y="284" width="24" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.22)" stroke-width="0.8"/>
271
+ <text x="218" y="293" fill="#7a8399" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">CDN</text>
272
+ <text x="254" y="308" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">CloudFront</text>
273
+ <text x="254" y="323" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">AWS CDN</text>
274
+
275
+ <!-- ── Cloud / Storage ───────────────────────────────────────── -->
276
+ <rect x="198" y="378" width="112" height="102" rx="6" fill="#f5f5f5"/>
277
+ <rect x="198" y="378" width="112" height="102" rx="6" fill="rgba(45,49,66,0.03)" stroke="rgba(45,49,66,0.30)" stroke-width="1"/>
278
+ <text x="294" y="468" fill="rgba(45,49,66,0.06)" font-size="40" font-weight="600" font-family="'Geist Mono', monospace" text-anchor="end">02</text>
279
+ <rect x="206" y="384" width="22" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.22)" stroke-width="0.8"/>
280
+ <text x="217" y="393" fill="#7a8399" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">S3</text>
281
+ <text x="254" y="408" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">S3 Buckets</text>
282
+ <text x="254" y="426" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">bucket-assets</text>
283
+ <text x="254" y="440" fill="#4f5d75" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle">bucket-uploads</text>
284
+ <text x="254" y="466" fill="#eb6c36" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">OAI PROTECTED</text>
285
+
286
+ <!-- ── Security group boundary ───────────────────────────────── -->
287
+ <rect x="348" y="264" width="120" height="80" rx="6" fill="transparent" stroke="rgba(235,108,54,0.45)" stroke-width="1" stroke-dasharray="4,4"/>
288
+ <text x="356" y="278" fill="rgba(235,108,54,0.7)" font-size="8" font-family="'Geist Mono', monospace" letter-spacing="0.08em">SG · :443</text>
289
+
290
+ <!-- ── Load Balancer (inside security group) ──────────────────── -->
291
+ <rect x="358" y="282" width="100" height="54" rx="6" fill="#f5f5f5"/>
292
+ <rect x="358" y="282" width="100" height="54" rx="6" fill="rgba(45,49,66,0.03)" stroke="rgba(45,49,66,0.30)" stroke-width="1"/>
293
+ <rect x="366" y="288" width="22" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.22)" stroke-width="0.8"/>
294
+ <text x="377" y="297" fill="#7a8399" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">LB</text>
295
+ <text x="408" y="311" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Load Balancer</text>
296
+ <text x="408" y="326" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">HTTPS :443</text>
297
+
298
+ <!-- ── Backend / API ─────────────────────────────────────────── -->
299
+ <rect x="508" y="278" width="112" height="54" rx="6" fill="#f5f5f5"/>
300
+ <rect x="508" y="278" width="112" height="54" rx="6" fill="#ffffff" stroke="#2d3142" stroke-width="1"/>
301
+ <rect x="516" y="284" width="26" height="12" rx="2" fill="transparent" stroke="rgba(45,49,66,0.40)" stroke-width="0.8"/>
302
+ <text x="529" y="293" fill="#2d3142" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">API</text>
303
+ <text x="564" y="308" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">API Server</text>
304
+ <text x="564" y="323" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">FastAPI :8000</text>
305
+
306
+ <!-- ── Database ───────────────────────────────────────────────── -->
307
+ <rect x="698" y="278" width="120" height="54" rx="6" fill="#f5f5f5"/>
308
+ <rect x="698" y="278" width="120" height="54" rx="6" fill="rgba(45,49,66,0.05)" stroke="#4f5d75" stroke-width="1"/>
309
+ <rect x="706" y="284" width="22" height="12" rx="2" fill="transparent" stroke="rgba(79,93,117,0.50)" stroke-width="0.8"/>
310
+ <text x="717" y="293" fill="#4f5d75" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">DB</text>
311
+ <text x="758" y="308" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Database</text>
312
+ <text x="758" y="323" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">PostgreSQL</text>
313
+
314
+ <!-- ── Frontend / UI ─────────────────────────────────────────── -->
315
+ <rect x="198" y="518" width="200" height="112" rx="6" fill="#f5f5f5"/>
316
+ <rect x="198" y="518" width="200" height="112" rx="6" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
317
+ <rect x="206" y="524" width="22" height="12" rx="2" fill="transparent" stroke="rgba(235,108,54,0.50)" stroke-width="0.8"/>
318
+ <text x="217" y="533" fill="#eb6c36" font-size="7" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.08em">UI</text>
319
+ <text x="298" y="550" fill="#2d3142" font-size="12" font-weight="600" font-family="'Geist', sans-serif" text-anchor="middle">Web App</text>
320
+ <text x="298" y="567" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">React + TypeScript</text>
321
+ <text x="298" y="581" fill="#4f5d75" font-size="9" font-family="'Geist Mono', monospace" text-anchor="middle">Astro SSG</text>
322
+ <!-- Link-blue URL label -->
323
+ <text x="298" y="614" fill="#2e5aa8" font-size="8" font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.04em">app.example.com</text>
324
+
325
+
326
+ <!-- =================================================================
327
+ LEGEND — OUTSIDE all boundary boxes.
328
+ Region boundary ends at y=662 → legend starts at y=682.
329
+ ================================================================= -->
330
+ <text x="510" y="544" fill="#2d3142" font-size="9" font-weight="500" font-family="'Geist Mono', monospace" letter-spacing="0.12em">LEGEND</text>
331
+
332
+ <rect x="510" y="558" width="14" height="10" rx="2" fill="rgba(235,108,54,0.08)" stroke="#eb6c36" stroke-width="1"/>
333
+ <text x="530" y="567" fill="#4f5d75" font-size="9" font-family="'Geist', sans-serif">Frontend / UI</text>
334
+
335
+ <rect x="510" y="576" width="14" height="10" rx="2" fill="#ffffff" stroke="#2d3142" stroke-width="1"/>
336
+ <text x="530" y="585" fill="#4f5d75" font-size="9" font-family="'Geist', sans-serif">Backend / API</text>
337
+
338
+ <rect x="510" y="594" width="14" height="10" rx="2" fill="rgba(45,49,66,0.03)" stroke="rgba(45,49,66,0.30)" stroke-width="1"/>
339
+ <text x="530" y="603" fill="#4f5d75" font-size="9" font-family="'Geist', sans-serif">Cloud / Service</text>
340
+
341
+ <rect x="510" y="612" width="14" height="10" rx="2" fill="rgba(45,49,66,0.05)" stroke="#4f5d75" stroke-width="1"/>
342
+ <text x="530" y="621" fill="#4f5d75" font-size="9" font-family="'Geist', sans-serif">Database</text>
343
+
344
+ <rect x="510" y="630" width="14" height="10" rx="2" fill="rgba(79,93,117,0.10)" stroke="#7a8399" stroke-width="1"/>
345
+ <text x="530" y="639" fill="#4f5d75" font-size="9" font-family="'Geist', sans-serif">External / User</text>
346
+
347
+ <!-- Arrow types -->
348
+ <line x1="510" y1="655" x2="524" y2="655" stroke="#2e5aa8" stroke-width="1.2" marker-end="url(#arrow-link)"/>
349
+ <text x="530" y="659" fill="#4f5d75" font-size="9" font-family="'Geist', sans-serif">HTTP / API call</text>
350
+
351
+ <line x1="510" y1="671" x2="524" y2="671" stroke="#eb6c36" stroke-width="1.2" stroke-dasharray="4,3" marker-end="url(#arrow-accent)"/>
352
+ <text x="530" y="675" fill="#4f5d75" font-size="9" font-family="'Geist', sans-serif">Auth flow</text>
353
+
354
+ <line x1="510" y1="687" x2="524" y2="687" stroke="#4f5d75" stroke-width="1.2" marker-end="url(#arrow)"/>
355
+ <text x="530" y="691" fill="#4f5d75" font-size="9" font-family="'Geist', sans-serif">Internal connection</text>
356
+
357
+ <rect x="510" y="698" width="14" height="10" rx="2" fill="transparent" stroke="rgba(235,108,54,0.45)" stroke-width="1" stroke-dasharray="3,3"/>
358
+ <text x="530" y="707" fill="#4f5d75" font-size="9" font-family="'Geist', sans-serif">Security group</text>
359
+
360
+ </svg>
361
+ </div>
362
+
363
+ <!-- Info Cards -->
364
+ <div class="cards">
365
+ <div class="card">
366
+ <div class="card-header">
367
+ <span class="card-dot coral"></span>
368
+ <h3>Card Title 1</h3>
369
+ </div>
370
+ <ul>
371
+ <li>Item one</li>
372
+ <li>Item two</li>
373
+ <li>Item three</li>
374
+ <li>Item four</li>
375
+ </ul>
376
+ </div>
377
+
378
+ <div class="card">
379
+ <div class="card-header">
380
+ <span class="card-dot ink"></span>
381
+ <h3>Card Title 2</h3>
382
+ </div>
383
+ <ul>
384
+ <li>Item one</li>
385
+ <li>Item two</li>
386
+ <li>Item three</li>
387
+ <li>Item four</li>
388
+ </ul>
389
+ </div>
390
+
391
+ <div class="card">
392
+ <div class="card-header">
393
+ <span class="card-dot muted"></span>
394
+ <h3>Card Title 3</h3>
395
+ </div>
396
+ <ul>
397
+ <li>Item one</li>
398
+ <li>Item two</li>
399
+ <li>Item three</li>
400
+ <li>Item four</li>
401
+ </ul>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Footer -->
406
+ <div class="footer">
407
+ <span>[Project Name] · Architecture Overview</span>
408
+ <span>[Date]</span>
409
+ </div>
410
+
411
+ </div>
412
+ </body>
413
+ </html>