@ai-matrx/canvas 0.3.0 → 0.5.0

package/dist/react.cjs

@@ -37,6 +37,7 @@ __export(react_exports, {
   CanvasColumn: () => CanvasColumn,
   CanvasFrame: () => CanvasFrame,
   CanvasHeaderButton: () => CanvasHeaderButton,
+  CanvasKindIcons: () => CanvasKindIcons,
   CanvasMenuTrigger: () => CanvasMenuTrigger,
   CanvasPaneView: () => CanvasPaneView,
   CanvasPanel: () => CanvasPanel,
@@ -59,7 +60,10 @@ __export(react_exports, {
   useCanvasKind: () => useCanvasKind,
   useCanvasKindToggle: () => useCanvasKindToggle,
   useCanvasKinds: () => useCanvasKinds,
+  useCanvasLauncherEntries: () => useCanvasLauncherEntries,
+  useCanvasLauncherEntry: () => useCanvasLauncherEntry,
   useCanvasNativeBodies: () => useCanvasNativeBodies,
+  useCanvasPresentation: () => useCanvasPresentation,
   useCanvasState: () => useCanvasState,
   useCanvasWindowId: () => useCanvasWindowId,
   useOptionalCanvas: () => useOptionalCanvas,
@@ -72,6 +76,8 @@ var import_react2 = require("react");
 
 // src/core/types.ts
 var CANVAS_MAIN_WINDOW = "main";
+var CANVAS_LAUNCHER_KIND = "canvas.launcher";
+var CANVAS_HISTORY_LIMIT = 50;
 var CANVAS_MIN_WIDTH = 360;
 var CANVAS_DEFAULT_WIDTH = 640;
 var CANVAS_MIN_SPLIT_FRACTION = 0.12;
@@ -230,6 +236,10 @@ var canvasActions = {
   }),
   /** 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 } }),
+  /** Replaces a tab's content with another item in place, remembering what it showed (Back returns). */
+  navigate: (itemId, to) => ({ type: `${P}navigate`, payload: { itemId, to, now: Date.now() } }),
+  /** Returns a tab to what it showed before its last navigate. */
+  back: (itemId) => ({ type: `${P}back`, payload: { itemId, now: Date.now() } }),
   closeItem: (itemId) => ({ type: `${P}closeItem`, payload: { itemId } }),
   closeOthers: (itemId) => ({ type: `${P}closeOthers`, payload: { itemId } }),
   activate: (itemId) => ({ type: `${P}activate`, payload: { itemId } }),
@@ -426,6 +436,63 @@ function sendHome(state, itemId, home, activate) {
   next = insertInto(next, homeFrame.focusedPaneId, itemId, activate);
   return activate ? withFrame(next, target, { focusedPaneId: homeFrame.focusedPaneId }) : next;
 }
+function newItem(kind, key, title, data, now, history) {
+  const id = canvasItemId(kind, key);
+  return {
+    id,
+    kind,
+    key,
+    title,
+    data,
+    openedAt: now,
+    updatedAt: now,
+    instance: `${now.toString(36)}:${id}`,
+    ...history && history.length > 0 ? { history: history.slice(-CANVAS_HISTORY_LIMIT) } : {}
+  };
+}
+function historyEntry(item) {
+  return { kind: item.kind, key: item.key, title: item.title, data: item.data };
+}
+function replaceInPlace(state, current, next) {
+  const pane = paneOf(state, current.id);
+  if (!pane) return state;
+  const items = { ...state.items, [next.id]: next };
+  delete items[current.id];
+  const withItems = { ...state, items };
+  const replaced = withPane(withItems, {
+    ...pane,
+    itemIds: pane.itemIds.map((id) => id === current.id ? next.id : id),
+    activeItemId: pane.activeItemId === current.id ? next.id : pane.activeItemId
+  });
+  return focus(replaced, pane.id);
+}
+function focusExisting(state, itemId) {
+  const pane = paneOf(state, itemId);
+  if (!pane) return state;
+  const next = focus(withPane(state, { ...pane, activeItemId: itemId }), pane.id);
+  const windowId = canvasWindowOfPane(next, pane.id);
+  return windowId ? withFrame(next, windowId, { isOpen: true }) : next;
+}
+function sanitizeHistory(raw) {
+  if (!Array.isArray(raw)) return [];
+  const out = [];
+  for (const entry of raw) {
+    if (!entry || typeof entry !== "object") continue;
+    const e = entry;
+    if (typeof e.kind !== "string" || typeof e.key !== "string") continue;
+    out.push({ kind: e.kind, key: e.key, title: typeof e.title === "string" ? e.title : null, data: e.data ?? null });
+  }
+  return out.slice(-CANVAS_HISTORY_LIMIT);
+}
+function sanitizeItem(item) {
+  const history = sanitizeHistory(item.history);
+  const { history: _history, instance, ...rest } = item;
+  return {
+    ...rest,
+    ...typeof instance === "string" && instance ? { instance } : {},
+    ...history.length > 0 ? { history } : {}
+  };
+}
 function clampWidth(width) {
   return Number.isFinite(width) ? Math.max(CANVAS_MIN_WIDTH, Math.round(width)) : null;
 }
@@ -473,7 +540,7 @@ function sanitizeCanvasSnapshot(raw) {
   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;
+      items[id] = sanitizeItem(item);
     }
   }
   const placed = /* @__PURE__ */ new Set();
@@ -547,7 +614,7 @@ function canvasReducer(state = createInitialCanvasState(), action) {
           next = insertInto(next, frame2.focusedPaneId, itemId, true);
         }
       } else {
-        const item = { id: itemId, kind, key, title: title ?? null, data: data ?? null, openedAt: now, updatedAt: now };
+        const item = newItem(kind, key, title ?? null, data ?? null, now);
         next = ensureWindow({ ...next, items: { ...next.items, [itemId]: item } }, revealIn);
         const frame2 = canvasWindowFrame(next, revealIn) ?? next;
         let paneId = frame2.focusedPaneId;
@@ -596,6 +663,35 @@ function canvasReducer(state = createInitialCanvasState(), action) {
       }
       return { ...state, items, panes };
     }
+    case `${P}navigate`: {
+      const { itemId, to, now } = action.payload;
+      const current = state.items[itemId];
+      if (!current || !paneOf(state, itemId)) return state;
+      const targetId = canvasItemId(to.kind, to.key);
+      if (targetId === itemId) {
+        const refresh = { type: `${P}update`, payload: { itemId, data: to.data, title: to.title, now } };
+        return canvasReducer(state, refresh);
+      }
+      if (state.items[targetId]) {
+        const focused = focusExisting(state, targetId);
+        return current.kind === CANVAS_LAUNCHER_KIND ? canvasReducer(focused, canvasActions.closeItem(itemId)) : focused;
+      }
+      const history = [...current.history ?? [], historyEntry(current)];
+      return replaceInPlace(state, current, newItem(to.kind, to.key, to.title ?? null, to.data ?? null, now, history));
+    }
+    case `${P}back`: {
+      const { itemId, now } = action.payload;
+      const current = state.items[itemId];
+      const history = current?.history ?? [];
+      const entry = history[history.length - 1];
+      if (!current || !entry || !paneOf(state, itemId)) return state;
+      const targetId = canvasItemId(entry.kind, entry.key);
+      if (targetId === itemId) return state;
+      if (state.items[targetId]) {
+        return focusExisting(canvasReducer(state, canvasActions.closeItem(itemId)), targetId);
+      }
+      return replaceInPlace(state, current, newItem(entry.kind, entry.key, entry.title, entry.data, now, history.slice(0, -1)));
+    }
     case `${P}closeItem`: {
       const { itemId } = action.payload;
       if (!state.items[itemId]) return state;
@@ -849,7 +945,8 @@ var CANVAS_WEB_LAYOUT_RULES = {
   defaultWidth: CANVAS_DEFAULT_WIDTH,
   minWidth: CANVAS_MIN_WIDTH,
   centreMinWidth: 420,
-  stackSplit: 0.5,
+  // Split down 70/30 like the desktop: what opens below (notifications, a feed) is the smaller pane.
+  stackSplit: 0.7,
   sideSplit: 0.5,
   paneMinWidth: 0
 };
@@ -974,7 +1071,8 @@ function createCanvasController(options) {
     presentationListeners: /* @__PURE__ */ new Set(),
     views: /* @__PURE__ */ new Map(),
     started: /* @__PURE__ */ new Map(),
-    sessionStop: null
+    sessionStop: null,
+    launcherSeq: 0
   };
   return view(shared, canvasWindowId(options.windowId ?? CANVAS_MAIN_WINDOW));
 }
@@ -989,6 +1087,36 @@ function view(shared, windowId) {
     for (const listener of [...shared.presentationListeners]) listener();
   };
   const shareFor = (orientation) => orientation === "vertical" ? rules.stackSplit : rules.sideSplit;
+  const acceptable = (input) => {
+    if (input.kind !== CANVAS_LAUNCHER_KIND && options.isKnownKind && !options.isKnownKind(input.kind)) {
+      onError({ code: "unknown-kind", message: `No canvas kind "${input.kind}" is registered.`, detail: input });
+      return false;
+    }
+    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 false;
+      }
+    }
+    return true;
+  };
+  const preferredTargetFor = (input) => {
+    const preferred = options.preferredTarget?.(input.kind);
+    if (!preferred || preferred === "focused") return "focused";
+    const state = store.getState();
+    if (canvasItemId(input.kind, input.key) in state.items) return "focused";
+    const frame2 = canvasWindowFrame(state, input.windowId ?? windowId);
+    if (!frame2?.isOpen) return "focused";
+    const panes = listPaneIds(frame2.layout);
+    const holding = panes.find((paneId) => state.panes[paneId]?.itemIds.some((id) => state.items[id]?.kind === input.kind));
+    if (holding) return { paneId: holding };
+    return state.panes[frame2.focusedPaneId]?.activeItemId ? preferred : "focused";
+  };
   const controller = {
     store,
     windowId,
@@ -996,24 +1124,11 @@ function view(shared, windowId) {
     forWindow: (id) => view(shared, canvasWindowId(id)),
     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;
-        }
-      }
-      const target = input.target ?? "focused";
+      if (!acceptable(input)) return null;
+      const target = input.target ?? preferredTargetFor(input);
       const splitShare = target === "split-down" ? rules.stackSplit : target === "split-right" ? rules.sideSplit : void 0;
