@harborclient/sdk 0.6.2 → 0.6.4

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

@@ -9,8 +9,9 @@ export interface Props {
  * Global busy overlay: top progress bar, corner spinner, and wait cursor.
  * Delayed show avoids flashing on fast operations; min-visible avoids flicker.
  *
- * Requires host styles for `body.app-busy` (wait cursor) and `.busy-progress-bar`
- * (progress animation); HarborClient defines these in `styles.css`.
+ * Sets `body.app-busy` and `aria-busy="true"` while visible. Requires host styles
+ * for `body.app-busy` (wait cursor) and `.busy-progress-bar` (progress animation);
+ * HarborClient defines these in `styles.css`.
  */
 export declare function BusyIndicator({ isBusy }: Props): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/BusyIndicator/index.js

@@ -7,8 +7,9 @@ const MIN_VISIBLE_MS = 300;
  * Global busy overlay: top progress bar, corner spinner, and wait cursor.
  * Delayed show avoids flashing on fast operations; min-visible avoids flicker.
  *
- * Requires host styles for `body.app-busy` (wait cursor) and `.busy-progress-bar`
- * (progress animation); HarborClient defines these in `styles.css`.
+ * Sets `body.app-busy` and `aria-busy="true"` while visible. Requires host styles
+ * for `body.app-busy` (wait cursor) and `.busy-progress-bar` (progress animation);
+ * HarborClient defines these in `styles.css`.
  */
 export function BusyIndicator({ isBusy }) {
     const [visible, setVisible] = useState(false);
@@ -63,12 +64,19 @@ export function BusyIndicator({ isBusy }) {
         };
     }, []);
     /**
-     * Toggles the document wait cursor while the overlay is visible.
+     * Toggles the document wait cursor and `aria-busy` while the overlay is visible.
      */
     useEffect(() => {
         document.body.classList.toggle('app-busy', visible);
+        if (visible) {
+            document.body.setAttribute('aria-busy', 'true');
+        }
+        else {
+            document.body.removeAttribute('aria-busy');
+        }
         return () => {
             document.body.classList.remove('app-busy');
+            document.body.removeAttribute('aria-busy');
         };
     }, [visible]);
     if (!visible) {

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

@@ -1,18 +1,31 @@
-import type { ButtonHTMLAttributes, JSX } from 'react';
+import type { ButtonHTMLAttributes, JSX, RefObject } from 'react';
 /**
  * Visual style for a macOS-style button.
  */
 export type ButtonVariant = 'primary' | 'secondary' | 'primaryDanger' | 'secondaryDanger' | 'toolbar' | 'icon' | 'iconDanger';
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Visual style preset. Defaults to primary accent fill.
-     */
-    variant?: ButtonVariant;
+type IconButtonVariant = 'icon' | 'iconDanger';
+type AccessibleName = {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+} | {
+    'aria-labelledby': string;
+    'aria-label'?: undefined;
+};
+type BaseProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'aria-labelledby'> & {
     /**
      * Additional Tailwind classes merged after the variant preset.
      */
     className?: string;
-}
+    /**
+     * Ref forwarded to the underlying native button element.
+     */
+    innerRef?: RefObject<HTMLButtonElement | null>;
+};
+export type ButtonProps = (BaseProps & {
+    variant: IconButtonVariant;
+} & AccessibleName) | (BaseProps & {
+    variant?: Exclude<ButtonVariant, IconButtonVariant>;
+});
 /**
  * macOS-style button with shared variant presets for primary actions, secondary
  * actions, toolbar controls, and icon-only controls.
@@ -20,10 +33,12 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  * Defaults to `type="button"` so clicks do not accidentally submit a parent form.
  * Pass `type="submit"` explicitly when submit behavior is intended.
  *
+ * Icon variants (`icon`, `iconDanger`) require `aria-label` or `aria-labelledby`.
+ *
  * @param variant - Visual preset; defaults to `primary`.
  * @param className - Extra classes appended after the variant classes.
  * @param type - Native button type; defaults to `button`.
  */
