@harborclient/sdk 0.4.6 → 0.5.0

package/dist/components/FooterIcon/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { FaIcon } from '../FaIcon/index.js';
+/**
+ * Square icon toggle styles for footer sidebar buttons.
+ *
+ * @param active - Whether the associated sidebar is currently visible.
+ */
+function footerIconButton(active) {
+    return active
+        ? 'inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-surface text-text shadow-sm app-no-drag'
+        : 'inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-muted hover:bg-selection hover:text-text app-no-drag';
+}
+/**
+ * Icon-only toggle button for the window footer bar, used to show or hide
+ * sidebars and similar panels.
+ */
+export function FooterIcon({ icon, active, onClick, label, className }) {
+    const accessibleLabel = active ? `Hide ${label}` : `Show ${label}`;
+    const classes = className ? `${footerIconButton(active)} ${className}` : footerIconButton(active);
+    return (_jsx("button", { type: "button", className: classes, onClick: onClick, "aria-pressed": active, "aria-label": accessibleLabel, title: accessibleLabel, children: _jsx(FaIcon, { icon: icon, className: "h-4 w-4" }) }));
+}

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

@@ -0,0 +1,31 @@
+import type { JSX } from 'react';
+import type { FormDataPart, Variable } from '../../types.js';
+export interface Props {
+    /**
+     * Editable multipart form rows.
+     */
+    parts: FormDataPart[];
+    /**
+     * Called when rows are added, updated, or removed.
+     *
+     * @param parts - Updated part list.
+     */
+    onChange: (parts: FormDataPart[]) => void;
+    /**
+     * Collection-scoped variables for value highlighting and tooltips.
+     */
+    variables: Variable[];
+    /**
+     * Opens the host file picker and returns selected absolute paths.
+     */
+    onSelectFiles: () => Promise<string[]>;
+    /**
+     * Opens collection settings to edit a hovered variable.
+     */
+    onEditVariable?: () => void;
+}
+/**
+ * Editable table of multipart form parts with text and file field types.
+ */
+export declare function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEditVariable }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormDataEditor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAM/E,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,aAAa,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAqCD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqLrB"}

