@jini-ai/ui 0.6.15-rc.2 → 0.6.15

package/dist/features/version-manager/rules.js

@@ -89,11 +89,9 @@ export function filterVersionsBySearch(versions, search, describe) {
  *  current, no restoring mid-fetch, no restoring stale/mismatched content). */
 export function isRestoreDisabled(input) {
     const { selectedVersion, restoring, loadingContent, selectedContentMatchesVersion } = input;
-    return (!selectedVersion ||
-        selectedVersion.current ||
-        restoring ||
-        loadingContent ||
-        !selectedContentMatchesVersion);
+    if (!selectedVersion || selectedVersion.current)
+        return true;
+    return restoring || loadingContent || !selectedContentMatchesVersion;
 }
 /** Whether the currently-loaded preview content actually corresponds to the
  *  currently-selected version (guards against acting on stale content

package/dist/features/viewer-shell/react/components/CommentSidePanel.js

@@ -113,7 +113,8 @@ function CommentSideSelectBar({ selectedCount, sending, sendDisabled, queueOnSen
     const t = useT();
     if (selectedCount === 0)
         return null;
-    return (_jsxs("div", { className: "comment-side-selectbar", "data-testid": "comment-side-selectbar", children: [_jsx("span", { className: "comment-side-selectcount", children: t('{n} selected', { n: selectedCount }) }), _jsx("button", { type: "button", className: "comment-side-clear", onClick: onClearSelection, children: t('Clear') }), _jsx("button", { type: "button", className: "comment-side-send", "data-testid": "comment-side-send-claude", disabled: sending || sendDisabled, onClick: () => void onSendSelected(), children: sending ? t('Sending…') : queueOnSend ? t('Queue') : t('Send to chat') })] }));
+    const idleSendLabel = queueOnSend ? t('Queue') : t('Send to chat');
+    return (_jsxs("div", { className: "comment-side-selectbar", "data-testid": "comment-side-selectbar", children: [_jsx("span", { className: "comment-side-selectcount", children: t('{n} selected', { n: selectedCount }) }), _jsx("button", { type: "button", className: "comment-side-clear", onClick: onClearSelection, children: t('Clear') }), _jsx("button", { type: "button", className: "comment-side-send", "data-testid": "comment-side-send-claude", disabled: sending || sendDisabled, onClick: () => void onSendSelected(), children: sending ? t('Sending…') : idleSendLabel })] }));
 }
 function CommentSideCreateForm({ renderCreateForm, draft, onDraftChange, onCreateComment, sending, sendDisabled, }) {
     const t = useT();

package/dist/features/viewer-shell/react/components/SegmentedToggle.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RemixIcon } from '../../../../react/components/RemixIcon.js';
+import { withClassName } from '../../../../utils/class-names.js';
 /**
  * A small, always-visible group of toggle buttons, one active at a time.
  * This is the shared primitive behind two call sites that turned out to be
@@ -14,7 +15,7 @@ import { RemixIcon } from '../../../../react/components/RemixIcon.js';
  * primitives for a minor ARIA-pattern difference.
  */
 export function SegmentedToggle({ options, value, onChange, ariaLabel, className, }) {
-    return (_jsx("div", { className: `viewer-segmented-toggle${className ? ` ${className}` : ''}`, role: "group", "aria-label": ariaLabel, children: options.map((option) => {
+    return (_jsx("div", { className: withClassName('viewer-segmented-toggle', className), role: "group", "aria-label": ariaLabel, children: options.map((option) => {
             const selected = option.value === value;
             const label = option.title ?? option.label;
             return (_jsxs("button", { type: "button", className: `viewer-segmented-toggle-button${selected ? ' active' : ''}`, "aria-pressed": selected, "aria-label": label, title: label, onClick: () => onChange(option.value), children: [option.icon ? _jsx(RemixIcon, { name: option.icon, size: 14 }) : null, _jsx("span", { children: option.label })] }, option.value));

package/dist/features/viewer-shell/react/components/ViewerShell.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { withClassName } from '../../../../utils/class-names.js';
 /**
  * The "viewer-toolbar + viewer-body" chrome independently repeated across
  * 8 media-viewer components in the source file (`BinaryViewer`,
@@ -9,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * layout wrapper.
  */
 export function ViewerShell({ kindClassName, toolbarLeft, toolbarActions, bodyClassName, children }) {
-    return (_jsxs("div", { className: `viewer${kindClassName ? ` ${kindClassName}` : ''}`, children: [_jsxs("div", { className: "viewer-toolbar", children: [_jsx("div", { className: "viewer-toolbar-left", children: toolbarLeft }), toolbarActions ? _jsx("div", { className: "viewer-toolbar-actions", children: toolbarActions }) : null] }), _jsx("div", { className: `viewer-body${bodyClassName ? ` ${bodyClassName}` : ''}`, children: children })] }));
+    return (_jsxs("div", { className: withClassName('viewer', kindClassName), children: [_jsxs("div", { className: "viewer-toolbar", children: [_jsx("div", { className: "viewer-toolbar-left", children: toolbarLeft }), toolbarActions ? _jsx("div", { className: "viewer-toolbar-actions", children: toolbarActions }) : null] }), _jsx("div", { className: withClassName('viewer-body', bodyClassName), children: children })] }));
 }
 /** Trivial "nothing to show" placeholder shared by every viewer body. */
 export function ViewerEmptyState({ children }) {

package/dist/features/viewer-shell/rules.js

@@ -97,13 +97,14 @@ export function hasPrecisionSensitiveJsonNumberText(text) {
         }
         numberTokenPattern.lastIndex = i;
         const match = numberTokenPattern.exec(text);
-        if (!match) {
+        if (match) {
+            if (isPrecisionSensitiveNumberLiteral(match[0]))
+                return true;
+            i = numberTokenPattern.lastIndex;
+        }
+        else {
             i += 1;
-            continue;
         }
-        if (isPrecisionSensitiveNumberLiteral(match[0]))
-            return true;
-        i = numberTokenPattern.lastIndex;
     }
     return false;
 }
@@ -111,10 +112,10 @@ export function hasPrecisionSensitiveJsonNumberText(text) {
  *  `start` (honouring `\` escapes), or `text.length` when it is unterminated. */
 function indexAfterJsonString(text, start) {
     for (let i = start; i < text.length; i += 1) {
+        if (text[i] === '"')
+            return i + 1;
         if (text[i] === '\\')
             i += 1;
-        else if (text[i] === '"')
-            return i + 1;
     }
     return text.length;
 }

package/dist/react/components/BrandLogo.js

@@ -18,12 +18,20 @@ export function brandMonogram(name) {
 }
 /** The stage to start at, given which sources are available. */
 export function firstLogoStage(opts) {
-    return opts.canUseBrandStage ? 'brand' : opts.logoSrc ? 'custom' : opts.host ? 'favicon' : 'letter';
+    if (opts.canUseBrandStage)
+        return 'brand';
+    return fallbackLogoStage(opts);
+}
+/** The first non-brand stage whose source is available. */
+function fallbackLogoStage(opts) {
+    if (opts.logoSrc)
+        return 'custom';
+    return opts.host ? 'favicon' : 'letter';
 }
 /** The next stage to try after the current one fails to load. */
 export function advanceLogoStage(stage, opts) {
     if (stage === 'brand')
-        return opts.logoSrc ? 'custom' : opts.host ? 'favicon' : 'letter';
+        return fallbackLogoStage(opts);
     if (stage === 'custom')
         return 'favicon';
     return 'letter';

package/dist/react/components/CustomSelect.js

@@ -233,7 +233,7 @@ export function useCustomSelectOriginTheme({ buttonRef, open, portal }, _optiona
     const [attributes, setAttributes] = useState({});
     useLayoutEffect(() => {
         if (!open || !portal)
-            return;
+            return undefined;
         const update = () => {
             const next = resolveCustomSelectOriginTheme({ trigger: buttonRef.current });
             setAttributes((current) => current['data-admin-theme'] === next['data-admin-theme']

package/dist/react/components/EditorIcon.js

@@ -36,21 +36,24 @@ const xcodePath = 'M19.06 5.3327c.4517-.1936.7744-.2581 1.097-.1936.5163.1291.77
 const webstormPath = 'M0 0v24h24V0H0zm17.889 2.889c1.444 0 2.667.444 3.667 1.278l-1.111 1.667c-.889-.611-1.722-1-2.556-1s-1.278.389-1.278.889v.056c0 .667.444.889 2.111 1.333 2 .556 3.111 1.278 3.111 3v.056c0 2-1.5 3.111-3.611 3.111-1.5-.056-3-.611-4.167-1.667l1.278-1.556c.889.722 1.833 1.222 2.944 1.222.889 0 1.389-.333 1.389-.944v-.056c0-.556-.333-.833-2-1.278-2-.5-3.222-1.056-3.222-3.056v-.056c0-1.833 1.444-3 3.444-3zm-16.111.222h2.278l1.5 5.778 1.722-5.778h1.667l1.667 5.778 1.5-5.778h2.333l-2.833 9.944H9.723L8.112 7.277l-1.667 5.778H4.612L1.779 3.111zm.5 16.389h9V21h-9v-1.5z';
 const ideaPath = 'M0 0v24h24V0zm3.723 3.111h5v1.834h-1.39v6.277h1.39v1.834h-5v-1.834h1.444V4.945H3.723zm11.055 0H17v6.5c0 .612-.055 1.111-.222 1.556-.167.444-.39.777-.723 1.11-.277.279-.666.557-1.11.668a3.933 3.933 0 0 1-1.445.278c-.778 0-1.444-.167-1.944-.445a4.81 4.81 0 0 1-1.279-1.056l1.39-1.555c.277.334.555.555.833.722.277.167.611.278.945.278.389 0 .721-.111 1-.389.221-.278.333-.667.333-1.278zM2.222 19.5h9V21h-9z';
 const warpPath = 'M12.035 2.723h9.253A2.712 2.712 0 0 1 24 5.435v10.529a2.712 2.712 0 0 1-2.712 2.713H8.047Zm-1.681 2.6L6.766 19.677h5.598l-.399 1.6H2.712A2.712 2.712 0 0 1 0 18.565V8.036a2.712 2.712 0 0 1 2.712-2.712Z';
+const PRIMARY = 'var(--jini-primary)';
+const BG = 'var(--jini-bg)';
+const TEXT = 'var(--jini-text)';
 const EDITORS = {
-    vscode: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: vscodeLogo },
-    cursor: { bg: 'var(--jini-text)', fg: 'var(--jini-bg)', glyph: simplePath(cursorPath) },
-    windsurf: { bg: 'var(--jini-bg)', fg: 'var(--jini-text)', glyph: simplePath(windsurfPath) },
-    zed: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: simplePath(zedPath) },
-    qoder: { bg: 'var(--jini-warning)', fg: 'var(--jini-text)', glyph: qoderLogo },
-    antigravity: { bg: 'var(--jini-bg)', fg: 'var(--jini-text)', glyph: antigravityLogo },
-    webstorm: { bg: 'var(--jini-text)', fg: 'var(--jini-bg)', glyph: simplePath(webstormPath) },
-    idea: { bg: 'var(--jini-text)', fg: 'var(--jini-bg)', glyph: simplePath(ideaPath) },
-    xcode: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: simplePath(xcodePath) },
-    finder: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: finderLogo },
-    explorer: { bg: 'var(--jini-warning)', fg: 'var(--jini-text)', glyph: folderLogo },
-    'file-manager': { bg: 'var(--jini-muted)', fg: 'var(--jini-bg)', glyph: folderLogo },
-    terminal: { bg: 'var(--jini-text)', fg: 'var(--jini-success)', glyph: terminalLogo },
-    warp: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: simplePath(warpPath) },
+    vscode: { bg: PRIMARY, fg: BG, glyph: vscodeLogo },
+    cursor: { bg: TEXT, fg: BG, glyph: simplePath(cursorPath) },
+    windsurf: { bg: BG, fg: TEXT, glyph: simplePath(windsurfPath) },
+    zed: { bg: PRIMARY, fg: BG, glyph: simplePath(zedPath) },
+    qoder: { bg: 'var(--jini-warning)', fg: TEXT, glyph: qoderLogo },
+    antigravity: { bg: BG, fg: TEXT, glyph: antigravityLogo },
+    webstorm: { bg: TEXT, fg: BG, glyph: simplePath(webstormPath) },
+    idea: { bg: TEXT, fg: BG, glyph: simplePath(ideaPath) },
+    xcode: { bg: PRIMARY, fg: BG, glyph: simplePath(xcodePath) },
+    finder: { bg: PRIMARY, fg: BG, glyph: finderLogo },
+    explorer: { bg: 'var(--jini-warning)', fg: TEXT, glyph: folderLogo },
+    'file-manager': { bg: 'var(--jini-muted)', fg: BG, glyph: folderLogo },
+    terminal: { bg: TEXT, fg: 'var(--jini-success)', glyph: terminalLogo },
+    warp: { bg: PRIMARY, fg: BG, glyph: simplePath(warpPath) },
 };
 /**
  * Renders an editor/target glyph by string key using the host's theme, with a

package/dist/react/components/Loading.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from './Icon.js';
+import { withClassName } from '../../utils/class-names.js';
 export function Spinner({ size = 14, label }) {
     return (_jsxs("span", { className: "loading-spinner", role: "status", "aria-live": "polite", children: [_jsx(Icon, { name: "spinner", size: size }), label ? _jsx("span", { className: "loading-spinner-label", children: label }) : null] }));
 }
 export function Skeleton({ width, height = 14, radius = 6, className }) {
-    return (_jsx("span", { className: `skeleton-block${className ? ` ${className}` : ''}`, style: { width, height, borderRadius: radius }, "aria-hidden": true }));
+    return (_jsx("span", { className: withClassName('skeleton-block', className), style: { width, height, borderRadius: radius }, "aria-hidden": true }));
 }
 /**
  * Card-shaped skeleton for grid layouts (thumbnail area over a row of meta

package/dist/react/components/OnboardingChipField.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A single-select value as a selection list; an empty string selects nothing. */
+function singleSelection(value) {
+    return value ? [value] : [];
+}
 export function OnboardingChipField(props) {
     const { label, options, className } = props;
-    const selected = props.multiple ? props.value : props.value ? [props.value] : [];
+    const selected = props.multiple ? props.value : singleSelection(props.value);
     return (_jsxs("div", { className: ['onboarding-chip-field', className].filter(Boolean).join(' '), children: [_jsx("span", { className: "onboarding-chip-field__label", children: label }), _jsx("div", { className: "onboarding-chip-field__chips", children: options.map((option) => {
                     const active = selected.includes(option.value);
                     return (_jsx("button", { type: "button", className: `onboarding-chip${active ? ' is-selected' : ''}`, "aria-pressed": active, onClick: () => {

package/dist/react/components/OnboardingDropdown.js

@@ -51,7 +51,9 @@ export const ONBOARDING_MENU_FALLBACK_VIEWPORT = 720;
  * string (or otherwise falsy value) becomes an empty selection.
  */
 export function resolveOnboardingSelectedValues(value) {
-    return Array.isArray(value) ? value : value ? [value] : [];
+    if (Array.isArray(value))
+        return value;
+    return value ? [value] : [];
 }
 /**
  * Compute the trigger's visible label. In multiple mode it joins every
@@ -121,7 +123,7 @@ export function useOnboardingDropdownPlacement(rootRef, open, placement, optionC
     });
     useLayoutEffect(() => {
         if (!open)
-            return;
+            return undefined;
         function measureMenu() {
             const node = rootRef.current;
             if (!node)
@@ -153,11 +155,11 @@ export function useOnboardingDropdown(props) {
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState('');
     const rootRef = useRef(null);
-    const dropdownIdRef = useRef(`onboarding-dropdown-${Math.random().toString(36).slice(2)}`);
+    const dropdownIdRef = useRef(`onboarding-dropdown-${globalThis.crypto.getRandomValues(new Uint32Array(1))[0].toString(36)}`);
     const { placement: resolvedPlacement, maxHeight: menuMaxHeight } = useOnboardingDropdownPlacement(rootRef, open, placement, options.length);
     useEffect(() => {
         if (!open)
-            return;
+            return undefined;
         function handlePointerDown(event) {
             if (!rootRef.current?.contains(event.target)) {
                 setOpen(false);

package/dist/react/components/PaletteTweaks.js

@@ -10,12 +10,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // hook-testable in isolation.
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Icon } from './Icon.js';
+const PRIMARY = 'var(--jini-primary)';
 export const PALETTE_TWEAKS_SWATCHES = [
-    { id: 'coral', label: 'Coral - default', stripe: ['var(--jini-primary)', 'var(--jini-primary)', 'var(--jini-primary)', 'var(--jini-primary)'] },
-    { id: 'electric', label: 'Electric', stripe: ['var(--jini-primary)', 'var(--jini-primary)', 'var(--jini-primary)', 'var(--jini-primary)'] },
-    { id: 'acid-forest', label: 'Acid forest', stripe: ['var(--jini-primary)', 'var(--jini-primary)', 'var(--jini-primary)', 'var(--jini-primary)'] },
-    { id: 'risograph', label: 'Risograph', stripe: ['var(--jini-primary)', 'var(--jini-primary)', 'var(--jini-primary)', 'var(--jini-primary)'] },
-    { id: 'mono-noir', label: 'Mono noir', stripe: ['var(--jini-text)', 'var(--jini-primary)', 'var(--jini-primary)', 'var(--jini-primary)'] },
+    { id: 'coral', label: 'Coral - default', stripe: [PRIMARY, PRIMARY, PRIMARY, PRIMARY] },
+    { id: 'electric', label: 'Electric', stripe: [PRIMARY, PRIMARY, PRIMARY, PRIMARY] },
+    { id: 'acid-forest', label: 'Acid forest', stripe: [PRIMARY, PRIMARY, PRIMARY, PRIMARY] },
+    { id: 'risograph', label: 'Risograph', stripe: [PRIMARY, PRIMARY, PRIMARY, PRIMARY] },
+    { id: 'mono-noir', label: 'Mono noir', stripe: ['var(--jini-text)', PRIMARY, PRIMARY, PRIMARY] },
 ];
 // --- Pure derivations (module-level, directly unit-testable) --------------
 /**
@@ -71,7 +72,7 @@ export function usePaletteDismiss(options) {
     const rootRef = useRef(null);
     useEffect(() => {
         if (!open)
-            return;
+            return undefined;
         function onDoc(ev) {
             if (!rootRef.current)
                 return;

package/dist/react/components/PillButton.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { withClassName } from '../../utils/class-names.js';
 /**
  * Generic labeled trigger pill: icon + label (+ optional trailing icon),
  * togglable `active` state, and an optional anchored children slot for a
@@ -9,6 +10,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * (recon r6 §1.19) — generic popover-trigger chrome, no product types.
  */
 export function PillButton({ icon, label, active = false, 'aria-label': ariaLabel, trailingIcon, onClick, disabled = false, className, children, }) {
-    return (_jsxs("div", { className: `jini-pill-wrap${className ? ` ${className}` : ''}`, children: [_jsxs("button", { type: "button", className: `jini-pill${active ? ' is-active' : ''}`, "aria-label": ariaLabel, "aria-expanded": children ? active : undefined, onClick: onClick, disabled: disabled, children: [icon, _jsx("span", { className: "jini-pill__label", children: label }), trailingIcon] }), children] }));
+    return (_jsxs("div", { className: withClassName('jini-pill-wrap', className), children: [_jsxs("button", { type: "button", className: `jini-pill${active ? ' is-active' : ''}`, "aria-label": ariaLabel, "aria-expanded": children ? active : undefined, onClick: onClick, disabled: disabled, children: [icon, _jsx("span", { className: "jini-pill__label", children: label }), trailingIcon] }), children] }));
 }
 //# sourceMappingURL=PillButton.js.map

package/dist/react/components/PopoverMenu.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { withClassName } from '../../utils/class-names.js';
 /**
  * Generic popover panel shell: a plain positioned wrapper around a list of
  * `PopoverItem`s (or any other content). No open/closed state of its own —
@@ -8,6 +9,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * (recon r6 §1.19) — generic, no product types.
  */
 export function PopoverMenu({ children, className }) {
-    return _jsx("div", { className: `jini-popover${className ? ` ${className}` : ''}`, children: children });
+    return _jsx("div", { className: withClassName('jini-popover', className), children: children });
 }
 //# sourceMappingURL=PopoverMenu.js.map

package/dist/react/components/RemixIcon.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { ensureRemixIconStylesheet } from './RemixIcon.stylesheet.js';
+import { withClassName } from '../../utils/class-names.js';
 export { installRemixIconStylesheet, REMIXICON_STYLESHEET_MARKER } from './RemixIcon.stylesheet.js';
 /**
  * Thin wrapper around a RemixIcon webfont glyph (`ri-<name>`). Loads this package's own default
@@ -12,7 +13,7 @@ export function RemixIcon({ name, size = 14, className, style }) {
     useEffect(() => {
         ensureRemixIconStylesheet({});
     }, []);
-    return (_jsx("i", { className: `ri-${name}${className ? ` ${className}` : ''}`, "aria-hidden": "true", style: {
+    return (_jsx("i", { className: withClassName(`ri-${name}`, className), "aria-hidden": "true", style: {
             fontSize: size,
             lineHeight: 1,
             width: size,

package/dist/react/components/SecretInput.hooks.d.ts

@@ -1,26 +1,3 @@
-export interface SecretRevealRequired {
-    /** The input's current value. A transition to `''` re-hides (the usual sign a save succeeded). */
-    readonly value: unknown;
-    /** The toggle's full accessible names, translated ("Show API key" / "Hide API key"). */
-    readonly labels: {
-        readonly show: string;
-        readonly hide: string;
-    };
-}
-export interface SecretRevealOptional {
-    /** Controlled mode: the host owns the shown/hidden state (e.g. to reset it per provider). */
-    readonly revealed?: boolean;
-    readonly onRevealedChange?: (revealed: boolean) => void;
-}
-/**
- * The show/hide state behind `SecretInput`'s eye toggle. Starts hidden. Uncontrolled, it re-hides on
- * the value's transition to empty only — an empty field may still be revealed before pasting.
- * @complexity O(1).
- */
-export declare function useSecretReveal(required: SecretRevealRequired, optional?: SecretRevealOptional): {
-    readonly revealed: boolean;
-    readonly inputType: "text" | "password";
-    readonly toggleLabel: string;
-    readonly toggle: () => void;
-};
+/** Compatibility entry; ui-kit owns the shared secret reveal lifecycle. */
+export { useSecretReveal, type SecretRevealRequired, type SecretRevealOptional } from "@jini-ai/ui-kit/react";
 //# sourceMappingURL=SecretInput.hooks.d.ts.map

package/dist/react/components/SecretInput.hooks.js

@@ -1,25 +1,3 @@
-import { useState } from 'react';
-/**
- * The show/hide state behind `SecretInput`'s eye toggle. Starts hidden. Uncontrolled, it re-hides on
- * the value's transition to empty only — an empty field may still be revealed before pasting.
- * @complexity O(1).
- */
-export function useSecretReveal(required, optional = {}) {
-    const [ownRevealed, setOwnRevealed] = useState(false);
-    const [lastValue, setLastValue] = useState(required.value);
-    if (required.value !== lastValue) {
-        setLastValue(required.value);
-        if (required.value === '')
-            setOwnRevealed(false);
-    }
-    const revealed = optional.revealed ?? ownRevealed;
-    const toggleLabel = revealed ? required.labels.hide : required.labels.show;
-    const toggle = () => {
-        if (optional.onRevealedChange)
-            optional.onRevealedChange(!revealed);
-        else
-            setOwnRevealed(!revealed);
-    };
-    return { revealed, inputType: revealed ? 'text' : 'password', toggleLabel, toggle };
-}
+/** Compatibility entry; ui-kit owns the shared secret reveal lifecycle. */
+export { useSecretReveal } from "@jini-ai/ui-kit/react";
 //# sourceMappingURL=SecretInput.hooks.js.map

package/dist/react/components/SecretInput.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { SecretInput as KitSecretInput } from '@jini-ai/ui-kit/react';
 import { useT } from '../../features/i18n/index.js';
 import { Icon } from './Icon.js';
 import { useSecretReveal } from './SecretInput.hooks.js';
@@ -13,10 +14,10 @@ function useSecretToggle({ label, toggleLabels, toggleAttrs, revealed, onReveale
     return { reveal, button };
 }
 export const SecretInput = forwardRef(function SecretInput(props, ref) {
-    // The toggle props are pulled off so they never reach the DOM `<input>`.
-    const { label, toggleLabels, toggleAttrs, revealed, onRevealedChange, ...inputProps } = props;
-    const { reveal, button } = useSecretToggle(props, { value: inputProps.value, disabled: inputProps.disabled });
-    return (_jsxs("span", { className: "jini-secret", children: [_jsx("input", { ...inputProps, spellCheck: false, ref: ref, type: reveal.inputType }), button] }));
+    const t = useT();
+    return _jsx(KitSecretInput, { ...props, ref: ref, toggleLabels: props.toggleLabels ?? {
+            show: `${t('Show')} ${props.label}`, hide: `${t('Hide')} ${props.label}`,
+        } });
 });
 export const SecretTextarea = forwardRef(function SecretTextarea(props, ref) {
     const { label, toggleLabels, toggleAttrs, revealed, onRevealedChange, style, maskedValue, ...textareaProps } = props;

package/dist/react/components/Toast.js

@@ -15,6 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // hook-testable in isolation.
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { Icon } from './Icon.js';
+import { withClassName } from '../../utils/class-names.js';
 export const TOAST_DEFAULT_TTL = 4000;
 // Exit fade duration — kept in sync with the `.jini-toast.leaving` CSS
 // animation the host supplies. The fade plays inside the TTL window (it
@@ -65,7 +66,8 @@ export function toastFadeDelay(effectiveTtl) {
 /** The root `className` string, composed from tone/placement/extra/leaving. */
 export function toastClassName(options) {
     const { tone, placement, className, leaving } = options;
-    return `jini-toast tone-${tone} placement-${placement}${className ? ` ${className}` : ''}${leaving ? ' leaving' : ''}`;
+    const base = withClassName(`jini-toast tone-${tone} placement-${placement}`, className);
+    return leaving ? `${base} leaving` : base;
 }
 // --- Hooks (co-located, exported) -----------------------------------------
 /**
@@ -105,7 +107,7 @@ export function useToastAutoDismiss(options) {
         // prior leaving state before re-arming the timers.
         setLeaving(false);
         if (!toastShouldAutoDismiss(hasDismiss, effectiveTtl))
-            return;
+            return undefined;
         const fadeId = window.setTimeout(() => setLeaving(true), toastFadeDelay(effectiveTtl));
         const dismissId = window.setTimeout(fireDismiss, effectiveTtl);
         return () => {

package/dist/react/components/TooltipLayer.js

@@ -46,6 +46,9 @@ export function positionTooltip(target, tooltip, placement) {
         left = rect.right + TOOLTIP_GAP;
         top = rect.top + rect.height / 2 - tip.height / 2;
     }
+    else {
+        // 'top': the centred-above position computed above already applies.
+    }
     return {
         x: Math.round(clamp(left, TOOLTIP_MARGIN, maxLeft)),
         y: Math.round(clamp(top, TOOLTIP_MARGIN, maxTop)),
@@ -180,7 +183,7 @@ export function useTooltipLayer() {
     }, [restoreNativeTitle]);
     useEffect(() => {
         if (!state?.target || typeof MutationObserver === 'undefined')
-            return;
+            return undefined;
         const target = state.target;
         const observer = new MutationObserver(() => {
             if (!isTooltipTarget(target)) {

package/dist/react/components/WorkingDirPicker.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useRef, useState, } from 'react';
 import { Icon } from './Icon.js';
+import { withClassName } from '../../utils/class-names.js';
 export const DEFAULT_WORKING_DIR_LABELS = {
     missing: 'Directory no longer exists',
     hint: 'Select a working directory',
@@ -45,7 +46,7 @@ export function useDismissablePanel(onOpen) {
     }, [open, onOpen]);
     useEffect(() => {
         if (!open)
-            return;
+            return undefined;
         function onPointer(event) {
             if (wrapRef.current?.contains(event.target))
                 return;
@@ -175,10 +176,10 @@ function useWorkingDirFocusHandoff({ open, triggerRef, panelRef }) {
         if (open) {
             wasOpenRef.current = true;
             panelRef.current?.querySelector(MENU_ITEM_SELECTOR)?.focus();
-            return;
+            return undefined;
         }
         if (!wasOpenRef.current)
-            return;
+            return undefined;
         wasOpenRef.current = false;
         const timeout = window.setTimeout(() => triggerRef.current?.focus(), 0);
         return () => window.clearTimeout(timeout);
@@ -212,6 +213,6 @@ export function WorkingDirPicker({ workingDir, recentDirs, onPickDirectory, onSe
             return;
         handleRecentFlyoutKey({ event, showRecent, hideRecent });
     }, [hideRecent, showRecent]);
-    return (_jsxs("div", { ref: wrapRef, className: `jini-working-dir-picker${className ? ` ${className}` : ''}`, "data-testid": "working-dir-picker", children: [_jsx(WorkingDirTrigger, { triggerRef: triggerRef, workingDir: workingDir, invalid: invalid, open: open, panelId: panelId, t: t, toggle: toggle }), open ? (_jsx(WorkingDirPanel, { panelRef: panelRef, panelId: panelId, placement: placement, workingDir: workingDir, recentDirs: recentDirs, canClear: Boolean(workingDir && onClear), t: t, picker: picker, onKeyDown: handlePanelKeyDown })) : null] }));
+    return (_jsxs("div", { ref: wrapRef, className: withClassName('jini-working-dir-picker', className), "data-testid": "working-dir-picker", children: [_jsx(WorkingDirTrigger, { triggerRef: triggerRef, workingDir: workingDir, invalid: invalid, open: open, panelId: panelId, t: t, toggle: toggle }), open ? (_jsx(WorkingDirPanel, { panelRef: panelRef, panelId: panelId, placement: placement, workingDir: workingDir, recentDirs: recentDirs, canClear: Boolean(workingDir && onClear), t: t, picker: picker, onKeyDown: handlePanelKeyDown })) : null] }));
 }
 //# sourceMappingURL=WorkingDirPicker.js.map

package/dist/react/components/remixicon-font-recovery.js

@@ -85,7 +85,15 @@ function isRemixIconFaceRule(rule) {
 function findRemixIconFontSource({ rules }) {
     const face = Array.from(rules).find(isRemixIconFaceRule);
     // This package owns one url(...) WOFF2 source, not a general CSS font-source parser.
-    return face?.style.getPropertyValue('src').match(/url\(\s*["']?([^"')]+)["']?\s*\)/)?.[1];
+    const source = face?.style.getPropertyValue('src');
+    if (!source)
+        return undefined;
+    const open = source.indexOf('url(');
+    const close = source.indexOf(')', open + 4);
+    if (open < 0 || close < 0)
+        return undefined;
+    // URL construction below already discards surrounding whitespace. Keep quotes outside the URL.
+    return /^["']?([^"']+)["']?$/.exec(source.slice(open + 4, close).trim())?.[1];
 }
 /** The source URL tagged with the attempt number; only http(s) URLs accept a query parameter. */
 function retryFontUrl({ url, attempt }) {

package/dist/react/components/select-popover.js

@@ -103,7 +103,7 @@ export function useSelectPopoverPosition(required, optional = {}) {
     // biome-ignore lint/correctness/useExhaustiveDependencies: scroll/resize listener wiring — see comment above; onOutOfView is read through latest; only lifecycle/ref changes re-arm it.
     useEffect(() => {
         if (!open || !portal)
-            return;
+            return undefined;
         function reposition() {
             const trigger = triggerRef.current;
             if (!trigger)
@@ -146,7 +146,7 @@ export function useSelectPopover(required, optional = {}) {
     }
     useEffect(() => {
         if (!open)
-            return;
+            return undefined;
         function onOutside(event) {
             if (isSelectEventInside({ target: event.target, trigger: triggerRef.current, panel: panelRef.current }))
                 return;

package/dist/react/hooks/useBrandFonts.js

@@ -33,7 +33,7 @@ export function useBrandFonts({ fonts }, options = {}) {
     }, [googleUrls, document]);
     useEffect(() => {
         if (!projectId || !resolveProjectAssetUrl)
-            return;
+            return undefined;
         let cancelled = false;
         let styleEl = null;
         void (async () => {

package/dist/react/hooks/useEdgeAutoScroll.js

@@ -52,7 +52,7 @@ export function useEdgeAutoScroll(contentKey) {
     useEffect(() => {
         const el = scrollRef.current;
         if (!el)
-            return;
+            return undefined;
         const updateEdges = () => {
             const maxScroll = el.scrollWidth - el.clientWidth;
             setEdges({

package/dist/react/hooks/useInView.js

@@ -10,21 +10,21 @@ export function useInView(options = {}) {
     useEffect(() => {
         const node = ref.current;
         if (!node)
-            return;
+            return undefined;
         if (typeof IntersectionObserver === 'undefined') {
             setInView(true);
-            return;
+            return undefined;
         }
         const observer = new IntersectionObserver((entries) => {
             for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    setInView(true);
-                    if (options.once !== false) {
-                        observer.disconnect();
-                    }
+                if (!entry.isIntersecting) {
+                    if (options.once === false)
+                        setInView(false);
+                    continue;
                 }
-                else if (options.once === false) {
-                    setInView(false);
+                setInView(true);
+                if (options.once !== false) {
+                    observer.disconnect();
                 }
             }
         }, {

package/dist/react/hooks/useResizableSplitPane.js

@@ -114,12 +114,9 @@ export function useResizableSplitPane(options = {}) {
             return undefined;
         const updateAllowedWidth = () => {
             const containerWidth = container.clientWidth;
-            const nextSecondaryMin = !Number.isFinite(containerWidth) || containerWidth <= 0
-                ? minSecondaryWidth
-                : containerWidth < minNormalContainerWidth
-                    ? 0
-                    : minSecondaryWidth;
-            const nextMax = !Number.isFinite(containerWidth) || containerWidth <= 0
+            const unmeasured = !Number.isFinite(containerWidth) || containerWidth <= 0;
+            const nextSecondaryMin = !unmeasured && containerWidth < minNormalContainerWidth ? 0 : minSecondaryWidth;
+            const nextMax = unmeasured
                 ? maxWidthOption
                 : Math.max(0, Math.min(maxWidthOption, Math.floor(containerWidth - handleWidth - nextSecondaryMin)));
             maxWidthRef.current = nextMax;
@@ -219,22 +216,17 @@ export function useResizableSplitPane(options = {}) {
         finishResize(false);
     }, [finishResize, renderPreferredWidth]);
     const onHandleKeyDown = useCallback((event) => {
-        let nextWidth = null;
         const container = containerRef.current;
         const isRtl = container ? window.getComputedStyle(container).direction === 'rtl' : false;
-        if (event.key === 'ArrowLeft') {
-            nextWidth = widthRef.current + (isRtl ? 1 : -1) * keyboardStep;
-        }
-        else if (event.key === 'ArrowRight') {
-            nextWidth = widthRef.current + (isRtl ? -1 : 1) * keyboardStep;
-        }
-        else if (event.key === 'Home') {
-            nextWidth = minWidth;
-        }
-        else if (event.key === 'End') {
-            nextWidth = maxWidthRef.current;
-        }
-        if (nextWidth === null)
+        // ArrowRight grows the pane in LTR and shrinks it in RTL; ArrowLeft is the mirror.
+        const rightStep = (isRtl ? -1 : 1) * keyboardStep;
+        const nextWidth = new Map([
+            ['ArrowLeft', widthRef.current - rightStep],
+            ['ArrowRight', widthRef.current + rightStep],
+            ['Home', minWidth],
+            ['End', maxWidthRef.current],
+        ]).get(event.key);
+        if (nextWidth === undefined)
             return;
         event.preventDefault();
         const next = applyWidth(nextWidth);