@harborclient/sdk 1.0.21 → 1.0.25

package/dist/components/CodeEditor/renderHighlightedPlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderHighlightedPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/renderHighlightedPlaceholder.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAiC,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGpG;;GAEG;AACH,MAAM,WAAW,mCAAmC;IAClD;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACpC;AA8DD;;;;;;GAMG;AACH,wBAAgB,+BAA+B,CAC7C,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,mCAAmC,GAC3C,WAAW,CA4Cb"}

package/dist/components/CodeEditor/renderHighlightedPlaceholder.js

@@ -0,0 +1,105 @@
+import { javascript } from '@codemirror/lang-javascript';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { createBuiltInSyntaxHighlighting } from './editorChrome.js';
+import { createSlashCommandHighlighter } from './slashCommandHighlighter.js';
+import { getCodeEditorThemeExtension } from './themes.js';
+const renderCache = new Map();
+/**
+ * Builds a stable cache key for rendered placeholder DOM.
+ *
+ * @param text - Placeholder source text.
+ * @param options - Theme and highlighting options.
+ */
+function buildRenderCacheKey(text, options) {
+    const slashNames = options.slashCommands?.map((command) => command.name).join(',') ?? '';
+    return [text, options.fontSize, String(options.isDark), options.theme, slashNames].join('\0');
+}
+/**
+ * Builds CodeMirror extensions for the offscreen placeholder render pass.
+ *
+ * @param options - Theme and highlighting options.
+ */
+function buildOffscreenPlaceholderExtensions(options) {
+    const extensions = [
+        javascript(),
+        EditorView.lineWrapping,
+        EditorView.editable.of(false),
+        EditorState.readOnly.of(true),
+        EditorView.theme({
+            '&': { backgroundColor: 'transparent' },
+            '.cm-scroller': { overflow: 'hidden' },
+            '.cm-content': {
+                padding: '0',
+                fontFamily: 'var(--font-mono)',
+                fontSize: options.fontSize
+            },
+            '.cm-line': { padding: '0' },
+            '.cm-activeLine': { backgroundColor: 'transparent' },
+            '.cm-slash-command': {
+                color: 'var(--mac-accent)'
+            },
+            '.cm-slash-command-args': {
+                color: 'var(--mac-muted)',
+                fontStyle: 'italic'
+            }
+        })
+    ];
+    const themeExtension = getCodeEditorThemeExtension(options.theme);
+    if (themeExtension) {
+        extensions.push(themeExtension);
+    }
+    else {
+        extensions.push(createBuiltInSyntaxHighlighting(options.isDark));
+    }
+    if (options.slashCommands && options.slashCommands.length > 0) {
+        extensions.push(createSlashCommandHighlighter(options.slashCommands));
+    }
+    return extensions;
+}
+/**
+ * Renders highlighted placeholder markup via a hidden offscreen editor, then clones
+ * the resulting line nodes into a flat inline placeholder element.
+ *
+ * @param text - Placeholder source shown until the user focuses or types.
+ * @param options - Highlighting and theme options shared with the parent editor.
+ */
+export function renderHighlightedPlaceholderDom(text, options) {
+    const cacheKey = buildRenderCacheKey(text, options);
+    const cached = renderCache.get(cacheKey);
+    if (cached) {
+        return cached.cloneNode(true);
+    }
+    const host = document.createElement('div');
+    host.style.cssText = 'position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none;';
+    document.body.appendChild(host);
+    const view = new EditorView({
+        state: EditorState.create({
+            doc: text,
+            extensions: buildOffscreenPlaceholderExtensions(options)
+        }),
+        parent: host
+    });
+    const wrap = document.createElement('span');
+    wrap.className = 'cm-placeholder cm-syntax-placeholder';
+    wrap.style.pointerEvents = 'none';
+    wrap.style.display = 'inline-block';
+    wrap.style.verticalAlign = 'top';
+    wrap.style.whiteSpace = 'pre-wrap';
+    wrap.style.opacity = '0.55';
+    wrap.style.fontFamily = 'var(--font-mono)';
+    wrap.style.fontSize = options.fontSize;
+    wrap.style.userSelect = 'none';
+    wrap.style.width = '100%';
+    wrap.setAttribute('aria-hidden', 'true');
+    const content = view.dom.querySelector('.cm-content');
+    if (content) {
+        for (const line of content.querySelectorAll('.cm-line')) {
+            wrap.appendChild(line.cloneNode(true));
+        }
+    }
+    view.destroy();
+    host.remove();
+    renderCache.set(cacheKey, wrap.cloneNode(true));
+    return wrap;
+}

