@jini-ai/ui 0.6.12 → 0.6.15-rc.1

package/dist/features/source-config-list/react/components/SourceConfigField.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { useT } from '../../../i18n/index.js';
+import { SecretInput, SecretTextarea } from '../../../../react/components/SecretInput.js';
+import { useSecretReveal as useSecretInputReveal } from '../../../../react/components/SecretInput.hooks.js';
 import { sourceConfigAgentProps } from '../../agent-handles.js';
 import { maskFieldValue } from '../../rules.js';
 /**
@@ -36,10 +38,10 @@ import { maskFieldValue } from '../../rules.js';
  */
 export function SourceConfigField({ spec, value, error, disabled = false, idPrefix = 'source-config-field', agentHandle, onChange }) {
     const t = useT();
-    const { revealed, toggleRevealed, isLockedSecret } = useSecretReveal({ kind: spec.kind, value });
     const inputId = `${idPrefix}-${spec.key}`;
     const errorId = error ? `${inputId}-error` : undefined;
     const fieldLabel = t(spec.label);
+    const { revealed, toggleRevealed, isLockedSecret } = useSecretReveal({ kind: spec.kind, value, label: fieldLabel });
     const shared = {
         disabled,
         'aria-invalid': Boolean(error) || undefined,
@@ -55,15 +57,16 @@ export function SourceConfigField({ spec, value, error, disabled = false, idPref
         action: 'reveal',
     });
     const reveal = { revealed, disabled, agentProps: revealAgentProps, onToggle: toggleRevealed };
-    return (_jsxs("label", { className: "source-config-field", htmlFor: inputId, children: [_jsxs("span", { className: "source-config-field-label", children: [fieldLabel, spec.required ? (_jsx("span", { className: "source-config-field-required", "aria-label": t('required'), children: "*" })) : null] }), _jsx(SourceConfigFieldControl, { spec: spec, value: value, inputId: inputId, shared: shared, reveal: reveal, isLockedSecret: isLockedSecret }), error ? (_jsx("span", { id: errorId, className: "source-config-field-error", role: "alert", children: error })) : null] }));
+    return (_jsxs("div", { className: "source-config-field", children: [_jsxs("label", { className: "source-config-field-label", htmlFor: inputId, children: [fieldLabel, spec.required ? (_jsx("span", { className: "source-config-field-required", "aria-label": t('required'), children: "*" })) : null] }), _jsx(SourceConfigFieldControl, { spec: spec, value: value, inputId: inputId, shared: shared, reveal: reveal, isLockedSecret: isLockedSecret }), error ? (_jsx("span", { id: errorId, className: "source-config-field-error", role: "alert", children: error })) : null] }));
 }
 /**
  * The `password`/`secret-textarea` show-hide state. The toggle is small local
  * disclosure state (per the vertical-slice guardrail allowing that in a leaf
  * component).
  */
-function useSecretReveal({ kind, value }) {
-    const [revealed, setRevealed] = useState(false);
+function useSecretReveal({ kind, value, label }, _options = {}) {
+    const t = useT();
+    const { revealed, toggle } = useSecretInputReveal({ value, labels: { show: `${t('Show')} ${label}`, hide: `${t('Hide')} ${label}` } });
     // Whether THIS mount ever had a pre-existing secret to protect, captured
     // once rather than recomputed from `value` on every render. A plain
     // `Boolean(value)` gate would look right at first glance but re-locks the
@@ -87,7 +90,6 @@ function useSecretReveal({ kind, value }) {
     // or from the user clearing an existing secret mid-edit to type a new one.
     useEffect(() => {
         if (!value) {
-            setRevealed(false);
             hadStoredSecretRef.current = false;
         }
     }, [value]);
@@ -95,8 +97,8 @@ function useSecretReveal({ kind, value }) {
     // secret still un-revealed. A field with nothing to protect — first-time
     // entry, or one already cleared out — is immediately editable, no
     // "Show"/reveal click required.
-    const isLockedSecret = kind === 'secret-textarea' && hadStoredSecretRef.current && !revealed;
-    return { revealed, toggleRevealed: () => setRevealed((current) => !current), isLockedSecret };
+    const isLockedSecret = kind === 'secret-textarea' && Boolean(value) && hadStoredSecretRef.current && !revealed;
+    return { revealed, toggleRevealed: toggle, isLockedSecret };
 }
 /** Picks the control for `spec.kind`: a select, a (secret-)textarea, a password input, or a plain text/url input. */
 function SourceConfigFieldControl(props) {
@@ -116,25 +118,24 @@ function SelectControl({ spec, value, inputId, shared, placeholder, }) {
     return (_jsxs("select", { id: inputId, value: value, ...shared, children: [_jsx("option", { value: "", disabled: true, hidden: true, children: placeholder ?? t('Select…') }), (spec.options ?? []).map((option) => (_jsx("option", { value: option.value, children: t(option.label) }, option.value)))] }));
 }
 function TextareaControl({ spec, value, inputId, shared, reveal, isLockedSecret, placeholder }) {
-    return (_jsxs("span", { className: "source-config-field-row", children: [_jsx("textarea", { id: inputId, value: isLockedSecret ? maskFieldValue(spec.kind, value) : value, placeholder: placeholder, 
-                // A masked textarea must not be typed into — the visible text is not
-                // the real value, so an edit would commit the mask characters.
-                // Revealing is the way in, exactly like the password field. Only
-                // applies when there is a stored secret to protect — see
-                // `isLockedSecret`.
-                readOnly: isLockedSecret, ...shared }), spec.kind === 'secret-textarea' ? _jsx(RevealToggle, { ...reveal }) : null] }));
-}
-function PasswordControl({ value, inputId, shared, reveal, placeholder }) {
-    return (_jsxs("span", { className: "source-config-field-row", children: [_jsx("input", { id: inputId, type: reveal.revealed ? 'text' : 'password', 
-                // `new-password`, NOT `off`: Chrome deliberately ignores `off` and fills a saved site
-                // login into the first password input it finds (and the text input above it as the
-                // username). A source's credential is never the operator's own login.
-                autoComplete: "new-password", value: value, placeholder: placeholder, ...shared }), _jsx(RevealToggle, { ...reveal })] }));
+    const t = useT();
+    if (spec.kind !== 'secret-textarea') {
+        return _jsx("span", { className: "source-config-field-row", children: _jsx("textarea", { id: inputId, value: value, placeholder: placeholder, ...shared }) });
+    }
+    return (_jsx("span", { className: "source-config-field-row", children: _jsx(SecretTextarea, { id: inputId, label: t(spec.label), revealed: reveal.revealed, onRevealedChange: reveal.onToggle, toggleAttrs: reveal.agentProps, value: value, maskedValue: isLockedSecret ? maskFieldValue(spec.kind, value) : undefined, placeholder: placeholder, 
+            // A masked textarea must not be typed into — the visible text is not
+            // the real value, so an edit would commit the mask characters.
+            // Revealing is the way in, exactly like the password field. Only
+            // applies when there is a stored secret to protect — see
+            // `isLockedSecret`.
+            readOnly: isLockedSecret, autoComplete: "off", ...shared }) }));
 }
-/** The `password`/`secret-textarea` Show/Hide button. */
-function RevealToggle({ revealed, disabled, agentProps, onToggle }) {
+function PasswordControl({ spec, value, inputId, shared, reveal, placeholder }) {
     const t = useT();
-    const label = revealed ? t('Hide') : t('Show');
-    return (_jsx("button", { type: "button", className: "source-config-field-toggle", disabled: disabled, ...agentProps, onClick: onToggle, title: label, children: label }));
+    return (_jsx("span", { className: "source-config-field-row", children: _jsx(SecretInput, { id: inputId, label: t(spec.label), "aria-label": t(spec.label), revealed: reveal.revealed, onRevealedChange: reveal.onToggle, toggleAttrs: reveal.agentProps, 
+            // `new-password`, NOT `off`: Chrome deliberately ignores `off` and fills a saved site
+            // login into the first password input it finds (and the text input above it as the
+            // username). A source's credential is never the operator's own login.
+            autoComplete: "new-password", value: value, placeholder: placeholder, ...shared }) }));
 }
 //# sourceMappingURL=SourceConfigField.js.map

package/dist/index.d.ts

@@ -105,6 +105,7 @@ export * from './browser/useModalWindowDragGuard.js';
 export * from './browser/index.js';
 export { Icon, ICON_PATH_DATA, type IconName } from './react/components/Icon.js';
 export * from './react/components/RemixIcon.js';
+export { SecretInput, SecretTextarea, type SecretInputProps, type SecretTextareaProps } from './react/components/SecretInput.js';
 export * from './react/components/AgentIcon.js';
 export * from './react/components/Toast.js';
 export * from './react/components/Loading.js';

package/dist/index.js

@@ -112,6 +112,7 @@ export * from './browser/index.js';
 // not reach this published package's public surface.
 export { Icon, ICON_PATH_DATA } from './react/components/Icon.js';
 export * from './react/components/RemixIcon.js';
+export { SecretInput, SecretTextarea } from './react/components/SecretInput.js';
 export * from './react/components/AgentIcon.js';
 export * from './react/components/Toast.js';
 export * from './react/components/Loading.js';

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

@@ -0,0 +1,47 @@
+import type { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+/**
+ * @file The shared masked input: a password/token/key `<input>` with an eye toggle inside its right
+ * edge. Drop-in for `<input type="password">` — every other input prop passes straight through.
+ *
+ * Same markup and classes as `@jini-ai/ui-kit`'s password `TextField` and the mcp-ui secret fields
+ * (`.jini-secret` / `.jini-secret-toggle`), so one host stylesheet styles all of them; hosts own
+ * the visual rules.
+ *
+ * Keep it OUT of a wrapping `<label>`: the toggle's "Show <label>" name would join the input's own
+ * accessible name. Pair it with a sibling `<label htmlFor>` (or `aria-label`) instead.
+ *
+ * `SecretTextarea` is the multi-line twin (a `<textarea>` cannot be `type="password"`, so it masks
+ * with `-webkit-text-security` while hidden); its wrapper adds `.jini-secret--multiline` so a host
+ * can pin the toggle to the top corner instead of the vertical middle.
+ */
+/** The props both secret fields share: how the eye toggle is named and whether it starts shown. */
+interface SecretToggleProps {
+    /** The field's visible label, translated; names the toggle ("Show API key"). */
+    readonly label: string;
+    /** The toggle's full names, for a host with its own translator (chat, user-management). Default:
+     *  `t('Show')`/`t('Hide')` + `label`, from this package's `I18nProvider`. Same contract as
+     *  ui-kit `TextField`'s `secretToggleLabels`. */
+    readonly toggleLabels?: {
+        readonly show: string;
+        readonly hide: string;
+    };
+    /** Extra attributes for the toggle button, e.g. an agent handle. */
+    readonly toggleAttrs?: Readonly<Record<string, string | boolean | undefined>>;
+    /** Controlled mode: the host owns the shown/hidden state. */
+    readonly revealed?: boolean;
+    readonly onRevealedChange?: (revealed: boolean) => void;
+}
+export type SecretInputProps = SecretToggleProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+export type SecretTextareaProps = SecretToggleProps & TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    /** Safe replacement text while hidden (e.g. env names with masked values). Read-only while
+     *  displayed: editing replacement characters would overwrite the actual secret. */
+    readonly maskedValue?: string | undefined;
+};
+export declare const SecretInput: import("react").ForwardRefExoticComponent<SecretToggleProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const SecretTextarea: import("react").ForwardRefExoticComponent<SecretToggleProps & TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    /** Safe replacement text while hidden (e.g. env names with masked values). Read-only while
+     *  displayed: editing replacement characters would overwrite the actual secret. */
+    readonly maskedValue?: string | undefined;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};
+//# sourceMappingURL=SecretInput.d.ts.map

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

@@ -0,0 +1,26 @@
+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;
+};
+//# sourceMappingURL=SecretInput.hooks.d.ts.map

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

@@ -0,0 +1,25 @@
+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 };
+}
+//# sourceMappingURL=SecretInput.hooks.js.map

package/dist/react/components/SecretInput.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useT } from '../../features/i18n/index.js';
+import { Icon } from './Icon.js';
+import { useSecretReveal } from './SecretInput.hooks.js';
+/** Reveal state + the eye button, shared by `SecretInput` and `SecretTextarea`. */
+function useSecretToggle({ label, toggleLabels, toggleAttrs, revealed, onRevealedChange }, { value, disabled } = {}) {
+    const t = useT();
+    const reveal = useSecretReveal({ value, labels: toggleLabels ?? { show: `${t('Show')} ${label}`, hide: `${t('Hide')} ${label}` } }, { ...(revealed === undefined ? {} : { revealed }), ...(onRevealedChange ? { onRevealedChange } : {}) });
+    // One signal only: the name flips Show/Hide, so no `aria-pressed` — both together made screen
+    // readers announce "Hide API key, toggle button, pressed" (Opus UI review 2026-10-26).
+    const button = (_jsx("button", { ...toggleAttrs, type: "button", className: "jini-secret-toggle", "aria-label": reveal.toggleLabel, title: reveal.toggleLabel, disabled: disabled, onClick: reveal.toggle, children: _jsx(Icon, { name: reveal.revealed ? 'eye-off' : 'eye', size: 18 }) }));
+    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] }));
+});
+export const SecretTextarea = forwardRef(function SecretTextarea(props, ref) {
+    const { label, toggleLabels, toggleAttrs, revealed, onRevealedChange, style, maskedValue, ...textareaProps } = props;
+    const { reveal, button } = useSecretToggle(props, { value: textareaProps.value, disabled: textareaProps.disabled });
+    const replacementShown = !reveal.revealed && maskedValue !== undefined;
+    /* Not a standard CSS property, so it is set here rather than left to a host stylesheet: a host
+       that forgot it would show the secret in clear text. pre-wrap keeps line breaks while masked. */
+    const masked = { ...style, ...{ WebkitTextSecurity: reveal.revealed || replacementShown ? 'none' : 'disc' }, whiteSpace: 'pre-wrap' };
+    return (_jsxs("span", { className: "jini-secret jini-secret--multiline", children: [_jsx("textarea", { ...textareaProps, ...(replacementShown ? { value: maskedValue, readOnly: true } : {}), spellCheck: false, ref: ref, style: masked }), button] }));
+});
+//# sourceMappingURL=SecretInput.js.map

