"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { ContextPopover } from "./ContextPopover.js";
import { ConfigureMenu } from "./ConfigureMenu.js";
import { ModelSelector } from "../models/ModelSelector.js";
import { HarnessSelector } from "../models/HarnessSelector.js";
import { InteractionModePicker } from "./InteractionModePicker.js";
import { PaperclipIcon, WorkspaceIcon, ArrowUpIcon, SpinnerIcon, StopIcon, } from "./icons.js";
/**
 * Composer toolbar — Zone 3 of the SessionComposer.
 *
 * Layout follows a two-group pattern inspired by Cursor's compact approach:
 *
 * **Left group (primary state):** Interaction Mode, Model Selector
 * **Right group (secondary actions, icon-only):** Workspace, Attach, Configure, Send
 *
 * Primary state indicators retain text labels (users glance at mode and model
 * frequently). Secondary actions use icon-only buttons with tooltips and
 * aria-labels — they are actions triggered occasionally, not state to monitor.
 *
 * This separation follows Fitts's Law (related actions clustered near Send),
 * Gestalt proximity (left = "what," right = "do"), and Nielsen H8 (minimal
 * visual weight for secondary controls).
 */
export function ComposerToolbar({ disabled, isSubmitting, canSend, onSend, onStop, isStopping = false, showAttach, attachmentCount, onAttachClick, showWorkspace, workspaceCount, workspaceContent, onWorkspaceDirectAction, configureItems, configOpen, onConfigOpenChange, configActivePanel, onConfigActivePanelChange, renderConfigPanel, showHarnessSelector, harness, onHarnessChange, showInteractionModePicker, interactionMode, onInteractionModeChange, showModelSelector, modelId, onModelChange, }) {
    const showHarnessSeparate = showHarnessSelector && !showModelSelector;
    return (_jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [showInteractionModePicker && (_jsx(InteractionModePicker, { value: interactionMode ?? "agent", onValueChange: onInteractionModeChange, disabled: disabled })), showHarnessSeparate && (_jsx(HarnessSelector, { value: harness ?? "native", onValueChange: onHarnessChange, disabled: disabled })), showModelSelector && (_jsx(ModelSelector, { value: modelId, onValueChange: onModelChange, harness: showHarnessSelector ? undefined : harness, initialHarness: showHarnessSelector ? harness : undefined, onHarnessChange: showHarnessSelector ? onHarnessChange : undefined, disabled: disabled }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [showWorkspace && (onWorkspaceDirectAction
                        ? _jsx("button", { type: "button", disabled: disabled, onClick: onWorkspaceDirectAction, title: "Workspace", className: cn("inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "disabled:pointer-events-none disabled:opacity-50"), "aria-label": "Workspace", children: _jsxs("span", { className: "relative", children: [_jsx(WorkspaceIcon, {}), workspaceCount > 0 && (_jsx("span", { className: "absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground", children: workspaceCount }))] }) })
                        : _jsx(ContextPopover, { icon: _jsx(WorkspaceIcon, {}), label: "Workspace", count: workspaceCount, disabled: disabled, children: workspaceContent })), showAttach && (_jsx("button", { type: "button", disabled: disabled, onClick: onAttachClick, title: "Attach files", className: cn("inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "disabled:pointer-events-none disabled:opacity-50"), "aria-label": "Attach files", children: _jsxs("span", { className: "relative", children: [_jsx(PaperclipIcon, {}), attachmentCount > 0 && (_jsx("span", { className: "absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground", children: attachmentCount }))] }) })), _jsx(ConfigureMenu, { open: configOpen, onOpenChange: onConfigOpenChange, activePanel: configActivePanel, onActivePanelChange: onConfigActivePanelChange, items: configureItems, renderPanel: renderConfigPanel, disabled: disabled }), onStop ? (
                    // Circular container (vs. Send's rounded-square) gives the square glyph
                    // a proper home — the canonical stop affordance — and the shape morph
                    // from Send→Stop signals the running state at a glance.
                    _jsx("button", { type: "button", onClick: onStop, className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary-hover", "aria-label": "Stop generating", title: "Stop", children: isStopping ? _jsx(SpinnerIcon, {}) : _jsx(StopIcon, {}) })) : (_jsx("button", { type: "button", disabled: !canSend, onClick: onSend, className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40", "aria-label": "Send message", children: isSubmitting ? _jsx(SpinnerIcon, {}) : _jsx(ArrowUpIcon, {}) }))] })] }));
}
//# sourceMappingURL=ComposerToolbar.js.map