@countermeasure-platform/web-components 0.2.0

package/dist/visualization/file-tree/index.js

@@ -0,0 +1,154 @@
+import { n as e, t } from "../../utils-Cn_W3h3f.js";
+//#region src/visualization/file-tree/index.ts
+var n = "<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M1.5 2.5h4.25l1.25 1.5h7.5v9.5h-13z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n</svg>", r = "<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M1.5 2.5h4.25l1.25 1.5h7.5v2H3.5l-2 6.5z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n  <path d=\"M3.5 6.5h11l-2 7h-11z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n</svg>", i = "<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M3 1.5h6.5L13 5v9.5H3z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n  <path d=\"M9.5 1.5v3.5H13\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n</svg>", a = "<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>", o = class {
+	id;
+	container;
+	config;
+	indent;
+	showIcons;
+	data;
+	wrapperEl = null;
+	selectedIds = /* @__PURE__ */ new Set();
+	flatNodes = [];
+	focusedIndex = -1;
+	expandedIds = /* @__PURE__ */ new Set();
+	dragSourceNode = null;
+	constructor(n) {
+		this.id = e("cmm-file-tree"), this.container = t(n.container), this.config = n, this.data = this.cloneData(n.data), this.indent = n.indent ?? 16, this.showIcons = n.showIcons !== !1, this.initExpandedState(this.data), this.render();
+	}
+	update(e) {
+		this.data = this.cloneData(e), this.initExpandedState(this.data), this.render();
+	}
+	getSelected() {
+		let e = [];
+		return this.collectSelected(this.data, e), e;
+	}
+	expandAll() {
+		this.setAllExpanded(this.data, !0), this.render();
+	}
+	collapseAll() {
+		this.setAllExpanded(this.data, !1), this.render();
+	}
+	destroy() {
+		this.container.innerHTML = "", this.wrapperEl = null, this.flatNodes = [], this.selectedIds.clear(), this.expandedIds.clear();
+	}
+	cloneData(e) {
+		return e.map((e) => this.cloneNode(e));
+	}
+	cloneNode(e) {
+		let t = {
+			id: e.id,
+			name: e.name,
+			type: e.type
+		};
+		return e.icon !== void 0 && (t.icon = e.icon), e.data !== void 0 && (t.data = { ...e.data }), e.expanded !== void 0 && (t.expanded = e.expanded), e.selected !== void 0 && (t.selected = e.selected), e.children !== void 0 && (t.children = e.children.map((e) => this.cloneNode(e))), t;
+	}
+	initExpandedState(e) {
+		for (let t of e) t.type === "folder" && t.expanded === !0 && this.expandedIds.add(t.id), t.selected === !0 && this.selectedIds.add(t.id), t.children !== void 0 && this.initExpandedState(t.children);
+	}
+	setAllExpanded(e, t) {
+		for (let n of e) n.type === "folder" && (t ? this.expandedIds.add(n.id) : this.expandedIds.delete(n.id)), n.children !== void 0 && this.setAllExpanded(n.children, t);
+	}
+	collectSelected(e, t) {
+		for (let n of e) this.selectedIds.has(n.id) && t.push(n), n.children !== void 0 && this.collectSelected(n.children, t);
+	}
+	render() {
+		this.container.innerHTML = "", this.flatNodes = [];
+		let e = document.createElement("div");
+		if (e.className = "cmm-file-tree", e.id = this.id, e.setAttribute("role", "tree"), e.setAttribute("tabindex", "0"), this.config.className !== void 0 && e.classList.add(this.config.className), this.data.length === 0) {
+			let t = document.createElement("div");
+			t.className = "cmm-file-tree__empty", t.textContent = "No files", e.appendChild(t);
+		} else {
+			let t = document.createElement("ul");
+			t.className = "cmm-file-tree__list cmm-file-tree__list--root", t.setAttribute("role", "group"), this.renderNodes(this.data, t, 0), e.appendChild(t);
+		}
+		e.addEventListener("keydown", this.handleKeyDown.bind(this)), this.container.appendChild(e), this.wrapperEl = e;
+	}
+	renderNodes(e, t, o) {
+		for (let s of e) {
+			let e = s.type === "folder", c = this.expandedIds.has(s.id), l = this.selectedIds.has(s.id), u = document.createElement("li");
+			u.className = "cmm-file-tree__item", u.setAttribute("role", "treeitem"), u.setAttribute("aria-expanded", e ? String(c) : "false"), u.setAttribute("data-node-id", s.id);
+			let d = document.createElement("div");
+			d.className = "cmm-file-tree__row", l && d.classList.add("cmm-file-tree__row--selected"), d.style.paddingLeft = `${String(o * this.indent + 8)}px`;
+			let f = document.createElement("span");
+			if (f.className = "cmm-file-tree__chevron", e ? (f.innerHTML = a, c && f.classList.add("cmm-file-tree__chevron--expanded")) : f.classList.add("cmm-file-tree__chevron--hidden"), d.appendChild(f), this.showIcons) {
+				let t = document.createElement("span");
+				t.className = "cmm-file-tree__icon", s.icon === void 0 ? e ? (t.classList.add("cmm-file-tree__icon--folder"), t.innerHTML = c ? r : n) : t.innerHTML = i : t.innerHTML = s.icon, d.appendChild(t);
+			}
+			let p = document.createElement("span");
+			p.className = "cmm-file-tree__label", p.textContent = s.name, d.appendChild(p), d.addEventListener("click", (e) => {
+				this.handleNodeClick(s, e);
+			}), this.config.draggable === !0 && (d.draggable = !0, d.addEventListener("dragstart", (e) => {
+				this.dragSourceNode = s, e.dataTransfer !== null && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", s.id));
+			}), d.addEventListener("dragover", (e) => {
+				this.dragSourceNode !== null && this.dragSourceNode.id !== s.id && s.type === "folder" && (e.preventDefault(), e.dataTransfer !== null && (e.dataTransfer.dropEffect = "move"), d.classList.add("cmm-file-tree__row--drag-over"));
+			}), d.addEventListener("dragleave", () => {
+				d.classList.remove("cmm-file-tree__row--drag-over");
+			}), d.addEventListener("drop", (e) => {
+				e.preventDefault(), d.classList.remove("cmm-file-tree__row--drag-over"), this.dragSourceNode !== null && this.dragSourceNode.id !== s.id && s.type === "folder" && this.config.onDrop !== void 0 && this.config.onDrop(this.dragSourceNode, s), this.dragSourceNode = null;
+			}), d.addEventListener("dragend", () => {
+				this.dragSourceNode = null;
+			})), u.appendChild(d);
+			let m = this.flatNodes.length;
+			if (this.flatNodes.push({
+				node: s,
+				depth: o,
+				rowEl: d
+			}), m === this.focusedIndex && d.classList.add("cmm-file-tree__row--focused"), e && s.children !== void 0 && s.children.length > 0) {
+				let e = document.createElement("ul");
+				e.className = "cmm-file-tree__children", e.setAttribute("role", "group"), c || e.classList.add("cmm-file-tree__children--collapsed"), this.renderNodes(s.children, e, o + 1), u.appendChild(e);
+			}
+			t.appendChild(u);
+		}
+	}
+	handleNodeClick(e, t) {
+		e.type === "folder" && (this.expandedIds.has(e.id) ? this.expandedIds.delete(e.id) : this.expandedIds.add(e.id), this.config.onExpand !== void 0 && this.config.onExpand(e)), this.config.selectable !== !1 && (this.config.multiSelect === !0 && (t.ctrlKey || t.metaKey) ? this.selectedIds.has(e.id) ? this.selectedIds.delete(e.id) : this.selectedIds.add(e.id) : (this.selectedIds.clear(), this.selectedIds.add(e.id)), this.config.onSelect !== void 0 && this.config.onSelect(e));
+		let n = this.flatNodes.findIndex((t) => t.node.id === e.id);
+		n >= 0 && (this.focusedIndex = n), this.render();
+	}
+	handleKeyDown(e) {
+		if (this.flatNodes.length !== 0) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), this.focusedIndex = Math.min(this.focusedIndex + 1, this.flatNodes.length - 1), this.render(), this.scrollFocusedIntoView();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), this.focusedIndex = Math.max(this.focusedIndex - 1, 0), this.render(), this.scrollFocusedIntoView();
+				break;
+			case "ArrowRight": {
+				e.preventDefault();
+				let t = this.flatNodes[this.focusedIndex];
+				t?.node.type === "folder" && (this.expandedIds.has(t.node.id) ? this.focusedIndex < this.flatNodes.length - 1 && (this.focusedIndex += 1, this.render()) : (this.expandedIds.add(t.node.id), this.config.onExpand !== void 0 && this.config.onExpand(t.node), this.render()));
+				break;
+			}
+			case "ArrowLeft": {
+				e.preventDefault();
+				let t = this.flatNodes[this.focusedIndex];
+				if (t?.node.type === "folder" && this.expandedIds.has(t.node.id)) this.expandedIds.delete(t.node.id), this.config.onExpand !== void 0 && this.config.onExpand(t.node), this.render();
+				else if (t !== void 0 && t.depth > 0) for (let e = this.focusedIndex - 1; e >= 0; e--) {
+					let n = this.flatNodes[e];
+					if (n !== void 0 && n.depth < t.depth) {
+						this.focusedIndex = e, this.render();
+						break;
+					}
+				}
+				break;
+			}
+			case "Enter":
+			case " ": {
+				e.preventDefault();
+				let t = this.flatNodes[this.focusedIndex];
+				t !== void 0 && this.handleNodeClick(t.node, new MouseEvent("click"));
+				break;
+			}
+		}
+	}
+	scrollFocusedIntoView() {
+		if (this.wrapperEl === null || this.focusedIndex < 0) return;
+		let e = this.flatNodes[this.focusedIndex];
+		e !== void 0 && e.rowEl.scrollIntoView({ block: "nearest" });
+	}
+};
+//#endregion
+export { o as FileTree };
+
+//# sourceMappingURL=index.js.map

