@ai-matrx/canvas 0.7.1 → 0.7.3

package/dist/react.cjs

@@ -1057,7 +1057,11 @@ var CANVAS_PANE_MIN_WIDTH = 280;
 var CANVAS_WEB_LAYOUT_RULES = {
   defaultWidth: CANVAS_DEFAULT_WIDTH,
   minWidth: CANVAS_MIN_WIDTH,
-  centreMinWidth: 420,
+  // The page beside the canvas keeps room for its route header (title, mode switch,
+  // the shell's own controls): a 2026-10-03 census of 40 routes found headers 29-67px
+  // wide at 420 with a 900px canvas. Hosts pass `regionWidth` so this is the PAGE's
+  // width, not the window's.
+  centreMinWidth: 600,
   // Split down 70/30 like the desktop: what opens below (notifications, a feed) is the smaller pane.
   stackSplit: 0.7,
   sideSplit: 0.5,
@@ -3199,15 +3203,30 @@ function TabStrip({ tabs, activeItemId }) {
   const canvas = useCanvas();
   const strip = (0, import_react9.useRef)(null);
   const [width, setWidth] = (0, import_react9.useState)(0);
+  const read = (0, import_react9.useRef)(() => {
+  });
   useIsoLayoutEffect4(() => {
     const el = strip.current;
     if (!el) return void 0;
-    const read = () => setWidth(Math.floor(el.getBoundingClientRect().width));
-    read();
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(read);
+    let live = true;
+    const measure = () => {
+      if (live) setWidth(Math.floor(el.getBoundingClientRect().width));
+    };
+    read.current = measure;
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     observer?.observe(el);
-    return () => observer?.disconnect();
+    void document.fonts?.ready?.then(measure);
+    const frame2 = typeof requestAnimationFrame === "undefined" ? 0 : requestAnimationFrame(() => requestAnimationFrame(measure));
+    return () => {
+      live = false;
+      observer?.disconnect();
+      if (frame2 && typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(frame2);
+    };
   }, []);
+  useIsoLayoutEffect4(() => {
+    read.current();
+  }, [tabs.length]);
   const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.itemId === activeItemId));
   const fit = fitCanvasTabs(tabs.length, activeIndex, width);
   const shown = tabs.slice(fit.start, fit.end);