brep-io-kernel 1.0.0

package/src/UI/ModelLibraryView.js

@@ -0,0 +1,194 @@
+const STYLE_ID = 'model-library-styles';
+
+function ensureStyles() {
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = `
+    .fm-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px solid #1f2937; background: transparent; transition: background-color .12s ease; }
+    .fm-row:hover { background: #0f172a; }
+    .fm-row.header { background: #111827; border-bottom: 1px solid #1f2937; padding-bottom: 8px; margin-bottom: 4px; }
+    .fm-row:last-child { border-bottom: 0; }
+    .fm-row.is-selected { background: rgba(59,130,246,.18); }
+    .fm-grow { flex: 1 1 auto; overflow: hidden; }
+    .fm-thumb { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 6px; border: 1px solid #1f2937; background: #0b0e14; object-fit: contain; image-rendering: auto; }
+    .fm-name { font-weight: 600; color: #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
+    .fm-date { font-size: 11px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
+    .fm-btn { background: rgba(255,255,255,.03); color: #f9fafb; border: 1px solid #374151; padding: 2px 6px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 12px; line-height: 1; min-width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, background-color .15s ease, transform .05s ease; }
+    .fm-btn:hover { border-color: #3b82f6; background: rgba(59,130,246,.12); }
+    .fm-btn:active { transform: translateY(1px); }
+    .fm-btn.danger { border-color: #7f1d1d; color: #fecaca; }
+    .fm-btn.danger:hover { border-color: #ef4444; background: rgba(239,68,68,.15); color: #fff; }
+    .fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 6px; }
+    .fm-item { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid #1f2937; border-radius: 8px; background: transparent; transition: background-color .12s ease, border-color .12s ease; cursor: pointer; }
+    .fm-item:hover { background: #0f172a; border-color: #334155; }
+    .fm-item.is-selected { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.25); }
+    .fm-item .fm-thumb { width: 60px; height: 60px; border: 1px solid #1f2937; background: #0b0e14; border-radius: 6px; }
+    .fm-item .fm-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; line-height: 1; }
+    .fm-empty { padding: 12px; color: #94a3b8; text-align: center; font-size: 13px; }
+  `;
+  document.head.appendChild(style);
+}
+
+export class ModelLibraryView {
+  constructor({
+    container,
+    iconsOnly = false,
+    allowDelete = false,
+    showOpenButton = true,
+    openButtonLabel = '📂',
+    deleteButtonLabel = '✕',
+    onOpen,
+    onDelete,
+    loadThumbnail,
+    emptyMessage = 'No entries.',
+    selectedName = null,
+  } = {}) {
+    if (!container) throw new Error('ModelLibraryView requires a container element.');
+    ensureStyles();
+    this.container = container;
+    this.iconsOnly = !!iconsOnly;
+    this.allowDelete = !!allowDelete;
+    this.showOpenButton = showOpenButton !== false;
+    this.openButtonLabel = openButtonLabel;
+    this.deleteButtonLabel = deleteButtonLabel;
+    this.onOpen = typeof onOpen === 'function' ? onOpen : () => {};
+    this.onDelete = typeof onDelete === 'function' ? onDelete : null;
+    this.loadThumbnail = typeof loadThumbnail === 'function' ? loadThumbnail : null;
+    this.emptyMessage = emptyMessage;
+    this.selectedName = selectedName;
+  }
+
+  setIconsOnly(flag) {
+    this.iconsOnly = !!flag;
+  }
+
+  setSelected(name) {
+    this.selectedName = name || null;
+  }
+
+  setEmptyMessage(message) {
+    this.emptyMessage = message;
+  }
+
+  render(items) {
+    const list = Array.isArray(items) ? items : [];
+    while (this.container.firstChild) this.container.removeChild(this.container.firstChild);
+    if (!list.length) {
+      const empty = document.createElement('div');
+      empty.className = 'fm-empty';
+      empty.textContent = this.emptyMessage;
+      this.container.appendChild(empty);
+      return;
+    }
+    if (this.iconsOnly) {
+      this._renderIconsView(list);
+    } else {
+      this._renderListView(list);
+    }
+  }
+
+  _renderListView(items) {
+    for (const entry of items) {
+      const row = document.createElement('div');
+      row.className = 'fm-row';
+      if (this.selectedName && entry.name === this.selectedName) row.classList.add('is-selected');
+
+      const thumb = document.createElement('img');
+      thumb.className = 'fm-thumb';
+      thumb.alt = `${entry.name} thumbnail`;
+      this._applyThumbnail(entry, thumb);
+      thumb.addEventListener('click', () => this.onOpen(entry.name, entry));
+      row.appendChild(thumb);
+
+      const left = document.createElement('div');
+      left.className = 'fm-left fm-grow';
+      const nameBtn = document.createElement('div');
+      nameBtn.className = 'fm-name';
+      nameBtn.textContent = entry.name;
+      nameBtn.addEventListener('click', () => this.onOpen(entry.name, entry));
+      left.appendChild(nameBtn);
+      const dateLine = document.createElement('div');
+      dateLine.className = 'fm-date';
+      const dt = new Date(entry.savedAt);
+      dateLine.textContent = isNaN(dt) ? String(entry.savedAt || '') : dt.toLocaleString();
+      left.appendChild(dateLine);
+      row.appendChild(left);
+
+      if (this.showOpenButton) {
+        const openBtn = document.createElement('button');
+        openBtn.type = 'button';
+        openBtn.className = 'fm-btn';
+        openBtn.textContent = this.openButtonLabel;
+        openBtn.addEventListener('click', () => this.onOpen(entry.name, entry));
+        row.appendChild(openBtn);
+      }
+
+      if (this.allowDelete && this.onDelete) {
+        const delBtn = document.createElement('button');
+        delBtn.type = 'button';
+        delBtn.className = 'fm-btn danger';
+        delBtn.textContent = this.deleteButtonLabel;
+        delBtn.addEventListener('click', (ev) => {
+          ev.stopPropagation();
+          this.onDelete(entry.name, entry);
+        });
+        row.appendChild(delBtn);
+      }
+
+      this.container.appendChild(row);
+    }
+  }
+
+  _renderIconsView(items) {
+    const grid = document.createElement('div');
+    grid.className = 'fm-grid';
+    this.container.appendChild(grid);
+
+    for (const entry of items) {
+      const cell = document.createElement('div');
+      cell.className = 'fm-item';
+      if (this.selectedName && entry.name === this.selectedName) cell.classList.add('is-selected');
+      const timestamp = new Date(entry.savedAt);
+      const timeLabel = isNaN(timestamp) ? String(entry.savedAt || '') : timestamp.toLocaleString();
+      cell.title = `${entry.name}\n${timeLabel}`;
+      cell.addEventListener('click', () => this.onOpen(entry.name, entry));
+
+      const img = document.createElement('img');
+      img.className = 'fm-thumb';
+      img.alt = `${entry.name} thumbnail`;
+      this._applyThumbnail(entry, img);
+      cell.appendChild(img);
+
+      if (this.allowDelete && this.onDelete) {
+        const delBtn = document.createElement('button');
+        delBtn.type = 'button';
+        delBtn.className = 'fm-btn danger fm-del';
+        delBtn.textContent = this.deleteButtonLabel;
+        delBtn.title = `Delete ${entry.name}`;
+        delBtn.addEventListener('click', (ev) => {
+          ev.stopPropagation();
+          this.onDelete(entry.name, entry);
+        });
+        cell.appendChild(delBtn);
+      }
+
+      grid.appendChild(cell);
+    }
+  }
+
+  _applyThumbnail(entry, imgEl) {
+    if (!this.loadThumbnail || !imgEl) return;
+    if (entry?.thumbnail) {
+      try { imgEl.src = entry.thumbnail; } catch {}
+    }
+    try {
+      const res = this.loadThumbnail(entry, imgEl);
+      if (res && typeof res.then === 'function') {
+        res.catch(() => {});
+      }
+    } catch {
+      // ignore thumbnail load errors
+    }
+  }
+}

