@ai-matrx/canvas 0.9.3 → 0.10.0

package/dist/react.cjs

@@ -50,6 +50,10 @@ __export(react_exports, {
   CanvasWindowScope: () => CanvasWindowScope,
   CanvasWindowTabs: () => CanvasWindowTabs,
   beginCanvasResize: () => beginCanvasResize,
+  canvasItemElement: () => canvasItemElement,
+  canvasKindOutputProblems: () => canvasKindOutputProblems,
+  canvasKindSurface: () => canvasKindSurface,
+  canvasOutputMenu: () => canvasOutputMenu,
   canvasSessionKey: () => canvasSessionKey,
   defineCanvasKind: () => defineCanvasKind,
   fitCanvasTabWindow: () => fitCanvasTabWindow,
@@ -70,6 +74,7 @@ __export(react_exports, {
   useCanvasLauncherEntry: () => useCanvasLauncherEntry,
   useCanvasMenuItems: () => useCanvasMenuItems,
   useCanvasNativeBodies: () => useCanvasNativeBodies,
+  useCanvasOutput: () => useCanvasOutput,
   useCanvasPresentation: () => useCanvasPresentation,
   useCanvasState: () => useCanvasState,
   useCanvasWindowId: () => useCanvasWindowId,
@@ -79,7 +84,7 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // src/react/provider.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/react/menuItems.ts
 var import_react = require("react");
@@ -120,6 +125,163 @@ function useCanvasMenuItems(itemId, items) {
   }, [itemMenus, itemId]);
 }
 
+// src/react/output.ts
+var import_react2 = require("react");
+var useIsoLayoutEffect2 = typeof window === "undefined" ? import_react2.useEffect : import_react2.useLayoutEffect;
+function createCanvasItemOutputs() {
+  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) {
+      let out = {};
+      for (const read of sources.get(itemId) ?? []) {
+        try {
+          const next = read();
+          out = { ...out, ...definedOnly(next), unavailable: { ...out.unavailable, ...next.unavailable } };
+        } catch (error) {
+          console.error("[@ai-matrx/canvas] a body's output handlers threw", error);
+        }
+      }
+      return out;
+    }
+  };
+}
+function definedOnly(handlers) {
+  const out = {};
+  if (handlers.print) out.print = handlers.print;
+  if (handlers.savePdf) out.savePdf = handlers.savePdf;
+  if (handlers.capture) out.capture = handlers.capture;
+  return out;
+}
+function canvasItemElement(itemId) {
+  if (typeof document === "undefined") return null;
+  const hosts = document.querySelectorAll(".mxc-item-host[data-item]:not([data-kept])");
+  for (const host of hosts) {
+    if (host.dataset.item === itemId) return host.querySelector(":scope > .mxc-item");
+  }
+  return null;
+}
+function canvasKindSurface(kind) {
+  return kind?.surface ?? (kind?.body === "native" ? "native" : "dom");
+}
+async function defaultCopyImage(image) {
+  const png = image.type === "image/png" ? image : new Blob([image], { type: "image/png" });
+  await navigator.clipboard.write([new ClipboardItem({ "image/png": png })]);
+}
+function canvasOutputMenu(input) {
+  const { item, kind, title, body, ports } = input;
+  const surface = canvasKindSurface(kind);
+  const request = { item, kind, surface, element: canvasItemElement(item.id), title };
+  const report = (message) => (error) => ports?.onError ? ports.onError(message, error) : console.error(`[@ai-matrx/canvas] ${message}`, error);
+  const run = (fn, message) => () => {
+    try {
+      void Promise.resolve(fn()).catch(report(message));
+    } catch (error) {
+      report(message)(error);
+    }
+  };
+  const kindPrint = typeof kind?.print === "function" ? kind.print : null;
+  const kindPrintReason = typeof kind?.print === "string" ? kind.print : null;
+  const kindCapture = typeof kind?.capture === "function" ? kind.capture : null;
+  const kindCaptureReason = typeof kind?.capture === "string" ? kind.capture : null;
+  const hostServes = surface === "dom";
+  let print = null;
+  if (kind?.print !== false) {
+    if (body.print) print = body.print;
+    else if (kindPrint) print = () => kindPrint(request);
+    else if (hostServes && ports?.print) print = ports.print(request);
+  }
+  const printReason = print || kind?.print === false ? null : body.unavailable?.print ?? kindPrintReason;
+  let savePdf = print;
+  if (print && body.savePdf) savePdf = body.savePdf;
+  else if (print && !body.print && !kindPrint && hostServes && ports?.savePdf) savePdf = ports.savePdf(request) ?? print;
+  let capture = null;
+  if (kind?.capture !== false) {
+    if (body.capture) capture = body.capture;
+    else if (kindCapture) capture = () => kindCapture(request);
+    else if (surface !== "native" && ports?.capture) capture = ports.capture(request);
+  }
+  const captureReason = capture || kind?.capture === false ? null : body.unavailable?.capture ?? kindCaptureReason;
+  const entries = [];
+  if (printReason) {
+    entries.push({ id: "output:print", label: `Print \u2014 ${printReason}`, disabled: true, onSelect: () => void 0 });
+  } else if (print) {
+    entries.push({ id: "output:print", label: "Print", onSelect: run(print, "Print failed") });
+    if (savePdf) entries.push({ id: "output:pdf", label: "Save as PDF", onSelect: run(savePdf, "Save as PDF failed") });
+  }
+  if (captureReason) {
+    entries.push({ id: "output:copy-image", label: `Copy image \u2014 ${captureReason}`, disabled: true, onSelect: () => void 0 });
+  } else if (capture) {
+    const copy = ports?.copyImage ?? defaultCopyImage;
+    entries.push({
+      id: "output:copy-image",
+      label: "Copy image",
+      onSelect: run(async () => copy(await capture(), request), "Copy image failed")
+    });
+  }
+  if (ports?.attachOptions) {
+    try {
+      entries.push(...ports.attachOptions(request, captureReason ? null : capture));
+    } catch (error) {
+      report("Attach options failed")(error);
+    }
+  }
+  return entries;
+}
+function useCanvasOutput(itemId, handlers) {
+  const { itemOutputs } = useCanvasInternals();
+  const latest = (0, import_react2.useRef)(handlers);
+  latest.current = handlers;
+  useIsoLayoutEffect2(() => {
+    if (!itemId) return void 0;
+    return itemOutputs.register(itemId, () => latest.current);
+  }, [itemOutputs, itemId]);
+}
+function canvasKindOutputProblems(kind) {
+  const problems = [];
+  const surface = kind.surface;
+  if (surface !== "dom" && surface !== "frame" && surface !== "native") {
+    problems.push(`"${kind.id}" declares no surface ("dom" | "frame" | "native")`);
+    return problems;
+  }
+  if (kind.body === "native" && surface !== "native") problems.push(`"${kind.id}" has a native body but surface "${surface}"`);
+  if (surface !== "dom") {
+    if (kind.print === void 0) problems.push(`"${kind.id}" is a ${surface} kind with no print (a handler or an honest reason)`);
+    if (kind.capture === void 0) problems.push(`"${kind.id}" is a ${surface} kind with no capture (a handler or an honest reason)`);
+  }
+  return problems;
+}
+var warnedKinds = /* @__PURE__ */ new Set();
+function watchDomSurface(element, kindId) {
+  if (typeof MutationObserver === "undefined" || warnedKinds.has(kindId)) return () => void 0;
+  const check = () => {
+    if (warnedKinds.has(kindId)) return true;
+    const found = element.querySelector("iframe, canvas");
+    if (!found) return false;
+    warnedKinds.add(kindId);
+    console.error(
+      `[@ai-matrx/canvas] kind "${kindId}" declares surface "dom" but its body contains a <${found.tagName.toLowerCase()}>. DOM print and capture cannot copy it \u2014 declare surface "frame" with its own print and capture.`,
+      found
+    );
+    return true;
+  };
+  if (check()) return () => void 0;
+  const observer = new MutationObserver(() => {
+    if (check()) observer.disconnect();
+  });
+  observer.observe(element, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+
 // src/core/types.ts
 var CANVAS_MAIN_WINDOW = "main";
 var CANVAS_LAUNCHER_KIND = "canvas.launcher";
@@ -1691,7 +1853,7 @@ function toggleKind(controller, input) {
 }
 
 // src/react/layer.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime = require("react/jsx-runtime");
 function createCanvasLayer(getPorts) {
@@ -1758,9 +1920,9 @@ function createCanvasLayer(getPorts) {
   };
 }
 function CanvasDomOverlay({ layer }) {
-  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), []);
+  const elements = (0, import_react3.useSyncExternalStore)(layer.dom.subscribe, layer.dom.list, layer.dom.list);
+  const [mounted, setMounted] = (0, import_react3.useState)(false);
+  (0, import_react3.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)) }),
@@ -1776,11 +1938,11 @@ function FloatingView({ element }) {
   return null;
 }
 function Tooltip({ element }) {
-  const ref = (0, import_react2.useRef)(null);
+  const ref = (0, import_react3.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_react2.useLayoutEffect)(() => {
+  (0, import_react3.useLayoutEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const width = el.offsetWidth;
@@ -1796,6 +1958,13 @@ function toCanvasRect(rect) {
 
 // src/react/registry.ts
 function defineCanvasKind(kind) {
+  const surface = kind.surface;
+  if (surface !== "dom" && surface !== "frame" && surface !== "native") {
+    throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" must declare surface: "dom" | "frame" | "native".`);
+  }
+  if (kind.body === "native" && surface !== "native") {
+    throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" has a native body, so its surface is "native".`);
+  }
   if (!kind.component && !kind.load && kind.body !== "native" && !kind.unavailable) {
     throw new Error(`[@ai-matrx/canvas] kind "${kind.id}" needs a component, a load(), a native body or an unavailable() state.`);
   }
@@ -1884,7 +2053,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_react3.createContext)(null);
+var CanvasContext = (0, import_react4.createContext)(null);
 function sessionHooksFor(kindId) {
   const kind = getCanvasKind(kindId);
   if (!kind || kind.restore !== "session") return void 0;
@@ -1911,13 +2080,13 @@ function CanvasProvider({
   overlay,
   onNativeBodyFrame
 }) {
-  const hostPorts = (0, import_react3.useMemo)(
+  const hostPorts = (0, import_react4.useMemo)(
     () => ({ itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame }),
     [itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame]
   );
-  const portsRef = (0, import_react3.useRef)(hostPorts);
+  const portsRef = (0, import_react4.useRef)(hostPorts);
   portsRef.current = hostPorts;
-  const [{ controller, layer, launcherEntries, itemMenus }] = (0, import_react3.useState)(() => ({
+  const [{ controller, layer, launcherEntries, itemMenus, itemOutputs }] = (0, import_react4.useState)(() => ({
     controller: createCanvasController({
       store: store ?? createCanvasStore(),
       persistence: persistence === void 0 ? createLocalStorageCanvasPersistence() : persistence,
@@ -1932,11 +2101,12 @@ function CanvasProvider({
     }),
     layer: createCanvasLayer(() => portsRef.current),
     launcherEntries: createLauncherEntryStore(),
-    itemMenus: createCanvasItemMenus()
+    itemMenus: createCanvasItemMenus(),
+    itemOutputs: createCanvasItemOutputs()
   }));
   const windowId = controller.windowId;
-  (0, import_react3.useEffect)(() => controller.start(), [controller]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => controller.start(), [controller]);
+  (0, import_react4.useEffect)(() => {
     if (!hotkeys) return;
     const isMac3 = isMacPlatform();
     const applies = (when, event) => {
@@ -1957,9 +2127,9 @@ function CanvasProvider({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [controller, hotkeys, windowId]);
-  const value = (0, import_react3.useMemo)(
-    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus }),
-    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus]
+  const value = (0, import_react4.useMemo)(
+    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus, itemOutputs }),
+    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus, itemOutputs]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CanvasContext.Provider, { value, children: [
     children,
@@ -1968,14 +2138,14 @@ function CanvasProvider({
 }
 function CanvasWindowScope({ windowId, children }) {
   const parent = useCanvasContext();
-  const value = (0, import_react3.useMemo)(() => {
+  const value = (0, import_react4.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_react3.useContext)(CanvasContext);
+  const value = (0, import_react4.useContext)(CanvasContext);
   if (!value) throw new Error("[@ai-matrx/canvas] useCanvas* must be used inside <CanvasProvider>.");
   return value;
 }
@@ -1983,16 +2153,16 @@ function useCanvasInternals() {
   return useCanvasContext();
 }
 function useOptionalCanvasInternals() {
-  return (0, import_react3.useContext)(CanvasContext);
+  return (0, import_react4.useContext)(CanvasContext);
 }
 function useCanvas() {
   return useCanvasContext().controller;
 }
 function useOptionalCanvas() {
-  return (0, import_react3.useContext)(CanvasContext)?.controller ?? null;
+  return (0, import_react4.useContext)(CanvasContext)?.controller ?? null;
 }
 function useCanvasWindowId() {
-  return (0, import_react3.useContext)(CanvasContext)?.windowId ?? CANVAS_MAIN_WINDOW;
+  return (0, import_react4.useContext)(CanvasContext)?.windowId ?? CANVAS_MAIN_WINDOW;
 }
 function useCanvasHostPorts() {
   return useCanvasContext().ports;
@@ -2001,16 +2171,16 @@ function useCanvasNativeBodies() {
   return useCanvasContext().layer.native;
 }
 function useRegisterCanvasPresence() {
-  const context = (0, import_react3.useContext)(CanvasContext);
+  const context = (0, import_react4.useContext)(CanvasContext);
   const controller = context?.controller;
   const windowId = context?.windowId;
-  (0, import_react3.useEffect)(() => controller?.registerPresentation(windowId), [controller, windowId]);
+  (0, import_react4.useEffect)(() => controller?.registerPresentation(windowId), [controller, windowId]);
 }
 var noPresence = () => () => void 0;
 function useCanvasIsPresented() {
-  const context = (0, import_react3.useContext)(CanvasContext);
+  const context = (0, import_react4.useContext)(CanvasContext);
   const controller = context?.controller;
-  return (0, import_react3.useSyncExternalStore)(
+  return (0, import_react4.useSyncExternalStore)(
     controller ? controller.subscribePresentation : noPresence,
     () => controller?.isPresented() ?? false,
     () => false
@@ -2018,7 +2188,7 @@ function useCanvasIsPresented() {
 }
 function useCanvasState(selector) {
   const { store } = useCanvasContext().controller;
-  return (0, import_react3.useSyncExternalStore)(
+  return (0, import_react4.useSyncExternalStore)(
     store.subscribe,
     () => selector(store.getState()),
     () => selector(store.getState())
@@ -2026,9 +2196,9 @@ function useCanvasState(selector) {
 }
 var NO_SUBSCRIPTION = () => () => void 0;
 function useOptionalCanvasState(selector, fallback) {
-  const store = (0, import_react3.useContext)(CanvasContext)?.controller.store;
+  const store = (0, import_react4.useContext)(CanvasContext)?.controller.store;
   const read = () => store ? selector(store.getState()) : fallback;
-  return (0, import_react3.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, read, read);
+  return (0, import_react4.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, read, read);
 }
 function useCanvasKindToggle(input) {
   const controller = useCanvasContext().controller;
@@ -2042,28 +2212,28 @@ function useCanvasKindToggle(input) {
   };
 }
 function useCanvasKinds() {
-  (0, import_react3.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
+  (0, import_react4.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
   return listCanvasKinds();
 }
 function useCanvasKind(id) {
-  (0, import_react3.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
+  (0, import_react4.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
   return getCanvasKind(id);
 }
 var NO_ENTRIES = Object.freeze([]);
 var noEntries = () => NO_ENTRIES;
 function useCanvasLauncherEntry(entry) {
-  const store = (0, import_react3.useContext)(CanvasContext)?.launcherEntries;
+  const store = (0, import_react4.useContext)(CanvasContext)?.launcherEntries;
   const fingerprint = JSON.stringify([entry.kind, entry.key, entry.title ?? null, entry.data ?? null]);
   const icon = entry.icon;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.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_react3.useContext)(CanvasContext)?.launcherEntries;
-  const all = (0, import_react3.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, store ? store.list : noEntries, store ? store.list : noEntries);
+  const store = (0, import_react4.useContext)(CanvasContext)?.launcherEntries;
+  const all = (0, import_react4.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) {
@@ -2076,14 +2246,14 @@ function useCanvasLauncherEntries() {
 }
 
 // src/react/CanvasColumn.tsx
-var import_react10 = require("react");
-var import_tap_target = require("@ai-matrx/tap-target");
+var import_react11 = require("react");
+var import_tap_target = require("@ai-matrx/design-system/tap-target");
 
 // src/react/bodies.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/react/chrome.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/react/icons.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -2185,11 +2355,11 @@ var ChevronDownIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph,
 
 // src/react/chrome.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var useIsoLayoutEffect2 = typeof window === "undefined" ? import_react4.useEffect : import_react4.useLayoutEffect;
+var useIsoLayoutEffect3 = typeof window === "undefined" ? import_react5.useEffect : import_react5.useLayoutEffect;
 function useTruncated(title) {
-  const ref = (0, import_react4.useRef)(null);
-  const [truncated, setTruncated] = (0, import_react4.useState)(false);
-  useIsoLayoutEffect2(() => {
+  const ref = (0, import_react5.useRef)(null);
+  const [truncated, setTruncated] = (0, import_react5.useState)(false);
+  useIsoLayoutEffect3(() => {
     const el = ref.current;
     if (!el) return void 0;
     const check = () => setTruncated(el.scrollWidth - el.clientWidth > 1);
@@ -2203,15 +2373,15 @@ function useTruncated(title) {
 var cx = (...names) => names.filter(Boolean).join(" ");
 function useTooltip(text) {
   const internals = useOptionalCanvasInternals();
-  const timer = (0, import_react4.useRef)(null);
-  const hide = (0, import_react4.useRef)(null);
+  const timer = (0, import_react5.useRef)(null);
+  const hide = (0, import_react5.useRef)(null);
   const close = () => {
     if (timer.current) clearTimeout(timer.current);
     timer.current = null;
     hide.current?.();
     hide.current = null;
   };
-  (0, import_react4.useEffect)(() => close, []);
+  (0, import_react5.useEffect)(() => close, []);
   if (!text) return { close, handlers: {} };
   if (!internals) return { close, handlers: { title: text } };
   const open = (element, delay) => {
@@ -2237,7 +2407,7 @@ function useTooltip(text) {
     }
   };
 }
-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) {
+var CanvasHeaderButton = (0, import_react5.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)(
@@ -2282,12 +2452,12 @@ var CanvasHeaderButton = (0, import_react4.forwardRef)(function CanvasHeaderButt
     }
   );
 });
-var CanvasMenuTrigger = (0, import_react4.forwardRef)(
+var CanvasMenuTrigger = (0, import_react5.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_react4.forwardRef)(function CanvasPanel2({
+var CanvasPanel = (0, import_react5.forwardRef)(function CanvasPanel2({
   panelId,
   title,
   leading,
@@ -2337,7 +2507,7 @@ var CanvasPanel = (0, import_react4.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_react4.forwardRef)(function CanvasTab2({ title, icon, note, active, onSelect, onClose, className, onKeyDown, onClick, ...rest }, ref) {
+var CanvasTab = (0, import_react5.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)(
@@ -2406,9 +2576,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_react4.useState)(url);
-  const [editing, setEditing] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react5.useState)(url);
+  const [editing, setEditing] = (0, import_react5.useState)(false);
+  (0, import_react5.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: [
@@ -2450,15 +2620,15 @@ function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload,
 }
 
 // src/react/dnd.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var CANVAS_DRAG_MIME = "application/x-matrx-canvas-item";
 function useTabDrag(itemId, title) {
   const { layer } = useCanvasInternals();
-  const active = (0, import_react5.useRef)([]);
+  const active = (0, import_react6.useRef)([]);
   const end = () => {
     for (const dispose of active.current.splice(0)) dispose();
   };
-  (0, import_react5.useEffect)(() => end, []);
+  (0, import_react6.useEffect)(() => end, []);
   return {
     draggable: true,
     onDragStart: (event) => {
@@ -2473,8 +2643,8 @@ function useTabDrag(itemId, title) {
 function usePaneDrop(paneId, getOutline) {
   const canvas = useCanvas();
   const { layer } = useCanvasInternals();
-  const drop = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => () => drop.current?.(), []);
+  const drop = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => () => drop.current?.(), []);
   const hide = () => {
     drop.current?.();
     drop.current = null;
@@ -2597,6 +2767,10 @@ function EmptyPaneLauncher({ paneId }) {
 }
 var CANVAS_LAUNCHER_KIND_DEFINITION = {
   id: CANVAS_LAUNCHER_KIND,
+  surface: "dom",
+  // A launcher is a menu of things to open — nothing to print or capture.
+  print: false,
+  capture: false,
   label: "New tab",
   icon: LayoutGridIcon,
   component: LauncherBody
@@ -2610,14 +2784,14 @@ function resolveItemKind(kindId, lookup) {
 }
 
 // src/react/presentation.tsx
-var import_react6 = require("react");
-var CanvasPresentationContext = (0, import_react6.createContext)(null);
+var import_react7 = require("react");
+var CanvasPresentationContext = (0, import_react7.createContext)(null);
 function useCanvasPresentation() {
-  return (0, import_react6.useContext)(CanvasPresentationContext);
+  return (0, import_react7.useContext)(CanvasPresentationContext);
 }
 
 // src/react/slots.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var ZERO = Object.freeze({ width: 0, height: 0 });
 function createCanvasSlots() {
   const slots = /* @__PURE__ */ new Map();
@@ -2684,20 +2858,20 @@ function createCanvasSlots() {
     }
   };
 }
-var CanvasSlotsContext = (0, import_react7.createContext)(null);
+var CanvasSlotsContext = (0, import_react8.createContext)(null);
 function useCanvasSlots() {
-  return (0, import_react7.useContext)(CanvasSlotsContext);
+  return (0, import_react8.useContext)(CanvasSlotsContext);
 }
-var CanvasSinglePaneContext = (0, import_react7.createContext)(false);
+var CanvasSinglePaneContext = (0, import_react8.createContext)(false);
 function useCanvasSinglePane() {
-  return (0, import_react7.useContext)(CanvasSinglePaneContext);
+  return (0, import_react8.useContext)(CanvasSinglePaneContext);
 }
-var CanvasWindowTabsContext = (0, import_react7.createContext)(false);
+var CanvasWindowTabsContext = (0, import_react8.createContext)(false);
 function useCanvasWindowTabs() {
-  return (0, import_react7.useContext)(CanvasWindowTabsContext);
+  return (0, import_react8.useContext)(CanvasWindowTabsContext);
 }
 function useSlotSize(slots, paneId) {
-  return (0, import_react7.useSyncExternalStore)(
+  return (0, import_react8.useSyncExternalStore)(
     slots.subscribe,
     () => slots.size(paneId),
     () => ZERO
@@ -2706,12 +2880,12 @@ function useSlotSize(slots, paneId) {
 
 // src/react/bodies.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var useIsoLayoutEffect3 = typeof window === "undefined" ? import_react8.useEffect : import_react8.useLayoutEffect;
+var useIsoLayoutEffect4 = typeof window === "undefined" ? import_react9.useEffect : import_react9.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_react8.lazy)(kind.load);
+  if (!holder[LAZY] && kind.load) holder[LAZY] = (0, import_react9.lazy)(kind.load);
   return holder[LAZY] ?? null;
 }
 function resetKindComponent(kind) {
@@ -2719,7 +2893,7 @@ function resetKindComponent(kind) {
 }
 function usePanePresentation(slots, paneId, isFullscreen, paneCount) {
   const size = useSlotSize(slots, paneId);
-  return (0, import_react8.useMemo)(
+  return (0, import_react9.useMemo)(
     () => canvasPresentation({ width: size.width, height: size.height, isFullscreen, paneCount }),
     [size.width, size.height, isFullscreen, paneCount]
   );
@@ -2826,12 +3000,12 @@ function CanvasBodyLayer() {
   const slots = useCanvasSlots();
   const signature = useCanvasState((s) => layerSignature(s, windowId));
   const single = useCanvasSinglePane();
-  const root = (0, import_react8.useRef)(null);
-  const [placement] = (0, import_react8.useState)(
+  const root = (0, import_react9.useRef)(null);
+  const [placement] = (0, import_react9.useState)(
     () => slots ? createPlacement(() => root.current, slots, () => layer.native.remeasure()) : null
   );
-  useIsoLayoutEffect3(() => placement?.place());
-  useIsoLayoutEffect3(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
+  useIsoLayoutEffect4(() => placement?.place());
+  useIsoLayoutEffect4(() => 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)(
@@ -2884,7 +3058,7 @@ function stepAsItem(step, openedAt) {
     ...step.instance ? { instance: step.instance } : {}
   };
 }
-var BodyHost = (0, import_react8.memo)(function BodyHost2({
+var BodyHost = (0, import_react9.memo)(function BodyHost2({
   hostId,
   itemId,
   kept,
@@ -2904,20 +3078,26 @@ var BodyHost = (0, import_react8.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_react8.useMemo)(() => step ? stepAsItem(step, owner ?? 0) : void 0, [step, owner]);
+  const keptItem = (0, import_react9.useMemo)(() => step ? stepAsItem(step, owner ?? 0) : void 0, [step, owner]);
   const item = kept ? keptItem : live;
   const kind = useItemKind(item?.kind ?? "");
-  const element = (0, import_react8.useRef)(null);
-  const [everShown, setEverShown] = (0, import_react8.useState)(visible);
+  const element = (0, import_react9.useRef)(null);
+  const [everShown, setEverShown] = (0, import_react9.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));
-  useIsoLayoutEffect3(() => {
+  useIsoLayoutEffect4(() => {
     const el = element.current;
     if (!placement || !el) return void 0;
     return placement.register(hostId, { element: el, paneId });
   }, [placement, hostId, paneId]);
+  const domSurface = kind?.surface === "dom" && mounted && !kept;
+  (0, import_react9.useEffect)(() => {
+    if (process.env.NODE_ENV === "production" || !domSurface || !kind) return void 0;
+    const el = element.current;
+    return el ? watchDomSurface(el, kind.id) : void 0;
+  }, [domSurface, kind]);
   if (!item) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
@@ -2979,7 +3159,7 @@ function ItemContent({
   }
   return rendered;
 }
-var Rendered = (0, import_react8.memo)(function Rendered2({
+var Rendered = (0, import_react9.memo)(function Rendered2({
   kind,
   item,
   paneId,
@@ -2990,17 +3170,17 @@ var Rendered = (0, import_react8.memo)(function Rendered2({
   presentation
 }) {
   const props = { item, data: item.data, paneId, isFocused, isVisible, canvas, windowId, presentation };
-  const [attempt, setAttempt] = (0, import_react8.useState)(0);
+  const [attempt, setAttempt] = (0, import_react9.useState)(0);
   const retry = () => {
     resetKindComponent(kind);
     setAttempt((n) => n + 1);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ItemBoundary, { item, onClose: () => canvas.close(item.id), onRetry: retry, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react8.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingBody, { onRetry: retry, onClose: () => canvas.close(item.id) }), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KindRender, { kind, props }) }, attempt) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ItemBoundary, { item, onClose: () => canvas.close(item.id), onRetry: retry, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react9.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingBody, { onRetry: retry, onClose: () => canvas.close(item.id) }), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KindRender, { kind, props }) }, attempt) });
 });
 var CANVAS_BODY_STALL_MS = 2e4;
 function LoadingBody({ onRetry, onClose }) {
-  const [stalled, setStalled] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const [stalled, setStalled] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     const timer = setTimeout(() => setStalled(true), CANVAS_BODY_STALL_MS);
     return () => clearTimeout(timer);
   }, []);
@@ -3014,8 +3194,8 @@ function KindRender({ kind, props }) {
 }
 function NativeBody({ itemId, windowId, visible, children }) {
   const { layer } = useCanvasInternals();
-  const ref = (0, import_react8.useRef)(null);
-  const measure = (0, import_react8.useRef)(() => void 0);
+  const ref = (0, import_react9.useRef)(null);
+  const measure = (0, import_react9.useRef)(() => void 0);
   measure.current = () => {
     const el = ref.current;
     const box = visible && el?.isConnected ? el.getBoundingClientRect() : null;
@@ -3026,8 +3206,8 @@ function NativeBody({ itemId, windowId, visible, children }) {
     const rect = { ...toCanvasRect(box), devicePixelRatio: window.devicePixelRatio || 1 };
     layer.native.report(itemId, rect, { visible: !layer.isBlocked(), windowId });
   };
-  useIsoLayoutEffect3(() => measure.current());
-  useIsoLayoutEffect3(() => {
+  useIsoLayoutEffect4(() => measure.current());
+  useIsoLayoutEffect4(() => {
     const el = ref.current;
     const run = () => measure.current();
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(run);
@@ -3053,7 +3233,7 @@ function ItemProblem({ message, onClose, onRetry }) {
     ] })
   ] });
 }
-var ItemBoundary = class extends import_react8.Component {
+var ItemBoundary = class extends import_react9.Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
     return { error };
@@ -3097,10 +3277,10 @@ function beginCanvasResize(mode) {
 }
 
 // src/react/CanvasPane.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var Menu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var useIsoLayoutEffect4 = typeof window === "undefined" ? import_react9.useEffect : import_react9.useLayoutEffect;
+var useIsoLayoutEffect5 = typeof window === "undefined" ? import_react10.useEffect : import_react10.useLayoutEffect;
 function itemTitle(item, kind) {
   if (item.title) return item.title;
   if (item.kind === CANVAS_LAUNCHER_KIND) return "New tab";
@@ -3151,7 +3331,7 @@ function CanvasPaneView({ paneId }) {
   const canvas = useCanvas();
   const { windowId, tabStrip } = useCanvasInternals();
   const columnSlots = useCanvasSlots();
-  const [ownSlots] = (0, import_react9.useState)(createCanvasSlots);
+  const [ownSlots] = (0, import_react10.useState)(createCanvasSlots);
   const slots = columnSlots ?? ownSlots;
   const pane = useCanvasState((s) => s.panes[paneId]);
   const active = useCanvasState((s) => {
@@ -3169,11 +3349,11 @@ function CanvasPaneView({ paneId }) {
   const singlePane = useCanvasSinglePane();
   const inWindowStrip = useCanvasWindowTabs() && !singlePane;
   const windowTabs = useCanvasState((s) => singlePane ? windowTabsSignature(s, windowId) : "");
-  const sectionRef = (0, import_react9.useRef)(null);
-  const bodyRef = (0, import_react9.useRef)(null);
+  const sectionRef = (0, import_react10.useRef)(null);
+  const bodyRef = (0, import_react10.useRef)(null);
   const presentation = usePanePresentation(slots, paneId, isFullscreen, paneCount);
   const drop = usePaneDrop(paneId, () => sectionRef.current);
-  useIsoLayoutEffect4(() => {
+  useIsoLayoutEffect5(() => {
     const body = bodyRef.current;
     const section = sectionRef.current;
     if (body) slots.set(paneId, body);
@@ -3250,7 +3430,7 @@ function CanvasPaneView({ paneId }) {
     }
   );
 }
-var ToolbarBoundary = class extends import_react9.Component {
+var ToolbarBoundary = class extends import_react10.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
     return { failed: true };
@@ -3350,14 +3530,14 @@ function TabStrip({
   actives
 }) {
   const canvas = useCanvas();
-  const strip = (0, import_react9.useRef)(null);
-  const list = (0, import_react9.useRef)(null);
-  const [width, setWidth] = (0, import_react9.useState)(0);
-  const windowStart = (0, import_react9.useRef)(0);
-  const focusAfterMove = (0, import_react9.useRef)(false);
-  const read = (0, import_react9.useRef)(() => {
+  const strip = (0, import_react10.useRef)(null);
+  const list = (0, import_react10.useRef)(null);
+  const [width, setWidth] = (0, import_react10.useState)(0);
+  const windowStart = (0, import_react10.useRef)(0);
+  const focusAfterMove = (0, import_react10.useRef)(false);
+  const read = (0, import_react10.useRef)(() => {
   });
-  useIsoLayoutEffect4(() => {
+  useIsoLayoutEffect5(() => {
     const el = strip.current;
     if (!el) return void 0;
     let live = true;
@@ -3376,10 +3556,10 @@ function TabStrip({
       if (frame2 && typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(frame2);
     };
   }, []);
-  useIsoLayoutEffect4(() => {
+  useIsoLayoutEffect5(() => {
     read.current();
   }, [tabs.length]);
-  useIsoLayoutEffect4(() => {
+  useIsoLayoutEffect5(() => {
     if (!focusAfterMove.current || !activeItemId) return;
     focusAfterMove.current = false;
     tabElement(list.current, activeItemId)?.focus();
@@ -3396,7 +3576,7 @@ function TabStrip({
     width,
     windowStart.current
   );
-  useIsoLayoutEffect4(() => {
+  useIsoLayoutEffect5(() => {
     windowStart.current = fit.start;
   });
   const shown = entries.slice(fit.start, fit.end);
@@ -3476,8 +3656,8 @@ function tabElement(list, itemId) {
 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 blocking = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => () => blocking.current?.(), []);
   const label = `All tabs (${tabs.length})`;
   const trigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CanvasHeaderButton, { className: "mxc-tab-list", label, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-tab-list-count", "aria-hidden": "true", children: hidden }),
@@ -3589,16 +3769,26 @@ function PaneMenu({
   canSplit
 }) {
   const canvas = useCanvas();
-  const { ports, layer, itemMenus } = useCanvasInternals();
+  const { ports, layer, itemMenus, itemOutputs } = useCanvasInternals();
   const moveId = tabCount > 1 ? activeItem?.id : void 0;
-  const blocking = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => () => blocking.current?.(), []);
+  const blocking = (0, import_react10.useRef)(null);
+  (0, import_react10.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) : [];
+    const outputItems = activeItem ? safeMenu(
+      () => canvasOutputMenu({
+        item: activeItem,
+        kind,
+        title: itemTitle(activeItem, kind),
+        body: itemOutputs.read(activeItem.id),
+        ports: ports.output
+      })
+    ) : [];
     return [
       [...kindItems, ...bodyItems, ...hostItems].map((entry) => ({ ...entry, id: `item:${entry.id}` })),
+      outputItems.map((entry) => ({ ...entry, id: `item:${entry.id}` })),
       [
         // Only a split that leaves both panes usable (the layout rules' minimums) is offered.
         ...canSplit && canvas.fitSplit(paneId, "horizontal") === "horizontal" ? [{ id: "split-right", label: "Split right", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) }] : [],
@@ -3622,8 +3812,14 @@ function PaneMenu({
           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);
+              entries.push({
+                type: "item",
+                id: action.id,
+                label: action.label,
+                ...action.destructive ? { destructive: true } : {},
+                ...action.disabled ? { disabled: true } : {}
+              });
+              if (!action.disabled) handlers.set(action.id, action.onSelect);
             }
           });
           const anchor = toCanvasRect(event.currentTarget.getBoundingClientRect());
@@ -3657,10 +3853,20 @@ function MenuSections({ build }) {
 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" }),
-    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))
+    actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      Menu.Item,
+      {
+        onSelect: action.onSelect,
+        disabled: action.disabled ?? false,
+        className: "mxc-menu-item",
+        "data-destructive": action.destructive ? "" : void 0,
+        children: [
+          action.icon,
+          action.label
+        ]
+      },
+      action.id
+    ))
   ] });
 }
 function safeMenu(build) {
@@ -3674,13 +3880,13 @@ function safeMenu(build) {
 
 // src/react/CanvasColumn.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var useIsoLayoutEffect5 = typeof window === "undefined" ? import_react10.useEffect : import_react10.useLayoutEffect;
+var useIsoLayoutEffect6 = typeof window === "undefined" ? import_react11.useEffect : import_react11.useLayoutEffect;
 function subscribeViewport(listener) {
   window.addEventListener("resize", listener);
   return () => window.removeEventListener("resize", listener);
 }
 function useViewportWidth() {
-  return (0, import_react10.useSyncExternalStore)(subscribeViewport, () => window.innerWidth, () => 0);
+  return (0, import_react11.useSyncExternalStore)(subscribeViewport, () => window.innerWidth, () => 0);
 }
 function useRegionWidth() {
   const viewport = useViewportWidth();
@@ -3707,11 +3913,11 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
   const region = useRegionWidth();
   const viewport = useViewportWidth();
   const singlePane = placement === "docked" && viewport > 0 && viewport <= CANVAS_PHONE_MAX_WIDTH;
-  const [dragWidth, setDragWidth] = (0, import_react10.useState)(null);
-  const [slots] = (0, import_react10.useState)(createCanvasSlots);
-  const ref = (0, import_react10.useRef)(null);
+  const [dragWidth, setDragWidth] = (0, import_react11.useState)(null);
+  const [slots] = (0, import_react11.useState)(createCanvasSlots);
+  const ref = (0, import_react11.useRef)(null);
   useRegisterCanvasPresence();
-  (0, import_react10.useEffect)(
+  (0, import_react11.useEffect)(
     () => controller.registerPaneMeasure((paneId) => {
       const section = slots.section(paneId);
       if (!section?.isConnected) return null;
@@ -3720,7 +3926,7 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
     }),
     [controller, slots]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const el = ref.current;
     if (!el) return void 0;
     let frame2 = 0;
@@ -3794,8 +4000,8 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
 }
 function WidthHandle({ width, region, onDrag }) {
   const canvas = useCanvas();
-  const start = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => () => start.current?.end(), []);
+  const start = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => () => start.current?.end(), []);
   const clamp = (next) => clampDraggedCanvasWidth(next, region, canvas.rules);
   const onPointerDown = (event) => {
     event.preventDefault();
@@ -3842,8 +4048,8 @@ function LayoutNodeView({ node }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SplitView, { node });
 }
 function useMeasuredSize(ref, enabled) {
-  const [size, setSize] = (0, import_react10.useState)({ width: 0, height: 0 });
-  useIsoLayoutEffect5(() => {
+  const [size, setSize] = (0, import_react11.useState)({ width: 0, height: 0 });
+  useIsoLayoutEffect6(() => {
     const el = ref.current;
     if (!enabled || !el) return;
     const read = () => {
@@ -3869,8 +4075,8 @@ function childMinimums(node, orientation, rules) {
 }
 function SplitView({ node }) {
   const canvas = useCanvas();
-  const ref = (0, import_react10.useRef)(null);
-  const [liveSizes, setLiveSizes] = (0, import_react10.useState)(null);
+  const ref = (0, import_react11.useRef)(null);
+  const [liveSizes, setLiveSizes] = (0, import_react11.useState)(null);
   const measured = useMeasuredSize(ref, canvas.rules.paneMinWidth > 0 || canvas.rules.paneMinHeight > 0);
   const stacked = node.orientation === "horizontal" && shouldStackSplit(measured.width, node.children.length, canvas.rules);
   const orientation = stacked ? "vertical" : node.orientation;