@harborclient/sdk 1.1.13 → 1.1.14

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

@@ -0,0 +1,35 @@
+import type { JSX } from 'react';
+import { type ScreenshotCarouselVariant } from './variants.js';
+interface Props {
+    /**
+     * Resolved screenshot URLs or data URLs to display.
+     */
+    images: string[];
+    /**
+     * Visual context for card grid, detail modal, or page tab spacing.
+     */
+    variant: ScreenshotCarouselVariant;
+    /**
+     * Accessible name for the carousel group.
+     */
+    ariaLabel?: string;
+    /**
+     * Accessible name for the full-size lightbox dialog.
+     */
+    lightboxLabel?: string;
+    /**
+     * Optional wrapper class names.
+     */
+    className?: string;
+    /**
+     * Stops pointer and keyboard events from bubbling to a parent activator.
+     * Used by marketplace cards that open a modal on click.
+     */
+    stopPropagation?: boolean;
+}
+/**
+ * Accessible left/right screenshot carousel for marketplace previews.
+ */
+export declare function ScreenshotCarousel({ images, variant, ariaLabel, lightboxLabel, className, stopPropagation }: Props): JSX.Element | null;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenshotCarousel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAA6B,MAAM,OAAO,CAAC;AAI5D,OAAO,EACL,KAAK,yBAAyB,EAG/B,MAAM,eAAe,CAAC;AAEvB,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IAEjB;;OAEG;IACH,OAAO,EAAE,yBAAyB,CAAC;IAEnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,OAAO,EACP,SAAyB,EACzB,aAAoC,EACpC,SAAS,EACT,eAAuB,EACxB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAmK5B"}

