@harborclient/sdk 1.0.23 → 1.0.25

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderHighlightedPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/renderHighlightedPlaceholder.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAiC,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGpG;;GAEG;AACH,MAAM,WAAW,mCAAmC;IAClD;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACpC;AA8DD;;;;;;GAMG;AACH,wBAAgB,+BAA+B,CAC7C,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,mCAAmC,GAC3C,WAAW,CA4Cb"}

package/dist/components/CodeEditor/renderHighlightedPlaceholder.js

@@ -0,0 +1,105 @@
+import { javascript } from '@codemirror/lang-javascript';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { createBuiltInSyntaxHighlighting } from './editorChrome.js';
+import { createSlashCommandHighlighter } from './slashCommandHighlighter.js';
+import { getCodeEditorThemeExtension } from './themes.js';
+const renderCache = new Map();
+/**
+ * Builds a stable cache key for rendered placeholder DOM.
+ *
+ * @param text - Placeholder source text.
+ * @param options - Theme and highlighting options.
+ */
+function buildRenderCacheKey(text, options) {
+    const slashNames = options.slashCommands?.map((command) => command.name).join(',') ?? '';
+    return [text, options.fontSize, String(options.isDark), options.theme, slashNames].join('\0');
+}
+/**
+ * Builds CodeMirror extensions for the offscreen placeholder render pass.
+ *
+ * @param options - Theme and highlighting options.
+ */
+function buildOffscreenPlaceholderExtensions(options) {
+    const extensions = [
+        javascript(),
+        EditorView.lineWrapping,
+        EditorView.editable.of(false),
+        EditorState.readOnly.of(true),
+        EditorView.theme({
+            '&': { backgroundColor: 'transparent' },
+            '.cm-scroller': { overflow: 'hidden' },
+            '.cm-content': {
+                padding: '0',
+                fontFamily: 'var(--font-mono)',
+                fontSize: options.fontSize
+            },
+            '.cm-line': { padding: '0' },
+            '.cm-activeLine': { backgroundColor: 'transparent' },
+            '.cm-slash-command': {
+                color: 'var(--mac-accent)'
+            },
+            '.cm-slash-command-args': {
+                color: 'var(--mac-muted)',
+                fontStyle: 'italic'
+            }
+        })
+    ];
+    const themeExtension = getCodeEditorThemeExtension(options.theme);
+    if (themeExtension) {
+        extensions.push(themeExtension);
+    }
+    else {
+        extensions.push(createBuiltInSyntaxHighlighting(options.isDark));
+    }
+    if (options.slashCommands && options.slashCommands.length > 0) {
+        extensions.push(createSlashCommandHighlighter(options.slashCommands));
+    }
+    return extensions;
+}
+/**
+ * Renders highlighted placeholder markup via a hidden offscreen editor, then clones
+ * the resulting line nodes into a flat inline placeholder element.
+ *
+ * @param text - Placeholder source shown until the user focuses or types.
+ * @param options - Highlighting and theme options shared with the parent editor.
+ */
+export function renderHighlightedPlaceholderDom(text, options) {
+    const cacheKey = buildRenderCacheKey(text, options);
+    const cached = renderCache.get(cacheKey);
+    if (cached) {
+        return cached.cloneNode(true);
+    }
+    const host = document.createElement('div');
+    host.style.cssText = 'position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none;';
+    document.body.appendChild(host);
+    const view = new EditorView({
+        state: EditorState.create({
+            doc: text,
+            extensions: buildOffscreenPlaceholderExtensions(options)
+        }),
+        parent: host
+    });
+    const wrap = document.createElement('span');
+    wrap.className = 'cm-placeholder cm-syntax-placeholder';
+    wrap.style.pointerEvents = 'none';
+    wrap.style.display = 'inline-block';
+    wrap.style.verticalAlign = 'top';
+    wrap.style.whiteSpace = 'pre-wrap';
+    wrap.style.opacity = '0.55';
+    wrap.style.fontFamily = 'var(--font-mono)';
+    wrap.style.fontSize = options.fontSize;
+    wrap.style.userSelect = 'none';
+    wrap.style.width = '100%';
+    wrap.setAttribute('aria-hidden', 'true');
+    const content = view.dom.querySelector('.cm-content');
+    if (content) {
+        for (const line of content.querySelectorAll('.cm-line')) {
+            wrap.appendChild(line.cloneNode(true));
+        }
+    }
+    view.destroy();
+    host.remove();
+    renderCache.set(cacheKey, wrap.cloneNode(true));
+    return wrap;
+}

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