-      const resolved = input.windowId || windowId === CANVAS_MAIN_WINDOW ? input : { ...input, windowId };
+      const withTarget = input.target === target ? input : { ...input, target };
+      const resolved = withTarget.windowId || windowId === CANVAS_MAIN_WINDOW ? withTarget : { ...withTarget, windowId };
       dispatch(canvasActions.open(resolved, splitShare === void 0 ? void 0 : { splitShare }));
       return canvasItemId(input.kind, input.key);
     },
@@ -1029,6 +1144,34 @@ function view(shared, windowId) {
       dispatch(canvasActions.update(itemId, patch));
       return true;
     },
+    navigate(itemId, to) {
+      if (!store.getState().items[itemId] || !acceptable(to)) return null;
+      dispatch(canvasActions.navigate(itemId, to));
+      const shown = canvasItemId(to.kind, to.key);
+      return shown in store.getState().items ? shown : null;
+    },
+    back(itemId) {
+      const history = store.getState().items[itemId]?.history ?? [];
+      const entry = history[history.length - 1];
+      if (!entry) return null;
+      dispatch(canvasActions.back(itemId));
+      return canvasItemId(entry.kind, entry.key);
+    },
+    newTab(paneId) {
+      const state = store.getState();
+      const frame2 = canvasWindowFrame(state, windowId);
+      const target = paneId && state.panes[paneId] ? paneId : frame2?.focusedPaneId ?? state.focusedPaneId;
+      const existing = state.panes[target]?.itemIds.find((id) => state.items[id]?.kind === CANVAS_LAUNCHER_KIND);
+      if (existing) {
+        dispatch(canvasActions.activate(existing));
+        dispatch(canvasActions.setOpen(true, canvasWindowOfItem(store.getState(), existing) ?? windowId));
+        return existing;
+      }
+      shared.launcherSeq += 1;
+      const key = `${Date.now().toString(36)}-${shared.launcherSeq}`;
+      dispatch(canvasActions.open({ kind: CANVAS_LAUNCHER_KIND, key, target: { paneId: target }, ...windowId === CANVAS_MAIN_WINDOW ? {} : { windowId } }));
+      return canvasItemId(CANVAS_LAUNCHER_KIND, key);
+    },
     rekey(itemId, key) {
       const item = store.getState().items[itemId];
       if (!item) return null;
@@ -1278,6 +1421,32 @@ function selectCanvasWindowItemCount(s, windowId) {
   return listPaneIds(layout).reduce((sum, paneId) => sum + (s.panes[paneId]?.itemIds.length ?? 0), 0);
 }
 var NO_WINDOWS = Object.freeze({});
+var NO_HISTORY = Object.freeze([]);
+var selectCanvasCanGoBack = (s, itemId) => (s.items[itemId]?.history?.length ?? 0) > 0;
+
+// src/core/presentation.ts
+var CANVAS_NARROW_WIDTH = 480;
+var SQUARE_BAND = 1.2;
+function canvasOrientation(width, height) {
+  if (!(width > 0) || !(height > 0)) return "square";
+  const ratio = width / height;
+  if (ratio >= SQUARE_BAND) return "landscape";
+  if (ratio <= 1 / SQUARE_BAND) return "portrait";
+  return "square";
+}
+function canvasPresentation(input) {
+  const width = Math.max(0, Math.round(input.width));
+  const height = Math.max(0, Math.round(input.height));
+  return {
+    host: "canvas",
+    width,
+    height,
+    orientation: canvasOrientation(width, height),
+    isNarrow: width > 0 && width < CANVAS_NARROW_WIDTH,
+    isFullscreen: input.isFullscreen,
+    paneCount: Math.max(1, input.paneCount)
+  };
+}
 
 // src/core/toggleKind.ts
 var CANVAS_DEFAULT_KEY = "default";
@@ -1479,6 +1648,31 @@ function getCanvasKindsVersion() {
 
 // src/react/provider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function createLauncherEntryStore() {
+  let entries = [];
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => {
+    for (const listener of [...listeners]) listener();
+  };
+  return {
+    add(entry) {
+      entries = [...entries, entry];
+      emit();
+      let done = false;
+      return () => {
+        if (done) return;
+        done = true;
+        entries = entries.filter((e) => e !== entry);
+        emit();
+      };
+    },
+    list: () => entries,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
 var PHONE_MAX_WIDTH = 767;
 var isPhoneViewport = () => typeof window !== "undefined" && window.innerWidth <= PHONE_MAX_WIDTH;
 var isMacPlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.userAgentData?.platform ?? navigator.platform ?? "");
@@ -1511,7 +1705,7 @@ function CanvasProvider({
 }) {
   const portsRef = (0, import_react2.useRef)(hostPorts);
   portsRef.current = hostPorts;
-  const [{ controller, layer }] = (0, import_react2.useState)(() => ({
+  const [{ controller, layer, launcherEntries }] = (0, import_react2.useState)(() => ({
     controller: createCanvasController({
       store: store ?? createCanvasStore(),
       persistence: persistence === void 0 ? createLocalStorageCanvasPersistence() : persistence,
@@ -1521,9 +1715,11 @@ function CanvasProvider({
       windowId: windowIdProp ?? CANVAS_MAIN_WINDOW,
       layoutRules,
       windowPorts: () => portsRef.current,
-      sessions: sessionHooksFor
+      sessions: sessionHooksFor,
+      preferredTarget: (kind) => getCanvasKind(kind)?.preferredTarget
     }),
-    layer: createCanvasLayer(() => portsRef.current)
+    layer: createCanvasLayer(() => portsRef.current),
+    launcherEntries: createLauncherEntryStore()
   }));
   const windowId = controller.windowId;
   (0, import_react2.useEffect)(() => controller.start(), [controller]);
@@ -1548,7 +1744,7 @@ function CanvasProvider({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [controller, hotkeys, windowId]);
-  const value = { controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip };
+  const value = { controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CanvasContext.Provider, { value, children: [
     children,
     hostPorts.overlay ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CanvasDomOverlay, { layer })
@@ -1635,14 +1831,38 @@ function useCanvasKind(id) {
   (0, import_react2.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
   return getCanvasKind(id);
 }
+var NO_ENTRIES = Object.freeze([]);
+var noEntries = () => NO_ENTRIES;
+function useCanvasLauncherEntry(entry) {
+  const store = (0, import_react2.useContext)(CanvasContext)?.launcherEntries;
+  const fingerprint = JSON.stringify([entry.kind, entry.key, entry.title ?? null, entry.data ?? null]);
+  const icon = entry.icon;
+  (0, import_react2.useEffect)(() => {
+    if (!store) return void 0;
+    const [kind, key, title, data] = JSON.parse(fingerprint);
+    return store.add({ kind, key, title, data, ...icon ? { icon } : {} });
+  }, [store, fingerprint, icon]);
+}
+function useCanvasLauncherEntries() {
+  const store = (0, import_react2.useContext)(CanvasContext)?.launcherEntries;
+  const all = (0, import_react2.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, store ? store.list : noEntries, store ? store.list : noEntries);
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (let i = all.length - 1; i >= 0; i -= 1) {
+    const entry = all[i];
+    if (!entry || seen.has(`${entry.kind}::${entry.key}`)) continue;
+    seen.add(`${entry.kind}::${entry.key}`);
+    out.unshift(entry);
+  }
+  return out;
+}
 
 // src/react/CanvasColumn.tsx
-var import_react5 = require("react");
+var import_react9 = require("react");
 var import_tap_target = require("@ai-matrx/tap-target");
 
-// src/react/CanvasPane.tsx
-var import_react4 = require("react");
-var Menu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+// src/react/bodies.tsx
+var import_react7 = require("react");
 
 // src/react/chrome.tsx
 var import_react3 = require("react");
@@ -1737,6 +1957,12 @@ var DockIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 3 12 12" }),
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 6v6h6" })
 ] });
+var LayoutGridIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
+] });
 
 // src/react/chrome.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -1987,22 +2213,523 @@ function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload,
   ] });
 }
 
-// src/react/CanvasPane.tsx
+// src/react/dnd.ts
+var import_react4 = require("react");
+var CANVAS_DRAG_MIME = "application/x-matrx-canvas-item";
+function useTabDrag(itemId, title) {
+  const { layer } = useCanvasInternals();
+  const active = (0, import_react4.useRef)([]);
+  const end = () => {
+    for (const dispose of active.current.splice(0)) dispose();
+  };
+  (0, import_react4.useEffect)(() => end, []);
+  return {
+    draggable: true,
+    onDragStart: (event) => {
+      event.dataTransfer.setData(CANVAS_DRAG_MIME, itemId);
+      event.dataTransfer.effectAllowed = "move";
+      end();
+      active.current.push(layer.beginBlocking(), layer.show({ type: "tab-drag", itemId, title }));
+    },
+    onDragEnd: end
+  };
+}
+function usePaneDrop(paneId, getOutline) {
+  const canvas = useCanvas();
+  const { layer } = useCanvasInternals();
+  const drop = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => () => drop.current?.(), []);
+  const hide = () => {
+    drop.current?.();
+    drop.current = null;
+  };
+  return {
+    onDragOver: (event) => {
+      if (!event.dataTransfer.types.includes(CANVAS_DRAG_MIME)) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      const outline = getOutline();
+      if (!drop.current && outline) {
+        drop.current = layer.show({ type: "drop-indicator", rect: toCanvasRect(outline.getBoundingClientRect()), paneId });
+      }
+    },
+    onDragLeave: (event) => {
+      const next = event.relatedTarget;
+      if (next && event.currentTarget.contains(next)) return;
+      hide();
+    },
+    onDrop: (event) => {
+      hide();
+      const itemId = event.dataTransfer.getData(CANVAS_DRAG_MIME);
+      if (!itemId) return;
+      event.preventDefault();
+      canvas.moveItem(itemId, paneId);
+    }
+  };
+}
+
+// src/react/launcher.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var DRAG_MIME = "application/x-matrx-canvas-item";
-var useIsoLayoutEffect = typeof window === "undefined" ? import_react4.useEffect : import_react4.useLayoutEffect;
+function useChoices() {
+  const entries = useCanvasLauncherEntries();
+  const kinds = useCanvasKinds();
+  const byId = new Map(kinds.map((kind) => [kind.id, kind]));
+  const contextual = [];
+  for (const entry of entries) {
+    const kind = byId.get(entry.kind);
+    if (!kind) continue;
+    contextual.push({
+      id: `ctx:${canvasItemId(entry.kind, entry.key)}`,
+      label: entry.title ?? kind.label,
+      icon: entry.icon ?? kind.icon,
+      input: { kind: entry.kind, key: entry.key, title: entry.title ?? null, ...entry.data !== void 0 ? { data: entry.data } : {} }
+    });
+  }
+  const global = [];
+  for (const kind of kinds) {
+    const launcher = kind.launcher;
+    if (!launcher) continue;
+    global.push({
+      id: `kind:${kind.id}`,
+      label: launcher.title ?? kind.label,
+      icon: kind.icon,
+      input: { kind: kind.id, key: launcher.key, data: launcher.data, title: launcher.title ?? null }
+    });
+  }
+  return { contextual, global };
+}
+function LauncherGrid({ onChoose }) {
+  const { contextual, global } = useChoices();
+  if (contextual.length === 0 && global.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasPanelEmpty, { children: "Nothing to open" });
+  const section = (label, choices) => choices.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "mxc-launcher-section", "aria-label": label ?? "Open", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "mxc-launcher-heading", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-launcher-grid", children: choices.map((choice) => {
+      const Icon = choice.icon;
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: "mxc-launcher-item", onClick: () => onChoose(choice.input), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "mxc-launcher-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: choice.label })
+      ] }, choice.id);
+    }) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mxc-launcher", children: [
+    section(contextual.length > 0 ? "On this page" : null, contextual),
+    section(contextual.length > 0 ? "Open" : null, global)
+  ] });
+}
+function LauncherBody({ item, canvas }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LauncherGrid, { onChoose: (input) => void canvas.navigate(item.id, input) });
+}
+function EmptyPaneLauncher({ paneId }) {
+  const canvas = useCanvas();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    LauncherGrid,
+    {
+      onChoose: (input) => {
+        const tab = canvas.newTab(paneId);
+        canvas.navigate(tab, input);
+      }
+    }
+  );
+}
+var CANVAS_LAUNCHER_KIND_DEFINITION = {
+  id: CANVAS_LAUNCHER_KIND,
+  label: "New tab",
+  icon: LayoutGridIcon,
+  component: LauncherBody
+};
+function useItemKind(kindId) {
+  const registered = useCanvasKind(kindId);
+  return kindId === CANVAS_LAUNCHER_KIND ? CANVAS_LAUNCHER_KIND_DEFINITION : registered;
+}
+
+// src/react/presentation.tsx
+var import_react5 = require("react");
+var CanvasPresentationContext = (0, import_react5.createContext)(null);
+function useCanvasPresentation() {
+  return (0, import_react5.useContext)(CanvasPresentationContext);
+}
+
+// src/react/slots.ts
+var import_react6 = require("react");
+var ZERO = Object.freeze({ width: 0, height: 0 });
+function createCanvasSlots() {
+  const slots = /* @__PURE__ */ new Map();
+  const sections = /* @__PURE__ */ new Map();
+  const sizes = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  let observer = null;
+  const emit = () => {
+    for (const listener of [...listeners]) listener();
+  };
+  const read = (paneId, element) => {
+    const box = element.getBoundingClientRect();
+    const width = Math.round(box.width);
+    const height = Math.round(box.height);
+    const previous = sizes.get(paneId);
+    if (previous && previous.width === width && previous.height === height) return false;
+    sizes.set(paneId, { width, height });
+    return true;
+  };
+  const measureAll = () => {
+    let changed = false;
+    for (const [paneId, element] of slots) changed = read(paneId, element) || changed;
+    return changed;
+  };
+  const watch = () => {
+    if (observer || typeof ResizeObserver === "undefined") return observer;
+    observer = new ResizeObserver(() => {
+      measureAll();
+      emit();
+    });
+    return observer;
+  };
+  return {
+    set(paneId, element) {
+      if (slots.get(paneId) === element) return;
+      const previous = slots.get(paneId);
+      if (previous) observer?.unobserve(previous);
+      slots.set(paneId, element);
+      watch()?.observe(element);
+      read(paneId, element);
+      emit();
+    },
+    unset(paneId, element) {
+      const current = slots.get(paneId);
+      if (!current || element && current !== element) return;
+      observer?.unobserve(current);
+      slots.delete(paneId);
+      sizes.delete(paneId);
+      emit();
+    },
+    setSection(paneId, element) {
+      if (element) sections.set(paneId, element);
+      else sections.delete(paneId);
+    },
+    slot: (paneId) => slots.get(paneId) ?? null,
+    section: (paneId) => sections.get(paneId) ?? null,
+    size: (paneId) => sizes.get(paneId) ?? ZERO,
+    measure() {
+      if (measureAll()) emit();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var CanvasSlotsContext = (0, import_react6.createContext)(null);
+function useCanvasSlots() {
+  return (0, import_react6.useContext)(CanvasSlotsContext);
+}
+function useSlotSize(slots, paneId) {
+  return (0, import_react6.useSyncExternalStore)(
+    slots.subscribe,
+    () => slots.size(paneId),
+    () => ZERO
+  );
+}
+
+// src/react/bodies.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var useIsoLayoutEffect = typeof window === "undefined" ? import_react7.useEffect : import_react7.useLayoutEffect;
 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_react4.lazy)(kind.load);
+  if (!holder[LAZY] && kind.load) holder[LAZY] = (0, import_react7.lazy)(kind.load);
   return holder[LAZY] ?? null;
 }
 function resetKindComponent(kind) {
   if (kind) delete kind[LAZY];
 }
+function usePanePresentation(slots, paneId, isFullscreen, paneCount) {
+  const size = useSlotSize(slots, paneId);
+  return (0, import_react7.useMemo)(
+    () => canvasPresentation({ width: size.width, height: size.height, isFullscreen, paneCount }),
+    [size.width, size.height, isFullscreen, paneCount]
+  );
+}
+function placedItems(state, windowId, onlyPane) {
+  const frame2 = canvasWindowFrame(state, windowId);
+  if (!frame2) return [];
+  const out = [];
+  for (const paneId of onlyPane ? [onlyPane] : listPaneIds(frame2.layout)) {
+    const pane = state.panes[paneId];
+    for (const itemId of pane?.itemIds ?? []) {
+      const item = state.items[itemId];
+      if (item) out.push({ item, paneId, active: pane?.activeItemId === itemId });
+    }
+  }
+  return out.sort((a, b) => a.item.openedAt - b.item.openedAt || hostKey(a.item).localeCompare(hostKey(b.item)));
+}
+var hostKey = (item) => item.instance ?? item.id;
+function createPlacement(getRoot, slots, afterPlace) {
+  const hosts = /* @__PURE__ */ new Map();
+  let placing = false;
+  const place = () => {
+    const root = getRoot();
+    if (!root || placing) return;
+    placing = true;
+    try {
+      slots.measure();
+      const base = root.getBoundingClientRect();
+      for (const { element, paneId } of hosts.values()) {
+        const slot = slots.slot(paneId);
+        if (!slot) {
+          element.dataset.placed = "false";
+          continue;
+        }
+        const box = slot.getBoundingClientRect();
+        const style = element.style;
+        style.left = `${box.left - base.left}px`;
+        style.top = `${box.top - base.top}px`;
+        style.width = `${box.width}px`;
+        style.height = `${box.height}px`;
+        element.dataset.placed = "true";
+      }
+    } finally {
+      placing = false;
+    }
+    afterPlace();
+  };
+  return {
+    register(key, entry) {
+      hosts.set(key, entry);
+      return () => {
+        if (hosts.get(key) === entry) hosts.delete(key);
+      };
+    },
+    place
+  };
+}
+function CanvasBodyLayer() {
+  const { windowId, layer } = useCanvasInternals();
+  const slots = useCanvasSlots();
+  const state = useCanvasState((s) => s);
+  const root = (0, import_react7.useRef)(null);
+  const [placement] = (0, import_react7.useState)(
+    () => slots ? createPlacement(() => root.current, slots, () => layer.native.remeasure()) : null
+  );
+  useIsoLayoutEffect(() => placement?.place());
+  useIsoLayoutEffect(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
+  if (!slots || !placement) return null;
+  const frame2 = canvasWindowFrame(state, windowId);
+  if (!frame2) return null;
+  const paneCount = listPaneIds(frame2.layout).length;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: placedItems(state, windowId).map(({ item, paneId, active }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    BodyHost,
+    {
+      hostId: hostKey(item),
+      item,
+      paneId,
+      visible: frame2.isOpen && active,
+      focused: active && frame2.focusedPaneId === paneId,
+      isFullscreen: frame2.isFullscreen,
+      paneCount,
+      slots,
+      placement
+    },
+    hostKey(item)
+  )) });
+}
+function CanvasPaneInlineBodies({ paneId, slots }) {
+  const { windowId } = useCanvasInternals();
+  const state = useCanvasState((s) => s);
+  const frame2 = canvasWindowFrame(state, windowId);
+  const paneCount = frame2 ? listPaneIds(frame2.layout).length : 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: placedItems(state, windowId, paneId).map(({ item, active }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    BodyHost,
+    {
+      hostId: hostKey(item),
+      item,
+      paneId,
+      visible: active,
+      focused: active && frame2?.focusedPaneId === paneId,
+      isFullscreen: frame2?.isFullscreen ?? false,
+      paneCount,
+      slots,
+      placement: null
+    },
+    hostKey(item)
+  )) });
+}
+function BodyHost({
+  hostId,
+  item,
+  paneId,
+  visible,
+  focused,
+  isFullscreen,
+  paneCount,
+  slots,
+  placement
+}) {
+  const canvas = useCanvas();
+  const { windowId, ports } = useCanvasInternals();
+  const kind = useItemKind(item.kind);
+  const element = (0, import_react7.useRef)(null);
+  const [everShown, setEverShown] = (0, import_react7.useState)(visible);
+  if (visible && !everShown) setEverShown(true);
+  const mounted = kind?.unmountWhenHidden ? visible : everShown;
+  const presentation = usePanePresentation(slots, paneId, isFullscreen, paneCount);
+  const drop = usePaneDrop(paneId, () => slots.section(paneId));
+  useIsoLayoutEffect(() => {
+    const el = element.current;
+    if (!placement || !el) return void 0;
+    return placement.register(hostId, { element: el, paneId });
+  }, [placement, hostId, paneId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      ref: element,
+      className: "mxc-item-host",
+      "data-inline": placement ? void 0 : "",
+      "data-placed": placement ? "false" : void 0,
+      "data-visible": visible ? "true" : "false",
+      "data-kind": item.kind,
+      "data-item": item.id,
+      "data-pane": paneId,
+      inert: !visible,
+      "aria-hidden": visible ? void 0 : true,
+      onPointerDownCapture: () => {
+        if (!focused) canvas.focusPane(paneId);
+      },
+      ...drop,
+      children: mounted ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CanvasPresentationContext.Provider, { value: presentation, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mxc-item", "data-kind": item.kind, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ItemContent,
+        {
+          item,
+          kind,
+          paneId,
+          windowId,
+          focused,
+          visible,
+          presentation,
+          canvas,
+          hasNativePort: !!ports.onNativeBodyFrame
+        }
+      ) }) }) : null
+    }
+  );
+}
+function ItemContent({
+  item,
+  kind,
+  paneId,
+  windowId,
+  focused,
+  visible,
+  presentation,
+  canvas,
+  hasNativePort
+}) {
+  let unavailable = null;
+  try {
+    unavailable = kind?.unavailable?.(item.data, item) ?? null;
+  } catch (error) {
+    console.error(`[@ai-matrx/canvas] "${item.kind}" unavailable() threw`, error);
+  }
+  if (!kind) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ItemProblem, { message: "This item can no longer be shown.", onClose: () => canvas.close(item.id) });
+  if (unavailable) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CanvasPanelEmpty, { children: unavailable });
+  const rendered = kindComponent(kind) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Rendered, { kind, item, paneId, isFocused: focused, isVisible: visible, canvas, windowId, presentation }) : null;
+  if (kind.body === "native") {
+    return hasNativePort ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NativeBody, { itemId: item.id, windowId, visible, children: rendered }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CanvasPanelEmpty, { children: "Opens in the desktop app" });
+  }
+  return rendered;
+}
+var Rendered = (0, import_react7.memo)(function Rendered2({
+  kind,
+  item,
+  paneId,
+  isFocused,
+  isVisible,
+  canvas,
+  windowId,
+  presentation
+}) {
+  const props = { item, data: item.data, paneId, isFocused, isVisible, canvas, windowId, presentation };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ItemBoundary, { item, onClose: () => canvas.close(item.id), onRetry: () => resetKindComponent(kind), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react7.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mxc-loading", "aria-busy": "true" }), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KindRender, { kind, props }) }) });
+});
+function KindRender({ kind, props }) {
+  const Render = kindComponent(kind);
+  if (!Render) throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" has nothing to render.`);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Render, { ...props });
+}
+function NativeBody({ itemId, windowId, visible, children }) {
+  const { layer } = useCanvasInternals();
+  const ref = (0, import_react7.useRef)(null);
+  const measure = (0, import_react7.useRef)(() => void 0);
+  measure.current = () => {
+    const el = ref.current;
+    const box = visible && el?.isConnected ? el.getBoundingClientRect() : null;
+    if (!box || box.width <= 0 || box.height <= 0) {
+      layer.native.report(itemId, null, { visible: false, windowId });
+      return;
+    }
+    const rect = { ...toCanvasRect(box), devicePixelRatio: window.devicePixelRatio || 1 };
+    layer.native.report(itemId, rect, { visible: !layer.isBlocked(), windowId });
+  };
+  useIsoLayoutEffect(() => measure.current());
+  useIsoLayoutEffect(() => {
+    const el = ref.current;
+    const run = () => measure.current();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(run);
+    if (el) observer?.observe(el);
+    const unregister = layer.native.register(run);
+    window.addEventListener("resize", run);
+    return () => {
+      observer?.disconnect();
+      unregister();
+      window.removeEventListener("resize", run);
+      layer.native.report(itemId, null, { visible: false, windowId });
+    };
+  }, [itemId, windowId, layer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: "mxc-native-body", "data-native-body": itemId, children });
+}
+function ItemProblem({ message, onClose, onRetry }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mxc-problem", role: "alert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AlertIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mxc-problem-actions", children: [
+      onRetry ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onRetry, children: "Try again" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onClose, children: "Close tab" })
+    ] })
+  ] });
+}
+var ItemBoundary = class extends import_react7.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_runtime6.jsx)(
+        ItemProblem,
+        {
+          message: "This item failed to load.",
+          onClose: this.props.onClose,
+          onRetry: () => {
+            this.props.onRetry();
+            this.setState({ error: null });
+          }
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+// src/react/CanvasPane.tsx
+var import_react8 = require("react");
+var Menu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var useIsoLayoutEffect2 = typeof window === "undefined" ? import_react8.useEffect : import_react8.useLayoutEffect;
 function itemTitle(item, kind) {
   if (item.title) return item.title;
+  if (item.kind === CANVAS_LAUNCHER_KIND) return "New tab";
   if (kind?.title) {
     try {
       const title = kind.title(item.data, item);
@@ -2013,69 +2740,44 @@ function itemTitle(item, kind) {
   return kind?.label ?? item.kind;
 }
 var isMac = () => typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.platform ?? "");
-function useTabDrag(itemId, title) {
-  const { layer } = useCanvasInternals();
-  const active = (0, import_react4.useRef)([]);
-  const end = () => {
-    for (const dispose of active.current.splice(0)) dispose();
-  };
-  (0, import_react4.useEffect)(() => end, []);
-  return {
-    draggable: true,
-    onDragStart: (event) => {
-      event.dataTransfer.setData(DRAG_MIME, itemId);
-      event.dataTransfer.effectAllowed = "move";
-      end();
-      active.current.push(layer.beginBlocking(), layer.show({ type: "tab-drag", itemId, title }));
-    },
-    onDragEnd: end
-  };
-}
 function CanvasPaneView({ paneId }) {
   const canvas = useCanvas();
-  const { windowId, layer, ports, tabStrip } = useCanvasInternals();
+  const { windowId, tabStrip } = useCanvasInternals();
+  const columnSlots = useCanvasSlots();
+  const [ownSlots] = (0, import_react8.useState)(createCanvasSlots);
+  const slots = columnSlots ?? ownSlots;
   const pane = useCanvasState((s) => s.panes[paneId]);
   const items = useCanvasState((s) => s.items);
   const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
+  const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
   const focused = useCanvasState((s) => selectCanvasFocusedPaneId(s, windowId) === paneId);
   const paneCount = useCanvasState((s) => selectCanvasPaneCount(s, windowId));
   const role = useCanvasState((s) => windowId === CANVAS_MAIN_WINDOW ? "main" : s.windows[windowId]?.role ?? "window");
   const active = pane?.activeItemId ? items[pane.activeItemId] : void 0;
-  const kind = useCanvasKind(active?.kind ?? "");
-  const drop = (0, import_react4.useRef)(null);
-  const sectionRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => () => drop.current?.(), []);
+  const canGoBack = useCanvasState((s) => active ? selectCanvasCanGoBack(s, active.id) : false);
+  const kind = useItemKind(active?.kind ?? "");
+  const sectionRef = (0, import_react8.useRef)(null);
+  const bodyRef = (0, import_react8.useRef)(null);
+  const presentation = usePanePresentation(slots, paneId, isFullscreen, paneCount);
+  const drop = usePaneDrop(paneId, () => sectionRef.current);
+  useIsoLayoutEffect2(() => {
+    const body = bodyRef.current;
+    const section = sectionRef.current;
+    if (body) slots.set(paneId, body);
+    slots.setSection(paneId, section);
+    return () => {
+      slots.unset(paneId, body);
+      if (slots.section(paneId) === section) slots.setSection(paneId, null);
+    };
+  }, [slots, paneId]);
   if (!pane) return null;
-  const kindProps = active && kind ? { item: active, data: active.data, paneId, isFocused: focused, canvas, windowId } : null;
+  const kindProps = active && kind ? { item: active, data: active.data, paneId, isFocused: focused, isVisible: isOpen, canvas, windowId, presentation } : null;
   const Leading = kind?.HeaderLeading;
   const Action = kind?.HeaderAction;
+  const Toolbar = kind?.Toolbar;
   const single = tabStrip === "auto" && pane.itemIds.length === 1 && active;
-  const hideDrop = () => {
-    drop.current?.();
-    drop.current = null;
-  };
-  const onDragOver = (event) => {
-    if (!event.dataTransfer.types.includes(DRAG_MIME)) return;
-    event.preventDefault();
-    event.dataTransfer.dropEffect = "move";
-    if (!drop.current && sectionRef.current) {
-      drop.current = layer.show({ type: "drop-indicator", rect: toCanvasRect(sectionRef.current.getBoundingClientRect()), paneId });
-    }
-  };
-  const onDragLeave = (event) => {
-    const next = event.relatedTarget;
-    if (next && sectionRef.current?.contains(next)) return;
-    hideDrop();
-  };
-  const onDrop = (event) => {
-    hideDrop();
-    const itemId = event.dataTransfer.getData(DRAG_MIME);
-    if (!itemId) return;
-    event.preventDefault();
-    canvas.moveItem(itemId, paneId);
-  };
   const closeLabel = role === "pop-out" && paneCount === 1 ? "Close window" : paneCount > 1 ? "Close pane" : "Close canvas";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     CanvasPanel,
     {
       ref: sectionRef,
@@ -2084,10 +2786,14 @@ function CanvasPaneView({ paneId }) {
       title: active ? itemTitle(active, kind) : "Canvas",
       focused,
       "data-mxc-pane": paneId,
-      header: single && active ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SingleTitle, { item: active, kind }) : pane.itemIds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-tabs", role: "tablist", "aria-label": "Canvas tabs", children: pane.itemIds.map((itemId, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ItemTab, { itemId, paneId, index, active: itemId === pane.activeItemId }, itemId)) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mxc-panel-title", children: "New tab" }),
-      leading: Leading && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Leading, { ...kindProps }) : null,
-      actions: Action && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Action, { ...kindProps }) : null,
-      renderMenu: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PaneMenu, { paneId, windowId, activeItem: active, kind, kindProps, tabCount: pane.itemIds.length, role }),
+      header: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        canGoBack && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-back", label: "Back", onClick: () => void canvas.back(active.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowLeftIcon, {}) }) : null,
+        single && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SingleTitle, { item: active, kind }) : pane.itemIds.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabStrip, { paneId, itemIds: pane.itemIds, activeItemId: pane.activeItemId }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-panel-title", children: "New tab" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(paneId), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlusIcon, {}) })
+      ] }),
+      leading: Leading && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Leading, { ...kindProps }) : null,
+      actions: Action && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Action, { ...kindProps }) : null,
+      renderMenu: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaneMenu, { paneId, windowId, activeItem: active, kind, kindProps, tabCount: pane.itemIds.length, role }),
       expanded: isFullscreen,
       onToggleExpand: () => canvas.setFullscreen(!isFullscreen),
       expandShortcut: canvasShortcutHint("canvas.toggleFullscreen", isMac()),
