quadview 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 QuadView contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+# QuadView
+
+View your locally running website across four configurable device viewports in a single browser window. No framework-specific setup—works with any dev server (Vite, Next.js, Create React App, Remix, plain HTML).
+
+## Requirements
+
+- **Node.js** ≥ 18
+- A dev server already running (e.g. `npm run dev`)
+
+## Install
+
+```bash
+npm install -g quadview
+```
+
+Or run without installing:
+
+```bash
+npx quadview http://localhost:5173
+```
+
+## Usage
+
+```bash
+quadview <url>
+quadview --url <url>
+quadview --port <port> <url>
+```
+
+Examples:
+
+```bash
+# Start your dev server in one terminal, then:
+quadview http://localhost:5173
+quadview localhost:5173
+quadview --port 3000 http://localhost:5173
+```
+
+The wrapper opens at **http://127.0.0.1:4242** by default (or the port you set with `--port`). Open that URL in your browser to see your app in a 2×2 grid. Each pane has a device dropdown; change it to resize the iframe. Selections are saved in `localStorage` and restored on reload. Use **Reset** to clear saved device choices.
+
+**Proxy mode:** QuadView proxies your dev server so all four viewports load the app from the same origin. This allows **scroll sync** (scroll in one viewport and all four stay in sync) and **navigation sync** (click a link in one viewport and all four navigate). No changes to your app are required. The proxy rewrites `X-Frame-Options` and CSP `frame-ancestors` so framing works even when your dev server blocks it.
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `[url]` | Target URL (e.g. `http://localhost:5173` or `localhost:5173`) |
+| `-u, --url <url>` | Target URL (alternative to positional) |
+| `-p, --port <port>` | Wrapper server port (default: 4242) |
+
+## Security
+
+- Only **localhost** or **127.0.0.1** is allowed as the target URL.
+- The wrapper server binds to **127.0.0.1** only (not exposed to the network).
+
+## Iframe blocking
+
+QuadView proxies your app and rewrites `X-Frame-Options` and CSP `frame-ancestors` so the app can be embedded. If you still see a blank frame, check that your dev server is running and that the URL you passed to QuadView is correct.
+
+## Publishing (for maintainers)
+
+### 1. Clean repo before publishing
+
+- Required: `README.md`, `LICENSE` (MIT), `package.json`, `bin/quadview.js`
+- `package.json`: `version` set to `0.1.0`, `bin` → `"quadview": "bin/quadview.js"`, `files` → `["bin", "src", "static"]`
+- No local junk: only `bin`, `src`, and `static` are published (see `files`)
+
+### 2. Test locally
+
+```bash
+npm pack
+```
+
+Then install the tarball in another project to verify:
+
+```bash
+cd /tmp
+mkdir quadview-test && cd quadview-test
+npm init -y
+npm install /path/to/package1viewports/quadview-0.1.0.tgz
+npx quadview http://localhost:5173
+```
+
+If the QuadView UI opens and proxies your dev server, you’re ready.
+
+### 3. Publish to npm
+
+1. **Create an npm account** (if needed): [https://www.npmjs.com/signup](https://www.npmjs.com/signup)
+2. **Log in from the terminal:** `npm login`
+3. **Publish (public package):** `npm publish --access public`
+
+After that, anyone can run:
+
+```bash
+npx quadview http://localhost:5173
+```
+
+### 4. Tag the release on GitHub
+
+1. Push the repo to GitHub.
+2. Go to **Releases** → **Create a new release**.
+3. Tag: `v0.1.0`
+4. Title: e.g. **Initial release**
+5. Include a short usage example in the release notes (helps credibility).
+
+---
+
+## Letting people know
+
+Open source tools only get used if people see them. After publishing:
+
+- **Twitter/X** – Short tweet with what it does, link to npm and repo.
+- **Reddit** – r/webdev, r/javascript, r/reactjs (follow each sub’s rules; no spam).
+- **Dev.to / Hashnode** – Short “I built a thing” post with problem, solution, and `npx` example.
+- **Hacker News** – “Show HN: QuadView – four device viewports for local dev” with link and one-liner.
+- **Product Hunt** – List as a dev tool when you’re ready for a launch day.
+- **GitHub** – Clear README, good `keywords` in `package.json`, and a topic like `responsive-design` or `dev-tools` on the repo.
+- **Word of mouth** – Use it yourself, add it to team docs, and mention it in relevant threads or chats.
+
+Keep the README and release notes focused on one clear benefit: “See your app in four viewports at once, with sync’d scroll and nav.”
+
+## License
+
+MIT

package/bin/quadview.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('../src/cli.js');

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "quadview",
+  "version": "0.1.0",
+  "description": "View your local dev site across four configurable device viewports",
+  "main": "src/server.js",
+  "bin": {
+    "quadview": "bin/quadview.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "static"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "responsive",
+    "viewport",
+    "dev-tools",
+    "cli"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "demo": "node demo/server.js"
+  },
+  "dependencies": {
+    "commander": "^12.0.0"
+  }
+}

