@harborclient/sdk 0.4.6 → 0.6.1

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

@@ -0,0 +1,85 @@
+import type { JSX, ReactNode } from 'react';
+interface LoadingMessageProps {
+    /**
+     * Loading text announced to assistive technologies.
+     */
+    children?: ReactNode;
+    /**
+     * Additional Tailwind classes merged onto the status paragraph.
+     */
+    className?: string;
+}
+/**
+ * Muted loading label used while async list data is fetched.
+ *
+ * @param children - Loading message; defaults to "Loading…".
+ * @param className - Extra classes appended after the preset.
+ */
+export declare function LoadingMessage({ children, className }: LoadingMessageProps): JSX.Element;
+interface ErrorRetryProps {
+    /**
+     * Error message shown beside the retry control.
+     */
+    error: ReactNode;
+    /**
+     * Called when the user activates the retry button.
+     */
+    onRetry: () => void;
+    /**
+     * Accessible label for the retry button.
+     */
+    retryLabel?: string;
+}
+/**
+ * Inline error message paired with a secondary retry button.
+ *
+ * @param error - Error text rendered in danger color.
+ * @param onRetry - Handler invoked when retry is clicked.
+ * @param retryLabel - Visible retry button label.
+ */
+export declare function ErrorRetry({ error, onRetry, retryLabel }: ErrorRetryProps): JSX.Element;
+interface AsyncListStateProps {
+    /**
+     * When true, renders the loading placeholder instead of children.
+     */
+    loading: boolean;
+    /**
+     * When set, renders an error row with optional retry instead of children.
+     */
+    error?: ReactNode;
+    /**
+     * Called when the user activates retry on the error row.
+     */
+    onRetry?: () => void;
+    /**
+     * Message shown when the list is empty and not loading or errored.
+     */
+    emptyMessage?: ReactNode;
+    /**
+     * Whether the underlying collection is empty.
+     */
+    isEmpty?: boolean;
+    /**
+     * List content rendered when data is ready.
+     */
+    children: ReactNode;
+    /**
+     * Custom loading message; defaults to {@link LoadingMessage}.
+     */
+    loadingMessage?: ReactNode;
+}
+/**
+ * Switches between loading, error-with-retry, empty, and ready list content for
+ * async CRUD screens such as Team Hub and storage location lists.
+ *
+ * @param loading - Whether data is still loading.
+ * @param error - Optional fetch error message.
+ * @param onRetry - Retry handler shown when `error` is set.
+ * @param emptyMessage - Placeholder when `isEmpty` is true.
+ * @param isEmpty - Whether the loaded collection has no items.
+ * @param children - Ready-state list markup.
+ * @param loadingMessage - Optional override for the loading placeholder.
+ */
+export declare function AsyncListState({ loading, error, onRetry, emptyMessage, isEmpty, children, loadingMessage }: AsyncListStateProps): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AsyncListState/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,mBAAmB;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAqB,EACrB,SAAS,EACV,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CASnC;AAED,UAAU,eAAe;IACvB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAoB,EAAE,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAWjG;AAED,UAAU,mBAAmB;IAC3B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,OAAO,EACP,YAAY,EACZ,OAAe,EACf,QAAQ,EACR,cAAc,EACf,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAiBnC"}