@@ -2097,54 +2803,92 @@ function CanvasPaneView({ paneId }) {
       onPointerDownCapture: () => {
         if (!focused) canvas.focusPane(paneId);
       },
-      onDragOver,
-      onDragLeave,
-      onDrop,
-      children: pane.itemIds.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)(ItemBody, { item, paneId, windowId, isActive, isFocused: focused && isActive, hasNativePort: !!ports.onNativeBodyFrame }, itemId);
-      })
+      ...drop,
+      children: [
+        Toolbar && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mxc-item-toolbar", "data-kind": active?.kind, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolbarBoundary, { kindId: kind?.id ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Toolbar, { ...kindProps }) }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: bodyRef, className: "mxc-pane-slot", "data-mxc-slot": paneId, children: pane.itemIds.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EmptyPaneLauncher, { paneId }) : columnSlots ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasPaneInlineBodies, { paneId, slots }) })
+      ]
     }
   );
 }
+var ToolbarBoundary = class extends import_react8.Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    console.error(`[@ai-matrx/canvas] "${this.props.kindId}" Toolbar threw`, error);
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+};
 function SingleTitle({ item, kind }) {
+  const canvas = useCanvas();
   const title = itemTitle(item, kind);
   const drag = useTabDrag(item.id, title);
   const Icon = kind?.icon ?? AlertIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "mxc-panel-title", "data-draggable": "", title, ...drag, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "mxc-title-icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mxc-tab-title", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mxc-panel-title mxc-single-title", "data-draggable": "", title, ...drag, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "mxc-title-icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-tab-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "mxc-tab-close", "data-slot": "browser-tab-close", "aria-label": `Close ${title}`, onClick: () => canvas.close(item.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) })
   ] });
 }
