@harborclient/sdk 0.6.4 → 0.6.7

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

@@ -1 +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,CAgMrB"}
+{"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;AAQ/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;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwLrB"}

package/dist/components/FormDataEditor/index.js

@@ -4,37 +4,9 @@ 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 { Table, TableBody, TableCell, TableHead, TableHeader } from '../Table/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;
-}
+import { emptyFormPart, fileBasename, withTrailingRow } from './utils.js';
 /**
  * Editable table of multipart form parts with text and file field types.
  */
@@ -98,12 +70,12 @@ export function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEd
         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", { scope: "col", className: `${thClass} w-6 p-0`, children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx("th", { scope: "col", className: thClass, children: "Key" }), _jsx("th", { scope: "col", className: `${thClass} w-24`, children: "Type" }), _jsx("th", { scope: "col", 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", { 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, "aria-label": 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 ${fileBasename(filePath)}`, "aria-label": `Remove file ${fileBasename(filePath)}`, 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", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }) }));
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { className: "w-6 p-0", children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { className: "w-24", children: "Type" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { className: "w-7 p-0" })] }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx(TableCell, { className: "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(TableCell, { 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(TableCell, { 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(TableCell, { 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, "aria-label": 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 ${fileBasename(filePath)}`, "aria-label": `Remove file ${fileBasename(filePath)}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3 w-3" }) })] }, filePath))) }))] })) }), _jsx(TableCell, { className: "w-7 p-1 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }));
 }

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

@@ -0,0 +1,19 @@
+import type { FormDataPart } from '../../types.js';
+/**
+ * Returns a blank multipart form part with enabled set to true.
+ */
+export declare function emptyFormPart(): FormDataPart;
+/**
+ * Returns the file name portion of an absolute path.
+ *
+ * @param filePath - Absolute file path.
+ */
+export declare function fileBasename(filePath: string): string;
+/**
+ * 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.
+ */
+export declare function withTrailingRow(parts: FormDataPart[]): FormDataPart[];
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/FormDataEditor/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;GAEG;AACH,wBAAgB,aAAa,IAAI,YAAY,CAE5C;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAIrD;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE,CAKrE"}

package/dist/components/FormDataEditor/utils.js

@@ -0,0 +1,28 @@
+/**
+ * Returns a blank multipart form part with enabled set to true.
+ */
+export function emptyFormPart() {
+    return { key: '', value: '', enabled: true, type: 'text', files: [] };
+}
+/**
+ * Returns the file name portion of an absolute path.
+ *
+ * @param filePath - Absolute file path.
+ */
+export 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.
+ */
+export function withTrailingRow(parts) {
+    if (parts.length === 0) {
+        return [emptyFormPart()];
+    }
+    return parts;
+}

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

@@ -1 +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,CAkGrB"}
+{"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;AAOzD,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;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,gBAA0B,EAC1B,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4FrB"}

package/dist/components/KeyValueEditor/index.js

@@ -3,9 +3,8 @@ 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 { Table, TableBody, TableCell, TableHead, TableHeader } from '../Table/index.js';
 import { VariableInput } from '../VariableInput/index.js';
-const thClass = 'border-r border-b border-separator p-3 text-left text-[14px] font-medium uppercase tracking-wide text-muted last:border-r-0';
-const tdClass = 'border-r border-b border-separator p-3 last:border-r-0';
 /**
  * Editable table of key-value rows with enable toggles for headers and params.
  */
@@ -36,5 +35,5 @@ export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeho
         }
         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", { scope: "col", className: `${thClass} w-6 p-0`, children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx("th", { scope: "col", className: thClass, children: "Key" }), _jsx("th", { scope: "col", className: thClass, children: "Value" }), _jsx("th", { scope: "col", className: `${thClass} w-7 p-0` })] }) }), _jsx("tbody", { className: "[&_tr:last-child_td]:border-b-0", children: rows.map((row, index) => (_jsxs("tr", { 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", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }) }));
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { className: "w-6 p-0", children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { className: "w-7 p-0" })] }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx(TableCell, { className: "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(TableCell, { 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(TableCell, { 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(TableCell, { className: "w-7 p-1 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }));
 }

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

@@ -0,0 +1,46 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Page heading rendered in the header row.
+     */
+    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, such as close
+     * or back buttons.
+     */
+    actions?: ReactNode;
+    /**
+     * Optional trailing action row below the body, such as Save/Cancel footers.
+     */
+    footer?: ReactNode;
+    /**
+     * When true, omits the scroll container and padding so the page can render
+     * inside a parent that already scrolls (for example {@link SidebarLayout}).
+     */
+    embedded?: boolean;
+    /**
+     * Additional Tailwind classes merged onto the outer wrapper.
+     */
+    className?: string;
+    /**
+     * Main page body content below the header.
+     */
+    children?: ReactNode;
+}
+/**
+ * Full-area page shell with a {@link PageHeader}, scrollable body, and optional
+ * footer. Use the default mode for self-contained overlay pages; set
+ * `embedded` when the parent already provides scroll and padding.
+ */
+export declare function Page({ title, description, icon, actions, footer, embedded, className, children }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Page/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;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+BrB"}

package/dist/components/Page/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { PageHeader } from '../PageHeader/index.js';
+/**
+ * Full-area page shell with a {@link PageHeader}, scrollable body, and optional
+ * footer. Use the default mode for self-contained overlay pages; set
+ * `embedded` when the parent already provides scroll and padding.
+ */
+export function Page({ title, description, icon, actions, footer, embedded = false, className, children }) {
+    const header = (_jsx(PageHeader, { title: title, description: description, icon: icon, children: actions }));
+    if (embedded) {
+        const outer = className ?? undefined;
+        return (_jsxs("div", { className: outer, children: [header, children, footer] }));
+    }
+    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: [header, children, footer] }) }));
+}

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

@@ -0,0 +1,45 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { JSX } from 'react';
+/**
+ * One entry in a {@link PageSidebar} navigation list.
+ */
+export interface PageSidebarItem<T extends string = string> {
+    /**
+     * Stable section identifier passed to `onSelect` when the row is activated.
+     */
+    value: T;
+    /**
+     * Visible label for the navigation row.
+     */
+    label: string;
+    /**
+     * Optional decorative icon shown before the label.
+     */
+    icon?: IconDefinition;
+}
+interface Props<T extends string> {
+    /**
+     * Navigation entries to render in the sidebar.
+     */
+    items: PageSidebarItem<T>[];
+    /**
+     * Currently selected section value.
+     */
+    selected: T;
+    /**
+     * Called when the user selects a different section.
+     *
+     * @param value - Newly selected section value.
+     */
+    onSelect: (value: T) => void;
+    /**
+     * Accessible name for the sidebar `nav` element.
+     */
+    ariaLabel: string;
+}
+/**
+ * Narrow sidebar navigation for multi-section pages such as settings overlays.
+ */
+export declare function PageSidebar<T extends string>({ items, selected, onSelect, ariaLabel }: Props<T>): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC;;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;IAC9B;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,CAAC,CAAC;IAEZ;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAaD;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5C,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACV,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAiCxB"}

package/dist/components/PageSidebar/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { FaIcon } from '../FaIcon/index.js';
+/**
+ * Tailwind classes for a sidebar navigation row.
+ *
+ * @param active - Whether this row is the current selection.
+ */
+function sidebarRow(active) {
+    return active
+        ? 'group flex items-center gap-1 rounded-md bg-selection px-1.5 py-0.5 app-no-drag'
+        : 'group flex items-center gap-1 rounded-md px-1.5 py-0.5 hover:bg-selection/60 app-no-drag';
+}
+/**
+ * Narrow sidebar navigation for multi-section pages such as settings overlays.
+ */
+export function PageSidebar({ items, selected, onSelect, ariaLabel }) {
+    return (_jsx("nav", { className: "flex w-[180px] shrink-0 flex-col gap-0.5 border-r border-separator bg-sidebar px-2 py-3", "aria-label": ariaLabel, children: items.map((item) => {
+            const active = selected === item.value;
+            const rowClass = item.icon
+                ? `${sidebarRow(active)} w-full gap-2 border-none text-left text-[14px] app-no-drag`
+                : `${sidebarRow(active)} w-full border-none text-left text-[14px] 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: `h-3.5 w-3.5 shrink-0 ${active ? 'text-text' : 'text-muted'}`, "aria-hidden": true })) : null, _jsx("span", { className: "min-w-0 truncate", children: item.label })] }, item.value));
+        }) }));
+}