@@ -0,0 +1,17 @@
+import type { Extension } from '@codemirror/state';
+/**
+ * Minimal slash-command shape required for line highlighting.
+ */
+export interface SlashCommandSpec {
+    /**
+     * Command name without the leading slash (for example `ask`).
+     */
+    name: string;
+}
+/**
+ * Returns a ViewPlugin extension that accents slash commands at the start of a line.
+ *
+ * @param commands - Registered slash commands to decorate.
+ */
+export declare function createSlashCommandHighlighter(commands: SlashCommandSpec[]): Extension;
+//# sourceMappingURL=slashCommandHighlighter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slashCommandHighlighter.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/slashCommandHighlighter.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAeD;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,gBAAgB,EAAE,GAAG,SAAS,CA+CrF"}

package/dist/components/CodeEditor/slashCommandHighlighter.js

@@ -0,0 +1,56 @@
+import { Decoration, MatchDecorator, ViewPlugin } from '@codemirror/view';
+/**
+ * Builds a MatchDecorator regexp that highlights registered slash commands at line start.
+ *
+ * @param commands - Slash command names to highlight.
+ */
+function slashCommandHighlightPattern(commands) {
+    const names = commands.map((entry) => entry.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    if (names.length === 0) {
+        return /(?!)/g;
+    }
+    return new RegExp(`^(\\s*)(/(?:${names.join('|')}))([ \\t]+.*)?$`, 'gm');
+}
+/**
+ * Returns a ViewPlugin extension that accents slash commands at the start of a line.
+ *
+ * @param commands - Registered slash commands to decorate.
+ */
+export function createSlashCommandHighlighter(commands) {
+    const slashMatcher = new MatchDecorator({
+        regexp: slashCommandHighlightPattern(commands),
+        /**
+         * Applies accent styling to the command token and muted italic styling to args.
+         */
+        decorate: (add, from, _to, match) => {
+            const leading = match[1] ?? '';
+            const command = match[2] ?? '';
+            const args = match[3];
+            const commandFrom = from + leading.length;
+            const commandTo = commandFrom + command.length;
+            add(commandFrom, commandTo, Decoration.mark({ class: 'cm-slash-command' }));
+            if (args) {
+                add(commandTo, commandTo + args.length, Decoration.mark({ class: 'cm-slash-command-args' }));
+            }
+        }
+    });
+    return ViewPlugin.fromClass(class {
+        decorations;
+        /**
+         * Builds the initial slash-command decoration set for the editor view.
+         *
+         * @param view - CodeMirror editor view instance.
+         */
+        constructor(view) {
+            this.decorations = slashMatcher.createDeco(view);
+        }
+        /**
+         * Recomputes slash-command decorations when document content changes.
+         *
+         * @param update - View update describing what changed.
+         */
+        update(update) {
+            this.decorations = slashMatcher.updateDeco(update, this.decorations);
+        }
+    }, { decorations: (v) => v.decorations });
+}

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

@@ -0,0 +1,15 @@
+import type { Extension } from '@codemirror/state';
+import { type RenderHighlightedPlaceholderOptions } from './renderHighlightedPlaceholder.js';
+/**
+ * Options for building a muted syntax-highlighted placeholder layer.
+ */
+export type SyntaxHighlightedPlaceholderOptions = RenderHighlightedPlaceholderOptions;
+/**
+ * Returns CodeMirror extensions that show muted syntax-highlighted placeholder content
+ * when the editor document is empty and unfocused.
+ *
+ * @param text - Placeholder source shown until the user focuses or types.
+ * @param options - Highlighting and theme options shared with the parent editor.
+ */
+export declare function createSyntaxHighlightedPlaceholder(text: string, options: SyntaxHighlightedPlaceholderOptions): Extension[];
+//# sourceMappingURL=syntaxHighlightedPlaceholder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"syntaxHighlightedPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/syntaxHighlightedPlaceholder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AASnD,OAAO,EAEL,KAAK,mCAAmC,EACzC,MAAM,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,mCAAmC,GAAG,mCAAmC,CAAC;AA2DtF;;;;;;GAMG;AACH,wBAAgB,kCAAkC,CAChD,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,mCAAmC,GAC3C,SAAS,EAAE,CA+Cb"}

package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.js

@@ -0,0 +1,99 @@
+import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
+import { renderHighlightedPlaceholderDom } from './renderHighlightedPlaceholder.js';
+/**
+ * Flat, pre-highlighted placeholder markup inserted when the parent editor is empty.
+ */
+class SyntaxHighlightedPlaceholderWidget extends WidgetType {
+    text;
+    options;
+    /**
+     * @param text - Placeholder document shown when the parent editor is empty.
+     * @param options - Highlighting and theme options shared with the parent editor.
+     */
+    constructor(text, options) {
+        super();
+        this.text = text;
+        this.options = options;
+    }
+    /**
+     * Returns statically rendered placeholder DOM without nested editor chrome.
+     */
+    toDOM() {
+        return renderHighlightedPlaceholderDom(this.text, this.options);
+    }
+    /**
+     * Prevents the placeholder layer from intercepting pointer events meant for the parent editor.
+     */
+    ignoreEvent() {
+        return true;
+    }
+}
+/**
+ * Returns whether the syntax-highlighted placeholder should be visible.
+ *
+ * @param view - Parent CodeMirror editor view.
+ */
+function shouldShowSyntaxPlaceholder(view) {
+    return view.state.doc.length === 0 && !view.hasFocus;
+}
+/**
+ * Builds widget decorations for the muted placeholder layer.
+ *
+ * @param text - Placeholder source shown until focus or input.
+ * @param options - Highlighting and theme options.
+ */
+function buildSyntaxPlaceholderDecorations(text, options) {
+    return Decoration.set([
+        Decoration.widget({
+            widget: new SyntaxHighlightedPlaceholderWidget(text, options),
+            side: 1
+        }).range(0)
+    ]);
+}
+/**
+ * Returns CodeMirror extensions that show muted syntax-highlighted placeholder content
+ * when the editor document is empty and unfocused.
+ *
+ * @param text - Placeholder source shown until the user focuses or types.
+ * @param options - Highlighting and theme options shared with the parent editor.
+ */
+export function createSyntaxHighlightedPlaceholder(text, options) {
+    const plugin = ViewPlugin.fromClass(class {
+        placeholder;
+        /**
+         * Initializes placeholder decorations for an empty, unfocused document.
+         *
+         * @param view - Parent CodeMirror editor view.
+         */
+        constructor(view) {
+            this.placeholder = shouldShowSyntaxPlaceholder(view)
+                ? buildSyntaxPlaceholderDecorations(text, options)
+                : Decoration.none;
+        }
+        /**
+         * Shows or hides the placeholder when the document, focus, or content changes.
+         *
+         * @param update - Parent view update.
+         */
+        update(update) {
+            if (!update.docChanged && !update.focusChanged) {
+                return;
+            }
+            this.placeholder = shouldShowSyntaxPlaceholder(update.view)
+                ? buildSyntaxPlaceholderDecorations(text, options)
+                : Decoration.none;
+        }
+        get decorations() {
+            return this.placeholder;
+        }
+    }, { decorations: (v) => v.decorations });
+    return [
+        plugin,
+        EditorView.contentAttributes.of({ 'aria-placeholder': text }),
+        EditorView.theme({
+            '.cm-content:has(.cm-syntax-placeholder) .cm-activeLine': {
+                backgroundColor: 'transparent !important'
+            }
+        })
+    ];
+}

package/dist/components/EmptyState/index.js

@@ -19,7 +19,7 @@ function variantClasses(variant) {
  * @param className - Extra classes appended after the preset.
  */
 export function EmptyState({ children, variant = 'inline', className }) {
-    const base = `hc-empty-state ${variantClasses(variant)}`;
+    const base = `hc-empty-state text-[16px] ${variantClasses(variant)}`;
     const classes = className ? `${base} ${className}` : base;
     return _jsx("div", { className: classes, children: children });
 }

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-[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';
+        ? 'cursor-pointer rounded-md border-none bg-surface px-2 py-0.5 text-[14px] text-text shadow-sm app-no-drag'
+        : 'cursor-pointer rounded-md 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/Resizable/useResizable.d.ts

@@ -25,6 +25,10 @@ export interface UseResizableOptions {
      * When set, size is restored from and persisted to localStorage.
      */
     storageKey?: string;
+    /**
+     * Called when a resize is committed (mouseup after drag or keyboard nudge).
+     */
+    onPersist?: (size: number) => void;
 }
 export interface UseResizableResult {
     size: number;
@@ -34,9 +38,6 @@ export interface UseResizableResult {
     onResizeStart: (event: ReactMouseEvent) => void;
     onKeyboardResize: (event: ReactKeyboardEvent) => void;
 }
-/**
- * Tracks resizable panel size with pointer drag and optional persistence.
- */
-export declare function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey }: UseResizableOptions): UseResizableResult;
+export declare function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey, onPersist }: UseResizableOptions): UseResizableResult;
 export {};
 //# sourceMappingURL=useResizable.d.ts.map

