scrum-skills 0.3.2 → 0.3.3

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 (384) hide show
  1. package/.agents/skills/diagram-design/LICENSE +4 -0
  2. package/.agents/skills/diagram-design/SKILL.md +413 -0
  3. package/.agents/skills/diagram-design/UPSTREAM.json +76 -0
  4. package/.agents/skills/diagram-design/UPSTREAM.md +23 -0
  5. package/.agents/skills/diagram-design/assets/example-architecture-containment.html +205 -0
  6. package/.agents/skills/diagram-design/assets/example-architecture-delta.html +193 -0
  7. package/.agents/skills/diagram-design/assets/example-architecture.html +183 -0
  8. package/.agents/skills/diagram-design/assets/example-axonometric-plan-campus.html +108 -0
  9. package/.agents/skills/diagram-design/assets/example-axonometric-plan-coffee-shop.html +121 -0
  10. package/.agents/skills/diagram-design/assets/example-axonometric-plan-warehouse.html +127 -0
  11. package/.agents/skills/diagram-design/assets/example-axonometric-plan.html +114 -0
  12. package/.agents/skills/diagram-design/assets/example-bar.html +129 -0
  13. package/.agents/skills/diagram-design/assets/example-beeswarm.html +384 -0
  14. package/.agents/skills/diagram-design/assets/example-box-plot.html +127 -0
  15. package/.agents/skills/diagram-design/assets/example-bubble.html +147 -0
  16. package/.agents/skills/diagram-design/assets/example-bump.html +142 -0
  17. package/.agents/skills/diagram-design/assets/example-data-flow.html +143 -0
  18. package/.agents/skills/diagram-design/assets/example-datalake.html +269 -0
  19. package/.agents/skills/diagram-design/assets/example-db-schema.html +302 -0
  20. package/.agents/skills/diagram-design/assets/example-dependency.html +224 -0
  21. package/.agents/skills/diagram-design/assets/example-deployment.html +190 -0
  22. package/.agents/skills/diagram-design/assets/example-dp-integration.html +81 -0
  23. package/.agents/skills/diagram-design/assets/example-dp-security-matrix.html +88 -0
  24. package/.agents/skills/diagram-design/assets/example-er.html +202 -0
  25. package/.agents/skills/diagram-design/assets/example-exploded-ai-stack.html +85 -0
  26. package/.agents/skills/diagram-design/assets/example-exploded-keyboard.html +84 -0
  27. package/.agents/skills/diagram-design/assets/example-exploded-phone.html +83 -0
  28. package/.agents/skills/diagram-design/assets/example-exploded-unboxing.html +84 -0
  29. package/.agents/skills/diagram-design/assets/example-exploded.html +83 -0
  30. package/.agents/skills/diagram-design/assets/example-fishbone.html +152 -0
  31. package/.agents/skills/diagram-design/assets/example-flowchart.html +163 -0
  32. package/.agents/skills/diagram-design/assets/example-gantt.html +137 -0
  33. package/.agents/skills/diagram-design/assets/example-heatmap.html +224 -0
  34. package/.agents/skills/diagram-design/assets/example-high-level-vertical.html +325 -0
  35. package/.agents/skills/diagram-design/assets/example-high-level.html +301 -0
  36. package/.agents/skills/diagram-design/assets/example-import-drawio.html +185 -0
  37. package/.agents/skills/diagram-design/assets/example-import-excalidraw.html +70 -0
  38. package/.agents/skills/diagram-design/assets/example-import-mermaid.html +70 -0
  39. package/.agents/skills/diagram-design/assets/example-it-state.html +128 -0
  40. package/.agents/skills/diagram-design/assets/example-journey.html +148 -0
  41. package/.agents/skills/diagram-design/assets/example-kanban.html +174 -0
  42. package/.agents/skills/diagram-design/assets/example-layers.html +123 -0
  43. package/.agents/skills/diagram-design/assets/example-line.html +111 -0
  44. package/.agents/skills/diagram-design/assets/example-loop.html +100 -0
  45. package/.agents/skills/diagram-design/assets/example-marimekko.html +148 -0
  46. package/.agents/skills/diagram-design/assets/example-medallion.html +159 -0
  47. package/.agents/skills/diagram-design/assets/example-nested.html +136 -0
  48. package/.agents/skills/diagram-design/assets/example-org-chart.html +45 -0
  49. package/.agents/skills/diagram-design/assets/example-polar.html +116 -0
  50. package/.agents/skills/diagram-design/assets/example-process.html +64 -0
  51. package/.agents/skills/diagram-design/assets/example-pyramid.html +119 -0
  52. package/.agents/skills/diagram-design/assets/example-quadrant-consultant.html +166 -0
  53. package/.agents/skills/diagram-design/assets/example-quadrant.html +135 -0
  54. package/.agents/skills/diagram-design/assets/example-radar.html +139 -0
  55. package/.agents/skills/diagram-design/assets/example-ridgeline.html +104 -0
  56. package/.agents/skills/diagram-design/assets/example-sankey.html +150 -0
  57. package/.agents/skills/diagram-design/assets/example-scatter.html +141 -0
  58. package/.agents/skills/diagram-design/assets/example-sequence-oauth.html +227 -0
  59. package/.agents/skills/diagram-design/assets/example-sequence.html +222 -0
  60. package/.agents/skills/diagram-design/assets/example-service-blueprint.html +185 -0
  61. package/.agents/skills/diagram-design/assets/example-slopegraph.html +119 -0
  62. package/.agents/skills/diagram-design/assets/example-state-lifecycle.html +92 -0
  63. package/.agents/skills/diagram-design/assets/example-state.html +147 -0
  64. package/.agents/skills/diagram-design/assets/example-story-map.html +184 -0
  65. package/.agents/skills/diagram-design/assets/example-streamgraph.html +99 -0
  66. package/.agents/skills/diagram-design/assets/example-swimlane.html +172 -0
  67. package/.agents/skills/diagram-design/assets/example-timeline.html +135 -0
  68. package/.agents/skills/diagram-design/assets/example-tree-block-decomposition.html +151 -0
  69. package/.agents/skills/diagram-design/assets/example-tree.html +173 -0
  70. package/.agents/skills/diagram-design/assets/example-treemap.html +107 -0
  71. package/.agents/skills/diagram-design/assets/example-uml-class.html +188 -0
  72. package/.agents/skills/diagram-design/assets/example-venn.html +110 -0
  73. package/.agents/skills/diagram-design/assets/example-wardley.html +153 -0
  74. package/.agents/skills/diagram-design/assets/example-waterfall.html +129 -0
  75. package/.agents/skills/diagram-design/assets/template-dark.html +99 -0
  76. package/.agents/skills/diagram-design/assets/template-full.html +421 -0
  77. package/.agents/skills/diagram-design/assets/template-motion.html +448 -0
  78. package/.agents/skills/diagram-design/assets/template-terminal.html +188 -0
  79. package/.agents/skills/diagram-design/assets/template.html +100 -0
  80. package/.agents/skills/diagram-design/references/animation.md +143 -0
  81. package/.agents/skills/diagram-design/references/export-registry.md +78 -0
  82. package/.agents/skills/diagram-design/references/export.md +376 -0
  83. package/.agents/skills/diagram-design/references/import-drawio.md +181 -0
  84. package/.agents/skills/diagram-design/references/import-excalidraw.md +130 -0
  85. package/.agents/skills/diagram-design/references/import-mermaid.md +137 -0
  86. package/.agents/skills/diagram-design/references/layout-budget.md +97 -0
  87. package/.agents/skills/diagram-design/references/onboarding.md +368 -0
  88. package/.agents/skills/diagram-design/references/output-spec.md +277 -0
  89. package/.agents/skills/diagram-design/references/primitive-annotation.md +36 -0
  90. package/.agents/skills/diagram-design/references/primitive-icons.md +827 -0
  91. package/.agents/skills/diagram-design/references/primitive-sketchy.md +43 -0
  92. package/.agents/skills/diagram-design/references/primitive-terminal.md +76 -0
  93. package/.agents/skills/diagram-design/references/primitives-core.md +146 -0
  94. package/.agents/skills/diagram-design/references/profiles.md +183 -0
  95. package/.agents/skills/diagram-design/references/semantic-patterns.md +154 -0
  96. package/.agents/skills/diagram-design/references/style-guide.md +236 -0
  97. package/.agents/skills/diagram-design/references/style-vivid.md +148 -0
  98. package/.agents/skills/diagram-design/references/type-architecture-delta.md +143 -0
  99. package/.agents/skills/diagram-design/references/type-architecture.md +117 -0
  100. package/.agents/skills/diagram-design/references/type-axonometric-plan.md +83 -0
  101. package/.agents/skills/diagram-design/references/type-bar.md +108 -0
  102. package/.agents/skills/diagram-design/references/type-data-flow.md +371 -0
  103. package/.agents/skills/diagram-design/references/type-db-schema.md +48 -0
  104. package/.agents/skills/diagram-design/references/type-dependency.md +44 -0
  105. package/.agents/skills/diagram-design/references/type-deployment.md +45 -0
  106. package/.agents/skills/diagram-design/references/type-dp-integration.md +407 -0
  107. package/.agents/skills/diagram-design/references/type-dp-security-matrix.md +379 -0
  108. package/.agents/skills/diagram-design/references/type-er.md +25 -0
  109. package/.agents/skills/diagram-design/references/type-exploded.md +115 -0
  110. package/.agents/skills/diagram-design/references/type-fishbone.md +75 -0
  111. package/.agents/skills/diagram-design/references/type-flowchart.md +23 -0
  112. package/.agents/skills/diagram-design/references/type-gantt.md +45 -0
  113. package/.agents/skills/diagram-design/references/type-heatmap.md +80 -0
  114. package/.agents/skills/diagram-design/references/type-high-level.md +470 -0
  115. package/.agents/skills/diagram-design/references/type-it-state.md +468 -0
  116. package/.agents/skills/diagram-design/references/type-journey.md +55 -0
  117. package/.agents/skills/diagram-design/references/type-kanban.md +49 -0
  118. package/.agents/skills/diagram-design/references/type-layers.md +26 -0
  119. package/.agents/skills/diagram-design/references/type-line.md +337 -0
  120. package/.agents/skills/diagram-design/references/type-loop.md +223 -0
  121. package/.agents/skills/diagram-design/references/type-medallion.md +356 -0
  122. package/.agents/skills/diagram-design/references/type-nested.md +22 -0
  123. package/.agents/skills/diagram-design/references/type-org-chart.md +44 -0
  124. package/.agents/skills/diagram-design/references/type-polar.md +136 -0
  125. package/.agents/skills/diagram-design/references/type-process.md +490 -0
  126. package/.agents/skills/diagram-design/references/type-pyramid.md +33 -0
  127. package/.agents/skills/diagram-design/references/type-quadrant.md +81 -0
  128. package/.agents/skills/diagram-design/references/type-radar.md +82 -0
  129. package/.agents/skills/diagram-design/references/type-sankey.md +75 -0
  130. package/.agents/skills/diagram-design/references/type-scatter.md +276 -0
  131. package/.agents/skills/diagram-design/references/type-sequence.md +130 -0
  132. package/.agents/skills/diagram-design/references/type-service-blueprint.md +103 -0
  133. package/.agents/skills/diagram-design/references/type-state.md +30 -0
  134. package/.agents/skills/diagram-design/references/type-story-map.md +46 -0
  135. package/.agents/skills/diagram-design/references/type-swimlane.md +22 -0
  136. package/.agents/skills/diagram-design/references/type-timeline.md +20 -0
  137. package/.agents/skills/diagram-design/references/type-tree.md +24 -0
  138. package/.agents/skills/diagram-design/references/type-treemap.md +137 -0
  139. package/.agents/skills/diagram-design/references/type-uml-class.md +65 -0
  140. package/.agents/skills/diagram-design/references/type-venn.md +26 -0
  141. package/.agents/skills/diagram-design/references/type-wardley.md +39 -0
  142. package/.agents/skills/diagram-design/references/type-waterfall.md +75 -0
  143. package/.agents/skills/scrum-meta/SKILL.md +36 -36
  144. package/.agents/skills/scrum-planning/SKILL.md +61 -61
  145. package/.agents/skills/scrum-planning/references/schema.md +384 -336
  146. package/.agents/skills/scrum-report/SKILL.md +42 -42
  147. package/.agents/skills/scrum-sprint/SKILL.md +49 -49
  148. package/.agents/skills/scrum-tdd/SKILL.md +140 -127
  149. package/README.md +224 -201
  150. package/assets/board/200.html +1 -1
  151. package/assets/board/404.html +1 -1
  152. package/assets/board/_nuxt/1XlYaCp9.js +1 -0
  153. package/assets/board/_nuxt/4gQF_HS3.js +1 -0
  154. package/assets/board/_nuxt/5okfNy5D.js +1 -0
  155. package/assets/board/_nuxt/{Bb3Limos.js → B0C2jsdk.js} +1 -1
  156. package/assets/board/_nuxt/B1j6UC4U.js +1 -0
  157. package/assets/board/_nuxt/B3LKy6o2.js +1 -0
  158. package/assets/board/_nuxt/BAQQngAq.js +13 -0
  159. package/assets/board/_nuxt/BE6t7Q2m.js +1 -0
  160. package/assets/board/_nuxt/BLvbupFS.js +1 -0
  161. package/assets/board/_nuxt/BQgzP7ur.js +1 -0
  162. package/assets/board/_nuxt/BRZIF_wo.js +1 -0
  163. package/assets/board/_nuxt/BW3xJdEx.js +1 -0
  164. package/assets/board/_nuxt/{Cm9lkUvP.js → BY36DFyj.js} +1 -1
  165. package/assets/board/_nuxt/BZlZD94i.js +1 -0
  166. package/assets/board/_nuxt/BZvXNwev.js +3 -0
  167. package/assets/board/_nuxt/BbxmvdIF.js +1 -0
  168. package/assets/board/_nuxt/BiWrMOsL.js +1 -0
  169. package/assets/board/_nuxt/BizDeOK5.js +1 -0
  170. package/assets/board/_nuxt/BkcaOYQ_.js +95 -0
  171. package/assets/board/_nuxt/BkoKCNUY.js +1 -0
  172. package/assets/board/_nuxt/BlKmZhhF.js +1 -0
  173. package/assets/board/_nuxt/BmBpmU73.js +1 -0
  174. package/assets/board/_nuxt/BrWE0up6.js +1 -0
  175. package/assets/board/_nuxt/Bs52qkgk.js +1 -0
  176. package/assets/board/_nuxt/BtzUbHO_.js +1 -0
  177. package/assets/board/_nuxt/BuBzMkFZ.js +1 -0
  178. package/assets/board/_nuxt/Bubk0xn-.js +1 -0
  179. package/assets/board/_nuxt/BxuBMtk_.js +3 -0
  180. package/assets/board/_nuxt/By1KXXLR.js +1 -0
  181. package/assets/board/_nuxt/BygIGL69.js +2 -0
  182. package/assets/board/_nuxt/C1iO5KH3.js +1 -0
  183. package/assets/board/_nuxt/C2YPmTzt.js +1 -0
  184. package/assets/board/_nuxt/C3SpAhCW.js +1 -0
  185. package/assets/board/_nuxt/C3ZRWz5L.js +1 -0
  186. package/assets/board/_nuxt/C4WdPP6K.js +1 -0
  187. package/assets/board/_nuxt/C6o03JHe.js +1 -0
  188. package/assets/board/_nuxt/C8qB5llI.js +1 -0
  189. package/assets/board/_nuxt/C9MgRdhu.js +1 -0
  190. package/assets/board/_nuxt/CCA81-4P.js +1 -0
  191. package/assets/board/_nuxt/{D2O8Q8x9.js → CFCM18fF.js} +1 -1
  192. package/assets/board/_nuxt/CGXljzd_.js +1 -0
  193. package/assets/board/_nuxt/CI0scS-N.js +1 -0
  194. package/assets/board/_nuxt/CJs9B42o.js +1 -0
  195. package/assets/board/_nuxt/COecDWbb.js +1 -0
  196. package/assets/board/_nuxt/COmtTtfB.js +1 -0
  197. package/assets/board/_nuxt/CPYm4J_K.js +1 -0
  198. package/assets/board/_nuxt/CReA4TEB.js +3 -0
  199. package/assets/board/_nuxt/CXG7GZes.js +1 -0
  200. package/assets/board/_nuxt/CYGiZn-X.js +1 -0
  201. package/assets/board/_nuxt/CaE8VlUp.js +1 -0
  202. package/assets/board/_nuxt/CcGiNUgA.js +1 -0
  203. package/assets/board/_nuxt/Ccgv3lDj.js +1 -0
  204. package/assets/board/_nuxt/CdPGFZyy.js +1 -0
  205. package/assets/board/_nuxt/{DfR3IZN_.js → Cdf_T8Xa.js} +1 -1
  206. package/assets/board/_nuxt/CgQ30j_6.js +1 -0
  207. package/assets/board/_nuxt/ChUHb39z.js +1 -0
  208. package/assets/board/_nuxt/Ck0-FqVI.js +1 -0
  209. package/assets/board/_nuxt/CkWKLtjO.js +1 -0
  210. package/assets/board/_nuxt/Cq7hsCKB.js +1 -0
  211. package/assets/board/_nuxt/CtFknnHZ.js +1 -0
  212. package/assets/board/_nuxt/D166WVUG.js +1 -0
  213. package/assets/board/_nuxt/D4Dpzo9e.js +1 -0
  214. package/assets/board/_nuxt/D5i92OZO.js +1 -0
  215. package/assets/board/_nuxt/D6dUp4Nm.js +9 -0
  216. package/assets/board/_nuxt/DFQDFspC.js +1 -0
  217. package/assets/board/_nuxt/DHX2tw9J.js +1 -0
  218. package/assets/board/_nuxt/DJM7u8P3.js +1 -0
  219. package/assets/board/_nuxt/{BPTrRhcw.js → DLr85ebo.js} +1 -1
  220. package/assets/board/_nuxt/DOMM1wfl.js +1 -0
  221. package/assets/board/_nuxt/DU6ArlUN.js +1 -0
  222. package/assets/board/_nuxt/{B_SlFcWp.js → DUgGsde6.js} +1 -1
  223. package/assets/board/_nuxt/DV4ti-Pq.js +1 -0
  224. package/assets/board/_nuxt/DZ--fXuU.js +1 -0
  225. package/assets/board/_nuxt/D_ct-Stz.js +2 -0
  226. package/assets/board/_nuxt/DbWAComO.js +1 -0
  227. package/assets/board/_nuxt/DbwlcHAt.js +1 -0
  228. package/assets/board/_nuxt/DjzLR9Bl.js +1 -0
  229. package/assets/board/_nuxt/Dki9VkAL.js +3 -0
  230. package/assets/board/_nuxt/DlNJhOoc.js +1 -0
  231. package/assets/board/_nuxt/DqG7CtD4.js +1 -0
  232. package/assets/board/_nuxt/DqUSsCJ2.js +1 -0
  233. package/assets/board/_nuxt/Du2F4WXh.js +1 -0
  234. package/assets/board/_nuxt/DuRiEXn4.js +1 -0
  235. package/assets/board/_nuxt/DxBwVNyP.js +2 -0
  236. package/assets/board/_nuxt/DzmVW5-D.js +1 -0
  237. package/assets/board/_nuxt/I-sGtDIB.js +6 -0
  238. package/assets/board/_nuxt/JU9-x68N.js +1 -0
  239. package/assets/board/_nuxt/Lozm7hhE.js +1 -0
  240. package/assets/board/_nuxt/MMsTMkcB.js +1 -0
  241. package/assets/board/_nuxt/MS7CGmCB.js +1 -0
  242. package/assets/board/_nuxt/OKKaKILz.js +1 -0
  243. package/assets/board/_nuxt/{Csqgy925.js → P6qlvBHA.js} +1 -1
  244. package/assets/board/_nuxt/SrNUvNwO.js +1 -0
  245. package/assets/board/_nuxt/{DSaWoFHS.js → SywdkA98.js} +1 -1
  246. package/assets/board/_nuxt/TBIRpVLG.js +1 -0
  247. package/assets/board/_nuxt/TlTrMIMm.js +1 -0
  248. package/assets/board/_nuxt/Zv9-SOQF.js +1 -0
  249. package/assets/board/_nuxt/_id_.ItzoSaBL.css +1 -0
  250. package/assets/board/_nuxt/builds/latest.json +1 -1
  251. package/assets/board/_nuxt/builds/meta/2218461a-f45b-41d6-ae44-b0d2332a9511.json +1 -0
  252. package/assets/board/_nuxt/burndown.CT8fx1Ge.css +1 -0
  253. package/assets/board/_nuxt/diagrams.D1ybqBem.css +1 -0
  254. package/assets/board/_nuxt/{entry.CKHePurH.css → entry.BCuHiFgF.css} +1 -1
  255. package/assets/board/_nuxt/epics.CUeDIEa0.css +1 -0
  256. package/assets/board/_nuxt/error-404.Y9imKiDC.css +1 -0
  257. package/assets/board/_nuxt/error-500.DufSBGVC.css +1 -0
  258. package/assets/board/_nuxt/gantt.CiC2Ts1t.css +1 -0
  259. package/assets/board/_nuxt/jbri6q1p.js +1 -0
  260. package/assets/board/_nuxt/last-change.C05Vc3BF.css +1 -0
  261. package/assets/board/_nuxt/milestones.Civ3sMiQ.css +1 -0
  262. package/assets/board/_nuxt/oSJF4yHw.js +1 -0
  263. package/assets/board/_nuxt/pages.BshWbOyo.css +1 -0
  264. package/assets/board/_nuxt/q_8bxRMt.js +1 -0
  265. package/assets/board/_nuxt/tests.Ci9fBCka.css +1 -0
  266. package/assets/board/burndown/index.html +1 -1
  267. package/assets/board/diagrams/index.html +1 -0
  268. package/assets/board/epics/index.html +1 -1
  269. package/assets/board/favicon.svg +16 -16
  270. package/assets/board/gantt/index.html +1 -1
  271. package/assets/board/index.html +1 -1
  272. package/assets/board/last-change/index.html +1 -1
  273. package/assets/board/milestones/index.html +1 -1
  274. package/assets/board/tests/index.html +1 -1
  275. package/bin/scrum-skills.mjs +204 -191
  276. package/docs/ai-assistant-guide.md +1008 -1008
  277. package/package.json +42 -41
  278. package/templates/AGENTS.md +84 -74
  279. package/tools/agile-tools.mjs +510 -510
  280. package/tools/ai.mjs +464 -464
  281. package/tools/diagram-import.mjs +238 -0
  282. package/tools/diagram-lint.mjs +518 -0
  283. package/tools/diagram.mjs +299 -0
  284. package/tools/git-commit.mjs +216 -216
  285. package/tools/last-change.mjs +326 -326
  286. package/tools/projects.mjs +240 -215
  287. package/tools/serve.mjs +180 -154
  288. package/tools/validate.mjs +781 -664
  289. package/assets/board/_nuxt/1eqboJxR.js +0 -1
  290. package/assets/board/_nuxt/2K7ag6ES.js +0 -1
  291. package/assets/board/_nuxt/51OWHj8c.js +0 -2
  292. package/assets/board/_nuxt/6gFtTBwm.js +0 -1
  293. package/assets/board/_nuxt/B3jkABw9.js +0 -1
  294. package/assets/board/_nuxt/B5n2_jZN.js +0 -1
  295. package/assets/board/_nuxt/BDK2Hj7B.js +0 -1
  296. package/assets/board/_nuxt/BDcnzXHq.js +0 -1
  297. package/assets/board/_nuxt/BaG8y0Wt.js +0 -1
  298. package/assets/board/_nuxt/BbwJq5pb.js +0 -1
  299. package/assets/board/_nuxt/BgLeKwx0.js +0 -1
  300. package/assets/board/_nuxt/Bi9Axj3V.js +0 -1
  301. package/assets/board/_nuxt/BmxvtaMq.js +0 -1
  302. package/assets/board/_nuxt/BodFvto3.js +0 -1
  303. package/assets/board/_nuxt/BpWeHLuN.js +0 -1
  304. package/assets/board/_nuxt/BuOKDFiJ.js +0 -1
  305. package/assets/board/_nuxt/C40iTe-x.js +0 -1
  306. package/assets/board/_nuxt/C7K0R7F-.js +0 -2
  307. package/assets/board/_nuxt/C8vL692X.js +0 -1
  308. package/assets/board/_nuxt/C9StZL3D.js +0 -3
  309. package/assets/board/_nuxt/CGI_ZV79.js +0 -1
  310. package/assets/board/_nuxt/CJ2mz0WY.js +0 -1
  311. package/assets/board/_nuxt/CJMBJQuf.js +0 -1
  312. package/assets/board/_nuxt/CK-lOYG9.js +0 -1
  313. package/assets/board/_nuxt/CK9_veoz.js +0 -1
  314. package/assets/board/_nuxt/CLBcBrYf.js +0 -1
  315. package/assets/board/_nuxt/CMUi2-Lj.js +0 -1
  316. package/assets/board/_nuxt/COf6E6h4.js +0 -1
  317. package/assets/board/_nuxt/CPCUMJnF.js +0 -1
  318. package/assets/board/_nuxt/CPcKlmSm.js +0 -1
  319. package/assets/board/_nuxt/CQTvWh4i.js +0 -1
  320. package/assets/board/_nuxt/CSEEUF8S.js +0 -1
  321. package/assets/board/_nuxt/CSSb154I.js +0 -13
  322. package/assets/board/_nuxt/CgDTd7jS.js +0 -1
  323. package/assets/board/_nuxt/ChG76uh9.js +0 -1
  324. package/assets/board/_nuxt/Ci0qbkgh.js +0 -1
  325. package/assets/board/_nuxt/CqoQ__I_.js +0 -1
  326. package/assets/board/_nuxt/CuJUHLl8.js +0 -1
  327. package/assets/board/_nuxt/CvLiA4_O.js +0 -1
  328. package/assets/board/_nuxt/Cvs12oA0.js +0 -3
  329. package/assets/board/_nuxt/CyEXFe3V.js +0 -1
  330. package/assets/board/_nuxt/Cz6rZcLK.js +0 -1
  331. package/assets/board/_nuxt/D2FhHl1o.js +0 -1
  332. package/assets/board/_nuxt/D3YCAmfu.js +0 -1
  333. package/assets/board/_nuxt/D5CE81jK.js +0 -1
  334. package/assets/board/_nuxt/D75vbfSb.js +0 -1
  335. package/assets/board/_nuxt/D99LbGfb.js +0 -9
  336. package/assets/board/_nuxt/DEfLc7p3.js +0 -6
  337. package/assets/board/_nuxt/DF-nsa1Z.js +0 -1
  338. package/assets/board/_nuxt/DIc8yx98.js +0 -1
  339. package/assets/board/_nuxt/DLkAKotw.js +0 -1
  340. package/assets/board/_nuxt/DRPlYvb3.js +0 -1
  341. package/assets/board/_nuxt/DRlQgul3.js +0 -1
  342. package/assets/board/_nuxt/DSLbmoWa.js +0 -1
  343. package/assets/board/_nuxt/DWO9c9yp.js +0 -1
  344. package/assets/board/_nuxt/DZo3dYLJ.js +0 -3
  345. package/assets/board/_nuxt/D_S6N7_b.js +0 -1
  346. package/assets/board/_nuxt/DajA-Tkt.js +0 -1
  347. package/assets/board/_nuxt/DbHiyab-.js +0 -1
  348. package/assets/board/_nuxt/Dc7Ql6eE.js +0 -1
  349. package/assets/board/_nuxt/Dd9ZukPU.js +0 -1
  350. package/assets/board/_nuxt/Dg2LiqmN.js +0 -1
  351. package/assets/board/_nuxt/DhuleNnm.js +0 -1
  352. package/assets/board/_nuxt/DkI1Qxpp.js +0 -95
  353. package/assets/board/_nuxt/DnDHGSYI.js +0 -1
  354. package/assets/board/_nuxt/DpXJ_tCU.js +0 -1
  355. package/assets/board/_nuxt/DqZgF3hU.js +0 -1
  356. package/assets/board/_nuxt/DqcxvfbD.js +0 -1
  357. package/assets/board/_nuxt/DsA2lVci.js +0 -1
  358. package/assets/board/_nuxt/Dtsa-1NS.js +0 -1
  359. package/assets/board/_nuxt/Du91iq0p.js +0 -1
  360. package/assets/board/_nuxt/Dx1wcYFo.js +0 -1
  361. package/assets/board/_nuxt/EYTShbt4.js +0 -1
  362. package/assets/board/_nuxt/MaXJprwN.js +0 -1
  363. package/assets/board/_nuxt/P9x67aq2.js +0 -1
  364. package/assets/board/_nuxt/S08nFESZ.js +0 -3
  365. package/assets/board/_nuxt/V0uynWE2.js +0 -1
  366. package/assets/board/_nuxt/Vo4wMbnS.js +0 -1
  367. package/assets/board/_nuxt/ZVTqot-_.js +0 -1
  368. package/assets/board/_nuxt/ZngEd3HB.js +0 -1
  369. package/assets/board/_nuxt/_id_.B2NDKSlX.css +0 -1
  370. package/assets/board/_nuxt/assMu_Wn.js +0 -1
  371. package/assets/board/_nuxt/builds/meta/8e23aec9-5b67-4569-b8bf-d4f07e50ffdf.json +0 -1
  372. package/assets/board/_nuxt/burndown.Do6IbM6o.css +0 -1
  373. package/assets/board/_nuxt/epics.Dmessplu.css +0 -1
  374. package/assets/board/_nuxt/error-404.BFmXOnCT.css +0 -1
  375. package/assets/board/_nuxt/error-500.BZ-DdjQ6.css +0 -1
  376. package/assets/board/_nuxt/gantt.Dmp00GUo.css +0 -1
  377. package/assets/board/_nuxt/last-change.1Su4GrCN.css +0 -1
  378. package/assets/board/_nuxt/milestones.U0xKCsEo.css +0 -1
  379. package/assets/board/_nuxt/pages.Dbj2IVk8.css +0 -1
  380. package/assets/board/_nuxt/rlePnzpc.js +0 -1
  381. package/assets/board/_nuxt/tests.dXlUX16A.css +0 -1
  382. package/assets/board/_nuxt/uKzCKCTq.js +0 -1
  383. package/assets/board/_nuxt/vwxaNGfc.js +0 -1
  384. package/assets/board/_nuxt/yh6sf_D5.js +0 -1