package/dist/components/SegmentedTabs/SegmentedTabPanel.d.ts

@@ -0,0 +1,21 @@
+import type { JSX, ReactNode } from 'react';
+interface Props<T extends string> {
+    /**
+     * Tab value that controls visibility of this panel.
+     */
+    value: T;
+    /**
+     * Panel content shown when this tab is selected.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for the panel container.
+     */
+    className?: string;
+}
+/**
+ * Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
+ */
+export declare function SegmentedTabPanel<T extends string>({ value, children, className }: Props<T>): JSX.Element | null;
+export {};
+//# sourceMappingURL=SegmentedTabPanel.d.ts.map

package/dist/components/SegmentedTabs/SegmentedTabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,KAAK,EACL,QAAQ,EACR,SAAS,EACV,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkB/B"}

package/dist/components/SegmentedTabs/SegmentedTabPanel.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { useContext } from '@harborclient/sdk/react';
+import { SegmentedTabsContext } from './SegmentedTabsContext.js';
+/**
+ * Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
+ */
+export function SegmentedTabPanel({ value, children, className }) {
+    const context = useContext(SegmentedTabsContext);
+    if (!context) {
+        throw new Error('SegmentedTabPanel must be used within SegmentedTabsGroup');
+    }
+    if (context.value !== value)
+        return null;
+    return (_jsx("div", { role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), className: className, children: children }));
+}

