@jini-ai/ui 0.4.3 → 0.4.5

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

@@ -1,16 +1,43 @@
 import { agentHandle } from "@jini-ai/agentic";
-export function tabHandleProps({ tab }) {
+/**
+ * @file TabBar's derived props and WAI-ARIA automatic-activation keyboard behavior.
+ * Data and event logic live here; TabBar.tsx keeps the JSX render helpers. Arrow keys activate
+ * immediately and move focus, while disabled tabs are skipped and non-tab controls keep their keys.
+ */
+/** The `TabBarButton` component's own `agentHandle()` spread, as a plain function rather than an
+ *  inline ternary in its JSX — one more small piece pulled out of `TabBar.tsx` for the same
+ *  complexity-gate reason that component's own doc comment gives.
+ * @example tabHandleProps({ tab: { id: "a", label: "A", handle: "tab-a" } });
+ */
+export function tabHandleProps({ tab }, _optional = {}) {
     return tab.handle ? agentHandle({ handle: tab.handle }, { role: "button", label: tab.handleLabel ?? tab.label }) : {};
 }
 const TAB_BAR_NAV_KEYS = ["ArrowRight", "ArrowLeft", "Home", "End"];
 function isTabBarNavKey(key) {
     return TAB_BAR_NAV_KEYS.includes(key);
 }
+/** Indices of every non-disabled tab, in `tabs` order — the only positions a key can land on. */
 function enabledTabIndices(tabs) {
     return tabs.reduce((acc, tab, i) => (tab.disabled ? acc : [...acc, i]), []);
 }
-/** Resolve arrow/Home/End navigation in enabled-tab order; null means no navigation. */
-export function resolveTabBarKeyTarget({ tabs, activeId, key }) {
+/**
+ * Resolve arrow/Home/End navigation in enabled-tab order; null means no navigation.
+ *
+ * Resolves which tab a keydown on the tablist should move to, for the WAI-ARIA "automatic
+ * activation" tabs pattern (arrow keys change the selection immediately, not just focus).
+ *
+ * @param input.tabs - The tab row in DOM order.
+ * @param input.activeId - The currently active tab's id.
+ * @param input.key - `KeyboardEvent.key` from the tablist's own `onKeyDown`.
+ * @returns The target tab's index into `tabs`, or `null` when `key` isn't a nav key or every tab
+ *   is disabled. Disabled tabs are never a target. Home/End always resolve to the first/last
+ *   enabled tab. When `activeId` matches no enabled tab (unset, unknown id, or a disabled tab),
+ *   ArrowRight/Home resolve to the first enabled tab and ArrowLeft/End resolve to the last —
+ *   the same "nothing to move from" case Home/End already answer explicitly.
+ * @complexity O(n²) time, O(n) space (the enabled-index reducer copies its accumulator) in `tabs.length`.
+ * @example resolveTabBarKeyTarget({ tabs, activeId: "a", key: "ArrowRight" });
+ */
+export function resolveTabBarKeyTarget({ tabs, activeId, key }, _optional = {}) {
     if (!isTabBarNavKey(key))
         return null;
     const enabled = enabledTabIndices(tabs);
@@ -32,7 +59,20 @@ export function resolveTabBarKeyTarget({ tabs, activeId, key }) {
         return enabled[enabled.length - 1];
     return enabled[(activePos - 1 + enabled.length) % enabled.length];
 }
-export function resolveTabBarTabIndex({ tabs, activeId, tab }) {
+/**
+ * Resolves one tab's roving-tabindex value — exactly one tab in a `TabBar` is ever in the native
+ * Tab order at a time (WAI-ARIA APG roving tabindex), so arrowing between tabs never lets a plain
+ * Tab keypress land on more than one of them.
+ *
+ * @param input.tabs - The tab row in DOM order.
+ * @param input.activeId - The currently active tab's id.
+ * @param input.tab - The tab being rendered.
+ * @returns `0` for the enabled active tab, or for the first enabled tab when `activeId` matches
+ *   no enabled tab; `-1` otherwise, including every disabled tab.
+ * @complexity O(n) in `tabs.length`.
+ * @example resolveTabBarTabIndex({ tabs, activeId: "a", tab: tabs[0]! });
+ */
+export function resolveTabBarTabIndex({ tabs, activeId, tab }, _optional = {}) {
     if (tab.disabled)
         return -1;
     if (tabs.some((t) => t.id === activeId && !t.disabled))
@@ -40,8 +80,26 @@ export function resolveTabBarTabIndex({ tabs, activeId, tab }) {
     const firstEnabled = tabs.find((t) => !t.disabled);
     return firstEnabled?.id === tab.id ? 0 : -1;
 }
-export function useTabBarKeyboard({ tabs, activeId, onChange }) {
+/**
+ * Wires {@link resolveTabBarKeyTarget} into a tablist's `onKeyDown`: on a nav key, changes the
+ * active tab and moves DOM focus to the new tab button, so focus and selection never drift apart.
+ * Keydowns that did not originate inside a `[role="tab"]` are ignored, so a non-tab control hosted
+ * in the same tablist keeps its own arrow/Home/End keys.
+ *
+ * @param input.tabs - The tab row in DOM order.
+ * @param input.activeId - The currently active tab's id.
+ * @param input.onChange - `TabBarProps.onChange`, called with the target tab's id.
+ * @returns `onKeyDown`, for the tablist container's own React event prop.
+ * @complexity O(n²) time, O(n) space (the enabled-index reducer copies its accumulator) in `tabs.length` per keydown (bounded by the on-screen tab count).
+ * @example useTabBarKeyboard({ tabs, activeId, onChange });
+ */
+export function useTabBarKeyboard({ tabs, activeId, onChange }, _optional = {}) {
     function onKeyDown(e) {
+        // A tablist may legitimately hold a control that is NOT a tab — `AccessTokensTab.tsx`'s
+        // "+ Add custom provider" button sits inside its `role="tablist"` div and is Tab-reachable.
+        // React's onKeyDown here fires for keydowns anywhere in the subtree, so without this origin
+        // check an arrow press on that button would change the selection and pull focus onto a tab,
+        // silently moving the operator off the control they were standing on.
         // Controls inside the strip that are not tabs keep their own navigation keys.
         if (!(e.target instanceof Element) || !e.target.closest('[role="tab"]'))
             return;

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

@@ -2,16 +2,27 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { TabStripFrame } from "./TabStripFrame.js";
 import { agentHandle } from "@jini-ai/agentic";
 import { resolveTabBarTabIndex, tabHandleProps, useTabBarKeyboard } from "./TabBar.hooks.js";
+/** The visually-hidden accessible-name SUFFIX {@link TabBarTab.dot} adds — e.g. "GitHub Pages,
+ *  Connected", never "Connected GitHub Pages". Deliberately its own function rather than folded into
+ *  the visual dot span rendered before the label (`TabBarButton` below): the visual dot is
+ *  `aria-hidden` and belongs immediately before the label, where a leading bullet reads naturally,
+ *  but the ACCESSIBLE text has to come AFTER the label text in DOM order for the tab's accessible
+ *  name (label + this suffix, concatenated in DOM order) to read as a sentence rather than a
+ *  fragment stitched on backwards. Split out for the same complexity-gate reason {@link
+ *  TabBarButton}'s own doc gives. */
 function tabDotAccessibleSuffix(tab) {
     if (!tab.dot || !tab.dotLabel)
         return null;
     return _jsxs("span", { className: "visually-hidden", children: [", ", tab.dotLabel] });
 }
+/** One tab button. A named top-level component avoids the nesting penalty for branches inside
+ * an inline map callback under the cyclomatic/cognitive complexity gate. Derived props live in
+ * TabBar.hooks.tsx; tabDotAccessibleSuffix stays here because it renders JSX. */
 function TabBarButton({ tab, active, tabIndex, onChange, }) {
     return (_jsxs("button", { type: "button", role: "tab", className: "tab-bar-item", "aria-selected": active, "aria-label": tab.dot && tab.dotLabel ? [tab.label + ", " + tab.dotLabel, tab.tag, tab.count].filter((part) => part !== undefined).join(" ") : undefined, "aria-disabled": tab.disabled || undefined, disabled: tab.disabled, tabIndex: tabIndex, onClick: tab.disabled ? undefined : () => onChange(tab.id), ...tabHandleProps({ tab: tab }), children: [tab.dot ? _jsx("span", { className: "tab-bar-dot", "aria-hidden": "true" }) : null, tab.icon ? (_jsx("span", { className: "tab-bar-icon", "aria-hidden": "true", children: tab.icon })) : null, tab.label, tabDotAccessibleSuffix(tab), tab.tag ? _jsx("span", { className: "tab-bar-tag", children: tab.tag }) : null, tab.count !== undefined ? _jsx("span", { className: "tab-bar-count", children: tab.count }) : null] }));
 }
 /** Controlled button-based selection strip, including roving focus and optional agent handles. */
-export function TabBar({ tabs, activeId, onChange, ariaLabel, containerHandle }) {
+export function TabBar({ tabs, activeId, onChange, ariaLabel, containerHandle }, _optional = {}) {
     const { onKeyDown } = useTabBarKeyboard({ tabs: tabs, activeId: activeId, onChange: onChange });
     return (_jsx(TabStripFrame, { className: "tab-bar", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, ...(containerHandle ? agentHandle({ handle: containerHandle }, { role: "region", label: ariaLabel }) : {}), children: tabs.map((tab) => (_jsx(TabBarButton, { tab: tab, active: activeId === tab.id, tabIndex: resolveTabBarTabIndex({ tabs: tabs, activeId: activeId, tab: tab }), onChange: onChange }, tab.id))) }));
 }

package/dist/features/tab-strip/rules.d.ts

@@ -1,21 +1,9 @@
 import type { TabStripDragTarget, TabStripDropEdge, TabStripElementRect, TabStripTab } from './types.js';
-/**
- * Which edge of `rect` a pointer at `pointerX` lands on. Ported from
- * `WorkspaceTabsBar.tsx`'s `tabDropEdgeFromElement` and
- * `FileWorkspace.tsx`'s `tabDropEdgeFromEvent` — both compute this exact
- * "left half vs right half of the target's bounding rect" split, just
- * against a `DragEvent` directly rather than a plain `clientX` number. The
- * pure form here takes the already-extracted `clientX`/rect so it needs no
- * DOM/event types.
- */
+/** Compare the pointer with the target rectangle's midpoint. Plain coordinates keep this rule
+ * independent of DOM/event types. */
 export declare function dropEdgeFromPointerX(pointerX: number, rect: Pick<TabStripElementRect, 'left' | 'width'>): TabStripDropEdge;
-/**
- * Coerces a drop target that would place a tab before a pinned tab into
- * landing after it instead — pinned tabs always stay leftmost. Generalizes
- * `WorkspaceTabsBar.tsx`'s `findTabDropTarget`'s `resolveTarget` closure
- * (there hardcoded to the single entry tab; here driven by the host-
- * supplied `pinned` field on any number of tabs).
- */
+/** Land after a pinned target even when its left half was hit; pinned tabs must stay leftmost.
+ * Hosts supply the pinned ids, so the rule does not assume one special entry tab. */
 export declare function coercePinnedDropTarget(target: TabStripDragTarget, pinnedTabIds: ReadonlySet<string>): TabStripDragTarget;
 /**
  * Moves `sourceId` to just before/after `targetId` in `tabIds`, preserving
@@ -28,7 +16,6 @@ export declare function coercePinnedDropTarget(target: TabStripDragTarget, pinne
  * back in at index (+1 for 'after')" algorithm in both files.
  */
 export declare function reorderTabIds(tabIds: readonly string[], sourceId: string, targetId: string, edge: TabStripDropEdge): string[];
-/** Ported verbatim (both files have an identical helper under this name). */
 export declare function arraysEqual(a: readonly string[], b: readonly string[]): boolean;
 /** A stable string key for a drag target, used to detect "did the hovered
  *  target actually change" without a deep-equal check (ported from

package/dist/features/tab-strip/rules.js

@@ -1,22 +1,10 @@
-/**
- * Which edge of `rect` a pointer at `pointerX` lands on. Ported from
- * `WorkspaceTabsBar.tsx`'s `tabDropEdgeFromElement` and
- * `FileWorkspace.tsx`'s `tabDropEdgeFromEvent` — both compute this exact
- * "left half vs right half of the target's bounding rect" split, just
- * against a `DragEvent` directly rather than a plain `clientX` number. The
- * pure form here takes the already-extracted `clientX`/rect so it needs no
- * DOM/event types.
- */
+/** Compare the pointer with the target rectangle's midpoint. Plain coordinates keep this rule
+ * independent of DOM/event types. */
 export function dropEdgeFromPointerX(pointerX, rect) {
     return pointerX > rect.left + rect.width / 2 ? 'after' : 'before';
 }
-/**
- * Coerces a drop target that would place a tab before a pinned tab into
- * landing after it instead — pinned tabs always stay leftmost. Generalizes
- * `WorkspaceTabsBar.tsx`'s `findTabDropTarget`'s `resolveTarget` closure
- * (there hardcoded to the single entry tab; here driven by the host-
- * supplied `pinned` field on any number of tabs).
- */
+/** Land after a pinned target even when its left half was hit; pinned tabs must stay leftmost.
+ * Hosts supply the pinned ids, so the rule does not assume one special entry tab. */
 export function coercePinnedDropTarget(target, pinnedTabIds) {
     if (target.edge === 'before' && pinnedTabIds.has(target.tabId)) {
         return { tabId: target.tabId, edge: 'after' };
@@ -46,7 +34,6 @@ export function reorderTabIds(tabIds, sourceId, targetId, edge) {
     nextIds.splice(edge === 'after' ? targetIndex + 1 : targetIndex, 0, sourceId);
     return arraysEqual(nextIds, tabIds) ? original : nextIds;
 }
-/** Ported verbatim (both files have an identical helper under this name). */
 export function arraysEqual(a, b) {
     if (a.length !== b.length)
         return false;

package/dist/features/tab-strip/types.d.ts

@@ -1,22 +1,11 @@
 import type { ReactNode } from 'react';
-/**
- * Which side of the drop-target tab the dragged tab lands on. Shared
- * concept across both source shapes this feature consolidates
- * (`WorkspaceTabsBar.tsx`'s `TabDropEdge`, `FileWorkspace.tsx`'s
- * `TabDropEdge`) — identical meaning in both.
- */
+/** Which side of the target tab receives the dragged item. */
 export type TabStripDropEdge = 'before' | 'after';
 export interface TabStripDragTarget {
     tabId: string;
     edge: TabStripDropEdge;
 }
-/**
- * One tab-strip item. `content` is host-injected — the primitive never
- * renders an icon or label itself, it just lays out whatever the host gives
- * it (see `ADS-memory/reports/jini-port/god-components-extraction-plan.md`'s consolidation
- * map: "the specific parts become host-injected config, not part of the
- * primitive").
- */
+/** One tab item. The host owns icon/label/meta content; this primitive only lays it out. */
 export interface TabStripTab {
     id: string;
     /** Icon + label + meta + badges — anything the host wants inside the tab. */

package/dist/icon-name.d.ts

@@ -7,7 +7,7 @@
  * that must not drag a React import across the boundary. `Icon.tsx` re-exports
  * this type, so existing importers are unchanged.
  */
-export type IconName = 'alert-triangle' | 'arrow-left' | 'arrow-up' | 'attach' | 'bell' | 'blocks' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'close' | 'copy' | 'comment' | 'message-circle' | 'discord' | 'download' | 'draw' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'file-code' | 'file-text' | 'folder' | 'folder-filled' | 'fork' | 'github' | 'github-filled' | 'grip-vertical' | 'grid' | 'globe' | 'hammer' | 'help-circle' | 'history' | 'home' | 'home-filled' | 'image' | 'import' | 'info' | 'kanban' | 'layers-filled' | 'languages' | 'layout' | 'lightbulb' | 'link' | 'lock' | 'log-out' | 'integrations-filled' | 'maximize' | 'mic' | 'minimize' | 'minus' | 'more-horizontal' | 'orbit' | 'paint-bucket' | 'panel-left' | 'palette' | 'palette-filled' | 'pencil' | 'plus' | 'plus-filled' | 'puzzle' | 'slides' | 'star' | 'swatchbook' | 'play' | 'present' | 'refresh' | 'reload' | 'search' | 'send' | 'settings' | 'share' | 'sliders' | 'smartphone' | 'spinner' | 'sparkles' | 'stop' | 'sun' | 'moon' | 'sun-moon' | 'terminal' | 'thumbs-down' | 'thumbs-up' | 'tweaks' | 'upload' | 'trash' | 'volume' | 'zoom-in' | 'zoom-out';
+export type IconName = 'package-check' | 'storefront' | 'package-outline' | 'trash-compact' | 'chevron-right-wide' | 'check-long' | 'alert-triangle' | 'arrow-left' | 'arrow-up' | 'attach' | 'bell' | 'blocks' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'close' | 'copy' | 'comment' | 'message-circle' | 'discord' | 'download' | 'draw' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'file-code' | 'file-text' | 'folder' | 'folder-filled' | 'fork' | 'github' | 'github-filled' | 'grip-vertical' | 'grid' | 'globe' | 'hammer' | 'help-circle' | 'history' | 'home' | 'home-filled' | 'image' | 'import' | 'info' | 'kanban' | 'layers-filled' | 'languages' | 'layout' | 'lightbulb' | 'link' | 'lock' | 'log-out' | 'integrations-filled' | 'maximize' | 'mic' | 'minimize' | 'minus' | 'more-horizontal' | 'orbit' | 'paint-bucket' | 'panel-left' | 'palette' | 'palette-filled' | 'pencil' | 'plus' | 'plus-filled' | 'puzzle' | 'slides' | 'star' | 'swatchbook' | 'play' | 'present' | 'refresh' | 'reload' | 'search' | 'send' | 'settings' | 'share' | 'sliders' | 'smartphone' | 'spinner' | 'sparkles' | 'stop' | 'sun' | 'moon' | 'sun-moon' | 'terminal' | 'thumbs-down' | 'thumbs-up' | 'tweaks' | 'upload' | 'trash' | 'volume' | 'zoom-in' | 'zoom-out';
 /**
  * Runtime enumeration of every {@link IconName}. A string union has no
  * runtime representation of its own, so this exists as the one place a

package/dist/icon-name.js

@@ -8,6 +8,7 @@
  * compile-time one, since TS can't derive a value from a type.
  */
 export const ICON_NAMES = [
+    'package-check', 'storefront', 'package-outline', 'trash-compact', 'chevron-right-wide', 'check-long',
     'alert-triangle', 'arrow-left', 'arrow-up', 'attach', 'bell', 'blocks', 'check',
     'chevron-down', 'chevron-left', 'chevron-right', 'close', 'copy', 'comment',
     'message-circle', 'discord', 'download', 'draw', 'edit', 'external-link', 'eye',