+function TabStrip({ paneId, itemIds, activeItemId }) {
+  const strip = (0, import_react8.useRef)(null);
+  useIsoLayoutEffect2(() => {
+    const el = strip.current;
+    if (!el) return void 0;
+    const reveal = () => {
+      const tab = el.querySelector('[role="tab"][aria-selected="true"]');
+      if (!tab) return;
+      const left = tab.offsetLeft - el.offsetLeft;
+      const right = left + tab.offsetWidth;
+      if (left < el.scrollLeft) el.scrollLeft = left;
+      else if (right > el.scrollLeft + el.clientWidth) el.scrollLeft = right - el.clientWidth;
+    };
+    reveal();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(reveal);
+    observer?.observe(el);
+    return () => observer?.disconnect();
+  }, [activeItemId, itemIds.length]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      ref: strip,
+      className: "mxc-tabs",
+      role: "tablist",
+      "aria-label": "Canvas tabs",
+      onWheel: (event) => {
+        const el = strip.current;
+        if (el && Math.abs(event.deltaY) > Math.abs(event.deltaX)) el.scrollLeft += event.deltaY;
+      },
+      children: itemIds.map((itemId, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ItemTab, { itemId, paneId, index, active: itemId === activeItemId }, itemId))
+    }
+  );
+}
 function ItemTab({ itemId, paneId, index, active }) {
   const canvas = useCanvas();
   const item = useCanvasState((s) => s.items[itemId]);
-  const kind = useCanvasKind(item?.kind ?? "");
-  const ref = (0, import_react4.useRef)(null);
+  const kind = useItemKind(item?.kind ?? "");
   const title = item ? itemTitle(item, kind) : "";
   const drag = useTabDrag(itemId, title);
-  (0, import_react4.useEffect)(() => {
-    if (active) ref.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
-  }, [active]);
   if (!item) return null;
   const Icon = kind?.icon ?? AlertIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     CanvasTab,
     {
-      ref,
       title,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, {}),
       active,
       onSelect: () => canvas.activate(itemId),
       onClose: () => canvas.close(itemId),
       ...drag,
       onDragOver: (event) => {
-        if (event.dataTransfer.types.includes(DRAG_MIME)) event.preventDefault();
+        if (event.dataTransfer.types.includes(CANVAS_DRAG_MIME)) event.preventDefault();
       },
       onDrop: (event) => {
-        const dragged = event.dataTransfer.getData(DRAG_MIME);
+        const dragged = event.dataTransfer.getData(CANVAS_DRAG_MIME);
         if (!dragged) return;
         event.preventDefault();
         if (dragged !== itemId) canvas.moveItem(dragged, paneId, index);
@@ -2167,16 +2911,16 @@ function PaneMenu({
   const canvas = useCanvas();
   const { ports, layer } = useCanvasInternals();
   const moveId = tabCount > 1 ? activeItem?.id : void 0;
-  const blocking = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => () => blocking.current?.(), []);
+  const blocking = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => () => blocking.current?.(), []);
   const kindItems = kind?.menuItems && kindProps ? safeMenu(() => kind.menuItems?.(kindProps)) : [];
   const hostItems = activeItem && ports.itemActions ? safeMenu(() => ports.itemActions?.(activeItem, kind)) : [];
   const sections = [
     [...kindItems, ...hostItems].map((entry) => ({ ...entry, id: `item:${entry.id}` })),
     [
-      { id: "split-right", label: "Split right", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) },
-      { id: "split-down", label: "Split down", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SplitDownIcon, {}), onSelect: () => canvas.splitPane(paneId, "vertical", moveId) },
-      ...activeItem && role === "pop-out" ? [{ id: "dock-back", label: "Dock back", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DockIcon, {}), onSelect: () => void canvas.dockBack(activeItem.id) }] : activeItem && ports.popOut ? [{ id: "pop-out", label: "Pop out", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PopOutIcon, {}), onSelect: () => void canvas.popOut(activeItem.id) }] : []
+      { id: "split-right", label: "Split right", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) },
+      { id: "split-down", label: "Split down", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SplitDownIcon, {}), onSelect: () => canvas.splitPane(paneId, "vertical", moveId) },
+      ...activeItem && role === "pop-out" ? [{ id: "dock-back", label: "Dock back", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DockIcon, {}), onSelect: () => void canvas.dockBack(activeItem.id) }] : activeItem && ports.popOut ? [{ id: "pop-out", label: "Pop out", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopOutIcon, {}), onSelect: () => void canvas.popOut(activeItem.id) }] : []
     ],
     activeItem ? [
       { id: "close-tab", label: "Close tab", onSelect: () => canvas.close(activeItem.id) },
@@ -2194,7 +2938,7 @@ function PaneMenu({
         handlers.set(action.id, action.onSelect);
       }
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       CanvasMenuTrigger,
       {
         onClick: (event) => {
@@ -2209,7 +2953,7 @@ function PaneMenu({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Menu.Root,
     {
       onOpenChange: (open) => {
@@ -2217,16 +2961,16 @@ function PaneMenu({
         blocking.current = open ? layer.beginBlocking() : null;
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasMenuTrigger, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Menu.Content, { align: "end", sideOffset: 4, className: "mxc-menu", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuSection, { first: i === 0, actions: section }, i)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasMenuTrigger, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu.Content, { align: "end", sideOffset: 4, className: "mxc-menu", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuSection, { first: i === 0, actions: section }, i)) }) })
       ]
     }
   );
 }
 function MenuSection({ first, actions }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    first ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Menu.Separator, { className: "mxc-menu-separator" }),
-    actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Menu.Item, { onSelect: action.onSelect, className: "mxc-menu-item", "data-destructive": action.destructive ? "" : void 0, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    first ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu.Separator, { className: "mxc-menu-separator" }),
+    actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Menu.Item, { onSelect: action.onSelect, className: "mxc-menu-item", "data-destructive": action.destructive ? "" : void 0, children: [
       action.icon,
       action.label
     ] }, action.id))