-export declare function Button({ variant, className, type, ...props }: Props): JSX.Element;
+export declare function Button({ variant, className, type, innerRef, ...props }: ButtonProps): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,MAAM,GACN,YAAY,CAAC;AAkBjB,UAAU,KAAM,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC7D;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAGrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,MAAM,GACN,YAAY,CAAC;AAEjB,KAAK,iBAAiB,GAAG,MAAM,GAAG,YAAY,CAAC;AAE/C,KAAK,cAAc,GACf;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE5D,KAAK,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC,GAAG;IACjG;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GACnB,CAAC,SAAS,GAAG;IAAE,OAAO,EAAE,iBAAiB,CAAA;CAAE,GAAG,cAAc,CAAC,GAC7D,CAAC,SAAS,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAA;CAAE,CAAC,CAAC;AAkB1E;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,SAAS,EACT,IAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAG3B"}

package/dist/components/Button/index.js

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

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

@@ -66,6 +66,14 @@ export interface Props {
      * Id of the element that labels this editor when using `aria-labelledby`.
      */
     'aria-labelledby'?: string;
+    /**
+     * When true, marks the editor as failing validation for assistive technologies.
+     */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /**
+     * Ids of elements describing the editor, merged with variable tooltip ids when active.
+     */
+    'aria-describedby'?: string;
 }
 /**
  * CodeMirror wrapper for editable request bodies and read-only response views.
@@ -73,5 +81,5 @@ export interface Props {
  * Styling relies on host CSS variables (`--mac-*`, `--font-mono`) and the `.app-no-drag`
  * class defined in HarborClient `styles.css`.
  */
-export declare function CodeEditor({ value, onChange, language, readOnly, placeholder, minHeight, className, variables, onEditVariable, completionSource, themeOverride, setupOverride, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: Props): JSX.Element;
+export declare function CodeEditor({ value, onChange, language, readOnly, placeholder, minHeight, className, variables, onEditVariable, completionSource, themeOverride, setupOverride, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy }: Props): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/CodeEditor/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { autocompletion } from '@codemirror/autocomplete';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
@@ -7,8 +7,8 @@ import { shell } from '@codemirror/legacy-modes/mode/shell';
 import { Decoration, EditorView, MatchDecorator, ViewPlugin, hoverTooltip } from '@codemirror/view';
 import CodeMirrorImport from '@uiw/react-codemirror';
 import { tags } from '@lezer/highlight';
-import { useEffect, useMemo, useState, createElement } from '@harborclient/sdk/react';
-import { getDynamicVariableDescription, resolveVariable, VARIABLE_NAME_CHARS } from '../../variables/index.js';
+import { useEffect, useId, useMemo, useRef, useState, createElement } from '@harborclient/sdk/react';
+import { getVariableTooltipContent, VARIABLE_NAME_CHARS } from '../../variables/index.js';
 import { useCodeEditorConfig } from './config.js';
 import { getCodeEditorThemeExtension } from './themes.js';
 export { CODE_EDITOR_THEME_OPTIONS } from './themes.js';
@@ -140,6 +140,137 @@ const variableHighlighter = ViewPlugin.fromClass(class {
         this.decorations = variableMatcher.updateDeco(update, this.decorations);
     }
 }, { decorations: (v) => v.decorations });
