@jini-ai/ui 0.4.9 → 0.5.1

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/dist/styles/variables.css

@@ -28,7 +28,7 @@
 }
 
 /* Default chart palette — what `--jini-chart-1`..`-6` fall back to when a host sets none (see
-   interactive-ui/providers/recharts/chart-tokens.ts). Separate `-default-` names, so a host's own
+   the private charts-recharts/src/chart-tokens.ts). Separate `-default-` names, so a host's own
    `--jini-chart-N` always wins regardless of cascade order. Series 1 is the warm Claude orange, not
    the near-black `--jini-primary` ("Claude orange should be the default color", owner, 2026-10-05);
    2-6 are fixed-order categorical hues at matched lightness. Each mode was run through the dataviz

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui",
-  "version": "0.4.9",
+  "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",
@@ -36,7 +37,10 @@
       "./tab-strip": "browser",
       "./admin-widgets.css": "browser",
       "./theme": "browser",
-      "./styles/*": "browser"
+      "./styles/*": "browser",
+      "./charts": "universal",
+      "./charts/browser": "browser",
+      "./charts/react": "browser"
     },
     "isolation": {
       "entries": {
@@ -132,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",
@@ -158,7 +167,22 @@
       "import": "./dist/theme/index.js",
       "default": "./dist/theme/index.js"
     },
-    "./styles/*": "./dist/styles/*"
+    "./styles/*": "./dist/styles/*",
+    "./charts": {
+      "types": "./dist/features/charts/index.d.ts",
+      "import": "./dist/features/charts/index.js",
+      "default": "./dist/features/charts/index.js"
+    },
+    "./charts/browser": {
+      "types": "./dist/features/charts/browser.d.ts",
+      "import": "./dist/features/charts/browser.js",
+      "default": "./dist/features/charts/browser.js"
+    },
+    "./charts/react": {
+      "types": "./dist/features/charts/react.d.ts",
+      "import": "./dist/features/charts/react.js",
+      "default": "./dist/features/charts/react.js"
+    }
   },
   "files": [
     "dist",
@@ -200,7 +224,6 @@
     "lexical": "0.36.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "recharts": "^3.10.1",
     "tailwindcss": "^4.1.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -210,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/platform": "^0.5.3",
-    "@jini-ai/core": "^0.4.3"
+    "@jini-ai/core": "^0.4.5",
+    "@jini-ai/integrations": "^0.4.2"
   },
   "dependencies": {
-    "@jini-ai/core": "^0.4.3"
+    "@jini-ai/core": "^0.4.5"
   },
   "peerDependencies": {
     "@jini-ai/integrations": "^0.4.2",
@@ -234,7 +257,6 @@
     "lexical": "0.36.2",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0",
-    "recharts": "^3.10.1",
     "@jini-ai/platform": "^0.5.3",
     "@jini-ai/agentic": "^0.4.4",
     "class-variance-authority": "^0.7.1",
@@ -292,9 +314,6 @@
     "react-dom": {
       "optional": true
     },
-    "recharts": {
-      "optional": true
-    },
     "@jini-ai/platform": {
       "optional": true
     },

package/dist/features/interactive-ui/providers/recharts/bar-chart.d.ts

@@ -1,8 +0,0 @@
-export interface BarChartProps {
-    readonly data: readonly Record<string, unknown>[];
-    readonly categoryKey: string;
-    readonly valueKey: string;
-    readonly color?: string;
-}
-export declare function BarChart({ data, categoryKey, valueKey, color }: BarChartProps): import("react").JSX.Element;
-//# sourceMappingURL=bar-chart.d.ts.map

package/dist/features/interactive-ui/providers/recharts/bar-chart.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bar, BarChart as RechartsBarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
-import { CHART_AXIS_PROPS, CHART_CURSOR, CHART_GRID_STROKE, CHART_PRIMARY_COLOR } from './chart-tokens.js';
-import { chartTickFormatter, createChartConfig } from './chart-config.js';
-import { ChartContainer, ChartTooltipContent } from './chart.js';
-export function BarChart({ data, categoryKey, valueKey, color = CHART_PRIMARY_COLOR }) {
-    const config = createChartConfig({ series: [{ key: valueKey, label: valueKey }] }, { color });
-    const title = `${valueKey} by ${categoryKey}`;
-    const description = `Bar chart with ${data.length} categories. Use arrow keys to explore values.`;
-    return (_jsx(ChartContainer, { config: config, title: title, description: description, children: _jsxs(RechartsBarChart, { data: data, accessibilityLayer: true, title: title, desc: description, margin: { top: 16, right: 12, bottom: 8, left: 0 }, barCategoryGap: "24%", children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: CHART_GRID_STROKE, strokeOpacity: 0.6, vertical: false }), _jsx(XAxis, { dataKey: categoryKey, interval: "preserveStartEnd", minTickGap: 8, ...CHART_AXIS_PROPS }), _jsx(YAxis, { ...CHART_AXIS_PROPS, tickFormatter: chartTickFormatter, width: 48 }), _jsx(Tooltip, { cursor: CHART_CURSOR, content: _jsx(ChartTooltipContent, {}), isAnimationActive: false }), _jsx(Bar, { dataKey: valueKey, fill: config[valueKey].color, radius: [6, 6, 0, 0], maxBarSize: 40, isAnimationActive: false })] }) }));
-}
-//# sourceMappingURL=bar-chart.js.map

package/dist/features/interactive-ui/providers/recharts/bar-chart.manifest.d.ts

@@ -1,21 +0,0 @@
-import { z } from 'zod';
-import type { InteractiveComponentManifest } from '../../types.js';
-/** Same `.passthrough()`/`z.record` reasoning as `data-table.manifest.ts` — rows are arbitrary agent data. */
-export declare const rechartsBarChartPropsSchema: z.ZodObject<{
-    data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
-    categoryKey: z.ZodString;
-    valueKey: z.ZodString;
-    color: z.ZodOptional<z.ZodString>;
-}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
-    data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
-    categoryKey: z.ZodString;
-    valueKey: z.ZodString;
-    color: z.ZodOptional<z.ZodString>;
-}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
-    data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
-    categoryKey: z.ZodString;
-    valueKey: z.ZodString;
-    color: z.ZodOptional<z.ZodString>;
-}, z.ZodTypeAny, "passthrough">>;
-export declare const rechartsBarChartManifest: InteractiveComponentManifest;
-//# sourceMappingURL=bar-chart.manifest.d.ts.map

