@countermeasure-platform/web-components 0.2.0

package/dist/components/search/command-palette.js

@@ -0,0 +1,96 @@
+//#region src/components/search/command-palette.ts
+function e(e) {
+	let t = e.toLowerCase().split("+"), n = !1, r = "";
+	for (let e of t) {
+		let t = e.trim();
+		t === "ctrl" || t === "meta" || t === "cmd" ? n = !0 : r = t;
+	}
+	return {
+		ctrl: n,
+		key: r
+	};
+}
+var t = class {
+	commands;
+	overlayEl;
+	containerEl;
+	inputEl;
+	resultsEl;
+	filteredCommands = [];
+	activeIndex = 0;
+	destroyed = !1;
+	constructor(e) {
+		this.commands = [...e.commands], this.overlayEl = document.createElement("div"), this.overlayEl.className = "cmm-command-palette__overlay", this.overlayEl.style.display = "none", this.containerEl = document.createElement("div"), this.containerEl.className = "cmm-command-palette", this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "cmm-command-palette__input", e.placeholder === void 0 ? this.inputEl.placeholder = "Type a command..." : this.inputEl.placeholder = e.placeholder, this.resultsEl = document.createElement("div"), this.resultsEl.className = "cmm-command-palette__results", this.containerEl.appendChild(this.inputEl), this.containerEl.appendChild(this.resultsEl), this.overlayEl.appendChild(this.containerEl), document.body.appendChild(this.overlayEl), this.inputEl.addEventListener("input", this.handleInput), this.inputEl.addEventListener("keydown", this.handleKeyDown), this.overlayEl.addEventListener("click", this.handleOverlayClick);
+		let t = e.keybinding ?? "ctrl+k";
+		document.addEventListener("keydown", this.createGlobalKeyHandler(t));
+	}
+	open() {
+		this.destroyed || (this.overlayEl.style.display = "", this.inputEl.value = "", this.activeIndex = 0, this.filteredCommands = [...this.commands], this.renderResults(), this.inputEl.focus());
+	}
+	close() {
+		this.overlayEl.style.display = "none", this.inputEl.value = "", this.filteredCommands = [], this.resultsEl.innerHTML = "";
+	}
+	setCommands(e) {
+		this.commands = [...e];
+	}
+	destroy() {
+		this.destroyed || (this.destroyed = !0, this.inputEl.removeEventListener("input", this.handleInput), this.inputEl.removeEventListener("keydown", this.handleKeyDown), this.overlayEl.removeEventListener("click", this.handleOverlayClick), document.removeEventListener("keydown", this.globalKeyHandler), this.overlayEl.parentNode && this.overlayEl.parentNode.removeChild(this.overlayEl));
+	}
+	globalKeyHandler = () => {};
+	createGlobalKeyHandler(t) {
+		let n = e(t);
+		return this.globalKeyHandler = (e) => {
+			let t = e.ctrlKey || e.metaKey;
+			n.ctrl && t && e.key.toLowerCase() === n.key && (e.preventDefault(), this.overlayEl.style.display === "none" ? this.open() : this.close());
+		}, this.globalKeyHandler;
+	}
+	handleInput = () => {
+		let e = this.inputEl.value.toLowerCase().trim();
+		e.length === 0 ? this.filteredCommands = [...this.commands] : this.filteredCommands = this.commands.filter((t) => t.label.toLowerCase().includes(e)), this.activeIndex = 0, this.renderResults();
+	};
+	renderResults() {
+		if (this.resultsEl.innerHTML = "", this.filteredCommands.length === 0) return;
+		let e = /* @__PURE__ */ new Map(), t = [];
+		for (let n of this.filteredCommands) if (n.group) {
+			let t = e.get(n.group);
+			t || (t = [], e.set(n.group, t)), t.push(n);
+		} else t.push(n);
+		let n = 0, r = (e, t) => {
+			let n = document.createElement("div");
+			n.className = "cmm-command-palette__item", t === this.activeIndex && n.classList.add("cmm-command-palette__item--active");
+			let r = document.createElement("span");
+			if (r.textContent = e.label, n.appendChild(r), e.keybinding) {
+				let t = document.createElement("span");
+				t.className = "cmm-command-palette__keybinding", t.textContent = e.keybinding, n.appendChild(t);
+			}
+			return n.addEventListener("click", () => {
+				this.executeCommand(e);
+			}), n;
+		};
+		if (t.length > 0) for (let e of t) this.resultsEl.appendChild(r(e, n)), n += 1;
+		for (let [t, i] of e) {
+			let e = document.createElement("div");
+			e.className = "cmm-command-palette__group", e.textContent = t, this.resultsEl.appendChild(e);
+			for (let e of i) this.resultsEl.appendChild(r(e, n)), n += 1;
+		}
+	}
+	executeCommand(e) {
+		this.close(), e.handler();
+	}
+	handleKeyDown = (e) => {
+		if (e.key === "ArrowDown") e.preventDefault(), this.filteredCommands.length > 0 && (this.activeIndex = Math.min(this.activeIndex + 1, this.filteredCommands.length - 1), this.renderResults());
+		else if (e.key === "ArrowUp") e.preventDefault(), this.activeIndex = Math.max(this.activeIndex - 1, 0), this.renderResults();
+		else if (e.key === "Enter") {
+			e.preventDefault();
+			let t = this.filteredCommands[this.activeIndex];
+			t && this.executeCommand(t);
+		} else e.key === "Escape" && this.close();
+	};
+	handleOverlayClick = (e) => {
+		e.target === this.overlayEl && this.close();
+	};
+};
+//#endregion
+export { t as CommandPalette };
+
+//# sourceMappingURL=command-palette.js.map

