@harborclient/sdk 1.1.13 → 1.1.15

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/Breadcrumb/CrumbSegment.d.ts

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+import { type SegmentShape } from './SegmentShell.js';
+import type { BreadcrumbSegment } from './types.js';
+interface Props {
+    /**
+     * Crumb data and optional navigation handler.
+     */
+    segment: BreadcrumbSegment;
+    /**
+     * Segment position within the bar.
+     */
+    shape: SegmentShape;
+}
+/**
+ * Renders one leading, non-editable breadcrumb segment.
+ */
+export declare function CrumbSegment({ segment, shape }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=CrumbSegment.d.ts.map

package/dist/components/Breadcrumb/CrumbSegment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrumbSegment.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/CrumbSegment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAc,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,mBAAmB,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,iBAAiB,CAAC;IAE3B;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCnE"}

package/dist/components/Breadcrumb/CrumbSegment.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
+import { SegmentShell } from './SegmentShell.js';
+/**
+ * Renders one leading, non-editable breadcrumb segment.
+ */
+export function CrumbSegment({ segment, shape }) {
+    const contentClass = cn('block w-full truncate border-none bg-transparent p-0 text-left', segment.onClick && 'cursor-pointer hover:text-text focus-visible:text-text');
+    /**
+     * Stops click propagation so breadcrumb navigation does not trigger edit mode.
+     *
+     * @param event - Mouse event from a breadcrumb segment control.
+     */
+    const handleClick = (event) => {
+        event.stopPropagation();
+        segment.onClick?.();
+    };
+    return (_jsx(SegmentShell, { shape: shape, children: segment.onClick ? (_jsx("button", { type: "button", className: cn(contentClass, 'app-no-drag focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent'), onClick: handleClick, children: segment.label })) : (_jsx("span", { className: contentClass, children: segment.label })) }));
+}

package/dist/components/Breadcrumb/EditableSegment.d.ts

@@ -0,0 +1,46 @@
+import type { JSX, RefObject } from 'react';
+import { type SegmentShape } from './SegmentShell.js';
+interface Props {
+    /**
+     * Current editable value.
+     */
+    value: string;
+    /**
+     * Placeholder when the value is empty.
+     */
+    placeholder: string;
+    /**
+     * Accessible name for the editable input.
+     */
+    editableLabel: string;
+    /**
+     * Whether inline edit mode is active.
+     */
+    editing: boolean;
+    /**
+     * Segment position within the bar.
+     */
+    shape: SegmentShape;
+    /**
+     * Ref forwarded to the inline input when editing.
+     */
+    inputRef: RefObject<HTMLInputElement | null>;
+    /**
+     * Opens inline edit mode for the trailing segment.
+     */
+    onStartEditing: () => void;
+    /**
+     * Closes inline edit mode for the trailing segment.
+     */
+    onStopEditing: () => void;
+    /**
+     * Called when the editable value changes.
+     */
+    onValueChange: (value: string) => void;
+}
+/**
+ * Renders the trailing breadcrumb segment with click-to-edit behavior.
+ */
+export declare function EditableSegment({ value, placeholder, editableLabel, editing, shape, inputRef, onStartEditing, onStopEditing, onValueChange }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=EditableSegment.d.ts.map

package/dist/components/Breadcrumb/EditableSegment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableSegment.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/EditableSegment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,mBAAmB,CAAC;AAEpE,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAE7C;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAE1B;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,aAAa,EACb,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,aAAa,EACb,aAAa,EACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmCrB"}

package/dist/components/Breadcrumb/EditableSegment.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { Input } from '../forms/index.js';
+import { SegmentShell } from './SegmentShell.js';
+/**
+ * Renders the trailing breadcrumb segment with click-to-edit behavior.
+ */
+export function EditableSegment({ value, placeholder, editableLabel, editing, shape, inputRef, onStartEditing, onStopEditing, onValueChange }) {
+    return (_jsx(SegmentShell, { shape: shape, grow: true, children: editing ? (_jsx(Input, { ref: inputRef, variant: "plain", "aria-label": editableLabel, className: "app-no-drag w-full min-w-0 border-none bg-transparent p-0 font-semibold text-text outline-none", type: "text", value: value, onChange: (event) => onValueChange(event.target.value), onBlur: onStopEditing, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === 'Escape') {
+                    event.preventDefault();
+                    onStopEditing();
+                }
+            } })) : (_jsx("button", { type: "button", "aria-current": "page", "aria-label": editableLabel, className: "app-no-drag flex w-full min-w-0 cursor-text items-center border-none bg-transparent p-0 text-left font-semibold text-text hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent", onClick: onStartEditing, children: _jsx("span", { className: "min-w-0 truncate", children: value ? value : _jsx("span", { className: "font-normal text-muted", children: placeholder }) }) })) }));
+}

