@ai-matrx/canvas 0.7.0 → 0.7.2

package/dist/react.d.cts

@@ -384,10 +384,10 @@ declare function itemTitle(item: CanvasItem, kind: AnyCanvasKind | undefined): s
 declare function CanvasPaneView({ paneId }: {
     paneId: CanvasPaneId;
 }): react.JSX.Element | null;
-/** A background tab's floor (px): icon + ~6 letters + "…". Mirrored to CSS as --mxc-tab-min. */
-declare const CANVAS_TAB_MIN_WIDTH = 78;
-/** The active tab's floor (px): icon + ~7 letters + "…" + its close. Mirrored to CSS as --mxc-tab-active-min. */
-declare const CANVAS_ACTIVE_TAB_MIN_WIDTH = 100;
+/** A background tab's floor (px): icon + ~7 letters + "…" ("Messag…"). Mirrored to CSS as --mxc-tab-min. */
+declare const CANVAS_TAB_MIN_WIDTH = 88;
+/** The active tab's floor (px): icon + ~8 letters + "…" + its close. Mirrored to CSS as --mxc-tab-active-min. */
+declare const CANVAS_ACTIVE_TAB_MIN_WIDTH = 112;
 /**
  * Which tabs the strip shows at this width: all of them when every tab fits
  * at its floor, else as many as fit — always the active one — and the rest

package/dist/react.d.ts

@@ -384,10 +384,10 @@ declare function itemTitle(item: CanvasItem, kind: AnyCanvasKind | undefined): s
 declare function CanvasPaneView({ paneId }: {
     paneId: CanvasPaneId;
 }): react.JSX.Element | null;
-/** A background tab's floor (px): icon + ~6 letters + "…". Mirrored to CSS as --mxc-tab-min. */
-declare const CANVAS_TAB_MIN_WIDTH = 78;
-/** The active tab's floor (px): icon + ~7 letters + "…" + its close. Mirrored to CSS as --mxc-tab-active-min. */
-declare const CANVAS_ACTIVE_TAB_MIN_WIDTH = 100;
+/** A background tab's floor (px): icon + ~7 letters + "…" ("Messag…"). Mirrored to CSS as --mxc-tab-min. */
+declare const CANVAS_TAB_MIN_WIDTH = 88;
+/** The active tab's floor (px): icon + ~8 letters + "…" + its close. Mirrored to CSS as --mxc-tab-active-min. */
+declare const CANVAS_ACTIVE_TAB_MIN_WIDTH = 112;
 /**
  * Which tabs the strip shows at this width: all of them when every tab fits
  * at its floor, else as many as fit — always the active one — and the rest

package/dist/react.js

@@ -3135,9 +3135,9 @@ function SingleTitle({ item, kind }) {
     /* @__PURE__ */ jsx7("button", { type: "button", className: "mxc-tab-close", "data-slot": "browser-tab-close", "aria-label": `Close ${title}`, onClick: () => canvas.close(item.id), children: /* @__PURE__ */ jsx7(CloseIcon, {}) })
   ] });
 }
-var CANVAS_TAB_MIN_WIDTH = 78;
-var CANVAS_ACTIVE_TAB_MIN_WIDTH = 100;
-var TAB_LIST_BUTTON_ROOM = 30;
+var CANVAS_TAB_MIN_WIDTH = 88;
+var CANVAS_ACTIVE_TAB_MIN_WIDTH = 112;
+var TAB_LIST_BUTTON_ROOM = 36;
 var TAB_GAP = 2;
 function fitCanvasTabs(count, activeIndex, width) {
   if (count <= 0) return { start: 0, end: 0, overflow: false, compact: false };
@@ -3154,15 +3154,30 @@ function TabStrip({ tabs, activeItemId }) {
   const canvas = useCanvas();
   const strip = useRef7(null);
   const [width, setWidth] = useState5(0);
+  const read = useRef7(() => {
+  });
   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);