@jini-ai/ui 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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).
+
 ## 0.5.2 — 2026-10-13
 
 - MCP-UI surfaces follow the host's live theme (da019dde): `McpUiHost` reads the host's resolved `--jini-*` theme where a card mounts and writes it into Jini-built surface documents as a `:root` rule after the token block; a MutationObserver re-themes cards already on screen when the theme or accent changes. Third-party Views are not rewritten. Builder token overrides render as `:root:root`, so a card that sets its own tokens keeps them. New `--jini-mcpui-accent-ink` token (host `--jini-primary-ink`) for primary button text.

package/README.md

@@ -89,6 +89,10 @@ package's own React layer. See the chat-core/chat-react split discussion in
   i18n/observability/utils porting task (2026-07-16); see
   the archived provenance ledger.
 
+`PreviewModalShell` has its own entry, `@jini-ai/ui/preview-modal-shell`, so a modal does not load
+the whole `./renderers` barrel (Markdown, artifact views, annotation canvas). It still includes its
+sandboxed HTML renderer and parser. Framework-free execution/provider rules come from `./core`.
+
 ## `./core` — the framework-free half, importable without React
 
 **`@jini-ai/ui/core` is not a separate concern, just a separate entry point.** It re-exports

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.2",
+  "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": {
@@ -26,6 +26,7 @@
       "./interactive-ui/manifests": "universal",
       "./a2ui": "browser",
       "./renderers": "browser",
+      "./preview-modal-shell": "browser",
       "./interactive-ui.css": "browser",
       "./settings-dialog.css": "browser",
       "./tabbed-dialog.css": "browser",
@@ -45,7 +46,8 @@
     "isolation": {
       "entries": {
         "./fetch-query": "panel-kit",
-        "./fetch-query/tanstack": "panel-kit"
+        "./fetch-query/tanstack": "panel-kit",
+        "./preview-modal-shell": "renderers"
       },
       "shared": [
         "src/features/charts",
@@ -130,6 +132,11 @@
       "import": "./dist/renderers/index.js",
       "default": "./dist/renderers/index.js"
     },
+    "./preview-modal-shell": {
+      "types": "./dist/renderers/preview-modal-shell/index.d.ts",
+      "import": "./dist/renderers/preview-modal-shell/index.js",
+      "default": "./dist/renderers/preview-modal-shell/index.js"
+    },
     "./interactive-ui.css": "./dist/features/interactive-ui/interactive-ui.css",
     "./settings-dialog.css": "./dist/features/settings/dialog/styles/settings-dialog.css",
     "./tabbed-dialog.css": "./dist/features/tabbed-dialog/styles/tabbed-dialog.css",
@@ -236,13 +243,13 @@
     "shiki": "^1.24.4",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.25.76",
-    "@jini-ai/core": "^0.4.5",
-    "@jini-ai/platform": "^0.5.6",
     "@jini-ai/integrations": "^0.4.2",
+    "@jini-ai/platform": "^0.5.8",
+    "@jini-ai/core": "^0.4.6",
     "@jini-ai/agentic": "^0.4.4"
   },
   "dependencies": {
-    "@jini-ai/core": "^0.4.5"
+    "@jini-ai/core": "^0.4.6"
   },
   "peerDependencies": {
     "@jini-ai/integrations": "^0.4.2",