package/dist/components/Resizable/useResizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/useResizable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAEhG,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAkDtB,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IAEX;;OAEG;IACH,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAElB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,MAAM,CAAC;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACvD;AAoCD;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACX,EAAE,mBAAmB,GAAG,kBAAkB,CAoJ1C"}
+{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/useResizable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAEhG,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAkDtB,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,IAAI,CAAC;IAEX;;OAEG;IACH,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAElB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,MAAM,CAAC;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACvD;AAyDD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACV,EAAE,mBAAmB,GAAG,kBAAkB,CAgJ1C"}

package/dist/components/Resizable/useResizable.js

@@ -80,7 +80,20 @@ function clampSize(size, minSize, getMaxSize) {
 /**
  * Tracks resizable panel size with pointer drag and optional persistence.
  */
-export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey }) {
+/**
+ * Persists a committed resize size via localStorage and/or a caller callback.
+ *
+ * @param storageKey - Optional localStorage key.
+ * @param onPersist - Optional commit callback.
+ * @param size - Committed size in pixels.
+ */
+function commitSize(storageKey, onPersist, size) {
+    if (storageKey) {
+        persistSize(storageKey, size);
+    }
+    onPersist?.(size);
+}
+export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey, onPersist }) {
     const [size, setSizeState] = useState(() => {
         const initial = storageKey ? loadStoredSize(storageKey, defaultSize) : defaultSize;
         return clampSize(initial, minSize, getMaxSize);
@@ -153,10 +166,8 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
         event.preventDefault();
         const nextSize = clampSize(sizeRef.current + keyDelta * direction, minSize, getMaxSize);
         setSizeState(nextSize);
-        if (storageKey) {
-            persistSize(storageKey, nextSize);
-        }
-    }, [axis, direction, getMaxSize, minSize, storageKey]);
+        commitSize(storageKey, onPersist, nextSize);
+    }, [axis, direction, getMaxSize, minSize, onPersist, storageKey]);
     /**
      * Applies pointer delta to panel size during drag and persists on mouse up.
      */