package/dist/components/SegmentedTabs/SegmentedTabsContext.d.ts

@@ -0,0 +1,24 @@
+export interface SegmentedTabsContextValue {
+    /**
+     * Currently selected tab value.
+     */
+    value: string;
+    /**
+     * Selects a tab by value.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Accessible name for the tab list.
+     */
+    ariaLabel: string;
+    /**
+     * Stable DOM id for a tab control.
+     */
+    getTabId: (value: string) => string;
+    /**
+     * Stable DOM id for a tab panel linked to a tab.
+     */
+    getPanelId: (value: string) => string;
+}
+export declare const SegmentedTabsContext: import("react").Context<SegmentedTabsContextValue | null>;
+//# sourceMappingURL=SegmentedTabsContext.d.ts.map

package/dist/components/SegmentedTabs/SegmentedTabsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabsContext.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabsContext.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEpC;;OAEG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACvC;AAED,eAAO,MAAM,oBAAoB,2DAAwD,CAAC"}

package/dist/components/SegmentedTabs/SegmentedTabsContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '@harborclient/sdk/react';
+export const SegmentedTabsContext = createContext(null);

package/dist/components/SegmentedTabs/SegmentedTabsGroup.d.ts

@@ -0,0 +1,28 @@
+import type { JSX, ReactNode } from 'react';
+interface Props<T extends string> {
+    /**
+     * Currently selected tab value.
+     */
+    value: T;
+    /**
+     * Called when the user selects a different tab.
+     *
+     * @param value - Newly selected tab value.
+     */
+    onChange: (value: T) => void;
+    /**
+     * Accessible name for the tab list.
+     */
+    ariaLabel: string;
+    /**
+     * Tab list and linked tab panels.
+     */
+    children: ReactNode;
+}
+/**
+ * Provides tab selection state and stable ids for `SegmentedTabs` and
+ * `SegmentedTabPanel` children.
+ */
+export declare function SegmentedTabsGroup<T extends string>({ value, onChange, ariaLabel, children }: Props<T>): JSX.Element;
+export {};
+//# sourceMappingURL=SegmentedTabsGroup.d.ts.map

package/dist/components/SegmentedTabs/SegmentedTabsGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabsGroup.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/SegmentedTabsGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmBxB"}

package/dist/components/SegmentedTabs/SegmentedTabsGroup.js

@@ -0,0 +1,21 @@
+import { createElement, useId, useMemo } from '@harborclient/sdk/react';
+import { SegmentedTabsContext } from './SegmentedTabsContext.js';
+/**
+ * Provides tab selection state and stable ids for `SegmentedTabs` and
+ * `SegmentedTabPanel` children.
+ */
+export function SegmentedTabsGroup({ value, onChange, ariaLabel, children }) {
+    const baseId = useId();
+    /**
+     * Memoizes context so tab ids stay stable across renders while value updates
+     * propagate to list and panel children.
+     */
+    const contextValue = useMemo(() => ({
+        value,
+        onChange: (nextValue) => onChange(nextValue),
+        ariaLabel,
+        getTabId: (tabValue) => `${baseId}-tab-${tabValue}`,
+        getPanelId: (tabValue) => `${baseId}-panel-${tabValue}`
+    }), [value, onChange, ariaLabel, baseId]);
+    return createElement(SegmentedTabsContext.Provider, { value: contextValue }, children);
+}

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

