@harborclient/sdk 0.4.6 → 0.6.1

package/dist/components/CodeEditor/index.js

@@ -0,0 +1,319 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { autocompletion } from '@codemirror/autocomplete';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { HighlightStyle, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { Decoration, EditorView, MatchDecorator, ViewPlugin, hoverTooltip } from '@codemirror/view';
+import CodeMirrorImport from '@uiw/react-codemirror';
+import { tags } from '@lezer/highlight';
+import { useEffect, useMemo, useState, createElement } from '@harborclient/sdk/react';
+import { getDynamicVariableDescription, resolveVariable, VARIABLE_NAME_CHARS } from '../../variables/index.js';
+import { useCodeEditorConfig } from './config.js';
+import { getCodeEditorThemeExtension } from './themes.js';
+export { CODE_EDITOR_THEME_OPTIONS } from './themes.js';
+const lightHighlight = HighlightStyle.define([
+    { tag: tags.propertyName, color: '#881391' },
+    { tag: tags.string, color: '#c41a16' },
+    { tag: tags.number, color: '#1c00cf' },
+    { tag: tags.bool, color: '#1c00cf' },
+    { tag: tags.null, color: '#1c00cf' },
+    { tag: tags.keyword, color: '#881391' },
+    { tag: tags.bracket, color: 'var(--mac-text)' },
+    { tag: tags.punctuation, color: 'var(--mac-muted)' },
+    { tag: tags.comment, color: 'var(--mac-muted)', fontStyle: 'italic' }
+]);
+const darkHighlight = HighlightStyle.define([
+    { tag: tags.propertyName, color: '#ff7ab2' },
+    { tag: tags.string, color: '#ff8170' },
+    { tag: tags.number, color: '#78dce8' },
+    { tag: tags.bool, color: '#78dce8' },
+    { tag: tags.null, color: '#78dce8' },
+    { tag: tags.keyword, color: '#ff7ab2' },
+    { tag: tags.bracket, color: 'var(--mac-text)' },
+    { tag: tags.punctuation, color: 'var(--mac-muted)' },
+    { tag: tags.comment, color: 'var(--mac-muted)', fontStyle: 'italic' }
+]);
+const editorTheme = EditorView.theme({
+    '&': {
+        backgroundColor: 'transparent',
+        color: 'var(--mac-text)'
+    },
+    '.cm-scroller': {
+        overflow: 'auto',
+        fontFamily: 'var(--font-mono)'
+    },
+    '.cm-content': {
+        padding: '8px 0',
+        fontFamily: 'var(--font-mono)',
+        fontSize: '14px',
+        caretColor: 'var(--mac-accent)'
+    },
+    '.cm-line': {
+        padding: '0 8px'
+    },
+    '&.cm-focused': {
+        outline: 'none'
+    },
+    '&.cm-focused .cm-cursor': {
+        borderLeftColor: 'var(--mac-accent)'
+    },
+    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection': {
+        backgroundColor: 'var(--mac-selection) !important'
+    },
+    '.cm-gutters': {
+        backgroundColor: 'transparent',
+        color: 'var(--mac-muted)',
+        border: 'none'
+    },
+    '.cm-activeLineGutter': {
+        backgroundColor: 'var(--mac-selection)'
+    },
+    '.cm-activeLine': {
+        backgroundColor: 'color-mix(in srgb, var(--mac-selection) 45%, transparent)'
+    },
+    '.cm-variable-token': {
+        color: '#32D2E2'
+    },
+    '.cm-tooltip.cm-tooltip-hover': {
+        border: '1px solid var(--mac-separator)',
+        backgroundColor: 'var(--mac-surface)',
+        borderRadius: '6px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
+    },
+    '.cm-variable-tooltip': {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6px',
+        padding: '8px 12px',
+        fontSize: '14px',
+        color: 'var(--mac-text)'
+    },
+    '.cm-variable-tooltip-muted': {
+        color: 'var(--mac-muted)'
+    },
+    '.cm-variable-tooltip-edit': {
+        alignSelf: 'flex-start',
+        background: 'none',
+        border: 'none',
+        padding: '0',
+        cursor: 'pointer',
+        fontSize: '14px',
+        color: 'var(--mac-accent)'
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete': {
+        border: '1px solid var(--mac-separator)',
+        backgroundColor: 'var(--mac-surface)',
+        borderRadius: '6px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        fontSize: '14px'
+    },
+    '.cm-completionLabel': {
+        fontFamily: 'var(--font-mono)'
+    },
+    '.cm-completionDetail': {
+        color: 'var(--mac-muted)',
+        fontStyle: 'normal',
+        marginLeft: '8px'
+    }
+});
+const variableMatcher = new MatchDecorator({
+    regexp: new RegExp(`\\{\\{\\s*([${VARIABLE_NAME_CHARS}]+)\\s*\\}\\}`, 'g'),
+    decoration: Decoration.mark({ class: 'cm-variable-token' })
+});
+const variableHighlighter = ViewPlugin.fromClass(class {
+    decorations;
+    /**
+     * Builds the initial {{variable}} decoration set for the editor view.
+     *
+     * @param view - CodeMirror editor view instance.
+     */
+    constructor(view) {
+        this.decorations = variableMatcher.createDeco(view);
+    }
+    /**
+     * Recomputes decorations when document content or viewport changes.
+     *
+     * @param update - View update describing what changed.
+     */
+    update(update) {
+        this.decorations = variableMatcher.updateDeco(update, this.decorations);
+    }
+}, { decorations: (v) => v.decorations });
+/**
+ * Builds a hover tooltip extension for {{variable}} tokens.
+ *
+ * @param variables - Collection-scoped variables for resolution.
+ * @param onEditVariable - Optional callback to open collection settings.
+ */
+function variableTooltip(variables, onEditVariable) {
+    return hoverTooltip((view, pos) => {
+        const line = view.state.doc.lineAt(pos);
+        const pattern = new RegExp(`\\{\\{\\s*([${VARIABLE_NAME_CHARS}]+)\\s*\\}\\}`, 'g');
+        for (const match of line.text.matchAll(pattern)) {
+            const start = line.from + (match.index ?? 0);
+            const end = start + match[0].length;
+            if (pos < start || pos > end)
+                continue;
+            const key = match[1];
+            const value = resolveVariable(key, variables);
+            const dynamicDescription = getDynamicVariableDescription(key);
+            return {
+                pos: start,
+                end,
+                above: true,
+                create() {
+                    const dom = document.createElement('div');
+                    dom.className = 'cm-variable-tooltip';
+                    const valueEl = document.createElement('div');
+                    if (value !== undefined) {
+                        valueEl.textContent = value;
+                    }
+                    else if (dynamicDescription) {
+                        valueEl.textContent = `Dynamic: ${dynamicDescription}`;
+                    }
+                    else {
+                        valueEl.textContent = 'Not defined';
+                        valueEl.className = 'cm-variable-tooltip-muted';
+                    }
+                    dom.appendChild(valueEl);
+                    if (onEditVariable) {
+                        const btn = document.createElement('button');
+                        btn.type = 'button';
+                        btn.textContent = 'Edit value';
+                        btn.className = 'cm-variable-tooltip-edit';
+                        btn.addEventListener('mousedown', (e) => {
+                            e.preventDefault();
+                            onEditVariable();
+                        });
+                        dom.appendChild(btn);
+                    }
+                    return { dom };
+                }
+            };
+        }
+        return null;
+    });
+}
+/**
+ * CodeMirror wrapper for editable request bodies and read-only response views.
+ *
+ * Styling relies on host CSS variables (`--mac-*`, `--font-mono`) and the `.app-no-drag`
+ * class defined in HarborClient `styles.css`.
+ */
+export function CodeEditor({ value, onChange, language = 'text', readOnly = false, placeholder, minHeight = '144px', className = '', variables, onEditVariable, completionSource, themeOverride, setupOverride, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }) {
+    const config = useCodeEditorConfig();
+    const resolvedTheme = themeOverride ?? config.theme;
+    const resolvedSetup = setupOverride ?? (readOnly ? null : config.setup);
+    const [isDark, setIsDark] = useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches);
+    /**
+     * Tracks system dark mode so syntax highlighting matches the active theme.
+     */
+    useEffect(() => {
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = () => setIsDark(media.matches);
+        media.addEventListener('change', handleChange);
+        return () => media.removeEventListener('change', handleChange);
+    }, []);
+    /**
+     * Assembles CodeMirror extensions for language mode, theme, and optional variable tooling.
+     */
+    const extensions = useMemo(() => {
+        const next = [EditorView.lineWrapping, editorTheme];
+        const themeExtension = getCodeEditorThemeExtension(resolvedTheme);
+        if (themeExtension) {
+            next.push(themeExtension);
+        }
+        else {
+            next.push(syntaxHighlighting(isDark ? darkHighlight : lightHighlight));
+        }
+        if (language === 'json') {
+            next.push(json());
+        }
+        if (language === 'javascript') {
+            next.push(javascript());
+            if (completionSource) {
+                next.push(autocompletion({
+                    activateOnTyping: true,
+                    override: [completionSource]
+                }));
+            }
+        }
+        if (language === 'shell') {
+            next.push(StreamLanguage.define(shell));
+        }
+        if (variables) {
+            next.push(variableHighlighter, variableTooltip(variables, onEditVariable));
+        }
+        const contentAttrs = {};
+        if (id)
+            contentAttrs.id = id;
+        if (ariaLabel)
+            contentAttrs['aria-label'] = ariaLabel;
+        if (ariaLabelledBy)
+            contentAttrs['aria-labelledby'] = ariaLabelledBy;
+        if (Object.keys(contentAttrs).length > 0) {
+            next.push(EditorView.contentAttributes.of(contentAttrs));
+        }
+        return next;
+    }, [
+        resolvedTheme,
+        isDark,
+        language,
+        variables,
+        onEditVariable,
+        completionSource,
+        id,
+        ariaLabel,
+        ariaLabelledBy
+    ]);
+    /**
+     * Resolves CodeMirror basicSetup from persisted settings or read-only defaults.
+     */
+    const basicSetup = useMemo(() => {
+        if (!resolvedSetup) {
+            return {
+                lineNumbers: false,
+                foldGutter: false,
+                highlightActiveLine: false,
+                highlightActiveLineGutter: false,
+                highlightSelectionMatches: false,
+                autocompletion: false,
+                closeBrackets: false,
+                indentOnInput: false
+            };
+        }
+        if (readOnly) {
+            return {
+                lineNumbers: resolvedSetup.lineNumbers,
+                foldGutter: resolvedSetup.foldGutter,
+                highlightActiveLine: resolvedSetup.highlightActiveLine,
+                highlightActiveLineGutter: resolvedSetup.highlightActiveLineGutter,
+                highlightSelectionMatches: false,
+                autocompletion: false,
+                closeBrackets: false,
+                indentOnInput: false
+            };
+        }
+        return {
+            lineNumbers: resolvedSetup.lineNumbers,
+            foldGutter: resolvedSetup.foldGutter,
+            highlightActiveLine: resolvedSetup.highlightActiveLine,
+            highlightActiveLineGutter: resolvedSetup.highlightActiveLineGutter
+        };
+    }, [resolvedSetup, readOnly]);
+    const wrapperClassName = readOnly
+        ? `overflow-hidden rounded-md bg-control shadow-[inset_0_0.5px_1px_rgba(0,0,0,0.06)] app-no-drag ${className}`
+        : `min-h-36 resize-y overflow-hidden rounded-md border border-separator bg-control shadow-[inset_0_0.5px_1px_rgba(0,0,0,0.06)] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--mac-accent)_35%,transparent),inset_0_0.5px_1px_rgba(0,0,0,0.06)] app-no-drag ${className}`;
+    return (_jsx("div", { className: wrapperClassName, children: createElement(CodeMirrorImport, {
+            value,
+            onChange: readOnly ? undefined : onChange,
+            extensions,
+            theme: 'none',
+            editable: !readOnly,
+            readOnly,
+            placeholder,
+            minHeight,
+            basicSetup
+        }) }));
+}

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