package/dist/components/search/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.js","names":[],"sources":["../../../src/components/search/command-palette.ts"],"sourcesContent":["/**\n * CommandPalette component - modal-style command palette\n * @countermeasure/web-components/components/search\n */\n\nimport { type CommandEntry, type CommandPaletteConfig } from './types'\n\nfunction resolveKeybinding(keybinding: string): { ctrl: boolean; key: string } {\n  const parts = keybinding.toLowerCase().split('+')\n  let ctrl = false\n  let key = ''\n  for (const part of parts) {\n    const trimmed = part.trim()\n    if (trimmed === 'ctrl' || trimmed === 'meta' || trimmed === 'cmd') {\n      ctrl = true\n    } else {\n      key = trimmed\n    }\n  }\n  return { ctrl, key }\n}\n\nexport class CommandPalette {\n  private commands: CommandEntry[]\n  private readonly overlayEl: HTMLElement\n  private readonly containerEl: HTMLElement\n  private readonly inputEl: HTMLInputElement\n  private readonly resultsEl: HTMLElement\n  private filteredCommands: CommandEntry[] = []\n  private activeIndex = 0\n  private destroyed = false\n\n  constructor(config: CommandPaletteConfig) {\n    this.commands = [...config.commands]\n\n    this.overlayEl = document.createElement('div')\n    this.overlayEl.className = 'cmm-command-palette__overlay'\n    this.overlayEl.style.display = 'none'\n\n    this.containerEl = document.createElement('div')\n    this.containerEl.className = 'cmm-command-palette'\n\n    this.inputEl = document.createElement('input')\n    this.inputEl.type = 'text'\n    this.inputEl.className = 'cmm-command-palette__input'\n    if (config.placeholder !== undefined) {\n      this.inputEl.placeholder = config.placeholder\n    } else {\n      this.inputEl.placeholder = 'Type a command...'\n    }\n\n    this.resultsEl = document.createElement('div')\n    this.resultsEl.className = 'cmm-command-palette__results'\n\n    this.containerEl.appendChild(this.inputEl)\n    this.containerEl.appendChild(this.resultsEl)\n    this.overlayEl.appendChild(this.containerEl)\n    document.body.appendChild(this.overlayEl)\n\n    this.inputEl.addEventListener('input', this.handleInput)\n    this.inputEl.addEventListener('keydown', this.handleKeyDown)\n    this.overlayEl.addEventListener('click', this.handleOverlayClick)\n\n    const keybinding = config.keybinding ?? 'ctrl+k'\n    document.addEventListener('keydown', this.createGlobalKeyHandler(keybinding))\n  }\n\n  open(): void {\n    if (this.destroyed) {\n      return\n    }\n    this.overlayEl.style.display = ''\n    this.inputEl.value = ''\n    this.activeIndex = 0\n    this.filteredCommands = [...this.commands]\n    this.renderResults()\n    this.inputEl.focus()\n  }\n\n  close(): void {\n    this.overlayEl.style.display = 'none'\n    this.inputEl.value = ''\n    this.filteredCommands = []\n    this.resultsEl.innerHTML = ''\n  }\n\n  setCommands(commands: CommandEntry[]): void {\n    this.commands = [...commands]\n  }\n\n  destroy(): void {\n    if (this.destroyed) {\n      return\n    }\n    this.destroyed = true\n\n    this.inputEl.removeEventListener('input', this.handleInput)\n    this.inputEl.removeEventListener('keydown', this.handleKeyDown)\n    this.overlayEl.removeEventListener('click', this.handleOverlayClick)\n    document.removeEventListener('keydown', this.globalKeyHandler)\n\n    if (this.overlayEl.parentNode) {\n      this.overlayEl.parentNode.removeChild(this.overlayEl)\n    }\n  }\n\n  private globalKeyHandler: (event: KeyboardEvent) => void = () => {\n    // Placeholder; replaced in createGlobalKeyHandler\n  }\n\n  private createGlobalKeyHandler(keybinding: string): (event: KeyboardEvent) => void {\n    const parsed = resolveKeybinding(keybinding)\n    this.globalKeyHandler = (event: KeyboardEvent) => {\n      const ctrlPressed = event.ctrlKey || event.metaKey\n      if (parsed.ctrl && ctrlPressed && event.key.toLowerCase() === parsed.key) {\n        event.preventDefault()\n        if (this.overlayEl.style.display === 'none') {\n          this.open()\n        } else {\n          this.close()\n        }\n      }\n    }\n    return this.globalKeyHandler\n  }\n\n  private readonly handleInput = (): void => {\n    const query = this.inputEl.value.toLowerCase().trim()\n\n    if (query.length === 0) {\n      this.filteredCommands = [...this.commands]\n    } else {\n      this.filteredCommands = this.commands.filter(cmd => cmd.label.toLowerCase().includes(query))\n    }\n\n    this.activeIndex = 0\n    this.renderResults()\n  }\n\n  private renderResults(): void {\n    this.resultsEl.innerHTML = ''\n\n    if (this.filteredCommands.length === 0) {\n      return\n    }\n\n    const groups = new Map<string, CommandEntry[]>()\n    const ungrouped: CommandEntry[] = []\n\n    for (const cmd of this.filteredCommands) {\n      if (cmd.group) {\n        let groupList = groups.get(cmd.group)\n        if (!groupList) {\n          groupList = []\n          groups.set(cmd.group, groupList)\n        }\n        groupList.push(cmd)\n      } else {\n        ungrouped.push(cmd)\n      }\n    }\n\n    let index = 0\n\n    const createItem = (cmd: CommandEntry, itemIndex: number): HTMLElement => {\n      const item = document.createElement('div')\n      item.className = 'cmm-command-palette__item'\n      if (itemIndex === this.activeIndex) {\n        item.classList.add('cmm-command-palette__item--active')\n      }\n\n      const labelText = document.createElement('span')\n      labelText.textContent = cmd.label\n      item.appendChild(labelText)\n\n      if (cmd.keybinding) {\n        const kbEl = document.createElement('span')\n        kbEl.className = 'cmm-command-palette__keybinding'\n        kbEl.textContent = cmd.keybinding\n        item.appendChild(kbEl)\n      }\n\n      item.addEventListener('click', () => {\n        this.executeCommand(cmd)\n      })\n\n      return item\n    }\n\n    if (ungrouped.length > 0) {\n      for (const cmd of ungrouped) {\n        this.resultsEl.appendChild(createItem(cmd, index))\n        index += 1\n      }\n    }\n\n    for (const [groupName, groupCommands] of groups) {\n      const groupHeader = document.createElement('div')\n      groupHeader.className = 'cmm-command-palette__group'\n      groupHeader.textContent = groupName\n      this.resultsEl.appendChild(groupHeader)\n\n      for (const cmd of groupCommands) {\n        this.resultsEl.appendChild(createItem(cmd, index))\n        index += 1\n      }\n    }\n  }\n\n  private executeCommand(cmd: CommandEntry): void {\n    this.close()\n    cmd.handler()\n  }\n\n  private readonly handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      if (this.filteredCommands.length > 0) {\n        this.activeIndex = Math.min(this.activeIndex + 1, this.filteredCommands.length - 1)\n        this.renderResults()\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      this.activeIndex = Math.max(this.activeIndex - 1, 0)\n      this.renderResults()\n    } else if (event.key === 'Enter') {\n      event.preventDefault()\n      const selected = this.filteredCommands[this.activeIndex]\n      if (selected) {\n        this.executeCommand(selected)\n      }\n    } else if (event.key === 'Escape') {\n      this.close()\n    }\n  }\n\n  private readonly handleOverlayClick = (event: MouseEvent): void => {\n    if (event.target === this.overlayEl) {\n      this.close()\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/components/search/index.d.ts

@@ -0,0 +1,37 @@
+import { SearchInputConfig } from './types';
+export { type SearchResult, type SearchInputConfig, type CommandPaletteConfig, type CommandEntry, } from './types';
+export { CommandPalette } from './command-palette';
+export declare class SearchInput {
+    private readonly config;
+    private readonly containerEl;
+    private readonly rootEl;
+    private readonly inputEl;
+    private readonly resultsEl;
+    private results;
+    private activeIndex;
+    private debounceTimer;
+    private destroyed;
+    private readonly inputId;
+    private readonly listboxId;
+    private readonly labelId;
+    private optionIds;
+    constructor(config: SearchInputConfig);
+    setValue(value: string): void;
+    getValue(): string;
+    focus(): void;
+    clear(): void;
+    destroy(): void;
+    private isDestroyed;
+    private readonly handleFocus;
+    private readonly handleBlur;
+    private readonly handleInput;
+    private performSuggest;
+    private showResults;
+    private renderResults;
+    private setActiveIndex;
+    private selectResult;
+    private hideResults;
+    private readonly handleKeyDown;
+    private readonly handleDocumentClick;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,iBAAiB,EAAqB,MAAM,SAAS,CAAA;AAKnE,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,YAAY,GAClB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAalD,qBAAa,WAAW;IACtB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmB;IAC1C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAa;IACzC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAa;IACpC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkB;IAC1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;IACvC,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAA6C;IAClE,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAQ;IAChC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAQ;IAClC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAQ;IAChC,OAAO,CAAC,SAAS,CAAe;gBAEpB,MAAM,EAAE,iBAAiB;IA0DrC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,QAAQ,IAAI,MAAM;IAIlB,KAAK,IAAI,IAAI;IAIb,KAAK,IAAI,IAAI;IAKb,OAAO,IAAI,IAAI;IAqBf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK3B;IAED,OAAO,CAAC,QAAQ,CAAC,UAAU,CAO1B;IAED,OAAO,CAAC,QAAQ,CAAC,WAAW,CAW3B;YAEa,cAAc;IAuC5B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,aAAa;IA2FrB,OAAO,CAAC,cAAc;IAsCtB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAmD7B;IAED,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAKnC;CACF"}

package/dist/components/search/index.js

@@ -0,0 +1,175 @@
+import { t as e } from "../../a11y-B5pN4M_a.js";
+import { s as t, t as n } from "../../keyboard-BzL08saM.js";
+import { n as r } from "../../utils-Cn_W3h3f.js";
+import { CommandPalette as i } from "./command-palette.js";
+//#region src/components/search/index.ts
+function a(e) {
+	if (typeof e == "string") {
+		let t = document.querySelector(e);
+		if (!t) throw Error(`SearchInput: container not found for selector "${e}"`);
+		return t;
+	}
+	return e;
+}
+var o = class {
+	config;
+	containerEl;
+	rootEl;
+	inputEl;
+	resultsEl;
+	results = [];
+	activeIndex = -1;
+	debounceTimer = null;
+	destroyed = !1;
+	inputId;
+	listboxId;
+	labelId;
+	optionIds = [];
+	constructor(e) {
+		this.config = e, this.containerEl = a(e.container), this.inputId = r("cmm-search-input"), this.listboxId = r("cmm-search-listbox"), this.labelId = r("cmm-search-label"), this.rootEl = document.createElement("div"), this.rootEl.className = "cmm-search";
+		let t = document.createElement("label");
+		t.id = this.labelId, t.className = "cmm-sr-only", t.setAttribute("for", this.inputId), t.textContent = e.placeholder ?? "Search", this.rootEl.appendChild(t), this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.id = this.inputId, this.inputEl.className = "cmm-search__input", this.inputEl.setAttribute("role", "combobox"), this.inputEl.setAttribute("aria-autocomplete", "list"), this.inputEl.setAttribute("aria-expanded", "false"), this.inputEl.setAttribute("aria-controls", this.listboxId), this.inputEl.setAttribute("aria-haspopup", "listbox"), this.inputEl.setAttribute("autocomplete", "off"), this.inputEl.setAttribute("autocorrect", "off"), this.inputEl.setAttribute("autocapitalize", "off"), this.inputEl.setAttribute("spellcheck", "false"), e.placeholder !== void 0 && (this.inputEl.placeholder = e.placeholder), this.resultsEl = document.createElement("div"), this.resultsEl.id = this.listboxId, this.resultsEl.className = "cmm-search__results", this.resultsEl.setAttribute("role", "listbox"), this.resultsEl.setAttribute("aria-label", "Search suggestions"), this.resultsEl.style.display = "none", this.rootEl.appendChild(this.inputEl), this.rootEl.appendChild(this.resultsEl), this.containerEl.appendChild(this.rootEl), this.inputEl.addEventListener("input", this.handleInput), this.inputEl.addEventListener("keydown", this.handleKeyDown), this.inputEl.addEventListener("focus", this.handleFocus), this.inputEl.addEventListener("blur", this.handleBlur), document.addEventListener("click", this.handleDocumentClick);
+	}
+	setValue(e) {
+		this.inputEl.value = e;
+	}
+	getValue() {
+		return this.inputEl.value;
+	}
+	focus() {
+		this.inputEl.focus();
+	}
+	clear() {
+		this.inputEl.value = "", this.hideResults();
+	}
+	destroy() {
+		this.destroyed || (this.destroyed = !0, this.debounceTimer !== null && clearTimeout(this.debounceTimer), this.inputEl.removeEventListener("input", this.handleInput), this.inputEl.removeEventListener("keydown", this.handleKeyDown), this.inputEl.removeEventListener("focus", this.handleFocus), this.inputEl.removeEventListener("blur", this.handleBlur), document.removeEventListener("click", this.handleDocumentClick), this.rootEl.parentNode && this.rootEl.parentNode.removeChild(this.rootEl));
+	}
+	isDestroyed() {
+		return this.destroyed;
+	}
+	handleFocus = () => {
+		this.results.length > 0 && this.showResults();
+	};
+	handleBlur = () => {
+		setTimeout(() => {
+			this.rootEl.contains(document.activeElement) || this.hideResults();
+		}, 150);
+	};
+	handleInput = () => {
+		let e = this.inputEl.value;
+		this.debounceTimer !== null && clearTimeout(this.debounceTimer);
+		let t = this.config.debounceMs ?? 200;
+		this.debounceTimer = setTimeout(() => {
+			this.performSuggest(e);
+		}, t);
+	};
+	async performSuggest(t) {
+		if (this.destroyed) return;
+		if (!this.config.suggest) {
+			this.config.onSearch && this.config.onSearch(t);
+			return;
+		}
+		if (t.trim().length === 0) {
+			this.hideResults();
+			return;
+		}
+		let n = this.config.suggest(t), r = n instanceof Promise ? await n : n;
+		this.isDestroyed() || (this.results = r, this.activeIndex = -1, this.renderResults(), r.length === 0 ? e("No results found", "polite") : r.length === 1 ? e("1 result available", "polite") : e(`${String(r.length)} results available`, "polite"));
+	}
+	showResults() {
+		this.resultsEl.style.display = "", this.inputEl.setAttribute("aria-expanded", "true");
+	}
+	renderResults() {
+		if (this.resultsEl.innerHTML = "", this.optionIds = [], this.results.length === 0) {
+			this.hideResults();
+			return;
+		}
+		let e = /* @__PURE__ */ new Map(), t = [];
+		for (let n of this.results) if (n.group) {
+			let t = e.get(n.group);
+			t || (t = [], e.set(n.group, t)), t.push(n);
+		} else t.push(n);
+		let n = 0, i = (e, t) => {
+			let n = r("cmm-search-option");
+			this.optionIds[t] = n;
+			let i = document.createElement("div");
+			i.className = "cmm-search__result", i.id = n, i.setAttribute("role", "option"), i.setAttribute("aria-selected", t === this.activeIndex ? "true" : "false"), i.dataset.index = String(t), t === this.activeIndex && i.classList.add("cmm-search__result--active");
+			let a = document.createElement("span");
+			if (a.className = "cmm-search__result-label", a.textContent = e.label, i.appendChild(a), e.description) {
+				let t = document.createElement("span");
+				t.className = "cmm-search__result-description", t.textContent = e.description, i.appendChild(t);
+			}
+			return i.addEventListener("click", () => {
+				this.selectResult(e);
+			}), i.addEventListener("mouseenter", () => {
+				this.setActiveIndex(t);
+			}), i;
+		};
+		if (t.length > 0) for (let e of t) this.resultsEl.appendChild(i(e, n)), n += 1;
+		for (let [t, r] of e) {
+			let e = document.createElement("div");
+			e.className = "cmm-search__group", e.setAttribute("role", "presentation"), e.setAttribute("aria-hidden", "true"), e.textContent = t, this.resultsEl.appendChild(e);
+			for (let e of r) this.resultsEl.appendChild(i(e, n)), n += 1;
+		}
+		this.showResults();
+	}
+	setActiveIndex(t) {
+		let n = this.resultsEl.querySelectorAll("[role=\"option\"]");
+		for (let e of n) e.classList.remove("cmm-search__result--active"), e.setAttribute("aria-selected", "false");
+		if (this.activeIndex = t, t >= 0 && t < this.results.length) {
+			let n = this.optionIds[t];
+			if (n !== void 0) {
+				let r = this.resultsEl.querySelector(`#${n}`);
+				if (r !== null) {
+					r.classList.add("cmm-search__result--active"), r.setAttribute("aria-selected", "true"), r.scrollIntoView({ block: "nearest" }), this.inputEl.setAttribute("aria-activedescendant", n);
+					let i = this.results[t];
+					i !== void 0 && e(i.description ? `${i.label}, ${i.description}` : i.label, "polite");
+				}
+			}
+		} else this.inputEl.removeAttribute("aria-activedescendant");
+	}
+	selectResult(t) {
+		this.inputEl.value = t.label, this.hideResults(), this.inputEl.focus(), this.config.onSelect && this.config.onSelect(t), e(`${t.label} selected`, "polite");
+	}
+	hideResults() {
+		this.results = [], this.activeIndex = -1, this.optionIds = [], this.resultsEl.innerHTML = "", this.resultsEl.style.display = "none", this.inputEl.setAttribute("aria-expanded", "false"), this.inputEl.removeAttribute("aria-activedescendant");
+	}
+	handleKeyDown = (r) => {
+		if (this.results.length > 0) {
+			let e = t(r, {
+				activeIndex: this.activeIndex,
+				itemCount: this.results.length,
+				wrap: !0,
+				orientation: "vertical"
+			});
+			if (e.handled) {
+				if (r.preventDefault(), e.activated) if (this.activeIndex >= 0) {
+					let e = this.results[this.activeIndex];
+					e && this.selectResult(e);
+				} else this.config.onSearch && (this.hideResults(), this.config.onSearch(this.inputEl.value));
+				else this.setActiveIndex(e.index);
+				return;
+			}
+		}
+		switch (r.key) {
+			case n.ENTER:
+				this.results.length === 0 && this.config.onSearch && this.config.onSearch(this.inputEl.value);
+				break;
+			case n.ESCAPE:
+				this.results.length > 0 && (r.preventDefault(), this.hideResults(), e("Search suggestions dismissed", "polite"));
+				break;
+			case n.TAB:
+				this.hideResults();
+				break;
+		}
+	};
+	handleDocumentClick = (e) => {
+		let t = e.target;
+		t instanceof Node && !this.rootEl.contains(t) && this.hideResults();
+	};
+};
+//#endregion
+export { i as CommandPalette, o as SearchInput };
+
+//# sourceMappingURL=index.js.map

package/dist/components/search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/search/index.ts"],"sourcesContent":["/**\n * SearchInput - Accessible search input with dropdown suggestions\n * @countermeasure/web-components/components/search\n *\n * Implements ARIA Combobox pattern with listbox popup.\n * WCAG 2.1 AA compliant.\n */\n\nimport { type SearchInputConfig, type SearchResult } from './types'\nimport { uniqueId } from '../../primitives/utils'\nimport { announce } from '../../utils/a11y'\nimport { Keys, listNavigate } from '../../utils/keyboard'\n\nexport {\n  type SearchResult,\n  type SearchInputConfig,\n  type CommandPaletteConfig,\n  type CommandEntry,\n} from './types'\nexport { CommandPalette } from './command-palette'\n\nfunction resolveContainer(container: HTMLElement | string): HTMLElement {\n  if (typeof container === 'string') {\n    const el = document.querySelector(container)\n    if (!el) {\n      throw new Error(`SearchInput: container not found for selector \"${container}\"`)\n    }\n    return el as HTMLElement\n  }\n  return container\n}\n\nexport class SearchInput {\n  private readonly config: SearchInputConfig\n  private readonly containerEl: HTMLElement\n  private readonly rootEl: HTMLElement\n  private readonly inputEl: HTMLInputElement\n  private readonly resultsEl: HTMLElement\n  private results: SearchResult[] = []\n  private activeIndex = -1\n  private debounceTimer: ReturnType<typeof setTimeout> | null = null\n  private destroyed = false\n\n  // Accessibility IDs\n  private readonly inputId: string\n  private readonly listboxId: string\n  private readonly labelId: string\n  private optionIds: string[] = []\n\n  constructor(config: SearchInputConfig) {\n    this.config = config\n    this.containerEl = resolveContainer(config.container)\n\n    // Generate unique IDs for ARIA relationships\n    this.inputId = uniqueId('cmm-search-input')\n    this.listboxId = uniqueId('cmm-search-listbox')\n    this.labelId = uniqueId('cmm-search-label')\n\n    this.rootEl = document.createElement('div')\n    this.rootEl.className = 'cmm-search'\n\n    // Visually hidden label for screen readers\n    const label = document.createElement('label')\n    label.id = this.labelId\n    label.className = 'cmm-sr-only'\n    label.setAttribute('for', this.inputId)\n    label.textContent = config.placeholder ?? 'Search'\n    this.rootEl.appendChild(label)\n\n    // Input with combobox role\n    this.inputEl = document.createElement('input')\n    this.inputEl.type = 'text'\n    this.inputEl.id = this.inputId\n    this.inputEl.className = 'cmm-search__input'\n    this.inputEl.setAttribute('role', 'combobox')\n    this.inputEl.setAttribute('aria-autocomplete', 'list')\n    this.inputEl.setAttribute('aria-expanded', 'false')\n    this.inputEl.setAttribute('aria-controls', this.listboxId)\n    this.inputEl.setAttribute('aria-haspopup', 'listbox')\n    this.inputEl.setAttribute('autocomplete', 'off')\n    this.inputEl.setAttribute('autocorrect', 'off')\n    this.inputEl.setAttribute('autocapitalize', 'off')\n    this.inputEl.setAttribute('spellcheck', 'false')\n\n    if (config.placeholder !== undefined) {\n      this.inputEl.placeholder = config.placeholder\n    }\n\n    // Results dropdown (listbox)\n    this.resultsEl = document.createElement('div')\n    this.resultsEl.id = this.listboxId\n    this.resultsEl.className = 'cmm-search__results'\n    this.resultsEl.setAttribute('role', 'listbox')\n    this.resultsEl.setAttribute('aria-label', 'Search suggestions')\n    this.resultsEl.style.display = 'none'\n\n    this.rootEl.appendChild(this.inputEl)\n    this.rootEl.appendChild(this.resultsEl)\n    this.containerEl.appendChild(this.rootEl)\n\n    this.inputEl.addEventListener('input', this.handleInput)\n    this.inputEl.addEventListener('keydown', this.handleKeyDown)\n    this.inputEl.addEventListener('focus', this.handleFocus)\n    this.inputEl.addEventListener('blur', this.handleBlur)\n    document.addEventListener('click', this.handleDocumentClick)\n  }\n\n  setValue(value: string): void {\n    this.inputEl.value = value\n  }\n\n  getValue(): string {\n    return this.inputEl.value\n  }\n\n  focus(): void {\n    this.inputEl.focus()\n  }\n\n  clear(): void {\n    this.inputEl.value = ''\n    this.hideResults()\n  }\n\n  destroy(): void {\n    if (this.destroyed) {\n      return\n    }\n    this.destroyed = true\n\n    if (this.debounceTimer !== null) {\n      clearTimeout(this.debounceTimer)\n    }\n\n    this.inputEl.removeEventListener('input', this.handleInput)\n    this.inputEl.removeEventListener('keydown', this.handleKeyDown)\n    this.inputEl.removeEventListener('focus', this.handleFocus)\n    this.inputEl.removeEventListener('blur', this.handleBlur)\n    document.removeEventListener('click', this.handleDocumentClick)\n\n    if (this.rootEl.parentNode) {\n      this.rootEl.parentNode.removeChild(this.rootEl)\n    }\n  }\n\n  private isDestroyed(): boolean {\n    return this.destroyed\n  }\n\n  private readonly handleFocus = (): void => {\n    // Show results if there are any when focused\n    if (this.results.length > 0) {\n      this.showResults()\n    }\n  }\n\n  private readonly handleBlur = (): void => {\n    // Delay hiding to allow click events on results\n    setTimeout(() => {\n      if (!this.rootEl.contains(document.activeElement)) {\n        this.hideResults()\n      }\n    }, 150)\n  }\n\n  private readonly handleInput = (): void => {\n    const query = this.inputEl.value\n\n    if (this.debounceTimer !== null) {\n      clearTimeout(this.debounceTimer)\n    }\n\n    const delay = this.config.debounceMs ?? 200\n    this.debounceTimer = setTimeout(() => {\n      void this.performSuggest(query)\n    }, delay)\n  }\n\n  private async performSuggest(query: string): Promise<void> {\n    if (this.destroyed) {\n      return\n    }\n\n    if (!this.config.suggest) {\n      if (this.config.onSearch) {\n        this.config.onSearch(query)\n      }\n      return\n    }\n\n    if (query.trim().length === 0) {\n      this.hideResults()\n      return\n    }\n\n    const resultOrPromise = this.config.suggest(query)\n    const results = resultOrPromise instanceof Promise ? await resultOrPromise : resultOrPromise\n\n    // Re-check after async operation since state may have changed\n    if (this.isDestroyed()) {\n      return\n    }\n\n    this.results = results\n    this.activeIndex = -1\n    this.renderResults()\n\n    // Announce results count to screen readers\n    if (results.length === 0) {\n      announce('No results found', 'polite')\n    } else if (results.length === 1) {\n      announce('1 result available', 'polite')\n    } else {\n      announce(`${String(results.length)} results available`, 'polite')\n    }\n  }\n\n  private showResults(): void {\n    this.resultsEl.style.display = ''\n    this.inputEl.setAttribute('aria-expanded', 'true')\n  }\n\n  private renderResults(): void {\n    this.resultsEl.innerHTML = ''\n    this.optionIds = []\n\n    if (this.results.length === 0) {\n      this.hideResults()\n      return\n    }\n\n    const groups = new Map<string, SearchResult[]>()\n    const ungrouped: SearchResult[] = []\n\n    for (const result of this.results) {\n      if (result.group) {\n        let groupList = groups.get(result.group)\n        if (!groupList) {\n          groupList = []\n          groups.set(result.group, groupList)\n        }\n        groupList.push(result)\n      } else {\n        ungrouped.push(result)\n      }\n    }\n\n    let index = 0\n\n    const renderItem = (result: SearchResult, itemIndex: number): HTMLElement => {\n      const optionId = uniqueId('cmm-search-option')\n      this.optionIds[itemIndex] = optionId\n\n      const item = document.createElement('div')\n      item.className = 'cmm-search__result'\n      item.id = optionId\n      item.setAttribute('role', 'option')\n      item.setAttribute('aria-selected', itemIndex === this.activeIndex ? 'true' : 'false')\n      item.dataset.index = String(itemIndex)\n\n      if (itemIndex === this.activeIndex) {\n        item.classList.add('cmm-search__result--active')\n      }\n\n      const labelEl = document.createElement('span')\n      labelEl.className = 'cmm-search__result-label'\n      labelEl.textContent = result.label\n      item.appendChild(labelEl)\n\n      if (result.description) {\n        const descEl = document.createElement('span')\n        descEl.className = 'cmm-search__result-description'\n        descEl.textContent = result.description\n        item.appendChild(descEl)\n      }\n\n      // Mouse events\n      item.addEventListener('click', () => {\n        this.selectResult(result)\n      })\n\n      item.addEventListener('mouseenter', () => {\n        this.setActiveIndex(itemIndex)\n      })\n\n      return item\n    }\n\n    if (ungrouped.length > 0) {\n      for (const result of ungrouped) {\n        this.resultsEl.appendChild(renderItem(result, index))\n        index += 1\n      }\n    }\n\n    for (const [groupName, groupResults] of groups) {\n      // Group header (not selectable)\n      const groupHeader = document.createElement('div')\n      groupHeader.className = 'cmm-search__group'\n      groupHeader.setAttribute('role', 'presentation')\n      groupHeader.setAttribute('aria-hidden', 'true')\n      groupHeader.textContent = groupName\n      this.resultsEl.appendChild(groupHeader)\n\n      for (const result of groupResults) {\n        this.resultsEl.appendChild(renderItem(result, index))\n        index += 1\n      }\n    }\n\n    this.showResults()\n  }\n\n  private setActiveIndex(index: number): void {\n    // Clear previous active\n    const allOptions = this.resultsEl.querySelectorAll<HTMLElement>('[role=\"option\"]')\n    for (const option of allOptions) {\n      option.classList.remove('cmm-search__result--active')\n      option.setAttribute('aria-selected', 'false')\n    }\n\n    this.activeIndex = index\n\n    // Set new active\n    if (index >= 0 && index < this.results.length) {\n      const optionId = this.optionIds[index]\n      if (optionId !== undefined) {\n        const activeOption = this.resultsEl.querySelector<HTMLElement>(`#${optionId}`)\n        if (activeOption !== null) {\n          activeOption.classList.add('cmm-search__result--active')\n          activeOption.setAttribute('aria-selected', 'true')\n          activeOption.scrollIntoView({ block: 'nearest' })\n\n          // Update aria-activedescendant\n          this.inputEl.setAttribute('aria-activedescendant', optionId)\n\n          // Announce the active option\n          const result = this.results[index]\n          if (result !== undefined) {\n            const announcement = result.description\n              ? `${result.label}, ${result.description}`\n              : result.label\n            announce(announcement, 'polite')\n          }\n        }\n      }\n    } else {\n      this.inputEl.removeAttribute('aria-activedescendant')\n    }\n  }\n\n  private selectResult(result: SearchResult): void {\n    this.inputEl.value = result.label\n    this.hideResults()\n    this.inputEl.focus()\n\n    if (this.config.onSelect) {\n      this.config.onSelect(result)\n    }\n\n    announce(`${result.label} selected`, 'polite')\n  }\n\n  private hideResults(): void {\n    this.results = []\n    this.activeIndex = -1\n    this.optionIds = []\n    this.resultsEl.innerHTML = ''\n    this.resultsEl.style.display = 'none'\n    this.inputEl.setAttribute('aria-expanded', 'false')\n    this.inputEl.removeAttribute('aria-activedescendant')\n  }\n\n  private readonly handleKeyDown = (event: KeyboardEvent): void => {\n    // Handle navigation when results are shown\n    if (this.results.length > 0) {\n      const navResult = listNavigate(event, {\n        activeIndex: this.activeIndex,\n        itemCount: this.results.length,\n        wrap: true,\n        orientation: 'vertical',\n      })\n\n      if (navResult.handled) {\n        event.preventDefault()\n\n        if (navResult.activated) {\n          // Enter/Space pressed\n          if (this.activeIndex >= 0) {\n            const selected = this.results[this.activeIndex]\n            if (selected) {\n              this.selectResult(selected)\n            }\n          } else if (this.config.onSearch) {\n            this.hideResults()\n            this.config.onSearch(this.inputEl.value)\n          }\n        } else {\n          // Arrow navigation\n          this.setActiveIndex(navResult.index)\n        }\n        return\n      }\n    }\n\n    // Handle specific keys\n    switch (event.key) {\n      case Keys.ENTER:\n        if (this.results.length === 0 && this.config.onSearch) {\n          this.config.onSearch(this.inputEl.value)\n        }\n        break\n      case Keys.ESCAPE:\n        if (this.results.length > 0) {\n          event.preventDefault()\n          this.hideResults()\n          announce('Search suggestions dismissed', 'polite')\n        }\n        break\n      case Keys.TAB:\n        // Allow normal tab behavior but close results\n        this.hideResults()\n        break\n    }\n  }\n\n  private readonly handleDocumentClick = (event: MouseEvent): void => {\n    const target = event.target\n    if (target instanceof Node && !this.rootEl.contains(target)) {\n      this.hideResults()\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/components/search/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Search component type definitions
+ * @countermeasure/web-components/components/search
+ */
+export interface SearchResult {
+    label: string;
+    value: string;
+    icon?: string;
+    description?: string;
+    group?: string;
+}
+export interface SearchInputConfig {
+    container: HTMLElement | string;
+    placeholder?: string;
+    debounceMs?: number;
+    suggest?: (query: string) => Promise<SearchResult[]> | SearchResult[];
+    onSearch?: (query: string) => void;
+    onSelect?: (result: SearchResult) => void;
+}
+export interface CommandPaletteConfig {
+    commands: CommandEntry[];
+    placeholder?: string;
+    keybinding?: string;
+}
+export interface CommandEntry {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    group?: string;
+    keybinding?: string;
+    handler: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/search/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,GAAG,YAAY,EAAE,CAAA;IACrE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;CAC1C;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB"}

package/dist/components/split-pane/index.d.ts

@@ -0,0 +1,37 @@
+import { SplitPaneConfig } from './types';
+export type { PaneConfig, SplitOrientation, SplitPaneConfig } from './types';
+export declare class SplitPane {
+    private readonly container;
+    private readonly config;
+    private wrapperEl;
+    private readonly paneStates;
+    private isDragging;
+    private readonly handleMouseMove;
+    private readonly handleMouseUp;
+    constructor(config: SplitPaneConfig);
+    /** Get the HTMLElement for a pane by id */
+    getPane(id: string): HTMLElement | null;
+    /** Collapse a pane to zero size */
+    collapse(id: string): void;
+    /** Expand a previously collapsed pane */
+    expand(id: string): void;
+    /** Set pane sizes by id. Values can be numbers (percent) or strings (e.g. "50%", "200px") */
+    setSizes(sizes: Record<string, number | string>): void;
+    /** Remove all DOM elements and event listeners */
+    destroy(): void;
+    /** Build the DOM structure for the split pane */
+    private buildDom;
+    /** Apply current size percentages to the pane elements */
+    private applySizes;
+    /** Handle gutter mousedown to start drag */
+    private onMouseDown;
+    /** Handle mouse move during gutter drag */
+    private onMouseMove;
+    /** Handle mouse up to end gutter drag */
+    private onMouseUp;
+    /** Find a pane state by id */
+    private findPaneState;
+    /** Get the other pane state (opposite of the given id) */
+    private getOtherPane;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/split-pane/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/split-pane/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAA;AAE/D,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AA4D5E,qBAAa,SAAS;IACpB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;IACvC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAiB;IACxC,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IACnD,OAAO,CAAC,UAAU,CAAQ;IAG1B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAyB;IACzD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAY;gBAE9B,MAAM,EAAE,eAAe;IAyCnC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IASvC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IA2B1B,yCAAyC;IACzC,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IA0BxB,6FAA6F;IAC7F,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI;IAiBtD,kDAAkD;IAClD,OAAO,IAAI,IAAI;IAOf,iDAAiD;IACjD,OAAO,CAAC,QAAQ;IAwDhB,0DAA0D;IAC1D,OAAO,CAAC,UAAU;IAqBlB,4CAA4C;IAC5C,OAAO,CAAC,WAAW;IAOnB,2CAA2C;IAC3C,OAAO,CAAC,WAAW;IA4CnB,yCAAyC;IACzC,OAAO,CAAC,SAAS;IAMjB,8BAA8B;IAC9B,OAAO,CAAC,aAAa;IASrB,0DAA0D;IAC1D,OAAO,CAAC,YAAY;CASrB"}

package/dist/components/split-pane/index.js

@@ -0,0 +1,129 @@
+//#region src/components/split-pane/index.ts
+function e(e) {
+	if (typeof e == "string") {
+		let t = document.querySelector(e);
+		if (!t) throw Error(`SplitPane container not found: ${e}`);
+		return t;
+	}
+	return e;
+}
+function t(e, t) {
+	if (e === void 0) return 50;
+	if (typeof e == "number") return t > 0 ? e / t * 100 : 50;
+	if (e.endsWith("%")) {
+		let t = parseFloat(e);
+		return Number.isNaN(t) ? 50 : t;
+	}
+	if (e.endsWith("px")) {
+		let n = parseFloat(e);
+		return !Number.isNaN(n) && t > 0 ? n / t * 100 : 50;
+	}
+	let n = parseFloat(e);
+	return Number.isNaN(n) ? 50 : n;
+}
+var n = class {
+	container;
+	config;
+	wrapperEl = null;
+	paneStates;
+	isDragging = !1;
+	handleMouseMove;
+	handleMouseUp;
+	constructor(n) {
+		this.container = e(n.container), this.config = n;
+		let r = n.orientation ?? "horizontal", i = this.container.getBoundingClientRect(), a = r === "horizontal" ? i.width : i.height, [o, s] = n.panes, c = t(o.defaultSize, a), l = 100 - c;
+		this.paneStates = [{
+			config: o,
+			element: document.createElement("div"),
+			sizePercent: c,
+			collapsed: !1,
+			savedSize: c
+		}, {
+			config: s,
+			element: document.createElement("div"),
+			sizePercent: l,
+			collapsed: !1,
+			savedSize: l
+		}], this.handleMouseMove = (e) => {
+			this.onMouseMove(e);
+		}, this.handleMouseUp = () => {
+			this.onMouseUp();
+		}, this.buildDom();
+	}
+	getPane(e) {
+		for (let t of this.paneStates) if (t.config.id === e) return t.element;
+		return null;
+	}
+	collapse(e) {
+		let t = this.findPaneState(e);
+		if (!t || t.config.collapsible !== !0 || t.collapsed) return;
+		t.savedSize = t.sizePercent, t.collapsed = !0, t.element.classList.add("cmm-split__pane--collapsed");
+		let n = this.getOtherPane(e);
+		n && (n.sizePercent += t.sizePercent), t.sizePercent = 0, this.applySizes();
+	}
+	expand(e) {
+		let t = this.findPaneState(e);
+		if (!t || !t.collapsed) return;
+		t.collapsed = !1, t.element.classList.remove("cmm-split__pane--collapsed");
+		let n = t.savedSize, r = this.getOtherPane(e);
+		r && (r.sizePercent -= n, r.sizePercent < 0 && (r.sizePercent = 0)), t.sizePercent = n, this.applySizes();
+	}
+	setSizes(e) {
+		let n = this.config.orientation ?? "horizontal", r = this.container.getBoundingClientRect(), i = n === "horizontal" ? r.width : r.height;
+		for (let n of this.paneStates) {
+			let r = e[n.config.id];
+			r !== void 0 && (n.sizePercent = t(r, i), n.collapsed = !1, n.element.classList.remove("cmm-split__pane--collapsed"));
+		}
+		this.applySizes();
+	}
+	destroy() {
+		document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), this.container.innerHTML = "", this.wrapperEl = null;
+	}
+	buildDom() {
+		this.container.innerHTML = "";
+		let e = this.config.orientation ?? "horizontal", t = this.config.gutterSize ?? 4, n = document.createElement("div");
+		n.className = `cmm-split cmm-split--${e}`, n.style.display = "flex", n.style.width = "100%", n.style.height = "100%", e === "vertical" ? n.style.flexDirection = "column" : n.style.flexDirection = "row", this.wrapperEl = n;
+		let r = this.paneStates[0].element;
+		r.className = "cmm-split__pane", r.dataset.paneId = this.paneStates[0].config.id, r.style.overflow = "auto", n.appendChild(r);
+		let i = document.createElement("div");
+		i.className = "cmm-split__gutter", e === "horizontal" ? (i.style.width = `${String(t)}px`, i.style.cursor = "col-resize") : (i.style.height = `${String(t)}px`, i.style.cursor = "row-resize"), i.style.flexShrink = "0", i.addEventListener("mousedown", (e) => {
+			this.onMouseDown(e);
+		}), n.appendChild(i);
+		let a = this.paneStates[1].element;
+		a.className = "cmm-split__pane", a.dataset.paneId = this.paneStates[1].config.id, a.style.overflow = "auto", n.appendChild(a), this.container.appendChild(n), this.applySizes();
+	}
+	applySizes() {
+		let e = this.config.orientation ?? "horizontal", t = this.config.gutterSize ?? 4, [n, r] = this.paneStates, i = e === "horizontal" ? "width" : "height";
+		n.element.style[i] = `calc(${String(n.sizePercent)}% - ${String(t / 2)}px)`, r.element.style[i] = `calc(${String(r.sizePercent)}% - ${String(t / 2)}px)`, n.element.style.flexShrink = "0", r.element.style.flexShrink = "0", this.config.onResize !== void 0 && (this.config.onResize(n.config.id, n.sizePercent), this.config.onResize(r.config.id, r.sizePercent));
+	}
+	onMouseDown(e) {
+		e.preventDefault(), this.isDragging = !0, document.addEventListener("mousemove", this.handleMouseMove), document.addEventListener("mouseup", this.handleMouseUp);
+	}
+	onMouseMove(e) {
+		if (!this.isDragging || !this.wrapperEl) return;
+		let t = this.config.orientation ?? "horizontal", n = this.wrapperEl.getBoundingClientRect(), r;
+		if (t === "horizontal") {
+			let t = e.clientX - n.left;
+			r = n.width > 0 ? t / n.width * 100 : 50;
+		} else {
+			let t = e.clientY - n.top;
+			r = n.height > 0 ? t / n.height * 100 : 50;
+		}
+		let [i, a] = this.paneStates, o = i.config.minSize ?? 0, s = a.config.minSize ?? 0, c = t === "horizontal" ? n.width : n.height, l = c > 0 ? o / c * 100 : 0, u = c > 0 ? s / c * 100 : 0, d = Math.max(l, Math.min(100 - u, r)), f = 100 - d;
+		f < u && (f = u, d = 100 - f), i.sizePercent = d, a.sizePercent = f, this.applySizes();
+	}
+	onMouseUp() {
+		this.isDragging = !1, document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp);
+	}
+	findPaneState(e) {
+		for (let t of this.paneStates) if (t.config.id === e) return t;
+		return null;
+	}
+	getOtherPane(e) {
+		return this.paneStates[0].config.id === e ? this.paneStates[1] : this.paneStates[1].config.id === e ? this.paneStates[0] : null;
+	}
+};
+//#endregion
+export { n as SplitPane };
+
+//# sourceMappingURL=index.js.map

package/dist/components/split-pane/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/split-pane/index.ts"],"sourcesContent":["/**\n * SplitPane - Resizable split panel component\n * @countermeasure/web-components/components/split-pane\n */\n\nimport { type PaneConfig, type SplitPaneConfig } from './types'\n\nexport type { PaneConfig, SplitOrientation, SplitPaneConfig } from './types'\n\n/** Resolve a container reference to an HTMLElement */\nfunction resolveContainer(container: HTMLElement | string): HTMLElement {\n  if (typeof container === 'string') {\n    const el = document.querySelector<HTMLElement>(container)\n    if (!el) {\n      throw new Error(`SplitPane container not found: ${container}`)\n    }\n    return el\n  }\n  return container\n}\n\n/** Parse a size value to a percentage (0-100) given a total pixel dimension */\nfunction parseSizeToPercent(size: number | string | undefined, totalPx: number): number {\n  if (size === undefined) {\n    return 50\n  }\n\n  if (typeof size === 'number') {\n    if (totalPx > 0) {\n      return (size / totalPx) * 100\n    }\n    return 50\n  }\n\n  // String: could be \"50%\" or \"200px\"\n  if (size.endsWith('%')) {\n    const parsed = parseFloat(size)\n    if (!Number.isNaN(parsed)) {\n      return parsed\n    }\n    return 50\n  }\n\n  if (size.endsWith('px')) {\n    const parsed = parseFloat(size)\n    if (!Number.isNaN(parsed) && totalPx > 0) {\n      return (parsed / totalPx) * 100\n    }\n    return 50\n  }\n\n  const parsed = parseFloat(size)\n  if (!Number.isNaN(parsed)) {\n    return parsed\n  }\n\n  return 50\n}\n\ninterface PaneState {\n  config: PaneConfig\n  element: HTMLElement\n  sizePercent: number\n  collapsed: boolean\n  savedSize: number\n}\n\nexport class SplitPane {\n  private readonly container: HTMLElement\n  private readonly config: SplitPaneConfig\n  private wrapperEl: HTMLElement | null = null\n  private readonly paneStates: [PaneState, PaneState]\n  private isDragging = false\n\n  // Bound handlers for cleanup\n  private readonly handleMouseMove: (e: MouseEvent) => void\n  private readonly handleMouseUp: () => void\n\n  constructor(config: SplitPaneConfig) {\n    this.container = resolveContainer(config.container)\n    this.config = config\n\n    const orientation = config.orientation ?? 'horizontal'\n\n    // Compute initial sizes\n    const containerRect = this.container.getBoundingClientRect()\n    const totalPx = orientation === 'horizontal' ? containerRect.width : containerRect.height\n\n    const [pane0Config, pane1Config] = config.panes\n    const firstSize = parseSizeToPercent(pane0Config.defaultSize, totalPx)\n    const secondSize = 100 - firstSize\n\n    this.paneStates = [\n      {\n        config: pane0Config,\n        element: document.createElement('div'),\n        sizePercent: firstSize,\n        collapsed: false,\n        savedSize: firstSize,\n      },\n      {\n        config: pane1Config,\n        element: document.createElement('div'),\n        sizePercent: secondSize,\n        collapsed: false,\n        savedSize: secondSize,\n      },\n    ]\n\n    this.handleMouseMove = (e: MouseEvent) => {\n      this.onMouseMove(e)\n    }\n    this.handleMouseUp = () => {\n      this.onMouseUp()\n    }\n\n    this.buildDom()\n  }\n\n  /** Get the HTMLElement for a pane by id */\n  getPane(id: string): HTMLElement | null {\n    for (const state of this.paneStates) {\n      if (state.config.id === id) {\n        return state.element\n      }\n    }\n    return null\n  }\n\n  /** Collapse a pane to zero size */\n  collapse(id: string): void {\n    const state = this.findPaneState(id)\n    if (!state) {\n      return\n    }\n\n    if (state.config.collapsible !== true) {\n      return\n    }\n\n    if (state.collapsed) {\n      return\n    }\n\n    state.savedSize = state.sizePercent\n    state.collapsed = true\n    state.element.classList.add('cmm-split__pane--collapsed')\n\n    const other = this.getOtherPane(id)\n    if (other) {\n      other.sizePercent += state.sizePercent\n    }\n    state.sizePercent = 0\n\n    this.applySizes()\n  }\n\n  /** Expand a previously collapsed pane */\n  expand(id: string): void {\n    const state = this.findPaneState(id)\n    if (!state) {\n      return\n    }\n\n    if (!state.collapsed) {\n      return\n    }\n\n    state.collapsed = false\n    state.element.classList.remove('cmm-split__pane--collapsed')\n\n    const restoreSize = state.savedSize\n    const other = this.getOtherPane(id)\n    if (other) {\n      other.sizePercent -= restoreSize\n      if (other.sizePercent < 0) {\n        other.sizePercent = 0\n      }\n    }\n    state.sizePercent = restoreSize\n\n    this.applySizes()\n  }\n\n  /** Set pane sizes by id. Values can be numbers (percent) or strings (e.g. \"50%\", \"200px\") */\n  setSizes(sizes: Record<string, number | string>): void {\n    const orientation = this.config.orientation ?? 'horizontal'\n    const containerRect = this.container.getBoundingClientRect()\n    const totalPx = orientation === 'horizontal' ? containerRect.width : containerRect.height\n\n    for (const state of this.paneStates) {\n      const size = sizes[state.config.id]\n      if (size !== undefined) {\n        state.sizePercent = parseSizeToPercent(size, totalPx)\n        state.collapsed = false\n        state.element.classList.remove('cmm-split__pane--collapsed')\n      }\n    }\n\n    this.applySizes()\n  }\n\n  /** Remove all DOM elements and event listeners */\n  destroy(): void {\n    document.removeEventListener('mousemove', this.handleMouseMove)\n    document.removeEventListener('mouseup', this.handleMouseUp)\n    this.container.innerHTML = ''\n    this.wrapperEl = null\n  }\n\n  /** Build the DOM structure for the split pane */\n  private buildDom(): void {\n    this.container.innerHTML = ''\n\n    const orientation = this.config.orientation ?? 'horizontal'\n    const gutterSize = this.config.gutterSize ?? 4\n\n    const wrapper = document.createElement('div')\n    wrapper.className = `cmm-split cmm-split--${orientation}`\n    wrapper.style.display = 'flex'\n    wrapper.style.width = '100%'\n    wrapper.style.height = '100%'\n\n    if (orientation === 'vertical') {\n      wrapper.style.flexDirection = 'column'\n    } else {\n      wrapper.style.flexDirection = 'row'\n    }\n\n    this.wrapperEl = wrapper\n\n    // First pane\n    const pane0El = this.paneStates[0].element\n    pane0El.className = 'cmm-split__pane'\n    pane0El.dataset.paneId = this.paneStates[0].config.id\n    pane0El.style.overflow = 'auto'\n    wrapper.appendChild(pane0El)\n\n    // Gutter\n    const gutter = document.createElement('div')\n    gutter.className = 'cmm-split__gutter'\n\n    if (orientation === 'horizontal') {\n      gutter.style.width = `${String(gutterSize)}px`\n      gutter.style.cursor = 'col-resize'\n    } else {\n      gutter.style.height = `${String(gutterSize)}px`\n      gutter.style.cursor = 'row-resize'\n    }\n\n    gutter.style.flexShrink = '0'\n    gutter.addEventListener('mousedown', (e: MouseEvent) => {\n      this.onMouseDown(e)\n    })\n    wrapper.appendChild(gutter)\n\n    // Second pane\n    const pane1El = this.paneStates[1].element\n    pane1El.className = 'cmm-split__pane'\n    pane1El.dataset.paneId = this.paneStates[1].config.id\n    pane1El.style.overflow = 'auto'\n    wrapper.appendChild(pane1El)\n\n    this.container.appendChild(wrapper)\n    this.applySizes()\n  }\n\n  /** Apply current size percentages to the pane elements */\n  private applySizes(): void {\n    const orientation = this.config.orientation ?? 'horizontal'\n    const gutterSize = this.config.gutterSize ?? 4\n\n    const [state0, state1] = this.paneStates\n\n    const prop = orientation === 'horizontal' ? 'width' : 'height'\n\n    state0.element.style[prop] =\n      `calc(${String(state0.sizePercent)}% - ${String(gutterSize / 2)}px)`\n    state1.element.style[prop] =\n      `calc(${String(state1.sizePercent)}% - ${String(gutterSize / 2)}px)`\n    state0.element.style.flexShrink = '0'\n    state1.element.style.flexShrink = '0'\n\n    if (this.config.onResize !== undefined) {\n      this.config.onResize(state0.config.id, state0.sizePercent)\n      this.config.onResize(state1.config.id, state1.sizePercent)\n    }\n  }\n\n  /** Handle gutter mousedown to start drag */\n  private onMouseDown(e: MouseEvent): void {\n    e.preventDefault()\n    this.isDragging = true\n    document.addEventListener('mousemove', this.handleMouseMove)\n    document.addEventListener('mouseup', this.handleMouseUp)\n  }\n\n  /** Handle mouse move during gutter drag */\n  private onMouseMove(e: MouseEvent): void {\n    if (!this.isDragging) {\n      return\n    }\n\n    if (!this.wrapperEl) {\n      return\n    }\n\n    const orientation = this.config.orientation ?? 'horizontal'\n    const rect = this.wrapperEl.getBoundingClientRect()\n\n    let ratio: number\n    if (orientation === 'horizontal') {\n      const x = e.clientX - rect.left\n      ratio = rect.width > 0 ? (x / rect.width) * 100 : 50\n    } else {\n      const y = e.clientY - rect.top\n      ratio = rect.height > 0 ? (y / rect.height) * 100 : 50\n    }\n\n    // Enforce minimum sizes\n    const [state0, state1] = this.paneStates\n    const min0 = state0.config.minSize ?? 0\n    const min1 = state1.config.minSize ?? 0\n    const totalPx = orientation === 'horizontal' ? rect.width : rect.height\n\n    const minPercent0 = totalPx > 0 ? (min0 / totalPx) * 100 : 0\n    const minPercent1 = totalPx > 0 ? (min1 / totalPx) * 100 : 0\n\n    let newFirst = Math.max(minPercent0, Math.min(100 - minPercent1, ratio))\n    let newSecond = 100 - newFirst\n\n    if (newSecond < minPercent1) {\n      newSecond = minPercent1\n      newFirst = 100 - newSecond\n    }\n\n    state0.sizePercent = newFirst\n    state1.sizePercent = newSecond\n\n    this.applySizes()\n  }\n\n  /** Handle mouse up to end gutter drag */\n  private onMouseUp(): void {\n    this.isDragging = false\n    document.removeEventListener('mousemove', this.handleMouseMove)\n    document.removeEventListener('mouseup', this.handleMouseUp)\n  }\n\n  /** Find a pane state by id */\n  private findPaneState(id: string): PaneState | null {\n    for (const state of this.paneStates) {\n      if (state.config.id === id) {\n        return state\n      }\n    }\n    return null\n  }\n\n  /** Get the other pane state (opposite of the given id) */\n  private getOtherPane(id: string): PaneState | null {\n    if (this.paneStates[0].config.id === id) {\n      return this.paneStates[1]\n    }\n    if (this.paneStates[1].config.id === id) {\n      return this.paneStates[0]\n    }\n    return null\n  }\n}\n"],"mappings":"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"}