@harborclient/sdk 1.3.2 → 1.3.4

package/dist/components/FormGroup/index.js

@@ -2,21 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { useId } from '@harborclient/sdk/react';
 import { FieldError } from '../FieldError/index.js';
 import { enhanceControl } from '../enhanceControl.js';
-/**
- * Returns Tailwind classes for the label text based on tone and visibility.
- *
- * @returns Class string for the label element.
- */
 /**
  * Returns wrapper classes for bordered stacked, checkbox, and inline layouts.
  *
  * @param bordered - Whether the default border and padding should be applied.
  * @param layoutClasses - Layout-specific flex and sizing classes.
  * @param extra - Caller-supplied className override.
+ * @param modified - When true with `bordered`, adds a left unsaved-tab color border.
  */
-function borderedWrapperClasses(bordered, layoutClasses, extra) {
+function borderedWrapperClasses(bordered, layoutClasses, extra, modified = false) {
     const frame = bordered ? 'p-4 border border-separator rounded-md' : '';
-    const base = `hc-form-group ${layoutClasses} ${frame}`.trim();
+    const accent = bordered && modified ? 'border-l-2 border-l-[var(--color-tab-unsaved)]' : '';
+    const base = `hc-form-group ${layoutClasses} ${frame} ${accent}`.trim();
     return extra ? `${base} ${extra}` : base;
 }
 /**
@@ -39,7 +36,7 @@ function labelClasses(tone, srOnly, inline) {
  * Supports stacked fields, checkboxes, inline rows, radio options, and
  * adjacent checkbox rows used in list pickers.
  */
-export function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout = 'stacked', labelTone = 'default', srOnly = false, className, labelClassName, bordered = true, ...props }) {
+export function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout = 'stacked', labelTone = 'default', srOnly = false, className, labelClassName, bordered = true, modified = false, ...props }) {
     const generatedId = useId();
     const controlId = htmlFor ?? generatedId;
     const extra = className ?? '';
@@ -78,11 +75,11 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
             id: controlId,
             invalid: resolvedErrorId != null
         });