package/dist/visualization/file-tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/visualization/file-tree/index.ts"],"sourcesContent":["/**\n * FileTree - Hierarchical file/folder tree with expand/collapse and drag-and-drop\n * @countermeasure/web-components/visualization/file-tree\n */\n\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\nimport type { FileTreeConfig, FileTreeNode } from './types'\n\nexport type { FileTreeConfig, FileTreeNode } from './types'\n\n/** SVG icon for a closed folder */\nconst FOLDER_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M1.5 2.5h4.25l1.25 1.5h7.5v9.5h-13z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n</svg>`\n\n/** SVG icon for an open folder */\nconst FOLDER_OPEN_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M1.5 2.5h4.25l1.25 1.5h7.5v2H3.5l-2 6.5z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n  <path d=\"M3.5 6.5h11l-2 7h-11z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n</svg>`\n\n/** SVG icon for a file */\nconst FILE_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M3 1.5h6.5L13 5v9.5H3z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n  <path d=\"M9.5 1.5v3.5H13\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/>\n</svg>`\n\n/** SVG chevron for expand/collapse */\nconst CHEVRON_ICON = `<svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>`\n\n/** Flattened representation of a visible node for keyboard navigation */\ninterface FlatNode {\n  node: FileTreeNode\n  depth: number\n  rowEl: HTMLElement\n}\n\nexport class FileTree {\n  private readonly id: string\n  private readonly container: HTMLElement\n  private readonly config: FileTreeConfig\n  private readonly indent: number\n  private readonly showIcons: boolean\n\n  private data: FileTreeNode[]\n  private wrapperEl: HTMLElement | null = null\n  private selectedIds = new Set<string>()\n  private flatNodes: FlatNode[] = []\n  private focusedIndex = -1\n\n  /** Expansion state stored by node id */\n  private readonly expandedIds = new Set<string>()\n\n  /** Drag state */\n  private dragSourceNode: FileTreeNode | null = null\n\n  constructor(config: FileTreeConfig) {\n    this.id = uniqueId('cmm-file-tree')\n    this.container = resolveContainer(config.container)\n    this.config = config\n    this.data = this.cloneData(config.data)\n    this.indent = config.indent ?? 16\n    this.showIcons = config.showIcons !== false\n\n    // Initialize expanded state from data\n    this.initExpandedState(this.data)\n\n    this.render()\n  }\n\n  /** Replace tree data and re-render */\n  update(data: FileTreeNode[]): void {\n    this.data = this.cloneData(data)\n    this.initExpandedState(this.data)\n    this.render()\n  }\n\n  /** Get all currently selected nodes */\n  getSelected(): FileTreeNode[] {\n    const result: FileTreeNode[] = []\n    this.collectSelected(this.data, result)\n    return result\n  }\n\n  /** Expand all folders */\n  expandAll(): void {\n    this.setAllExpanded(this.data, true)\n    this.render()\n  }\n\n  /** Collapse all folders */\n  collapseAll(): void {\n    this.setAllExpanded(this.data, false)\n    this.render()\n  }\n\n  /** Clean up the component and remove from DOM */\n  destroy(): void {\n    this.container.innerHTML = ''\n    this.wrapperEl = null\n    this.flatNodes = []\n    this.selectedIds.clear()\n    this.expandedIds.clear()\n  }\n\n  // ---------------------------------------------------------------------------\n  // Data helpers\n  // ---------------------------------------------------------------------------\n\n  /** Deep clone data to avoid mutating the caller's objects */\n  private cloneData(data: FileTreeNode[]): FileTreeNode[] {\n    return data.map(n => this.cloneNode(n))\n  }\n\n  private cloneNode(node: FileTreeNode): FileTreeNode {\n    const cloned: FileTreeNode = {\n      id: node.id,\n      name: node.name,\n      type: node.type,\n    }\n    if (node.icon !== undefined) {\n      cloned.icon = node.icon\n    }\n    if (node.data !== undefined) {\n      cloned.data = { ...node.data }\n    }\n    if (node.expanded !== undefined) {\n      cloned.expanded = node.expanded\n    }\n    if (node.selected !== undefined) {\n      cloned.selected = node.selected\n    }\n    if (node.children !== undefined) {\n      cloned.children = node.children.map(c => this.cloneNode(c))\n    }\n    return cloned\n  }\n\n  /** Initialize the expandedIds set from node data */\n  private initExpandedState(nodes: FileTreeNode[]): void {\n    for (const node of nodes) {\n      if (node.type === 'folder' && node.expanded === true) {\n        this.expandedIds.add(node.id)\n      }\n      if (node.selected === true) {\n        this.selectedIds.add(node.id)\n      }\n      if (node.children !== undefined) {\n        this.initExpandedState(node.children)\n      }\n    }\n  }\n\n  /** Set all folders expanded or collapsed */\n  private setAllExpanded(nodes: FileTreeNode[], expanded: boolean): void {\n    for (const node of nodes) {\n      if (node.type === 'folder') {\n        if (expanded) {\n          this.expandedIds.add(node.id)\n        } else {\n          this.expandedIds.delete(node.id)\n        }\n      }\n      if (node.children !== undefined) {\n        this.setAllExpanded(node.children, expanded)\n      }\n    }\n  }\n\n  /** Collect selected nodes from the tree */\n  private collectSelected(nodes: FileTreeNode[], result: FileTreeNode[]): void {\n    for (const node of nodes) {\n      if (this.selectedIds.has(node.id)) {\n        result.push(node)\n      }\n      if (node.children !== undefined) {\n        this.collectSelected(node.children, result)\n      }\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Rendering\n  // ---------------------------------------------------------------------------\n\n  /** Main render method */\n  private render(): void {\n    this.container.innerHTML = ''\n    this.flatNodes = []\n\n    const wrapper = document.createElement('div')\n    wrapper.className = 'cmm-file-tree'\n    wrapper.id = this.id\n    wrapper.setAttribute('role', 'tree')\n    wrapper.setAttribute('tabindex', '0')\n\n    if (this.config.className !== undefined) {\n      wrapper.classList.add(this.config.className)\n    }\n\n    if (this.data.length === 0) {\n      const empty = document.createElement('div')\n      empty.className = 'cmm-file-tree__empty'\n      empty.textContent = 'No files'\n      wrapper.appendChild(empty)\n    } else {\n      const list = document.createElement('ul')\n      list.className = 'cmm-file-tree__list cmm-file-tree__list--root'\n      list.setAttribute('role', 'group')\n      this.renderNodes(this.data, list, 0)\n      wrapper.appendChild(list)\n    }\n\n    // Keyboard navigation\n    wrapper.addEventListener('keydown', this.handleKeyDown.bind(this))\n\n    this.container.appendChild(wrapper)\n    this.wrapperEl = wrapper\n  }\n\n  /** Recursively render tree nodes */\n  private renderNodes(nodes: FileTreeNode[], parentEl: HTMLElement, depth: number): void {\n    for (const node of nodes) {\n      const isFolder = node.type === 'folder'\n      const isExpanded = this.expandedIds.has(node.id)\n      const isSelected = this.selectedIds.has(node.id)\n\n      const item = document.createElement('li')\n      item.className = 'cmm-file-tree__item'\n      item.setAttribute('role', 'treeitem')\n      item.setAttribute('aria-expanded', isFolder ? String(isExpanded) : 'false')\n      item.setAttribute('data-node-id', node.id)\n\n      // Row\n      const row = document.createElement('div')\n      row.className = 'cmm-file-tree__row'\n\n      if (isSelected) {\n        row.classList.add('cmm-file-tree__row--selected')\n      }\n\n      row.style.paddingLeft = `${String(depth * this.indent + 8)}px`\n\n      // Chevron\n      const chevron = document.createElement('span')\n      chevron.className = 'cmm-file-tree__chevron'\n      if (isFolder) {\n        chevron.innerHTML = CHEVRON_ICON\n        if (isExpanded) {\n          chevron.classList.add('cmm-file-tree__chevron--expanded')\n        }\n      } else {\n        chevron.classList.add('cmm-file-tree__chevron--hidden')\n      }\n      row.appendChild(chevron)\n\n      // Icon\n      if (this.showIcons) {\n        const icon = document.createElement('span')\n        icon.className = 'cmm-file-tree__icon'\n\n        if (node.icon !== undefined) {\n          icon.innerHTML = node.icon\n        } else if (isFolder) {\n          icon.classList.add('cmm-file-tree__icon--folder')\n          icon.innerHTML = isExpanded ? FOLDER_OPEN_ICON : FOLDER_ICON\n        } else {\n          icon.innerHTML = FILE_ICON\n        }\n        row.appendChild(icon)\n      }\n\n      // Label\n      const label = document.createElement('span')\n      label.className = 'cmm-file-tree__label'\n      label.textContent = node.name\n      row.appendChild(label)\n\n      // Click handler\n      row.addEventListener('click', (e: MouseEvent) => {\n        this.handleNodeClick(node, e)\n      })\n\n      // Drag-and-drop\n      if (this.config.draggable === true) {\n        row.draggable = true\n\n        row.addEventListener('dragstart', (e: DragEvent) => {\n          this.dragSourceNode = node\n          if (e.dataTransfer !== null) {\n            e.dataTransfer.effectAllowed = 'move'\n            e.dataTransfer.setData('text/plain', node.id)\n          }\n        })\n\n        row.addEventListener('dragover', (e: DragEvent) => {\n          if (\n            this.dragSourceNode !== null &&\n            this.dragSourceNode.id !== node.id &&\n            node.type === 'folder'\n          ) {\n            e.preventDefault()\n            if (e.dataTransfer !== null) {\n              e.dataTransfer.dropEffect = 'move'\n            }\n            row.classList.add('cmm-file-tree__row--drag-over')\n          }\n        })\n\n        row.addEventListener('dragleave', () => {\n          row.classList.remove('cmm-file-tree__row--drag-over')\n        })\n\n        row.addEventListener('drop', (e: DragEvent) => {\n          e.preventDefault()\n          row.classList.remove('cmm-file-tree__row--drag-over')\n\n          if (\n            this.dragSourceNode !== null &&\n            this.dragSourceNode.id !== node.id &&\n            node.type === 'folder'\n          ) {\n            if (this.config.onDrop !== undefined) {\n              this.config.onDrop(this.dragSourceNode, node)\n            }\n          }\n          this.dragSourceNode = null\n        })\n\n        row.addEventListener('dragend', () => {\n          this.dragSourceNode = null\n        })\n      }\n\n      item.appendChild(row)\n\n      // Track flat node for keyboard navigation\n      const flatIndex = this.flatNodes.length\n      this.flatNodes.push({ node, depth, rowEl: row })\n\n      // Focus tracking\n      if (flatIndex === this.focusedIndex) {\n        row.classList.add('cmm-file-tree__row--focused')\n      }\n\n      // Children\n      if (isFolder && node.children !== undefined && node.children.length > 0) {\n        const childList = document.createElement('ul')\n        childList.className = 'cmm-file-tree__children'\n        childList.setAttribute('role', 'group')\n\n        if (!isExpanded) {\n          childList.classList.add('cmm-file-tree__children--collapsed')\n        }\n\n        this.renderNodes(node.children, childList, depth + 1)\n        item.appendChild(childList)\n      }\n\n      parentEl.appendChild(item)\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Interaction handlers\n  // ---------------------------------------------------------------------------\n\n  /** Handle click on a tree node row */\n  private handleNodeClick(node: FileTreeNode, e: MouseEvent): void {\n    // Toggle expansion for folders\n    if (node.type === 'folder') {\n      if (this.expandedIds.has(node.id)) {\n        this.expandedIds.delete(node.id)\n      } else {\n        this.expandedIds.add(node.id)\n      }\n\n      if (this.config.onExpand !== undefined) {\n        this.config.onExpand(node)\n      }\n    }\n\n    // Handle selection\n    if (this.config.selectable !== false) {\n      const isMulti = this.config.multiSelect === true && (e.ctrlKey || e.metaKey)\n\n      if (isMulti) {\n        if (this.selectedIds.has(node.id)) {\n          this.selectedIds.delete(node.id)\n        } else {\n          this.selectedIds.add(node.id)\n        }\n      } else {\n        this.selectedIds.clear()\n        this.selectedIds.add(node.id)\n      }\n\n      if (this.config.onSelect !== undefined) {\n        this.config.onSelect(node)\n      }\n    }\n\n    // Update focused index\n    const idx = this.flatNodes.findIndex(fn => fn.node.id === node.id)\n    if (idx >= 0) {\n      this.focusedIndex = idx\n    }\n\n    this.render()\n  }\n\n  /** Handle keyboard navigation */\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (this.flatNodes.length === 0) {\n      return\n    }\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault()\n        this.focusedIndex = Math.min(this.focusedIndex + 1, this.flatNodes.length - 1)\n        this.render()\n        this.scrollFocusedIntoView()\n        break\n      }\n      case 'ArrowUp': {\n        e.preventDefault()\n        this.focusedIndex = Math.max(this.focusedIndex - 1, 0)\n        this.render()\n        this.scrollFocusedIntoView()\n        break\n      }\n      case 'ArrowRight': {\n        e.preventDefault()\n        const current = this.flatNodes[this.focusedIndex]\n        if (current?.node.type === 'folder') {\n          if (!this.expandedIds.has(current.node.id)) {\n            this.expandedIds.add(current.node.id)\n            if (this.config.onExpand !== undefined) {\n              this.config.onExpand(current.node)\n            }\n            this.render()\n          } else {\n            // Move to first child\n            if (this.focusedIndex < this.flatNodes.length - 1) {\n              this.focusedIndex += 1\n              this.render()\n            }\n          }\n        }\n        break\n      }\n      case 'ArrowLeft': {\n        e.preventDefault()\n        const currentNode = this.flatNodes[this.focusedIndex]\n        if (currentNode?.node.type === 'folder' && this.expandedIds.has(currentNode.node.id)) {\n          this.expandedIds.delete(currentNode.node.id)\n          if (this.config.onExpand !== undefined) {\n            this.config.onExpand(currentNode.node)\n          }\n          this.render()\n        } else if (currentNode !== undefined && currentNode.depth > 0) {\n          // Move to parent\n          for (let i = this.focusedIndex - 1; i >= 0; i--) {\n            const candidate = this.flatNodes[i]\n            if (candidate !== undefined && candidate.depth < currentNode.depth) {\n              this.focusedIndex = i\n              this.render()\n              break\n            }\n          }\n        }\n        break\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault()\n        const selected = this.flatNodes[this.focusedIndex]\n        if (selected !== undefined) {\n          this.handleNodeClick(selected.node, new MouseEvent('click'))\n        }\n        break\n      }\n    }\n  }\n\n  /** Scroll the focused row into view */\n  private scrollFocusedIntoView(): void {\n    if (this.wrapperEl === null || this.focusedIndex < 0) {\n      return\n    }\n\n    const flat = this.flatNodes[this.focusedIndex]\n    if (flat !== undefined) {\n      flat.rowEl.scrollIntoView({ block: 'nearest' })\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/visualization/file-tree/types.d.ts

