@harborclient/sdk 1.3.3 → 1.3.5

package/dist/components/FloatingDialog/index.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from '@harborclient/sdk/react';
+import { cn } from '../utils.js';
+import { FLOATING_DIALOG_DEFAULT_LEFT, FLOATING_DIALOG_DEFAULT_TOP, FLOATING_DIALOG_VIEWPORT_MARGIN_PX, isFloatingDialogFullyOnScreen } from './floatingDialogPosition.js';
+/**
+ * Clamps a proposed size into min/max and remaining viewport space.
+ *
+ * @param width - Proposed width.
+ * @param height - Proposed height.
+ * @param left - Current panel left.
+ * @param top - Current panel top.
+ * @param minWidth - Minimum width.
+ * @param minHeight - Minimum height.
+ * @param maxWidth - Optional max width cap.
+ * @param maxHeight - Optional max height cap.
+ * @returns Clamped size.
+ */
+function clampFloatingDialogSize(width, height, left, top, minWidth, minHeight, maxWidth, maxHeight) {
+    const margin = FLOATING_DIALOG_VIEWPORT_MARGIN_PX;
+    const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : width;
+    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : height;
+    const roomWidth = Math.max(minWidth, viewportWidth - left - margin);
+    const roomHeight = Math.max(minHeight, viewportHeight - top - margin);
+    const widthCap = maxWidth != null ? Math.min(maxWidth, roomWidth) : roomWidth;
+    const heightCap = maxHeight != null ? Math.min(maxHeight, roomHeight) : roomHeight;
+    return {
+        width: Math.min(Math.max(width, minWidth), widthCap),
+        height: Math.min(Math.max(height, minHeight), heightCap)
+    };
+}
+/**
+ * Non-blocking, draggable dialog panel with no modal mask.
+ *
+ * Clicks pass through to the UI behind the panel. Drag by the handle region.
+ * When `initialWidth` and `initialHeight` are provided, a southeast resize
+ * handle appears (pointer + arrow-key accessible). Parents persist geometry via
+ * `onPositionChange` / `onSizeChange`. If the panel would open or remain
+ * off-screen after a window resize, it relocates to the default corner.
+ *
+ * @param props - Dialog labelling, geometry, and content props.
+ * @returns Floating dialog element.
+ */
+export function FloatingDialog({ label, labelledBy, onClose, disableEscape = false, className, bodyClassName, initialLeft = FLOATING_DIALOG_DEFAULT_LEFT, initialTop = FLOATING_DIALOG_DEFAULT_TOP, onPositionChange, initialWidth, initialHeight, minWidth = 240, minHeight = 120, maxWidth, maxHeight, onSizeChange, dragHandle, children }) {
+    const resizable = initialWidth != null && initialHeight != null;
+    const panelRef = useRef(null);
+    const [position, setPosition] = useState({
+        left: initialLeft,
+        top: initialTop
+    });
+    const [size, setSize] = useState(() => resizable
+        ? clampFloatingDialogSize(initialWidth, initialHeight, initialLeft, initialTop, minWidth, minHeight, maxWidth, maxHeight)
+        : null);
+    const positionRef = useRef(position);
+    const sizeRef = useRef(size);
+    const onPositionChangeRef = useRef(onPositionChange);
+    const onSizeChangeRef = useRef(onSizeChange);
+    const dragStateRef = useRef(null);
+    const resizeStateRef = useRef(null);
+    /**
+     * Keeps the latest position available to resize handlers without rebinding.
+     */
+    useEffect(() => {
+        positionRef.current = position;
+    }, [position]);
+    /**
+     * Keeps the latest size available to relocate / resize handlers.
+     */
+    useEffect(() => {
+        sizeRef.current = size;
+    }, [size]);
+    /**
+     * Keeps the latest position-change callback available to layout/resize handlers.
+     */
+    useEffect(() => {
+        onPositionChangeRef.current = onPositionChange;
+    }, [onPositionChange]);
+    /**
+     * Keeps the latest size-change callback available to resize handlers.
+     */
+    useEffect(() => {
+        onSizeChangeRef.current = onSizeChange;
+    }, [onSizeChange]);
+    /**
+     * Moves the panel to the default corner when it would sit outside the viewport.
+     */
+    const relocateToCornerIfOffScreen = useCallback(() => {
+        const panel = panelRef.current;
+        if (panel == null) {
+            return;
+        }
+        const measured = sizeRef.current ?? {
+            width: panel.offsetWidth,
+            height: panel.offsetHeight
+        };
+        const current = positionRef.current;
+        if (isFloatingDialogFullyOnScreen(current, measured)) {
+            return;
+        }
+        const corner = {
+            left: FLOATING_DIALOG_DEFAULT_LEFT,
+            top: FLOATING_DIALOG_DEFAULT_TOP
+        };
+        positionRef.current = corner;
+        setPosition(corner);
+        onPositionChangeRef.current?.(corner);
+    }, []);
+    /**
+     * After first paint and whenever the window resizes, relocates only when off-screen.
+     */
+    useLayoutEffect(() => {
+        relocateToCornerIfOffScreen();
+        window.addEventListener('resize', relocateToCornerIfOffScreen);
+        return () => window.removeEventListener('resize', relocateToCornerIfOffScreen);
+    }, [relocateToCornerIfOffScreen]);
+    /**
+     * Closes the dialog when Escape is pressed unless disabled.
+     */
+    useEffect(() => {
+        if (disableEscape) {
+            return;
+        }
+        /**
+         * Dismisses the floating dialog on Escape.
+         *
+         * @param event - Keyboard event.
+         */
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [disableEscape, onClose]);
+    /**
+     * Begins a pointer drag from the header handle.
+     *
+     * @param event - Pointer down event on the drag handle.
+     */
+    const handlePointerDown = useCallback((event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragStateRef.current = {
+            pointerId: event.pointerId,
+            originX: event.clientX,
+            originY: event.clientY,
+            startLeft: position.left,
+            startTop: position.top
+        };
+    }, [position.left, position.top]);
+    /**
+     * Updates panel position while dragging.
+     *
+     * @param event - Pointer move event.
+     */
+    const handlePointerMove = useCallback((event) => {
+        const drag = dragStateRef.current;
+        if (drag == null || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        const next = {
+            left: Math.max(FLOATING_DIALOG_VIEWPORT_MARGIN_PX, drag.startLeft + (event.clientX - drag.originX)),
+            top: Math.max(FLOATING_DIALOG_VIEWPORT_MARGIN_PX, drag.startTop + (event.clientY - drag.originY))
+        };
+        positionRef.current = next;
+        setPosition(next);
+    }, []);
+    /**
+     * Ends an active pointer drag and notifies the parent of the final position.
+     *
+     * @param event - Pointer up/cancel event.
+     */
+    const handlePointerUp = useCallback((event) => {
+        const drag = dragStateRef.current;
+        if (drag == null || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        dragStateRef.current = null;
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        onPositionChangeRef.current?.(positionRef.current);
+    }, []);
+    /**
+     * Begins a southeast resize from the resize handle.
+     *
+     * @param event - Pointer down on the resize handle.
+     */
+    const handleResizePointerDown = useCallback((event) => {
+        if (!resizable || size == null || event.button !== 0) {
+            return;
+        }
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        resizeStateRef.current = {
+            pointerId: event.pointerId,
+            originX: event.clientX,
+            originY: event.clientY,
+            startWidth: size.width,
+            startHeight: size.height
+        };
+    }, [resizable, size]);
+    /**
+     * Updates panel size while resizing from the SE handle.
+     *
+     * @param event - Pointer move on the resize handle.
+     */
+    const handleResizePointerMove = useCallback((event) => {
+        const resize = resizeStateRef.current;
+        if (resize == null || resize.pointerId !== event.pointerId) {
+            return;
+        }
+        const next = clampFloatingDialogSize(resize.startWidth + (event.clientX - resize.originX), resize.startHeight + (event.clientY - resize.originY), positionRef.current.left, positionRef.current.top, minWidth, minHeight, maxWidth, maxHeight);
+        sizeRef.current = next;
+        setSize(next);
+    }, [maxHeight, maxWidth, minHeight, minWidth]);
+    /**
+     * Ends an active resize and notifies the parent of the final size.
+     *
+     * @param event - Pointer up/cancel on the resize handle.
+     */
+    const handleResizePointerUp = useCallback((event) => {
+        const resize = resizeStateRef.current;
+        if (resize == null || resize.pointerId !== event.pointerId) {
+            return;
+        }
+        resizeStateRef.current = null;
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        if (sizeRef.current != null) {
+            onSizeChangeRef.current?.(sizeRef.current);
+        }
+    }, []);
+    /**
+     * Adjusts size with arrow keys when the resize handle is focused.
+     *
+     * @param event - Keyboard event on the resize handle.
+     */
+    const handleResizeKeyDown = useCallback((event) => {
+        if (size == null) {
+            return;
+        }
+        const step = event.shiftKey ? 24 : 8;
+        let deltaW = 0;
+        let deltaH = 0;
+        if (event.key === 'ArrowRight') {
+            deltaW = step;
+        }
+        else if (event.key === 'ArrowLeft') {
+            deltaW = -step;
+        }
+        else if (event.key === 'ArrowDown') {
+            deltaH = step;
+        }
+        else if (event.key === 'ArrowUp') {
+            deltaH = -step;
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        const next = clampFloatingDialogSize(size.width + deltaW, size.height + deltaH, positionRef.current.left, positionRef.current.top, minWidth, minHeight, maxWidth, maxHeight);
+        sizeRef.current = next;
+        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-separator bg-surface shadow-xl', className), style: {
+            left: position.left,
+            top: position.top,
+            ...(size != null ? { width: size.width, height: size.height } : {})
+        }, children: [_jsx("div", { className: "hc-floating-dialog-handle shrink-0 cursor-grab touch-none active:cursor-grabbing", onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, children: dragHandle }), _jsx("div", { className: cn('hc-floating-dialog-body min-h-0 flex-1 overflow-auto p-3', bodyClassName), children: children }), resizable ? (_jsx("button", { type: "button", "aria-label": "Resize dialog", className: "absolute right-0 bottom-0 h-4 w-4 cursor-se-resize border-0 bg-transparent p-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent", onPointerDown: handleResizePointerDown, onPointerMove: handleResizePointerMove, onPointerUp: handleResizePointerUp, onPointerCancel: handleResizePointerUp, onKeyDown: handleResizeKeyDown, children: _jsx("span", { className: "pointer-events-none absolute right-1 bottom-1 h-2 w-2 border-r-2 border-b-2 border-muted", "aria-hidden": true }) })) : null] }));
+}

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

@@ -62,12 +62,18 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'clas
      * inline layouts for fields nested inside an already-bordered section.
      */
     bordered?: boolean;
+    /**
+     * When true and `bordered`, draws a left border using the unsaved-tab color
+     * (`--color-tab-unsaved`) to indicate the field value differs from its factory
+     * default — the same token used for dirty request tab titles.
+     */
+    modified?: boolean;
 }
 /**
  * Reusable form field wrapper that pairs a label with one or more controls.
  * Supports stacked fields, checkboxes, inline rows, radio options, and
  * adjacent checkbox rows used in list pickers.
  */
-export declare function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout, labelTone, srOnly, className, labelClassName, bordered, ...props }: Props): JSX.Element;
+export declare function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout, labelTone, srOnly, className, labelClassName, bordered, modified, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,kBAAkB,GAClB,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACrF;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,aAAa,EACb,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACd,QAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8IrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,kBAAkB,GAClB,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACrF;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsCD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,aAAa,EACb,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACd,QAAe,EACf,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+IrB"}

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/PageHeader/index.d.ts

