@ai-matrx/canvas 0.0.0-bootstrap.0 → 0.1.1

package/dist/react.cjs

@@ -0,0 +1,1477 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.ts
+var react_exports = {};
+__export(react_exports, {
+  CanvasColumn: () => CanvasColumn,
+  CanvasFrame: () => CanvasFrame,
+  CanvasPaneView: () => CanvasPaneView,
+  CanvasProvider: () => CanvasProvider,
+  CanvasToggle: () => CanvasToggle,
+  defineCanvasKind: () => defineCanvasKind,
+  getCanvasKind: () => getCanvasKind,
+  itemTitle: () => itemTitle,
+  listCanvasKinds: () => listCanvasKinds,
+  registerCanvasKind: () => registerCanvasKind,
+  registerCanvasKinds: () => registerCanvasKinds,
+  useCanvas: () => useCanvas,
+  useCanvasColumnWidth: () => useCanvasColumnWidth,
+  useCanvasHostPorts: () => useCanvasHostPorts,
+  useCanvasIsPresented: () => useCanvasIsPresented,
+  useCanvasKind: () => useCanvasKind,
+  useCanvasKinds: () => useCanvasKinds,
+  useCanvasState: () => useCanvasState,
+  useOptionalCanvas: () => useOptionalCanvas,
+  useOptionalCanvasState: () => useOptionalCanvasState
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/provider.tsx
+var import_react = require("react");
+
+// src/core/types.ts
+var CANVAS_MIN_WIDTH = 360;
+var CANVAS_DEFAULT_WIDTH = 640;
+var CANVAS_MIN_SPLIT_FRACTION = 0.12;
+
+// src/core/ids.ts
+var SEP = "::";
+function canvasItemId(kind, key) {
+  return `${kind}${SEP}${key}`;
+}
+function paneIdFromSeq(seq) {
+  return `pane-${seq}`;
+}
+function splitIdFromSeq(seq) {
+  return `split-${seq}`;
+}
+function findNonJson(value, path = "data") {
+  if (value === null) return null;
+  switch (typeof value) {
+    case "string":
+    case "boolean":
+      return null;
+    case "number":
+      return Number.isFinite(value) ? null : path;
+    case "object": {
+      if (Array.isArray(value)) {
+        for (let i = 0; i < value.length; i++) {
+          const bad = findNonJson(value[i], `${path}[${i}]`);
+          if (bad) return bad;
+        }
+        return null;
+      }
+      const proto = Object.getPrototypeOf(value);
+      if (proto !== Object.prototype && proto !== null) return path;
+      for (const [k, v] of Object.entries(value)) {
+        if (v === void 0) continue;
+        const bad = findNonJson(v, `${path}.${k}`);
+        if (bad) return bad;
+      }
+      return null;
+    }
+    default:
+      return path;
+  }
+}
+
+// src/core/layout.ts
+function listPaneIds(node) {
+  if (node.type === "pane") return [node.paneId];
+  return node.children.flatMap(listPaneIds);
+}
+function evenSizes(count) {
+  return Array.from({ length: count }, () => 1 / count);
+}
+function normalizeSizes(sizes, count) {
+  if (sizes.length !== count || sizes.some((s) => !Number.isFinite(s) || s <= 0)) {
+    return evenSizes(count);
+  }
+  const total = sizes.reduce((sum, s) => sum + s, 0);
+  return sizes.map((s) => s / total);
+}
+function splitPane(node, paneId, newPaneId, orientation, newSplitId) {
+  if (node.type === "pane") {
+    if (node.paneId !== paneId) return node;
+    return {
+      type: "split",
+      id: newSplitId,
+      orientation,
+      children: [node, { type: "pane", paneId: newPaneId }],
+      sizes: [0.5, 0.5]
+    };
+  }
+  const index = node.children.findIndex(
+    (child) => child.type === "pane" && child.paneId === paneId
+  );
+  if (index >= 0 && node.orientation === orientation) {
+    const share = node.sizes[index] ?? 1 / node.children.length;
+    const children = [...node.children];
+    children.splice(index + 1, 0, { type: "pane", paneId: newPaneId });
+    const sizes = [...node.sizes];
+    sizes.splice(index, 1, share / 2, share / 2);
+    return { ...node, children, sizes: normalizeSizes(sizes, children.length) };
+  }
+  return {
+    ...node,
+    children: node.children.map(
+      (child) => splitPane(child, paneId, newPaneId, orientation, newSplitId)
+    )
+  };
+}
+function removePane(node, paneId) {
+  if (node.type === "pane") return node.paneId === paneId ? null : node;
+  const children = [];
+  const sizes = [];
+  node.children.forEach((child, i) => {
+    const next = removePane(child, paneId);
+    if (next) {
+      children.push(next);
+      sizes.push(node.sizes[i] ?? 1 / node.children.length);
+    }
+  });
+  if (children.length === 0) return null;
+  if (children.length === 1) return children[0] ?? null;
+  return { ...node, children, sizes: normalizeSizes(sizes, children.length) };
+}
+function resizeSplit(node, splitId, sizes) {
+  if (node.type === "pane") return node;
+  if (node.id === splitId) {
+    const clamped = sizes.map((s) => Math.max(CANVAS_MIN_SPLIT_FRACTION, s));
+    return { ...node, sizes: normalizeSizes(clamped, node.children.length) };
+  }
+  return {
+    ...node,
+    children: node.children.map((child) => resizeSplit(child, splitId, sizes))
+  };
+}
+function isValidLayout(node, knownPanes, seen = /* @__PURE__ */ new Set()) {
+  if (!node || typeof node !== "object") return false;
+  const n = node;
+  if (n.type === "pane") {
+    const id = n.paneId;
+    if (typeof id !== "string" || !knownPanes.has(id) || seen.has(id)) return false;
+    seen.add(id);
+    return true;
+  }
+  if (n.type !== "split") return false;
+  if (typeof n.id !== "string") return false;
+  if (n.orientation !== "horizontal" && n.orientation !== "vertical") return false;
+  if (!Array.isArray(n.children) || n.children.length < 2) return false;
+  if (!Array.isArray(n.sizes) || n.sizes.length !== n.children.length) return false;
+  return n.children.every((child) => isValidLayout(child, knownPanes, seen));
+}
+
+// src/core/reducer.ts
+var P = "matrxCanvas/";
+var canvasActions = {
+  open: (input) => ({ type: `${P}open`, payload: { ...input, now: Date.now() } }),
+  update: (itemId, patch) => ({
+    type: `${P}update`,
+    payload: { itemId, ...patch, now: Date.now() }
+  }),
+  /** Gives an item a new identity in place (e.g. a draft that was just saved and now has an id). */
+  rekey: (itemId, key) => ({ type: `${P}rekey`, payload: { itemId, key } }),
+  closeItem: (itemId) => ({ type: `${P}closeItem`, payload: { itemId } }),
+  closeOthers: (itemId) => ({ type: `${P}closeOthers`, payload: { itemId } }),
+  activate: (itemId) => ({ type: `${P}activate`, payload: { itemId } }),
+  focusPane: (paneId) => ({ type: `${P}focusPane`, payload: { paneId } }),
+  moveItem: (itemId, toPaneId, index) => ({
+    type: `${P}moveItem`,
+    payload: { itemId, toPaneId, index }
+  }),
+  splitPane: (paneId, orientation, moveItemId) => ({
+    type: `${P}splitPane`,
+    payload: { paneId, orientation, moveItemId }
+  }),
+  closePane: (paneId) => ({ type: `${P}closePane`, payload: { paneId } }),
+  resizeSplit: (splitId, sizes) => ({
+    type: `${P}resizeSplit`,
+    payload: { splitId, sizes }
+  }),
+  setOpen: (open) => ({ type: `${P}setOpen`, payload: { open } }),
+  toggle: () => ({ type: `${P}toggle` }),
+  setFullscreen: (fullscreen) => ({ type: `${P}setFullscreen`, payload: { fullscreen } }),
+  setWidth: (width) => ({ type: `${P}setWidth`, payload: { width } }),
+  hydrate: (snapshot) => ({ type: `${P}hydrate`, payload: { snapshot } }),
+  reset: () => ({ type: `${P}reset` })
+};
+function isCanvasAction(action) {
+  return !!action && typeof action === "object" && typeof action.type === "string" && action.type.startsWith(P);
+}
+function createInitialCanvasState() {
+  const paneId = paneIdFromSeq(1);
+  return {
+    version: 1,
+    isOpen: false,
+    isFullscreen: false,
+    width: CANVAS_DEFAULT_WIDTH,
+    layout: { type: "pane", paneId },
+    panes: { [paneId]: { id: paneId, itemIds: [], activeItemId: null } },
+    items: {},
+    focusedPaneId: paneId,
+    seq: 1,
+    hydrated: false
+  };
+}
+function paneOf(state, itemId) {
+  for (const pane of Object.values(state.panes)) {
+    if (pane.itemIds.includes(itemId)) return pane;
+  }
+  return null;
+}
+function withPane(state, pane) {
+  return { ...state, panes: { ...state.panes, [pane.id]: pane } };
+}
+function nextActive(itemIds, removed, current) {
+  if (current !== removed) return current;
+  const index = itemIds.indexOf(removed);
+  const rest = itemIds.filter((id) => id !== removed);
+  return rest[Math.min(index, rest.length - 1)] ?? null;
+}
+function detachItem(state, itemId) {
+  const pane = paneOf(state, itemId);
+  if (!pane) return state;
+  return withPane(state, {
+    ...pane,
+    itemIds: pane.itemIds.filter((id) => id !== itemId),
+    activeItemId: nextActive(pane.itemIds, itemId, pane.activeItemId)
+  });
+}
+function dropPane(state, paneId) {
+  const layout = removePane(state.layout, paneId);
+  if (!layout) return state;
+  const panes = { ...state.panes };
+  delete panes[paneId];
+  const focusedPaneId = state.focusedPaneId === paneId ? listPaneIds(layout)[0] ?? state.focusedPaneId : state.focusedPaneId;
+  return { ...state, layout, panes, focusedPaneId };
+}
+function addSplit(state, paneId, orientation) {
+  const seq = state.seq + 1;
+  const newPaneId = paneIdFromSeq(seq);
+  const layout = splitPane(state.layout, paneId, newPaneId, orientation, splitIdFromSeq(seq));
+  return {
+    newPaneId,
+    state: {
+      ...state,
+      seq,
+      layout,
+      panes: { ...state.panes, [newPaneId]: { id: newPaneId, itemIds: [], activeItemId: null } },
+      focusedPaneId: newPaneId
+    }
+  };
+}
+function insertInto(state, paneId, itemId, activate, index) {
+  const pane = state.panes[paneId];
+  if (!pane) return state;
+  const itemIds = [...pane.itemIds.filter((id) => id !== itemId)];
+  const at = index === void 0 ? afterActive(itemIds, pane.activeItemId) : Math.max(0, Math.min(index, itemIds.length));
+  itemIds.splice(at, 0, itemId);
+  return withPane(state, {
+    ...pane,
+    itemIds,
+    activeItemId: activate || pane.activeItemId === null ? itemId : pane.activeItemId
+  });
+}
+function afterActive(itemIds, active) {
+  const index = active ? itemIds.indexOf(active) : -1;
+  return index < 0 ? itemIds.length : index + 1;
+}
+function clampWidth(width) {
+  return Number.isFinite(width) ? Math.max(CANVAS_MIN_WIDTH, Math.round(width)) : CANVAS_DEFAULT_WIDTH;
+}
+function sanitizeCanvasSnapshot(raw) {
+  if (!raw || typeof raw !== "object") return null;
+  const s = raw;
+  if (s.version !== 1 || !s.panes || !s.items || !s.layout) return null;
+  const paneIds = new Set(Object.keys(s.panes));
+  if (!isValidLayout(s.layout, paneIds)) return null;
+  const layoutPanes = new Set(listPaneIds(s.layout));
+  if (layoutPanes.size !== paneIds.size) return null;
+  const items = {};
+  for (const [id, item] of Object.entries(s.items)) {
+    if (item && typeof item.kind === "string" && typeof item.key === "string" && canvasItemId(item.kind, item.key) === id) {
+      items[id] = item;
+    }
+  }
+  const panes = {};
+  for (const [id, pane] of Object.entries(s.panes)) {
+    const itemIds = (Array.isArray(pane.itemIds) ? pane.itemIds : []).filter((itemId) => itemId in items);
+    const activeItemId = pane.activeItemId && itemIds.includes(pane.activeItemId) ? pane.activeItemId : itemIds[0] ?? null;
+    panes[id] = { id, itemIds, activeItemId };
+  }
+  const focused = s.focusedPaneId && paneIds.has(s.focusedPaneId) ? s.focusedPaneId : listPaneIds(s.layout)[0];
+  if (!focused) return null;
+  const layout = normalizeLayout(s.layout);
+  const seq = Math.max(typeof s.seq === "number" && Number.isFinite(s.seq) ? s.seq : 0, highestIdNumber(layout));
+  return {
+    version: 1,
+    isOpen: s.isOpen === true,
+    // Full screen is a moment, not a preference: a reload never starts there.
+    isFullscreen: false,
+    width: clampWidth(typeof s.width === "number" ? s.width : CANVAS_DEFAULT_WIDTH),
+    layout,
+    panes,
+    items,
+    focusedPaneId: focused,
+    seq,
+    hydrated: true
+  };
+}
+function normalizeLayout(node) {
+  if (node.type === "pane") return node;
+  return { ...node, sizes: normalizeSizes(node.sizes, node.children.length), children: node.children.map(normalizeLayout) };
+}
+function highestIdNumber(node) {
+  const own = Number((node.type === "pane" ? node.paneId : node.id).split("-").pop());
+  const mine = Number.isFinite(own) ? own : 0;
+  return node.type === "pane" ? mine : Math.max(mine, ...node.children.map(highestIdNumber));
+}
+function canvasReducer(state = createInitialCanvasState(), action) {
+  if (!isCanvasAction(action)) return state;
+  switch (action.type) {
+    case `${P}open`: {
+      const { kind, key, title, data, target = "focused", reveal = true, activate = true, now } = action.payload;
+      const itemId = canvasItemId(kind, key);
+      const existing = state.items[itemId];
+      let next = state;
+      if (existing) {
+        const item = {
+          ...existing,
+          ...data !== void 0 ? { data } : {},
+          ...title !== void 0 ? { title } : {},
+          updatedAt: now
+        };
+        next = { ...next, items: { ...next.items, [itemId]: item } };
+        const pane = paneOf(next, itemId);
+        if (pane && activate) next = { ...withPane(next, { ...pane, activeItemId: itemId }), focusedPaneId: pane.id };
+        if (!pane) next = insertInto(next, next.focusedPaneId, itemId, true);
+      } else {
+        const item = { id: itemId, kind, key, title: title ?? null, data: data ?? null, openedAt: now, updatedAt: now };
+        next = { ...next, items: { ...next.items, [itemId]: item } };
+        let paneId = next.focusedPaneId;
+        if (typeof target === "object" && next.panes[target.paneId]) {
+          paneId = target.paneId;
+        } else if (target === "split-right" || target === "split-down") {
+          const split = addSplit(next, next.focusedPaneId, target === "split-right" ? "horizontal" : "vertical");
+          next = split.state;
+          paneId = split.newPaneId;
+        }
+        next = insertInto(next, paneId, itemId, activate);
+        if (activate) next = { ...next, focusedPaneId: paneId };
+      }
+      return reveal ? { ...next, isOpen: true } : next;
+    }
+    case `${P}update`: {
+      const { itemId, data, title, now } = action.payload;
+      const item = state.items[itemId];
+      if (!item) return state;
+      return {
+        ...state,
+        items: {
+          ...state.items,
+          [itemId]: { ...item, ...data !== void 0 ? { data } : {}, ...title !== void 0 ? { title } : {}, updatedAt: now }
+        }
+      };
+    }
+    case `${P}rekey`: {
+      const { itemId, key } = action.payload;
+      const item = state.items[itemId];
+      if (!item || item.key === key) return state;
+      const nextId = canvasItemId(item.kind, key);
+      if (state.items[nextId]) return canvasReducer(canvasReducer(state, canvasActions.closeItem(itemId)), canvasActions.activate(nextId));
+      const items = { ...state.items, [nextId]: { ...item, id: nextId, key } };
+      delete items[itemId];
+      const panes = {};
+      for (const pane of Object.values(state.panes)) {
+        panes[pane.id] = pane.itemIds.includes(itemId) ? {
+          ...pane,
+          itemIds: pane.itemIds.map((id) => id === itemId ? nextId : id),
+          activeItemId: pane.activeItemId === itemId ? nextId : pane.activeItemId
+        } : pane;
+      }
+      return { ...state, items, panes };
+    }
+    case `${P}closeItem`: {
+      const { itemId } = action.payload;
+      if (!state.items[itemId]) return state;
+      const pane = paneOf(state, itemId);
+      let next = detachItem(state, itemId);
+      const items = { ...next.items };
+      delete items[itemId];
+      next = { ...next, items };
+      if (pane && next.panes[pane.id]?.itemIds.length === 0) next = dropPane(next, pane.id);
+      return next;
+    }
+    case `${P}closeOthers`: {
+      const { itemId } = action.payload;
+      const pane = paneOf(state, itemId);
+      if (!pane) return state;
+      const items = { ...state.items };
+      for (const id of pane.itemIds) if (id !== itemId) delete items[id];
+      return { ...withPane(state, { ...pane, itemIds: [itemId], activeItemId: itemId }), items };
+    }
+    case `${P}activate`: {
+      const pane = paneOf(state, action.payload.itemId);
+      if (!pane) return state;
+      return { ...withPane(state, { ...pane, activeItemId: action.payload.itemId }), focusedPaneId: pane.id };
+    }
+    case `${P}focusPane`:
+      return state.panes[action.payload.paneId] ? { ...state, focusedPaneId: action.payload.paneId } : state;
+    case `${P}moveItem`: {
+      const { itemId, toPaneId, index } = action.payload;
+      const from = paneOf(state, itemId);
+      if (!from || !state.panes[toPaneId]) return state;
+      if (from.id === toPaneId && index === void 0) return state.focusedPaneId === toPaneId ? state : { ...state, focusedPaneId: toPaneId };
+      let next = from.id === toPaneId ? state : detachItem(state, itemId);
+      next = insertInto(next, toPaneId, itemId, true, index);
+      next = { ...next, focusedPaneId: toPaneId };
+      if (from.id !== toPaneId && next.panes[from.id]?.itemIds.length === 0) next = dropPane(next, from.id);
+      return next;
+    }
+    case `${P}splitPane`: {
+      const { paneId, orientation, moveItemId } = action.payload;
+      const pane = state.panes[paneId];
+      if (!pane) return state;
+      const split = addSplit(state, paneId, orientation);
+      let next = split.state;
+      if (moveItemId && pane.itemIds.includes(moveItemId) && pane.itemIds.length > 1) {
+        next = detachItem(next, moveItemId);
+        next = insertInto(next, split.newPaneId, moveItemId, true);
+      }
+      return next;
+    }
+    case `${P}closePane`: {
+      const pane = state.panes[action.payload.paneId];
+      if (!pane) return state;
+      const onlyPane = listPaneIds(state.layout).length === 1;
+      if (onlyPane) return { ...state, isOpen: false, isFullscreen: false };
+      const items = { ...state.items };
+      for (const id of pane.itemIds) delete items[id];
+      return dropPane({ ...state, items }, pane.id);
+    }
+    case `${P}resizeSplit`:
+      return { ...state, layout: resizeSplit(state.layout, action.payload.splitId, action.payload.sizes) };
+    case `${P}setOpen`:
+      return action.payload.open === state.isOpen ? state : { ...state, isOpen: action.payload.open, isFullscreen: action.payload.open ? state.isFullscreen : false };
+    case `${P}toggle`:
+      return { ...state, isOpen: !state.isOpen, isFullscreen: state.isOpen ? false : state.isFullscreen };
+    case `${P}setFullscreen`:
+      return { ...state, isFullscreen: action.payload.fullscreen, isOpen: action.payload.fullscreen ? true : state.isOpen };
+    case `${P}setWidth`:
+      return { ...state, width: clampWidth(action.payload.width) };
+    case `${P}hydrate`: {
+      const snapshot = action.payload.snapshot ? sanitizeCanvasSnapshot(action.payload.snapshot) : null;
+      if (!snapshot) return { ...state, hydrated: true };
+      let next = snapshot;
+      for (const item of Object.values(state.items)) {
+        const pane = paneOf(state, item.id);
+        next = { ...next, items: { ...next.items, [item.id]: item } };
+        if (!paneOf(next, item.id)) next = insertInto(next, next.focusedPaneId, item.id, pane?.activeItemId === item.id);
+      }
+      return { ...next, isOpen: next.isOpen || state.isOpen, hydrated: true };
+    }
+    case `${P}reset`:
+      return { ...createInitialCanvasState(), hydrated: true };
+    default:
+      return state;
+  }
+}
+
+// src/core/store.ts
+function createCanvasStore(initial) {
+  let state = initial ?? createInitialCanvasState();
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    getState: () => state,
+    dispatch(action) {
+      const next = canvasReducer(state, action);
+      if (next === state) return;
+      state = next;
+      for (const listener of [...listeners]) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+
+// src/core/persistence.ts
+var CANVAS_STORAGE_KEY = "ai-matrx.canvas.v1";
+function createLocalStorageCanvasPersistence(key = CANVAS_STORAGE_KEY, storage = typeof window === "undefined" ? null : safeLocalStorage()) {
+  return {
+    load() {
+      if (!storage) throw new Error("Canvas storage is unavailable; allow browser storage or provide a persistence port.");
+      const raw = storage.getItem(key);
+      if (!raw) return null;
+      return JSON.parse(raw);
+    },
+    save(snapshot) {
+      if (!storage) throw new Error("Canvas storage is unavailable; allow browser storage or provide a persistence port.");
+      storage.setItem(key, JSON.stringify(snapshot));
+    }
+  };
+}
+function safeLocalStorage() {
+  try {
+    const probe = "__mxc_probe__";
+    window.localStorage.setItem(probe, "1");
+    window.localStorage.removeItem(probe);
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function toPersistableSnapshot(state, isRestorable) {
+  const keep = new Set(
+    Object.values(state.items).filter((item) => isRestorable(item.kind)).map((item) => item.id)
+  );
+  if (keep.size === Object.keys(state.items).length) return state;
+  const items = Object.fromEntries(Object.entries(state.items).filter(([id]) => keep.has(id)));
+  let layout = state.layout;
+  const panes = {};
+  for (const pane of Object.values(state.panes)) {
+    const itemIds = pane.itemIds.filter((id) => keep.has(id));
+    if (itemIds.length === 0 && pane.itemIds.length > 0) {
+      const pruned = removePane(layout, pane.id);
+      if (pruned) {
+        layout = pruned;
+        continue;
+      }
+    }
+    panes[pane.id] = {
+      ...pane,
+      itemIds,
+      activeItemId: pane.activeItemId && keep.has(pane.activeItemId) ? pane.activeItemId : itemIds[0] ?? null
+    };
+  }
+  const focusedPaneId = panes[state.focusedPaneId] ? state.focusedPaneId : Object.values(panes)[0]?.id ?? state.focusedPaneId;
+  return { ...state, items, panes, layout, focusedPaneId };
+}
+
+// src/core/controller.ts
+var consoleCanvasErrorSink = (report) => {
+  console.error(`[@ai-matrx/canvas] ${report.code}: ${report.message}`, report.detail ?? "");
+};
+function createCanvasController(options) {
+  const { store, persistence = null } = options;
+  const onError = options.onError ?? consoleCanvasErrorSink;
+  const isRestorable = options.isRestorable ?? (() => true);
+  const dispatch = (action) => store.dispatch(action);
+  let presentations = 0;
+  const presentationListeners = /* @__PURE__ */ new Set();
+  const notifyPresentation = () => {
+    for (const listener of [...presentationListeners]) listener();
+  };
+  const controller = {
+    store,
+    getState: () => store.getState(),
+    open(input) {
+      if (options.isKnownKind && !options.isKnownKind(input.kind)) {
+        onError({ code: "unknown-kind", message: `No canvas kind "${input.kind}" is registered.`, detail: input });
+        return null;
+      }
+      if (input.data !== void 0) {
+        const bad = findNonJson(input.data);
+        if (bad) {
+          onError({
+            code: "non-json-data",
+            message: `Canvas data for "${input.kind}" must be plain JSON; ${bad} is not.`,
+            detail: { kind: input.kind, key: input.key }
+          });
+          return null;
+        }
+      }
+      dispatch(canvasActions.open(input));
+      return canvasItemId(input.kind, input.key);
+    },
+    update(itemId, patch) {
+      if (patch.data !== void 0) {
+        const bad = findNonJson(patch.data);
+        if (bad) {
+          onError({ code: "non-json-data", message: `Canvas update for ${itemId} must be plain JSON; ${bad} is not.` });
+          return false;
+        }
+      }
+      if (!store.getState().items[itemId]) return false;
+      dispatch(canvasActions.update(itemId, patch));
+      return true;
+    },
+    rekey(itemId, key) {
+      const item = store.getState().items[itemId];
+      if (!item) return null;
+      dispatch(canvasActions.rekey(itemId, key));
+      return canvasItemId(item.kind, key);
+    },
+    close: (itemId) => dispatch(canvasActions.closeItem(itemId)),
+    closeOthers: (itemId) => dispatch(canvasActions.closeOthers(itemId)),
+    activate: (itemId) => dispatch(canvasActions.activate(itemId)),
+    focusPane: (paneId) => dispatch(canvasActions.focusPane(paneId)),
+    moveItem: (itemId, toPaneId, index) => dispatch(canvasActions.moveItem(itemId, toPaneId, index)),
+    splitPane: (paneId, orientation, moveItemId) => dispatch(canvasActions.splitPane(paneId, orientation, moveItemId)),
+    closePane: (paneId) => dispatch(canvasActions.closePane(paneId)),
+    resizeSplit: (splitId, sizes) => dispatch(canvasActions.resizeSplit(splitId, sizes)),
+    show: () => dispatch(canvasActions.setOpen(true)),
+    hide: () => dispatch(canvasActions.setOpen(false)),
+    toggle: () => dispatch(canvasActions.toggle()),
+    setFullscreen: (fullscreen) => dispatch(canvasActions.setFullscreen(fullscreen)),
+    setWidth: (width) => dispatch(canvasActions.setWidth(width)),
+    has: (kind, key) => canvasItemId(kind, key) in store.getState().items,
+    isPresented: () => presentations > 0,
+    registerPresentation() {
+      presentations += 1;
+      notifyPresentation();
+      let done = false;
+      return () => {
+        if (done) return;
+        done = true;
+        presentations -= 1;
+        notifyPresentation();
+      };
+    },
+    subscribePresentation(listener) {
+      presentationListeners.add(listener);
+      return () => presentationListeners.delete(listener);
+    },
+    start() {
+      let disposed = false;
+      let timer = null;
+      let lastSaved = null;
+      const save = () => {
+        timer = null;
+        const state = store.getState();
+        if (!persistence || !state.hydrated || state === lastSaved) return;
+        lastSaved = state;
+        try {
+          void Promise.resolve(persistence.save(toPersistableSnapshot(state, isRestorable))).catch(
+            (error) => onError({ code: "persistence-save", message: "Saving the canvas layout failed.", detail: error })
+          );
+        } catch (error) {
+          onError({ code: "persistence-save", message: "Saving the canvas layout failed.", detail: error });
+        }
+      };
+      let seen = store.getState();
+      const unsubscribe = store.subscribe(() => {
+        if (!persistence || disposed) return;
+        const current = store.getState();
+        if (current === seen) return;
+        seen = current;
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(save, options.saveDelayMs ?? 250);
+      });
+      if (store.getState().hydrated) {
+      } else if (!persistence) {
+        dispatch(canvasActions.hydrate(null));
+      } else {
+        Promise.resolve().then(() => persistence.load()).then(
+          (snapshot) => {
+            if (disposed) return;
+            const openedThisSession = store.getState().isOpen;
+            const validSnapshot = snapshot === null ? null : sanitizeCanvasSnapshot(snapshot);
+            if (snapshot !== null && validSnapshot === null) {
+              onError({ code: "persistence-load", message: "The saved canvas layout is invalid. Clear the saved layout or repair the persistence port." });
+            }
+            dispatch(canvasActions.hydrate(validSnapshot));
+            if (!openedThisSession && options.mayRestoreOpen && !options.mayRestoreOpen() && store.getState().isOpen) {
+              dispatch(canvasActions.setOpen(false));
+            }
+          },
+          (error) => {
+            onError({ code: "persistence-load", message: "The saved canvas layout could not be read.", detail: error });
+            if (!disposed) dispatch(canvasActions.hydrate(null));
+          }
+        );
+      }
+      return () => {
+        disposed = true;
+        unsubscribe();
+        if (timer) {
+          clearTimeout(timer);
+          save();
+        }
+      };
+    }
+  };
+  return controller;
+}
+
+// src/core/selectors.ts
+var selectCanvasIsOpen = (s) => s.isOpen;
+var selectCanvasIsFullscreen = (s) => s.isFullscreen;
+var selectCanvasWidth = (s) => s.width;
+var selectCanvasLayout = (s) => s.layout;
+var selectCanvasItemCount = (s) => Object.keys(s.items).length;
+function selectCanvasPaneCount(s) {
+  return listPaneIds(s.layout).length;
+}
+
+// src/react/registry.ts
+function defineCanvasKind(kind) {
+  if (!kind.component && !kind.load) {
+    throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" needs a component or a load().`);
+  }
+  return kind;
+}
+var REGISTRY = /* @__PURE__ */ Symbol.for("ai-matrx.canvas.kinds");
+function registry() {
+  const g = globalThis;
+  g[REGISTRY] ??= { kinds: /* @__PURE__ */ new Map(), listeners: /* @__PURE__ */ new Set(), version: 0 };
+  return g[REGISTRY];
+}
+function notify(state) {
+  state.version += 1;
+  for (const listener of [...state.listeners]) listener();
+}
+function registerCanvasKind(kind) {
+  const state = registry();
+  state.kinds.set(kind.id, kind);
+  notify(state);
+  return () => {
+    if (state.kinds.get(kind.id) === kind) {
+      state.kinds.delete(kind.id);
+      notify(state);
+    }
+  };
+}
+function registerCanvasKinds(kinds) {
+  const undo = kinds.map(registerCanvasKind);
+  return () => undo.forEach((fn) => fn());
+}
+function getCanvasKind(id) {
+  return registry().kinds.get(id);
+}
+function listCanvasKinds() {
+  return [...registry().kinds.values()];
+}
+function subscribeCanvasKinds(listener) {
+  const state = registry();
+  state.listeners.add(listener);
+  return () => state.listeners.delete(listener);
+}
+function getCanvasKindsVersion() {
+  return registry().version;
+}
+
+// src/react/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var PHONE_MAX_WIDTH = 767;
+var isPhoneViewport = () => typeof window !== "undefined" && window.innerWidth <= PHONE_MAX_WIDTH;
+function escapeBelongsElsewhere(event) {
+  if (event.defaultPrevented) return true;
+  const active = typeof document === "undefined" ? null : document.activeElement;
+  return !!active?.closest?.('[role="menu"], [role="dialog"], [role="alertdialog"], [role="listbox"]');
+}
+var CanvasContext = (0, import_react.createContext)(null);
+function CanvasProvider({
+  children,
+  store,
+  persistence,
+  onError,
+  hotkeys = true,
+  itemActions,
+  popOut
+}) {
+  const [controller] = (0, import_react.useState)(
+    () => createCanvasController({
+      store: store ?? createCanvasStore(),
+      persistence: persistence === void 0 ? createLocalStorageCanvasPersistence() : persistence,
+      isRestorable: (kind) => getCanvasKind(kind)?.restore !== false,
+      mayRestoreOpen: () => !isPhoneViewport(),
+      onError
+    })
+  );
+  (0, import_react.useEffect)(() => controller.start(), [controller]);
+  (0, import_react.useEffect)(() => {
+    if (!hotkeys) return;
+    const onKey = (event) => {
+      if (!controller.isPresented()) return;
+      if (event.key === "\\" && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey) {
+        event.preventDefault();
+        controller.toggle();
+      } else if (event.key === "Escape" && controller.getState().isFullscreen && !escapeBelongsElsewhere(event)) {
+        controller.setFullscreen(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [controller, hotkeys]);
+  const ports = {
+    ...itemActions ? { itemActions } : {},
+    ...popOut ? { popOut } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CanvasContext.Provider, { value: { controller, ports }, children });
+}
+function useCanvasContext() {
+  const value = (0, import_react.useContext)(CanvasContext);
+  if (!value) throw new Error("[@ai-matrx/canvas] useCanvas* must be used inside <CanvasProvider>.");
+  return value;
+}
+function useCanvas() {
+  return useCanvasContext().controller;
+}
+function useOptionalCanvas() {
+  return (0, import_react.useContext)(CanvasContext)?.controller ?? null;
+}
+function useCanvasHostPorts() {
+  return useCanvasContext().ports;
+}
+function useRegisterCanvasPresence() {
+  const controller = (0, import_react.useContext)(CanvasContext)?.controller;
+  (0, import_react.useEffect)(() => controller?.registerPresentation(), [controller]);
+}
+var noPresence = () => () => void 0;
+function useCanvasIsPresented() {
+  const controller = (0, import_react.useContext)(CanvasContext)?.controller;
+  return (0, import_react.useSyncExternalStore)(
+    controller ? controller.subscribePresentation : noPresence,
+    () => controller?.isPresented() ?? false,
+    () => false
+  );
+}
+function useCanvasState(selector) {
+  const { store } = useCanvasContext().controller;
+  return (0, import_react.useSyncExternalStore)(
+    store.subscribe,
+    () => selector(store.getState()),
+    () => selector(store.getState())
+  );
+}
+var NO_SUBSCRIPTION = () => () => void 0;
+function useOptionalCanvasState(selector, fallback) {
+  const store = (0, import_react.useContext)(CanvasContext)?.controller.store;
+  const read = () => store ? selector(store.getState()) : fallback;
+  return (0, import_react.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, read, read);
+}
+function useCanvasKinds() {
+  (0, import_react.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
+  return listCanvasKinds();
+}
+function useCanvasKind(id) {
+  (0, import_react.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
+  return getCanvasKind(id);
+}
+
+// src/react/CanvasColumn.tsx
+var import_react3 = require("react");
+var import_tap_target2 = require("@ai-matrx/tap-target");
+
+// src/react/CanvasPane.tsx
+var import_react2 = require("react");
+var import_tap_target = require("@ai-matrx/tap-target");
+var Menu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+
+// src/react/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Glyph({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children
+    }
+  );
+}
+var CloseIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12" })
+] });
+var MaximizeIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3h6v6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21 3-7 7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3 21 7-7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 21H3v-6" })
+] });
+var MinimizeIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m14 10 7-7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 10h-6V4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3 21 7-7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 14h6v6" })
+] });
+var MoreIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "19", r: "1" })
+] });
+var SplitRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 3v18" })
+] });
+var SplitDownIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12h18" })
+] });
+var PanelRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3v18" })
+] });
+var PopOutIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3h6v6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 14 21 3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+] });
+var AlertIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 8v4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 16h.01" })
+] });
+
+// src/react/CanvasPane.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DRAG_MIME = "application/x-matrx-canvas-item";
+var LAZY = /* @__PURE__ */ Symbol.for("ai-matrx.canvas.lazy");
+function kindComponent(kind) {
+  if (kind.component) return kind.component;
+  const holder = kind;
+  if (!holder[LAZY] && kind.load) holder[LAZY] = (0, import_react2.lazy)(kind.load);
+  const resolved = holder[LAZY];
+  if (!resolved) throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" has nothing to render.`);
+  return resolved;
+}
+function resetKindComponent(kind) {
+  if (kind) delete kind[LAZY];
+}
+function itemTitle(item, kind) {
+  if (item.title) return item.title;
+  if (kind?.title) {
+    try {
+      const title = kind.title(item.data, item);
+      if (title) return title;
+    } catch {
+    }
+  }
+  return kind?.label ?? item.kind;
+}
+function CanvasPaneView({ paneId }) {
+  const canvas = useCanvas();
+  const pane = useCanvasState((s) => s.panes[paneId]);
+  const items = useCanvasState((s) => s.items);
+  const focused = useCanvasState((s) => s.focusedPaneId === paneId);
+  const [dropActive, setDropActive] = (0, import_react2.useState)(false);
+  if (!pane) return null;
+  const active = pane.activeItemId ? items[pane.activeItemId] : void 0;
+  const onDragOver = (event) => {
+    if (!event.dataTransfer.types.includes(DRAG_MIME)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+    setDropActive(true);
+  };
+  const onDrop = (event) => {
+    setDropActive(false);
+    const itemId = event.dataTransfer.getData(DRAG_MIME);
+    if (!itemId) return;
+    event.preventDefault();
+    canvas.moveItem(itemId, paneId);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "section",
+    {
+      className: "mxc-pane",
+      "data-focused": focused ? "" : void 0,
+      "data-drop": dropActive ? "" : void 0,
+      onPointerDownCapture: () => {
+        if (!focused) canvas.focusPane(paneId);
+      },
+      onDragOver,
+      onDragLeave: () => setDropActive(false),
+      onDrop,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaneHeader, { paneId, itemIds: pane.itemIds, activeItemId: pane.activeItemId, activeItem: active }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-pane-body", children: pane.itemIds.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Launcher, { paneId }) : pane.itemIds.map((itemId) => {
+          const item = items[itemId];
+          if (!item) return null;
+          const isActive = itemId === pane.activeItemId;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ItemBody, { item, paneId, isActive, isFocused: focused && isActive }, itemId);
+        }) })
+      ]
+    }
+  );
+}
+function PaneHeader({
+  paneId,
+  itemIds,
+  activeItemId,
+  activeItem
+}) {
+  const canvas = useCanvas();
+  const isFullscreen = useCanvasState((s) => s.isFullscreen);
+  const paneCount = useCanvasState(selectCanvasPaneCount);
+  const kind = useCanvasKind(activeItem?.kind ?? "");
+  const kindProps = activeItem && kind ? { item: activeItem, data: activeItem.data, paneId, isFocused: true, canvas } : null;
+  const HeaderAction = kind?.HeaderAction;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "mxc-pane-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-tabs", role: "tablist", "aria-label": "Canvas tabs", children: itemIds.map((itemId, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tab, { itemId, paneId, index, active: itemId === activeItemId }, itemId)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mxc-pane-actions", children: [
+      HeaderAction && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HeaderAction, { ...kindProps }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaneMenu, { paneId, activeItem, kind, kindProps, canSplitMove: itemIds.length > 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_tap_target.TapTargetButtonTransparent,
+        {
+          className: "mxc-desktop-only",
+          ariaLabel: isFullscreen ? "Exit full screen" : "Full screen",
+          icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MinimizeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MaximizeIcon, {}),
+          onClick: () => canvas.setFullscreen(!isFullscreen)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_tap_target.TapTargetButtonTransparent,
+        {
+          className: "mxc-phone-only",
+          ariaLabel: "Hide canvas",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PanelRightIcon, {}),
+          onClick: () => canvas.hide()
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_tap_target.TapTargetButtonTransparent,
+        {
+          ariaLabel: paneCount > 1 ? "Close pane" : "Close canvas",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, {}),
+          onClick: () => canvas.closePane(paneId)
+        }
+      )
+    ] })
+  ] });
+}
+function Tab({
+  itemId,
+  paneId,
+  index,
+  active
+}) {
+  const canvas = useCanvas();
+  const item = useCanvasState((s) => s.items[itemId]);
+  const kind = useCanvasKind(item?.kind ?? "");
+  const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (active) ref.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [active]);
+  if (!item) return null;
+  const Icon = kind?.icon;
+  const title = itemTitle(item, kind);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref,
+      className: "mxc-tab",
+      role: "tab",
+      "aria-selected": active,
+      "data-active": active ? "" : void 0,
+      tabIndex: active ? 0 : -1,
+      title,
+      draggable: true,
+      onDragStart: (event) => {
+        event.dataTransfer.setData(DRAG_MIME, itemId);
+        event.dataTransfer.effectAllowed = "move";
+      },
+      onDragOver: (event) => {
+        if (event.dataTransfer.types.includes(DRAG_MIME)) event.preventDefault();
+      },
+      onDrop: (event) => {
+        const dragged = event.dataTransfer.getData(DRAG_MIME);
+        if (!dragged) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (dragged !== itemId) canvas.moveItem(dragged, paneId, index);
+      },
+      onClick: () => canvas.activate(itemId),
+      onAuxClick: (event) => {
+        if (event.button === 1) canvas.close(itemId);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") canvas.activate(itemId);
+      },
+      children: [
+        Icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "mxc-tab-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlertIcon, { className: "mxc-tab-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mxc-tab-title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "mxc-tab-close",
+            "aria-label": `Close ${title}`,
+            onClick: (event) => {
+              event.stopPropagation();
+              canvas.close(itemId);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, { width: 12, height: 12 })
+          }
+        )
+      ]
+    }
+  );
+}
+function PaneMenu({
+  paneId,
+  activeItem,
+  kind,
+  kindProps,
+  canSplitMove
+}) {
+  const canvas = useCanvas();
+  const ports = useCanvasHostPorts();
+  const moveId = canSplitMove ? activeItem?.id : void 0;
+  const kindItems = kind?.menuItems && kindProps ? safeMenu(() => kind.menuItems?.(kindProps)) : [];
+  const hostItems = activeItem && ports.itemActions ? safeMenu(() => ports.itemActions?.(activeItem, kind)) : [];
+  const itemEntries = [...kindItems, ...hostItems];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tap_target.TapTargetButtonTransparent, { ariaLabel: "More", icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoreIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Content, { align: "end", sideOffset: 4, className: "mxc-menu", children: [
+      itemEntries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        Menu.Item,
+        {
+          onSelect: entry.onSelect,
+          className: "mxc-menu-item",
+          "data-destructive": entry.destructive ? "" : void 0,
+          children: [
+            entry.icon,
+            entry.label
+          ]
+        },
+        entry.id
+      )),
+      itemEntries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Separator, { className: "mxc-menu-separator" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Item, { className: "mxc-menu-item", onSelect: () => canvas.splitPane(paneId, "horizontal", moveId), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SplitRightIcon, {}),
+        "Split right"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Item, { className: "mxc-menu-item", onSelect: () => canvas.splitPane(paneId, "vertical", moveId), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SplitDownIcon, {}),
+        "Split down"
+      ] }),
+      activeItem && ports.popOut ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Menu.Item, { className: "mxc-menu-item", onSelect: () => ports.popOut?.(activeItem), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopOutIcon, {}),
+        "Pop out"
+      ] }) : null,
+      activeItem && canSplitMove ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Separator, { className: "mxc-menu-separator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu.Item, { className: "mxc-menu-item", onSelect: () => canvas.closeOthers(activeItem.id), children: "Close other tabs" })
+      ] }) : null
+    ] }) })
+  ] });
+}
+function safeMenu(build) {
+  try {
+    return build() ?? [];
+  } catch (error) {
+    console.error("[@ai-matrx/canvas] a menu builder threw", error);
+    return [];
+  }
+}
+function ItemBody({
+  item,
+  paneId,
+  isActive,
+  isFocused
+}) {
+  const canvas = useCanvas();
+  const kind = useCanvasKind(item.kind);
+  if (!isActive && !kind?.keepAlive) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-item", hidden: !isActive, "data-kind": item.kind, children: kind ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ItemBoundary, { item, onClose: () => canvas.close(item.id), onRetry: () => resetKindComponent(kind), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-loading", "aria-busy": "true" }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(KindRender, { kind, props: { item, data: item.data, paneId, isFocused, canvas } }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ItemProblem, { message: "This item can no longer be shown.", onClose: () => canvas.close(item.id) }) });
+}
+function KindRender({ kind, props }) {
+  const Render = kindComponent(kind);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Render, { ...props });
+}
+function ItemProblem({ message, onClose, onRetry }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mxc-problem", role: "alert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlertIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mxc-problem-actions", children: [
+      onRetry ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onRetry, children: "Try again" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onClose, children: "Close tab" })
+    ] })
+  ] });
+}
+var ItemBoundary = class extends import_react2.Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error(`[@ai-matrx/canvas] "${this.props.item.kind}" failed to render`, error, info.componentStack);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ItemProblem,
+        {
+          message: "This item failed to load.",
+          onClose: this.props.onClose,
+          onRetry: () => {
+            this.props.onRetry();
+            this.setState({ error: null });
+          }
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+function Launcher({ paneId }) {
+  const canvas = useCanvas();
+  const kinds = useCanvasKinds().filter((kind) => kind.launcher);
+  if (kinds.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-empty", children: "Nothing open" });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mxc-launcher", children: kinds.map((kind) => {
+    const Icon = kind.icon;
+    const launcher = kind.launcher;
+    if (!launcher) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "mxc-launcher-item",
+        onClick: () => canvas.open({
+          kind: kind.id,
+          key: launcher.key,
+          data: launcher.data,
+          title: launcher.title ?? null,
+          target: { paneId }
+        }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "mxc-launcher-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: launcher.title ?? kind.label })
+        ]
+      },
+      kind.id
+    );
+  }) });
+}
+
+// src/react/CanvasColumn.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MIN_MAIN_WIDTH = 420;
+function subscribeViewport(listener) {
+  window.addEventListener("resize", listener);
+  return () => window.removeEventListener("resize", listener);
+}
+function useViewportWidth() {
+  return (0, import_react3.useSyncExternalStore)(subscribeViewport, () => window.innerWidth, () => 0);
+}
+function fitWidth(width, viewport) {
+  if (viewport <= 0) return width;
+  return Math.max(CANVAS_MIN_WIDTH, Math.min(width, viewport - MIN_MAIN_WIDTH));
+}
+function useCanvasColumnWidth() {
+  const isOpen = useCanvasState(selectCanvasIsOpen);
+  const isFullscreen = useCanvasState(selectCanvasIsFullscreen);
+  const width = useCanvasState(selectCanvasWidth);
+  const viewport = useViewportWidth();
+  if (!isOpen) return 0;
+  if (isFullscreen) return null;
+  return fitWidth(width, viewport);
+}
+function CanvasColumn({ className, style, onLiveWidth }) {
+  const isOpen = useCanvasState(selectCanvasIsOpen);
+  const isFullscreen = useCanvasState(selectCanvasIsFullscreen);
+  const width = useCanvasState(selectCanvasWidth);
+  const layout = useCanvasState(selectCanvasLayout);
+  const viewport = useViewportWidth();
+  const [dragWidth, setDragWidth] = (0, import_react3.useState)(null);
+  useRegisterCanvasPresence();
+  if (!isOpen) return null;
+  const fitted = fitWidth(width, viewport);
+  const shown = dragWidth ?? fitted;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "aside",
+    {
+      className: ["mxc-column", className].filter(Boolean).join(" "),
+      "data-fullscreen": isFullscreen ? "" : void 0,
+      "aria-label": "Canvas",
+      style: { ...style, ["--mxc-width"]: `${shown}px` },
+      children: [
+        !isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          WidthHandle,
+          {
+            width: fitted,
+            onDrag: (next) => {
+              setDragWidth(next);
+              onLiveWidth?.(next);
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mxc-layout", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutNodeView, { node: layout }) })
+      ]
+    }
+  );
+}
+function WidthHandle({ width, onDrag }) {
+  const canvas = useCanvas();
+  const start = (0, import_react3.useRef)(null);
+  const clamp = (next) => {
+    const max = Math.max(CANVAS_MIN_WIDTH, window.innerWidth - MIN_MAIN_WIDTH);
+    return Math.min(max, Math.max(CANVAS_MIN_WIDTH, next));
+  };
+  const onPointerDown = (event) => {
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    start.current = { x: event.clientX, width };
+    document.documentElement.dataset.mxcResizing = "";
+  };
+  const onPointerMove = (event) => {
+    if (!start.current) return;
+    onDrag(clamp(start.current.width + (start.current.x - event.clientX)));
+  };
+  const finish = (event) => {
+    if (!start.current) return;
+    const next = clamp(start.current.width + (start.current.x - event.clientX));
+    start.current = null;
+    delete document.documentElement.dataset.mxcResizing;
+    onDrag(null);
+    canvas.setWidth(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: "mxc-width-handle",
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": "Resize canvas",
+      "aria-valuenow": width,
+      tabIndex: 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: finish,
+      onPointerCancel: finish,
+      onDoubleClick: () => canvas.setWidth(Math.round(window.innerWidth / 2)),
+      onKeyDown: (event) => {
+        if (event.key === "ArrowLeft") canvas.setWidth(clamp(width + 32));
+        if (event.key === "ArrowRight") canvas.setWidth(clamp(width - 32));
+      }
+    }
+  );
+}
+function LayoutNodeView({ node }) {
+  if (node.type === "pane") return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasPaneView, { paneId: node.paneId });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SplitView, { node });
+}
+function SplitView({ node }) {
+  const canvas = useCanvas();
+  const ref = (0, import_react3.useRef)(null);
+  const [liveSizes, setLiveSizes] = (0, import_react3.useState)(null);
+  const sizes = liveSizes ?? node.sizes;
+  const horizontal = node.orientation === "horizontal";
+  const beginDrag = (index) => (event) => {
+    const el = ref.current;
+    if (!el) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const rect = el.getBoundingClientRect();
+    const total = horizontal ? rect.width : rect.height;
+    const origin = horizontal ? event.clientX : event.clientY;
+    const base = [...node.sizes];
+    const pair = (base[index] ?? 0) + (base[index + 1] ?? 0);
+    const target = event.currentTarget;
+    document.documentElement.dataset.mxcResizing = "";
+    const compute = (pos) => {
+      const delta = (pos - origin) / total;
+      const min = 0.12;
+      const first = Math.min(pair - min, Math.max(min, (base[index] ?? 0) + delta));
+      const next = [...base];
+      next[index] = first;
+      next[index + 1] = pair - first;
+      return next;
+    };
+    const move = (e) => setLiveSizes(compute(horizontal ? e.clientX : e.clientY));
+    const up = (e) => {
+      target.removeEventListener("pointermove", move);
+      target.removeEventListener("pointerup", up);
+      target.removeEventListener("pointercancel", up);
+      delete document.documentElement.dataset.mxcResizing;
+      setLiveSizes(null);
+      canvas.resizeSplit(node.id, compute(horizontal ? e.clientX : e.clientY));
+    };
+    target.addEventListener("pointermove", move);
+    target.addEventListener("pointerup", up);
+    target.addEventListener("pointercancel", up);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: "mxc-split", "data-orientation": node.orientation, children: node.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    SplitChild,
+    {
+      size: sizes[i] ?? 1 / node.children.length,
+      handle: i < node.children.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          className: "mxc-split-handle",
+          role: "separator",
+          "aria-orientation": horizontal ? "vertical" : "horizontal",
+          onPointerDown: beginDrag(i),
+          onDoubleClick: () => canvas.resizeSplit(node.id, node.children.map(() => 1 / node.children.length))
+        }
+      ) : null,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutNodeView, { node: child })
+    },
+    child.type === "pane" ? child.paneId : child.id
+  )) });
+}
+function SplitChild({ size, handle, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mxc-split-child", style: { flexGrow: size, flexBasis: 0 }, children }),
+    handle
+  ] });
+}
+function CanvasToggle({ className }) {
+  const canvas = useCanvas();
+  const isOpen = useCanvasState(selectCanvasIsOpen);
+  const count = useCanvasState(selectCanvasItemCount);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: ["mxc-toggle", className].filter(Boolean).join(" "), "data-open": isOpen ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_tap_target2.TapTargetButtonTransparent,
+      {
+        ariaLabel: isOpen ? "Hide canvas" : "Show canvas",
+        tooltip: isOpen ? "Hide canvas (\u2318\\)" : "Show canvas (\u2318\\)",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PanelRightIcon, {}),
+        onClick: () => canvas.toggle()
+      }
+    ),
+    count > 0 && !isOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-toggle-badge", children: count }) : null
+  ] });
+}
+function CanvasFrame({ children, className }) {
+  const isFullscreen = useCanvasState(selectCanvasIsFullscreen);
+  const isOpen = useCanvasState(selectCanvasIsOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: ["mxc-frame", className].filter(Boolean).join(" "), "data-canvas-open": isOpen ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mxc-frame-main", hidden: isOpen && isFullscreen, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasColumn, {})
+  ] });
+}
+//# sourceMappingURL=react.cjs.map