Skip to content

feat: download and copy-as-code for generated components#56

Open
GeneralJerel wants to merge 1 commit intomainfrom
feat/download-generated-components
Open

feat: download and copy-as-code for generated components#56
GeneralJerel wants to merge 1 commit intomainfrom
feat/download-generated-components

Conversation

@GeneralJerel
Copy link
Collaborator

Summary

  • Add download as HTML and copy-as-code buttons to all generated components (widgets, bar charts, pie charts)
  • Downloaded files are standalone HTML that preserves animations, interactivity, and theming — open directly in a browser
  • Copy-as-code copies the raw HTML fragment (widgets) or standalone HTML (charts) to clipboard
  • Zero new dependencies — Chart.js loads from CDN in exported chart files, download uses native Blob API

Changes

New: apps/app/src/components/generative-ui/export-utils.ts

  • assembleStandaloneHtml() — wraps widget HTML in a full document with theme CSS, import maps, and stubbed bridge functions
  • chartToStandaloneHtml() — generates standalone Chart.js HTML from structured chart data
  • triggerDownload() — browser file download via Blob + object URL
  • slugify() — filename helper

Modified: apps/app/src/components/generative-ui/save-template-overlay.tsx

  • Added download (arrow icon) and copy (clipboard icon) buttons alongside existing "Save as Template"
  • Buttons appear on all components when content is ready, including when a template badge is shown
  • Copy shows a check icon confirmation for 1.8s

Modified: apps/app/src/components/generative-ui/widget-renderer.tsx

  • Exported SVG_CLASSES_CSS and FORM_STYLES_CSS constants (needed by export-utils)

Updated: .chalk/plans/demo-gallery.md

Closes

Test plan

  • Generate a widget visualization (e.g. "how does a plane fly") → click download → open .html in browser → verify animations and theme work
  • Generate a bar chart → click download → open in browser → verify Chart.js renders with animations
  • Generate a pie chart → same check
  • Click copy on a widget → paste in editor → verify raw HTML fragment
  • Click copy on a chart → paste → verify standalone HTML
  • Verify "Save as Template" still works alongside new buttons
  • Verify buttons appear on matched-template components too

🤖 Generated with Claude Code

Add the ability to download any generated visualization as a standalone HTML file (with animations preserved) and copy the source code to clipboard. This addresses the artifact export story needed for the upcoming component gallery. - New export-utils.ts with assembleStandaloneHtml (widgets), chartToStandaloneHtml (bar/pie charts), and triggerDownload - Download and copy buttons added to SaveTemplateOverlay, visible on all generated components (widgets, bar charts, pie charts) - Export SVG_CLASSES_CSS and FORM_STYLES_CSS from widget-renderer - Update demo-gallery plan with Variant-style layout and #55 context Closes #14 Closes #42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant