@harborclient/sdk 1.1.13 → 1.1.15

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormSection/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,EAAE,SAAS,CAAC;IAEvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAY,EACZ,SAAS,EACT,cAAc,EACd,OAAO,EACR,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoBrB"}

package/dist/components/FormSection/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
+/**
+ * Shared settings section shell: title, description, and editor content.
+ * Used across collection, folder, environment, and globals settings views.
+ */
+export function FormSection({ title, description, children, fill = false, className, titleClassName, titleId }) {
+    return (_jsxs("div", { className: cn('mb-6 flex flex-col gap-1', fill && 'min-h-0 flex-1', className), children: [_jsx("span", { id: titleId, className: cn(titleClassName ?? 'text-[18px] text-muted', fill && 'shrink-0'), children: title }), _jsx("p", { className: cn('hc-form-group-description m-0 mb-2 text-[14px] text-muted', fill && 'shrink-0'), children: description }), children] }));
+}

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

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithoutRef, JSX } from 'react';
+export interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * Current progress count (for example completed items).
+     */
+    value: number;
+    /**
+     * Maximum progress count (for example total items).
+     */
+    max: number;
+    /**
+     * Accessible name announced for the progress bar.
+     */
+    label: string;
+}
+/**
+ * Determinate horizontal progress bar with accent fill and width transition.
+ */
+export declare function ProgressBar({ value, max, label, className, ...props }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmB1F"}

package/dist/components/ProgressBar/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
+import { progressFillPercent } from './progressBar.logic.js';
+/**
+ * Determinate horizontal progress bar with accent fill and width transition.
+ */
+export function ProgressBar({ value, max, label, className, ...props }) {
+    const fillPercent = progressFillPercent(value, max);
+    return (_jsx("div", { ...props, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value, "aria-label": label, className: cn('hc-progress-bar h-2 overflow-hidden rounded-full bg-separator', className), children: _jsx("div", { className: "hc-progress-bar-fill h-full rounded-full bg-accent transition-[width] duration-200 motion-reduce:transition-none", style: { width: `${fillPercent}%` } }) }));
+}

package/dist/components/ProgressBar/progressBar.logic.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Computes the fill width percentage for a determinate progress bar.
+ *
+ * @param value - Current progress count.
+ * @param max - Total count; zero yields 0% to avoid division by zero.
+ * @returns Rounded percentage between 0 and 100.
+ */
+export declare function progressFillPercent(value: number, max: number): number;
+//# sourceMappingURL=progressBar.logic.d.ts.map

package/dist/components/ProgressBar/progressBar.logic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressBar.logic.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/progressBar.logic.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAKtE"}

package/dist/components/ProgressBar/progressBar.logic.js

@@ -0,0 +1,13 @@
+/**
+ * Computes the fill width percentage for a determinate progress bar.
+ *
+ * @param value - Current progress count.
+ * @param max - Total count; zero yields 0% to avoid division by zero.
+ * @returns Rounded percentage between 0 and 100.
+ */
+export function progressFillPercent(value, max) {
+    if (max === 0) {
+        return 0;
+    }
+    return Math.round((value / max) * 100);
+}

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

@@ -0,0 +1,82 @@
+import type { JSX, ReactNode } from 'react';
+import type { FormGroupLabelTone } from '../FormGroup/index.js';
+export interface Props {
+    /**
+     * Dialog heading rendered in the modal header row.
+     */
+    title: ReactNode;
+    /**
+     * Id of the element that labels the dialog (typically the heading).
+     */
+    labelledBy: string;
+    /**
+     * Visible field label, or screen-reader-only text when `srOnlyLabel` is set.
+     */
+    label: ReactNode;
+    /**
+     * Hides the field label visually while keeping it available to screen readers.
+     */
+    srOnlyLabel?: boolean;
+    /**
+     * Label color style for the field. Defaults to muted helper tone.
+     */
+    labelTone?: FormGroupLabelTone;
+    /**
+     * Current input value controlled by the parent.
+     */
+    value: string;
+    /**
+     * Called when the user edits the input value.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Called when the user submits via Enter or the primary button.
+     */
+    onSubmit: () => void;
+    /**
+     * Called when the modal should close.
+     */
+    onClose: () => void;
+    /**
+     * Primary action button label. Defaults to "Save".
+     */
+    submitLabel?: string;
+    /**
+     * Optional placeholder shown when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * Optional muted helper text rendered below the field label.
+     */
+    description?: ReactNode;
+    /**
+     * Inline validation or submit error rendered below the input.
+     */
+    error?: ReactNode;
+    /**
+     * When true, disables the input and primary button while work is in flight.
+     */
+    busy?: boolean;
+    /**
+     * Custom gate for enabling submit and Enter-to-submit. Defaults to non-empty trimmed value.
+     */
+    canSubmit?: (value: string) => boolean;
+    /**
+     * Optional width class for the dialog panel (passed to {@link Modal}).
+     */
+    className?: string;
+    /**
+     * Explicit id for the text input; used to associate the label via `htmlFor`.
+     */
+    inputId?: string;
+    /**
+     * When true, focuses the input when the modal opens. Defaults to true.
+     */
+    autoFocus?: boolean;
+}
+/**
+ * Single-field prompt modal with autofocus input, Enter-to-submit, inline error,
+ * and a primary action gated on a trimmed non-empty value (or custom `canSubmit`).
+ */
+export declare function PromptModal({ title, labelledBy, label, srOnlyLabel, labelTone, value, onChange, onSubmit, onClose, submitLabel, placeholder, description, error, busy, canSubmit, className, inputId, autoFocus }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PromptModal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAMhE,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAmB,EACnB,SAAmB,EACnB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAoB,EACpB,WAAW,EACX,WAAW,EACX,KAAK,EACL,IAAY,EACZ,SAAuC,EACvC,SAAS,EACT,OAAO,EACP,SAAgB,EACjB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyCrB"}

package/dist/components/PromptModal/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { Button } from '../Button/index.js';
+import { FormGroup } from '../FormGroup/index.js';
+import { Modal, ModalFooter } from '../Modal/index.js';
+import { Input } from '../forms/index.js';
+import { defaultCanSubmitPromptValue } from './promptModal.logic.js';
+/**
+ * Single-field prompt modal with autofocus input, Enter-to-submit, inline error,
+ * and a primary action gated on a trimmed non-empty value (or custom `canSubmit`).
+ */
+export function PromptModal({ title, labelledBy, label, srOnlyLabel = false, labelTone = 'muted', value, onChange, onSubmit, onClose, submitLabel = 'Save', placeholder, description, error, busy = false, canSubmit = defaultCanSubmitPromptValue, className, inputId, autoFocus = true }) {
+    const submitEnabled = !busy && canSubmit(value);
+    /**
+     * Submits the prompt when Enter is pressed and submission is allowed.
+     */
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' && submitEnabled) {
+            onSubmit();
+        }
+    };
+    return (_jsxs(Modal, { onClose: onClose, className: className, labelledBy: labelledBy, title: title, children: [_jsx(FormGroup, { label: label, labelTone: labelTone, srOnly: srOnlyLabel, htmlFor: inputId, description: description, error: error, className: "border-none! p-0!", children: _jsx(Input, { className: "w-full", type: "text", autoFocus: autoFocus, placeholder: placeholder, value: value, disabled: busy, onChange: (event) => onChange(event.target.value), onKeyDown: handleKeyDown }) }), _jsx(ModalFooter, { spaced: true, children: _jsx(Button, { disabled: !submitEnabled, onClick: onSubmit, children: submitLabel }) })] }));
+}