@@ -0,0 +1,19 @@
+import type { Extension } from '@codemirror/state';
+import type { CodeEditorTheme } from '../../types.js';
+import { CODE_EDITOR_THEME_IDS } from '../../ui/codeEditorSettings.js';
+export { CODE_EDITOR_THEME_IDS };
+/**
+ * Theme options shown in the syntax highlighting settings dropdown.
+ */
+export declare const CODE_EDITOR_THEME_OPTIONS: Array<{
+    value: CodeEditorTheme;
+    label: string;
+}>;
+/**
+ * Returns the CodeMirror theme extension for a settings value, or null for the built-in look.
+ *
+ * @param value - Persisted or selected theme identifier.
+ * @returns Theme extension to append to the editor, or null when using built-in highlighting.
+ */
+export declare function getCodeEditorThemeExtension(value: CodeEditorTheme): Extension | null;
+//# sourceMappingURL=themes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/themes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAUnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAStF,CAAC;AAYF;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAKpF"}

package/dist/components/CodeEditor/themes.js

@@ -0,0 +1,37 @@
+import { dracula, githubDark, githubLight, monokai, nord, solarizedLight, tokyoNight } from '@uiw/codemirror-themes-all';
+import { CODE_EDITOR_THEME_IDS } from '../../ui/codeEditorSettings.js';
+export { CODE_EDITOR_THEME_IDS };
+/**
+ * Theme options shown in the syntax highlighting settings dropdown.
+ */
+export const CODE_EDITOR_THEME_OPTIONS = [
+    { value: 'default', label: 'Default (built-in)' },
+    { value: 'dracula', label: 'Dracula' },
+    { value: 'githubLight', label: 'GitHub Light' },
+    { value: 'githubDark', label: 'GitHub Dark' },
+    { value: 'monokai', label: 'Monokai' },
+    { value: 'nord', label: 'Nord' },
+    { value: 'solarizedLight', label: 'Solarized Light' },
+    { value: 'tokyoNight', label: 'Tokyo Night' }
+];
+const themeExtensions = {
+    dracula,
+    githubLight,
+    githubDark,
+    monokai,
+    nord,
+    solarizedLight,
+    tokyoNight
+};
+/**
+ * Returns the CodeMirror theme extension for a settings value, or null for the built-in look.
+ *
+ * @param value - Persisted or selected theme identifier.
+ * @returns Theme extension to append to the editor, or null when using built-in highlighting.
+ */
+export function getCodeEditorThemeExtension(value) {
+    if (value === 'default') {
+        return null;
+    }
+    return themeExtensions[value];
+}

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