package/dist/features/interactive-ui/providers/recharts/bar-chart.manifest.js

@@ -1,18 +0,0 @@
-import { z } from 'zod';
-/** Same `.passthrough()`/`z.record` reasoning as `data-table.manifest.ts` — rows are arbitrary agent data. */
-export const rechartsBarChartPropsSchema = z
-    .object({
-    data: z.array(z.record(z.unknown())).min(1),
-    categoryKey: z.string(),
-    valueKey: z.string(),
-    color: z.string().optional(),
-})
-    .passthrough();
-export const rechartsBarChartManifest = {
-    id: 'recharts.bar-chart',
-    provider: 'recharts',
-    capabilities: ['chart', 'bar-chart', 'graph'],
-    propsSchema: rechartsBarChartPropsSchema,
-    description: 'recharts BarChart (real npm dependency): one categorical axis, one numeric value per bar.',
-};
-//# sourceMappingURL=bar-chart.manifest.js.map

package/dist/features/interactive-ui/providers/recharts/chart-config.d.ts

@@ -1,40 +0,0 @@
-export interface ChartSeries {
-    readonly label: string;
-    readonly color: string;
-    readonly value?: number;
-}
-/** Provider-local configuration shared by marks, tooltip swatches and the legend. */
-export type ChartConfig = Readonly<Record<string, ChartSeries>>;
-interface SeriesInput {
-    readonly key: string;
-    readonly label: string;
-    readonly value?: number;
-}
-/**
- * Assign the existing CSS palette to named series without mutating agent data.
- * @param input Series in display order, with stable keys independent of display labels.
- * @param options Optional legacy color override, applied to every series.
- * @returns A config keyed by series identity, including duplicate display labels.
- * @complexity O(n) time and space for n series; no I/O.
- */
-export declare function createChartConfig({ series }: {
-    readonly series: readonly SeriesInput[];
-}, { color }?: {
-    readonly color?: string | undefined;
-}): ChartConfig;
-/**
- * Format chart numbers with Intl; preserve categorical strings without numeric coercion.
- * @param input The value supplied by an axis, tooltip, legend or donut total.
- * @param options Compact notation for ticks/totals, standard notation for exact values.
- * @returns Display text, or an empty string for a missing value.
- * @complexity O(k) time and space for k characters in the formatted value; no I/O.
- */
-export declare function formatChartValue({ value }: {
-    readonly value: unknown;
-}, { notation }?: {
-    readonly notation?: 'standard' | 'compact';
-}): string;
-/** Recharts callback convention is positional; all formatting delegates to the shared owner. */
-export declare const chartTickFormatter: (value: unknown) => string;
-export {};
-//# sourceMappingURL=chart-config.d.ts.map

package/dist/features/interactive-ui/providers/recharts/chart-config.js