+/**
+ * Finds the {{variable}} token at a document position, if any.
+ *
+ * @param doc - CodeMirror document.
+ * @param pos - Character position in the document.
+ * @returns Variable key and token range, or null when not inside a token.
+ */
+function findVariableAtPos(doc, pos) {
+    const line = doc.lineAt(pos);
+    const pattern = new RegExp(`\\{\\{\\s*([${VARIABLE_NAME_CHARS}]+)\\s*\\}\\}`, 'g');
+    for (const match of line.text.matchAll(pattern)) {
+        const start = line.from + (match.index ?? 0);
+        const end = start + match[0].length;
+        if (pos < start || pos > end)
+            continue;
+        return { key: match[1], start, end };
+    }
+    return null;
+}
+/**
+ * Builds DOM content for a variable tooltip.
+ *
+ * @param key - Variable name from the token.
+ * @param variables - Collection-scoped variables for resolution.
+ * @param onEditVariable - Optional callback to open collection settings.
+ */
+function buildVariableTooltipDom(key, variables, onEditVariable) {
+    const content = getVariableTooltipContent(key, variables);
+    const dom = document.createElement('div');
+    dom.className = 'cm-variable-tooltip';
+    const valueEl = document.createElement('div');
+    valueEl.textContent = content.text;
+    if (content.muted) {
+        valueEl.className = 'cm-variable-tooltip-muted';
+    }
+    dom.appendChild(valueEl);
+    if (onEditVariable) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.textContent = 'Edit value';
+        btn.className = 'cm-variable-tooltip-edit';
+        btn.setAttribute('aria-label', `Edit value for ${key}`);
+        btn.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            onEditVariable();
+        });
+        dom.appendChild(btn);
+    }
+    return dom;
+}
+/**
+ * Joins non-empty element ids into a space-separated `aria-describedby` value.
+ *
+ * @param ids - Candidate element ids.
+ * @returns Merged id string, or undefined when no ids are provided.
+ */
+function mergeDescribedBy(...ids) {
+    const merged = ids.filter((id) => id != null && id !== '');
+    return merged.length > 0 ? merged.join(' ') : undefined;
+}
+/**
+ * Sets or clears `aria-describedby` on the CodeMirror content element.
+ *
+ * @param content - Editable `.cm-content` element.
+ * @param getValidationDescribedBy - Returns validation/helper ids from props.
+ * @param tooltipId - Optional variable tooltip id to include while visible.
+ */
+function setContentDescribedBy(content, getValidationDescribedBy, tooltipId) {
+    if (!content)
+        return;
+    const describedBy = mergeDescribedBy(getValidationDescribedBy(), tooltipId);
+    if (describedBy) {
+        content.setAttribute('aria-describedby', describedBy);
+    }
+    else {
+        content.removeAttribute('aria-describedby');
+    }
+}
+/**
+ * Shows a keyboard-driven tooltip when the caret moves inside a {{variable}} token.
+ *
+ * @param tooltipId - Stable id referenced by `aria-describedby`.
+ * @param onTooltipChange - Callback invoked when tooltip visibility or position changes.
+ * @param getValidationDescribedBy - Returns validation/helper ids from editor props.
+ */
+function variableSelectionTooltip(tooltipId, onTooltipChange, getValidationDescribedBy) {
+    return EditorView.updateListener.of((update) => {
+        if (!update.selectionSet && !update.docChanged)
+            return;
+        const content = update.view.dom.querySelector('.cm-content');
+        const pos = update.state.selection.main.head;
+        const match = findVariableAtPos(update.state.doc, pos);
+        if (!match) {
+            onTooltipChange(null);
+            setContentDescribedBy(content, getValidationDescribedBy);
+            return;
+        }
+        const coords = update.view.coordsAtPos(match.start);
+        if (!coords) {
+            onTooltipChange(null);
+            setContentDescribedBy(content, getValidationDescribedBy);
+            return;
+        }
+        onTooltipChange({
+            key: match.key,
+            top: coords.top,
+            left: coords.left + (coords.right - coords.left) / 2
+        });
+        setContentDescribedBy(content, getValidationDescribedBy, tooltipId);
+    });
+}
+/**
+ * Dismisses the keyboard tooltip when Escape is pressed.
+ *
+ * @param isOpen - Returns whether the keyboard tooltip is currently visible.
+ * @param onDismiss - Called to hide the keyboard tooltip.
+ * @param getValidationDescribedBy - Returns validation/helper ids from editor props.
+ */
+function variableTooltipEscapeHandler(isOpen, onDismiss, getValidationDescribedBy) {
+    return EditorView.domEventHandlers({
+        keydown(event, view) {
+            if (event.key === 'Escape' && isOpen()) {
+                event.preventDefault();
+                onDismiss(view);
+                setContentDescribedBy(view.dom.querySelector('.cm-content'), getValidationDescribedBy);
+                return true;
+            }
+            return false;
+        }
+    });
+}
 /**
  * Builds a hover tooltip extension for {{variable}} tokens.
  *
@@ -148,51 +279,17 @@ const variableHighlighter = ViewPlugin.fromClass(class {
  */
 function variableTooltip(variables, onEditVariable) {
     return hoverTooltip((view, pos) => {
-        const line = view.state.doc.lineAt(pos);
-        const pattern = new RegExp(`\\{\\{\\s*([${VARIABLE_NAME_CHARS}]+)\\s*\\}\\}`, 'g');
-        for (const match of line.text.matchAll(pattern)) {
-            const start = line.from + (match.index ?? 0);
-            const end = start + match[0].length;
-            if (pos < start || pos > end)
-                continue;
-            const key = match[1];
-            const value = resolveVariable(key, variables);
-            const dynamicDescription = getDynamicVariableDescription(key);
-            return {
-                pos: start,
-                end,
-                above: true,
-                create() {
-                    const dom = document.createElement('div');
-                    dom.className = 'cm-variable-tooltip';
-                    const valueEl = document.createElement('div');
-                    if (value !== undefined) {
-                        valueEl.textContent = value;
-                    }
-                    else if (dynamicDescription) {
-                        valueEl.textContent = `Dynamic: ${dynamicDescription}`;
-                    }
-                    else {
-                        valueEl.textContent = 'Not defined';
-                        valueEl.className = 'cm-variable-tooltip-muted';
-                    }
-                    dom.appendChild(valueEl);
-                    if (onEditVariable) {
-                        const btn = document.createElement('button');
-                        btn.type = 'button';
-                        btn.textContent = 'Edit value';
-                        btn.className = 'cm-variable-tooltip-edit';
-                        btn.addEventListener('mousedown', (e) => {
-                            e.preventDefault();
-                            onEditVariable();
-                        });
-                        dom.appendChild(btn);
-                    }
-                    return { dom };
-                }
-            };
-        }
-        return null;
+        const match = findVariableAtPos(view.state.doc, pos);
+        if (!match)
+            return null;
+        return {
+            pos: match.start,
+            end: match.end,
+            above: true,
+            create() {
+                return { dom: buildVariableTooltipDom(match.key, variables, onEditVariable) };
+            }
+        };
     });
 }
 /**
@@ -201,11 +298,20 @@ function variableTooltip(variables, onEditVariable) {
  * Styling relies on host CSS variables (`--mac-*`, `--font-mono`) and the `.app-no-drag`
  * class defined in HarborClient `styles.css`.
  */