@@ -0,0 +1,28 @@
+/**
+ * FileTree type definitions
+ * @countermeasure/web-components/visualization/file-tree
+ */
+export interface FileTreeNode {
+    id: string;
+    name: string;
+    type: 'file' | 'folder';
+    icon?: string;
+    children?: FileTreeNode[];
+    expanded?: boolean;
+    selected?: boolean;
+    data?: Record<string, string>;
+}
+export interface FileTreeConfig {
+    container: HTMLElement | string;
+    data: FileTreeNode[];
+    selectable?: boolean;
+    multiSelect?: boolean;
+    draggable?: boolean;
+    showIcons?: boolean;
+    indent?: number;
+    onSelect?: (node: FileTreeNode) => void;
+    onExpand?: (node: FileTreeNode) => void;
+    onDrop?: (source: FileTreeNode, target: FileTreeNode) => void;
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/visualization/file-tree/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/visualization/file-tree/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC9B;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,IAAI,EAAE,YAAY,EAAE,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/visualization/flow-diagram/index.d.ts

@@ -0,0 +1,49 @@
+import { FlowDiagramConfig, FlowEdge, FlowNode } from './types';
+export type { FlowDiagramConfig, FlowEdge, FlowNode } from './types';
+export declare class FlowDiagram {
+    readonly el: HTMLDivElement;
+    private readonly diagramId;
+    private readonly direction;
+    private readonly zoomable;
+    private readonly pannable;
+    private readonly onNodeClick;
+    private readonly onEdgeClick;
+    private svg;
+    private mainGroup;
+    private defsEl;
+    private nodes;
+    private edges;
+    private layoutNodes;
+    private selectedNodeId;
+    private viewBox;
+    private isPanning;
+    private panStart;
+    private panOrigin;
+    private readonly boundWheel;
+    private readonly boundMouseDown;
+    private readonly boundMouseMove;
+    private readonly boundMouseUp;
+    constructor(config: FlowDiagramConfig);
+    /** Replace nodes and edges and re-render */
+    update(nodes: FlowNode[], edges: FlowEdge[]): void;
+    /** Auto-fit the diagram content in the viewport */
+    zoomToFit(): void;
+    /** Tear down and remove from DOM */
+    destroy(): void;
+    private computeLayout;
+    private centerLayersTB;
+    private centerLayersLR;
+    private render;
+    private renderNode;
+    private createNodeShape;
+    private renderEdge;
+    private getNodePort;
+    private createArrowMarker;
+    private applyViewBox;
+    private handleWheel;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private buildClassName;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/visualization/flow-diagram/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/visualization/flow-diagram/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAGpE,YAAY,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AA4BpE,qBAAa,WAAW;IACtB,SAAgB,EAAE,EAAE,cAAc,CAAA;IAElC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAQ;IAClC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;IACvC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAwC;IACpE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAwC;IACpE,OAAO,CAAC,GAAG,CAAe;IAC1B,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAY;IACzB,OAAO,CAAC,KAAK,CAAY;IACzB,OAAO,CAAC,WAAW,CAAmB;IACtC,OAAO,CAAC,cAAc,CAAsB;IAG5C,OAAO,CAAC,OAAO,CAAgD;IAC/D,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,QAAQ,CAA2C;IAC3D,OAAO,CAAC,SAAS,CAA2C;IAG5D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAyB;IACpD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAyB;IACxD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAyB;IACxD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAY;gBAE7B,MAAM,EAAE,iBAAiB;IAmErC,4CAA4C;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI;IAQlD,mDAAmD;IACnD,SAAS,IAAI,IAAI;IAyBjB,oCAAoC;IACpC,OAAO,IAAI,IAAI;IAgBf,OAAO,CAAC,aAAa;IA2JrB,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,cAAc;IAiCtB,OAAO,CAAC,MAAM;IA6Bd,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,eAAe;IA+DvB,OAAO,CAAC,UAAU;IAgElB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,iBAAiB;IAwBzB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;CAOvB"}

package/dist/visualization/flow-diagram/index.js

@@ -0,0 +1,314 @@
+import { n as e, t } from "../../utils-Cn_W3h3f.js";
+//#region src/visualization/flow-diagram/index.ts
+var n = "http://www.w3.org/2000/svg", r = 140, i = 50, a = 100, o = 180, s = 60, c = 8, l = class {
+	el;
+	diagramId;
+	direction;
+	zoomable;
+	pannable;
+	onNodeClick;
+	onEdgeClick;
+	svg;
+	mainGroup;
+	defsEl;
+	nodes;
+	edges;
+	layoutNodes = [];
+	selectedNodeId = null;
+	viewBox;
+	isPanning = !1;
+	panStart = {
+		x: 0,
+		y: 0
+	};
+	panOrigin = {
+		x: 0,
+		y: 0
+	};
+	boundWheel;
+	boundMouseDown;
+	boundMouseMove;
+	boundMouseUp;
+	constructor(r) {
+		this.diagramId = e("cmm-flow-diagram"), this.direction = r.direction ?? "TB", this.zoomable = r.zoomable !== !1, this.pannable = r.pannable !== !1, this.onNodeClick = r.onNodeClick, this.onEdgeClick = r.onEdgeClick, this.nodes = [...r.nodes], this.edges = [...r.edges], this.viewBox = {
+			x: 0,
+			y: 0,
+			w: 800,
+			h: 600
+		}, this.el = document.createElement("div"), this.el.id = this.diagramId, this.el.className = this.buildClassName(r.className), this.svg = document.createElementNS(n, "svg"), this.svg.classList.add("cmm-flow-diagram__svg"), this.defsEl = document.createElementNS(n, "defs"), this.svg.appendChild(this.defsEl), this.mainGroup = document.createElementNS(n, "g"), this.svg.appendChild(this.mainGroup), this.el.appendChild(this.svg), this.createArrowMarker(), t(r.container).appendChild(this.el);
+		let i = this.el.getBoundingClientRect();
+		i.width > 0 && i.height > 0 && (this.viewBox.w = i.width, this.viewBox.h = i.height), this.boundWheel = (e) => {
+			this.handleWheel(e);
+		}, this.boundMouseDown = (e) => {
+			this.handleMouseDown(e);
+		}, this.boundMouseMove = (e) => {
+			this.handleMouseMove(e);
+		}, this.boundMouseUp = () => {
+			this.handleMouseUp();
+		}, this.zoomable && this.el.addEventListener("wheel", this.boundWheel, { passive: !1 }), this.pannable && (this.el.addEventListener("mousedown", this.boundMouseDown), document.addEventListener("mousemove", this.boundMouseMove), document.addEventListener("mouseup", this.boundMouseUp)), this.render(), this.zoomToFit();
+	}
+	update(e, t) {
+		this.nodes = [...e], this.edges = [...t], this.selectedNodeId = null, this.render(), this.zoomToFit();
+	}
+	zoomToFit() {
+		if (this.layoutNodes.length === 0) return;
+		let e = Infinity, t = Infinity, n = -Infinity, r = -Infinity;
+		for (let i of this.layoutNodes) i.x < e && (e = i.x), i.y < t && (t = i.y), i.x + i.width > n && (n = i.x + i.width), i.y + i.height > r && (r = i.y + i.height);
+		this.viewBox = {
+			x: e - 40,
+			y: t - 40,
+			w: n - e + 80,
+			h: r - t + 80
+		}, this.applyViewBox();
+	}
+	destroy() {
+		this.zoomable && this.el.removeEventListener("wheel", this.boundWheel), this.pannable && (this.el.removeEventListener("mousedown", this.boundMouseDown), document.removeEventListener("mousemove", this.boundMouseMove), document.removeEventListener("mouseup", this.boundMouseUp)), this.el.remove();
+	}
+	computeLayout() {
+		if (this.nodes.every((e) => e.x !== void 0 && e.y !== void 0)) {
+			this.layoutNodes = this.nodes.map((e) => ({
+				id: e.id,
+				label: e.label,
+				type: e.type ?? "process",
+				x: e.x ?? 0,
+				y: e.y ?? 0,
+				width: e.width ?? r,
+				height: e.height ?? i,
+				color: e.color,
+				icon: e.icon,
+				data: e.data,
+				layer: 0,
+				order: 0,
+				original: e
+			}));
+			return;
+		}
+		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
+		for (let n of this.nodes) e.set(n.id, []), t.set(n.id, 0);
+		for (let n of this.edges) {
+			let r = e.get(n.source);
+			r !== void 0 && r.push(n.target);
+			let i = t.get(n.target);
+			i !== void 0 && t.set(n.target, i + 1);
+		}
+		let n = /* @__PURE__ */ new Map(), c = [];
+		for (let [e, r] of t) r === 0 && (c.push(e), n.set(e, 0));
+		if (c.length === 0 && this.nodes.length > 0) {
+			let e = this.nodes[0];
+			e !== void 0 && (c.push(e.id), n.set(e.id, 0));
+		}
+		for (; c.length > 0;) {
+			let r = c.shift();
+			if (r === void 0) continue;
+			let i = n.get(r) ?? 0, a = e.get(r);
+			if (a !== void 0) for (let e of a) {
+				let r = n.get(e), a = i + 1;
+				(r === void 0 || a > r) && n.set(e, a);
+				let o = t.get(e);
+				o !== void 0 && (t.set(e, o - 1), o - 1 <= 0 && c.push(e));
+			}
+		}
+		for (let e of this.nodes) n.has(e.id) || n.set(e.id, 0);
+		let l = /* @__PURE__ */ new Map();
+		for (let e of this.nodes) {
+			let t = n.get(e.id) ?? 0, r = l.get(t);
+			r === void 0 ? l.set(t, [e]) : r.push(e);
+		}
+		let u = this.direction === "TB", d = u ? a : o;
+		this.layoutNodes = [];
+		for (let [e, t] of l) for (let n = 0; n < t.length; n++) {
+			let a = t[n];
+			if (a === void 0) continue;
+			let o = a.width ?? r, c = a.height ?? i, l, f;
+			u ? (l = n * (o + s), f = e * (c + d)) : (l = e * (o + d), f = n * (c + s)), this.layoutNodes.push({
+				id: a.id,
+				label: a.label,
+				type: a.type ?? "process",
+				x: l,
+				y: f,
+				width: o,
+				height: c,
+				color: a.color,
+				icon: a.icon,
+				data: a.data,
+				layer: e,
+				order: n,
+				original: a
+			});
+		}
+		u ? this.centerLayersTB() : this.centerLayersLR();
+	}
+	centerLayersTB() {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of this.layoutNodes) {
+			let n = e.get(t.layer), r = t.x + t.width;
+			n === void 0 ? e.set(t.layer, {
+				min: t.x,
+				max: r
+			}) : (t.x < n.min && (n.min = t.x), r > n.max && (n.max = r));
+		}
+		let t = 0;
+		for (let n of e.values()) {
+			let e = n.max - n.min;
+			e > t && (t = e);
+		}
+		for (let n of this.layoutNodes) {
+			let r = e.get(n.layer);
+			if (r !== void 0) {
+				let e = r.max - r.min, i = (t - e) / 2;
+				n.x += i - r.min;
+			}
+		}
+	}
+	centerLayersLR() {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of this.layoutNodes) {
+			let n = e.get(t.layer), r = t.y + t.height;
+			n === void 0 ? e.set(t.layer, {
+				min: t.y,
+				max: r
+			}) : (t.y < n.min && (n.min = t.y), r > n.max && (n.max = r));
+		}
+		let t = 0;
+		for (let n of e.values()) {
+			let e = n.max - n.min;
+			e > t && (t = e);
+		}
+		for (let n of this.layoutNodes) {
+			let r = e.get(n.layer);
+			if (r !== void 0) {
+				let e = r.max - r.min, i = (t - e) / 2;
+				n.y += i - r.min;
+			}
+		}
+	}
+	render() {
+		for (; this.mainGroup.firstChild !== null;) this.mainGroup.removeChild(this.mainGroup.firstChild);
+		this.computeLayout();
+		let e = /* @__PURE__ */ new Map();
+		for (let t of this.layoutNodes) e.set(t.id, t);
+		for (let t of this.edges) {
+			let n = e.get(t.source), r = e.get(t.target);
+			n === void 0 || r === void 0 || this.renderEdge(t, n, r);
+		}
+		for (let e of this.layoutNodes) this.renderNode(e);
+		this.applyViewBox();
+	}
+	renderNode(e) {
+		let t = document.createElementNS(n, "g");
+		t.classList.add("cmm-flow-diagram__node"), e.id === this.selectedNodeId && t.classList.add("cmm-flow-diagram__node--selected"), t.setAttribute("data-node-id", e.id);
+		let r = this.createNodeShape(e);
+		t.appendChild(r);
+		let i = document.createElementNS(n, "text");
+		i.classList.add("cmm-flow-diagram__label"), i.setAttribute("x", String(e.x + e.width / 2)), i.setAttribute("y", String(e.y + e.height / 2)), i.textContent = e.label, t.appendChild(i), t.addEventListener("click", (t) => {
+			t.stopPropagation(), this.selectedNodeId = e.id, this.render(), this.onNodeClick?.(e.original);
+		}), this.mainGroup.appendChild(t);
+	}
+	createNodeShape(e) {
+		let { x: t, y: r, width: i, height: a } = e, o;
+		switch (e.type) {
+			case "start":
+			case "end": {
+				let e = document.createElementNS(n, "ellipse");
+				e.setAttribute("cx", String(t + i / 2)), e.setAttribute("cy", String(r + a / 2)), e.setAttribute("rx", String(i / 2)), e.setAttribute("ry", String(a / 2)), o = e;
+				break;
+			}
+			case "decision": {
+				let e = t + i / 2, s = r + a / 2, c = document.createElementNS(n, "polygon");
+				c.setAttribute("points", `${String(e)},${String(r)} ${String(t + i)},${String(s)} ${String(e)},${String(r + a)} ${String(t)},${String(s)}`), o = c;
+				break;
+			}
+			case "io": {
+				let e = i * .15, s = document.createElementNS(n, "polygon");
+				s.setAttribute("points", `${String(t + e)},${String(r)} ${String(t + i)},${String(r)} ${String(t + i - e)},${String(r + a)} ${String(t)},${String(r + a)}`), o = s;
+				break;
+			}
+			default: {
+				let e = document.createElementNS(n, "rect");
+				e.setAttribute("x", String(t)), e.setAttribute("y", String(r)), e.setAttribute("width", String(i)), e.setAttribute("height", String(a)), e.setAttribute("rx", "8"), e.setAttribute("ry", "8"), o = e;
+				break;
+			}
+		}
+		return o.classList.add("cmm-flow-diagram__node-shape"), e.color !== void 0 && o.setAttribute("fill", e.color), o;
+	}
+	renderEdge(e, t, r) {
+		let i = document.createElementNS(n, "g");
+		i.classList.add("cmm-flow-diagram__edge");
+		let a = e.type ?? "solid";
+		a === "dashed" ? i.classList.add("cmm-flow-diagram__edge--dashed") : a === "dotted" && i.classList.add("cmm-flow-diagram__edge--dotted"), e.animated === !0 && i.classList.add("cmm-flow-diagram__edge--animated"), i.setAttribute("data-edge-id", e.id);
+		let o = this.getNodePort(t, "out"), s = this.getNodePort(r, "in"), c = document.createElementNS(n, "path");
+		c.classList.add("cmm-flow-diagram__edge-path");
+		let l = this.direction === "TB", u;
+		if (l) {
+			let e = Math.abs(s.y - o.y) / 2;
+			u = `M ${String(o.x)} ${String(o.y)} C ${String(o.x)} ${String(o.y + e)}, ${String(s.x)} ${String(s.y - e)}, ${String(s.x)} ${String(s.y)}`;
+		} else {
+			let e = Math.abs(s.x - o.x) / 2;
+			u = `M ${String(o.x)} ${String(o.y)} C ${String(o.x + e)} ${String(o.y)}, ${String(s.x - e)} ${String(s.y)}, ${String(s.x)} ${String(s.y)}`;
+		}
+		if (c.setAttribute("d", u), c.setAttribute("marker-end", `url(#${this.diagramId}-arrow)`), e.color !== void 0 && c.setAttribute("stroke", e.color), i.appendChild(c), e.label !== void 0) {
+			let t = (o.x + s.x) / 2, r = (o.y + s.y) / 2, a = document.createElementNS(n, "text");
+			a.classList.add("cmm-flow-diagram__edge-label"), a.setAttribute("x", String(t)), a.setAttribute("y", String(r - 6)), a.textContent = e.label, i.appendChild(a);
+		}
+		i.addEventListener("click", (t) => {
+			t.stopPropagation(), this.onEdgeClick?.(e);
+		}), this.mainGroup.appendChild(i);
+	}
+	getNodePort(e, t) {
+		let n = e.x + e.width / 2, r = e.y + e.height / 2;
+		return this.direction === "TB" ? t === "out" ? {
+			x: n,
+			y: e.y + e.height
+		} : {
+			x: n,
+			y: e.y
+		} : t === "out" ? {
+			x: e.x + e.width,
+			y: r
+		} : {
+			x: e.x,
+			y: r
+		};
+	}
+	createArrowMarker() {
+		let e = document.createElementNS(n, "marker");
+		e.setAttribute("id", `${this.diagramId}-arrow`), e.setAttribute("markerWidth", String(c)), e.setAttribute("markerHeight", String(c)), e.setAttribute("refX", String(c)), e.setAttribute("refY", String(c / 2)), e.setAttribute("orient", "auto-start-reverse"), e.setAttribute("markerUnits", "userSpaceOnUse");
+		let t = document.createElementNS(n, "polygon");
+		t.classList.add("cmm-flow-diagram__arrowhead"), t.setAttribute("points", `0 0, ${String(c)} ${String(c / 2)}, 0 ${String(c)}`), e.appendChild(t), this.defsEl.appendChild(e);
+	}
+	applyViewBox() {
+		this.svg.setAttribute("viewBox", `${String(this.viewBox.x)} ${String(this.viewBox.y)} ${String(this.viewBox.w)} ${String(this.viewBox.h)}`);
+	}
+	handleWheel(e) {
+		e.preventDefault();
+		let t = e.deltaY > 0 ? 1.1 : .9, n = this.el.getBoundingClientRect(), r = (e.clientX - n.left) / n.width * this.viewBox.w + this.viewBox.x, i = (e.clientY - n.top) / n.height * this.viewBox.h + this.viewBox.y, a = this.viewBox.w * t, o = this.viewBox.h * t;
+		this.viewBox.x = r - (r - this.viewBox.x) * (a / this.viewBox.w), this.viewBox.y = i - (i - this.viewBox.y) * (o / this.viewBox.h), this.viewBox.w = a, this.viewBox.h = o, this.applyViewBox();
+	}
+	handleMouseDown(e) {
+		if (e.button !== 0) return;
+		let t = e.target;
+		t !== null && t.closest(".cmm-flow-diagram__node, .cmm-flow-diagram__edge") !== null || (this.isPanning = !0, this.panStart = {
+			x: e.clientX,
+			y: e.clientY
+		}, this.panOrigin = {
+			x: this.viewBox.x,
+			y: this.viewBox.y
+		});
+	}
+	handleMouseMove(e) {
+		if (!this.isPanning) return;
+		let t = this.el.getBoundingClientRect(), n = this.viewBox.w / t.width, r = this.viewBox.h / t.height;
+		this.viewBox.x = this.panOrigin.x - (e.clientX - this.panStart.x) * n, this.viewBox.y = this.panOrigin.y - (e.clientY - this.panStart.y) * r, this.applyViewBox();
+	}
+	handleMouseUp() {
+		this.isPanning = !1;
+	}
+	buildClassName(e) {
+		let t = ["cmm-flow-diagram"];
+		return e !== void 0 && t.push(e), t.join(" ");
+	}
+};
+//#endregion
+export { l as FlowDiagram };
+
+//# sourceMappingURL=index.js.map