package/dist/components/ScreenshotCarousel/index.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { useState } from 'react';
+import { FaIcon } from '../FaIcon/index.js';
+import { ScreenshotLightbox } from './ScreenshotLightbox.js';
+import { screenshotCarouselImageFrameClassName, screenshotCarouselLightboxEnabled } from './variants.js';
+/**
+ * Accessible left/right screenshot carousel for marketplace previews.
+ */
+export function ScreenshotCarousel({ images, variant, ariaLabel = 'Screenshots', lightboxLabel = 'Screenshot preview', className, stopPropagation = false }) {
+    const [index, setIndex] = useState(0);
+    const [lightboxOpen, setLightboxOpen] = useState(false);
+    const imageCount = images.length;
+    const currentIndex = imageCount === 0 ? 0 : Math.min(index, imageCount - 1);
+    if (imageCount === 0) {
+        return null;
+    }
+    const hasMultiple = imageCount > 1;
+    const currentImage = images[currentIndex];
+    const lightboxEnabled = screenshotCarouselLightboxEnabled(variant);
+    /**
+     * Moves to the previous screenshot, wrapping to the last slide.
+     */
+    const showPrevious = () => {
+        setIndex(currentIndex === 0 ? imageCount - 1 : currentIndex - 1);
+    };
+    /**
+     * Moves to the next screenshot, wrapping to the first slide.
+     */
+    const showNext = () => {
+        setIndex(currentIndex === imageCount - 1 ? 0 : currentIndex + 1);
+    };
+    /**
+     * Handles keyboard navigation within the carousel group.
+     *
+     * @param event - Keyboard event on the carousel container.
+     */
+    const handleKeyDown = (event) => {
+        if (!hasMultiple) {
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            showPrevious();
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            showNext();
+        }
+    };
+    /**
+     * Prevents carousel controls from activating a parent card click handler.
+     *
+     * @param event - Pointer event from a carousel control.
+     */
+    const handleControlPointerEvent = (event) => {
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+    };
+    /**
+     * Prevents carousel keyboard activation from opening a parent card.
+     *
+     * @param event - Keyboard event from a carousel control.
+     */
+    const handleControlKeyDown = (event) => {
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+    };
+    /**
+     * Opens the full-size screenshot lightbox for modal and tab detail views.
+     */
+    const handleOpenLightbox = () => {
+        setLightboxOpen(true);
+    };
+    const frameClassName = screenshotCarouselImageFrameClassName(variant);
+    const previewLabel = hasMultiple
+        ? `View screenshot ${currentIndex + 1} of ${imageCount} in full size`
+        : 'View screenshot in full size';
+    return (_jsxs("div", { className: className ?? 'relative', role: "group", "aria-roledescription": "carousel", "aria-label": ariaLabel, tabIndex: hasMultiple ? 0 : undefined, onKeyDown: handleKeyDown, children: [lightboxEnabled ? (_jsx("button", { type: "button", className: "mb-4 block w-full cursor-zoom-in border-none bg-transparent p-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", "aria-label": previewLabel, onClick: handleOpenLightbox, children: _jsx("img", { src: currentImage, alt: "", "aria-hidden": true, className: frameClassName }) })) : (_jsx("img", { src: currentImage, alt: "", "aria-hidden": true, className: frameClassName })), lightboxEnabled && lightboxOpen ? (_jsx(ScreenshotLightbox, { images: images, index: currentIndex, onIndexChange: setIndex, onClose: () => setLightboxOpen(false), label: lightboxLabel })) : null, hasMultiple ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bg-panel/90 absolute top-1/2 left-2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md border border-separator text-text shadow-sm hover:bg-selection focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none", "aria-label": "Previous screenshot", onClick: (event) => {
+                            handleControlPointerEvent(event);
+                            showPrevious();
+                        }, onKeyDown: handleControlKeyDown, children: _jsx(FaIcon, { icon: faAngleLeft, className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", className: "bg-panel/90 absolute top-1/2 right-2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md border border-separator text-text shadow-sm hover:bg-selection focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none", "aria-label": "Next screenshot", onClick: (event) => {
+                            handleControlPointerEvent(event);
+                            showNext();
+                        }, onKeyDown: handleControlKeyDown, children: _jsx(FaIcon, { icon: faAngleRight, className: "h-3.5 w-3.5" }) }), _jsx("p", { className: "sr-only", role: "status", "aria-live": "polite", children: `Screenshot ${currentIndex + 1} of ${imageCount}` }), _jsx("div", { className: "pointer-events-none absolute bottom-2 left-1/2 flex -translate-x-1/2 gap-1.5", "aria-hidden": true, children: images.map((image, dotIndex) => (_jsx("span", { className: `h-2 w-2 rounded-full ${dotIndex === currentIndex ? 'bg-text' : 'bg-text/40'}` }, `${image}-${dotIndex}`))) })] })) : null] }));
+}

package/dist/components/ScreenshotCarousel/variants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Screenshot carousel layout variant.
+ */
+export type ScreenshotCarouselVariant = 'card' | 'modal' | 'tab';
+/**
+ * Returns the image frame classes for card, modal, and tab variants.
+ *
+ * @param variant - Card grid, detail modal, or page tab layout.
+ */
+export declare function screenshotCarouselImageFrameClassName(variant: ScreenshotCarouselVariant): string;
+/**
+ * Returns whether the carousel should open a full-size lightbox on click.
+ *
+ * @param variant - Card grid, detail modal, or page tab layout.
+ */
+export declare function screenshotCarouselLightboxEnabled(variant: ScreenshotCarouselVariant): boolean;
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/ScreenshotCarousel/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenshotCarousel/variants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAEjE;;;;GAIG;AACH,wBAAgB,qCAAqC,CAAC,OAAO,EAAE,yBAAyB,GAAG,MAAM,CAQhG;AAED;;;;GAIG;AACH,wBAAgB,iCAAiC,CAAC,OAAO,EAAE,yBAAyB,GAAG,OAAO,CAE7F"}

package/dist/components/ScreenshotCarousel/variants.js

