agentgui 1.0.730 → 1.0.731

package/electron/main.js

@@ -0,0 +1,83 @@
+import { app, BrowserWindow, dialog } from 'electron';
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import http from 'http';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, '..');
+const PORT = process.env.PORT || 3000;
+const BASE_URL = (process.env.BASE_URL || '/gm').replace(/\/+$/, '');
+const APP_URL = `http://localhost:${PORT}${BASE_URL}/`;
+
+let serverProcess = null;
+let mainWindow = null;
+
+function startServer() {
+  serverProcess = spawn(process.execPath, ['server.js'], {
+    cwd: ROOT,
+    env: { ...process.env, PORT: String(PORT) },
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+  serverProcess.stdout.on('data', d => process.stdout.write(`[server] ${d}`));
+  serverProcess.stderr.on('data', d => process.stderr.write(`[server] ${d}`));
+  serverProcess.on('exit', code => {
+    if (code !== 0 && mainWindow) {
+      dialog.showErrorBox('Server exited', `AgentGUI server exited with code ${code}`);
+    }
+  });
+}
+
+function pollReady(retries = 40) {
+  return new Promise((resolve, reject) => {
+    function attempt(n) {
+      http.get(APP_URL, res => {
+        if (res.statusCode === 200 || res.statusCode === 401) return resolve();
+        if (n <= 0) return reject(new Error(`Server not ready after polling (last status: ${res.statusCode})`));
+        setTimeout(() => attempt(n - 1), 500);
+      }).on('error', err => {
+        if (n <= 0) return reject(new Error(`Server not reachable: ${err.message}`));
+        setTimeout(() => attempt(n - 1), 500);
+      });
+    }
+    attempt(retries);
+  });
+}
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1280,
+    height: 800,
+    title: 'AgentGUI',
+    webPreferences: {
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+  });
+  mainWindow.loadURL(APP_URL);
+  mainWindow.on('closed', () => { mainWindow = null; });
+}
+
+app.whenReady().then(async () => {
+  startServer();
+  try {
+    await pollReady();
+  } catch (e) {
+    dialog.showErrorBox('Startup failed', e.message);
+    app.quit();
+    return;
+  }
+  createWindow();
+  app.on('activate', () => { if (!mainWindow) createWindow(); });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});
+
+app.on('will-quit', () => {
+  if (serverProcess) {
+    serverProcess.kill('SIGTERM');
+    serverProcess = null;
+  }
+});

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "agentgui",
-  "version": "1.0.730",
+  "version": "1.0.731",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
-  "main": "server.js",
+  "main": "electron/main.js",
   "bin": {
     "agentgui": "./bin/gmgui.cjs"
   },
@@ -18,7 +18,9 @@
   "scripts": {
     "start": "node server.js",
     "dev": "node server.js --watch",
-    "postinstall": "node scripts/patch-fsbrowse.js && node scripts/copy-vendor.js"
+    "postinstall": "node scripts/patch-fsbrowse.js && node scripts/copy-vendor.js",
+    "electron": "electron electron/main.js",
+    "electron:dev": "PORT=3000 electron electron/main.js"
   },
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.4.1",
@@ -41,6 +43,7 @@
     "p-retry": "^7.1.1",
     "pm2": "^5.4.3",
     "puppeteer-core": "^24.37.5",
+    "webjsx": "^0.0.73",
     "webtalk": "^1.0.31",
     "ws": "^8.14.2",
     "xstate": "^5.28.0",
@@ -54,5 +57,8 @@
     "sharp": "npm:empty-npm-package@1.0.0",
     "onnxruntime-common": "1.21.0",
     "onnxruntime-node": "1.21.0"
+  },
+  "devDependencies": {
+    "electron": "^35.0.0"
   }
 }

package/scripts/copy-vendor.js