package/dist/components/CodeEditor/slashCommandHighlighter.d.ts

@@ -0,0 +1,17 @@
+import type { Extension } from '@codemirror/state';
+/**
+ * Minimal slash-command shape required for line highlighting.
+ */
+export interface SlashCommandSpec {
+    /**
+     * Command name without the leading slash (for example `ask`).
+     */
+    name: string;
+}
+/**
+ * Returns a ViewPlugin extension that accents slash commands at the start of a line.
+ *
+ * @param commands - Registered slash commands to decorate.
+ */
+export declare function createSlashCommandHighlighter(commands: SlashCommandSpec[]): Extension;
+//# sourceMappingURL=slashCommandHighlighter.d.ts.map

package/dist/components/CodeEditor/slashCommandHighlighter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slashCommandHighlighter.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/slashCommandHighlighter.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAeD;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,gBAAgB,EAAE,GAAG,SAAS,CA+CrF"}

package/dist/components/CodeEditor/slashCommandHighlighter.js

@@ -0,0 +1,56 @@
+import { Decoration, MatchDecorator, ViewPlugin } from '@codemirror/view';
+/**
+ * Builds a MatchDecorator regexp that highlights registered slash commands at line start.
+ *
+ * @param commands - Slash command names to highlight.
+ */
+function slashCommandHighlightPattern(commands) {
+    const names = commands.map((entry) => entry.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    if (names.length === 0) {
+        return /(?!)/g;
+    }
+    return new RegExp(`^(\\s*)(/(?:${names.join('|')}))([ \\t]+.*)?$`, 'gm');
+}
+/**
+ * Returns a ViewPlugin extension that accents slash commands at the start of a line.
+ *
+ * @param commands - Registered slash commands to decorate.
+ */
+export function createSlashCommandHighlighter(commands) {
+    const slashMatcher = new MatchDecorator({
+        regexp: slashCommandHighlightPattern(commands),
+        /**
+         * Applies accent styling to the command token and muted italic styling to args.
+         */
+        decorate: (add, from, _to, match) => {
+            const leading = match[1] ?? '';
+            const command = match[2] ?? '';
+            const args = match[3];
+            const commandFrom = from + leading.length;
+            const commandTo = commandFrom + command.length;
+            add(commandFrom, commandTo, Decoration.mark({ class: 'cm-slash-command' }));
+            if (args) {
+                add(commandTo, commandTo + args.length, Decoration.mark({ class: 'cm-slash-command-args' }));
+            }
+        }
+    });
+    return ViewPlugin.fromClass(class {
+        decorations;
+        /**
+         * Builds the initial slash-command decoration set for the editor view.
+         *
+         * @param view - CodeMirror editor view instance.
+         */
+        constructor(view) {
+            this.decorations = slashMatcher.createDeco(view);
+        }
+        /**
+         * Recomputes slash-command decorations when document content changes.
+         *
+         * @param update - View update describing what changed.
+         */
+        update(update) {
+            this.decorations = slashMatcher.updateDeco(update, this.decorations);
+        }
+    }, { decorations: (v) => v.decorations });
+}

package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.d.ts

@@ -0,0 +1,15 @@
+import type { Extension } from '@codemirror/state';
+import { type RenderHighlightedPlaceholderOptions } from './renderHighlightedPlaceholder.js';
+/**
+ * Options for building a muted syntax-highlighted placeholder layer.
+ */
+export type SyntaxHighlightedPlaceholderOptions = RenderHighlightedPlaceholderOptions;
+/**
+ * Returns CodeMirror extensions that show muted syntax-highlighted placeholder content
+ * when the editor document is empty and unfocused.
+ *
+ * @param text - Placeholder source shown until the user focuses or types.
+ * @param options - Highlighting and theme options shared with the parent editor.
+ */
+export declare function createSyntaxHighlightedPlaceholder(text: string, options: SyntaxHighlightedPlaceholderOptions): Extension[];
+//# sourceMappingURL=syntaxHighlightedPlaceholder.d.ts.map

package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"syntaxHighlightedPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/syntaxHighlightedPlaceholder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AASnD,OAAO,EAEL,KAAK,mCAAmC,EACzC,MAAM,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,mCAAmC,GAAG,mCAAmC,CAAC;AA2DtF;;;;;;GAMG;AACH,wBAAgB,kCAAkC,CAChD,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,mCAAmC,GAC3C,SAAS,EAAE,CA+Cb"}