package/src/UI/OrthoCameraIdle.js

@@ -0,0 +1,206 @@
+// OrthoCameraIdle.js
+// ES6, no frameworks. three >= 0.150
+// Usage example at bottom.
+
+import { OrthographicCamera, Matrix4 } from 'three';
+
+export class OrthoCameraIdle extends OrthographicCamera {
+  constructor(left, right, top, bottom, near = 0.000000001, far = 200000000) {
+    super(left, right, top, bottom, near, far);
+
+    this._idle = {
+      onIdle: null,
+      onMove: null,
+      idleMs: 250,
+      matrixEpsilon: 1e-6,
+      projEpsilon: 1e-6,
+      controls: null,
+      prevWorld: new Matrix4(),
+      prevProj: new Matrix4(),
+      lastChange: performance.now(),
+      moving: false,
+      raf: 0,
+      disposed: true,
+      _controlsHandler: this._handleControlsChange.bind(this)
+    };
+
+    this.updateMatrixWorld(true);
+    this._idle.prevWorld.copy(this.matrixWorld);
+    this._idle.prevProj.copy(this.projectionMatrix);
+  }
+
+  /**
+   * Start watching for camera idle/move.
+   * @param {Object} opts
+   * @param {Function} opts.onIdle   - required
+   * @param {Function} [opts.onMove] - optional
+   * @param {number}   [opts.idleMs=250]
+   * @param {number}   [opts.matrixEpsilon=1e-6]
+   * @param {number}   [opts.projEpsilon=1e-6]
+   * @param {Object}   [opts.controls] - ArcballControls instance
+   */
+  enableIdleCallbacks({
+    onIdle,
+    onMove = null,
+    idleMs = 250,
+    matrixEpsilon = 1e-6,
+    projEpsilon = 1e-6,
+    controls = null
+  } = {}) {
+    if (typeof onIdle !== 'function') {
+      throw new Error('OrthoCameraIdle.enableIdleCallbacks: onIdle(callback) is required.');
+    }
+
+    const s = this._idle;
+    this.disableIdleCallbacks(); // reset if already running
+
+    s.onIdle = onIdle;
+    s.onMove = typeof onMove === 'function' ? onMove : null;
+    s.idleMs = idleMs;
+    s.matrixEpsilon = matrixEpsilon;
+    s.projEpsilon = projEpsilon;
+    s.controls = controls || null;
+    s.lastChange = performance.now();
+    s.moving = false;
+    s.disposed = false;
+
+    if (s.controls && typeof s.controls.addEventListener === 'function') {
+      s.controls.addEventListener('start', s._controlsHandler);
+      s.controls.addEventListener('change', s._controlsHandler);
+      s.controls.addEventListener('end', s._controlsHandler);
+      s.controls.addEventListener('wheel', s._controlsHandler);
+    }
+
+    const loop = () => {
+      if (s.disposed) return;
+      const now = performance.now();
+
+      // ensure matrices current
+      this.updateMatrixWorld(true);
+
+      // detect any change in world transform OR projection (covers zoom/frustum)
+      let changed = this._matrixChanged(this.matrixWorld, s.prevWorld, s.matrixEpsilon);
+      if (!changed) {
+        changed = this._matrixChanged(this.projectionMatrix, s.prevProj, s.projEpsilon);
+      }
+
+      if (changed) {
+        s.prevWorld.copy(this.matrixWorld);
+        s.prevProj.copy(this.projectionMatrix);
+        s.lastChange = now;
+        if (!s.moving) {
+          s.moving = true;
+          if (s.onMove) s.onMove();
+        }
+      } else if (s.moving && (now - s.lastChange) >= s.idleMs) {
+        s.moving = false;
+        s.onIdle();
+      }
+
+      s.raf = requestAnimationFrame(loop);
+    };
+
+    s.raf = requestAnimationFrame(loop);
+    return this;
+  }
+
+  /**
+   * Stop watching and detach any listeners.
+   */
+  disableIdleCallbacks() {
+    const s = this._idle;
+    if (s.disposed) return this;
+    s.disposed = true;
+    cancelAnimationFrame(s.raf);
+    if (s.controls && typeof s.controls.removeEventListener === 'function') {
+      s.controls.removeEventListener('start', s._controlsHandler);
+      s.controls.removeEventListener('change', s._controlsHandler);
+      s.controls.removeEventListener('end', s._controlsHandler);
+      s.controls.removeEventListener('wheel', s._controlsHandler);
+    }
+    s.controls = null;
+    return this;
+  }
+
+  /**
+   * Swap/attach ArcballControls at runtime (keeps callbacks/settings).
+   */
+  attachControls(controls) {
+    const s = this._idle;
+    s.controls = controls;
+    if (!s.disposed) {
+      // Rebind listeners cleanly
+      this.disableIdleCallbacks();
+      this.enableIdleCallbacks({
+        onIdle: s.onIdle,
+        onMove: s.onMove,
+        idleMs: s.idleMs,
+        matrixEpsilon: s.matrixEpsilon,
+        projEpsilon: s.projEpsilon,
+        controls
+      });
+    }
+    return this;
+  }
+
+  setIdleThreshold(ms) { this._idle.idleMs = ms; return this; }
+  setIdleEpsilon({ matrixEpsilon, projEpsilon } = {}) {
+    if (typeof matrixEpsilon === 'number') this._idle.matrixEpsilon = matrixEpsilon;
+    if (typeof projEpsilon === 'number') this._idle.projEpsilon = projEpsilon;
+    return this;
+  }
+  setIdleCallbacks({ onIdle, onMove } = {}) {
+    if (typeof onIdle === 'function') this._idle.onIdle = onIdle;
+    if (typeof onMove === 'function' || onMove === null) this._idle.onMove = onMove;
+    return this;
+  }
+
+  // --- internals ---
+  _handleControlsChange() {
+    const s = this._idle;
+    if (s.disposed) return;
+    s.lastChange = performance.now();
+    if (!s.moving) {
+      s.moving = true;
+      if (s.onMove) s.onMove();
+    }
+  }
+
+  _matrixChanged(a, b, eps) {
+    const ae = a.elements, be = b.elements;
+    // Quick translation check (12, 13, 14)
+    if (Math.abs(ae[12] - be[12]) > eps) return true;
+    if (Math.abs(ae[13] - be[13]) > eps) return true;
+    if (Math.abs(ae[14] - be[14]) > eps) return true;
+    // Remaining entries
+    for (let i = 0; i < 12; i++) {
+      if (Math.abs(ae[i] - be[i]) > eps) return true;
+    }
+    if (Math.abs(ae[15] - be[15]) > eps) return true;
+    return false;
+  }
+}
+
+/* ---------- Minimal usage ----------
+import { WebGLRenderer } from 'three';
+import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls.js';
+import { OrthoCameraIdle } from './OrthoCameraIdle.js';
+
+const renderer = new WebGLRenderer({ antialias: true });
+document.body.appendChild(renderer.domElement);
+
+const cam = new OrthoCameraIdle(-2, 2, 2, -2, 0.1, 1000);
+cam.position.set(5, 5, 5);
+cam.lookAt(0, 0, 0);
+
+const controls = new ArcballControls(cam, renderer.domElement);
+controls.update();
+
+cam.enableIdleCallbacks({
+  controls,
+  idleMs: 300,
+  onMove: () => console.log('camera moving...'),
+  onIdle: () => console.log('camera stopped.')
+});
+------------------------------------*/
+

