@ai-matrx/canvas 0.5.0 → 0.5.1

package/dist/react.d.cts

@@ -249,7 +249,7 @@ interface CanvasProviderProps extends CanvasHostPorts {
     /** "auto": a pane with one tab shows a title instead of a tab strip. Default "auto". */
     readonly tabStrip?: CanvasTabStripMode;
 }
-declare function CanvasProvider({ children, store, persistence, onError, hotkeys, windowId: windowIdProp, layoutRules, regionWidth, tabStrip, ...hostPorts }: CanvasProviderProps): react.JSX.Element;
+declare function CanvasProvider({ children, store, persistence, onError, hotkeys, windowId: windowIdProp, layoutRules, regionWidth, tabStrip, itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame, }: CanvasProviderProps): react.JSX.Element;
 /**
  * Renders a subtree as ANOTHER window of the same canvas — the web host's
  * pop-out panel: `<CanvasWindowScope windowId={id}><CanvasColumn placement="fill"/></CanvasWindowScope>`.

package/dist/react.d.ts

@@ -249,7 +249,7 @@ interface CanvasProviderProps extends CanvasHostPorts {
     /** "auto": a pane with one tab shows a title instead of a tab strip. Default "auto". */
     readonly tabStrip?: CanvasTabStripMode;
 }
