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

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);

package/dist/react/mcp-ui/useHostSurfaceTokens.js

@@ -26,7 +26,7 @@ export function useHostSurfaceTokens(ref) {
         const view = element?.ownerDocument.defaultView;
         if (element === null || element === undefined || view === null || view === undefined) {
             setTokens({});
-            return;
+            return undefined;
         }
         let last;
         const read = () => {

package/dist/renderers/annotation-canvas/react/components/AnnotationCanvas.js

@@ -16,6 +16,12 @@ import { useT } from '../../../react/i18n.js';
 function maybePortal(node, host) {
     return host ? createPortal(node, host) : node;
 }
+/** Crosshair for drawing tools, an I-beam for the text tool, the default pointer while inactive. */
+function annotationCursor(active, markTool) {
+    if (!active)
+        return 'default';
+    return markTool === 'text' ? 'text' : 'crosshair';
+}
 export function AnnotationCanvas(props) {
     const { children, toolbarHost, icons: iconOverrides, className } = props;
     const icons = { ...DEFAULT_ANNOTATION_CANVAS_ICONS, ...iconOverrides };
@@ -39,7 +45,7 @@ function DrawingCanvas({ c, active }) {
             position: 'absolute',
             inset: 0,
             pointerEvents: active ? 'auto' : 'none',
-            cursor: active ? (c.markTool === 'text' ? 'text' : 'crosshair') : 'default',
+            cursor: annotationCursor(active, c.markTool),
             visibility: c.chromeHidden ? 'hidden' : 'visible',
             touchAction: 'none',
             userSelect: 'none',

package/dist/renderers/annotation-canvas/react/hooks/useAnnotationCanvas.controller.js

@@ -19,7 +19,8 @@ export function deriveUndoRedoAvailability(input) {
 /** Shared by the hook's `canSubmit` value and `send()`'s own gate — both computed the identical chain before this extraction. */
 export function deriveSendGate(input) {
     const { hasInk, hasBox, hasText, hasCaptureTarget, captureViewport, noteTrimmed, extraFilesCount } = input;
-    const shouldCapture = hasInk || hasBox || hasText || hasCaptureTarget || captureViewport;
+    const hasAnnotation = hasInk || hasBox || hasText;
+    const shouldCapture = hasAnnotation || hasCaptureTarget || captureViewport;
     const canSubmitNow = shouldCapture || Boolean(noteTrimmed) || extraFilesCount > 0;
     return { shouldCapture, canSubmitNow };
 }
@@ -35,7 +36,8 @@ export function canAttemptSend(input) {
 /** Picks which of the two "no screenshot" warnings applies — the whole-viewport-request wording, or the mark-specific one. */
 export function selectNoScreenshotMessage(input, t) {
     const { captureViewport, hasInk, hasBox, hasCaptureTarget } = input;
-    return captureViewport && !hasInk && !hasBox && !hasCaptureTarget
+    const hasMark = hasInk || hasBox || hasCaptureTarget;
+    return captureViewport && !hasMark
         ? t('No screenshot was captured for this annotation.')
         : t('No screenshot was captured for this mark.');
 }

package/dist/renderers/annotation-canvas/react/hooks/useAnnotationCanvas.js

@@ -25,6 +25,8 @@ const DEFAULT_DOCKED_STYLE = {
     maxWidth: 'min(760px, calc(100% - 144px))',
 };
 const SUBMIT_TIMEOUT_MS = 60_000;
+/** The analytics toolbar element each mark tool reports as. */
+const TOOLBAR_TOOL_FOR_MARK_TOOL = { box: 'rect', text: 'text' };
 export function useAnnotationCanvas(options) {
     const { active, onActiveChange, captureViewport = false, captureTarget = null, filePath, sendDisabled = false, hideChrome = false, onToolbarClick, port } = options;
     const t = useT();
@@ -155,7 +157,7 @@ export function useAnnotationCanvas(options) {
         }
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // Dependency list intentionally follows the lifecycle rationale above.
     }, [active, onActiveChange, sending]);
     // Keyboard shortcut #2: Escape closes the staged-image preview modal first (capture phase).
     useEffect(() => {
@@ -368,7 +370,7 @@ export function useAnnotationCanvas(options) {
         syncHistoryState();
         redraw();
         bumpLayoutRevision();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // Dependency list intentionally follows the lifecycle rationale above.
     }, [active, redraw]);
     const autosizeTextArea = useCallback((el) => {
         if (!el)
@@ -509,7 +511,7 @@ export function useAnnotationCanvas(options) {
         };
     }, [extraFiles]);
     function selectMarkTool(nextTool) {
-        onToolbarClick?.(nextTool === 'box' ? 'rect' : nextTool === 'text' ? 'text' : 'pen');
+        onToolbarClick?.(TOOLBAR_TOOL_FOR_MARK_TOOL[nextTool] ?? 'pen');
         setMarkTool(nextTool);
         setMarkToolMenuOpen(false);
     }
@@ -598,7 +600,9 @@ export function useAnnotationCanvas(options) {
     }
     function waitForOverlayHidden() {
         return new Promise((resolve) => {
-            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+            const finish = () => resolve();
+            const afterNextFrame = () => requestAnimationFrame(finish);
+            requestAnimationFrame(afterNextFrame);
         });
     }
     async function requestSnapshot() {
@@ -735,7 +739,7 @@ export function useAnnotationCanvas(options) {
             anchor,
         });
         setDockPlacement((current) => (dockPlacementEquals(current, next) ? current : next));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // Dependency list intentionally follows the lifecycle rationale above.
     }, [active, captureTarget, layoutRevision, imagePreviews.length, captureWarning?.message]);
     useLayoutEffect(() => {
         if (!active || typeof ResizeObserver === 'undefined')