@sero-ai/ui 0.3.2 → 0.4.0

package/.turbo/turbo-typecheck.log

@@ -1,4 +1,4 @@
 
-> @sero-ai/ui@0.2.0 typecheck /Users/danielcarter/Documents/Dev/projects/sero/sero/packages/ui
+> @sero-ai/ui@0.4.0 typecheck /Users/danielcarter/Documents/Dev/projects/sero/sero/packages/ui
 > tsc --noEmit
 

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# @sero-ai/ui changelog
+
+## 0.4.0
+
+### Added
+
+- **Dashboard components** — a compact presentation set for dashboard widgets and
+  full plugin views, built from the existing primitives and design tokens.
+  Exported from the package root (`@sero-ai/ui`):
+  - Layout: `WidgetContent`, `Stack`, `Inline`, `Grid`, `Section`, `Divider`
+  - Typography: `Text`, `Heading`, `Icon`
+  - Data display: `Metric`, `MetricCard`, `MetricGroup`, `Status`, `KeyValue`,
+    `KeyValueList`, `ItemList`, `ItemListItem`, `ActivityList`, `ActivityListItem`,
+    `ProgressRing`, `StaleIndicator`
+  - Runtime states: `DataBoundary`, `EmptyState`, `MetricSkeleton`,
+    `ListSkeleton`, `ActivitySkeleton`
+  - Actions: `IconButton`
+  - Shared `Tone` vocabulary and `Gap` spacing scale
+- **Dashboard component catalogue** metadata, exported from a new stable subpath
+  `@sero-ai/ui/dashboard-catalog` for discovery tooling and agent workflows.
+- `Badge` gained semantic status tones: `success`, `warning`, `info`.
+- **Glass styling for dashboard widgets.** A `.glass` token scope (canonical
+  `--glass-*` tokens, light + dark) makes the dashboard components render as
+  translucent surfaces on the frosted board. `WidgetContent` applies the scope
+  automatically (`glass` prop, default `true`; `glass={false}` for solid full
+  views); component surfaces route through new `--surface-*` tokens. No inner
+  `backdrop-filter` — the host tile provides the single blur; form controls and
+  portalled menus stay solid.
+- **Shared glass-board fixture** — `@sero-ai/ui/styles/glass-board.css`
+  (`.glass-canvas` + `.glass-tile`), consumed by the desktop dashboard and the
+  styleguide so previews match the real board.
+- **Reference widgets** on a new subpath `@sero-ai/ui/reference` — `StarterExample`,
+  `SchedulerExample`, `ResourceExample`, `ActivityExample`: pure-static, glass-styled
+  worked examples, importable to preview or copy-paste. (Replaces the removed
+  `sero-showcase-plugin`.)
+
+See `docs/features/dashboard-ui/dashboard-widgets-plan.md` and
+`glass-restyle-spec.md` for the design and authoring guidance.

package/dist/components/context-editor/CapabilitySection.cjs

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _switch = require('../ui/switch');
+var _parts = require('./parts');
+function CapabilitySection({
+  icon,
+  title,
+  tint,
+  includeAllLabel,
+  emptyLabel,
+  items,
+  allDisabled,
+  enabledCount,
+  isEnabled,
+  onToggle,
+  onToggleAll
+}) {
+  const badgeVariant = allDisabled ? "disabled" : enabledCount < items.length ? "partial" : "default";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _parts.ContextSection,
+    {
+      icon,
+      title,
+      tint,
+      count: items.length,
+      badge: items.length > 0 && enabledCount < items.length ? `${enabledCount}/${items.length} included` : void 0,
+      badgeVariant,
+      defaultOpen: false,
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-1", children: [
+        items.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-1 flex items-center justify-between rounded-md border-b border-border/20 px-2 pb-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: includeAllLabel }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _switch.Switch,
+            {
+              size: "sm",
+              checked: !allDisabled,
+              onCheckedChange: (checked) => onToggleAll(!checked)
+            }
+          )
+        ] }),
+        items.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _parts.ToggleRow,
+          {
+            name: item.name,
+            description: item.description,
+            enabled: isEnabled(item.name),
+            onToggle: () => onToggle(item.name)
+          },
+          item.name
+        )),
+        items.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[11px] italic text-[var(--text-muted)]", children: emptyLabel })
+      ] })
+    }
+  );
+}
+
+
+exports.CapabilitySection = CapabilitySection;

