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

package/dist/features/sketch-editor/rules.js

@@ -136,12 +136,15 @@ export function exportedImageFileName(fileName, sourceExtension) {
     const slash = fileName.lastIndexOf('/');
     const baseName = slash >= 0 ? fileName.slice(slash + 1) : fileName;
     const stem = typeof sourceExtension === 'string'
-        ? baseName.toLowerCase().endsWith(sourceExtension.toLowerCase())
-            ? baseName.slice(0, baseName.length - sourceExtension.length)
-            : baseName
+        ? stripKnownExtension(baseName, sourceExtension)
         : baseName.replace(/\.[^./]+$/, '');
     return `${stem || 'sketch'}.png`;
 }
+function stripKnownExtension(baseName, extension) {
+    return baseName.toLowerCase().endsWith(extension.toLowerCase())
+        ? baseName.slice(0, baseName.length - extension.length)
+        : baseName;
+}
 export function exportedImageResultFileName(result, fallback) {
     if (result && typeof result === 'object' && typeof result.fileName === 'string') {
         return result.fileName;
@@ -197,15 +200,13 @@ export function buildSketchTooltipLabels(t) {
  * in `overrides` matches (caller should leave the node untouched).
  */
 export function translateDomTextValue(value, overrides) {
-    // Every group in this pattern is quantified with `*` (zero-or-more), so it
-    // matches every string input, including `''` — `.match()` can never return
-    // null here, and each capture group is always defined (possibly empty).
-    // The nullable return/`| undefined` group types are just `RegExp.match`'s
-    // and `RegExpMatchArray`'s general signatures, not a real runtime path.
-    const match = value.match(/^(\s*)([\s\S]*?)(\s*)$/);
-    const leading = match[1];
-    const core = match[2];
-    const trailing = match[3];
+    // Split into leading whitespace, core, trailing whitespace (an all-whitespace
+    // value is all leading). `trimStart`/`trimEnd` strip exactly regex `\s`.
+    const coreStart = value.length - value.trimStart().length;
+    const leading = value.slice(0, coreStart);
+    const rest = value.slice(coreStart);
+    const core = rest.trimEnd();
+    const trailing = rest.slice(core.length);
     const normalized = core.replace(/\s+/g, ' ').trim();
     if (!normalized)
         return null;

package/dist/features/skills/dependencies.js

@@ -1,3 +1,4 @@
+import { omitKeys } from '../../utils/omit-keys.js';
 const DEFAULT_FAKE_SKILLS = [
     {
         id: 'skill-summarize',
@@ -10,9 +11,13 @@ const DEFAULT_FAKE_SKILLS = [
     },
 ];
 let nextFakeId = 1;
+function takeFakeSkillId() {
+    const id = `fake-skill-${nextFakeId}`;
+    nextFakeId += 1;
+    return id;
+}
 function toSummary(detail) {
-    const { body: _body, ...summary } = detail;
-    return summary;
+    return omitKeys(detail, ['body']);
 }
 /**
  * An in-memory test/demo double. Per this package's established convention
@@ -39,7 +44,7 @@ export function createFakeSkillsPort(options = {}) {
             return delay([...(files.get(id) ?? [])]);
         },
         createSkill(payload) {
-            const id = `fake-skill-${nextFakeId++}`;
+            const id = takeFakeSkillId();
             const detail = {
                 id,
                 name: payload.name,
@@ -58,7 +63,7 @@ export function createFakeSkillsPort(options = {}) {
                 return Promise.reject(new Error(`Unknown skill: ${id}`));
             // A built-in edit writes a NEW user-owned shadow copy, same as the
             // origin — the requested id is never mutated in place.
-            const targetId = existing.source === 'user' ? id : `fake-skill-${nextFakeId++}`;
+            const targetId = existing.source === 'user' ? id : takeFakeSkillId();
             const detail = {
                 ...existing,
                 id: targetId,

package/dist/features/skills/react/components/SkillRow.js

@@ -18,7 +18,8 @@ export function SkillRow({ skill, locale, enabled, expanded, editing, body, body
     // Built-in skills are never edited in place — "editing" one creates a
     // user-owned override, so every edit affordance says so.
     const editActionLabel = builtIn ? l.overrideCreateLabel : l.editLabel;
-    return (_jsxs("div", { className: skillRowClassName({ enabled, expanded }), "data-testid": `skill-row-${skill.id}`, children: [_jsxs("div", { className: "jini-skills-row-head", children: [_jsx(SkillRowSummaryButton, { skill: skill, locale: locale, expanded: expanded, onToggleExpanded: onToggleExpanded, labels: l, agentHandle: agentHandle }), _jsxs("div", { className: "jini-skills-row-actions", children: [isDeletableSkill(skill) && confirmDelete ? (_jsx(SkillRowDeleteConfirm, { onCommitDelete: onCommitDelete, onCancelDelete: onCancelDelete, labels: l, agentHandle: agentHandle })) : (_jsx(SkillRowEditDeleteActions, { skill: skill, editActionLabel: editActionLabel, onStartEdit: onStartEdit, onArmDelete: onArmDelete, labels: l, agentHandle: agentHandle })), _jsxs("label", { className: "toggle-switch toggle-switch-sm jini-skills-row-enable", title: l.enableToggleLabel, children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (event) => onToggleEnabled(event.target.checked), "aria-label": l.enableToggleLabel, ...agentHandleProps({}, { base: agentHandle, action: 'enabled', role: 'checkbox', label: l.enableToggleLabel }) }), _jsx("span", { className: "toggle-slider" })] })] })] }), confirmBuiltInEdit ? (_jsx(SkillRowBuiltInEditWarning, { onCancelBuiltInEdit: onCancelBuiltInEdit, onConfirmBuiltInEdit: onConfirmBuiltInEdit, labels: l, agentHandle: agentHandle })) : null, expanded && !editing ? (_jsx(SkillRowDetail, { body: body, bodyLoading: bodyLoading, files: files, filesLoading: filesLoading, labels: l })) : null, editing && draft ? (_jsx(SkillDraftForm, { heading: editActionLabel, subheading: skill.id, draft: draft, onDraftChange: onDraftChange, error: draftError, saving: draftSaving, isEdit: true, isBuiltInOverride: builtIn, onCancel: onCancelEdit, onSubmit: onSubmitEdit, labels: labels, ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'edit-form' }) } : {}) })) : null] }));
+    const editFormHandleProps = agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'edit-form' }) } : {};
+    return (_jsxs("div", { className: skillRowClassName({ enabled, expanded }), "data-testid": `skill-row-${skill.id}`, children: [_jsxs("div", { className: "jini-skills-row-head", children: [_jsx(SkillRowSummaryButton, { skill: skill, locale: locale, expanded: expanded, onToggleExpanded: onToggleExpanded, labels: l, agentHandle: agentHandle }), _jsxs("div", { className: "jini-skills-row-actions", children: [isDeletableSkill(skill) && confirmDelete ? (_jsx(SkillRowDeleteConfirm, { onCommitDelete: onCommitDelete, onCancelDelete: onCancelDelete, labels: l, agentHandle: agentHandle })) : (_jsx(SkillRowEditDeleteActions, { skill: skill, editActionLabel: editActionLabel, onStartEdit: onStartEdit, onArmDelete: onArmDelete, labels: l, agentHandle: agentHandle })), _jsxs("label", { className: "toggle-switch toggle-switch-sm jini-skills-row-enable", title: l.enableToggleLabel, children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (event) => onToggleEnabled(event.target.checked), "aria-label": l.enableToggleLabel, ...agentHandleProps({}, { base: agentHandle, action: 'enabled', role: 'checkbox', label: l.enableToggleLabel }) }), _jsx("span", { className: "toggle-slider" })] })] })] }), confirmBuiltInEdit ? (_jsx(SkillRowBuiltInEditWarning, { onCancelBuiltInEdit: onCancelBuiltInEdit, onConfirmBuiltInEdit: onConfirmBuiltInEdit, labels: l, agentHandle: agentHandle })) : null, expanded && !editing ? (_jsx(SkillRowDetail, { body: body, bodyLoading: bodyLoading, files: files, filesLoading: filesLoading, labels: l })) : null, editing && draft ? (_jsx(SkillDraftForm, { heading: editActionLabel, subheading: skill.id, draft: draft, onDraftChange: onDraftChange, error: draftError, saving: draftSaving, isEdit: true, isBuiltInOverride: builtIn, onCancel: onCancelEdit, onSubmit: onSubmitEdit, labels: labels, ...editFormHandleProps })) : null] }));
 }
 function skillRowClassName({ enabled, expanded }) {
     return `jini-skills-row${enabled ? '' : ' jini-skills-row-disabled'}${expanded ? ' jini-skills-row-expanded' : ''}`;

package/dist/features/skills/react/components/SkillsTab.js

@@ -21,7 +21,8 @@ export function SkillsTab({ port, disabledSkillIds, onToggleEnabled, locale = 'e
     const tab = useSkillsTab({ port, locale });
     const l = resolveLabels({ defaults: DEFAULT_SKILLS_TAB_LABELS, t }, { labels });
     const loadErrorLabel = labels?.loadErrorLabel ?? t('Could not load skills: {error}', { error: tab.loadError ?? '' });
-    return (_jsxs("section", { className: "jini-settings-section jini-settings-skills", children: [_jsx(SkillsTabToolbar, { tab: tab, labels: l, agentHandle: agentHandle }), tab.loadError ? (_jsx("div", { className: "jini-empty-card jini-empty-card-error", children: _jsx("strong", { children: loadErrorLabel }) })) : null, tab.creating ? (_jsx(SkillDraftForm, { heading: l.newSkillLabel, draft: tab.draft, onDraftChange: tab.setDraft, error: tab.draftError, saving: tab.draftSaving, isEdit: false, onCancel: tab.cancelDraft, onSubmit: tab.submitDraft, labels: labels, ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'create-form' }) } : {}) })) : null, !tab.loading && tab.filteredSkills.length === 0 ? (_jsx("div", { className: "jini-empty-card", children: _jsx("strong", { children: l.noResultsLabel }) })) : (_jsx(SkillsTabRows, { tab: tab, disabledSkillIds: disabledSkillIds, onToggleEnabled: onToggleEnabled, locale: locale, labels: labels, agentHandle: agentHandle }))] }));
+    const createFormHandleProps = agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'create-form' }) } : {};
+    return (_jsxs("section", { className: "jini-settings-section jini-settings-skills", children: [_jsx(SkillsTabToolbar, { tab: tab, labels: l, agentHandle: agentHandle }), tab.loadError ? (_jsx("div", { className: "jini-empty-card jini-empty-card-error", children: _jsx("strong", { children: loadErrorLabel }) })) : null, tab.creating ? (_jsx(SkillDraftForm, { heading: l.newSkillLabel, draft: tab.draft, onDraftChange: tab.setDraft, error: tab.draftError, saving: tab.draftSaving, isEdit: false, onCancel: tab.cancelDraft, onSubmit: tab.submitDraft, labels: labels, ...createFormHandleProps })) : null, !tab.loading && tab.filteredSkills.length === 0 ? (_jsx("div", { className: "jini-empty-card", children: _jsx("strong", { children: l.noResultsLabel }) })) : (_jsx(SkillsTabRows, { tab: tab, disabledSkillIds: disabledSkillIds, onToggleEnabled: onToggleEnabled, locale: locale, labels: labels, agentHandle: agentHandle }))] }));
 }
 /** Search box, "New skill" button, and the source/mode/(category) selects. */
 function SkillsTabToolbar({ tab, labels: l, agentHandle, }) {

package/dist/features/skills/rules.js

@@ -146,16 +146,16 @@ const modeValue = (skill) => skill.mode;
 const categoryValue = (skill) => typeof skill.category === 'string' && skill.category ? skill.category : null;
 /** The data-derived pills (`mode`, `category`): option SET from every skill,
  *  COUNTS from `matching` — see `skillFilterOptions`. */
-function valueFilterOptions({ skills, matching, valueOf, }) {
+function valueFilterOptions({ skills, matching, valueOf: valueFor, }) {
     const values = new Set();
     for (const skill of skills) {
-        const value = valueOf(skill);
+        const value = valueFor(skill);
         if (value !== null)
             values.add(value);
     }
     const counts = new Map();
     for (const skill of matching) {
-        const value = valueOf(skill);
+        const value = valueFor(skill);
         if (value === null)
             continue;
         counts.set(value, (counts.get(value) ?? 0) + 1);

package/dist/features/source-config-list/agent-handles.js

@@ -39,6 +39,7 @@
  * why cards are keyed by id rather than list position.
  */
 import { agentHandle, buildAgentListHandles } from '@jini-ai/agentic';
+import { trimChars } from '../../utils/trim-chars.js';
 /** Segments of a derived handle: `<base>-field-<key>` and `<base>-<action>` share one joiner. */
 const HANDLE_SEPARATOR = '-';
 /** The namespace every host-described field sits under — see this module's doc for why. */
@@ -65,11 +66,11 @@ const LIST_ITEM_NAMESPACE = 'item';
  * @complexity O(n) in `segment.length`.
  */
 function sanitizeHandleSegment(segment) {
-    return segment
+    const separated = segment
         .replace(/([a-z0-9])([A-Z])/g, `$1${HANDLE_SEPARATOR}$2`)
         .toLowerCase()
-        .replace(/[^a-z0-9]+/g, HANDLE_SEPARATOR)
-        .replace(/^-+|-+$/g, '');
+        .replace(/[^a-z0-9]+/g, HANDLE_SEPARATOR);
+    return trimChars(separated, '-');
 }
 /**
  * The handle for one action or sub-control published under `base`.

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

@@ -122,7 +122,9 @@ function useItemCardEdit({ source, fieldSpecs, onUpdate }) {
 /** The expanded body: the Edit/Save/Cancel toggle, the editable or read-only fields, and the test control. */
 function ItemCardBody(props) {
     const { capabilities, testing, testResult, onTest, agentHandle, edit } = props;
-    return (_jsxs("div", { className: "source-config-item-card-body", children: [capabilities.canUpdate ? _jsx(ItemCardEditToggle, { ...props, edit: edit }) : null, edit.editing ? _jsx(ItemCardEditFields, { ...props, edit: edit }) : _jsx(ItemCardReadOnlyFields, { ...props }), capabilities.canTest ? (_jsx(SourceConfigTestControl, { running: testing, disabled: isAnyActionPending(props), onTest: onTest, ...(testResult ? { result: testResult } : {}), ...(agentHandle ? { agentHandle: sourceConfigActionHandle(agentHandle, 'test') } : {}) })) : null] }));
+    const testResultProps = testResult ? { result: testResult } : {};
+    const testHandleProps = agentHandle ? { agentHandle: sourceConfigActionHandle(agentHandle, 'test') } : {};
+    return (_jsxs("div", { className: "source-config-item-card-body", children: [capabilities.canUpdate ? _jsx(ItemCardEditToggle, { ...props, edit: edit }) : null, edit.editing ? _jsx(ItemCardEditFields, { ...props, edit: edit }) : _jsx(ItemCardReadOnlyFields, { ...props }), capabilities.canTest ? (_jsx(SourceConfigTestControl, { running: testing, disabled: isAnyActionPending(props), onTest: onTest, ...testResultProps, ...testHandleProps })) : null] }));
 }
 function ItemCardEditToggle(props) {
     const { updating, agentHandle, edit } = props;

package/dist/features/tab-strip/react/components/TabBar.hooks.js

@@ -138,9 +138,11 @@ export function useActiveTabInView({ activeId }, _optional = {}) {
             const tabBox = tab.getBoundingClientRect();
             // A host's end padding (e.g. room for an edge fade) counts as off-screen.
             const visibleRight = stripBox.right - (parseFloat(getComputedStyle(strip).paddingRight) || 0);
-            if (tabBox.left < stripBox.left)
+            if (tabBox.left < stripBox.left) {
                 strip.scrollLeft += tabBox.left - stripBox.left;
-            else if (tabBox.right > visibleRight)
+                return;
+            }
+            if (tabBox.right > visibleRight)
                 strip.scrollLeft += tabBox.right - visibleRight;
         }
         scrollActiveTabIntoView();

package/dist/features/version-manager/react/components/VersionPreviewFrame.js

@@ -11,6 +11,9 @@ export function VersionPreviewFrame({ previewDocument, frameReady, onFrameLoad,
     const [frameRef, canvasSize] = usePreviewCanvasSize();
     const preset = findViewportPreset(viewportPresets, viewport);
     const scale = effectivePreviewScale(preset, 1, canvasSize, DEFAULT_PREVIEW_CANVAS_PADDING);
-    return (_jsx("div", { className: "jini-version-preview", ref: frameRef, children: error ? (_jsx("div", { className: "jini-viewer-empty", role: "alert", children: error })) : (_jsxs(_Fragment, { children: [previewDocument ? (_jsx("div", { className: "jini-preview-viewport", style: previewViewportStyle(preset, scale, 1), children: _jsx("div", { className: "jini-preview-frame-clip", children: _jsx("div", { style: previewScaleShellStyle(preset, 1), children: _jsx("iframe", { title: title, sandbox: "allow-scripts allow-downloads", srcDoc: previewDocument, onLoad: onFrameLoad }) }) }) })) : !loading && !loadingContent ? (_jsx("div", { className: "jini-viewer-empty", children: t('No preview available.') })) : null, loading || loadingContent || (previewDocument && !frameReady) ? (_jsx("div", { className: "jini-version-preview-overlay", role: "status", "aria-label": t('Loading preview…'), children: _jsx("span", { className: "jini-version-preview-spinner", "aria-hidden": "true" }) })) : null] })) }));
+    const showEmpty = !previewDocument && !loading && !loadingContent;
+    const showLoading = loading || loadingContent || (previewDocument && !frameReady);
+    const emptyState = showEmpty ? _jsx("div", { className: "jini-viewer-empty", children: t('No preview available.') }) : null;
+    return (_jsx("div", { className: "jini-version-preview", ref: frameRef, children: error ? (_jsx("div", { className: "jini-viewer-empty", role: "alert", children: error })) : (_jsxs(_Fragment, { children: [previewDocument ? (_jsx("div", { className: "jini-preview-viewport", style: previewViewportStyle(preset, scale, 1), children: _jsx("div", { className: "jini-preview-frame-clip", children: _jsx("div", { style: previewScaleShellStyle(preset, 1), children: _jsx("iframe", { title: title, sandbox: "allow-scripts allow-downloads", srcDoc: previewDocument, onLoad: onFrameLoad }) }) }) })) : null, emptyState, showLoading ? (_jsx("div", { className: "jini-version-preview-overlay", role: "status", "aria-label": t('Loading preview…'), children: _jsx("span", { className: "jini-version-preview-spinner", "aria-hidden": "true" }) })) : null] })) }));
 }
 //# sourceMappingURL=VersionPreviewFrame.js.map

package/dist/features/version-manager/react/components/VersionSidebar.js

@@ -4,11 +4,13 @@ import { useT } from '../../../i18n/index.js';
  *  independent of whatever the preview pane is doing. */
 export function VersionSidebar({ countLabel, search, onSearchChange, showSearch, loading, versions, visibleVersions, selectedVersionId, onSelect, onPrefetch, formatDate, sourceLabel, sourceClassName, restoredFrom, }) {
     const t = useT();
-    return (_jsxs("div", { className: "jini-version-sidebar", children: [_jsx("div", { className: "jini-version-sidebar-head", children: _jsx("span", { className: "jini-version-count", children: countLabel }) }), showSearch ? (_jsxs("div", { className: "jini-version-search", children: [_jsx("input", { type: "search", value: search, onChange: (event) => onSearchChange(event.target.value), placeholder: t('Search…'), "aria-label": t('Search…') }), search ? (_jsx("button", { type: "button", className: "jini-version-search-clear", "aria-label": t('Clear'), onClick: () => onSearchChange(''), children: t('Clear') })) : null] })) : null, _jsx("div", { className: "jini-version-list", role: "listbox", "aria-label": t('Version history'), children: loading ? (_jsx("div", { className: "jini-version-skeleton-list", role: "status", "aria-label": t('Loading versions…'), children: [0, 1, 2, 3].map((row) => (_jsx("div", { className: "jini-version-skeleton-item", "aria-hidden": "true" }, row))) })) : versions.length === 0 ? (_jsx("div", { className: "jini-version-empty", children: t('No versions yet.') })) : visibleVersions.length === 0 ? (_jsx("div", { className: "jini-version-empty", children: t('No results for “{query}”.', { query: search.trim() }) })) : (visibleVersions.map((version) => {
-                    const selected = version.id === selectedVersionId;
-                    const itemRestoredFrom = restoredFrom(version);
-                    const prefetch = () => onPrefetch(version.id);
-                    return (_jsxs("button", { type: "button", className: `jini-version-item${selected ? ' active' : ''}`, role: "option", "aria-selected": selected, onClick: () => onSelect(version.id), onMouseEnter: prefetch, onFocus: prefetch, children: [_jsxs("span", { className: "jini-version-item-top", children: [version.current ? _jsx("span", { className: "jini-version-current-badge", children: t('Current') }) : null, _jsx("span", { className: `jini-version-source-badge ${sourceClassName(version)}`, children: sourceLabel(version) }), _jsx("span", { className: "jini-version-time", children: formatDate(version) })] }), _jsx("span", { className: "jini-version-item-title", children: version.prompt || version.label || t('Version {version}', { version: version.version }) }), _jsxs("span", { className: "jini-version-item-meta", children: [t('Version {version}', { version: version.version }), itemRestoredFrom ? (_jsx("span", { className: "jini-version-item-restored", children: t('Restored from v{version}', { version: itemRestoredFrom.version }) })) : null] })] }, version.id));
-                })) })] }));
+    const noResultsMessage = visibleVersions.length === 0 ? t('No results for “{query}”.', { query: search.trim() }) : null;
+    const emptyMessage = versions.length === 0 ? t('No versions yet.') : noResultsMessage;
+    return (_jsxs("div", { className: "jini-version-sidebar", children: [_jsx("div", { className: "jini-version-sidebar-head", children: _jsx("span", { className: "jini-version-count", children: countLabel }) }), showSearch ? (_jsxs("div", { className: "jini-version-search", children: [_jsx("input", { type: "search", value: search, onChange: (event) => onSearchChange(event.target.value), placeholder: t('Search…'), "aria-label": t('Search…') }), search ? (_jsx("button", { type: "button", className: "jini-version-search-clear", "aria-label": t('Clear'), onClick: () => onSearchChange(''), children: t('Clear') })) : null] })) : null, _jsxs("div", { className: "jini-version-list", role: "listbox", "aria-label": t('Version history'), children: [loading ? (_jsx("div", { className: "jini-version-skeleton-list", role: "status", "aria-label": t('Loading versions…'), children: [0, 1, 2, 3].map((row) => (_jsx("div", { className: "jini-version-skeleton-item", "aria-hidden": "true" }, row))) })) : null, !loading && emptyMessage ? _jsx("div", { className: "jini-version-empty", children: emptyMessage }) : null, !loading && !emptyMessage ? (visibleVersions.map((version) => {
+                        const selected = version.id === selectedVersionId;
+                        const itemRestoredFrom = restoredFrom(version);
+                        const prefetch = () => onPrefetch(version.id);
+                        return (_jsxs("button", { type: "button", className: `jini-version-item${selected ? ' active' : ''}`, role: "option", "aria-selected": selected, onClick: () => onSelect(version.id), onMouseEnter: prefetch, onFocus: prefetch, children: [_jsxs("span", { className: "jini-version-item-top", children: [version.current ? _jsx("span", { className: "jini-version-current-badge", children: t('Current') }) : null, _jsx("span", { className: `jini-version-source-badge ${sourceClassName(version)}`, children: sourceLabel(version) }), _jsx("span", { className: "jini-version-time", children: formatDate(version) })] }), _jsx("span", { className: "jini-version-item-title", children: version.prompt || version.label || t('Version {version}', { version: version.version }) }), _jsxs("span", { className: "jini-version-item-meta", children: [t('Version {version}', { version: version.version }), itemRestoredFrom ? (_jsx("span", { className: "jini-version-item-restored", children: t('Restored from v{version}', { version: itemRestoredFrom.version }) })) : null] })] }, version.id));
+                    })) : null] })] }));
 }
 //# sourceMappingURL=VersionSidebar.js.map

package/dist/features/version-manager/react/hooks/usePreviewCanvasSize.js

@@ -16,7 +16,7 @@ export function usePreviewCanvasSize() {
         // dead-branch-gets-refactored-away rule.
         const el = ref.current;
         if (!el)
-            return;
+            return undefined;
         const measure = () => {
             const rect = el.getBoundingClientRect();
             setSize({ width: rect.width, height: rect.height });

package/dist/features/version-manager/react/hooks/useVersionManager.js

@@ -108,10 +108,8 @@ export function useVersionManager(dependencies, options) {
         setVersions(nextVersions);
         const currentVersion = nextVersions.find((version) => version.current);
         seedCurrentVersionContent({ currentVersion, currentContent, contentCache: contentCacheRef.current });
-        const nextSelected = (preferredId ? nextVersions.find((version) => version.id === preferredId) : null) ??
-            currentVersion ??
-            nextVersions[0] ??
-            null;
+        const preferredVersion = preferredId ? nextVersions.find((version) => version.id === preferredId) : null;
+        const nextSelected = preferredVersion ?? currentVersion ?? nextVersions[0] ?? null;
         setSelectedId(nextSelected?.id ?? null);
         setLoading(false);
     }, [port, fileRef, currentContent]);
@@ -125,7 +123,7 @@ export function useVersionManager(dependencies, options) {
         if (!selectedId) {
             setSelectedContent(null);
             setSelectedContentVersionId(null);
-            return;
+            return undefined;
         }
         const cached = contentCacheRef.current.get(selectedId);
         if (cached !== undefined) {
@@ -138,7 +136,7 @@ export function useVersionManager(dependencies, options) {
             else {
                 setError(null);
             }
-            return;
+            return undefined;
         }
         // Cache miss: keep the previous preview mounted (don't clear
         // `selectedContent`) so switching versions never blanks to empty while
@@ -177,7 +175,7 @@ export function useVersionManager(dependencies, options) {
     // is ever missed.
     useEffect(() => {
         if (!previewDocument || loadedPreviewDocument === previewDocument)
-            return;
+            return undefined;
         const fallback = setTimeout(() => setLoadedPreviewDocument(previewDocument), PREVIEW_LOAD_FALLBACK_MS);
         return () => clearTimeout(fallback);
     }, [previewDocument, loadedPreviewDocument]);

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

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

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

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

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

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

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

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

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

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

package/dist/react/components/AgentIcon.js

@@ -12,7 +12,6 @@ const ICON_EXT = {
     gemini: 'svg',
     opencode: 'svg',
     'cursor-agent': 'svg',
-    copilot: 'svg',
     qwen: 'svg',
     qoder: 'svg',
     deepseek: 'svg',

package/dist/react/components/BrandLogo.js

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

package/dist/react/components/CustomSelect.js

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

package/dist/react/components/EditorIcon.js

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

package/dist/react/components/Loading.js

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

package/dist/react/components/OnboardingChipField.js

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

package/dist/react/components/OnboardingDropdown.js

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

package/dist/react/components/PaletteTweaks.js

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

package/dist/react/components/PillButton.js

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

package/dist/react/components/PopoverMenu.js

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

package/dist/react/components/RemixIcon.js

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