package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.js

@@ -0,0 +1,99 @@
+import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
+import { renderHighlightedPlaceholderDom } from './renderHighlightedPlaceholder.js';
+/**
+ * Flat, pre-highlighted placeholder markup inserted when the parent editor is empty.
+ */
+class SyntaxHighlightedPlaceholderWidget extends WidgetType {
+    text;
+    options;
+    /**
+     * @param text - Placeholder document shown when the parent editor is empty.
+     * @param options - Highlighting and theme options shared with the parent editor.
+     */
+    constructor(text, options) {
+        super();
+        this.text = text;
+        this.options = options;
+    }
+    /**
+     * Returns statically rendered placeholder DOM without nested editor chrome.
+     */
+    toDOM() {
+        return renderHighlightedPlaceholderDom(this.text, this.options);
+    }
+    /**
+     * Prevents the placeholder layer from intercepting pointer events meant for the parent editor.
+     */
+    ignoreEvent() {
+        return true;
+    }
+}
+/**
+ * Returns whether the syntax-highlighted placeholder should be visible.
+ *
+ * @param view - Parent CodeMirror editor view.
+ */
+function shouldShowSyntaxPlaceholder(view) {
+    return view.state.doc.length === 0 && !view.hasFocus;
+}
+/**
+ * Builds widget decorations for the muted placeholder layer.
+ *
+ * @param text - Placeholder source shown until focus or input.
+ * @param options - Highlighting and theme options.
+ */
+function buildSyntaxPlaceholderDecorations(text, options) {
+    return Decoration.set([
+        Decoration.widget({
+            widget: new SyntaxHighlightedPlaceholderWidget(text, options),
+            side: 1
+        }).range(0)
+    ]);
+}
+/**
+ * Returns CodeMirror extensions that show muted syntax-highlighted placeholder content
+ * when the editor document is empty and unfocused.
+ *
+ * @param text - Placeholder source shown until the user focuses or types.
+ * @param options - Highlighting and theme options shared with the parent editor.
+ */
+export function createSyntaxHighlightedPlaceholder(text, options) {
+    const plugin = ViewPlugin.fromClass(class {
+        placeholder;
+        /**
+         * Initializes placeholder decorations for an empty, unfocused document.
+         *
+         * @param view - Parent CodeMirror editor view.
+         */
+        constructor(view) {
+            this.placeholder = shouldShowSyntaxPlaceholder(view)
+                ? buildSyntaxPlaceholderDecorations(text, options)
+                : Decoration.none;
+        }
+        /**
+         * Shows or hides the placeholder when the document, focus, or content changes.
+         *
+         * @param update - Parent view update.
+         */
+        update(update) {
+            if (!update.docChanged && !update.focusChanged) {
+                return;
+            }
+            this.placeholder = shouldShowSyntaxPlaceholder(update.view)
+                ? buildSyntaxPlaceholderDecorations(text, options)
+                : Decoration.none;
+        }
+        get decorations() {
+            return this.placeholder;
+        }
+    }, { decorations: (v) => v.decorations });
+    return [
+        plugin,
+        EditorView.contentAttributes.of({ 'aria-placeholder': text }),
+        EditorView.theme({
+            '.cm-content:has(.cm-syntax-placeholder) .cm-activeLine': {
+                backgroundColor: 'transparent !important'
+            }
+        })
+    ];
+}