package/dist/components/context-editor/CapabilitySection.d.cts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { ContextToolInfo, ContextSkillInfo } from '@sero-ai/common';
+
+interface CapabilitySectionProps<TItem extends ContextToolInfo | ContextSkillInfo> {
+    icon: LucideIcon;
+    title: string;
+    tint: 'amber' | 'violet';
+    includeAllLabel: string;
+    emptyLabel: string;
+    items: TItem[];
+    allDisabled: boolean;
+    enabledCount: number;
+    isEnabled: (name: string) => boolean;
+    onToggle: (name: string) => void;
+    onToggleAll: (disabled: boolean) => void;
+}
+declare function CapabilitySection<TItem extends ContextToolInfo | ContextSkillInfo>({ icon, title, tint, includeAllLabel, emptyLabel, items, allDisabled, enabledCount, isEnabled, onToggle, onToggleAll, }: CapabilitySectionProps<TItem>): react_jsx_runtime.JSX.Element;
+
+export { CapabilitySection };

package/dist/components/context-editor/CapabilitySection.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { ContextToolInfo, ContextSkillInfo } from '@sero-ai/common';
+
+interface CapabilitySectionProps<TItem extends ContextToolInfo | ContextSkillInfo> {
+    icon: LucideIcon;
+    title: string;
+    tint: 'amber' | 'violet';
+    includeAllLabel: string;
+    emptyLabel: string;
+    items: TItem[];
+    allDisabled: boolean;
+    enabledCount: number;
+    isEnabled: (name: string) => boolean;
+    onToggle: (name: string) => void;
+    onToggleAll: (disabled: boolean) => void;
+}
+declare function CapabilitySection<TItem extends ContextToolInfo | ContextSkillInfo>({ icon, title, tint, includeAllLabel, emptyLabel, items, allDisabled, enabledCount, isEnabled, onToggle, onToggleAll, }: CapabilitySectionProps<TItem>): react_jsx_runtime.JSX.Element;
+
+export { CapabilitySection };

package/dist/components/context-editor/CapabilitySection.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "../ui/switch";
+import { ContextSection, ToggleRow } from "./parts";
+function CapabilitySection({
+  icon,
+  title,
+  tint,
+  includeAllLabel,
+  emptyLabel,
+  items,
+  allDisabled,
+  enabledCount,
+  isEnabled,
+  onToggle,
+  onToggleAll
+}) {
+  const badgeVariant = allDisabled ? "disabled" : enabledCount < items.length ? "partial" : "default";
+  return /* @__PURE__ */ jsx(
+    ContextSection,
+    {
+      icon,
+      title,
+      tint,
+      count: items.length,
+      badge: items.length > 0 && enabledCount < items.length ? `${enabledCount}/${items.length} included` : void 0,
+      badgeVariant,
+      defaultOpen: false,
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        items.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between rounded-md border-b border-border/20 px-2 pb-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: includeAllLabel }),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              size: "sm",
+              checked: !allDisabled,
+              onCheckedChange: (checked) => onToggleAll(!checked)
+            }
+          )
+        ] }),
+        items.map((item) => /* @__PURE__ */ jsx(
+          ToggleRow,
+          {
+            name: item.name,
+            description: item.description,
+            enabled: isEnabled(item.name),
+            onToggle: () => onToggle(item.name)
+          },
+          item.name
+        )),
+        items.length === 0 && /* @__PURE__ */ jsx("span", { className: "text-[11px] italic text-[var(--text-muted)]", children: emptyLabel })
+      ] })
+    }
+  );
+}
+export {
+  CapabilitySection
+};

package/dist/components/context-editor/ContextEditor.cjs

