@countermeasure-platform/web-components 1.2.1-dev.4.1 → 1.2.1-dev.6.1

package/dist/components/theme/icon-set-picker.js

@@ -1,34 +1,39 @@
 import { CM_ICON_PATHS as e, ICON_SETS as t, getTheme as n, setThemePartial as r } from "../../services/theme-engine/index.js";
 //#region src/components/theme/icon-set-picker.ts
-var i = {
+function i(e, t) {
+	for (let n of t.split(/(?=M)/g)) {
+		let t = n.trim();
+		if (!t) continue;
+		let r = document.createElementNS("http://www.w3.org/2000/svg", "path");
+		r.setAttribute("d", t), e.appendChild(r);
+	}
+}
+var a = {
 	Search: "M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0 M21 21l-4.35-4.35",
 	Shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
 	Settings: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.06.55.39 1.04.86 1.34"
 };
-function a(t, n) {
+function o(t, n) {
 	let r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-	r.setAttribute("viewBox", `0 0 ${24 * n.length + 8} 24`), r.setAttribute("width", String(24 * n.length + 8)), r.setAttribute("height", "24"), r.setAttribute("class", "theme-studio-icon-tile__row");
-	for (let a = 0; a < n.length; a++) {
-		let o = n[a];
-		if (!o) continue;
-		let s = t.brand && e[o] ? e[o] : i[o] ?? "";
+	r.setAttribute("viewBox", `0 0 ${24 * n.length + 8} 24`), r.setAttribute("width", String(24 * n.length + 8)), r.setAttribute("height", "24"), r.setAttribute("class", "theme-studio-icon-tile__row"), r.setAttribute("aria-hidden", "true");
+	for (let o = 0; o < n.length; o++) {
+		let s = n[o];
 		if (!s) continue;
-		let c = document.createElementNS("http://www.w3.org/2000/svg", "g");
-		c.setAttribute("transform", `translate(${a * 28},0)`), c.setAttribute("fill", "none"), c.setAttribute("stroke", "currentColor"), c.setAttribute("stroke-width", String(t.strokeWidth)), c.setAttribute("stroke-linecap", t.linecap), c.setAttribute("stroke-linejoin", t.linejoin);
-		for (let e of s.split(/(?=M)/g)) {
-			let t = e.trim();
-			if (!t) continue;
-			let n = document.createElementNS("http://www.w3.org/2000/svg", "path");
-			n.setAttribute("d", t), c.appendChild(n);
-		}
-		r.appendChild(c);
+		let c = t.brand && e[s] ? e[s] : a[s] ?? "";
+		if (!c) continue;
+		let l = document.createElementNS("http://www.w3.org/2000/svg", "g");
+		l.setAttribute("transform", `translate(${o * 28},0)`), l.setAttribute("fill", "none"), l.setAttribute("stroke", "currentColor"), l.setAttribute("stroke-width", String(t.strokeWidth)), l.setAttribute("stroke-linecap", t.linecap), l.setAttribute("stroke-linejoin", t.linejoin), i(l, c), r.appendChild(l);
 	}
 	return r;
 }
-var o = class {
+var s = class {
 	el;
+	_onThemeChange = () => this.updateActive();
 	constructor() {
-		this.el = document.createElement("div"), this.el.className = "theme-studio-iconsets", this.render(), document.addEventListener("cm:theme-change", () => this.updateActive());
+		this.el = document.createElement("div"), this.el.className = "theme-studio-iconsets", this.render(), document.addEventListener("cm:theme-change", this._onThemeChange);
+	}
+	destroy() {
+		document.removeEventListener("cm:theme-change", this._onThemeChange);
 	}
 	render() {
 		this.el.innerHTML = "";
@@ -38,14 +43,14 @@ var o = class {
 			"Settings"
 		];
 		for (let n of Object.keys(t)) {
-			let o = t[n], s = document.createElement("button");
-			s.type = "button", s.className = "theme-studio-icon-tile", s.dataset.iconSet = n, n === e && s.classList.add("is-active"), s.setAttribute("aria-pressed", String(n === e)), s.setAttribute("aria-label", `Use ${o.label} icon set`);
+			let a = t[n], s = document.createElement("button");
+			s.type = "button", s.className = "theme-studio-icon-tile", s.dataset.iconSet = n, n === e && s.classList.add("is-active"), s.setAttribute("aria-pressed", String(n === e)), s.setAttribute("aria-label", `Use ${a.label} icon set`);
 			let c = document.createElement("div");
-			c.className = "theme-studio-icon-tile__preview", c.appendChild(a(o, i)), s.appendChild(c);
+			c.className = "theme-studio-icon-tile__preview", c.appendChild(o(a, i)), s.appendChild(c);
 			let l = document.createElement("div");
-			l.className = "theme-studio-icon-tile__name", l.textContent = o.label, s.appendChild(l);
+			l.className = "theme-studio-icon-tile__name", l.textContent = a.label, s.appendChild(l);
 			let u = document.createElement("div");
-			if (u.className = "theme-studio-icon-tile__desc", u.textContent = o.description, s.appendChild(u), o.brand) {
+			if (u.className = "theme-studio-icon-tile__desc", u.textContent = a.description, s.appendChild(u), a.brand) {
 				let e = document.createElement("span");
 				e.className = "theme-studio-icon-tile__badge", e.textContent = "Brand", s.appendChild(e);
 			}
@@ -61,6 +66,6 @@ var o = class {
 	}
 };
 //#endregion
-export { o as IconSetPicker };
+export { s as IconSetPicker };
 
 //# sourceMappingURL=icon-set-picker.js.map

package/dist/components/theme/icon-set-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-set-picker.js","names":[],"sources":["../../../src/components/theme/icon-set-picker.ts"],"sourcesContent":["/**\n * Icon Set Picker — 5 icon-style tiles.\n *\n * Each tile renders a small icon row in the set's stroke style so users can\n * see how icons will look. The 'countermeasure' tile gets a Brand badge.\n */\n\nimport { CM_ICON_PATHS, ICON_SETS, getTheme, setThemePartial } from '../../services/theme-engine'\nimport type { IconSet, IconSetId } from '../../services/theme-engine'\n\nconst PREVIEW_ICON_PATHS: Record<string, string> = {\n  Search: 'M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0 M21 21l-4.35-4.35',\n  Shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',\n  Settings:\n    'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.06.55.39 1.04.86 1.34',\n}\n\nfunction buildIconRow(set: IconSet, names: ReadonlyArray<string>): SVGElement {\n  const wrap = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n  wrap.setAttribute('viewBox', `0 0 ${24 * names.length + 8} 24`)\n  wrap.setAttribute('width', String(24 * names.length + 8))\n  wrap.setAttribute('height', '24')\n  wrap.setAttribute('class', 'theme-studio-icon-tile__row')\n\n  for (let i = 0; i < names.length; i++) {\n    const name = names[i]\n    if (!name) continue\n    const useBrand = set.brand && CM_ICON_PATHS[name]\n    const raw = useBrand ? CM_ICON_PATHS[name]! : (PREVIEW_ICON_PATHS[name] ?? '')\n    if (!raw) continue\n    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n    g.setAttribute('transform', `translate(${i * 28},0)`)\n    g.setAttribute('fill', 'none')\n    g.setAttribute('stroke', 'currentColor')\n    g.setAttribute('stroke-width', String(set.strokeWidth))\n    g.setAttribute('stroke-linecap', set.linecap)\n    g.setAttribute('stroke-linejoin', set.linejoin)\n\n    for (const segment of raw.split(/(?=M)/g)) {\n      const trimmed = segment.trim()\n      if (!trimmed) continue\n      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n      path.setAttribute('d', trimmed)\n      g.appendChild(path)\n    }\n    wrap.appendChild(g)\n  }\n  return wrap\n}\n\nexport class IconSetPicker {\n  public readonly el: HTMLElement\n\n  constructor() {\n    this.el = document.createElement('div')\n    this.el.className = 'theme-studio-iconsets'\n    this.render()\n    document.addEventListener('cm:theme-change', () => this.updateActive())\n  }\n\n  private render(): void {\n    this.el.innerHTML = ''\n    const current = getTheme().iconSet\n    const names = ['Search', 'Shield', 'Settings'] as const\n\n    for (const id of Object.keys(ICON_SETS) as IconSetId[]) {\n      const set = ICON_SETS[id]\n      const tile = document.createElement('button')\n      tile.type = 'button'\n      tile.className = 'theme-studio-icon-tile'\n      tile.dataset.iconSet = id\n      if (id === current) tile.classList.add('is-active')\n      tile.setAttribute('aria-pressed', String(id === current))\n      tile.setAttribute('aria-label', `Use ${set.label} icon set`)\n\n      const preview = document.createElement('div')\n      preview.className = 'theme-studio-icon-tile__preview'\n      preview.appendChild(buildIconRow(set, names))\n      tile.appendChild(preview)\n\n      const name = document.createElement('div')\n      name.className = 'theme-studio-icon-tile__name'\n      name.textContent = set.label\n      tile.appendChild(name)\n\n      const desc = document.createElement('div')\n      desc.className = 'theme-studio-icon-tile__desc'\n      desc.textContent = set.description\n      tile.appendChild(desc)\n\n      if (set.brand) {\n        const badge = document.createElement('span')\n        badge.className = 'theme-studio-icon-tile__badge'\n        badge.textContent = 'Brand'\n        tile.appendChild(badge)\n      }\n\n      tile.addEventListener('click', () => setThemePartial({ iconSet: id }))\n      this.el.appendChild(tile)\n    }\n  }\n\n  private updateActive(): void {\n    const current = getTheme().iconSet\n    const tiles = this.el.querySelectorAll<HTMLButtonElement>('.theme-studio-icon-tile')\n    for (const tile of tiles) {\n      const isActive = tile.dataset.iconSet === current\n      tile.classList.toggle('is-active', isActive)\n      tile.setAttribute('aria-pressed', String(isActive))\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"icon-set-picker.js","names":[],"sources":["../../../src/components/theme/icon-set-picker.ts"],"sourcesContent":["/**\n * Icon Set Picker — 5 icon-style tiles.\n *\n * Each tile renders a small icon row in the set's stroke style so users can\n * see how icons will look. The 'countermeasure' tile gets a Brand badge.\n */\n\nimport { CM_ICON_PATHS, ICON_SETS, getTheme, setThemePartial } from '../../services/theme-engine'\nimport type { IconSet, IconSetId } from '../../services/theme-engine'\n\n/** Split an SVG path-data string on `M` commands and append each as a child `<path>`. */\nfunction appendSvgPaths(parent: SVGElement, pathData: string): void {\n  for (const segment of pathData.split(/(?=M)/g)) {\n    const trimmed = segment.trim()\n    if (!trimmed) continue\n    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n    path.setAttribute('d', trimmed)\n    parent.appendChild(path)\n  }\n}\n\nconst PREVIEW_ICON_PATHS: Record<string, string> = {\n  Search: 'M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0 M21 21l-4.35-4.35',\n  Shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',\n  Settings:\n    'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.06.55.39 1.04.86 1.34',\n}\n\nfunction buildIconRow(set: IconSet, names: ReadonlyArray<string>): SVGElement {\n  const wrap = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n  wrap.setAttribute('viewBox', `0 0 ${24 * names.length + 8} 24`)\n  wrap.setAttribute('width', String(24 * names.length + 8))\n  wrap.setAttribute('height', '24')\n  wrap.setAttribute('class', 'theme-studio-icon-tile__row')\n  wrap.setAttribute('aria-hidden', 'true')\n\n  for (let i = 0; i < names.length; i++) {\n    const name = names[i]\n    if (!name) continue\n    const useBrand = set.brand && CM_ICON_PATHS[name]\n    const raw = useBrand ? CM_ICON_PATHS[name]! : (PREVIEW_ICON_PATHS[name] ?? '')\n    if (!raw) continue\n    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n    g.setAttribute('transform', `translate(${i * 28},0)`)\n    g.setAttribute('fill', 'none')\n    g.setAttribute('stroke', 'currentColor')\n    g.setAttribute('stroke-width', String(set.strokeWidth))\n    g.setAttribute('stroke-linecap', set.linecap)\n    g.setAttribute('stroke-linejoin', set.linejoin)\n\n    appendSvgPaths(g, raw)\n    wrap.appendChild(g)\n  }\n  return wrap\n}\n\nexport class IconSetPicker {\n  public readonly el: HTMLElement\n  private _onThemeChange = () => this.updateActive()\n\n  constructor() {\n    this.el = document.createElement('div')\n    this.el.className = 'theme-studio-iconsets'\n    this.render()\n    document.addEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  destroy(): void {\n    document.removeEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  private render(): void {\n    this.el.innerHTML = ''\n    const current = getTheme().iconSet\n    const names = ['Search', 'Shield', 'Settings'] as const\n\n    for (const id of Object.keys(ICON_SETS) as IconSetId[]) {\n      const set = ICON_SETS[id]\n      const tile = document.createElement('button')\n      tile.type = 'button'\n      tile.className = 'theme-studio-icon-tile'\n      tile.dataset.iconSet = id\n      if (id === current) tile.classList.add('is-active')\n      tile.setAttribute('aria-pressed', String(id === current))\n      tile.setAttribute('aria-label', `Use ${set.label} icon set`)\n\n      const preview = document.createElement('div')\n      preview.className = 'theme-studio-icon-tile__preview'\n      preview.appendChild(buildIconRow(set, names))\n      tile.appendChild(preview)\n\n      const name = document.createElement('div')\n      name.className = 'theme-studio-icon-tile__name'\n      name.textContent = set.label\n      tile.appendChild(name)\n\n      const desc = document.createElement('div')\n      desc.className = 'theme-studio-icon-tile__desc'\n      desc.textContent = set.description\n      tile.appendChild(desc)\n\n      if (set.brand) {\n        const badge = document.createElement('span')\n        badge.className = 'theme-studio-icon-tile__badge'\n        badge.textContent = 'Brand'\n        tile.appendChild(badge)\n      }\n\n      tile.addEventListener('click', () => setThemePartial({ iconSet: id }))\n      this.el.appendChild(tile)\n    }\n  }\n\n  private updateActive(): void {\n    const current = getTheme().iconSet\n    const tiles = this.el.querySelectorAll<HTMLButtonElement>('.theme-studio-icon-tile')\n    for (const tile of tiles) {\n      const isActive = tile.dataset.iconSet === current\n      tile.classList.toggle('is-active', isActive)\n      tile.setAttribute('aria-pressed', String(isActive))\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/components/theme/icon-usage-matrix.d.ts

@@ -7,7 +7,9 @@
  */
 export declare class IconUsageMatrix {
     readonly el: HTMLElement;
+    private readonly _onThemeChange;
     constructor();
+    destroy(): void;
     private currentIcon;
     private cycle;
     private reset;

package/dist/components/theme/icon-usage-matrix.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-usage-matrix.d.ts","sourceRoot":"","sources":["../../../src/components/theme/icon-usage-matrix.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,qBAAa,eAAe;IAC1B,SAAgB,EAAE,EAAE,WAAW,CAAA;;IAS/B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,MAAM;IAuCd,OAAO,CAAC,aAAa;CAUtB"}
+{"version":3,"file":"icon-usage-matrix.d.ts","sourceRoot":"","sources":["../../../src/components/theme/icon-usage-matrix.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,qBAAa,eAAe;IAC1B,SAAgB,EAAE,EAAE,WAAW,CAAA;IAC/B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAY;;IAY3C,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,MAAM;IA6Cd,OAAO,CAAC,aAAa;CAUtB"}

package/dist/components/theme/icon-usage-matrix.js

@@ -2,8 +2,12 @@ import { ICON_USAGES as e, getTheme as t, setThemePartial as n } from "../../ser
 //#region src/components/theme/icon-usage-matrix.ts
 var r = class {
 	el;
+	_onThemeChange;
 	constructor() {
-		this.el = document.createElement("div"), this.el.className = "theme-studio-icon-matrix", this.render(), document.addEventListener("cm:theme-change", () => this.refreshLabels());
+		this.el = document.createElement("div"), this.el.className = "theme-studio-icon-matrix", this.el.setAttribute("role", "table"), this.el.setAttribute("aria-label", "Per-icon mapping"), this.render(), this._onThemeChange = () => this.refreshLabels(), document.addEventListener("cm:theme-change", this._onThemeChange);
+	}
+	destroy() {
+		document.removeEventListener("cm:theme-change", this._onThemeChange);
 	}
 	currentIcon(e) {
 		return (t().iconOverrides ?? {})[e.id] ?? e.defaultIcon;
@@ -20,17 +24,17 @@ var r = class {
 		this.el.innerHTML = "";
 		for (let t of e) {
 			let e = document.createElement("div");
-			e.className = "theme-studio-icon-matrix__row", e.dataset.slot = t.id;
+			e.className = "theme-studio-icon-matrix__row", e.dataset.slot = t.id, e.setAttribute("role", "row");
 			let n = document.createElement("div");
-			n.className = "theme-studio-icon-matrix__label", n.textContent = t.label, e.appendChild(n);
+			n.className = "theme-studio-icon-matrix__label", n.textContent = t.label, n.setAttribute("role", "cell"), e.appendChild(n);
 			let r = document.createElement("code");
-			r.className = "theme-studio-icon-matrix__icon", r.textContent = this.currentIcon(t), e.appendChild(r);
+			r.className = "theme-studio-icon-matrix__icon", r.textContent = this.currentIcon(t), r.setAttribute("role", "cell"), e.appendChild(r);
 			let i = document.createElement("div");
-			i.className = "theme-studio-icon-matrix__actions";
+			i.className = "theme-studio-icon-matrix__actions", i.setAttribute("role", "cell");
 			let a = document.createElement("button");
-			a.type = "button", a.className = "theme-studio-icon-matrix__change", a.textContent = "Change", a.addEventListener("click", () => this.cycle(t)), i.appendChild(a);
+			a.type = "button", a.className = "theme-studio-icon-matrix__change", a.textContent = "Change", a.setAttribute("aria-label", `Cycle icon for ${t.label}`), a.addEventListener("click", () => this.cycle(t)), i.appendChild(a);
 			let o = document.createElement("button");
-			o.type = "button", o.className = "theme-studio-icon-matrix__reset", o.textContent = "Reset", o.addEventListener("click", () => this.reset(t)), i.appendChild(o), e.appendChild(i), this.el.appendChild(e);
+			o.type = "button", o.className = "theme-studio-icon-matrix__reset", o.textContent = "Reset", o.setAttribute("aria-label", `Reset ${t.label} icon to default`), o.addEventListener("click", () => this.reset(t)), i.appendChild(o), e.appendChild(i), this.el.appendChild(e);
 		}
 	}
 	refreshLabels() {

package/dist/components/theme/icon-usage-matrix.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-usage-matrix.js","names":[],"sources":["../../../src/components/theme/icon-usage-matrix.ts"],"sourcesContent":["/**\n * Icon Usage Matrix — 16 semantic-slot rows.\n *\n * Renders the slots from `ICON_USAGES`. Each row shows the slot's label and\n * its current binding; clicking \"Change\" cycles through the slot's alternates.\n * Persists into `theme.iconOverrides`.\n */\n\nimport { ICON_USAGES, getTheme, setThemePartial } from '../../services/theme-engine'\nimport type { IconUsage } from '../../services/theme-engine'\n\nexport class IconUsageMatrix {\n  public readonly el: HTMLElement\n\n  constructor() {\n    this.el = document.createElement('div')\n    this.el.className = 'theme-studio-icon-matrix'\n    this.render()\n    document.addEventListener('cm:theme-change', () => this.refreshLabels())\n  }\n\n  private currentIcon(usage: IconUsage): string {\n    const overrides = getTheme().iconOverrides ?? {}\n    return overrides[usage.id] ?? usage.defaultIcon\n  }\n\n  private cycle(usage: IconUsage): void {\n    const current = this.currentIcon(usage)\n    const list = usage.alternates.length > 0 ? usage.alternates : [usage.defaultIcon]\n    const idx = list.indexOf(current)\n    const next = list[(idx + 1) % list.length] ?? usage.defaultIcon\n    const overrides = { ...(getTheme().iconOverrides ?? {}) }\n    if (next === usage.defaultIcon) {\n      delete overrides[usage.id]\n    } else {\n      overrides[usage.id] = next\n    }\n    setThemePartial({ iconOverrides: overrides })\n  }\n\n  private reset(usage: IconUsage): void {\n    const overrides = { ...(getTheme().iconOverrides ?? {}) }\n    delete overrides[usage.id]\n    setThemePartial({ iconOverrides: overrides })\n  }\n\n  private render(): void {\n    this.el.innerHTML = ''\n    for (const usage of ICON_USAGES) {\n      const row = document.createElement('div')\n      row.className = 'theme-studio-icon-matrix__row'\n      row.dataset.slot = usage.id\n\n      const label = document.createElement('div')\n      label.className = 'theme-studio-icon-matrix__label'\n      label.textContent = usage.label\n      row.appendChild(label)\n\n      const value = document.createElement('code')\n      value.className = 'theme-studio-icon-matrix__icon'\n      value.textContent = this.currentIcon(usage)\n      row.appendChild(value)\n\n      const actions = document.createElement('div')\n      actions.className = 'theme-studio-icon-matrix__actions'\n\n      const change = document.createElement('button')\n      change.type = 'button'\n      change.className = 'theme-studio-icon-matrix__change'\n      change.textContent = 'Change'\n      change.addEventListener('click', () => this.cycle(usage))\n      actions.appendChild(change)\n\n      const reset = document.createElement('button')\n      reset.type = 'button'\n      reset.className = 'theme-studio-icon-matrix__reset'\n      reset.textContent = 'Reset'\n      reset.addEventListener('click', () => this.reset(usage))\n      actions.appendChild(reset)\n\n      row.appendChild(actions)\n      this.el.appendChild(row)\n    }\n  }\n\n  private refreshLabels(): void {\n    const rows = this.el.querySelectorAll<HTMLElement>('.theme-studio-icon-matrix__row')\n    for (const row of rows) {\n      const slotId = row.dataset.slot\n      const usage = ICON_USAGES.find(u => u.id === slotId)\n      if (!usage) continue\n      const code = row.querySelector<HTMLElement>('.theme-studio-icon-matrix__icon')\n      if (code) code.textContent = this.currentIcon(usage)\n    }\n  }\n}\n"],"mappings":";;AAWA,IAAa,IAAb,MAA6B;CAC3B;CAEA,cAAc;AAIZ,EAHA,KAAK,KAAK,SAAS,cAAc,MAAM,EACvC,KAAK,GAAG,YAAY,4BACpB,KAAK,QAAQ,EACb,SAAS,iBAAiB,yBAAyB,KAAK,eAAe,CAAC;;CAG1E,YAAoB,GAA0B;AAE5C,UADkB,GAAU,CAAC,iBAAiB,EAAE,EAC/B,EAAM,OAAO,EAAM;;CAGtC,MAAc,GAAwB;EACpC,IAAM,IAAU,KAAK,YAAY,EAAM,EACjC,IAAO,EAAM,WAAW,SAAS,IAAI,EAAM,aAAa,CAAC,EAAM,YAAY,EAE3E,IAAO,GADD,EAAK,QAAQ,EAAQ,GACR,KAAK,EAAK,WAAW,EAAM,aAC9C,IAAY,EAAE,GAAI,GAAU,CAAC,iBAAiB,EAAE,EAAG;AAMzD,EALI,MAAS,EAAM,cACjB,OAAO,EAAU,EAAM,MAEvB,EAAU,EAAM,MAAM,GAExB,EAAgB,EAAE,eAAe,GAAW,CAAC;;CAG/C,MAAc,GAAwB;EACpC,IAAM,IAAY,EAAE,GAAI,GAAU,CAAC,iBAAiB,EAAE,EAAG;AAEzD,EADA,OAAO,EAAU,EAAM,KACvB,EAAgB,EAAE,eAAe,GAAW,CAAC;;CAG/C,SAAuB;AACrB,OAAK,GAAG,YAAY;AACpB,OAAK,IAAM,KAAS,GAAa;GAC/B,IAAM,IAAM,SAAS,cAAc,MAAM;AAEzC,GADA,EAAI,YAAY,iCAChB,EAAI,QAAQ,OAAO,EAAM;GAEzB,IAAM,IAAQ,SAAS,cAAc,MAAM;AAG3C,GAFA,EAAM,YAAY,mCAClB,EAAM,cAAc,EAAM,OAC1B,EAAI,YAAY,EAAM;GAEtB,IAAM,IAAQ,SAAS,cAAc,OAAO;AAG5C,GAFA,EAAM,YAAY,kCAClB,EAAM,cAAc,KAAK,YAAY,EAAM,EAC3C,EAAI,YAAY,EAAM;GAEtB,IAAM,IAAU,SAAS,cAAc,MAAM;AAC7C,KAAQ,YAAY;GAEpB,IAAM,IAAS,SAAS,cAAc,SAAS;AAK/C,GAJA,EAAO,OAAO,UACd,EAAO,YAAY,oCACnB,EAAO,cAAc,UACrB,EAAO,iBAAiB,eAAe,KAAK,MAAM,EAAM,CAAC,EACzD,EAAQ,YAAY,EAAO;GAE3B,IAAM,IAAQ,SAAS,cAAc,SAAS;AAQ9C,GAPA,EAAM,OAAO,UACb,EAAM,YAAY,mCAClB,EAAM,cAAc,SACpB,EAAM,iBAAiB,eAAe,KAAK,MAAM,EAAM,CAAC,EACxD,EAAQ,YAAY,EAAM,EAE1B,EAAI,YAAY,EAAQ,EACxB,KAAK,GAAG,YAAY,EAAI;;;CAI5B,gBAA8B;EAC5B,IAAM,IAAO,KAAK,GAAG,iBAA8B,iCAAiC;AACpF,OAAK,IAAM,KAAO,GAAM;GACtB,IAAM,IAAS,EAAI,QAAQ,MACrB,IAAQ,EAAY,MAAK,MAAK,EAAE,OAAO,EAAO;AACpD,OAAI,CAAC,EAAO;GACZ,IAAM,IAAO,EAAI,cAA2B,kCAAkC;AAC9E,GAAI,MAAM,EAAK,cAAc,KAAK,YAAY,EAAM"}
+{"version":3,"file":"icon-usage-matrix.js","names":[],"sources":["../../../src/components/theme/icon-usage-matrix.ts"],"sourcesContent":["/**\n * Icon Usage Matrix — 16 semantic-slot rows.\n *\n * Renders the slots from `ICON_USAGES`. Each row shows the slot's label and\n * its current binding; clicking \"Change\" cycles through the slot's alternates.\n * Persists into `theme.iconOverrides`.\n */\n\nimport { ICON_USAGES, getTheme, setThemePartial } from '../../services/theme-engine'\nimport type { IconUsage } from '../../services/theme-engine'\n\nexport class IconUsageMatrix {\n  public readonly el: HTMLElement\n  private readonly _onThemeChange: () => void\n\n  constructor() {\n    this.el = document.createElement('div')\n    this.el.className = 'theme-studio-icon-matrix'\n    this.el.setAttribute('role', 'table')\n    this.el.setAttribute('aria-label', 'Per-icon mapping')\n    this.render()\n    this._onThemeChange = () => this.refreshLabels()\n    document.addEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  destroy(): void {\n    document.removeEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  private currentIcon(usage: IconUsage): string {\n    const overrides = getTheme().iconOverrides ?? {}\n    return overrides[usage.id] ?? usage.defaultIcon\n  }\n\n  private cycle(usage: IconUsage): void {\n    const current = this.currentIcon(usage)\n    const list = usage.alternates.length > 0 ? usage.alternates : [usage.defaultIcon]\n    const idx = list.indexOf(current)\n    const next = list[(idx + 1) % list.length] ?? usage.defaultIcon\n    const overrides = { ...(getTheme().iconOverrides ?? {}) }\n    if (next === usage.defaultIcon) {\n      delete overrides[usage.id]\n    } else {\n      overrides[usage.id] = next\n    }\n    setThemePartial({ iconOverrides: overrides })\n  }\n\n  private reset(usage: IconUsage): void {\n    const overrides = { ...(getTheme().iconOverrides ?? {}) }\n    delete overrides[usage.id]\n    setThemePartial({ iconOverrides: overrides })\n  }\n\n  private render(): void {\n    this.el.innerHTML = ''\n    for (const usage of ICON_USAGES) {\n      const row = document.createElement('div')\n      row.className = 'theme-studio-icon-matrix__row'\n      row.dataset.slot = usage.id\n      row.setAttribute('role', 'row')\n\n      const label = document.createElement('div')\n      label.className = 'theme-studio-icon-matrix__label'\n      label.textContent = usage.label\n      label.setAttribute('role', 'cell')\n      row.appendChild(label)\n\n      const value = document.createElement('code')\n      value.className = 'theme-studio-icon-matrix__icon'\n      value.textContent = this.currentIcon(usage)\n      value.setAttribute('role', 'cell')\n      row.appendChild(value)\n\n      const actions = document.createElement('div')\n      actions.className = 'theme-studio-icon-matrix__actions'\n      actions.setAttribute('role', 'cell')\n\n      const change = document.createElement('button')\n      change.type = 'button'\n      change.className = 'theme-studio-icon-matrix__change'\n      change.textContent = 'Change'\n      change.setAttribute('aria-label', `Cycle icon for ${usage.label}`)\n      change.addEventListener('click', () => this.cycle(usage))\n      actions.appendChild(change)\n\n      const reset = document.createElement('button')\n      reset.type = 'button'\n      reset.className = 'theme-studio-icon-matrix__reset'\n      reset.textContent = 'Reset'\n      reset.setAttribute('aria-label', `Reset ${usage.label} icon to default`)\n      reset.addEventListener('click', () => this.reset(usage))\n      actions.appendChild(reset)\n\n      row.appendChild(actions)\n      this.el.appendChild(row)\n    }\n  }\n\n  private refreshLabels(): void {\n    const rows = this.el.querySelectorAll<HTMLElement>('.theme-studio-icon-matrix__row')\n    for (const row of rows) {\n      const slotId = row.dataset.slot\n      const usage = ICON_USAGES.find(u => u.id === slotId)\n      if (!usage) continue\n      const code = row.querySelector<HTMLElement>('.theme-studio-icon-matrix__icon')\n      if (code) code.textContent = this.currentIcon(usage)\n    }\n  }\n}\n"],"mappings":";;AAWA,IAAa,IAAb,MAA6B;CAC3B;CACA;CAEA,cAAc;AAOZ,EANA,KAAK,KAAK,SAAS,cAAc,MAAM,EACvC,KAAK,GAAG,YAAY,4BACpB,KAAK,GAAG,aAAa,QAAQ,QAAQ,EACrC,KAAK,GAAG,aAAa,cAAc,mBAAmB,EACtD,KAAK,QAAQ,EACb,KAAK,uBAAuB,KAAK,eAAe,EAChD,SAAS,iBAAiB,mBAAmB,KAAK,eAAe;;CAGnE,UAAgB;AACd,WAAS,oBAAoB,mBAAmB,KAAK,eAAe;;CAGtE,YAAoB,GAA0B;AAE5C,UADkB,GAAU,CAAC,iBAAiB,EAAE,EAC/B,EAAM,OAAO,EAAM;;CAGtC,MAAc,GAAwB;EACpC,IAAM,IAAU,KAAK,YAAY,EAAM,EACjC,IAAO,EAAM,WAAW,SAAS,IAAI,EAAM,aAAa,CAAC,EAAM,YAAY,EAE3E,IAAO,GADD,EAAK,QAAQ,EAAQ,GACR,KAAK,EAAK,WAAW,EAAM,aAC9C,IAAY,EAAE,GAAI,GAAU,CAAC,iBAAiB,EAAE,EAAG;AAMzD,EALI,MAAS,EAAM,cACjB,OAAO,EAAU,EAAM,MAEvB,EAAU,EAAM,MAAM,GAExB,EAAgB,EAAE,eAAe,GAAW,CAAC;;CAG/C,MAAc,GAAwB;EACpC,IAAM,IAAY,EAAE,GAAI,GAAU,CAAC,iBAAiB,EAAE,EAAG;AAEzD,EADA,OAAO,EAAU,EAAM,KACvB,EAAgB,EAAE,eAAe,GAAW,CAAC;;CAG/C,SAAuB;AACrB,OAAK,GAAG,YAAY;AACpB,OAAK,IAAM,KAAS,GAAa;GAC/B,IAAM,IAAM,SAAS,cAAc,MAAM;AAGzC,GAFA,EAAI,YAAY,iCAChB,EAAI,QAAQ,OAAO,EAAM,IACzB,EAAI,aAAa,QAAQ,MAAM;GAE/B,IAAM,IAAQ,SAAS,cAAc,MAAM;AAI3C,GAHA,EAAM,YAAY,mCAClB,EAAM,cAAc,EAAM,OAC1B,EAAM,aAAa,QAAQ,OAAO,EAClC,EAAI,YAAY,EAAM;GAEtB,IAAM,IAAQ,SAAS,cAAc,OAAO;AAI5C,GAHA,EAAM,YAAY,kCAClB,EAAM,cAAc,KAAK,YAAY,EAAM,EAC3C,EAAM,aAAa,QAAQ,OAAO,EAClC,EAAI,YAAY,EAAM;GAEtB,IAAM,IAAU,SAAS,cAAc,MAAM;AAE7C,GADA,EAAQ,YAAY,qCACpB,EAAQ,aAAa,QAAQ,OAAO;GAEpC,IAAM,IAAS,SAAS,cAAc,SAAS;AAM/C,GALA,EAAO,OAAO,UACd,EAAO,YAAY,oCACnB,EAAO,cAAc,UACrB,EAAO,aAAa,cAAc,kBAAkB,EAAM,QAAQ,EAClE,EAAO,iBAAiB,eAAe,KAAK,MAAM,EAAM,CAAC,EACzD,EAAQ,YAAY,EAAO;GAE3B,IAAM,IAAQ,SAAS,cAAc,SAAS;AAS9C,GARA,EAAM,OAAO,UACb,EAAM,YAAY,mCAClB,EAAM,cAAc,SACpB,EAAM,aAAa,cAAc,SAAS,EAAM,MAAM,kBAAkB,EACxE,EAAM,iBAAiB,eAAe,KAAK,MAAM,EAAM,CAAC,EACxD,EAAQ,YAAY,EAAM,EAE1B,EAAI,YAAY,EAAQ,EACxB,KAAK,GAAG,YAAY,EAAI;;;CAI5B,gBAA8B;EAC5B,IAAM,IAAO,KAAK,GAAG,iBAA8B,iCAAiC;AACpF,OAAK,IAAM,KAAO,GAAM;GACtB,IAAM,IAAS,EAAI,QAAQ,MACrB,IAAQ,EAAY,MAAK,MAAK,EAAE,OAAO,EAAO;AACpD,OAAI,CAAC,EAAO;GACZ,IAAM,IAAO,EAAI,cAA2B,kCAAkC;AAC9E,GAAI,MAAM,EAAK,cAAc,KAAK,YAAY,EAAM"}

package/dist/components/theme/index.js

@@ -7,6 +7,6 @@ import { IconUsageMatrix as c } from "./icon-usage-matrix.js";
 import { RadiusSlider as l } from "./radius-slider.js";
 import { ThemePresetGrid as u } from "./theme-preset-grid.js";
 import { ThemePreviewTile as d } from "./theme-preview-tile.js";
-import { ThemeSwitcher as f } from "./theme-switcher.js";
-import { ThemeStudio as p, renderThemeStudio as m } from "./theme-studio.js";
-export { e as AccentSwitcher, i as DensitySwitcher, a as FontStackPicker, o as GlassSlider, s as IconSetPicker, c as IconUsageMatrix, l as RadiusSlider, u as ThemePresetGrid, d as ThemePreviewTile, p as ThemeStudio, f as ThemeSwitcher, t as applyAccentFromUrl, n as getCurrentAccent, m as renderThemeStudio, r as setPreviewAccent };
+import { n as f, t as p } from "../../theme-studio-CN9Ipb9W.js";
+import { ThemeSwitcher as m } from "./theme-switcher.js";
+export { e as AccentSwitcher, i as DensitySwitcher, a as FontStackPicker, o as GlassSlider, s as IconSetPicker, c as IconUsageMatrix, l as RadiusSlider, u as ThemePresetGrid, d as ThemePreviewTile, p as ThemeStudio, m as ThemeSwitcher, t as applyAccentFromUrl, n as getCurrentAccent, f as renderThemeStudio, r as setPreviewAccent };

package/dist/components/theme/radius-slider.d.ts

@@ -8,7 +8,9 @@ export declare class RadiusSlider {
     readonly el: HTMLElement;
     private readonly input;
     private readonly value;
+    private readonly _onThemeChange;
     constructor();
+    destroy(): void;
     private applySliderFill;
 }
 //# sourceMappingURL=radius-slider.d.ts.map

package/dist/components/theme/radius-slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radius-slider.d.ts","sourceRoot":"","sources":["../../../src/components/theme/radius-slider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,qBAAa,YAAY;IACvB,SAAgB,EAAE,EAAE,WAAW,CAAA;IAC/B,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkB;IACxC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAiB;;IA8CvC,OAAO,CAAC,eAAe;CAIxB"}
+{"version":3,"file":"radius-slider.d.ts","sourceRoot":"","sources":["../../../src/components/theme/radius-slider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAYH,qBAAa,YAAY;IACvB,SAAgB,EAAE,EAAE,WAAW,CAAA;IAC/B,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkB;IACxC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAiB;IACvC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAY;;IAiD3C,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,eAAe;CAIxB"}

package/dist/components/theme/radius-slider.js

@@ -1,31 +1,36 @@
 import { getTheme as e, setThemePartial as t } from "../../services/theme-engine/index.js";
 //#region src/components/theme/radius-slider.ts
-var n = 0, r = 20, i = 1, a = class {
+function n(e, t, n) {
+	return Math.max(t, Math.min(n, e));
+}
+var r = 0, i = 20, a = 1, o = class {
 	el;
 	input;
 	value;
+	_onThemeChange;
 	constructor() {
-		let a = o(e().radius, n, r);
+		let o = n(e().radius, r, i);
 		this.el = document.createElement("div"), this.el.className = "preview-radius-slider";
 		let s = document.createElement("div");
 		s.className = "preview-radius-slider__head";
 		let c = document.createElement("span");
-		c.className = "preview-radius-slider__label", c.textContent = "Corner radius", s.appendChild(c), this.value = document.createElement("span"), this.value.className = "preview-radius-slider__value", this.value.textContent = `${a}px`, s.appendChild(this.value), this.el.appendChild(s), this.input = document.createElement("input"), this.input.type = "range", this.input.min = String(n), this.input.max = String(r), this.input.step = String(i), this.input.value = String(a), this.input.className = "preview-radius-slider__input", this.input.setAttribute("aria-label", "Corner radius (px)"), this.el.appendChild(this.input), this.applySliderFill(a), this.input.addEventListener("input", () => {
-			t({ radius: o(Number(this.input.value), n, r) });
-		}), document.addEventListener("cm:theme-change", () => {
-			let t = o(e().radius, n, r);
+		c.className = "preview-radius-slider__label", c.textContent = "Corner radius", s.appendChild(c), this.value = document.createElement("span"), this.value.className = "preview-radius-slider__value", this.value.textContent = `${o}px`, s.appendChild(this.value), this.el.appendChild(s), this.input = document.createElement("input"), this.input.type = "range", this.input.min = String(r), this.input.max = String(i), this.input.step = String(a), this.input.value = String(o), this.input.className = "preview-radius-slider__input", this.input.setAttribute("aria-label", "Corner radius (px)"), this.el.appendChild(this.input), this.applySliderFill(o), this.input.addEventListener("input", () => {
+			let e = n(Number(this.input.value), r, i);
+			this.value.textContent = `${e}px`, this.applySliderFill(e), t({ radius: e });
+		}), this._onThemeChange = () => {
+			let t = n(e().radius, r, i);
 			Number(this.input.value) !== t && (this.input.value = String(t)), this.value.textContent = `${t}px`, this.applySliderFill(t);
-		});
+		}, document.addEventListener("cm:theme-change", this._onThemeChange);
+	}
+	destroy() {
+		document.removeEventListener("cm:theme-change", this._onThemeChange);
 	}
 	applySliderFill(e) {
-		let t = (e - n) / (r - n) * 100;
+		let t = (e - r) / (i - r) * 100;
 		this.input.style.setProperty("--slider-pct", `${t}%`);
 	}
 };
-function o(e, t, n) {
-	return Number.isFinite(e) ? Math.max(t, Math.min(n, e)) : t;
-}
 //#endregion
-export { a as RadiusSlider };
+export { o as RadiusSlider };
 
 //# sourceMappingURL=radius-slider.js.map

package/dist/components/theme/radius-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"radius-slider.js","names":[],"sources":["../../../src/components/theme/radius-slider.ts"],"sourcesContent":["/**\n * Radius Slider — 0..20px slider that drives `radius` on the theme engine.\n *\n * The engine then derives `--radius-sm` (0.5×), `--radius-md` (1×),\n * `--radius-lg` (1.5×), `--radius-xl` (2×).\n */\n\nimport { getTheme, setThemePartial } from '../../services/theme-engine'\n\nconst MIN = 0\nconst MAX = 20\nconst STEP = 1\n\nexport class RadiusSlider {\n  public readonly el: HTMLElement\n  private readonly input: HTMLInputElement\n  private readonly value: HTMLSpanElement\n\n  constructor() {\n    const initial = clamp(getTheme().radius, MIN, MAX)\n\n    this.el = document.createElement('div')\n    this.el.className = 'preview-radius-slider'\n\n    const head = document.createElement('div')\n    head.className = 'preview-radius-slider__head'\n\n    const label = document.createElement('span')\n    label.className = 'preview-radius-slider__label'\n    label.textContent = 'Corner radius'\n    head.appendChild(label)\n\n    this.value = document.createElement('span')\n    this.value.className = 'preview-radius-slider__value'\n    this.value.textContent = `${initial}px`\n    head.appendChild(this.value)\n    this.el.appendChild(head)\n\n    this.input = document.createElement('input')\n    this.input.type = 'range'\n    this.input.min = String(MIN)\n    this.input.max = String(MAX)\n    this.input.step = String(STEP)\n    this.input.value = String(initial)\n    this.input.className = 'preview-radius-slider__input'\n    this.input.setAttribute('aria-label', 'Corner radius (px)')\n    this.el.appendChild(this.input)\n    this.applySliderFill(initial)\n\n    this.input.addEventListener('input', () => {\n      const next = clamp(Number(this.input.value), MIN, MAX)\n      setThemePartial({ radius: next })\n    })\n\n    document.addEventListener('cm:theme-change', () => {\n      const r = clamp(getTheme().radius, MIN, MAX)\n      if (Number(this.input.value) !== r) this.input.value = String(r)\n      this.value.textContent = `${r}px`\n      this.applySliderFill(r)\n    })\n  }\n\n  private applySliderFill(level: number): void {\n    const pct = ((level - MIN) / (MAX - MIN)) * 100\n    this.input.style.setProperty('--slider-pct', `${pct}%`)\n  }\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  if (!Number.isFinite(value)) return min\n  return Math.max(min, Math.min(max, value))\n}\n"],"mappings":";;AASA,IAAM,IAAM,GACN,IAAM,IACN,IAAO,GAEA,IAAb,MAA0B;CACxB;CACA;CACA;CAEA,cAAc;EACZ,IAAM,IAAU,EAAM,GAAU,CAAC,QAAQ,GAAK,EAAI;AAGlD,EADA,KAAK,KAAK,SAAS,cAAc,MAAM,EACvC,KAAK,GAAG,YAAY;EAEpB,IAAM,IAAO,SAAS,cAAc,MAAM;AAC1C,IAAK,YAAY;EAEjB,IAAM,IAAQ,SAAS,cAAc,OAAO;AA2B5C,EA1BA,EAAM,YAAY,gCAClB,EAAM,cAAc,iBACpB,EAAK,YAAY,EAAM,EAEvB,KAAK,QAAQ,SAAS,cAAc,OAAO,EAC3C,KAAK,MAAM,YAAY,gCACvB,KAAK,MAAM,cAAc,GAAG,EAAQ,KACpC,EAAK,YAAY,KAAK,MAAM,EAC5B,KAAK,GAAG,YAAY,EAAK,EAEzB,KAAK,QAAQ,SAAS,cAAc,QAAQ,EAC5C,KAAK,MAAM,OAAO,SAClB,KAAK,MAAM,MAAM,OAAO,EAAI,EAC5B,KAAK,MAAM,MAAM,OAAO,EAAI,EAC5B,KAAK,MAAM,OAAO,OAAO,EAAK,EAC9B,KAAK,MAAM,QAAQ,OAAO,EAAQ,EAClC,KAAK,MAAM,YAAY,gCACvB,KAAK,MAAM,aAAa,cAAc,qBAAqB,EAC3D,KAAK,GAAG,YAAY,KAAK,MAAM,EAC/B,KAAK,gBAAgB,EAAQ,EAE7B,KAAK,MAAM,iBAAiB,eAAe;AAEzC,KAAgB,EAAE,QADL,EAAM,OAAO,KAAK,MAAM,MAAM,EAAE,GAAK,EAAI,EACtB,CAAC;IACjC,EAEF,SAAS,iBAAiB,yBAAyB;GACjD,IAAM,IAAI,EAAM,GAAU,CAAC,QAAQ,GAAK,EAAI;AAG5C,GAFI,OAAO,KAAK,MAAM,MAAM,KAAK,MAAG,KAAK,MAAM,QAAQ,OAAO,EAAE,GAChE,KAAK,MAAM,cAAc,GAAG,EAAE,KAC9B,KAAK,gBAAgB,EAAE;IACvB;;CAGJ,gBAAwB,GAAqB;EAC3C,IAAM,KAAQ,IAAQ,MAAQ,IAAM,KAAQ;AAC5C,OAAK,MAAM,MAAM,YAAY,gBAAgB,GAAG,EAAI,GAAG;;;AAI3D,SAAS,EAAM,GAAe,GAAa,GAAqB;AAE9D,QADK,OAAO,SAAS,EAAM,GACpB,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC,GADN"}
+{"version":3,"file":"radius-slider.js","names":[],"sources":["../../../src/components/theme/radius-slider.ts"],"sourcesContent":["/**\n * Radius Slider — 0..20px slider that drives `radius` on the theme engine.\n *\n * The engine then derives `--radius-sm` (0.5×), `--radius-md` (1×),\n * `--radius-lg` (1.5×), `--radius-xl` (2×).\n */\n\nimport { getTheme, setThemePartial } from '../../services/theme-engine'\n\nfunction clamp(v: number, min: number, max: number): number {\n  return Math.max(min, Math.min(max, v))\n}\n\nconst MIN = 0\nconst MAX = 20\nconst STEP = 1\n\nexport class RadiusSlider {\n  public readonly el: HTMLElement\n  private readonly input: HTMLInputElement\n  private readonly value: HTMLSpanElement\n  private readonly _onThemeChange: () => void\n\n  constructor() {\n    const initial = clamp(getTheme().radius, MIN, MAX)\n\n    this.el = document.createElement('div')\n    this.el.className = 'preview-radius-slider'\n\n    const head = document.createElement('div')\n    head.className = 'preview-radius-slider__head'\n\n    const label = document.createElement('span')\n    label.className = 'preview-radius-slider__label'\n    label.textContent = 'Corner radius'\n    head.appendChild(label)\n\n    this.value = document.createElement('span')\n    this.value.className = 'preview-radius-slider__value'\n    this.value.textContent = `${initial}px`\n    head.appendChild(this.value)\n    this.el.appendChild(head)\n\n    this.input = document.createElement('input')\n    this.input.type = 'range'\n    this.input.min = String(MIN)\n    this.input.max = String(MAX)\n    this.input.step = String(STEP)\n    this.input.value = String(initial)\n    this.input.className = 'preview-radius-slider__input'\n    this.input.setAttribute('aria-label', 'Corner radius (px)')\n    this.el.appendChild(this.input)\n    this.applySliderFill(initial)\n\n    this.input.addEventListener('input', () => {\n      const next = clamp(Number(this.input.value), MIN, MAX)\n      this.value.textContent = `${next}px`\n      this.applySliderFill(next)\n      setThemePartial({ radius: next })\n    })\n\n    this._onThemeChange = () => {\n      const r = clamp(getTheme().radius, MIN, MAX)\n      if (Number(this.input.value) !== r) this.input.value = String(r)\n      this.value.textContent = `${r}px`\n      this.applySliderFill(r)\n    }\n    document.addEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  destroy(): void {\n    document.removeEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  private applySliderFill(level: number): void {\n    const pct = ((level - MIN) / (MAX - MIN)) * 100\n    this.input.style.setProperty('--slider-pct', `${pct}%`)\n  }\n}\n\n"],"mappings":";;AASA,SAAS,EAAM,GAAW,GAAa,GAAqB;AAC1D,QAAO,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAE,CAAC;;AAGxC,IAAM,IAAM,GACN,IAAM,IACN,IAAO,GAEA,IAAb,MAA0B;CACxB;CACA;CACA;CACA;CAEA,cAAc;EACZ,IAAM,IAAU,EAAM,GAAU,CAAC,QAAQ,GAAK,EAAI;AAGlD,EADA,KAAK,KAAK,SAAS,cAAc,MAAM,EACvC,KAAK,GAAG,YAAY;EAEpB,IAAM,IAAO,SAAS,cAAc,MAAM;AAC1C,IAAK,YAAY;EAEjB,IAAM,IAAQ,SAAS,cAAc,OAAO;AAmC5C,EAlCA,EAAM,YAAY,gCAClB,EAAM,cAAc,iBACpB,EAAK,YAAY,EAAM,EAEvB,KAAK,QAAQ,SAAS,cAAc,OAAO,EAC3C,KAAK,MAAM,YAAY,gCACvB,KAAK,MAAM,cAAc,GAAG,EAAQ,KACpC,EAAK,YAAY,KAAK,MAAM,EAC5B,KAAK,GAAG,YAAY,EAAK,EAEzB,KAAK,QAAQ,SAAS,cAAc,QAAQ,EAC5C,KAAK,MAAM,OAAO,SAClB,KAAK,MAAM,MAAM,OAAO,EAAI,EAC5B,KAAK,MAAM,MAAM,OAAO,EAAI,EAC5B,KAAK,MAAM,OAAO,OAAO,EAAK,EAC9B,KAAK,MAAM,QAAQ,OAAO,EAAQ,EAClC,KAAK,MAAM,YAAY,gCACvB,KAAK,MAAM,aAAa,cAAc,qBAAqB,EAC3D,KAAK,GAAG,YAAY,KAAK,MAAM,EAC/B,KAAK,gBAAgB,EAAQ,EAE7B,KAAK,MAAM,iBAAiB,eAAe;GACzC,IAAM,IAAO,EAAM,OAAO,KAAK,MAAM,MAAM,EAAE,GAAK,EAAI;AAGtD,GAFA,KAAK,MAAM,cAAc,GAAG,EAAK,KACjC,KAAK,gBAAgB,EAAK,EAC1B,EAAgB,EAAE,QAAQ,GAAM,CAAC;IACjC,EAEF,KAAK,uBAAuB;GAC1B,IAAM,IAAI,EAAM,GAAU,CAAC,QAAQ,GAAK,EAAI;AAG5C,GAFI,OAAO,KAAK,MAAM,MAAM,KAAK,MAAG,KAAK,MAAM,QAAQ,OAAO,EAAE,GAChE,KAAK,MAAM,cAAc,GAAG,EAAE,KAC9B,KAAK,gBAAgB,EAAE;KAEzB,SAAS,iBAAiB,mBAAmB,KAAK,eAAe;;CAGnE,UAAgB;AACd,WAAS,oBAAoB,mBAAmB,KAAK,eAAe;;CAGtE,gBAAwB,GAAqB;EAC3C,IAAM,KAAQ,IAAQ,MAAQ,IAAM,KAAQ;AAC5C,OAAK,MAAM,MAAM,YAAY,gBAAgB,GAAG,EAAI,GAAG"}

package/dist/components/theme/theme-preset-grid.d.ts

@@ -7,7 +7,9 @@
  */
 export declare class ThemePresetGrid {
     readonly el: HTMLElement;
+    private readonly _onThemeChange;
     constructor();
+    destroy(): void;
     private render;
     private updateActive;
 }

package/dist/components/theme/theme-preset-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-preset-grid.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-preset-grid.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAkEH,qBAAa,eAAe;IAC1B,SAAgB,EAAE,EAAE,WAAW,CAAA;;IAS/B,OAAO,CAAC,MAAM;IAiCd,OAAO,CAAC,YAAY;CASrB"}
+{"version":3,"file":"theme-preset-grid.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-preset-grid.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAkEH,qBAAa,eAAe;IAC1B,SAAgB,EAAE,EAAE,WAAW,CAAA;IAC/B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAY;;IAU3C,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,MAAM;IAiCd,OAAO,CAAC,YAAY;CASrB"}

package/dist/components/theme/theme-preset-grid.js

@@ -13,7 +13,7 @@ function o(n) {
 	}
 	a.appendChild(o);
 	let c = document.createElement("div");
-	c.className = "theme-studio-preset__art-card", c.style.background = i.swatch[2], c.style.borderColor = "rgba(255,255,255,0.10)";
+	c.className = "theme-studio-preset__art-card", c.style.background = i.swatch[2], c.style.borderColor = "var(--border-2)";
 	let l = document.createElement("span");
 	l.className = "theme-studio-preset__art-pill", l.style.background = r.soft, l.style.color = r.brand, l.style.borderColor = r.brand, l.textContent = n.label.split(" ")[0] ?? n.label, c.appendChild(l);
 	let u = document.createElement("span");
@@ -35,8 +35,12 @@ function o(n) {
 }
 var s = class {
 	el;
+	_onThemeChange;
 	constructor() {
-		this.el = document.createElement("div"), this.el.className = "theme-studio-presets", this.render(), document.addEventListener("cm:theme-change", () => this.updateActive());
+		this.el = document.createElement("div"), this.el.className = "theme-studio-presets", this.render(), this._onThemeChange = () => this.updateActive(), document.addEventListener("cm:theme-change", this._onThemeChange);
+	}
+	destroy() {
+		document.removeEventListener("cm:theme-change", this._onThemeChange);
 	}
 	render() {
 		this.el.innerHTML = "";

package/dist/components/theme/theme-preset-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-preset-grid.js","names":[],"sources":["../../../src/components/theme/theme-preset-grid.ts"],"sourcesContent":["/**\n * Theme Preset Grid — 6 curated preset cards.\n *\n * Modeled on Theme.jsx ThemePresetGrid (~L460-482). Each card shows a small\n * art preview (header bar + accent dot + content card with bars) and the\n * preset's label + description. Clicking applies the preset to the engine.\n */\n\nimport {\n  ACCENT_PALETTES,\n  COLOR_MODES,\n  THEME_PRESETS,\n  findActivePresetId,\n  getTheme,\n  setThemeFull,\n} from '../../services/theme-engine'\nimport type { ThemePreset } from '../../services/theme-engine'\n\nfunction buildArt(preset: ThemePreset): HTMLElement {\n  const accent = ACCENT_PALETTES[preset.theme.accent]\n  const mode = COLOR_MODES[preset.theme.mode]\n\n  const art = document.createElement('div')\n  art.className = 'theme-studio-preset__art'\n  art.style.background = mode.swatch[1]\n\n  const bar = document.createElement('div')\n  bar.className = 'theme-studio-preset__art-bar'\n  bar.style.background = mode.swatch[0]\n  bar.style.borderColor = mode.swatch[2]\n\n  const dot = document.createElement('span')\n  dot.className = 'theme-studio-preset__art-dot'\n  dot.style.background = accent.brand\n  bar.appendChild(dot)\n\n  for (let i = 0; i < 2; i++) {\n    const line = document.createElement('span')\n    line.className = 'theme-studio-preset__art-line'\n    bar.appendChild(line)\n  }\n  art.appendChild(bar)\n\n  const card = document.createElement('div')\n  card.className = 'theme-studio-preset__art-card'\n  card.style.background = mode.swatch[2]\n  card.style.borderColor = 'rgba(255,255,255,0.10)'\n\n  const pill = document.createElement('span')\n  pill.className = 'theme-studio-preset__art-pill'\n  pill.style.background = accent.soft\n  pill.style.color = accent.brand\n  pill.style.borderColor = accent.brand\n  pill.textContent = preset.label.split(' ')[0] ?? preset.label\n  card.appendChild(pill)\n\n  const bars = document.createElement('span')\n  bars.className = 'theme-studio-preset__art-bars'\n  const widths = ['70%', '46%', '60%']\n  const colors = [accent.brand, 'rgba(255,255,255,0.30)', 'rgba(255,255,255,0.20)']\n  for (let i = 0; i < 3; i++) {\n    const b = document.createElement('i')\n    b.style.background = colors[i] ?? 'rgba(255,255,255,0.20)'\n    b.style.width = widths[i] ?? '60%'\n    bars.appendChild(b)\n  }\n  card.appendChild(bars)\n  art.appendChild(card)\n\n  return art\n}\n\nexport class ThemePresetGrid {\n  public readonly el: HTMLElement\n\n  constructor() {\n    this.el = document.createElement('div')\n    this.el.className = 'theme-studio-presets'\n    this.render()\n    document.addEventListener('cm:theme-change', () => this.updateActive())\n  }\n\n  private render(): void {\n    this.el.innerHTML = ''\n    const activeId = findActivePresetId(getTheme())\n\n    for (const preset of THEME_PRESETS) {\n      const card = document.createElement('button')\n      card.type = 'button'\n      card.className = 'theme-studio-preset'\n      card.dataset.presetId = preset.id\n      if (activeId === preset.id) card.classList.add('is-active')\n      card.setAttribute('aria-pressed', String(activeId === preset.id))\n      card.setAttribute('aria-label', `Apply ${preset.label} preset`)\n\n      card.appendChild(buildArt(preset))\n\n      const name = document.createElement('div')\n      name.className = 'theme-studio-preset__name'\n      name.textContent = preset.label\n      card.appendChild(name)\n\n      const desc = document.createElement('div')\n      desc.className = 'theme-studio-preset__desc'\n      desc.textContent = preset.description\n      card.appendChild(desc)\n\n      card.addEventListener('click', () => {\n        setThemeFull({ ...preset.theme, iconOverrides: {} })\n      })\n\n      this.el.appendChild(card)\n    }\n  }\n\n  private updateActive(): void {\n    const activeId = findActivePresetId(getTheme())\n    const cards = this.el.querySelectorAll<HTMLButtonElement>('.theme-studio-preset')\n    for (const card of cards) {\n      const isActive = card.dataset.presetId === activeId\n      card.classList.toggle('is-active', isActive)\n      card.setAttribute('aria-pressed', String(isActive))\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-preset-grid.js","names":[],"sources":["../../../src/components/theme/theme-preset-grid.ts"],"sourcesContent":["/**\n * Theme Preset Grid — 6 curated preset cards.\n *\n * Modeled on Theme.jsx ThemePresetGrid (~L460-482). Each card shows a small\n * art preview (header bar + accent dot + content card with bars) and the\n * preset's label + description. Clicking applies the preset to the engine.\n */\n\nimport {\n  ACCENT_PALETTES,\n  COLOR_MODES,\n  THEME_PRESETS,\n  findActivePresetId,\n  getTheme,\n  setThemeFull,\n} from '../../services/theme-engine'\nimport type { ThemePreset } from '../../services/theme-engine'\n\nfunction buildArt(preset: ThemePreset): HTMLElement {\n  const accent = ACCENT_PALETTES[preset.theme.accent]\n  const mode = COLOR_MODES[preset.theme.mode]\n\n  const art = document.createElement('div')\n  art.className = 'theme-studio-preset__art'\n  art.style.background = mode.swatch[1]\n\n  const bar = document.createElement('div')\n  bar.className = 'theme-studio-preset__art-bar'\n  bar.style.background = mode.swatch[0]\n  bar.style.borderColor = mode.swatch[2]\n\n  const dot = document.createElement('span')\n  dot.className = 'theme-studio-preset__art-dot'\n  dot.style.background = accent.brand\n  bar.appendChild(dot)\n\n  for (let i = 0; i < 2; i++) {\n    const line = document.createElement('span')\n    line.className = 'theme-studio-preset__art-line'\n    bar.appendChild(line)\n  }\n  art.appendChild(bar)\n\n  const card = document.createElement('div')\n  card.className = 'theme-studio-preset__art-card'\n  card.style.background = mode.swatch[2]\n  card.style.borderColor = 'var(--border-2)'\n\n  const pill = document.createElement('span')\n  pill.className = 'theme-studio-preset__art-pill'\n  pill.style.background = accent.soft\n  pill.style.color = accent.brand\n  pill.style.borderColor = accent.brand\n  pill.textContent = preset.label.split(' ')[0] ?? preset.label\n  card.appendChild(pill)\n\n  const bars = document.createElement('span')\n  bars.className = 'theme-studio-preset__art-bars'\n  const widths = ['70%', '46%', '60%']\n  const colors = [accent.brand, 'rgba(255,255,255,0.30)', 'rgba(255,255,255,0.20)']\n  for (let i = 0; i < 3; i++) {\n    const b = document.createElement('i')\n    b.style.background = colors[i] ?? 'rgba(255,255,255,0.20)'\n    b.style.width = widths[i] ?? '60%'\n    bars.appendChild(b)\n  }\n  card.appendChild(bars)\n  art.appendChild(card)\n\n  return art\n}\n\nexport class ThemePresetGrid {\n  public readonly el: HTMLElement\n  private readonly _onThemeChange: () => void\n\n  constructor() {\n    this.el = document.createElement('div')\n    this.el.className = 'theme-studio-presets'\n    this.render()\n    this._onThemeChange = () => this.updateActive()\n    document.addEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  destroy(): void {\n    document.removeEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  private render(): void {\n    this.el.innerHTML = ''\n    const activeId = findActivePresetId(getTheme())\n\n    for (const preset of THEME_PRESETS) {\n      const card = document.createElement('button')\n      card.type = 'button'\n      card.className = 'theme-studio-preset'\n      card.dataset.presetId = preset.id\n      if (activeId === preset.id) card.classList.add('is-active')\n      card.setAttribute('aria-pressed', String(activeId === preset.id))\n      card.setAttribute('aria-label', `Apply ${preset.label} preset`)\n\n      card.appendChild(buildArt(preset))\n\n      const name = document.createElement('div')\n      name.className = 'theme-studio-preset__name'\n      name.textContent = preset.label\n      card.appendChild(name)\n\n      const desc = document.createElement('div')\n      desc.className = 'theme-studio-preset__desc'\n      desc.textContent = preset.description\n      card.appendChild(desc)\n\n      card.addEventListener('click', () => {\n        setThemeFull({ ...preset.theme, iconOverrides: {} })\n      })\n\n      this.el.appendChild(card)\n    }\n  }\n\n  private updateActive(): void {\n    const activeId = findActivePresetId(getTheme())\n    const cards = this.el.querySelectorAll<HTMLButtonElement>('.theme-studio-preset')\n    for (const card of cards) {\n      const isActive = card.dataset.presetId === activeId\n      card.classList.toggle('is-active', isActive)\n      card.setAttribute('aria-pressed', String(isActive))\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/components/theme/theme-preview-tile.d.ts

@@ -8,7 +8,9 @@
  */
 export declare class ThemePreviewTile {
     readonly el: HTMLElement;
+    private readonly _onThemeChange;
     constructor();
+    destroy(): void;
     private render;
 }
 //# sourceMappingURL=theme-preview-tile.d.ts.map

package/dist/components/theme/theme-preview-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-preview-tile.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-preview-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAyCH,qBAAa,gBAAgB;IAC3B,SAAgB,EAAE,EAAE,WAAW,CAAA;;IAS/B,OAAO,CAAC,MAAM;CA0Gf"}
+{"version":3,"file":"theme-preview-tile.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-preview-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AA0CH,qBAAa,gBAAgB;IAC3B,SAAgB,EAAE,EAAE,WAAW,CAAA;IAC/B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAY;;IAU3C,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,MAAM;CA2Gf"}

package/dist/components/theme/theme-preview-tile.js

@@ -3,7 +3,7 @@ import { ACCENT_PALETTES as e, getTheme as t } from "../../services/theme-engine
 var n = "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", r = "M12 2l4 5h-8z M12 7v15 M5 12l-2 2 2 2 M19 12l2 2-2 2 M8 22h8 M3 9c2 0 3 1 4 2 M21 9c-2 0-3 1-4 2", i = "M12 3a8 8 0 0 0-8 8v6l3 1v3h2v-3h2v3h2v-3h2v3h2v-3l3-1v-6a8 8 0 0 0-8-8z M9 12h.01 M15 12h.01", a = "M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0 M21 21l-4.35-4.35", o = "M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0", s = "M12 2v4 M9 6h6 M10 6v4a4 4 0 0 0 8 0V6";
 function c(e, t = 14) {
 	let n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-	n.setAttribute("width", String(t)), n.setAttribute("height", String(t)), n.setAttribute("viewBox", "0 0 24 24"), n.setAttribute("fill", "none"), n.setAttribute("stroke", "currentColor"), n.setAttribute("stroke-width", "2"), n.setAttribute("stroke-linecap", "round"), n.setAttribute("stroke-linejoin", "round");
+	n.setAttribute("width", String(t)), n.setAttribute("height", String(t)), n.setAttribute("viewBox", "0 0 24 24"), n.setAttribute("fill", "none"), n.setAttribute("stroke", "currentColor"), n.setAttribute("stroke-width", "2"), n.setAttribute("stroke-linecap", "round"), n.setAttribute("stroke-linejoin", "round"), n.setAttribute("aria-hidden", "true");
 	for (let t of e.split(/(?=M)/g)) {
 		let e = t.trim();
 		if (!e) continue;
@@ -14,8 +14,12 @@ function c(e, t = 14) {
 }
 var l = class {
 	el;
+	_onThemeChange;
 	constructor() {
-		this.el = document.createElement("div"), this.el.className = "theme-studio-preview-tile", this.render(), document.addEventListener("cm:theme-change", () => this.render());
+		this.el = document.createElement("div"), this.el.className = "theme-studio-preview-tile", this.render(), this._onThemeChange = () => this.render(), document.addEventListener("cm:theme-change", this._onThemeChange);
+	}
+	destroy() {
+		document.removeEventListener("cm:theme-change", this._onThemeChange);
 	}
 	render() {
 		let l = t(), u = e[l.accent];
@@ -50,8 +54,8 @@ var l = class {
 				iconPath: r,
 				label: "Lateral movement (PsExec)",
 				pillText: "HIGH",
-				pillBg: "rgba(239,68,68,0.10)",
-				pillColor: "#f87171"
+				pillBg: "hsl(var(--accent-rose) / 0.15)",
+				pillColor: "hsl(var(--accent-rose))"
 			},
 			{
 				iconPath: i,
@@ -71,7 +75,7 @@ var l = class {
 		}
 		_.appendChild(v);
 		let x = document.createElement("button");
-		x.type = "button", x.className = "theme-studio-preview-tile__cta", x.style.background = u.brand, x.appendChild(c(s, 12));
+		x.type = "button", x.className = "theme-studio-preview-tile__cta", x.style.background = u.brand, x.disabled = !0, x.appendChild(c(s, 12));
 		let S = document.createElement("span");
 		S.textContent = "Connect source", x.appendChild(S), _.appendChild(x), this.el.appendChild(_);
 	}

package/dist/components/theme/theme-preview-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-preview-tile.js","names":[],"sources":["../../../src/components/theme/theme-preview-tile.ts"],"sourcesContent":["/**\n * Theme Preview Tile — port of Theme.jsx `ThemePreviewTile` (~L484-522).\n *\n * Mini app-shell: header with brand mark + wordmark + search/bell, body with\n * a \"DETECTIONS\" eyebrow + 3 detection rows + a \"Connect source\" CTA. Re-renders\n * reactively on `cm:theme-change` so users see preset/accent/font changes\n * immediately.\n */\n\nimport { ACCENT_PALETTES, getTheme } from '../../services/theme-engine'\n\nconst SHIELD_PATH = 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'\nconst BUG_PATH =\n  'M12 2l4 5h-8z M12 7v15 M5 12l-2 2 2 2 M19 12l2 2-2 2 M8 22h8 M3 9c2 0 3 1 4 2 M21 9c-2 0-3 1-4 2'\nconst SKULL_PATH =\n  'M12 3a8 8 0 0 0-8 8v6l3 1v3h2v-3h2v3h2v-3h2v3h2v-3l3-1v-6a8 8 0 0 0-8-8z M9 12h.01 M15 12h.01'\nconst SEARCH_PATH = 'M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0 M21 21l-4.35-4.35'\nconst BELL_PATH = 'M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0'\nconst PLUG_PATH = 'M12 2v4 M9 6h6 M10 6v4a4 4 0 0 0 8 0V6'\n\nfunction svgIcon(d: string, size = 14): SVGElement {\n  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n  svg.setAttribute('width', String(size))\n  svg.setAttribute('height', String(size))\n  svg.setAttribute('viewBox', '0 0 24 24')\n  svg.setAttribute('fill', 'none')\n  svg.setAttribute('stroke', 'currentColor')\n  svg.setAttribute('stroke-width', '2')\n  svg.setAttribute('stroke-linecap', 'round')\n  svg.setAttribute('stroke-linejoin', 'round')\n  for (const segment of d.split(/(?=M)/g)) {\n    const trimmed = segment.trim()\n    if (!trimmed) continue\n    const p = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n    p.setAttribute('d', trimmed)\n    svg.appendChild(p)\n  }\n  return svg\n}\n\ninterface RowSpec {\n  iconPath: string\n  label: string\n  pillText: string\n  pillBg: string\n  pillColor: string\n}\n\nexport class ThemePreviewTile {\n  public readonly el: HTMLElement\n\n  constructor() {\n    this.el = document.createElement('div')\n    this.el.className = 'theme-studio-preview-tile'\n    this.render()\n    document.addEventListener('cm:theme-change', () => this.render())\n  }\n\n  private render(): void {\n    const theme = getTheme()\n    const accent = ACCENT_PALETTES[theme.accent]\n    this.el.dataset.mode = theme.mode\n    this.el.innerHTML = ''\n\n    // Header\n    const head = document.createElement('div')\n    head.className = 'theme-studio-preview-tile__head'\n\n    const mark = document.createElement('span')\n    mark.className = 'theme-studio-preview-tile__mark'\n    mark.style.background = accent.brand\n    mark.appendChild(svgIcon(SHIELD_PATH, 12))\n    head.appendChild(mark)\n\n    const title = document.createElement('span')\n    title.className = 'theme-studio-preview-tile__title'\n    title.textContent = 'CounterMeasure'\n    head.appendChild(title)\n\n    const spacer = document.createElement('span')\n    spacer.className = 'theme-studio-preview-tile__spacer'\n    head.appendChild(spacer)\n\n    const searchBtn = document.createElement('span')\n    searchBtn.className = 'theme-studio-preview-tile__icon'\n    searchBtn.appendChild(svgIcon(SEARCH_PATH, 14))\n    head.appendChild(searchBtn)\n\n    const bellBtn = document.createElement('span')\n    bellBtn.className = 'theme-studio-preview-tile__icon'\n    bellBtn.appendChild(svgIcon(BELL_PATH, 14))\n    head.appendChild(bellBtn)\n\n    this.el.appendChild(head)\n\n    // Body\n    const body = document.createElement('div')\n    body.className = 'theme-studio-preview-tile__body'\n\n    const section = document.createElement('div')\n    section.className = 'theme-studio-preview-tile__section'\n\n    const eyebrow = document.createElement('div')\n    eyebrow.className = 'theme-studio-preview-tile__eyebrow'\n    eyebrow.textContent = 'DETECTIONS'\n    section.appendChild(eyebrow)\n\n    const rows: RowSpec[] = [\n      {\n        iconPath: SHIELD_PATH,\n        label: 'Cobalt Strike beacon',\n        pillText: '87',\n        pillBg: accent.soft,\n        pillColor: accent.brand,\n      },\n      {\n        iconPath: BUG_PATH,\n        label: 'Lateral movement (PsExec)',\n        pillText: 'HIGH',\n        pillBg: 'rgba(239,68,68,0.10)',\n        pillColor: '#f87171',\n      },\n      {\n        iconPath: SKULL_PATH,\n        label: 'APT29 — kerberoasting',\n        pillText: '23',\n        pillBg: 'rgba(255,255,255,0.06)',\n        pillColor: 'var(--text-3)',\n      },\n    ]\n\n    for (const row of rows) {\n      const r = document.createElement('div')\n      r.className = 'theme-studio-preview-tile__row'\n      r.appendChild(svgIcon(row.iconPath, 14))\n\n      const label = document.createElement('span')\n      label.className = 'theme-studio-preview-tile__row-label'\n      label.textContent = row.label\n      r.appendChild(label)\n\n      const pill = document.createElement('span')\n      pill.className = 'theme-studio-preview-tile__pill'\n      pill.style.background = row.pillBg\n      pill.style.color = row.pillColor\n      pill.textContent = row.pillText\n      r.appendChild(pill)\n\n      section.appendChild(r)\n    }\n    body.appendChild(section)\n\n    const cta = document.createElement('button')\n    cta.type = 'button'\n    cta.className = 'theme-studio-preview-tile__cta'\n    cta.style.background = accent.brand\n    cta.appendChild(svgIcon(PLUG_PATH, 12))\n    const ctaLabel = document.createElement('span')\n    ctaLabel.textContent = 'Connect source'\n    cta.appendChild(ctaLabel)\n    body.appendChild(cta)\n\n    this.el.appendChild(body)\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-preview-tile.js","names":[],"sources":["../../../src/components/theme/theme-preview-tile.ts"],"sourcesContent":["/**\n * Theme Preview Tile — port of Theme.jsx `ThemePreviewTile` (~L484-522).\n *\n * Mini app-shell: header with brand mark + wordmark + search/bell, body with\n * a \"DETECTIONS\" eyebrow + 3 detection rows + a \"Connect source\" CTA. Re-renders\n * reactively on `cm:theme-change` so users see preset/accent/font changes\n * immediately.\n */\n\nimport { ACCENT_PALETTES, getTheme } from '../../services/theme-engine'\n\nconst SHIELD_PATH = 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'\nconst BUG_PATH =\n  'M12 2l4 5h-8z M12 7v15 M5 12l-2 2 2 2 M19 12l2 2-2 2 M8 22h8 M3 9c2 0 3 1 4 2 M21 9c-2 0-3 1-4 2'\nconst SKULL_PATH =\n  'M12 3a8 8 0 0 0-8 8v6l3 1v3h2v-3h2v3h2v-3h2v3h2v-3l3-1v-6a8 8 0 0 0-8-8z M9 12h.01 M15 12h.01'\nconst SEARCH_PATH = 'M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0 M21 21l-4.35-4.35'\nconst BELL_PATH = 'M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0'\nconst PLUG_PATH = 'M12 2v4 M9 6h6 M10 6v4a4 4 0 0 0 8 0V6'\n\nfunction svgIcon(d: string, size = 14): SVGElement {\n  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n  svg.setAttribute('width', String(size))\n  svg.setAttribute('height', String(size))\n  svg.setAttribute('viewBox', '0 0 24 24')\n  svg.setAttribute('fill', 'none')\n  svg.setAttribute('stroke', 'currentColor')\n  svg.setAttribute('stroke-width', '2')\n  svg.setAttribute('stroke-linecap', 'round')\n  svg.setAttribute('stroke-linejoin', 'round')\n  svg.setAttribute('aria-hidden', 'true')\n  for (const segment of d.split(/(?=M)/g)) {\n    const trimmed = segment.trim()\n    if (!trimmed) continue\n    const p = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n    p.setAttribute('d', trimmed)\n    svg.appendChild(p)\n  }\n  return svg\n}\n\ninterface RowSpec {\n  iconPath: string\n  label: string\n  pillText: string\n  pillBg: string\n  pillColor: string\n}\n\nexport class ThemePreviewTile {\n  public readonly el: HTMLElement\n  private readonly _onThemeChange: () => void\n\n  constructor() {\n    this.el = document.createElement('div')\n    this.el.className = 'theme-studio-preview-tile'\n    this.render()\n    this._onThemeChange = () => this.render()\n    document.addEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  destroy(): void {\n    document.removeEventListener('cm:theme-change', this._onThemeChange)\n  }\n\n  private render(): void {\n    const theme = getTheme()\n    const accent = ACCENT_PALETTES[theme.accent]\n    this.el.dataset.mode = theme.mode\n    this.el.innerHTML = ''\n\n    // Header\n    const head = document.createElement('div')\n    head.className = 'theme-studio-preview-tile__head'\n\n    const mark = document.createElement('span')\n    mark.className = 'theme-studio-preview-tile__mark'\n    mark.style.background = accent.brand\n    mark.appendChild(svgIcon(SHIELD_PATH, 12))\n    head.appendChild(mark)\n\n    const title = document.createElement('span')\n    title.className = 'theme-studio-preview-tile__title'\n    title.textContent = 'CounterMeasure'\n    head.appendChild(title)\n\n    const spacer = document.createElement('span')\n    spacer.className = 'theme-studio-preview-tile__spacer'\n    head.appendChild(spacer)\n\n    const searchBtn = document.createElement('span')\n    searchBtn.className = 'theme-studio-preview-tile__icon'\n    searchBtn.appendChild(svgIcon(SEARCH_PATH, 14))\n    head.appendChild(searchBtn)\n\n    const bellBtn = document.createElement('span')\n    bellBtn.className = 'theme-studio-preview-tile__icon'\n    bellBtn.appendChild(svgIcon(BELL_PATH, 14))\n    head.appendChild(bellBtn)\n\n    this.el.appendChild(head)\n\n    // Body\n    const body = document.createElement('div')\n    body.className = 'theme-studio-preview-tile__body'\n\n    const section = document.createElement('div')\n    section.className = 'theme-studio-preview-tile__section'\n\n    const eyebrow = document.createElement('div')\n    eyebrow.className = 'theme-studio-preview-tile__eyebrow'\n    eyebrow.textContent = 'DETECTIONS'\n    section.appendChild(eyebrow)\n\n    const rows: RowSpec[] = [\n      {\n        iconPath: SHIELD_PATH,\n        label: 'Cobalt Strike beacon',\n        pillText: '87',\n        pillBg: accent.soft,\n        pillColor: accent.brand,\n      },\n      {\n        iconPath: BUG_PATH,\n        label: 'Lateral movement (PsExec)',\n        pillText: 'HIGH',\n        pillBg: 'hsl(var(--accent-rose) / 0.15)',\n        pillColor: 'hsl(var(--accent-rose))',\n      },\n      {\n        iconPath: SKULL_PATH,\n        label: 'APT29 — kerberoasting',\n        pillText: '23',\n        pillBg: 'rgba(255,255,255,0.06)',\n        pillColor: 'var(--text-3)',\n      },\n    ]\n\n    for (const row of rows) {\n      const r = document.createElement('div')\n      r.className = 'theme-studio-preview-tile__row'\n      r.appendChild(svgIcon(row.iconPath, 14))\n\n      const label = document.createElement('span')\n      label.className = 'theme-studio-preview-tile__row-label'\n      label.textContent = row.label\n      r.appendChild(label)\n\n      const pill = document.createElement('span')\n      pill.className = 'theme-studio-preview-tile__pill'\n      pill.style.background = row.pillBg\n      pill.style.color = row.pillColor\n      pill.textContent = row.pillText\n      r.appendChild(pill)\n\n      section.appendChild(r)\n    }\n    body.appendChild(section)\n\n    const cta = document.createElement('button')\n    cta.type = 'button'\n    cta.className = 'theme-studio-preview-tile__cta'\n    cta.style.background = accent.brand\n    cta.disabled = true\n    cta.appendChild(svgIcon(PLUG_PATH, 12))\n    const ctaLabel = document.createElement('span')\n    ctaLabel.textContent = 'Connect source'\n    cta.appendChild(ctaLabel)\n    body.appendChild(cta)\n\n    this.el.appendChild(body)\n  }\n}\n"],"mappings":";;AAWA,IAAM,IAAc,+CACd,IACJ,oGACI,IACJ,iGACI,IAAc,+DACd,IAAY,2EACZ,IAAY;AAElB,SAAS,EAAQ,GAAW,IAAO,IAAgB;CACjD,IAAM,IAAM,SAAS,gBAAgB,8BAA8B,MAAM;AASzE,CARA,EAAI,aAAa,SAAS,OAAO,EAAK,CAAC,EACvC,EAAI,aAAa,UAAU,OAAO,EAAK,CAAC,EACxC,EAAI,aAAa,WAAW,YAAY,EACxC,EAAI,aAAa,QAAQ,OAAO,EAChC,EAAI,aAAa,UAAU,eAAe,EAC1C,EAAI,aAAa,gBAAgB,IAAI,EACrC,EAAI,aAAa,kBAAkB,QAAQ,EAC3C,EAAI,aAAa,mBAAmB,QAAQ,EAC5C,EAAI,aAAa,eAAe,OAAO;AACvC,MAAK,IAAM,KAAW,EAAE,MAAM,SAAS,EAAE;EACvC,IAAM,IAAU,EAAQ,MAAM;AAC9B,MAAI,CAAC,EAAS;EACd,IAAM,IAAI,SAAS,gBAAgB,8BAA8B,OAAO;AAExE,EADA,EAAE,aAAa,KAAK,EAAQ,EAC5B,EAAI,YAAY,EAAE;;AAEpB,QAAO;;AAWT,IAAa,IAAb,MAA8B;CAC5B;CACA;CAEA,cAAc;AAKZ,EAJA,KAAK,KAAK,SAAS,cAAc,MAAM,EACvC,KAAK,GAAG,YAAY,6BACpB,KAAK,QAAQ,EACb,KAAK,uBAAuB,KAAK,QAAQ,EACzC,SAAS,iBAAiB,mBAAmB,KAAK,eAAe;;CAGnE,UAAgB;AACd,WAAS,oBAAoB,mBAAmB,KAAK,eAAe;;CAGtE,SAAuB;EACrB,IAAM,IAAQ,GAAU,EAClB,IAAS,EAAgB,EAAM;AAErC,EADA,KAAK,GAAG,QAAQ,OAAO,EAAM,MAC7B,KAAK,GAAG,YAAY;EAGpB,IAAM,IAAO,SAAS,cAAc,MAAM;AAC1C,IAAK,YAAY;EAEjB,IAAM,IAAO,SAAS,cAAc,OAAO;AAI3C,EAHA,EAAK,YAAY,mCACjB,EAAK,MAAM,aAAa,EAAO,OAC/B,EAAK,YAAY,EAAQ,GAAa,GAAG,CAAC,EAC1C,EAAK,YAAY,EAAK;EAEtB,IAAM,IAAQ,SAAS,cAAc,OAAO;AAG5C,EAFA,EAAM,YAAY,oCAClB,EAAM,cAAc,kBACpB,EAAK,YAAY,EAAM;EAEvB,IAAM,IAAS,SAAS,cAAc,OAAO;AAE7C,EADA,EAAO,YAAY,qCACnB,EAAK,YAAY,EAAO;EAExB,IAAM,IAAY,SAAS,cAAc,OAAO;AAGhD,EAFA,EAAU,YAAY,mCACtB,EAAU,YAAY,EAAQ,GAAa,GAAG,CAAC,EAC/C,EAAK,YAAY,EAAU;EAE3B,IAAM,IAAU,SAAS,cAAc,OAAO;AAK9C,EAJA,EAAQ,YAAY,mCACpB,EAAQ,YAAY,EAAQ,GAAW,GAAG,CAAC,EAC3C,EAAK,YAAY,EAAQ,EAEzB,KAAK,GAAG,YAAY,EAAK;EAGzB,IAAM,IAAO,SAAS,cAAc,MAAM;AAC1C,IAAK,YAAY;EAEjB,IAAM,IAAU,SAAS,cAAc,MAAM;AAC7C,IAAQ,YAAY;EAEpB,IAAM,IAAU,SAAS,cAAc,MAAM;AAG7C,EAFA,EAAQ,YAAY,sCACpB,EAAQ,cAAc,cACtB,EAAQ,YAAY,EAAQ;EAE5B,IAAM,IAAkB;GACtB;IACE,UAAU;IACV,OAAO;IACP,UAAU;IACV,QAAQ,EAAO;IACf,WAAW,EAAO;IACnB;GACD;IACE,UAAU;IACV,OAAO;IACP,UAAU;IACV,QAAQ;IACR,WAAW;IACZ;GACD;IACE,UAAU;IACV,OAAO;IACP,UAAU;IACV,QAAQ;IACR,WAAW;IACZ;GACF;AAED,OAAK,IAAM,KAAO,GAAM;GACtB,IAAM,IAAI,SAAS,cAAc,MAAM;AAEvC,GADA,EAAE,YAAY,kCACd,EAAE,YAAY,EAAQ,EAAI,UAAU,GAAG,CAAC;GAExC,IAAM,IAAQ,SAAS,cAAc,OAAO;AAG5C,GAFA,EAAM,YAAY,wCAClB,EAAM,cAAc,EAAI,OACxB,EAAE,YAAY,EAAM;GAEpB,IAAM,IAAO,SAAS,cAAc,OAAO;AAO3C,GANA,EAAK,YAAY,mCACjB,EAAK,MAAM,aAAa,EAAI,QAC5B,EAAK,MAAM,QAAQ,EAAI,WACvB,EAAK,cAAc,EAAI,UACvB,EAAE,YAAY,EAAK,EAEnB,EAAQ,YAAY,EAAE;;AAExB,IAAK,YAAY,EAAQ;EAEzB,IAAM,IAAM,SAAS,cAAc,SAAS;AAK5C,EAJA,EAAI,OAAO,UACX,EAAI,YAAY,kCAChB,EAAI,MAAM,aAAa,EAAO,OAC9B,EAAI,WAAW,IACf,EAAI,YAAY,EAAQ,GAAW,GAAG,CAAC;EACvC,IAAM,IAAW,SAAS,cAAc,OAAO;AAK/C,EAJA,EAAS,cAAc,kBACvB,EAAI,YAAY,EAAS,EACzB,EAAK,YAAY,EAAI,EAErB,KAAK,GAAG,YAAY,EAAK"}

package/dist/components/theme/theme-studio.d.ts

@@ -6,8 +6,12 @@ export interface ThemeStudioOptions {
 export declare class ThemeStudio {
     readonly el: HTMLElement;
     private readonly options;
+    private children;
     constructor(options?: ThemeStudioOptions);
     render(): void;
+    private buildAdvancedSection;
+    private buildAdvanced;
+    destroy(): void;
 }
 export declare function renderThemeStudio(container: HTMLElement, options?: ThemeStudioOptions): ThemeStudio;
 //# sourceMappingURL=theme-studio.d.ts.map

package/dist/components/theme/theme-studio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-studio.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-studio.ts"],"names":[],"mappings":"AAYA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAgHD,qBAAa,WAAW;IACtB,SAAgB,EAAE,EAAE,WAAW,CAAA;IAC/B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;gBAE1C,OAAO,GAAE,kBAAuB;IAO5C,MAAM,IAAI,IAAI;CAoFf;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,WAAW,EACtB,OAAO,CAAC,EAAE,kBAAkB,GAC3B,WAAW,CAKb"}
+{"version":3,"file":"theme-studio.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-studio.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AA2DD,qBAAa,WAAW;IACtB,SAAgB,EAAE,EAAE,WAAW,CAAA;IAC/B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;IACtD,OAAO,CAAC,QAAQ,CAAuD;gBAE3D,OAAO,GAAE,kBAAuB;IAO5C,MAAM,IAAI,IAAI;IA+Gd,OAAO,CAAC,oBAAoB;IA2B5B,OAAO,CAAC,aAAa;IAgCrB,OAAO,IAAI,IAAI;CAIhB;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,WAAW,EACtB,OAAO,CAAC,EAAE,kBAAkB,GAC3B,WAAW,CAKb"}