stream_weaver 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (381) hide show
  1. checksums.yaml +7 -0
  2. data/.beads/.gitignore +77 -0
  3. data/.beads/README.md +81 -0
  4. data/.beads/config.yaml +54 -0
  5. data/.beads/metadata.json +7 -0
  6. data/.rspec +3 -0
  7. data/AGENTS.md +91 -0
  8. data/CHANGELOG.md +294 -0
  9. data/CLAUDE.md +67 -0
  10. data/LICENSE.txt +21 -0
  11. data/README.md +565 -0
  12. data/Rakefile +13 -0
  13. data/assets/streamweaver-hero.jpg +0 -0
  14. data/bench/baselines/ledger.rb +58 -0
  15. data/bench/baselines/warroom.rb +51 -0
  16. data/bench/fixtures/ledger.rb +76 -0
  17. data/bench/fixtures/warroom.rb +60 -0
  18. data/bench/results/6daf8b8.md +102 -0
  19. data/bench/results/c8d749b.md +102 -0
  20. data/bench/results/eb06ab9.md +102 -0
  21. data/bench/run.rb +151 -0
  22. data/bench/support.rb +84 -0
  23. data/copy_this/dto_run_sample_run_7631.html +220 -0
  24. data/docs/SERVICE_MODE.md +302 -0
  25. data/docs/architecture/how_streamweaver_works.md +772 -0
  26. data/docs/blog/2026-01-16-streamweaver-introduction.md +515 -0
  27. data/docs/bug-2026-08-31-canvas-bridge-socket-collision.md +83 -0
  28. data/docs/canvas-ipc-session-summary.md +127 -0
  29. data/docs/canvas-panel-workflow.md +172 -0
  30. data/docs/canvas-read.md +147 -0
  31. data/docs/canvas-roadmap.md +275 -0
  32. data/docs/case-studies/2026-09-03-didx-canvas-read-shelf.md +147 -0
  33. data/docs/claude-code-companion-skill-spec.md +567 -0
  34. data/docs/components_reference.md +1223 -0
  35. data/docs/crud-patterns.md +265 -0
  36. data/docs/endpoints.md +122 -0
  37. data/docs/for_llms.md +1 -0
  38. data/docs/form-patterns.md +165 -0
  39. data/docs/frontend-only.md +169 -0
  40. data/docs/html-artifact-audit.md +238 -0
  41. data/docs/ideas/2025-01-01-as-a-service.md +203 -0
  42. data/docs/ideas/2026-01-16-charm-tui-exploration.md +542 -0
  43. data/docs/ideas/2026-08-27-static-doc-shelf-export.md +153 -0
  44. data/docs/ideas/dhh-review-future-refactors.md +142 -0
  45. data/docs/opal-jamstack.md +47 -0
  46. data/docs/opal-npm-direction.md +184 -0
  47. data/docs/opal-spike-findings.md +194 -0
  48. data/docs/plans/2025-12-16-form-blocks-design.md +124 -0
  49. data/docs/plans/2025-12-30-examples-browser-design.md +152 -0
  50. data/docs/plans/2026-01-02-charts-design.md +288 -0
  51. data/docs/plans/2026-01-10-canvas-ipc-design.md +247 -0
  52. data/docs/plans/2026-01-19-cabinet-control-components.md +176 -0
  53. data/docs/plans/2026-01-26-gem-release-and-panel.md +140 -0
  54. data/docs/plans/canvas-claude-project-design.md +238 -0
  55. data/docs/plans/canvas-doc-location-and-discovery.md +32 -0
  56. data/docs/plans/org-doc-preview-surfaces.md +293 -0
  57. data/docs/plans/shadcn-polish-plan.md +417 -0
  58. data/docs/porting-artifacts.md +252 -0
  59. data/docs/reference/agent-skills-comparison.md +369 -0
  60. data/docs/reference/travel-state-prd.artifact.html +780 -0
  61. data/docs/research/2026-08-17-hotwire-alike-landscape.md +268 -0
  62. data/docs/research/2026-08-17-hotwire-concept-map.md +404 -0
  63. data/docs/research/2026-08-22-lazy-fragments-trigger-decision.md +246 -0
  64. data/docs/research/2026-08-22-learnhotwire-syllabus-coverage.md +239 -0
  65. data/docs/research/frontend-only-matrix.md +278 -0
  66. data/docs/research/streamweaver-way-spike-findings.md +529 -0
  67. data/docs/resource-dsl.md +342 -0
  68. data/docs/routing.md +302 -0
  69. data/docs/ruby-ui-comparison.md +319 -0
  70. data/docs/shared-dsl-fragments.md +356 -0
  71. data/docs/streamweaver-for-ai-agents.md +401 -0
  72. data/docs/streamweaver-frontend-vision.md +123 -0
  73. data/docs/streamweaver_canvas/glimmer_initial_final_layer.rb +77 -0
  74. data/docs/streamweaver_canvas/save_example.rb +9 -0
  75. data/docs/templates.md +213 -0
  76. data/docs/testing.md +155 -0
  77. data/docs/theming-hooks.md +281 -0
  78. data/docs/tutorials/the-streamweaver-way.md +882 -0
  79. data/docs/university/capability-inventory.md +137 -0
  80. data/docs/university/dependency-survey.md +114 -0
  81. data/docs/university/design-spec.md +217 -0
  82. data/docs/university/mockups/code-block-doc-theme-dark.png +0 -0
  83. data/docs/university/mockups/code-block-doc-theme-light.png +0 -0
  84. data/docs/university/mockups/course-list-dark.png +0 -0
  85. data/docs/university/mockups/course-list-light.png +0 -0
  86. data/docs/university/mockups/course_canvas_mockup.rb +741 -0
  87. data/docs/university/mockups/step-screen-dark.png +0 -0
  88. data/docs/university/mockups/step-screen-light.png +0 -0
  89. data/docs/university/roadmap.md +72 -0
  90. data/docs/university/send-to-coworker.md +77 -0
  91. data/docs/university/worker-session-mining.md +109 -0
  92. data/docs/visual/browser-rendering-spike.md +173 -0
  93. data/docs/visual/builder-visual-plan-analysis.md +378 -0
  94. data/docs/visual/sw-plan-format-exploration.md +511 -0
  95. data/docs/visual/sw-plan-rendering-deep-dive.md +453 -0
  96. data/docs/visual-skills/PROGRESS.md +60 -0
  97. data/docs/visual-skills/SESSION-CONTEXT.md +207 -0
  98. data/docs/visual-skills/analysis/components.md +317 -0
  99. data/docs/visual-skills/analysis/overlap.md +360 -0
  100. data/docs/visual-skills/analysis/pi-design-deck.md +1102 -0
  101. data/docs/visual-skills/analysis/streamweaver-inventory.md +93 -0
  102. data/docs/visual-skills/analysis/unified-specs.feature +1003 -0
  103. data/docs/visual-skills/analysis/visual-explainer.md +964 -0
  104. data/docs/visual-skills/blog/blog-series-outline.md +39 -0
  105. data/docs/visual-skills/blog/token-efficiency.md +73 -0
  106. data/docs/visual-skills/design/architecture.md +1725 -0
  107. data/docs/visual-skills/design/codex-review.md +340 -0
  108. data/docs/visual-skills/design/dhh-review.md +209 -0
  109. data/docs/visual-skills/design/evolution.md +100 -0
  110. data/docs/visual-skills/design/gemini-review.md +55 -0
  111. data/docs/visual-skills/design/review-synthesis.md +149 -0
  112. data/docs/visual-skills/implementation/STATE.md +22 -0
  113. data/docs/visual-skills/implementation/plan.md +347 -0
  114. data/docs/visual-skills/implementation/spike-findings.md +237 -0
  115. data/docs/visual-skills/implementation/tasks.md +702 -0
  116. data/docs/visual-skills/lessons-learned/process.md +145 -0
  117. data/examples/README.md +96 -0
  118. data/examples/advanced/all_components.rb +177 -0
  119. data/examples/advanced/examples_browser.rb +394 -0
  120. data/examples/advanced/teachables_browser.rb +261 -0
  121. data/examples/advanced/theme_tweaker.rb +366 -0
  122. data/examples/advanced/tutorial.rb +1528 -0
  123. data/examples/agentic/agentic_form.rb +30 -0
  124. data/examples/agentic/agentic_form_autoclose.rb +30 -0
  125. data/examples/agentic/cultivation_tracker.rb +69 -0
  126. data/examples/basic/hello_world.rb +22 -0
  127. data/examples/basic/opal_tabs_table.rb +44 -0
  128. data/examples/basic/todo_list.rb +39 -0
  129. data/examples/button_loading_test.rb +36 -0
  130. data/examples/canvas/mermaid_canvas_demo.sh +151 -0
  131. data/examples/charts/bar_chart_demo.rb +57 -0
  132. data/examples/charts/line_chart_demo.rb +73 -0
  133. data/examples/charts/pie_area_demo.rb +87 -0
  134. data/examples/charts/stacked_bar_chart_demo.rb +69 -0
  135. data/examples/claude_code/README.md +85 -0
  136. data/examples/claude_code/codebreaker/.claude/commands/infiltrate.md +632 -0
  137. data/examples/claude_code/codebreaker/.claude/settings.json +11 -0
  138. data/examples/claude_code/codebreaker/.claude/settings.local.json +17 -0
  139. data/examples/claude_code/codebreaker/.claude/skills/infiltrate.md +0 -0
  140. data/examples/claude_code/codebreaker/README.md +213 -0
  141. data/examples/claude_code/tutorial/.claude/commands/learn.md +453 -0
  142. data/examples/claude_code/tutorial/README.md +102 -0
  143. data/examples/claude_code/verification_flow/.claude/commands/verify.md +171 -0
  144. data/examples/claude_code/verification_flow/README.md +126 -0
  145. data/examples/components/annotated_code_demo.rb +54 -0
  146. data/examples/components/callout_demo.rb +33 -0
  147. data/examples/components/checkbox_group_demo.rb +46 -0
  148. data/examples/components/design_review.css +468 -0
  149. data/examples/components/design_review_demo.rb +44 -0
  150. data/examples/components/design_review_dsl.rb +300 -0
  151. data/examples/components/diff_block_demo.rb +112 -0
  152. data/examples/components/events_demo.rb +184 -0
  153. data/examples/components/form_demo.rb +62 -0
  154. data/examples/components/lesson_demo.rb +53 -0
  155. data/examples/components/markdown_demo.rb +110 -0
  156. data/examples/components/mermaid_demo.rb +166 -0
  157. data/examples/components/pareto_set.rb +64 -0
  158. data/examples/components/prd_demo.rb +21 -0
  159. data/examples/components/prd_dsl.rb +385 -0
  160. data/examples/components/quiz_demo.rb +47 -0
  161. data/examples/components/run_viewer_demo.rb +100 -0
  162. data/examples/components/score_and_collapsible_demo.rb +82 -0
  163. data/examples/components/select_stale_value_smoke_test.rb +39 -0
  164. data/examples/components/table_demo.rb +247 -0
  165. data/examples/components/timer_with_state_demo.rb +58 -0
  166. data/examples/components/todo_due_dates.rb +63 -0
  167. data/examples/components/uat_gaps_demo.rb +112 -0
  168. data/examples/dashboard/feed_simulator.rb +60 -0
  169. data/examples/dashboard/live_dashboard.rb +80 -0
  170. data/examples/dashboard_components.rb +108 -0
  171. data/examples/deferred_fragments_demo.rb +62 -0
  172. data/examples/generate_more_spike/README.md +63 -0
  173. data/examples/generate_more_spike/app.rb +441 -0
  174. data/examples/git_health.sh +401 -0
  175. data/examples/layout/layout_components_demo.rb +174 -0
  176. data/examples/layout/modal_demo.rb +215 -0
  177. data/examples/layout/navigation_demo.rb +227 -0
  178. data/examples/layout/route_tabs_demo.rb +52 -0
  179. data/examples/layout/routing_demo.rb +52 -0
  180. data/examples/layout/scroll_box_demo.rb +154 -0
  181. data/examples/lazy_fragments_demo.rb +151 -0
  182. data/examples/my_todos/README.md +29 -0
  183. data/examples/my_todos/my_todos.rb +312 -0
  184. data/examples/my_todos/store.rb +86 -0
  185. data/examples/opal/reactive_demo.rb +62 -0
  186. data/examples/opal/scenarios/s1_counter.rb +15 -0
  187. data/examples/opal/scenarios/s2_search_filter.rb +17 -0
  188. data/examples/opal/scenarios/s3_sibling_tabs.rb +25 -0
  189. data/examples/opal/scenarios/s4_shopping_cart.rb +34 -0
  190. data/examples/opal/scenarios/s5_watch.rb +39 -0
  191. data/examples/opal/scenarios/s6_on_start.rb +20 -0
  192. data/examples/opal/scenarios/s7_wizard.rb +33 -0
  193. data/examples/opal/scenarios/s8_loan_calculator.rb +21 -0
  194. data/examples/opal/scenarios/s9_dashboard.rb +27 -0
  195. data/examples/operations_dashboard_demo.rb +167 -0
  196. data/examples/panel_demo.sh +447 -0
  197. data/examples/parity/assets/tyrion_slice.css +86 -0
  198. data/examples/parity/rivet_people_slice.rb +182 -0
  199. data/examples/parity/tyrion_components.css +777 -0
  200. data/examples/parity/tyrion_warroom_components.rb +414 -0
  201. data/examples/parity/tyrion_warroom_slice.rb +549 -0
  202. data/examples/puma_dev/README.md +124 -0
  203. data/examples/puma_dev/config.ru +34 -0
  204. data/examples/puma_dev/standalone_app.rb +34 -0
  205. data/examples/scaffolding/blog.rb +49 -0
  206. data/examples/scaffolding/utf_lite.rb +105 -0
  207. data/examples/styling/feedback_demo.rb +229 -0
  208. data/examples/styling/style_showcase.rb +172 -0
  209. data/examples/styling/theme_demo.rb +508 -0
  210. data/examples/timer_health_checker.rb +111 -0
  211. data/examples/timer_showcase.rb +131 -0
  212. data/examples/tutorials/render_markdown.rb +112 -0
  213. data/examples/tutorials/streamweaver_way_tutorial.rb +44 -0
  214. data/examples/tutorials/tutorial_content.rb +1082 -0
  215. data/examples/visual_skills/design_deck_demo.rb +314 -0
  216. data/examples/visual_skills/explainer_demo.rb +499 -0
  217. data/exe/streamweaver +9 -0
  218. data/gsd/ROADMAP-1.0.md +167 -0
  219. data/gsd/STATE.md +13 -0
  220. data/gsd/research/market-positioning-research.md +139 -0
  221. data/gsd/research/production-patterns-research.md +270 -0
  222. data/gsd/research/repo-audit-1.0.md +274 -0
  223. data/lib/stream_weaver/action_token.rb +58 -0
  224. data/lib/stream_weaver/adapter/alpinejs.rb +8249 -0
  225. data/lib/stream_weaver/adapter/base.rb +591 -0
  226. data/lib/stream_weaver/adapter/opal.rb +334 -0
  227. data/lib/stream_weaver/adapter/static.rb +1118 -0
  228. data/lib/stream_weaver/admin.rb +176 -0
  229. data/lib/stream_weaver/app.rb +1821 -0
  230. data/lib/stream_weaver/assets/js/sw-copy.js +50 -0
  231. data/lib/stream_weaver/assets/js/sw-heredoc-rewrite.js +68 -0
  232. data/lib/stream_weaver/assets/js/sw-keyboard.js +165 -0
  233. data/lib/stream_weaver/assets/js/sw-mermaid-zoom.js +621 -0
  234. data/lib/stream_weaver/assets/js/sw-route-tabs.js +53 -0
  235. data/lib/stream_weaver/assets/js/sw-sidebar-toc.js +116 -0
  236. data/lib/stream_weaver/assets/js/sw-slide-nav.js +103 -0
  237. data/lib/stream_weaver/canvas/bridge.rb +239 -0
  238. data/lib/stream_weaver/canvas/bridge_server.rb +646 -0
  239. data/lib/stream_weaver/canvas/client.rb +298 -0
  240. data/lib/stream_weaver/canvas/doc_roots.rb +233 -0
  241. data/lib/stream_weaver/canvas/doc_store.rb +252 -0
  242. data/lib/stream_weaver/canvas/gist_publisher.rb +264 -0
  243. data/lib/stream_weaver/canvas/gist_save_handler.rb +89 -0
  244. data/lib/stream_weaver/canvas/gist_store.rb +135 -0
  245. data/lib/stream_weaver/canvas/helpers.rb +109 -0
  246. data/lib/stream_weaver/canvas/history.rb +90 -0
  247. data/lib/stream_weaver/canvas/protocol.rb +86 -0
  248. data/lib/stream_weaver/canvas/reader.rb +853 -0
  249. data/lib/stream_weaver/canvas/save_doc_widget.rb +457 -0
  250. data/lib/stream_weaver/canvas/scroll_top_hint.rb +21 -0
  251. data/lib/stream_weaver/canvas/session.rb +132 -0
  252. data/lib/stream_weaver/cli.rb +3235 -0
  253. data/lib/stream_weaver/component_assets.rb +70 -0
  254. data/lib/stream_weaver/component_registry.rb +67 -0
  255. data/lib/stream_weaver/component_renderer.rb +48 -0
  256. data/lib/stream_weaver/components/annotated_code.rb +53 -0
  257. data/lib/stream_weaver/components/api_endpoint.rb +42 -0
  258. data/lib/stream_weaver/components/callout.rb +59 -0
  259. data/lib/stream_weaver/components/chart.rb +84 -0
  260. data/lib/stream_weaver/components/code_block.rb +77 -0
  261. data/lib/stream_weaver/components/comparison.rb +39 -0
  262. data/lib/stream_weaver/components/decision.rb +38 -0
  263. data/lib/stream_weaver/components/deck/close_overlay.rb +84 -0
  264. data/lib/stream_weaver/components/deck/confirmation_bar.rb +60 -0
  265. data/lib/stream_weaver/components/deck/deck_option.rb +61 -0
  266. data/lib/stream_weaver/components/deck/deck_slide.rb +77 -0
  267. data/lib/stream_weaver/components/deck/deck_state.rb +469 -0
  268. data/lib/stream_weaver/components/deck/deck_summary.rb +73 -0
  269. data/lib/stream_weaver/components/deck/design_deck.rb +60 -0
  270. data/lib/stream_weaver/components/deck/generate_more_controls.rb +84 -0
  271. data/lib/stream_weaver/components/deck/model_selector.rb +84 -0
  272. data/lib/stream_weaver/components/deck/skeleton_placeholder.rb +36 -0
  273. data/lib/stream_weaver/components/diff_block.rb +125 -0
  274. data/lib/stream_weaver/components/doc_header.rb +57 -0
  275. data/lib/stream_weaver/components/image_block.rb +70 -0
  276. data/lib/stream_weaver/components/implementation_map.rb +33 -0
  277. data/lib/stream_weaver/components/keyboard_shortcuts.rb +94 -0
  278. data/lib/stream_weaver/components/kpi_dashboard.rb +78 -0
  279. data/lib/stream_weaver/components/mermaid.rb +79 -0
  280. data/lib/stream_weaver/components/pipeline.rb +63 -0
  281. data/lib/stream_weaver/components/sidebar_toc.rb +46 -0
  282. data/lib/stream_weaver/components/slide_container.rb +141 -0
  283. data/lib/stream_weaver/components/timeline_event.rb +58 -0
  284. data/lib/stream_weaver/components/wireframe.rb +29 -0
  285. data/lib/stream_weaver/components/wireframe_block.rb +34 -0
  286. data/lib/stream_weaver/components.rb +2711 -0
  287. data/lib/stream_weaver/css.rb +230 -0
  288. data/lib/stream_weaver/dev_fallback_overlay.rb +61 -0
  289. data/lib/stream_weaver/display_dsl.rb +1004 -0
  290. data/lib/stream_weaver/export/html_exporter.rb +478 -0
  291. data/lib/stream_weaver/feed.rb +34 -0
  292. data/lib/stream_weaver/feed_builder.rb +31 -0
  293. data/lib/stream_weaver/fonts.rb +33 -0
  294. data/lib/stream_weaver/interaction_runner.rb +487 -0
  295. data/lib/stream_weaver/iterm.rb +460 -0
  296. data/lib/stream_weaver/layout_registry.rb +92 -0
  297. data/lib/stream_weaver/opal/bridge.rb +52 -0
  298. data/lib/stream_weaver/opal/builder.rb +193 -0
  299. data/lib/stream_weaver/opal/env.rb +29 -0
  300. data/lib/stream_weaver/opal/reactive_state.rb +75 -0
  301. data/lib/stream_weaver/opal/regexp_anchor_patch.rb +62 -0
  302. data/lib/stream_weaver/opal/renderer.rb +77 -0
  303. data/lib/stream_weaver/opal/runtime.rb +250 -0
  304. data/lib/stream_weaver/opal/shell.rb +145 -0
  305. data/lib/stream_weaver/opal/string_bridge.rb +50 -0
  306. data/lib/stream_weaver/opal/stubs/diff.min.js +1 -0
  307. data/lib/stream_weaver/opal/stubs/digest.rb +15 -0
  308. data/lib/stream_weaver/opal/stubs/marked.umd.js +79 -0
  309. data/lib/stream_weaver/opal/stubs/md5.rb +3 -0
  310. data/lib/stream_weaver/opal/stubs/morphdom.min.js +775 -0
  311. data/lib/stream_weaver/opal/stubs/prism-tomorrow.min.css +1 -0
  312. data/lib/stream_weaver/opal/stubs/prism.min.js +1967 -0
  313. data/lib/stream_weaver/opal_entry.rb +136 -0
  314. data/lib/stream_weaver/org/inline.rb +95 -0
  315. data/lib/stream_weaver/org/reader.rb +561 -0
  316. data/lib/stream_weaver/org/recording_context.rb +86 -0
  317. data/lib/stream_weaver/org/source_splitter.rb +63 -0
  318. data/lib/stream_weaver/org/writer.rb +300 -0
  319. data/lib/stream_weaver/page_shell.rb +530 -0
  320. data/lib/stream_weaver/portfile.rb +79 -0
  321. data/lib/stream_weaver/pushable.rb +42 -0
  322. data/lib/stream_weaver/resource/default_views.rb +111 -0
  323. data/lib/stream_weaver/resource/field_input.rb +25 -0
  324. data/lib/stream_weaver/resource/state_keys.rb +16 -0
  325. data/lib/stream_weaver/resource/store.rb +18 -0
  326. data/lib/stream_weaver/resource.rb +104 -0
  327. data/lib/stream_weaver/server.rb +1471 -0
  328. data/lib/stream_weaver/service.rb +1240 -0
  329. data/lib/stream_weaver/service_client.rb +104 -0
  330. data/lib/stream_weaver/session_store.rb +186 -0
  331. data/lib/stream_weaver/skills/streamweaver-canvas-safe/SKILL.md +66 -0
  332. data/lib/stream_weaver/skills/streamweaver-canvas-safe/examples/canvas-safe-showcase.rb +98 -0
  333. data/lib/stream_weaver/skills/streamweaver-canvas-safe/references/actions-and-buttons.md +47 -0
  334. data/lib/stream_weaver/skills/streamweaver-canvas-safe/references/charts-and-diagrams.md +38 -0
  335. data/lib/stream_weaver/skills/streamweaver-canvas-safe/references/deck.md +32 -0
  336. data/lib/stream_weaver/skills/streamweaver-canvas-safe/references/inputs-and-forms.md +65 -0
  337. data/lib/stream_weaver/skills/streamweaver-canvas-safe/references/tabs-and-navigation.md +53 -0
  338. data/lib/stream_weaver/skills/streamweaver-doc-builder/SKILL.md +298 -0
  339. data/lib/stream_weaver/skills/streamweaver-visual-companion/SKILL.md +130 -0
  340. data/lib/stream_weaver/skills/streamweaver-visual-companion/examples/design-review-example.css +468 -0
  341. data/lib/stream_weaver/skills/streamweaver-visual-companion/examples/design-review-example.rb +39 -0
  342. data/lib/stream_weaver/skills/streamweaver-visual-companion/examples/design-review-example_dsl.rb +300 -0
  343. data/lib/stream_weaver/skills/streamweaver-visual-companion/examples/doc-parity-example.rb +24 -0
  344. data/lib/stream_weaver/skills/streamweaver-visual-companion/examples/doc-parity-example_dsl.rb +385 -0
  345. data/lib/stream_weaver/skills/streamweaver-visual-companion/references/checkpoints-and-forms.md +28 -0
  346. data/lib/stream_weaver/skills/streamweaver-visual-companion/references/cleanup-and-panel.md +44 -0
  347. data/lib/stream_weaver/skills/streamweaver-visual-companion/references/example-gallery.md +8 -0
  348. data/lib/stream_weaver/skills/streamweaver-visual-companion/references/persistence.md +58 -0
  349. data/lib/stream_weaver/skills/streamweaver-way/SKILL.md +396 -0
  350. data/lib/stream_weaver/skills/visual-plan/SKILL.md +201 -0
  351. data/lib/stream_weaver/skills/visual-recap/SKILL.md +244 -0
  352. data/lib/stream_weaver/streamer.rb +63 -0
  353. data/lib/stream_weaver/templates/choices.rb +149 -0
  354. data/lib/stream_weaver/templates/code.rb +157 -0
  355. data/lib/stream_weaver/templates/confirm.rb +110 -0
  356. data/lib/stream_weaver/templates/diff.rb +195 -0
  357. data/lib/stream_weaver/templates/info.rb +142 -0
  358. data/lib/stream_weaver/templates/table.rb +169 -0
  359. data/lib/stream_weaver/templates/wizard.rb +271 -0
  360. data/lib/stream_weaver/theme/auto_mode.rb +116 -0
  361. data/lib/stream_weaver/theme/presets.rb +555 -0
  362. data/lib/stream_weaver/theme.rb +639 -0
  363. data/lib/stream_weaver/university/canvas.rb +924 -0
  364. data/lib/stream_weaver/university/course.rb +699 -0
  365. data/lib/stream_weaver/university/demos/counter.rb +33 -0
  366. data/lib/stream_weaver/university/demos/dashboard.rb +147 -0
  367. data/lib/stream_weaver/university/demos/decision_form.rb +143 -0
  368. data/lib/stream_weaver/university/demos.rb +50 -0
  369. data/lib/stream_weaver/university/listener.rb +467 -0
  370. data/lib/stream_weaver/university/progress.rb +201 -0
  371. data/lib/stream_weaver/university/runner.rb +138 -0
  372. data/lib/stream_weaver/university/scripts/growing_doc.rb +609 -0
  373. data/lib/stream_weaver/university/scripts/growing_doc_state.rb +91 -0
  374. data/lib/stream_weaver/utils.rb +31 -0
  375. data/lib/stream_weaver/version.rb +5 -0
  376. data/lib/stream_weaver/views/canvas/reader_layout.erb +800 -0
  377. data/lib/stream_weaver/views.rb +3940 -0
  378. data/lib/stream_weaver.rb +122 -0
  379. data/llms.txt +1269 -0
  380. data/sig/stream_weaver.rbs +4 -0
  381. metadata +598 -0