-declare function CanvasProvider({ children, store, persistence, onError, hotkeys, windowId: windowIdProp, layoutRules, regionWidth, tabStrip, ...hostPorts }: CanvasProviderProps): react.JSX.Element;
+declare function CanvasProvider({ children, store, persistence, onError, hotkeys, windowId: windowIdProp, layoutRules, regionWidth, tabStrip, itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame, }: CanvasProviderProps): react.JSX.Element;
 /**
  * Renders a subtree as ANOTHER window of the same canvas — the web host's
  * pop-out panel: `<CanvasWindowScope windowId={id}><CanvasColumn placement="fill"/></CanvasWindowScope>`.

package/dist/react.js

@@ -6,6 +6,7 @@ import {
   createContext,
   useContext,
   useEffect as useEffect2,
+  useMemo,
   useRef as useRef2,
   useState as useState2,
   useSyncExternalStore as useSyncExternalStore2
@@ -1638,8 +1639,17 @@ function CanvasProvider({
   layoutRules,
   regionWidth = null,
   tabStrip = "auto",
-  ...hostPorts
+  itemActions,
+  popOut,
+  dockBack,
+  showMenu,
+  overlay,
+  onNativeBodyFrame
 }) {
+  const hostPorts = useMemo(
+    () => ({ itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame }),
+    [itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame]
+  );
   const portsRef = useRef2(hostPorts);
   portsRef.current = hostPorts;
   const [{ controller, layer, launcherEntries }] = useState2(() => ({
@@ -1681,7 +1691,10 @@ function CanvasProvider({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [controller, hotkeys, windowId]);
-  const value = { controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries };
+  const value = useMemo(
+    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries }),
+    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries]
+  );
   return /* @__PURE__ */ jsxs(CanvasContext.Provider, { value, children: [
     children,
     hostPorts.overlay ? null : /* @__PURE__ */ jsx2(CanvasDomOverlay, { layer })
@@ -1689,8 +1702,10 @@ function CanvasProvider({
 }
 function CanvasWindowScope({ windowId, children }) {
   const parent = useCanvasContext();
-  const id = canvasWindowId(windowId);
-  const value = { ...parent, windowId: id, controller: parent.controller.forWindow(id) };
+  const value = useMemo(() => {
+    const id = canvasWindowId(windowId);
+    return { ...parent, windowId: id, controller: parent.controller.forWindow(id) };
+  }, [parent, windowId]);
   return /* @__PURE__ */ jsx2(CanvasContext.Provider, { value, children });
 }
 function useCanvasContext() {
@@ -1812,7 +1827,7 @@ import {
   memo,
   useEffect as useEffect5,
   useLayoutEffect as useLayoutEffect2,
-  useMemo,
+  useMemo as useMemo2,
   useRef as useRef5,
   useState as useState4
 } from "react";
@@ -2402,25 +2417,45 @@ function resetKindComponent(kind) {
 }
 function usePanePresentation(slots, paneId, isFullscreen, paneCount) {
   const size = useSlotSize(slots, paneId);
-  return useMemo(
+  return useMemo2(
     () => canvasPresentation({ width: size.width, height: size.height, isFullscreen, paneCount }),
     [size.width, size.height, isFullscreen, paneCount]
   );
 }
-function placedItems(state, windowId, onlyPane) {
+var hostKey = (item) => item.instance ?? item.id;
+var SEP2 = "
";
+var ROW = "";
+function layerSignature(state, windowId, onlyPane) {
   const frame2 = canvasWindowFrame(state, windowId);
-  if (!frame2) return [];
-  const out = [];
-  for (const paneId of onlyPane ? [onlyPane] : listPaneIds(frame2.layout)) {
+  if (!frame2) return "";
+  const rows = [];
+  const paneIds = listPaneIds(frame2.layout);
+  for (const paneId of onlyPane ? [onlyPane] : paneIds) {
     const pane = state.panes[paneId];
     for (const itemId of pane?.itemIds ?? []) {
       const item = state.items[itemId];
-      if (item) out.push({ item, paneId, active: pane?.activeItemId === itemId });
+      if (item) rows.push({ item, row: [hostKey(item), itemId, paneId, pane?.activeItemId === itemId ? "1" : "0"].join(SEP2) });
     }
   }
-  return out.sort((a, b) => a.item.openedAt - b.item.openedAt || hostKey(a.item).localeCompare(hostKey(b.item)));
+  rows.sort((a, b) => a.item.openedAt - b.item.openedAt || hostKey(a.item).localeCompare(hostKey(b.item)));
+  const head = [frame2.isOpen ? "1" : "0", frame2.isFullscreen ? "1" : "0", frame2.focusedPaneId, String(paneIds.length)].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);
+  return {
+    isOpen: open === "1",
+    isFullscreen: full === "1",
+    focusedPaneId,
+    paneCount: Number(count) || 1,
+    placed: rows.map((row) => {
+      const [hostId = "", itemId = "", paneId = "", active] = row.split(SEP2);
+      return { hostId, itemId, paneId, active: active === "1" };
+    })
+  };
 }
-var hostKey = (item) => item.instance ?? item.id;
 function createPlacement(getRoot, slots, afterPlace) {
   const hosts = /* @__PURE__ */ new Map();
   let placing = false;
@@ -2463,57 +2498,54 @@ function createPlacement(getRoot, slots, afterPlace) {
 function CanvasBodyLayer() {
   const { windowId, layer } = useCanvasInternals();
   const slots = useCanvasSlots();
-  const state = useCanvasState((s) => s);
+  const signature = useCanvasState((s) => layerSignature(s, windowId));
   const root = useRef5(null);
   const [placement] = useState4(
     () => slots ? createPlacement(() => root.current, slots, () => layer.native.remeasure()) : null
   );
   useIsoLayoutEffect(() => placement?.place());
   useIsoLayoutEffect(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
-  if (!slots || !placement) return null;
-  const frame2 = canvasWindowFrame(state, windowId);
-  if (!frame2) return null;
-  const paneCount = listPaneIds(frame2.layout).length;
-  return /* @__PURE__ */ jsx6("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: placedItems(state, windowId).map(({ item, paneId, active }) => /* @__PURE__ */ jsx6(
+  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 }) => /* @__PURE__ */ jsx6(
     BodyHost,
     {
-      hostId: hostKey(item),
-      item,
+      hostId,
+      itemId,
       paneId,
-      visible: frame2.isOpen && active,
-      focused: active && frame2.focusedPaneId === paneId,
-      isFullscreen: frame2.isFullscreen,
-      paneCount,
+      visible: shape.isOpen && active,
+      focused: active && shape.focusedPaneId === paneId,
+      isFullscreen: shape.isFullscreen,
+      paneCount: shape.paneCount,
       slots,
       placement
     },
-    hostKey(item)
+    hostId
   )) });
 }
 function CanvasPaneInlineBodies({ paneId, slots }) {
   const { windowId } = useCanvasInternals();
-  const state = useCanvasState((s) => s);
-  const frame2 = canvasWindowFrame(state, windowId);
-  const paneCount = frame2 ? listPaneIds(frame2.layout).length : 1;
-  return /* @__PURE__ */ jsx6(Fragment, { children: placedItems(state, windowId, paneId).map(({ item, active }) => /* @__PURE__ */ jsx6(
+  const shape = parseSignature(useCanvasState((s) => layerSignature(s, windowId, paneId)));
+  if (!shape) return null;
+  return /* @__PURE__ */ jsx6(Fragment, { children: shape.placed.map(({ hostId, itemId, active }) => /* @__PURE__ */ jsx6(
     BodyHost,
     {
-      hostId: hostKey(item),
-      item,
+      hostId,
+      itemId,
       paneId,
       visible: active,
-      focused: active && frame2?.focusedPaneId === paneId,
-      isFullscreen: frame2?.isFullscreen ?? false,
-      paneCount,
+      focused: active && shape.focusedPaneId === paneId,
+      isFullscreen: shape.isFullscreen,
+      paneCount: shape.paneCount,
       slots,
       placement: null
     },
-    hostKey(item)
+    hostId
   )) });
 }
-function BodyHost({
+var BodyHost = memo(function BodyHost2({
   hostId,
-  item,
+  itemId,
   paneId,
   visible,
   focused,
@@ -2524,7 +2556,8 @@ function BodyHost({
 }) {
   const canvas = useCanvas();
   const { windowId, ports } = useCanvasInternals();
-  const kind = useItemKind(item.kind);
+  const item = useCanvasState((s) => s.items[itemId]);
+  const kind = useItemKind(item?.kind ?? "");
   const element = useRef5(null);
   const [everShown, setEverShown] = useState4(visible);
   if (visible && !everShown) setEverShown(true);
@@ -2536,6 +2569,7 @@ function BodyHost({
     if (!placement || !el) return void 0;
     return placement.register(hostId, { element: el, paneId });
   }, [placement, hostId, paneId]);
+  if (!item) return null;
   return /* @__PURE__ */ jsx6(
     "div",
     {
@@ -2569,7 +2603,7 @@ function BodyHost({
       ) }) }) : null
     }
   );
-}
+});
 function ItemContent({
   item,
   kind,
@@ -2705,13 +2739,15 @@ function CanvasPaneView({ paneId }) {
   const [ownSlots] = useState5(createCanvasSlots);
   const slots = columnSlots ?? ownSlots;
   const pane = useCanvasState((s) => s.panes[paneId]);
-  const items = useCanvasState((s) => s.items);
+  const active = useCanvasState((s) => {
+    const activeId = s.panes[paneId]?.activeItemId;
+    return activeId ? s.items[activeId] : void 0;
+  });
   const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
   const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
   const focused = useCanvasState((s) => selectCanvasFocusedPaneId(s, windowId) === paneId);
   const paneCount = useCanvasState((s) => selectCanvasPaneCount(s, windowId));
   const role = useCanvasState((s) => windowId === CANVAS_MAIN_WINDOW ? "main" : s.windows[windowId]?.role ?? "window");
-  const active = pane?.activeItemId ? items[pane.activeItemId] : void 0;
   const canGoBack = useCanvasState((s) => active ? selectCanvasCanGoBack(s, active.id) : false);
   const kind = useItemKind(active?.kind ?? "");
   const sectionRef = useRef6(null);
@@ -2800,7 +2836,7 @@ function TabStrip({ paneId, itemIds, activeItemId }) {
     const reveal = () => {
       const tab = el.querySelector('[role="tab"][aria-selected="true"]');
       if (!tab) return;
-      const left = tab.offsetLeft - el.offsetLeft;
+      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;