@harborclient/sdk 1.3.6 → 1.3.7

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+## 1.3.7 - 2026-07-29
+
+- Implement workflow run history management and UI enhancements. (`c87feda3`)
+- Enhance development and testing workflow in AGENTS.md and CONTRIBUTING.md. (`181dc04a`)
+- Refactor styling in WorkflowRecordingDialog and TimelineBlock components. (`3f0b9348`)
+
 ## 1.3.6 - 2026-07-29
 
 - Enhance Response Editor and Summary with Close Functionality. (`e14d7c7d`)

package/dist/components/Breadcrumb/SegmentShell.d.ts

@@ -50,8 +50,8 @@ interface Props {
  * Renders the arrow-shaped background shell shared by crumb and editable segments.
  *
  * First and only shapes use an overflow-hidden rounded wrapper so the left (or
- * full) edge can be pill-capped like the URL bar; middle and last keep a single
- * clip-path layer for chevron interlocking.
+ * full) edge matches the URL bar's `rounded-md` corners; middle and last keep a
+ * single clip-path layer for chevron interlocking.
  */
 export declare function SegmentShell({ shape, tone, grow, density, className, children }: Props): JSX.Element;
 export {};

package/dist/components/Breadcrumb/SegmentShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentShell.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/SegmentShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAsBnD;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAa,EACb,IAAY,EACZ,OAAmB,EACnB,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkErB"}
+{"version":3,"file":"SegmentShell.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/SegmentShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAsBnD;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAa,EACb,IAAY,EACZ,OAAmB,EACnB,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8DrB"}

package/dist/components/Breadcrumb/SegmentShell.js