@@ -1,20 +1,50 @@
-#!/usr/bin/env node
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const root = path.join(__dirname, '..');
-
-const copies = [
-  ['node_modules/xstate/dist/xstate.umd.min.js', 'static/lib/xstate.umd.min.js'],
-];
-
-for (const [src, dest] of copies) {
-  const srcPath = path.join(root, src);
-  const destPath = path.join(root, dest);
-  if (!fs.existsSync(srcPath)) { console.warn('[copy-vendor] not found:', src); continue; }
-  fs.mkdirSync(path.dirname(destPath), { recursive: true });
-  fs.copyFileSync(srcPath, destPath);
-  console.log('[copy-vendor] copied', src, '->', dest);
-}
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.join(__dirname, '..');
+
+const copies = [
+  ['node_modules/xstate/dist/xstate.umd.min.js', 'static/lib/xstate.umd.min.js'],
+];
+
+for (const [src, dest] of copies) {
+  const srcPath = path.join(root, src);
+  const destPath = path.join(root, dest);
+  if (!fs.existsSync(srcPath)) { console.warn('[copy-vendor] not found:', src); continue; }
+  fs.mkdirSync(path.dirname(destPath), { recursive: true });
+  fs.copyFileSync(srcPath, destPath);
+  console.log('[copy-vendor] copied', src, '->', dest);
+}
+
+// Build webjsx IIFE bundle from ESM dist files
+const webjsxDist = path.join(root, 'node_modules/webjsx/dist');
+if (fs.existsSync(webjsxDist)) {
+  const ORDER = ['constants', 'elementTags', 'utils', 'attributes', 'createDOMElement', 'createElement', 'applyDiff', 'types'];
+
+  function stripModule(src) {
+    return src
+      .replace(/^import\s+.*?from\s+['"][^'"]+['"];?\s*$/gm, '')
+      .replace(/^export\s+(const|function|class|async\s+function)\s+/gm, '$1 ')
+      .replace(/^export\s+\{[^}]*\}(\s+from\s+['"][^'"]+['"])?\s*;?\s*$/gm, '')
+      .replace(/^export\s+\*\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
+      .replace(/^\/\/#\s+sourceMappingURL=.*$/gm, '')
+      .trim();
+  }
+
+  const stripped = ORDER.map(name => {
+    const src = fs.readFileSync(path.join(webjsxDist, `${name}.js`), 'utf8');
+    return `// === ${name}.js ===\n${stripModule(src)}`;
+  });
+
+  const iife = `(function(window) {\n"use strict";\n\n${stripped.join('\n\n')}\n\nwindow.webjsx = { createElement, applyDiff, createDOMElement, Fragment };\n})(typeof window !== 'undefined' ? window : globalThis);\n`;
+
+  const dest = path.join(root, 'static/lib/webjsx.js');
+  fs.mkdirSync(path.dirname(dest), { recursive: true });
+  fs.writeFileSync(dest, iife);
+  console.log('[copy-vendor] built webjsx IIFE ->', 'static/lib/webjsx.js', `(${iife.split('\n').length} lines)`);
+} else {
+  console.warn('[copy-vendor] webjsx not found in node_modules — run npm install');
+}

package/static/index.html

@@ -3311,6 +3311,7 @@
   <script defer src="/gm/js/event-processor.js"></script>
   <script defer src="/gm/js/streaming-renderer.js"></script>
   <script defer src="/gm/js/image-loader.js"></script>
+  <script defer src="/gm/lib/webjsx.js"></script>
   <script defer src="/gm/lib/xstate.umd.min.js"></script>
   <script defer src="/gm/js/ws-machine.js"></script>
   <script defer src="/gm/js/conv-machine.js"></script>

package/static/js/conversations.js

@@ -457,46 +457,10 @@ class ConversationManager {
     }
   }
 