package/dist/components/AsyncListState/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@harborclient/sdk/jsx-runtime";
+import { Button } from '../Button/index.js';
+import { FieldError } from '../FieldError/index.js';
+/**
+ * Muted loading label used while async list data is fetched.
+ *
+ * @param children - Loading message; defaults to "Loading…".
+ * @param className - Extra classes appended after the preset.
+ */
+export function LoadingMessage({ children = 'Loading…', className }) {
+    const base = 'text-[14px] text-muted';
+    const classes = className ? `${base} ${className}` : base;
+    return (_jsx("p", { role: "status", className: classes, children: children }));
+}
+/**
+ * Inline error message paired with a secondary retry button.
+ *
+ * @param error - Error text rendered in danger color.
+ * @param onRetry - Handler invoked when retry is clicked.
+ * @param retryLabel - Visible retry button label.
+ */
+export function ErrorRetry({ error, onRetry, retryLabel = 'Retry' }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(FieldError, { spacing: "field", className: "mb-0 mt-0", children: error }), _jsx(Button, { type: "button", variant: "secondary", onClick: onRetry, children: retryLabel })] }));
+}
+/**
+ * Switches between loading, error-with-retry, empty, and ready list content for
+ * async CRUD screens such as Team Hub and storage location lists.
+ *
+ * @param loading - Whether data is still loading.
+ * @param error - Optional fetch error message.
+ * @param onRetry - Retry handler shown when `error` is set.
+ * @param emptyMessage - Placeholder when `isEmpty` is true.
+ * @param isEmpty - Whether the loaded collection has no items.
+ * @param children - Ready-state list markup.
+ * @param loadingMessage - Optional override for the loading placeholder.
+ */
+export function AsyncListState({ loading, error, onRetry, emptyMessage, isEmpty = false, children, loadingMessage }) {
+    if (loading) {
+        return _jsx(_Fragment, { children: loadingMessage ?? _jsx(LoadingMessage, {}) });
+    }
+    if (error) {
+        if (onRetry) {
+            return _jsx(ErrorRetry, { error: error, onRetry: onRetry });
+        }
+        return _jsx(FieldError, { spacing: "section", children: error });
+    }
+    if (isEmpty && emptyMessage != null) {
+        return _jsx("p", { className: "text-[14px] text-muted", children: emptyMessage });
+    }
+    return _jsx(_Fragment, { children: children });
+}

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