@@ -1,32 +0,0 @@
-import { CHART_SERIES_COLORS } from './chart-tokens.js';
-/**
- * Assign the existing CSS palette to named series without mutating agent data.
- * @param input Series in display order, with stable keys independent of display labels.
- * @param options Optional legacy color override, applied to every series.
- * @returns A config keyed by series identity, including duplicate display labels.
- * @complexity O(n) time and space for n series; no I/O.
- */
-export function createChartConfig({ series }, { color } = {}) {
-    return Object.fromEntries(series.map((entry, index) => [entry.key, {
-            label: entry.label,
-            color: color ?? CHART_SERIES_COLORS[index % CHART_SERIES_COLORS.length],
-            ...(entry.value === undefined ? {} : { value: entry.value }),
-        }]));
-}
-/**
- * Format chart numbers with Intl; preserve categorical strings without numeric coercion.
- * @param input The value supplied by an axis, tooltip, legend or donut total.
- * @param options Compact notation for ticks/totals, standard notation for exact values.
- * @returns Display text, or an empty string for a missing value.
- * @complexity O(k) time and space for k characters in the formatted value; no I/O.
- */
-export function formatChartValue({ value }, { notation = 'standard' } = {}) {
-    if (value == null)
-        return '';
-    if (typeof value !== 'number')
-        return String(value);
-    return new Intl.NumberFormat('en-US', { notation, maximumFractionDigits: notation === 'compact' ? 1 : 20 }).format(value);
-}
-/** Recharts callback convention is positional; all formatting delegates to the shared owner. */
-export const chartTickFormatter = (value) => formatChartValue({ value }, { notation: 'compact' });
-//# sourceMappingURL=chart-config.js.map

package/dist/features/interactive-ui/providers/recharts/chart-tokens.d.ts

@@ -1,49 +0,0 @@
-/**
- * @module chart-tokens
- *
- * The CSS variables every recharts provider paints with — the host's theme owns the colors.
- *
- * Why `--jini-chart-*` with fallbacks rather than bare `--jini-primary`: a host that styles its own
- * chrome and never maps Jini's base tokens (an adopting admin shell) got Jini's near-black default bars, in
- * dark mode too ("the color is ugly", demo V3, 2026-10-05). A host sets `--jini-chart-1`..`-6`,
- * `--jini-chart-grid`, `--jini-chart-axis`, `--jini-chart-cursor`, `--jini-chart-surface` and
- * `--jini-chart-text` in its own CSS; a host that sets none keeps the base-token look for the
- * neutral tokens.
- *
- * Series colors fall back to Jini's default palette (`--jini-chart-default-1`..`-6`, warm orange
- * first, light + dark, in `styles/variables.css`), not to `--jini-primary` and the status tokens:
- * "Claude orange should be the default color" (owner, 2026-10-05). The values live in CSS, never
- * here, so a host's theme stays the single owner of color.
- */
-/** Categorical series colors in fixed order; larger datasets repeat the palette with named legends. */
-export declare const CHART_SERIES_COLORS: readonly ["var(--jini-chart-1, var(--jini-chart-default-1))", "var(--jini-chart-2, var(--jini-chart-default-2))", "var(--jini-chart-3, var(--jini-chart-default-3))", "var(--jini-chart-4, var(--jini-chart-default-4))", "var(--jini-chart-5, var(--jini-chart-default-5))", "var(--jini-chart-6, var(--jini-chart-default-6))"];
-/** The single-series color (bar fill, line stroke). */
-export declare const CHART_PRIMARY_COLOR: "var(--jini-chart-1, var(--jini-chart-default-1))";
-/** Grid lines and axis lines: recessive. */
-export declare const CHART_GRID_STROKE = "var(--jini-chart-grid, var(--jini-border))";
-/** Axis tick label props: muted ink, never the series color. */
-export declare const CHART_AXIS_TICK: {
-    readonly fill: "var(--jini-chart-axis, var(--jini-muted))";
-    readonly fontSize: 12;
-};
-/** Shared axis chrome; category visibility and numeric formatting remain separate concerns. */
-export declare const CHART_AXIS_PROPS: {
-    readonly tick: {
-        readonly fill: "var(--jini-chart-axis, var(--jini-muted))";
-        readonly fontSize: 12;
-    };
-    readonly tickLine: false;
-    readonly axisLine: false;
-    readonly tickMargin: 10;
-};
-/** Hover points use the same series ink, with a surface halo in either color scheme. */
-export declare const CHART_ACTIVE_DOT: {
-    readonly r: 5;
-    readonly stroke: "var(--jini-chart-surface, var(--jini-bg))";
-    readonly strokeWidth: 2;
-};
-/** The hover band behind a hovered bar (recharts' default is an opaque grey block). */
-export declare const CHART_CURSOR: {
-    readonly fill: "var(--jini-chart-cursor, var(--jini-accent-soft))";
-};
-//# sourceMappingURL=chart-tokens.d.ts.map