package/src/cli.js

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+const { start } = require('./server.js');
+
+const DEFAULT_PORT = 4242;
+const ALLOWED_HOSTS = ['localhost', '127.0.0.1'];
+
+function normalizeUrl(input) {
+  const trimmed = String(input).trim();
+  if (!trimmed) return null;
+  if (/^https?:\/\//i.test(trimmed)) return trimmed;
+  if (trimmed.includes(':')) {
+    const [host, port] = trimmed.split(':');
+    return `http://${host}:${port}`;
+  }
+  return `http://${trimmed}`;
+}
+
+function validateLocalhostOnly(urlString) {
+  let parsed;
+  try {
+    parsed = new URL(urlString);
+  } catch {
+    return { valid: false, error: 'Invalid URL' };
+  }
+  const host = parsed.hostname.toLowerCase();
+  if (!ALLOWED_HOSTS.includes(host)) {
+    return {
+      valid: false,
+      error: `Only localhost or 127.0.0.1 is allowed. Got: ${parsed.hostname}`,
+    };
+  }
+  return { valid: true };
+}
+
+program
+  .name('quadview')
+  .description('View a local dev site across four device viewports')
+  .argument('[url]', 'Target URL (e.g. http://localhost:5173 or localhost:5173)')
+  .option('-u, --url <url>', 'Target URL (alternative to positional)')
+  .option('-p, --port <port>', 'Wrapper server port', String(DEFAULT_PORT))
+  .action((positionalUrl, options) => {
+    const urlOpt = options.url;
+    const url = urlOpt != null ? urlOpt : positionalUrl;
+    if (url == null || (typeof url === 'string' && url.trim() === '')) {
+      console.error('Error: URL is required. Use quadview <url> or quadview --url <url>');
+      process.exit(1);
+    }
+    const rawUrl = normalizeUrl(url);
+    if (!rawUrl) {
+      console.error('Error: Invalid URL.');
+      process.exit(1);
+    }
+
+    const validation = validateLocalhostOnly(rawUrl);
+    if (!validation.valid) {
+      console.error('Error:', validation.error);
+      process.exit(1);
+    }
+
+    const port = parseInt(options.port, 10);
+    if (Number.isNaN(port) || port < 1 || port > 65535) {
+      console.error('Error: --port must be a number between 1 and 65535');
+      process.exit(1);
+    }
+
+    start(port, rawUrl);
+    console.log(`QuadView running at http://127.0.0.1:${port}`);
+  });
+
+program.parse();

package/src/devices.js

@@ -0,0 +1,51 @@
+/**
+ * Default device presets: name, width, height, group, shellType.
+ * shellType drives the hardware frame: phone | tablet | laptop | desktop.
+ */
+const DEVICES = [
+  // Phones
+  { id: 'iphone-se', name: 'iPhone SE', width: 375, height: 667, group: 'Phones', shellType: 'phone' },
+  { id: 'iphone-12-13-mini', name: 'iPhone 12/13 mini', width: 375, height: 812, group: 'Phones', shellType: 'phone' },
+  { id: 'iphone-14', name: 'iPhone 14', width: 390, height: 844, group: 'Phones', shellType: 'phone' },
+  { id: 'iphone-14-plus', name: 'iPhone 14 Plus', width: 428, height: 926, group: 'Phones', shellType: 'phone' },
+  { id: 'iphone-14-pro-max', name: 'iPhone 14 Pro Max', width: 430, height: 932, group: 'Phones', shellType: 'phone' },
+  { id: 'pixel-7', name: 'Pixel 7', width: 412, height: 915, group: 'Phones', shellType: 'phone' },
+  { id: 'pixel-7-pro', name: 'Pixel 7 Pro', width: 412, height: 915, group: 'Phones', shellType: 'phone' },
+  { id: 'samsung-s21', name: 'Samsung Galaxy S21', width: 360, height: 800, group: 'Phones', shellType: 'phone' },
+  { id: 'samsung-s21-ultra', name: 'Samsung S21 Ultra', width: 384, height: 854, group: 'Phones', shellType: 'phone' },
+  { id: 'galaxy-fold', name: 'Galaxy Z Fold', width: 512, height: 722, group: 'Phones', shellType: 'phone' },
+  // Tablets
+  { id: 'ipad-mini', name: 'iPad mini', width: 768, height: 1024, group: 'Tablets', shellType: 'tablet' },
+  { id: 'ipad', name: 'iPad', width: 810, height: 1080, group: 'Tablets', shellType: 'tablet' },
+  { id: 'ipad-air', name: 'iPad Air', width: 820, height: 1180, group: 'Tablets', shellType: 'tablet' },
+  { id: 'ipad-pro-11', name: 'iPad Pro 11"', width: 834, height: 1194, group: 'Tablets', shellType: 'tablet' },
+  { id: 'ipad-pro-12', name: 'iPad Pro 12.9"', width: 1024, height: 1366, group: 'Tablets', shellType: 'tablet' },
+  { id: 'pixel-tablet', name: 'Pixel Tablet', width: 1024, height: 600, group: 'Tablets', shellType: 'tablet' },
+  { id: 'surface-pro', name: 'Surface Pro 9', width: 912, height: 1368, group: 'Tablets', shellType: 'tablet' },
+  // Laptops
+  { id: 'macbook-13', name: 'MacBook 13"', width: 1280, height: 800, group: 'Laptops', shellType: 'laptop' },
+  { id: 'macbook-14', name: 'MacBook 14"', width: 1512, height: 982, group: 'Laptops', shellType: 'laptop' },
+  { id: 'macbook-16', name: 'MacBook 16"', width: 1728, height: 1117, group: 'Laptops', shellType: 'laptop' },
+  { id: 'laptop-1366', name: 'Laptop 1366×768', width: 1366, height: 768, group: 'Laptops', shellType: 'laptop' },
+  { id: 'laptop-1440', name: 'Laptop 1440×900', width: 1440, height: 900, group: 'Laptops', shellType: 'laptop' },
+  { id: 'chromebook', name: 'Chromebook', width: 1280, height: 800, group: 'Laptops', shellType: 'laptop' },
+  // Desktops
+  { id: 'desktop-1080', name: 'Desktop 1080p', width: 1920, height: 1080, group: 'Desktops', shellType: 'desktop' },
+  { id: 'desktop-1440', name: 'Desktop 1440p', width: 2560, height: 1440, group: 'Desktops', shellType: 'desktop' },
+  { id: 'desktop-4k', name: 'Desktop 4K', width: 3840, height: 2160, group: 'Desktops', shellType: 'desktop' },
+  { id: 'imac-24', name: 'iMac 24"', width: 4480, height: 2520, group: 'Desktops', shellType: 'desktop' },
+];
+
+function getDevicesByGroup() {
+  const groups = {};
+  for (const d of DEVICES) {
+    if (!groups[d.group]) groups[d.group] = [];
+    groups[d.group].push(d);
+  }
+  return groups;
+}
+
+module.exports = {
+  DEVICES,
+  getDevicesByGroup,
+};

package/src/server.js

@@ -0,0 +1,153 @@
+const http = require('http');
+const https = require('https');
+const fs = require('fs');
+const path = require('path');
+const zlib = require('zlib');
+const { DEVICES } = require('./devices.js');
+
+const TEMPLATE_PATH = path.join(__dirname, '..', 'static', 'index.html');
+const PROXY_PREFIX = '/proxy';
+
+const QUADVIEW_SYNC_SCRIPT = `<script>(function(){var raf=0,ignoreUntil=0,lastSent=0,minInterval=16;function send(){if(ignoreUntil&&Date.now()<ignoreUntil)return;if(window.parent===window)return;var now=Date.now();if(now-lastSent<minInterval)return;lastSent=now;try{window.parent.postMessage({type:'quadview-scroll',x:window.scrollX,y:window.scrollY},'*');}catch(e){}}function onScroll(){if(raf)return;raf=1;requestAnimationFrame(function(){raf=0;send();});}window.addEventListener('scroll',onScroll,{passive:true});window.addEventListener('load',send);window.addEventListener('message',function(e){if(!e.data||e.data.type!=='quadview-sync-scroll')return;ignoreUntil=Date.now()+80;var x=e.data.x,y=e.data.y;requestAnimationFrame(function(){window.scrollTo(x,y);});});})();</script>`;
+
+function escapeForScript(str) {
+  return String(str)
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+    .replace(/\n/g, '\\n')
+    .replace(/\r/g, '\\r')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+}
+
+function getWrapperHtml(proxyBaseUrl) {
+  const template = fs.readFileSync(TEMPLATE_PATH, 'utf8');
+  const escapedUrl = escapeForScript(proxyBaseUrl);
+  const devicesJson = JSON.stringify(DEVICES);
+  return template
+    .replace(/\{\{TARGET_URL_ESCAPED\}\}/g, escapedUrl)
+    .replace(/\{\{DEVICES_JSON\}\}/g, devicesJson);
+}
+
+function injectSyncScript(html) {
+  if (!html || typeof html !== 'string') return html;
+  const closeBody = html.lastIndexOf('</body>');
+  if (closeBody === -1) return html + QUADVIEW_SYNC_SCRIPT;
+  return html.slice(0, closeBody) + QUADVIEW_SYNC_SCRIPT + html.slice(closeBody);
+}
+
+function decompressBody(buffer, encoding) {
+  const enc = (encoding || '').toLowerCase().split(',')[0].trim();
+  if (enc === 'gzip') return zlib.gunzipSync(buffer);
+  if (enc === 'deflate') return zlib.inflateSync(buffer);
+  if (enc === 'br') return zlib.brotliDecompressSync(buffer);
+  return buffer;
+}
+
+function rewriteFrameHeaders(headers, proxyBaseUrl, targetOrigin) {
+  const out = {};
+  for (const k of Object.keys(headers)) {
+    out[k] = headers[k];
+  }
+  delete out['x-frame-options'];
+  delete out['X-Frame-Options'];
+  if (out['content-security-policy']) {
+    out['content-security-policy'] = out['content-security-policy']
+      .replace(/frame-ancestors[^;]*;?/gi, 'frame-ancestors *;');
+  }
+  if (out['Content-Security-Policy']) {
+    out['Content-Security-Policy'] = out['Content-Security-Policy']
+      .replace(/frame-ancestors[^;]*;?/gi, 'frame-ancestors *;');
+  }
+  if (out['location'] || out['Location']) {
+    const loc = out['location'] || out['Location'];
+    if (loc.startsWith(targetOrigin) || loc.startsWith('/')) {
+      const p = loc.startsWith('/') ? loc : new URL(loc).pathname + new URL(loc).search;
+      out['location'] = proxyBaseUrl.replace(/\/$/, '') + (p === '/' ? '' : p);
+      delete out['Location'];
+    }
+  }
+  return out;
+}
+
+function proxyRequest(targetUrl, pathname, clientReq, clientRes, wrapperPort) {
+  const target = new URL(pathname || '/', targetUrl);
+  const isHttps = target.protocol === 'https:';
+  const lib = isHttps ? https : http;
+  const options = {
+    hostname: target.hostname,
+    port: target.port || (isHttps ? 443 : 80),
+    path: target.pathname + target.search,
+    method: clientReq.method,
+    headers: { ...clientReq.headers },
+  };
+  delete options.headers.host;
+
+  const proxyReq = lib.request(options, (proxyRes) => {
+    const contentType = (proxyRes.headers['content-type'] || proxyRes.headers['Content-Type'] || '').toLowerCase();
+    const isHtml = contentType.indexOf('text/html') !== -1;
+
+    if (isHtml) {
+      const chunks = [];
+      proxyRes.on('data', (chunk) => chunks.push(chunk));
+      proxyRes.on('end', () => {
+        let raw = Buffer.concat(chunks);
+        const encoding = proxyRes.headers['content-encoding'] || proxyRes.headers['Content-Encoding'];
+        raw = decompressBody(raw, encoding);
+        let body = raw.toString('utf8');
+        body = injectSyncScript(body);
+        const targetOrigin = new URL(targetUrl).origin;
+        const proxyBaseUrl = `http://127.0.0.1:${clientReq.socket.server.address().port}${PROXY_PREFIX}/`;
+        const headers = rewriteFrameHeaders(proxyRes.headers, proxyBaseUrl, targetOrigin);
+        // We send uncompressed body; strip encoding so browser doesn't try to decode
+        delete headers['content-encoding'];
+        delete headers['Content-Encoding'];
+        delete headers['transfer-encoding'];
+        delete headers['Transfer-Encoding'];
+        headers['content-length'] = Buffer.byteLength(body, 'utf8');
+        clientRes.writeHead(proxyRes.statusCode, headers);
+        clientRes.end(body);
+      });
+      proxyRes.on('error', () => {
+        clientRes.writeHead(502, { 'Content-Type': 'text/plain' });
+        clientRes.end('Bad Gateway');
+      });
+    } else {
+      clientRes.writeHead(proxyRes.statusCode, proxyRes.headers);
+      proxyRes.pipe(clientRes);
+    }
+  });
+
+  proxyReq.on('error', (err) => {
+    clientRes.writeHead(502, { 'Content-Type': 'text/plain' });
+    clientRes.end('Bad Gateway: ' + err.message);
+  });
+  clientReq.pipe(proxyReq);
+}
+
+function start(port, targetUrl) {
+  const proxyBaseUrl = `http://127.0.0.1:${port}${PROXY_PREFIX}/`;
+
+  const server = http.createServer((req, res) => {
+    const url = req.url || '/';
+    const pathname = url.split('?')[0];
+
+    if (req.method === 'GET' && (pathname === '/' || pathname === '')) {
+      const html = getWrapperHtml(proxyBaseUrl);
+      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+      res.end(html);
+      return;
+    }
+
+    // Proxy everything else so framework assets work: /_next/*, /static/*, /@vite/*, etc.
+    const targetPath =
+      pathname === PROXY_PREFIX || pathname.startsWith(PROXY_PREFIX + '/')
+        ? pathname.slice(PROXY_PREFIX.length) || '/'
+        : pathname;
+    proxyRequest(targetUrl, targetPath, req, res, port);
+  });
+
+  server.listen(port, '127.0.0.1');
+}
+
+module.exports = { start };

package/static/index.html

@@ -0,0 +1,878 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>QuadView</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --qv-bg: #f8fafc;
+      --qv-bg-gradient: linear-gradient(to bottom right, #f9fafb 0%, rgba(239, 246, 255, 0.3) 50%, rgba(250, 245, 255, 0.3) 100%);
+      --qv-surface: rgba(255, 255, 255, 0.8);
+      --qv-surface-pane: rgba(255, 255, 255, 0.4);
+      --qv-border: rgba(0, 0, 0, 0.08);
+      --qv-text: #111827;
+      --qv-text-muted: #6b7280;
+      --qv-accent: #3b82f6;
+      --qv-accent-end: #8b5cf6;
+      --qv-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+      --qv-transition: 200ms ease;
+      --qv-radius: 0.625rem;
+      --qv-radius-full: 9999px;
+    }
+    .dark {
+      --qv-bg: #030712;
+      --qv-bg-gradient: linear-gradient(to bottom right, #030712 0%, rgba(30, 58, 138, 0.2) 50%, rgba(59, 7, 100, 0.2) 100%);
+      --qv-surface: rgba(3, 7, 18, 0.8);
+      --qv-surface-pane: rgba(17, 24, 39, 0.4);
+      --qv-border: rgba(255, 255, 255, 0.1);
+      --qv-text: #f9fafb;
+      --qv-text-muted: #9ca3af;
+      --qv-accent: #60a5fa;
+      --qv-accent-end: #a78bfa;
+      --qv-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--qv-bg);
+      background-image: var(--qv-bg-gradient);
+      color: var(--qv-text);
+      min-height: 100vh;
+      transition: background var(--qv-transition), color var(--qv-transition);
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.5rem 1rem;
+      background: var(--qv-surface);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      border-bottom: 1px solid var(--qv-border);
+      position: sticky;
+      top: 0;
+      z-index: 50;
+    }
+    .header-logo {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .header-logo__icon {
+      width: 28px;
+      height: 28px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #6366f1 100%);
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 14px;
+    }
+    .header h1 { margin: 0; font-size: 0.9rem; font-weight: 600; }
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .toggle-wrap {
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
+      padding: 0.35rem 0.6rem;
+      border-radius: var(--qv-radius-full);
+      background: rgba(243, 244, 246, 0.8);
+      border: 1px solid var(--qv-border);
+      backdrop-filter: blur(12px);
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--qv-text-muted);
+    }
+    .dark .toggle-wrap { background: rgba(31, 41, 55, 0.8); }
+    .toggle-wrap input { accent-color: var(--qv-accent); cursor: pointer; }
+    .toggle-wrap label { cursor: pointer; user-select: none; }
+    .btn-reset {
+      padding: 0.35rem 0.6rem;
+      font-size: 11px;
+      font-weight: 500;
+      background: rgba(243, 244, 246, 0.8);
+      color: var(--qv-text-muted);
+      border: 1px solid var(--qv-border);
+      border-radius: var(--qv-radius-full);
+      cursor: pointer;
+      transition: background var(--qv-transition), color var(--qv-transition), border-color var(--qv-transition);
+      backdrop-filter: blur(12px);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+    }
+    .dark .btn-reset { background: rgba(31, 41, 55, 0.8); }
+    .btn-reset:hover {
+      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+      color: #fff;
+      border-color: transparent;
+    }
+    .sync-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+      padding: 0.35rem 0.6rem;
+      border-radius: var(--qv-radius-full);
+      font-size: 11px;
+      font-weight: 500;
+      background: rgba(59, 130, 246, 0.1);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+      color: var(--qv-accent);
+    }
+    .dark .sync-badge { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
+    .sync-badge__dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--qv-accent);
+      animation: qv-pulse 1.5s ease-in-out infinite;
+    }
+    @keyframes qv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    .btn-theme {
+      padding: 0.35rem;
+      border-radius: var(--qv-radius-full);
+      background: rgba(243, 244, 246, 0.8);
+      border: 1px solid var(--qv-border);
+      color: var(--qv-text-muted);
+      cursor: pointer;
+      transition: background var(--qv-transition), color var(--qv-transition);
+      backdrop-filter: blur(12px);
+    }
+    .dark .btn-theme { background: rgba(31, 41, 55, 0.8); }
+    .btn-theme:hover { color: var(--qv-text); }
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      gap: 8px;
+      padding: 8px 12px 12px;
+      height: calc(100vh - 48px);
+    }
+    .grid--enlarged .pane:not(.pane--enlarged) {
+      display: none;
+    }
+    .grid--enlarged .pane.pane--enlarged {
+      grid-column: 1 / -1;
+      grid-row: 1 / -1;
+    }
+    .pane {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      background: var(--qv-surface-pane);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      border-radius: 1rem;
+      border: 1px solid var(--qv-border);
+      overflow: hidden;
+      transition: box-shadow var(--qv-transition);
+    }
+    .pane-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      background: transparent;
+      flex-shrink: 0;
+      border-bottom: 1px solid var(--qv-border);
+    }
+    .pane-header select {
+      flex: 1;
+      min-width: 0;
+      padding: 5px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      background: rgba(243, 244, 246, 0.8);
+      color: var(--qv-text);
+      border: 1px solid var(--qv-border);
+      border-radius: var(--qv-radius-full);
+      cursor: pointer;
+      transition: border-color var(--qv-transition), background var(--qv-transition);
+    }
+    .dark .pane-header select { background: rgba(31, 41, 55, 0.8); }
+    .pane-header select:focus { outline: none; border-color: var(--qv-accent); }
+    .btn-enlarge {
+      padding: 6px;
+      font-size: 12px;
+      background: rgba(243, 244, 246, 0.8);
+      color: var(--qv-text-muted);
+      border: 1px solid var(--qv-border);
+      border-radius: var(--qv-radius-full);
+      cursor: pointer;
+      transition: background var(--qv-transition), color var(--qv-transition), border-color var(--qv-transition);
+      flex-shrink: 0;
+    }
+    .dark .btn-enlarge { background: rgba(31, 41, 55, 0.8); }
+    .btn-enlarge:hover {
+      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+      color: #fff;
+      border-color: transparent;
+    }
+    .pane--enlarged .btn-enlarge {
+      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+      color: #fff;
+      border-color: transparent;
+    }
+    .resolution-badge {
+      font-size: 9px;
+      font-weight: 500;
+      font-family: ui-monospace, monospace;
+      white-space: nowrap;
+      padding: 2px 8px;
+      border-radius: var(--qv-radius-full);
+      background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
+      border: 1px solid rgba(59, 130, 246, 0.2);
+      color: var(--qv-accent);
+    }
+    .dark .resolution-badge {
+      background: linear-gradient(90deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
+      border-color: rgba(59, 130, 246, 0.3);
+      color: #93c5fd;
+    }
+    .pane-viewport { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.5); overflow: hidden; }
+    .dark .pane-viewport { background: rgba(17, 24, 39, 0.5); }
+    .pane-viewport--hardware { display: none; }
+    .quadview--hardware .pane-viewport--minimal { display: none; }
+    .quadview--hardware .pane-viewport--hardware { display: flex; }
+    .iframe-wrap {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+    .iframe-scaled-wrap {
+      overflow: hidden;
+      flex-shrink: 0;
+    }
+    .iframe-wrap iframe { border: none; background: #fff; display: block; }
+    .minimal-wrap .iframe-wrap iframe { box-shadow: 0 0 0 1px var(--qv-border); }
+
+    /* ---------- Device shells (hardware mode) ---------- */
+    .device-shell {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      transition: transform var(--qv-transition);
+    }
+    .device-shell__frame {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      box-shadow: var(--qv-shadow);
+      border-radius: 12px;
+    }
+    .device-shell__screen-outer {
+      position: relative;
+      overflow: hidden;
+      background: #0a0a0a;
+    }
+    .device-shell__screen-inner {
+      position: relative;
+      overflow: hidden;
+      background: #fff;
+    }
+    .dark .device-shell__screen-inner { background: #111827; }
+    .device-shell__screen-inner iframe {
+      display: block;
+      border: none;
+      background: #fff;
+    }
+    .device-shell__chin,
+    .device-shell__stand {
+      display: none;
+      background: linear-gradient(180deg, rgba(55, 65, 81, 0.95) 0%, rgba(31, 41, 55, 0.98) 100%);
+      border: 1px solid var(--qv-border);
+    }
+    .device-shell--desktop .device-shell__chin,
+    .device-shell--desktop .device-shell__stand { display: block; }
+    .device-shell__camera {
+      display: none;
+      position: absolute;
+      top: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 6px;
+      height: 6px;
+      background: #0a0a0a;
+      border-radius: 50%;
+      z-index: 1;
+      pointer-events: none;
+    }
+    .device-shell--laptop .device-shell__camera { display: block; }
+
+    /* Phone: rounded body, subtle gradient */
+    .device-shell--phone .device-shell__frame {
+      padding: 12px;
+      background: linear-gradient(145deg, rgba(75, 85, 99, 0.9) 0%, rgba(31, 41, 55, 0.95) 50%, rgba(17, 24, 39, 0.98) 100%);
+      border-radius: 36px;
+      box-shadow: var(--qv-shadow), inset 0 1px 0 rgba(255,255,255,0.06);
+    }
+    .device-shell--phone .device-shell__screen-outer {
+      border-radius: 28px;
+      padding: 8px;
+      background: #0a0a0a;
+    }
+    .device-shell--phone .device-shell__screen-inner {
+      border-radius: 22px;
+      overflow: hidden;
+    }
+
+    /* Tablet: slim bezel, rounded */
+    .device-shell--tablet .device-shell__frame {
+      padding: 10px;
+      background: linear-gradient(145deg, rgba(55, 65, 81, 0.9) 0%, rgba(31, 41, 55, 0.95) 100%);
+      border-radius: 16px;
+      box-shadow: var(--qv-shadow);
+    }
+    .device-shell--tablet .device-shell__screen-outer {
+      border-radius: 10px;
+      padding: 6px;
+      background: #0a0a0a;
+    }
+    .device-shell--tablet .device-shell__screen-inner { border-radius: 6px; }
+
+    /* Laptop: screen only, thin bezel, camera */
+    .device-shell--laptop .device-shell__frame {
+      padding: 8px;
+      background: linear-gradient(180deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%);
+      border-radius: 10px;
+      box-shadow: var(--qv-shadow), inset 0 0 0 1px rgba(255,255,255,0.04);
+    }
+    .device-shell--laptop .device-shell__screen-outer {
+      border-radius: 4px;
+      padding: 4px;
+      background: #050506;
+    }
+    .device-shell--laptop .device-shell__screen-inner { border-radius: 2px; }
+
+    /* Desktop: monitor + chin + stand */
+    .device-shell--desktop .device-shell__frame {
+      flex-direction: column;
+      padding: 10px 10px 0;
+      background: linear-gradient(180deg, rgba(55, 65, 81, 0.9) 0%, rgba(31, 41, 55, 0.95) 100%);
+      border-radius: 10px 10px 0 0;
+      box-shadow: var(--qv-shadow);
+    }
+    .device-shell--desktop .device-shell__screen-outer {
+      border-radius: 4px;
+      padding: 6px;
+      background: #0a0a0a;
+    }
+    .device-shell--desktop .device-shell__screen-inner { border-radius: 2px; }
+    .device-shell--desktop .device-shell__chin {
+      width: 100%;
+      height: 24px;
+      border-radius: 0 0 6px 6px;
+      border-top: none;
+      margin-top: -1px;
+    }
+    .device-shell--desktop .device-shell__stand {
+      width: 80px;
+      min-width: 60px;
+      height: 14px;
+      border-radius: 0 0 4px 4px;
+      border-top: none;
+      margin-top: -1px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    }
+    .device-shell--desktop .device-shell__frame {
+      align-items: center;
+    }
+    .device-shell--desktop .device-shell__chin,
+    .device-shell--desktop .device-shell__stand {
+      align-self: center;
+    }
+  </style>
+</head>
+<body class="quadview--minimal" id="root">
+  <header class="header">
+    <div class="header-logo">
+      <div class="header-logo__icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div>
+      <h1>QuadView</h1>
+    </div>
+    <div class="header-actions">
+      <div class="toggle-wrap">
+        <input type="checkbox" id="sync" aria-checked="true">
+        <label for="sync">Sync</label>
+      </div>
+      <div class="toggle-wrap">
+        <input type="checkbox" id="hardware-frames" aria-checked="false">
+        <label for="hardware-frames">Frames</label>
+      </div>
+      <button type="button" class="btn-reset" id="reset">Reset</button>
+      <div class="sync-badge" id="sync-badge" aria-hidden="true" style="display: none;">
+        <span class="sync-badge__dot"></span>
+        <span>Synced</span>
+      </div>
+      <button type="button" class="btn-theme" id="theme-toggle" title="Toggle dark mode" aria-label="Toggle dark mode"><span id="theme-icon">&#9790;</span></button>
+    </div>
+  </header>
+  <div class="grid" id="grid">
+    <div class="pane" data-pane="0">
+      <div class="pane-header">
+        <select class="device-select" aria-label="Device for viewport 1"></select>
+        <span class="resolution-badge" aria-hidden="true" data-resolution></span>
+        <button type="button" class="btn-enlarge" title="Enlarge this view" aria-label="Enlarge viewport 1" data-enlarge>Enlarge</button>
+      </div>
+      <div class="pane-viewport pane-viewport--minimal">
+        <div class="iframe-wrap minimal-wrap"><div class="iframe-scaled-wrap"><iframe class="viewport" title="Viewport 1"></iframe></div></div>
+      </div>
+      <div class="pane-viewport pane-viewport--hardware">
+        <div class="device-shell device-shell--phone" data-shell>
+          <div class="device-shell__frame">
+            <div class="device-shell__screen-outer">
+              <div class="device-shell__camera" aria-hidden="true"></div>
+              <div class="device-shell__screen-inner"><iframe class="viewport viewport-hardware" title="Viewport 1"></iframe></div>
+            </div>
+          </div>
+          <div class="device-shell__chin"></div>
+          <div class="device-shell__stand"></div>
+        </div>
+      </div>
+    </div>
+    <div class="pane" data-pane="1">
+      <div class="pane-header">
+        <select class="device-select" aria-label="Device for viewport 2"></select>
+        <span class="resolution-badge" data-resolution></span>
+        <button type="button" class="btn-enlarge" title="Enlarge this view" aria-label="Enlarge viewport 2" data-enlarge>Enlarge</button>
+      </div>
+      <div class="pane-viewport pane-viewport--minimal">
+        <div class="iframe-wrap minimal-wrap"><div class="iframe-scaled-wrap"><iframe class="viewport" title="Viewport 2"></iframe></div></div>
+      </div>
+      <div class="pane-viewport pane-viewport--hardware">
+        <div class="device-shell device-shell--phone" data-shell>
+          <div class="device-shell__frame">
+            <div class="device-shell__screen-outer">
+              <div class="device-shell__camera"></div>
+              <div class="device-shell__screen-inner"><iframe class="viewport viewport-hardware" title="Viewport 2"></iframe></div>
+            </div>
+          </div>
+          <div class="device-shell__chin"></div>
+          <div class="device-shell__stand"></div>
+        </div>
+      </div>
+    </div>
+    <div class="pane" data-pane="2">
+      <div class="pane-header">
+        <select class="device-select" aria-label="Device for viewport 3"></select>
+        <span class="resolution-badge" data-resolution></span>
+        <button type="button" class="btn-enlarge" title="Enlarge this view" aria-label="Enlarge viewport 3" data-enlarge>Enlarge</button>
+      </div>
+      <div class="pane-viewport pane-viewport--minimal">
+        <div class="iframe-wrap minimal-wrap"><div class="iframe-scaled-wrap"><iframe class="viewport" title="Viewport 3"></iframe></div></div>
+      </div>
+      <div class="pane-viewport pane-viewport--hardware">
+        <div class="device-shell device-shell--phone" data-shell>
+          <div class="device-shell__frame">
+            <div class="device-shell__screen-outer">
+              <div class="device-shell__camera"></div>
+              <div class="device-shell__screen-inner"><iframe class="viewport viewport-hardware" title="Viewport 3"></iframe></div>
+            </div>
+          </div>
+          <div class="device-shell__chin"></div>
+          <div class="device-shell__stand"></div>
+        </div>
+      </div>
+    </div>
+    <div class="pane" data-pane="3">
+      <div class="pane-header">
+        <select class="device-select" aria-label="Device for viewport 4"></select>
+        <span class="resolution-badge" data-resolution></span>
+        <button type="button" class="btn-enlarge" title="Enlarge this view" aria-label="Enlarge viewport 4" data-enlarge>Enlarge</button>
+      </div>
+      <div class="pane-viewport pane-viewport--minimal">
+        <div class="iframe-wrap minimal-wrap"><div class="iframe-scaled-wrap"><iframe class="viewport" title="Viewport 4"></iframe></div></div>
+      </div>
+      <div class="pane-viewport pane-viewport--hardware">
+        <div class="device-shell device-shell--phone" data-shell>
+          <div class="device-shell__frame">
+            <div class="device-shell__screen-outer">
+              <div class="device-shell__camera"></div>
+              <div class="device-shell__screen-inner"><iframe class="viewport viewport-hardware" title="Viewport 4"></iframe></div>
+            </div>
+          </div>
+          <div class="device-shell__chin"></div>
+          <div class="device-shell__stand"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    (function() {
+      window.TARGET_URL = "{{TARGET_URL_ESCAPED}}";
+      window.DEVICES = {{DEVICES_JSON}};
+    })();
+  </script>
+  <script>
+    (function() {
+      const STORAGE_KEY = 'quadview-devices';
+      const STORAGE_HARDWARE = 'quadview-hardware-frames';
+      const STORAGE_SYNC = 'quadview-sync';
+      const STORAGE_THEME = 'quadview-theme';
+      const PANE_COUNT = 4;
+      var enlargedPaneIndex = null;
+
+      function applyTheme(dark) {
+        if (dark) {
+          document.documentElement.classList.add('dark');
+          var icon = document.getElementById('theme-icon');
+          if (icon) icon.textContent = '\u263C';
+        } else {
+          document.documentElement.classList.remove('dark');
+          var icon = document.getElementById('theme-icon');
+          if (icon) icon.textContent = '\u263E';
+        }
+        try { localStorage.setItem(STORAGE_THEME, dark ? 'dark' : 'light'); } catch (e) {}
+      }
+
+      function updateSyncBadge() {
+        var sb = document.getElementById('sync-badge');
+        if (!sb) return;
+        try {
+          sb.style.display = localStorage.getItem(STORAGE_SYNC) !== '0' ? '' : 'none';
+        } catch (e) { sb.style.display = 'none'; }
+      }
+
+      const devices = window.DEVICES || [];
+      const targetUrl = window.TARGET_URL || '';
+
+      function getAllViewportIframes() {
+        return Array.prototype.slice.call(document.querySelectorAll('iframe.viewport'));
+      }
+
+      function getVisibleViewportIframes() {
+        var root = document.getElementById('root');
+        var isHardware = root && root.classList.contains('quadview--hardware');
+        var selector = isHardware
+          ? '.pane-viewport--hardware .device-shell__screen-inner iframe.viewport'
+          : '.pane-viewport--minimal .viewport';
+        var list = document.querySelectorAll(selector);
+        return Array.prototype.slice.call(list, 0, PANE_COUNT);
+      }
+
+      var navSyncLock = false;
+      var lastScrollBroadcast = { x: -1, y: -1, t: 0 };
+      var scrollBroadcastMinInterval = 16;
+      function isSyncEnabled() {
+        try { return localStorage.getItem(STORAGE_SYNC) !== '0'; } catch (e) { return true; }
+      }
+      function setupSync() {
+        window.addEventListener('message', function(e) {
+          if (!isSyncEnabled() || !e.data || e.data.type !== 'quadview-scroll') return;
+          var x = e.data.x, y = e.data.y;
+          var now = Date.now();
+          var dx = Math.abs(x - lastScrollBroadcast.x), dy = Math.abs(y - lastScrollBroadcast.y);
+          if (dx < 0.5 && dy < 0.5 && (now - lastScrollBroadcast.t) < scrollBroadcastMinInterval) return;
+          lastScrollBroadcast = { x: x, y: y, t: now };
+          var iframes = getVisibleViewportIframes();
+          iframes.forEach(function(iframe) {
+            try {
+              if (iframe.contentWindow && iframe.contentWindow !== e.source) {
+                iframe.contentWindow.postMessage({ type: 'quadview-sync-scroll', x: x, y: y }, '*');
+              }
+            } catch (err) {}
+          });
+        });
+        function onIframeLoad(ev) {
+          if (!isSyncEnabled() || navSyncLock) return;
+          var iframe = ev.target;
+          var href;
+          try {
+            if (iframe.contentWindow && iframe.contentWindow.location) {
+              href = iframe.contentWindow.location.href;
+            }
+          } catch (err) { return; }
+          if (!href) return;
+          navSyncLock = true;
+          getAllViewportIframes().forEach(function(f) {
+            if (f !== iframe) f.src = href;
+          });
+          setTimeout(function() { navSyncLock = false; }, 600);
+        }
+        getAllViewportIframes().forEach(function(iframe) {
+          iframe.addEventListener('load', onIframeLoad);
+        });
+      }
+
+      function groupDevices() {
+        const byGroup = {};
+        devices.forEach(function(d) {
+          if (!byGroup[d.group]) byGroup[d.group] = [];
+          byGroup[d.group].push(d);
+        });
+        const order = ['Phones', 'Tablets', 'Laptops', 'Desktops'];
+        return order.filter(function(g) { return byGroup[g]; }).map(function(g) { return { group: g, items: byGroup[g] }; });
+      }
+
+      function buildSelect(selectEl) {
+        selectEl.innerHTML = '';
+        const grouped = groupDevices();
+        grouped.forEach(function(_group) {
+          const optgroup = document.createElement('optgroup');
+          optgroup.label = _group.group;
+          _group.items.forEach(function(dev) {
+            const opt = document.createElement('option');
+            opt.value = dev.id;
+            opt.textContent = dev.name + ' (' + dev.width + '×' + dev.height + ')';
+            optgroup.appendChild(opt);
+          });
+          selectEl.appendChild(optgroup);
+        });
+      }
+
+      function getDeviceById(id) {
+        for (var i = 0; i < devices.length; i++) {
+          if (devices[i].id === id) return devices[i];
+        }
+        return devices[0] || null;
+      }
+
+      function getShellType(device) {
+        return (device && device.shellType) || 'phone';
+      }
+
+      function applyDeviceToPane(paneIndex, deviceId) {
+        const pane = document.querySelector('.pane[data-pane="' + paneIndex + '"]');
+        if (!pane) return;
+        const select = pane.querySelector('.device-select');
+        const device = getDeviceById(deviceId);
+        if (!device) return;
+        select.value = device.id;
+
+        const shellType = getShellType(device);
+        const shell = pane.querySelector('[data-shell]');
+        if (shell) {
+          shell.className = 'device-shell device-shell--' + shellType;
+        }
+
+        const resolutionEl = pane.querySelector('[data-resolution]');
+        if (resolutionEl) resolutionEl.textContent = device.width + '×' + device.height;
+
+        const minimalWrap = pane.querySelector('.pane-viewport--minimal .iframe-wrap');
+        const minimalScaledWrap = pane.querySelector('.pane-viewport--minimal .iframe-scaled-wrap');
+        const minimalIframe = pane.querySelector('.pane-viewport--minimal .viewport');
+        const hardwareInner = pane.querySelector('.pane-viewport--hardware .device-shell__screen-inner');
+        const hardwareIframe = pane.querySelector('.pane-viewport--hardware .viewport');
+
+        var w = device.width;
+        var h = device.height;
+        var container = minimalWrap && minimalWrap.getBoundingClientRect();
+        var scale = 1;
+        if (container && container.width && container.height) {
+          var sx = container.width / w;
+          var sy = container.height / h;
+          scale = Math.min(sx, sy, 1);
+        }
+        if (minimalIframe && minimalScaledWrap) {
+          minimalScaledWrap.style.width = Math.round(w * scale) + 'px';
+          minimalScaledWrap.style.height = Math.round(h * scale) + 'px';
+          minimalIframe.style.width = w + 'px';
+          minimalIframe.style.height = h + 'px';
+          minimalIframe.style.transform = 'scale(' + scale + ')';
+          minimalIframe.style.transformOrigin = 'top left';
+        }
+        if (hardwareInner && hardwareIframe) {
+          hardwareInner.style.width = w + 'px';
+          hardwareInner.style.height = h + 'px';
+          hardwareIframe.style.width = w + 'px';
+          hardwareIframe.style.height = h + 'px';
+          var shellViewport = pane.querySelector('.pane-viewport--hardware');
+          var viewRect = shellViewport ? shellViewport.getBoundingClientRect() : { width: 400, height: 300 };
+          var shellScale = Math.min((viewRect.width || 400) / (w + 80), (viewRect.height || 300) / (h + 60), 1);
+          shell.style.transform = 'scale(' + shellScale + ')';
+          shell.style.transformOrigin = 'center center';
+        }
+      }
+
+      function loadStored() {
+        var stored = null;
+        try {
+          var raw = localStorage.getItem(STORAGE_KEY);
+          if (raw) stored = JSON.parse(raw);
+        } catch (e) {}
+        var ids = stored && Array.isArray(stored) ? stored : [];
+        var defaultId = devices.length ? devices[0].id : '';
+        for (var p = 0; p < PANE_COUNT; p++) {
+          var id = ids[p] != null ? ids[p] : defaultId;
+          applyDeviceToPane(p, id);
+        }
+      }
+
+      function saveStored() {
+        var ids = [];
+        for (var p = 0; p < PANE_COUNT; p++) {
+          var pane = document.querySelector('.pane[data-pane="' + p + '"]');
+          var select = pane ? pane.querySelector('.device-select') : null;
+          ids.push(select ? select.value : (devices[0] ? devices[0].id : ''));
+        }
+        try {
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
+        } catch (e) {}
+      }
+
+      function setEnlargedPane(index) {
+        var grid = document.getElementById('grid');
+        if (!grid) return;
+        enlargedPaneIndex = index;
+        grid.classList.toggle('grid--enlarged', index !== null);
+        for (var p = 0; p < PANE_COUNT; p++) {
+          var pane = document.querySelector('.pane[data-pane="' + p + '"]');
+          var btn = pane ? pane.querySelector('.btn-enlarge') : null;
+          if (pane) pane.classList.toggle('pane--enlarged', p === index);
+          if (btn) {
+            btn.textContent = p === index ? 'Restore' : 'Enlarge';
+            btn.title = p === index ? 'Restore to grid' : 'Enlarge this view';
+          }
+        }
+        setTimeout(function() {
+          if (index !== null) {
+            var pane = document.querySelector('.pane[data-pane="' + index + '"]');
+            var select = pane ? pane.querySelector('.device-select') : null;
+            if (select && select.value) applyDeviceToPane(index, select.value);
+          } else {
+            for (var p = 0; p < PANE_COUNT; p++) {
+              var pane = document.querySelector('.pane[data-pane="' + p + '"]');
+              var select = pane ? pane.querySelector('.device-select') : null;
+              if (select && select.value) applyDeviceToPane(p, select.value);
+            }
+          }
+        }, 0);
+      }
+
+      function setHardwareMode(on) {
+        var root = document.getElementById('root');
+        if (root) {
+          root.classList.remove('quadview--minimal', 'quadview--hardware');
+          root.classList.add(on ? 'quadview--hardware' : 'quadview--minimal');
+        }
+        try {
+          localStorage.setItem(STORAGE_HARDWARE, on ? '1' : '0');
+        } catch (e) {}
+        setTimeout(function() {
+          for (var p = 0; p < PANE_COUNT; p++) {
+            var pane = document.querySelector('.pane[data-pane="' + p + '"]');
+            var select = pane ? pane.querySelector('.device-select') : null;
+            if (select && select.value) applyDeviceToPane(p, select.value);
+          }
+        }, 0);
+      }
+
+      function reset() {
+        try { localStorage.removeItem(STORAGE_KEY); } catch (e) {}
+        setEnlargedPane(null);
+        var defaultId = devices.length ? devices[0].id : '';
+        for (var p = 0; p < PANE_COUNT; p++) {
+          applyDeviceToPane(p, defaultId);
+        }
+        saveStored();
+      }
+
+      function init() {
+        var theme = 'light';
+        try { theme = localStorage.getItem(STORAGE_THEME) || 'light'; } catch (e) {}
+        applyTheme(theme === 'dark');
+        var themeBtn = document.getElementById('theme-toggle');
+        if (themeBtn) {
+          themeBtn.addEventListener('click', function() {
+            var isDark = document.documentElement.classList.contains('dark');
+            applyTheme(!isDark);
+          });
+        }
+
+        var syncChecked = true;
+        try {
+          syncChecked = localStorage.getItem(STORAGE_SYNC) !== '0';
+        } catch (e) {}
+        updateSyncBadge();
+        var syncCb = document.getElementById('sync');
+        if (syncCb) {
+          syncCb.checked = syncChecked;
+          syncCb.setAttribute('aria-checked', syncChecked ? 'true' : 'false');
+          syncCb.addEventListener('change', function() {
+            var on = syncCb.checked;
+            syncCb.setAttribute('aria-checked', on ? 'true' : 'false');
+            try {
+              localStorage.setItem(STORAGE_SYNC, on ? '1' : '0');
+            } catch (e) {}
+            updateSyncBadge();
+          });
+        }
+        var hardwareChecked = false;
+        try {
+          hardwareChecked = localStorage.getItem(STORAGE_HARDWARE) === '1';
+        } catch (e) {}
+        var cb = document.getElementById('hardware-frames');
+        if (cb) {
+          cb.checked = hardwareChecked;
+          cb.setAttribute('aria-checked', hardwareChecked ? 'true' : 'false');
+          setHardwareMode(hardwareChecked);
+          cb.addEventListener('change', function() {
+            var on = cb.checked;
+            cb.setAttribute('aria-checked', on ? 'true' : 'false');
+            setHardwareMode(on);
+          });
+        }
+
+        var panes = document.querySelectorAll('.pane');
+        panes.forEach(function(pane, index) {
+          var select = pane.querySelector('.device-select');
+          buildSelect(select);
+          select.addEventListener('change', function() {
+            applyDeviceToPane(index, select.value);
+            saveStored();
+          });
+          var enlargeBtn = pane.querySelector('.btn-enlarge[data-enlarge]');
+          if (enlargeBtn) {
+            enlargeBtn.addEventListener('click', function() {
+              if (enlargedPaneIndex === index) {
+                setEnlargedPane(null);
+              } else {
+                setEnlargedPane(index);
+              }
+            });
+          }
+        });
+
+        document.querySelectorAll('.viewport').forEach(function(iframe) {
+          iframe.src = targetUrl;
+        });
+
+        loadStored();
+        document.getElementById('reset').addEventListener('click', reset);
+        setupSync();
+      }
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+      } else {
+        init();
+      }
+
+      window.addEventListener('resize', function() {
+        for (var p = 0; p < PANE_COUNT; p++) {
+          var pane = document.querySelector('.pane[data-pane="' + p + '"]');
+          var select = pane ? pane.querySelector('.device-select') : null;
+          if (select && select.value) applyDeviceToPane(p, select.value);
+        }
+      });
+    })();
+  </script>
+</body>
+</html>