@@ -0,0 +1,108 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+var _dialog = require('../ui/dialog');
+var _scrollarea = require('../ui/scroll-area');
+var _PresetBar = require('./PresetBar');
+var _SkillsSection = require('./SkillsSection');
+var _SystemPromptSection = require('./SystemPromptSection');
+var _ToolsSection = require('./ToolsSection');
+var _usecontexteditormodel = require('./use-context-editor-model');
+function ContextEditor({
+  open,
+  onOpenChange,
+  available,
+  initialOverrides,
+  presets,
+  onApply,
+  onSavePreset,
+  onDeletePreset,
+  applyError,
+  title = "Context Editor",
+  description = "Configure what is included in the LLM context.",
+  systemPromptCopy,
+  applyLabel = "Apply",
+  hideTools = false
+}) {
+  const model = _usecontexteditormodel.useContextEditorModel.call(void 0, { open, available, initialOverrides, presets, onSavePreset, onDeletePreset });
+  const [applying, setApplying] = _react.useState.call(void 0, false);
+  const handleApply = async () => {
+    setApplying(true);
+    try {
+      const ok = await onApply(model.buildOverrides());
+      if (ok !== false) onOpenChange(false);
+    } finally {
+      setApplying(false);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dialog.Dialog, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _dialog.DialogContent,
+    {
+      className: "max-h-[85vh] overflow-hidden bg-[var(--bg-surface)] sm:max-w-[58rem]",
+      showCloseButton: true,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dialog.DialogHeader, { children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dialog.DialogTitle, { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Settings2, { className: "size-4 text-[var(--text-muted)]" }),
+            title
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dialog.DialogDescription, { className: "text-xs", children: description })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PresetBar.PresetBar, { ...model.preset }),
+        !available ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-center gap-2 py-8", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Loader2, { className: "size-4 animate-spin text-[var(--text-muted)]" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs text-[var(--text-muted)]", children: "Loading context\u2026" })
+        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _scrollarea.ScrollArea, { className: "max-h-[65vh] overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 space-y-2 pr-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _SystemPromptSection.SystemPromptSection,
+            {
+              displayedPrompt: model.displayedPrompt,
+              systemPrompt: model.systemPrompt,
+              onSystemPromptChange: model.setSystemPrompt,
+              copy: systemPromptCopy
+            }
+          ),
+          !hideTools && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ToolsSection.ToolsSection, { ...model.tools }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SkillsSection.SkillsSection, { ...model.skills })
+        ] }) }),
+        applyError && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-muted px-3 py-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.AlertCircle, { className: "mt-0.5 size-3.5 shrink-0 text-status-error" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[11px] text-status-error", children: applyError })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dialog.DialogFooter, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              onClick: () => onOpenChange(false),
+              className: "rounded-md border border-border/50 px-3 py-1.5 text-xs text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-elevated)]",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                void handleApply();
+              },
+              disabled: !available || applying,
+              className: "rounded-md bg-[var(--accent-primary)] px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-50",
+              children: applyLabel
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+
+exports.ContextEditor = ContextEditor;

package/dist/components/context-editor/ContextEditor.d.cts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AvailableContext, ContextOverrides, ContextPreset } from '@sero-ai/common';
+import { SystemPromptCopy } from './SystemPromptSection.cjs';
+import { ContextPresetBody } from './use-context-editor-model.cjs';
+
+interface ContextEditorProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    available: AvailableContext | null;
+    initialOverrides: ContextOverrides | null;
+    presets: ContextPreset[];
+    /** Persist the chosen overrides. Return false to keep the dialog open (error). */
+    onApply: (overrides: ContextOverrides | null) => Promise<boolean> | boolean;
+    onSavePreset: (name: string, preset: ContextPresetBody) => void;
+    onDeletePreset: (id: string) => void;
+    applyError?: string | null;
+    title?: string;
+    description?: string;
+    systemPromptCopy?: SystemPromptCopy;
+    applyLabel?: string;
+    /** Hide the Tools section (e.g. the Orchestrator picks tools per step, not per loop). */
+    hideTools?: boolean;
+}
+declare function ContextEditor({ open, onOpenChange, available, initialOverrides, presets, onApply, onSavePreset, onDeletePreset, applyError, title, description, systemPromptCopy, applyLabel, hideTools, }: ContextEditorProps): react_jsx_runtime.JSX.Element;
+
+export { ContextEditor, type ContextEditorProps };

package/dist/components/context-editor/ContextEditor.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AvailableContext, ContextOverrides, ContextPreset } from '@sero-ai/common';
+import { SystemPromptCopy } from './SystemPromptSection.js';
+import { ContextPresetBody } from './use-context-editor-model.js';
+
+interface ContextEditorProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    available: AvailableContext | null;
+    initialOverrides: ContextOverrides | null;
+    presets: ContextPreset[];
+    /** Persist the chosen overrides. Return false to keep the dialog open (error). */
+    onApply: (overrides: ContextOverrides | null) => Promise<boolean> | boolean;
+    onSavePreset: (name: string, preset: ContextPresetBody) => void;
+    onDeletePreset: (id: string) => void;
+    applyError?: string | null;
+    title?: string;
+    description?: string;
+    systemPromptCopy?: SystemPromptCopy;
+    applyLabel?: string;
+    /** Hide the Tools section (e.g. the Orchestrator picks tools per step, not per loop). */
+    hideTools?: boolean;
+}
+declare function ContextEditor({ open, onOpenChange, available, initialOverrides, presets, onApply, onSavePreset, onDeletePreset, applyError, title, description, systemPromptCopy, applyLabel, hideTools, }: ContextEditorProps): react_jsx_runtime.JSX.Element;
+
+export { ContextEditor, type ContextEditorProps };