-  render() {
-    if (!this.listEl) return;
-
-    if (this.conversations.length === 0) {
-      this.showEmpty();
-      return;
-    }
-
-    this.emptyEl.style.display = 'none';
-
-    const sorted = [...this.conversations].sort((a, b) =>
-      new Date(b.createdAt || 0) - new Date(a.createdAt || 0)
-    );
-
-    const existingMap = {};
-    for (const child of Array.from(this.listEl.children)) {
-      const cid = child.dataset.convId;
-      if (cid) existingMap[cid] = child;
-    }
-
-    const frag = document.createDocumentFragment();
-    for (const conv of sorted) {
-      const existing = existingMap[conv.id];
-      if (existing) {
-        this.updateConversationItem(existing, conv);
-        delete existingMap[conv.id];
-        frag.appendChild(existing);
-      } else {
-        frag.appendChild(this.createConversationItem(conv));
-      }
-    }
-
-    for (const orphan of Object.values(existingMap)) orphan.remove();
-    this.listEl.appendChild(frag);
-  }
-
-  updateConversationItem(el, conv) {
+  _convVnode(conv) {
+    const h = window.webjsx?.createElement;
+    if (!h) return null;
     const isActive = conv.id === this.activeId;
-    el.classList.toggle('active', isActive);
-
     const isStreaming = this.streamingConversations.has(conv.id);
     const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;
     const timestamp = conv.created_at ? new Date(conv.created_at).toLocaleDateString() : 'Unknown';
@@ -505,53 +469,50 @@ class ConversationManager {
     const wd = conv.workingDirectory ? pathBasename(conv.workingDirectory) : '';
     const metaParts = [agent + modelLabel, timestamp];
     if (wd) metaParts.push(wd);
+    const badge = isStreaming
+      ? h('span', { class: 'conversation-streaming-badge', title: 'Streaming in progress' }, h('span', { class: 'streaming-dot' }))
+      : null;
+    return h('li', { class: 'conversation-item' + (isActive ? ' active' : ''), 'data-conv-id': conv.id },
+      h('div', { class: 'conversation-item-content' },
+        h('div', { class: 'conversation-item-title' }, ...(badge ? [badge, title] : [title])),
+        h('div', { class: 'conversation-item-meta' }, metaParts.join(' \u2022 '))
+      ),
+      h('button', { class: 'conversation-item-delete', title: 'Delete conversation', 'data-delete-conv': conv.id },
+        h('svg', { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2' },
+          h('polyline', { points: '3 6 5 6 21 6' }),
+          h('path', { d: 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' })
+        )
+      )
+    );
+  }
 
-    const titleEl = el.querySelector('.conversation-item-title');
-    if (titleEl) {
-      const badgeHtml = isStreaming
-        ? '<span class="conversation-streaming-badge" title="Streaming in progress"><span class="streaming-dot"></span></span>'
-        : '';
-      titleEl.innerHTML = `${badgeHtml}${this.escapeHtml(title)}`;
+  render() {
+    if (!this.listEl) return;
+    if (this.conversations.length === 0) { this.showEmpty(); return; }
+    this.emptyEl.style.display = 'none';
+    const sorted = [...this.conversations].sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
+    if (window.webjsx?.applyDiff) {
+      window.webjsx.applyDiff(this.listEl, sorted.map(conv => this._convVnode(conv)).filter(Boolean));
+    } else {
+      this._renderFallback(sorted);
     }
-
-    const metaEl = el.querySelector('.conversation-item-meta');
-    if (metaEl) metaEl.textContent = metaParts.join(' \u2022 ');
   }
 
-  createConversationItem(conv) {
-    const li = document.createElement('li');
-    li.className = 'conversation-item';
-    li.dataset.convId = conv.id;
-    if (conv.id === this.activeId) li.classList.add('active');
-
-    const isStreaming = this.streamingConversations.has(conv.id);
-
-    const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;
-    const timestamp = conv.created_at ? new Date(conv.created_at).toLocaleDateString() : 'Unknown';
-    const agent = this.getAgentDisplayName(conv.agentId || conv.agentType);
-    const modelLabel = this.formatModelLabel(conv.model);
-    const wd = conv.workingDirectory ? pathBasename(conv.workingDirectory) : '';
-    const metaParts = [agent + modelLabel, timestamp];
-    if (wd) metaParts.push(wd);
-
-    const streamingBadge = isStreaming
-      ? '<span class="conversation-streaming-badge" title="Streaming in progress"><span class="streaming-dot"></span></span>'
-      : '';
-
-    li.innerHTML = `
-      <div class="conversation-item-content">
-        <div class="conversation-item-title">${streamingBadge}${this.escapeHtml(title)}</div>
-        <div class="conversation-item-meta">${metaParts.join(' • ')}</div>
-      </div>
-      <button class="conversation-item-delete" title="Delete conversation" data-delete-conv="${conv.id}">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <polyline points="3 6 5 6 21 6"></polyline>
-          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-        </svg>
-      </button>
-    `;
-
-    return li;
+  _renderFallback(sorted) {
+    const existingMap = {};
+    for (const child of Array.from(this.listEl.children)) {
+      if (child.dataset.convId) existingMap[child.dataset.convId] = child;
+    }
+    const frag = document.createDocumentFragment();
+    for (const conv of sorted) {
+      const el = existingMap[conv.id] || document.createElement('li');
+      el.className = 'conversation-item' + (conv.id === this.activeId ? ' active' : '');
+      el.dataset.convId = conv.id;
+      delete existingMap[conv.id];
+      frag.appendChild(el);
+    }
+    for (const orphan of Object.values(existingMap)) orphan.remove();
+    this.listEl.appendChild(frag);
   }
 
   async confirmDelete(convId, title) {

package/static/js/tools-manager-ui.js

@@ -42,6 +42,8 @@
     },
 
     renderToolCard: function(tool, isRefreshing) {
+      var h = window.webjsx && window.webjsx.createElement;
+      if (!h) return null;
       var ui = window.toolsManagerUI;
       var statusClass = ui.getStatusClass(tool);
       var ms = window.toolInstallMachineAPI ? window.toolInstallMachineAPI.getState(tool.id) : null;
@@ -53,26 +55,29 @@
       var canUpdate = ms === 'needs_update' || tool.hasUpdate || tool.status === 'needs_update';
       var iv = (snap && snap.context.installedVersion) || tool.installedVersion;
       var pv = (snap && snap.context.publishedVersion) || tool.publishedVersion;
-      var versionInfo = '';
-      if (iv || pv) {
-        versionInfo = '<div class="tool-versions">';
-        if (iv) versionInfo += '<span class="tool-version-item">v' + ui.esc(iv) + '</span>';
-        if (pv && iv !== pv) versionInfo += '<span class="tool-version-item">(v' + ui.esc(pv) + ' available)</span>';
-        versionInfo += '</div>';
-      }
-      return '<div class="tool-item">' +
-        '<div style="display: flex; flex-direction: column; gap: 0.3rem;">' +
-        '<div class="tool-header"><span class="tool-name">' + ui.esc(tool.name || tool.id) + '</span></div>' +
-        '<div class="tool-status-indicator ' + statusClass + '"><span class="tool-status-dot"></span><span>' + ui.getStatusText(tool) + '</span></div>' +
-        versionInfo +
-        (isInstalling && progress !== undefined ? '<div class="tool-progress-container"><div class="tool-progress-bar"><div class="tool-progress-fill" style="width:' + Math.min(progress, 100) + '%"></div></div></div>' : '') +
-        (tool.error_message ? '<div class="tool-error-message">Error: ' + ui.esc(tool.error_message.substring(0, 40)) + '</div>' : '') +
-        '</div>' +
-        '<div class="tool-actions">' +
-        (canInstall ? '<button class="tool-btn tool-btn-primary" onclick="window.toolsManager.install(\'' + tool.id + '\')" ' + (locked ? 'disabled' : '') + '>Install</button>' :
-          canUpdate ? '<button class="tool-btn tool-btn-primary" onclick="window.toolsManager.update(\'' + tool.id + '\')" ' + (locked ? 'disabled' : '') + '>Update</button>' :
-          '<button class="tool-btn tool-btn-secondary" onclick="window.toolsManager.refresh()" ' + (isRefreshing ? 'disabled' : '') + '>&#10003;</button>') +
-        '</div></div>';
+      var versionChildren = [];
+      if (iv) versionChildren.push(h('span', { class: 'tool-version-item' }, 'v' + iv));
+      if (pv && iv !== pv) versionChildren.push(h('span', { class: 'tool-version-item' }, '(v' + pv + ' available)'));
+      var actionBtn = canInstall
+        ? h('button', { class: 'tool-btn tool-btn-primary', disabled: locked, onClick: function() { window.toolsManager.install(tool.id); } }, 'Install')
+        : canUpdate
+          ? h('button', { class: 'tool-btn tool-btn-primary', disabled: locked, onClick: function() { window.toolsManager.update(tool.id); } }, 'Update')
+          : h('button', { class: 'tool-btn tool-btn-secondary', disabled: isRefreshing, onClick: function() { window.toolsManager.refresh(); } }, '\u2713');
+      return h('div', { class: 'tool-item' },
+        h('div', { style: 'display:flex;flex-direction:column;gap:0.3rem;' },
+          h('div', { class: 'tool-header' }, h('span', { class: 'tool-name' }, tool.name || tool.id)),
+          h('div', { class: 'tool-status-indicator ' + statusClass },
+            h('span', { class: 'tool-status-dot' }),
+            h('span', {}, ui.getStatusText(tool))
+          ),
+          versionChildren.length ? h('div', { class: 'tool-versions' }, ...versionChildren) : null,
+          isInstalling && progress !== undefined
+            ? h('div', { class: 'tool-progress-container' }, h('div', { class: 'tool-progress-bar' }, h('div', { class: 'tool-progress-fill', style: 'width:' + Math.min(progress, 100) + '%' })))
+            : null,
+          tool.error_message ? h('div', { class: 'tool-error-message' }, 'Error: ' + tool.error_message.substring(0, 40)) : null
+        ),
+        h('div', { class: 'tool-actions' }, actionBtn)
+      );
     },
 
     esc: function(s) {

package/static/js/tools-manager.js

@@ -124,14 +124,22 @@
   function render() {
     var scroll = popup.querySelector('.tools-popup-scroll');
     if (!scroll) return;
-    if (!tools.length) { scroll.innerHTML = '<div class="tool-empty-state" style="grid-column: 1 / -1;"><div class="tool-empty-state-text">No tools available</div></div>'; return; }
-    var cli = tools.filter(t => t.category === 'cli'), plugin = tools.filter(t => t.category === 'plugin'), other = tools.filter(t => !t.category);
+    var h = window.webjsx && window.webjsx.createElement;
+    var applyDiff = window.webjsx && window.webjsx.applyDiff;
     var ui = window.toolsManagerUI;
-    var html = '';
-    if (cli.length) html += '<div class="tool-section-header">CLI Agents</div>' + cli.map(t => ui.renderToolCard(t, isRefreshing)).join('');
-    if (plugin.length) html += '<div class="tool-section-header">GM Plugins</div>' + plugin.map(t => ui.renderToolCard(t, isRefreshing)).join('');
-    if (other.length) html += other.map(t => ui.renderToolCard(t, isRefreshing)).join('');
-    scroll.innerHTML = html;
+    if (!h || !applyDiff) { scroll.innerHTML = '<div class="tool-empty-state"><div class="tool-empty-state-text">Loading...</div></div>'; return; }
+    if (!tools.length) {
+      applyDiff(scroll, [h('div', { class: 'tool-empty-state', style: 'grid-column:1/-1;' }, h('div', { class: 'tool-empty-state-text' }, 'No tools available'))]);
+      return;
+    }
+    var cli = tools.filter(t => t.category === 'cli');
+    var plugin = tools.filter(t => t.category === 'plugin');
+    var other = tools.filter(t => !t.category);
+    var vnodes = [];
+    if (cli.length) vnodes.push(h('div', { class: 'tool-section-header' }, 'CLI Agents'), ...cli.map(t => ui.renderToolCard(t, isRefreshing)).filter(Boolean));
+    if (plugin.length) vnodes.push(h('div', { class: 'tool-section-header' }, 'GM Plugins'), ...plugin.map(t => ui.renderToolCard(t, isRefreshing)).filter(Boolean));
+    if (other.length) vnodes.push(...other.map(t => ui.renderToolCard(t, isRefreshing)).filter(Boolean));
+    applyDiff(scroll, vnodes);
   }
 
   function togglePopup(e) { e.stopPropagation(); if (!popup.classList.contains('open')) { isRefreshing = false; refresh(); } popup.classList.toggle('open'); }

package/static/lib/webjsx.js

@@ -0,0 +1,674 @@
+(function(window) {
+"use strict";
+
+// === constants.js ===
+const HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
+const MATH_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+
+// === elementTags.js ===
+// Create a Map for faster lookups
+const KNOWN_ELEMENTS = new Map(Object.entries({
+    a: "A",
+    abbr: "ABBR",
+    address: "ADDRESS",
+    area: "AREA",
+    article: "ARTICLE",
+    aside: "ASIDE",
+    audio: "AUDIO",
+    b: "B",
+    base: "BASE",
+    bdi: "BDI",
+    bdo: "BDO",
+    blockquote: "BLOCKQUOTE",
+    body: "BODY",
+    br: "BR",
+    button: "BUTTON",
+    canvas: "CANVAS",
+    caption: "CAPTION",
+    cite: "CITE",
+    code: "CODE",
+    col: "COL",
+    colgroup: "COLGROUP",
+    data: "DATA",
+    datalist: "DATALIST",
+    dd: "DD",
+    del: "DEL",
+    details: "DETAILS",
+    dfn: "DFN",
+    dialog: "DIALOG",
+    div: "DIV",
+    dl: "DL",
+    dt: "DT",
+    em: "EM",
+    embed: "EMBED",
+    fieldset: "FIELDSET",
+    figcaption: "FIGCAPTION",
+    figure: "FIGURE",
+    footer: "FOOTER",
+    form: "FORM",
+    h1: "H1",
+    h2: "H2",
+    h3: "H3",
+    h4: "H4",
+    h5: "H5",
+    h6: "H6",
+    head: "HEAD",
+    header: "HEADER",
+    hgroup: "HGROUP",
+    hr: "HR",
+    html: "HTML",
+    i: "I",
+    iframe: "IFRAME",
+    img: "IMG",
+    input: "INPUT",
+    ins: "INS",
+    kbd: "KBD",
+    label: "LABEL",
+    legend: "LEGEND",
+    li: "LI",
+    link: "LINK",
+    main: "MAIN",
+    map: "MAP",
+    mark: "MARK",
+    menu: "MENU",
+    meta: "META",
+    meter: "METER",
+    nav: "NAV",
+    noscript: "NOSCRIPT",
+    object: "OBJECT",
+    ol: "OL",
+    optgroup: "OPTGROUP",
+    option: "OPTION",
+    output: "OUTPUT",
+    p: "P",
+    picture: "PICTURE",
+    pre: "PRE",
+    progress: "PROGRESS",
+    q: "Q",
+    rp: "RP",
+    rt: "RT",
+    ruby: "RUBY",
+    s: "S",
+    samp: "SAMP",
+    script: "SCRIPT",
+    section: "SECTION",
+    select: "SELECT",
+    slot: "SLOT",
+    small: "SMALL",
+    source: "SOURCE",
+    span: "SPAN",
+    strong: "STRONG",
+    style: "STYLE",
+    sub: "SUB",
+    summary: "SUMMARY",
+    sup: "SUP",
+    table: "TABLE",
+    tbody: "TBODY",
+    td: "TD",
+    template: "TEMPLATE",
+    textarea: "TEXTAREA",
+    tfoot: "TFOOT",
+    th: "TH",
+    thead: "THEAD",
+    time: "TIME",
+    title: "TITLE",
+    tr: "TR",
+    track: "TRACK",
+    u: "U",
+    ul: "UL",
+    var: "VAR",
+    video: "VIDEO",
+    wbr: "WBR",
+}));
+
+// === utils.js ===
+/**
+ * Flattens nested virtual nodes by replacing Fragments with their children.
+ * @param vnodes Virtual nodes to flatten
+ * @returns Array of flattened virtual nodes
+ */
+function flattenVNodes(vnodes, result = []) {
+    if (Array.isArray(vnodes)) {
+        for (const vnode of vnodes) {
+            flattenVNodes(vnode, result);
+        }
+    }
+    else if (isValidVNode(vnodes)) {
+        result.push(vnodes);
+    }
+    return result;
+}
+function isValidVNode(vnode) {
+    const typeofVNode = typeof vnode;
+    return (vnode !== null &&
+        vnode !== undefined &&
+        (typeofVNode === "string" ||
+            typeofVNode === "object" ||
+            typeofVNode === "number" ||
+            typeofVNode === "bigint"));
+}
+/* Get Child Nodes Efficiently */
+function getChildNodes(parent) {
+    const nodes = [];
+    let current = parent.firstChild;
+    while (current) {
+        nodes.push(current);
+        current = current.nextSibling;
+    }
+    return nodes;
+}
+/**
+ * Assigns a ref to a DOM node.
+ * @param node Target DOM node
+ * @param ref Reference to assign (function or object with current property)
+ */
+function assignRef(node, ref) {
+    if (typeof ref === "function") {
+        ref(node);
+    }
+    else if (ref && typeof ref === "object") {
+        ref.current = node;
+    }
+}
+function isVElement(vnode) {
+    const typeofVNode = typeof vnode;
+    return (typeofVNode !== "string" &&
+        typeofVNode !== "number" &&
+        typeofVNode !== "bigint");
+}
+function isNonBooleanPrimitive(vnode) {
+    const typeofVNode = typeof vnode;
+    return (typeofVNode === "string" ||
+        typeofVNode === "number" ||
+        typeofVNode === "bigint");
+}
+function getNamespaceURI(node) {
+    return node instanceof Element && node.namespaceURI !== HTML_NAMESPACE
+        ? node.namespaceURI ?? undefined
+        : undefined;
+}
+function setWebJSXProps(element, props) {
+    element.__webjsx_props = props;
+}
+function getWebJSXProps(element) {
+    let props = element.__webjsx_props;
+    if (!props) {
+        props = {};
+        element.__webjsx_props = props;
+    }
+    return props;
+}
+function setWebJSXChildNodeCache(element, childNodes) {
+    element.__webjsx_childNodes = childNodes;
+}
+function getWebJSXChildNodeCache(element) {
+    return element.__webjsx_childNodes;
+}
+
+// === attributes.js ===
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Updates an event listener on an element.
+ * @param el Target element
+ * @param eventName Name of the event (without 'on' prefix)
+ * @param newHandler New event handler function
+ * @param oldHandler Previous event handler function
+ */
+function updateEventListener(el, eventName, newHandler, oldHandler) {
+    if (oldHandler && oldHandler !== newHandler) {
+        el.removeEventListener(eventName, oldHandler);
+    }
+    if (newHandler && oldHandler !== newHandler) {
+        el.addEventListener(eventName, newHandler);
+        el.__webjsx_listeners =
+            el.__webjsx_listeners ?? {};
+        el.__webjsx_listeners[eventName] = newHandler;
+    }
+}
+/**
+ * Updates a single property or attribute on an element.
+ * @param el Target element
+ * @param key Property or attribute name
+ * @param value New value to set
+ */
+function updatePropOrAttr(el, key, value) {
+    if (el instanceof HTMLElement) {
+        if (key in el) {
+            // Fast path: property exists on HTMLElement
+            el[key] = value;
+            return;
+        }
+        if (typeof value === "string") {
+            el.setAttribute(key, value);
+            return;
+        }
+        // Fallback for non-string values on HTMLElement
+        el[key] = value;
+        return;
+    }
+    // SVG/Other namespace elements
+    const isSVG = el.namespaceURI === "http://www.w3.org/2000/svg";
+    if (isSVG) {
+        if (value !== undefined && value !== null) {
+            el.setAttribute(key, `${value}`);
+        }
+        else {
+            el.removeAttribute(key);
+        }
+        return;
+    }
+    // Fallback for other element types
+    if (typeof value === "string") {
+        el.setAttribute(key, value);
+    }
+    else {
+        el[key] = value;
+    }
+}
+/**
+ * Updates all attributes and properties on a DOM element.
+ * @param el Target element
+ * @param newProps New properties to apply
+ * @param oldProps Previous properties for comparison (default empty object)
+ */
+function updateAttributesCore(el, newProps, oldProps = {}) {
+    // Handle new/updated props
+    for (const key of Object.keys(newProps)) {
+        const value = newProps[key];
+        if (key === "children" ||
+            key === "key" ||
+            key === "dangerouslySetInnerHTML" ||
+            key === "nodes")
+            continue;
+        if (key.startsWith("on") && typeof value === "function") {
+            const eventName = key.substring(2).toLowerCase();
+            updateEventListener(el, eventName, value, el.__webjsx_listeners?.[eventName]);
+        }
+        else if (value !== oldProps[key]) {
+            updatePropOrAttr(el, key, value);
+        }
+    }
+    // Handle dangerouslySetInnerHTML
+    if (newProps.dangerouslySetInnerHTML) {
+        if (!oldProps.dangerouslySetInnerHTML ||
+            newProps.dangerouslySetInnerHTML.__html !==
+                oldProps.dangerouslySetInnerHTML.__html) {
+            const html = newProps.dangerouslySetInnerHTML?.__html || "";
+            el.innerHTML = html;
+        }
+    }
+    else {
+        if (oldProps.dangerouslySetInnerHTML) {
+            el.innerHTML = "";
+        }
+    }
+    // Remove old props/attributes
+    for (const key of Object.keys(oldProps)) {
+        if (!(key in newProps) &&
+            key !== "children" &&
+            key !== "key" &&
+            key !== "dangerouslySetInnerHTML" &&
+            key !== "nodes") {
+            if (key.startsWith("on")) {
+                const eventName = key.substring(2).toLowerCase();
+                const existingListener = el
+                    .__webjsx_listeners?.[eventName];
+                if (existingListener) {
+                    el.removeEventListener(eventName, existingListener);
+                    delete el.__webjsx_listeners[eventName];
+                }
+            }
+            else if (key in el) {
+                el[key] = undefined;
+            }
+            else {
+                el.removeAttribute(key);
+            }
+        }
+    }
+}
+/**
+ * Sets initial attributes and properties on a DOM element.
+ * @param el Target element
+ * @param props Properties to apply
+ */
+function setAttributes(el, props) {
+    if (definesRenderSuspension(el)) {
+        withRenderSuspension(el, () => {
+            updateAttributesCore(el, props);
+        });
+    }
+    else {
+        updateAttributesCore(el, props);
+    }
+}
+/**
+ * Updates existing attributes and properties on a DOM element.
+ * @param el Target element
+ * @param newProps New properties to apply
+ * @param oldProps Previous properties for comparison
+ */
+function updateAttributes(el, newProps, oldProps) {
+    if (definesRenderSuspension(el)) {
+        withRenderSuspension(el, () => {
+            updateAttributesCore(el, newProps, oldProps);
+        });
+    }
+    else {
+        updateAttributesCore(el, newProps, oldProps);
+    }
+}
+
+// === createDOMElement.js ===
+/**
+ * Creates a real DOM node from a virtual node representation.
+ * @param velement Virtual node to convert
+ * @param parentNamespaceURI Namespace URI from parent element, if any
+ * @returns Created DOM node
+ */
+function createDOMElement(velement, parentNamespaceURI) {
+    const namespaceURI = velement.props.xmlns !== undefined
+        ? velement.props.xmlns
+        : velement.type === "svg"
+            ? SVG_NAMESPACE
+            : parentNamespaceURI ?? undefined;
+    const el = velement.props.is !== undefined
+        ? namespaceURI !== undefined
+            ? document.createElementNS(namespaceURI, velement.type, {
+                is: velement.props.is,
+            })
+            : document.createElement(velement.type, {
+                is: velement.props.is,
+            })
+        : namespaceURI !== undefined
+            ? document.createElementNS(namespaceURI, velement.type)
+            : document.createElement(velement.type);
+    if (velement.props) {
+        setAttributes(el, velement.props);
+    }
+    if (velement.props.key !== undefined) {
+        el.__webjsx_key = velement.props.key;
+    }
+    if (velement.props.ref) {
+        assignRef(el, velement.props.ref);
+    }
+    if (velement.props.children && !velement.props.dangerouslySetInnerHTML) {
+        const children = velement.props.children;
+        const nodes = [];
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            const node = isVElement(child)
+                ? createDOMElement(child, namespaceURI)
+                : document.createTextNode(`${child}`);
+            nodes.push(node);
+            el.appendChild(node);
+        }
+        setWebJSXProps(el, velement.props);
+        setWebJSXChildNodeCache(el, nodes);
+    }
+    return el;
+}
+
+// === createElement.js ===
+/**
+ * Creates a virtual element representing a DOM node or Fragment.
+ * @param type Element type (tag name) or Fragment
+ * @param props Properties and attributes for the element
+ * @param children Child elements or content
+ * @returns Virtual element representation
+ */
+function createElement(type, props, ...children) {
+    if (typeof type === "string") {
+        const normalizedProps = props ? props : {};
+        const flatChildren = flattenVNodes(children);
+        if (flatChildren.length > 0) {
+            // Set children property only if dangerouslySetInnerHTML is not present
+            if (!normalizedProps.dangerouslySetInnerHTML) {
+                normalizedProps.children = flatChildren;
+            }
+            else {
+                normalizedProps.children = [];
+                console.warn("WebJSX: Ignoring children since dangerouslySetInnerHTML is set.");
+            }
+        }
+        else {
+            normalizedProps.children = [];
+        }
+        const result = {
+            type,
+            tagName: KNOWN_ELEMENTS.get(type) ?? type.toUpperCase(),
+            props: normalizedProps ?? {},
+        };
+        return result;
+    }
+    else {
+        return flattenVNodes(children);
+    }
+}
+// As called from jsx-runtime.jsx function.
+function createElementJSX(type, props, key) {
+    if (typeof type === "string") {
+        props = props || {};
+        const flatChildren = props
+            ? flattenVNodes(props.children)
+            : [];
+        if (key !== undefined) {
+            props.key = key;
+        }
+        if (flatChildren.length > 0) {
+            // Set children property only if dangerouslySetInnerHTML is not present
+            if (!props.dangerouslySetInnerHTML) {
+                props.children = flatChildren;
+            }
+            else {
+                props.children = [];
+                console.warn("WebJSX: Ignoring children since dangerouslySetInnerHTML is set.");
+            }
+        }
+        else {
+            props.children = [];
+        }
+        const result = {
+            type,
+            tagName: KNOWN_ELEMENTS.get(type) ?? type.toUpperCase(),
+            props: props ?? {},
+        };
+        return result;
+    }
+    else {
+        const flatChildren = props
+            ? flattenVNodes(props.children)
+            : [];
+        return flatChildren;
+    }
+}
+
+// === applyDiff.js ===
+function applyDiff(parent, vnodes) {
+    const newVNodes = flattenVNodes(vnodes);
+    const newNodes = diffChildren(parent, newVNodes);
+    const props = getWebJSXProps(parent);
+    props.children = newVNodes;
+    setWebJSXChildNodeCache(parent, newNodes);
+}
+function diffChildren(parent, newVNodes) {
+    const parentProps = getWebJSXProps(parent);
+    const oldVNodes = parentProps.children ?? [];
+    if (newVNodes.length === 0) {
+        if (oldVNodes.length > 0) {
+            parent.innerHTML = "";
+            return [];
+        }
+        else {
+            // If the parent
+            // a) never had any nodes
+            // b) OR was managing content via dangerouslySetInnerHTML
+            // we must not set parent.innerHTML = "";
+            return [];
+        }
+    }
+    const changes = [];
+    let keyedMap = null;
+    const originalChildNodes = getWebJSXChildNodeCache(parent) ?? getChildNodes(parent);
+    let hasKeyedNodes = false;
+    let nodeOrderUnchanged = true;
+    for (let i = 0; i < newVNodes.length; i++) {
+        const newVNode = newVNodes[i];
+        const oldVNode = oldVNodes[i];
+        const currentNode = originalChildNodes[i];
+        const newKey = isVElement(newVNode) ? newVNode.props.key : undefined;
+        if (newKey !== undefined) {
+            if (!keyedMap) {
+                hasKeyedNodes = true;
+                keyedMap = new Map();
+                for (let j = 0; j < oldVNodes.length; j++) {
+                    const matchingVNode = oldVNodes[j];
+                    const key = matchingVNode.props.key;
+                    if (key !== undefined) {
+                        const node = originalChildNodes[j];
+                        keyedMap.set(key, { node, oldVNode: matchingVNode });
+                    }
+                }
+            }
+            const keyedNode = keyedMap.get(newKey);
+            if (keyedNode) {
+                if (keyedNode.oldVNode !== oldVNode) {
+                    nodeOrderUnchanged = false;
+                }
+                changes.push({
+                    type: "update",
+                    node: keyedNode.node,
+                    newVNode,
+                    oldVNode: keyedNode.oldVNode,
+                });
+            }
+            else {
+                nodeOrderUnchanged = false;
+                changes.push({ type: "create", vnode: newVNode });
+            }
+        }
+        else {
+            if (!hasKeyedNodes &&
+                canUpdateVNodes(newVNode, oldVNode) &&
+                currentNode) {
+                changes.push({
+                    type: "update",
+                    node: currentNode,
+                    newVNode,
+                    oldVNode,
+                });
+            }
+            else {
+                nodeOrderUnchanged = false;
+                changes.push({ type: "create", vnode: newVNode });
+            }
+        }
+    }
+    if (changes.length) {
+        const { nodes, lastNode: lastPlacedNode } = applyChanges(parent, changes, originalChildNodes, nodeOrderUnchanged);
+        // Remove any remaining nodes
+        while (lastPlacedNode?.nextSibling) {
+            parent.removeChild(lastPlacedNode.nextSibling);
+        }
+        return nodes;
+    }
+    else {
+        return originalChildNodes;
+    }
+}
+function canUpdateVNodes(newVNode, oldVNode) {
+    if (oldVNode === undefined)
+        return false;
+    if (isNonBooleanPrimitive(newVNode) && isNonBooleanPrimitive(oldVNode)) {
+        return true;
+    }
+    else {
+        if (isVElement(oldVNode) && isVElement(newVNode)) {
+            const oldKey = oldVNode.props.key;
+            const newKey = newVNode.props.key;
+            return (oldVNode.tagName === newVNode.tagName &&
+                ((oldKey === undefined && newKey === undefined) ||
+                    (oldKey !== undefined && newKey !== undefined && oldKey === newKey)));
+        }
+        else {
+            return false;
+        }
+    }
+}
+function applyChanges(parent, changes, originalNodes, nodeOrderUnchanged) {
+    const nodes = [];
+    let lastPlacedNode = null;
+    for (const change of changes) {
+        if (change.type === "create") {
+            let node = undefined;
+            if (isVElement(change.vnode)) {
+                node = createDOMElement(change.vnode, getNamespaceURI(parent));
+            }
+            else {
+                node = document.createTextNode(`${change.vnode}`);
+            }
+            if (!lastPlacedNode) {
+                parent.prepend(node);
+            }
+            else {
+                parent.insertBefore(node, lastPlacedNode.nextSibling ?? null);
+            }
+            lastPlacedNode = node;
+            nodes.push(node);
+        }
+        else {
+            const { node, newVNode, oldVNode } = change;
+            if (isVElement(newVNode)) {
+                const oldProps = oldVNode?.props || {};
+                const newProps = newVNode.props;
+                updateAttributes(node, newProps, oldProps);
+                if (newVNode.props.key !== undefined) {
+                    node.__webjsx_key = newVNode.props.key;
+                }
+                else {
+                    if (oldVNode.props?.key) {
+                        delete node.__webjsx_key;
+                    }
+                }
+                if (newVNode.props.ref) {
+                    assignRef(node, newVNode.props.ref);
+                }
+                if (!newProps.dangerouslySetInnerHTML && newProps.children != null) {
+                    const childNodes = diffChildren(node, newProps.children);
+                    setWebJSXProps(node, newProps);
+                    setWebJSXChildNodeCache(node, childNodes);
+                }
+            }
+            else {
+                if (newVNode !== oldVNode) {
+                    node.textContent = `${newVNode}`;
+                }
+            }
+            if (!nodeOrderUnchanged) {
+                if (!lastPlacedNode) {
+                    if (node !== originalNodes[0]) {
+                        parent.prepend(node);
+                    }
+                }
+                else {
+                    if (lastPlacedNode.nextSibling !== node) {
+                        parent.insertBefore(node, lastPlacedNode.nextSibling ?? null);
+                    }
+                }
+            }
+            lastPlacedNode = node;
+            nodes.push(node);
+        }
+    }
+    return { nodes, lastNode: lastPlacedNode };
+}
+
+// === types.js ===
+const Fragment = (props) => {
+    return flattenVNodes(props.children);
+};
+
+window.webjsx = { createElement, applyDiff, createDOMElement, Fragment };
+})(typeof window !== 'undefined' ? window : globalThis);