@jini-ai/ui 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @jini-ai/ui
 
+## 0.5.1 — 2026-10-13
+
+- Phone layout fixes. Media provider cards put one field per line on phones and keep the fields plus Clear on one row on wider screens (was a three-column grid that squeezed inputs to a few characters). The snippet block's Copy button no longer covers the command: phones start the code below it, wider screens reserve its width. `TabBar` scrolls a sideways-scrolling strip so the active tab is fully visible (only the strip scrolls, never the page).
+- HTML viewer imports `renderers/new-tab-preview` and `renderers/sandbox-bridge` directly instead of the renderer barrel (no Markdown renderers or srcdoc assembly in its closure).
+- New universal `./i18n` subpath re-exporting `interpolate` from the existing template-i18n owner.
+- TanStack fetch-query adapter: replacement writes win at TanStack's save boundary, so an older read that settles after `replace()` can no longer overwrite it (hook data, loaders and `peek()` keep their public types).
+
 ## 0.5.0 — 2026-10-13
 
 - Add framework-neutral chart contracts, browser/table and React hosts, provider-defined kinds and legacy chart wire aliases. Extract Recharts implementations and peers into the private browser artifact; chart component export wrappers are removed (no external consumers found).

package/dist/features/html-viewer/dependencies.d.ts

@@ -1,7 +1,7 @@
 import type { FullscreenPort, HtmlViewerDependencies, NewTabPreviewPort } from './ports.js';
 /** Real browser Fullscreen API binding. Every method is SSR-guarded (`typeof document === 'undefined'`). */
 export declare function createBrowserFullscreenPort(): FullscreenPort;
-/** Reuses `@jini-ai/ui`'s own `./renderers` subpath's `openSandboxedPreviewInNewTab` — the sandboxed-iframe core this whole slice is the first consumer of within this package. */
+/** Reuses `renderers/new-tab-preview.ts`, the owner of sandboxed new-tab previews, without loading the renderer barrel. */
 export declare function createBrowserNewTabPreviewPort(): NewTabPreviewPort;
 export declare function createDefaultHtmlViewerDependencies(): HtmlViewerDependencies;
 export declare const defaultHtmlViewerDependencies: HtmlViewerDependencies;

package/dist/features/html-viewer/dependencies.js

@@ -1,4 +1,4 @@
-import { openSandboxedPreviewInNewTab } from '../../renderers/index.js';
+import { openSandboxedPreviewInNewTab } from '../../renderers/new-tab-preview.js';
 /** Real browser Fullscreen API binding. Every method is SSR-guarded (`typeof document === 'undefined'`). */
 export function createBrowserFullscreenPort() {
     return {
@@ -28,7 +28,7 @@ export function createBrowserFullscreenPort() {
         },
     };
 }
