pi-generative-ui 0.1.0 → 0.2.0

package/.pi/extensions/generative-ui/claude-guidelines/sections/charts_chart_js.md

@@ -3,13 +3,16 @@
 <div style="position: relative; width: 100%; height: 300px;">
   <canvas id="myChart"></canvas>
 </div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
 <script>
-  new Chart(document.getElementById('myChart'), {
-    type: 'bar',
-    data: { labels: ['Q1','Q2','Q3','Q4'], datasets: [{ label: 'Revenue', data: [12,19,8,15] }] },
-    options: { responsive: true, maintainAspectRatio: false }
-  });
+  function initChart() {
+    new Chart(document.getElementById('myChart'), {
+      type: 'bar',
+      data: { labels: ['Q1','Q2','Q3','Q4'], datasets: [{ label: 'Revenue', data: [12,19,8,15] }] },
+      options: { responsive: true, maintainAspectRatio: false }
+    });
+  }
+  if (window.Chart) initChart();
 </script>
 ```
 
@@ -19,6 +22,7 @@
 - **Canvas sizing**: set height ONLY on the wrapper div, never on the canvas element itself. Use position: relative on the wrapper and responsive: true, maintainAspectRatio: false in Chart.js options. Never set CSS height directly on canvas — this causes wrong dimensions, especially for horizontal bar charts.
 - For horizontal bar charts: wrapper div height should be at least (number_of_bars * 40) + 80 pixels.
 - Load UMD build via `<script src="https://cdnjs.cloudflare.com/ajax/libs/...">` — sets `window.Chart` global. Follow with plain `<script>` (no `type="module"`).
+- **Script load ordering**: CDN scripts may not be loaded when the next `<script>` runs (especially during streaming). Always use `onload="initChart()"` on the CDN script tag, define your chart init in a named function, and add `if (window.Chart) initChart();` as a fallback at the end of your inline script. This guarantees charts render regardless of load order.
 - Multiple charts: use unique IDs (`myChart1`, `myChart2`). Each gets its own canvas+div pair.
 - For bubble and scatter charts: bubble radii extend past their center points, so points near axis boundaries get clipped. Pad the scale range — set `scales.y.min` and `scales.y.max` ~10% beyond your data range (same for x). Or use `layout: { padding: 20 }` as a blunt fallback.
 - Chart.js auto-skips x-axis labels when they'd overlap. If you have ≤12 categories and need all labels visible (waterfall, monthly series), set `scales.x.ticks: { autoSkip: false, maxRotation: 45 }` — missing labels make bars unidentifiable.

package/.pi/extensions/generative-ui/guidelines.ts

@@ -107,13 +107,16 @@ const CHARTS_CHART_JS = `## Charts (Chart.js)
 <div style="position: relative; width: 100%; height: 300px;">
   <canvas id="myChart"></canvas>
 </div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
 <script>
-  new Chart(document.getElementById('myChart'), {
-    type: 'bar',
-    data: { labels: ['Q1','Q2','Q3','Q4'], datasets: [{ label: 'Revenue', data: [12,19,8,15] }] },
-    options: { responsive: true, maintainAspectRatio: false }
-  });
+  function initChart() {
+    new Chart(document.getElementById('myChart'), {
+      type: 'bar',
+      data: { labels: ['Q1','Q2','Q3','Q4'], datasets: [{ label: 'Revenue', data: [12,19,8,15] }] },
+      options: { responsive: true, maintainAspectRatio: false }
+    });
+  }
+  if (window.Chart) initChart();
 </script>
 \`\`\`
 
@@ -123,6 +126,7 @@ const CHARTS_CHART_JS = `## Charts (Chart.js)
 - **Canvas sizing**: set height ONLY on the wrapper div, never on the canvas element itself. Use position: relative on the wrapper and responsive: true, maintainAspectRatio: false in Chart.js options. Never set CSS height directly on canvas — this causes wrong dimensions, especially for horizontal bar charts.
 - For horizontal bar charts: wrapper div height should be at least (number_of_bars * 40) + 80 pixels.
 - Load UMD build via \`<script src="https://cdnjs.cloudflare.com/ajax/libs/...">\` — sets \`window.Chart\` global. Follow with plain \`<script>\` (no \`type="module"\`).
+- **Script load ordering**: CDN scripts may not be loaded when the next \`<script>\` runs (especially during streaming). Always use \`onload="initChart()"\` on the CDN script tag, define your chart init in a named function, and add \`if (window.Chart) initChart();\` as a fallback at the end of your inline script. This guarantees charts render regardless of load order.
 - Multiple charts: use unique IDs (\`myChart1\`, \`myChart2\`). Each gets its own canvas+div pair.
 - For bubble and scatter charts: bubble radii extend past their center points, so points near axis boundaries get clipped. Pad the scale range — set \`scales.y.min\` and \`scales.y.max\` ~10% beyond your data range (same for x). Or use \`layout: { padding: 20 }\` as a blunt fallback.
 - Chart.js auto-skips x-axis labels when they'd overlap. If you have ≤12 categories and need all labels visible (waterfall, monthly series), set \`scales.x.ticks: { autoSkip: false, maxRotation: 45 }\` — missing labels make bars unidentifiable.

package/README.md

@@ -4,7 +4,15 @@ Claude.ai's generative UI - reverse-engineered, rebuilt for [pi](https://github.
 
 Ask pi to "show me how compound interest works" and get a live interactive widget - sliders, charts, animations - rendered in a native macOS window. Not a screenshot. Not a code block. A real HTML application with JavaScript, streaming live as the LLM generates it.
 
-https://github.com/user-attachments/assets/placeholder-demo-video
+<p align="center">
+  <img src="media/dashboard.gif" width="700" alt="SaaS dashboard with metric cards and Chart.js">
+</p>
+<p align="center">
+  <img src="media/simulator.gif" width="700" alt="Projectile motion simulator with planet selection">
+</p>
+<p align="center">
+  <img src="media/diagram.gif" width="700" alt="Architecture diagram streaming live">
+</p>
 
 ## How it works
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-generative-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Generative UI for pi — render interactive HTML/SVG widgets in native macOS windows via Glimpse",
   "type": "commonjs",
   "keywords": ["pi-package"],