package/src/UI/PluginsWidget.js

@@ -0,0 +1,280 @@
+// PluginsWidget - manage plugin URLs (GitHub repos or generic base/entry URLs)
+import { getSavedPluginUrls, savePluginUrls, loadPlugins, parseGithubUrl, getPluginEnabledMap, savePluginEnabledMap } from '../plugins/pluginManager.js';
+
+export class PluginsWidget {
+  constructor(viewer) {
+    this.viewer = viewer;
+    this.uiElement = document.createElement('div');
+    this._ensureStyles();
+    this._buildUI();
+  }
+
+  _ensureStyles() {
+    if (document.getElementById('plugins-widget-styles')) return;
+    const style = document.createElement('style');
+    style.id = 'plugins-widget-styles';
+    style.textContent = `
+      .plg-col { display: flex; flex-direction: column; gap: 6px; }
+      .plg-row { display: flex; gap: 6px; align-items: center; }
+      .plg-list { width: 100%; min-height: 120px; max-height: 220px; overflow: auto; background: #0b0e14; color: #e5e7eb; border: 1px solid #1f2937; border-radius: 8px; padding: 4px; }
+      .plg-item { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: default; }
+      .plg-item:hover { background: rgba(255,255,255,.03); }
+      .plg-item.selected { outline: 1px solid #374151; background: rgba(59,130,246,.08); }
+      .plg-url { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; user-select: text; }
+      .plg-btn { background: rgba(255,255,255,.03); color: #f9fafb; border: 1px solid #374151; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 12px; line-height: 1; transition: border-color .15s ease, background-color .15s ease, transform .05s ease; }
+      .plg-btn:hover { border-color: #3b82f6; background: rgba(59,130,246,.12); }
+      .plg-btn:active { transform: translateY(1px); }
+      .plg-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
+      .plg-hint { color: #9aa0aa; font-size: 11px; }
+      .plg-status { color: #9ca3af; font-size: 11px; white-space: pre-wrap; }
+
+      /* Modal styles */
+      .plg-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
+      .plg-modal { background: #0b0e14; color: #e5e7eb; border: 1px solid #1f2937; border-radius: 10px; padding: 14px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
+      .plg-modal h3 { margin: 0 0 8px 0; font-size: 14px; }
+      .plg-modal p { margin: 6px 0; color: #9aa0aa; font-size: 12px; }
+      .plg-input { width: 100%; border-radius: 8px; padding: 6px 8px; margin-bottom: 20px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
+      .plg-modal .plg-row { margin-top: 10px; justify-content: flex-end; }
+      .plg-err { color: #ef4444; font-size: 12px; min-height: 16px; }
+    `;
+    document.head.appendChild(style);
+  }
+
+  _buildUI() {
+    const col = document.createElement('div');
+    col.className = 'plg-col';
+    // internal list state
+    this.urls = getSavedPluginUrls();
+    this.enabledMap = getPluginEnabledMap();
+    this._selectedIndex = -1;
+
+    // List of plugins as a custom list with checkboxes
+    this.listEl = document.createElement('div');
+    this.listEl.className = 'plg-list';
+    this._refreshList();
+
+    const actions = document.createElement('div');
+    actions.className = 'plg-row';
+    const addBtn = document.createElement('button');
+    addBtn.className = 'plg-btn';
+    addBtn.textContent = 'Add';
+    this.delBtn = document.createElement('button');
+    this.delBtn.className = 'plg-btn';
+    this.delBtn.textContent = 'Delete';
+    const loadBtn = document.createElement('button');
+    loadBtn.className = 'plg-btn';
+    loadBtn.textContent = 'Load Plugins Now';
+    this.statusEl = document.createElement('div');
+    this.statusEl.className = 'plg-status';
+
+    addBtn.addEventListener('click', () => this._openAddModal());
+    this.delBtn.addEventListener('click', () => this._deleteSelected());
+    loadBtn.addEventListener('click', async () => {
+      this._setStatus('Loading...');
+      const list = Array.isArray(this.urls) ? this.urls : [];
+      const enabled = this.enabledMap && typeof this.enabledMap === 'object' ? this.enabledMap : {};
+      const toLoad = list.filter(u => enabled[u] !== false);
+      const res = await loadPlugins(this.viewer, toLoad || []);
+      const lines = res.map(r => `${r.ok ? 'OK' : 'ERR'}  ${r.url}${r.ok ? '' : '  ' + (r.error?.message || r.error)}`);
+      this._setStatus(lines.join('\n') || 'No plugins listed.');
+    });
+
+    actions.appendChild(addBtn);
+    actions.appendChild(this.delBtn);
+    actions.appendChild(loadBtn);
+
+
+    col.appendChild(this.listEl);
+    col.appendChild(actions);
+    col.appendChild(this.statusEl);
+    this.uiElement.appendChild(col);
+  }
+
+  _refreshList() {
+    try { this.listEl.innerHTML = ''; } catch { }
+    const list = Array.isArray(this.urls) ? this.urls : [];
+    const enabled = this.enabledMap && typeof this.enabledMap === 'object' ? this.enabledMap : {};
+    if (!list.length) {
+      const empty = document.createElement('div');
+      empty.className = 'plg-item';
+      empty.style.opacity = '0.7';
+      empty.textContent = 'No plugins saved';
+      this.listEl.appendChild(empty);
+      this._selectedIndex = -1;
+    } else {
+      list.forEach((url, idx) => {
+        const row = document.createElement('div');
+        row.className = 'plg-item' + (idx === this._selectedIndex ? ' selected' : '');
+
+        const cb = document.createElement('input');
+        cb.type = 'checkbox';
+        cb.checked = enabled[url] !== false; // default to true
+        cb.title = 'Enable/disable loading this plugin';
+        cb.addEventListener('change', () => {
+          this.enabledMap[url] = Boolean(cb.checked);
+          try { savePluginEnabledMap(this.enabledMap); } catch {}
+        });
+
+        const label = document.createElement('div');
+        label.className = 'plg-url';
+        label.textContent = url;
+
+        const selectRow = (e) => {
+          // Avoid toggling selection when clicking checkbox intentionally
+          if (e && e.target === cb) return;
+          this._selectedIndex = idx;
+          Array.from(this.listEl.children).forEach((child, i) => {
+            if (!(child instanceof HTMLElement)) return;
+            child.classList.toggle('selected', i === idx);
+          });
+          if (this.delBtn) this.delBtn.disabled = list.length === 0 || this._selectedIndex < 0;
+        };
+        row.addEventListener('click', selectRow);
+
+        row.appendChild(cb);
+        row.appendChild(label);
+        this.listEl.appendChild(row);
+      });
+      if (this._selectedIndex < 0 && list.length > 0) {
+        this._selectedIndex = 0;
+        if (this.listEl.firstChild) this.listEl.firstChild.classList.add('selected');
+      }
+    }
+    if (this.delBtn) this.delBtn.disabled = list.length === 0 || this._selectedIndex < 0;
+  }
+
+  _save() { try { savePluginUrls(this.urls || []); } catch { } }
+
+  _openAddModal() {
+    const overlay = document.createElement('div');
+    overlay.className = 'plg-modal-overlay';
+    const modal = document.createElement('div');
+    modal.className = 'plg-modal';
+
+    const title = document.createElement('h3');
+    title.textContent = 'Add third-party plugin';
+    const h2 = document.createElement('h2');
+    h2.style.color = 'red';
+    h2.innerHTML = `Installing third-party plugins can be risky. <br><br>
+    These plugins run code that we do not control, and malicious or poorly written plugins could compromise your data, expose sensitive information, or harm the stability and security of your application.
+    <br><br>Only proceed if you fully trust the source of the plugin.
+    <br><br>Enter either:
+    <br>- a GitHub repository URL (e.g., https://github.com/USER/REPO or with /tree/branch)
+    <br>- or a base/entry URL where plugin files are served (e.g., http://localhost:8080/ or https://example.com/my-plugin/plugin.js)`;
+
+    const urlInput = document.createElement('input');
+    urlInput.className = 'plg-input';
+    urlInput.placeholder = 'GitHub repo or base/entry URL (e.g., https://github.com/USER/REPO or http://localhost:8080/)';
+
+    const p2 = document.createElement('h2');
+    p2.innerHTML = '<br>To proceed, type "yes" below to confirm you understand the risks of third-party plugins.';
+    const confirmInput = document.createElement('input');
+    confirmInput.className = 'plg-input';
+    confirmInput.placeholder = 'type yes to confirm';
+
+    const err = document.createElement('div');
+    err.className = 'plg-err';
+
+    const buttons = document.createElement('div');
+    buttons.className = 'plg-row';
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className = 'plg-btn';
+    cancelBtn.textContent = 'Cancel';
+    const okBtn = document.createElement('button');
+    okBtn.className = 'plg-btn';
+    okBtn.textContent = 'Add Plugin';
+    okBtn.disabled = true;
+
+    const close = () => { try { document.body.removeChild(overlay); } catch { } };
+
+    const validate = () => {
+      const v = String(urlInput.value || '').trim();
+      const c = String(confirmInput.value || '').trim().toLowerCase();
+      let urlOk = false;
+      err.textContent = '';
+      if (v) {
+        try {
+          const u = new URL(v);
+          if (u.protocol === 'http:' || u.protocol === 'https:') {
+            if (u.hostname === 'github.com') {
+              // Enforce GitHub URL shape if it's a GitHub host
+              parseGithubUrl(v);
+            }
+            urlOk = true;
+          } else {
+            throw new Error('URL must start with http(s)');
+          }
+        } catch (e) {
+          urlOk = false;
+          err.textContent = String(e?.message || 'Invalid URL');
+        }
+      }
+      const confirmed = c === 'yes';
+      okBtn.disabled = !(urlOk && confirmed);
+    };
+
+    urlInput.addEventListener('input', validate);
+    confirmInput.addEventListener('input', validate);
+    cancelBtn.addEventListener('click', close);
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
+    okBtn.addEventListener('click', () => {
+      const v = String(urlInput.value || '').trim();
+      const c = String(confirmInput.value || '').trim().toLowerCase();
+      if (!v || c !== 'yes') return; // safety
+      // For GitHub URLs, ensure shape is valid; otherwise accept generic http(s) URL
+      try {
+        const u = new URL(v);
+        if (u.hostname === 'github.com') parseGithubUrl(v);
+      } catch { return; }
+      // prevent duplicates
+      this.urls = Array.isArray(this.urls) ? this.urls : [];
+      if (!this.urls.includes(v)) this.urls.push(v);
+      this._save();
+      // Default to enabled when adding
+      try {
+        this.enabledMap = this.enabledMap && typeof this.enabledMap === 'object' ? this.enabledMap : {};
+        this.enabledMap[v] = true;
+        savePluginEnabledMap(this.enabledMap);
+      } catch { }
+      this._refreshList();
+      this._setStatus('Saved.');
+      close();
+    });
+
+    modal.appendChild(title);
+    modal.appendChild(h2);
+    modal.appendChild(urlInput);
+    modal.appendChild(p2);
+    modal.appendChild(confirmInput);
+    modal.appendChild(err);
+    buttons.appendChild(cancelBtn);
+    buttons.appendChild(okBtn);
+    modal.appendChild(buttons);
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+
+    try { urlInput.focus(); } catch { }
+  }
+
+  _deleteSelected() {
+    const idx = this._selectedIndex;
+    const list = Array.isArray(this.urls) ? this.urls : [];
+    if (idx < 0 || idx >= list.length) return;
+    const [removed] = list.splice(idx, 1);
+    this.urls = list;
+    this._save();
+    try {
+      if (removed && this.enabledMap && typeof this.enabledMap === 'object') {
+        delete this.enabledMap[removed];
+        savePluginEnabledMap(this.enabledMap);
+      }
+    } catch { }
+    this._selectedIndex = Math.min(idx, Math.max(0, list.length - 1));
+    this._refreshList();
+    this._setStatus('Deleted.');
+  }
+
+  _setStatus(text) {
+    this.statusEl.textContent = String(text || '');
+  }
+}