@@ -175,16 +186,14 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
             setSizeState(nextSize);
         };
         /**
-         * Ends the resize drag and writes the final size to localStorage when configured.
+         * Ends the resize drag and commits the final size when configured.
          */
         const handleMouseUp = () => {
             if (!resizingRef.current)
                 return;
             resizingRef.current = false;
             clearResizingState();
-            if (storageKey) {
-                persistSize(storageKey, sizeRef.current);
-            }
+            commitSize(storageKey, onPersist, sizeRef.current);
         };
         window.addEventListener('mousemove', handleMouseMove);
         window.addEventListener('mouseup', handleMouseUp);
@@ -198,7 +207,7 @@ export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize
             window.removeEventListener('mousemove', handleMouseMove);
             window.removeEventListener('mouseup', handleMouseUp);
         };
-    }, [axis, direction, getMaxSize, minSize, storageKey]);
+    }, [axis, direction, getMaxSize, minSize, onPersist, storageKey]);
     /**
      * Clears the document resize marker when the hook unmounts mid-drag.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAMhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAkD1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC;IAEvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,EAAE,CAAC;IAE9B;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAe,EACf,gBAAgB,EAAE,oBAAoB,EACtC,uBAAuB,EACvB,wBAAwB,EACxB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA0PxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAMhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAkD1C,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC;IAEvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,EAAE,CAAC;IAE9B;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,QAAe,EACf,gBAAgB,EAAE,oBAAoB,EACtC,uBAAuB,EACvB,wBAAwB,EACxB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAoQxB"}

package/dist/components/SegmentedTabs/index.js

@@ -224,6 +224,6 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
                                 id: getTabId(tab.value),
                                 'aria-selected': selected,
                                 ...(context ? { 'aria-controls': getPanelId(tab.value) } : {})
-                            }), children: _jsxs("span", { className: "hc-segmented-tabs-tab-label inline-flex items-center gap-1.5", children: [tab.label, tab.indicator && (_jsx("span", { className: "hc-segmented-tabs-tab-indicator h-1.5 w-1.5 rounded-full bg-accent", "aria-hidden": true }))] }) }, tab.value));
+                            }), children: _jsxs("span", { className: "hc-segmented-tabs-tab-label inline-flex items-center gap-1.5", children: [_jsx("span", { className: "inline-flex shrink-0 items-center px-1.5", children: _jsx("span", { className: `hc-segmented-tabs-tab-indicator h-1.5 w-1.5 shrink-0 rounded-full ${tab.indicator ? 'bg-accent' : 'bg-transparent'}`, "aria-hidden": true }) }), tab.label, _jsx("span", { className: "hc-segmented-tabs-tab-indicator-spacer inline-flex shrink-0 items-center px-1.5", "aria-hidden": true, children: _jsx("span", { className: "h-1.5 w-1.5 shrink-0" }) })] }) }, tab.value));
                 }) }), editable && (_jsx(SegmentedTabsVisibilityMenu, { tabs: editableTabs, visibleTabValues: visibleTabValues, onToggle: handleVisibilityToggle }))] }));
 }

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

@@ -17,7 +17,9 @@ export interface TabItem<T extends string> {
      */
     disabled?: boolean;
     /**
-     * When true, renders a small dot indicating the tab has values set.
+     * When true, shows an accent dot in the reserved indicator slot to the left
+     * of the label. The slot stays visible (transparent) when false so tab width
+     * stays stable across the group.
      */
     indicator?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/Table/index.js

