@jini-ai/ui 0.5.3 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @jini-ai/ui
 
+## 0.5.4 — 2026-10-15
+
+- `TabBar` re-scrolls the active tab into view once web fonts are ready (06931dfe): fonts that widen tabs after the first measurement no longer leave a deep-linked tab cut off at the strip edge.
+
 ## 0.5.3 — 2026-10-14
 
 - New `./preview-modal-shell` subpath exporting `PreviewModalShell` without the whole `./renderers` barrel (Markdown, artifact views, annotation canvas); it still includes its sandboxed HTML renderer and parser (ec060014).

package/dist/features/tab-strip/react/components/TabBar.hooks.d.ts

@@ -79,7 +79,8 @@ export declare function useTabBarKeyboard({ tabs, activeId, onChange }: {
  * row into one swipeable row on phones, and a deep link to a later tab (`?tab=…`) otherwise opens
  * with its own label cut off at the edge. Only the strip's own `scrollLeft` moves: `scrollIntoView`
  * would also scroll the page vertically to the strip, a jump on every tab change below the fold.
- * A strip that wraps (no horizontal overflow) is left alone.
+ * A strip that wraps (no horizontal overflow) is left alone. Re-checks once fonts are ready,
+ * since web fonts can change tab widths after the initial measurement.
  *
  * @param input.activeId - The currently active tab's id; the strip re-checks when it changes.
  * @returns A ref for the tablist container.

package/dist/features/tab-strip/react/components/TabBar.hooks.js

@@ -118,7 +118,8 @@ export function useTabBarKeyboard({ tabs, activeId, onChange }, _optional = {})
  * row into one swipeable row on phones, and a deep link to a later tab (`?tab=…`) otherwise opens
  * with its own label cut off at the edge. Only the strip's own `scrollLeft` moves: `scrollIntoView`
  * would also scroll the page vertically to the strip, a jump on every tab change below the fold.
- * A strip that wraps (no horizontal overflow) is left alone.
+ * A strip that wraps (no horizontal overflow) is left alone. Re-checks once fonts are ready,
+ * since web fonts can change tab widths after the initial measurement.
  *
  * @param input.activeId - The currently active tab's id; the strip re-checks when it changes.
  * @returns A ref for the tablist container.
@@ -128,18 +129,25 @@ export function useTabBarKeyboard({ tabs, activeId, onChange }, _optional = {})
 export function useActiveTabInView({ activeId }, _optional = {}) {
     const stripRef = useRef(null);
     useEffect(() => {
-        const strip = stripRef.current;
-        const tab = strip?.querySelector('[role="tab"][aria-selected="true"]');
-        if (!strip || !tab || strip.scrollWidth <= strip.clientWidth)
-            return;
-        const stripBox = strip.getBoundingClientRect();
-        const tabBox = tab.getBoundingClientRect();
-        // A host's end padding (e.g. room for an edge fade) counts as off-screen.
-        const visibleRight = stripBox.right - (parseFloat(getComputedStyle(strip).paddingRight) || 0);
-        if (tabBox.left < stripBox.left)
-            strip.scrollLeft += tabBox.left - stripBox.left;
-        else if (tabBox.right > visibleRight)
-            strip.scrollLeft += tabBox.right - visibleRight;
+        function scrollActiveTabIntoView() {
+            const strip = stripRef.current;
+            const tab = strip?.querySelector('[role="tab"][aria-selected="true"]');
+            if (!strip || !tab || strip.scrollWidth <= strip.clientWidth)
+                return;
+            const stripBox = strip.getBoundingClientRect();
+            const tabBox = tab.getBoundingClientRect();
+            // A host's end padding (e.g. room for an edge fade) counts as off-screen.
+            const visibleRight = stripBox.right - (parseFloat(getComputedStyle(strip).paddingRight) || 0);
+            if (tabBox.left < stripBox.left)
+                strip.scrollLeft += tabBox.left - stripBox.left;
+            else if (tabBox.right > visibleRight)
+                strip.scrollLeft += tabBox.right - visibleRight;
+        }
+        scrollActiveTabIntoView();
+        let cancelled = false;
+        void document.fonts?.ready.then(() => { if (!cancelled)
+            scrollActiveTabIntoView(); });
+        return () => { cancelled = true; };
     }, [activeId]);
     return stripRef;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Generic, product-neutral React UI primitives and feature domains. Framework-free types, decision rules, catalogs, and host port contracts live behind ./core (no React, no DOM). The Excalidraw and Lexical editors live behind ./sketch-editor and ./lexical-rich-text-editor; the GrapesJS-backed inline HTML editor lives behind ./html-editor.",
   "license": "Apache-2.0",
   "repository": {
@@ -243,10 +243,10 @@
     "shiki": "^1.24.4",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.25.76",
-    "@jini-ai/platform": "^0.5.7",
-    "@jini-ai/agentic": "^0.4.4",
+    "@jini-ai/integrations": "^0.4.2",
+    "@jini-ai/platform": "^0.5.8",
     "@jini-ai/core": "^0.4.6",
-    "@jini-ai/integrations": "^0.4.2"
+    "@jini-ai/agentic": "^0.4.4"
   },
   "dependencies": {
     "@jini-ai/core": "^0.4.6"