-/** Reuses `@jini-ai/ui`'s own `./renderers` subpath's `openSandboxedPreviewInNewTab` — the sandboxed-iframe core this whole slice is the first consumer of within this package. */
+/** Reuses `renderers/new-tab-preview.ts`, the owner of sandboxed new-tab previews, without loading the renderer barrel. */
 export function createBrowserNewTabPreviewPort() {
     return {
         openInNewTab(html, title) {

package/dist/features/html-viewer/react/hooks/useDeckNavigation.d.ts

@@ -14,8 +14,8 @@ export interface DeckNavigationController {
     goTo(index: number): void;
 }
 /**
- * Drives deck/slide navigation over `@jini-ai/ui`'s own `./renderers`
- * subpath's `useSandboxBridge`, speaking the neutral `jini:deck-*` protocol from
+ * Drives deck/slide navigation over `renderers/sandbox-bridge.ts`'s
+ * `useSandboxBridge`, speaking the neutral `jini:deck-*` protocol from
  * `constants.ts`. The sandboxed content itself must implement the deck
  * framework that responds to these messages — this hook only sends
  * navigation requests and tracks the state the content reports back.

package/dist/features/html-viewer/react/hooks/useDeckNavigation.js

@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useSandboxBridge } from '../../../../renderers/index.js';
+import { useSandboxBridge } from '../../../../renderers/sandbox-bridge.js';
 import { DECK_NAVIGATE_MESSAGE_TYPE, DECK_STATE_MESSAGE_TYPE } from '../../constants.js';
 import { canGoNext, canGoPrev, parseDeckStateMessage, slideCounterLabel } from '../../rules.js';
 /**
- * Drives deck/slide navigation over `@jini-ai/ui`'s own `./renderers`
- * subpath's `useSandboxBridge`, speaking the neutral `jini:deck-*` protocol from
+ * Drives deck/slide navigation over `renderers/sandbox-bridge.ts`'s
+ * `useSandboxBridge`, speaking the neutral `jini:deck-*` protocol from
  * `constants.ts`. The sandboxed content itself must implement the deck
  * framework that responds to these messages — this hook only sends
  * navigation requests and tracks the state the content reports back.

package/dist/features/i18n/universal.d.ts

@@ -0,0 +1,3 @@
+/** Universal template helpers; implementation stays with the existing template-i18n owner. */
+export { interpolate } from './template-i18n.js';
+//# sourceMappingURL=universal.d.ts.map

package/dist/features/i18n/universal.js

@@ -0,0 +1,3 @@
+/** Universal template helpers; implementation stays with the existing template-i18n owner. */
+export { interpolate } from './template-i18n.js';
+//# sourceMappingURL=universal.js.map

package/dist/features/interactive-ui/providers/shadcn/button.d.ts

@@ -7,7 +7,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "ghost" | "destructive" | "secondary" | null | undefined;
+    variant?: "link" | "default" | "ghost" | "outline" | "destructive" | "secondary" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/features/panel-kit/fetch-query/adapter.tanstack.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Optional TanStack translation layer. No library types escape the fetch-query contract. */
 import { createContext, useCallback, useContext, useEffect, useMemo, useSyncExternalStore } from 'react';
-import { isCancelledError, QueryClient, QueryClientProvider, useMutation, useQuery } from '@tanstack/react-query';
+import { isCancelledError, replaceEqualDeep, QueryClient, QueryClientProvider, useMutation, useQuery } from '@tanstack/react-query';
 import { DEFAULT_STALE_TIME, FetchQueryCache, IDLE_RETENTION, toQueryError } from '@jini-ai/core/fetch';
 import { browserFetchQueryEnvironment } from './environment.browser.js';
 import { resolveFetchQueryError, resolveFetchQueryStatus } from './adapter.react.js';
@@ -64,8 +64,8 @@ function historyFor({ scope, query }) {
     }
     return history;
 }
-/** Replacement writes win over either outcome of an older transport, across all loaders
- * and reactive reads. Weak keys follow TanStack's own query eviction lifecycle. */
+/** Tag transport outcomes; final arbitration belongs to TanStack's synchronous save boundary.
+ * Weak query keys follow TanStack's own eviction lifecycle. */
 async function read({ scope, key, fetch }) {
     const query = scope.client.getQueryCache().find({ queryKey: key, exact: true });
     const history = historyFor({ scope, query });
@@ -77,21 +77,36 @@ async function read({ scope, key, fetch }) {
             return scope.client.getQueryData(key);
         if (value === undefined)
             throw new Error(`${JSON.stringify(key)} data is undefined`);
-        if (request === history.request)
-            history.error = null;
-        return value;
+        return { generation, request, value };
     }
     catch (error) {
         if (generation !== history.replacement)
             return scope.client.getQueryData(key);
-        // Earlier data remains useful, but a failed refresh is not a fresh cache hit.
-        // The next loader/mount must retry even when its staleTime would retain that data.
-        if (request === history.request) {
-            history.error = toQueryError(error);
+        return { generation, request, error };
+    }
+}
+/** Structural sharing runs inside setData, immediately before publication. A check in read()
+ * alone leaves a promise-continuation gap, even when the retryer has already resolved.
+ * Current failures throw here; stale failures resolve to the newer replacement like stale data.
+ * @returns The accepted envelope, reusing TanStack's normal deep structural sharing.
+ */
+function saveResult({ scope, key, previous, incoming }) {
+    const query = scope.client.getQueryCache().find({ queryKey: key, exact: true });
+    const history = historyFor({ scope, query });
+    const result = incoming;
+    if (result.generation !== history.replacement)
+        return scope.client.getQueryData(key);
+    if ('error' in result) {
+        // Earlier data stays useful, but a failed refresh is not a fresh cache hit.
+        if (result.request === history.request) {
+            history.error = toQueryError(result.error);
             query.invalidate();
         }
-        throw error;
+        throw result.error;
     }
+    if (result.request === history.request)
+        history.error = null;
+    return replaceEqualDeep(previous, result);
 }
 /** Match the built-in cache's idle retention. TanStack's default gcTime (5 min) would
  * otherwise evict an unobserved entry before a longer staleTime says it is stale. */
@@ -102,7 +117,8 @@ function gcTimeFor({ staleTime }) {
 function useFetchQuery({ key, fetch }, { enabled = true, staleTime = DEFAULT_STALE_TIME, refetchOnWindowFocus = false } = {}) {
     const scope = useScope();
     const online = useOnline(scope);
-    const query = useQuery({ queryKey: key, queryFn: () => read({ scope, key, fetch }), enabled: enabled && online, staleTime, gcTime: gcTimeFor({ staleTime }) }, scope.client);
+    const query = useQuery({ queryKey: key, queryFn: () => read({ scope, key, fetch }),
+        structuralSharing: (previous, incoming) => saveResult({ scope, key, previous, incoming }), enabled: enabled && online, staleTime, gcTime: gcTimeFor({ staleTime }) }, scope.client);
     const { refetch: refresh } = query;
     const refetch = useCallback(() => {
         if (scope.environment.isOnline()) {
@@ -127,9 +143,10 @@ function useFetchQuery({ key, fetch }, { enabled = true, staleTime = DEFAULT_STA
     // recovery, so a retry is never mistaken for evidence that the last failure is gone.
     const cached = scope.client.getQueryCache().find({ queryKey: key, exact: true });
     const history = historyFor({ scope, query: cached });
-    const hasData = query.data !== undefined;
+    const data = query.data && 'value' in query.data ? query.data.value : undefined;
+    const hasData = data !== undefined;
     return {
-        data: query.data,
+        data,
         status: resolveFetchQueryStatus({ disabled: !enabled, hasData, status: query.status }),
         error: resolveFetchQueryError({ error: history.error ?? query.error, disabled: !enabled, hasData }),
         isFetching: online && query.isFetching, refetch,
@@ -161,11 +178,13 @@ function useFetchMutation({ run }, { invalidates } = {}) {
 function useCachedLoader({ key, fetch }, { staleTime = DEFAULT_STALE_TIME } = {}) {
     const scope = useScope();
     return useMemo(() => {
-        const options = { queryKey: key, queryFn: () => read({ scope, key, fetch }), staleTime, gcTime: gcTimeFor({ staleTime }) };
+        const options = { queryKey: key, queryFn: () => read({ scope, key, fetch }),
+            structuralSharing: (previous, incoming) => saveResult({ scope, key, previous, incoming }), staleTime, gcTime: gcTimeFor({ staleTime }) };
         return {
-            peek: () => scope.client.getQueryData(key),
+            peek: () => scope.client.getQueryData(key)?.value,
             load: (required = { key, fetch }) => {
-                const selected = { ...options, queryKey: required.key, queryFn: () => read({ scope, key: required.key, fetch: required.fetch }) };
+                const selected = { ...options, queryKey: required.key, queryFn: () => read({ scope, key: required.key, fetch: required.fetch }),
+                    structuralSharing: (previous, incoming) => saveResult({ scope, key: required.key, previous, incoming }) };
                 return scope.client.fetchQuery(selected).catch(error => {
                     // A forced refresh can supersede a loader's request without aborting its transport.
                     // Follow the new request instead of exposing TanStack's cancellation vocabulary.
@@ -177,6 +196,16 @@ function useCachedLoader({ key, fetch }, { staleTime = DEFAULT_STALE_TIME } = {}
                     if (query.state.isInvalidated)
                         return scope.client.fetchQuery(selected);
                     return (query.promise ?? scope.client.getQueryData(required.key));
+                }).then(result => {
+                    const query = scope.client.getQueryCache().find({ queryKey: required.key, exact: true });
+                    const history = historyFor({ scope, query });
+                    // Query.fetch returns the transport envelope, not structuralSharing's accepted value.
+                    // Unwrap against the current generation so awaiting loaders agree with observers.
+                    if (result.generation !== history.replacement)
+                        return scope.client.getQueryData(required.key).value;
+                    if ('error' in result)
+                        throw result.error;
+                    return result.value;
                 });
             },
             replace: ({ value }) => {
@@ -184,7 +213,7 @@ function useCachedLoader({ key, fetch }, { staleTime = DEFAULT_STALE_TIME } = {}
                 const history = historyFor({ scope, query });
                 history.replacement += 1;
                 history.error = null;
-                scope.client.setQueryData(key, value);
+                scope.client.setQueryData(key, { generation: history.replacement, request: history.request, value });
             },
         };
     }, [scope, key, fetch, staleTime]);

package/dist/features/settings/dialog/styles/settings-dialog.css

@@ -1718,9 +1718,11 @@ select.jini-input {
   position: relative;
 }
 
+/* The right padding keeps the absolutely positioned copy button off the wrapped code; on a phone
+   that much side padding would halve the line, so the code starts below the button instead. */
 .jini-snippet-pre {
   margin: 0;
-  padding: 14px 16px;
+  padding: 14px 104px 14px 16px;
   overflow-x: auto;
   background: var(--jini-text-strong);
   border-radius: var(--jini-radius);
@@ -1748,6 +1750,12 @@ select.jini-input {
   background: color-mix(in srgb, var(--jini-text-strong) 75%, transparent);
 }
 
+@media (max-width: 640px) {
+  .jini-snippet-pre {
+    padding: 56px 16px 14px;
+  }
+}
+
 /* ============================================================
    Connectors tab — PORTED from OD's real source, not authored by eye.
    Sources: `foundry/integrations/open-design/reference/od-web-src.orig/
@@ -3585,13 +3593,21 @@ button.connector-action.is-loading { cursor: wait; }
   flex-wrap: wrap;
 }
 
+/* A wrapping row, not a fixed column grid: a card holds two or three fields (the model field only
+   when the provider lists models) plus Clear, and the old three-column grid squeezed each input to
+   a few characters on a phone and pushed Clear onto its own full-column row everywhere. Each field
+   asks for 11rem, so a phone gets one field per line, wider screens fit the whole row, and the cap
+   keeps a desktop field from stretching across the card. */
 .jini-media-provider-fields {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
 }
 
 .jini-media-provider-field {
+  flex: 1 1 11rem;
+  max-width: 28rem;
   min-width: 0;
 }
 

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

@@ -1,4 +1,4 @@
-import type { KeyboardEvent as ReactKeyboardEvent } from "react";
+import { type KeyboardEvent as ReactKeyboardEvent, type RefObject } from "react";
 import type { TabBarTab } from "./TabBar.js";
 /**
  * @file TabBar's derived props and WAI-ARIA automatic-activation keyboard behavior.
@@ -74,4 +74,19 @@ export declare function useTabBarKeyboard({ tabs, activeId, onChange }: {
     activeId: string;
     onChange: (id: string) => void;
 }, _optional?: Record<string, never>): TabBarKeyboardHandlers;
+/**
+ * Keeps the selected tab visible when the strip scrolls sideways — a host may turn the wrapping
+ * 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.
+ *
+ * @param input.activeId - The currently active tab's id; the strip re-checks when it changes.
+ * @returns A ref for the tablist container.
+ * @complexity O(n) per active-id change in the strip's tab count (one selector query).
+ * @example const stripRef = useActiveTabInView({ activeId });
+ */
+export declare function useActiveTabInView({ activeId }: {
+    activeId: string;
+}, _optional?: Record<string, never>): RefObject<HTMLDivElement | null>;
 //# sourceMappingURL=TabBar.hooks.d.ts.map

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

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { agentHandle } from "@jini-ai/agentic";
 /**
  * @file TabBar's derived props and WAI-ARIA automatic-activation keyboard behavior.
@@ -112,4 +113,34 @@ export function useTabBarKeyboard({ tabs, activeId, onChange }, _optional = {})
     }
     return { onKeyDown };
 }
+/**
+ * Keeps the selected tab visible when the strip scrolls sideways — a host may turn the wrapping
+ * 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.
+ *
+ * @param input.activeId - The currently active tab's id; the strip re-checks when it changes.
+ * @returns A ref for the tablist container.
+ * @complexity O(n) per active-id change in the strip's tab count (one selector query).
+ * @example const stripRef = useActiveTabInView({ activeId });
+ */
+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;
+    }, [activeId]);
+    return stripRef;
+}
 //# sourceMappingURL=TabBar.hooks.js.map

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

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { TabStripFrame } from "./TabStripFrame.js";
 import { agentHandle } from "@jini-ai/agentic";
-import { resolveTabBarTabIndex, tabHandleProps, useTabBarKeyboard } from "./TabBar.hooks.js";
+import { resolveTabBarTabIndex, tabHandleProps, useActiveTabInView, useTabBarKeyboard } from "./TabBar.hooks.js";
 /** The visually-hidden accessible-name SUFFIX {@link TabBarTab.dot} adds — e.g. "GitHub Pages,
  *  Connected", never "Connected GitHub Pages". Deliberately its own function rather than folded into
  *  the visual dot span rendered before the label (`TabBarButton` below): the visual dot is
@@ -24,6 +24,7 @@ function TabBarButton({ tab, active, tabIndex, onChange, }) {
 /** Controlled button-based selection strip, including roving focus and optional agent handles. */
 export function TabBar({ tabs, activeId, onChange, ariaLabel, containerHandle }, _optional = {}) {
     const { onKeyDown } = useTabBarKeyboard({ tabs: tabs, activeId: activeId, onChange: onChange });
-    return (_jsx(TabStripFrame, { className: "tab-bar", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, ...(containerHandle ? agentHandle({ handle: containerHandle }, { role: "region", label: ariaLabel }) : {}), children: tabs.map((tab) => (_jsx(TabBarButton, { tab: tab, active: activeId === tab.id, tabIndex: resolveTabBarTabIndex({ tabs: tabs, activeId: activeId, tab: tab }), onChange: onChange }, tab.id))) }));
+    const stripRef = useActiveTabInView({ activeId: activeId });
+    return (_jsx(TabStripFrame, { ref: stripRef, className: "tab-bar", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, ...(containerHandle ? agentHandle({ handle: containerHandle }, { role: "region", label: ariaLabel }) : {}), children: tabs.map((tab) => (_jsx(TabBarButton, { tab: tab, active: activeId === tab.id, tabIndex: resolveTabBarTabIndex({ tabs: tabs, activeId: activeId, tab: tab }), onChange: onChange }, tab.id))) }));
 }
 //# sourceMappingURL=TabBar.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "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": {
@@ -15,6 +15,7 @@
     "entries": {
       ".": "browser",
       "./core": "universal",
+      "./i18n": "universal",
       "./sketch-editor": "browser",
       "./lexical-rich-text-editor": "browser",
       "./html-editor": "browser",
@@ -135,6 +136,11 @@
       "import": "./dist/features/admin-widgets/index.js",
       "default": "./dist/features/admin-widgets/index.js"
     },
+    "./i18n": {
+      "types": "./dist/features/i18n/universal.d.ts",
+      "import": "./dist/features/i18n/universal.js",
+      "default": "./dist/features/i18n/universal.js"
+    },
     "./panel-kit": {
       "types": "./dist/features/panel-kit/index.d.ts",
       "import": "./dist/features/panel-kit/index.js",
@@ -227,13 +233,13 @@
     "shiki": "^1.24.4",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.25.76",
-    "@jini-ai/integrations": "^0.4.2",
     "@jini-ai/platform": "^0.5.6",
     "@jini-ai/agentic": "^0.4.4",
-    "@jini-ai/core": "^0.4.4"
+    "@jini-ai/core": "^0.4.5",
+    "@jini-ai/integrations": "^0.4.2"
   },
   "dependencies": {
-    "@jini-ai/core": "^0.4.4"
+    "@jini-ai/core": "^0.4.5"
   },
   "peerDependencies": {
     "@jini-ai/integrations": "^0.4.2",