@@ -1,69 +1,8 @@
-import type { JSX, ReactNode } from 'react';
-export interface TabItem<T extends string> {
-    /**
-     * Unique tab identifier.
-     */
-    value: T;
-    /**
-     * Tab label or custom content.
-     */
-    label: ReactNode;
-    /**
-     * When true, the tab is not rendered.
-     */
-    hidden?: boolean;
-    /**
-     * When true, the tab button is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * When true, renders a small dot indicating the tab has values set.
-     */
-    indicator?: boolean;
-}
-interface GroupProps<T extends string> {
-    /**
-     * Currently selected tab value.
-     */
-    value: T;
-    /**
-     * Called when the user selects a different tab.
-     *
-     * @param value - Newly selected tab value.
-     */
-    onChange: (value: T) => void;
-    /**
-     * Accessible name for the tab list.
-     */
-    ariaLabel: string;
-    /**
-     * Tab list and linked tab panels.
-     */
-    children: ReactNode;
-}
-/**
- * Provides tab selection state and stable ids for `SegmentedTabs` and
- * `SegmentedTabPanel` children.
- */
-export declare function SegmentedTabsGroup<T extends string>({ value, onChange, ariaLabel, children }: GroupProps<T>): JSX.Element;
-interface PanelProps<T extends string> {
-    /**
-     * Tab value that controls visibility of this panel.
-     */
-    value: T;
-    /**
-     * Panel content shown when this tab is selected.
-     */
-    children: ReactNode;
-    /**
-     * Additional CSS classes for the panel container.
-     */
-    className?: string;
-}
-/**
- * Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
- */
-export declare function SegmentedTabPanel<T extends string>({ value, children, className }: PanelProps<T>): JSX.Element | null;
+import type { JSX } from 'react';
+import type { TabItem } from './types.js';
+export { SegmentedTabsGroup } from './SegmentedTabsGroup.js';
+export { SegmentedTabPanel } from './SegmentedTabPanel.js';
+export type { TabItem } from './types.js';
 interface Props<T extends string> {
     /**
      * Tab definitions to render.
@@ -103,5 +42,4 @@ interface Props<T extends string> {
  * macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
  */
 export declare function SegmentedTabs<T extends string>({ tabs, value: valueProp, onChange: onChangeProp, fullWidth, className, pattern, ariaLabel: ariaLabelProp }: Props<T>): JSX.Element;
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA+BD,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM;IACnC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmB7B;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM;IACnC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,KAAK,EACL,QAAQ,EACR,SAAS,EACV,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkBpC;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA+GxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA+GxB"}

package/dist/components/SegmentedTabs/index.js

@@ -1,39 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { createContext, createElement, useCallback, useContext, useId, useMemo, useRef } from '@harborclient/sdk/react';
+import { useCallback, useContext, useId, useMemo, useRef } from '@harborclient/sdk/react';
 import { resolveTabListKeyAction } from '../utils.js';
 import { segment, segmentGroup } from '../classes.js';
-const SegmentedTabsContext = createContext(null);
-/**
- * Provides tab selection state and stable ids for `SegmentedTabs` and
- * `SegmentedTabPanel` children.
- */
-export function SegmentedTabsGroup({ value, onChange, ariaLabel, children }) {
-    const baseId = useId();
-    /**
-     * Memoizes context so tab ids stay stable across renders while value updates
-     * propagate to list and panel children.
-     */
-    const contextValue = useMemo(() => ({
-        value,
-        onChange: (nextValue) => onChange(nextValue),
-        ariaLabel,
-        getTabId: (tabValue) => `${baseId}-tab-${tabValue}`,
-        getPanelId: (tabValue) => `${baseId}-panel-${tabValue}`
-    }), [value, onChange, ariaLabel, baseId]);
-    return createElement(SegmentedTabsContext.Provider, { value: contextValue }, children);
-}
-/**
- * Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
- */
-export function SegmentedTabPanel({ value, children, className }) {
-    const context = useContext(SegmentedTabsContext);
-    if (!context) {
-        throw new Error('SegmentedTabPanel must be used within SegmentedTabsGroup');
-    }
-    if (context.value !== value)
-        return null;
-    return (_jsx("div", { role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), className: className, children: children }));
-}
+import { SegmentedTabsContext } from './SegmentedTabsContext.js';
+export { SegmentedTabsGroup } from './SegmentedTabsGroup.js';
+export { SegmentedTabPanel } from './SegmentedTabPanel.js';
 /**
  * macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
  */

