@jini-ai/ui 0.5.4 → 0.5.6

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

@@ -157,13 +157,50 @@ export interface UseCustomSelectResult {
  * consumer.
  */
 export declare function useCustomSelect({ value, options, onChange, portal, placeholder, onOpenChange, }: UseCustomSelectParams, _optional?: Record<string, never>): UseCustomSelectResult;
+export interface CustomSelectOriginTheme {
+    'data-admin-theme'?: string;
+    'data-color-scheme'?: string;
+    'data-theme'?: string;
+}
+/** Resolve theme identity and the nearest scheme separately, so a local light pin beats a dark root.
+ * @complexity O(d) time, O(1) space for d DOM ancestors. No host-specific theme ids are needed. */
+export declare function resolveCustomSelectOriginTheme({ trigger }: {
+    trigger: HTMLElement | null;
+}, _optional?: Record<string, never>): CustomSelectOriginTheme;
+/**
+ * The theme of the place this menu was opened FROM.
+ *
+ * A portalled menu is a child of `document.body`, so it escapes any `data-theme` set on an ancestor
+ * of the trigger — and this package's theming works precisely by declaring `--jini-*` tokens on
+ * `[data-theme='light']` / `[data-theme='dark']`. A host that pins a theme on a WRAPPER rather than
+ * on `document.documentElement` therefore gets a correctly-themed control and a menu themed by
+ * whatever the document happens to be.
+ *
+ * Measured in a host admin that is light-only and pins `data-theme="light"` on its panel wrapper:
+ * on a machine set to dark, the trigger rendered light and its own dropdown rendered dark — one
+ * control, two themes, four pixels apart. The host cannot fix that from CSS either, because the
+ * tokens resolve on the portal node's ancestors, which it has no way to select.
+ *
+ * So the menu carries its origin's theme with it. The nearest scheme boundary wins, with
+ * canonical `data-color-scheme` taking precedence over legacy `data-theme` on the same node.
+ * Theme identity is independent of scheme. Observe the trigger's ancestors while open so a
+ * host's live theme/scheme change updates an existing portal too. With neither attribute, leave
+ * document-level theming untouched. Only applied when portalling — an inline menu is still
+ * inside the subtree and inherits correctly on its own.
+ * @complexity O(d) time/observer storage for d ancestors; disposed on close or unmount.
+ */
+export declare function useCustomSelectOriginTheme({ buttonRef, open, portal }: {
+    buttonRef: MutableRefObject<HTMLButtonElement | null>;
+    open: boolean;
+    portal: boolean;
+}, _optional?: Record<string, never>): CustomSelectOriginTheme;
 /**
  * Accessible custom `<select>` replacement with grouped options, full keyboard
  * navigation, and an optional portal-rendered menu. All behavior lives in
  * {@link useCustomSelect}; this component only wires the hook's state to the
  * trigger button and the listbox menu.
  */
-export declare function CustomSelect({ value, options, onChange, ariaLabel, labelledBy, className, triggerClassName, menuClassName, disabled, placeholder, portal, portalContainer, title, onFocus, menuHeader, onOpenChange, useCustomSelect: useCustomSelectHook, }: CustomSelectProps, _optional?: Record<string, never>): import("react").JSX.Element;
+export declare function CustomSelect({ value, options, onChange, ariaLabel, labelledBy, className, triggerClassName, menuClassName, disabled, placeholder, portal, portalContainer, title, onFocus, menuHeader, onOpenChange, useCustomSelect: useCustomSelectHook, }: CustomSelectProps): import("react").JSX.Element;
 /** One row in the listbox: a selectable option button that reports hover
  * (activation) and click (choice) back to {@link CustomSelect}. */
 export declare function CustomSelectOptionButton({ option, selected, active, id, onChoose, onActive, }: {

package/dist/react/components/CustomSelect.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // NOTE: verified zero real consumers in the vendored source snapshot before
 // porting (see packages/ui/source-map.md) — shipped anyway since it's small,
 // self-contained, and correct; a host may still find it useful as a select
@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // pattern (see TooltipLayer.tsx). Every seam is exported: pure helpers, the
 // `useCustomSelect` hook that owns all state/refs/effects/handlers, the
 // `CustomSelectOptionButton` leaf, and the dumb `CustomSelect` render.
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useSelectPopover, isSelectEventInside, openSelectOnKey, applySelectNavigationKey, resolveSelectPortalContainer } from './select-popover.js';
 import { Icon } from './Icon.js';
@@ -185,52 +185,108 @@ export function useCustomSelect({ value, options, onChange, portal, placeholder,
         onMenuKeyDown,
     };
 }
+/** Scheme attributes from one boundary node: canonical `data-color-scheme` wins; a legacy
+ * `data-theme` supplies the scheme only when it is `light`/`dark`, but is always mirrored. */
+function resolveCustomSelectSchemeAttributes({ canonical, legacy }) {
+    const scheme = canonical ?? (legacy === 'light' || legacy === 'dark' ? legacy : undefined);
+    return {
+        ...(scheme ? { 'data-color-scheme': scheme } : {}),
+        ...(canonical || legacy ? { 'data-theme': canonical ?? legacy } : {}),
+    };
+}
+/** Resolve theme identity and the nearest scheme separately, so a local light pin beats a dark root.
+ * @complexity O(d) time, O(1) space for d DOM ancestors. No host-specific theme ids are needed. */
+export function resolveCustomSelectOriginTheme({ trigger }, _optional = {}) {
+    const identity = trigger?.closest('[data-admin-theme]')?.getAttribute('data-admin-theme');
+    const boundary = trigger?.closest('[data-color-scheme], [data-theme]');
+    return {
+        ...(identity ? { 'data-admin-theme': identity } : {}),
+        ...resolveCustomSelectSchemeAttributes({
+            canonical: boundary?.getAttribute('data-color-scheme'),
+            legacy: boundary?.getAttribute('data-theme'),
+        }),
+    };
+}
+/**
+ * The theme of the place this menu was opened FROM.
+ *
+ * A portalled menu is a child of `document.body`, so it escapes any `data-theme` set on an ancestor
+ * of the trigger — and this package's theming works precisely by declaring `--jini-*` tokens on
+ * `[data-theme='light']` / `[data-theme='dark']`. A host that pins a theme on a WRAPPER rather than
+ * on `document.documentElement` therefore gets a correctly-themed control and a menu themed by
+ * whatever the document happens to be.
+ *
+ * Measured in a host admin that is light-only and pins `data-theme="light"` on its panel wrapper:
+ * on a machine set to dark, the trigger rendered light and its own dropdown rendered dark — one
+ * control, two themes, four pixels apart. The host cannot fix that from CSS either, because the
+ * tokens resolve on the portal node's ancestors, which it has no way to select.
+ *
+ * So the menu carries its origin's theme with it. The nearest scheme boundary wins, with
+ * canonical `data-color-scheme` taking precedence over legacy `data-theme` on the same node.
+ * Theme identity is independent of scheme. Observe the trigger's ancestors while open so a
+ * host's live theme/scheme change updates an existing portal too. With neither attribute, leave
+ * document-level theming untouched. Only applied when portalling — an inline menu is still
+ * inside the subtree and inherits correctly on its own.
+ * @complexity O(d) time/observer storage for d ancestors; disposed on close or unmount.
+ */
+export function useCustomSelectOriginTheme({ buttonRef, open, portal }, _optional = {}) {
+    const [attributes, setAttributes] = useState({});
+    useLayoutEffect(() => {
+        if (!open || !portal)
+            return;
+        const update = () => {
+            const next = resolveCustomSelectOriginTheme({ trigger: buttonRef.current });
+            setAttributes((current) => current['data-admin-theme'] === next['data-admin-theme']
+                && current['data-color-scheme'] === next['data-color-scheme']
+                && current['data-theme'] === next['data-theme'] ? current : next);
+        };
+        update();
+        const observer = new MutationObserver(update);
+        // Observe only the origin chain, not portal nodes: copying attributes must not retrigger itself.
+        for (let node = buttonRef.current; node; node = node.parentElement) {
+            observer.observe(node, { attributes: true, attributeFilter: ['data-admin-theme', 'data-color-scheme', 'data-theme'] });
+        }
+        return () => observer.disconnect();
+    }, [buttonRef, open, portal]);
+    return portal ? attributes : {};
+}
+/** Inline geometry for a portalled menu once it has been measured; an inline menu is laid out by CSS. */
+function customSelectMenuStyle({ portal, position }) {
+    return portal && position
+        ? {
+            top: position.top,
+            left: position.left,
+            width: position.width,
+            maxHeight: position.maxHeight,
+        }
+        : undefined;
+}
+/** Where an open menu renders: inline, or portalled only after its first measurement. */
+function mountCustomSelectMenu({ menu, portal, position, trigger }, { container } = {}) {
+    if (!portal)
+        return menu;
+    return position ? createPortal(menu, resolveSelectPortalContainer({ trigger }, { container })) : null;
+}
+/** The listbox rows: groups render a labelled block of option buttons, flat options render directly. */
+function CustomSelectMenuOptions({ options, value, activeValue, optionIdByValue, onChoose, onActive }) {
+    const renderOption = (option) => (_jsx(CustomSelectOptionButton, { option: option, selected: option.value === value, active: option.value === activeValue, id: optionIdByValue.get(option.value), onChoose: onChoose, onActive: onActive }, option.value));
+    return (_jsx(_Fragment, { children: options.map((item) => (isCustomSelectGroup(item) ? (_jsxs("div", { className: "jini-select-group", children: [_jsx("div", { className: "jini-select-group-label", children: item.label }), item.options.map(renderOption)] }, `group:${item.label}`)) : renderOption(item))) }));
+}
 /**
  * Accessible custom `<select>` replacement with grouped options, full keyboard
  * navigation, and an optional portal-rendered menu. All behavior lives in
  * {@link useCustomSelect}; this component only wires the hook's state to the
  * trigger button and the listbox menu.
  */
-export function CustomSelect({ value, options, onChange, ariaLabel, labelledBy, className, triggerClassName, menuClassName, disabled = false, placeholder, portal = true, portalContainer, title, onFocus, menuHeader, onOpenChange, useCustomSelect: useCustomSelectHook = useCustomSelect, }, _optional = {}) {
+export function CustomSelect({ value, options, onChange, ariaLabel, labelledBy, className, triggerClassName, menuClassName, disabled = false, placeholder, portal = true, portalContainer, title, onFocus, menuHeader, onOpenChange, useCustomSelect: useCustomSelectHook = useCustomSelect, }) {
     const { idBase, buttonRef, menuRef, open, activeValue, position, selectedLabel, optionIdByValue, activeOptionId, choose, setActiveValue, toggleOpen, onButtonKeyDown, onMenuKeyDown, } = useCustomSelectHook({ value, options, onChange, portal, placeholder, onOpenChange });
-    /**
-     * The theme of the place this menu was opened FROM.
-     *
-     * A portalled menu is a child of `document.body`, so it escapes any `data-theme` set on an ancestor
-     * of the trigger — and this package's theming works precisely by declaring `--jini-*` tokens on
-     * `[data-theme='light']` / `[data-theme='dark']`. A host that pins a theme on a WRAPPER rather than
-     * on `document.documentElement` therefore gets a correctly-themed control and a menu themed by
-     * whatever the document happens to be.
-     *
-     * Measured in a host admin that is light-only and pins `data-theme="light"` on its panel wrapper:
-     * on a machine set to dark, the trigger rendered light and its own dropdown rendered dark — one
-     * control, two themes, four pixels apart. The host cannot fix that from CSS either, because the
-     * tokens resolve on the portal node's ancestors, which it has no way to select.
-     *
-     * So the menu carries its origin's theme with it. Read from the trigger's nearest `[data-theme]`
-     * ancestor; `null` when there is none, which leaves document-level theming untouched and every
-     * existing caller byte-identical. Only applied when portalling — an inline menu is still inside the
-     * subtree and inherits correctly on its own.
-     */
-    const originTheme = buttonRef.current?.closest('[data-theme]')?.getAttribute('data-theme') ?? null;
-    const menu = (_jsxs("div", { ref: menuRef, id: `${idBase}-menu`, onKeyDown: onMenuKeyDown, ...(portal && originTheme ? { 'data-theme': originTheme } : {}), className: [
+    const originTheme = useCustomSelectOriginTheme({ buttonRef, open, portal });
+    const menu = (_jsxs("div", { ref: menuRef, id: `${idBase}-menu`, onKeyDown: onMenuKeyDown, ...originTheme, className: [
             'jini-select-menu',
             portal ? 'portal' : 'inline',
             menuClassName,
-        ].filter(Boolean).join(' '), role: "listbox", "aria-label": ariaLabel, style: portal && position
-            ? {
-                top: position.top,
-                left: position.left,
-                width: position.width,
-                maxHeight: position.maxHeight,
-            }
-            : undefined, children: [menuHeader, options.map((item) => {
-                if (isCustomSelectGroup(item)) {
-                    return (_jsxs("div", { className: "jini-select-group", children: [_jsx("div", { className: "jini-select-group-label", children: item.label }), item.options.map((option) => (_jsx(CustomSelectOptionButton, { option: option, selected: option.value === value, active: option.value === activeValue, id: optionIdByValue.get(option.value), onChoose: choose, onActive: setActiveValue }, option.value)))] }, `group:${item.label}`));
-                }
-                return (_jsx(CustomSelectOptionButton, { option: item, selected: item.value === value, active: item.value === activeValue, id: optionIdByValue.get(item.value), onChoose: choose, onActive: setActiveValue }, item.value));
-            })] }));
-    return (_jsxs("div", { className: ['jini-select', className].filter(Boolean).join(' '), children: [_jsxs("button", { ref: buttonRef, type: "button", className: ['jini-select-trigger', triggerClassName].filter(Boolean).join(' '), role: "combobox", value: value, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": `${idBase}-menu`, "aria-activedescendant": activeOptionId, "aria-describedby": labelledBy, "aria-label": `${ariaLabel}: ${selectedLabel}`, disabled: disabled, title: title, onClick: toggleOpen, onKeyDown: onButtonKeyDown, onFocus: onFocus, children: [_jsx("span", { id: `${idBase}-value`, className: "jini-select-value", children: selectedLabel }), _jsx(Icon, { name: "chevron-down", size: 14 })] }), open ? (portal ? (position ? createPortal(menu, resolveSelectPortalContainer({ trigger: buttonRef.current }, { container: portalContainer })) : null) : menu) : null] }));
+        ].filter(Boolean).join(' '), role: "listbox", "aria-label": ariaLabel, style: customSelectMenuStyle({ portal, position }), children: [menuHeader, _jsx(CustomSelectMenuOptions, { options: options, value: value, activeValue: activeValue, optionIdByValue: optionIdByValue, onChoose: choose, onActive: setActiveValue })] }));
+    return (_jsxs("div", { className: ['jini-select', className].filter(Boolean).join(' '), children: [_jsxs("button", { ref: buttonRef, type: "button", className: ['jini-select-trigger', triggerClassName].filter(Boolean).join(' '), role: "combobox", value: value, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": `${idBase}-menu`, "aria-activedescendant": activeOptionId, "aria-describedby": labelledBy, "aria-label": `${ariaLabel}: ${selectedLabel}`, disabled: disabled, title: title, onClick: toggleOpen, onKeyDown: onButtonKeyDown, onFocus: onFocus, children: [_jsx("span", { id: `${idBase}-value`, className: "jini-select-value", children: selectedLabel }), _jsx(Icon, { name: "chevron-down", size: 14 })] }), open ? mountCustomSelectMenu({ menu, portal, position, trigger: buttonRef.current }, { container: portalContainer }) : null] }));
 }
 /** One row in the listbox: a selectable option button that reports hover
  * (activation) and click (choice) back to {@link CustomSelect}. */

package/dist/react/components/OnboardingDropdown.js

@@ -237,6 +237,25 @@ export function useOnboardingDropdown(props) {
 // ---------------------------------------------------------------------------
 // Dumb component
 // ---------------------------------------------------------------------------
+function OnboardingDropdownSearch({ query, setQuery, placeholder, label }) {
+    return (_jsxs("label", { className: "onboarding-view__select-search", onClick: (event) => event.stopPropagation(), children: [_jsx(Icon, { name: "search", size: 14 }), _jsx("input", { type: "search", value: query, placeholder: placeholder, "aria-label": label, autoFocus: true, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                    if (event.key !== 'Escape') {
+                        event.stopPropagation();
+                    }
+                } })] }));
+}
+function OnboardingDropdownOptionButton({ option, selected, selectOption }) {
+    return (_jsxs("button", { type: "button", className: `onboarding-view__select-option${selected ? ' is-selected' : ''}`, role: "option", "aria-selected": selected, onClick: () => selectOption(option, selected), children: [_jsx("span", { children: option.label }), selected ? _jsx(Icon, { name: "check", size: 15 }) : null] }));
+}
+function OnboardingDropdownOptions({ label, multiple, visibleOptions, selectedValues, emptyMessage, selectOption }) {
+    return (_jsxs("div", { className: "onboarding-view__select-options", role: "listbox", "aria-label": label, "aria-multiselectable": multiple || undefined, children: [visibleOptions.map((option) => (_jsx(OnboardingDropdownOptionButton, { option: option, selected: selectedValues.includes(option.value), selectOption: selectOption }, option.value))), visibleOptions.length === 0 ? (_jsx("div", { className: "onboarding-view__select-empty", children: emptyMessage })) : null] }));
+}
+function OnboardingDropdownTrigger({ open, hasValue, triggerLabel, toggleOpen }) {
+    return (_jsxs("button", { type: "button", className: `onboarding-view__select-trigger${open ? ' is-open' : ''}${hasValue ? ' has-value' : ''}`, "aria-haspopup": "listbox", "aria-expanded": open, title: triggerLabel, onClick: toggleOpen, children: [_jsx("span", { children: triggerLabel }), _jsx(Icon, { name: "chevron-down", size: 16 })] }));
+}
+function OnboardingDropdownMenu({ label, placeholder, multiple, searchable, searchPlaceholder, query, setQuery, menuMaxHeight, ...listProps }) {
+    return (_jsxs("div", { className: "onboarding-view__select-menu", "data-searchable": searchable || undefined, style: { '--onboarding-select-menu-max-height': `${menuMaxHeight}px` }, children: [searchable ? (_jsx(OnboardingDropdownSearch, { query: query, setQuery: setQuery, placeholder: searchPlaceholder || placeholder, label: searchPlaceholder || label })) : null, _jsx(OnboardingDropdownOptions, { label: label, multiple: multiple, ...listProps })] }));
+}
 /**
  * Searchable/multi-select onboarding dropdown. All behavior lives in
  * {@link useOnboardingDropdown}; this component only renders the field,
@@ -245,13 +264,6 @@ export function useOnboardingDropdown(props) {
 export function OnboardingDropdown(props) {
     const { label, placeholder, multiple = false, searchable = false, searchPlaceholder, sourceTone, className, useOnboardingDropdown: useOnboardingDropdownHook = useOnboardingDropdown, } = props;
     const { open, query, setQuery, toggleOpen, rootRef, resolvedPlacement, menuMaxHeight, selectedValues, hasValue, triggerLabel, visibleOptions, emptyMessage, selectOption, } = useOnboardingDropdownHook(props);
-    return (_jsxs("div", { className: ['onboarding-view__select-field', className].filter(Boolean).join(' '), "data-placement": resolvedPlacement, "data-open": open || undefined, ref: rootRef, children: [_jsx("span", { className: "onboarding-view__select-label", "data-source-tone": sourceTone || undefined, children: label }), _jsxs("button", { type: "button", className: `onboarding-view__select-trigger${open ? ' is-open' : ''}${hasValue ? ' has-value' : ''}`, "aria-haspopup": "listbox", "aria-expanded": open, title: triggerLabel, onClick: toggleOpen, children: [_jsx("span", { children: triggerLabel }), _jsx(Icon, { name: "chevron-down", size: 16 })] }), open ? (_jsxs("div", { className: "onboarding-view__select-menu", "data-searchable": searchable || undefined, style: { '--onboarding-select-menu-max-height': `${menuMaxHeight}px` }, children: [searchable ? (_jsxs("label", { className: "onboarding-view__select-search", onClick: (event) => event.stopPropagation(), children: [_jsx(Icon, { name: "search", size: 14 }), _jsx("input", { type: "search", value: query, placeholder: searchPlaceholder || placeholder, "aria-label": searchPlaceholder || label, autoFocus: true, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
-                                    if (event.key !== 'Escape') {
-                                        event.stopPropagation();
-                                    }
-                                } })] })) : null, _jsxs("div", { className: "onboarding-view__select-options", role: "listbox", "aria-label": label, "aria-multiselectable": multiple || undefined, children: [visibleOptions.map((option) => {
-                                const selected = selectedValues.includes(option.value);
-                                return (_jsxs("button", { type: "button", className: `onboarding-view__select-option${selected ? ' is-selected' : ''}`, role: "option", "aria-selected": selected, onClick: () => selectOption(option, selected), children: [_jsx("span", { children: option.label }), selected ? _jsx(Icon, { name: "check", size: 15 }) : null] }, option.value));
-                            }), visibleOptions.length === 0 ? (_jsx("div", { className: "onboarding-view__select-empty", children: emptyMessage })) : null] })] })) : null] }));
+    return (_jsxs("div", { className: ['onboarding-view__select-field', className].filter(Boolean).join(' '), "data-placement": resolvedPlacement, "data-open": open || undefined, ref: rootRef, children: [_jsx("span", { className: "onboarding-view__select-label", "data-source-tone": sourceTone || undefined, children: label }), _jsx(OnboardingDropdownTrigger, { open: open, hasValue: hasValue, triggerLabel: triggerLabel, toggleOpen: toggleOpen }), open ? (_jsx(OnboardingDropdownMenu, { label: label, placeholder: placeholder, multiple: multiple, searchable: searchable, searchPlaceholder: searchPlaceholder, query: query, setQuery: setQuery, menuMaxHeight: menuMaxHeight, visibleOptions: visibleOptions, selectedValues: selectedValues, emptyMessage: emptyMessage, selectOption: selectOption })) : null] }));
 }
 //# sourceMappingURL=OnboardingDropdown.js.map

package/dist/react/components/RemixIcon.stylesheet.js

@@ -13,7 +13,9 @@ function recoverFont({ stylesheet }) {
         createFontFace: ({ family, source, descriptors }) => new FontFace(family, source, descriptors),
         timers: {
             setTimeout: (run, delay) => globalThis.setTimeout(run, delay),
-            clearTimeout: (handle) => globalThis.clearTimeout(handle),
+            // Only the recovery's stop handle clears a timer, and this module never stops a recovery (it
+            // lives as long as the page), so this is a plain binding rather than a wrapper of its own.
+            clearTimeout: globalThis.clearTimeout.bind(globalThis),
         },
     });
     if (sheet.sheet) {

package/dist/react/components/Toast.js

@@ -116,6 +116,18 @@ export function useToastAutoDismiss(options) {
     return { leaving, fireDismiss };
 }
 // --- Dumb component --------------------------------------------------------
+function ToastIcon({ iconName }) {
+    return iconName ? (_jsx("span", { className: "jini-toast-icon", "aria-hidden": true, children: _jsx(Icon, { name: iconName, size: 14 }) })) : null;
+}
+function ToastActionButton({ actionLabel, actionAriaLabel, onAction }) {
+    return actionLabel && onAction ? (_jsx("button", { type: "button", className: "jini-toast-action", onClick: onAction, "aria-label": actionAriaLabel ?? actionLabel, children: actionLabel })) : null;
+}
+/** A code toast is pinned open, so it gets a labelled "Dismiss" button instead of the close glyph. */
+function ToastDismissButton({ code, onDismiss }) {
+    if (!onDismiss)
+        return null;
+    return code ? (_jsx("button", { type: "button", className: "jini-toast-dismiss", onClick: onDismiss, "aria-label": "Dismiss", children: "Dismiss" })) : (_jsx("button", { type: "button", className: "jini-toast-close", onClick: onDismiss, "aria-label": "Dismiss", children: _jsx(Icon, { name: "close", size: 13 }) }));
+}
 /**
  * Pure render of a transient toast. All timing/state lives in
  * {@link useToastAutoDismiss}; all derivations in the module-level helpers.
@@ -125,7 +137,6 @@ export function useToastAutoDismiss(options) {
 export function Toast({ message, className, details, actionLabel, actionAriaLabel, onAction, code, ttlMs = TOAST_DEFAULT_TTL, onDismiss, role = 'status', tone = 'default', placement = 'bottom', useToastAutoDismiss: useToastAutoDismissHook = useToastAutoDismiss, }) {
     const effectiveTtl = toastEffectiveTtl(code, ttlMs);
     const { leaving } = useToastAutoDismissHook({ message, details, code, effectiveTtl, onDismiss });
-    const iconName = toastToneIcon(tone);
-    return (_jsxs("div", { className: toastClassName({ tone, placement, className, leaving }), role: role, "aria-live": toastAriaLive(role), children: [_jsxs("div", { className: "jini-toast-body", children: [iconName ? (_jsx("span", { className: "jini-toast-icon", "aria-hidden": true, children: _jsx(Icon, { name: iconName, size: 14 }) })) : null, _jsx("div", { className: "jini-toast-message", children: message })] }), details ? _jsx("div", { className: "jini-toast-details", children: details }) : null, code ? (_jsx("pre", { className: "jini-toast-code", children: code })) : null, actionLabel && onAction ? (_jsx("button", { type: "button", className: "jini-toast-action", onClick: onAction, "aria-label": actionAriaLabel ?? actionLabel, children: actionLabel })) : null, !code && onDismiss ? (_jsx("button", { type: "button", className: "jini-toast-close", onClick: onDismiss, "aria-label": "Dismiss", children: _jsx(Icon, { name: "close", size: 13 }) })) : null, code && onDismiss ? (_jsx("button", { type: "button", className: "jini-toast-dismiss", onClick: onDismiss, "aria-label": "Dismiss", children: "Dismiss" })) : null] }));
+    return (_jsxs("div", { className: toastClassName({ tone, placement, className, leaving }), role: role, "aria-live": toastAriaLive(role), children: [_jsxs("div", { className: "jini-toast-body", children: [_jsx(ToastIcon, { iconName: toastToneIcon(tone) }), _jsx("div", { className: "jini-toast-message", children: message })] }), details ? _jsx("div", { className: "jini-toast-details", children: details }) : null, code ? (_jsx("pre", { className: "jini-toast-code", children: code })) : null, _jsx(ToastActionButton, { actionLabel: actionLabel, actionAriaLabel: actionAriaLabel, onAction: onAction }), _jsx(ToastDismissButton, { code: code, onDismiss: onDismiss })] }));
 }
 //# sourceMappingURL=Toast.js.map

package/dist/react/components/TooltipLayer.js

@@ -210,7 +210,7 @@ export function useTooltipLayer() {
             if (target)
                 showTooltip(target);
         };
-        const onPointerOut = (event) => {
+        const onTargetExit = (event) => {
             const target = readTooltipTarget(event.target);
             if (!target)
                 return;
@@ -240,15 +240,6 @@ export function useTooltipLayer() {
             }
             suppressNativeTitle(target);
         };
-        const onFocusOut = (event) => {
-            const target = readTooltipTarget(event.target);
-            if (!target)
-                return;
-            const next = event.relatedTarget;
-            if (next instanceof Node && target.contains(next))
-                return;
-            hideTooltip();
-        };
         const onKeyDown = (event) => {
             lastInputRef.current = 'keyboard';
             if (event.key === 'Escape')
@@ -258,23 +249,23 @@ export function useTooltipLayer() {
             }
         };
         document.addEventListener('pointerover', onPointerOver);
-        document.addEventListener('pointerout', onPointerOut);
+        document.addEventListener('pointerout', onTargetExit);
         document.addEventListener('pointerdown', onPointerDown);
         document.addEventListener('pointercancel', onPointerCancel);
         document.addEventListener('click', onClick);
         document.addEventListener('focusin', onFocusIn);
-        document.addEventListener('focusout', onFocusOut);
+        document.addEventListener('focusout', onTargetExit);
         document.addEventListener('keydown', onKeyDown);
         window.addEventListener('resize', scheduleUpdatePosition);
         window.addEventListener('scroll', scheduleUpdatePosition, true);
         return () => {
             document.removeEventListener('pointerover', onPointerOver);
-            document.removeEventListener('pointerout', onPointerOut);
+            document.removeEventListener('pointerout', onTargetExit);
             document.removeEventListener('pointerdown', onPointerDown);
             document.removeEventListener('pointercancel', onPointerCancel);
             document.removeEventListener('click', onClick);
             document.removeEventListener('focusin', onFocusIn);
-            document.removeEventListener('focusout', onFocusOut);
+            document.removeEventListener('focusout', onTargetExit);
             document.removeEventListener('keydown', onKeyDown);
             window.removeEventListener('resize', scheduleUpdatePosition);
             window.removeEventListener('scroll', scheduleUpdatePosition, true);

package/dist/react/components/WorkingDirPicker.js

@@ -119,22 +119,62 @@ export function useWorkingDirPicker(input) {
         toggleRecent: flyout.toggle,
     };
 }
+const MENU_ITEM_SELECTOR = '[role="menuitem"]:not(:disabled)';
+const RECENT_ITEM_SELECTOR = '[data-testid="working-dir-recent"]';
+const RECENT_LIST_SELECTOR = '[data-testid="working-dir-recent-list"]';
 /**
- * Working-directory picker: a borderless trigger that opens a panel with
- * "Choose folder" and a "Recent folders" submenu. Layout is left to the host
- * via `className`; all open/close/keyboard state lives in
- * {@link useWorkingDirPicker}. This component is a dumb render.
+ * The menu item a navigation key moves focus to, or `null` for any other key. `count` is never 0:
+ * the "Choose folder" item is always rendered and never disabled. ArrowUp from `currentIndex` -1
+ * (focus on no menu item) yields `count - 2`, pinned as-is by the component tests.
  */
-export function WorkingDirPicker({ workingDir, recentDirs, onPickDirectory, onSelectRecent, onClear, className, placement = 'down', invalid = false, onOpen, labels, useWorkingDirPicker: useWorkingDirPickerHook = useWorkingDirPicker, }) {
-    const panelId = useId();
-    const triggerRef = useRef(null);
-    const panelRef = useRef(null);
+function resolveMenuNavigationIndex({ key, currentIndex, count }) {
+    if (key === 'Home')
+        return 0;
+    if (key === 'End')
+        return count - 1;
+    if (key === 'ArrowDown')
+        return (currentIndex + 1 + count) % count;
+    if (key === 'ArrowUp')
+        return (currentIndex - 1 + count) % count;
+    return null;
+}
+/** Arrow/Home/End roving focus across the panel's enabled menu items; true when the key was handled. */
+function handleMenuNavigationKey({ event }) {
+    const menuItems = [...event.currentTarget.querySelectorAll(MENU_ITEM_SELECTOR)];
+    const currentIndex = menuItems.indexOf(document.activeElement);
+    const nextIndex = resolveMenuNavigationIndex({ key: event.key, currentIndex, count: menuItems.length });
+    if (nextIndex === null)
+        return false;
+    event.preventDefault();
+    menuItems[nextIndex]?.focus();
+    return true;
+}
+/** ArrowRight on "Recent folders" opens its flyout; ArrowLeft inside the flyout closes it again. */
+function handleRecentFlyoutKey({ event, showRecent, hideRecent }) {
+    const panel = event.currentTarget;
+    if (event.key === 'ArrowRight' && event.target === panel.querySelector(RECENT_ITEM_SELECTOR)) {
+        event.preventDefault();
+        showRecent();
+        window.setTimeout(() => {
+            panel.querySelector(`${RECENT_LIST_SELECTOR} [role="menuitem"]`)?.focus();
+        }, 0);
+        return;
+    }
+    if (event.key === 'ArrowLeft'
+        && event.target instanceof HTMLElement
+        && event.target.closest(RECENT_LIST_SELECTOR)) {
+        event.preventDefault();
+        hideRecent();
+        panel.querySelector(RECENT_ITEM_SELECTOR)?.focus();
+    }
+}
+/** Focus the first menu item on open; return focus to the trigger after the panel closes. */
+function useWorkingDirFocusHandoff({ open, triggerRef, panelRef }) {
     const wasOpenRef = useRef(false);
-    const { open, recentOpen, wrapRef, labels: t, toggle, pick, selectRecent, clear, showRecent, hideRecent, toggleRecent, } = useWorkingDirPickerHook({ onPickDirectory, onSelectRecent, onClear, onOpen, labels });
     useEffect(() => {
         if (open) {
             wasOpenRef.current = true;
-            panelRef.current?.querySelector('[role="menuitem"]:not(:disabled)')?.focus();
+            panelRef.current?.querySelector(MENU_ITEM_SELECTOR)?.focus();
             return;
         }
         if (!wasOpenRef.current)
@@ -142,48 +182,36 @@ export function WorkingDirPicker({ workingDir, recentDirs, onPickDirectory, onSe
         wasOpenRef.current = false;
         const timeout = window.setTimeout(() => triggerRef.current?.focus(), 0);
         return () => window.clearTimeout(timeout);
-    }, [open]);
+    }, [open, panelRef, triggerRef]);
+}
+function WorkingDirTrigger({ triggerRef, workingDir, invalid, open, panelId, t, toggle }) {
+    return (_jsx("div", { className: "jini-working-dir-trigger-row", children: _jsxs("button", { ref: triggerRef, type: "button", className: `jini-working-dir-trigger${invalid ? ' invalid' : ''}`, "data-testid": "working-dir-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": panelId, title: invalid ? t.missing : (workingDir ?? t.hint), onClick: toggle, children: [_jsx(Icon, { name: "folder", size: 13, className: "jini-working-dir-trigger-icon" }), _jsx("span", { className: "jini-working-dir-trigger-label", children: workingDir ? basename(workingDir) : t.trigger }), _jsx(Icon, { name: "chevron-down", size: 11, className: "jini-working-dir-trigger-chevron" })] }) }));
+}
+function WorkingDirRecentFlyout({ recentDirs, placement, t, selectRecent }) {
+    return (_jsx("div", { className: `jini-working-dir-flyout${placement === 'up' ? ' up' : ''}`, role: "menu", "data-testid": "working-dir-recent-list", children: recentDirs.length === 0 ? (_jsx("div", { className: "jini-working-dir-empty", children: t.recentEmpty })) : (recentDirs.map((dir) => (_jsxs("button", { type: "button", role: "menuitem", className: "jini-working-dir-recent-item", title: dir, onClick: () => selectRecent(dir), children: [_jsx(Icon, { name: "folder", size: 13, className: "jini-working-dir-item-icon" }), _jsx("span", { className: "jini-working-dir-recent-name", children: basename(dir) }), _jsx("span", { className: "jini-working-dir-recent-path", children: dir })] }, dir)))) }));
+}
+function WorkingDirPanel({ panelRef, panelId, placement, workingDir, recentDirs, canClear, t, picker, onKeyDown }) {
+    const { recentOpen, pick, selectRecent, clear, showRecent, hideRecent, toggleRecent } = picker;
+    return (_jsxs("div", { ref: panelRef, id: panelId, className: `jini-working-dir-panel${placement === 'up' ? ' up' : ''}`, role: "menu", "data-testid": "working-dir-panel", onKeyDown: onKeyDown, children: [_jsxs("button", { type: "button", role: "menuitem", className: "jini-working-dir-item", "data-testid": "working-dir-pick", onClick: pick, children: [_jsx(Icon, { name: "folder", size: 14, className: "jini-working-dir-item-icon" }), _jsx("span", { children: workingDir ? t.replace : t.pick })] }), _jsxs("div", { className: "jini-working-dir-submenu-row", onMouseEnter: showRecent, onMouseLeave: hideRecent, children: [_jsxs("button", { type: "button", role: "menuitem", className: "jini-working-dir-item", "aria-haspopup": "menu", "aria-expanded": recentOpen, "data-testid": "working-dir-recent", onClick: toggleRecent, children: [_jsx(Icon, { name: "history", size: 14, className: "jini-working-dir-item-icon" }), _jsx("span", { children: t.recent }), _jsx(Icon, { name: "chevron-right", size: 12, className: "jini-working-dir-item-chevron" })] }), recentOpen ? (_jsx(WorkingDirRecentFlyout, { recentDirs: recentDirs, placement: placement, t: t, selectRecent: selectRecent })) : null] }), canClear ? (_jsxs("button", { type: "button", role: "menuitem", className: "jini-working-dir-item", "data-testid": "working-dir-clear", onClick: clear, children: [_jsx(Icon, { name: "close", size: 14, className: "jini-working-dir-item-icon" }), _jsx("span", { children: t.clear })] })) : null] }));
+}
+/**
+ * Working-directory picker: a borderless trigger that opens a panel with
+ * "Choose folder" and a "Recent folders" submenu. Layout is left to the host
+ * via `className`; all open/close/keyboard state lives in
+ * {@link useWorkingDirPicker}. This component is a dumb render.
+ */
+export function WorkingDirPicker({ workingDir, recentDirs, onPickDirectory, onSelectRecent, onClear, className, placement = 'down', invalid = false, onOpen, labels, useWorkingDirPicker: useWorkingDirPickerHook = useWorkingDirPicker, }) {
+    const panelId = useId();
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const picker = useWorkingDirPickerHook({ onPickDirectory, onSelectRecent, onClear, onOpen, labels });
+    const { open, wrapRef, labels: t, toggle, showRecent, hideRecent } = picker;
+    useWorkingDirFocusHandoff({ open, triggerRef, panelRef });
     const handlePanelKeyDown = useCallback((event) => {
-        const menuItems = [...(panelRef.current?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? [])];
-        const currentIndex = menuItems.indexOf(document.activeElement);
-        if (event.key === 'ArrowDown'
-            || event.key === 'ArrowUp'
-            || event.key === 'Home'
-            || event.key === 'End') {
-            if (menuItems.length === 0)
-                return;
-            event.preventDefault();
-            const nextIndex = event.key === 'Home'
-                ? 0
-                : event.key === 'End'
-                    ? menuItems.length - 1
-                    : event.key === 'ArrowDown'
-                        ? (currentIndex + 1 + menuItems.length) % menuItems.length
-                        : (currentIndex - 1 + menuItems.length) % menuItems.length;
-            menuItems[nextIndex]?.focus();
+        if (handleMenuNavigationKey({ event }))
             return;
-        }
-        if (event.key === 'ArrowRight'
-            && event.target === panelRef.current?.querySelector('[data-testid="working-dir-recent"]')) {
-            event.preventDefault();
-            showRecent();
-            window.setTimeout(() => {
-                panelRef.current
-                    ?.querySelector('[data-testid="working-dir-recent-list"] [role="menuitem"]')
-                    ?.focus();
-            }, 0);
-            return;
-        }
-        if (event.key === 'ArrowLeft'
-            && event.target instanceof HTMLElement
-            && event.target.closest('[data-testid="working-dir-recent-list"]')) {
-            event.preventDefault();
-            hideRecent();
-            panelRef.current
-                ?.querySelector('[data-testid="working-dir-recent"]')
-                ?.focus();
-        }
+        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("div", { className: "jini-working-dir-trigger-row", children: _jsxs("button", { ref: triggerRef, type: "button", className: `jini-working-dir-trigger${invalid ? ' invalid' : ''}`, "data-testid": "working-dir-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": panelId, title: invalid ? t.missing : (workingDir ?? t.hint), onClick: toggle, children: [_jsx(Icon, { name: "folder", size: 13, className: "jini-working-dir-trigger-icon" }), _jsx("span", { className: "jini-working-dir-trigger-label", children: workingDir ? basename(workingDir) : t.trigger }), _jsx(Icon, { name: "chevron-down", size: 11, className: "jini-working-dir-trigger-chevron" })] }) }), open ? (_jsxs("div", { ref: panelRef, id: panelId, className: `jini-working-dir-panel${placement === 'up' ? ' up' : ''}`, role: "menu", "data-testid": "working-dir-panel", onKeyDown: handlePanelKeyDown, children: [_jsxs("button", { type: "button", role: "menuitem", className: "jini-working-dir-item", "data-testid": "working-dir-pick", onClick: pick, children: [_jsx(Icon, { name: "folder", size: 14, className: "jini-working-dir-item-icon" }), _jsx("span", { children: workingDir ? t.replace : t.pick })] }), _jsxs("div", { className: "jini-working-dir-submenu-row", onMouseEnter: showRecent, onMouseLeave: hideRecent, children: [_jsxs("button", { type: "button", role: "menuitem", className: "jini-working-dir-item", "aria-haspopup": "menu", "aria-expanded": recentOpen, "data-testid": "working-dir-recent", onClick: toggleRecent, children: [_jsx(Icon, { name: "history", size: 14, className: "jini-working-dir-item-icon" }), _jsx("span", { children: t.recent }), _jsx(Icon, { name: "chevron-right", size: 12, className: "jini-working-dir-item-chevron" })] }), recentOpen ? (_jsx("div", { className: `jini-working-dir-flyout${placement === 'up' ? ' up' : ''}`, role: "menu", "data-testid": "working-dir-recent-list", children: recentDirs.length === 0 ? (_jsx("div", { className: "jini-working-dir-empty", children: t.recentEmpty })) : (recentDirs.map((dir) => (_jsxs("button", { type: "button", role: "menuitem", className: "jini-working-dir-recent-item", title: dir, onClick: () => selectRecent(dir), children: [_jsx(Icon, { name: "folder", size: 13, className: "jini-working-dir-item-icon" }), _jsx("span", { className: "jini-working-dir-recent-name", children: basename(dir) }), _jsx("span", { className: "jini-working-dir-recent-path", children: dir })] }, dir)))) })) : null] }), workingDir && onClear ? (_jsxs("button", { type: "button", role: "menuitem", className: "jini-working-dir-item", "data-testid": "working-dir-clear", onClick: clear, children: [_jsx(Icon, { name: "close", size: 14, className: "jini-working-dir-item-icon" }), _jsx("span", { children: t.clear })] })) : null] })) : null] }));
+    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] }));
 }
 //# sourceMappingURL=WorkingDirPicker.js.map

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

@@ -66,6 +66,36 @@ export function startRemixIconFontRecovery({ fonts, timers, createFace }, { retr
             timers.clearTimeout(pending);
     };
 }
+/** The sheet's rules, or `undefined` when it has none yet or they are cross-origin inaccessible. */
+function readStylesheetRules({ stylesheet }) {
+    try {
+        return stylesheet.sheet?.cssRules;
+    }
+    catch {
+        return undefined;
+    }
+}
+function isRemixIconFaceRule(rule) {
+    if (rule.type !== 5)
+        return false; // CSSRule.FONT_FACE_RULE (no global constructor in SSR/fakes).
+    const family = rule.style.getPropertyValue('font-family').replace(/["']/g, '').trim();
+    return family === 'remixicon';
+}
+/** The first RemixIcon face's url(...) source, or `undefined` when there is no such face or it has no url(). */
+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];
+}
+/** The source URL tagged with the attempt number; only http(s) URLs accept a query parameter. */
+function retryFontUrl({ url, attempt }) {
+    // A distinct URL also bypasses the browser's cached failed font resource after a restart.
+    const freshUrl = new URL(url.href);
+    if (freshUrl.protocol === 'http:' || freshUrl.protocol === 'https:') {
+        freshUrl.searchParams.set('jini-font-retry', String(attempt));
+    }
+    return freshUrl;
+}
 /**
  * Recover this package's single WOFF2 face using the owning stylesheet's resolved URL.
  * CSSOM, rather than a bundled-module URL, preserves host asset rewriting and linked CSS bases.
@@ -75,36 +105,14 @@ export function startRemixIconFontRecovery({ fonts, timers, createFace }, { retr
  * @example startRemixIconStylesheetRecovery({ stylesheet, fonts, timers, baseUrl, createFontFace });
  */
 export function startRemixIconStylesheetRecovery({ stylesheet, fonts, timers, baseUrl, createFontFace }, options = {}) {
-    let rules;
-    try {
-        rules = stylesheet.sheet?.cssRules;
-    }
-    catch {
+    const rules = readStylesheetRules({ stylesheet });
+    const source = rules && findRemixIconFontSource({ rules });
+    if (!source)
         return () => { };
-    }
-    if (!rules)
-        return () => { };
-    for (const rule of Array.from(rules)) {
-        if (rule.type !== 5)
-            continue; // CSSRule.FONT_FACE_RULE (no global constructor in SSR/fakes).
-        const style = rule.style;
-        const family = style.getPropertyValue('font-family').replace(/["']/g, '').trim();
-        if (family !== 'remixicon')
-            continue;
-        // This package owns one url(...) WOFF2 source, not a general CSS font-source parser.
-        const source = style.getPropertyValue('src').match(/url\(\s*["']?([^"')]+)["']?\s*\)/)?.[1];
-        if (!source)
-            return () => { };
-        const url = new URL(source.trim(), stylesheet.sheet?.href ?? baseUrl);
-        return startRemixIconFontRecovery({ fonts, timers, createFace({ attempt }) {
-                // A distinct URL also bypasses the browser's cached failed font resource after a restart.
-                const freshUrl = new URL(url.href);
-                if (freshUrl.protocol === 'http:' || freshUrl.protocol === 'https:') {
-                    freshUrl.searchParams.set('jini-font-retry', String(attempt));
-                }
-                return createFontFace({ family: 'remixicon', source: `url("${freshUrl.href}") format("woff2")`, descriptors: { display: 'swap' } });
-            } }, options);
-    }
-    return () => { };
+    const url = new URL(source.trim(), stylesheet.sheet?.href ?? baseUrl);
+    return startRemixIconFontRecovery({ fonts, timers, createFace({ attempt }) {
+            const freshUrl = retryFontUrl({ url, attempt });
+            return createFontFace({ family: 'remixicon', source: `url("${freshUrl.href}") format("woff2")`, descriptors: { display: 'swap' } });
+        } }, options);
 }
 //# sourceMappingURL=remixicon-font-recovery.js.map