@lingkkkk/atlas-mindmap 0.1.0

package/dist/index.js

@@ -0,0 +1,2035 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// ../core/src/events.ts
+var EventEmitter = class {
+  constructor() {
+    __publicField(this, "listeners", /* @__PURE__ */ new Map());
+  }
+  on(event, listener) {
+    const listeners = this.listeners.get(event) ?? /* @__PURE__ */ new Set();
+    listeners.add(listener);
+    this.listeners.set(event, listeners);
+    return () => listeners.delete(listener);
+  }
+  emit(event, payload) {
+    const listeners = this.listeners.get(event);
+    if (!listeners) return;
+    for (const listener of listeners) listener(payload);
+  }
+  clear() {
+    this.listeners.clear();
+  }
+};
+
+// ../core/src/history.ts
+var History = class {
+  constructor() {
+    __publicField(this, "undoEntries", []);
+    __publicField(this, "redoEntries", []);
+  }
+  get canUndo() {
+    return this.undoEntries.length > 0;
+  }
+  get canRedo() {
+    return this.redoEntries.length > 0;
+  }
+  execute(entry) {
+    entry.redo();
+    this.undoEntries.push(entry);
+    this.redoEntries.length = 0;
+  }
+  undo() {
+    const entry = this.undoEntries.pop();
+    if (!entry) return void 0;
+    entry.undo();
+    this.redoEntries.push(entry);
+    return entry;
+  }
+  redo() {
+    const entry = this.redoEntries.pop();
+    if (!entry) return void 0;
+    entry.redo();
+    this.undoEntries.push(entry);
+    return entry;
+  }
+  clear() {
+    this.undoEntries.length = 0;
+    this.redoEntries.length = 0;
+  }
+};
+
+// ../core/src/topic-store.ts
+var cloneValue = (value) => {
+  if (value === void 0 || value === null) return value;
+  if (typeof structuredClone === "function") return structuredClone(value);
+  return JSON.parse(JSON.stringify(value));
+};
+var normalizeTopic = (input, parentId, childIds) => ({
+  id: input.id,
+  text: input.text,
+  parentId,
+  childIds,
+  expanded: input.expanded ?? true,
+  kind: input.kind ?? (parentId === null ? "central" : "subtopic"),
+  structure: input.structure,
+  style: cloneValue(input.style),
+  markers: cloneValue(input.markers),
+  labels: cloneValue(input.labels),
+  note: input.note,
+  hyperlink: input.hyperlink,
+  image: input.image,
+  attachment: input.attachment,
+  equation: input.equation,
+  task: cloneValue(input.task),
+  extensions: cloneValue(input.extensions)
+});
+var cloneTopic = (topic) => ({
+  ...topic,
+  childIds: [...topic.childIds],
+  style: cloneValue(topic.style),
+  markers: cloneValue(topic.markers),
+  labels: cloneValue(topic.labels),
+  task: cloneValue(topic.task),
+  extensions: cloneValue(topic.extensions)
+});
+var TopicStore = class _TopicStore {
+  constructor(rootId) {
+    __publicField(this, "rootId");
+    __publicField(this, "topics", /* @__PURE__ */ new Map());
+    this.rootId = rootId;
+  }
+  static fromTree(root) {
+    if (!root?.id) throw new Error("Root topic requires a stable id");
+    const store = new _TopicStore(root.id);
+    const stack = [
+      { input: root, parentId: null }
+    ];
+    while (stack.length > 0) {
+      const current = stack.pop();
+      if (!current) break;
+      const { input, parentId } = current;
+      if (!input.id) throw new Error("Every topic requires a stable id");
+      if (store.topics.has(input.id)) throw new Error(`Duplicate topic id: ${input.id}`);
+      const children = input.children ?? [];
+      store.topics.set(
+        input.id,
+        normalizeTopic(
+          input,
+          parentId,
+          children.map((child) => child.id)
+        )
+      );
+      for (let index = children.length - 1; index >= 0; index -= 1) {
+        const child = children[index];
+        if (child) stack.push({ input: child, parentId: input.id });
+      }
+    }
+    return store;
+  }
+  get size() {
+    return this.topics.size;
+  }
+  has(id) {
+    return this.topics.has(id);
+  }
+  get(id) {
+    const topic = this.topics.get(id);
+    if (!topic) throw new Error(`Unknown topic: ${id}`);
+    return topic;
+  }
+  tryGet(id) {
+    return this.topics.get(id);
+  }
+  values() {
+    return this.topics.values();
+  }
+  clone(id) {
+    return cloneTopic(this.get(id));
+  }
+  add(parentId, input, index) {
+    const parent = this.topics.get(parentId);
+    if (!parent) throw new Error(`Parent topic does not exist: ${parentId}`);
+    if (this.topics.has(input.id)) throw new Error(`Duplicate topic id: ${input.id}`);
+    if ((input.children?.length ?? 0) > 0) {
+      throw new Error("Use restoreSubtree when adding a nested topic tree");
+    }
+    const topic = normalizeTopic(input, parentId, []);
+    const targetIndex = Math.max(0, Math.min(index ?? parent.childIds.length, parent.childIds.length));
+    parent.childIds.splice(targetIndex, 0, topic.id);
+    this.topics.set(topic.id, topic);
+    return topic;
+  }
+  update(id, patch) {
+    const topic = this.get(id);
+    if (patch.text !== void 0 && patch.text.trim().length === 0) {
+      throw new Error("Topic text cannot be empty");
+    }
+    Object.assign(topic, cloneValue(patch));
+    return topic;
+  }
+  move(id, parentId, index) {
+    const topic = this.get(id);
+    const targetParent = this.topics.get(parentId);
+    if (!targetParent) throw new Error(`Parent topic does not exist: ${parentId}`);
+    if (id === this.rootId) throw new Error("Root topic cannot be moved");
+    if (id === parentId || this.isAncestor(id, parentId)) {
+      throw new Error("Move would create a cycle");
+    }
+    const oldParent = topic.parentId ? this.get(topic.parentId) : void 0;
+    if (oldParent) {
+      const oldIndex = oldParent.childIds.indexOf(id);
+      if (oldIndex >= 0) oldParent.childIds.splice(oldIndex, 1);
+    }
+    const targetIndex = Math.max(
+      0,
+      Math.min(index ?? targetParent.childIds.length, targetParent.childIds.length)
+    );
+    targetParent.childIds.splice(targetIndex, 0, id);
+    topic.parentId = parentId;
+    return topic;
+  }
+  removeSubtree(id) {
+    if (id === this.rootId) throw new Error("Root topic cannot be removed");
+    const topic = this.get(id);
+    const ids = [];
+    const stack = [id];
+    while (stack.length > 0) {
+      const currentId = stack.pop();
+      if (!currentId) break;
+      ids.push(currentId);
+      const current = this.get(currentId);
+      for (let index = current.childIds.length - 1; index >= 0; index -= 1) {
+        const childId = current.childIds[index];
+        if (childId) stack.push(childId);
+      }
+    }
+    const removed = ids.map((topicId) => cloneTopic(this.get(topicId)));
+    if (topic.parentId) {
+      const parent = this.get(topic.parentId);
+      const index = parent.childIds.indexOf(id);
+      if (index >= 0) parent.childIds.splice(index, 1);
+    }
+    for (const topicId of ids) this.topics.delete(topicId);
+    return removed;
+  }
+  restoreSubtree(topics, parentId, index) {
+    const parent = this.get(parentId);
+    if (topics.length === 0) throw new Error("Cannot restore an empty subtree");
+    for (const topic of topics) {
+      if (this.topics.has(topic.id)) throw new Error(`Duplicate topic id: ${topic.id}`);
+    }
+    const root = topics.find((topic) => topic.parentId === parentId);
+    if (!root) throw new Error("Subtree snapshot does not contain a restorable root");
+    for (const topic of topics) this.topics.set(topic.id, cloneTopic(topic));
+    const targetIndex = Math.max(0, Math.min(index, parent.childIds.length));
+    parent.childIds.splice(targetIndex, 0, root.id);
+  }
+  setExpanded(id, expanded) {
+    const topic = this.get(id);
+    topic.expanded = expanded;
+    return topic.expanded;
+  }
+  toggle(id) {
+    const topic = this.get(id);
+    topic.expanded = !topic.expanded;
+    return topic.expanded;
+  }
+  isAncestor(ancestorId, possibleDescendantId) {
+    let cursor = this.tryGet(possibleDescendantId);
+    while (cursor?.parentId) {
+      if (cursor.parentId === ancestorId) return true;
+      cursor = this.tryGet(cursor.parentId);
+    }
+    return false;
+  }
+  depthOf(id) {
+    let depth = 0;
+    let cursor = this.get(id);
+    while (cursor.parentId) {
+      depth += 1;
+      cursor = this.get(cursor.parentId);
+    }
+    return depth;
+  }
+  visibleIds() {
+    const result = [];
+    const stack = [this.rootId];
+    while (stack.length > 0) {
+      const id = stack.pop();
+      if (!id) break;
+      result.push(id);
+      const topic = this.get(id);
+      if (!topic.expanded) continue;
+      for (let index = topic.childIds.length - 1; index >= 0; index -= 1) {
+        const childId = topic.childIds[index];
+        if (childId) stack.push(childId);
+      }
+    }
+    return result;
+  }
+  toTree() {
+    const result = /* @__PURE__ */ new Map();
+    for (const topic of this.topics.values()) {
+      result.set(topic.id, {
+        id: topic.id,
+        text: topic.text,
+        expanded: topic.expanded,
+        kind: topic.kind,
+        structure: topic.structure,
+        style: cloneValue(topic.style),
+        markers: cloneValue(topic.markers),
+        labels: cloneValue(topic.labels),
+        note: topic.note,
+        hyperlink: topic.hyperlink,
+        image: topic.image,
+        attachment: topic.attachment,
+        equation: topic.equation,
+        task: cloneValue(topic.task),
+        extensions: cloneValue(topic.extensions),
+        children: []
+      });
+    }
+    for (const topic of this.topics.values()) {
+      const output = result.get(topic.id);
+      if (!output) continue;
+      output.children = topic.childIds.map((childId) => result.get(childId)).filter((child) => child !== void 0);
+    }
+    const root = result.get(this.rootId);
+    if (!root) throw new Error("Store has no root topic");
+    return root;
+  }
+};
+
+// ../core/src/engine.ts
+var cloneValue2 = (value) => {
+  if (value === void 0 || value === null) return value;
+  if (typeof structuredClone === "function") return structuredClone(value);
+  return JSON.parse(JSON.stringify(value));
+};
+var MindMapEngine = class _MindMapEngine {
+  constructor(root) {
+    __publicField(this, "store");
+    __publicField(this, "events", new EventEmitter());
+    __publicField(this, "history", new History());
+    __publicField(this, "idSequence", 1);
+    this.store = TopicStore.fromTree(root);
+  }
+  static fromJSON(json) {
+    const document2 = _MindMapEngine.parseDocument(json);
+    return new _MindMapEngine(document2.root);
+  }
+  get canUndo() {
+    return this.history.canUndo;
+  }
+  get canRedo() {
+    return this.history.canRedo;
+  }
+  on(event, listener) {
+    return this.events.on(event, listener);
+  }
+  addChild(parentId, input) {
+    const topic = this.createTopicInput(input);
+    const parentWasExpanded = this.store.get(parentId).expanded;
+    const entry = {
+      label: "Add topic",
+      redo: () => {
+        this.store.add(parentId, topic);
+        this.store.setExpanded(parentId, true);
+      },
+      undo: () => {
+        this.store.removeSubtree(topic.id);
+        this.store.setExpanded(parentId, parentWasExpanded);
+      }
+    };
+    this.commit(entry, { type: "add", topicId: topic.id });
+    return this.store.get(topic.id);
+  }
+  addSibling(topicId, input) {
+    const reference = this.store.get(topicId);
+    if (!reference.parentId) throw new Error("Root topic cannot have a sibling");
+    const parent = this.store.get(reference.parentId);
+    const topic = this.createTopicInput(input);
+    const index = parent.childIds.indexOf(topicId) + 1;
+    const entry = {
+      label: "Add sibling",
+      redo: () => this.store.add(parent.id, topic, index),
+      undo: () => {
+        this.store.removeSubtree(topic.id);
+      }
+    };
+    this.commit(entry, { type: "add", topicId: topic.id });
+    return this.store.get(topic.id);
+  }
+  updateTopic(topicId, patch) {
+    const beforeTopic = this.store.clone(topicId);
+    const before = {};
+    for (const key of Object.keys(patch)) {
+      before[key] = cloneValue2(beforeTopic[key]);
+    }
+    const next = cloneValue2(patch);
+    const entry = {
+      label: "Update topic",
+      redo: () => {
+        this.store.update(topicId, next);
+      },
+      undo: () => {
+        this.store.update(topicId, before);
+      }
+    };
+    const layoutAffecting = patch.text !== void 0 || patch.expanded !== void 0;
+    this.commit(entry, { type: "update", topicId, layoutAffecting });
+    return this.store.get(topicId);
+  }
+  deleteTopic(topicId) {
+    const topic = this.store.get(topicId);
+    if (!topic.parentId) throw new Error("Root topic cannot be removed");
+    const parentId = topic.parentId;
+    const index = this.store.get(parentId).childIds.indexOf(topicId);
+    let snapshot = [];
+    const entry = {
+      label: "Delete topic",
+      redo: () => {
+        snapshot = this.store.removeSubtree(topicId);
+      },
+      undo: () => this.store.restoreSubtree(snapshot, parentId, index)
+    };
+    this.commit(entry, { type: "delete", topicId });
+  }
+  moveTopic(topicId, parentId, index) {
+    const topic = this.store.get(topicId);
+    if (!topic.parentId) throw new Error("Root topic cannot be moved");
+    const oldParentId = topic.parentId;
+    const oldIndex = this.store.get(oldParentId).childIds.indexOf(topicId);
+    const entry = {
+      label: "Move topic",
+      redo: () => {
+        this.store.move(topicId, parentId, index);
+      },
+      undo: () => {
+        this.store.move(topicId, oldParentId, oldIndex);
+      }
+    };
+    this.commit(entry, { type: "move", topicId });
+    return this.store.get(topicId);
+  }
+  toggleTopic(topicId) {
+    const before = this.store.get(topicId).expanded;
+    const after = !before;
+    const entry = {
+      label: after ? "Expand topic" : "Collapse topic",
+      redo: () => {
+        this.store.setExpanded(topicId, after);
+      },
+      undo: () => {
+        this.store.setExpanded(topicId, before);
+      }
+    };
+    this.commit(entry, { type: "toggle", topicId });
+    return after;
+  }
+  setExpanded(topicId, expanded) {
+    if (this.store.get(topicId).expanded === expanded) return;
+    this.toggleTopic(topicId);
+  }
+  revealTopic(topicId) {
+    let cursor = this.store.get(topicId);
+    let changed = false;
+    while (cursor.parentId) {
+      const parent = this.store.get(cursor.parentId);
+      if (!parent.expanded) {
+        parent.expanded = true;
+        changed = true;
+      }
+      cursor = parent;
+    }
+    if (changed) this.events.emit("document:change", { type: "reveal", topicId });
+  }
+  search(query, limit = 100) {
+    const normalized = query.trim().toLocaleLowerCase();
+    if (!normalized) return [];
+    const result = [];
+    for (const topic of this.store.values()) {
+      const haystack = [topic.text, topic.note, ...topic.labels ?? []].filter(Boolean).join("\n").toLocaleLowerCase();
+      if (!haystack.includes(normalized)) continue;
+      result.push({ id: topic.id, text: topic.text, path: this.topicPath(topic.id) });
+      if (result.length >= limit) break;
+    }
+    return result;
+  }
+  undo() {
+    const entry = this.history.undo();
+    if (!entry) return false;
+    this.events.emit("document:change", { type: "undo", label: entry.label });
+    return true;
+  }
+  redo() {
+    const entry = this.history.redo();
+    if (!entry) return false;
+    this.events.emit("document:change", { type: "redo", label: entry.label });
+    return true;
+  }
+  exportJSON() {
+    const document2 = { version: 1, root: this.store.toTree() };
+    return JSON.stringify(document2);
+  }
+  importJSON(json) {
+    const document2 = _MindMapEngine.parseDocument(json);
+    const nextStore = TopicStore.fromTree(document2.root);
+    this.store = nextStore;
+    this.history.clear();
+    this.events.emit("document:change", { type: "import" });
+  }
+  static parseDocument(json) {
+    let value;
+    try {
+      value = JSON.parse(json);
+    } catch (cause) {
+      throw new Error(`Invalid mind-map document JSON: ${String(cause)}`);
+    }
+    if (typeof value !== "object" || value === null || !("version" in value) || value.version !== 1 || !("root" in value) || typeof value.root !== "object" || value.root === null || !("id" in value.root) || !("text" in value.root)) {
+      throw new Error("Invalid mind-map document structure");
+    }
+    return value;
+  }
+  createTopicInput(input) {
+    let id = input.id;
+    while (!id || this.store.has(id)) {
+      id = `topic-user-${this.idSequence}`;
+      this.idSequence += 1;
+    }
+    return { ...cloneValue2(input), id, children: [] };
+  }
+  topicPath(topicId) {
+    const path = [];
+    let cursor = this.store.get(topicId);
+    while (cursor) {
+      path.push(cursor.text);
+      cursor = cursor.parentId ? this.store.tryGet(cursor.parentId) : void 0;
+    }
+    path.reverse();
+    return path;
+  }
+  commit(entry, change) {
+    this.history.execute(entry);
+    this.events.emit("document:change", change);
+  }
+};
+
+// ../core/src/plugin-manager.ts
+var PluginManager = class {
+  constructor(host, onError) {
+    __publicField(this, "host", host);
+    __publicField(this, "onError", onError);
+    __publicField(this, "plugins", /* @__PURE__ */ new Map());
+  }
+  async use(plugin) {
+    if (this.plugins.has(plugin.name)) throw new Error(`Plugin already installed: ${plugin.name}`);
+    try {
+      await plugin.install(this.host);
+      this.plugins.set(plugin.name, plugin);
+    } catch (cause) {
+      this.onError(plugin, cause);
+    }
+  }
+  async destroy() {
+    for (const plugin of [...this.plugins.values()].reverse()) {
+      try {
+        await plugin.destroy?.();
+      } catch (cause) {
+        this.onError(plugin, cause);
+      }
+    }
+    this.plugins.clear();
+  }
+};
+
+// ../layouts/src/mindmap-layout.ts
+var DEFAULTS = {
+  columnGap: 218,
+  rootGap: 72,
+  rowGap: 18,
+  nodeHeight: 36,
+  minNodeWidth: 112,
+  maxNodeWidth: 190
+};
+var MindMapLayout = class {
+  constructor(options = {}) {
+    __publicField(this, "options");
+    this.options = { ...DEFAULTS, ...options };
+  }
+  layout(store) {
+    const startedAt = performance.now();
+    const ids = store.visibleIds();
+    const count = ids.length;
+    const indexById = /* @__PURE__ */ new Map();
+    for (let index = 0; index < count; index += 1) {
+      const id = ids[index];
+      if (id) indexById.set(id, index);
+    }
+    const x = new Float32Array(count);
+    const y = new Float32Array(count);
+    const width = new Float32Array(count);
+    const height = new Float32Array(count);
+    const depth = new Uint16Array(count);
+    const branchIndex = new Uint16Array(count);
+    const parentIndices = new Int32Array(count);
+    const subtreeUnits = new Float32Array(count);
+    parentIndices.fill(-1);
+    let maxDepth = 0;
+    let nextBranchIndex = 0;
+    for (let index = 0; index < count; index += 1) {
+      const id = ids[index];
+      if (!id) continue;
+      const topic = store.get(id);
+      const parentIndex = topic.parentId ? indexById.get(topic.parentId) ?? -1 : -1;
+      parentIndices[index] = parentIndex;
+      const topicDepth = parentIndex >= 0 ? (depth[parentIndex] ?? 0) + 1 : 0;
+      depth[index] = topicDepth;
+      if (topicDepth === 1) {
+        branchIndex[index] = nextBranchIndex;
+        nextBranchIndex += 1;
+      } else if (parentIndex >= 0) {
+        branchIndex[index] = branchIndex[parentIndex] ?? 0;
+      }
+      maxDepth = Math.max(maxDepth, topicDepth);
+      const depthMinimum = topicDepth === 0 ? 220 : topicDepth === 1 ? Math.max(148, this.options.minNodeWidth) : this.options.minNodeWidth;
+      const depthMaximum = topicDepth === 0 ? 260 : this.options.maxNodeWidth;
+      const estimated = depthMinimum + Math.max(0, topic.text.length - 18) * 4.2;
+      width[index] = Math.min(depthMaximum, estimated);
+      height[index] = this.options.nodeHeight;
+    }
+    for (let index = count - 1; index >= 0; index -= 1) {
+      const id = ids[index];
+      if (!id) continue;
+      const topic = store.get(id);
+      let units = 0;
+      if (topic.expanded) {
+        for (const childId of topic.childIds) {
+          const childIndex = indexById.get(childId);
+          if (childIndex !== void 0) units += subtreeUnits[childIndex] ?? 0;
+        }
+      }
+      subtreeUnits[index] = Math.max(1, units);
+    }
+    const rowPitch = this.options.nodeHeight + this.options.rowGap;
+    const rootWidth = width[0] ?? 0;
+    const stack = [{ index: 0, start: 0 }];
+    while (stack.length > 0) {
+      const frame = stack.pop();
+      if (!frame) break;
+      const { index, start } = frame;
+      const id = ids[index];
+      if (!id) continue;
+      const topic = store.get(id);
+      const nodeDepth = depth[index] ?? 0;
+      x[index] = nodeDepth === 0 ? 0 : rootWidth + this.options.rootGap + (nodeDepth - 1) * this.options.columnGap;
+      y[index] = (start + (subtreeUnits[index] ?? 1) / 2) * rowPitch - this.options.nodeHeight / 2;
+      let childStart = start;
+      const children = [];
+      if (topic.expanded) {
+        for (const childId of topic.childIds) {
+          const childIndex = indexById.get(childId);
+          if (childIndex === void 0) continue;
+          children.push({ index: childIndex, start: childStart });
+          childStart += subtreeUnits[childIndex] ?? 1;
+        }
+      }
+      for (let childIndex = children.length - 1; childIndex >= 0; childIndex -= 1) {
+        const child = children[childIndex];
+        if (child) stack.push(child);
+      }
+    }
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (let index = 0; index < count; index += 1) {
+      minX = Math.min(minX, x[index] ?? 0);
+      minY = Math.min(minY, y[index] ?? 0);
+      maxX = Math.max(maxX, (x[index] ?? 0) + (width[index] ?? 0));
+      maxY = Math.max(maxY, (y[index] ?? 0) + (height[index] ?? 0));
+    }
+    const bounds = count === 0 ? { x: 0, y: 0, width: 0, height: 0 } : { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    return {
+      ids,
+      indexById,
+      parentIndices,
+      x,
+      y,
+      width,
+      height,
+      depth,
+      branchIndex,
+      bounds,
+      maxDepth,
+      durationMs: performance.now() - startedAt
+    };
+  }
+};
+
+// ../renderer-canvas/src/camera.ts
+var Camera = class {
+  constructor(options = {}) {
+    __publicField(this, "x");
+    __publicField(this, "y");
+    __publicField(this, "scale");
+    __publicField(this, "minScale");
+    __publicField(this, "maxScale");
+    this.x = options.x ?? 0;
+    this.y = options.y ?? 0;
+    this.scale = options.scale ?? 1;
+    this.minScale = options.minScale ?? 0.02;
+    this.maxScale = options.maxScale ?? 5;
+    this.scale = this.clampScale(this.scale);
+  }
+  get state() {
+    return { x: this.x, y: this.y, scale: this.scale };
+  }
+  screenToWorld(point) {
+    return { x: (point.x - this.x) / this.scale, y: (point.y - this.y) / this.scale };
+  }
+  worldToScreen(point) {
+    return { x: point.x * this.scale + this.x, y: point.y * this.scale + this.y };
+  }
+  panBy(dx, dy) {
+    this.x += dx;
+    this.y += dy;
+  }
+  zoomBy(factor, anchor) {
+    this.zoomTo(this.scale * factor, anchor);
+  }
+  zoomTo(scale, anchor) {
+    const worldAnchor = this.screenToWorld(anchor);
+    this.scale = this.clampScale(scale);
+    this.x = anchor.x - worldAnchor.x * this.scale;
+    this.y = anchor.y - worldAnchor.y * this.scale;
+  }
+  fit(bounds, viewport, padding = 48) {
+    if (bounds.width <= 0 || bounds.height <= 0) return;
+    const availableWidth = Math.max(1, viewport.width - padding * 2);
+    const availableHeight = Math.max(1, viewport.height - padding * 2);
+    this.scale = this.clampScale(
+      Math.min(availableWidth / bounds.width, availableHeight / bounds.height)
+    );
+    this.x = (viewport.width - bounds.width * this.scale) / 2 - bounds.x * this.scale;
+    this.y = (viewport.height - bounds.height * this.scale) / 2 - bounds.y * this.scale;
+  }
+  center(bounds, viewport) {
+    this.x = viewport.width / 2 - (bounds.x + bounds.width / 2) * this.scale;
+    this.y = viewport.height / 2 - (bounds.y + bounds.height / 2) * this.scale;
+  }
+  reset() {
+    this.x = 0;
+    this.y = 0;
+    this.scale = 1;
+  }
+  viewport(width, height) {
+    const topLeft = this.screenToWorld({ x: 0, y: 0 });
+    return {
+      x: topLeft.x,
+      y: topLeft.y,
+      width: width / this.scale,
+      height: height / this.scale
+    };
+  }
+  clampScale(scale) {
+    return Math.min(this.maxScale, Math.max(this.minScale, scale));
+  }
+};
+
+// ../renderer-canvas/src/metrics.ts
+var percentile = (sorted, value) => {
+  if (sorted.length === 0) return 0;
+  const index = Math.max(0, Math.ceil(value * sorted.length) - 1);
+  return sorted[Math.min(index, sorted.length - 1)] ?? 0;
+};
+var RollingMetrics = class {
+  constructor(capacity = 120) {
+    __publicField(this, "capacity", capacity);
+    __publicField(this, "samples", []);
+  }
+  record(sample) {
+    this.samples.push(sample);
+    if (this.samples.length > this.capacity) this.samples.shift();
+  }
+  snapshot() {
+    const last = this.samples[this.samples.length - 1];
+    const frameTimes = this.samples.map((sample) => sample.frameMs).sort((a, b) => a - b);
+    const first = this.samples[0];
+    const elapsed = first && last ? last.timestamp - first.timestamp : 0;
+    const fps = elapsed > 0 ? (this.samples.length - 1) * 1e3 / elapsed : 0;
+    return {
+      fps,
+      frameP50: percentile(frameTimes, 0.5),
+      frameP95: percentile(frameTimes, 0.95),
+      frameP99: percentile(frameTimes, 0.99),
+      cullMs: last?.cullMs ?? 0,
+      drawMs: last?.drawMs ?? 0,
+      rendered: last?.rendered ?? 0,
+      sampleCount: this.samples.length
+    };
+  }
+};
+
+// ../renderer-canvas/src/spatial-index.ts
+var cellKey = (x, y) => `${x}:${y}`;
+var SpatialIndex = class {
+  constructor(cellSize = 768) {
+    __publicField(this, "cellSize", cellSize);
+    __publicField(this, "buckets", /* @__PURE__ */ new Map());
+    __publicField(this, "layout");
+    __publicField(this, "marks", new Uint32Array(0));
+    __publicField(this, "generation", 0);
+  }
+  build(layout) {
+    this.layout = layout;
+    this.buckets.clear();
+    this.marks = new Uint32Array(layout.ids.length);
+    this.generation = 0;
+    for (let index = 0; index < layout.ids.length; index += 1) {
+      const minCellX = Math.floor((layout.x[index] ?? 0) / this.cellSize);
+      const minCellY = Math.floor((layout.y[index] ?? 0) / this.cellSize);
+      const maxCellX = Math.floor(
+        ((layout.x[index] ?? 0) + (layout.width[index] ?? 0)) / this.cellSize
+      );
+      const maxCellY = Math.floor(
+        ((layout.y[index] ?? 0) + (layout.height[index] ?? 0)) / this.cellSize
+      );
+      for (let cellY = minCellY; cellY <= maxCellY; cellY += 1) {
+        for (let cellX = minCellX; cellX <= maxCellX; cellX += 1) {
+          const key = cellKey(cellX, cellY);
+          const bucket = this.buckets.get(key) ?? [];
+          bucket.push(index);
+          this.buckets.set(key, bucket);
+        }
+      }
+    }
+  }
+  query(rect, output = []) {
+    output.length = 0;
+    const layout = this.layout;
+    if (!layout) return output;
+    this.generation += 1;
+    if (this.generation >= 4294967295) {
+      this.marks.fill(0);
+      this.generation = 1;
+    }
+    const minCellX = Math.floor(rect.x / this.cellSize);
+    const minCellY = Math.floor(rect.y / this.cellSize);
+    const maxCellX = Math.floor((rect.x + rect.width) / this.cellSize);
+    const maxCellY = Math.floor((rect.y + rect.height) / this.cellSize);
+    const cellCount = (maxCellX - minCellX + 1) * (maxCellY - minCellY + 1);
+    if (cellCount > layout.ids.length * 4) {
+      const bounds = layout.bounds;
+      const containsLayout = rect.x <= bounds.x && rect.y <= bounds.y && rect.x + rect.width >= bounds.x + bounds.width && rect.y + rect.height >= bounds.y + bounds.height;
+      for (let index = 0; index < layout.ids.length; index += 1) {
+        if (containsLayout || this.intersects(index, rect)) output.push(index);
+      }
+      return output;
+    }
+    for (let cellY = minCellY; cellY <= maxCellY; cellY += 1) {
+      for (let cellX = minCellX; cellX <= maxCellX; cellX += 1) {
+        const bucket = this.buckets.get(cellKey(cellX, cellY));
+        if (!bucket) continue;
+        for (const index of bucket) {
+          if (this.marks[index] === this.generation) continue;
+          this.marks[index] = this.generation;
+          if (this.intersects(index, rect)) output.push(index);
+        }
+      }
+    }
+    return output;
+  }
+  intersects(index, rect) {
+    const layout = this.layout;
+    if (!layout) return false;
+    const x = layout.x[index] ?? 0;
+    const y = layout.y[index] ?? 0;
+    const width = layout.width[index] ?? 0;
+    const height = layout.height[index] ?? 0;
+    return x <= rect.x + rect.width && x + width >= rect.x && y <= rect.y + rect.height && y + height >= rect.y;
+  }
+};
+
+// ../renderer-canvas/src/renderer.ts
+var resolveLod = (scale) => {
+  if (scale < 0.07) return "dots";
+  if (scale < 0.25) return "blocks";
+  if (scale < 0.55) return "labels";
+  return "full";
+};
+var themePalettes = {
+  dark: {
+    accents: ["#8177ff", "#38c9af", "#55a9ff", "#efb85f", "#ed7da7", "#8dcc70", "#b17dea", "#51bdd2"],
+    edge: "rgba(121, 137, 177, 0.46)",
+    root: "rgba(52, 45, 104, 0.98)",
+    rootStroke: "#a79eff",
+    branchTopic: "rgba(24, 31, 53, 0.98)",
+    topic: "rgba(17, 23, 40, 0.96)",
+    deepTopic: "rgba(13, 18, 31, 0.88)",
+    topicSelected: "rgba(66, 61, 118, 0.98)",
+    text: "#dce4f5",
+    textSelected: "#ffffff",
+    selection: "#a99cff",
+    hover: "#68c7ff",
+    dropTarget: "#5ff2c8",
+    collapseBadge: "#f6bb5f",
+    badgeText: "#10172b",
+    drag: "rgba(73, 89, 150, 0.78)",
+    dragStroke: "#a99cff"
+  },
+  light: {
+    accents: ["#695ce0", "#168d7d", "#347fc8", "#b87922", "#c45177", "#5c923f", "#8856bd", "#287f94"],
+    edge: "rgba(72, 85, 116, 0.38)",
+    root: "rgba(239, 237, 255, 0.99)",
+    rootStroke: "#6758d9",
+    branchTopic: "rgba(255, 255, 255, 0.99)",
+    topic: "rgba(252, 253, 255, 0.98)",
+    deepTopic: "rgba(246, 248, 252, 0.92)",
+    topicSelected: "rgba(227, 225, 255, 0.99)",
+    text: "#293248",
+    textSelected: "#171d35",
+    selection: "#6758d9",
+    hover: "#2688c9",
+    dropTarget: "#168b74",
+    collapseBadge: "#d79a34",
+    badgeText: "#ffffff",
+    drag: "rgba(219, 224, 255, 0.9)",
+    dragStroke: "#6758d9"
+  }
+};
+var CanvasRenderer = class {
+  constructor(options) {
+    __publicField(this, "camera");
+    __publicField(this, "metrics", new RollingMetrics());
+    __publicField(this, "canvas");
+    __publicField(this, "context");
+    __publicField(this, "requestFrame");
+    __publicField(this, "cancelFrame");
+    __publicField(this, "spatialIndex", new SpatialIndex());
+    __publicField(this, "candidates", []);
+    __publicField(this, "store");
+    __publicField(this, "layout");
+    __publicField(this, "width");
+    __publicField(this, "height");
+    __publicField(this, "dpr", 1);
+    __publicField(this, "frameId", null);
+    __publicField(this, "destroyed", false);
+    __publicField(this, "continuous");
+    __publicField(this, "themeName");
+    __publicField(this, "palette");
+    __publicField(this, "lastTimestamp", 0);
+    __publicField(this, "firstRenderTimestampMs", null);
+    __publicField(this, "selectedIds", /* @__PURE__ */ new Set());
+    __publicField(this, "hoverId");
+    __publicField(this, "dragId");
+    __publicField(this, "dropTargetId");
+    __publicField(this, "dragPoint");
+    __publicField(this, "rootIndex", -1);
+    __publicField(this, "rootChildren", []);
+    __publicField(this, "rootBusBounds");
+    this.canvas = options.canvas;
+    const context = this.canvas.getContext("2d", { alpha: true });
+    if (!context) throw new Error("Canvas 2D rendering context is unavailable");
+    this.context = context;
+    this.camera = options.camera ?? new Camera();
+    this.requestFrame = options.requestFrame ?? ((callback) => window.requestAnimationFrame(callback));
+    this.cancelFrame = options.cancelFrame ?? ((id) => window.cancelAnimationFrame(id));
+    this.continuous = options.continuous ?? false;
+    this.themeName = options.theme ?? "dark";
+    this.palette = themePalettes[this.themeName];
+    this.width = this.canvas.clientWidth || this.canvas.width || 800;
+    this.height = this.canvas.clientHeight || this.canvas.height || 600;
+  }
+  get firstRenderAtMs() {
+    return this.firstRenderTimestampMs;
+  }
+  setScene(store, layout) {
+    this.assertAlive();
+    this.store = store;
+    this.layout = layout;
+    this.spatialIndex.build(layout);
+    this.cacheRootBus(layout);
+    this.invalidate();
+  }
+  resize(width, height, dpr = window.devicePixelRatio || 1) {
+    this.assertAlive();
+    this.width = Math.max(1, width);
+    this.height = Math.max(1, height);
+    this.dpr = Math.min(2, Math.max(1, dpr));
+    this.canvas.width = Math.round(this.width * this.dpr);
+    this.canvas.height = Math.round(this.height * this.dpr);
+    this.canvas.style.width = `${this.width}px`;
+    this.canvas.style.height = `${this.height}px`;
+    this.invalidate();
+  }
+  start() {
+    this.assertAlive();
+    this.continuous = true;
+    this.invalidate();
+  }
+  stop() {
+    this.continuous = false;
+  }
+  invalidate() {
+    this.assertAlive();
+    if (this.frameId !== null) return;
+    this.frameId = this.requestFrame((timestamp) => this.onFrame(timestamp));
+  }
+  renderNow(timestamp = performance.now()) {
+    this.assertAlive();
+    const layout = this.layout;
+    const store = this.store;
+    if (!layout || !store) return;
+    const frameStartedAt = performance.now();
+    const worldViewport = this.camera.viewport(this.width, this.height);
+    const overscan = 80 / this.camera.scale;
+    const queryRect = {
+      x: worldViewport.x - overscan,
+      y: worldViewport.y - overscan,
+      width: worldViewport.width + overscan * 2,
+      height: worldViewport.height + overscan * 2
+    };
+    const cullStartedAt = performance.now();
+    this.spatialIndex.query(queryRect, this.candidates);
+    const cullMs = performance.now() - cullStartedAt;
+    const drawStartedAt = performance.now();
+    this.draw(layout, store, this.candidates);
+    const drawMs = performance.now() - drawStartedAt;
+    const interval = this.lastTimestamp > 0 ? timestamp - this.lastTimestamp : performance.now() - frameStartedAt;
+    this.lastTimestamp = timestamp;
+    this.metrics.record({
+      timestamp,
+      frameMs: Math.max(0, interval),
+      cullMs,
+      drawMs,
+      rendered: this.candidates.length
+    });
+    if (this.firstRenderTimestampMs === null) this.firstRenderTimestampMs = performance.now();
+  }
+  hitTest(screenPoint) {
+    this.assertAlive();
+    const layout = this.layout;
+    if (!layout) return void 0;
+    const world = this.camera.screenToWorld(screenPoint);
+    const radius = 5 / this.camera.scale;
+    this.spatialIndex.query(
+      { x: world.x - radius, y: world.y - radius, width: radius * 2, height: radius * 2 },
+      this.candidates
+    );
+    for (let cursor = this.candidates.length - 1; cursor >= 0; cursor -= 1) {
+      const index = this.candidates[cursor];
+      if (index === void 0) continue;
+      const x = layout.x[index] ?? 0;
+      const y = layout.y[index] ?? 0;
+      if (world.x >= x && world.x <= x + (layout.width[index] ?? 0) && world.y >= y && world.y <= y + (layout.height[index] ?? 0)) {
+        return layout.ids[index];
+      }
+    }
+    return void 0;
+  }
+  getNodeScreenRect(id) {
+    const layout = this.layout;
+    const index = layout?.indexById.get(id);
+    if (!layout || index === void 0) return void 0;
+    const point = this.camera.worldToScreen({ x: layout.x[index] ?? 0, y: layout.y[index] ?? 0 });
+    return {
+      id,
+      x: point.x,
+      y: point.y,
+      width: (layout.width[index] ?? 0) * this.camera.scale,
+      height: (layout.height[index] ?? 0) * this.camera.scale
+    };
+  }
+  setSelection(ids) {
+    this.selectedIds = new Set(ids);
+    this.invalidate();
+  }
+  setHover(id) {
+    if (this.hoverId === id) return;
+    this.hoverId = id;
+    this.invalidate();
+  }
+  setDragState(id, point, dropTargetId) {
+    this.dragId = id;
+    this.dragPoint = point;
+    this.dropTargetId = dropTargetId;
+    this.invalidate();
+  }
+  get theme() {
+    return this.themeName;
+  }
+  setTheme(theme) {
+    this.assertAlive();
+    if (theme === this.themeName) return;
+    this.themeName = theme;
+    this.palette = themePalettes[theme];
+    this.invalidate();
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.continuous = false;
+    if (this.frameId !== null) this.cancelFrame(this.frameId);
+    this.frameId = null;
+    this.store = void 0;
+    this.layout = void 0;
+    this.rootIndex = -1;
+    this.rootChildren.length = 0;
+    this.rootBusBounds = void 0;
+    this.selectedIds.clear();
+  }
+  onFrame(timestamp) {
+    this.frameId = null;
+    if (this.destroyed) return;
+    this.renderNow(timestamp);
+    if (this.continuous) this.invalidate();
+  }
+  draw(layout, store, candidates) {
+    const context = this.context;
+    if (typeof context.resetTransform === "function") context.resetTransform();
+    else context.setTransform(1, 0, 0, 1, 0, 0);
+    context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    context.setTransform(
+      this.dpr * this.camera.scale,
+      0,
+      0,
+      this.dpr * this.camera.scale,
+      this.dpr * this.camera.x,
+      this.dpr * this.camera.y
+    );
+    const lod = resolveLod(this.camera.scale);
+    if (lod !== "dots") {
+      this.drawRootBus(context, layout);
+      this.drawBranchEdges(context, layout, candidates);
+    }
+    for (const index of candidates) this.drawTopic(context, layout, store, index, lod);
+    this.drawDragPreview(context, layout);
+  }
+  drawRootBus(context, layout) {
+    const bounds = this.rootBusBounds;
+    if (this.rootIndex < 0 || this.rootChildren.length === 0 || !bounds) return;
+    const viewport = this.camera.viewport(this.width, this.height);
+    if (bounds.x > viewport.x + viewport.width || bounds.x + bounds.width < viewport.x || bounds.y > viewport.y + viewport.height || bounds.y + bounds.height < viewport.y) return;
+    const rootRight = (layout.x[this.rootIndex] ?? 0) + (layout.width[this.rootIndex] ?? 0);
+    const rootCenterY = (layout.y[this.rootIndex] ?? 0) + (layout.height[this.rootIndex] ?? 0) / 2;
+    const firstChild = this.rootChildren[0];
+    if (firstChild === void 0) return;
+    const firstChildX = layout.x[firstChild] ?? rootRight;
+    const busX = rootRight + (firstChildX - rootRight) * 0.46;
+    let minY = rootCenterY;
+    let maxY = rootCenterY;
+    for (const index of this.rootChildren) {
+      const centerY = (layout.y[index] ?? 0) + (layout.height[index] ?? 0) / 2;
+      minY = Math.min(minY, centerY);
+      maxY = Math.max(maxY, centerY);
+    }
+    context.save();
+    context.lineCap = "round";
+    context.lineJoin = "round";
+    context.globalAlpha = 1;
+    context.lineWidth = 1.65 / Math.max(0.4, this.camera.scale);
+    context.strokeStyle = this.palette.edge;
+    context.beginPath();
+    context.moveTo(rootRight, rootCenterY);
+    context.lineTo(busX, rootCenterY);
+    context.moveTo(busX, minY);
+    context.lineTo(busX, maxY);
+    context.stroke();
+    context.lineWidth = 1.8 / Math.max(0.4, this.camera.scale);
+    context.globalAlpha = 0.72;
+    for (const index of this.rootChildren) {
+      const childY = (layout.y[index] ?? 0) + (layout.height[index] ?? 0) / 2;
+      const colorIndex = (layout.branchIndex[index] ?? 0) % this.palette.accents.length;
+      context.strokeStyle = this.palette.accents[colorIndex] ?? this.palette.accents[0];
+      context.beginPath();
+      context.moveTo(busX, childY);
+      context.lineTo(layout.x[index] ?? firstChildX, childY);
+      context.stroke();
+    }
+    context.restore();
+  }
+  drawBranchEdges(context, layout, candidates) {
+    context.save();
+    context.lineCap = "round";
+    context.lineJoin = "round";
+    context.lineWidth = 1.45 / Math.max(0.4, this.camera.scale);
+    for (const index of candidates) {
+      const parentIndex = layout.parentIndices[index] ?? -1;
+      const nodeDepth = layout.depth[index] ?? 0;
+      if (parentIndex < 0 || nodeDepth === 1) continue;
+      const fromX = (layout.x[parentIndex] ?? 0) + (layout.width[parentIndex] ?? 0);
+      const fromY = (layout.y[parentIndex] ?? 0) + (layout.height[parentIndex] ?? 0) / 2;
+      const toX = layout.x[index] ?? 0;
+      const toY = (layout.y[index] ?? 0) + (layout.height[index] ?? 0) / 2;
+      const control = Math.max(28, (toX - fromX) * 0.46);
+      const colorIndex = (layout.branchIndex[index] ?? 0) % this.palette.accents.length;
+      context.strokeStyle = this.palette.accents[colorIndex] ?? this.palette.edge;
+      context.globalAlpha = Math.max(0.2, 0.52 - nodeDepth * 7e-3);
+      context.beginPath();
+      context.moveTo(fromX, fromY);
+      context.bezierCurveTo(fromX + control, fromY, toX - control, toY, toX, toY);
+      context.stroke();
+    }
+    context.restore();
+  }
+  cacheRootBus(layout) {
+    this.rootChildren.length = 0;
+    this.rootIndex = -1;
+    for (let index = 0; index < layout.ids.length; index += 1) {
+      if ((layout.parentIndices[index] ?? -1) < 0) {
+        this.rootIndex = index;
+        break;
+      }
+    }
+    if (this.rootIndex < 0) {
+      this.rootBusBounds = void 0;
+      return;
+    }
+    for (let index = 0; index < layout.ids.length; index += 1) {
+      if ((layout.parentIndices[index] ?? -1) === this.rootIndex) this.rootChildren.push(index);
+    }
+    if (this.rootChildren.length === 0) {
+      this.rootBusBounds = void 0;
+      return;
+    }
+    const rootRight = (layout.x[this.rootIndex] ?? 0) + (layout.width[this.rootIndex] ?? 0);
+    let minX = rootRight;
+    let maxX = rootRight;
+    let minY = (layout.y[this.rootIndex] ?? 0) + (layout.height[this.rootIndex] ?? 0) / 2;
+    let maxY = minY;
+    for (const index of this.rootChildren) {
+      const childX = layout.x[index] ?? rootRight;
+      const childY = (layout.y[index] ?? 0) + (layout.height[index] ?? 0) / 2;
+      minX = Math.min(minX, childX);
+      maxX = Math.max(maxX, childX);
+      minY = Math.min(minY, childY);
+      maxY = Math.max(maxY, childY);
+    }
+    this.rootBusBounds = {
+      x: minX,
+      y: minY,
+      width: Math.max(1, maxX - minX),
+      height: Math.max(1, maxY - minY)
+    };
+  }
+  drawTopic(context, layout, store, index, lod) {
+    const id = layout.ids[index];
+    if (!id) return;
+    const topic = store.get(id);
+    const x = layout.x[index] ?? 0;
+    const y = layout.y[index] ?? 0;
+    const width = layout.width[index] ?? 0;
+    const height = layout.height[index] ?? 0;
+    const nodeDepth = layout.depth[index] ?? 0;
+    const branch = layout.branchIndex[index] ?? 0;
+    const accentColor = topic.style?.border ?? this.palette.accents[branch % this.palette.accents.length] ?? this.palette.accents[0];
+    if (lod === "dots") {
+      context.fillStyle = topic.style?.fill ?? accentColor;
+      context.fillRect(x, y + height / 2 - 2, Math.max(6, width * 0.24), 4);
+      return;
+    }
+    const isSelected = this.selectedIds.has(id);
+    const isHovered = this.hoverId === id;
+    const isDropTarget = this.dropTargetId === id;
+    const isRoot = nodeDepth === 0;
+    const isBranch = nodeDepth === 1;
+    const isDeep = nodeDepth > 6;
+    const visualY = isDeep ? y + 3 : y;
+    const visualHeight = isDeep ? Math.max(24, height - 6) : height;
+    const isUnderline = topic.style?.shape === "underline";
+    const tierRadius = isRoot ? 16 : isBranch ? 12 : isDeep ? 6 : 9;
+    const shapeRadius = topic.style?.shape === "pill" ? visualHeight / 2 : topic.style?.shape === "rect" ? 2 : tierRadius;
+    context.save();
+    context.globalAlpha = 1;
+    if (isRoot) {
+      context.shadowColor = topic.style?.fill ?? accentColor;
+      context.shadowBlur = 22 / Math.max(0.6, this.camera.scale);
+    }
+    context.strokeStyle = isDropTarget ? this.palette.dropTarget : isSelected ? this.palette.selection : isHovered ? this.palette.hover : topic.style?.border ?? (isRoot ? this.palette.rootStroke : accentColor);
+    context.globalAlpha = isSelected || isHovered || isDropTarget || isRoot ? 1 : isDeep ? 0.42 : isBranch ? 0.82 : 0.58;
+    context.lineWidth = (isSelected || isHovered || isDropTarget ? 2.5 : 1.25) / Math.max(0.5, this.camera.scale);
+    context.beginPath();
+    if (isUnderline) {
+      context.moveTo(x, visualY + visualHeight - 1);
+      context.lineTo(x + width, visualY + visualHeight - 1);
+      context.stroke();
+    } else {
+      if (typeof context.roundRect === "function") {
+        context.roundRect(x, visualY, width, visualHeight, shapeRadius);
+      } else context.rect(x, visualY, width, visualHeight);
+      context.fillStyle = isSelected ? this.palette.topicSelected : topic.style?.fill ?? (isRoot ? this.palette.root : isBranch ? this.palette.branchTopic : isDeep ? this.palette.deepTopic : this.palette.topic);
+      context.fill();
+      context.shadowBlur = 0;
+      context.stroke();
+    }
+    context.globalAlpha = 1;
+    context.shadowBlur = 0;
+    context.fillStyle = accentColor;
+    if (isUnderline) ; else if (isBranch) {
+      context.fillRect(x, visualY + 7, 4 / Math.max(0.55, this.camera.scale), visualHeight - 14);
+    } else if (isDeep) {
+      context.fillRect(x + 10, visualY + visualHeight - 2, Math.min(56, width - 20), 2);
+    } else if (!isRoot) {
+      context.fillRect(x, visualY + 5, 3 / Math.max(0.55, this.camera.scale), visualHeight - 10);
+    }
+    if (lod === "blocks") {
+      context.restore();
+      return;
+    }
+    context.fillStyle = topic.style?.color ?? (isSelected ? this.palette.textSelected : this.palette.text);
+    const fontSize = topic.style?.fontSize ?? (isRoot ? 15 : isBranch ? 13 : isDeep ? 11 : 12);
+    const fontWeight = topic.style?.fontWeight ?? (isRoot ? 720 : isBranch ? 650 : isDeep ? 520 : 570);
+    context.font = `${fontWeight} ${fontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+    context.textBaseline = "middle";
+    const labelInset = isRoot ? 18 : isDeep ? 10 : 14;
+    const maxCharacters = Math.max(8, Math.floor((width - labelInset - 10) / (fontSize * 0.53)));
+    const label = topic.text.length > maxCharacters ? `${topic.text.slice(0, maxCharacters - 1)}\u2026` : topic.text;
+    context.fillText(label, x + labelInset, visualY + visualHeight / 2, width - labelInset - 8);
+    if (lod === "full" && topic.childIds.length > 0) {
+      const badgeSize = 14;
+      const badgeX = x + width - badgeSize / 2;
+      const badgeY = visualY + visualHeight / 2 - badgeSize / 2;
+      context.beginPath();
+      if (typeof context.roundRect === "function") {
+        context.roundRect(badgeX, badgeY, badgeSize, badgeSize, badgeSize / 2);
+      } else context.rect(badgeX, badgeY, badgeSize, badgeSize);
+      context.fillStyle = topic.expanded ? accentColor : this.palette.collapseBadge;
+      context.fill();
+      context.fillStyle = this.palette.badgeText;
+      context.font = "750 10px Inter, ui-sans-serif, system-ui, sans-serif";
+      context.fillText(topic.expanded ? "\u2212" : "+", x + width - 3.5, visualY + visualHeight / 2 + 0.5);
+    }
+    context.restore();
+  }
+  drawDragPreview(context, layout) {
+    if (!this.dragId || !this.dragPoint) return;
+    const index = layout.indexById.get(this.dragId);
+    if (index === void 0) return;
+    const width = layout.width[index] ?? 120;
+    const height = layout.height[index] ?? 36;
+    const world = this.camera.screenToWorld(this.dragPoint);
+    context.beginPath();
+    if (typeof context.roundRect === "function") {
+      context.roundRect(world.x - width / 2, world.y - height / 2, width, height, 10);
+    } else {
+      context.rect(world.x - width / 2, world.y - height / 2, width, height);
+    }
+    context.fillStyle = this.palette.drag;
+    context.fill();
+    context.strokeStyle = this.palette.dragStroke;
+    context.stroke();
+  }
+  assertAlive() {
+    if (this.destroyed) throw new Error("CanvasRenderer has been destroyed");
+  }
+};
+
+// ../vanilla/src/mind-map.ts
+var resolveContainer = (container) => {
+  if (typeof container !== "string") return container;
+  const resolved = document.querySelector(container);
+  if (!resolved) throw new Error(`MindMap container not found: ${container}`);
+  return resolved;
+};
+var button = (action, label, title) => {
+  const element = document.createElement("button");
+  element.type = "button";
+  element.dataset.action = action;
+  element.textContent = label;
+  element.title = title;
+  return element;
+};
+var MindMap = class {
+  constructor(options) {
+    __publicField(this, "container");
+    __publicField(this, "root");
+    __publicField(this, "canvas");
+    __publicField(this, "camera");
+    __publicField(this, "layout");
+    __publicField(this, "engine");
+    __publicField(this, "layoutEngine", new MindMapLayout());
+    __publicField(this, "renderer");
+    __publicField(this, "pluginManager");
+    __publicField(this, "toolbar");
+    __publicField(this, "editor");
+    __publicField(this, "hud");
+    __publicField(this, "status");
+    __publicField(this, "editable");
+    __publicField(this, "selection", /* @__PURE__ */ new Set());
+    __publicField(this, "cleanups", []);
+    __publicField(this, "resizeObserver");
+    __publicField(this, "hudTimer");
+    __publicField(this, "destroyed", false);
+    __publicField(this, "panState");
+    __publicField(this, "dragState");
+    __publicField(this, "editingId");
+    __publicField(this, "hoveredId");
+    this.container = resolveContainer(options.container);
+    this.editable = options.editable ?? true;
+    this.engine = new MindMapEngine(options.document);
+    this.layout = this.layoutEngine.layout(this.engine.store);
+    this.root = document.createElement("div");
+    this.root.className = "mm-root";
+    this.root.dataset.theme = options.theme ?? "dark";
+    this.root.tabIndex = 0;
+    this.root.setAttribute("role", "application");
+    this.root.setAttribute("aria-label", "Interactive mind map");
+    this.canvas = document.createElement("canvas");
+    this.canvas.className = "mm-canvas";
+    this.canvas.setAttribute("aria-label", "Mind-map canvas");
+    const overlay = document.createElement("div");
+    overlay.className = "mm-overlay";
+    this.toolbar = this.createToolbar();
+    this.editor = document.createElement("input");
+    this.editor.className = "mm-text-editor";
+    this.editor.type = "text";
+    this.editor.hidden = true;
+    this.editor.setAttribute("aria-label", "Edit topic text");
+    this.hud = this.createHud();
+    this.status = document.createElement("div");
+    this.status.className = "mm-status";
+    this.status.setAttribute("aria-live", "polite");
+    overlay.append(this.toolbar, this.editor, this.hud, this.status);
+    this.root.append(this.canvas, overlay);
+    this.container.replaceChildren(this.root);
+    this.camera = new Camera({ minScale: 1e-5, maxScale: 5 });
+    this.renderer = new CanvasRenderer({
+      canvas: this.canvas,
+      camera: this.camera,
+      theme: options.theme,
+      requestFrame: options.requestFrame,
+      cancelFrame: options.cancelFrame,
+      continuous: options.continuousMetrics ?? true
+    });
+    this.pluginManager = new PluginManager(this, (_plugin, cause) => {
+      this.showStatus(`Plugin error: ${String(cause)}`, true);
+    });
+    this.renderer.setScene(this.engine.store, this.layout);
+    this.installInteractions();
+    this.cleanups.push(
+      this.engine.on("document:change", (change) => this.handleDocumentChange(change)),
+      this.engine.on("error", (error) => this.showStatus(error.message, true))
+    );
+    this.resize();
+    this.fitView();
+    if (options.continuousMetrics ?? true) this.renderer.start();
+    this.hudTimer = window.setInterval(() => this.updateHud(), 250);
+    this.updateHud();
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => this.resize());
+      this.resizeObserver.observe(this.container);
+    } else {
+      const onResize = () => this.resize();
+      window.addEventListener("resize", onResize);
+      this.cleanups.push(() => window.removeEventListener("resize", onResize));
+    }
+  }
+  get totalTopics() {
+    return this.engine.store.size;
+  }
+  get theme() {
+    return this.renderer.theme;
+  }
+  setTheme(theme) {
+    this.assertAlive();
+    this.root.dataset.theme = theme;
+    this.renderer.setTheme(theme);
+  }
+  get canUndo() {
+    return this.engine.canUndo;
+  }
+  get canRedo() {
+    return this.engine.canRedo;
+  }
+  getTopic(id) {
+    this.assertAlive();
+    return this.engine.store.get(id);
+  }
+  hasTopic(id) {
+    this.assertAlive();
+    return this.engine.store.has(id);
+  }
+  addTopic(parentId, input) {
+    this.assertAlive();
+    return this.engine.addChild(parentId, input);
+  }
+  addSibling(topicId, input) {
+    this.assertAlive();
+    return this.engine.addSibling(topicId, input);
+  }
+  updateTopic(topicId, patch) {
+    this.assertAlive();
+    return this.engine.updateTopic(topicId, patch);
+  }
+  editTopic(topicId) {
+    this.assertAlive();
+    this.engine.store.get(topicId);
+    this.select(topicId);
+    this.openEditor(topicId);
+  }
+  deleteTopic(topicId) {
+    this.assertAlive();
+    this.engine.deleteTopic(topicId);
+    this.selection.delete(topicId);
+    this.syncSelection();
+  }
+  moveTopic(topicId, parentId, index) {
+    this.assertAlive();
+    return this.engine.moveTopic(topicId, parentId, index);
+  }
+  expand(topicId) {
+    this.assertAlive();
+    this.engine.setExpanded(topicId, true);
+  }
+  collapse(topicId) {
+    this.assertAlive();
+    this.engine.setExpanded(topicId, false);
+  }
+  toggle(topicId) {
+    this.assertAlive();
+    return this.engine.toggleTopic(topicId);
+  }
+  expandAll(options = {}) {
+    this.assertAlive();
+    let changed = false;
+    for (const topic of this.engine.store.values()) {
+      if (!topic.expanded) {
+        topic.expanded = true;
+        changed = true;
+      }
+    }
+    if (changed) this.relayout(this.engine.store.rootId);
+    if (options.view === "root") this.resetView();
+    else if (options.view === "branch") this.centerReadableBranch();
+    else if (options.view === "fit") this.fitView();
+  }
+  collapseToLevel(level) {
+    this.assertAlive();
+    for (const topic of this.engine.store.values()) {
+      topic.expanded = this.engine.store.depthOf(topic.id) < level;
+    }
+    this.relayout(this.engine.store.rootId);
+  }
+  select(topicId, additive = false) {
+    this.assertAlive();
+    this.engine.store.get(topicId);
+    if (!additive) this.selection.clear();
+    if (additive && this.selection.has(topicId)) this.selection.delete(topicId);
+    else this.selection.add(topicId);
+    this.syncSelection();
+  }
+  clearSelection() {
+    this.assertAlive();
+    this.selection.clear();
+    this.syncSelection();
+  }
+  getSelection() {
+    this.assertAlive();
+    return [...this.selection];
+  }
+  search(query) {
+    this.assertAlive();
+    return this.engine.search(query);
+  }
+  focusTopic(topicId, options = {}) {
+    this.assertAlive();
+    this.engine.revealTopic(topicId);
+    const index = this.layout.indexById.get(topicId);
+    if (index === void 0) return;
+    this.select(topicId);
+    const viewport = this.viewportSize();
+    if (options.scale !== void 0) {
+      this.camera.zoomTo(options.scale, { x: viewport.width / 2, y: viewport.height / 2 });
+    }
+    this.camera.center(
+      {
+        x: this.layout.x[index] ?? 0,
+        y: this.layout.y[index] ?? 0,
+        width: this.layout.width[index] ?? 0,
+        height: this.layout.height[index] ?? 0
+      },
+      viewport
+    );
+    this.refreshToolbarPosition();
+    this.renderer.invalidate();
+  }
+  undo() {
+    this.assertAlive();
+    return this.engine.undo();
+  }
+  redo() {
+    this.assertAlive();
+    return this.engine.redo();
+  }
+  zoomIn() {
+    this.zoomBy(1.25);
+  }
+  zoomOut() {
+    this.zoomBy(0.8);
+  }
+  zoomBy(factor, anchor) {
+    this.assertAlive();
+    const viewport = this.viewportSize();
+    this.camera.zoomBy(factor, anchor ?? { x: viewport.width / 2, y: viewport.height / 2 });
+    this.refreshToolbarPosition();
+    this.renderer.invalidate();
+    this.updateHud();
+  }
+  zoomTo(scale, anchor) {
+    this.assertAlive();
+    const viewport = this.viewportSize();
+    this.camera.zoomTo(scale, anchor ?? { x: viewport.width / 2, y: viewport.height / 2 });
+    this.refreshToolbarPosition();
+    this.renderer.invalidate();
+    this.updateHud();
+  }
+  panBy(dx, dy) {
+    this.assertAlive();
+    this.camera.panBy(dx, dy);
+    this.refreshToolbarPosition();
+    this.renderer.invalidate();
+  }
+  fitView() {
+    this.assertAlive();
+    this.camera.fit(this.layout.bounds, this.viewportSize(), 56);
+    this.refreshToolbarPosition();
+    this.renderer.invalidate();
+    this.updateHud();
+  }
+  resetView() {
+    this.assertAlive();
+    this.camera.reset();
+    const rootIndex = this.layout.indexById.get(this.engine.store.rootId);
+    if (rootIndex !== void 0) {
+      this.camera.center(
+        {
+          x: this.layout.x[rootIndex] ?? 0,
+          y: this.layout.y[rootIndex] ?? 0,
+          width: this.layout.width[rootIndex] ?? 0,
+          height: this.layout.height[rootIndex] ?? 0
+        },
+        this.viewportSize()
+      );
+    }
+    this.refreshToolbarPosition();
+    this.renderer.invalidate();
+    this.updateHud();
+  }
+  centerReadableBranch() {
+    const centerY = this.layout.bounds.y + this.layout.bounds.height / 2;
+    let targetIndex = 0;
+    let targetDepth = -1;
+    let targetDistance = Number.POSITIVE_INFINITY;
+    for (let index = 0; index < this.layout.ids.length; index += 1) {
+      const depth = this.layout.depth[index] ?? 0;
+      const nodeCenterY = (this.layout.y[index] ?? 0) + (this.layout.height[index] ?? 0) / 2;
+      const distance = Math.abs(nodeCenterY - centerY);
+      if (depth > targetDepth || depth === targetDepth && distance < targetDistance) {
+        targetIndex = index;
+        targetDepth = depth;
+        targetDistance = distance;
+      }
+    }
+    this.camera.reset();
+    this.camera.center(
+      {
+        x: this.layout.x[targetIndex] ?? 0,
+        y: this.layout.y[targetIndex] ?? 0,
+        width: this.layout.width[targetIndex] ?? 0,
+        height: this.layout.height[targetIndex] ?? 0
+      },
+      this.viewportSize()
+    );
+    this.refreshToolbarPosition();
+    this.renderer.invalidate();
+    this.updateHud();
+  }
+  resize() {
+    this.assertAlive();
+    const viewport = this.viewportSize();
+    this.renderer.resize(viewport.width, viewport.height);
+  }
+  exportJSON() {
+    this.assertAlive();
+    return this.engine.exportJSON();
+  }
+  importJSON(json) {
+    this.assertAlive();
+    this.engine.importJSON(json);
+    this.selection.clear();
+    this.syncSelection();
+    this.fitView();
+  }
+  async use(plugin) {
+    this.assertAlive();
+    await this.pluginManager.use(plugin);
+  }
+  getPerformanceSnapshot() {
+    this.assertAlive();
+    const metrics = this.renderer.metrics.snapshot();
+    const memory = performance;
+    return {
+      ...metrics,
+      totalTopics: this.engine.store.size,
+      layoutVisible: this.layout.ids.length,
+      renderRate: this.layout.ids.length > 0 ? metrics.rendered / this.layout.ids.length * 100 : 0,
+      layoutMs: this.layout.durationMs,
+      maxDepth: this.layout.maxDepth,
+      scale: this.camera.scale,
+      domElements: this.root.querySelectorAll("*").length,
+      heapMB: memory.memory ? memory.memory.usedJSHeapSize / 1024 / 1024 : null,
+      firstRenderAtMs: this.renderer.firstRenderAtMs
+    };
+  }
+  getCameraState() {
+    return this.camera.state;
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.renderer.destroy();
+    this.resizeObserver?.disconnect();
+    if (this.hudTimer !== void 0) window.clearInterval(this.hudTimer);
+    for (const cleanup of this.cleanups.splice(0)) cleanup();
+    void this.pluginManager.destroy();
+    this.root.remove();
+  }
+  relayout(anchorId = [...this.selection][0] ?? this.engine.store.rootId) {
+    if (this.destroyed) return;
+    const previousIndex = this.layout.indexById.get(anchorId);
+    const previousScreen = previousIndex === void 0 ? void 0 : this.camera.worldToScreen({
+      x: this.layout.x[previousIndex] ?? 0,
+      y: this.layout.y[previousIndex] ?? 0
+    });
+    this.layout = this.layoutEngine.layout(this.engine.store);
+    this.renderer.setScene(this.engine.store, this.layout);
+    const nextIndex = this.layout.indexById.get(anchorId);
+    if (previousScreen && nextIndex !== void 0) {
+      const nextScreen = this.camera.worldToScreen({
+        x: this.layout.x[nextIndex] ?? 0,
+        y: this.layout.y[nextIndex] ?? 0
+      });
+      this.camera.panBy(previousScreen.x - nextScreen.x, previousScreen.y - nextScreen.y);
+    }
+    for (const selected of [...this.selection]) {
+      if (!this.engine.store.has(selected)) this.selection.delete(selected);
+    }
+    this.syncSelection();
+    this.updateHud();
+  }
+  handleDocumentChange(change) {
+    if (change.type === "update" && change.layoutAffecting === false) {
+      this.renderer.invalidate();
+      this.updateHud();
+      return;
+    }
+    this.relayout(change.topicId);
+  }
+  createToolbar() {
+    const toolbar = document.createElement("div");
+    toolbar.className = "mm-shared-toolbar";
+    toolbar.hidden = true;
+    toolbar.append(
+      button("edit", "\u270E", "Edit topic"),
+      button("add-child", "+", "Add child"),
+      button("add-sibling", "\u21B3", "Add sibling"),
+      button("toggle", "\u2212/+", "Expand or collapse"),
+      button("delete", "\xD7", "Delete topic")
+    );
+    return toolbar;
+  }
+  createHud() {
+    const hud = document.createElement("div");
+    hud.className = "mm-performance-hud";
+    hud.innerHTML = `
+      <div class="mm-hud-title"><span class="mm-live-dot"></span> PERFORMANCE</div>
+      <div class="mm-hud-grid">
+        <span>Nodes</span><strong data-metric="nodes">\u2014</strong>
+        <span>Rendered</span><strong data-metric="rendered">\u2014</strong>
+        <span>Render rate</span><strong data-metric="rate">\u2014</strong>
+        <span>FPS</span><strong data-metric="fps">\u2014</strong>
+        <span>Frame P95</span><strong data-metric="frame">\u2014</strong>
+        <span>Cull / draw</span><strong data-metric="pipeline">\u2014</strong>
+        <span>Layout</span><strong data-metric="layout">\u2014</strong>
+        <span>Scale</span><strong data-metric="scale">\u2014</strong>
+        <span>DOM / heap</span><strong data-metric="memory">\u2014</strong>
+      </div>`;
+    return hud;
+  }
+  installInteractions() {
+    this.listen(this.canvas, "pointerdown", (event) => this.onPointerDown(event));
+    this.listen(this.canvas, "pointermove", (event) => this.onPointerMove(event));
+    this.listen(this.canvas, "pointerup", (event) => this.onPointerUp(event));
+    this.listen(this.canvas, "pointercancel", (event) => this.onPointerUp(event));
+    this.listen(this.canvas, "dblclick", (event) => {
+      const id = this.renderer.hitTest(this.pointerPoint(event));
+      if (id) this.openEditor(id);
+    });
+    this.listen(
+      this.canvas,
+      "wheel",
+      (event) => {
+        const wheel = event;
+        wheel.preventDefault();
+        this.zoomBy(Math.exp(-wheel.deltaY * 15e-4), this.pointerPoint(wheel));
+      },
+      { passive: false }
+    );
+    this.listen(this.root, "keydown", (event) => this.onKeyDown(event));
+    this.listen(this.toolbar, "pointerdown", (event) => event.preventDefault());
+    this.listen(this.toolbar, "click", (event) => this.onToolbarAction(event));
+    this.listen(this.editor, "keydown", (event) => this.onEditorKeyDown(event));
+    this.listen(this.editor, "blur", () => this.commitEditor());
+  }
+  onPointerDown(event) {
+    if (event.button !== 0) return;
+    const point = this.pointerPoint(event);
+    const hit = this.renderer.hitTest(point);
+    this.root.focus({ preventScroll: true });
+    this.canvas.setPointerCapture?.(event.pointerId);
+    if (!hit) {
+      this.clearSelection();
+      this.panState = { id: event.pointerId, x: point.x, y: point.y };
+      this.toolbar.hidden = true;
+      return;
+    }
+    const screenRect = this.renderer.getNodeScreenRect(hit);
+    const topic = this.engine.store.get(hit);
+    if (screenRect && topic.childIds.length > 0 && point.x >= screenRect.x + screenRect.width - 18) {
+      this.toggle(hit);
+      return;
+    }
+    this.select(hit, event.metaKey || event.ctrlKey);
+    this.dragState = {
+      id: event.pointerId,
+      x: point.x,
+      y: point.y,
+      topicId: hit,
+      active: false
+    };
+  }
+  onPointerMove(event) {
+    const point = this.pointerPoint(event);
+    if (this.panState?.id === event.pointerId) {
+      this.camera.panBy(point.x - this.panState.x, point.y - this.panState.y);
+      this.panState.x = point.x;
+      this.panState.y = point.y;
+      this.refreshToolbarPosition();
+      this.renderer.invalidate();
+      return;
+    }
+    if (this.dragState?.id === event.pointerId) {
+      const distance = Math.hypot(point.x - this.dragState.x, point.y - this.dragState.y);
+      if (distance > 6) this.dragState.active = true;
+      if (this.dragState.active) {
+        const candidate = this.renderer.hitTest(point);
+        this.dragState.targetId = this.validDropTarget(this.dragState.topicId, candidate);
+        this.renderer.setDragState(
+          this.dragState.topicId,
+          point,
+          this.dragState.targetId
+        );
+        return;
+      }
+    }
+    const hover = this.renderer.hitTest(point);
+    if (hover !== this.hoveredId) {
+      this.hoveredId = hover;
+      this.renderer.setHover(hover);
+      if (hover) this.positionToolbar(hover);
+      else if (this.selection.size === 0) this.toolbar.hidden = true;
+    }
+  }
+  onPointerUp(event) {
+    if (this.panState?.id === event.pointerId) this.panState = void 0;
+    if (this.dragState?.id !== event.pointerId) return;
+    const drag = this.dragState;
+    this.dragState = void 0;
+    this.renderer.setDragState();
+    if (drag.active && drag.targetId) {
+      try {
+        this.moveTopic(drag.topicId, drag.targetId);
+        this.select(drag.topicId);
+        this.showStatus(`Moved under \u201C${this.engine.store.get(drag.targetId).text}\u201D`);
+      } catch (cause) {
+        this.showStatus(String(cause), true);
+      }
+    }
+  }
+  onKeyDown(event) {
+    const shortcutTarget = event.target instanceof Element ? event.target : void 0;
+    if (shortcutTarget?.closest('button, input, select, textarea, [contenteditable="true"], [contenteditable=""]')) {
+      return;
+    }
+    const selected = [...this.selection][0];
+    const command = event.metaKey || event.ctrlKey;
+    const modified = command || event.altKey || event.shiftKey;
+    if (command && event.key.toLowerCase() === "z") {
+      event.preventDefault();
+      event.shiftKey ? this.redo() : this.undo();
+      return;
+    }
+    if (command && event.key.toLowerCase() === "y") {
+      event.preventDefault();
+      this.redo();
+      return;
+    }
+    if (event.key === "+" || event.key === "=") this.zoomIn();
+    else if (event.key === "-") this.zoomOut();
+    else if (event.key === "0") this.resetView();
+    else if (selected && (event.key === "F2" || event.key === " ")) {
+      event.preventDefault();
+      this.openEditor(selected);
+    } else if (selected && event.key === "Tab" && !modified) {
+      event.preventDefault();
+      const topic = this.addTopic(selected, { text: "New topic" });
+      this.select(topic.id);
+      this.openEditor(topic.id);
+    } else if (selected && event.key === "Enter" && !modified) {
+      event.preventDefault();
+      const topic = selected === this.engine.store.rootId ? this.addTopic(selected, { text: "New topic" }) : this.addSibling(selected, { text: "New topic" });
+      this.select(topic.id);
+      this.openEditor(topic.id);
+    } else if (selected && (event.key === "Delete" || event.key === "Backspace")) {
+      event.preventDefault();
+      if (selected !== this.engine.store.rootId) this.deleteTopic(selected);
+    } else if (selected && event.key === "ArrowLeft") {
+      const parentId = this.engine.store.get(selected).parentId;
+      if (parentId) this.focusTopic(parentId);
+    } else if (selected && event.key === "ArrowRight") {
+      const childId = this.engine.store.get(selected).childIds[0];
+      if (childId) this.focusTopic(childId);
+    }
+  }
+  onToolbarAction(event) {
+    const target = event.target.closest("button[data-action]");
+    const id = [...this.selection][0] ?? this.hoveredId;
+    if (!target || !id) return;
+    const action = target.dataset.action;
+    try {
+      if (action === "edit") this.openEditor(id);
+      else if (action === "add-child") {
+        const topic = this.addTopic(id, { text: "New topic" });
+        this.select(topic.id);
+        this.openEditor(topic.id);
+      } else if (action === "add-sibling") {
+        const topic = this.addSibling(id, { text: "New topic" });
+        this.select(topic.id);
+        this.openEditor(topic.id);
+      } else if (action === "toggle") this.toggle(id);
+      else if (action === "delete" && id !== this.engine.store.rootId) this.deleteTopic(id);
+    } catch (cause) {
+      this.showStatus(String(cause), true);
+    }
+  }
+  openEditor(topicId) {
+    if (!this.editable) return;
+    const rect = this.renderer.getNodeScreenRect(topicId);
+    if (!rect) return;
+    this.editingId = topicId;
+    this.editor.value = this.engine.store.get(topicId).text;
+    this.editor.hidden = false;
+    this.editor.style.left = `${Math.max(8, rect.x)}px`;
+    this.editor.style.top = `${Math.max(8, rect.y)}px`;
+    this.editor.style.width = `${Math.max(190, rect.width)}px`;
+    this.editor.style.height = `${Math.max(36, rect.height)}px`;
+    this.editor.focus();
+    this.editor.select();
+  }
+  commitEditor() {
+    if (!this.editingId || this.editor.hidden) return;
+    const id = this.editingId;
+    const text = this.editor.value.trim();
+    this.editingId = void 0;
+    this.editor.hidden = true;
+    if (text && this.engine.store.has(id) && text !== this.engine.store.get(id).text) {
+      this.updateTopic(id, { text });
+      this.positionToolbar(id);
+    }
+  }
+  onEditorKeyDown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this.commitEditor();
+      this.root.focus();
+    } else if (event.key === "Escape") {
+      this.editingId = void 0;
+      this.editor.hidden = true;
+      this.root.focus();
+    }
+  }
+  syncSelection() {
+    if (this.destroyed) return;
+    this.renderer.setSelection(this.selection);
+    this.refreshToolbarPosition();
+  }
+  refreshToolbarPosition() {
+    const selected = [...this.selection][0];
+    if (selected && this.layout.indexById.has(selected)) this.positionToolbar(selected);
+    else if (!this.hoveredId) this.toolbar.hidden = true;
+  }
+  positionToolbar(id) {
+    const rect = this.renderer.getNodeScreenRect(id);
+    const viewport = this.viewportSize();
+    if (!rect || rect.width < 8 || rect.height < 4 || rect.x + rect.width < 0 || rect.y + rect.height < 0 || rect.x > viewport.width || rect.y > viewport.height) {
+      this.toolbar.hidden = true;
+      return;
+    }
+    this.toolbar.hidden = false;
+    this.toolbar.style.left = `${Math.max(8, rect.x)}px`;
+    this.toolbar.style.top = `${Math.max(8, rect.y - 42)}px`;
+  }
+  validDropTarget(dragId, candidate) {
+    if (!candidate || candidate === dragId) return void 0;
+    if (this.engine.store.isAncestor(dragId, candidate)) return void 0;
+    return candidate;
+  }
+  pointerPoint(event) {
+    const bounds = this.canvas.getBoundingClientRect();
+    return { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
+  }
+  viewportSize() {
+    return {
+      width: Math.max(1, this.container.clientWidth || this.root.clientWidth || 800),
+      height: Math.max(1, this.container.clientHeight || this.root.clientHeight || 600)
+    };
+  }
+  updateHud() {
+    if (this.destroyed) return;
+    const snapshot = this.getPerformanceSnapshot();
+    this.setMetric("nodes", `${snapshot.totalTopics.toLocaleString()} / ${snapshot.layoutVisible.toLocaleString()}`);
+    this.setMetric("rendered", snapshot.rendered.toLocaleString());
+    this.setMetric("rate", `${snapshot.renderRate.toFixed(1)}%`);
+    this.setMetric("fps", snapshot.fps ? snapshot.fps.toFixed(0) : "\u2014");
+    this.setMetric("frame", `${snapshot.frameP95.toFixed(2)} ms`);
+    this.setMetric("pipeline", `${snapshot.cullMs.toFixed(2)} / ${snapshot.drawMs.toFixed(2)} ms`);
+    this.setMetric("layout", `${snapshot.layoutMs.toFixed(2)} ms \xB7 L${snapshot.maxDepth + 1}`);
+    this.setMetric("scale", `${(snapshot.scale * 100).toFixed(snapshot.scale < 0.1 ? 2 : 0)}%`);
+    this.setMetric(
+      "memory",
+      `${snapshot.domElements} / ${snapshot.heapMB === null ? "n/a" : `${snapshot.heapMB.toFixed(1)} MB`}`
+    );
+  }
+  setMetric(name, value) {
+    const element = this.hud.querySelector(`[data-metric="${name}"]`);
+    if (element) element.textContent = value;
+  }
+  showStatus(message, error = false) {
+    this.status.textContent = message;
+    this.status.dataset.tone = error ? "error" : "success";
+    this.status.classList.add("is-visible");
+    window.setTimeout(() => this.status.classList.remove("is-visible"), 1800);
+  }
+  listen(target, event, listener, options) {
+    target.addEventListener(event, listener, options);
+    this.cleanups.push(() => target.removeEventListener(event, listener, options));
+  }
+  assertAlive() {
+    if (this.destroyed) throw new Error("MindMap has been destroyed");
+  }
+};
+
+export { Camera, CanvasRenderer, EventEmitter, History, MindMap, MindMapEngine, MindMapLayout, PluginManager, RollingMetrics, SpatialIndex, TopicStore, resolveLod };