@ai-matrx/canvas 0.6.0 → 0.7.0

package/dist/react.cjs

@@ -34,6 +34,8 @@ var react_exports = {};
 __export(react_exports, {
   BrowserBar: () => BrowserBar,
   BrowserTabs: () => BrowserTabs,
+  CANVAS_ACTIVE_TAB_MIN_WIDTH: () => CANVAS_ACTIVE_TAB_MIN_WIDTH,
+  CANVAS_TAB_MIN_WIDTH: () => CANVAS_TAB_MIN_WIDTH,
   CanvasColumn: () => CanvasColumn,
   CanvasFrame: () => CanvasFrame,
   CanvasHeaderButton: () => CanvasHeaderButton,
@@ -46,8 +48,10 @@ __export(react_exports, {
   CanvasTab: () => CanvasTab,
   CanvasToggle: () => CanvasToggle,
   CanvasWindowScope: () => CanvasWindowScope,
+  beginCanvasResize: () => beginCanvasResize,
   canvasSessionKey: () => canvasSessionKey,
   defineCanvasKind: () => defineCanvasKind,
+  fitCanvasTabs: () => fitCanvasTabs,
   getCanvasKind: () => getCanvasKind,
   itemTitle: () => itemTitle,
   listCanvasKinds: () => listCanvasKinds,
@@ -62,6 +66,7 @@ __export(react_exports, {
   useCanvasKinds: () => useCanvasKinds,
   useCanvasLauncherEntries: () => useCanvasLauncherEntries,
   useCanvasLauncherEntry: () => useCanvasLauncherEntry,
+  useCanvasMenuItems: () => useCanvasMenuItems,
   useCanvasNativeBodies: () => useCanvasNativeBodies,
   useCanvasPresentation: () => useCanvasPresentation,
   useCanvasState: () => useCanvasState,
@@ -72,7 +77,46 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // src/react/provider.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
+
+// src/react/menuItems.ts
+var import_react = require("react");
+var useIsoLayoutEffect = typeof window === "undefined" ? import_react.useEffect : import_react.useLayoutEffect;
+function createCanvasItemMenus() {
+  const sources = /* @__PURE__ */ new Map();
+  return {
+    register(itemId, read) {
+      let set = sources.get(itemId);
+      if (!set) sources.set(itemId, set = /* @__PURE__ */ new Set());
+      set.add(read);
+      return () => {
+        const current = sources.get(itemId);
+        current?.delete(read);
+        if (current && current.size === 0) sources.delete(itemId);
+      };
+    },
+    read(itemId) {
+      const out = [];
+      for (const read of sources.get(itemId) ?? []) {
+        try {
+          out.push(...read());
+        } catch (error) {
+          console.error("[@ai-matrx/canvas] a body's menu entries threw", error);
+        }
+      }
+      return out;
+    }
+  };
+}
+function useCanvasMenuItems(itemId, items) {
+  const { itemMenus } = useCanvasInternals();
+  const latest = (0, import_react.useRef)(items);
+  latest.current = items;
+  useIsoLayoutEffect(() => {
+    if (!itemId) return void 0;
+    return itemMenus.register(itemId, () => latest.current);
+  }, [itemMenus, itemId]);
+}
 
 // src/core/types.ts
 var CANVAS_MAIN_WINDOW = "main";
@@ -241,6 +285,8 @@ var canvasActions = {
   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() } }),
+  /** Re-does the last Back (the step Back left), with that step's live body. */
+  forward: (itemId) => ({ type: `${P}forward`, 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 } }),
@@ -441,6 +487,7 @@ function newItem(kind, key, title, data, now, steps) {
   const id = canvasItemId(kind, key);
   const history = steps?.history ?? [];
   const kept = steps?.kept ?? [];
+  const forward = steps?.forward ?? [];
   return {
     id,
     kind,
@@ -452,7 +499,8 @@ function newItem(kind, key, title, data, now, steps) {
     // A reused instance is the SAME live body coming back (Back, or returning to a kept step).
     instance: steps?.instance ?? `${now.toString(36)}:${id}`,
     ...history.length > 0 ? { history: history.slice(-CANVAS_HISTORY_LIMIT) } : {},
-    ...kept.length > 0 ? { kept: kept.slice(-CANVAS_KEEP_ALIVE_DEPTH) } : {}
+    ...kept.length > 0 ? { kept: kept.slice(-CANVAS_KEEP_ALIVE_DEPTH) } : {},
+    ...forward.length > 0 ? { forward: forward.slice(-CANVAS_HISTORY_LIMIT) } : {}
   };
 }
 function historyEntry(item) {
@@ -498,12 +546,14 @@ function sanitizeHistory(raw) {
 function sanitizeItem(item) {
   const history = sanitizeHistory(item.history);
   const kept = sanitizeHistory(item.kept).slice(-CANVAS_KEEP_ALIVE_DEPTH);
-  const { history: _history, kept: _kept, instance, ...rest } = item;
+  const forward = sanitizeHistory(item.forward);
+  const { history: _history, kept: _kept, forward: _forward, instance, ...rest } = item;
   return {
     ...rest,
     ...typeof instance === "string" && instance ? { instance } : {},
     ...history.length > 0 ? { history } : {},
-    ...kept.length > 0 ? { kept } : {}
+    ...kept.length > 0 ? { kept } : {},
+    ...forward.length > 0 ? { forward } : {}
   };
 }
 function clampWidth(width) {
@@ -694,6 +744,9 @@ function canvasReducer(state = createInitialCanvasState(), action) {
       const keptIndex = keptAll.findIndex((entry) => canvasItemId(entry.kind, entry.key) === targetId);
       const revived = keptIndex >= 0 ? keptAll[keptIndex] : void 0;
       const kept = keptAll.filter((_, i) => i !== keptIndex);
+      const forwardAll = current.forward ?? [];
+      const nextForward = forwardAll[forwardAll.length - 1];
+      const forward = nextForward && canvasItemId(nextForward.kind, nextForward.key) === targetId ? forwardAll.slice(0, -1) : [];
       return replaceInPlace(
         state,
         current,
@@ -703,7 +756,7 @@ function canvasReducer(state = createInitialCanvasState(), action) {
           to.title !== void 0 ? to.title : revived?.title ?? null,
           to.data !== void 0 ? to.data : revived?.data ?? null,
           now,
-          { history, kept, instance: revived?.instance }
+          { history, kept, forward, instance: revived?.instance }
         )
       );
     }
@@ -719,10 +772,36 @@ function canvasReducer(state = createInitialCanvasState(), action) {
         return focusExisting(canvasReducer(state, canvasActions.closeItem(itemId)), targetId);
       }
       const kept = [...(current.kept ?? []).filter((k) => canvasItemId(k.kind, k.key) !== itemId), historyEntry(current)];
+      const forward = [...current.forward ?? [], historyEntry(current)];
       return replaceInPlace(
         state,
         current,
-        newItem(entry.kind, entry.key, entry.title, entry.data, now, { history: history.slice(0, -1), kept, instance: entry.instance })
+        newItem(entry.kind, entry.key, entry.title, entry.data, now, { history: history.slice(0, -1), kept, forward, instance: entry.instance })
+      );
+    }
+    case `${P}forward`: {
+      const { itemId, now } = action.payload;
+      const current = state.items[itemId];
+      const forwardAll = current?.forward ?? [];
+      const entry = forwardAll[forwardAll.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);
+      }
+      const keptAll = current.kept ?? [];
+      const revived = keptAll.find((k) => canvasItemId(k.kind, k.key) === targetId);
+      const kept = keptAll.filter((k) => canvasItemId(k.kind, k.key) !== targetId);
+      return replaceInPlace(
+        state,
+        current,
+        newItem(entry.kind, entry.key, entry.title, entry.data, now, {
+          history: [...current.history ?? [], historyEntry(current)],
+          kept,
+          forward: forwardAll.slice(0, -1),
+          instance: revived?.instance ?? entry.instance
+        })
       );
     }
     case `${P}closeItem`: {
@@ -974,6 +1053,7 @@ function toPersistableSnapshot(state, isRestorable) {
 }
 
 // src/core/rules.ts
+var CANVAS_PANE_MIN_WIDTH = 280;
 var CANVAS_WEB_LAYOUT_RULES = {
   defaultWidth: CANVAS_DEFAULT_WIDTH,
   minWidth: CANVAS_MIN_WIDTH,
@@ -981,7 +1061,9 @@ var CANVAS_WEB_LAYOUT_RULES = {
   // 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
+  // A pane narrower than this cannot show a header (Back, a readable tab, "+", the menu, close) and a
+  // body side by side with another: a split right that would go under it stacks instead.
+  paneMinWidth: CANVAS_PANE_MIN_WIDTH
 };
 var clampFraction = (value, fallback) => Number.isFinite(value) ? Math.min(0.88, Math.max(0.12, value)) : fallback;
 function resolveCanvasLayoutRules(rules) {
@@ -1020,6 +1102,9 @@ var CANVAS_SHORTCUTS = [
   { id: "canvas.toggleFullscreen", accelerator: "CmdOrCtrl+Shift+Enter", when: "canvas-focus", label: "Expand canvas", web: true },
   { id: "canvas.splitRight", accelerator: "CmdOrCtrl+Alt+\\", when: "canvas-focus", label: "Split right", web: true },
   { id: "canvas.splitDown", accelerator: "CmdOrCtrl+Alt+Shift+\\", when: "canvas-focus", label: "Split down", web: true },
+  // Browsers own ⌘[ / ⌘] for their own history: data for a desktop host (and the header's Back / Forward).
+  { id: "canvas.back", accelerator: "CmdOrCtrl+[", when: "canvas-focus", label: "Back", web: false },
+  { id: "canvas.forward", accelerator: "CmdOrCtrl+]", when: "canvas-focus", label: "Forward", web: false },
   { id: "canvas.closeTab", accelerator: "CmdOrCtrl+W", when: "canvas-focus", label: "Close tab", web: false },
   { id: "canvas.nextTab", accelerator: "Ctrl+Tab", when: "canvas-focus", label: "Next tab", web: false },
   { id: "canvas.previousTab", accelerator: "Ctrl+Shift+Tab", when: "canvas-focus", label: "Previous tab", web: false }
@@ -1069,11 +1154,17 @@ function runCanvasCommand(controller, id, windowId = controller.windowId) {
       if (!frame2?.isOpen || !pane) return false;
       controller.splitPane(pane.id, id === "canvas.splitRight" ? "horizontal" : "vertical", pane.itemIds.length > 1 ? pane.activeItemId ?? void 0 : void 0);
       return true;
+    case "canvas.back":
+      if (!frame2?.isOpen || !pane?.activeItemId) return false;
+      return controller.back(pane.activeItemId) !== null;
+    case "canvas.forward":
+      if (!frame2?.isOpen || !pane?.activeItemId) return false;
+      return controller.forward(pane.activeItemId) !== null;
     default:
       return false;
   }
 }
-var CODE_FOR = { "\\": "Backslash", Tab: "Tab", Escape: "Escape", Enter: "Enter" };
+var CODE_FOR = { "\\": "Backslash", "[": "BracketLeft", "]": "BracketRight", Tab: "Tab", Escape: "Escape", Enter: "Enter" };
 function matchesCanvasAccelerator(input, accelerator, isMac3) {
   const parts = accelerator.split("+");
   const key = parts.pop() ?? "";
@@ -1190,6 +1281,13 @@ function view(shared, windowId) {
       dispatch(canvasActions.back(itemId));
       return canvasItemId(entry.kind, entry.key);
     },
+    forward(itemId) {
+      const forward = store.getState().items[itemId]?.forward ?? [];
+      const entry = forward[forward.length - 1];
+      if (!entry) return null;
+      dispatch(canvasActions.forward(itemId));
+      return canvasItemId(entry.kind, entry.key);
+    },
     newTab(paneId) {
       const state = store.getState();
       const frame2 = canvasWindowFrame(state, windowId);
@@ -1456,6 +1554,16 @@ function selectCanvasWindowItemCount(s, windowId) {
 var NO_WINDOWS = Object.freeze({});
 var NO_HISTORY = Object.freeze([]);
 var selectCanvasCanGoBack = (s, itemId) => (s.items[itemId]?.history?.length ?? 0) > 0;
+var selectCanvasCanGoForward = (s, itemId) => (s.items[itemId]?.forward?.length ?? 0) > 0;
+function selectCanvasPresentedPaneId(s, windowId) {
+  const f = frame(s, windowId);
+  if (!f) return null;
+  const ids = listPaneIds(f.layout);
+  const holds = (id) => (s.panes[id]?.itemIds.length ?? 0) > 0;
+  const focused = ids.find((id) => id === f.focusedPaneId);
+  if (focused && holds(focused)) return focused;
+  return ids.find(holds) ?? focused ?? ids[0] ?? null;
+}
 
 // src/core/presentation.ts
 var CANVAS_PHONE_MAX_WIDTH = 767;
@@ -1499,7 +1607,9 @@ function toggleKind(controller, input) {
   const before = selectCanvasKindVisibility(controller.getState(), input.kind, key);
   if (before === "visible") {
     if ((input.whenVisible ?? "close") === "close") {
+      const windowId = canvasWindowOfItem(controller.getState(), itemId);
       controller.close(itemId);
+      if (windowId && selectCanvasWindowItemCount(controller.getState(), windowId) === 0) controller.hide(windowId);
     } else {
       controller.hide(canvasWindowOfItem(controller.getState(), itemId) ?? void 0);
     }
@@ -1521,7 +1631,7 @@ function toggleKind(controller, input) {
 }
 
 // src/react/layer.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime = require("react/jsx-runtime");
 function createCanvasLayer(getPorts) {
@@ -1588,9 +1698,9 @@ function createCanvasLayer(getPorts) {
   };
 }
 function CanvasDomOverlay({ layer }) {
-  const elements = (0, import_react.useSyncExternalStore)(layer.dom.subscribe, layer.dom.list, layer.dom.list);
-  const [mounted, setMounted] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => setMounted(true), []);
+  const elements = (0, import_react2.useSyncExternalStore)(layer.dom.subscribe, layer.dom.list, layer.dom.list);
+  const [mounted, setMounted] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => setMounted(true), []);
   if (!mounted || elements.length === 0 || typeof document === "undefined") return null;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mxc-overlay", "aria-hidden": "true", children: elements.map(([id, element]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingView, { element }, id)) }),
@@ -1606,11 +1716,11 @@ function FloatingView({ element }) {
   return null;
 }
 function Tooltip({ element }) {
-  const ref = (0, import_react.useRef)(null);
+  const ref = (0, import_react2.useRef)(null);
   const { anchor, side, text } = element;
   const top = side === "bottom" ? anchor.y + anchor.height + 6 : anchor.y - 6;
   const centre = anchor.x + anchor.width / 2;
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react2.useLayoutEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const width = el.offsetWidth;
@@ -1714,7 +1824,7 @@ function escapeBelongsElsewhere(event) {
   const active = typeof document === "undefined" ? null : document.activeElement;
   return !!active?.closest?.('[role="menu"], [role="dialog"], [role="alertdialog"], [role="listbox"]');
 }
-var CanvasContext = (0, import_react2.createContext)(null);
+var CanvasContext = (0, import_react3.createContext)(null);
 function sessionHooksFor(kindId) {
   const kind = getCanvasKind(kindId);
   if (!kind || kind.restore !== "session") return void 0;
@@ -1741,13 +1851,13 @@ function CanvasProvider({
   overlay,
   onNativeBodyFrame
 }) {
-  const hostPorts = (0, import_react2.useMemo)(
+  const hostPorts = (0, import_react3.useMemo)(
     () => ({ itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame }),
     [itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame]
   );
-  const portsRef = (0, import_react2.useRef)(hostPorts);
+  const portsRef = (0, import_react3.useRef)(hostPorts);
   portsRef.current = hostPorts;
-  const [{ controller, layer, launcherEntries }] = (0, import_react2.useState)(() => ({
+  const [{ controller, layer, launcherEntries, itemMenus }] = (0, import_react3.useState)(() => ({
     controller: createCanvasController({
       store: store ?? createCanvasStore(),
       persistence: persistence === void 0 ? createLocalStorageCanvasPersistence() : persistence,
@@ -1761,11 +1871,12 @@ function CanvasProvider({
       preferredTarget: (kind) => getCanvasKind(kind)?.preferredTarget
     }),
     layer: createCanvasLayer(() => portsRef.current),
-    launcherEntries: createLauncherEntryStore()
+    launcherEntries: createLauncherEntryStore(),
+    itemMenus: createCanvasItemMenus()
   }));
   const windowId = controller.windowId;
-  (0, import_react2.useEffect)(() => controller.start(), [controller]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => controller.start(), [controller]);
+  (0, import_react3.useEffect)(() => {
     if (!hotkeys) return;
     const isMac3 = isMacPlatform();
     const applies = (when, event) => {
@@ -1786,9 +1897,9 @@ function CanvasProvider({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [controller, hotkeys, windowId]);
-  const value = (0, import_react2.useMemo)(
-    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries }),
-    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries]
+  const value = (0, import_react3.useMemo)(
+    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus }),
+    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CanvasContext.Provider, { value, children: [
     children,
@@ -1797,14 +1908,14 @@ function CanvasProvider({
 }
 function CanvasWindowScope({ windowId, children }) {
   const parent = useCanvasContext();
-  const value = (0, import_react2.useMemo)(() => {
+  const value = (0, import_react3.useMemo)(() => {
     const id = canvasWindowId(windowId);
     return { ...parent, windowId: id, controller: parent.controller.forWindow(id) };
   }, [parent, windowId]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CanvasContext.Provider, { value, children });
 }
 function useCanvasContext() {
-  const value = (0, import_react2.useContext)(CanvasContext);
+  const value = (0, import_react3.useContext)(CanvasContext);
   if (!value) throw new Error("[@ai-matrx/canvas] useCanvas* must be used inside <CanvasProvider>.");
   return value;
 }
@@ -1812,16 +1923,16 @@ function useCanvasInternals() {
   return useCanvasContext();
 }
 function useOptionalCanvasInternals() {
-  return (0, import_react2.useContext)(CanvasContext);
+  return (0, import_react3.useContext)(CanvasContext);
 }
 function useCanvas() {
   return useCanvasContext().controller;
 }
 function useOptionalCanvas() {
-  return (0, import_react2.useContext)(CanvasContext)?.controller ?? null;
+  return (0, import_react3.useContext)(CanvasContext)?.controller ?? null;
 }
 function useCanvasWindowId() {
-  return (0, import_react2.useContext)(CanvasContext)?.windowId ?? CANVAS_MAIN_WINDOW;
+  return (0, import_react3.useContext)(CanvasContext)?.windowId ?? CANVAS_MAIN_WINDOW;
 }
 function useCanvasHostPorts() {
   return useCanvasContext().ports;
@@ -1830,16 +1941,16 @@ function useCanvasNativeBodies() {
   return useCanvasContext().layer.native;
 }
 function useRegisterCanvasPresence() {
-  const context = (0, import_react2.useContext)(CanvasContext);
+  const context = (0, import_react3.useContext)(CanvasContext);
   const controller = context?.controller;
   const windowId = context?.windowId;
-  (0, import_react2.useEffect)(() => controller?.registerPresentation(windowId), [controller, windowId]);
+  (0, import_react3.useEffect)(() => controller?.registerPresentation(windowId), [controller, windowId]);
 }
 var noPresence = () => () => void 0;
 function useCanvasIsPresented() {
-  const context = (0, import_react2.useContext)(CanvasContext);
+  const context = (0, import_react3.useContext)(CanvasContext);
   const controller = context?.controller;
-  return (0, import_react2.useSyncExternalStore)(
+  return (0, import_react3.useSyncExternalStore)(
     controller ? controller.subscribePresentation : noPresence,
     () => controller?.isPresented() ?? false,
     () => false
@@ -1847,7 +1958,7 @@ function useCanvasIsPresented() {
 }
 function useCanvasState(selector) {
   const { store } = useCanvasContext().controller;
-  return (0, import_react2.useSyncExternalStore)(
+  return (0, import_react3.useSyncExternalStore)(
     store.subscribe,
     () => selector(store.getState()),
     () => selector(store.getState())
@@ -1855,9 +1966,9 @@ function useCanvasState(selector) {
 }
 var NO_SUBSCRIPTION = () => () => void 0;
 function useOptionalCanvasState(selector, fallback) {
-  const store = (0, import_react2.useContext)(CanvasContext)?.controller.store;
+  const store = (0, import_react3.useContext)(CanvasContext)?.controller.store;
   const read = () => store ? selector(store.getState()) : fallback;
-  return (0, import_react2.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, read, read);
+  return (0, import_react3.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, read, read);
 }
 function useCanvasKindToggle(input) {
   const controller = useCanvasContext().controller;
@@ -1871,28 +1982,28 @@ function useCanvasKindToggle(input) {
   };
 }
 function useCanvasKinds() {
-  (0, import_react2.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
+  (0, import_react3.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
   return listCanvasKinds();
 }
 function useCanvasKind(id) {
-  (0, import_react2.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
+  (0, import_react3.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 store = (0, import_react3.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)(() => {
+  (0, import_react3.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 store = (0, import_react3.useContext)(CanvasContext)?.launcherEntries;
+  const all = (0, import_react3.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) {
@@ -1905,14 +2016,14 @@ function useCanvasLauncherEntries() {
 }
 
 // src/react/CanvasColumn.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_tap_target = require("@ai-matrx/tap-target");
 
 // src/react/bodies.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/react/chrome.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/react/icons.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -2010,23 +2121,37 @@ var LayoutGridIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph,
   /* @__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" })
 ] });
-var ChevronLeftIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m15 18-6-6 6-6" }) });
-var ChevronRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 18 6-6-6-6" }) });
+var ChevronDownIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }) });
 
 // src/react/chrome.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var useIsoLayoutEffect2 = typeof window === "undefined" ? import_react4.useEffect : import_react4.useLayoutEffect;
+function useTruncated(title) {
+  const ref = (0, import_react4.useRef)(null);
+  const [truncated, setTruncated] = (0, import_react4.useState)(false);
+  useIsoLayoutEffect2(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const check = () => setTruncated(el.scrollWidth - el.clientWidth > 1);
+    check();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(check);
+    observer?.observe(el);
+    return () => observer?.disconnect();
+  }, [title]);
+  return { ref, truncated };
+}
 var cx = (...names) => names.filter(Boolean).join(" ");
 function useTooltip(text) {
   const internals = useOptionalCanvasInternals();
-  const timer = (0, import_react3.useRef)(null);
-  const hide = (0, import_react3.useRef)(null);
+  const timer = (0, import_react4.useRef)(null);
+  const hide = (0, import_react4.useRef)(null);
   const close = () => {
     if (timer.current) clearTimeout(timer.current);
     timer.current = null;
     hide.current?.();
     hide.current = null;
   };
-  (0, import_react3.useEffect)(() => close, []);
+  (0, import_react4.useEffect)(() => close, []);
   if (!text) return { close, handlers: {} };
   if (!internals) return { close, handlers: { title: text } };
   const open = (element, delay) => {
@@ -2052,7 +2177,7 @@ function useTooltip(text) {
     }
   };
 }
-var CanvasHeaderButton = (0, import_react3.forwardRef)(function CanvasHeaderButton2({ label, shortcut, available = true, size = "sm", pressed, className, children, onClick, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...rest }, ref) {
+var CanvasHeaderButton = (0, import_react4.forwardRef)(function CanvasHeaderButton2({ label, shortcut, available = true, size = "sm", pressed, className, children, onClick, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...rest }, ref) {
   const tooltip = useTooltip(shortcut ? `${label} (${shortcut})` : label);
   const own = tooltip.handlers;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -2097,12 +2222,12 @@ var CanvasHeaderButton = (0, import_react3.forwardRef)(function CanvasHeaderButt
     }
   );
 });
-var CanvasMenuTrigger = (0, import_react3.forwardRef)(
+var CanvasMenuTrigger = (0, import_react4.forwardRef)(
   function CanvasMenuTrigger2({ label = "More", ...props }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { ref, label, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoreIcon, {}) });
   }
 );
-var CanvasPanel = (0, import_react3.forwardRef)(function CanvasPanel2({
+var CanvasPanel = (0, import_react4.forwardRef)(function CanvasPanel2({
   panelId,
   title,
   leading,
@@ -2152,8 +2277,9 @@ var CanvasPanel = (0, import_react3.forwardRef)(function CanvasPanel2({
 function CanvasPanelEmpty({ children, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "canvas-panel-empty", className: cx("mxc-empty-line", className), children });
 }
-var CanvasTab = (0, import_react3.forwardRef)(function CanvasTab2({ title, icon, note, active, onSelect, onClose, className, onKeyDown, onClick, ...rest }, ref) {
+var CanvasTab = (0, import_react4.forwardRef)(function CanvasTab2({ title, icon, note, active, onSelect, onClose, className, onKeyDown, onClick, ...rest }, ref) {
   const shown = title || "New tab";
+  const name = useTruncated(shown);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -2163,6 +2289,7 @@ var CanvasTab = (0, import_react3.forwardRef)(function CanvasTab2({ title, icon,
       tabIndex: active ? 0 : -1,
       "data-slot": "browser-tab",
       "data-active": active ? "" : void 0,
+      "data-truncated": name.truncated ? "" : void 0,
       title: shown,
       className: cx("mxc-tab", className),
       ...rest,
@@ -2180,7 +2307,7 @@ var CanvasTab = (0, import_react3.forwardRef)(function CanvasTab2({ title, icon,
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-tab-icon", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-tab-title", children: shown }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { ref: name.ref, className: "mxc-tab-title", children: shown }),
         note ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "mxc-tab-note", "data-slot": "browser-tab-note", children: note }) : null,
         onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
@@ -2219,9 +2346,9 @@ function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, newLabel = "New
   ] });
 }
 function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }) {
-  const [draft, setDraft] = (0, import_react3.useState)(url);
-  const [editing, setEditing] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react4.useState)(url);
+  const [editing, setEditing] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
     if (!editing) setDraft(url);
   }, [url, editing]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-slot": "browser-bar", className: cx("mxc-browser-bar", className), children: [
@@ -2263,15 +2390,15 @@ function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload,
 }
 
 // src/react/dnd.ts
-var import_react4 = require("react");
+var import_react5 = 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 active = (0, import_react5.useRef)([]);
   const end = () => {
     for (const dispose of active.current.splice(0)) dispose();
   };
-  (0, import_react4.useEffect)(() => end, []);
+  (0, import_react5.useEffect)(() => end, []);
   return {
     draggable: true,
     onDragStart: (event) => {
@@ -2286,8 +2413,8 @@ function useTabDrag(itemId, title) {
 function usePaneDrop(paneId, getOutline) {
   const canvas = useCanvas();
   const { layer } = useCanvasInternals();
-  const drop = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => () => drop.current?.(), []);
+  const drop = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => () => drop.current?.(), []);
   const hide = () => {
     drop.current?.();
     drop.current = null;
@@ -2418,16 +2545,19 @@ function useItemKind(kindId) {
   const registered = useCanvasKind(kindId);
   return kindId === CANVAS_LAUNCHER_KIND ? CANVAS_LAUNCHER_KIND_DEFINITION : registered;
 }
+function resolveItemKind(kindId, lookup) {
+  return kindId === CANVAS_LAUNCHER_KIND ? CANVAS_LAUNCHER_KIND_DEFINITION : lookup(kindId);
+}
 
 // src/react/presentation.tsx
-var import_react5 = require("react");
-var CanvasPresentationContext = (0, import_react5.createContext)(null);
+var import_react6 = require("react");
+var CanvasPresentationContext = (0, import_react6.createContext)(null);
 function useCanvasPresentation() {
-  return (0, import_react5.useContext)(CanvasPresentationContext);
+  return (0, import_react6.useContext)(CanvasPresentationContext);
 }
 
 // src/react/slots.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var ZERO = Object.freeze({ width: 0, height: 0 });
 function createCanvasSlots() {
   const slots = /* @__PURE__ */ new Map();
@@ -2494,16 +2624,16 @@ function createCanvasSlots() {
     }
   };
 }
-var CanvasSlotsContext = (0, import_react6.createContext)(null);
+var CanvasSlotsContext = (0, import_react7.createContext)(null);
 function useCanvasSlots() {
-  return (0, import_react6.useContext)(CanvasSlotsContext);
+  return (0, import_react7.useContext)(CanvasSlotsContext);
 }
-var CanvasSinglePaneContext = (0, import_react6.createContext)(false);
+var CanvasSinglePaneContext = (0, import_react7.createContext)(false);
 function useCanvasSinglePane() {
-  return (0, import_react6.useContext)(CanvasSinglePaneContext);
+  return (0, import_react7.useContext)(CanvasSinglePaneContext);
 }
 function useSlotSize(slots, paneId) {
-  return (0, import_react6.useSyncExternalStore)(
+  return (0, import_react7.useSyncExternalStore)(
     slots.subscribe,
     () => slots.size(paneId),
     () => ZERO
@@ -2512,12 +2642,12 @@ function useSlotSize(slots, paneId) {
 
 // src/react/bodies.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var useIsoLayoutEffect = typeof window === "undefined" ? import_react7.useEffect : import_react7.useLayoutEffect;
+var useIsoLayoutEffect3 = typeof window === "undefined" ? import_react8.useEffect : import_react8.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_react7.lazy)(kind.load);
+  if (!holder[LAZY] && kind.load) holder[LAZY] = (0, import_react8.lazy)(kind.load);
   return holder[LAZY] ?? null;
 }
 function resetKindComponent(kind) {
@@ -2525,7 +2655,7 @@ function resetKindComponent(kind) {
 }
 function usePanePresentation(slots, paneId, isFullscreen, paneCount) {
   const size = useSlotSize(slots, paneId);
-  return (0, import_react7.useMemo)(
+  return (0, import_react8.useMemo)(
     () => canvasPresentation({ width: size.width, height: size.height, isFullscreen, paneCount }),
     [size.width, size.height, isFullscreen, paneCount]
   );
@@ -2563,17 +2693,24 @@ function layerSignature(state, windowId, onlyPane) {
     }
   }
   rows.sort((a, b) => a.born - b.born || a.hostId.localeCompare(b.hostId));
-  const head = [frame2.isOpen ? "1" : "0", frame2.isFullscreen ? "1" : "0", frame2.focusedPaneId, String(paneIds.length)].join(SEP2);
+  const head = [
+    frame2.isOpen ? "1" : "0",
+    frame2.isFullscreen ? "1" : "0",
+    frame2.focusedPaneId,
+    String(paneIds.length),
+    selectCanvasPresentedPaneId(state, windowId) ?? ""
+  ].join(SEP2);
   return [head, ...rows.map((r) => r.row)].join(ROW);
 }
 function parseSignature(signature) {
   if (!signature) return null;
   const [head = "", ...rows] = signature.split(ROW);
-  const [open, full, focusedPaneId = "", count = "1"] = head.split(SEP2);
+  const [open, full, focusedPaneId = "", count = "1", presentedPaneId = ""] = head.split(SEP2);
   return {
     isOpen: open === "1",
     isFullscreen: full === "1",
     focusedPaneId,
+    presentedPaneId,
     paneCount: Number(count) || 1,
     placed: rows.map((row) => {
       const [hostId = "", itemId = "", paneId = "", active, kept] = row.split(SEP2);
@@ -2625,12 +2762,12 @@ function CanvasBodyLayer() {
   const slots = useCanvasSlots();
   const signature = useCanvasState((s) => layerSignature(s, windowId));
   const single = useCanvasSinglePane();
-  const root = (0, import_react7.useRef)(null);
-  const [placement] = (0, import_react7.useState)(
+  const root = (0, import_react8.useRef)(null);
+  const [placement] = (0, import_react8.useState)(
     () => slots ? createPlacement(() => root.current, slots, () => layer.native.remeasure()) : null
   );
-  useIsoLayoutEffect(() => placement?.place());
-  useIsoLayoutEffect(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
+  useIsoLayoutEffect3(() => placement?.place());
+  useIsoLayoutEffect3(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
   const shape = parseSignature(signature);
   if (!slots || !placement || !shape) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: shape.placed.map(({ hostId, itemId, paneId, active, kept }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2640,7 +2777,7 @@ function CanvasBodyLayer() {
       itemId,
       kept,
       paneId,
-      visible: shape.isOpen && active && (!single || paneId === shape.focusedPaneId),
+      visible: shape.isOpen && active && (!single || paneId === shape.presentedPaneId),
       focused: active && shape.focusedPaneId === paneId,
       isFullscreen: shape.isFullscreen,
       paneCount: shape.paneCount,
@@ -2683,7 +2820,7 @@ function stepAsItem(step, openedAt) {
     ...step.instance ? { instance: step.instance } : {}
   };
 }
-var BodyHost = (0, import_react7.memo)(function BodyHost2({
+var BodyHost = (0, import_react8.memo)(function BodyHost2({
   hostId,
   itemId,
   kept,
@@ -2703,16 +2840,16 @@ var BodyHost = (0, import_react7.memo)(function BodyHost2({
     return ownerItem ? keptCanvasSteps(ownerItem).find((e) => e.instance === hostId) : void 0;
   });
   const owner = useCanvasState((s) => kept ? s.items[itemId]?.openedAt : void 0);
-  const keptItem = (0, import_react7.useMemo)(() => step ? stepAsItem(step, owner ?? 0) : void 0, [step, owner]);
+  const keptItem = (0, import_react8.useMemo)(() => step ? stepAsItem(step, owner ?? 0) : void 0, [step, owner]);
   const item = kept ? keptItem : live;
   const kind = useItemKind(item?.kind ?? "");
-  const element = (0, import_react7.useRef)(null);
-  const [everShown, setEverShown] = (0, import_react7.useState)(visible);
+  const element = (0, import_react8.useRef)(null);
+  const [everShown, setEverShown] = (0, import_react8.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(() => {
+  useIsoLayoutEffect3(() => {
     const el = element.current;
     if (!placement || !el) return void 0;
     return placement.register(hostId, { element: el, paneId });
@@ -2778,7 +2915,7 @@ function ItemContent({
   }
   return rendered;
 }
-var Rendered = (0, import_react7.memo)(function Rendered2({
+var Rendered = (0, import_react8.memo)(function Rendered2({
   kind,
   item,
   paneId,
@@ -2789,7 +2926,7 @@ var Rendered = (0, import_react7.memo)(function Rendered2({
   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 }) }) });
+  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_react8.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);
@@ -2798,8 +2935,8 @@ function KindRender({ kind, 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);
+  const ref = (0, import_react8.useRef)(null);
+  const measure = (0, import_react8.useRef)(() => void 0);
   measure.current = () => {
     const el = ref.current;
     const box = visible && el?.isConnected ? el.getBoundingClientRect() : null;
@@ -2810,8 +2947,8 @@ function NativeBody({ itemId, windowId, visible, children }) {
     const rect = { ...toCanvasRect(box), devicePixelRatio: window.devicePixelRatio || 1 };
     layer.native.report(itemId, rect, { visible: !layer.isBlocked(), windowId });
   };
-  useIsoLayoutEffect(() => measure.current());
-  useIsoLayoutEffect(() => {
+  useIsoLayoutEffect3(() => measure.current());
+  useIsoLayoutEffect3(() => {
     const el = ref.current;
     const run = () => measure.current();
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(run);
@@ -2837,7 +2974,7 @@ function ItemProblem({ message, onClose, onRetry }) {
     ] })
   ] });
 }
-var ItemBoundary = class extends import_react7.Component {
+var ItemBoundary = class extends import_react8.Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
     return { error };
@@ -2863,11 +3000,28 @@ var ItemBoundary = class extends import_react7.Component {
   }
 };
 
+// src/react/resizeGesture.ts
+function beginCanvasResize(mode) {
+  if (typeof document === "undefined") return () => void 0;
+  const root = document.documentElement;
+  root.dataset.mxcResizing = mode;
+  document.getSelection?.()?.removeAllRanges();
+  const refuse = (event) => event.preventDefault();
+  document.addEventListener("selectstart", refuse, true);
+  let ended = false;
+  return () => {
+    if (ended) return;
+    ended = true;
+    delete root.dataset.mxcResizing;
+    document.removeEventListener("selectstart", refuse, true);
+  };
+}
+
 // src/react/CanvasPane.tsx
-var import_react8 = require("react");
+var import_react9 = 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;
+var useIsoLayoutEffect4 = typeof window === "undefined" ? import_react9.useEffect : import_react9.useLayoutEffect;
 function itemTitle(item, kind) {
   if (item.title) return item.title;
   if (item.kind === CANVAS_LAUNCHER_KIND) return "New tab";
@@ -2904,7 +3058,7 @@ function CanvasPaneView({ paneId }) {
   const canvas = useCanvas();
   const { windowId, tabStrip } = useCanvasInternals();
   const columnSlots = useCanvasSlots();
-  const [ownSlots] = (0, import_react8.useState)(createCanvasSlots);
+  const [ownSlots] = (0, import_react9.useState)(createCanvasSlots);
   const slots = columnSlots ?? ownSlots;
   const pane = useCanvasState((s) => s.panes[paneId]);
   const active = useCanvasState((s) => {
@@ -2917,14 +3071,15 @@ function CanvasPaneView({ paneId }) {
   const paneCount = useCanvasState((s) => selectCanvasPaneCount(s, windowId));
   const role = useCanvasState((s) => windowId === CANVAS_MAIN_WINDOW ? "main" : s.windows[windowId]?.role ?? "window");
   const canGoBack = useCanvasState((s) => active ? selectCanvasCanGoBack(s, active.id) : false);
+  const canGoForward = useCanvasState((s) => active ? selectCanvasCanGoForward(s, active.id) : false);
   const kind = useItemKind(active?.kind ?? "");
   const singlePane = useCanvasSinglePane();
   const windowTabs = useCanvasState((s) => singlePane ? windowTabsSignature(s, windowId) : "");
-  const sectionRef = (0, import_react8.useRef)(null);
-  const bodyRef = (0, import_react8.useRef)(null);
+  const sectionRef = (0, import_react9.useRef)(null);
+  const bodyRef = (0, import_react9.useRef)(null);
   const presentation = usePanePresentation(slots, paneId, isFullscreen, paneCount);
   const drop = usePaneDrop(paneId, () => sectionRef.current);
-  useIsoLayoutEffect2(() => {
+  useIsoLayoutEffect4(() => {
     const body = bodyRef.current;
     const section = sectionRef.current;
     if (body) slots.set(paneId, body);
@@ -2952,7 +3107,17 @@ function CanvasPaneView({ paneId }) {
       focused,
       "data-mxc-pane": paneId,
       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,
+        canGoBack && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-back", label: "Back", shortcut: canvasShortcutHint("canvas.back", isMac()), onClick: () => void canvas.back(active.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowLeftIcon, {}) }) : null,
+        canGoForward && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          CanvasHeaderButton,
+          {
+            className: "mxc-forward",
+            label: "Forward",
+            shortcut: canvasShortcutHint("canvas.forward", isMac()),
+            onClick: () => void canvas.forward(active.id),
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowRightIcon, {})
+          }
+        ) : null,
         single && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SingleTitle, { item: active, kind }) : tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabStrip, { tabs, 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, {}) })
       ] }),
@@ -2961,7 +3126,19 @@ function CanvasPaneView({ paneId }) {
         // Its own gapless row: a kind's tap buttons space themselves (the tap-target placement rule).
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-kind-actions", children: /* @__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 }),
+      renderMenu: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        PaneMenu,
+        {
+          paneId,
+          windowId,
+          activeItem: active,
+          kind,
+          kindProps,
+          tabCount: pane.itemIds.length,
+          role,
+          canSplit: !singlePane
+        }
+      ),
       expanded: isFullscreen,
       onToggleExpand: () => canvas.setFullscreen(!isFullscreen),
       expandShortcut: canvasShortcutHint("canvas.toggleFullscreen", isMac()),
@@ -2979,7 +3156,7 @@ function CanvasPaneView({ paneId }) {
     }
   );
 }
-var ToolbarBoundary = class extends import_react8.Component {
+var ToolbarBoundary = class extends import_react9.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
     return { failed: true };
@@ -2995,77 +3172,135 @@ function SingleTitle({ item, kind }) {
   const canvas = useCanvas();
   const title = itemTitle(item, kind);
   const drag = useTabDrag(item.id, title);
+  const name = useTruncated(title);
   const Icon = kind?.icon ?? AlertIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mxc-panel-title mxc-single-title", "data-draggable": "", title, ...drag, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mxc-panel-title mxc-single-title", "data-draggable": "", "data-truncated": name.truncated ? "" : void 0, 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)("span", { ref: name.ref, 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, {}) })
   ] });
 }
+var CANVAS_TAB_MIN_WIDTH = 78;
+var CANVAS_ACTIVE_TAB_MIN_WIDTH = 100;
+var TAB_LIST_BUTTON_ROOM = 30;
+var TAB_GAP = 2;
+function fitCanvasTabs(count, activeIndex, width) {
+  if (count <= 0) return { start: 0, end: 0, overflow: false, compact: false };
+  const need = (n) => CANVAS_ACTIVE_TAB_MIN_WIDTH + (n - 1) * (CANVAS_TAB_MIN_WIDTH + TAB_GAP);
+  if (width <= 0 || need(count) <= width) return { start: 0, end: count, overflow: false, compact: false };
+  if (count === 1) return { start: 0, end: 1, overflow: false, compact: true };
+  let fit = 1;
+  while (fit + 1 < count && need(fit + 1) + TAB_LIST_BUTTON_ROOM <= width) fit += 1;
+  const active = Math.min(Math.max(activeIndex, 0), count - 1);
+  const start = active < fit ? 0 : active - fit + 1;
+  return { start, end: start + fit, overflow: true, compact: need(fit) + TAB_LIST_BUTTON_ROOM > width };
+}
 function TabStrip({ tabs, activeItemId }) {
-  const strip = (0, import_react8.useRef)(null);
-  const [overflow, setOverflow] = (0, import_react8.useState)({ start: false, end: false });
-  const measure = (0, import_react8.useRef)(() => void 0);
-  measure.current = () => {
-    const el = strip.current;
-    if (!el) return;
-    const start = el.scrollLeft > 1;
-    const end = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
-    setOverflow((prev) => prev.start === start && prev.end === end ? prev : { start, end });
-  };
-  const tabKey = tabs.map((tab) => tab.itemId).join("|");
-  useIsoLayoutEffect2(() => {
+  const canvas = useCanvas();
+  const strip = (0, import_react9.useRef)(null);
+  const [width, setWidth] = (0, import_react9.useState)(0);
+  useIsoLayoutEffect4(() => {
     const el = strip.current;
     if (!el) return void 0;
-    const reveal = () => {
-      const tab = el.querySelector('[role="tab"][aria-selected="true"]');
-      if (tab) {
-        const left = tab.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;
-      }
-      measure.current();
-    };
-    reveal();
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(reveal);
+    const read = () => setWidth(Math.floor(el.getBoundingClientRect().width));
+    read();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(read);
     observer?.observe(el);
-    for (const tab of el.querySelectorAll('[role="tab"]')) observer?.observe(tab);
     return () => observer?.disconnect();
-  }, [activeItemId, tabKey]);
-  const page = (direction) => {
-    const el = strip.current;
-    if (!el) return;
-    const by = Math.max(48, Math.round(el.clientWidth * 0.8)) * direction;
-    if (typeof el.scrollBy === "function") el.scrollBy({ left: by, behavior: "smooth" });
-    else el.scrollLeft += by;
-  };
-  const overflowing = overflow.start || overflow.end;
+  }, []);
+  const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.itemId === activeItemId));
+  const fit = fitCanvasTabs(tabs.length, activeIndex, width);
+  const shown = tabs.slice(fit.start, fit.end);
+  const hidden = tabs.length - shown.length;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
+      ref: strip,
       className: "mxc-tabstrip",
-      "data-overflow": overflowing ? "" : void 0,
-      "data-overflow-start": overflow.start ? "" : void 0,
-      "data-overflow-end": overflow.end ? "" : void 0,
+      "data-overflow": fit.overflow ? "" : void 0,
+      "data-compact": fit.compact ? "" : void 0,
+      style: { ["--mxc-tab-min"]: `${CANVAS_TAB_MIN_WIDTH}px`, ["--mxc-tab-active-min"]: `${CANVAS_ACTIVE_TAB_MIN_WIDTH}px` },
       children: [
-        overflowing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-tabs-scroll", label: "Scroll tabs left", available: overflow.start, onClick: () => page(-1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeftIcon, {}) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
-            ref: strip,
             className: "mxc-tabs",
             role: "tablist",
             "aria-label": "Canvas tabs",
-            onScroll: () => measure.current(),
             onWheel: (event) => {
-              const el = strip.current;
-              if (el && Math.abs(event.deltaY) > Math.abs(event.deltaX)) el.scrollLeft += event.deltaY;
+              if (!fit.overflow || Math.abs(event.deltaY) < Math.abs(event.deltaX) || tabs.length < 2) return;
+              const next = tabs[(activeIndex + (event.deltaY > 0 ? 1 : -1) + tabs.length) % tabs.length];
+              if (next) canvas.activate(next.itemId);
             },
-            children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ItemTab, { itemId: tab.itemId, paneId: tab.paneId, index: tab.index, active: tab.itemId === activeItemId }, tab.itemId))
+            children: shown.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ItemTab, { itemId: tab.itemId, paneId: tab.paneId, index: tab.index, active: tab.itemId === activeItemId }, tab.itemId))
           }
         ),
-        overflowing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-tabs-scroll", label: "Scroll tabs right", available: overflow.end, onClick: () => page(1), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRightIcon, {}) }) : null
+        fit.overflow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabListMenu, { tabs, activeItemId, hidden }) : null
+      ]
+    }
+  );
+}
+function TabListMenu({ tabs, activeItemId, hidden }) {
+  const canvas = useCanvas();
+  const { ports, layer } = useCanvasInternals();
+  const blocking = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => () => blocking.current?.(), []);
+  const label = `All tabs (${tabs.length})`;
+  const trigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CanvasHeaderButton, { className: "mxc-tab-list", label, "data-hidden-count": hidden, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDownIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-tab-list-count", "aria-hidden": "true", children: hidden })
+  ] });
+  const showMenu = ports.showMenu;
+  if (showMenu) {
+    return trigger({
+      onClick: (event) => {
+        const state = canvas.getState();
+        const entries = tabs.map((tab) => {
+          const item = state.items[tab.itemId];
+          const title = item ? itemTitle(item, resolveItemKind(item.kind, getCanvasKind)) : tab.itemId;
+          return { type: "item", id: tab.itemId, label: tab.itemId === activeItemId ? `${title} (current)` : title };
+        });
+        void showMenu(entries, toCanvasRect(event.currentTarget.getBoundingClientRect())).then(
+          (chosen) => {
+            if (chosen) canvas.activate(chosen);
+          },
+          (error) => console.error("[@ai-matrx/canvas] the host menu failed", error)
+        );
+      }
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    Menu.Root,
+    {
+      onOpenChange: (open) => {
+        blocking.current?.();
+        blocking.current = open ? layer.beginBlocking() : null;
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu.Trigger, { asChild: true, children: trigger({}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu.Content, { align: "end", sideOffset: 4, className: "mxc-menu mxc-tab-list-menu", "aria-label": "All tabs", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabListEntry, { itemId: tab.itemId, active: tab.itemId === activeItemId }, tab.itemId)) }) })
+      ]
+    }
+  );
+}
+function TabListEntry({ itemId, active }) {
+  const canvas = useCanvas();
+  const item = useCanvasState((s) => s.items[itemId]);
+  const kind = useItemKind(item?.kind ?? "");
+  if (!item) return null;
+  const Icon = kind?.icon ?? AlertIcon;
+  const title = itemTitle(item, kind);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    Menu.Item,
+    {
+      className: "mxc-menu-item mxc-tab-list-item",
+      "data-active": active ? "" : void 0,
+      "aria-current": active ? "true" : void 0,
+      title,
+      onSelect: () => canvas.activate(itemId),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-tab-list-title", children: title })
       ]
     }
   );
@@ -3109,42 +3344,48 @@ function PaneMenu({
   kind,
   kindProps,
   tabCount,
-  role
+  role,
+  canSplit
 }) {
   const canvas = useCanvas();
-  const { ports, layer } = useCanvasInternals();
+  const { ports, layer, itemMenus } = useCanvasInternals();
   const moveId = tabCount > 1 ? activeItem?.id : void 0;
-  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_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) },
-      ...tabCount > 1 ? [{ id: "close-others", label: "Close other tabs", onSelect: () => canvas.closeOthers(activeItem.id) }] : []
-    ] : []
-  ].filter((section) => section.length > 0);
+  const blocking = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => () => blocking.current?.(), []);
+  const buildSections = () => {
+    const kindItems = kind?.menuItems && kindProps ? safeMenu(() => kind.menuItems?.(kindProps)) : [];
+    const hostItems = activeItem && ports.itemActions ? safeMenu(() => ports.itemActions?.(activeItem, kind)) : [];
+    const bodyItems = activeItem ? itemMenus.read(activeItem.id) : [];
+    return [
+      [...kindItems, ...bodyItems, ...hostItems].map((entry) => ({ ...entry, id: `item:${entry.id}` })),
+      [
+        ...canSplit ? [
+          { 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) },
+        ...tabCount > 1 ? [{ id: "close-others", label: "Close other tabs", onSelect: () => canvas.closeOthers(activeItem.id) }] : []
+      ] : []
+    ].filter((section) => section.length > 0);
+  };
   const showMenu = ports.showMenu;
   if (showMenu) {
-    const entries = [];
-    const handlers = /* @__PURE__ */ new Map();
-    sections.forEach((section, i) => {
-      if (i > 0) entries.push({ type: "separator" });
-      for (const action of section) {
-        entries.push({ type: "item", id: action.id, label: action.label, ...action.destructive ? { destructive: true } : {} });
-        handlers.set(action.id, action.onSelect);
-      }
-    });
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       CanvasMenuTrigger,
       {
         onClick: (event) => {
+          const entries = [];
+          const handlers = /* @__PURE__ */ new Map();
+          buildSections().forEach((section, i) => {
+            if (i > 0) entries.push({ type: "separator" });
+            for (const action of section) {
+              entries.push({ type: "item", id: action.id, label: action.label, ...action.destructive ? { destructive: true } : {} });
+              handlers.set(action.id, action.onSelect);
+            }
+          });
           const anchor = toCanvasRect(event.currentTarget.getBoundingClientRect());
           void showMenu(entries, anchor).then(
             (chosen) => {
@@ -3165,11 +3406,14 @@ function PaneMenu({
       },
       children: [
         /* @__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)) }) })
+        /* @__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: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuSections, { build: buildSections }) }) })
       ]
     }
   );
 }
+function MenuSections({ build }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: build().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_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     first ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Menu.Separator, { className: "mxc-menu-separator" }),
@@ -3190,13 +3434,13 @@ function safeMenu(build) {
 
 // src/react/CanvasColumn.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var useIsoLayoutEffect3 = typeof window === "undefined" ? import_react9.useEffect : import_react9.useLayoutEffect;
+var useIsoLayoutEffect5 = typeof window === "undefined" ? import_react10.useEffect : import_react10.useLayoutEffect;
 function subscribeViewport(listener) {
   window.addEventListener("resize", listener);
   return () => window.removeEventListener("resize", listener);
 }
 function useViewportWidth() {
-  return (0, import_react9.useSyncExternalStore)(subscribeViewport, () => window.innerWidth, () => 0);
+  return (0, import_react10.useSyncExternalStore)(subscribeViewport, () => window.innerWidth, () => 0);
 }
 function useRegionWidth() {
   const viewport = useViewportWidth();
@@ -3219,15 +3463,15 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
   const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
   const width = useCanvasState((s) => selectCanvasWidth(s, windowId));
   const layout = useCanvasState((s) => selectCanvasLayout(s, windowId));
-  const focusedPaneId = useCanvasState((s) => selectCanvasFocusedPaneId(s, windowId));
+  const presentedPaneId = useCanvasState((s) => selectCanvasPresentedPaneId(s, windowId));
   const region = useRegionWidth();
   const viewport = useViewportWidth();
   const singlePane = placement === "docked" && viewport > 0 && viewport <= CANVAS_PHONE_MAX_WIDTH;
-  const [dragWidth, setDragWidth] = (0, import_react9.useState)(null);
-  const [slots] = (0, import_react9.useState)(createCanvasSlots);
-  const ref = (0, import_react9.useRef)(null);
+  const [dragWidth, setDragWidth] = (0, import_react10.useState)(null);
+  const [slots] = (0, import_react10.useState)(createCanvasSlots);
+  const ref = (0, import_react10.useRef)(null);
   useRegisterCanvasPresence();
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const el = ref.current;
     if (!el) return void 0;
     let frame2 = 0;
@@ -3288,7 +3532,7 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasSlotsContext.Provider, { value: slots, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CanvasSinglePaneContext.Provider, { value: singlePane, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mxc-layout", "data-single-pane": singlePane ? "" : void 0, children: singlePane ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasPaneView, { paneId: presentedPane(layout, focusedPaneId) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutNodeView, { node: layout }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mxc-layout", "data-single-pane": singlePane ? "" : void 0, children: singlePane ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasPaneView, { paneId: presentedPaneId ?? listPaneIds(layout)[0] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LayoutNodeView, { node: layout }) }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasBodyLayer, {})
         ] }) })
       ] })
@@ -3297,13 +3541,14 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
 }
 function WidthHandle({ width, region, onDrag }) {
   const canvas = useCanvas();
-  const start = (0, import_react9.useRef)(null);
+  const start = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => () => start.current?.end(), []);
   const clamp = (next) => clampDraggedCanvasWidth(next, region, canvas.rules);
   const onPointerDown = (event) => {
     event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
-    start.current = { x: event.clientX, width };
-    document.documentElement.dataset.mxcResizing = "";
+    start.current?.end();
+    start.current = { x: event.clientX, width, end: beginCanvasResize("") };
   };
   const onPointerMove = (event) => {
     if (!start.current) return;
@@ -3312,8 +3557,8 @@ function WidthHandle({ width, region, onDrag }) {
   const finish = (event) => {
     if (!start.current) return;
     const next = clamp(start.current.width + (start.current.x - event.clientX));
+    start.current.end();
     start.current = null;
-    delete document.documentElement.dataset.mxcResizing;
     onDrag(null);
     canvas.setWidth(next);
   };
@@ -3330,6 +3575,7 @@ function WidthHandle({ width, region, onDrag }) {
       onPointerMove,
       onPointerUp: finish,
       onPointerCancel: finish,
+      onLostPointerCapture: finish,
       onDoubleClick: () => canvas.setWidth(clamp(Math.round(region / 2))),
       onKeyDown: (event) => {
         if (event.key === "ArrowLeft") canvas.setWidth(clamp(width + 32));
@@ -3338,17 +3584,13 @@ function WidthHandle({ width, region, onDrag }) {
     }
   );
 }
-function presentedPane(layout, focused) {
-  const ids = listPaneIds(layout);
-  return ids.find((id) => id === focused) ?? ids[0];
-}
 function LayoutNodeView({ 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_react9.useState)(0);
-  useIsoLayoutEffect3(() => {
+  const [width, setWidth] = (0, import_react10.useState)(0);
+  useIsoLayoutEffect5(() => {
     const el = ref.current;
     if (!enabled || !el) return;
     setWidth(el.getBoundingClientRect().width);
@@ -3361,8 +3603,8 @@ function useMeasuredWidth(ref, enabled) {
 }
 function SplitView({ node }) {
   const canvas = useCanvas();
-  const ref = (0, import_react9.useRef)(null);
-  const [liveSizes, setLiveSizes] = (0, import_react9.useState)(null);
+  const ref = (0, import_react10.useRef)(null);
+  const [liveSizes, setLiveSizes] = (0, import_react10.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);
@@ -3379,7 +3621,7 @@ function SplitView({ node }) {
     const base = [...node.sizes];
     const pair = (base[index] ?? 0) + (base[index + 1] ?? 0);
     const target = event.currentTarget;
-    document.documentElement.dataset.mxcResizing = horizontal ? "col" : "row";
+    const end = beginCanvasResize(horizontal ? "col" : "row");
     const compute = (pos) => {
       const delta = (pos - origin) / total;
       const min = CANVAS_MIN_SPLIT_FRACTION;
@@ -3394,7 +3636,7 @@ function SplitView({ node }) {
       target.removeEventListener("pointermove", move);
       target.removeEventListener("pointerup", up);
       target.removeEventListener("pointercancel", up);
-      delete document.documentElement.dataset.mxcResizing;
+      end();
       setLiveSizes(null);
       canvas.resizeSplit(node.id, compute(horizontal ? e.clientX : e.clientY));
     };