@@ -20,7 +20,8 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
 }
 /**
  * Full-bleed page header with a bordered bottom edge, title block on the left,
- * and optional action controls on the right.
+ * and optional action controls on the right. Sticks to the top of its nearest
+ * scroll ancestor so title and actions stay visible while page content scrolls.
  */
 export declare function PageHeader({ title, description, icon, children, className, ...props }: Props): JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BrB"}

package/dist/components/PageHeader/index.js

@@ -3,8 +3,9 @@ import { FaIcon } from '../FaIcon/index.js';
 import { cn } from '../utils.js';
 /**
  * Full-bleed page header with a bordered bottom edge, title block on the left,
- * and optional action controls on the right.
+ * and optional action controls on the right. Sticks to the top of its nearest
+ * scroll ancestor so title and actions stay visible while page content scrolls.
  */
 export function PageHeader({ title, description, icon, children, className, ...props }) {
-    return (_jsxs("div", { ...props, className: cn('hc-page-header -mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator px-6 py-4', className), children: [_jsxs("div", { className: "hc-page-header-content min-w-0 flex-1", children: [_jsxs("h2", { className: "hc-page-header-title m-0 flex items-center gap-2 text-[22px] leading-[1.15] font-bold tracking-[-0.01em] text-text", children: [icon ? (_jsx(FaIcon, { icon: icon, className: "hc-page-header-title-icon h-4 w-4 shrink-0 text-muted", "aria-hidden": true })) : null, title] }), description ? (_jsx("p", { className: "hc-page-header-description m-0 mt-1 leading-6 text-muted", children: description })) : null] }), children ? (_jsx("div", { className: "hc-page-header-actions flex flex-wrap items-center gap-2", children: children })) : null] }));
+    return (_jsxs("div", { ...props, className: cn('hc-page-header sticky top-0 z-10 -mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator bg-surface px-6 py-4', className), children: [_jsxs("div", { className: "hc-page-header-content min-w-0 flex-1", children: [_jsxs("h2", { className: "hc-page-header-title m-0 flex items-center gap-2 text-[22px] leading-[1.15] font-bold tracking-[-0.01em] text-text", children: [icon ? (_jsx(FaIcon, { icon: icon, className: "hc-page-header-title-icon h-4 w-4 shrink-0 text-muted", "aria-hidden": true })) : null, title] }), description ? (_jsx("p", { className: "hc-page-header-description m-0 mt-1 leading-6 text-muted", children: description })) : null] }), children ? (_jsx("div", { className: "hc-page-header-actions flex flex-wrap items-center gap-2", children: children })) : 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/useResizable.d.ts

@@ -39,5 +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;
 //# 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;AAGhG,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErF,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;AA+DD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACV,EAAE,mBAAmB,GAAG,kBAAkB,CAuK1C"}
+{"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"}