@ai-matrx/canvas 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # 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):

package/dist/react.cjs

@@ -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);