@@ -2240,150 +2984,16 @@ function safeMenu(build) {
     return [];
   }
 }
-function ItemBody({
-  item,
-  paneId,
-  windowId,
-  isActive,
-  isFocused,
-  hasNativePort
-}) {
-  const canvas = useCanvas();
-  const kind = useCanvasKind(item.kind);
-  if (!isActive && !kind?.keepAlive) return null;
-  const props = { item, data: item.data, paneId, isFocused, canvas, windowId };
-  let unavailable = null;
-  try {
-    unavailable = kind?.unavailable?.(item.data, item) ?? null;
-  } catch (error) {
-    console.error(`[@ai-matrx/canvas] "${item.kind}" unavailable() threw`, error);
-  }
-  let body;
-  if (!kind) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ItemProblem, { message: "This item can no longer be shown.", onClose: () => canvas.close(item.id) });
-  } else if (unavailable) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasPanelEmpty, { children: unavailable });
-  } else if (kind.body === "native") {
-    body = hasNativePort ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NativeBody, { itemId: item.id, windowId, children: kindComponent(kind) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Rendered, { kind, item, props }) : null }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CanvasPanelEmpty, { children: "Opens in the desktop app" });
-  } else {
-    body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Rendered, { kind, item, props });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-item", hidden: !isActive, "data-kind": item.kind, children: body });
-}
-function Rendered({ kind, item, props }) {
-  const canvas = useCanvas();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ItemBoundary, { item, onClose: () => canvas.close(item.id), onRetry: () => resetKindComponent(kind), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-loading", "aria-busy": "true" }), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KindRender, { kind, props }) }) });
-}
-function KindRender({ kind, props }) {
-  const Render = kindComponent(kind);
-  if (!Render) throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" has nothing to render.`);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Render, { ...props });
-}
-function NativeBody({ itemId, windowId, children }) {
-  const { layer } = useCanvasInternals();
-  const ref = (0, import_react4.useRef)(null);
-  const measure = (0, import_react4.useRef)(() => void 0);
-  measure.current = () => {
-    const el = ref.current;
-    const box = el?.isConnected ? el.getBoundingClientRect() : null;
-    if (!box || box.width <= 0 || box.height <= 0) {
-      layer.native.report(itemId, null, { visible: false, windowId });
-      return;
-    }
-    const rect = { ...toCanvasRect(box), devicePixelRatio: window.devicePixelRatio || 1 };
-    layer.native.report(itemId, rect, { visible: !layer.isBlocked(), windowId });
-  };
-  useIsoLayoutEffect(() => measure.current());
-  useIsoLayoutEffect(() => {
-    const el = ref.current;
-    const run = () => measure.current();
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(run);
-    if (el) observer?.observe(el);
-    const unregister = layer.native.register(run);
-    window.addEventListener("resize", run);
-    return () => {
-      observer?.disconnect();
-      unregister();
-      window.removeEventListener("resize", run);
-      layer.native.report(itemId, null, { visible: false, windowId });
-    };
-  }, [itemId, windowId, layer]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: "mxc-native-body", "data-native-body": itemId, children });
-}
-function ItemProblem({ message, onClose, onRetry }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mxc-problem", role: "alert", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AlertIcon, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mxc-problem-actions", children: [
-      onRetry ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onRetry, children: "Try again" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "mxc-text-button", onClick: onClose, children: "Close tab" })
-    ] })
-  ] });
-}
-var ItemBoundary = class extends import_react4.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_runtime5.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_runtime5.jsx)(CanvasPanelEmpty, { children: "Nothing open" });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.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_runtime5.jsx)(Icon, { className: "mxc-launcher-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: launcher.title ?? kind.label })
-        ]
-      },
-      kind.id
-    );
-  }) });
-}
 
 // src/react/CanvasColumn.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var useIsoLayoutEffect2 = typeof window === "undefined" ? import_react5.useEffect : import_react5.useLayoutEffect;
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var useIsoLayoutEffect3 = typeof window === "undefined" ? import_react9.useEffect : import_react9.useLayoutEffect;
 function subscribeViewport(listener) {
   window.addEventListener("resize", listener);
   return () => window.removeEventListener("resize", listener);
 }
 function useViewportWidth() {
-  return (0, import_react5.useSyncExternalStore)(subscribeViewport, () => window.innerWidth, () => 0);
+  return (0, import_react9.useSyncExternalStore)(subscribeViewport, () => window.innerWidth, () => 0);
 }
 function useRegionWidth() {
   const viewport = useViewportWidth();
@@ -2401,28 +3011,66 @@ function useCanvasColumnWidth() {
   return fitCanvasWidth(width, region, controller.rules);
 }
 function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
-  const { controller, windowId } = useCanvasInternals();
+  const { controller, windowId, layer } = useCanvasInternals();
   const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
   const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
   const width = useCanvasState((s) => selectCanvasWidth(s, windowId));
   const layout = useCanvasState((s) => selectCanvasLayout(s, windowId));
   const region = useRegionWidth();
-  const [dragWidth, setDragWidth] = (0, import_react5.useState)(null);
+  const [dragWidth, setDragWidth] = (0, import_react9.useState)(null);
+  const [slots] = (0, import_react9.useState)(createCanvasSlots);
+  const ref = (0, import_react9.useRef)(null);
   useRegisterCanvasPresence();
-  if (!isOpen || !layout) return null;
+  (0, import_react9.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    let frame2 = 0;
+    let running = false;
+    const tick = () => {
+      layer.native.remeasure();
+      frame2 = running ? requestAnimationFrame(tick) : 0;
+    };
+    const start = (event) => {
+      if (event.target !== el || running) return;
+      running = true;
+      frame2 = requestAnimationFrame(tick);
+    };
+    const stop = (event) => {
+      if (event.target !== el) return;
+      running = false;
+      if (frame2) cancelAnimationFrame(frame2);
+      frame2 = 0;
+      layer.native.remeasure();
+    };
+    el.addEventListener("transitionrun", start);
+    el.addEventListener("transitionend", stop);
+    el.addEventListener("transitioncancel", stop);
+    return () => {
+      running = false;
+      if (frame2) cancelAnimationFrame(frame2);
+      el.removeEventListener("transitionrun", start);
+      el.removeEventListener("transitionend", stop);
+      el.removeEventListener("transitioncancel", stop);
+    };
+  }, [layer]);
+  if (!layout) return null;
   const fitted = fitCanvasWidth(width, region, controller.rules);
   const shown = dragWidth ?? fitted;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "aside",
     {
+      ref,
       className: ["mxc-column", className].filter(Boolean).join(" "),
-      "data-fullscreen": isFullscreen ? "" : void 0,
+      "data-open": isOpen ? "" : void 0,
+      "data-fullscreen": isOpen && isFullscreen ? "" : void 0,
       "data-placement": placement,
       "data-mxc-window": windowId,
       "aria-label": "Canvas",
+      "aria-hidden": isOpen ? void 0 : true,
+      inert: !isOpen,
       style: { ...style, ["--mxc-width"]: `${shown}px` },
-      children: [
-        placement === "docked" && !isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mxc-column-inner", children: [
+        placement === "docked" && isOpen && !isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           WidthHandle,
           {
             width: fitted,
@@ -2433,14 +3081,17 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
             }
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mxc-layout", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LayoutNodeView, { node: layout }) })
-      ]
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CanvasSlotsContext.Provider, { value: slots, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mxc-layout", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutNodeView, { node: layout }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasBodyLayer, {})
+        ] })
+      ] })
     }
   );
 }
 function WidthHandle({ width, region, onDrag }) {
   const canvas = useCanvas();
-  const start = (0, import_react5.useRef)(null);
+  const start = (0, import_react9.useRef)(null);
   const clamp = (next) => clampDraggedCanvasWidth(next, region, canvas.rules);
   const onPointerDown = (event) => {
     event.preventDefault();
@@ -2460,7 +3111,7 @@ function WidthHandle({ width, region, onDrag }) {
     onDrag(null);
     canvas.setWidth(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       className: "mxc-width-handle",
@@ -2482,12 +3133,12 @@ function WidthHandle({ width, region, onDrag }) {
   );
 }
 function LayoutNodeView({ node }) {
-  if (node.type === "pane") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CanvasPaneView, { paneId: node.paneId });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SplitView, { node });
+  if (node.type === "pane") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasPaneView, { paneId: node.paneId });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SplitView, { node });
 }
 function useMeasuredWidth(ref, enabled) {
-  const [width, setWidth] = (0, import_react5.useState)(0);
-  useIsoLayoutEffect2(() => {
+  const [width, setWidth] = (0, import_react9.useState)(0);
+  useIsoLayoutEffect3(() => {
     const el = ref.current;
     if (!enabled || !el) return;
     setWidth(el.getBoundingClientRect().width);
@@ -2500,8 +3151,8 @@ function useMeasuredWidth(ref, enabled) {
 }
 function SplitView({ node }) {
   const canvas = useCanvas();
-  const ref = (0, import_react5.useRef)(null);
-  const [liveSizes, setLiveSizes] = (0, import_react5.useState)(null);
+  const ref = (0, import_react9.useRef)(null);
+  const [liveSizes, setLiveSizes] = (0, import_react9.useState)(null);
   const sizes = liveSizes ?? node.sizes;
   const measuredWidth = useMeasuredWidth(ref, node.orientation === "horizontal" && canvas.rules.paneMinWidth > 0);
   const stacked = node.orientation === "horizontal" && shouldStackSplit(measuredWidth, node.children.length, canvas.rules);
@@ -2541,11 +3192,11 @@ function SplitView({ node }) {
     target.addEventListener("pointerup", up);
     target.addEventListener("pointercancel", up);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: "mxc-split", "data-orientation": orientation, "data-stacked": stacked ? "" : void 0, children: node.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, className: "mxc-split", "data-orientation": orientation, "data-stacked": stacked ? "" : void 0, children: node.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     SplitChild,
     {
       size: sizes[i] ?? 1 / node.children.length,
-      handle: i < node.children.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      handle: i < node.children.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           className: "mxc-split-handle",
@@ -2555,14 +3206,14 @@ function SplitView({ node }) {
           onDoubleClick: () => canvas.resizeSplit(node.id, node.children.map(() => 1 / node.children.length))
         }
       ) : null,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LayoutNodeView, { node: child })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutNodeView, { node: child })
     },
     child.type === "pane" ? child.paneId : child.id
   )) });
 }
 function SplitChild({ size, handle, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mxc-split-child", style: { flexGrow: size, flexBasis: 0 }, children }),
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mxc-split-child", style: { flexGrow: size, flexBasis: 0 }, children }),
     handle
   ] });
 }