package/dist/components/Breadcrumb/SegmentShell.d.ts

@@ -0,0 +1,32 @@
+import type { JSX, ReactNode } from 'react';
+/**
+ * Shape position within the interlocking breadcrumb bar.
+ */
+export type SegmentShape = 'first' | 'middle' | 'last' | 'only';
+/**
+ * Shared shell classes and clip-path styling for one breadcrumb segment.
+ */
+interface Props {
+    /**
+     * Segment position within the bar.
+     */
+    shape: SegmentShape;
+    /**
+     * When true, the segment grows to fill remaining horizontal space.
+     */
+    grow?: boolean;
+    /**
+     * Additional classes merged onto the segment shell.
+     */
+    className?: string;
+    /**
+     * Segment contents.
+     */
+    children: ReactNode;
+}
+/**
+ * Renders the arrow-shaped background shell shared by crumb and editable segments.
+ */
+export declare function SegmentShell({ shape, grow, className, children }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=SegmentShell.d.ts.map

package/dist/components/Breadcrumb/SegmentShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentShell.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/SegmentShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAsBhE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,IAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuB7F"}

package/dist/components/Breadcrumb/SegmentShell.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
+/** Pixel width of the chevron notch shared between interlocking segments. */
+const CHEVRON_PX = 9;
+/**
+ * Returns a CSS clip-path polygon for the given segment shape.
+ *
+ * @param shape - Which segment position to clip for.
+ * @returns Clip-path polygon string for inline style use.
+ */
+function clipPathForShape(shape) {
+    switch (shape) {
+        case 'first':
+            return `polygon(0 0, calc(100% - ${CHEVRON_PX}px) 0, 100% 50%, calc(100% - ${CHEVRON_PX}px) 100%, 0 100%)`;
+        case 'middle':
+            return `polygon(0 0, calc(100% - ${CHEVRON_PX}px) 0, 100% 50%, calc(100% - ${CHEVRON_PX}px) 100%, 0 100%, ${CHEVRON_PX}px 50%)`;
+        case 'last':
+            return `polygon(0 0, 100% 0, 100% 100%, 0 100%, ${CHEVRON_PX}px 50%)`;
+        case 'only':
+        default:
+            return 'none';
+    }
+}
+/**
+ * Renders the arrow-shaped background shell shared by crumb and editable segments.
+ */
+export function SegmentShell({ shape, grow = false, className, children }) {
+    const hasChevron = shape !== 'only';
+    const clipPath = clipPathForShape(shape);
+    const needsLeadingInset = shape !== 'first' && shape !== 'only';
+    return (_jsx("div", { className: cn('hc-breadcrumb-segment relative flex min-h-[30px] min-w-0 items-center bg-sidebar py-2', grow ? 'min-w-[6rem] flex-1' : 'max-w-[45%] shrink-0', hasChevron && shape !== 'last' && '-mr-[6px]', !needsLeadingInset && 'pl-3', 'pr-3', className), style: {
+            ...(clipPath !== 'none' ? { clipPath } : {}),
+            ...(needsLeadingInset ? { paddingLeft: `${CHEVRON_PX + 8}px` } : {})
+        }, children: _jsx("div", { className: "min-w-0 truncate", children: children }) }));
+}

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

@@ -1,21 +1,6 @@
 import { type JSX } from 'react';
-/**
- * One non-editable breadcrumb segment rendered before the trailing editable item.
- */
-export interface BreadcrumbSegment {
-    /**
-     * Visible label for the segment.
-     */
-    label: string;
-    /**
-     * Optional stable key; falls back to the segment index when omitted.
-     */
-    id?: string;
-    /**
-     * When set, the segment renders as a navigable button.
-     */
-    onClick?: () => void;
-}
+import { type BreadcrumbSegment } from './types.js';
+export type { BreadcrumbSegment } from './types.js';
 interface Props {
     /**
      * Leading, non-editable crumbs (collection, folder, and so on).
@@ -52,5 +37,4 @@ interface Props {
  * segments are optionally clickable; the trailing segment is inline-editable.
  */
 export declare function Breadcrumb({ segments, value, placeholder, editableLabel, onValueChange, className, flush }: Props): JSX.Element;
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAAG,EAQT,MAAM,OAAO,CAAC;AAOf;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAyOD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,WAAgB,EAChB,aAAsB,EACtB,aAAa,EACb,SAAS,EACT,KAAa,EACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2DrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAsC,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,WAAgB,EAChB,aAAsB,EACtB,aAAa,EACb,SAAS,EACT,KAAa,EACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2DrB"}

package/dist/components/Breadcrumb/index.js

@@ -1,67 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
-import { Input } from '../forms/index.js';
 import { cn } from '../utils.js';
-/** Pixel width of the chevron notch shared between interlocking segments. */
-const CHEVRON_PX = 9;
-/**
- * Returns a CSS clip-path polygon for the given segment shape.
- *
- * @param shape - Which segment position to clip for.
- * @returns Clip-path polygon string for inline style use.
- */
-function clipPathForShape(shape) {
-    switch (shape) {
-        case 'first':
-            return `polygon(0 0, calc(100% - ${CHEVRON_PX}px) 0, 100% 50%, calc(100% - ${CHEVRON_PX}px) 100%, 0 100%)`;
-        case 'middle':
-            return `polygon(0 0, calc(100% - ${CHEVRON_PX}px) 0, 100% 50%, calc(100% - ${CHEVRON_PX}px) 100%, 0 100%, ${CHEVRON_PX}px 50%)`;
-        case 'last':
-            return `polygon(0 0, 100% 0, 100% 100%, 0 100%, ${CHEVRON_PX}px 50%)`;
-        case 'only':
-        default:
-            return 'none';
-    }
-}
-/**
- * Renders the arrow-shaped background shell shared by crumb and editable segments.
- */
-function SegmentShell({ shape, grow = false, className, children }) {
-    const hasChevron = shape !== 'only';
-    const clipPath = clipPathForShape(shape);
-    const needsLeadingInset = shape !== 'first' && shape !== 'only';
-    return (_jsx("div", { className: cn('hc-breadcrumb-segment relative flex min-h-[30px] min-w-0 items-center bg-sidebar py-2', grow ? 'min-w-[6rem] flex-1' : 'max-w-[45%] shrink-0', hasChevron && shape !== 'last' && '-mr-[6px]', !needsLeadingInset && 'pl-3', 'pr-3', className), style: {
-            ...(clipPath !== 'none' ? { clipPath } : {}),
-            ...(needsLeadingInset ? { paddingLeft: `${CHEVRON_PX + 8}px` } : {})
-        }, children: _jsx("div", { className: "min-w-0 truncate", children: children }) }));
-}
-/**
- * Renders one leading, non-editable breadcrumb segment.
- */
-function CrumbSegment({ segment, shape }) {
-    const contentClass = cn('block w-full truncate border-none bg-transparent p-0 text-left', segment.onClick && 'cursor-pointer hover:text-text focus-visible:text-text');
-    /**
-     * Stops click propagation so breadcrumb navigation does not trigger edit mode.
-     *
-     * @param event - Mouse event from a breadcrumb segment control.
-     */
-    const handleClick = (event) => {
-        event.stopPropagation();
-        segment.onClick?.();
-    };
-    return (_jsx(SegmentShell, { shape: shape, children: segment.onClick ? (_jsx("button", { type: "button", className: cn(contentClass, 'app-no-drag focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent'), onClick: handleClick, children: segment.label })) : (_jsx("span", { className: contentClass, children: segment.label })) }));
-}
-/**
- * Renders the trailing breadcrumb segment with click-to-edit behavior.
- */
-function EditableSegment({ value, placeholder, editableLabel, editing, shape, inputRef, onStartEditing, onStopEditing, onValueChange }) {
-    return (_jsx(SegmentShell, { shape: shape, grow: true, children: editing ? (_jsx(Input, { ref: inputRef, variant: "plain", "aria-label": editableLabel, className: "app-no-drag w-full min-w-0 border-none bg-transparent p-0 font-semibold text-text outline-none", type: "text", value: value, onChange: (event) => onValueChange(event.target.value), onBlur: onStopEditing, onKeyDown: (event) => {
-                if (event.key === 'Enter' || event.key === 'Escape') {
-                    event.preventDefault();
-                    onStopEditing();
-                }
-            } })) : (_jsx("button", { type: "button", "aria-current": "page", "aria-label": editableLabel, className: "app-no-drag flex w-full min-w-0 cursor-text items-center border-none bg-transparent p-0 text-left font-semibold text-text hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent", onClick: onStartEditing, children: _jsx("span", { className: "min-w-0 truncate", children: value ? value : _jsx("span", { className: "font-normal text-muted", children: placeholder }) }) })) }));
-}
+import { CrumbSegment } from './CrumbSegment.js';
+import { EditableSegment } from './EditableSegment.js';
 /**
  * Full-width breadcrumb bar with interlocking arrow-shaped segments. Leading
  * segments are optionally clickable; the trailing segment is inline-editable.

package/dist/components/Breadcrumb/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * One non-editable breadcrumb segment rendered before the trailing editable item.
+ */
+export interface BreadcrumbSegment {
+    /**
+     * Visible label for the segment.
+     */
+    label: string;
+    /**
+     * Optional stable key; falls back to the segment index when omitted.
+     */
+    id?: string;
+    /**
+     * When set, the segment renders as a navigable button.
+     */
+    onClick?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Breadcrumb/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/components/Breadcrumb/types.js

@@ -0,0 +1 @@
+export {};

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