@@ -0,0 +1,26 @@
+import type { JSX, ReactNode } from 'react';
+type EmptyStateVariant = 'inline' | 'centered';
+interface Props {
+    /**
+     * Empty-state message content.
+     */
+    children: ReactNode;
+    /**
+     * Layout preset; centered fills available space in panel bodies.
+     */
+    variant?: EmptyStateVariant;
+    /**
+     * Additional Tailwind classes merged onto the wrapper element.
+     */
+    className?: string;
+}
+/**
+ * Placeholder shown when a panel or list has no content to display.
+ *
+ * @param children - Empty message text or markup.
+ * @param variant - Layout preset (`inline` or `centered`).
+ * @param className - Extra classes appended after the preset.
+ */
+export declare function EmptyState({ children, variant, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,KAAK,iBAAiB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE/C,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAeD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAkB,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAK1F"}

package/dist/components/EmptyState/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Returns layout classes for inline or centered empty placeholders.
+ *
+ * @param variant - Empty state layout preset.
+ * @returns Tailwind classes for the wrapper.
+ */
+function variantClasses(variant) {
+    if (variant === 'centered') {
+        return 'flex flex-1 items-center justify-center p-4 text-center text-[14px] text-muted';
+    }
+    return 'text-[14px] text-muted';
+}
+/**
+ * Placeholder shown when a panel or list has no content to display.
+ *
+ * @param children - Empty message text or markup.
+ * @param variant - Layout preset (`inline` or `centered`).
+ * @param className - Extra classes appended after the preset.
+ */
+export function EmptyState({ children, variant = 'inline', className }) {
+    const base = variantClasses(variant);
+    const classes = className ? `${base} ${className}` : base;
+    return _jsx("div", { className: classes, children: children });
+}

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

@@ -0,0 +1,22 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { JSX } from 'react';
+interface Props {
+    /**
+     * Font Awesome icon definition registered in the library.
+     */
+    icon: IconDefinition;
+    /**
+     * Optional Tailwind or custom classes for sizing and color.
+     */
+    className?: string;
+    /**
+     * When set, the icon is exposed to assistive tech instead of being decorative.
+     */
+    title?: string;
+}
+/**
+ * Renders a Font Awesome SVG icon with consistent default sizing.
+ */
+export declare function FaIcon({ icon, className, title }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FaIcon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,SAAyB,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAOrF"}

package/dist/components/FaIcon/index.js

@@ -0,0 +1,13 @@
+import { createElement } from '@harborclient/sdk/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+/**
+ * Renders a Font Awesome SVG icon with consistent default sizing.
+ */
+export function FaIcon({ icon, className = 'h-3.5 w-3.5', title }) {
+    return createElement(FontAwesomeIcon, {
+        icon,
+        className,
+        title,
+        'aria-hidden': title ? undefined : true
+    });
+}

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

@@ -0,0 +1,39 @@
+import type { JSX, ReactNode } from 'react';
+/**
+ * Vertical spacing preset for inline error text.
+ */
+export type FieldErrorSpacing = 'field' | 'section' | 'modal';
+interface Props {
+    /**
+     * Error message content. When empty, nothing is rendered.
+     */
+    children?: ReactNode;
+    /**
+     * Element id referenced by `aria-describedby` on the related control.
+     */
+    id?: string;
+    /**
+     * Margin preset matching common form, section, and modal layouts.
+     */
+    spacing?: FieldErrorSpacing;
+    /**
+     * When true, exposes the message as an alert for assistive technologies.
+     */
+    roleAlert?: boolean;
+    /**
+     * Additional Tailwind classes merged onto the error paragraph.
+     */
+    className?: string;
+}
+/**
+ * Accessible inline validation or error text with consistent typography and spacing.
+ *
+ * @param children - Error message; omitted or empty values render nothing.
+ * @param id - Optional id for `aria-describedby` linkage.
+ * @param spacing - Margin preset (`field`, `section`, or `modal`).
+ * @param roleAlert - Whether to set `role="alert"`.
+ * @param className - Extra classes appended after the preset.
+ */
+export declare function FieldError({ children, id, spacing, roleAlert, className }: Props): JSX.Element | null;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldError/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9D,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,EAAE,EACF,OAAiB,EACjB,SAAiB,EACjB,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAW5B"}

package/dist/components/FieldError/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Returns margin classes for the chosen error spacing preset.
+ *
+ * @param spacing - Vertical spacing preset.
+ * @returns Tailwind margin classes for the error paragraph.
+ */
+function spacingClasses(spacing) {
+    switch (spacing) {
+        case 'section':
+            return 'mt-3';
+        case 'modal':
+            return 'mt-4';
+        case 'field':
+        default:
+            return 'mt-1';
+    }
+}
+/**
+ * Accessible inline validation or error text with consistent typography and spacing.
+ *
+ * @param children - Error message; omitted or empty values render nothing.
+ * @param id - Optional id for `aria-describedby` linkage.
+ * @param spacing - Margin preset (`field`, `section`, or `modal`).
+ * @param roleAlert - Whether to set `role="alert"`.
+ * @param className - Extra classes appended after the preset.
+ */
+export function FieldError({ children, id, spacing = 'field', roleAlert = false, className }) {
+    if (children == null || children === '')
+        return null;
+    const base = `${spacingClasses(spacing)} text-[14px] text-danger`;
+    const classes = className ? `${base} ${className}` : base;
+    return (_jsx("p", { id: id, className: classes, role: roleAlert ? 'alert' : undefined, children: children }));
+}

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

@@ -0,0 +1,30 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Whether the associated slide-up panel is currently open.
+     */
+    active: boolean;
+    /**
+     * Called when the user activates the footer segment button.
+     */
+    onClick: () => void;
+    /**
+     * Panel element id referenced by `aria-controls`.
+     */
+    controlsId: string;
+    /**
+     * Button label and optional count badge content.
+     */
+    children: ReactNode;
+    /**
+     * Additional Tailwind classes merged onto the button element.
+     */
+    className?: string;
+}
+/**
+ * Text segment toggle button for the window footer bar, used to open and close
+ * slide-up panels such as Console and Variables.
+ */
+export declare function FooterButton({ active, onClick, controlsId, children, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,UAAU,EACV,QAAQ,EACR,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAcrB"}

package/dist/components/FooterButton/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Compact segment button styles for the footer bar.
+ *
+ * @param active - Whether the associated panel is currently expanded.
+ */
+function footerSegment(active) {
+    return active
+        ? 'cursor-pointer rounded-[5px] border-none bg-surface px-2 py-0.5 text-[14px] text-text shadow-sm app-no-drag'
+        : 'cursor-pointer rounded-[5px] 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
+ * slide-up panels such as Console and Variables.
+ */
+export function FooterButton({ active, onClick, controlsId, children, className }) {
+    const classes = className ? `${footerSegment(active)} ${className}` : footerSegment(active);
+    return (_jsx("button", { type: "button", className: classes, onClick: onClick, "aria-expanded": active, "aria-controls": controlsId, children: children }));
+}

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

@@ -0,0 +1,32 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { JSX } from 'react';
+interface Props {
+    /**
+     * Font Awesome icon shown inside the footer toggle button.
+     */
+    icon: IconDefinition;
+    /**
+     * Whether the associated panel or sidebar is currently open.
+     */
+    active: boolean;
+    /**
+     * Called when the user activates the toggle button.
+     */
+    onClick: () => void;
+    /**
+     * Noun phrase for accessibility labels, e.g. `"sidebar"` becomes
+     * `"Hide sidebar"` / `"Show sidebar"`.
+     */
+    label: string;
+    /**
+     * Additional Tailwind classes merged onto the button element.
+     */
+    className?: string;
+}
+/**
+ * Icon-only toggle button for the window footer bar, used to show or hide
+ * sidebars and similar panels.
+ */
+export declare function FooterIcon({ icon, active, onClick, label, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgB1F"}