@@ -0,0 +1,32 @@
+import type { JSX } from 'react';
+interface Props {
+    /**
+     * Called when the user activates the back control.
+     */
+    onClick: () => void;
+    /**
+     * Default accessible name when `ariaLabel` is not provided.
+     */
+    label?: string;
+    /**
+     * Accessible name when it should differ from `label`.
+     */
+    ariaLabel?: string;
+    /**
+     * Additional Tailwind classes merged onto the button element.
+     */
+    className?: string;
+}
+/**
+ * Secondary icon back control for nested panel headers.
+ *
+ * Matches {@link PanelCloseButton} styling with a left-angle icon instead of close.
+ *
+ * @param onClick - Back navigation handler.
+ * @param label - Default accessible name; defaults to "Back".
+ * @param ariaLabel - Accessible name override.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function BackButton({ onClick, label, ariaLabel, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/BackButton/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { Button } from '../Button/index.js';
+import { FaIcon } from '../FaIcon/index.js';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
+/**
+ * Secondary icon back control for nested panel headers.
+ *
+ * Matches {@link PanelCloseButton} styling with a left-angle icon instead of close.
+ *
+ * @param onClick - Back navigation handler.
+ * @param label - Default accessible name; defaults to "Back".
+ * @param ariaLabel - Accessible name override.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function BackButton({ onClick, label = 'Back', ariaLabel, className }) {
+    const base = 'inline-flex shrink-0 items-center justify-center py-2';
+    const classes = className ? `${base} ${className}` : base;
+    return (_jsx(Button, { type: "button", variant: "secondary", className: classes, "aria-label": ariaLabel ?? label, onClick: onClick, children: _jsx(FaIcon, { icon: faAngleLeft, className: "h-4 w-4" }) }));
+}

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

@@ -0,0 +1,29 @@
+import type { JSX, ReactNode } from 'react';
+/**
+ * Visual tone for compact status badges.
+ */
+export type BadgeVariant = 'success' | 'danger' | 'muted' | 'accent';
+interface Props {
+    /**
+     * Badge label content.
+     */
+    children: ReactNode;
+    /**
+     * Color and background preset.
+     */
+    variant?: BadgeVariant;
+    /**
+     * Additional Tailwind classes merged onto the badge element.
+     */
+    className?: string;
+}
+/**
+ * Compact pill badge for status labels in lists and settings panels.
+ *
+ * @param children - Badge text.
+ * @param variant - Color preset (`success`, `danger`, `muted`, or `accent`).
+ * @param className - Extra classes appended after the variant preset.
+ */
+export declare function Badge({ children, variant, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErE,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAiB,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAKpF"}

package/dist/components/Badge/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Returns background and text classes for the chosen badge variant.
+ *
+ * @param variant - Badge color preset.
+ * @returns Tailwind classes for the badge span.
+ */
+function variantClasses(variant) {
+    switch (variant) {
+        case 'success':
+            return 'bg-success/20 text-success';
+        case 'danger':
+            return 'bg-danger/20 text-danger';
+        case 'accent':
+            return 'bg-accent/20 text-accent';
+        case 'muted':
+        default:
+            return 'bg-control text-muted';
+    }
+}
+/**
+ * Compact pill badge for status labels in lists and settings panels.
+ *
+ * @param children - Badge text.
+ * @param variant - Color preset (`success`, `danger`, `muted`, or `accent`).
+ * @param className - Extra classes appended after the variant preset.
+ */
+export function Badge({ children, variant = 'muted', className }) {
+    const base = `inline-flex shrink-0 items-center rounded px-1.5 py-0.5 text-[14px] ${variantClasses(variant)}`;
+    const classes = className ? `${base} ${className}` : base;
+    return _jsx("span", { className: classes, children: children });
+}

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

@@ -0,0 +1,16 @@
+import type { JSX } from 'react';
+export interface Props {
+    /**
+     * Whether the application is busy.
+     */
+    isBusy?: boolean;
+}
+/**
+ * Global busy overlay: top progress bar, corner spinner, and wait cursor.
+ * Delayed show avoids flashing on fast operations; min-visible avoids flicker.
+ *
+ * Requires host styles for `body.app-busy` (wait cursor) and `.busy-progress-bar`
+ * (progress animation); HarborClient defines these in `styles.css`.
+ */
+export declare function BusyIndicator({ isBusy }: Props): JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BusyIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA2FnE"}

package/dist/components/BusyIndicator/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { useEffect, useRef, useState } from '@harborclient/sdk/react';
+import { Spinner } from '../Spinner/index.js';
+const SHOW_DELAY_MS = 150;
+const MIN_VISIBLE_MS = 300;
+/**
+ * Global busy overlay: top progress bar, corner spinner, and wait cursor.
+ * Delayed show avoids flashing on fast operations; min-visible avoids flicker.
+ *
+ * Requires host styles for `body.app-busy` (wait cursor) and `.busy-progress-bar`
+ * (progress animation); HarborClient defines these in `styles.css`.
+ */
+export function BusyIndicator({ isBusy }) {
+    const [visible, setVisible] = useState(false);
+    const showTimerRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const shownAtRef = useRef(null);
+    /**
+     * Shows, hides, or extends the busy overlay based on global busy state.
+     */
+    useEffect(() => {
+        if (isBusy) {
+            if (hideTimerRef.current != null) {
+                clearTimeout(hideTimerRef.current);
+                hideTimerRef.current = null;
+            }
+            if (visible) {
+                return;
+            }
+            if (showTimerRef.current == null) {
+                showTimerRef.current = setTimeout(() => {
+                    showTimerRef.current = null;
+                    shownAtRef.current = Date.now();
+                    setVisible(true);
+                }, SHOW_DELAY_MS);
+            }
+            return;
+        }
+        if (showTimerRef.current != null) {
+            clearTimeout(showTimerRef.current);
+            showTimerRef.current = null;
+        }
+        if (!visible) {
+            return;
+        }
+        const elapsed = shownAtRef.current != null ? Date.now() - shownAtRef.current : MIN_VISIBLE_MS;
+        const remaining = Math.max(0, MIN_VISIBLE_MS - elapsed);
+        hideTimerRef.current = setTimeout(() => {
+            hideTimerRef.current = null;
+            shownAtRef.current = null;
+            setVisible(false);
+        }, remaining);
+    }, [isBusy, visible]);
+    /**
+     * Clears pending show/hide timers on unmount.
+     */
+    useEffect(() => {
+        return () => {
+            if (showTimerRef.current != null)
+                clearTimeout(showTimerRef.current);
+            if (hideTimerRef.current != null)
+                clearTimeout(hideTimerRef.current);
+        };
+    }, []);
+    /**
+     * Toggles the document wait cursor while the overlay is visible.
+     */
+    useEffect(() => {
+        document.body.classList.toggle('app-busy', visible);
+        return () => {
+            document.body.classList.remove('app-busy');
+        };
+    }, [visible]);
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pointer-events-none fixed inset-x-0 top-0 z-[100] h-0.5 overflow-hidden bg-separator", "aria-hidden": "true", children: _jsx("div", { className: "busy-progress-bar h-full w-1/3 bg-accent" }) }), _jsx("div", { className: "pointer-events-none fixed right-3 top-3 z-[100] flex h-6 w-6 items-center justify-center rounded-full border border-separator bg-surface shadow-sm", role: "status", "aria-label": "Working", children: _jsx(Spinner, { size: "sm" }) })] }));
+}

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

@@ -0,0 +1,29 @@
+import type { ButtonHTMLAttributes, JSX } from 'react';
+/**
+ * Visual style for a macOS-style button.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'primaryDanger' | 'secondaryDanger' | 'toolbar' | 'icon' | 'iconDanger';
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual style preset. Defaults to primary accent fill.
+     */
+    variant?: ButtonVariant;
+    /**
+     * Additional Tailwind classes merged after the variant preset.
+     */
+    className?: string;
+}
+/**
+ * macOS-style button with shared variant presets for primary actions, secondary
+ * actions, toolbar controls, and icon-only controls.
+ *
+ * Defaults to `type="button"` so clicks do not accidentally submit a parent form.
+ * Pass `type="submit"` explicitly when submit behavior is intended.
+ *
+ * @param variant - Visual preset; defaults to `primary`.
+ * @param className - Extra classes appended after the variant classes.
+ * @param type - Native button type; defaults to `button`.
+ */
+export declare function Button({ variant, className, type, ...props }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,MAAM,GACN,YAAY,CAAC;AAkBjB,UAAU,KAAM,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC7D;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAGrB"}

package/dist/components/Button/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+const VARIANT_CLASSES = {
+    primary: 'cursor-pointer rounded-md border border-transparent bg-accent px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50 app-no-drag',
+    secondary: 'cursor-pointer rounded-md border border-separator bg-control px-3 py-1 text-[15px] text-text shadow-sm hover:bg-selection disabled:cursor-not-allowed disabled:opacity-50 app-no-drag',
+    primaryDanger: 'cursor-pointer rounded-md border border-transparent bg-danger px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50 app-no-drag',
+    secondaryDanger: 'cursor-pointer rounded-md border border-separator bg-control px-3 py-1 text-[15px] text-danger shadow-sm hover:bg-danger/15 disabled:cursor-not-allowed disabled:opacity-50 app-no-drag',
+    toolbar: 'cursor-pointer rounded-md border-none bg-transparent px-2 py-1 text-[15px] hover:bg-selection app-no-drag',
+    icon: 'inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-muted opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100 focus-visible:opacity-100 hover:bg-selection hover:text-text app-no-drag',
+    iconDanger: 'inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-muted opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100 focus-visible:opacity-100 hover:bg-danger/15 hover:text-danger app-no-drag'
+};
+/**
+ * macOS-style button with shared variant presets for primary actions, secondary
+ * actions, toolbar controls, and icon-only controls.
+ *
+ * Defaults to `type="button"` so clicks do not accidentally submit a parent form.
+ * Pass `type="submit"` explicitly when submit behavior is intended.
+ *
+ * @param variant - Visual preset; defaults to `primary`.
+ * @param className - Extra classes appended after the variant classes.
+ * @param type - Native button type; defaults to `button`.
+ */
+export function Button({ variant = 'primary', className, type = 'button', ...props }) {
+    const classes = className ? `${VARIANT_CLASSES[variant]} ${className}` : VARIANT_CLASSES[variant];
+    return _jsx("button", { type: type, className: classes, ...props });
+}

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

@@ -0,0 +1,51 @@
+import type { JSX, ReactNode } from 'react';
+import { createExternalStore } from '../../runtime/store.js';
+import type { CodeEditorSetup, CodeEditorTheme } from '../../types.js';
+/**
+ * Persisted CodeMirror theme and basicSetup options shared by all CodeEditor instances.
+ */
+export interface CodeEditorConfig {
+    /**
+     * CodeMirror syntax theme applied to editor instances.
+     */
+    theme: CodeEditorTheme;
+    /**
+     * CodeMirror basicSetup options for editable editor instances.
+     */
+    setup: CodeEditorSetup;
+}
+/**
+ * Default CodeEditor configuration when no provider or store snapshot is available.
+ */
+export declare const DEFAULT_CODE_EDITOR_CONFIG: CodeEditorConfig;
+/**
+ * Returns the shared CodeEditor config store, creating it on first access.
+ *
+ * Stored on globalThis so host and plugin bundles share one store instance.
+ */
+export declare function getCodeEditorConfigStore(): ReturnType<typeof createExternalStore<CodeEditorConfig>>;
+interface ProviderProps {
+    /**
+     * Theme and setup values to publish to context and the global store.
+     */
+    value: CodeEditorConfig;
+    /**
+     * Child components that may render CodeEditor instances.
+     */
+    children: ReactNode;
+}
+/**
+ * Publishes CodeEditor theme/setup to React context and the cross-bundle global store.
+ *
+ * Wrap the HarborClient renderer root so host CodeEditor instances read settings from
+ * context. Plugin bundles fall back to the global store snapshot published here.
+ */
+export declare function CodeEditorConfigProvider({ value, children }: ProviderProps): JSX.Element;
+/**
+ * Resolves CodeEditor theme/setup from React context, then the global store, then defaults.
+ *
+ * @returns Active CodeEditor configuration.
+ */
+export declare function useCodeEditorConfig(): CodeEditorConfig;
+export {};
+//# sourceMappingURL=config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/config.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGvE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC;IAEvB;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,0BAA0B,EAAE,gBAGxC,CAAC;AAQF;;;;GAIG;AACH,wBAAgB,wBAAwB,IAAI,UAAU,CACpD,OAAO,mBAAmB,CAAC,gBAAgB,CAAC,CAC7C,CAMA;AAkBD,UAAU,aAAa;IACrB;;OAEG;IACH,KAAK,EAAE,gBAAgB,CAAC;IAExB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAWxF;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,CAKtD"}

package/dist/components/CodeEditor/config.js

@@ -0,0 +1,64 @@
+import { createContext, createElement, useContext, useEffect, useSyncExternalStore } from '@harborclient/sdk/react';
+import { createExternalStore } from '../../runtime/store.js';
+import { DEFAULT_CODE_EDITOR_SETUP } from '../../ui/codeEditorSettings.js';
+/**
+ * Default CodeEditor configuration when no provider or store snapshot is available.
+ */
+export const DEFAULT_CODE_EDITOR_CONFIG = {
+    theme: 'default',
+    setup: DEFAULT_CODE_EDITOR_SETUP
+};
+const GLOBAL_STORE_KEY = '__hc_codeEditorConfigStore';
+/**
+ * Returns the shared CodeEditor config store, creating it on first access.
+ *
+ * Stored on globalThis so host and plugin bundles share one store instance.
+ */
+export function getCodeEditorConfigStore() {
+    const globalRef = globalThis;
+    if (globalRef[GLOBAL_STORE_KEY] == null) {
+        globalRef[GLOBAL_STORE_KEY] = createExternalStore(DEFAULT_CODE_EDITOR_CONFIG);
+    }
+    return globalRef[GLOBAL_STORE_KEY];
+}
+/**
+ * Returns the CodeEditor React context, creating it on first access.
+ *
+ * Deferred so importing CodeEditor in a plugin bundle does not call requireHostReact()
+ * before activate() runs installReact(hc.react).
+ */
+function getCodeEditorContext() {
+    if (codeEditorContext == null) {
+        codeEditorContext = createContext(null);
+    }
+    return codeEditorContext;
+}
+/** Lazily initialized; use {@link getCodeEditorContext} instead of reading directly. */
+let codeEditorContext = null;
+/**
+ * Publishes CodeEditor theme/setup to React context and the cross-bundle global store.
+ *
+ * Wrap the HarborClient renderer root so host CodeEditor instances read settings from
+ * context. Plugin bundles fall back to the global store snapshot published here.
+ */
+export function CodeEditorConfigProvider({ value, children }) {
+    const store = getCodeEditorConfigStore();
+    /**
+     * Mirrors the latest config into the global store for plugin bundle consumers.
+     */
+    useEffect(() => {
+        store.setState(value);
+    }, [store, value]);
+    return createElement(getCodeEditorContext().Provider, { value }, children);
+}
+/**
+ * Resolves CodeEditor theme/setup from React context, then the global store, then defaults.
+ *
+ * @returns Active CodeEditor configuration.
+ */
+export function useCodeEditorConfig() {
+    const contextValue = useContext(getCodeEditorContext());
+    const store = getCodeEditorConfigStore();
+    const storeValue = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+    return contextValue ?? storeValue;
+}

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

@@ -0,0 +1,77 @@
+import { type CompletionSource } from '@codemirror/autocomplete';
+import type { JSX } from 'react';
+import type { CodeEditorSetup, CodeEditorTheme, Variable } from '../../types.js';
+export { CODE_EDITOR_THEME_OPTIONS } from './themes.js';
+export type CodeEditorLanguage = 'json' | 'text' | 'javascript' | 'shell';
+export interface Props {
+    /**
+     * Editor content.
+     */
+    value: string;
+    /**
+     * Called when the user edits the content; omitted for read-only views.
+     *
+     * @param value - Updated editor content.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Syntax mode for highlighting.
+     */
+    language?: CodeEditorLanguage;
+    /**
+     * When true, the editor cannot be edited.
+     */
+    readOnly?: boolean;
+    /**
+     * Placeholder shown when the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Minimum editor height in CSS units.
+     */
+    minHeight?: string;
+    /**
+     * Additional wrapper classes.
+     */
+    className?: string;
+    /**
+     * Collection-scoped variables for {{token}} highlighting and tooltips.
+     */
+    variables?: Variable[];
+    /**
+     * Opens collection settings to edit a hovered variable.
+     */
+    onEditVariable?: () => void;
+    /**
+     * When set on a JavaScript editor, enables custom autocomplete (e.g. hc API completions).
+     */
+    completionSource?: CompletionSource;
+    /**
+     * When set, overrides the persisted CodeMirror theme (used by the settings preview).
+     */
+    themeOverride?: CodeEditorTheme;
+    /**
+     * When set, overrides persisted basicSetup options (used by the settings preview).
+     */
+    setupOverride?: CodeEditorSetup;
+    /**
+     * DOM id applied to the editable region for label association.
+     */
+    id?: string;
+    /**
+     * Accessible name when no visible label is associated via `htmlFor`.
+     */
+    'aria-label'?: string;
+    /**
+     * Id of the element that labels this editor when using `aria-labelledby`.
+     */
+    'aria-labelledby'?: string;
+}
+/**
+ * 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 declare function CodeEditor({ value, onChange, language, readOnly, placeholder, minHeight, className, variables, onEditVariable, completionSource, themeOverride, setupOverride, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAiBjF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AASjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;AAE1E,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC;;OAEG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC;IAEhC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA0MD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAiB,EACjB,QAAgB,EAChB,WAAW,EACX,SAAmB,EACnB,SAAc,EACd,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EAClC,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8HrB"}