@@ -25,8 +25,8 @@ function clipPathForShape(shape) {
  * Renders the arrow-shaped background shell shared by crumb and editable segments.
  *
  * First and only shapes use an overflow-hidden rounded wrapper so the left (or
- * full) edge can be pill-capped like the URL bar; middle and last keep a single
- * clip-path layer for chevron interlocking.
+ * full) edge matches the URL bar's `rounded-md` corners; middle and last keep a
+ * single clip-path layer for chevron interlocking.
  */
 export function SegmentShell({ shape, tone = 'path', grow = false, density = 'default', className, children }) {
     const hasChevron = shape !== 'only';
@@ -38,12 +38,12 @@ export function SegmentShell({ shape, tone = 'path', grow = false, density = 'de
         : tone === 'selection'
             ? 'bg-selection'
             : 'bg-breadcrumb-segment';
-    const usesPillCap = shape === 'first' || shape === 'only';
+    const usesRoundedCap = shape === 'first' || shape === 'only';
     const leadingInsetPx = CHEVRON_PX + (isCompact ? 10 : 16);
     const layoutClass = cn('hc-breadcrumb-segment relative flex min-w-0 items-center', isCompact ? 'min-h-0 py-1' : 'min-h-[26px] py-2', grow ? 'min-w-[6rem] flex-1' : isCompact ? 'shrink-0' : 'max-w-[45%] shrink-0', hasChevron && shape !== 'last' && '-mr-[6px]', !needsLeadingInset && (isCompact ? 'pl-2.5' : 'pl-5'), isCompact ? 'pr-3' : 'pr-5', className);
     const content = (_jsx("div", { className: cn('relative min-w-0', isCompact ? 'flex items-center gap-1.5' : 'w-full truncate'), children: children }));
-    if (usesPillCap) {
-        return (_jsxs("div", { className: cn(layoutClass, 'overflow-hidden', shape === 'only' ? 'rounded-full!' : 'rounded-lg!'), style: needsLeadingInset ? { paddingLeft: `${leadingInsetPx}px` } : undefined, children: [_jsx("div", { "aria-hidden": true, className: cn('pointer-events-none absolute inset-0', toneClass), style: clipPath !== 'none' ? { clipPath } : undefined }), content] }));
+    if (usesRoundedCap) {
+        return (_jsxs("div", { className: cn(layoutClass, 'overflow-hidden', 'rounded-md!'), style: needsLeadingInset ? { paddingLeft: `${leadingInsetPx}px` } : undefined, children: [_jsx("div", { "aria-hidden": true, className: cn('pointer-events-none absolute inset-0', toneClass), style: clipPath !== 'none' ? { clipPath } : undefined }), content] }));
     }
     return (_jsx("div", { className: cn(layoutClass, toneClass), style: {
             ...(clipPath !== 'none' ? { clipPath } : {}),

package/dist/components/Breadcrumb/index.d.ts

@@ -35,8 +35,8 @@ interface Props {
 /**
  * Full-width breadcrumb bar with interlocking arrow-shaped segments. Leading
  * segments are optionally clickable; the trailing segment is inline-editable.
- * The track background is clipped to the segments' pill silhouette so the
- * rounded caps read against the surrounding surface instead of a square band.
+ * The track background is clipped to the segments' silhouette so the
+ * `rounded-md` ends read against the surrounding surface instead of a square band.
  */
 export declare function Breadcrumb({ segments, value, placeholder, editableLabel, onValueChange, className, flush }: Props): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Breadcrumb/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAsC,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,WAAgB,EAChB,aAAsB,EACtB,aAAa,EACb,SAAS,EACT,KAAa,EACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgErB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAsC,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,WAAgB,EAChB,aAAsB,EACtB,aAAa,EACb,SAAS,EACT,KAAa,EACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2DrB"}

package/dist/components/Breadcrumb/index.js

@@ -6,8 +6,8 @@ import { EditableSegment } from './EditableSegment.js';
 /**
  * Full-width breadcrumb bar with interlocking arrow-shaped segments. Leading
  * segments are optionally clickable; the trailing segment is inline-editable.
- * The track background is clipped to the segments' pill silhouette so the
- * rounded caps read against the surrounding surface instead of a square band.
+ * The track background is clipped to the segments' silhouette so the
+ * `rounded-md` ends read against the surrounding surface instead of a square band.
  */
 export function Breadcrumb({ segments, value, placeholder = '', editableLabel = 'Name', onValueChange, className, flush = false }) {
     const [editing, setEditing] = useState(false);
@@ -36,7 +36,5 @@ export function Breadcrumb({ segments, value, placeholder = '', editableLabel =
         return 'middle';
     };
     const editableShape = segments.length === 0 ? 'only' : 'last';
-    return (_jsxs("nav", { id: navId, "aria-label": "Breadcrumb", className: cn('hc-breadcrumb flex min-w-0 items-stretch bg-breadcrumb-background', flush
-            ? '-mx-3 -mt-3 w-[calc(100%+1.5rem)]'
-            : cn('w-full overflow-hidden', editableShape === 'only' ? 'rounded-full' : 'rounded-l-full'), className), children: [segments.map((segment, index) => (_jsx(CrumbSegment, { segment: segment, shape: leadingShape(index) }, segment.id ?? `${segment.label}-${index}`))), _jsx(EditableSegment, { value: value, placeholder: placeholder, editableLabel: editableLabel, editing: editing, shape: editableShape, inputRef: inputRef, onStartEditing: () => setEditing(true), onStopEditing: () => setEditing(false), onValueChange: onValueChange })] }));
+    return (_jsxs("nav", { id: navId, "aria-label": "Breadcrumb", className: cn('hc-breadcrumb flex min-w-0 items-stretch bg-breadcrumb-background', flush ? '-mx-3 -mt-3 w-[calc(100%+1.5rem)]' : 'w-full overflow-hidden rounded-md', className), children: [segments.map((segment, index) => (_jsx(CrumbSegment, { segment: segment, shape: leadingShape(index) }, segment.id ?? `${segment.label}-${index}`))), _jsx(EditableSegment, { value: value, placeholder: placeholder, editableLabel: editableLabel, editing: editing, shape: editableShape, inputRef: inputRef, onStartEditing: () => setEditing(true), onStopEditing: () => setEditing(false), onValueChange: onValueChange })] }));
 }

package/dist/components/FloatingDialog/index.d.ts

@@ -87,10 +87,6 @@ interface Props {
  * `onPositionChange` / `onSizeChange`. If the panel would open or remain
  * off-screen after a window resize, it relocates to the default corner.
  *
- * Uses the elevated `bg-control` fill (not `bg-surface`) with a stronger border
- * and theme-aware shadow so the panel stays readable against the app chrome in
- * both light and dark themes.
- *
  * @param props - Dialog labelling, geometry, and content props.
  * @returns Floating dialog element.
  */

package/dist/components/FloatingDialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FloatingDialog/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAqD,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAIL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EAExB,MAAM,6BAA6B,CAAC;AAErC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAE9D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAElD;;OAEG;IACH,UAAU,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAuCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,OAAO,EACP,aAAqB,EACrB,SAAS,EACT,aAAa,EACb,WAA0C,EAC1C,UAAwC,EACxC,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,QAAc,EACd,SAAe,EACf,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+VrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FloatingDialog/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAqD,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAIL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EAExB,MAAM,6BAA6B,CAAC;AAErC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAE9D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAElD;;OAEG;IACH,UAAU,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAuCD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,OAAO,EACP,aAAqB,EACrB,SAAS,EACT,aAAa,EACb,WAA0C,EAC1C,UAAwC,EACxC,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,QAAc,EACd,SAAe,EACf,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+VrB"}

package/dist/components/FloatingDialog/index.js

@@ -37,10 +37,6 @@ function clampFloatingDialogSize(width, height, left, top, minWidth, minHeight,
  * `onPositionChange` / `onSizeChange`. If the panel would open or remain
  * off-screen after a window resize, it relocates to the default corner.
  *
- * Uses the elevated `bg-control` fill (not `bg-surface`) with a stronger border
- * and theme-aware shadow so the panel stays readable against the app chrome in
- * both light and dark themes.
- *
  * @param props - Dialog labelling, geometry, and content props.
  * @returns Floating dialog element.
  */
@@ -271,7 +267,7 @@ export function FloatingDialog({ label, labelledBy, onClose, disableEscape = fal
         setSize(next);
         onSizeChangeRef.current?.(next);
     }, [maxHeight, maxWidth, minHeight, minWidth, size]);
-    return (_jsxs("div", { ref: panelRef, role: "dialog", "aria-modal": "false", "aria-label": labelledBy ? undefined : label, "aria-labelledby": labelledBy, className: cn('hc-floating-dialog fixed z-[60] flex min-w-[240px] flex-col overflow-hidden rounded-lg border border-text/15 bg-control shadow-[0_8px_28px_rgba(0,0,0,0.18)] dark:shadow-[0_12px_36px_rgba(0,0,0,0.55)]', className), style: {
+    return (_jsxs("div", { ref: panelRef, role: "dialog", "aria-modal": "false", "aria-label": labelledBy ? undefined : label, "aria-labelledby": labelledBy, className: cn('hc-floating-dialog fixed z-[60] flex min-w-[240px] flex-col overflow-hidden rounded-lg border border-separator bg-surface shadow-xl', className), style: {
             left: position.left,
             top: position.top,
             ...(size != null ? { width: size.width, height: size.height } : {})

package/dist/components/FooterPanel/index.d.ts

@@ -41,10 +41,15 @@ interface Props {
      * When true, does not render children while the panel is closed.
      */
     unmountWhenClosed?: boolean;
+    /**
+     * Id of a visible heading that names this panel region. When set, forwarded
+     * to {@link Resizable} as `aria-labelledby`.
+     */
+    labelledBy?: string;
 }
 /**
  * Resizable panel that slides up from the footer.
  */
-export declare function FooterPanel({ id, title, badge, description, closeLabel, storageKey, buttons, open, onClose, children, unmountWhenClosed }: Props): JSX.Element;
+export declare function FooterPanel({ id, title, badge, description, closeLabel, storageKey, buttons, open, onClose, children, unmountWhenClosed, labelledBy }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/FooterPanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterPanel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAIxC,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAE5B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EACV,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,iBAAyB,EAC1B,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuCrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterPanel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAIxC,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAE5B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EACV,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,iBAAyB,EACzB,UAAU,EACX,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwCrB"}

package/dist/components/FooterPanel/index.js

@@ -5,7 +5,7 @@ import { RoundButton } from '../RoundButton/index.js';
 /**
  * Resizable panel that slides up from the footer.
  */
-export function FooterPanel({ id, title, badge, description, closeLabel, storageKey, buttons, open, onClose, children, unmountWhenClosed = false }) {
+export function FooterPanel({ id, title, badge, description, closeLabel, storageKey, buttons, open, onClose, children, unmountWhenClosed = false, labelledBy }) {
     const closeButton = (_jsx(RoundButton, { icon: faXmark, title: "Close", ariaLabel: `Close ${closeLabel}`, onClick: onClose, className: "hc-footer-panel-close" }));
-    return (_jsxs(Resizable, { id: id, open: open, onClose: onClose, closeLabel: closeLabel, storageKey: storageKey, unmountWhenClosed: unmountWhenClosed, showCloseButton: false, headerless: true, children: [_jsxs("div", { className: "hc-footer-panel flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 font-medium text-text", children: [title, badge && _jsx("span", { className: "hc-footer-panel-badge font-normal text-muted", children: badge })] }), description && _jsx("span", { className: "truncate text-muted", children: description })] }), _jsxs("div", { className: "flex gap-2", children: [buttons, closeButton] })] }), _jsx("div", { className: "hc-footer-panel-body min-h-0 flex-1 overflow-auto", children: children })] }));
+    return (_jsxs(Resizable, { id: id, open: open, onClose: onClose, closeLabel: closeLabel, storageKey: storageKey, unmountWhenClosed: unmountWhenClosed, labelledBy: labelledBy, showCloseButton: false, headerless: true, children: [_jsxs("div", { className: "hc-footer-panel flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 font-medium text-text", children: [title, badge && _jsx("span", { className: "hc-footer-panel-badge font-normal text-muted", children: badge })] }), description && _jsx("span", { className: "truncate text-muted", children: description })] }), _jsxs("div", { className: "flex gap-2", children: [buttons, closeButton] })] }), _jsx("div", { className: "hc-footer-panel-body min-h-0 flex-1 overflow-auto", children: children })] }));
 }

package/dist/components/Resizable/Resizable.d.ts

@@ -36,6 +36,11 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'id'
      * Whether or not to show the close button.
      */
     showCloseButton?: boolean;
+    /**
+     * Id of a visible heading that names this panel region. When set, used as
+     * `aria-labelledby` instead of the default `aria-label`.
+     */
+    labelledBy?: string;
     /**
      * Panel body content.
      */
@@ -47,6 +52,6 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'id'
  * Encapsulates resize handle wiring, height persistence, open/close animation,
  * and close affordance shared by Console, Variables, and plugin footer panels.
  */
-export declare function Resizable({ id, open, onClose, closeLabel, storageKey, title, headerless, unmountWhenClosed, showCloseButton, children, className, ...props }: Props): JSX.Element;
+export declare function Resizable({ id, open, onClose, closeLabel, storageKey, title, headerless, unmountWhenClosed, showCloseButton, labelledBy, children, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=Resizable.d.ts.map

package/dist/components/Resizable/Resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Resizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/Resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYtE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO,CAAC;IACxF;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,IAAI,EACJ,OAAO,EACP,UAAU,EACV,UAAU,EACV,KAAK,EACL,UAAkB,EAClB,iBAAyB,EACzB,eAAsB,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgFrB"}
+{"version":3,"file":"Resizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/Resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYtE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO,CAAC;IACxF;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,IAAI,EACJ,OAAO,EACP,UAAU,EACV,UAAU,EACV,KAAK,EACL,UAAkB,EAClB,iBAAyB,EACzB,eAAsB,EACtB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiFrB"}

package/dist/components/Resizable/Resizable.js

@@ -12,7 +12,7 @@ import { useResizable } from './useResizable.js';
  * Encapsulates resize handle wiring, height persistence, open/close animation,
  * and close affordance shared by Console, Variables, and plugin footer panels.
  */
-export function Resizable({ id, open, onClose, closeLabel, storageKey, title, headerless = false, unmountWhenClosed = false, showCloseButton = true, children, className, ...props }) {
+export function Resizable({ id, open, onClose, closeLabel, storageKey, title, headerless = false, unmountWhenClosed = false, showCloseButton = true, labelledBy, children, className, ...props }) {
     const containerRef = useRef(null);
     /**
      * Keeps max-size measurement stable across re-renders so useResizable
@@ -29,5 +29,5 @@ export function Resizable({ id, open, onClose, closeLabel, storageKey, title, he
     });
     const closeButton = (_jsx(RoundButton, { icon: faXmark, ariaLabel: `Close ${closeLabel}`, onClick: onClose, className: "hc-resizable-close" }));
     const body = unmountWhenClosed && !open ? null : children;
-    return (_jsxs("div", { ref: containerRef, ...props, id: id, className: cn('hc-resizable', footerPanelClassName(open), className), style: { height }, role: "region", "aria-label": `${closeLabel} panel`, "aria-hidden": !open, inert: !open || undefined, children: [_jsx(ResizeHandle, { orientation: "horizontal", value: height, min: panelMinSize, max: panelMaxSize, onResizeStart: onResizeStart, onKeyboardResize: onKeyboardResize, ariaLabel: `Resize ${closeLabel} panel` }), headerless ? (_jsxs("div", { className: "hc-resizable-headerless relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [showCloseButton && (_jsx(RoundButton, { icon: faXmark, ariaLabel: `Close ${closeLabel}`, onClick: onClose, className: "hc-resizable-headerless-close absolute top-2 right-2 z-10" })), _jsx("div", { className: "hc-resizable-body flex min-h-0 flex-1 flex-col", children: body })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hc-resizable-header flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsx("div", { className: "hc-resizable-header-title min-w-0 flex-1", children: title }), showCloseButton && closeButton] }), body] }))] }));
+    return (_jsxs("div", { ref: containerRef, ...props, id: id, className: cn('hc-resizable', footerPanelClassName(open), className), style: { height }, role: "region", "aria-labelledby": labelledBy, "aria-label": labelledBy == null ? `${closeLabel} panel` : undefined, "aria-hidden": !open, inert: !open || undefined, children: [_jsx(ResizeHandle, { orientation: "horizontal", value: height, min: panelMinSize, max: panelMaxSize, onResizeStart: onResizeStart, onKeyboardResize: onKeyboardResize, ariaLabel: `Resize ${closeLabel} panel` }), headerless ? (_jsxs("div", { className: "hc-resizable-headerless relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [showCloseButton && (_jsx(RoundButton, { icon: faXmark, ariaLabel: `Close ${closeLabel}`, onClick: onClose, className: "hc-resizable-headerless-close absolute top-2 right-2 z-10" })), _jsx("div", { className: "hc-resizable-body flex min-h-0 flex-1 flex-col", children: body })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hc-resizable-header flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsx("div", { className: "hc-resizable-header-title min-w-0 flex-1", children: title }), showCloseButton && closeButton] }), body] }))] }));
 }

package/dist/components/Sidebar/index.d.ts

@@ -36,6 +36,14 @@ interface Props {
      * Additional classes for the scrollable body wrapper.
      */
     bodyClassName?: string;
+    /**
+     * Optional id for the body wrapper (e.g. rail `aria-controls` target).
+     */
+    bodyId?: string;
+    /**
+     * Optional ARIA role for the body wrapper (e.g. `tabpanel` with a rail tablist).
+     */
+    bodyRole?: string;
     /**
      * Additional classes for the resizable aside element.
      */
@@ -70,6 +78,6 @@ interface Props {
  *
  * Left sidebars render `[aside][handle]`; right sidebars render `[handle][aside]`.
  */
-export declare function Sidebar({ side, ariaLabel, header, children, scroll, scrollAxis, scrollbarAutoHide, bodyClassName, asideClassName, resizeHandleClassName, resizeAriaLabel, defaultSize, minSize, getMaxSize, storageKey }: Props): JSX.Element;
+export declare function Sidebar({ side, ariaLabel, header, children, scroll, scrollAxis, scrollbarAutoHide, bodyClassName, bodyId, bodyRole, asideClassName, resizeHandleClassName, resizeAriaLabel, defaultSize, minSize, getMaxSize, storageKey }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Sidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;IAElB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAEhD;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,MAAM,CAAC;IAE1B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,EACR,MAAa,EACb,UAAuB,EACvB,iBAAwB,EACxB,aAAa,EACb,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACX,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkFrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;IAElB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAEhD;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,MAAM,CAAC;IAE1B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,EACR,MAAa,EACb,UAAuB,EACvB,iBAAwB,EACxB,aAAa,EACb,MAAM,EACN,QAAQ,EACR,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACX,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsFrB"}

package/dist/components/Sidebar/index.js

@@ -7,7 +7,7 @@ import { cn } from '../utils.js';
  *
  * Left sidebars render `[aside][handle]`; right sidebars render `[handle][aside]`.
  */
-export function Sidebar({ side, ariaLabel, header, children, scroll = true, scrollAxis = 'vertical', scrollbarAutoHide = true, bodyClassName, asideClassName, resizeHandleClassName, resizeAriaLabel, defaultSize, minSize, getMaxSize, storageKey }) {
+export function Sidebar({ side, ariaLabel, header, children, scroll = true, scrollAxis = 'vertical', scrollbarAutoHide = true, bodyClassName, bodyId, bodyRole, asideClassName, resizeHandleClassName, resizeAriaLabel, defaultSize, minSize, getMaxSize, storageKey }) {
     const resizableOptions = {
         axis: 'x',
         direction: side === 'left' ? 1 : -1,
@@ -23,7 +23,7 @@ export function Sidebar({ side, ariaLabel, header, children, scroll = true, scro
      * scroll viewport height while still allowing overflow scroll when content grows.
      */
     const scrollBody = _jsx("div", { className: "flex min-h-full min-w-0 flex-col", children: children });
-    const body = scroll ? (_jsx(Scrollbars, { axis: scrollAxis, autoHide: scrollbarAutoHide, className: cn('min-h-0 flex-1', bodyClassName), children: scrollBody })) : (_jsx("div", { className: cn('flex min-h-0 flex-1 flex-col', bodyClassName), children: children }));
+    const body = scroll ? (_jsx(Scrollbars, { id: bodyId, role: bodyRole, axis: scrollAxis, autoHide: scrollbarAutoHide, className: cn('min-h-0 flex-1', bodyClassName), children: scrollBody })) : (_jsx("div", { id: bodyId, role: bodyRole, className: cn('flex min-h-0 flex-1 flex-col', bodyClassName), children: children }));
     const aside = (_jsxs("aside", { className: cn('hc-sidebar flex shrink-0 flex-col overflow-x-hidden bg-sidebar', side === 'right' && 'h-full min-h-0', asideClassName), style: { width }, "aria-label": ariaLabel, children: [header, body] }));
     if (side === 'left') {
         return (_jsxs(_Fragment, { children: [aside, handle] }));

package/dist/components/SidebarRail/SidebarRailItem.d.ts

@@ -0,0 +1,66 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { JSX, KeyboardEvent, Ref } from 'react';
+/**
+ * One entry in a {@link SidebarRail} navigation list.
+ */
+export interface SidebarRailItemData {
+    /**
+     * Stable identifier passed to `onSelect` when the item is activated.
+     */
+    id: string;
+    /**
+     * Font Awesome icon shown for this rail item.
+     */
+    icon: IconDefinition;
+    /**
+     * Accessible name; also shown as visible text when the rail is expanded.
+     */
+    label: string;
+    /**
+     * When true, shows a small notification badge on the icon.
+     */
+    badge?: boolean;
+}
+interface Props {
+    /**
+     * Declarative rail item to render.
+     */
+    item: SidebarRailItemData;
+    /**
+     * Whether this item is the active selection.
+     */
+    active: boolean;
+    /**
+     * Whether the rail shows labels beside icons.
+     */
+    expanded: boolean;
+    /**
+     * Roving tabindex value: `0` for the selected tab, `-1` for others.
+     */
+    tabIndex: number;
+    /**
+     * Optional id of the sidebar panel this tab controls.
+     */
+    panelId?: string;
+    /**
+     * Called when the user activates this item.
+     */
+    onSelect: () => void;
+    /**
+     * Keyboard handler for tablist arrow-key navigation.
+     */
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Ref attached to the item button for focus management.
+     */
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+/**
+ * Single rail navigation tab: full-width active chrome with an icon button.
+ *
+ * @param props - Item identity, active/expanded chrome, and activation handlers.
+ * @returns Rail section with decorative icon and optional badge.
+ */
+export declare function SidebarRailItem({ item, active, expanded, tabIndex, panelId, onSelect, onKeyDown, buttonRef }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=SidebarRailItem.d.ts.map

package/dist/components/SidebarRail/SidebarRailItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarRailItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarRail/SidebarRailItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAUrD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAE1B;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE7D;;OAEG;IACH,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAiDD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8CrB"}

package/dist/components/SidebarRail/SidebarRailItem.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { FaIcon } from '../FaIcon/index.js';
+import { cn } from '../utils.js';
+/**
+ * Shared focus-visible outline for rail tabs (matches TabBar / segment chrome).
+ */
+const railItemFocusVisible = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent';
+/**
+ * Builds the accessible name for a rail tab, including badge status when present.
+ *
+ * @param label - Visible item label.
+ * @param badge - Whether the item shows a notification badge.
+ * @returns Accessible name string for `aria-label` or visually hidden text.
+ */
+function railItemAccessibleName(label, badge) {
+    return badge === true ? `${label}, notification` : label;
+}
+/**
+ * Tailwind classes for the full-width rail section chrome.
+ *
+ * Active/hover fill the entire section between separators — not an inset
+ * pill around the control.
+ *
+ * @param active - Whether this item is the current selection.
+ * @returns Class string for the section wrapper.
+ */
+function railItemSectionClasses(active) {
+    return cn('hc-sidebar-rail-item-section w-full shrink-0 text-sidebar-rail-text', active ? 'bg-sidebar-rail-active' : 'bg-transparent');
+}
+/**
+ * Tailwind classes for the interactive control inside a rail section.
+ *
+ * Kept visually flat so selection chrome lives on the section, not the button.
+ * Focus outline always applies (including when active) so keyboard users can
+ * see focus on the current mode.
+ *
+ * @param active - Whether this item is the current selection.
+ * @param expanded - Whether the rail shows labels.
+ * @returns Class string for the item button.
+ */
+function railItemButtonClasses(active, expanded) {
+    return cn('hc-sidebar-rail-item app-no-drag relative inline-flex min-h-12 w-full shrink-0 cursor-pointer items-center rounded-none border-none bg-transparent py-5', expanded ? 'gap-2 px-3' : 'justify-center', !active && 'hover:bg-sidebar-rail-active', railItemFocusVisible);
+}
+/**
+ * Single rail navigation tab: full-width active chrome with an icon button.
+ *
+ * @param props - Item identity, active/expanded chrome, and activation handlers.
+ * @returns Rail section with decorative icon and optional badge.
+ */
+export function SidebarRailItem({ item, active, expanded, tabIndex, panelId, onSelect, onKeyDown, buttonRef }) {
+    const accessibleName = railItemAccessibleName(item.label, item.badge);
+    /**
+     * Icon-only (collapsed) uses aria-label. Expanded uses visible text (plus
+     * optional visually hidden badge status) as the accessible name so AT is not
+     * left with a color-only cue and is not announced twice via aria-label.
+     */
+    const ariaLabel = expanded ? undefined : accessibleName;
+    return (_jsx("div", { className: railItemSectionClasses(active), children: _jsxs("button", { type: "button", role: "tab", ref: buttonRef, className: railItemButtonClasses(active, expanded), title: item.label, tabIndex: tabIndex, "aria-label": ariaLabel, "aria-selected": active, "aria-controls": panelId, onClick: onSelect, onKeyDown: onKeyDown, children: [_jsxs("span", { className: "relative inline-flex shrink-0 items-center justify-center", children: [_jsx(FaIcon, { icon: item.icon, className: "hc-sidebar-rail-item-icon h-[22.5px]! w-[22.5px]!", "aria-hidden": true }), item.badge ? (_jsx("span", { className: "hc-sidebar-rail-item-badge absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent", "aria-hidden": true })) : null] }), expanded ? (_jsx("span", { className: "hc-sidebar-rail-item-label min-w-0 truncate text-left", children: item.label })) : null, expanded && item.badge === true ? _jsx("span", { className: "sr-only", children: ", notification" }) : null] }) }));
+}

package/dist/components/SidebarRail/SidebarRailSeparator.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+/**
+ * Horizontal hairline divider between {@link SidebarRail} navigation items.
+ *
+ * Spans the full rail width (no horizontal inset) so separators read as
+ * section boundaries. Uses `sidebar-rail-separator`, a soft mix of rail fill
+ * and rail text so dividers stay close to the background in every theme.
+ * Decorative only — hidden from the accessibility tree so focus stays on tabs.
+ */
+export declare function SidebarRailSeparator(): JSX.Element;
+//# sourceMappingURL=SidebarRailSeparator.d.ts.map

package/dist/components/SidebarRail/SidebarRailSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarRailSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarRail/SidebarRailSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,IAAI,GAAG,CAAC,OAAO,CAOlD"}

package/dist/components/SidebarRail/SidebarRailSeparator.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Horizontal hairline divider between {@link SidebarRail} navigation items.
+ *
+ * Spans the full rail width (no horizontal inset) so separators read as
+ * section boundaries. Uses `sidebar-rail-separator`, a soft mix of rail fill
+ * and rail text so dividers stay close to the background in every theme.
+ * Decorative only — hidden from the accessibility tree so focus stays on tabs.
+ */
+export function SidebarRailSeparator() {
+    return (_jsx("div", { className: "hc-sidebar-rail-separator h-px w-full shrink-0 bg-sidebar-rail-separator", "aria-hidden": true }));
+}

package/dist/components/SidebarRail/index.d.ts

@@ -0,0 +1,49 @@
+import { type ComponentPropsWithoutRef, type JSX } from 'react';
+import { type SidebarRailItemData } from './SidebarRailItem.js';
+export type { SidebarRailItemData };
+interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'aria-label' | 'onSelect'> {
+    /**
+     * Navigation entries rendered top-to-bottom in the rail.
+     */
+    items: SidebarRailItemData[];
+    /**
+     * Id of the currently selected rail item.
+     */
+    activeId: string;
+    /**
+     * Called when the user selects a different rail item.
+     *
+     * @param id - Selected item id from {@link SidebarRailItemData.id}.
+     */
+    onSelect: (id: string) => void;
+    /**
+     * When true, shows labels beside icons and uses the expanded width.
+     */
+    expanded: boolean;
+    /**
+     * Called when the user toggles the rail between collapsed and expanded.
+     *
+     * @param expanded - Next expanded state.
+     */
+    onExpandedChange: (expanded: boolean) => void;
+    /**
+     * Accessible name for the vertical tablist of sidebar modes.
+     */
+    ariaLabel?: string;
+    /**
+     * Id of the sidebar panel controlled by each rail tab (`aria-controls`).
+     */
+    panelId?: string;
+}
+/**
+ * Vertical activity rail for switching sidebar modes.
+ *
+ * Collapsed shows icons only; expanded shows icons with labels. Each item is a
+ * full-width tab section with an edge-to-edge separator after it (including the
+ * last item, so the list has a bottom border before the footer); active chrome
+ * uses the sidebar-rail-active token. Items form a vertical tablist with
+ * roving tabindex; Arrow keys move focus and selection; Home/End jump to the
+ * first/last item. Expand/collapse sits outside the tablist as its own Tab stop.
+ */
+export declare function SidebarRail({ items, activeId, onSelect, expanded, onExpandedChange, ariaLabel, panelId, className, ...props }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SidebarRail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarRail/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGjF,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAQpC,UAAU,KAAM,SAAQ,IAAI,CAC1B,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,YAAY,GAAG,UAAU,CACvC;IACC;;OAEG;IACH,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAE7B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/B;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,SAA2B,EAC3B,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyGrB"}

package/dist/components/SidebarRail/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { faAnglesLeft, faAnglesRight } from '@fortawesome/free-solid-svg-icons';
+import { useCallback, useRef } from 'react';
+import { FaIcon } from '../FaIcon/index.js';
+import { cn, resolveTabListKeyAction } from '../utils.js';
+import { SidebarRailItem } from './SidebarRailItem.js';
+import { SidebarRailSeparator } from './SidebarRailSeparator.js';
+/**
+ * Shared focus-visible outline for the expand/collapse control.
+ */
+const railExpandFocusVisible = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent';
+/**
+ * Vertical activity rail for switching sidebar modes.
+ *
+ * Collapsed shows icons only; expanded shows icons with labels. Each item is a
+ * full-width tab section with an edge-to-edge separator after it (including the
+ * last item, so the list has a bottom border before the footer); active chrome
+ * uses the sidebar-rail-active token. Items form a vertical tablist with
+ * roving tabindex; Arrow keys move focus and selection; Home/End jump to the
+ * first/last item. Expand/collapse sits outside the tablist as its own Tab stop.
+ */
+export function SidebarRail({ items, activeId, onSelect, expanded, onExpandedChange, ariaLabel = 'Sidebar modes', panelId, className, ...props }) {
+    const itemRefs = useRef([]);
+    /**
+     * Focuses the item button at the given index when it exists.
+     *
+     * @param index - Zero-based item index to focus.
+     */
+    const focusItemAt = useCallback((index) => {
+        const clamped = Math.max(0, Math.min(index, itemRefs.current.length - 1));
+        itemRefs.current[clamped]?.focus();
+    }, []);
+    /**
+     * Handles tablist keyboard navigation: arrows/Home/End move focus and select.
+     *
+     * @param event - Keyboard event from the focused item.
+     * @param index - Index of the item that received the event.
+     */
+    const handleItemKeyDown = useCallback((event, index) => {
+        const nextIndex = resolveTabListKeyAction(event.key, index, items.length);
+        if (nextIndex === null) {
+            return;
+        }
+        event.preventDefault();
+        const nextItem = items[nextIndex];
+        if (nextItem == null) {
+            return;
+        }
+        onSelect(nextItem.id);
+        focusItemAt(nextIndex);
+    }, [focusItemAt, items, onSelect]);
+    /**
+     * Toggles the rail between collapsed and expanded density.
+     */
+    const handleToggleExpanded = useCallback(() => {
+        onExpandedChange(!expanded);
+    }, [expanded, onExpandedChange]);
+    const expandLabel = expanded ? 'Collapse' : 'Expand';
+    const expandAriaLabel = expanded ? 'Collapse sidebar rail' : 'Expand sidebar rail';
+    return (_jsxs("div", { ...props, className: cn('hc-sidebar-rail app-no-drag flex h-full shrink-0 flex-col bg-sidebar-rail text-sidebar-rail-text', expanded ? 'w-[168px]' : 'w-18', 'transition-[width] duration-200 ease-out motion-reduce:transition-none', className), children: [_jsx("div", { role: "tablist", "aria-orientation": "vertical", "aria-label": ariaLabel, className: "hc-sidebar-rail-items flex min-h-0 flex-1 flex-col items-stretch overflow-x-hidden overflow-y-auto", children: items.flatMap((item, index) => [
+                    _jsx(SidebarRailItem, { item: item, active: item.id === activeId, expanded: expanded, tabIndex: item.id === activeId ? 0 : -1, panelId: panelId, onSelect: () => onSelect(item.id), onKeyDown: (event) => handleItemKeyDown(event, index), buttonRef: (node) => {
+                            itemRefs.current[index] = node;
+                        } }, item.id),
+                    _jsx(SidebarRailSeparator, {}, `${item.id}-separator`)
+                ]) }), _jsx("div", { className: "hc-sidebar-rail-footer shrink-0", children: _jsxs("button", { type: "button", className: cn('hc-sidebar-rail-expand app-no-drag inline-flex min-h-12 w-full cursor-pointer items-center rounded-none border-none bg-transparent py-3 text-sidebar-rail-text', expanded ? 'gap-2 px-3' : 'justify-center', 'hover:bg-sidebar-rail-active', railExpandFocusVisible), "aria-label": expanded ? undefined : expandAriaLabel, "aria-expanded": expanded, title: expandLabel, onClick: handleToggleExpanded, children: [_jsx(FaIcon, { icon: expanded ? faAnglesLeft : faAnglesRight, className: "h-[18px]! w-[18px]!", "aria-hidden": true }), expanded ? _jsx("span", { className: "min-w-0 truncate text-left", children: expandLabel }) : null] }) })] }));
+}

package/dist/components/TabBar/TabContextMenu.d.ts

@@ -14,6 +14,10 @@ interface Props {
      * Called when the menu should close without selecting an item.
      */
     onClose: () => void;
+    /**
+     * Accessible name for the menu. Defaults to "Tab actions".
+     */
+    ariaLabel?: string;
 }
 /**
  * Cursor-positioned context menu for tab bars, rendered in a portal at the click point.
@@ -21,6 +25,6 @@ interface Props {
  * @param props - Menu groups, cursor anchor, and close handler.
  * @returns Portal menu panel, or null when there are no items.
  */
-export declare function TabContextMenu({ groups, position, onClose }: Props): JSX.Element | null;
+export declare function TabContextMenu({ groups, position, onClose, ariaLabel }: Props): JSX.Element | null;
 export {};
 //# sourceMappingURL=TabContextMenu.d.ts.map

package/dist/components/TabBar/TabContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/TabContextMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,KAAK,YAAY,EAAqB,MAAM,oBAAoB,CAAC;AAU1E,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoKvF"}
+{"version":3,"file":"TabContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/TabContextMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,KAAK,YAAY,EAAqB,MAAM,oBAAoB,CAAC;AAU1E,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAyB,EAC1B,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoK5B"}