@harborclient/sdk 1.1.12 → 1.1.14

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

@@ -2,7 +2,7 @@ import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
 /**
  * Visual tone for compact status badges.
  */
-export type BadgeVariant = 'success' | 'danger' | 'muted' | 'accent' | 'warning';
+export type BadgeVariant = 'success' | 'danger' | 'muted' | 'accent' | 'warning' | 'category';
 interface Props extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
     /**
      * Badge label content.

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjF,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACxE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAuBD;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAa9F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAE9F,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACxE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAyBD;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAa9F"}

package/dist/components/Badge/index.js

@@ -15,6 +15,8 @@ function variantClasses(variant) {
             return 'bg-accent/20 text-accent';
         case 'warning':
             return 'bg-warning/20 text-warning';
+        case 'category':
+            return 'bg-accent/15 text-text';
         case 'muted':
         default:
             return 'bg-control text-muted';

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

@@ -0,0 +1,51 @@
+import type { JSX, ReactNode } from 'react';
+/**
+ * One category chip shown on a marketplace catalog card.
+ */
+export interface CatalogCardCategory {
+    /**
+     * Stable category id used as the chip key.
+     */
+    id: string;
+    /**
+     * Human-readable label rendered inside the chip.
+     */
+    label: string;
+}
+export interface Props {
+    /**
+     * Marketplace listing display name.
+     */
+    name: string;
+    /**
+     * Published version string shown beside the name.
+     */
+    version: string;
+    /**
+     * Short summary text clamped to three lines.
+     */
+    summary: string;
+    /**
+     * Opens the catalog detail view for this listing.
+     */
+    onOpen: () => void;
+    /**
+     * Optional preview slot, typically a screenshot carousel.
+     * When omitted, a "No preview" placeholder is rendered.
+     */
+    preview?: ReactNode;
+    /**
+     * Category chips rendered below the summary.
+     * Omit or pass an empty array to hide the chip row.
+     */
+    categories?: CatalogCardCategory[];
+    /**
+     * Optional footer slot for action buttons or status rows.
+     */
+    footer?: ReactNode;
+}
+/**
+ * Compact marketplace preview card; opens the detail view on activation.
+ */
+export declare function CatalogCard({ name, version, summary, onOpen, preview, categories, footer }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CatalogCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3D;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAEnC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAeD;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,OAAO,EACP,MAAM,EACN,OAAO,EACP,UAAU,EACV,MAAM,EACP,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyCrB"}

package/dist/components/CatalogCard/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { Badge } from '../Badge/index.js';
+import { Card } from '../Card/index.js';
+import { cn } from '../utils.js';
+/**
+ * Opens the detail view when the card is activated from the keyboard.
+ *
+ * @param event - Keyboard event on the card list item.
+ * @param onOpen - Handler that opens the catalog detail view.
+ */
+function handleKeyDown(event, onOpen) {
+    if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onOpen();
+    }
+}
+/**
+ * Compact marketplace preview card; opens the detail view on activation.
+ */
+export function CatalogCard({ name, version, summary, onOpen, preview, categories, footer }) {
+    const showCategories = categories != null && categories.length > 0;
+    return (_jsx("li", { tabIndex: 0, "aria-label": `View details for ${name}`, onClick: onOpen, onKeyDown: (event) => handleKeyDown(event, onOpen), children: _jsxs(Card, { className: "h-full cursor-pointer flex-col overflow-hidden hover:bg-selection/40", children: [preview ?? (_jsx("div", { className: "bg-panel flex aspect-video w-full items-center justify-center border-b border-separator text-[14px] text-muted", "aria-hidden": true, children: "No preview" })), _jsxs(Card.Body, { className: "flex flex-1 flex-col gap-1.5 p-3", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("h3", { className: "m-0 min-w-0 truncate text-[14px] font-semibold text-text", children: name }), _jsx("span", { className: "shrink-0 text-[14px] text-muted", children: version })] }), _jsx("p", { className: "m-0 line-clamp-3 text-[14px] text-text", children: summary }), showCategories ? (_jsx("div", { className: "mt-auto flex flex-wrap gap-1.5 pt-1.5", children: categories.map((category) => (_jsx(Badge, { variant: "category", className: "px-2", children: category.label }, category.id))) })) : null] }), footer != null ? _jsx("div", { className: cn('border-t border-separator'), children: footer }) : null] }) }));
+}

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

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+interface Props {
+    /**
+     * Raw markdown string from a catalog README or description file.
+     */
+    content: string;
+}
+/**
+ * Renders catalog README markdown with GFM support and GitHub-like spacing.
+ */
+export declare function CatalogReadmeMarkdown({ content }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CatalogReadmeMarkdown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB;AAyGD;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAUrE"}

package/dist/components/CatalogReadmeMarkdown/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+/**
+ * Builds react-markdown component overrides styled like a GitHub README.
+ *
+ * Uses explicit element classes instead of Tailwind Typography so spacing and
+ * font sizes stay predictable within HarborClient theme tokens.
+ *
+ * @returns Component map for {@link ReactMarkdown}.
+ */
+function createReadmeMarkdownComponents() {
+    return {
+        p: ({ children }) => _jsx("p", { className: "mb-4 break-words last:mb-0", children: children }),
+        a: ({ href, children }) => (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-accent underline underline-offset-2 hover:opacity-90", children: children })),
+        ul: ({ children }) => (_jsx("ul", { className: "my-4 list-disc space-y-2 pl-6 last:mb-0 [&>li]:break-words", children: children })),
+        ol: ({ children }) => (_jsx("ol", { className: "my-4 list-decimal space-y-2 pl-6 last:mb-0 [&>li]:break-words", children: children })),
+        li: ({ children }) => (_jsx("li", { className: "break-words [&>p]:mb-2 [&>p:last-child]:mb-0", children: children })),
+        blockquote: ({ children }) => (_jsx("blockquote", { className: "my-4 border-l-4 border-separator pl-4 text-muted [&>p:last-child]:mb-0", children: children })),
+        hr: () => _jsx("hr", { className: "my-6 border-separator" }),
+        h1: ({ children }) => (_jsx("h1", { className: "mt-6 mb-4 border-b border-separator pb-2 text-[20px] font-semibold first:mt-0", children: children })),
+        h2: ({ children }) => (_jsx("h2", { className: "mt-6 mb-3 border-b border-separator pb-2 text-[18px] font-semibold first:mt-0", children: children })),
+        h3: ({ children }) => _jsx("h3", { className: "mt-5 mb-3 font-semibold first:mt-0", children: children }),
+        h4: ({ children }) => (_jsx("h4", { className: "mt-4 mb-2 text-[14px] font-semibold first:mt-0", children: children })),
+        h5: ({ children }) => (_jsx("h5", { className: "mt-4 mb-2 text-[14px] font-semibold first:mt-0", children: children })),
+        h6: ({ children }) => (_jsx("h6", { className: "mt-4 mb-2 text-[14px] font-semibold first:mt-0", children: children })),
+        pre: ({ children }) => (_jsx("pre", { className: "my-4 overflow-x-auto rounded-md border border-separator bg-sidebar p-4 font-mono text-[14px]", children: children })),
+        code: ({ className, children }) => {
+            const isBlock = typeof className === 'string' && className.includes('language-');
+            if (isBlock) {
+                return (_jsx("code", { className: `font-mono text-[14px] ${className ?? ''}`.trim(), children: children }));
+            }
+            return (_jsx("code", { className: "rounded bg-sidebar px-1.5 py-0.5 font-mono text-[14px]", children: children }));
+        },
+        table: ({ children }) => (_jsx("div", { className: "my-4 overflow-x-auto last:mb-0", children: _jsx("table", { className: "w-full border-collapse text-left text-[14px]", children: children }) })),
+        thead: ({ children }) => _jsx("thead", { children: children }),
+        tbody: ({ children }) => _jsx("tbody", { children: children }),
+        tr: ({ children }) => _jsx("tr", { children: children }),
+        th: ({ children }) => (_jsx("th", { className: "border border-separator bg-sidebar/40 px-2 py-1 align-top font-semibold", children: children })),
+        td: ({ children }) => (_jsx("td", { className: "border border-separator px-2 py-1 align-top", children: children })),
+        img: ({ src, alt }) => (_jsx("img", { src: src, alt: alt ?? '', className: "my-4 max-w-full rounded-md border border-separator" })),
+        strong: ({ children }) => _jsx("strong", { className: "font-semibold", children: children }),
+        em: ({ children }) => _jsx("em", { className: "italic", children: children }),
+        del: ({ children }) => _jsx("del", { className: "opacity-80", children: children })
+    };
+}
+/**
+ * Renders catalog README markdown with GFM support and GitHub-like spacing.
+ */
+export function CatalogReadmeMarkdown({ content }) {
+    const components = createReadmeMarkdownComponents();
+    return (_jsx("div", { className: "leading-relaxed break-words text-text [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: components, children: content }) }));
+}

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

@@ -57,12 +57,17 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'clas
      * Extra classes on the label element (associated and checkboxAdjacent layouts).
      */
     labelClassName?: string;
+    /**
+     * When false, omits the default border and padding on stacked, checkbox, and
+     * inline layouts for fields nested inside an already-bordered section.
+     */
+    bordered?: boolean;
 }
 /**
  * Reusable form field wrapper that pairs a label with one or more controls.
  * Supports stacked fields, checkboxes, inline rows, radio options, and
  * adjacent checkbox rows used in list pickers.
  */
-export declare function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout, labelTone, srOnly, className, labelClassName, ...props }: Props): JSX.Element;
+export declare function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout, labelTone, srOnly, className, labelClassName, bordered, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,kBAAkB,GAClB,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACrF;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAkBD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,aAAa,EACb,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoJrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,kBAAkB,GAClB,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACrF;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,aAAa,EACb,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACd,QAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkJrB"}

package/dist/components/FormGroup/index.js

@@ -2,6 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { useId } from '@harborclient/sdk/react';
 import { FieldError } from '../FieldError/index.js';
 import { enhanceControl } from '../enhanceControl.js';
+/**
+ * Returns Tailwind classes for the label text based on tone and visibility.
+ *
+ * @returns Class string for the label element.
+ */
+/**
+ * Returns wrapper classes for bordered stacked, checkbox, and inline layouts.
+ *
+ * @param bordered - Whether the default border and padding should be applied.
+ * @param layoutClasses - Layout-specific flex and sizing classes.
+ * @param extra - Caller-supplied className override.
+ */
+function borderedWrapperClasses(bordered, layoutClasses, extra) {
+    const frame = bordered ? 'p-4 border border-separator rounded-md' : '';
+    const base = `hc-form-group ${layoutClasses} ${frame}`.trim();
+    return extra ? `${base} ${extra}` : base;
+}
 /**
  * Returns Tailwind classes for the label text based on tone and visibility.
  *
@@ -22,7 +39,7 @@ function labelClasses(tone, srOnly, inline) {
  * Supports stacked fields, checkboxes, inline rows, radio options, and
  * adjacent checkbox rows used in list pickers.
  */
-export function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout = 'stacked', labelTone = 'default', srOnly = false, className, labelClassName, ...props }) {
+export function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout = 'stacked', labelTone = 'default', srOnly = false, className, labelClassName, bordered = true, ...props }) {
     const generatedId = useId();
     const controlId = htmlFor ?? generatedId;
     const extra = className ?? '';
@@ -63,15 +80,11 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
             id: controlId,
             invalid: resolvedErrorId != null
         });
