@harborclient/sdk 0.4.5 → 0.5.0

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

@@ -0,0 +1,59 @@
+import type { JSX, ReactNode } from 'react';
+export { ModalFooter } from './ModalFooter.js';
+export { ModalFormLayout } from './ModalFormLayout.js';
+interface BaseProps {
+    /**
+     * Called when the backdrop is clicked or Escape is pressed.
+     */
+    onClose: () => void;
+    /**
+     * Optional width class for the dialog panel (defaults to w-96).
+     */
+    className?: string;
+    /**
+     * Optional classes merged onto the backdrop overlay.
+     */
+    overlayClassName?: string;
+    /**
+     * When true, Escape does not call `onClose` (e.g. modals that require an explicit button).
+     */
+    disableEscape?: boolean;
+    /**
+     * Dialog heading rendered in the modal header row.
+     */
+    title?: ReactNode;
+    /**
+     * Optional muted summary shown below the title in the header.
+     */
+    description?: ReactNode;
+    /**
+     * Extra action controls rendered before the header Close button.
+     */
+    headerActions?: ReactNode;
+    /**
+     * When true, the header Close button is disabled.
+     */
+    closeDisabled?: boolean;
+    /**
+     * Children to render inside the modal body.
+     */
+    children: ReactNode;
+}
+type Props = BaseProps & ({
+    /**
+     * Id of the element that labels the dialog (typically the heading).
+     */
+    labelledBy: string;
+    label?: never;
+} | {
+    labelledBy?: never;
+    /**
+     * Accessible name when no visible heading is linked via `labelledBy`.
+     */
+    label: string;
+});
+/**
+ * Shared modal backdrop and panel wrapper used by all application dialogs.
+ */
+export declare function Modal({ onClose, className, overlayClassName, disableEscape, title, description, headerActions, closeDisabled, labelledBy, label, children }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,UAAU,SAAS;IACjB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,KAAK,KAAK,GAAG,SAAS,GACpB,CACI;IACE;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GACD;IACE,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CACJ,CAAC;AAEJ;;GAEG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,SAAkB,EAClB,gBAAgB,EAChB,aAAqB,EACrB,KAAK,EACL,WAAW,EACX,aAAa,EACb,aAAqB,EACrB,UAAU,EACV,KAAK,EACL,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6DrB"}

package/dist/components/Modal/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { useEffect, useRef } from '@harborclient/sdk/react';
+import { useDialogFocus } from '../useDialogFocus.js';
+import { ModalHeader } from './ModalHeader.js';
+export { ModalFooter } from './ModalFooter.js';
+export { ModalFormLayout } from './ModalFormLayout.js';
+/**
+ * Shared modal backdrop and panel wrapper used by all application dialogs.
+ */
+export function Modal({ onClose, className = 'w-96', overlayClassName, disableEscape = false, title, description, headerActions, closeDisabled = false, labelledBy, label, children }) {
+    const panelRef = useRef(null);
+    useDialogFocus(panelRef);
+    /**
+     * Closes the modal when Escape is pressed unless disabled.
+     */
+    useEffect(() => {
+        if (disableEscape)
+            return;
+        /**
+         * Dismisses the dialog on Escape key press.
+         *
+         * @param event - Document keydown event.
+         */
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [disableEscape, onClose]);
+    const overlayClass = `fixed inset-0 flex items-center justify-center bg-black/40 ${overlayClassName ?? 'z-50'}`;
+    const panelClass = title
+        ? `${className} flex max-h-[85vh] flex-col overflow-hidden rounded-lg border border-separator bg-surface shadow-xl`
+        : `${className} rounded-lg border border-separator bg-surface p-4 shadow-xl`;
+    return (_jsx("div", { className: overlayClass, onClick: onClose, children: _jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": labelledBy, "aria-label": label, className: panelClass, onClick: (event) => event.stopPropagation(), children: title && labelledBy ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { titleId: labelledBy, title: title, description: description, headerActions: headerActions, closeDisabled: closeDisabled, onClose: onClose }), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: children })] })) : (children) }) }));
+}

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

@@ -0,0 +1,25 @@
+import type { JSX } from 'react';
+interface Props {
+    /**
+     * Accessible name for the close control.
+     */
+    label?: string;
+    /**
+     * Called when the user activates the close button.
+     */
+    onClose: () => void;
+    /**
+     * Additional Tailwind classes merged onto the button element.
+     */
+    className?: string;
+}
+/**
+ * Always-visible overlay close icon used on full-page settings and plugin views.
+ *
+ * @param label - Accessible name; defaults to "Close".
+ * @param onClose - Close handler.
+ * @param className - Extra classes appended after the overlay preset.
+ */
+export declare function OverlayCloseButton({ label, onClose, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OverlayCloseButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,KAAe,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAS9F"}

package/dist/components/OverlayCloseButton/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { Button } from '../Button/index.js';
+import { FaIcon } from '../FaIcon/index.js';
+/**
+ * Always-visible overlay close icon used on full-page settings and plugin views.
+ *
+ * @param label - Accessible name; defaults to "Close".
+ * @param onClose - Close handler.
+ * @param className - Extra classes appended after the overlay preset.
+ */
+export function OverlayCloseButton({ label = 'Close', onClose, className }) {
+    const base = 'opacity-100 text-[28px]';
+    const classes = className ? `${base} ${className}` : base;
+    return (_jsx(Button, { type: "button", variant: "icon", className: classes, "aria-label": label, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) }));
+}

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

@@ -0,0 +1,40 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Page title shown in the overlay header.
+     */
+    title: ReactNode;
+    /**
+     * Called when the user closes the overlay.
+     */
+    onClose: () => void;
+    /**
+     * Scrollable page body content.
+     */
+    children: ReactNode;
+    /**
+     * Optional footer actions such as Save/Cancel rows.
+     */
+    footer?: ReactNode;
+    /**
+     * Accessible name for the header close button.
+     */
+    closeLabel?: string;
+    /**
+     * Additional Tailwind classes merged onto the outer scroll container.
+     */
+    className?: string;
+}
+/**
+ * Full-page scrollable overlay shell shared by environment, collection, and plugin views.
+ *
+ * @param title - Header title text or element.
+ * @param onClose - Close handler for the header button.
+ * @param children - Main page content.
+ * @param footer - Optional trailing action row below the body.
+ * @param closeLabel - Accessible close button label.
+ * @param className - Extra classes on the outer container.
+ */
+export declare function OverlayPage({ title, onClose, children, footer, closeLabel, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OverlayPage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiBrB"}

package/dist/components/OverlayPage/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { OverlayCloseButton } from '../OverlayCloseButton/index.js';
+/**
+ * Full-page scrollable overlay shell shared by environment, collection, and plugin views.
+ *
+ * @param title - Header title text or element.
+ * @param onClose - Close handler for the header button.
+ * @param children - Main page content.
+ * @param footer - Optional trailing action row below the body.
+ * @param closeLabel - Accessible close button label.
+ * @param className - Extra classes on the outer container.
+ */
+export function OverlayPage({ title, onClose, children, footer, closeLabel, className }) {
+    const outer = className
+        ? `flex min-h-0 flex-1 flex-col overflow-y-auto p-6 ${className}`
+        : 'flex min-h-0 flex-1 flex-col overflow-y-auto p-6';
+    return (_jsx("div", { className: outer, children: _jsxs("div", { className: "mx-auto w-full", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between gap-4", children: [_jsx("h1", { className: "m-0 text-[15px] font-semibold text-text", children: title }), _jsx(OverlayCloseButton, { label: closeLabel, onClose: onClose })] }), children, footer] }) }));
+}

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

@@ -0,0 +1,31 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Page heading rendered as an `h2`.
+     */
+    title: string;
+    /**
+     * Optional muted summary shown below the title.
+     */
+    description?: string;
+    /**
+     * Optional decorative icon shown before the title.
+     */
+    icon?: IconDefinition;
+    /**
+     * Action controls aligned to the right side of the header row.
+     */
+    children?: ReactNode;
+    /**
+     * Extra classes merged onto the outer header wrapper.
+     */
+    className?: string;
+}
+/**
+ * Full-bleed page header with a bordered bottom edge, title block on the left,
+ * and optional action controls on the right.
+ */
+export declare function PageHeader({ title, description, icon, children, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;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;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiBhG"}

package/dist/components/PageHeader/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { FaIcon } from '../FaIcon/index.js';
+/**
+ * Full-bleed page header with a bordered bottom edge, title block on the left,
+ * and optional action controls on the right.
+ */
+export function PageHeader({ title, description, icon, children, className }) {
+    const wrapperClassName = className
+        ? `-mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator px-6 pb-6 ${className}`
+        : '-mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator px-6 pb-6';
+    return (_jsxs("div", { className: wrapperClassName, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("h2", { className: "m-0 flex items-center gap-2 text-[17px] font-semibold text-text", children: [icon ? _jsx(FaIcon, { icon: icon, className: "h-4 w-4 shrink-0 text-muted", "aria-hidden": true }) : null, title] }), description ? _jsx("p", { className: "m-0 mt-1 text-[14px] text-muted", children: description }) : null] }), children ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: children }) : null] }));
+}

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

@@ -0,0 +1,30 @@
+import type { JSX } from 'react';
+interface Props {
+    /**
+     * Called when the user closes the panel or overlay.
+     */
+    onClose: () => void;
+    /**
+     * Default accessible name when `ariaLabel` is not provided.
+     */
+    label?: string;
+    /**
+     * Accessible name when it should differ from `label`.
+     */
+    ariaLabel?: string;
+    /**
+     * Additional Tailwind classes merged onto the button element.
+     */
+    className?: string;
+}
+/**
+ * Secondary icon close control for settings headers and full-page panels.
+ *
+ * @param onClose - Close handler.
+ * @param label - Default accessible name; defaults to "Close".
+ * @param ariaLabel - Accessible name override.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function PanelCloseButton({ onClose, label, ariaLabel, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PanelCloseButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAe,EACf,SAAS,EACT,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAerB"}

package/dist/components/PanelCloseButton/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { Button } from '../Button/index.js';
+import { FaIcon } from '../FaIcon/index.js';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+/**
+ * Secondary icon close control for settings headers and full-page panels.
+ *
+ * @param onClose - Close handler.
+ * @param label - Default accessible name; defaults to "Close".
+ * @param ariaLabel - Accessible name override.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function PanelCloseButton({ onClose, label = 'Close', ariaLabel, className }) {
+    const base = 'inline-flex shrink-0 items-center justify-center py-2';
+    const classes = className ? `${base} ${className}` : base;
+    return (_jsx(Button, { type: "button", variant: "secondary", className: classes, "aria-label": ariaLabel ?? label, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) }));
+}

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

@@ -0,0 +1,48 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Root element id used by footer toggles via aria-controls.
+     */
+    id: string;
+    /**
+     * Whether the panel is visible (slides up when true).
+     */
+    open: boolean;
+    /**
+     * Closes the panel.
+     */
+    onClose: () => void;
+    /**
+     * Plain-text name for close and resize aria labels (e.g. "console").
+     */
+    closeLabel: string;
+    /**
+     * localStorage key for persisted panel height.
+     */
+    storageKey: string;
+    /**
+     * Header content rendered in the title bar left side.
+     */
+    title?: ReactNode;
+    /**
+     * When true, skips the header bar and overlays the close button on content.
+     */
+    headerless?: boolean;
+    /**
+     * When true, does not render children while the panel is closed.
+     */
+    unmountWhenClosed?: boolean;
+    /**
+     * Panel body content.
+     */
+    children: ReactNode;
+}
+/**
+ * Slide-up, resizable footer panel shell with optional header bar.
+ *
+ * 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, children }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=Resizable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/Resizable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAa5C,UAAU,KAAK;IACb;;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,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,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8ErB"}

package/dist/components/Resizable/Resizable.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@harborclient/sdk/jsx-runtime";
+import { useCallback, useRef } from '@harborclient/sdk/react';
+import { FaIcon } from '../FaIcon/index.js';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { DEFAULT_HEIGHT, MIN_HEIGHT, footerPanelClassName, footerPanelCloseButtonClassName, getFooterPanelMaxSize } from './footerPanelUtils';
+import { ResizeHandle } from './ResizeHandle.js';
+import { useResizable } from './useResizable.js';
+/**
+ * Slide-up, resizable footer panel shell with optional header bar.
+ *
+ * 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, children }) {
+    const containerRef = useRef(null);
+    /**
+     * Keeps max-size measurement stable across re-renders so useResizable
+     * does not re-run layout effects when unrelated UI updates.
+     */
+    const getMaxSize = useCallback(() => getFooterPanelMaxSize(containerRef), []);
+    const { size: height, minSize: panelMinSize, maxSize: panelMaxSize, onResizeStart, onKeyboardResize } = useResizable({
+        axis: 'y',
+        direction: -1,
+        defaultSize: DEFAULT_HEIGHT,
+        minSize: MIN_HEIGHT,
+        getMaxSize,
+        storageKey
+    });
+    const closeButton = (_jsx("button", { type: "button", className: footerPanelCloseButtonClassName, onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }));
+    const body = unmountWhenClosed && !open ? null : children;
+    return (_jsxs("div", { ref: containerRef, id: id, className: footerPanelClassName(open), style: { height }, "aria-hidden": !open, children: [_jsx(ResizeHandle, { orientation: "horizontal", value: height, min: panelMinSize, max: panelMaxSize, onResizeStart: onResizeStart, onKeyboardResize: onKeyboardResize, ariaLabel: `Resize ${closeLabel} panel` }), headerless ? (_jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsx("button", { type: "button", className: `absolute right-2 top-2 z-10 ${footerPanelCloseButtonClassName}`, onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: body })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: title }), closeButton] }), body] }))] }));
+}

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

