opencode-generative-ui 0.1.3 → 0.1.4

package/dist/index.js

@@ -178,7 +178,7 @@ const WIDGET_SHELL_SCRIPT = String.raw `(() => {
   const zoomOutButton = document.getElementById('oc-zoom-out');
   const fitButton = document.getElementById('oc-fit');
   const resetButton = document.getElementById('oc-reset');
-  const isSVG = shell?.dataset.kind === 'svg';
+  const declaredSVG = shell?.dataset.kind === 'svg';
 
   if (!shell || !viewport || !stage || !content || !zoomValue) return;
 
@@ -197,6 +197,9 @@ const WIDGET_SHELL_SCRIPT = String.raw `(() => {
   let panStartTy = 0;
   let gestureScaleStart = null;
   let gestureAnchor = null;
+  let svgEl = null;
+  let svgBaseWidth = 0;
+  let svgBaseHeight = 0;
 
   const isEditableTarget = (target) => {
     if (!(target instanceof Element)) return false;
@@ -205,7 +208,57 @@ const WIDGET_SHELL_SCRIPT = String.raw `(() => {
 
   const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 
+  const syncSVG = () => {
+    const candidate = content.querySelector('svg');
+    if (!(candidate instanceof SVGSVGElement)) {
+      svgEl = null;
+      return false;
+    }
+
+    if (svgEl !== candidate) {
+      svgEl = candidate;
+      const viewBox = svgEl.viewBox?.baseVal;
+      let width = viewBox && viewBox.width > 0 ? viewBox.width : Number.parseFloat(svgEl.getAttribute('width') || '');
+      let height = viewBox && viewBox.height > 0 ? viewBox.height : Number.parseFloat(svgEl.getAttribute('height') || '');
+
+      if (!(width > 0) || !(height > 0)) {
+        const rect = svgEl.getBoundingClientRect();
+        width = rect.width;
+        height = rect.height;
+      }
+
+      if (!(width > 0) || !(height > 0)) {
+        width = 680;
+        height = 420;
+      }
+
+      svgBaseWidth = width;
+      svgBaseHeight = height;
+      svgEl.style.display = 'block';
+      svgEl.style.maxWidth = 'none';
+      svgEl.style.maxHeight = 'none';
+      if (!svgEl.getAttribute('preserveAspectRatio')) {
+        svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+      }
+    }
+
+    return true;
+  };
+
+  const usesNativeSVGZoom = () => {
+    if (!syncSVG()) return false;
+    if (declaredSVG) return true;
+    return !content.querySelector('input, button, select, textarea, [contenteditable="true"], [contenteditable=""]');
+  };
+
   const measureContent = () => {
+    if (usesNativeSVGZoom()) {
+      return {
+        width: Math.max(svgBaseWidth, 1),
+        height: Math.max(svgBaseHeight, 1),
+      };
+    }
+
     const width = Math.max(content.scrollWidth, content.offsetWidth, content.clientWidth);
     const height = Math.max(content.scrollHeight, content.offsetHeight, content.clientHeight);
     return {
@@ -219,7 +272,17 @@ const WIDGET_SHELL_SCRIPT = String.raw `(() => {
   };
 
   const render = () => {
-    stage.style.transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
+    if (usesNativeSVGZoom() && svgEl) {
+      stage.style.transform = 'translate(' + tx + 'px, ' + ty + 'px)';
+      svgEl.style.width = svgBaseWidth * scale + 'px';
+      svgEl.style.height = svgBaseHeight * scale + 'px';
+    } else {
+      if (svgEl) {
+        svgEl.style.width = '';
+        svgEl.style.height = '';
+      }
+      stage.style.transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
+    }
     updateZoomLabel();
   };
 
@@ -457,7 +520,7 @@ const WIDGET_SHELL_SCRIPT = String.raw `(() => {
   const refreshLayout = () => {
     if (!hasInitialView) {
       hasInitialView = true;
-      if (isSVG) {
+      if (usesNativeSVGZoom()) {
         fitView();
         return;
       }
@@ -541,6 +604,12 @@ window._runScripts = function() {
     }
     old.parentNode.replaceChild(s, old);
   });
+  var refresh = function() {
+    if (window._ocRefresh) window._ocRefresh();
+  };
+  requestAnimationFrame(refresh);
+  setTimeout(refresh, 0);
+  setTimeout(refresh, 60);
 };
 window._setContent('${escapedCode}');
 window._runScripts();
@@ -673,6 +742,7 @@ const SYSTEM_GUIDANCE = [
     "Always call visualize_read_me once before the first show_widget call in a session, then set i_have_seen_read_me: true.",
     "For HTML widgets, provide a fragment only. Do not include DOCTYPE, html, head, or body tags.",
     "For SVG widgets, start widget_code with <svg>.",
+    "If the user may zoom in or inspect labels closely, prefer pure SVG or HTML that renders to a single inline SVG. Avoid canvas unless the interaction genuinely needs it.",
     "Keep widgets focused and appropriately sized. Default size is 800x600 unless the content needs another size.",
 ].join("\n");
 let registeredExitHandler = false;

package/dist/lib/guidelines.js

@@ -29,6 +29,7 @@ These rules apply to ALL use cases.
 - **Seamless**: Users shouldn't notice where claude.ai ends and your widget begins.
 - **Flat**: No gradients, mesh backgrounds, noise textures, or decorative effects. Clean flat surfaces.
 - **Compact**: Show the essential inline. Explain the rest in text.
+- **Scalable when inspected**: If the user is likely to zoom in or inspect labels closely (ERDs, architecture diagrams, charts with dense labels), prefer pure SVG or HTML that renders to a single inline SVG. Avoid canvas unless you need true pixel drawing or Chart.js-level interaction.
 - **Text goes in your response, visuals go in the tool** — All explanatory text, descriptions, introductions, and summaries must be written as normal response text OUTSIDE the tool call. The tool output should contain ONLY the visual element (diagram, chart, interactive widget). Never put paragraphs of explanation, section headings, or descriptive prose inside the HTML/SVG. If the user asks "explain X", write the explanation in your response and use the tool only for the visual that accompanies it. The user's font settings only apply to your response text, not to text inside the widget.
 
 ### Streaming
@@ -118,6 +119,7 @@ const CHARTS_CHART_JS = `## Charts (Chart.js)
 \`\`\`
 
 **Chart.js rules**:
+- Prefer SVG for charts the user may inspect closely or zoom heavily. Use Chart.js when live interaction, animation, or built-in chart behaviors matter more than zoom fidelity.
 - Canvas cannot resolve CSS variables. Use hardcoded hex or Chart.js defaults.
 - Wrap \`<canvas>\` in \`<div>\` with explicit \`height\` and \`position: relative\`.
 - **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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-generative-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "OpenCode plugin that renders HTML and SVG widgets in native macOS windows using Glimpse.",
   "type": "module",
   "exports": "./dist/index.js",