@@ -2576,26 +3227,61 @@ function CanvasToggle({
   const count = useCanvasState((s) => selectCanvasWindowItemCount(s, windowId));
   const hint = canvasShortcutHint("canvas.toggle", isMac2());
   const Button = variant === "glass" ? import_tap_target.TapTargetButton : import_tap_target.TapTargetButtonTransparent;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: ["mxc-toggle", className].filter(Boolean).join(" "), "data-open": isOpen ? "" : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: ["mxc-toggle", className].filter(Boolean).join(" "), "data-open": isOpen ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Button,
       {
         ariaLabel: isOpen ? "Hide canvas" : "Show canvas",
         tooltip: `${isOpen ? "Hide canvas" : "Show canvas"}${hint ? ` (${hint})` : ""}`,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelRightIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PanelRightIcon, {}),
         onClick: () => controller.toggle()
       }
     ),
-    count > 0 && !isOpen ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mxc-toggle-badge", children: count }) : null
+    count > 0 && !isOpen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "mxc-toggle-badge", children: count }) : null
   ] });
 }
+function CanvasKindIcons({
+  kinds,
+  variant = "transparent",
+  className,
+  label = "Canvas tools"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { role: "group", "aria-label": label, className: ["mxc-kind-icons", className].filter(Boolean).join(" "), children: kinds.map((entry) => {
+    const icon = typeof entry === "string" ? { kind: entry } : entry;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(KindIconButton, { icon, variant }, `${icon.kind}::${icon.key ?? CANVAS_DEFAULT_KEY}`);
+  }) });
+}
+function KindIconButton({ icon, variant }) {
+  const kind = useCanvasKind(icon.kind);
+  const toggle = useCanvasKindToggle({
+    kind: icon.kind,
+    key: icon.key,
+    data: icon.data,
+    title: icon.title,
+    whenVisible: icon.whenVisible
+  });
+  if (!kind) return null;
+  const Icon = kind.icon;
+  const Button = variant === "glass" ? import_tap_target.TapTargetButton : import_tap_target.TapTargetButtonTransparent;
+  const name = icon.label ?? kind.label;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Button,
+    {
+      ariaLabel: name,
+      tooltip: name,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, {}),
+      pressed: toggle.isVisible,
+      onClick: () => void toggle.toggle()
+    }
+  );
+}
 function CanvasFrame({ children, className }) {
   const { windowId } = useCanvasInternals();
   const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
   const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: ["mxc-frame", className].filter(Boolean).join(" "), "data-canvas-open": isOpen ? "" : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mxc-frame-main", hidden: isOpen && isFullscreen, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CanvasColumn, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: ["mxc-frame", className].filter(Boolean).join(" "), "data-canvas-open": isOpen ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mxc-frame-main", hidden: isOpen && isFullscreen, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasColumn, {})
   ] });
 }
 //# sourceMappingURL=react.cjs.map