package/dist/components/SegmentedTabs/types.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface TabItem<T extends string> {
+    /**
+     * Unique tab identifier.
+     */
+    value: T;
+    /**
+     * Tab label or custom content.
+     */
+    label: ReactNode;
+    /**
+     * When true, the tab is not rendered.
+     */
+    hidden?: boolean;
+    /**
+     * When true, the tab button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * When true, renders a small dot indicating the tab has values set.
+     */
+    indicator?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/SegmentedTabs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/SegmentedTabs/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,22 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Sidebar navigation rendered in the left column.
+     */
+    sidebar: ReactNode;
+    /**
+     * Scrollable main content rendered in the right column.
+     */
+    children: ReactNode;
+    /**
+     * Additional Tailwind classes merged onto the outer flex column wrapper.
+     */
+    className?: string;
+}
+/**
+ * Two-pane layout shell: a fixed sidebar column and a scrollable content area
+ * with standard page padding.
+ */
+export declare function SidebarLayout({ sidebar, children, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAalF"}

package/dist/components/SidebarLayout/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Two-pane layout shell: a fixed sidebar column and a scrollable content area
+ * with standard page padding.
+ */
+export function SidebarLayout({ sidebar, children, className }) {
+    const outer = className
+        ? `flex min-h-0 flex-1 flex-col ${className}`
+        : 'flex min-h-0 flex-1 flex-col';
+    return (_jsx("div", { className: outer, children: _jsxs("div", { className: "flex min-h-0 flex-1", children: [sidebar, _jsx("div", { className: "flex-1 overflow-y-auto p-6", children: children })] }) }));
+}

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

@@ -0,0 +1,103 @@
+import type { HTMLAttributes, JSX, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+/**
+ * Layout preset for {@link Table} and its subcomponents.
+ */
+export type TableVariant = 'bordered' | 'loose';
+/**
+ * Default header cell classes for bordered editor tables.
+ */
+export declare const tableHeadClass = "border-r border-b border-separator p-3 text-left text-[14px] font-medium uppercase tracking-wide text-muted last:border-r-0";
+/**
+ * Default body cell classes for bordered editor tables.
+ */
+export declare const tableCellClass = "border-r border-b border-separator p-3 last:border-r-0";
+/**
+ * Header cell classes for loose tables with separate cell spacing.
+ */
+export declare const tableHeadClassLoose = "pb-1 text-left text-[14px] font-medium uppercase tracking-wide text-muted";
+/**
+ * Body cell classes for loose tables with separate cell spacing.
+ */
+export declare const tableCellClassLoose = "";
+interface TableProps {
+    /**
+     * Table header and body sections.
+     */
+    children: ReactNode;
+    /**
+     * Layout preset for the table shell and cell styling.
+     */
+    variant?: TableVariant;
+    /**
+     * Additional Tailwind classes merged onto the outer wrapper or table element.
+     */
+    className?: string;
+}
+/**
+ * Table shell for editable row layouts.
+ *
+ * @param children - {@link TableHeader} and {@link TableBody} sections.
+ * @param variant - Bordered collapsed layout or loose separate-cell spacing.
+ * @param className - Extra classes on the wrapper (bordered) or table element (loose).
+ */
+export declare function Table({ children, variant, className }: TableProps): JSX.Element;
+interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Header or body row content.
+     */
+    children: ReactNode;
+    /**
+     * Additional Tailwind classes merged onto the section element.
+     */
+    className?: string;
+}
+/**
+ * Table header section wrapper.
+ *
+ * @param children - Header row elements, typically native `tr` nodes.
+ * @param className - Extra classes appended after any section preset.
+ */
+export declare function TableHeader({ children, className, ...rest }: TableSectionProps): JSX.Element;
+/**
+ * Table body section wrapper.
+ *
+ * @param children - Body row elements, typically native `tr` nodes.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function TableBody({ children, className, ...rest }: TableSectionProps): JSX.Element;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Header cell content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional Tailwind classes merged after the header cell preset.
+     */
+    className?: string;
+}
+/**
+ * Header cell with table styling for the active variant.
+ *
+ * @param children - Header label content.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function TableHead({ children, className, scope, ...rest }: TableHeadProps): JSX.Element;
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Body cell content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional Tailwind classes merged after the body cell preset.
+     */
+    className?: string;
+}
+/**
+ * Body cell with table styling for the active variant.
+ *
+ * @param children - Cell content.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function TableCell({ children, className, ...rest }: TableCellProps): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEhG;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,cAAc,gIACoG,CAAC;AAEhI;;GAEG;AACH,eAAO,MAAM,cAAc,2DAA2D,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,mBAAmB,8EAC6C,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAuBtC,UAAU,UAAU;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAoB,EAAE,SAAS,EAAE,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAwB5F;AAED,UAAU,iBAAkB,SAAQ,cAAc,CAAC,uBAAuB,CAAC;IACzE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAM5F;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAU1F;AAED,UAAU,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,KAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAU9B;AAED,UAAU,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAUvF"}

package/dist/components/Table/index.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { createContext, createElement, useContext } from '@harborclient/sdk/react';
+/**
+ * Default header cell classes for bordered editor tables.
+ */
+export const tableHeadClass = 'border-r border-b border-separator p-3 text-left text-[14px] font-medium uppercase tracking-wide text-muted last:border-r-0';
+/**
+ * Default body cell classes for bordered editor tables.
+ */
+export const tableCellClass = 'border-r border-b border-separator p-3 last:border-r-0';
+/**
+ * Header cell classes for loose tables with separate cell spacing.
+ */
+export const tableHeadClassLoose = 'pb-1 text-left text-[14px] font-medium uppercase tracking-wide text-muted';
+/**
+ * Body cell classes for loose tables with separate cell spacing.
+ */
+export const tableCellClassLoose = '';
+const TableVariantContext = createContext('bordered');
+/**
+ * Returns preset classes merged with optional overrides.
+ *
+ * @param base - Variant preset classes.
+ * @param className - Additional classes appended after the preset.
+ */
+function mergeClasses(base, className) {
+    if (base && className) {
+        return `${base} ${className}`;
+    }
+    if (base) {
+        return base;
+    }
+    if (className) {
+        return className;
+    }
+    return undefined;
+}
+/**
+ * Table shell for editable row layouts.
+ *
+ * @param children - {@link TableHeader} and {@link TableBody} sections.
+ * @param variant - Bordered collapsed layout or loose separate-cell spacing.
+ * @param className - Extra classes on the wrapper (bordered) or table element (loose).
+ */
+export function Table({ children, variant = 'bordered', className }) {
+    if (variant === 'loose') {
+        const tableBase = 'w-full border-separate border-spacing-x-1.5 border-spacing-y-1.5';
+        const tableClasses = className ? `${tableBase} ${className}` : tableBase;
+        return createElement(TableVariantContext.Provider, { value: variant }, createElement('table', { className: tableClasses }, children));
+    }
+    const wrapperBase = 'overflow-hidden rounded-md border border-separator';
+    const wrapperClasses = className ? `${wrapperBase} ${className}` : wrapperBase;
+    return createElement(TableVariantContext.Provider, { value: variant }, createElement('div', { className: wrapperClasses }, createElement('table', { className: 'w-full border-collapse' }, children)));
+}
+/**
+ * Table header section wrapper.
+ *
+ * @param children - Header row elements, typically native `tr` nodes.
+ * @param className - Extra classes appended after any section preset.
+ */
+export function TableHeader({ children, className, ...rest }) {
+    return (_jsx("thead", { className: className, ...rest, children: children }));
+}
+/**
+ * Table body section wrapper.
+ *
+ * @param children - Body row elements, typically native `tr` nodes.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function TableBody({ children, className, ...rest }) {
+    const variant = useContext(TableVariantContext);
+    const base = variant === 'bordered' ? '[&_tr:last-child_td]:border-b-0' : '';
+    const classes = mergeClasses(base, className);
+    return (_jsx("tbody", { className: classes, ...rest, children: children }));
+}
+/**
+ * Header cell with table styling for the active variant.
+ *
+ * @param children - Header label content.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function TableHead({ children, className, scope = 'col', ...rest }) {
+    const variant = useContext(TableVariantContext);
+    const base = variant === 'loose' ? tableHeadClassLoose : tableHeadClass;
+    const classes = mergeClasses(base, className);
+    return (_jsx("th", { scope: scope, className: classes, ...rest, children: children }));
+}
+/**
+ * Body cell with table styling for the active variant.
+ *
+ * @param children - Cell content.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function TableCell({ children, className, ...rest }) {
+    const variant = useContext(TableVariantContext);
+    const base = variant === 'loose' ? tableCellClassLoose : tableCellClass;
+    const classes = mergeClasses(base, className);
+    return (_jsx("td", { className: classes, ...rest, children: children }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAa/C,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmHtF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY/C,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmHtF"}

package/dist/components/VariableTable/index.js

@@ -3,11 +3,11 @@ import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
 import { faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { Input } from '../forms/index.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader } from '../Table/index.js';
 /**
  * Returns a blank variable row for new table entries.
  */
 const emptyVariable = () => ({ key: '', value: '', defaultValue: '', share: false });