@@ -0,0 +1,360 @@
1
+ # Overlap Analysis: pi-design-deck + visual-explainer
2
+
3
+ *Date: 2026-03-12*
4
+ *Purpose: Identify shared infrastructure, unique features, and code savings for StreamWeaver unification*
5
+
6
+ ---
7
+
8
+ ## 1. Shared Infrastructure
9
+
10
+ ### 1.1 Mermaid Diagram Rendering
11
+
12
+ **pi-design-deck:** Renders Mermaid blocks (`type: "mermaid"`) within option cards via Mermaid.js CDN. Supports per-block theme variable overrides. Renders inline within a card grid context. No zoom/pan controls -- diagrams are small previews within option cards.
13
+
14
+ **visual-explainer:** Extensive Mermaid integration with full zoom/pan engine (~200 lines JS). Supports +/- buttons, Ctrl/Cmd+scroll zoom, click-and-drag pan, touch pinch zoom, double-click to fit, click-to-expand in new tab. Smart fit algorithm with contain/width-priority/height-priority modes. Uses `theme: 'base'` with custom `themeVariables`. Dark mode detection at load time. Adaptive container height based on SVG dimensions. Max 10-12 nodes per diagram recommendation; hybrid CSS+Mermaid pattern for 15+ elements.
15
+
16
+ **StreamWeaver already has:** Nothing -- Mermaid rendering is listed as missing for both.
17
+
18
+ **StreamWeaver needs:** A `mermaid` component with two modes: (1) inline/compact for use within cards (deck use case), and (2) full-featured with zoom/pan/expand controls (explainer use case). Both need dark/light theme awareness. The zoom engine is ~200 lines of JS that can be packaged as a StreamWeaver JS asset.
19
+
20
+ **Estimated code savings from unification:** High. The Mermaid init, theme detection, and CDN loading are identical. The zoom engine is additive (explainer-only) but built on the same foundation. ~70% of the Mermaid code is shared.
21
+
22
+ ---
23
+
24
+ ### 1.2 Code Syntax Highlighting
25
+
26
+ **pi-design-deck:** Uses Prism.js with autoloader for language support. Code blocks (`type: "code"`) render within option cards with `lang` property. Part of the previewBlocks system.
27
+
28
+ **visual-explainer:** Uses Prism.js implicitly through code blocks in pages. `.code-block` and `.code-file` CSS components with pre-wrap styling, file headers, and scroll containers. Also has slide-specific code blocks (`.slide__code-block`) with floating filename labels.
29
+
30
+ **StreamWeaver already has:** Nothing specific to syntax highlighting. Has generic `text` and `md` (markdown) components.
31
+
32
+ **StreamWeaver needs:** A `code_block` component that wraps Prism.js: accepts code string and language, renders highlighted output. Variants: inline (within cards), standalone (with file header), and slide-mode (with floating filename). CDN loading of Prism.js + autoloader.
33
+
34
+ **Estimated code savings:** High. Prism.js loading, theme integration, and basic rendering are identical. ~80% shared.
35
+
36
+ ---
37
+
38
+ ### 1.3 Theme System (Dark/Light/Auto)
39
+
40
+ **pi-design-deck:** Three modes: dark (default), light, auto. CSS custom properties on `:root` and `[data-theme="light"]`. `data-theme` attribute on `<html>`. Configurable hotkey (parsed from "mod+shift+l"). Auto mode listens for `matchMedia` changes. Theme override stored in localStorage. `<meta name="theme-color">` updated. Also has preview palette themes (midnight-rose, slate-jade, warm-copper, ocean-cyan) and font themes for option previews.
41
+
42
+ **visual-explainer:** Auto mode by default via `prefers-color-scheme` media query. Light-first or dark-first variants. Optional manual toggle with data-theme attribute and sun/moon SVG button. CSS custom properties for all tokens (--bg, --surface, --border, --text, --text-dim, accents). Both themes must look intentional. Mermaid theme determined once at load time (static, not reactive).
43
+
44
+ **StreamWeaver already has:** Theme module with dark/light support. Theme-aware CSS styling (added for scroll_box).
45
+
46
+ **StreamWeaver needs:** Enhancement of existing theme module to support: (1) auto mode following OS preference, (2) manual toggle with keyboard shortcut, (3) localStorage persistence of override, (4) CSS custom property system matching the design token vocabulary (--bg, --surface, --border, --text, --text-dim, accent colors), (5) meta theme-color updates. The preview palette themes (deck-specific) and anti-slop color restrictions (explainer-specific) are additive.
47
+
48
+ **Estimated code savings:** Medium-high. Core theme switching logic is identical (~60% shared). Each project adds its own design tokens on top.
49
+
50
+ ---
51
+
52
+ ### 1.4 Browser Serving and Auto-Open
53
+
54
+ **pi-design-deck:** Node.js HTTP server on `127.0.0.1`, random port by default. Token-based auth via session query param. Auto-opens browser. Heartbeat watchdog. Server persists across tool re-invocations.
55
+
56
+ **visual-explainer:** No server -- writes static HTML files to `~/.agent/diagrams/` and opens via `open` (macOS) or `xdg-open` (Linux). Files served from filesystem.
57
+
58
+ **StreamWeaver already has:** Auto-port detection (scan from 4567). Auto-browser open. Puma server with Pushable streaming (SSE). Session state via cookies. Rack-based serving.
59
+
60
+ **StreamWeaver needs:** Minimal additions. The existing Puma server and auto-open cover the deck use case well. For explainer, StreamWeaver needs an HTML export mode that writes a self-contained file (see 1.6). The deck's persistent server pattern maps naturally to StreamWeaver's architecture.
61
+
62
+ **Estimated code savings:** Very high. StreamWeaver already has this. ~90% reuse.
63
+
64
+ ---
65
+
66
+ ### 1.5 Keyboard Shortcuts
67
+
68
+ **pi-design-deck:** Arrow keys (slide navigation + option focus), 1-9 (quick select), Space (select focused), Enter (select/advance/submit), Escape (cancel with confirmation), Cmd+S (save), Cmd+Shift+L (theme toggle). Context-aware: arrow keys behave differently when option cards have focus vs. no focus.
69
+
70
+ **visual-explainer:** Slide deck mode: arrows, space, page up/down, home/end for navigation. Touch swipe (>50px). Focus-aware: keyboard events suppressed when focus is inside .mermaid-wrap, .table-scroll, or .code-scroll.
71
+
72
+ **StreamWeaver already has:** Nothing specific to keyboard shortcuts.
73
+
74
+ **StreamWeaver needs:** A keyboard shortcut system/component that: (1) registers key handlers with context awareness (what element has focus), (2) supports modifier keys (Cmd/Ctrl abstraction), (3) handles conflicts between slide navigation and interactive element navigation, (4) is declarative (register shortcuts via DSL, not raw JS).
75
+
76
+ **Estimated code savings:** Medium. The underlying event listener pattern is shared, but the specific shortcuts diverge significantly. ~40% shared infrastructure, 60% app-specific bindings.
77
+
78
+ ---
79
+
80
+ ### 1.6 HTML Export (Self-Contained)
81
+
82
+ **pi-design-deck:** Export action generates standalone HTML with embedded CSS (all 4 CSS files), inlined base64 images, Mermaid CDN link, Google Fonts link. All slides visible simultaneously (no navigation). Meta chips showing deck metadata.
83
+
84
+ **visual-explainer:** Every output IS a self-contained HTML file. Inline `<style>`, optional `<script>`, CDN links for fonts/Mermaid/Chart.js. Written to `~/.agent/diagrams/`. This is the primary output format, not an export option.
85
+
86
+ **StreamWeaver already has:** Nothing -- this is a new capability. StreamWeaver currently serves live pages via Puma.
87
+
88
+ **StreamWeaver needs:** An export pipeline that serializes a StreamWeaver page into a single HTML file. Must inline all CSS, optionally inline images as base64 data URIs, preserve CDN links for external JS libraries. For deck: flatten slides into a single scrollable view. For explainer: the export IS the normal output.
89
+
90
+ **Estimated code savings:** Medium. The inlining/serialization logic is shared. Output format differs (deck flattens navigation; explainer is already flat). ~50% shared.
91
+
92
+ ---
93
+
94
+ ### 1.7 Slide/Presentation Navigation
95
+
96
+ **pi-design-deck:** Linear slide progression with Back/Next buttons. Progress bar showing position. Slides are "decision slides" (one per design dimension) plus auto-generated summary slide. Fade transitions (opacity + translateY). Slides are not scroll-snap -- they are DOM-swapped (only active slide visible).
97
+
98
+ **visual-explainer:** Scroll-snap based deck with 100dvh per slide. 10 distinct slide types (title, section divider, content, split, diagram, dashboard, table, code, quote, full-bleed). Keyboard/touch/wheel navigation. Progress bar, nav dots, slide counter. Cinematic transitions with staggered child reveals. 4 presets (Midnight Editorial, Warm Signal, Terminal Mono, Swiss Clean).
99
+
100
+ **StreamWeaver already has:** Nothing specific to slides/presentations.
101
+
102
+ **StreamWeaver needs:** Two slide systems that share a navigation abstraction: (1) Deck-style: DOM-swap with linear progression, Back/Next buttons, progress bar -- simpler, focused on decision-making. (2) Presentation-style: scroll-snap 100dvh, multiple slide types, nav dots, slide counter, cinematic transitions -- focused on content presentation. Common foundation: keyboard navigation (arrows, space), progress tracking, touch support.
103
+
104
+ **Estimated code savings:** Low-medium. The two slide paradigms are quite different (DOM-swap vs. scroll-snap). Navigation key handling shares ~30%. Progress bar is shared. ~35% overlap.
105
+
106
+ ---
107
+
108
+ ### 1.8 Responsive Layout
109
+
110
+ **pi-design-deck:** Grid columns auto-detection (1-4 based on option count). Responsive breakpoints at 1200px and 900px. CSS Grid subgrid for option card alignment. Layout toggle (1/2/3/4 columns in footer).
111
+
112
+ **visual-explainer:** Max width 1000-1400px centered. Single breakpoint at 768px. Grids collapse to single column. TOC switches from sidebar to horizontal bar at 1000px. Slides have height-based breakpoints (700px, 600px, 500px).
113
+
114
+ **StreamWeaver already has:** `grid(columns:, gap:)` component. `hstack` and `vstack` layout primitives. Card component.
115
+
116
+ **StreamWeaver needs:** Enhancement of grid component for auto-detection of column count based on child count. Responsive breakpoints. Layout toggle control. The sidebar TOC with responsive switching is explainer-specific but built on shared layout primitives.
117
+
118
+ **Estimated code savings:** Medium. Both need responsive CSS, but the specific breakpoints and layout patterns diverge. ~40% shared.
119
+
120
+ ---
121
+
122
+ ## 2. Unique to pi-design-deck
123
+
124
+ ### 2.1 Multi-Slide Option Selection with Radio Metaphor
125
+ One selection per slide enforced via `role="radiogroup"` semantics. Visual radio indicators, accent borders, checkmark badges with pop animation. Number keys 1-9 for quick selection. Selection stored in `selections[slideId] = label` map. Click anywhere on card to select.
126
+
127
+ ### 2.2 Generate-More Loop (SSE Push of New Options)
128
+ Complete agent-in-the-loop flow: user requests N more options, skeleton placeholders appear with shimmer animation, agent receives structured prompt, generates options, pushes via SSE `new-option`/`replace-options` events, client renders with entry animations. Includes regenerate-all variant. 90-second server timeout, 30-second per-option client timeout. Concurrent generation prevention.
129
+
130
+ ### 2.3 Selection Tracking and Summary Slide
131
+ Auto-generated final slide (id: "summary") showing grid of summary cards with: slide title, selected option label, preview thumbnail (first block truncated), aside text (120 char truncation), user notes. Final notes textarea. Submit button gated on complete selections ("Still need: X, Y" message).
132
+
133
+ ### 2.4 Save/Load/Export Snapshots
134
+ Snapshot system: manual save (Cmd+S), auto-save on submit (-submitted suffix), auto-save on cancel with selections (-cancelled suffix). Snapshot directory structure with deck.json + images/. List, open, and export actions. Dirty state tracking ("Unsaved changes" / "Saved at HH:MM").
135
+
136
+ ### 2.5 Model Selector for Generation
137
+ Model bar with provider filter pills, model list, "Default" checkbox, thinking level pills (off/low/medium/high/xhigh). Model override flow spawns headless CLI with --provider and --model flags. Default model persistence in settings.json.
138
+
139
+ ### 2.6 Notes per Option
140
+ Each option card has a "Your notes (optional)" textarea. Notes saved to localStorage and included in summary slide and submission payload. Per-option granularity, not per-slide.
141
+
142
+ ### 2.7 Aside Text
143
+ Option-level explanatory text below the preview. Supports `\n` line breaks. Truncated to 120 chars in summary slide thumbnail.
144
+
145
+ ### 2.8 Confirmation Dialogs
146
+ Cancel confirmation bar: fixed top, slide-down animation, "Cancel deck? Selections will be lost." with Cancel/Keep Going buttons, 5-second auto-hide, double-Escape pattern. Close overlay: full-screen blur backdrop, color-coded by status (green/amber/red), auto-closes tab after 800ms.
147
+
148
+ ### 2.9 Preview Palette Themes
149
+ Per-option visual themes for previewHtml: midnight-rose, slate-jade, warm-copper, ocean-cyan. Font themes: albert, jakarta, grotesk. Applied via data attributes on preview elements.
150
+
151
+ ### 2.10 Session/Connection Management
152
+ Token-based auth, heartbeat watchdog (5s interval, 60s grace), idle timer (5 min after generate-more), abort signal handling, `beforeunload` beacon, double-submit prevention, concurrent deck prevention.
153
+
154
+ ---
155
+
156
+ ## 3. Unique to visual-explainer
157
+
158
+ ### 3.1 Auto-Trigger on Complex Tables
159
+ Proactive behavior: tables with 4+ rows OR 3+ columns automatically rendered as HTML instead of ASCII art. Agent decision-making, not user-triggered.
160
+
161
+ ### 3.2 Eight Distinct Slash Commands with Different Data Gathering
162
+ Each command has a unique workflow: `/generate-web-diagram` (free-form), `/generate-visual-plan` (10 sections with state machine), `/diff-review` (10 sections with git data), `/plan-review` (9 sections comparing plan vs code), `/project-recap` (8 sections with time window), `/generate-slides` (scroll-snap deck), `/fact-check` (verification workflow), `/share` (Vercel deployment).
163
+
164
+ ### 3.3 Verification/Fact-Check Workflow
165
+ Unique post-generation quality assurance: extract verifiable claims (quantitative, naming, behavioral, structural, temporal), verify against actual codebase, correct in place, add verification summary. Preserves page structure; only changes factual content.
166
+
167
+ ### 3.4 Chart.js Integration
168
+ Bar, line, pie/doughnut, radar charts in dashboard pages. Dark mode aware (reads prefers-color-scheme for text/grid colors). Reads CSS custom properties for font family.
169
+
170
+ ### 3.5 Responsive Sidebar TOC with Scroll Spy
171
+ Desktop: sticky 170px sidebar column with IntersectionObserver scroll spy. Mobile (<1000px): horizontal scrollable sticky bar at top with auto-scroll active tab to center. Smooth scroll with URL hash update.
172
+
173
+ ### 3.6 Vercel Deployment/Sharing
174
+ Shell script (`share.sh`) that copies HTML to temp dir as index.html, deploys via vercel-deploy skill. Returns live URL + claim URL. 30-day retention, public access.
175
+
176
+ ### 3.7 Anti-Slop Design Rules
177
+ Extensive forbidden patterns: specific hex colors (#8b5cf6, #7c3aed, etc.), gradient text on headings, animated glowing shadows, specific fonts (Inter, Roboto as body), neon dashboard aesthetic, emoji in section headers. Constrained aesthetic directions: Blueprint, Editorial, Paper/ink, Terminal.
178
+
179
+ ### 3.8 Thirteen Font Pairings, Five Color Palettes
180
+ Curated design system with rotation requirement (different pairing each generation). Font pairings include body + mono combinations. Palettes defined with CSS custom properties. Prose typography by voice (Literary, Technical, Bold, Minimal).
181
+
182
+ ### 3.9 Surface Depth Tiers
183
+ Four tiers: Hero (accent-tinted, elevated shadow), Elevated (subtle shadow), Default (flat card with border), Recessed (inset shadow). Plus Glass tier for special overlays. Background atmosphere rules (never flat solid).
184
+
185
+ ### 3.10 Animation Choreography
186
+ Staggered fadeUp (cards, sections), fadeScale (KPIs, badges), SVG drawIn (connectors), CSS counter animation (@property --count), hover lift. Slide-specific: cinematic entrance with child reveal stagger. Always respects prefers-reduced-motion.
187
+
188
+ ### 3.11 surf-cli Image Generation
189
+ Optional Gemini-powered image generation via surf-cli. Check availability, generate, base64 encode, embed as data URI. Graceful degradation when unavailable. Use cases: hero banners, conceptual illustrations, slide backgrounds.
190
+
191
+ ### 3.12 Fifteen Page Types
192
+ Architecture diagrams, flowcharts, sequence diagrams, data flow, schema/ER, state machines, mind maps, class diagrams, C4 architecture, data tables, timelines, dashboards, implementation plans, slide decks, prose/documentation.
193
+
194
+ ### 3.13 Forty+ CSS Components
195
+ Extensive component library (`.ve-card` variants, `.data-table`, `.kpi-card`, `.pipeline`, `.diff-panels`, `.callout`, `.code-file`, `.dir-tree`, `.legend`, `.prose`, `.pullquote`, etc.) plus slide-specific components (10 slide types, progress bar, nav dots, deck counter, hints).
196
+
197
+ ---
198
+
199
+ ## 4. Feature Overlap Matrix
200
+
201
+ | Feature | pi-design-deck | visual-explainer | Shared? |
202
+ |---------|:---:|:---:|:---:|
203
+ | **Rendering** | | | |
204
+ | Mermaid diagram rendering | Yes | Yes | SHARED |
205
+ | Mermaid zoom/pan controls | No | Yes | Explainer-only |
206
+ | Code syntax highlighting (Prism.js) | Yes | Yes | SHARED |
207
+ | Chart.js charts | No | Yes | Explainer-only |
208
+ | Markdown rendering | No | Yes (in prose) | Explainer-only |
209
+ | Image display/embedding | Yes (image blocks) | Yes (surf-cli, base64) | SHARED |
210
+ | Raw HTML injection | Yes (previewHtml) | Yes (full page) | SHARED |
211
+ | **Theming** | | | |
212
+ | Dark/light theme | Yes | Yes | SHARED |
213
+ | Auto theme (OS preference) | Yes | Yes | SHARED |
214
+ | Manual theme toggle | Yes (hotkey) | Yes (button) | SHARED |
215
+ | CSS custom property tokens | Yes | Yes | SHARED |
216
+ | Preview palette themes | Yes | No | Deck-only |
217
+ | Anti-slop color restrictions | No | Yes | Explainer-only |
218
+ | Font pairing rotation | No | Yes (13 pairings) | Explainer-only |
219
+ | Color palette selection | No | Yes (5 palettes) | Explainer-only |
220
+ | Surface depth tiers | No | Yes (4 tiers) | Explainer-only |
221
+ | **Navigation** | | | |
222
+ | Linear slide navigation | Yes (Back/Next) | Yes (scroll-snap) | SHARED (different impl) |
223
+ | Progress bar | Yes | Yes | SHARED |
224
+ | Nav dots | No | Yes | Explainer-only |
225
+ | Slide counter (X/Y) | No | Yes | Explainer-only |
226
+ | Sidebar TOC with scroll spy | No | Yes | Explainer-only |
227
+ | Touch/swipe navigation | No | Yes | Explainer-only |
228
+ | **Keyboard** | | | |
229
+ | Arrow key navigation | Yes | Yes | SHARED |
230
+ | Number key quick-select (1-9) | Yes | No | Deck-only |
231
+ | Space to select/advance | Yes | Yes | SHARED |
232
+ | Enter to advance/submit | Yes | No | Deck-only |
233
+ | Escape to cancel | Yes | No | Deck-only |
234
+ | Cmd+S to save | Yes | No | Deck-only |
235
+ | Theme toggle hotkey | Yes | No | Deck-only |
236
+ | Page Up/Down, Home/End | No | Yes | Explainer-only |
237
+ | Focus-aware key suppression | Yes | Yes | SHARED |
238
+ | **Interactive** | | | |
239
+ | Option selection (radio metaphor) | Yes | No | Deck-only |
240
+ | Generate-more loop (SSE) | Yes | No | Deck-only |
241
+ | Skeleton/shimmer placeholders | Yes | No | Deck-only |
242
+ | Notes per option | Yes | No | Deck-only |
243
+ | Summary slide | Yes | No | Deck-only |
244
+ | Submit selections to agent | Yes | No | Deck-only |
245
+ | Confirmation dialogs | Yes | No | Deck-only |
246
+ | Model selector | Yes | No | Deck-only |
247
+ | Collapsible sections | No | Yes | Explainer-only |
248
+ | Table row hover highlight | No | Yes | Explainer-only |
249
+ | **Persistence** | | | |
250
+ | Save/load snapshots | Yes | No | Deck-only |
251
+ | Auto-save on submit/cancel | Yes | No | Deck-only |
252
+ | localStorage state | Yes | No | Deck-only |
253
+ | Dirty state tracking | Yes | No | Deck-only |
254
+ | **Output** | | | |
255
+ | HTML export (self-contained) | Yes (export action) | Yes (primary output) | SHARED |
256
+ | Browser auto-open | Yes | Yes | SHARED |
257
+ | Vercel deployment/sharing | No | Yes | Explainer-only |
258
+ | Write to diagrams directory | No | Yes | Explainer-only |
259
+ | **Server** | | | |
260
+ | HTTP server with auth | Yes | No (static files) | Deck-only |
261
+ | SSE streaming | Yes | No | Deck-only |
262
+ | Heartbeat/keepalive | Yes | No | Deck-only |
263
+ | Asset serving | Yes | No | Deck-only |
264
+ | **Agent Integration** | | | |
265
+ | Slash commands | Yes (3) | Yes (8) | SHARED (concept) |
266
+ | Structured data gathering | No | Yes (per-command) | Explainer-only |
267
+ | Verification checkpoints | No | Yes | Explainer-only |
268
+ | Auto-trigger on complex tables | No | Yes | Explainer-only |
269
+ | Fact-check workflow | No | Yes | Explainer-only |
270
+ | **Layout** | | | |
271
+ | Grid auto-columns | Yes | Yes | SHARED |
272
+ | Responsive breakpoints | Yes | Yes | SHARED |
273
+ | Layout toggle (1/2/3/4 cols) | Yes | No | Deck-only |
274
+ | Max-width centered layout | No | Yes | Explainer-only |
275
+ | Card component | No | Yes (ve-card) | Explainer-only |
276
+ | KPI cards/dashboard | No | Yes | Explainer-only |
277
+ | Pipeline/flow visualization | No | Yes | Explainer-only |
278
+ | Diff panels (before/after) | No | Yes | Explainer-only |
279
+ | **Animations** | | | |
280
+ | Slide transition | Yes | Yes | SHARED |
281
+ | Entry animation for new elements | Yes | Yes | SHARED |
282
+ | Staggered reveal | No | Yes | Explainer-only |
283
+ | CSS counter animation | No | Yes | Explainer-only |
284
+ | SVG draw-in | No | Yes | Explainer-only |
285
+ | Skeleton shimmer | Yes | No | Deck-only |
286
+ | prefers-reduced-motion | Yes | Yes | SHARED |
287
+ | **Accessibility** | | | |
288
+ | ARIA roles (radiogroup, radio) | Yes | No | Deck-only |
289
+ | aria-checked, aria-pressed | Yes | No | Deck-only |
290
+ | aria-live regions | Yes | No | Deck-only |
291
+ | focus-visible outlines | Yes | Yes (implied) | SHARED |
292
+ | Focus management on navigation | Yes | Yes (implied) | SHARED |
293
+
294
+ ---
295
+
296
+ ## 5. Code Savings Estimate
297
+
298
+ ### Methodology
299
+ Estimating by functional area: what percentage of total implementation effort is shared vs project-specific.
300
+
301
+ ### Breakdown by Area
302
+
303
+ | Area | Shared | Deck-Specific | Explainer-Specific | Total Effort Weight |
304
+ |------|--------|---------------|--------------------|--------------------|
305
+ | Mermaid rendering | 70% | 10% | 20% | 12% |
306
+ | Code highlighting | 80% | 10% | 10% | 5% |
307
+ | Theme system | 60% | 15% | 25% | 8% |
308
+ | Keyboard shortcuts | 30% | 50% | 20% | 6% |
309
+ | HTML export | 50% | 20% | 30% | 8% |
310
+ | Slide navigation | 35% | 30% | 35% | 10% |
311
+ | Responsive layout | 40% | 25% | 35% | 8% |
312
+ | Browser/server infra | 90% | 10% | 0% | 5% |
313
+ | Selection/generate-more | 0% | 100% | 0% | 12% |
314
+ | Save/load/snapshots | 0% | 100% | 0% | 5% |
315
+ | Design system (CSS) | 20% | 10% | 70% | 10% |
316
+ | Data gathering/commands | 0% | 0% | 100% | 8% |
317
+ | Animation system | 30% | 20% | 50% | 3% |
318
+
319
+ ### Weighted Average
320
+
321
+ Calculating the weighted shared percentage:
322
+
323
+ - Mermaid: 0.70 * 0.12 = 0.084
324
+ - Code: 0.80 * 0.05 = 0.040
325
+ - Theme: 0.60 * 0.08 = 0.048
326
+ - Keyboard: 0.30 * 0.06 = 0.018
327
+ - Export: 0.50 * 0.08 = 0.040
328
+ - Slide nav: 0.35 * 0.10 = 0.035
329
+ - Responsive: 0.40 * 0.08 = 0.032
330
+ - Browser/server: 0.90 * 0.05 = 0.045
331
+ - Selection/gen: 0.00 * 0.12 = 0.000
332
+ - Save/load: 0.00 * 0.05 = 0.000
333
+ - Design system: 0.20 * 0.10 = 0.020
334
+ - Data gathering: 0.00 * 0.08 = 0.000
335
+ - Animation: 0.30 * 0.03 = 0.009
336
+
337
+ **Total weighted shared: ~37%**
338
+
339
+ ### Conclusion
340
+
341
+ The user's hypothesis of ~1/3 overlap is accurate. The analysis yields **~37% shared infrastructure**, with the remaining ~63% split roughly evenly between deck-specific (~30%) and explainer-specific (~33%) code.
342
+
343
+ The highest-value shared components are:
344
+ 1. **Mermaid rendering** -- used heavily by both, complex enough to justify shared implementation
345
+ 2. **Theme system** -- foundational to both, and StreamWeaver already has the beginnings
346
+ 3. **Browser/server infrastructure** -- StreamWeaver already has this
347
+ 4. **Code syntax highlighting** -- straightforward to share
348
+ 5. **HTML export** -- needed by both, complex to implement well
349
+
350
+ The largest project-specific investments:
351
+ - **Deck:** Selection/generate-more loop (~12% of total), save/load system (~5%)
352
+ - **Explainer:** Design system/CSS components (~10%), data gathering workflows (~8%), 40+ CSS components
353
+
354
+ ### Token Savings (Separate from Code Savings)
355
+
356
+ Beyond code reuse, the unification into StreamWeaver yields massive token savings:
357
+ - **Design deck:** ~30-45% token reduction per interaction (DSL vs JSON)
358
+ - **Visual explainer:** ~80-85% token reduction per generation (DSL vs full HTML + no more 24K-37K input tokens for reference material)
359
+
360
+ This is the strongest argument for unification -- the design system, CSS patterns, and rendering logic move from "context the agent reads every time" to "framework code that runs on the server."