@@ -48,7 +48,7 @@ export function Table({ children, variant = 'bordered', className }) {
         const tableClasses = className ? `${tableBase} ${className}` : tableBase;
         return createElement(TableVariantContext.Provider, { value: variant }, createElement('table', { className: tableClasses }, children));
     }
-    const wrapperBase = 'hc-table overflow-hidden rounded-md border border-separator';
+    const wrapperBase = 'hc-table overflow-hidden rounded-lg border border-separator';
     const wrapperClasses = className ? `${wrapperBase} ${className}` : wrapperBase;
     return createElement(TableVariantContext.Provider, { value: variant }, createElement('div', { className: wrapperClasses }, createElement('table', { className: 'hc-table-element w-full border-collapse' }, children)));
 }

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

@@ -0,0 +1,75 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { AriaAttributes, JSX, ReactNode, RefObject } from 'react';
+/**
+ * Declarative action rendered as an icon button in a sidebar toolbar.
+ */
+export interface ToolbarAction {
+    /**
+     * Stable React key for this action.
+     */
+    id: string;
+    /**
+     * Font Awesome icon shown inside the action button.
+     */
+    icon: IconDefinition;
+    /**
+     * Accessible name for the control.
+     */
+    label: string;
+    /**
+     * Native tooltip text; defaults to `label`.
+     */
+    title?: string;
+    /**
+     * Called when the user activates the action button.
+     */
+    onClick: () => void;
+    /**
+     * When true, the action button is inactive.
+     */
+    disabled?: boolean;
+    /**
+     * Exposes toggle state for popup actions such as history menus.
+     */
+    ariaExpanded?: boolean;
+    /**
+     * Exposes pressed state for toggle actions such as visibility switches.
+     */
+    ariaPressed?: boolean;
+    /**
+     * Indicates the action opens a popup, for example `"menu"`.
+     */
+    ariaHaspopup?: AriaAttributes['aria-haspopup'];
+    /**
+     * Optional popover content anchored below this action button.
+     */
+    popover?: ReactNode;
+    /**
+     * Ref attached to the action button for portaled popover positioning.
+     */
+    buttonRef?: RefObject<HTMLButtonElement | null>;
+}
+interface Props {
+    /**
+     * Icon actions rendered in the toolbar.
+     */
+    actions: ToolbarAction[];
+    /**
+     * Accessible name for the toolbar landmark.
+     */
+    ariaLabel?: string;
+    /**
+     * Extra classes merged onto the outer toolbar wrapper.
+     */
+    className?: string;
+}
+/**
+ * Top-of-sidebar toolbar with left-aligned icon actions.
+ *
+ * @param actions - Declarative icon actions rendered on the left.
+ * @param ariaLabel - Accessible name for the toolbar landmark.
+ * @param className - Extra classes merged onto the outer wrapper.
+ */
+export declare function Toolbar({ actions, ariaLabel, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvE;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAE/C;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAqB,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyCzF"}

package/dist/components/Toolbar/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { FaIcon } from '../FaIcon/index.js';
+/**
+ * Tailwind classes for inactive toolbar icon action buttons.
+ */
+const TOOLBAR_ACTION_BUTTON_INACTIVE = 'hc-toolbar-action inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-[14px] text-muted hover:bg-selection hover:text-text focus-visible:bg-selection focus-visible:text-text disabled:cursor-not-allowed disabled:opacity-50 app-no-drag';
+/**
+ * Tailwind classes for pressed toolbar toggles, matching footer layout icon buttons.
+ */
+const TOOLBAR_ACTION_BUTTON_ACTIVE = 'hc-toolbar-action inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-surface text-text shadow-sm focus-visible:bg-surface focus-visible:text-text disabled:cursor-not-allowed disabled:opacity-50 app-no-drag';
+/**
+ * Resolves toolbar button classes for a declarative action.
+ *
+ * @param action - Toolbar action metadata.
+ */
+function toolbarActionButton(action) {
+    return action.ariaPressed === true
+        ? TOOLBAR_ACTION_BUTTON_ACTIVE
+        : TOOLBAR_ACTION_BUTTON_INACTIVE;
+}
+/**
+ * Top-of-sidebar toolbar with left-aligned icon actions.
+ *
+ * @param actions - Declarative icon actions rendered on the left.
+ * @param ariaLabel - Accessible name for the toolbar landmark.
+ * @param className - Extra classes merged onto the outer wrapper.
+ */
+export function Toolbar({ actions, ariaLabel = 'Toolbar', className }) {
+    const wrapperClassName = className
+        ? `hc-toolbar flex shrink-0 items-center border-b border-separator bg-sidebar-toolbar px-2 py-2 app-no-drag ${className}`
+        : 'hc-toolbar flex shrink-0 items-center border-b border-separator bg-sidebar-toolbar px-2 py-2 app-no-drag';
+    return (_jsx("div", { role: "toolbar", "aria-label": ariaLabel, className: wrapperClassName, children: _jsx("div", { className: "hc-toolbar-actions flex items-center gap-1", children: actions.map((action) => {
+                const title = action.title ?? action.label;
+                return (_jsxs("div", { className: "hc-toolbar-action-wrap relative", children: [_jsx("button", { type: "button", ref: action.buttonRef, className: toolbarActionButton(action), title: title, "aria-label": action.label, "aria-expanded": action.ariaExpanded, "aria-pressed": action.ariaPressed, "aria-haspopup": action.ariaHaspopup, disabled: action.disabled, onClick: action.onClick, children: _jsx(FaIcon, { icon: action.icon, className: action.ariaPressed === true
+                                    ? 'hc-toolbar-action-icon h-4 w-4'
+                                    : 'hc-toolbar-action-icon h-3.5 w-3.5' }) }), action.popover] }, action.id));
+            }) }) }));
+}

package/dist/components/VariableInput/index.js

@@ -176,7 +176,7 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
                 }, onFocus: () => {
                     openAutocomplete();
                     updateTooltipFromCaret();
-                }, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: scheduleHide }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent && (_jsxs("div", { id: tooltipId, role: "tooltip", className: "hc-variable-input-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-md border border-separator bg-surface px-4 py-3 text-[14px] text-text shadow-md after:pointer-events-auto after:absolute after:-bottom-2 after:left-0 after:right-0 after:h-2 after:content-['']", style: { top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx("span", { className: tooltipContent.muted
+                }, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: scheduleHide }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent && (_jsxs("div", { id: tooltipId, role: "tooltip", className: "hc-variable-input-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-lg border border-separator bg-surface px-4 py-3 text-[14px] text-text shadow-md after:pointer-events-auto after:absolute after:-bottom-2 after:left-0 after:right-0 after:h-2 after:content-['']", style: { top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx("span", { className: tooltipContent.muted
                             ? 'hc-variable-input-tooltip-text text-muted'
                             : 'hc-variable-input-tooltip-text', children: tooltipContent.text }), onEditVariable && (_jsx("button", { type: "button", className: "hc-variable-input-tooltip-edit -mx-1 self-start rounded px-1 py-0.5 text-[14px] text-accent hover:underline app-no-drag", "aria-label": `Edit value for ${tooltip.key}`, onClick: () => {
                             onEditVariable();

package/dist/components/classes.js

@@ -10,6 +10,6 @@ const segmentFocusVisible = 'focus-visible:outline focus-visible:outline-2 focus
  */
 export function segment(active) {
     return active
-        ? `cursor-pointer rounded-[2.5px] border-none bg-field px-3 py-1 text-[15px] text-text shadow-sm app-no-drag ${segmentFocusVisible}`
-        : `cursor-pointer rounded-[2.5px] border-none bg-transparent px-3 py-1 text-[15px] text-muted hover:text-text app-no-drag ${segmentFocusVisible}`;
+        ? `cursor-pointer rounded-md border-none bg-selection px-3 py-1 text-[15px] text-text app-no-drag ${segmentFocusVisible}`
+        : `cursor-pointer rounded-md border-none bg-transparent px-3 py-1 text-[15px] text-muted hover:text-text app-no-drag ${segmentFocusVisible}`;
 }

package/dist/components/forms/classes.d.ts

@@ -8,15 +8,15 @@ export type FieldVariant = 'control' | 'surface' | 'plain';
 /**
  * Border and subtle tint shell for composite inputs (e.g. VariableInput wrappers).
  */
-export declare const fieldFrame = "overflow-hidden rounded-md border border-separator bg-field";
+export declare const fieldFrame = "overflow-hidden rounded-lg border border-separator bg-field";
 /** Inset control style for standard settings and editor fields. */
-export declare const field = "rounded-md border border-separator bg-field px-2.5 py-1.5 text-[16px] text-text app-no-drag";
+export declare const field = "rounded-lg border border-separator bg-field px-2.5 py-1.5 text-[16px] text-text app-no-drag";
 /** Surface style for modal and Team Hub form fields. */
-export declare const surfaceField = "w-full rounded-md border border-separator bg-field px-3 py-2.5 text-[15px] text-text";
+export declare const surfaceField = "w-full rounded-lg border border-separator bg-field px-3 py-2.5 text-[15px] text-text";
 /** Transparent overlay checkbox input sized to {@link checkboxBox}. */
 export declare const checkboxInput = "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed";
 /** Custom checkbox box styled via `peer-checked` / `peer-focus-visible` on {@link checkboxInput}. */
-export declare const checkboxBox = "pointer-events-none flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded border border-separator bg-field text-white peer-checked:border-accent peer-checked:bg-accent peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-accent peer-disabled:cursor-not-allowed peer-disabled:opacity-50 [&>svg]:opacity-0 peer-checked:[&>svg]:opacity-100";
+export declare const checkboxBox = "pointer-events-none flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-sm border border-separator bg-field text-white peer-checked:border-accent peer-checked:bg-accent peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-accent peer-disabled:cursor-not-allowed peer-disabled:opacity-50 [&>svg]:opacity-0 peer-checked:[&>svg]:opacity-100";
 /** Transparent overlay radio input sized to {@link radioCircle}. */
 export declare const radioInput = "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed";
 /** Custom radio circle styled via `peer-checked` / `peer-focus-visible` on {@link radioInput}. */