package/dist/components/context-editor/ContextEditor.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertCircle, Loader2, Settings2 } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../ui/dialog";
+import { ScrollArea } from "../ui/scroll-area";
+import { PresetBar } from "./PresetBar";
+import { SkillsSection } from "./SkillsSection";
+import { SystemPromptSection } from "./SystemPromptSection";
+import { ToolsSection } from "./ToolsSection";
+import { useContextEditorModel } from "./use-context-editor-model";
+function ContextEditor({
+  open,
+  onOpenChange,
+  available,
+  initialOverrides,
+  presets,
+  onApply,
+  onSavePreset,
+  onDeletePreset,
+  applyError,
+  title = "Context Editor",
+  description = "Configure what is included in the LLM context.",
+  systemPromptCopy,
+  applyLabel = "Apply",
+  hideTools = false
+}) {
+  const model = useContextEditorModel({ open, available, initialOverrides, presets, onSavePreset, onDeletePreset });
+  const [applying, setApplying] = useState(false);
+  const handleApply = async () => {
+    setApplying(true);
+    try {
+      const ok = await onApply(model.buildOverrides());
+      if (ok !== false) onOpenChange(false);
+    } finally {
+      setApplying(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "max-h-[85vh] overflow-hidden bg-[var(--bg-surface)] sm:max-w-[58rem]",
+      showCloseButton: true,
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx(Settings2, { className: "size-4 text-[var(--text-muted)]" }),
+            title
+          ] }),
+          /* @__PURE__ */ jsx(DialogDescription, { className: "text-xs", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(PresetBar, { ...model.preset }),
+        !available ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-8", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-muted)]", children: "Loading context\u2026" })
+        ] }) : /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[65vh] overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2 pr-2", children: [
+          /* @__PURE__ */ jsx(
+            SystemPromptSection,
+            {
+              displayedPrompt: model.displayedPrompt,
+              systemPrompt: model.systemPrompt,
+              onSystemPromptChange: model.setSystemPrompt,
+              copy: systemPromptCopy
+            }
+          ),
+          !hideTools && /* @__PURE__ */ jsx(ToolsSection, { ...model.tools }),
+          /* @__PURE__ */ jsx(SkillsSection, { ...model.skills })
+        ] }) }),
+        applyError && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-muted px-3 py-2", children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "mt-0.5 size-3.5 shrink-0 text-status-error" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-status-error", children: applyError })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onOpenChange(false),
+              className: "rounded-md border border-border/50 px-3 py-1.5 text-xs text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-elevated)]",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                void handleApply();
+              },
+              disabled: !available || applying,
+              className: "rounded-md bg-[var(--accent-primary)] px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-50",
+              children: applyLabel
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  ContextEditor
+};

package/dist/components/context-editor/PresetBar.cjs

@@ -0,0 +1,71 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+var _select = require('../ui/select');
+var _parts = require('./parts');
+function PresetBar({
+  allPresets,
+  activePresetId,
+  activeUserPreset,
+  hasOverrides,
+  showSaveInput,
+  onPresetChange,
+  onDelete,
+  onReset,
+  onShowSave,
+  onSave,
+  onCancelSave
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Preset:" }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _select.Select, { value: _nullishCoalesce(activePresetId, () => ( "")), onValueChange: onPresetChange, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _select.SelectTrigger, { size: "sm", className: "h-7 w-40 text-xs", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _select.SelectValue, { placeholder: "Custom" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _select.SelectContent, { children: allPresets.map((preset) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _select.SelectItem, { value: preset.id, children: preset.name }, preset.id)) })
+      ] }),
+      activeUserPreset && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          onClick: () => onDelete(activeUserPreset.id),
+          className: "flex items-center gap-1 rounded-md px-1.5 py-1 text-[var(--text-muted)] transition-colors hover:bg-status-error-muted hover:text-status-error",
+          title: `Delete "${activeUserPreset.name}"`,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Trash2, { className: "size-3" })
+        }
+      ),
+      !showSaveInput && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "button",
+        {
+          type: "button",
+          onClick: onShowSave,
+          className: "flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Save, { className: "size-3" }),
+            "Save as"
+          ]
+        }
+      ),
+      hasOverrides && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "button",
+        {
+          type: "button",
+          onClick: onReset,
+          className: "ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.RotateCcw, { className: "size-3" }),
+            "Reset"
+          ]
+        }
+      )
+    ] }),
+    showSaveInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _parts.SavePresetInput, { onSave, onCancel: onCancelSave })
+  ] });
+}
+
+
+exports.PresetBar = PresetBar;