-const thClass = 'pb-1 text-left text-[14px] font-medium uppercase tracking-wide text-muted';
 /**
  * Editable table for key/value/default/share variable rows.
  */
@@ -39,5 +39,5 @@ export function VariableTable({ variables, onChange, description }) {
         }
         onChange(variables.filter((_, i) => i !== index));
     };
-    return (_jsxs("div", { children: [description && _jsx("p", { className: "mb-3 text-[14px] text-muted", children: description }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("table", { className: "w-full border-separate border-spacing-x-1.5 border-spacing-y-1.5", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: thClass, children: "Key" }), _jsx("th", { className: thClass, children: "Value" }), _jsx("th", { className: thClass, children: "Default" }), _jsx("th", { className: `${thClass} w-14 text-center`, children: "Share" }), _jsx("th", { className: `${thClass} w-7 p-0 text-center` })] }) }), _jsx("tbody", { children: variables.map((variable, index) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(Input, { type: "text", className: "w-full", value: variable.key, placeholder: "variable", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateVariable(index, { key: e.target.value }) }) }), _jsx("td", { children: _jsx(Input, { type: "text", className: "w-full", value: variable.value, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onChange: (e) => updateVariable(index, { value: e.target.value }) }) }), _jsx("td", { children: _jsx(Input, { type: "text", className: "w-full", value: variable.defaultValue, placeholder: "default", "aria-label": `Default, row ${index + 1}`, onChange: (e) => updateVariable(index, { defaultValue: e.target.value }) }) }), _jsx("td", { className: "w-14 text-center", children: _jsx(Input, { type: "checkbox", checked: variable.share, onChange: (e) => updateVariable(index, { share: e.target.checked }), "aria-label": `Include value in export, row ${index + 1}`, title: "Include value in export" }) }), _jsx("td", { className: "w-7 p-0 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeVariable(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }), _jsxs(Button, { type: "button", variant: "toolbar", className: "inline-flex items-center gap-1 self-start", onClick: addVariable, children: [_jsx(FaIcon, { icon: faPlus, className: "h-3 w-3" }), "Add variable"] })] })] }));
+    return (_jsxs("div", { children: [description && _jsx("p", { className: "mb-3 text-[14px] text-muted", children: description }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Table, { variant: "loose", children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { children: "Default" }), _jsx(TableHead, { className: "w-14 text-center", children: "Share" }), _jsx(TableHead, { className: "w-7 p-0 text-center" })] }) }), _jsx(TableBody, { children: variables.map((variable, index) => (_jsxs("tr", { children: [_jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.key, placeholder: "variable", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateVariable(index, { key: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.value, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onChange: (e) => updateVariable(index, { value: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: variable.defaultValue, placeholder: "default", "aria-label": `Default, row ${index + 1}`, onChange: (e) => updateVariable(index, { defaultValue: e.target.value }) }) }), _jsx(TableCell, { className: "w-14 text-center", children: _jsx(Input, { type: "checkbox", checked: variable.share, onChange: (e) => updateVariable(index, { share: e.target.checked }), "aria-label": `Include value in export, row ${index + 1}`, title: "Include value in export" }) }), _jsx(TableCell, { className: "w-7 p-0 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeVariable(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }), _jsxs(Button, { type: "button", variant: "toolbar", className: "inline-flex items-center gap-1 self-start", onClick: addVariable, children: [_jsx(FaIcon, { icon: faPlus, className: "h-3 w-3" }), "Add variable"] })] })] }));
 }

package/dist/components/classes.js

@@ -9,6 +9,6 @@ export const segmentGroup = 'inline-flex p-3 border-b border-separator w-full sh
  */
 export function segment(active) {
     return active
-        ? 'cursor-pointer rounded-[2.5px] border-none bg-control px-3 py-1 text-[15px] text-text shadow-sm app-no-drag'
+        ? 'cursor-pointer rounded-[2.5px] border-none bg-field px-3 py-1 text-[15px] text-text shadow-sm app-no-drag'
         : 'cursor-pointer rounded-[2.5px] border-none bg-transparent px-3 py-1 text-[15px] text-muted hover:text-text app-no-drag';
 }

package/dist/components/index.d.ts

@@ -25,8 +25,11 @@ export { MethodSelect } from './MethodSelect/index.js';
 export { Modal, ModalFooter, ModalFormLayout } from './Modal/index.js';
 export { ModalHeader } from './Modal/ModalHeader.js';
 export { OverlayCloseButton } from './OverlayCloseButton/index.js';
-export { OverlayPage } from './OverlayPage/index.js';
+export { Page } from './Page/index.js';
 export { PageHeader } from './PageHeader/index.js';
+export { PageSidebar } from './PageSidebar/index.js';
+export type { PageSidebarItem } from './PageSidebar/index.js';
+export { SidebarLayout } from './SidebarLayout/index.js';
 export { PanelCloseButton } from './PanelCloseButton/index.js';
 export { Resizable, ResizeHandle, useResizable } from './Resizable/index.js';
 export type { UseResizableOptions, UseResizableResult } from './Resizable/useResizable.js';
@@ -40,6 +43,8 @@ export type { TabItem } from './SegmentedTabs/index.js';
 export { Spinner } from './Spinner/index.js';
 export { StatusMessage } from './StatusMessage/index.js';
 export { TabCloseButton } from './TabCloseButton/index.js';
+export { Table, TableBody, TableCell, TableHead, TableHeader, tableCellClass, tableCellClassLoose, tableHeadClass, tableHeadClassLoose } from './Table/index.js';
+export type { TableVariant } from './Table/index.js';
 export { VariableInput } from './VariableInput/index.js';
 export type { Props as VariableInputProps } from './VariableInput/index.js';
 export { VariableTable } from './VariableTable/index.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -18,8 +18,10 @@ export { MethodSelect } from './MethodSelect/index.js';
 export { Modal, ModalFooter, ModalFormLayout } from './Modal/index.js';
 export { ModalHeader } from './Modal/ModalHeader.js';
 export { OverlayCloseButton } from './OverlayCloseButton/index.js';
-export { OverlayPage } from './OverlayPage/index.js';
+export { Page } from './Page/index.js';
 export { PageHeader } from './PageHeader/index.js';
+export { PageSidebar } from './PageSidebar/index.js';
+export { SidebarLayout } from './SidebarLayout/index.js';
 export { PanelCloseButton } from './PanelCloseButton/index.js';
 export { Resizable, ResizeHandle, useResizable } from './Resizable/index.js';
 export { DEFAULT_HEIGHT, MIN_HEIGHT, footerPanelClassName, footerPanelCloseButtonClassName, getFooterPanelMaxSize } from './Resizable/footerPanelUtils.js';
@@ -30,6 +32,7 @@ export { SegmentedTabs, SegmentedTabsGroup, SegmentedTabPanel } from './Segmente
 export { Spinner } from './Spinner/index.js';
 export { StatusMessage } from './StatusMessage/index.js';
 export { TabCloseButton } from './TabCloseButton/index.js';
+export { Table, TableBody, TableCell, TableHead, TableHeader, tableCellClass, tableCellClassLoose, tableHeadClass, tableHeadClassLoose } from './Table/index.js';
 export { VariableInput } from './VariableInput/index.js';
 export { VariableTable } from './VariableTable/index.js';
 export { cleanVariables, resolveTabListKeyAction } from './utils.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harborclient/sdk",
-  "version": "0.6.4",
+  "version": "0.6.7",
   "description": "TypeScript SDK for HarborClient plugin development.",
   "keywords": [
     "harborclient",

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

@@ -1,40 +0,0 @@
-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

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

@@ -1,18 +0,0 @@
-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] }) }));
-}