@@ -0,0 +1,448 @@
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>Motion diagram template</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&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&family=Noto+Sans+TC:wght@400;500;600&family=Noto+Serif+TC:wght@400&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; }
10
+ :root {
11
+ --color-paper: #f5f5f5;
12
+ --color-ink: #2d3142;
13
+ --color-muted: #4f5d75;
14
+ --color-soft: #5a6580;
15
+ --color-accent: #bf4520;
16
+ --color-rule: rgba(45,49,66,0.12);
17
+ --font-sans: 'Geist', system-ui, sans-serif;
18
+ --font-serif: 'Instrument Serif', 'Noto Serif', 'Noto Serif KR', serif;
19
+ --font-mono: 'Geist Mono', ui-monospace, monospace;
20
+ --motion-fast: 160ms;
21
+ --motion-step: 480ms;
22
+ --motion-hold: 720ms;
23
+ --motion-total: 3600ms;
24
+ --motion-ease: cubic-bezier(.2,.8,.2,1);
25
+ }
26
+ body {
27
+ margin: 0;
28
+ min-height: 100vh;
29
+ display: grid;
30
+ place-items: center;
31
+ padding: 48px 32px;
32
+ color: var(--color-ink);
33
+ background: var(--color-paper);
34
+ font-family: var(--font-sans);
35
+ }
36
+ [data-motion-root] { width: min(100%, 1000px); }
37
+ .eyebrow {
38
+ margin: 0 0 8px;
39
+ color: var(--color-muted);
40
+ font: 500 12px/1.4 var(--font-mono);
41
+ letter-spacing: .18em;
42
+ text-transform: uppercase;
43
+ }
44
+ h1 { margin: 0 0 24px; font: 400 32px/1.15 var(--font-serif); }
45
+ svg { display: block; width: 100%; min-width: 960px; }
46
+ /* The SVG holds its readable width (min-width == the viewBox width, so the
47
+ type ramp is never silently scaled down). This wrapper lets a narrow
48
+ screen scroll the diagram instead of the whole page. body is a centred
49
+ grid, so the root needs max-width/min-width to stop the grid item from
50
+ sizing itself to the SVG's max-content width. */
51
+ [data-motion-root] { max-width: 100%; min-width: 0; }
52
+ .diagram-container { width: 100%; overflow-x: auto; }
53
+
54
+ /* Static source is complete. Only an initialized enhancement hides items. */
55
+ .motion-ready [data-motion-item] {
56
+ opacity: .12;
57
+ transform: translateY(8px);
58
+ transform-box: fill-box;
59
+ transform-origin: center;
60
+ transition: opacity var(--motion-step) var(--motion-ease),
61
+ transform var(--motion-step) var(--motion-ease);
62
+ }
63
+ .motion-ready [data-motion-item].is-visible,
64
+ .motion-ready[data-frame="end"] [data-motion-item],
65
+ .motion-ready[data-frame="static"] [data-motion-item] {
66
+ opacity: 1;
67
+ transform: none;
68
+ }
69
+ .draw-path {
70
+ fill: none;
71
+ stroke: var(--color-accent);
72
+ stroke-width: 3;
73
+ stroke-dasharray: 1;
74
+ stroke-dashoffset: 1;
75
+ pointer-events: none;
76
+ }
77
+ .motion-ready .draw-path.is-visible {
78
+ animation: draw-path var(--motion-step) linear forwards;
79
+ }
80
+ .flow-token { opacity: 0; pointer-events: none; }
81
+ .motion-ready.is-playing .flow-token.is-visible {
82
+ opacity: 1;
83
+ animation: token-flow 3.2s linear 1 forwards;
84
+ }
85
+ .motion-ready[data-motion-mode="loop"].is-playing .flow-token.is-visible {
86
+ animation-iteration-count: infinite;
87
+ }
88
+ @keyframes draw-path { to { stroke-dashoffset: 0; } }
89
+ @keyframes token-flow {
90
+ 0% { transform: translateX(0); }
91
+ 100% { transform: translateX(240px); }
92
+ }
93
+
94
+ [data-motion-controls] {
95
+ display: none;
96
+ align-items: center;
97
+ flex-wrap: wrap;
98
+ gap: 8px;
99
+ margin-top: 16px;
100
+ padding-top: 16px;
101
+ border-top: 1px solid var(--color-rule);
102
+ }
103
+ .motion-ready [data-motion-controls] { display: flex; }
104
+ [data-motion-controls][hidden] { display: none !important; }
105
+ [data-motion-controls] button {
106
+ min-width: 44px;
107
+ min-height: 44px;
108
+ padding: 8px 12px;
109
+ border: 1px solid var(--color-muted);
110
+ border-radius: 4px;
111
+ color: var(--color-ink);
112
+ background: var(--color-paper);
113
+ font: 600 12px/1 var(--font-sans);
114
+ cursor: pointer;
115
+ }
116
+ [data-motion-controls] button:hover { border-color: var(--color-accent); }
117
+ [data-motion-controls] button:focus-visible {
118
+ outline: 3px solid var(--color-accent);
119
+ outline-offset: 2px;
120
+ }
121
+ [data-motion-controls] button:disabled { cursor: not-allowed; opacity: .45; }
122
+ [data-motion-status-visible] {
123
+ margin-left: auto;
124
+ color: var(--color-muted);
125
+ font: 500 12px/1.4 var(--font-mono);
126
+ }
127
+ .sr-only {
128
+ position: absolute;
129
+ width: 1px;
130
+ height: 1px;
131
+ padding: 0;
132
+ margin: -1px;
133
+ overflow: hidden;
134
+ clip: rect(0,0,0,0);
135
+ white-space: nowrap;
136
+ border: 0;
137
+ }
138
+ noscript p {
139
+ margin: 12px 0 0;
140
+ color: var(--color-muted);
141
+ font: 500 12px/1.4 var(--font-mono);
142
+ }
143
+
144
+ html[data-motion="static"] [data-motion-controls],
145
+ html[data-motion="static"] [data-motion-decorative] { display: none !important; }
146
+ html[data-motion="static"] [data-motion-item] {
147
+ opacity: 1 !important;
148
+ transform: none !important;
149
+ animation: none !important;
150
+ transition: none !important;
151
+ }
152
+ html[data-motion="step"] [data-motion-controls],
153
+ html[data-motion="step"] [data-motion-decorative] { display: none !important; }
154
+ html[data-motion="step"] [data-motion-item] {
155
+ animation: none !important;
156
+ transition: none !important;
157
+ }
158
+ @media (prefers-reduced-motion: reduce) {
159
+ *, *::before, *::after {
160
+ animation-duration: .001ms !important;
161
+ animation-iteration-count: 1 !important;
162
+ scroll-behavior: auto !important;
163
+ transition-duration: .001ms !important;
164
+ }
165
+ [data-motion-item] { opacity: 1 !important; transform: none !important; }
166
+ [data-motion-decorative] { display: none !important; }
167
+ [data-motion-controls] { display: none !important; }
168
+ }
169
+ @media print {
170
+ /* Paper has no scrollbar, so the local scroller would clip instead of
171
+ scroll. Let the diagram scale down to the sheet: smaller but whole
172
+ beats sharp but cut off. */
173
+ .diagram-container { overflow-x: visible; }
174
+ svg { min-width: 0; }
175
+ [data-motion-controls], [data-motion-decorative] { display: none !important; }
176
+ [data-motion-item] {
177
+ opacity: 1 !important;
178
+ transform: none !important;
179
+ animation: none !important;
180
+ transition: none !important;
181
+ }
182
+ }
183
+ </style>
184
+ </head>
185
+ <body>
186
+ <!-- Replace template-motion in IDs and prose when copying this file. -->
187
+ <main data-motion-root data-motion-mode="step" data-step-count="5" data-step-current="5" data-frame="static" data-static-frame="complete">
188
+ <p class="eyebrow">Process · Optional motion</p>
189
+ <h1>Request evaluation</h1>
190
+
191
+ <div class="diagram-container">
192
+ <svg viewBox="0 0 960 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="template-motion-title template-motion-desc">
193
+ <title id="template-motion-title">Request evaluation</title>
194
+ <desc id="template-motion-desc">A request is validated, evaluated against a policy, queued, and appended to an audit log.</desc>
195
+ <defs>
196
+ <marker id="template-motion-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
+ </defs>
200
+ <rect width="960" height="480" fill="#f5f5f5"/>
201
+
202
+ <!-- Persistent connectors carry the static meaning. -->
203
+ <path d="M248 180 H356" fill="none" stroke="#4f5d75" marker-end="url(#template-motion-arrow)"/>
204
+ <path d="M556 180 H664" fill="none" stroke="#4f5d75" marker-end="url(#template-motion-arrow)"/>
205
+ <path d="M764 232 V328" fill="none" stroke="#4f5d75" marker-end="url(#template-motion-arrow)"/>
206
+
207
+ <g data-motion-item data-step="1" aria-label="Step 1: Request received">
208
+ <rect x="48" y="128" width="200" height="104" rx="8" fill="#f5f5f5" stroke="#2d3142"/>
209
+ <text x="148" y="172" text-anchor="middle" fill="#2d3142" font-family="Geist, sans-serif" font-size="16" font-weight="600">Request</text>
210
+ <text x="148" y="196" text-anchor="middle" fill="#4f5d75" font-family="Geist Mono, monospace" font-size="12">fields complete</text>
211
+ </g>
212
+ <g data-motion-item data-step="2" aria-label="Step 2: Policy passed">
213
+ <rect x="356" y="128" width="200" height="104" rx="8" fill="rgba(191,69,32,0.08)" stroke="#bf4520"/>
214
+ <text x="456" y="168" text-anchor="middle" fill="#2d3142" font-family="Geist, sans-serif" font-size="16" font-weight="600">Policy</text>
215
+ <text x="456" y="196" text-anchor="middle" fill="#4f5d75" font-family="Geist Mono, monospace" font-size="12">✓ PASS · rule 2</text>
216
+ </g>
217
+ <g data-motion-item data-step="3" aria-label="Step 3: Three items queued">
218
+ <rect x="664" y="128" width="200" height="104" rx="8" fill="#f5f5f5" stroke="#2d3142"/>
219
+ <text x="764" y="164" text-anchor="middle" fill="#2d3142" font-family="Geist, sans-serif" font-size="16" font-weight="600">Queue</text>
220
+ <rect x="700" y="184" width="16" height="16" fill="#4f5d75"/><rect x="724" y="184" width="16" height="16" fill="#4f5d75"/><rect x="748" y="184" width="16" height="16" fill="#4f5d75"/>
221
+ <text x="796" y="196" fill="#4f5d75" font-family="Geist Mono, monospace" font-size="12">3 queued</text>
222
+ </g>
223
+ <g data-motion-item data-step="4" aria-label="Step 4: Audit entry appended">
224
+ <rect x="664" y="328" width="200" height="88" rx="8" fill="#f5f5f5" stroke="#2d3142"/>
225
+ <text x="764" y="364" text-anchor="middle" fill="#2d3142" font-family="Geist, sans-serif" font-size="16" font-weight="600">Audit log</text>
226
+ <text x="764" y="388" text-anchor="middle" fill="#4f5d75" font-family="Geist Mono, monospace" font-size="12">0042 · appended</text>
227
+ </g>
228
+ <g data-motion-item data-step="5" aria-label="Step 5: Evaluation complete">
229
+ <text x="48" y="376" fill="#2d3142" font-family="Geist, sans-serif" font-size="16" font-weight="600">Outcome: accepted and recorded</text>
230
+ </g>
231
+
232
+ <!-- Decorative duplicate path and token never carry unique meaning. -->
233
+ <path data-motion-item data-step="2" data-motion-decorative aria-hidden="true" focusable="false" pathLength="1" class="draw-path" d="M248 180 H356"/>
234
+ <circle data-motion-item data-step="3" data-motion-decorative aria-hidden="true" focusable="false" class="flow-token" cx="556" cy="180" r="6" fill="#bf4520"/>
235
+ </svg>
236
+ </div>
237
+
238
+ <div data-motion-controls role="group" aria-label="Diagram playback controls">
239
+ <button type="button" data-motion-action="prev">Previous</button>
240
+ <button type="button" data-motion-action="play" aria-pressed="false">Play</button>
241
+ <button type="button" data-motion-action="pause" aria-pressed="true">Pause</button>
242
+ <button type="button" data-motion-action="next">Next</button>
243
+ <button type="button" data-motion-action="replay">Replay</button>
244
+ <span class="keyboard-help">←/→ step · Space play/pause · R replay · Home/End jump</span>
245
+ <span data-motion-status-visible aria-hidden="true">Step <span data-motion-step-label>5</span> of 5</span>
246
+ </div>
247
+ <p class="sr-only" data-motion-status role="status" aria-live="polite" aria-atomic="true"></p>
248
+ <noscript><p>Animation controls require JavaScript. The complete final diagram is shown above.</p></noscript>
249
+ </main>
250
+
251
+ <script data-diagram-controls>
252
+ (() => {
253
+ const params = new URLSearchParams(location.search);
254
+ const staticOverride = params.get('motion') === 'static' || document.documentElement.dataset.motion === 'static';
255
+ const requestedStep = params.get('step');
256
+ const reduce = matchMedia('(prefers-reduced-motion: reduce)');
257
+ document.fonts.ready.then(() => { document.documentElement.dataset.fontsReady = 'true'; });
258
+
259
+ document.querySelectorAll('[data-motion-root]').forEach((root) => {
260
+ const count = Number(root.dataset.stepCount);
261
+ const hold = parseFloat(getComputedStyle(root).getPropertyValue('--motion-hold')) || 720;
262
+ const parsedStep = requestedStep !== null && /^\d+$/.test(requestedStep) ? Number(requestedStep) : null;
263
+ const exactStep = params.get('motion') === 'step' && Number.isSafeInteger(parsedStep) && parsedStep >= 0 && parsedStep <= count ? parsedStep : null;
264
+ const items = [...root.querySelectorAll('[data-motion-item]')];
265
+ const labels = Array.from({ length: count + 1 }, (_, index) => index === 0
266
+ ? 'Ready'
267
+ : items.filter((item) => !item.hasAttribute('data-motion-decorative') && Number(item.dataset.step) === index)
268
+ .map((item) => item.getAttribute('aria-label')).join('; '));
269
+ const controls = root.querySelector('[data-motion-controls]');
270
+ const status = root.querySelector('[data-motion-status]');
271
+ const visibleStep = root.querySelector('[data-motion-step-label]');
272
+ let step = count;
273
+ let timer = 0;
274
+ let playing = false;
275
+ let stepBeforeReduce = 0;
276
+ let resumeAfterReduce = root.dataset.motionMode === 'reveal';
277
+
278
+ const buttons = (action) => controls.querySelector(`[data-motion-action="${action}"]`);
279
+ const clearClock = () => { window.clearTimeout(timer); timer = 0; };
280
+ const announce = () => { status.textContent = `Step ${step} of ${count}: ${labels[step] || 'Complete'}`; };
281
+ const setControlsAvailable = (available) => {
282
+ controls.hidden = !available;
283
+ controls.setAttribute('aria-hidden', String(!available));
284
+ controls.dataset.playbackDisabled = String(!available);
285
+ controls.querySelectorAll('button').forEach((control) => { control.disabled = !available; });
286
+ };
287
+
288
+ function render(next, userInitiated = false) {
289
+ step = Math.max(0, Math.min(count, next));
290
+ root.dataset.stepCurrent = String(step);
291
+ root.dataset.frame = step === count ? 'end' : step === 0 ? 'start' : 'step';
292
+ items.forEach((item) => {
293
+ const itemStep = Number(item.dataset.step);
294
+ item.classList.toggle('is-visible', itemStep <= step);
295
+ item.classList.toggle('is-current', itemStep === step);
296
+ });
297
+ if (visibleStep) visibleStep.textContent = String(step);
298
+ const unavailable = controls.dataset.playbackDisabled === 'true';
299
+ buttons('prev').disabled = unavailable || step === 0;
300
+ buttons('next').disabled = unavailable || step === count;
301
+ if (userInitiated) announce();
302
+ }
303
+
304
+ function pause(userInitiated = false) {
305
+ clearClock();
306
+ playing = false;
307
+ root.classList.remove('is-playing');
308
+ buttons('play').setAttribute('aria-pressed', 'false');
309
+ buttons('pause').setAttribute('aria-pressed', 'true');
310
+ if (userInitiated) status.textContent = `Paused at step ${step} of ${count}`;
311
+ }
312
+
313
+ function finish() {
314
+ pause(false);
315
+ root.dataset.frame = 'end';
316
+ status.textContent = `Complete · step ${count} of ${count}`;
317
+ }
318
+
319
+ function tick() {
320
+ if (!playing) return;
321
+ if (step >= count) { finish(); return; }
322
+ render(step + 1, false);
323
+ if (step >= count) { finish(); return; }
324
+ timer = window.setTimeout(tick, hold);
325
+ }
326
+
327
+ function play(fromStart = false, userInitiated = false) {
328
+ clearClock();
329
+ if (fromStart || step >= count) render(0, userInitiated);
330
+ playing = true;
331
+ root.classList.add('is-playing');
332
+ buttons('play').setAttribute('aria-pressed', 'true');
333
+ buttons('pause').setAttribute('aria-pressed', 'false');
334
+ timer = window.setTimeout(tick, hold);
335
+ }
336
+
337
+ controls.addEventListener('click', (event) => {
338
+ const button = event.target.closest('[data-motion-action]');
339
+ if (!button) return;
340
+ const action = button.dataset.motionAction;
341
+ if (action === 'play') play(false, true);
342
+ if (action === 'pause') pause(true);
343
+ if (action === 'replay') play(true, true);
344
+ if (action === 'prev') { pause(false); render(step - 1, true); }
345
+ if (action === 'next') { pause(false); render(step + 1, true); }
346
+ });
347
+
348
+ root.addEventListener('keydown', (event) => {
349
+ if (event.target.matches('input, textarea, select, a[href]')) return;
350
+ const keys = { ArrowLeft: step - 1, ArrowRight: step + 1, Home: 0, End: count };
351
+ if (event.code === 'Space' && !event.target.closest('button')) {
352
+ event.preventDefault();
353
+ playing ? pause(true) : play(false, true);
354
+ return;
355
+ }
356
+ if (!event.ctrlKey && !event.metaKey && !event.altKey && event.key.toLowerCase() === 'r') {
357
+ event.preventDefault();
358
+ play(true, true);
359
+ return;
360
+ }
361
+ if (!(event.key in keys)) return;
362
+ event.preventDefault();
363
+ pause(false);
364
+ render(keys[event.key], true);
365
+ });
366
+
367
+ document.addEventListener('visibilitychange', () => {
368
+ if (document.visibilityState === 'hidden' && playing) pause(false);
369
+ });
370
+ reduce.addEventListener('change', (event) => {
371
+ if (event.matches && root.dataset.motionState !== 'reduced') {
372
+ stepBeforeReduce = step;
373
+ resumeAfterReduce = playing;
374
+ }
375
+ pause(false);
376
+ if (event.matches) {
377
+ setControlsAvailable(false);
378
+ render(count, false);
379
+ root.dataset.frame = 'static';
380
+ root.dataset.motionState = 'reduced';
381
+ status.textContent = 'Reduced motion · complete static frame · playback controls unavailable';
382
+ } else if (staticOverride || root.dataset.motionMode === 'none') {
383
+ setControlsAvailable(false);
384
+ render(count, false);
385
+ root.dataset.frame = 'static';
386
+ root.dataset.motionState = 'static';
387
+ status.textContent = 'Static frame · complete diagram · playback controls unavailable';
388
+ } else {
389
+ delete root.dataset.motionState;
390
+ if (exactStep !== null) {
391
+ setControlsAvailable(false);
392
+ render(exactStep, false);
393
+ root.dataset.frame = 'step';
394
+ root.dataset.motionState = 'test';
395
+ status.textContent = `Test frame · step ${step} of ${count} · playback controls unavailable`;
396
+ } else {
397
+ setControlsAvailable(true);
398
+ render(stepBeforeReduce, false);
399
+ status.textContent = `Ready · step ${step} of ${count}`;
400
+ if (resumeAfterReduce && root.dataset.motionMode === 'reveal') {
401
+ play(false, false);
402
+ }
403
+ }
404
+ resumeAfterReduce = false;
405
+ }
406
+ });
407
+
408
+ if (staticOverride) {
409
+ document.documentElement.dataset.motion = 'static';
410
+ pause(false);
411
+ setControlsAvailable(false);
412
+ render(count, false);
413
+ root.dataset.frame = 'static';
414
+ root.dataset.motionState = 'static';
415
+ status.textContent = 'Static frame · complete diagram · playback controls unavailable';
416
+ } else if (reduce.matches || root.dataset.motionMode === 'none') {
417
+ pause(false);
418
+ setControlsAvailable(false);
419
+ render(count, false);
420
+ root.dataset.frame = 'static';
421
+ root.dataset.motionState = reduce.matches ? 'reduced' : 'static';
422
+ status.textContent = reduce.matches
423
+ ? 'Reduced motion · complete static frame · playback controls unavailable'
424
+ : 'Static frame · complete diagram · playback controls unavailable';
425
+ } else if (exactStep !== null) {
426
+ document.documentElement.dataset.motion = 'step';
427
+ pause(false);
428
+ setControlsAvailable(false);
429
+ render(exactStep, false);
430
+ root.dataset.frame = 'step';
431
+ root.dataset.motionState = 'test';
432
+ status.textContent = `Test frame · step ${step} of ${count} · playback controls unavailable`;
433
+ } else if (root.dataset.motionMode === 'reveal') {
434
+ setControlsAvailable(true);
435
+ render(0, false);
436
+ play(false, false);
437
+ } else {
438
+ pause(false);
439
+ setControlsAvailable(true);
440
+ render(0, false);
441
+ status.textContent = `Ready · step 0 of ${count}`;
442
+ }
443
+ root.classList.add('motion-ready');
444
+ });
445
+ })();
446
+ </script>
447
+ </body>
448
+ </html>
@@ -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>Diagram</title>
7
+ <link
8
+ href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap"
9
+ rel="stylesheet"
10
+ />
11
+ <style>
12
+ *,
13
+ *::before,
14
+ *::after {
15
+ box-sizing: border-box;
16
+ margin: 0;
17
+ padding: 0;
18
+ }
19
+ :root {
20
+ --color-page: #0a0a0a;
21
+ --color-paper: #141414;
22
+ --color-bar: #1b1b1b;
23
+ --color-border: #2b2b2b;
24
+ --color-ink: #f5f5f5;
25
+ --color-muted: #9a9a9a;
26
+ --color-soft: #5c5c5c;
27
+ --color-accent: #ff5a36;
28
+ --color-accent-tint: rgba(255, 90, 54, 0.12);
29
+ --font-mono: "Geist Mono", ui-monospace, monospace;
30
+ }
31
+
32
+ body {
33
+ font-family: var(--font-mono);
34
+ background: var(--color-page);
35
+ min-height: 100vh;
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ padding: 3rem 2rem;
40
+ }
41
+
42
+ .terminal {
43
+ width: 100%;
44
+ max-width: 1200px;
45
+ background: var(--color-paper);
46
+ border: 1px solid var(--color-border);
47
+ border-radius: 12px;
48
+ overflow: hidden;
49
+ }
50
+
51
+ .titlebar {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 8px;
55
+ padding: 12px 16px;
56
+ background: var(--color-bar);
57
+ border-bottom: 1px solid var(--color-border);
58
+ }
59
+
60
+ .dot {
61
+ width: 10px;
62
+ height: 10px;
63
+ border-radius: 50%;
64
+ background: var(--color-soft);
65
+ }
66
+ .dot.accent {
67
+ background: var(--color-accent);
68
+ } /* exactly one of the three dots gets this */
69
+
70
+ .titlebar-name {
71
+ flex: 1;
72
+ text-align: center;
73
+ color: var(--color-muted);
74
+ font-size: 0.7rem;
75
+ font-weight: 500;
76
+ letter-spacing: 0.04em;
77
+ margin-right: 46px; /* offsets the three dots so the name optically centers */
78
+ }
79
+
80
+ .frame {
81
+ padding: 2.25rem 2.5rem 2.5rem;
82
+ }
83
+
84
+ .prompt {
85
+ display: flex;
86
+ gap: 0.6em;
87
+ margin-bottom: 0.9rem;
88
+ color: var(--color-muted);
89
+ font-size: 0.8rem;
90
+ font-weight: 500;
91
+ }
92
+ .prompt .sign {
93
+ color: var(--color-accent);
94
+ }
95
+
96
+ h1 {
97
+ font-family: var(--font-mono);
98
+ font-size: clamp(1.5rem, 2.2vw + 0.8rem, 2.05rem);
99
+ font-weight: 700;
100
+ letter-spacing: -0.01em;
101
+ line-height: 1.2;
102
+ color: var(--color-ink);
103
+ margin-bottom: 1.5rem;
104
+ }
105
+ h1::before {
106
+ content: "# ";
107
+ color: var(--color-soft);
108
+ }
109
+
110
+ svg {
111
+ width: 100%;
112
+ min-width: 1000px;
113
+ display: block;
114
+ }
115
+
116
+ /* .terminal is overflow:hidden for the window chrome, so without this
117
+ wrapper a narrow screen clips the diagram with no way to reach it:
118
+ no scrollbar, no page overflow, nothing for a linter to see. */
119
+ .diagram-container {
120
+ width: 100%;
121
+ overflow-x: auto;
122
+ }
123
+
124
+ @media print {
125
+ .diagram-container { overflow-x: visible; }
126
+ svg { min-width: 0; }
127
+ }
128
+ </style>
129
+ </head>
130
+ <body>
131
+ <div class="terminal">
132
+ <div class="titlebar">
133
+ <div class="dot accent"></div>
134
+ <div class="dot"></div>
135
+ <div class="dot"></div>
136
+ <div class="titlebar-name">[file.sh] — [diagram-slug]</div>
137
+ </div>
138
+ <main class="frame">
139
+ <p class="prompt">
140
+ <span class="sign">$</span> [command that "generated" this]
141
+ </p>
142
+ <h1>[Diagram title]</h1>
143
+
144
+ <!-- Replace [diagram-slug] with a unique slug for this diagram before export. -->
145
+ <div class="diagram-container">
146
+ <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">
147
+ <title id="[diagram-slug]-title">[Diagram title]</title>
148
+ <desc id="[diagram-slug]-desc">[One sentence describing what the diagram shows]</desc>
149
+ <defs>
150
+ <marker
151
+ id="arrow"
152
+ markerWidth="8"
153
+ markerHeight="6"
154
+ refX="7"
155
+ refY="3"
156
+ orient="auto"
157
+ >
158
+ <polygon points="0 0, 8 3, 0 6" fill="#9a9a9a" />
159
+ </marker>
160
+ <marker
161
+ id="arrow-accent"
162
+ markerWidth="8"
163
+ markerHeight="6"
164
+ refX="7"
165
+ refY="3"
166
+ orient="auto"
167
+ >
168
+ <polygon points="0 0, 8 3, 0 6" fill="#ff5a36" />
169
+ </marker>
170
+
171
+ <!-- OPTIONAL: dot-pattern background. Uncomment and add <rect fill="url(#dots)"/> after the paper rect to enable. -->
172
+ <!--
173
+ <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
174
+ <circle cx="1" cy="1" r="0.9" fill="rgba(255,255,255,0.08)"/>
175
+ </pattern>
176
+ --></defs>
177
+
178
+ <rect width="100%" height="100%" fill="#141414" />
179
+
180
+ <!-- Draw arrows first, then nodes. Replace with your content.
181
+ Text sizes run ~1-2px above the default scale: node-name 14px,
182
+ sublabel/arrow-label 9-10px, hub label 18px. See primitive-terminal.md. -->
183
+ </svg>
184
+ </div>
185
+ </main>
186
+ </div>
187
+ </body>
188
+ </html>