package/dist/components/context-editor/PresetBar.d.cts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ContextPreset } from '@sero-ai/common';
+
+interface PresetBarProps {
+    allPresets: ContextPreset[];
+    activePresetId: string | null;
+    activeUserPreset: ContextPreset | null;
+    hasOverrides: boolean;
+    showSaveInput: boolean;
+    onPresetChange: (id: string) => void;
+    onDelete: (id: string) => void;
+    onReset: () => void;
+    onShowSave: () => void;
+    onSave: (name: string) => void;
+    onCancelSave: () => void;
+}
+declare function PresetBar({ allPresets, activePresetId, activeUserPreset, hasOverrides, showSaveInput, onPresetChange, onDelete, onReset, onShowSave, onSave, onCancelSave, }: PresetBarProps): react_jsx_runtime.JSX.Element;
+
+export { PresetBar };

package/dist/components/context-editor/PresetBar.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ContextPreset } from '@sero-ai/common';
+
+interface PresetBarProps {
+    allPresets: ContextPreset[];
+    activePresetId: string | null;
+    activeUserPreset: ContextPreset | null;
+    hasOverrides: boolean;
+    showSaveInput: boolean;
+    onPresetChange: (id: string) => void;
+    onDelete: (id: string) => void;
+    onReset: () => void;
+    onShowSave: () => void;
+    onSave: (name: string) => void;
+    onCancelSave: () => void;
+}
+declare function PresetBar({ allPresets, activePresetId, activeUserPreset, hasOverrides, showSaveInput, onPresetChange, onDelete, onReset, onShowSave, onSave, onCancelSave, }: PresetBarProps): react_jsx_runtime.JSX.Element;
+
+export { PresetBar };

package/dist/components/context-editor/PresetBar.js

@@ -0,0 +1,71 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { RotateCcw, Save, Trash2 } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../ui/select";
+import { SavePresetInput } from "./parts";
+function PresetBar({
+  allPresets,
+  activePresetId,
+  activeUserPreset,
+  hasOverrides,
+  showSaveInput,
+  onPresetChange,
+  onDelete,
+  onReset,
+  onShowSave,
+  onSave,
+  onCancelSave
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Preset:" }),
+      /* @__PURE__ */ jsxs(Select, { value: activePresetId ?? "", onValueChange: onPresetChange, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "h-7 w-40 text-xs", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Custom" }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: allPresets.map((preset) => /* @__PURE__ */ jsx(SelectItem, { value: preset.id, children: preset.name }, preset.id)) })
+      ] }),
+      activeUserPreset && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onDelete(activeUserPreset.id),
+          className: "flex items-center gap-1 rounded-md px-1.5 py-1 text-[var(--text-muted)] transition-colors hover:bg-status-error-muted hover:text-status-error",
+          title: `Delete "${activeUserPreset.name}"`,
+          children: /* @__PURE__ */ jsx(Trash2, { className: "size-3" })
+        }
+      ),
+      !showSaveInput && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onShowSave,
+          className: "flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]",
+          children: [
+            /* @__PURE__ */ jsx(Save, { className: "size-3" }),
+            "Save as"
+          ]
+        }
+      ),
+      hasOverrides && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onReset,
+          className: "ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]",
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "size-3" }),
+            "Reset"
+          ]
+        }
+      )
+    ] }),
+    showSaveInput && /* @__PURE__ */ jsx(SavePresetInput, { onSave, onCancel: onCancelSave })
+  ] });
+}
+export {
+  PresetBar
+};