-        const wrapperClasses = borderedWrapperClasses(bordered, 'flex flex-col gap-1', extra);
+        const wrapperClasses = borderedWrapperClasses(bordered, 'flex flex-col gap-1', extra, modified);
         return (_jsxs("div", { ...props, className: wrapperClasses, children: [_jsxs("label", { htmlFor: controlId, className: "hc-form-group-label flex flex-col gap-1", children: [_jsxs("span", { className: "hc-form-group-label-row flex items-center gap-2", children: [linkedChildren, _jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label })] }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 pl-[26px] text-[14px] text-muted", children: description })) : null] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
     }
     if (layout === 'inline') {
-        const wrapperClasses = borderedWrapperClasses(bordered, 'flex min-w-0 flex-1 items-center gap-2', extra);
+        const wrapperClasses = borderedWrapperClasses(bordered, 'flex min-w-0 flex-1 items-center gap-2', extra, modified);
         const linkedChildren = enhanceControl(children, { id: controlId });
         return (_jsxs("label", { htmlFor: controlId, className: wrapperClasses, children: [_jsx("span", { className: labelClasses(labelTone, srOnly, true), children: label }), linkedChildren] }));
     }
@@ -97,6 +94,6 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
         invalid: resolvedErrorId != null,
         id: htmlFor
     });
-    const wrapperClasses = borderedWrapperClasses(bordered, 'flex flex-col gap-1', extra);
+    const wrapperClasses = borderedWrapperClasses(bordered, 'flex flex-col gap-1', extra, modified);
     return (_jsxs("div", { ...props, className: wrapperClasses, children: [_jsxs("label", { htmlFor: htmlFor, className: "hc-form-group-label flex flex-col gap-1", children: [_jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 text-[14px] text-muted", children: description })) : null, control] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
 }

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

@@ -37,6 +37,7 @@ interface Props<T extends string> extends Omit<ComponentPropsWithoutRef<'nav'>,
 }
 /**
  * Narrow sidebar navigation for multi-section pages such as settings overlays.
+ * Row chrome matches collections sidebar items via {@link sourceRow}.
  */
 export declare function PageSidebar<T extends string>({ items, selected, onSelect, ariaLabel, className, ...props }: Props<T>): JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageSidebar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI3D;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACxD;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAC5C,wBAAwB,CAAC,KAAK,CAAC,EAC/B,YAAY,GAAG,UAAU,CAC1B;IACC;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,CAAC,CAAC;IAEZ;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAWD;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5C,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA4CxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageSidebar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACxD;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAC5C,wBAAwB,CAAC,KAAK,CAAC,EAC/B,YAAY,GAAG,UAAU,CAC1B;IACC;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,CAAC,CAAC;IAEZ;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5C,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAuCxB"}

package/dist/components/PageSidebar/index.js

@@ -1,23 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { FaIcon } from '../FaIcon/index.js';
+import { sourceRow } from '../SidebarItem/sidebarItemClasses.js';
 import { cn } from '../utils.js';
-/**
- * Tailwind classes for a sidebar navigation row.
- */
-function sidebarRow(active) {
-    return active
-        ? 'group flex cursor-pointer items-center gap-1 rounded-md bg-selection px-1.5 py-2 app-no-drag'
-        : 'group flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-2 hover:bg-selection/60 app-no-drag';
-}
 /**
  * Narrow sidebar navigation for multi-section pages such as settings overlays.
+ * Row chrome matches collections sidebar items via {@link sourceRow}.
  */
 export function PageSidebar({ items, selected, onSelect, ariaLabel, className, ...props }) {
-    return (_jsx("nav", { ...props, className: cn('hc-page-sidebar flex w-[220px] shrink-0 flex-col gap-1 border-r border-separator bg-sidebar px-2 py-3', className), "aria-label": ariaLabel, children: items.map((item) => {
+    return (_jsx("nav", { ...props, className: cn('hc-page-sidebar flex w-[220px] shrink-0 flex-col gap-0 border-r border-separator bg-sidebar px-2 py-3', className), "aria-label": ariaLabel, children: items.map((item) => {
             const active = selected === item.value;
-            const rowClass = item.icon
-                ? `hc-page-sidebar-item ${sidebarRow(active)} w-full gap-2 border-none text-left text-[15px] app-no-drag`
-                : `hc-page-sidebar-item ${sidebarRow(active)} w-full border-none text-left text-[15px] app-no-drag`;
-            return (_jsxs("button", { type: "button", className: rowClass, "aria-current": active ? 'page' : undefined, onClick: () => onSelect(item.value), children: [item.icon ? (_jsx(FaIcon, { icon: item.icon, className: cn('hc-page-sidebar-item-icon h-[18px] w-[18px] shrink-0', active ? 'text-text' : 'text-muted'), "aria-hidden": true })) : null, _jsx("span", { className: "hc-page-sidebar-item-label min-w-0 truncate", children: item.label })] }, item.value));
+            return (_jsxs("button", { type: "button", className: cn('hc-sidebar-item hc-page-sidebar-item', sourceRow(active, true), 'min-h-[30px] w-full cursor-pointer border-none text-left text-inherit', item.icon && 'gap-2'), "aria-current": active ? 'page' : undefined, onClick: () => onSelect(item.value), children: [item.icon ? (_jsx(FaIcon, { icon: item.icon, className: "hc-page-sidebar-item-icon h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true })) : null, _jsx("span", { className: "hc-page-sidebar-item-label min-w-0 truncate", children: item.label })] }, item.value));
         }) }));
 }

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

@@ -0,0 +1,11 @@
+/** Window event name used to re-read localStorage sizes after an external write. */
+export declare const RESIZABLE_SYNC_EVENT = "hc:resizable-sync";
+/**
+ * Writes resizable panel sizes to localStorage and notifies mounted hooks to re-read.
+ *
+ * Used when restoring a workspace layout snapshot that includes panel widths/heights.
+ *
+ * @param entries - Map of storageKey → size in pixels.
+ */
+export declare function applyResizableSizes(entries: Record<string, number>): void;
+//# sourceMappingURL=applyResizableSizes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"applyResizableSizes.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/applyResizableSizes.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,sBAAsB,CAAC;AAgBxD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAWzE"}

package/dist/components/Resizable/applyResizableSizes.js

@@ -0,0 +1,34 @@
+/** Window event name used to re-read localStorage sizes after an external write. */
+export const RESIZABLE_SYNC_EVENT = 'hc:resizable-sync';
+/**
+ * Persists a size to localStorage.
+ *
+ * @param storageKey - localStorage key for the panel size.
+ * @param size - Size in pixels to store.
+ */
+function persistSize(storageKey, size) {
+    try {
+        localStorage.setItem(storageKey, String(size));
+    }
+    catch {
+        // Ignore quota or privacy-mode failures.
+    }
+}
+/**
+ * Writes resizable panel sizes to localStorage and notifies mounted hooks to re-read.
+ *
+ * Used when restoring a workspace layout snapshot that includes panel widths/heights.
+ *
+ * @param entries - Map of storageKey → size in pixels.
+ */
+export function applyResizableSizes(entries) {
+    for (const [storageKey, size] of Object.entries(entries)) {
+        if (!Number.isFinite(size)) {
+            continue;
+        }
+        persistSize(storageKey, Math.round(size));
+    }
+    if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent(RESIZABLE_SYNC_EVENT));
+    }
+}

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

@@ -7,7 +7,7 @@ export declare const MIN_HEIGHT = 120;
  * Computes the maximum height for a footer slide-up panel from the main content area.
  *
  * Walks from the panel container up to the app shell and measures the flex row
- * above the footer so panels cannot grow past the usable workspace.
+ * above the footer so panels cannot grow past the usable main content area.
  *
  * @param containerRef - Ref attached to the panel root element.
  * @returns Maximum panel height in pixels.

package/dist/components/Resizable/footerPanelUtils.js

@@ -3,13 +3,13 @@ export const DEFAULT_HEIGHT = 280;
 /** Minimum slide-up footer panel height in pixels. */
 export const MIN_HEIGHT = 120;
 /**
- * Resolves the main workspace row above the footer for max-height measurement.
+ * Resolves the main content row above the footer for max-height measurement.
  *
  * Prefers the flex row wrapping `#main-content` so measurement stays correct
- * when the app shell includes skip links or other elements before the workspace.
+ * when the app shell includes skip links or other elements before the main content area.
  *
  * @param containerRef - Ref attached to the panel root element.
- * @returns Workspace row element, if found.
+ * @returns Main content row element, if found.
  */
 function resolveFooterPanelContentArea(containerRef) {
     const mainContentParent = document.getElementById('main-content')?.parentElement;
@@ -31,7 +31,7 @@ function resolveFooterPanelContentArea(containerRef) {
  * Computes the maximum height for a footer slide-up panel from the main content area.
  *
  * Walks from the panel container up to the app shell and measures the flex row
- * above the footer so panels cannot grow past the usable workspace.
+ * above the footer so panels cannot grow past the usable main content area.
  *
  * @param containerRef - Ref attached to the panel root element.
  * @returns Maximum panel height in pixels.

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

@@ -1,4 +1,5 @@
 export { Resizable } from './Resizable.js';
 export { ResizeHandle } from './ResizeHandle.js';
+export { applyResizableSizes, RESIZABLE_SYNC_EVENT } from './applyResizableSizes.js';
 export { useResizable, type UseResizableOptions, type UseResizableResult } from './useResizable.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/Resizable/index.js

@@ -1,3 +1,4 @@
 export { Resizable } from './Resizable.js';
 export { ResizeHandle } from './ResizeHandle.js';
+export { applyResizableSizes, RESIZABLE_SYNC_EVENT } from './applyResizableSizes.js';
 export { useResizable } from './useResizable.js';

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

@@ -1,4 +1,5 @@
 import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
+export { applyResizableSizes, RESIZABLE_SYNC_EVENT } from './applyResizableSizes.js';
 type Axis = 'x' | 'y';
 export interface UseResizableOptions {
     /**
@@ -38,6 +39,11 @@ export interface UseResizableResult {
     onResizeStart: (event: ReactMouseEvent) => void;
     onKeyboardResize: (event: ReactKeyboardEvent) => void;
 }
+/**
+ * Tracks resizable panel size with pointer drag and optional persistence.
+ *
+ * During drag, pointer movement sets a target size; the displayed size eases
+ * toward that target each frame unless the user prefers reduced motion.
+ */
 export declare function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey, onPersist }: UseResizableOptions): UseResizableResult;
-export {};
 //# sourceMappingURL=useResizable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/useResizable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAEhG,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAkDtB,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IAEX;;OAEG;IACH,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAElB;;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,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACvD;AAyDD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACV,EAAE,mBAAmB,GAAG,kBAAkB,CAgJ1C"}
+{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/useResizable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAGhG,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErF,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAyEtB,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IAEX;;OAEG;IACH,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAElB;;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,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACvD;AAiED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACV,EAAE,mBAAmB,GAAG,kBAAkB,CA8P1C"}

package/dist/components/Resizable/useResizable.js

@@ -1,6 +1,17 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from '@harborclient/sdk/react';
+import { RESIZABLE_SYNC_EVENT } from './applyResizableSizes.js';
+export { applyResizableSizes, RESIZABLE_SYNC_EVENT } from './applyResizableSizes.js';
 /** Id of the shared stylesheet injected during resize drags. */
 const RESIZING_STYLE_ID = 'hc-resizable-drag-styles';
+/**
+ * Fraction of the remaining target gap closed per animation frame during drag.
+ * Lower values feel heavier; higher values track the pointer more closely.
+ */
+const RESIZE_DRAG_LERP = 0.22;
+/**
+ * Stop the drag lerp loop when within this many pixels of the pointer target.
+ */
+const RESIZE_DRAG_SNAP_EPSILON = 0.5;
 /**
  * Injects shared CSS that neutralizes webviews/iframes and shows the resize cursor during drags.
  * Electron webviews paint above normal DOM, so pointer-events must be disabled on the webview itself.
@@ -43,8 +54,22 @@ function setResizingState(axis) {
 function clearResizingState() {
     delete document.body.dataset.hcResizing;
 }
+/**
+ * Returns whether the user prefers reduced motion.
+ *
+ * @returns True when the OS requests minimized animation.
+ */
+function prefersReducedMotion() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return false;
+    }
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
 /**
  * Loads a persisted size from localStorage.
+ *
+ * @param storageKey - localStorage key for the panel size.
+ * @param defaultSize - Fallback when the key is unset or invalid.
  */
 function loadStoredSize(storageKey, defaultSize) {
     try {
@@ -60,6 +85,9 @@ function loadStoredSize(storageKey, defaultSize) {
 }
 /**
  * Persists a size to localStorage.
+ *
+ * @param storageKey - localStorage key for the panel size.
+ * @param size - Size in pixels to store.
  */
 function persistSize(storageKey, size) {
     try {
@@ -71,15 +99,17 @@ function persistSize(storageKey, size) {
 }
 /**
  * Clamps a size between min and optional max bounds.
+ *
+ * @param size - Candidate size in pixels.
+ * @param minSize - Minimum allowed size.
+ * @param getMaxSize - Optional dynamic max getter.
+ * @returns Size clamped to [minSize, max].
  */
 function clampSize(size, minSize, getMaxSize) {
     const rawMax = getMaxSize?.() ?? Number.POSITIVE_INFINITY;
     const maxSize = Math.max(minSize, rawMax);
     return Math.min(maxSize, Math.max(minSize, size));
 }
-/**
- * Tracks resizable panel size with pointer drag and optional persistence.
- */
 /**
  * Persists a committed resize size via localStorage and/or a caller callback.
  *
@@ -93,6 +123,12 @@ function commitSize(storageKey, onPersist, size) {
     }
     onPersist?.(size);
 }
+/**
+ * Tracks resizable panel size with pointer drag and optional persistence.
+ *
+ * During drag, pointer movement sets a target size; the displayed size eases
+ * toward that target each frame unless the user prefers reduced motion.
+ */
 export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey, onPersist }) {
     const [size, setSizeState] = useState(() => {
         const initial = storageKey ? loadStoredSize(storageKey, defaultSize) : defaultSize;
@@ -103,12 +139,80 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
     const startPosRef = useRef(0);
     const startSizeRef = useRef(defaultSize);
     const sizeRef = useRef(size);
+    const targetSizeRef = useRef(size);
+    const rafIdRef = useRef(null);
+    const minSizeRef = useRef(minSize);
+    const getMaxSizeRef = useRef(getMaxSize);
     /**
      * Keeps a ref in sync with state so drag handlers read the latest size.
      */
     useEffect(() => {
         sizeRef.current = size;
     }, [size]);
+    /**
+     * Keeps bound refs current so the lerp loop does not close over stale values.
+     */
+    useEffect(() => {
+        minSizeRef.current = minSize;
+        getMaxSizeRef.current = getMaxSize;
+    }, [getMaxSize, minSize]);
+    /**
+     * Cancels any in-flight drag lerp animation frame.
+     */
+    const stopResizeLerp = useCallback(() => {
+        if (rafIdRef.current != null) {
+            cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = null;
+        }
+    }, []);
+    /**
+     * Eases displayed size toward the pointer target while a drag is active.
+     */
+    const runResizeLerpStep = useCallback(() => {
+        rafIdRef.current = null;
+        if (!resizingRef.current) {
+            return;
+        }
+        const current = sizeRef.current;
+        const target = targetSizeRef.current;
+        const gap = target - current;
+        if (Math.abs(gap) <= RESIZE_DRAG_SNAP_EPSILON) {
+            setSizeState(target);
+            return;
+        }
+        const nextSize = clampSize(current + gap * RESIZE_DRAG_LERP, minSizeRef.current, getMaxSizeRef.current);
+        setSizeState(nextSize);
+        rafIdRef.current = requestAnimationFrame(runResizeLerpStep);
+    }, []);
+    /**
+     * Starts the drag lerp loop when it is not already scheduled.
+     */
+    const startResizeLerp = useCallback(() => {
+        if (rafIdRef.current != null) {
+            return;
+        }
+        rafIdRef.current = requestAnimationFrame(runResizeLerpStep);
+    }, [runResizeLerpStep]);
+    /**
+     * Re-reads this panel's localStorage size when a workspace (or other caller)
+     * applies sizes externally via {@link applyResizableSizes}.
+     */
+    useEffect(() => {
+        if (!storageKey) {
+            return;
+        }
+        /**
+         * Loads the stored size for this panel and clamps it to current bounds.
+         */
+        const handleSync = () => {
+            const nextSize = clampSize(loadStoredSize(storageKey, defaultSize), minSize, getMaxSize);
+            setSizeState(nextSize);
+        };
+        window.addEventListener(RESIZABLE_SYNC_EVENT, handleSync);
+        return () => {
+            window.removeEventListener(RESIZABLE_SYNC_EVENT, handleSync);
+        };
+    }, [defaultSize, getMaxSize, minSize, storageKey]);
     /**
      * Refreshes the computed max size when layout changes or the panel is resized.
      */
@@ -125,22 +229,30 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
     }, [getMaxSize, size]);
     /**
      * Updates panel size with min/max clamping applied.
+     *
+     * @param nextSize - Desired size in pixels before clamping.
      */
     const setSize = useCallback((nextSize) => {
         setSizeState(clampSize(nextSize, minSize, getMaxSize));
     }, [getMaxSize, minSize]);
     /**
      * Captures pointer position and current size when a resize drag begins.
+     *
+     * @param event - React mouse event from the resize handle.
      */
     const onResizeStart = useCallback((event) => {
         event.preventDefault();
+        stopResizeLerp();
         resizingRef.current = true;
         startPosRef.current = axis === 'x' ? event.clientX : event.clientY;
         startSizeRef.current = sizeRef.current;
+        targetSizeRef.current = sizeRef.current;
         setResizingState(axis);
-    }, [axis]);
+    }, [axis, stopResizeLerp]);
     /**
      * Nudges panel size from arrow keys using the same axis/direction math as drag.
+     *
+     * @param event - React keyboard event from the focused resize handle.
      */
     const onKeyboardResize = useCallback((event) => {
         if (event.key === 'Enter' || event.key === ' ') {
@@ -173,7 +285,7 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
      */
     useEffect(() => {
         /**
-         * Updates size from pointer movement while a resize drag is active.
+         * Updates the pointer target (and eases toward it) while a resize drag is active.
          *
          * @param event - Window mousemove event.
          */
@@ -183,17 +295,25 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
             const currentPos = axis === 'x' ? event.clientX : event.clientY;
             const delta = (currentPos - startPosRef.current) * direction;
             const nextSize = clampSize(startSizeRef.current + delta, minSize, getMaxSize);
-            setSizeState(nextSize);
+            targetSizeRef.current = nextSize;
+            if (prefersReducedMotion()) {
+                setSizeState(nextSize);
+                return;
+            }
+            startResizeLerp();
         };
         /**
-         * Ends the resize drag and commits the final size when configured.
+         * Ends the resize drag, snaps to the pointer target, and commits the size.
          */
         const handleMouseUp = () => {
             if (!resizingRef.current)
                 return;
             resizingRef.current = false;
+            stopResizeLerp();
             clearResizingState();
-            commitSize(storageKey, onPersist, sizeRef.current);
+            const snapped = clampSize(targetSizeRef.current, minSize, getMaxSize);
+            setSizeState(snapped);
+            commitSize(storageKey, onPersist, snapped);
         };
         window.addEventListener('mousemove', handleMouseMove);
         window.addEventListener('mouseup', handleMouseUp);
@@ -207,17 +327,27 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
             window.removeEventListener('mousemove', handleMouseMove);
             window.removeEventListener('mouseup', handleMouseUp);
         };
-    }, [axis, direction, getMaxSize, minSize, onPersist, storageKey]);
+    }, [
+        axis,
+        direction,
+        getMaxSize,
+        minSize,
+        onPersist,
+        startResizeLerp,
+        stopResizeLerp,
+        storageKey
+    ]);
     /**
-     * Clears the document resize marker when the hook unmounts mid-drag.
+     * Clears the document resize marker and any lerp loop when the hook unmounts mid-drag.
      */
     useEffect(() => {
         return () => {
+            stopResizeLerp();
             if (resizingRef.current) {
                 resizingRef.current = false;
                 clearResizingState();
             }
         };
-    }, []);
+    }, [stopResizeLerp]);
     return { size, minSize, maxSize, setSize, onResizeStart, onKeyboardResize };
 }

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

@@ -75,6 +75,12 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
      * Additional classes merged onto the trigger button.
      */
     triggerClassName?: string;
+    /**
+     * When set, styles the trigger like {@link FilterButton}: muted when inactive,
+     * full-contrast when active, and an accent corner indicator on icon-only
+     * triggers while filters are applied.
+     */
+    triggerActive?: boolean;
     /**
      * Whether the menu opens below or above the trigger. Defaults to opening downward.
      */
@@ -88,6 +94,6 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
  * `submenu` open a nested flyout panel beside them on hover, click, or
  * `ArrowRight`/`Enter`.
  */
-export declare function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon, triggerAriaLabel, triggerTitle, triggerClassName, placement, className, ...props }: Props): JSX.Element;
+export declare function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon, triggerAriaLabel, triggerTitle, triggerClassName, triggerActive, placement, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAUxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAkBhE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,CAAC,YAAY,GAAG;IAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,GAC9D,CAAC,YAAY,GAAG;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;CACvB,CAAC,CAAC;AAEP,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;;OAGG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAE/B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAUD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,UAAU,EACV,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,SAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAojBrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAUxE,OAAO,KAAK,EACV,wBAAwB,EACxB,GAAG,EAGH,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAmBlF,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,CAAC,YAAY,GAAG;IAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,GAC9D,CAAC,YAAY,GAAG;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;CACvB,CAAC,CAAC;AAEP,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;;OAGG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAE/B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAUD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,UAAU,EACV,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,SAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAskBrB"}

package/dist/components/RowActionsMenu/index.js

@@ -3,6 +3,7 @@ import { faBars, faCaretRight, faCheck } from '@fortawesome/free-solid-svg-icons
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
+import { FilterButtonIcon } from '../FilterButton/FilterButtonIcon.js';
 import { MENU_MIN_WIDTH_PX, clampMenuPosition, getTriggerAnchoredMenuPosition } from '../menuPosition.js';
 import { portalToBody } from '../portalToBody.js';
 import { findAdjacentEnabledIndex, findEdgeEnabledIndex, isMenuItemEnabled, menuItemClass } from '../rowActionsMenuHelpers.js';
@@ -21,7 +22,7 @@ const SUBMENU_CLOSE_DELAY_MS = 200;
  * `submenu` open a nested flyout panel beside them on hover, click, or
  * `ArrowRight`/`Enter`.
  */
-export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon = faBars, triggerAriaLabel, triggerTitle, triggerClassName, placement = 'down', className, ...props }) {
+export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon = faBars, triggerAriaLabel, triggerTitle, triggerClassName, triggerActive, placement = 'down', className, ...props }) {
     const isOpen = openMenuId === menuId;
     const menuElementId = `${menuId}-menu`;
     const submenuElementId = `${menuId}-submenu`;
@@ -403,22 +404,43 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, trigg
     const labeledTriggerVariant = resolvedTriggerVariant === 'icon' || resolvedTriggerVariant === 'iconDanger'
         ? 'secondary'
         : resolvedTriggerVariant;
-    const triggerButton = isLabeledTrigger ? (_jsxs(Button, { innerRef: triggerRef, type: "button", variant: labeledTriggerVariant, className: cn('hc-row-actions-menu-trigger', triggerClassName), title: resolvedTriggerTitle, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
-            e.stopPropagation();
-            if (isOpen) {
-                closeMenu();
-            }
-            else {
-                openMenu(false);
-            }
-        }, onKeyDown: handleTriggerKeyDown, children: [_jsx(FaIcon, { icon: triggerIcon, className: "h-[1em] w-[1em] shrink-0", "aria-hidden": true }), _jsx("span", { className: "hc-row-actions-menu-trigger-label inline-flex min-w-0 flex-1 items-center truncate overflow-hidden leading-none", children: triggerLabel })] })) : (_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: cn('hc-row-actions-menu-trigger', triggerClassName), title: resolvedTriggerTitle, "aria-label": resolvedTriggerAriaLabel, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
-            e.stopPropagation();
-            if (isOpen) {
-                closeMenu();
-            }
-            else {
-                openMenu(false);
-            }
-        }, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: triggerIcon, className: "h-3.5 w-3.5" }) }));
+    const triggerActiveClassName = triggerActive === undefined
+        ? undefined
+        : triggerActive
+            ? 'text-text hover:text-text'
+            : 'text-muted hover:text-text';
+    /**
+     * Toggles the menu from the trigger click without bubbling to the row.
+     *
+     * @param event - Native button click event.
+     */
+    const handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (isOpen) {
+            closeMenu();
+        }
+        else {
+            openMenu(false);
+        }
+    };
+    /**
+     * Icon-only trigger props. Cast through `ButtonProps` so `triggerVariant`
+     * (including `toolbar`) is accepted alongside the default `icon` variant;
+     * `aria-label` is always provided for accessibility.
+     */
+    const iconOnlyTriggerProps = {
+        innerRef: triggerRef,
+        type: 'button',
+        variant: resolvedTriggerVariant,
+        className: cn('hc-row-actions-menu-trigger', triggerActiveClassName, triggerClassName),
+        title: resolvedTriggerTitle,
+        'aria-label': resolvedTriggerAriaLabel,
+        'aria-haspopup': 'menu',
+        'aria-expanded': isOpen,
+        'aria-controls': isOpen ? menuElementId : undefined,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown
+    };
+    const triggerButton = isLabeledTrigger ? (_jsxs(Button, { innerRef: triggerRef, type: "button", variant: labeledTriggerVariant, className: cn('hc-row-actions-menu-trigger', triggerActiveClassName, triggerClassName), title: resolvedTriggerTitle, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: handleTriggerClick, onKeyDown: handleTriggerKeyDown, children: [_jsx(FaIcon, { icon: triggerIcon, className: "h-[1em] w-[1em] shrink-0", "aria-hidden": true }), _jsx("span", { className: "hc-row-actions-menu-trigger-label inline-flex min-w-0 flex-1 items-center truncate overflow-hidden leading-none", children: triggerLabel })] })) : (_jsx(Button, { ...iconOnlyTriggerProps, children: triggerActive !== undefined ? (_jsx(FilterButtonIcon, { active: triggerActive, icon: triggerIcon })) : (_jsx(FaIcon, { icon: triggerIcon, className: "h-3.5 w-3.5" })) }));
     return (_jsxs("div", { ref: rootRef, ...props, className: cn('hc-row-actions-menu shrink-0', className), children: [triggerButton, menuPanel ? portalToBody(menuPanel) : null, submenuPanel] }));
 }