-export function CodeEditor({ value, onChange, language = 'text', readOnly = false, placeholder, minHeight = '144px', className = '', variables, onEditVariable, completionSource, themeOverride, setupOverride, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }) {
+export function CodeEditor({ value, onChange, language = 'text', readOnly = false, placeholder, minHeight = '144px', className = '', variables, onEditVariable, completionSource, themeOverride, setupOverride, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy }) {
     const config = useCodeEditorConfig();
     const resolvedTheme = themeOverride ?? config.theme;
     const resolvedSetup = setupOverride ?? (readOnly ? null : config.setup);
     const [isDark, setIsDark] = useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches);
+    const [selectionTooltip, setSelectionTooltip] = useState(null);
+    const selectionTooltipRef = useRef(selectionTooltip);
+    selectionTooltipRef.current = selectionTooltip;
+    const setSelectionTooltipRef = useRef(setSelectionTooltip);
+    setSelectionTooltipRef.current = setSelectionTooltip;
+    const ariaDescribedByRef = useRef(ariaDescribedBy);
+    ariaDescribedByRef.current = ariaDescribedBy;
+    const tooltipId = useId();
+    const getValidationDescribedBy = () => ariaDescribedByRef.current;
     /**
      * Tracks system dark mode so syntax highlighting matches the active theme.
      */
@@ -243,7 +349,11 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
             next.push(StreamLanguage.define(shell));
         }
         if (variables) {
-            next.push(variableHighlighter, variableTooltip(variables, onEditVariable));
+            next.push(variableHighlighter, variableTooltip(variables, onEditVariable), variableSelectionTooltip(tooltipId, (state) => {
+                setSelectionTooltipRef.current(state);
+            }, getValidationDescribedBy), variableTooltipEscapeHandler(() => selectionTooltipRef.current != null, () => {
+                setSelectionTooltipRef.current(null);
+            }, getValidationDescribedBy));
         }
         const contentAttrs = {};
         if (id)