package/dist/components/EmptyState/index.js

@@ -19,7 +19,7 @@ function variantClasses(variant) {
  * @param className - Extra classes appended after the preset.
  */
 export function EmptyState({ children, variant = 'inline', className }) {
-    const base = `hc-empty-state ${variantClasses(variant)}`;
+    const base = `hc-empty-state text-[16px] ${variantClasses(variant)}`;
     const classes = className ? `${base} ${className}` : base;
     return _jsx("div", { className: classes, children: children });
 }

package/dist/components/FooterButton/index.js

@@ -6,8 +6,8 @@ import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
  */
 function footerSegment(active) {
     return active
-        ? 'cursor-pointer rounded-[2.5px] border-none bg-surface px-2 py-0.5 text-[14px] text-text shadow-sm app-no-drag'
-        : 'cursor-pointer rounded-[2.5px] border-none bg-transparent px-2 py-0.5 text-[14px] text-muted hover:text-text app-no-drag';
+        ? 'cursor-pointer rounded-md border-none bg-surface px-2 py-0.5 text-[14px] text-text shadow-sm app-no-drag'
+        : 'cursor-pointer rounded-md border-none bg-transparent px-2 py-0.5 text-[14px] text-muted hover:text-text app-no-drag';
 }
 /**
  * Text segment toggle button for the window footer bar, used to open and close

package/dist/components/FooterIcon/index.js

@@ -19,5 +19,5 @@ export function FooterIcon({ icon, active, onClick, label, className }) {
     const classes = className
         ? `hc-footer-icon ${footerIconButton(active)} ${className}`
         : `hc-footer-icon ${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" }) }));
+    return (_jsx("button", { type: "button", className: classes, onClick: onClick, "aria-pressed": active, "aria-label": accessibleLabel, title: accessibleLabel, children: _jsx(FaIcon, { icon: icon, className: "hc-footer-icon-icon h-4 w-4" }) }));
 }

package/dist/components/FormDataEditor/index.js

@@ -70,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 (_jsxs(Table, { className: "hc-form-data-editor", 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(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) => {
+    return (_jsxs(Table, { className: "hc-form-data-editor", children: [_jsx(TableHeader, { className: "hc-form-data-editor-header", 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, { className: "hc-form-data-editor-body", children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx(TableCell, { className: "hc-form-data-editor-cell w-6 p-1 text-center", children: _jsx(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, { className: "hc-form-data-editor-cell", 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, { className: "hc-form-data-editor-cell", 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))) })] }));
+                                }, children: [_jsx("option", { value: "text", children: "Text" }), _jsx("option", { value: "file", children: "File" })] }) }), _jsx(TableCell, { className: "hc-form-data-editor-cell", 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: "hc-form-data-editor-cell 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/FormGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C;;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;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAqBD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,aAAa,EACb,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiJrB"}
+{"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;AAI5C;;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;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAqBD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,aAAa,EACb,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoJrB"}

package/dist/components/FormGroup/index.js

@@ -11,7 +11,7 @@ import { enhanceControl } from '../enhanceControl.js';
  * @returns Class string for the label element.
  */
 function labelClasses(tone, srOnly, inline) {
-    const base = 'text-[18px]';
+    const base = 'hc-form-group-label text-[18px]';
     const visibility = srOnly ? 'sr-only' : '';
     if (inline) {
         const color = tone === 'muted' ? 'shrink-0 text-muted' : 'shrink-0 font-medium text-text';
@@ -52,7 +52,9 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
         const wrapperClasses = extra
             ? `hc-form-group flex items-start gap-2 ${extra}`
             : 'hc-form-group flex items-start gap-2';
-        const adjacentLabelClasses = labelClassName ?? 'min-w-0 flex-1 text-[16px] text-text';
+        const adjacentLabelClasses = labelClassName
+            ? `hc-form-group-label ${labelClassName}`
+            : 'hc-form-group-label min-w-0 flex-1 text-[16px] text-text';
         const linkedChildren = enhanceControl(children, { id: controlId });
         return (_jsxs("div", { className: wrapperClasses, children: [linkedChildren, _jsx("label", { htmlFor: controlId, className: adjacentLabelClasses, children: label })] }));
     }
@@ -61,7 +63,7 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
             ? `hc-form-group inline-flex cursor-pointer items-center gap-1.5 text-[16px] text-text app-no-drag ${extra}`
             : 'hc-form-group inline-flex cursor-pointer items-center gap-1.5 text-[16px] text-text app-no-drag';
         const linkedChildren = enhanceControl(children, { id: controlId });
-        return (_jsxs("label", { htmlFor: controlId, className: wrapperClasses, children: [linkedChildren, label] }));
+        return (_jsxs("label", { htmlFor: controlId, className: wrapperClasses, children: [linkedChildren, _jsx("span", { className: "hc-form-group-label", children: label })] }));
     }
     if (layout === 'checkbox') {
         const resolvedDescriptionId = description != null && description !== ''
@@ -80,7 +82,7 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
         const wrapperClasses = extra
             ? `hc-form-group flex flex-col gap-1 p-4 border border-separator rounded-md ${extra}`
             : 'hc-form-group flex flex-col gap-1 p-4 border border-separator rounded-md';
-        return (_jsxs("div", { className: wrapperClasses, children: [_jsxs("label", { htmlFor: controlId, className: "flex flex-col gap-1", children: [_jsxs("span", { className: "flex items-center gap-2", children: [linkedChildren, _jsx("span", { className: `${labelClasses(labelTone, srOnly, false)} leading-none`, children: label })] }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-description m-0 pl-[26px] text-[14px] text-muted", children: description })) : null] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
+        return (_jsxs("div", { className: wrapperClasses, children: [_jsxs("label", { htmlFor: controlId, className: "hc-form-group-label flex flex-col gap-1", children: [_jsxs("span", { className: "hc-form-group-label-row flex items-center gap-2", children: [linkedChildren, _jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label })] }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 pl-[26px] text-[14px] text-muted", children: description })) : null] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
     }
     if (layout === 'inline') {
         const wrapperClasses = extra
@@ -105,5 +107,5 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
     const wrapperClasses = extra
         ? `hc-form-group flex flex-col gap-1 p-4 text-[16px] border border-separator rounded-md ${extra}`
         : 'hc-form-group flex flex-col gap-1 p-4 text-[16px] border border-separator rounded-md';
-    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 }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-description m-0 text-[14px] text-muted", children: description })) : null, control] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
+    return (_jsxs("div", { className: wrapperClasses, children: [_jsxs("label", { htmlFor: htmlFor, className: "hc-form-group-label flex flex-col gap-1", children: [_jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 text-[14px] text-muted", children: description })) : null, control] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
 }

package/dist/components/KeyValueEditor/index.js

@@ -46,8 +46,8 @@ export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeho
         value: row.value ?? '',
         enabled: row.enabled ?? true
     });
-    return (_jsxs(Table, { className: "hc-key-value-editor", 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) => {
+    return (_jsxs(Table, { className: "hc-key-value-editor", children: [_jsx(TableHeader, { className: "hc-key-value-editor-header", 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, { className: "hc-key-value-editor-body", children: rows.map((row, index) => {
                     const normalizedRow = normalizeRow(row);
-                    return (_jsxs("tr", { children: [_jsx(TableCell, { className: "w-6 p-1 text-center", children: _jsx(Checkbox, { className: "app-no-drag", checked: normalizedRow.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx(TableCell, { children: _jsx(AutocompleteInput, { type: "text", className: "w-full", value: normalizedRow.key, source: keySource, placeholder: placeholderKey, "aria-label": `Key, row ${index + 1}`, onChange: (key) => updateRow(index, { key }) }) }), _jsx(TableCell, { children: _jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: normalizedRow.value, onChange: (value) => updateRow(index, { value }), variables: variables, source: valueSource, 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));
+                    return (_jsxs("tr", { children: [_jsx(TableCell, { className: "hc-key-value-editor-cell w-6 p-1 text-center", children: _jsx(Checkbox, { className: "app-no-drag", checked: normalizedRow.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx(TableCell, { className: "hc-key-value-editor-cell", children: _jsx(AutocompleteInput, { type: "text", className: "w-full", value: normalizedRow.key, source: keySource, placeholder: placeholderKey, "aria-label": `Key, row ${index + 1}`, onChange: (key) => updateRow(index, { key }) }) }), _jsx(TableCell, { className: "hc-key-value-editor-cell", children: _jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: normalizedRow.value, onChange: (value) => updateRow(index, { value }), variables: variables, source: valueSource, placeholder: placeholderValue, "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable }) }), _jsx(TableCell, { className: "hc-key-value-editor-cell 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/Modal/ModalFooter.d.ts.map

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

package/dist/components/Modal/ModalFooter.js

@@ -7,7 +7,9 @@ import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
  * @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 base = spaced
+        ? 'hc-modal-footer mt-4 flex justify-end gap-2'
+        : 'hc-modal-footer flex justify-end gap-2';
     const classes = className ? `${base} ${className}` : base;
     return _jsx("div", { className: classes, children: children });
 }

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

@@ -1 +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,MAAM,CAAC;IAEvB;;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,aAAa,EACb,aAAqB,EACrB,OAAO,EACR,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+BrB"}
+{"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,MAAM,CAAC;IAEvB;;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,aAAa,EACb,aAAqB,EACrB,OAAO,EACR,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCrB"}

package/dist/components/Modal/ModalHeader.js

@@ -7,5 +7,5 @@ import { FaIcon } from '../FaIcon/index.js';
  * optional actions, and a close icon on the right.
  */
 export function ModalHeader({ titleId, title, description, descriptionId, 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", { id: descriptionId, 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", "aria-label": "Close", disabled: closeDisabled, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) })] })] }));
+    return (_jsxs("div", { className: "hc-modal-header flex flex-wrap items-center gap-2 border-b border-separator px-4 py-4", children: [_jsxs("div", { className: "hc-modal-header-content min-w-0 flex-1", children: [_jsx("h2", { id: titleId, className: "hc-modal-header-title m-0 flex flex-wrap items-center gap-2 text-[17px] font-semibold text-text", children: title }), description ? (_jsx("p", { id: descriptionId, className: "hc-modal-header-description m-0 mt-1 text-[14px] text-muted", children: description })) : null] }), _jsxs("div", { className: "hc-modal-header-actions flex flex-wrap items-center gap-2", children: [headerActions, _jsx(Button, { type: "button", variant: "icon", className: "hc-modal-header-close shrink-0", "aria-label": "Close", disabled: closeDisabled, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) })] })] }));
 }

package/dist/components/Modal/index.js

@@ -35,5 +35,5 @@ export function Modal({ onClose, className = 'w-96', overlayClassName, disableEs
         ? `${className} flex max-h-[85vh] flex-col overflow-hidden rounded-lg border border-separator bg-surface shadow-xl`
         : `${className} rounded-lg border border-separator bg-surface p-4 shadow-xl`;
     const descriptionId = description && labelledBy ? `${labelledBy}-description` : undefined;
-    return (_jsxs("div", { ref: overlayRef, className: overlayClass, children: [_jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": labelledBy, "aria-describedby": descriptionId, "aria-label": label, className: `relative z-10 ${panelClass}`, onClick: (event) => event.stopPropagation(), children: title && labelledBy ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { titleId: labelledBy, title: title, description: description, descriptionId: descriptionId, headerActions: headerActions, closeDisabled: closeDisabled, onClose: onClose }), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: children })] })) : (children) }), _jsx("button", { type: "button", tabIndex: -1, className: "absolute inset-0 z-0 cursor-default border-none bg-transparent p-0", "aria-label": "Close dialog", onClick: onClose })] }));
+    return (_jsxs("div", { ref: overlayRef, className: overlayClass, children: [_jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": labelledBy, "aria-describedby": descriptionId, "aria-label": label, className: `hc-modal-panel relative z-10 ${panelClass}`, onClick: (event) => event.stopPropagation(), children: title && labelledBy ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { titleId: labelledBy, title: title, description: description, descriptionId: descriptionId, headerActions: headerActions, closeDisabled: closeDisabled, onClose: onClose }), _jsx("div", { className: "hc-modal-body flex-1 overflow-y-auto p-4", children: children })] })) : (children) }), _jsx("button", { type: "button", tabIndex: -1, className: "hc-modal-backdrop absolute inset-0 z-0 cursor-default border-none bg-transparent p-0", "aria-label": "Close dialog", onClick: onClose })] }));
 }

package/dist/components/OverlayCloseButton/index.js

@@ -13,5 +13,5 @@ export function OverlayCloseButton({ label = 'Close', onClose, className }) {
     const classes = className
         ? `hc-overlay-close-button text-[28px] ${className}`
         : 'hc-overlay-close-button text-[28px]';
-    return (_jsx(Button, { type: "button", variant: "icon", className: classes, "aria-label": label, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) }));
+    return (_jsx(Button, { type: "button", variant: "icon", className: classes, "aria-label": label, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "hc-overlay-close-button-icon h-4 w-4" }) }));
 }

package/dist/components/Page/index.js

@@ -14,5 +14,5 @@ export function Page({ title, description, icon, actions, footer, embedded = fal
     const outer = className
         ? `hc-page flex min-h-0 flex-1 flex-col overflow-y-auto p-6 ${className}`
         : 'hc-page 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] }) }));
+    return (_jsx("div", { className: outer, children: _jsxs("div", { className: "hc-page-inner mx-auto w-full", children: [header, children, footer] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmBhG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BhG"}

package/dist/components/PageHeader/index.js

@@ -8,5 +8,5 @@ export function PageHeader({ title, description, icon, children, className }) {
     const wrapperClassName = className
         ? `hc-page-header -mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator px-6 py-4 ${className}`
         : 'hc-page-header -mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator px-6 py-4';
-    return (_jsxs("div", { className: wrapperClassName, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("h2", { className: "m-0 flex items-center gap-2 text-[18px] font-semibold text-text leading-none mb-2", children: [icon ? _jsx(FaIcon, { icon: icon, className: "h-5 w-5 shrink-0 text-muted", "aria-hidden": true }) : null, title] }), description ? (_jsx("p", { className: "m-0 mt-1 text-[16px] text-muted leading-none", children: description })) : null] }), children ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: children }) : null] }));
+    return (_jsxs("div", { className: wrapperClassName, children: [_jsxs("div", { className: "hc-page-header-content min-w-0 flex-1", children: [_jsxs("h2", { className: "hc-page-header-title m-0 flex items-center gap-2 text-[28px] font-bold leading-[1.15] tracking-[-0.01em] text-text", children: [icon ? (_jsx(FaIcon, { icon: icon, className: "hc-page-header-title-icon h-5 w-5 shrink-0 text-muted", "aria-hidden": true })) : null, title] }), description ? (_jsx("p", { className: "hc-page-header-description m-0 mt-1 text-[16px] text-muted leading-none", children: description })) : null] }), children ? (_jsx("div", { className: "hc-page-header-actions flex flex-wrap items-center gap-2", children: children })) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageSidebar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,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"}
+{"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,CAuCxB"}

package/dist/components/PageSidebar/index.js

@@ -7,18 +7,18 @@ import { FaIcon } from '../FaIcon/index.js';
  */
 function sidebarRow(active) {
     return active
-        ? 'group flex cursor-pointer items-center gap-1 rounded-md bg-selection px-1.5 py-0.5 app-no-drag'
-        : 'group flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-0.5 hover:bg-selection/60 app-no-drag';
+        ? 'group flex cursor-pointer items-center gap-1 rounded-md bg-selection px-1.5 py-2 app-no-drag'
+        : 'group flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-2 hover:bg-selection/60 app-no-drag';
 }
 /**
  * Narrow sidebar navigation for multi-section pages such as settings overlays.
  */
 export function PageSidebar({ items, selected, onSelect, ariaLabel }) {
-    return (_jsx("nav", { className: "hc-page-sidebar 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) => {
+    return (_jsx("nav", { className: "hc-page-sidebar flex w-[180px] shrink-0 flex-col gap-1 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-[15px] app-no-drag`
-                : `${sidebarRow(active)} w-full border-none text-left text-[15px] app-no-drag`;
-            return (_jsxs("button", { type: "button", className: rowClass, "aria-current": active ? 'page' : undefined, onClick: () => onSelect(item.value), children: [item.icon ? (_jsx(FaIcon, { icon: item.icon, className: `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));
+                ? `hc-page-sidebar-item ${sidebarRow(active)} w-full gap-2 border-none text-left text-[15px] app-no-drag`
+                : `hc-page-sidebar-item ${sidebarRow(active)} w-full border-none text-left text-[15px] app-no-drag`;
+            return (_jsxs("button", { type: "button", className: rowClass, "aria-current": active ? 'page' : undefined, onClick: () => onSelect(item.value), children: [item.icon ? (_jsx(FaIcon, { icon: item.icon, className: `hc-page-sidebar-item-icon h-[18px] w-[18px] shrink-0 ${active ? 'text-text' : 'text-muted'}`, "aria-hidden": true })) : null, _jsx("span", { className: "hc-page-sidebar-item-label min-w-0 truncate", children: item.label })] }, item.value));
         }) }));
 }

package/dist/components/PanelCloseButton/index.js

@@ -15,5 +15,5 @@ export function PanelCloseButton({ onClose, label = 'Close', ariaLabel, classNam
     const classes = className
         ? `hc-panel-close-button ${base} ${className}`
         : `hc-panel-close-button ${base}`;
-    return (_jsx(Button, { type: "button", variant: "secondary", className: classes, "aria-label": ariaLabel ?? label, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) }));
+    return (_jsx(Button, { type: "button", variant: "secondary", className: classes, "aria-label": ariaLabel ?? label, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "hc-panel-close-button-icon h-4 w-4" }) }));
 }

package/dist/components/Resizable/Resizable.js

@@ -26,7 +26,7 @@ export function Resizable({ id, open, onClose, closeLabel, storageKey, title, he
         getMaxSize,
         storageKey
     });
-    const closeButton = (_jsx("button", { type: "button", className: footerPanelCloseButtonClassName, onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }));
+    const closeButton = (_jsx("button", { type: "button", className: `hc-resizable-close ${footerPanelCloseButtonClassName}`, onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }));
     const body = unmountWhenClosed && !open ? null : children;
-    return (_jsxs("div", { ref: containerRef, id: id, className: `hc-resizable ${footerPanelClassName(open)}`, style: { height }, role: "region", "aria-label": `${closeLabel} panel`, "aria-hidden": !open, inert: !open || undefined, children: [_jsx(ResizeHandle, { orientation: "horizontal", value: height, min: panelMinSize, max: panelMaxSize, onResizeStart: onResizeStart, onKeyboardResize: onKeyboardResize, ariaLabel: `Resize ${closeLabel} panel` }), headerless ? (_jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsx("button", { type: "button", className: `absolute right-2 top-2 z-10 ${footerPanelCloseButtonClassName}`, onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: body })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: title }), closeButton] }), body] }))] }));
+    return (_jsxs("div", { ref: containerRef, id: id, className: `hc-resizable ${footerPanelClassName(open)}`, style: { height }, role: "region", "aria-label": `${closeLabel} panel`, "aria-hidden": !open, inert: !open || undefined, children: [_jsx(ResizeHandle, { orientation: "horizontal", value: height, min: panelMinSize, max: panelMaxSize, onResizeStart: onResizeStart, onKeyboardResize: onKeyboardResize, ariaLabel: `Resize ${closeLabel} panel` }), headerless ? (_jsxs("div", { className: "hc-resizable-headerless relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsx("button", { type: "button", className: `hc-resizable-headerless-close absolute right-2 top-2 z-10 ${footerPanelCloseButtonClassName}`, onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "hc-resizable-body flex min-h-0 flex-1 flex-col", children: body })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hc-resizable-header flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsx("div", { className: "hc-resizable-header-title min-w-0 flex-1", children: title }), closeButton] }), body] }))] }));
 }

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

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

package/dist/components/Resizable/ResizeHandle.js

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