-        const wrapperClasses = extra
-            ? `hc-form-group flex flex-col gap-1 p-4 border border-separator rounded-md ${extra}`
-            : 'hc-form-group flex flex-col gap-1 p-4 border border-separator rounded-md';
+        const wrapperClasses = borderedWrapperClasses(bordered, 'flex flex-col gap-1', extra);
         return (_jsxs("div", { ...props, className: wrapperClasses, children: [_jsxs("label", { htmlFor: controlId, className: "hc-form-group-label flex flex-col gap-1", children: [_jsxs("span", { className: "hc-form-group-label-row flex items-center gap-2", children: [linkedChildren, _jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label })] }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 pl-[26px] text-[14px] text-muted", children: description })) : null] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
     }
     if (layout === 'inline') {
-        const wrapperClasses = extra
-            ? `hc-form-group flex min-w-0 flex-1 items-center gap-2 p-4 border border-separator rounded-md ${extra}`
-            : 'hc-form-group flex min-w-0 flex-1 items-center gap-2 p-4 border border-separator rounded-md';
+        const wrapperClasses = borderedWrapperClasses(bordered, 'flex min-w-0 flex-1 items-center gap-2', extra);
         const linkedChildren = enhanceControl(children, { id: controlId });
         return (_jsxs("label", { htmlFor: controlId, className: wrapperClasses, children: [_jsx("span", { className: labelClasses(labelTone, srOnly, true), children: label }), linkedChildren] }));
     }
@@ -88,8 +101,6 @@ export function FormGroup({ label, children, htmlFor, description, error, errorI
         invalid: resolvedErrorId != null,
         id: htmlFor
     });
-    const wrapperClasses = extra
-        ? `hc-form-group flex flex-col gap-1 p-4 border border-separator rounded-md ${extra}`
-        : 'hc-form-group flex flex-col gap-1 p-4 border border-separator rounded-md';
+    const wrapperClasses = borderedWrapperClasses(bordered, 'flex flex-col gap-1', extra);
     return (_jsxs("div", { ...props, className: wrapperClasses, children: [_jsxs("label", { htmlFor: htmlFor, className: "hc-form-group-label flex flex-col gap-1", children: [_jsx("span", { className: labelClasses(labelTone, srOnly, false), children: label }), resolvedDescriptionId ? (_jsx("p", { id: resolvedDescriptionId, className: "hc-form-group-description m-0 text-[14px] text-muted", children: description })) : null, control] }), resolvedErrorId ? (_jsx(FieldError, { id: resolvedErrorId, spacing: "field", children: error })) : null] }));
 }

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

@@ -0,0 +1,37 @@
+import type { JSX, ReactNode } from 'react';
+export interface Props {
+    /**
+     * Section heading text or node.
+     */
+    title: ReactNode;
+    /**
+     * Helper copy shown below the title.
+     */
+    description: ReactNode;
+    /**
+     * Editor and any trailing controls for this section.
+     */
+    children: ReactNode;
+    /**
+     * When true, stretches the section to fill remaining vertical space in script tabs.
+     */
+    fill?: boolean;
+    /**
+     * Extra classes appended to the outer wrapper.
+     */
+    className?: string;
+    /**
+     * Overrides the default title classes (`text-[18px] text-muted`).
+     */
+    titleClassName?: string;
+    /**
+     * Optional id on the title span for label associations.
+     */
+    titleId?: string;
+}
+/**
+ * Shared settings section shell: title, description, and editor content.
+ * Used across collection, folder, environment, and globals settings views.
+ */
+export declare function FormSection({ title, description, children, fill, className, titleClassName, titleId }: Props): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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