@@ -252,6 +362,10 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
             contentAttrs['aria-label'] = ariaLabel;
         if (ariaLabelledBy)
             contentAttrs['aria-labelledby'] = ariaLabelledBy;
+        if (ariaInvalid != null)
+            contentAttrs['aria-invalid'] = String(ariaInvalid);
+        if (ariaDescribedBy)
+            contentAttrs['aria-describedby'] = ariaDescribedBy;
         if (Object.keys(contentAttrs).length > 0) {
             next.push(EditorView.contentAttributes.of(contentAttrs));
         }
@@ -265,7 +379,10 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
         completionSource,
         id,
         ariaLabel,
-        ariaLabelledBy
+        ariaLabelledBy,
+        ariaInvalid,
+        ariaDescribedBy,
+        tooltipId
     ]);
     /**
      * Resolves CodeMirror basicSetup from persisted settings or read-only defaults.
@@ -305,15 +422,22 @@ export function CodeEditor({ value, onChange, language = 'text', readOnly = fals
     const wrapperClassName = readOnly
         ? `overflow-hidden rounded-md bg-control shadow-[inset_0_0.5px_1px_rgba(0,0,0,0.06)] app-no-drag ${className}`
         : `min-h-36 resize-y overflow-hidden rounded-md border border-separator bg-control shadow-[inset_0_0.5px_1px_rgba(0,0,0,0.06)] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--mac-accent)_35%,transparent),inset_0_0.5px_1px_rgba(0,0,0,0.06)] app-no-drag ${className}`;
-    return (_jsx("div", { className: wrapperClassName, children: createElement(CodeMirrorImport, {
-            value,
-            onChange: readOnly ? undefined : onChange,
-            extensions,
-            theme: 'none',
-            editable: !readOnly,
-            readOnly,
-            placeholder,
-            minHeight,
-            basicSetup
-        }) }));
+    const selectionTooltipContent = selectionTooltip
+        ? getVariableTooltipContent(selectionTooltip.key, variables ?? [])
+        : null;
+    return (_jsxs("div", { className: wrapperClassName, children: [createElement(CodeMirrorImport, {
+                value,
+                onChange: readOnly ? undefined : onChange,
+                extensions,
+                theme: 'none',
+                editable: !readOnly,
+                readOnly,
+                placeholder,
+                minHeight,
+                basicSetup
+            }), selectionTooltip && selectionTooltipContent && variables ? (_jsxs("div", { id: tooltipId, role: "tooltip", className: "pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-1.5 rounded-md border border-separator bg-surface px-3 py-2 text-[14px] text-text shadow-md app-no-drag", style: { top: selectionTooltip.top - 4, left: selectionTooltip.left }, children: [_jsx("span", { className: selectionTooltipContent.muted ? 'text-muted' : undefined, children: selectionTooltipContent.text }), onEditVariable ? (_jsx("button", { type: "button", className: "self-start text-[14px] text-accent hover:underline", "aria-label": `Edit value for ${selectionTooltip.key}`, onMouseDown: (event) => {
+                            event.preventDefault();
+                            onEditVariable();
+                            setSelectionTooltip(null);
+                        }, children: "Edit value" })) : null] })) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldError/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9D,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,EAAE,EACF,OAAiB,EACjB,SAAiB,EACjB,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAW5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldError/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9D,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,EAAE,EACF,OAAiB,EACjB,SAAgB,EAChB,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAW5B"}

package/dist/components/FieldError/index.js

@@ -25,7 +25,7 @@ function spacingClasses(spacing) {
  * @param roleAlert - Whether to set `role="alert"`.
  * @param className - Extra classes appended after the preset.
  */