@@ -0,0 +1,22 @@
+/**
+ * Returns the image frame classes for card, modal, and tab variants.
+ *
+ * @param variant - Card grid, detail modal, or page tab layout.
+ */
+export function screenshotCarouselImageFrameClassName(variant) {
+    if (variant === 'card') {
+        return 'aspect-video w-full object-cover object-top border-b border-separator';
+    }
+    if (variant === 'tab') {
+        return 'max-h-[min(18rem,35vh)] w-full rounded-md border border-separator object-contain object-top';
+    }
+    return 'aspect-video w-full object-cover object-top rounded-md border border-separator';
+}
+/**
+ * Returns whether the carousel should open a full-size lightbox on click.
+ *
+ * @param variant - Card grid, detail modal, or page tab layout.
+ */
+export function screenshotCarouselLightboxEnabled(variant) {
+    return variant === 'modal' || variant === 'tab';
+}

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

@@ -0,0 +1,41 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { JSX } from 'react';
+export interface Props {
+    /**
+     * Fixed viewport coordinates for the floating toolbar button.
+     */
+    coords: {
+        top: number;
+        left: number;
+    };
+    /**
+     * Accessible name announced for the action button.
+     */
+    label: string;
+    /**
+     * Visible button label, for example "Copy to chat".
+     */
+    text: string;
+    /**
+     * Invoked when the user activates the selection action.
+     */
+    onSelect: () => void;
+    /**
+     * Optional leading icon rendered before the visible label.
+     */
+    icon?: IconDefinition;
+    /**
+     * Optional muted shortcut hint shown after the label.
+     */
+    shortcutHint?: string;
+    /**
+     * Additional classes merged onto the toolbar button.
+     */
+    className?: string;
+}
+/**
+ * Floating selection action button portaled to document.body so fixed positioning
+ * is not clipped by overflow-hidden editor or terminal containers.
+ */
+export declare function SelectionActionToolbar({ coords, label, text, onSelect, icon, shortcutHint, className }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionActionToolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAEtC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoBrB"}

package/dist/components/SelectionActionToolbar/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { FaIcon } from '../FaIcon/index.js';
+import { portalToBody } from '../portalToBody.js';
+import { cn } from '../utils.js';
+/**
+ * Floating selection action button portaled to document.body so fixed positioning
+ * is not clipped by overflow-hidden editor or terminal containers.
+ */
+export function SelectionActionToolbar({ coords, label, text, onSelect, icon, shortcutHint, className }) {
+    return portalToBody(_jsxs("button", { type: "button", className: cn('hc-code-editor-selection-action app-no-drag pointer-events-auto fixed z-[70] inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-separator bg-control px-2 py-1 text-[14px] text-text shadow-sm hover:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent', className), style: { top: coords.top, left: coords.left }, "aria-label": label, onMouseDown: (event) => {
+            event.preventDefault();
+        }, onClick: onSelect, children: [icon ? _jsx(FaIcon, { icon: icon, className: "h-3.5 w-3.5" }) : null, _jsx("span", { children: text }), shortcutHint ? _jsx("span", { className: "text-[14px] text-muted", children: shortcutHint }) : null] }));
+}

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

@@ -0,0 +1,16 @@
+import type { JSX, ReactNode } from 'react';
+export interface Props {
+    /**
+     * Visible setting label text.
+     */
+    children: ReactNode;
+    /**
+     * Stable setting id shown on hover and keyboard focus.
+     */
+    settingId: string;
+}
+/**
+ * Setting label with a VS Code-style id affordance revealed on hover and focus.
+ */
+export declare function SettingIdLabel({ children, settingId }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SettingIdLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAa1E"}

package/dist/components/SettingIdLabel/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Setting label with a VS Code-style id affordance revealed on hover and focus.
+ */
+export function SettingIdLabel({ children, settingId }) {
+    return (_jsxs("span", { className: "group/setting-label inline-flex items-baseline gap-2", children: [_jsx("span", { children: children }), _jsx("span", { className: "pointer-events-none font-mono text-[14px] text-muted opacity-0 transition-opacity select-none group-focus-within/setting-label:opacity-100 group-hover/setting-label:opacity-100", title: settingId, "aria-label": `Setting id: ${settingId}`, children: settingId })] }));
+}

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

@@ -0,0 +1,33 @@
+import type { JSX, ReactNode } from 'react';
+export interface Props {
+    /**
+     * Stable setting id shown on hover and keyboard focus beside the title.
+     */
+    settingId: string;
+    /**
+     * Visible section title text.
+     */
+    title: ReactNode;
+    /**
+     * Optional muted helper copy rendered below the title.
+     */
+    description?: ReactNode;
+    /**
+     * Extra classes on the outer wrapper.
+     */
+    className?: string;
+    /**
+     * Overrides the default title span classes.
+     */
+    titleClassName?: string;
+    /**
+     * Overrides the default description paragraph classes.
+     */
+    descriptionClassName?: string;
+}
+/**
+ * Settings section heading that pairs a titled label with an optional description
+ * and a hover-revealed setting id badge.
+ */
+export declare function SettingSectionHeading({ settingId, title, description, className, titleClassName, descriptionClassName }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SettingSectionHeading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,KAAK,EACL,WAAW,EACX,SAAS,EACT,cAAc,EACd,oBAAoB,EACrB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAWrB"}

package/dist/components/SettingSectionHeading/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { SettingIdLabel } from '../SettingIdLabel/index.js';
+import { cn } from '../utils.js';
+/**
+ * Settings section heading that pairs a titled label with an optional description
+ * and a hover-revealed setting id badge.
+ */
+export function SettingSectionHeading({ settingId, title, description, className, titleClassName, descriptionClassName }) {
+    return (_jsxs("div", { className: className, children: [_jsx("span", { className: cn('text-[18px] font-medium text-text', titleClassName), children: _jsx(SettingIdLabel, { settingId: settingId, children: title }) }), description != null && description !== '' ? (_jsx("p", { className: cn('m-0 mb-4 text-muted', descriptionClassName), children: description })) : null] }));
+}

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

@@ -7,7 +7,7 @@ export { SortableSidebarItem } from './SortableSidebarItem.js';
 export { stopSortableDragPointerDown } from './stopSortableDragPointerDown.js';
 export { SidebarColorDot } from './SidebarColorDot.js';
 export { SidebarBadge, type SidebarBadgeVariant } from './SidebarBadge.js';
-export { sourceRow, METHOD_CLASSES, statusDotClass, SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
+export { sourceRow, METHOD_CLASSES, statusDotVariant, statusDotClass, SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
 export { SidebarMethodBadge } from './SidebarMethodBadge.js';
 export { SidebarStatusDot } from './SidebarStatusDot.js';
 export { SidebarStatusMarker } from './SidebarStatusMarker.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,yBAAyB,EAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EACL,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,yBAAyB,EAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/SidebarItem/index.js

@@ -7,7 +7,7 @@ export { SortableSidebarItem } from './SortableSidebarItem.js';
 export { stopSortableDragPointerDown } from './stopSortableDragPointerDown.js';
 export { SidebarColorDot } from './SidebarColorDot.js';
 export { SidebarBadge } from './SidebarBadge.js';
-export { sourceRow, METHOD_CLASSES, statusDotClass, SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
+export { sourceRow, METHOD_CLASSES, statusDotVariant, statusDotClass, SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
 export { SidebarMethodBadge } from './SidebarMethodBadge.js';
 export { SidebarStatusDot } from './SidebarStatusDot.js';
 export { SidebarStatusMarker } from './SidebarStatusMarker.js';

package/dist/components/SidebarItem/sidebarItemClasses.d.ts

@@ -1,3 +1,4 @@
+import type { StatusDotVariant } from '../StatusDot/index.js';
 /**
  * Tailwind classes for sidebar source rows and HTTP method badges.
  */
@@ -13,6 +14,13 @@ export declare function sourceRow(selected: boolean, compact?: boolean): string;
  * HTTP method color classes keyed by lowercase method name.
  */
 export declare const METHOD_CLASSES: Record<string, string>;
+/**
+ * Status dot variant for an HTTP response code.
+ *
+ * @param status - HTTP status code, or 0 for network errors.
+ * @returns Color preset for {@link StatusDot}.
+ */
+export declare function statusDotVariant(status: number): StatusDotVariant;
 /**
  * Status dot color class for an HTTP response code.
  *

package/dist/components/SidebarItem/sidebarItemClasses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebarItemClasses.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/sidebarItemClasses.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,UAAQ,GAAG,MAAM,CAKpE;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQjD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAMrD;AAED;;GAEG;AACH,eAAO,MAAM,yBAAyB,+HACwF,CAAC;AAE/H;;GAEG;AACH,eAAO,MAAM,yBAAyB,oVAC6S,CAAC"}
+{"version":3,"file":"sidebarItemClasses.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/sidebarItemClasses.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D;;GAEG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,UAAQ,GAAG,MAAM,CAKpE;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQjD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,gBAAgB,CAMjE;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAErD;AAED;;GAEG;AACH,eAAO,MAAM,yBAAyB,+HACwF,CAAC;AAE/H;;GAEG;AACH,eAAO,MAAM,yBAAyB,oVAC6S,CAAC"}

package/dist/components/SidebarItem/sidebarItemClasses.js

@@ -1,3 +1,4 @@
+import { statusDotVariantClass } from '../StatusDot/index.js';
 /**
  * Tailwind classes for sidebar source rows and HTTP method badges.
  */
@@ -27,21 +28,30 @@ export const METHOD_CLASSES = {
     options: 'text-method-options'
 };
 /**
- * Status dot color class for an HTTP response code.
+ * Status dot variant for an HTTP response code.
  *
  * @param status - HTTP status code, or 0 for network errors.
- * @returns Tailwind background color class for the status dot.
+ * @returns Color preset for {@link StatusDot}.
  */
-export function statusDotClass(status) {
+export function statusDotVariant(status) {
     if (status === 0)
-        return 'bg-danger';
+        return 'danger';
     if (status >= 200 && status < 300)
-        return 'bg-success';
+        return 'success';
     if (status >= 300 && status < 400)
-        return 'bg-warning';
+        return 'warning';
     if (status >= 400)
-        return 'bg-danger';
-    return 'bg-info';
+        return 'danger';
+    return 'info';
+}
+/**
+ * Status dot color class for an HTTP response code.
+ *
+ * @param status - HTTP status code, or 0 for network errors.
+ * @returns Tailwind background color class for the status dot.
+ */
+export function statusDotClass(status) {
+    return statusDotVariantClass(statusDotVariant(status));
 }
 /**
  * Standard primary button classes for sidebar item label areas.

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

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithoutRef, JSX } from 'react';
+/**
+ * Visual tone for compact circular status indicators.
+ */
+export type StatusDotVariant = 'success' | 'danger' | 'muted' | 'accent' | 'warning' | 'info';
+/**
+ * Size preset for the status dot.
+ */
+export type StatusDotSize = 'sm' | 'md';
+interface Props extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
+    /**
+     * Color preset for the dot background.
+     */
+    variant?: StatusDotVariant;
+    /**
+     * Screen-reader text describing the status when a visible label is not shown.
+     */
+    label?: string;
+    /**
+     * Dot diameter preset. `md` is the default list-row size; `sm` fits compact
+     * footer indicators.
+     */
+    size?: StatusDotSize;
+    /**
+     * Native tooltip text for hover affordance.
+     */
+    title?: string;
+}
+/**
+ * Returns the Tailwind background class for the chosen status dot variant.
+ *
+ * @param variant - Color preset for the dot.
+ * @returns Tailwind background color class.
+ */
+export declare function statusDotVariantClass(variant: StatusDotVariant): string;
+/**
+ * Renders a small circular status indicator with optional screen-reader text.
+ * Use `label` when status is not conveyed by adjacent visible text.
+ */
+export declare function StatusDot({ variant, label, size, title, className, ...props }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9F;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,CAgBvE;AAYD;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAiB,EACjB,KAAK,EACL,IAAW,EACX,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgBrB"}

package/dist/components/StatusDot/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
+/**
+ * Returns the Tailwind background class for the chosen status dot variant.
+ *
+ * @param variant - Color preset for the dot.
+ * @returns Tailwind background color class.
+ */
+export function statusDotVariantClass(variant) {
+    switch (variant) {
+        case 'success':
+            return 'bg-success';
+        case 'danger':
+            return 'bg-danger';
+        case 'accent':
+            return 'bg-accent';
+        case 'warning':
+            return 'bg-warning';
+        case 'info':
+            return 'bg-info';
+        case 'muted':
+        default:
+            return 'bg-muted';
+    }
+}
+/**
+ * Returns Tailwind size classes for the chosen dot size preset.
+ *
+ * @param size - Dot diameter preset.
+ * @returns Tailwind width and height classes.
+ */
+function sizeClasses(size) {
+    return size === 'sm' ? 'h-1.5 w-1.5' : 'h-2 w-2';
+}
+/**
+ * Renders a small circular status indicator with optional screen-reader text.
+ * Use `label` when status is not conveyed by adjacent visible text.
+ */
+export function StatusDot({ variant = 'muted', label, size = 'md', title, className, ...props }) {
+    const hasLabel = label != null && label.length > 0;
+    return (_jsxs("span", { className: cn('inline-flex shrink-0 items-center', className), title: title, ...props, children: [_jsx("span", { className: cn('inline-block shrink-0 rounded-full', sizeClasses(size), statusDotVariantClass(variant)), "aria-hidden": "true" }), hasLabel ? _jsx("span", { className: "sr-only", children: label }) : null] }));
+}

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

@@ -0,0 +1,71 @@
+import type { JSX, ReactNode } from 'react';
+/**
+ * One selectable theme variant shown in the picker.
+ */
+export interface ThemeVariantOption {
+    /** Theme id within the plugin manifest. */
+    id: string;
+    /** Human-readable option label. */
+    label: string;
+}
+export interface Props {
+    /**
+     * Selectable theme variants contributed by the plugin.
+     */
+    variants: ThemeVariantOption[];
+    /**
+     * Whether variants are chosen from a dropdown or a radio fieldset.
+     */
+    selectionMode: 'select' | 'radio';
+    /**
+     * Dialog heading rendered in the modal header row.
+     */
+    title: ReactNode;
+    /**
+     * Body copy shown above the selector (or alone when the selector is hidden).
+     */
+    description: ReactNode;
+    /**
+     * Visible label for the selector control, or screen-reader legend text for radio mode.
+     */
+    selectorLabel?: string;
+    /**
+     * When false, hides the selector while still confirming the first variant.
+     */
+    showSelector?: boolean;
+    /**
+     * External in-flight flag from the parent (for example Redux-managed switching).
+     */
+    busy?: boolean;
+    /**
+     * Optional status text shown below the body while busy (select mode).
+     */
+    busyStatus?: ReactNode;
+    /**
+     * Primary action button label when idle.
+     */
+    confirmLabel: string;
+    /**
+     * Primary action button label while busy (radio mode).
+     */
+    busyConfirmLabel?: string;
+    /**
+     * Secondary dismiss button label.
+     */
+    cancelLabel: string;
+    /**
+     * Applies the selected variant and closes the dialog.
+     *
+     * @param themeId - Theme id within the plugin manifest.
+     */
+    onConfirm: (themeId: string) => void | Promise<void>;
+    /**
+     * Dismisses the picker without changing the active theme.
+     */
+    onCancel: () => void;
+}
+/**
+ * Modal that lets the user choose which theme variant to apply from a plugin.
+ */
+export declare function ThemeVariantPickerModal({ variants, selectionMode, title, description, selectorLabel, showSelector, busy, busyStatus, confirmLabel, busyConfirmLabel, cancelLabel, onConfirm, onCancel }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeVariantPickerModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IAEX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAE/B;;OAEG;IACH,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAC;IAElC;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,EAAE,SAAS,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,aAAa,EACb,KAAK,EACL,WAAW,EACX,aAA+B,EAC/B,YAAmB,EACnB,IAAY,EACZ,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoFrB"}

package/dist/components/ThemeVariantPickerModal/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { useCallback, useId, useState } from '@harborclient/sdk/react';
+import { Button } from '../Button/index.js';
+import { FormGroup } from '../FormGroup/index.js';
+import { Modal, ModalFooter } from '../Modal/index.js';
+import { StatusMessage } from '../StatusMessage/index.js';
+import { Radio, Select } from '../forms/index.js';
+/**
+ * Modal that lets the user choose which theme variant to apply from a plugin.
+ */
+export function ThemeVariantPickerModal({ variants, selectionMode, title, description, selectorLabel = 'Theme variant', showSelector = true, busy = false, busyStatus, confirmLabel, busyConfirmLabel, cancelLabel, onConfirm, onCancel }) {
+    const titleId = useId();
+    const selectId = useId();
+    const radioGroupName = useId();
+    const [selectedThemeId, setSelectedThemeId] = useState(variants[0]?.id ?? '');
+    const [internalBusy, setInternalBusy] = useState(false);
+    const effectiveBusy = busy || internalBusy;
+    const primaryLabel = effectiveBusy && busyConfirmLabel ? busyConfirmLabel : confirmLabel;
+    /**
+     * Applies the selected variant and closes the dialog.
+     */
+    const handleConfirm = useCallback(() => {
+        if (!selectedThemeId) {
+            return;
+        }
+        setInternalBusy(true);
+        void (async () => {
+            try {
+                await onConfirm(selectedThemeId);
+            }
+            finally {
+                setInternalBusy(false);
+            }
+        })();
+    }, [onConfirm, selectedThemeId]);
+    return (_jsxs(Modal, { onClose: onCancel, labelledBy: titleId, title: title, closeDisabled: effectiveBusy, disableEscape: effectiveBusy, children: [_jsx("p", { className: "mb-3 text-[14px] text-muted", children: description }), showSelector && selectionMode === 'select' ? (_jsx(FormGroup, { label: selectorLabel, htmlFor: selectId, children: _jsx(Select, { id: selectId, value: selectedThemeId, disabled: effectiveBusy || variants.length === 0, onChange: (event) => setSelectedThemeId(event.target.value), children: variants.map((variant) => (_jsx("option", { value: variant.id, children: variant.label }, variant.id))) }) })) : null, showSelector && selectionMode === 'radio' ? (_jsxs("fieldset", { className: "m-0 space-y-2 border-none p-0", children: [_jsx("legend", { className: "sr-only", children: selectorLabel }), variants.map((variant) => (_jsx(FormGroup, { label: variant.label, layout: "checkbox", children: _jsx(Radio, { name: radioGroupName, checked: selectedThemeId === variant.id, onChange: () => setSelectedThemeId(variant.id), disabled: effectiveBusy }) }, variant.id)))] })) : null, effectiveBusy && busyStatus ? (_jsx(StatusMessage, { className: "mt-3", children: busyStatus })) : null, _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", variant: "secondary", disabled: effectiveBusy, onClick: onCancel, children: cancelLabel }), _jsx(Button, { type: "button", variant: "primary", disabled: effectiveBusy || !selectedThemeId, onClick: handleConfirm, children: primaryLabel })] })] }));
+}