package/dist/styles/lightbox.css

@@ -126,7 +126,7 @@
 }
 .jini-lightbox-button:hover:not(:disabled) { background: var(--jini-lightbox-button-bg-hover); border-color: var(--jini-lightbox-button-border-hover); }
 .jini-lightbox-button:focus-visible { outline: 2px solid var(--jini-lightbox-ink); outline-offset: 2px; }
-/* Same chip, only fainter: a host `button:disabled` fill (the Tovu admin's light `--surface-3`) would
+/* Same chip, only fainter: a host `button:disabled` fill (the host admin's light `--surface-3`) would
    otherwise turn the end-of-set arrow into a bright pressed-looking disc. */
 .jini-lightbox-button:disabled {
   opacity: 0.3;

package/dist/styles/variables.css

@@ -250,7 +250,7 @@
 /* Chat uses its own stylesheet so hosts can load it independently of the admin palette.
    Aliases live on :root only so nested theme/scheme scopes inherit ChatPane's component-local
    values. Moving that component wiring is a later step. Classic retains its existing scoped
-   host bridge in Tovu. */
+   host application bridge. */
 :root {
   --jini-chat-font-body: var(--jini-theme-chat-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif);
   --jini-chat-font-mono: var(--jini-theme-chat-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui",
-  "version": "0.6.12",
+  "version": "0.6.15-rc.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": {
@@ -243,14 +243,14 @@
     "shiki": "^1.24.4",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.25.76",
-    "@jini-ai/agent-runtime": "^0.6.12",
-    "@jini-ai/integrations": "^0.6.12",
-    "@jini-ai/platform": "^0.6.12",
-    "@jini-ai/agentic": "^0.6.12",
-    "@jini-ai/core": "^0.6.12"
+    "@jini-ai/agent-runtime": "^0.6.15-rc.1",
+    "@jini-ai/integrations": "^0.6.15-rc.1",
+    "@jini-ai/platform": "^0.6.15-rc.1",
+    "@jini-ai/agentic": "^0.6.15-rc.1",
+    "@jini-ai/core": "^0.6.15-rc.1"
   },
   "dependencies": {
-    "@jini-ai/core": "^0.6.12"
+    "@jini-ai/core": "^0.6.15-rc.1"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
@@ -267,8 +267,8 @@
     "lexical": "0.36.2",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0",
-    "@jini-ai/platform": "^0.6.10",
-    "@jini-ai/agentic": "^0.6.10",
+    "@jini-ai/platform": "^0.6.15-rc.1",
+    "@jini-ai/agentic": "^0.6.15-rc.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "micromark": "^4.0.0",