-export function FieldError({ children, id, spacing = 'field', roleAlert = false, className }) {
+export function FieldError({ children, id, spacing = 'field', roleAlert = true, className }) {
     if (children == null || children === '')
         return null;
     const base = `${spacingClasses(spacing)} text-[14px] text-danger`;

package/dist/components/FooterButton/index.js

@@ -6,8 +6,8 @@ import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
  */
 function footerSegment(active) {
     return active
-        ? 'cursor-pointer rounded-[5px] border-none bg-surface px-2 py-0.5 text-[14px] text-text shadow-sm app-no-drag'
-        : 'cursor-pointer rounded-[5px] border-none bg-transparent px-2 py-0.5 text-[14px] text-muted hover:text-text app-no-drag';
+        ? 'cursor-pointer rounded-[2.5px] border-none bg-surface px-2 py-0.5 text-[14px] text-text shadow-sm app-no-drag'
+        : 'cursor-pointer rounded-[2.5px] border-none bg-transparent px-2 py-0.5 text-[14px] text-muted hover:text-text app-no-drag';
 }
 /**
  * Text segment toggle button for the window footer bar, used to open and close

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormDataEditor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAM/E,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,aAAa,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAqCD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqLrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormDataEditor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAM/E,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,aAAa,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAEvC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAqCD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgMrB"}

package/dist/components/FormDataEditor/index.js

@@ -98,12 +98,12 @@ export function FormDataEditor({ parts, onChange, variables, onSelectFiles, onEd
         const currentFiles = rows[index]?.files ?? [];
         updateRow(index, { files: currentFiles.filter((file) => file !== filePath) });
     };
-    return (_jsx("div", { className: "overflow-hidden rounded-md border border-separator", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: `${thClass} w-6 p-0` }), _jsx("th", { className: thClass, children: "Key" }), _jsx("th", { className: `${thClass} w-24`, children: "Type" }), _jsx("th", { className: thClass, children: "Value" }), _jsx("th", { className: `${thClass} w-7 p-0` })] }) }), _jsx("tbody", { className: "[&_tr:last-child_td]:border-b-0", children: rows.map((row, index) => (_jsxs("tr", { className: "group", children: [_jsx("td", { className: `${tdClass} w-6 p-1 text-center`, children: _jsx(Input, { type: "checkbox", className: "app-no-drag", checked: row.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx("td", { className: tdClass, children: _jsx(Input, { type: "text", className: "w-full", value: row.key, placeholder: "field", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateRow(index, { key: e.target.value }) }) }), _jsx("td", { className: tdClass, children: _jsxs(Select, { className: "w-full", value: row.type, "aria-label": `Type, row ${index + 1}`, onChange: (e) => {
+    return (_jsx("div", { className: "overflow-hidden rounded-md border border-separator", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: `${thClass} w-6 p-0`, children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx("th", { scope: "col", className: thClass, children: "Key" }), _jsx("th", { scope: "col", className: `${thClass} w-24`, children: "Type" }), _jsx("th", { scope: "col", className: thClass, children: "Value" }), _jsx("th", { className: `${thClass} w-7 p-0` })] }) }), _jsx("tbody", { className: "[&_tr:last-child_td]:border-b-0", children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx("td", { className: `${tdClass} w-6 p-1 text-center`, children: _jsx(Input, { type: "checkbox", className: "app-no-drag", checked: row.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx("td", { className: tdClass, children: _jsx(Input, { type: "text", className: "w-full", value: row.key, placeholder: "field", "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateRow(index, { key: e.target.value }) }) }), _jsx("td", { className: tdClass, children: _jsxs(Select, { className: "w-full", value: row.type, "aria-label": `Type, row ${index + 1}`, onChange: (e) => {
                                         const type = e.target.value;
                                         updateRow(index, {
                                             type,
                                             value: type === 'text' ? row.value : '',
                                             files: type === 'file' ? row.files : []
                                         });
-                                    }, children: [_jsx("option", { value: "text", children: "Text" }), _jsx("option", { value: "file", children: "File" })] }) }), _jsx("td", { className: tdClass, children: row.type === 'text' ? (_jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: row.value, onChange: (value) => updateRow(index, { value }), variables: variables, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable })) : (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "self-start px-2 py-0.5 text-[14px]", onClick: () => void chooseFiles(index), children: "Choose files" }), row.files.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: row.files.map((filePath) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-md border border-separator bg-control px-1.5 py-0.5 text-[14px] text-text", title: filePath, children: [_jsx("span", { className: "truncate", children: fileBasename(filePath) }), _jsx("button", { type: "button", className: "inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted hover:bg-selection hover:text-text app-no-drag", onClick: () => removeFile(index, filePath), title: "Remove file", children: _jsx(FaIcon, { icon: faXmark, className: "h-3 w-3" }) })] }, filePath))) }))] })) }), _jsx("td", { className: `${tdClass} w-7 p-1 text-center`, children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }) }));
+                                    }, children: [_jsx("option", { value: "text", children: "Text" }), _jsx("option", { value: "file", children: "File" })] }) }), _jsx("td", { className: tdClass, children: row.type === 'text' ? (_jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: row.value, onChange: (value) => updateRow(index, { value }), variables: variables, placeholder: "value", "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable })) : (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "self-start px-2 py-0.5 text-[14px]", onClick: () => void chooseFiles(index), children: "Choose files" }), row.files.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: row.files.map((filePath) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-md border border-separator bg-control px-1.5 py-0.5 text-[14px] text-text", title: filePath, "aria-label": filePath, children: [_jsx("span", { className: "truncate", children: fileBasename(filePath) }), _jsx("button", { type: "button", className: "inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted hover:bg-selection hover:text-text app-no-drag", onClick: () => removeFile(index, filePath), title: `Remove file ${fileBasename(filePath)}`, "aria-label": `Remove file ${fileBasename(filePath)}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3 w-3" }) })] }, filePath))) }))] })) }), _jsx("td", { className: `${tdClass} w-7 p-1 text-center`, children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }) }));
 }

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

@@ -32,6 +32,10 @@ interface Props {
      * Explicit id for the error element; defaults to `${htmlFor}-error` when `htmlFor` is set.
      */
     errorId?: string;
+    /**
+     * Explicit id for the description element; defaults to `${htmlFor}-description` when `htmlFor` is set.
+     */
+    descriptionId?: string;
     /**
      * Label and control placement. Defaults to stacked (label above control).
      */
@@ -64,12 +68,13 @@ interface Props {
  * @param description - Optional helper text below the control.
  * @param error - Optional validation error below the control.
  * @param errorId - Explicit error element id for `aria-describedby`.
+ * @param descriptionId - Explicit description element id for `aria-describedby`.
  * @param layout - Label/control placement preset.
  * @param labelTone - Label color style.
  * @param srOnly - Hide label visually for screen-reader-only labels.
  * @param className - Extra classes on the outer wrapper.
  * @param labelClassName - Extra classes on the label element.
  */
-export declare function FormGroup({ label, children, htmlFor, description, error, errorId, layout, labelTone, srOnly, className, labelClassName }: Props): JSX.Element;
+export declare function FormGroup({ label, children, htmlFor, description, error, errorId, descriptionId, layout, labelTone, srOnly, className, labelClassName }: 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,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C;;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,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;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,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;AAkDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAK,EACL,OAAO,EACP,MAAkB,EAClB,SAAqB,EACrB,MAAc,EACd,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkFrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5C;;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,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;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;AAqBD;;;;;;;;;;;;;;;;;GAiBG;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,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsGrB"}