@nuxt/nitro-server 4.2.2 → 4.3.0

package/dist/runtime/utils/dev.mjs

@@ -0,0 +1,985 @@
+const iframeStorageBridge = (nonce) => `
+(function () {
+  const NONCE = ${JSON.stringify(nonce)};
+  const memoryStore = Object.create(null);
+
+  const post = (type, payload) => {
+    window.parent.postMessage({ type, nonce: NONCE, ...payload }, '*');
+  };
+
+  const isValid = (data) => data && data.nonce === NONCE;
+
+  const mockStorage = {
+    getItem(key) {
+      return Object.hasOwn(memoryStore, key)
+        ? memoryStore[key]
+        : null;
+    },
+    setItem(key, value) {
+      const v = String(value);
+      memoryStore[key] = v;
+      post('storage-set', { key, value: v });
+    },
+    removeItem(key) {
+      delete memoryStore[key];
+      post('storage-remove', { key });
+    },
+    clear() {
+      for (const key of Object.keys(memoryStore))
+        delete memoryStore[key];
+      post('storage-clear', {});
+    },
+    key(index) {
+      const keys = Object.keys(memoryStore);
+      return keys[index] ?? null;
+    },
+    get length() {
+      return Object.keys(memoryStore).length;
+    }
+  };
+
+  const defineLocalStorage = () => {
+    try {
+      Object.defineProperty(window, 'localStorage', {
+        value: mockStorage,
+        writable: false,
+        configurable: true
+      });
+    } catch {
+      window.localStorage = mockStorage;
+    }
+  };
+
+  defineLocalStorage();
+
+  window.addEventListener('message', (event) => {
+    const data = event.data;
+    if (!isValid(data) || data.type !== 'storage-sync-data') return;
+
+    const incoming = data.data || {};
+    for (const key of Object.keys(incoming))
+      memoryStore[key] = incoming[key];
+
+    if (typeof window.initTheme === 'function')
+      window.initTheme();
+    window.dispatchEvent(new Event('storage-ready'));
+  });
+
+  // Clipboard API is unavailable in data: URL iframe, so we use postMessage
+  document.addEventListener('DOMContentLoaded', function() {
+    window.copyErrorMessage = function(button) {
+      post('clipboard-copy', { text: button.dataset.errorText });
+      button.classList.add('copied');
+      setTimeout(function() { button.classList.remove('copied'); }, 2000);
+    };
+  });
+
+  post('storage-sync-request', {});
+})();
+`;
+const parentStorageBridge = (nonce) => `
+(function () {
+  const host = document.querySelector('nuxt-error-overlay');
+  if (!host) return;
+
+  const NONCE = ${JSON.stringify(nonce)};
+  const isValid = (data) => data && data.nonce === NONCE;
+
+  // Handle clipboard copy from iframe
+  window.addEventListener('message', function(e) {
+    if (isValid(e) && e.data.type === 'clipboard-copy') {
+      navigator.clipboard.writeText(e.data.text).catch(function() {});
+    }
+  });
+
+  const collectLocalStorage = () => {
+    const all = {};
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i);
+      if (k != null) all[k] = localStorage.getItem(k);
+    }
+    return all;
+  };
+
+  const attachWhenReady = () => {
+    const root = host.shadowRoot;
+    if (!root)
+      return false;
+    const iframe = root.getElementById('frame');
+    if (!iframe || !iframe.contentWindow)
+      return false;
+
+    const handlers = {
+      'storage-set': (d) => localStorage.setItem(d.key, d.value),
+      'storage-remove': (d) => localStorage.removeItem(d.key),
+      'storage-clear': () => localStorage.clear(),
+      'storage-sync-request': () => {
+        iframe.contentWindow.postMessage({
+          type: 'storage-sync-data',
+          data: collectLocalStorage(),
+          nonce: NONCE
+        }, '*');
+      }
+    };
+
+    window.addEventListener('message', (event) => {
+      const data = event.data;
+      if (!isValid(data)) return;
+      const fn = handlers[data.type];
+      if (fn) fn(data);
+    });
+
+    return true;
+  };
+
+  if (attachWhenReady())
+    return;
+
+  const obs = new MutationObserver(() => {
+    if (attachWhenReady())
+      obs.disconnect();
+  });
+
+  obs.observe(host, { childList: true, subtree: true });
+})();
+`;
+const errorCSS = `
+:host {
+  --preview-width: 240px;
+  --preview-height: 180px;
+  --base-width: 1200px;
+  --base-height: 900px;
+  --z-base: 999999998;
+  --error-pip-left: auto;
+  --error-pip-top: auto;
+  --error-pip-right: 5px;
+  --error-pip-bottom: 5px;
+  --error-pip-origin: bottom right;
+  --app-preview-left: auto;
+  --app-preview-top: auto;
+  --app-preview-right: 5px;
+  --app-preview-bottom: 5px;
+  all: initial;
+  display: contents;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+#frame {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  border: none;
+  z-index: var(--z-base);
+}
+#frame[inert] {
+  left: var(--error-pip-left);
+  top: var(--error-pip-top);
+  right: var(--error-pip-right);
+  bottom: var(--error-pip-bottom);
+  width: var(--base-width);
+  height: var(--base-height);
+  transform: scale(calc(240 / 1200));
+  transform-origin: var(--error-pip-origin);
+  overflow: hidden;
+  border-radius: calc(1200 * 8px / 240);
+}
+#preview {
+  position: fixed;
+  left: var(--app-preview-left);
+  top: var(--app-preview-top);
+  right: var(--app-preview-right);
+  bottom: var(--app-preview-bottom);
+  width: var(--preview-width);
+  height: var(--preview-height);
+  overflow: hidden;
+  border-radius: 6px;
+  pointer-events: none;
+  z-index: var(--z-base);
+  background: white;
+  display: none;
+}
+#preview iframe {
+  transform-origin: var(--error-pip-origin);
+}
+#frame:not([inert]) + #preview {
+  display: block;
+}
+#toggle {
+  position: fixed;
+  left: var(--app-preview-left);
+  top: var(--app-preview-top);
+  right: calc(var(--app-preview-right) - 3px);
+  bottom: calc(var(--app-preview-bottom) - 3px);
+  width: var(--preview-width);
+  height: var(--preview-height);
+  background: none;
+  border: 3px solid #00DC82;
+  border-radius: 8px;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.2s, box-shadow 0.2s;
+  z-index: calc(var(--z-base) + 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#toggle:hover,
+#toggle:focus {
+  opacity: 1;
+  box-shadow: 0 0 20px rgba(0, 220, 130, 0.6);
+}
+#toggle:focus-visible {
+  outline: 3px solid #00DC82;
+  outline-offset: 0;
+  box-shadow: 0 0 24px rgba(0, 220, 130, 0.8);
+}
+#frame[inert] ~ #toggle {
+  left: var(--error-pip-left);
+  top: var(--error-pip-top);
+  right: calc(var(--error-pip-right) - 3px);
+  bottom: calc(var(--error-pip-bottom) - 3px);
+  cursor: grab;
+}
+:host(.dragging) #frame[inert] ~ #toggle {
+  cursor: grabbing;
+}
+#frame:not([inert]) ~ #toggle,
+#frame:not([inert]) + #preview {
+  cursor: grab;
+}
+:host(.dragging-preview) #frame:not([inert]) ~ #toggle,
+:host(.dragging-preview) #frame:not([inert]) + #preview {
+  cursor: grabbing;
+}
+
+#pip-close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  font-size: 16px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+}
+#pip-close:focus-visible {
+  outline: 2px solid #00DC82;
+  outline-offset: 2px;
+}
+
+#pip-restore {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 2px solid #00DC82;
+  background: #111;
+  color: #fff;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  z-index: calc(var(--z-base) + 2);
+  cursor: grab;
+}
+#pip-restore:focus-visible {
+  outline: 2px solid #00DC82;
+  outline-offset: 2px;
+}
+:host(.dragging-restore) #pip-restore {
+  cursor: grabbing;
+}
+
+#frame[hidden],
+#toggle[hidden],
+#preview[hidden],
+#pip-restore[hidden],
+#pip-close[hidden] {
+  display: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #toggle {
+    transition: none;
+  }
+}
+`;
+function webComponentScript(base64HTML, startMinimized) {
+	return `
+(function () {
+  try {
+    // =========================
+    // Host + Shadow
+    // =========================
+    const host = document.querySelector('nuxt-error-overlay');
+    if (!host)
+      return;
+    const shadow = host.attachShadow({ mode: 'open' });
+
+    // =========================
+    // DOM helpers
+    // =========================
+    const el = (tag) => document.createElement(tag);
+    const on = (node, type, fn, opts) => node.addEventListener(type, fn, opts);
+    const hide = (node, v) => node.toggleAttribute('hidden', !!v);
+    const setVar = (name, value) => host.style.setProperty(name, value);
+    const unsetVar = (name) => host.style.removeProperty(name);
+
+    // =========================
+    // Create DOM
+    // =========================
+    const style = el('style');
+    style.textContent = ${JSON.stringify(errorCSS)};
+
+    const iframe = el('iframe');
+    iframe.id = 'frame';
+    iframe.src = 'data:text/html;base64,${base64HTML}';
+    iframe.title = 'Detailed error stack trace';
+    iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+
+    const preview = el('div');
+    preview.id = 'preview';
+
+    const toggle = el('div');
+    toggle.id = 'toggle';
+    toggle.setAttribute('aria-expanded', 'true');
+    toggle.setAttribute('role', 'button');
+    toggle.setAttribute('tabindex', '0');
+    toggle.innerHTML = '<span class="sr-only">Toggle detailed error view</span>';
+
+    const liveRegion = el('div');
+    liveRegion.setAttribute('role', 'status');
+    liveRegion.setAttribute('aria-live', 'polite');
+    liveRegion.className = 'sr-only';
+
+    const pipCloseButton = el('button');
+    pipCloseButton.id = 'pip-close';
+    pipCloseButton.setAttribute('type', 'button');
+    pipCloseButton.setAttribute('aria-label', 'Hide error preview overlay');
+    pipCloseButton.innerHTML = '&times;';
+    pipCloseButton.hidden = true;
+    toggle.appendChild(pipCloseButton);
+
+    const pipRestoreButton = el('button');
+    pipRestoreButton.id = 'pip-restore';
+    pipRestoreButton.setAttribute('type', 'button');
+    pipRestoreButton.setAttribute('aria-label', 'Show error overlay');
+    pipRestoreButton.innerHTML = '<span aria-hidden="true">⟲</span><span>Show error overlay</span>';
+    pipRestoreButton.hidden = true;
+
+    // Order matters: #frame + #preview adjacency
+    shadow.appendChild(style);
+    shadow.appendChild(liveRegion);
+    shadow.appendChild(iframe);
+    shadow.appendChild(preview);
+    shadow.appendChild(toggle);
+    shadow.appendChild(pipRestoreButton);
+
+    // =========================
+    // Constants / keys
+    // =========================
+    const POS_KEYS = {
+      position: 'nuxt-error-overlay:position',
+      hiddenPretty: 'nuxt-error-overlay:error-pip:hidden',
+      hiddenPreview: 'nuxt-error-overlay:app-preview:hidden'
+    };
+
+    const CSS_VARS = {
+      pip: {
+        left: '--error-pip-left',
+        top: '--error-pip-top',
+        right: '--error-pip-right',
+        bottom: '--error-pip-bottom'
+      },
+      preview: {
+        left: '--app-preview-left',
+        top: '--app-preview-top',
+        right: '--app-preview-right',
+        bottom: '--app-preview-bottom'
+      }
+    };
+
+    const MIN_GAP = 5;
+    const DRAG_THRESHOLD = 2;
+
+    // =========================
+    // Local storage safe access + state
+    // =========================
+    let storageReady = true;
+    let isPrettyHidden = false;
+    let isPreviewHidden = false;
+
+    const safeGet = (k) => {
+      try {
+        return localStorage.getItem(k);
+      } catch {
+        return null;
+      }
+    };
+
+    const safeSet = (k, v) => {
+      if (!storageReady) 
+        return;
+      try {
+        localStorage.setItem(k, v);
+      } catch {}
+    };
+
+    // =========================
+    // Sizing helpers
+    // =========================
+    const vvSize = () => {
+      const v = window.visualViewport;
+      return v ? { w: v.width, h: v.height } : { w: window.innerWidth, h: window.innerHeight };
+    };
+
+    const previewSize = () => {
+      const styles = getComputedStyle(host);
+      const w = parseFloat(styles.getPropertyValue('--preview-width')) || 240;
+      const h = parseFloat(styles.getPropertyValue('--preview-height')) || 180;
+      return { w, h };
+    };
+
+    const sizeForTarget = (target) => {
+      if (!target)
+        return previewSize();
+      const rect = target.getBoundingClientRect();
+      if (rect.width && rect.height)
+        return { w: rect.width, h: rect.height };
+      return previewSize();
+    };
+
+    // =========================
+    // Dock model + offset/alignment calculations
+    // =========================
+    const dock = { edge: null, offset: null, align: null, gap: null };
+
+    const maxOffsetFor = (edge, size) => {
+      const vv = vvSize();
+      if (edge === 'left' || edge === 'right')
+        return Math.max(MIN_GAP, vv.h - size.h - MIN_GAP);
+      return Math.max(MIN_GAP, vv.w - size.w - MIN_GAP);
+    };
+
+    const clampOffset = (edge, value, size) => {
+      const max = maxOffsetFor(edge, size);
+      return Math.min(Math.max(value, MIN_GAP), max);
+    };
+
+    const updateDockAlignment = (size) => {
+      if (!dock.edge || dock.offset == null)
+        return;
+      const max = maxOffsetFor(dock.edge, size);
+      if (dock.offset <= max / 2) {
+        dock.align = 'start';
+        dock.gap = dock.offset;
+      } else {
+        dock.align = 'end';
+        dock.gap = Math.max(0, max - dock.offset);
+      }
+    };
+
+    const appliedOffsetFor = (size) => {
+      if (!dock.edge || dock.offset == null)
+        return null;
+      const max = maxOffsetFor(dock.edge, size);
+
+      if (dock.align === 'end' && typeof dock.gap === 'number') {
+        return clampOffset(dock.edge, max - dock.gap, size);
+      }
+      if (dock.align === 'start' && typeof dock.gap === 'number') {
+        return clampOffset(dock.edge, dock.gap, size);
+      }
+      return clampOffset(dock.edge, dock.offset, size);
+    };
+
+    const nearestEdgeAt = (x, y) => {
+      const { w, h } = vvSize();
+      const d = { left: x, right: w - x, top: y, bottom: h - y };
+      return Object.keys(d).reduce((a, b) => (d[a] < d[b] ? a : b));
+    };
+
+    const cornerDefaultDock = () => {
+      const vv = vvSize();
+      const size = previewSize();
+      const offset = Math.max(MIN_GAP, vv.w - size.w - MIN_GAP);
+      return { edge: 'bottom', offset };
+    };
+
+    const currentTransformOrigin = () => {
+      if (!dock.edge) return null;
+      if (dock.edge === 'left' || dock.edge === 'top')
+        return 'top left';
+      if (dock.edge === 'right')
+        return 'top right';
+      return 'bottom left';
+    };
+
+    // =========================
+    // Persist / load dock
+    // =========================
+    const loadDock = () => {
+      const raw = safeGet(POS_KEYS.position);
+      if (!raw)
+        return;
+      try {
+        const parsed = JSON.parse(raw);
+        const { edge, offset, align, gap } = parsed || {};
+        if (!['left', 'right', 'top', 'bottom'].includes(edge))
+          return;
+        if (typeof offset !== 'number')
+          return;
+
+        dock.edge = edge;
+        dock.offset = clampOffset(edge, offset, previewSize());
+        dock.align = align === 'start' || align === 'end' ? align : null;
+        dock.gap = typeof gap === 'number' ? gap : null;
+
+        if (!dock.align || dock.gap == null)
+          updateDockAlignment(previewSize());
+      } catch {}
+    };
+
+    const persistDock = () => {
+      if (!dock.edge || dock.offset == null)
+        return; 
+      safeSet(POS_KEYS.position, JSON.stringify({
+        edge: dock.edge,
+        offset: dock.offset,
+        align: dock.align,
+        gap: dock.gap
+      }));
+    };
+
+    // =========================
+    // Apply dock
+    // =========================
+    const dockToVars = (vars) => ({
+      set: (side, v) => host.style.setProperty(vars[side], v),
+      clear: (side) => host.style.removeProperty(vars[side])
+    });
+
+    const dockToEl = (node) => ({
+      set: (side, v) => { node.style[side] = v; },
+      clear: (side) => { node.style[side] = ''; }
+    });
+
+    const applyDock = (target, size, opts) => {
+      if (!dock.edge || dock.offset == null) {
+        target.clear('left');
+        target.clear('top');
+        target.clear('right');
+        target.clear('bottom');
+        return;
+      }
+
+      target.set('left', 'auto');
+      target.set('top', 'auto');
+      target.set('right', 'auto');
+      target.set('bottom', 'auto');
+
+      const applied = appliedOffsetFor(size);
+
+      if (dock.edge === 'left') {
+        target.set('left', MIN_GAP + 'px');
+        target.set('top', applied + 'px');
+      } else if (dock.edge === 'right') {
+        target.set('right', MIN_GAP + 'px');
+        target.set('top', applied + 'px');
+      } else if (dock.edge === 'top') {
+        target.set('top', MIN_GAP + 'px');
+        target.set('left', applied + 'px');
+      } else {
+        target.set('bottom', MIN_GAP + 'px');
+        target.set('left', applied + 'px');
+      }
+
+      if (!opts || opts.persist !== false)
+        persistDock();
+    };
+
+    const applyDockAll = (opts) => {
+      applyDock(dockToVars(CSS_VARS.pip), previewSize(), opts);
+      applyDock(dockToVars(CSS_VARS.preview), previewSize(), opts);
+      applyDock(dockToEl(pipRestoreButton), sizeForTarget(pipRestoreButton), opts);
+    };
+
+    const repaintToDock = () => {
+      if (!dock.edge || dock.offset == null)
+        return;
+      const origin = currentTransformOrigin();
+      if (origin)
+        setVar('--error-pip-origin', origin);
+      else 
+        unsetVar('--error-pip-origin');
+      applyDockAll({ persist: false });
+    };
+
+    // =========================
+    // Hidden state + UI
+    // =========================
+    const loadHidden = () => {
+      const rawPretty = safeGet(POS_KEYS.hiddenPretty);
+      if (rawPretty != null)
+        isPrettyHidden = rawPretty === '1' || rawPretty === 'true';
+      const rawPreview = safeGet(POS_KEYS.hiddenPreview);
+      if (rawPreview != null)
+        isPreviewHidden = rawPreview === '1' || rawPreview === 'true';
+    };
+
+    const setPrettyHidden = (v) => {
+      isPrettyHidden = !!v;
+      safeSet(POS_KEYS.hiddenPretty, isPrettyHidden ? '1' : '0');
+      updateUI();
+    };
+
+    const setPreviewHidden = (v) => {
+      isPreviewHidden = !!v;
+      safeSet(POS_KEYS.hiddenPreview, isPreviewHidden ? '1' : '0');
+      updateUI();
+    };
+
+    const isMinimized = () => iframe.hasAttribute('inert');
+
+    const setMinimized = (v) => {
+      if (v) {
+        iframe.setAttribute('inert', '');
+        toggle.setAttribute('aria-expanded', 'false');
+      } else {
+        iframe.removeAttribute('inert');
+        toggle.setAttribute('aria-expanded', 'true');
+      }
+    };
+
+    const setRestoreLabel = (kind) => {
+      if (kind === 'pretty') {
+        pipRestoreButton.innerHTML = '<span aria-hidden="true">⟲</span><span>Show error overlay</span>';
+        pipRestoreButton.setAttribute('aria-label', 'Show error overlay');
+      } else {
+        pipRestoreButton.innerHTML = '<span aria-hidden="true">⟲</span><span>Show error page</span>';
+        pipRestoreButton.setAttribute('aria-label', 'Show error page');
+      }
+    };
+
+    const updateUI = () => {
+      const minimized = isMinimized();
+      const showPiP = minimized && !isPrettyHidden;
+      const showPreview = !minimized && !isPreviewHidden;
+      const pipHiddenByUser = minimized && isPrettyHidden;
+      const previewHiddenByUser = !minimized && isPreviewHidden;
+      const showToggle = minimized ? showPiP : showPreview;
+      const showRestore = pipHiddenByUser || previewHiddenByUser;
+
+      hide(iframe, pipHiddenByUser);
+      hide(preview, !showPreview);
+      hide(toggle, !showToggle);
+      hide(pipCloseButton, !showToggle);
+      hide(pipRestoreButton, !showRestore);
+
+      pipCloseButton.setAttribute('aria-label', minimized ? 'Hide error overlay' : 'Hide error page preview');
+
+      if (pipHiddenByUser)
+        setRestoreLabel('pretty');
+      else if (previewHiddenByUser)
+        setRestoreLabel('preview');
+
+      host.classList.toggle('pip-hidden', isPrettyHidden);
+      host.classList.toggle('preview-hidden', isPreviewHidden);
+    };
+
+    // =========================
+    // Preview snapshot
+    // =========================
+    const updatePreview = () => {
+      try {
+        let previewIframe = preview.querySelector('iframe');
+        if (!previewIframe) {
+          previewIframe = el('iframe');
+          previewIframe.style.cssText = 'width: 1200px; height: 900px; transform: scale(0.2); transform-origin: top left; border: none;';
+          previewIframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+          preview.appendChild(previewIframe);
+        }
+
+        const doctype = document.doctype ? '<!DOCTYPE ' + document.doctype.name + '>' : '';
+        const cleanedHTML = document.documentElement.outerHTML
+          .replace(/<nuxt-error-overlay[^>]*>.*?<\\/nuxt-error-overlay>/gs, '')
+          .replace(/<script[^>]*>.*?<\\/script>/gs, '');
+
+        const iframeDoc = previewIframe.contentDocument || previewIframe.contentWindow.document;
+        iframeDoc.open();
+        iframeDoc.write(doctype + cleanedHTML);
+        iframeDoc.close();
+      } catch (err) {
+        console.error('Failed to update preview:', err);
+      }
+    };
+
+    // =========================
+    // View toggling
+    // =========================
+    const toggleView = () => {
+      if (isMinimized()) {
+        updatePreview();
+        setMinimized(false);
+        liveRegion.textContent = 'Showing detailed error view';
+        setTimeout(() => { 
+          try { 
+            iframe.contentWindow.focus();
+          } catch {}
+        }, 100);
+      } else {
+        setMinimized(true);
+        liveRegion.textContent = 'Showing error page';
+        repaintToDock();
+        void iframe.offsetWidth;
+      }
+      updateUI();
+    };
+
+    // =========================
+    // Dragging (unified, rAF throttled)
+    // =========================
+    let drag = null;
+    let rafId = null;
+    let suppressToggleClick = false;
+    let suppressRestoreClick = false;
+
+    const beginDrag = (e) => {
+      if (drag) 
+        return;
+
+      if (!dock.edge || dock.offset == null) {
+        const def = cornerDefaultDock();
+        dock.edge = def.edge;
+        dock.offset = def.offset;
+        updateDockAlignment(previewSize());
+      }
+
+      const isRestoreTarget = e.currentTarget === pipRestoreButton;
+
+      drag = {
+        kind: isRestoreTarget ? 'restore' : (isMinimized() ? 'pip' : 'preview'),
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        lastX: e.clientX,
+        lastY: e.clientY,
+        moved: false,
+        target: e.currentTarget
+      };
+
+      drag.target.setPointerCapture(e.pointerId);
+
+      if (drag.kind === 'restore')
+        host.classList.add('dragging-restore');
+      else 
+        host.classList.add(drag.kind === 'pip' ? 'dragging' : 'dragging-preview');
+
+      e.preventDefault();
+    };
+
+    const moveDrag = (e) => {
+      if (!drag || drag.pointerId !== e.pointerId)
+        return;
+
+      drag.lastX = e.clientX;
+      drag.lastY = e.clientY;
+      
+      const dx = drag.lastX - drag.startX;
+      const dy = drag.lastY - drag.startY;
+
+      if (!drag.moved && (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD)) {
+        drag.moved = true;
+      }
+
+      if (!drag.moved)
+        return;
+      if (rafId)
+        return;
+
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+
+        const edge = nearestEdgeAt(drag.lastX, drag.lastY);
+        const size = sizeForTarget(drag.target);
+
+        let offset;
+        if (edge === 'left' || edge === 'right') {
+          const top = drag.lastY - (size.h / 2);
+          offset = clampOffset(edge, Math.round(top), size);
+        } else {
+          const left = drag.lastX - (size.w / 2);
+          offset = clampOffset(edge, Math.round(left), size);
+        }
+
+        dock.edge = edge;
+        dock.offset = offset;
+        updateDockAlignment(size);
+
+        const origin = currentTransformOrigin();
+        setVar('--error-pip-origin', origin || 'bottom right');
+
+        applyDockAll({ persist: false });
+      });
+    };
+
+    const endDrag = (e) => {
+      if (!drag || drag.pointerId !== e.pointerId)
+        return;
+
+      const endedKind = drag.kind;
+      drag.target.releasePointerCapture(e.pointerId);
+
+      if (endedKind === 'restore')
+        host.classList.remove('dragging-restore');
+      else 
+        host.classList.remove(endedKind === 'pip' ? 'dragging' : 'dragging-preview');
+
+      const didMove = drag.moved;
+      drag = null;
+
+      if (didMove) {
+        persistDock();
+        if (endedKind === 'restore')
+          suppressRestoreClick = true;
+        else 
+          suppressToggleClick = true;
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    const bindDragTarget = (node) => {
+      on(node, 'pointerdown', beginDrag);
+      on(node, 'pointermove', moveDrag);
+      on(node, 'pointerup', endDrag);
+      on(node, 'pointercancel', endDrag);
+    };
+
+    bindDragTarget(toggle);
+    bindDragTarget(pipRestoreButton);
+
+    // =========================
+    // Events (toggle / close / restore)
+    // =========================
+    on(toggle, 'click', (e) => {
+      if (suppressToggleClick) {
+        e.preventDefault();
+        suppressToggleClick = false;
+        return;
+      }
+      toggleView();
+    });
+
+    on(toggle, 'keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleView();
+      }
+    });
+
+    on(pipCloseButton, 'click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (isMinimized())
+        setPrettyHidden(true);
+      else
+        setPreviewHidden(true);
+    });
+
+    on(pipCloseButton, 'pointerdown', (e) => {
+      e.stopPropagation();
+    });
+
+    on(pipRestoreButton, 'click', (e) => {
+      if (suppressRestoreClick) {
+        e.preventDefault();
+        suppressRestoreClick = false;
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      if (isMinimized()) 
+        setPrettyHidden(false);
+      else 
+        setPreviewHidden(false);
+    });
+
+    // =========================
+    // Lifecycle: load / sync / repaint
+    // =========================
+    const loadState = () => {
+      loadDock();
+      loadHidden();
+
+      if (isPrettyHidden && !isMinimized())
+        setMinimized(true);
+
+      updateUI();
+      repaintToDock();
+    };
+
+    loadState();
+
+    on(window, 'storage-ready', () => {
+      storageReady = true;
+      loadState();
+    });
+
+    const onViewportChange = () => repaintToDock();
+
+    on(window, 'resize', onViewportChange);
+
+    if (window.visualViewport) {
+      on(window.visualViewport, 'resize', onViewportChange);
+      on(window.visualViewport, 'scroll', onViewportChange);
+    }
+
+    // initial preview
+    setTimeout(updatePreview, 100);
+
+    // initial minimized option
+    if (${startMinimized}) {
+      setMinimized(true);
+      repaintToDock();
+      void iframe.offsetWidth;
+      updateUI();
+    }
+  } catch (err) {
+    console.error('Failed to initialize Nuxt error overlay:', err);
+  }
+})();
+`;
+}
+export function generateErrorOverlayHTML(html, options) {
+	const nonce = Array.from(crypto.getRandomValues(new Uint8Array(16)), (b) => b.toString(16).padStart(2, "0")).join("");
+	const errorPage = html.replace("<head>", `<head><script>${iframeStorageBridge(nonce)}<\/script>`);
+	const base64HTML = Buffer.from(errorPage, "utf8").toString("base64");
+	return `
+    <script>${parentStorageBridge(nonce)}<\/script>
+    <nuxt-error-overlay></nuxt-error-overlay>
+    <script>${webComponentScript(base64HTML, options?.startMinimized ?? false)}<\/script>
+  `;
+}