@extenshi/cli 0.5.3 → 0.6.0

package/dist/icon-preview.js

@@ -0,0 +1,918 @@
+/**
+ * Self-contained HTML renderer for `extenshi icon preview`.
+ *
+ * Pure (no I/O, no Node APIs) so it is snapshot-testable and bundleable into
+ * browser surfaces (the dojo icon-generator embeds the same page via iframe
+ * srcDoc). Returns a complete single-file HTML document with inline CSS and
+ * inline JS: no network access, no external assets — opens from file:// and
+ * works fully offline.
+ *
+ * What the page shows
+ * -------------------
+ * Toolbar mockups for Chrome, Firefox and Edge with the developer's icon
+ * pinned among neutral neighbor extensions, switchable color palettes
+ * (light / dark / black / saturated / light-tinted + a custom color picker),
+ * a contrast strip that renders the icon on EVERY palette at once with an
+ * automatic "icon melts into the background" warning, a store-size matrix
+ * (16/32/48/128) with an 8× pixel magnifier, and canvas-based export: per-size
+ * PNG downloads and a ZIP (icons + source SVG + manifest snippet).
+ *
+ * Security: the icon is embedded exclusively as a data: URI inside <img>
+ * elements — SVG loaded through <img> never executes scripts. The CLI
+ * additionally strips scripting constructs from the SVG source before it ever
+ * reaches this renderer (see icon.ts), because the raw source is also shipped
+ * in the export ZIP.
+ *
+ * SINGLE SOURCE, TWO COPIES: this file exists byte-identical at
+ *   tools/extenshi-cli/src/icon-preview.ts   (canonical — edit here)
+ *   dojo/src/lib/tools/icon-preview.ts       (synced copy for the dojo iframe)
+ * because the published npm CLI cannot depend on unpublished workspace
+ * packages, and dojo's Docker build does not build the CLI package. A test in
+ * tools/extenshi-cli/src/icon.test.ts fails CI when the copies drift; after
+ * editing, run: cp tools/extenshi-cli/src/icon-preview.ts dojo/src/lib/tools/icon-preview.ts
+ */
+// ── HTML escaping ───────────────────────────────────────────────────────────
+const ESCAPE_MAP = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+function esc(s) {
+    return s.replace(/[&<>"']/g, (c) => ESCAPE_MAP[c] ?? c);
+}
+/** JSON for inline <script> — <-escape so `</script>` can never break out. */
+function jsonForScript(value) {
+    return JSON.stringify(value).replace(/</g, '\\u003c');
+}
+// ── Neutral neighbor icons (inline SVG → data URI) ──────────────────────────
+// Deliberately gray and generic: they give the user's icon realistic company
+// in the pinned area without any brand resemblance, and stay visible on both
+// light and dark toolbars.
+function svgDataUrl(svg) {
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+const NEIGHBOR_GRID = svgDataUrl('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="3.5" fill="#9aa0a6"/><circle cx="5.5" cy="5.5" r="1.6" fill="#fff"/><circle cx="10.5" cy="5.5" r="1.6" fill="#fff"/><circle cx="5.5" cy="10.5" r="1.6" fill="#fff"/><circle cx="10.5" cy="10.5" r="1.6" fill="#fff"/></svg>');
+const NEIGHBOR_BOLT = svgDataUrl('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#80868b"/><path d="M8.8 3.5 5.5 8.6h2.2l-.6 3.9 3.4-5.1H8.3l.5-3.9z" fill="#fff"/></svg>');
+const PUZZLE_ICON = '<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M8.5 3.5a1.75 1.75 0 1 1 3.5 0V5h2.25c.69 0 1.25.56 1.25 1.25V8.5h-1a1.75 1.75 0 1 0 0 3.5h1v2.25c0 .69-.56 1.25-1.25 1.25H12v-1a1.75 1.75 0 1 0-3.5 0v1H6.25C5.56 15.5 5 14.94 5 14.25V12H4a1.75 1.75 0 1 1 0-3.5h1V6.25C5 5.56 5.56 5 6.25 5H8.5V3.5z"/></svg>';
+const PIN_ICON = '<svg viewBox="0 0 16 16" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M9.5 1.5 14 6l-2.7.7-2 2V13l-1.5 1.5-2-3.5L2.3 7.5 3.8 6h4.3l2-2L9.5 1.5z"/></svg>';
+const LOCK_ICON = '<svg viewBox="0 0 12 12" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M3.5 5V3.8a2.5 2.5 0 0 1 5 0V5h.4c.6 0 1.1.5 1.1 1.1v3.8c0 .6-.5 1.1-1.1 1.1H3.1c-.6 0-1.1-.5-1.1-1.1V6.1C2 5.5 2.5 5 3.1 5h.4zm1.2 0h2.6V3.8a1.3 1.3 0 0 0-2.6 0V5z"/></svg>';
+// ── Mockup HTML fragments ───────────────────────────────────────────────────
+/** The pinned-extensions cluster shared by every toolbar mockup. */
+function pinsHtml(iconUrl, name) {
+    return `<span class="pin"><img src="${NEIGHBOR_GRID}" alt="" width="16" height="16"></span>
+<span class="pin"><img src="${NEIGHBOR_BOLT}" alt="" width="16" height="16"></span>
+<span class="pin yours" title="${esc(name)}"><img class="icon-self" src="${esc(iconUrl)}" alt="${esc(name)}" width="16" height="16"></span>
+<span class="pin puzzle" title="Extensions">${PUZZLE_ICON}</span>`;
+}
+// macOS window controls — present on every mockup, like a real window.
+const TRAFFIC_LIGHTS = '<span class="lights"><i class="l r"></i><i class="l y"></i><i class="l g"></i></span>';
+// Firefox chrome pieces (see the real macOS header): Firefox View button in the
+// tab strip, a sidebar toggle in the toolbar, a search-first address bar.
+const FFVIEW_ICON = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><rect x="1.5" y="3.5" width="13" height="10" rx="2"/><path d="M1.5 6.5h13"/></svg>';
+const SIDEBAR_ICON = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><rect x="1.5" y="2.5" width="13" height="11" rx="2"/><path d="M6 2.5v11"/></svg>';
+const SEARCH_ICON = '<svg viewBox="0 0 14 14" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="6" cy="6" r="4"/><path d="m9 9 3.4 3.4"/></svg>';
+function browserMockup(kind, input) {
+    const label = kind === 'chrome' ? 'Chrome' : kind === 'firefox' ? 'Firefox' : 'Edge';
+    const menuGlyph = kind === 'firefox' ? '☰' : kind === 'edge' ? '…' : '⋮';
+    const urlText = 'extenshi.io';
+    const extMenu = kind === 'chrome'
+        ? `<div class="extmenu">
+	<div class="extmenu-title">Extensions</div>
+	<div class="extmenu-row you">
+		<img class="icon-self" src="${esc(input.dataUrl)}" alt="" width="20" height="20">
+		<span class="extmenu-name">${esc(input.name)}</span>
+		<span class="extmenu-pin">${PIN_ICON}</span>
+	</div>
+	<div class="extmenu-row">
+		<img src="${NEIGHBOR_GRID}" alt="" width="20" height="20">
+		<span class="extmenu-name">Grid Notes</span>
+		<span class="extmenu-pin dim">${PIN_ICON}</span>
+	</div>
+	<div class="extmenu-row">
+		<img src="${NEIGHBOR_BOLT}" alt="" width="20" height="20">
+		<span class="extmenu-name">Quick Actions</span>
+		<span class="extmenu-pin dim">${PIN_ICON}</span>
+	</div>
+</div>`
+        : '';
+    // Firefox has its own header anatomy (see the real macOS window): Firefox
+    // View before the tabs, a tab-list chevron at the far right of the strip,
+    // a sidebar toggle, a search-first address bar, and ☰ instead of an avatar.
+    const tabs = kind === 'firefox'
+        ? `<div class="tabs">
+			${TRAFFIC_LIGHTS}
+			<span class="strip-btn" title="Firefox View">${FFVIEW_ICON}</span>
+			<div class="tab active"><span class="fav"></span><span class="tab-title">New Tab</span><span class="tab-x">×</span></div>
+			<span class="newtab">+</span>
+			<span class="strip-spacer"></span>
+			<span class="strip-btn chevron" title="List all tabs">⌄</span>
+		</div>`
+        : `<div class="tabs">
+			${TRAFFIC_LIGHTS}
+			<div class="tab active"><span class="fav"></span><span class="tab-title">New Tab</span><span class="tab-x">×</span></div>
+			<div class="tab"><span class="fav"></span><span class="tab-title">Docs — Extenshi</span></div>
+			<span class="newtab">+</span>
+		</div>`;
+    const toolbar = kind === 'firefox'
+        ? `<div class="toolbar">
+			<span class="navbtn">${SIDEBAR_ICON}</span>
+			<span class="navbtn">←</span><span class="navbtn dim">→</span><span class="navbtn">⟳</span>
+			<div class="urlbar"><span class="lock">${SEARCH_ICON}</span><span class="url placeholder">Search or enter address</span></div>
+			<div class="pins">${pinsHtml(input.dataUrl, input.name)}</div>
+			<span class="menu">${menuGlyph}</span>
+		</div>`
+        : `<div class="toolbar">
+			<span class="navbtn">←</span><span class="navbtn dim">→</span><span class="navbtn">⟳</span>
+			<div class="urlbar"><span class="lock">${LOCK_ICON}</span><span class="url">${urlText}</span></div>
+			<div class="pins">${pinsHtml(input.dataUrl, input.name)}</div>
+			<span class="avatar"></span>
+			<span class="menu">${menuGlyph}</span>
+		</div>`;
+    return `<section class="browser ${kind}">
+	<h3>${label}</h3>
+	<div class="bwin">
+		${tabs}
+		${toolbar}
+		<div class="pagearea"></div>
+	</div>
+	${extMenu}
+</section>`;
+}
+// ── Page CSS ────────────────────────────────────────────────────────────────
+const CSS = `
+:root {
+	--t-toolbar: #ffffff; --t-tabstrip: #dfe1e5; --t-url: #f1f3f4;
+	--t-text: #202124; --t-muted: #5f6368; --t-border: rgba(0,0,0,.12);
+	--page-bg: #f6f7f9; --page-text: #1c1e21; --card: #ffffff; --card-border: #e4e6ea;
+	--accent: #5e5ce6;
+}
+@media (prefers-color-scheme: dark) {
+	:root { --page-bg: #131417; --page-text: #e8eaed; --card: #1c1e22; --card-border: #2a2d33; }
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+	font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	background: var(--page-bg); color: var(--page-text); padding: 28px 20px 60px;
+}
+main { max-width: 1080px; margin: 0 auto; display: grid; gap: 22px; }
+.page-head .brand { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
+.page-head h1 { font-size: 24px; margin-top: 2px; }
+.page-head .meta { color: color-mix(in srgb, var(--page-text) 55%, transparent); font-size: 12.5px; margin-top: 2px; }
+section.card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 18px; }
+section.card > h2 { font-size: 15px; margin-bottom: 12px; }
+h2 .hint { font-weight: 400; font-size: 12.5px; color: color-mix(in srgb, var(--page-text) 55%, transparent); margin-left: 8px; }
+
+/* Palette chips */
+.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.chip {
+	display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
+	border: 1px solid var(--card-border); background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 13px;
+}
+.chip .sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
+.chip.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.custom { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin-left: 4px; }
+.custom input { width: 30px; height: 30px; border: none; background: none; padding: 0; cursor: pointer; }
+
+/* Browser mockups */
+#mockups { display: grid; gap: 18px; }
+.browser h3 { font-size: 13px; color: color-mix(in srgb, var(--page-text) 60%, transparent); margin-bottom: 6px; }
+.bwin { border-radius: 10px; overflow: hidden; border: 1px solid var(--t-border); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
+.tabs { display: flex; align-items: flex-end; gap: 2px; padding: 7px 10px 0; background: var(--t-tabstrip); }
+.tab {
+	display: flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 12px; color: var(--t-muted);
+	border-radius: 8px 8px 0 0; max-width: 190px; white-space: nowrap; overflow: hidden;
+}
+.tab.active { background: var(--t-toolbar); color: var(--t-text); }
+.tab .fav { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--t-muted) 55%, transparent); flex: none; }
+.tab .tab-title { overflow: hidden; text-overflow: ellipsis; }
+.tab .tab-x { margin-left: 4px; opacity: .6; }
+.newtab { align-self: center; padding: 0 10px 4px; color: var(--t-muted); font-size: 15px; }
+.lights { display: inline-flex; align-items: center; gap: 6.5px; align-self: center; padding: 0 10px 4px 6px; }
+.lights .l { width: 11px; height: 11px; border-radius: 50%; }
+.lights .l.r { background: #ff5f57; }
+.lights .l.y { background: #febc2e; }
+.lights .l.g { background: #28c840; }
+.firefox .tabs { padding: 6px 8px; align-items: center; }
+.firefox .tab { border-radius: 6px; margin-bottom: 0; padding: 7px 12px; min-width: 150px; }
+.firefox .tab.active { box-shadow: 0 1px 2px rgba(0,0,0,.25); }
+.firefox .tab .tab-x { margin-left: auto; }
+.firefox .lights, .firefox .newtab { padding-bottom: 0; }
+.strip-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; color: var(--t-muted); }
+.strip-btn.chevron { font-size: 12px; }
+.strip-spacer { flex: 1; }
+.firefox .urlbar .placeholder { opacity: .75; }
+.edge .tab { border-radius: 6px 6px 0 0; }
+.toolbar { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--t-toolbar); color: var(--t-text); }
+.navbtn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--t-muted); font-size: 14px; flex: none; }
+.navbtn.dim { opacity: .45; }
+.urlbar {
+	flex: 1; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
+	background: var(--t-url); color: var(--t-muted); border-radius: 999px; font-size: 12.5px; min-width: 120px;
+}
+.firefox .urlbar, .edge .urlbar { border-radius: 7px; }
+.lock { display: inline-flex; opacity: .8; }
+.pins { display: flex; align-items: center; gap: 2px; padding: 0 2px; }
+.pin { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; }
+.pin:hover { background: color-mix(in srgb, var(--t-muted) 18%, transparent); }
+.pin img { display: block; }
+.pin.puzzle { color: var(--t-muted); }
+.pin.yours.hl { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
+.avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #b7c4d8, #7e93b1); }
+.menu { color: var(--t-muted); padding: 0 4px; font-size: 15px; }
+.pagearea { height: 44px; background: color-mix(in srgb, var(--t-toolbar) 60%, var(--page-bg)); border-top: 1px solid var(--t-border); }
+
+/* Chrome puzzle dropdown */
+.extmenu {
+	width: 300px; margin: 10px 0 0 auto; background: var(--t-toolbar); color: var(--t-text);
+	border: 1px solid var(--t-border); border-radius: 10px; padding: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
+}
+.extmenu-title { font-size: 12px; font-weight: 600; padding: 4px 8px 8px; color: var(--t-muted); }
+.extmenu-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; font-size: 13px; }
+.extmenu-row:hover { background: color-mix(in srgb, var(--t-muted) 14%, transparent); }
+.extmenu-row.you { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.extmenu-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.extmenu-pin { color: var(--t-muted); display: inline-flex; }
+.extmenu-pin.dim { opacity: .4; }
+.extmenu-row.you .extmenu-pin { color: var(--accent); }
+
+/* Contrast grid */
+#contrast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
+.cg-cell { border: 1px solid var(--card-border); border-radius: 9px; overflow: hidden; }
+.cg-strip { display: flex; align-items: center; gap: 2px; padding: 9px 12px; }
+.cg-strip .pin { width: 26px; height: 26px; }
+.cg-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; font-size: 12px; }
+.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
+.badge.ok { background: color-mix(in srgb, #22c55e 18%, transparent); color: #15803d; }
+.badge.weak { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #b45309; }
+.badge.bad { background: color-mix(in srgb, #ef4444 20%, transparent); color: #b91c1c; }
+@media (prefers-color-scheme: dark) {
+	.badge.ok { color: #4ade80; } .badge.weak { color: #fbbf24; } .badge.bad { color: #f87171; }
+}
+
+/* Size matrix + magnifier */
+.size-flex { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end; }
+.size-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: color-mix(in srgb, var(--page-text) 60%, transparent); }
+.checker {
+	display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 8px; border: 1px solid var(--card-border);
+	background: repeating-conic-gradient(rgba(128,128,128,.16) 0% 25%, transparent 0% 50%); background-size: 14px 14px;
+}
+.mag-wrap { display: flex; gap: 18px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
+#mag { image-rendering: pixelated; width: 128px; height: 128px; border-radius: 8px; }
+.mag-box { display: inline-flex; padding: 10px; border-radius: 10px; background: var(--t-toolbar); border: 1px solid var(--t-border); }
+.mag-note { font-size: 12.5px; color: color-mix(in srgb, var(--page-text) 60%, transparent); max-width: 380px; }
+.fill-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-top: 14px; color: color-mix(in srgb, var(--page-text) 72%, transparent); }
+label.toggle.trim { margin: 10px 0 0; display: flex; }
+.note-warn {
+	font-size: 12.5px; line-height: 1.45; padding: 9px 12px; border-radius: 8px; margin-bottom: 12px;
+	background: color-mix(in srgb, #f59e0b 14%, transparent); color: #b45309;
+}
+@media (prefers-color-scheme: dark) { .note-warn { color: #fbbf24; } }
+
+/* Export */
+.export-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 13px; }
+button.btn {
+	font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 8px; cursor: pointer;
+	border: 1px solid var(--card-border); background: transparent; color: inherit;
+}
+button.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+button.btn:hover { filter: brightness(1.06); }
+pre.snippet { background: color-mix(in srgb, var(--page-text) 7%, transparent); border-radius: 8px; padding: 12px; font-size: 12px; overflow-x: auto; }
+.foot { text-align: center; font-size: 12px; color: color-mix(in srgb, var(--page-text) 45%, transparent); }
+.foot a { color: var(--accent); }
+.raster-note { font-size: 12.5px; color: #b45309; margin-bottom: 10px; }
+label.toggle { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; cursor: pointer; margin-left: auto; }
+.themes-head { display: flex; align-items: center; }
+`;
+// ── Embedded page JS ────────────────────────────────────────────────────────
+// Written in plain ES2020 with string concatenation (no template literals) so
+// the outer TS template literal never needs escaped interpolations.
+const PAGE_JS = String.raw `
+'use strict';
+var CFG = window.__ICON_PREVIEW__;
+
+// ---- palettes ----
+var THEMES = [
+	{ id: 'light',  label: 'Light',       toolbar: '#ffffff', tabstrip: '#dfe1e5' },
+	{ id: 'tinted', label: 'Light tinted',toolbar: '#e9eef6', tabstrip: '#d4dceb' },
+	{ id: 'dark',   label: 'Dark',        toolbar: '#35363a', tabstrip: '#202124' },
+	{ id: 'black',  label: 'Black',       toolbar: '#1b1b1f', tabstrip: '#0e0e10' },
+	{ id: 'ocean',  label: 'Saturated',   toolbar: '#174ea6', tabstrip: '#0d3a80' }
+];
+
+function hexToRgb(hex) {
+	var h = hex.replace('#', '');
+	if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+	var n = parseInt(h, 16);
+	return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function rgbToHex(rgb) {
+	return '#' + rgb.map(function (v) {
+		var s = Math.max(0, Math.min(255, Math.round(v))).toString(16);
+		return s.length === 1 ? '0' + s : s;
+	}).join('');
+}
+function mix(a, b, t) {
+	return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
+}
+// WCAG relative luminance
+function relLum(rgb) {
+	var c = rgb.map(function (v) {
+		v /= 255;
+		return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+	});
+	return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+}
+function contrastRatio(a, b) {
+	var l1 = relLum(a), l2 = relLum(b);
+	var hi = Math.max(l1, l2), lo = Math.min(l1, l2);
+	return (hi + 0.05) / (lo + 0.05);
+}
+function deriveTheme(toolbarHex) {
+	var t = hexToRgb(toolbarHex);
+	var darkText = relLum(t) > 0.4;
+	var text = darkText ? [32, 33, 36] : [235, 237, 240];
+	return {
+		id: 'custom', label: 'Custom',
+		toolbar: toolbarHex,
+		tabstrip: rgbToHex(mix(t, darkText ? [0, 0, 0] : [0, 0, 0], darkText ? 0.14 : 0.4)),
+		text: rgbToHex(text),
+		muted: rgbToHex(mix(t, text, 0.62)),
+		url: rgbToHex(mix(t, text, darkText ? 0.06 : 0.1))
+	};
+}
+function materialize(theme) {
+	if (theme.text) return theme;
+	var full = deriveTheme(theme.toolbar);
+	return {
+		id: theme.id, label: theme.label,
+		toolbar: theme.toolbar, tabstrip: theme.tabstrip,
+		text: full.text, muted: full.muted, url: full.url
+	};
+}
+
+var currentTheme = materialize(THEMES[0]);
+function applyTheme(theme) {
+	currentTheme = materialize(theme);
+	var r = document.documentElement.style;
+	r.setProperty('--t-toolbar', currentTheme.toolbar);
+	r.setProperty('--t-tabstrip', currentTheme.tabstrip);
+	r.setProperty('--t-url', currentTheme.url);
+	r.setProperty('--t-text', currentTheme.text);
+	r.setProperty('--t-muted', currentTheme.muted);
+	r.setProperty('--t-border', relLum(hexToRgb(currentTheme.toolbar)) > 0.4 ? 'rgba(0,0,0,.14)' : 'rgba(255,255,255,.14)');
+	document.querySelectorAll('.chip[data-theme]').forEach(function (c) {
+		c.classList.toggle('active', c.getAttribute('data-theme') === currentTheme.id);
+	});
+	drawMagnifier();
+}
+
+// ---- icon raster helpers (SVG/PNG → canvas) ----
+var iconImg = null;
+function loadIcon() {
+	return new Promise(function (resolve, reject) {
+		if (iconImg) { resolve(iconImg); return; }
+		var img = new Image();
+		img.onload = function () { iconImg = img; resolve(img); };
+		img.onerror = function () { reject(new Error('Failed to load the icon image')); };
+		img.src = CFG.dataUrl;
+	});
+}
+// ---- trim-to-edges (canvas-usage) state ----
+// When the artwork leaves wide transparent margins inside its viewBox, the
+// 16px toolbar render wastes those pixels. "trimmed" holds an edge-to-edge
+// variant (vector viewBox re-crop for SVG, canvas crop for PNG) that the trim
+// toggle swaps into every preview AND every export.
+var trimOn = false;
+var trimmed = null; // { svgSource?, displayUrl, img? }
+
+function activeSvgSource() {
+	return trimOn && trimmed && trimmed.svgSource ? trimmed.svgSource : CFG.svgSource;
+}
+function displayIconUrl() {
+	return trimOn && trimmed ? trimmed.displayUrl : CFG.dataUrl;
+}
+
+function parseSvg(source) {
+	var doc = new DOMParser().parseFromString(source, 'image/svg+xml');
+	var el = doc.querySelector('svg');
+	if (el && !el.getAttribute('viewBox')) {
+		var w = parseFloat(el.getAttribute('width') || '') || 24;
+		var h = parseFloat(el.getAttribute('height') || '') || 24;
+		el.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
+	}
+	return el;
+}
+// For SVG sources, re-encode with explicit pixel dimensions so every browser
+// rasterizes at the exact target size (Firefox refuses dimension-less SVGs).
+function sizedSvgUrl(size) {
+	var el = parseSvg(activeSvgSource());
+	if (!el) return CFG.dataUrl;
+	el.setAttribute('width', String(size));
+	el.setAttribute('height', String(size));
+	var xml = new XMLSerializer().serializeToString(el);
+	return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(xml);
+}
+function renderToCanvas(size) {
+	return new Promise(function (resolve, reject) {
+		var finish = function (img) {
+			var canvas = document.createElement('canvas');
+			canvas.width = size; canvas.height = size;
+			var ctx = canvas.getContext('2d');
+			ctx.imageSmoothingEnabled = true;
+			ctx.imageSmoothingQuality = 'high';
+			ctx.drawImage(img, 0, 0, size, size);
+			resolve(canvas);
+		};
+		if (CFG.isSvg && CFG.svgSource) {
+			var img = new Image();
+			img.onload = function () { finish(img); };
+			img.onerror = function () { reject(new Error('SVG rasterization failed')); };
+			img.src = sizedSvgUrl(size);
+		} else if (trimOn && trimmed && trimmed.img) {
+			finish(trimmed.img);
+		} else {
+			loadIcon().then(finish, reject);
+		}
+	});
+}
+function canvasToBlob(canvas) {
+	return new Promise(function (resolve, reject) {
+		canvas.toBlob(function (b) { b ? resolve(b) : reject(new Error('canvas.toBlob returned null')); }, 'image/png');
+	});
+}
+function downloadBlob(name, blob) {
+	var url = URL.createObjectURL(blob);
+	var a = document.createElement('a');
+	a.href = url; a.download = name;
+	document.body.appendChild(a);
+	a.click();
+	a.remove();
+	setTimeout(function () { URL.revokeObjectURL(url); }, 4000);
+}
+
+// ---- icon analysis ----
+// One 128px pass over the UNTRIMMED source: alpha-weighted average color,
+// coverage, average chroma (for the mid-gray heuristic), and the opaque-pixel
+// bounding box (for the canvas-usage metric + trim).
+var ANALYZE_SIZE = 128;
+var iconStats = null;
+function analyzeIcon() {
+	return renderToCanvas(ANALYZE_SIZE).then(function (canvas) {
+		var n = ANALYZE_SIZE;
+		var d = canvas.getContext('2d').getImageData(0, 0, n, n).data;
+		var r = 0, g = 0, b = 0, wsum = 0, opaque = 0, chroma = 0;
+		var x0 = n, y0 = n, x1 = -1, y1 = -1;
+		for (var y = 0; y < n; y++) {
+			for (var x = 0; x < n; x++) {
+				var i = (y * n + x) * 4;
+				var a = d[i + 3] / 255;
+				if (a > 0.05) {
+					opaque++;
+					if (x < x0) x0 = x;
+					if (x > x1) x1 = x;
+					if (y < y0) y0 = y;
+					if (y > y1) y1 = y;
+				}
+				r += d[i] * a; g += d[i + 1] * a; b += d[i + 2] * a; wsum += a;
+				chroma += (Math.max(d[i], d[i + 1], d[i + 2]) - Math.min(d[i], d[i + 1], d[i + 2])) * a;
+			}
+		}
+		if (wsum > 0 && x1 >= 0) {
+			iconStats = {
+				avg: [r / wsum, g / wsum, b / wsum],
+				coverage: opaque / (n * n),
+				chroma: chroma / wsum,
+				bbox: { x0: x0, y0: y0, x1: x1, y1: y1 },
+				fill: Math.max(x1 - x0 + 1, y1 - y0 + 1) / n
+			};
+		} else {
+			iconStats = { avg: [128, 128, 128], coverage: 0, chroma: 0, bbox: null, fill: 0 };
+		}
+		return iconStats;
+	});
+}
+function contrastBadge(theme) {
+	var ratio = contrastRatio(iconStats.avg, hexToRgb(theme.toolbar));
+	if (ratio < 1.45) return { cls: 'bad', label: '⚠ melts into background', ratio: ratio };
+	if (ratio < 2.2) return { cls: 'weak', label: '△ low contrast', ratio: ratio };
+	return { cls: 'ok', label: '✓ reads well', ratio: ratio };
+}
+// Mid-gray heuristic: a desaturated icon whose luminance sits in the middle
+// clears the WCAG ratio against EVERY toolbar (≈3–4:1 everywhere) yet stands
+// out on none of them — the ratio badges alone can't catch that.
+function isMidGray() {
+	if (!iconStats || iconStats.coverage < 0.04) return false;
+	var lum = relLum(iconStats.avg);
+	return iconStats.chroma < 30 && lum > 0.1 && lum < 0.62;
+}
+
+// ---- canvas-usage metric + trim toggle ----
+function computeTrimmedVariant() {
+	if (!iconStats || !iconStats.bbox || iconStats.fill >= 0.98) { trimmed = null; return Promise.resolve(); }
+	var n = ANALYZE_SIZE;
+	var bb = iconStats.bbox;
+	var pad = 0.02; // 2% breathing room so strokes don't touch the very edge
+	if (CFG.isSvg && CFG.svgSource) {
+		var el = parseSvg(CFG.svgSource);
+		if (!el) { trimmed = null; return Promise.resolve(); }
+		var vb = (el.getAttribute('viewBox') || '0 0 24 24').trim().split(/[\s,]+/).map(Number);
+		var bw = ((bb.x1 - bb.x0 + 1) / n) * vb[2];
+		var bh = ((bb.y1 - bb.y0 + 1) / n) * vb[3];
+		var cx = vb[0] + ((bb.x0 + bb.x1 + 1) / 2 / n) * vb[2];
+		var cy = vb[1] + ((bb.y0 + bb.y1 + 1) / 2 / n) * vb[3];
+		var side = Math.max(bw, bh) * (1 + pad * 2);
+		el.setAttribute('viewBox', (cx - side / 2) + ' ' + (cy - side / 2) + ' ' + side + ' ' + side);
+		el.removeAttribute('width');
+		el.removeAttribute('height');
+		var xml = new XMLSerializer().serializeToString(el);
+		trimmed = { svgSource: xml, displayUrl: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(xml) };
+		return Promise.resolve();
+	}
+	// PNG: crop the natural-resolution image around the (scaled) bounding box.
+	return loadIcon().then(function (img) {
+		var nw = img.naturalWidth || n, nh = img.naturalHeight || n;
+		var sx0 = Math.floor((bb.x0 / n) * nw), sx1 = Math.ceil(((bb.x1 + 1) / n) * nw);
+		var sy0 = Math.floor((bb.y0 / n) * nh), sy1 = Math.ceil(((bb.y1 + 1) / n) * nh);
+		var bwPx = sx1 - sx0, bhPx = sy1 - sy0;
+		var side = Math.ceil(Math.max(bwPx, bhPx) * (1 + pad * 2));
+		var canvas = document.createElement('canvas');
+		canvas.width = side; canvas.height = side;
+		var ctx = canvas.getContext('2d');
+		ctx.drawImage(img, sx0, sy0, bwPx, bhPx, Math.round((side - bwPx) / 2), Math.round((side - bhPx) / 2), bwPx, bhPx);
+		var url = canvas.toDataURL('image/png');
+		return new Promise(function (resolve) {
+			var timg = new Image();
+			timg.onload = function () { trimmed = { displayUrl: url, img: timg }; resolve(); };
+			timg.onerror = function () { trimmed = null; resolve(); };
+			timg.src = url;
+		});
+	});
+}
+
+function refreshIconEverywhere() {
+	var url = displayIconUrl();
+	document.querySelectorAll('img.icon-self').forEach(function (img) { img.src = url; });
+	drawMagnifier();
+	renderContrastGrid();
+}
+
+function renderFillNote() {
+	var note = document.getElementById('fill-note');
+	if (!note || !iconStats) return;
+	var pct = Math.round(iconStats.fill * 100);
+	note.textContent = '';
+	var badge = document.createElement('span');
+	var ok = iconStats.fill >= 0.88;
+	badge.className = 'badge ' + (ok ? 'ok' : 'weak');
+	badge.textContent = ok ? '✓ fills the canvas well' : '△ scale the artwork to the edges';
+	var text = document.createElement('span');
+	text.textContent = 'Artwork fills ' + pct + '% of its canvas — the rest is transparent margin that shrinks the icon in the toolbar. ';
+	note.appendChild(text);
+	note.appendChild(badge);
+	var trimRow = document.getElementById('trim-row');
+	if (trimRow && iconStats.fill < 0.98 && iconStats.fill > 0) trimRow.hidden = false;
+}
+
+// ---- contrast grid ----
+function pinStrip(theme) {
+	var wrap = document.createElement('div');
+	wrap.className = 'cg-strip';
+	wrap.style.background = theme.toolbar;
+	var srcs = [CFG.neighbors[0], CFG.neighbors[1], displayIconUrl()];
+	srcs.forEach(function (src, i) {
+		var pin = document.createElement('span');
+		pin.className = 'pin' + (i === 2 ? ' yours' : '');
+		var img = document.createElement('img');
+		img.src = src; img.width = 16; img.height = 16; img.alt = '';
+		pin.appendChild(img);
+		wrap.appendChild(pin);
+	});
+	return wrap;
+}
+function renderContrastGrid() {
+	var grid = document.getElementById('contrast-grid');
+	grid.textContent = '';
+	var themes = THEMES.map(materialize);
+	if (currentTheme.id === 'custom') themes.push(currentTheme);
+	themes.forEach(function (theme) {
+		var cell = document.createElement('div');
+		cell.className = 'cg-cell';
+		cell.appendChild(pinStrip(theme));
+		var meta = document.createElement('div');
+		meta.className = 'cg-meta';
+		var name = document.createElement('span');
+		name.textContent = theme.label;
+		var badge = document.createElement('span');
+		var v = contrastBadge(theme);
+		badge.className = 'badge ' + v.cls;
+		badge.title = 'contrast ratio ' + v.ratio.toFixed(2) + ':1 (icon average color vs toolbar)';
+		badge.textContent = v.label;
+		meta.appendChild(name);
+		meta.appendChild(badge);
+		cell.appendChild(meta);
+		grid.appendChild(cell);
+	});
+}
+
+// ---- magnifier ----
+function drawMagnifier() {
+	var mag = document.getElementById('mag');
+	if (!mag) return;
+	renderToCanvas(16).then(function (src) {
+		var ctx = mag.getContext('2d');
+		ctx.clearRect(0, 0, 16, 16);
+		ctx.imageSmoothingEnabled = false;
+		ctx.drawImage(src, 0, 0);
+	});
+	var box = document.getElementById('mag-box');
+	if (box) box.style.background = currentTheme.toolbar;
+}
+
+// ---- exports ----
+var SIZES = [16, 32, 48, 128];
+function exportPng(size) {
+	renderToCanvas(size).then(canvasToBlob).then(function (blob) {
+		downloadBlob(size + '.png', blob);
+	}).catch(function (e) { alert(e.message); });
+}
+
+// STORE-method ZIP writer (PNG members are already compressed).
+var CRC_TABLE = (function () {
+	var t = new Uint32Array(256);
+	for (var n = 0; n < 256; n++) {
+		var c = n;
+		for (var k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+		t[n] = c >>> 0;
+	}
+	return t;
+})();
+function crc32(data) {
+	var crc = 0xffffffff;
+	for (var i = 0; i < data.length; i++) crc = CRC_TABLE[(crc ^ data[i]) & 0xff] ^ (crc >>> 8);
+	return (crc ^ 0xffffffff) >>> 0;
+}
+function ZipBuilder() { this.entries = []; this.chunks = []; this.offset = 0; }
+ZipBuilder.prototype.push = function (chunk) { this.chunks.push(chunk); this.offset += chunk.length; };
+ZipBuilder.prototype.addFile = function (name, content) {
+	var data = typeof content === 'string' ? new TextEncoder().encode(content) : content;
+	var nameBytes = new TextEncoder().encode(name);
+	var crc = crc32(data);
+	var d = new Date();
+	var dosTime = (d.getHours() << 11) | (d.getMinutes() << 5) | Math.floor(d.getSeconds() / 2);
+	var dosDate = ((d.getFullYear() - 1980) << 9) | ((d.getMonth() + 1) << 5) | d.getDate();
+	var h = new DataView(new ArrayBuffer(30));
+	h.setUint32(0, 0x04034b50, true);
+	h.setUint16(4, 20, true);
+	h.setUint16(6, 0x0800, true);
+	h.setUint16(8, 0, true);
+	h.setUint16(10, dosTime, true);
+	h.setUint16(12, dosDate, true);
+	h.setUint32(14, crc, true);
+	h.setUint32(18, data.length, true);
+	h.setUint32(22, data.length, true);
+	h.setUint16(26, nameBytes.length, true);
+	h.setUint16(28, 0, true);
+	this.entries.push({ name: name, size: data.length, crc: crc, offset: this.offset, dosTime: dosTime, dosDate: dosDate });
+	this.push(new Uint8Array(h.buffer));
+	this.push(nameBytes);
+	this.push(data);
+};
+ZipBuilder.prototype.toBlob = function () {
+	var central = [];
+	var centralSize = 0;
+	this.entries.forEach(function (e) {
+		var nameBytes = new TextEncoder().encode(e.name);
+		var r = new DataView(new ArrayBuffer(46));
+		r.setUint32(0, 0x02014b50, true);
+		r.setUint16(4, 20, true);
+		r.setUint16(6, 20, true);
+		r.setUint16(8, 0x0800, true);
+		r.setUint16(10, 0, true);
+		r.setUint16(12, e.dosTime, true);
+		r.setUint16(14, e.dosDate, true);
+		r.setUint32(16, e.crc, true);
+		r.setUint32(20, e.size, true);
+		r.setUint32(24, e.size, true);
+		r.setUint16(28, nameBytes.length, true);
+		r.setUint32(42, e.offset, true);
+		central.push(new Uint8Array(r.buffer), nameBytes);
+		centralSize += 46 + nameBytes.length;
+	});
+	var end = new DataView(new ArrayBuffer(22));
+	end.setUint32(0, 0x06054b50, true);
+	end.setUint16(8, this.entries.length, true);
+	end.setUint16(10, this.entries.length, true);
+	end.setUint32(12, centralSize, true);
+	end.setUint32(16, this.offset, true);
+	return new Blob(this.chunks.concat(central, [new Uint8Array(end.buffer)]), { type: 'application/zip' });
+};
+
+function exportZip() {
+	var btn = document.getElementById('zip-btn');
+	btn.disabled = true;
+	var zip = new ZipBuilder();
+	var work = SIZES.reduce(function (p, size) {
+		return p.then(function () {
+			return renderToCanvas(size).then(canvasToBlob).then(function (blob) {
+				return blob.arrayBuffer().then(function (buf) {
+					zip.addFile('icons/' + size + '.png', new Uint8Array(buf));
+				});
+			});
+		});
+	}, Promise.resolve());
+	work.then(function () {
+		if (CFG.isSvg && CFG.svgSource) zip.addFile('icon.svg', activeSvgSource());
+		zip.addFile('manifest-icons.json', CFG.manifestSnippet + '\n');
+		downloadBlob(CFG.safeName + '-icons.zip', zip.toBlob());
+	}).catch(function (e) { alert(e.message); }).then(function () { btn.disabled = false; });
+}
+
+function copySnippet() {
+	var btn = document.getElementById('copy-btn');
+	navigator.clipboard.writeText(CFG.manifestSnippet).then(function () {
+		var prev = btn.textContent;
+		btn.textContent = '✓ Copied';
+		setTimeout(function () { btn.textContent = prev; }, 1800);
+	}, function () { alert('Clipboard unavailable — copy the snippet below manually.'); });
+}
+
+// ---- boot ----
+function boot() {
+	var chips = document.getElementById('theme-chips');
+	THEMES.forEach(function (theme, i) {
+		var chip = document.createElement('button');
+		chip.type = 'button';
+		chip.className = 'chip' + (i === 0 ? ' active' : '');
+		chip.setAttribute('data-theme', theme.id);
+		var sw = document.createElement('span');
+		sw.className = 'sw';
+		sw.style.background = theme.toolbar;
+		chip.appendChild(sw);
+		chip.appendChild(document.createTextNode(theme.label));
+		chip.addEventListener('click', function () { applyTheme(theme); renderContrastGrid(); });
+		chips.appendChild(chip);
+	});
+	document.getElementById('custom-color').addEventListener('input', function (e) {
+		applyTheme(deriveTheme(e.target.value));
+		renderContrastGrid();
+	});
+	document.getElementById('hl-toggle').addEventListener('change', function (e) {
+		document.querySelectorAll('.pin.yours').forEach(function (p) {
+			p.classList.toggle('hl', e.target.checked);
+		});
+	});
+	SIZES.forEach(function (size) {
+		var el = document.getElementById('png-' + size);
+		if (el) el.addEventListener('click', function () { exportPng(size); });
+	});
+	// Export controls are absent in embedded mode — the host UI has its own.
+	var zipBtn = document.getElementById('zip-btn');
+	if (zipBtn) zipBtn.addEventListener('click', exportZip);
+	var copyBtn = document.getElementById('copy-btn');
+	if (copyBtn) copyBtn.addEventListener('click', copySnippet);
+
+	var trimToggle = document.getElementById('trim-toggle');
+	if (trimToggle) trimToggle.addEventListener('change', function (e) {
+		trimOn = e.target.checked;
+		refreshIconEverywhere();
+	});
+
+	analyzeIcon().then(function () {
+		renderContrastGrid();
+		drawMagnifier();
+		renderFillNote();
+		var mg = document.getElementById('midgray-note');
+		if (mg && isMidGray()) mg.hidden = false;
+		return computeTrimmedVariant();
+	}).catch(function (e) {
+		document.getElementById('contrast-grid').textContent = 'Contrast analysis unavailable: ' + e.message;
+	});
+}
+document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', boot) : boot();
+`;
+// ── Manifest snippet (kept in sync with the dojo tool) ──────────────────────
+export const MANIFEST_SNIPPET = `{
+	"icons": {
+		"16": "icons/16.png",
+		"32": "icons/32.png",
+		"48": "icons/48.png",
+		"128": "icons/128.png"
+	},
+	"action": {
+		"default_icon": {
+			"16": "icons/16.png",
+			"32": "icons/32.png"
+		}
+	}
+}`;
+/** Filesystem-safe base name for downloads derived from the extension name. */
+export function safeDownloadName(name) {
+    const cleaned = name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/gi, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 48);
+    return cleaned || 'icon';
+}
+// ── Renderer ────────────────────────────────────────────────────────────────
+export function renderIconPreviewHtml(input) {
+    const config = {
+        name: input.name,
+        dataUrl: input.dataUrl,
+        isSvg: input.isSvg,
+        svgSource: input.isSvg ? (input.svgSource ?? null) : null,
+        manifestSnippet: MANIFEST_SNIPPET,
+        safeName: safeDownloadName(input.name),
+        neighbors: [NEIGHBOR_GRID, NEIGHBOR_BOLT],
+    };
+    const generated = input.generatedAt.toISOString().slice(0, 16).replace('T', ' ');
+    const sizeCells = [16, 32, 48, 128]
+        .map((size) => `<div class="size-cell">
+	<span class="checker"><img class="icon-self" src="${esc(input.dataUrl)}" width="${size}" height="${size}" alt="${size}px preview"></span>
+	<span>${size}px</span>
+</div>`)
+        .join('\n');
+    const rasterNote = input.isSvg
+        ? ''
+        : '<p class="raster-note">Source is a raster PNG — exports are resized from it; sizes above its native resolution will look soft. Prefer an SVG source when possible.</p>';
+    const header = input.embedded
+        ? ''
+        : `<header class="page-head">
+		<div class="brand">Extenshi · Icon preview</div>
+		<h1>${esc(input.name)}</h1>
+		<p class="meta">${esc(input.fileName)} · generated ${esc(generated)} UTC · @extenshi/cli v${esc(input.cliVersion)}</p>
+	</header>
+
+	`;
+    const exportSection = input.embedded
+        ? ''
+        : `<section class="card">
+		<h2>Export</h2>
+		<div class="export-row">
+			<button class="btn" type="button" id="png-16">PNG 16</button>
+			<button class="btn" type="button" id="png-32">PNG 32</button>
+			<button class="btn" type="button" id="png-48">PNG 48</button>
+			<button class="btn" type="button" id="png-128">PNG 128</button>
+			<button class="btn primary" type="button" id="zip-btn">Download ZIP (PNG set${input.isSvg ? ' + SVG' : ''} + manifest)</button>
+			<button class="btn" type="button" id="copy-btn">Copy manifest snippet</button>
+		</div>
+		<pre class="snippet"><code>${esc(MANIFEST_SNIPPET)}</code></pre>
+	</section>
+
+	<p class="foot">Generated locally by <a href="https://extenshi.io">@extenshi/cli</a> — no data left your machine.</p>`;
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(input.name)} — icon preview · Extenshi</title>
+<style>${CSS}</style>
+</head>
+<body>
+<main>
+	${header}<section class="card">
+		<div class="themes-head">
+			<h2>Palette<span class="hint">how the toolbar around your icon is colored</span></h2>
+			<label class="toggle"><input type="checkbox" id="hl-toggle"> highlight my icon</label>
+		</div>
+		<div class="chips" id="theme-chips"></div>
+		<label class="custom">Custom toolbar color <input type="color" id="custom-color" value="#8b5cf6"></label>
+	</section>
+
+	<div id="mockups">
+		${browserMockup('chrome', input)}
+		${browserMockup('firefox', input)}
+		${browserMockup('edge', input)}
+	</div>
+
+	<section class="card">
+		<h2>Contrast across palettes<span class="hint">does the icon survive every background?</span></h2>
+		<p class="note-warn" id="midgray-note" hidden>△ Low-saturation mid-gray icon: it clears the contrast ratio on every palette, yet stands out on none of them — mid-gray reads as "part of the toolbar" everywhere. Consider a saturated brand color, or add a darker/lighter outline or backdrop shape.</p>
+		<div id="contrast-grid"></div>
+	</section>
+
+	<section class="card">
+		<h2>Store sizes</h2>
+		${rasterNote}
+		<div class="size-flex">
+${sizeCells}
+		</div>
+		<p class="fill-note" id="fill-note"></p>
+		<label class="toggle trim" id="trim-row" hidden><input type="checkbox" id="trim-toggle"> Trim empty margins — rescale the artwork edge-to-edge in every preview and export</label>
+		<div class="mag-wrap">
+			<span class="mag-box" id="mag-box"><canvas id="mag" width="16" height="16"></canvas></span>
+			<p class="mag-note">The 16&nbsp;px render at 8× magnification on the selected toolbar color — this is the version most users will actually see. Check that the silhouette stays readable and edges don't dissolve.</p>
+		</div>
+	</section>
+
+	${exportSection}
+</main>
+<script>window.__ICON_PREVIEW__ = ${jsonForScript(config)};</script>
+<script>${PAGE_JS}</script>
+</body>
+</html>
+`;
+}
+//# sourceMappingURL=icon-preview.js.map