package/dist/components/FormDataEditor/index.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { useMemo } from '@harborclient/sdk/react';
+import { Button } from '../Button/index.js';
+import { FaIcon } from '../FaIcon/index.js';
+import { Input, Select, fieldFrame } from '../forms/index.js';
+import { VariableInput } from '../VariableInput/index.js';
+const thClass = 'border-r border-b border-separator px-1.5 py-1 text-left text-[14px] font-medium uppercase tracking-wide text-muted last:border-r-0';
+const tdClass = 'border-r border-b border-separator p-1.5 align-top last:border-r-0';
+/**
+ * Returns a blank multipart form part with enabled set to true.
+ */
+function emptyFormPart() {
+    return { key: '', value: '', enabled: true, type: 'text', files: [] };
+}
+/**
+ * Returns the file name portion of an absolute path.
+ *
+ * @param filePath - Absolute file path.
+ */
+function fileBasename(filePath) {
+    const normalized = filePath.replace(/\\/g, '/');
+    const lastSlash = normalized.lastIndexOf('/');
+    return lastSlash >= 0 ? normalized.slice(lastSlash + 1) : normalized;
+}
+/**
+ * Ensures at least one row exists and appends a trailing blank row when needed.
+ *
+ * @param parts - Current form parts.
+ * @returns Rows safe to render in the editor.
+ */
+function withTrailingRow(parts) {
+    if (parts.length === 0) {
+        return [emptyFormPart()];
+    }
+    return parts;
+}
+/**
+ * Editable table of multipart form parts with text and file field types.
+ */
+export function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEditVariable }) {
+    /**
+     * Ensures at least one row exists for rendering, including a trailing blank row.
+     */
+    const rows = useMemo(() => withTrailingRow(parts), [parts]);
+    /**
+     * Updates a single row by index, auto-appending a blank row when the last key is filled.
+     *
+     * @param index - Row index to update.
+     * @param patch - Partial fields to merge into the row.
+     */
+    const updateRow = (index, patch) => {
+        const next = rows.map((row, i) => (i === index ? { ...row, ...patch } : row));
+        const isLast = index === rows.length - 1;
+        if (isLast && next[index].key.trim() !== '') {
+            next.push(emptyFormPart());
+        }
+        onChange(next);
+    };
+    /**
+     * Removes a row, keeping at least one empty row.
+     *
+     * @param index - Row index to remove.
+     */
+    const removeRow = (index) => {
+        if (rows.length === 1) {
+            onChange([emptyFormPart()]);
+            return;
+        }
+        onChange(rows.filter((_, i) => i !== index));
+    };
+    /**
+     * Opens the host file picker and merges selected paths into a file row.
+     *
+     * @param index - Row index to attach files to.
+     */
+    const chooseFiles = async (index) => {
+        const selected = await onSelectFiles();
+        if (selected.length === 0) {
+            return;
+        }
+        const currentFiles = rows[index]?.files ?? [];
+        const merged = [...currentFiles];
+        for (const filePath of selected) {
+            if (!merged.includes(filePath)) {
+                merged.push(filePath);
+            }
+        }
+        updateRow(index, { type: 'file', files: merged, value: '' });
+    };
+    /**
+     * Removes one file path from a file row.
+     *
+     * @param index - Row index containing the file.
+     * @param filePath - Absolute path to remove.
+     */
+    const removeFile = (index, filePath) => {
+        const currentFiles = rows[index]?.files ?? [];
+        updateRow(index, { files: currentFiles.filter((file) => file !== filePath) });
+    };
+    return (_jsx("div", { className: "overflow-hidden rounded-md border border-separator", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: `${thClass} w-6 p-0` }), _jsx("th", { className: thClass, children: "Key" }), _jsx("th", { className: `${thClass} w-24`, children: "Type" }), _jsx("th", { className: thClass, children: "Value" }), _jsx("th", { className: `${thClass} w-7 p-0` })] }) }), _jsx("tbody", { className: "[&_tr:last-child_td]:border-b-0", children: rows.map((row, index) => (_jsxs("tr", { className: "group", children: [_jsx("td", { className: `${tdClass} w-6 p-1 text-center`, children: _jsx(Input, { type: "checkbox", className: "app-no-drag", checked: row.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx("td", { className: tdClass, children: _jsx(Input, { type: "text", className: "w-full", value: row.key, placeholder: "field", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateRow(index, { key: e.target.value }) }) }), _jsx("td", { className: tdClass, children: _jsxs(Select, { className: "w-full", value: row.type, "aria-label": `Type, row ${index + 1}`, onChange: (e) => {
+                                        const type = e.target.value;
+                                        updateRow(index, {
+                                            type,
+                                            value: type === 'text' ? row.value : '',
+                                            files: type === 'file' ? row.files : []
+                                        });
+                                    }, children: [_jsx("option", { value: "text", children: "Text" }), _jsx("option", { value: "file", children: "File" })] }) }), _jsx("td", { className: tdClass, children: row.type === 'text' ? (_jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: row.value, onChange: (value) => updateRow(index, { value }), variables: variables, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable })) : (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "self-start px-2 py-0.5 text-[14px]", onClick: () => void chooseFiles(index), children: "Choose files" }), row.files.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: row.files.map((filePath) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-md border border-separator bg-control px-1.5 py-0.5 text-[14px] text-text", title: filePath, children: [_jsx("span", { className: "truncate", children: fileBasename(filePath) }), _jsx("button", { type: "button", className: "inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted hover:bg-selection hover:text-text app-no-drag", onClick: () => removeFile(index, filePath), title: "Remove file", children: _jsx(FaIcon, { icon: faXmark, className: "h-3 w-3" }) })] }, filePath))) }))] })) }), _jsx("td", { className: `${tdClass} w-7 p-1 text-center`, children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }) }));
+}

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

@@ -0,0 +1,75 @@
+import type { JSX, ReactNode } from 'react';
+/**
+ * Layout preset for label and control placement within a form group.
+ */
+export type FormGroupLayout = 'stacked' | 'checkbox' | 'inline' | 'radio' | 'checkboxAdjacent' | 'associated';
+/**
+ * Label color tone for form group headings.
+ */
+export type FormGroupLabelTone = 'default' | 'muted';
+interface Props {
+    /**
+     * Visible label text, or screen-reader-only text when `srOnly` is set.
+     */
+    label: ReactNode;
+    /**
+     * Form control(s) rendered inside or beside the label. Omitted for `associated` layout.
+     */
+    children?: ReactNode;
+    /**
+     * Associates the label with a control via `htmlFor`.
+     */
+    htmlFor?: string;
+    /**
+     * Muted helper text rendered below the control (stacked layout only).
+     */
+    description?: ReactNode;
+    /**
+     * Validation error rendered below the control with linked `aria-describedby`.
+     */
+    error?: ReactNode;
+    /**
+     * Explicit id for the error element; defaults to `${htmlFor}-error` when `htmlFor` is set.
+     */
+    errorId?: string;
+    /**
+     * Label and control placement. Defaults to stacked (label above control).
+     */
+    layout?: FormGroupLayout;
+    /**
+     * Label color style. Defaults to prominent `text-text`.
+     */
+    labelTone?: FormGroupLabelTone;
+    /**
+     * Hides the label visually while keeping it available to screen readers.
+     */
+    srOnly?: boolean;
+    /**
+     * Additional Tailwind classes on the outer wrapper.
+     */
+    className?: string;
+    /**
+     * Extra classes on the label element (associated and checkboxAdjacent layouts).
+     */
+    labelClassName?: string;
+}
+/**
+ * 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.
+ *
+ * @param label - Field label text.
+ * @param children - Input, select, or composite control content.
+ * @param htmlFor - ID of the primary associated control.
+ * @param description - Optional helper text below the control.
+ * @param error - Optional validation error below the control.
+ * @param errorId - Explicit error element id for `aria-describedby`.
+ * @param layout - Label/control placement preset.
+ * @param labelTone - Label color style.
+ * @param srOnly - Hide label visually for screen-reader-only labels.
+ * @param className - Extra classes on the outer wrapper.
+ * @param labelClassName - Extra classes on the label element.
+ */
+export declare function FormGroup({ label, children, htmlFor, description, error, errorId, layout, labelTone, srOnly, className, labelClassName }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C;;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,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;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,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;CACzB;AAkDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkFrB"}

package/dist/components/FormGroup/index.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { cloneElement, isValidElement } from '@harborclient/sdk/react';
+import { FieldError } from '../FieldError/index.js';
+/**
+ * Returns Tailwind classes for the label text based on tone and visibility.
+ *
+ * @param tone - Label color preset.
+ * @param srOnly - Whether the label is visually hidden.
+ * @param inline - Whether the label sits beside the control in a row.
+ * @returns Class string for the label element.
+ */
+function labelClasses(tone, srOnly, inline) {
+    const base = 'text-[14px]';
+    const visibility = srOnly ? 'sr-only' : '';
+    if (inline) {
+        const color = tone === 'muted' ? 'shrink-0 text-muted' : 'shrink-0 font-medium text-text';
+        return `${base} ${color} ${visibility}`.trim();
+    }
+    const color = tone === 'muted' ? 'text-muted' : 'font-medium text-text';
+    return `${base} ${color} ${visibility}`.trim();
+}
+/**
+ * Merges accessibility attributes onto a single control when a field error is present.
+ *
+ * @param child - Form control element to enhance.
+ * @param describedBy - Id of the error element for `aria-describedby`.
+ * @returns The original node or a cloned element with invalid/describedby props.
+ */
+function enhanceControl(child, describedBy) {
+    if (!describedBy ||
+        !isValidElement(child)) {
+        return child;
+    }
+    const existingDescribedBy = typeof child.props['aria-describedby'] === 'string'
+        ? child.props['aria-describedby']
+        : undefined;
+    const mergedDescribedBy = existingDescribedBy
+        ? `${existingDescribedBy} ${describedBy}`
+        : describedBy;
+    return cloneElement(child, {
+        'aria-invalid': true,
+        'aria-describedby': mergedDescribedBy
+    });
+}
+/**
+ * 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.
+ *
+ * @param label - Field label text.
+ * @param children - Input, select, or composite control content.
+ * @param htmlFor - ID of the primary associated control.
+ * @param description - Optional helper text below the control.
+ * @param error - Optional validation error below the control.
+ * @param errorId - Explicit error element id for `aria-describedby`.
+ * @param layout - Label/control placement preset.
+ * @param labelTone - Label color style.
+ * @param srOnly - Hide label visually for screen-reader-only labels.
+ * @param className - Extra classes on the outer wrapper.
+ * @param labelClassName - Extra classes on the label element.
+ */
+export function FormGroup({ label, children, htmlFor, description, error, errorId, layout = 'stacked', labelTone = 'default', srOnly = false, className, labelClassName }) {
+    const extra = className ?? '';
+    if (layout === 'associated') {
+        const associatedClasses = labelClassName ?? 'text-[14px] text-text';
+        return (_jsx("label", { htmlFor: htmlFor, className: associatedClasses, children: label }));
+    }
+    if (layout === 'checkboxAdjacent') {
+        const wrapperClasses = extra ? `flex items-start gap-2 ${extra}` : 'flex items-start gap-2';
+        const adjacentLabelClasses = labelClassName ?? 'min-w-0 flex-1 text-[14px] text-text';
+        return (_jsxs("div", { className: wrapperClasses, children: [children, _jsx("label", { htmlFor: htmlFor, className: adjacentLabelClasses, children: label })] }));
+    }
+    if (layout === 'radio') {
+        const wrapperClasses = extra
+            ? `inline-flex cursor-pointer items-center gap-1.5 text-[14px] text-text app-no-drag ${extra}`
+            : 'inline-flex cursor-pointer items-center gap-1.5 text-[14px] text-text app-no-drag';
+        return (_jsxs("label", { htmlFor: htmlFor, className: wrapperClasses, children: [children, label] }));
+    }
+    if (layout === 'checkbox') {
+        const wrapperClasses = extra ? `flex items-center gap-2 ${extra}` : 'flex items-center gap-2';
+        return (_jsxs("label", { htmlFor: htmlFor, className: wrapperClasses, children: [children, _jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label })] }));
+    }
+    if (layout === 'inline') {
+        const wrapperClasses = extra
+            ? `flex min-w-0 flex-1 items-center gap-2 ${extra}`
+            : 'flex min-w-0 flex-1 items-center gap-2';
+        return (_jsxs("label", { htmlFor: htmlFor, className: wrapperClasses, children: [_jsx("span", { className: labelClasses(labelTone, srOnly, true), children: label }), children] }));
+    }
+    const resolvedErrorId = error != null && error !== ''
+        ? (errorId ?? (htmlFor ? `${htmlFor}-error` : undefined))
+        : undefined;
+    const control = enhanceControl(children, resolvedErrorId);
+    const wrapperClasses = extra ? `flex flex-col gap-1 ${extra}` : 'flex flex-col gap-1';
+    return (_jsxs("div", { className: wrapperClasses, children: [_jsxs("label", { htmlFor: htmlFor, className: "flex flex-col gap-1", children: [_jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label }), control, description != null && description !== '' ? (_jsx("p", { className: "m-0 text-[14px] text-muted", children: description })) : null] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
+}

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

@@ -0,0 +1,35 @@
+import type { JSX } from 'react';
+import type { KeyValue, Variable } from '../../types.js';
+export interface Props {
+    /**
+     * Editable key-value rows.
+     */
+    rows: KeyValue[];
+    /**
+     * Called when rows are added, updated, or removed.
+     *
+     * @param rows - Updated row list.
+     */
+    onChange: (rows: KeyValue[]) => void;
+    /**
+     * Placeholder text for the key column.
+     */
+    placeholderKey?: string;
+    /**
+     * Placeholder text for the value column.
+     */
+    placeholderValue?: string;
+    /**
+     * Collection-scoped variables for value highlighting and tooltips.
+     */
+    variables: Variable[];
+    /**
+     * Opens collection settings to edit a hovered variable.
+     */
+    onEditVariable?: () => void;
+}
+/**
+ * Editable table of key-value rows with enable toggles for headers and params.
+ */
+export declare function KeyValueEditor({ rows, onChange, placeholderKey, placeholderValue, variables, onEditVariable }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyValueEditor/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAMzD,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,IAAI,EAAE,QAAQ,EAAE,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAMD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,gBAA0B,EAC1B,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2FrB"}

package/dist/components/KeyValueEditor/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+import { Input, fieldFrame } from '../forms/index.js';
+import { VariableInput } from '../VariableInput/index.js';
+const thClass = 'border-r border-b border-separator px-1.5 py-1 text-left text-[14px] font-medium uppercase tracking-wide text-muted last:border-r-0';
+const tdClass = 'border-r border-b border-separator p-1.5 last:border-r-0';
+/**
+ * Editable table of key-value rows with enable toggles for headers and params.
+ */
+export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeholderValue = 'Value', variables, onEditVariable }) {
+    /**
+     * Updates a single row by index.
+     *
+     * @param index - Row index to update.
+     * @param patch - Partial fields to merge into the row.
+     */
+    const updateRow = (index, patch) => {
+        const next = rows.map((row, i) => (i === index ? { ...row, ...patch } : row));
+        const isLast = index === rows.length - 1;
+        if (isLast && next[index].key.trim() !== '') {
+            next.push({ key: '', value: '', enabled: true });
+        }
+        onChange(next);
+    };
+    /**
+     * Removes a row, keeping at least one empty row.
+     *
+     * @param index - Row index to remove.
+     */
+    const removeRow = (index) => {
+        if (rows.length === 1) {
+            onChange([{ key: '', value: '', enabled: true }]);
+            return;
+        }
+        onChange(rows.filter((_, i) => i !== index));
+    };
+    return (_jsx("div", { className: "overflow-hidden rounded-md border border-separator", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: `${thClass} w-6 p-0` }), _jsx("th", { className: thClass, children: "Key" }), _jsx("th", { className: thClass, children: "Value" }), _jsx("th", { className: `${thClass} w-7 p-0` })] }) }), _jsx("tbody", { className: "[&_tr:last-child_td]:border-b-0", children: rows.map((row, index) => (_jsxs("tr", { className: "group", children: [_jsx("td", { className: `${tdClass} w-6 p-1 text-center`, children: _jsx(Input, { type: "checkbox", className: "app-no-drag", checked: row.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx("td", { className: tdClass, children: _jsx(Input, { type: "text", className: "w-full", value: row.key, placeholder: placeholderKey, "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateRow(index, { key: e.target.value }) }) }), _jsx("td", { className: tdClass, children: _jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: row.value, onChange: (value) => updateRow(index, { value }), variables: variables, placeholder: placeholderValue, "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable }) }), _jsx("td", { className: `${tdClass} w-7 p-1 text-center`, children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }) }));
+}

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

@@ -0,0 +1,20 @@
+import type { JSX } from 'react';
+import type { HttpMethod } from '../../types.js';
+interface Props {
+    /**
+     * Currently selected HTTP method.
+     */
+    value: HttpMethod;
+    /**
+     * Called when the user picks a different method.
+     *
+     * @param method - Newly selected HTTP method.
+     */
+    onChange: (method: HttpMethod) => void;
+}
+/**
+ * Dropdown for selecting an HTTP request method.
+ */
+export declare function MethodSelect({ value, onChange }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MethodSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKjD,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgBpE"}

package/dist/components/MethodSelect/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { Select } from '../forms/index.js';
+const METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'];
+/**
+ * Dropdown for selecting an HTTP request method.
+ */
+export function MethodSelect({ value, onChange }) {
+    return (_jsx(Select, { variant: "plain", className: "w-[100px] shrink-0 cursor-pointer appearance-none border-none bg-transparent px-2 py-1 text-[14px] font-semibold app-no-drag", value: value, "aria-label": "HTTP method", onChange: (e) => onChange(e.target.value), children: METHODS.map((method) => (_jsx("option", { value: method, children: method }, method))) }));
+}

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

@@ -0,0 +1,25 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Action buttons rendered in a right-aligned row.
+     */
+    children: ReactNode;
+    /**
+     * When true, adds top margin before the action row (common in modal bodies).
+     */
+    spaced?: boolean;
+    /**
+     * Additional Tailwind classes merged onto the footer row.
+     */
+    className?: string;
+}
+/**
+ * Right-aligned action button row for modal bodies and overlay footers.
+ *
+ * @param children - Cancel, confirm, and other action controls.
+ * @param spaced - Whether to add `mt-4` above the button row.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function ModalFooter({ children, spaced, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=ModalFooter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAc,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAKvF"}

package/dist/components/Modal/ModalFooter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Right-aligned action button row for modal bodies and overlay footers.
+ *
+ * @param children - Cancel, confirm, and other action controls.
+ * @param spaced - Whether to add `mt-4` above the button row.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function ModalFooter({ children, spaced = false, className }) {
+    const base = spaced ? 'mt-4 flex justify-end gap-2' : 'flex justify-end gap-2';
+    const classes = className ? `${base} ${className}` : base;
+    return _jsx("div", { className: classes, children: children });
+}

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

@@ -0,0 +1,31 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Primary modal body content such as form fields or descriptive text.
+     */
+    children: ReactNode;
+    /**
+     * Optional error message rendered above the action row.
+     */
+    error?: ReactNode;
+    /**
+     * Action buttons; wrapped in {@link ModalFooter} when provided.
+     */
+    actions?: ReactNode;
+    /**
+     * When true, adds top margin on the action footer row.
+     */
+    actionsSpaced?: boolean;
+}
+/**
+ * Stacks modal body content, an optional error block, and a trailing action footer
+ * using the shared spacing conventions used across Team Hub and settings dialogs.
+ *
+ * @param children - Main modal content.
+ * @param error - Optional inline error rendered before actions.
+ * @param actions - Footer buttons wrapped by {@link ModalFooter}.
+ * @param actionsSpaced - Whether the footer row receives `mt-4`.
+ */
+export declare function ModalFormLayout({ children, error, actions, actionsSpaced }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=ModalFormLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFormLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalFormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,aAAoB,EACrB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQrB"}

package/dist/components/Modal/ModalFormLayout.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { ModalFooter } from './ModalFooter.js';
+/**
+ * Stacks modal body content, an optional error block, and a trailing action footer
+ * using the shared spacing conventions used across Team Hub and settings dialogs.
+ *
+ * @param children - Main modal content.
+ * @param error - Optional inline error rendered before actions.
+ * @param actions - Footer buttons wrapped by {@link ModalFooter}.
+ * @param actionsSpaced - Whether the footer row receives `mt-4`.
+ */
+export function ModalFormLayout({ children, error, actions, actionsSpaced = true }) {
+    return (_jsxs(_Fragment, { children: [children, error, actions ? _jsx(ModalFooter, { spaced: actionsSpaced, children: actions }) : null] }));
+}

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

@@ -0,0 +1,34 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Id referenced by the dialog's `aria-labelledby`.
+     */
+    titleId: string;
+    /**
+     * Dialog heading rendered in the header row.
+     */
+    title: ReactNode;
+    /**
+     * Optional muted summary shown below the title.
+     */
+    description?: ReactNode;
+    /**
+     * Extra action controls rendered before the Close button.
+     */
+    headerActions?: ReactNode;
+    /**
+     * When true, the header Close button is disabled.
+     */
+    closeDisabled?: boolean;
+    /**
+     * Closes the dialog from the header Close button.
+     */
+    onClose: () => void;
+}
+/**
+ * Modal header row with a bordered bottom edge, title block on the left,
+ * optional actions, and a close icon on the right.
+ */
+export declare function ModalHeader({ titleId, title, description, headerActions, closeDisabled, onClose }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=ModalHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5C,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;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,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,aAAa,EACb,aAAqB,EACrB,OAAO,EACR,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2BrB"}

package/dist/components/Modal/ModalHeader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+/**
+ * Modal header row with a bordered bottom edge, title block on the left,
+ * optional actions, and a close icon on the right.
+ */
+export function ModalHeader({ titleId, title, description, headerActions, closeDisabled = false, onClose }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-separator px-4 py-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "m-0 flex flex-wrap items-center gap-2 text-[17px] font-semibold text-text", children: title }), description ? _jsx("p", { className: "m-0 mt-1 text-[14px] text-muted", children: description }) : null] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headerActions, _jsx(Button, { type: "button", variant: "icon", className: "shrink-0 opacity-100", "aria-label": "Close", disabled: closeDisabled, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) })] })] }));
+}