npm - opencode-generative-ui - Versions diffs - 0.1.1 → 0.1.3 - Mend

opencode-generative-ui 0.1.1 → 0.1.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 (4) hide show

package/README.md CHANGED Viewed

@@ -9,6 +9,8 @@ The plugin renders HTML fragments and raw SVG in a native macOS window using [Gl
 This project is an OpenCode-focused extraction and adaptation of the original [`Michaelliv/pi-generative-ui`](https://github.com/Michaelliv/pi-generative-ui) work for `pi`. The original repo did the reverse-engineering work and established the shape of the widget tools and guideline set.
+The runtime now uses the same `morphdom` shell-update approach as the `pi` implementation: Glimpse loads a stable shell document, widget content is injected via `win.send()`, and DOM updates are diffed into place instead of replacing the whole page.
 ## What it does
 When OpenCode decides a response should be visual, the plugin can:
@@ -25,6 +27,13 @@ Typical use cases:
 - mockups
 - calculators
+Widget windows include built-in viewport controls:
+- pinch or `Cmd/Ctrl + wheel` to zoom
+- middle-mouse drag to pan
+- `Space + drag` to pan with a regular mouse or trackpad
+- keyboard shortcuts: `+`, `-`, `0`, `F`, and arrow keys
 ## Install
 ### From npm in OpenCode
@@ -138,7 +147,7 @@ bun run build
 ## Current limitation
-This plugin does not yet reproduce pi's token-by-token widget streaming. Widgets render when the tool executes, not progressively during tool-argument streaming.
+This plugin now uses `morphdom` for in-window DOM updates, but it still does not reproduce pi's token-by-token widget streaming. OpenCode does not currently expose the same tool-argument delta hooks, so widgets still render when the tool executes rather than progressively during argument streaming.
 ## Credits

package/dist/index.js CHANGED Viewed

@@ -1,7 +1,11 @@
 import { tool } from "@opencode-ai/plugin";
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
 import { open } from "glimpseui";
 import { AVAILABLE_MODULES, getGuidelines } from "./lib/guidelines.js";
 import { SVG_STYLES } from "./lib/svg-styles.js";
+const require = createRequire(import.meta.url);
+const MORPHDOM_SOURCE = readFileSync(require.resolve("morphdom/dist/morphdom-umd.min.js"), "utf8");
 const loadedModulesBySession = new Map();
 const activeWindowsBySession = new Map();
 function trackWindow(sessionID, win) {
@@ -55,16 +59,494 @@ function clearSessionState(sessionID) {
     loadedModulesBySession.delete(sessionID);
     closeSessionWindows(sessionID);
 }
-function wrapHTML(code, isSVG = false) {
-    if (isSVG) {
-        return `<!DOCTYPE html><html><head><meta charset="utf-8"><style>${SVG_STYLES}</style></head>
-<body style="margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#1a1a1a;color:#e0e0e0;">
-${code}</body></html>`;
+const WIDGET_SHELL_STYLES = `
+#oc-shell {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #1a1a1a;
+  color: #e0e0e0;
+}
+#oc-viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  user-select: none;
+}
+#oc-stage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+#oc-content {
+  position: relative;
+}
+body.oc-html #oc-content {
+  padding: 16px;
+}
+body.oc-svg #oc-content {
+  padding: 0;
+}
+body.oc-svg #oc-content > svg {
+  display: block;
+}
+#oc-toolbar {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border: 0.5px solid rgba(255, 255, 255, 0.18);
+  border-radius: 12px;
+  background: rgba(17, 17, 17, 0.88);
+  backdrop-filter: blur(10px);
+  z-index: 1000;
+}
+#oc-toolbar button {
+  min-width: 34px;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1;
+}
+#oc-zoom-value {
+  min-width: 52px;
+  text-align: center;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: #a0a0a0;
+}
+#oc-hint {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  max-width: min(560px, calc(100vw - 24px));
+  padding: 10px 12px;
+  border: 0.5px solid rgba(255, 255, 255, 0.14);
+  border-radius: 12px;
+  background: rgba(17, 17, 17, 0.8);
+  backdrop-filter: blur(10px);
+  font-size: 12px;
+  line-height: 1.45;
+  color: #a0a0a0;
+  z-index: 1000;
+  pointer-events: none;
+}
+#oc-shell.oc-space-ready,
+#oc-shell.oc-panning {
+  cursor: grab;
+}
+#oc-shell.oc-panning {
+  cursor: grabbing;
+}
+@keyframes _fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+`;
+const WIDGET_SHELL_SCRIPT = String.raw `(() => {
+  const MIN_SCALE = 0.2;
+  const MAX_SCALE = 4;
+  const ZOOM_STEP = 1.15;
+  const PAN_STEP = 60;
+  const shell = document.getElementById('oc-shell');
+  const viewport = document.getElementById('oc-viewport');
+  const stage = document.getElementById('oc-stage');
+  const content = document.getElementById('oc-content');
+  const zoomValue = document.getElementById('oc-zoom-value');
+  const zoomInButton = document.getElementById('oc-zoom-in');
+  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';
+  if (!shell || !viewport || !stage || !content || !zoomValue) return;
+  let scale = 1;
+  let tx = 0;
+  let ty = 0;
+  let defaultScale = 1;
+  let defaultTx = 0;
+  let defaultTy = 0;
+  let spacePressed = false;
+  let panning = false;
+  let panPointerId = null;
+  let panStartX = 0;
+  let panStartY = 0;
+  let panStartTx = 0;
+  let panStartTy = 0;
+  let gestureScaleStart = null;
+  let gestureAnchor = null;
+  const isEditableTarget = (target) => {
+    if (!(target instanceof Element)) return false;
+    return Boolean(target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
+  };
+  const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+  const measureContent = () => {
+    const width = Math.max(content.scrollWidth, content.offsetWidth, content.clientWidth);
+    const height = Math.max(content.scrollHeight, content.offsetHeight, content.clientHeight);
+    return {
+      width: Math.max(width, 1),
+      height: Math.max(height, 1),
+    };
+  };
+  const updateZoomLabel = () => {
+    zoomValue.textContent = Math.round(scale * 100) + '%';
+  };
+  const render = () => {
+    stage.style.transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
+    updateZoomLabel();
+  };
+  const defaultPositionFor = (nextScale) => {
+    const viewportRect = viewport.getBoundingClientRect();
+    const size = measureContent();
+    const scaledWidth = size.width * nextScale;
+    const scaledHeight = size.height * nextScale;
+    const centerX = (viewportRect.width - scaledWidth) / 2;
+    const centerY = (viewportRect.height - scaledHeight) / 2;
+    return {
+      x: isSVG ? centerX : Math.max(24, centerX),
+      y: isSVG ? centerY : Math.max(24, centerY),
+    };
+  };
+  const setDefaultView = (nextScale) => {
+    scale = nextScale;
+    const position = defaultPositionFor(nextScale);
+    tx = position.x;
+    ty = position.y;
+    defaultScale = scale;
+    defaultTx = tx;
+    defaultTy = ty;
+    render();
+  };
+  const fitView = () => {
+    const viewportRect = viewport.getBoundingClientRect();
+    const size = measureContent();
+    const fitScale = clamp(
+      Math.min((viewportRect.width - 40) / size.width, (viewportRect.height - 40) / size.height),
+      MIN_SCALE,
+      MAX_SCALE,
+    );
+    setDefaultView(fitScale);
+  };
+  const resetView = () => {
+    scale = defaultScale;
+    tx = defaultTx;
+    ty = defaultTy;
+    render();
+  };
+  const zoomAt = (nextScale, clientX, clientY) => {
+    const bounded = clamp(nextScale, MIN_SCALE, MAX_SCALE);
+    const viewportRect = viewport.getBoundingClientRect();
+    const pointX = clientX - viewportRect.left;
+    const pointY = clientY - viewportRect.top;
+    const contentX = (pointX - tx) / scale;
+    const contentY = (pointY - ty) / scale;
+    scale = bounded;
+    tx = pointX - contentX * scale;
+    ty = pointY - contentY * scale;
+    render();
+  };
+  const zoomBy = (factor, clientX, clientY) => {
+    const viewportRect = viewport.getBoundingClientRect();
+    zoomAt(
+      scale * factor,
+      clientX ?? viewportRect.left + viewportRect.width / 2,
+      clientY ?? viewportRect.top + viewportRect.height / 2,
+    );
+  };
+  const beginPan = (pointerId, clientX, clientY) => {
+    panning = true;
+    panPointerId = pointerId;
+    panStartX = clientX;
+    panStartY = clientY;
+    panStartTx = tx;
+    panStartTy = ty;
+    shell.classList.add('oc-panning');
+  };
+  const endPan = () => {
+    panning = false;
+    panPointerId = null;
+    shell.classList.remove('oc-panning');
+  };
+  viewport.addEventListener('wheel', (event) => {
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+      const factor = event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP;
+      zoomBy(factor, event.clientX, event.clientY);
+    }
+  }, { passive: false });
+  viewport.addEventListener('pointerdown', (event) => {
+    if (event.button === 1 || (spacePressed && event.button === 0)) {
+      event.preventDefault();
+      viewport.setPointerCapture(event.pointerId);
+      beginPan(event.pointerId, event.clientX, event.clientY);
+    }
+  });
+  viewport.addEventListener('pointermove', (event) => {
+    if (!panning || event.pointerId !== panPointerId) return;
+    event.preventDefault();
+    tx = panStartTx + (event.clientX - panStartX);
+    ty = panStartTy + (event.clientY - panStartY);
+    render();
+  });
+  viewport.addEventListener('pointerup', (event) => {
+    if (event.pointerId === panPointerId) {
+      endPan();
     }
+  });
+  viewport.addEventListener('pointercancel', (event) => {
+    if (event.pointerId === panPointerId) {
+      endPan();
+    }
+  });
+  viewport.addEventListener('gesturestart', (event) => {
+    event.preventDefault();
+    gestureScaleStart = scale;
+    gestureAnchor = { x: event.clientX, y: event.clientY };
+  });
+  viewport.addEventListener('gesturechange', (event) => {
+    if (gestureScaleStart == null || !gestureAnchor) return;
+    event.preventDefault();
+    zoomAt(gestureScaleStart * event.scale, gestureAnchor.x, gestureAnchor.y);
+  });
+  viewport.addEventListener('gestureend', () => {
+    gestureScaleStart = null;
+    gestureAnchor = null;
+  });
+  window.addEventListener('keydown', (event) => {
+    if (event.code === 'Space' && !isEditableTarget(event.target)) {
+      event.preventDefault();
+      spacePressed = true;
+      shell.classList.add('oc-space-ready');
+      return;
+    }
+    if (isEditableTarget(event.target)) return;
+    const viewportRect = viewport.getBoundingClientRect();
+    const centerX = viewportRect.left + viewportRect.width / 2;
+    const centerY = viewportRect.top + viewportRect.height / 2;
+    if (event.key === '+' || event.key === '=') {
+      event.preventDefault();
+      zoomBy(ZOOM_STEP, centerX, centerY);
+      return;
+    }
+    if (event.key === '-') {
+      event.preventDefault();
+      zoomBy(1 / ZOOM_STEP, centerX, centerY);
+      return;
+    }
+    if (event.key === '0') {
+      event.preventDefault();
+      resetView();
+      return;
+    }
+    if (event.key === 'f' || event.key === 'F') {
+      event.preventDefault();
+      fitView();
+      return;
+    }
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      tx += PAN_STEP;
+      render();
+      return;
+    }
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      tx -= PAN_STEP;
+      render();
+      return;
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      ty += PAN_STEP;
+      render();
+      return;
+    }
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      ty -= PAN_STEP;
+      render();
+    }
+  });
+  window.addEventListener('keyup', (event) => {
+    if (event.code === 'Space') {
+      spacePressed = false;
+      shell.classList.remove('oc-space-ready');
+    }
+  });
+  zoomInButton?.addEventListener('click', () => {
+    const viewportRect = viewport.getBoundingClientRect();
+    zoomBy(ZOOM_STEP, viewportRect.left + viewportRect.width / 2, viewportRect.top + viewportRect.height / 2);
+  });
+  zoomOutButton?.addEventListener('click', () => {
+    const viewportRect = viewport.getBoundingClientRect();
+    zoomBy(1 / ZOOM_STEP, viewportRect.left + viewportRect.width / 2, viewportRect.top + viewportRect.height / 2);
+  });
+  fitButton?.addEventListener('click', fitView);
+  resetButton?.addEventListener('click', resetView);
+  window.addEventListener('resize', () => {
+    if (scale === defaultScale && tx === defaultTx && ty === defaultTy) {
+      setDefaultView(defaultScale);
+      return;
+    }
+    render();
+  });
+  let hasInitialView = false;
+  const refreshLayout = () => {
+    if (!hasInitialView) {
+      hasInitialView = true;
+      if (isSVG) {
+        fitView();
+        return;
+      }
+      setDefaultView(1);
+      return;
+    }
+    render();
+  };
+  window._ocRefresh = refreshLayout;
+  updateZoomLabel();
+})();`;
+function escapeJS(s) {
+    return s
+        .replace(/\\/g, "\\\\")
+        .replace(/'/g, "\\'")
+        .replace(/\n/g, "\\n")
+        .replace(/\r/g, "\\r")
+        .replace(/<\/script>/gi, "<\\/script>");
+}
+function shellHTML(code, isSVG = false) {
+    const bodyClass = isSVG ? "oc-svg" : "oc-html";
+    const bodyKind = isSVG ? "svg" : "html";
+    const hint = isSVG
+        ? "Pinch or Cmd/Ctrl + wheel to zoom. Pan with middle-drag, Space + drag, or arrow keys."
+        : "Zoom with pinch or Cmd/Ctrl + wheel. Pan with middle-drag, Space + drag, or arrow keys without breaking widget controls.";
+    const escapedCode = escapeJS(code);
     return `<!DOCTYPE html><html><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
-<style>*{box-sizing:border-box}body{margin:0;padding:1rem;font-family:system-ui,-apple-system,sans-serif;background:#1a1a1a;color:#e0e0e0}${SVG_STYLES}</style>
-</head><body>${code}</body></html>`;
+<style>
+*{box-sizing:border-box}
+html,body{margin:0;width:100%;height:100%;overflow:hidden}
+body{font-family:system-ui,-apple-system,sans-serif;background:#1a1a1a;color:#e0e0e0}
+${SVG_STYLES}
+${WIDGET_SHELL_STYLES}
+</style>
+</head><body class="${bodyClass}">
+<div id="oc-shell" data-kind="${bodyKind}">
+  <div id="oc-viewport">
+    <div id="oc-stage">
+      <div id="oc-content"></div>
+    </div>
+  </div>
+  <div id="oc-toolbar" aria-label="Widget controls">
+    <button id="oc-zoom-out" type="button" title="Zoom out (-)">-</button>
+    <div id="oc-zoom-value">100%</div>
+    <button id="oc-zoom-in" type="button" title="Zoom in (+)">+</button>
+    <button id="oc-fit" type="button" title="Fit to viewport (F)">Fit</button>
+    <button id="oc-reset" type="button" title="Reset view (0)">Reset</button>
+  </div>
+  <div id="oc-hint">${hint}</div>
+</div>
+<script>${MORPHDOM_SOURCE}</script>
+<script>
+window._setContent = function(html) {
+  var root = document.getElementById('oc-content');
+  var target = document.createElement('div');
+  target.id = 'oc-content';
+  target.innerHTML = html;
+  morphdom(root, target, {
+    onBeforeElUpdated: function(from, to) {
+      if (from.isEqualNode(to)) return false;
+      return true;
+    },
+    onNodeAdded: function(node) {
+      if (node.nodeType === 1 && node.tagName !== 'STYLE' && node.tagName !== 'SCRIPT') {
+        node.style.animation = '_fadeIn 0.3s ease both';
+      }
+      return node;
+    }
+  });
+  if (window._ocRefresh) window._ocRefresh();
+};
+window._runScripts = function() {
+  document.querySelectorAll('#oc-content script').forEach(function(old) {
+    var s = document.createElement('script');
+    if (old.src) {
+      s.src = old.src;
+    } else {
+      s.textContent = old.textContent;
+    }
+    old.parentNode.replaceChild(s, old);
+  });
+};
+window._setContent('${escapedCode}');
+window._runScripts();
+</script>
+<script>${WIDGET_SHELL_SCRIPT}</script>
+</body></html>`;
 }
 function normalizeTitle(title) {
     const normalized = title.replace(/_/g, " ").trim();
@@ -137,7 +619,7 @@ const showWidget = tool({
         });
         let win;
         try {
-            win = open(wrapHTML(code, isSVG), {
+            win = open(shellHTML(code, isSVG), {
                 width,
                 height,
                 title,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "opencode-generative-ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "OpenCode plugin that renders HTML and SVG widgets in native macOS windows using Glimpse.",
   "type": "module",
   "exports": "./dist/index.js",
@@ -40,7 +40,8 @@
   },
   "dependencies": {
     "@opencode-ai/plugin": "1.3.13",
-    "glimpseui": "^0.3.5"
+    "glimpseui": "^0.3.5",
+    "morphdom": "^2.7.4"
   },
   "devDependencies": {
     "@types/node": "^22.15.21",

package/src/glimpseui.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ declare module "glimpseui" {
     send(js: string): void;
     setHTML(html: string): void;
     close(): void;
+    on(event: "ready", listener: () => void): this;
     on(event: "message", listener: (data: unknown) => void): this;
     on(event: "closed", listener: () => void): this;
     on(event: "error", listener: (err: Error) => void): this;