@ai-matrx/canvas 0.7.0 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.7.2
+
+Measured live on 0.7.1 (phone 375px; a 363px canvas after a reload):
+
+- **A tab's name ends before its close.** A background tab's close used to overlay the name's end (a fade), and on touch every tab showed one, so a name ran under it ("Quick Ch" cut at 103px, close at 90px). Now the close's room is reserved while it shows (hover / focus), and on touch (no hover) only the active tab shows a close - background names keep the room.
+- **The tab fit is re-read until layout settles.** A reload measured the strip before fonts and the header's actions had settled, so two tabs that fit showed "Quick ..." plus one under "All tabs". The strip is re-measured on its own resize, when `document.fonts.ready` resolves, two frames after mount, and whenever the tab count changes.
+
+### Consumer action
+
+- None.
+
+## 0.7.1
+
+Measured live on 0.7.0 (a 480px strip, six tabs):
+
+- **The active tab never runs under "All tabs".** Its `flex-shrink: 0.2` made it the last tab still shrinking, and the flex algorithm then hands such an item only that fraction of the overflow — it stayed 25px too wide, its close clipped beside the button. Priority width is now its higher floor alone.
+- **Floors hold ~7 letters:** "Messa…" at 78px. `CANVAS_TAB_MIN_WIDTH` 88px ("Messag…"), `CANVAS_ACTIVE_TAB_MIN_WIDTH` 112px; the fit reserves 36px for the "All tabs" button.
+
+### Consumer action
+
+- None.
+
 ## 0.7.0
 
 Second independent live sweep (admin, clone):

package/dist/react.cjs

@@ -3180,9 +3180,9 @@ function SingleTitle({ item, kind }) {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "mxc-tab-close", "data-slot": "browser-tab-close", "aria-label": `Close ${title}`, onClick: () => canvas.close(item.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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 };
@@ -3199,15 +3199,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);