@@ -0,0 +1,41 @@
+import type { JSX, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
+interface Props {
+    /**
+     * Handle orientation: horizontal resizes height, vertical resizes width.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Current panel size in pixels for valued separator semantics.
+     */
+    value: number;
+    /**
+     * Minimum allowed panel size in pixels.
+     */
+    min: number;
+    /**
+     * Maximum allowed panel size in pixels.
+     */
+    max: number;
+    /**
+     * Called when the user starts dragging the handle.
+     */
+    onResizeStart: (event: ReactMouseEvent) => void;
+    /**
+     * Called when the user presses arrow keys on the focused handle.
+     */
+    onKeyboardResize: (event: ReactKeyboardEvent) => void;
+    /**
+     * Accessible label for the separator.
+     */
+    ariaLabel: string;
+    /**
+     * Optional additional classes for the handle container.
+     */
+    className?: string;
+}
+/**
+ * Draggable separator handle for resizable panels.
+ */
+export declare function ResizeHandle({ orientation, value, min, max, onResizeStart, onKeyboardResize, ariaLabel, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=ResizeHandle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,GAAG,EACH,aAAa,IAAI,kBAAkB,EACnC,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAEf,UAAU,KAAK;IACb;;OAEG;IACH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAEvC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,EACH,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiCrB"}

package/dist/components/Resizable/ResizeHandle.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Draggable separator handle for resizable panels.
+ */
+export function ResizeHandle({ orientation, value, min, max, onResizeStart, onKeyboardResize, ariaLabel, className }) {
+    const isHorizontal = orientation === 'horizontal';
+    const containerClassName = [
+        'm-0 flex shrink-0 items-center justify-center bg-control p-0 font-inherit text-inherit appearance-none hover:bg-selection/60 app-no-drag',
+        isHorizontal
+            ? 'h-1.5 w-full cursor-row-resize border-b border-separator'
+            : 'h-full w-1.5 cursor-col-resize border-r border-separator',
+        className
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("button", { type: "button", className: containerClassName, onMouseDown: onResizeStart, onKeyDown: onKeyboardResize, role: "separator", "aria-orientation": orientation, "aria-label": ariaLabel, "aria-valuenow": Math.round(value), "aria-valuemin": min, "aria-valuemax": Math.round(max), children: _jsx("div", { className: isHorizontal ? 'h-0.5 w-8 rounded-full bg-muted/50' : 'h-8 w-0.5 rounded-full bg-muted/50', "aria-hidden": true }) }));
+}

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

@@ -0,0 +1,25 @@
+import type { RefObject } from 'react';
+/** Default slide-up footer panel height in pixels. */
+export declare const DEFAULT_HEIGHT = 280;
+/** Minimum slide-up footer panel height in pixels. */
+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.
+ *
+ * @param containerRef - Ref attached to the panel root element.
+ * @returns Maximum panel height in pixels.
+ */
+export declare function getFooterPanelMaxSize(containerRef: RefObject<HTMLDivElement | null>): number;
+/**
+ * Builds slide-up footer panel class names for open/closed transform animation.
+ *
+ * @param open - Whether the panel is currently visible.
+ * @returns Tailwind class string for the panel container.
+ */
+export declare function footerPanelClassName(open: boolean): string;
+/** Shared close-button styling for footer slide-up panels. */
+export declare const footerPanelCloseButtonClassName = "inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-[14px] text-muted hover:bg-selection hover:text-text app-no-drag";
+//# sourceMappingURL=footerPanelUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footerPanelUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/footerPanelUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,sDAAsD;AACtD,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,sDAAsD;AACtD,eAAO,MAAM,UAAU,MAAM,CAAC;AAiC9B;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,MAAM,CAI5F;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAM1D;AAED,8DAA8D;AAC9D,eAAO,MAAM,+BAA+B,wLAC2I,CAAC"}

package/dist/components/Resizable/footerPanelUtils.js

@@ -0,0 +1,59 @@
+/** Default slide-up footer panel height in pixels. */
+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.
+ *
+ * Prefers the flex row wrapping `#main-content` so measurement stays correct
+ * when the app shell includes skip links or other elements before the workspace.
+ *
+ * @param containerRef - Ref attached to the panel root element.
+ * @returns Workspace row element, if found.
+ */
+function resolveFooterPanelContentArea(containerRef) {
+    const mainContentParent = document.getElementById('main-content')?.parentElement;
+    if (mainContentParent instanceof HTMLElement) {
+        return mainContentParent;
+    }
+    const shell = containerRef.current?.parentElement?.parentElement;
+    if (!(shell instanceof HTMLElement)) {
+        return undefined;
+    }
+    for (const child of shell.children) {
+        if (child instanceof HTMLElement && child.classList.contains('min-h-0')) {
+            return child;
+        }
+    }
+    return undefined;
+}
+/**
+ * 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.
+ *
+ * @param containerRef - Ref attached to the panel root element.
+ * @returns Maximum panel height in pixels.
+ */
+export function getFooterPanelMaxSize(containerRef) {
+    const contentArea = resolveFooterPanelContentArea(containerRef);
+    if (!contentArea)
+        return window.innerHeight * 0.8;
+    return Math.max(MIN_HEIGHT, contentArea.clientHeight - 40);
+}
+/**
+ * Builds slide-up footer panel class names for open/closed transform animation.
+ *
+ * @param open - Whether the panel is currently visible.
+ * @returns Tailwind class string for the panel container.
+ */
+export function footerPanelClassName(open) {
+    return [
+        'absolute inset-x-0 bottom-full z-40 flex flex-col border-t border-separator bg-surface',
+        'shadow-[0_-4px_16px_rgba(0,0,0,0.12)] transition-transform duration-300 ease-out app-no-drag',
+        open ? 'translate-y-0' : 'translate-y-full pointer-events-none'
+    ].join(' ');
+}
+/** Shared close-button styling for footer slide-up panels. */
+export const footerPanelCloseButtonClassName = 'inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-[14px] text-muted hover:bg-selection hover:text-text app-no-drag';

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

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

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

@@ -0,0 +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"}

package/dist/components/Resizable/index.js

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

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

@@ -0,0 +1,42 @@
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
+type Axis = 'x' | 'y';
+export interface UseResizableOptions {
+    /**
+     * Pointer axis used to compute drag delta.
+     */
+    axis: Axis;
+    /**
+     * Sign applied to pointer delta along the axis.
+     */
+    direction: 1 | -1;
+    /**
+     * Initial size when nothing is persisted.
+     */
+    defaultSize: number;
+    /**
+     * Minimum allowed size in pixels.
+     */
+    minSize: number;
+    /**
+     * Optional dynamic maximum size in pixels.
+     */
+    getMaxSize?: () => number;
+    /**
+     * When set, size is restored from and persisted to localStorage.
+     */
+    storageKey?: string;
+}
+export interface UseResizableResult {
+    size: number;
+    minSize: number;
+    maxSize: number;
+    setSize: (size: number) => void;
+    onResizeStart: (event: ReactMouseEvent) => void;
+    onKeyboardResize: (event: ReactKeyboardEvent) => void;
+}
+/**
+ * Tracks resizable panel size with pointer drag and optional persistence.
+ */
+export declare function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey }: UseResizableOptions): UseResizableResult;
+export {};
+//# sourceMappingURL=useResizable.d.ts.map

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

@@ -0,0 +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;AAEtB,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;CACrB;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;AAoCD;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACX,EAAE,mBAAmB,GAAG,kBAAkB,CAgI1C"}