package/dist/features/interactive-ui/providers/recharts/chart-tokens.js

@@ -1,39 +0,0 @@
-/**
- * @module chart-tokens
- *
- * The CSS variables every recharts provider paints with — the host's theme owns the colors.
- *
- * Why `--jini-chart-*` with fallbacks rather than bare `--jini-primary`: a host that styles its own
- * chrome and never maps Jini's base tokens (an adopting admin shell) got Jini's near-black default bars, in
- * dark mode too ("the color is ugly", demo V3, 2026-10-05). A host sets `--jini-chart-1`..`-6`,
- * `--jini-chart-grid`, `--jini-chart-axis`, `--jini-chart-cursor`, `--jini-chart-surface` and
- * `--jini-chart-text` in its own CSS; a host that sets none keeps the base-token look for the
- * neutral tokens.
- *
- * Series colors fall back to Jini's default palette (`--jini-chart-default-1`..`-6`, warm orange
- * first, light + dark, in `styles/variables.css`), not to `--jini-primary` and the status tokens:
- * "Claude orange should be the default color" (owner, 2026-10-05). The values live in CSS, never
- * here, so a host's theme stays the single owner of color.
- */
-/** Categorical series colors in fixed order; larger datasets repeat the palette with named legends. */
-export const CHART_SERIES_COLORS = [
-    'var(--jini-chart-1, var(--jini-chart-default-1))',
-    'var(--jini-chart-2, var(--jini-chart-default-2))',
-    'var(--jini-chart-3, var(--jini-chart-default-3))',
-    'var(--jini-chart-4, var(--jini-chart-default-4))',
-    'var(--jini-chart-5, var(--jini-chart-default-5))',
-    'var(--jini-chart-6, var(--jini-chart-default-6))',
-];
-/** The single-series color (bar fill, line stroke). */
-export const CHART_PRIMARY_COLOR = CHART_SERIES_COLORS[0];
-/** Grid lines and axis lines: recessive. */
-export const CHART_GRID_STROKE = 'var(--jini-chart-grid, var(--jini-border))';
-/** Axis tick label props: muted ink, never the series color. */
-export const CHART_AXIS_TICK = { fill: 'var(--jini-chart-axis, var(--jini-muted))', fontSize: 12 };
-/** Shared axis chrome; category visibility and numeric formatting remain separate concerns. */
-export const CHART_AXIS_PROPS = { tick: CHART_AXIS_TICK, tickLine: false, axisLine: false, tickMargin: 10 };
-/** Hover points use the same series ink, with a surface halo in either color scheme. */
-export const CHART_ACTIVE_DOT = { r: 5, stroke: 'var(--jini-chart-surface, var(--jini-bg))', strokeWidth: 2 };
-/** The hover band behind a hovered bar (recharts' default is an opaque grey block). */
-export const CHART_CURSOR = { fill: 'var(--jini-chart-cursor, var(--jini-accent-soft))' };
-//# sourceMappingURL=chart-tokens.js.map

package/dist/features/interactive-ui/providers/recharts/chart.d.ts

@@ -1,31 +0,0 @@
-import { type ReactElement, type ReactNode } from 'react';
-import { type ChartConfig } from './chart-config.js';
-interface ChartContainerProps {
-    readonly config: ChartConfig;
-    readonly title: string;
-    readonly description: string;
-    readonly children: ReactElement;
-}
-/** Shared, measurable chart frame with an accessible caption and a wrapping legend. */
-export declare function ChartContainer({ config, title, description, children }: ChartContainerProps): ReactElement;
-interface ChartTooltipEntry {
-    readonly dataKey?: unknown;
-    readonly name?: string | number;
-    readonly value?: unknown;
-    readonly color?: string;
-    readonly type?: string;
-    readonly payload?: {
-        readonly _jiniChartKey?: string;
-    };
-}
-interface ChartTooltipContentProps {
-    readonly active?: boolean;
-    readonly label?: ReactNode;
-    readonly payload?: readonly ChartTooltipEntry[];
-}
-/** Shadcn-style tooltip card; series config owns both labels and swatch colors. */
-export declare function ChartTooltipContent({ active, label, payload }: ChartTooltipContentProps): ReactElement | null;
-/** Compact named legend; pie values remain readable without hover or outside labels. */
-export declare function ChartLegendContent(): ReactElement | null;
-export {};
-//# sourceMappingURL=chart.d.ts.map