package/dist/components/PromptModal/promptModal.logic.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns whether a prompt modal value is non-empty after trimming whitespace.
+ *
+ * @param value - Draft text from the single-field input.
+ * @returns True when the trimmed value has at least one character.
+ */
+export declare function defaultCanSubmitPromptValue(value: string): boolean;
+//# sourceMappingURL=promptModal.logic.d.ts.map

package/dist/components/PromptModal/promptModal.logic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promptModal.logic.d.ts","sourceRoot":"","sources":["../../../src/components/PromptModal/promptModal.logic.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAElE"}

package/dist/components/PromptModal/promptModal.logic.js

@@ -0,0 +1,9 @@
+/**
+ * Returns whether a prompt modal value is non-empty after trimming whitespace.
+ *
+ * @param value - Draft text from the single-field input.
+ * @returns True when the trimmed value has at least one character.
+ */
+export function defaultCanSubmitPromptValue(value) {
+    return value.trim().length > 0;
+}

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

@@ -0,0 +1,29 @@
+import type { JSX } from 'react';
+interface Props {
+    /**
+     * Resolved screenshot URLs or data URLs shown in the lightbox.
+     */
+    images: string[];
+    /**
+     * Active slide index shared with the carousel preview.
+     */
+    index: number;
+    /**
+     * Updates the active slide when the user navigates inside the lightbox.
+     */
+    onIndexChange: (index: number) => void;
+    /**
+     * Closes the lightbox overlay.
+     */
+    onClose: () => void;
+    /**
+     * Accessible name for the lightbox dialog.
+     */
+    label?: string;
+}
+/**
+ * Full-size screenshot preview dialog opened from a screenshot carousel.
+ */
+export declare function ScreenshotLightbox({ images, index, onIndexChange, onClose, label }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=ScreenshotLightbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenshotLightbox.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenshotCarousel/ScreenshotLightbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAKhD,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,aAAa,EACb,OAAO,EACP,KAA4B,EAC7B,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqGrB"}

package/dist/components/ScreenshotCarousel/ScreenshotLightbox.js

@@ -0,0 +1,66 @@
+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 { useEffect } from 'react';
+import { FaIcon } from '../FaIcon/index.js';
+import { Modal } from '../Modal/index.js';
+/** Shared prev/next control styling for carousel and lightbox navigation. */
+const NAV_BUTTON_CLASS = 'flex h-8 w-8 items-center justify-center rounded-md border border-separator bg-panel/90 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';
+/**
+ * Full-size screenshot preview dialog opened from a screenshot carousel.
+ */
+export function ScreenshotLightbox({ images, index, onIndexChange, onClose, label = 'Screenshot preview' }) {
+    const imageCount = images.length;
+    const currentIndex = Math.min(index, imageCount - 1);
+    const hasMultiple = imageCount > 1;
+    const currentImage = images[currentIndex];
+    /**
+     * Closes the lightbox on Escape without dismissing a parent dialog beneath it.
+     */
+    useEffect(() => {
+        /**
+         * Handles Escape in the capture phase so nested modals stay open.
+         *
+         * @param event - Document keydown event.
+         */
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.stopImmediatePropagation();
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [onClose]);
+    /**
+     * Moves to the previous screenshot, wrapping to the last slide.
+     */
+    const showPrevious = () => {
+        onIndexChange(currentIndex === 0 ? imageCount - 1 : currentIndex - 1);
+    };
+    /**
+     * Moves to the next screenshot, wrapping to the first slide.
+     */
+    const showNext = () => {
+        onIndexChange(currentIndex === imageCount - 1 ? 0 : currentIndex + 1);
+    };
+    /**
+     * Handles keyboard navigation within the lightbox dialog.
+     *
+     * @param event - Keyboard event on the lightbox container.
+     */
+    const handleKeyDown = (event) => {
+        if (!hasMultiple) {
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            showPrevious();
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            showNext();
+        }
+    };
+    return (_jsx(Modal, { label: label, onClose: onClose, disableEscape: true, overlayClassName: "z-[60]", className: "relative flex max-h-[90vh] w-[min(92vw,72rem)] items-center justify-center p-2", children: _jsxs("div", { className: "relative flex w-full items-center justify-center", onKeyDown: handleKeyDown, children: [_jsx("img", { src: currentImage, alt: "", className: "max-h-[85vh] max-w-full object-contain" }), hasMultiple ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `absolute top-1/2 left-2 -translate-y-1/2 ${NAV_BUTTON_CLASS}`, "aria-label": "Previous screenshot", onClick: showPrevious, children: _jsx(FaIcon, { icon: faAngleLeft, className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", className: `absolute top-1/2 right-2 -translate-y-1/2 ${NAV_BUTTON_CLASS}`, "aria-label": "Next screenshot", onClick: showNext, 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}` })] })) : null] }) }));
+}

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] }));
+}