@ai-matrx/canvas 0.9.3 → 0.10.0

package/dist/react.js

@@ -5,9 +5,9 @@
 import {
   createContext,
   useContext,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useMemo,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState2,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
@@ -51,6 +51,163 @@ function useCanvasMenuItems(itemId, items) {
   }, [itemMenus, itemId]);
 }
 
+// src/react/output.ts
+import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+var useIsoLayoutEffect2 = typeof window === "undefined" ? useEffect2 : useLayoutEffect2;
+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 = useRef2(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";
@@ -1622,7 +1779,7 @@ function toggleKind(controller, input) {
 }
 
 // src/react/layer.tsx
-import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState, useSyncExternalStore } from "react";
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import { jsx } from "react/jsx-runtime";
 function createCanvasLayer(getPorts) {
@@ -1691,7 +1848,7 @@ function createCanvasLayer(getPorts) {
 function CanvasDomOverlay({ layer }) {
   const elements = useSyncExternalStore(layer.dom.subscribe, layer.dom.list, layer.dom.list);
   const [mounted, setMounted] = useState(false);
-  useEffect2(() => setMounted(true), []);
+  useEffect3(() => setMounted(true), []);
   if (!mounted || elements.length === 0 || typeof document === "undefined") return null;
   return createPortal(
     /* @__PURE__ */ jsx("div", { className: "mxc-overlay", "aria-hidden": "true", children: elements.map(([id, element]) => /* @__PURE__ */ jsx(FloatingView, { element }, id)) }),
@@ -1707,11 +1864,11 @@ function FloatingView({ element }) {
   return null;
 }
 function Tooltip({ element }) {
-  const ref = useRef2(null);
+  const ref = useRef3(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;
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const el = ref.current;
     if (!el) return;
     const width = el.offsetWidth;
@@ -1727,6 +1884,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.`);
   }
@@ -1846,9 +2010,9 @@ function CanvasProvider({
     () => ({ itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame }),
     [itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame]
   );
-  const portsRef = useRef3(hostPorts);
+  const portsRef = useRef4(hostPorts);
   portsRef.current = hostPorts;
-  const [{ controller, layer, launcherEntries, itemMenus }] = useState2(() => ({
+  const [{ controller, layer, launcherEntries, itemMenus, itemOutputs }] = useState2(() => ({
     controller: createCanvasController({
       store: store ?? createCanvasStore(),
       persistence: persistence === void 0 ? createLocalStorageCanvasPersistence() : persistence,
@@ -1863,11 +2027,12 @@ function CanvasProvider({
     }),
     layer: createCanvasLayer(() => portsRef.current),
     launcherEntries: createLauncherEntryStore(),
-    itemMenus: createCanvasItemMenus()
+    itemMenus: createCanvasItemMenus(),
+    itemOutputs: createCanvasItemOutputs()
   }));
   const windowId = controller.windowId;
-  useEffect3(() => controller.start(), [controller]);
-  useEffect3(() => {
+  useEffect4(() => controller.start(), [controller]);
+  useEffect4(() => {
     if (!hotkeys) return;
     const isMac3 = isMacPlatform();
     const applies = (when, event) => {
@@ -1889,8 +2054,8 @@ function CanvasProvider({
     return () => window.removeEventListener("keydown", onKey);
   }, [controller, hotkeys, windowId]);
   const value = useMemo(
-    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus }),
-    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus]
+    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus, itemOutputs }),
+    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus, itemOutputs]
   );
   return /* @__PURE__ */ jsxs(CanvasContext.Provider, { value, children: [
     children,
@@ -1935,7 +2100,7 @@ function useRegisterCanvasPresence() {
   const context = useContext(CanvasContext);
   const controller = context?.controller;
   const windowId = context?.windowId;
-  useEffect3(() => controller?.registerPresentation(windowId), [controller, windowId]);
+  useEffect4(() => controller?.registerPresentation(windowId), [controller, windowId]);
 }
 var noPresence = () => () => void 0;
 function useCanvasIsPresented() {
@@ -1986,7 +2151,7 @@ function useCanvasLauncherEntry(entry) {
   const store = useContext(CanvasContext)?.launcherEntries;
   const fingerprint = JSON.stringify([entry.kind, entry.key, entry.title ?? null, entry.data ?? null]);
   const icon = entry.icon;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!store) return void 0;
     const [kind, key, title, data] = JSON.parse(fingerprint);
     return store.add({ kind, key, title, data, ...icon ? { icon } : {} });
@@ -2008,13 +2173,13 @@ function useCanvasLauncherEntries() {
 
 // src/react/CanvasColumn.tsx
 import {
-  useEffect as useEffect8,
-  useLayoutEffect as useLayoutEffect6,
-  useRef as useRef8,
+  useEffect as useEffect9,
+  useLayoutEffect as useLayoutEffect7,
+  useRef as useRef9,
   useState as useState6,
   useSyncExternalStore as useSyncExternalStore4
 } from "react";
-import { TapTargetButton, TapTargetButtonTransparent } from "@ai-matrx/tap-target";
+import { TapTargetButton, TapTargetButtonTransparent } from "@ai-matrx/design-system/tap-target";
 
 // src/react/bodies.tsx
 import {
@@ -2022,19 +2187,19 @@ import {
   Suspense,
   lazy,
   memo,
-  useEffect as useEffect6,
-  useLayoutEffect as useLayoutEffect4,
+  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo2,
-  useRef as useRef6,
+  useRef as useRef7,
   useState as useState4
 } from "react";
 
 // src/react/chrome.tsx
 import {
   forwardRef,
-  useEffect as useEffect4,
-  useLayoutEffect as useLayoutEffect3,
-  useRef as useRef4,
+  useEffect as useEffect5,
+  useLayoutEffect as useLayoutEffect4,
+  useRef as useRef5,
   useState as useState3
 } from "react";
 
@@ -2138,11 +2303,11 @@ var ChevronDownIcon = (p) => /* @__PURE__ */ jsx3(Glyph, { ...p, children: /* @_
 
 // src/react/chrome.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var useIsoLayoutEffect2 = typeof window === "undefined" ? useEffect4 : useLayoutEffect3;
+var useIsoLayoutEffect3 = typeof window === "undefined" ? useEffect5 : useLayoutEffect4;
 function useTruncated(title) {
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   const [truncated, setTruncated] = useState3(false);
-  useIsoLayoutEffect2(() => {
+  useIsoLayoutEffect3(() => {
     const el = ref.current;
     if (!el) return void 0;
     const check = () => setTruncated(el.scrollWidth - el.clientWidth > 1);
@@ -2156,15 +2321,15 @@ function useTruncated(title) {
 var cx = (...names) => names.filter(Boolean).join(" ");
 function useTooltip(text) {
   const internals = useOptionalCanvasInternals();
-  const timer = useRef4(null);
-  const hide = useRef4(null);
+  const timer = useRef5(null);
+  const hide = useRef5(null);
   const close = () => {
     if (timer.current) clearTimeout(timer.current);
     timer.current = null;
     hide.current?.();
     hide.current = null;
   };
-  useEffect4(() => close, []);
+  useEffect5(() => close, []);
   if (!text) return { close, handlers: {} };
   if (!internals) return { close, handlers: { title: text } };
   const open = (element, delay) => {
@@ -2361,7 +2526,7 @@ function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, newLabel = "New
 function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }) {
   const [draft, setDraft] = useState3(url);
   const [editing, setEditing] = useState3(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!editing) setDraft(url);
   }, [url, editing]);
   return /* @__PURE__ */ jsxs3("div", { "data-slot": "browser-bar", className: cx("mxc-browser-bar", className), children: [
@@ -2403,15 +2568,15 @@ function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload,
 }
 
 // src/react/dnd.ts
-import { useEffect as useEffect5, useRef as useRef5 } from "react";
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
 var CANVAS_DRAG_MIME = "application/x-matrx-canvas-item";
 function useTabDrag(itemId, title) {
   const { layer } = useCanvasInternals();
-  const active = useRef5([]);
+  const active = useRef6([]);
   const end = () => {
     for (const dispose of active.current.splice(0)) dispose();
   };
-  useEffect5(() => end, []);
+  useEffect6(() => end, []);
   return {
     draggable: true,
     onDragStart: (event) => {
@@ -2426,8 +2591,8 @@ function useTabDrag(itemId, title) {
 function usePaneDrop(paneId, getOutline) {
   const canvas = useCanvas();
   const { layer } = useCanvasInternals();
-  const drop = useRef5(null);
-  useEffect5(() => () => drop.current?.(), []);
+  const drop = useRef6(null);
+  useEffect6(() => () => drop.current?.(), []);
   const hide = () => {
     drop.current?.();
     drop.current = null;
@@ -2550,6 +2715,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
@@ -2659,7 +2828,7 @@ function useSlotSize(slots, paneId) {
 
 // src/react/bodies.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var useIsoLayoutEffect3 = typeof window === "undefined" ? useEffect6 : useLayoutEffect4;
+var useIsoLayoutEffect4 = typeof window === "undefined" ? useEffect7 : useLayoutEffect5;
 var LAZY = /* @__PURE__ */ Symbol.for("ai-matrx.canvas.lazy");
 function kindComponent(kind) {
   if (kind.component) return kind.component;
@@ -2779,12 +2948,12 @@ function CanvasBodyLayer() {
   const slots = useCanvasSlots();
   const signature = useCanvasState((s) => layerSignature(s, windowId));
   const single = useCanvasSinglePane();
-  const root = useRef6(null);
+  const root = useRef7(null);
   const [placement] = useState4(
     () => 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__ */ jsx6("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: shape.placed.map(({ hostId, itemId, paneId, active, kept }) => /* @__PURE__ */ jsx6(
@@ -2860,17 +3029,23 @@ var BodyHost = memo(function BodyHost2({
   const keptItem = useMemo2(() => step ? stepAsItem(step, owner ?? 0) : void 0, [step, owner]);
   const item = kept ? keptItem : live;
   const kind = useItemKind(item?.kind ?? "");
-  const element = useRef6(null);
+  const element = useRef7(null);
   const [everShown, setEverShown] = useState4(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;
+  useEffect7(() => {
+    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__ */ jsx6(
     "div",
@@ -2953,7 +3128,7 @@ var Rendered = memo(function Rendered2({
 var CANVAS_BODY_STALL_MS = 2e4;
 function LoadingBody({ onRetry, onClose }) {
   const [stalled, setStalled] = useState4(false);
-  useEffect6(() => {
+  useEffect7(() => {
     const timer = setTimeout(() => setStalled(true), CANVAS_BODY_STALL_MS);
     return () => clearTimeout(timer);
   }, []);
@@ -2967,8 +3142,8 @@ function KindRender({ kind, props }) {
 }
 function NativeBody({ itemId, windowId, visible, children }) {
   const { layer } = useCanvasInternals();
-  const ref = useRef6(null);
-  const measure = useRef6(() => void 0);
+  const ref = useRef7(null);
+  const measure = useRef7(() => void 0);
   measure.current = () => {
     const el = ref.current;
     const box = visible && el?.isConnected ? el.getBoundingClientRect() : null;
@@ -2979,8 +3154,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);
@@ -3050,10 +3225,10 @@ function beginCanvasResize(mode) {
 }
 
 // src/react/CanvasPane.tsx
-import { Component as Component2, useEffect as useEffect7, useLayoutEffect as useLayoutEffect5, useRef as useRef7, useState as useState5 } from "react";
+import { Component as Component2, useEffect as useEffect8, useLayoutEffect as useLayoutEffect6, useRef as useRef8, useState as useState5 } from "react";
 import * as Menu from "@radix-ui/react-dropdown-menu";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var useIsoLayoutEffect4 = typeof window === "undefined" ? useEffect7 : useLayoutEffect5;
+var useIsoLayoutEffect5 = typeof window === "undefined" ? useEffect8 : useLayoutEffect6;
 function itemTitle(item, kind) {
   if (item.title) return item.title;
   if (item.kind === CANVAS_LAUNCHER_KIND) return "New tab";
@@ -3122,11 +3297,11 @@ function CanvasPaneView({ paneId }) {
   const singlePane = useCanvasSinglePane();
   const inWindowStrip = useCanvasWindowTabs() && !singlePane;
   const windowTabs = useCanvasState((s) => singlePane ? windowTabsSignature(s, windowId) : "");
-  const sectionRef = useRef7(null);
-  const bodyRef = useRef7(null);
+  const sectionRef = useRef8(null);
+  const bodyRef = useRef8(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);
@@ -3303,14 +3478,14 @@ function TabStrip({
   actives
 }) {
   const canvas = useCanvas();
-  const strip = useRef7(null);
-  const list = useRef7(null);
+  const strip = useRef8(null);
+  const list = useRef8(null);
   const [width, setWidth] = useState5(0);
-  const windowStart = useRef7(0);
-  const focusAfterMove = useRef7(false);
-  const read = useRef7(() => {
+  const windowStart = useRef8(0);
+  const focusAfterMove = useRef8(false);
+  const read = useRef8(() => {
   });
-  useIsoLayoutEffect4(() => {
+  useIsoLayoutEffect5(() => {
     const el = strip.current;
     if (!el) return void 0;
     let live = true;
@@ -3329,10 +3504,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();
@@ -3349,7 +3524,7 @@ function TabStrip({
     width,
     windowStart.current
   );
-  useIsoLayoutEffect4(() => {
+  useIsoLayoutEffect5(() => {
     windowStart.current = fit.start;
   });
   const shown = entries.slice(fit.start, fit.end);
@@ -3429,8 +3604,8 @@ function tabElement(list, itemId) {
 function TabListMenu({ tabs, activeItemId, hidden }) {
   const canvas = useCanvas();
   const { ports, layer } = useCanvasInternals();
-  const blocking = useRef7(null);
-  useEffect7(() => () => blocking.current?.(), []);
+  const blocking = useRef8(null);
+  useEffect8(() => () => blocking.current?.(), []);
   const label = `All tabs (${tabs.length})`;
   const trigger = (props) => /* @__PURE__ */ jsxs6(CanvasHeaderButton, { className: "mxc-tab-list", label, ...props, children: [
     /* @__PURE__ */ jsx7("span", { className: "mxc-tab-list-count", "aria-hidden": "true", children: hidden }),
@@ -3542,16 +3717,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 = useRef7(null);
-  useEffect7(() => () => blocking.current?.(), []);
+  const blocking = useRef8(null);
+  useEffect8(() => () => 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__ */ jsx7(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) }] : [],
@@ -3575,8 +3760,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());
@@ -3610,10 +3801,20 @@ function MenuSections({ build }) {
 function MenuSection({ first, actions }) {
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
     first ? null : /* @__PURE__ */ jsx7(Menu.Separator, { className: "mxc-menu-separator" }),
-    actions.map((action) => /* @__PURE__ */ jsxs6(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__ */ jsxs6(
+      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) {
@@ -3627,7 +3828,7 @@ function safeMenu(build) {
 
 // src/react/CanvasColumn.tsx
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var useIsoLayoutEffect5 = typeof window === "undefined" ? useEffect8 : useLayoutEffect6;
+var useIsoLayoutEffect6 = typeof window === "undefined" ? useEffect9 : useLayoutEffect7;
 function subscribeViewport(listener) {
   window.addEventListener("resize", listener);
   return () => window.removeEventListener("resize", listener);
@@ -3662,9 +3863,9 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
   const singlePane = placement === "docked" && viewport > 0 && viewport <= CANVAS_PHONE_MAX_WIDTH;
   const [dragWidth, setDragWidth] = useState6(null);
   const [slots] = useState6(createCanvasSlots);
-  const ref = useRef8(null);
+  const ref = useRef9(null);
   useRegisterCanvasPresence();
-  useEffect8(
+  useEffect9(
     () => controller.registerPaneMeasure((paneId) => {
       const section = slots.section(paneId);
       if (!section?.isConnected) return null;
@@ -3673,7 +3874,7 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
     }),
     [controller, slots]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     const el = ref.current;
     if (!el) return void 0;
     let frame2 = 0;
@@ -3747,8 +3948,8 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
 }
 function WidthHandle({ width, region, onDrag }) {
   const canvas = useCanvas();
-  const start = useRef8(null);
-  useEffect8(() => () => start.current?.end(), []);
+  const start = useRef9(null);
+  useEffect9(() => () => start.current?.end(), []);
   const clamp = (next) => clampDraggedCanvasWidth(next, region, canvas.rules);
   const onPointerDown = (event) => {
     event.preventDefault();
@@ -3796,7 +3997,7 @@ function LayoutNodeView({ node }) {
 }
 function useMeasuredSize(ref, enabled) {
   const [size, setSize] = useState6({ width: 0, height: 0 });
-  useIsoLayoutEffect5(() => {
+  useIsoLayoutEffect6(() => {
     const el = ref.current;
     if (!enabled || !el) return;
     const read = () => {
@@ -3822,7 +4023,7 @@ function childMinimums(node, orientation, rules) {
 }
 function SplitView({ node }) {
   const canvas = useCanvas();
-  const ref = useRef8(null);
+  const ref = useRef9(null);
   const [liveSizes, setLiveSizes] = useState6(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);
@@ -3977,6 +4178,10 @@ export {
   CanvasWindowScope,
   CanvasWindowTabs,
   beginCanvasResize,
+  canvasItemElement,
+  canvasKindOutputProblems,
+  canvasKindSurface,
+  canvasOutputMenu,
   canvasSessionKey,
   defineCanvasKind,
   fitCanvasTabWindow,
@@ -3997,6 +4202,7 @@ export {
   useCanvasLauncherEntry,
   useCanvasMenuItems,
   useCanvasNativeBodies,
+  useCanvasOutput,
   useCanvasPresentation,
   useCanvasState,
   useCanvasWindowId,