@ai-matrx/canvas 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.5.1
+
+Measured live slowness (perf lane), fixed at the subscriptions:
+
+- **A tab's data change re-renders only that tab.** The body layer subscribes to a structural signature (which tabs are where, active, open, expanded) instead of the whole state; each body host reads its own item and is memoized on primitives; a pane reads its own active item, never `state.items`. Updating tab A re-renders neither tab B's body nor another pane.
+- **Stable context.** `CanvasProvider` memoizes its host ports and its context value (and `CanvasWindowScope` its scope), so a provider re-rendered by its parent no longer re-renders every canvas consumer.
+- The tab strip is the tabs' offset parent, so keeping the active tab in view measures in strip coordinates.
+- (Already in 0.5.0, now guarded too: putting the canvas away hides the column; hide → show remounts nothing.)
+
+### Consumer action
+
+- None.
+
 ## 0.5.0
 
 Owner feedback after using the canvas live (Arman, 2026-10-02): a stable canvas that never dismounts, no UI traps, readable tabs, the shell's motion, content that knows its shape, and the pieces web and desktop both need.

package/dist/react.cjs

@@ -1701,8 +1701,17 @@ function CanvasProvider({
   layoutRules,
   regionWidth = null,
   tabStrip = "auto",
-  ...hostPorts
+  itemActions,
+  popOut,
+  dockBack,
+  showMenu,
+  overlay,
+  onNativeBodyFrame
 }) {
+  const hostPorts = (0, import_react2.useMemo)(
+    () => ({ itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame }),
+    [itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame]
+  );
   const portsRef = (0, import_react2.useRef)(hostPorts);
   portsRef.current = hostPorts;
   const [{ controller, layer, launcherEntries }] = (0, import_react2.useState)(() => ({
@@ -1744,7 +1753,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 = (0, import_react2.useMemo)(
+    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries }),
+    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CanvasContext.Provider, { value, children: [
     children,
     hostPorts.overlay ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CanvasDomOverlay, { layer })
@@ -1752,8 +1764,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 = (0, import_react2.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() {
@@ -2449,20 +2463,40 @@ function usePanePresentation(slots, paneId, 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;
@@ -2505,57 +2539,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 = (0, import_react7.useRef)(null);
   const [placement] = (0, import_react7.useState)(
     () => slots ? createPlacement(() => root.current, slots, () => layer.native.remeasure()) : null
   );
   useIsoLayoutEffect(() => placement?.place());
   useIsoLayoutEffect(() => slots && placement ? slots.subscribe(placement.place) : void 0, [slots, placement]);
-  if (!slots || !placement) return null;
-  const frame2 = canvasWindowFrame(state, windowId);
-  if (!frame2) return null;
-  const paneCount = listPaneIds(frame2.layout).length;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: root, className: "mxc-bodies", "data-mxc-bodies": windowId, children: placedItems(state, windowId).map(({ item, paneId, active }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  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 }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     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__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: placedItems(state, windowId, paneId).map(({ item, active }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const shape = parseSignature(useCanvasState((s) => layerSignature(s, windowId, paneId)));
+  if (!shape) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: shape.placed.map(({ hostId, itemId, active }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     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 = (0, import_react7.memo)(function BodyHost2({
   hostId,
-  item,
+  itemId,
   paneId,
   visible,
   focused,
@@ -2566,7 +2597,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 = (0, import_react7.useRef)(null);
   const [everShown, setEverShown] = (0, import_react7.useState)(visible);
   if (visible && !everShown) setEverShown(true);
@@ -2578,6 +2610,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__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
@@ -2611,7 +2644,7 @@ function BodyHost({
       ) }) }) : null
     }
   );
-}
+});
 function ItemContent({
   item,
   kind,
@@ -2747,13 +2780,15 @@ function CanvasPaneView({ paneId }) {
   const [ownSlots] = (0, import_react8.useState)(createCanvasSlots);
   const slots = columnSlots ?? ownSlots;
   const pane = useCanvasState((s) => s.panes[paneId]);
-  const items = useCanvasState((s) => s.items);
+  const 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 = (0, import_react8.useRef)(null);
@@ -2842,7 +2877,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;