@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/model-selection/available-model-picker.cjs

@@ -0,0 +1,172 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+var _common = require('@sero-ai/common');
+var _popover = require('../ui/popover');
+var _searchinput = require('../ui/search-input');
+var _utils = require('../../lib/utils');
+function AvailableModelPicker({
+  groups,
+  value,
+  onChange,
+  placeholder = "Choose a model",
+  searchPlaceholder = "Search models...",
+  emptyLabel = "No matching models",
+  noModelsLabel = "No models available",
+  allowClear = false,
+  disabled = false,
+  className
+}) {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const [query, setQuery] = _react.useState.call(void 0, "");
+  const inputRef = _react.useRef.call(void 0, null);
+  const selected = _react.useMemo.call(void 0, () => {
+    const parsed = _common.parseModelKey.call(void 0, value);
+    if (!parsed) {
+      return value ? { group: null, model: null, fallbackLabel: value } : { group: null, model: null, fallbackLabel: null };
+    }
+    const group = _nullishCoalesce(_common.findGroup.call(void 0, groups, parsed.provider, parsed.modelId), () => ( null));
+    const model = _nullishCoalesce(_common.findModel.call(void 0, groups, parsed.provider, parsed.modelId), () => ( null));
+    return {
+      group,
+      model,
+      fallbackLabel: model ? null : value
+    };
+  }, [groups, value]);
+  const filteredGroups = _react.useMemo.call(void 0, 
+    () => _common.filterModelGroups.call(void 0, groups, query),
+    [groups, query]
+  );
+  const totalResults = _react.useMemo.call(void 0, 
+    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
+    [filteredGroups]
+  );
+  const handleOpenChange = _react.useCallback.call(void 0, (nextOpen) => {
+    setOpen(nextOpen);
+    if (!nextOpen) return;
+    setQuery("");
+    requestAnimationFrame(() => _optionalChain([inputRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.focus, 'call', _3 => _3()]));
+  }, []);
+  const handleSelect = _react.useCallback.call(void 0, (provider, modelId) => {
+    onChange(_common.modelKey.call(void 0, provider, modelId));
+    setOpen(false);
+    setQuery("");
+  }, [onChange]);
+  const handleClear = _react.useCallback.call(void 0, (event) => {
+    event.stopPropagation();
+    onChange("");
+    setOpen(false);
+    setQuery("");
+  }, [onChange]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _popover.Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _popover.PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        className: _utils.cn.call(void 0, 
+          "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors",
+          "hover:bg-secondary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        children: [
+          selected.group && selected.model ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "img",
+              {
+                src: selected.group.logo,
+                alt: selected.group.displayName,
+                className: "size-4 shrink-0 rounded-sm dark:invert"
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate font-medium text-foreground", children: selected.model.name }),
+                selected.model.reasoning ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Sparkles, { className: "size-3 shrink-0 text-amber-500/70" }) : null
+              ] }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "truncate text-[11px] text-muted-foreground", children: selected.group.displayName })
+            ] })
+          ] }) : selected.fallbackLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground", children: selected.fallbackLabel }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: placeholder }),
+          allowClear && value ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              className: "rounded p-1 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+              title: "Clear selection",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { className: "size-3.5" })
+            }
+          ) : null,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _popover.PopoverContent,
+      {
+        side: "bottom",
+        align: "start",
+        sideOffset: 4,
+        className: "w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-xl border-border/60 bg-background p-0 shadow-xl",
+        onWheel: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _searchinput.SearchInput,
+            {
+              ref: inputRef,
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              placeholder: searchPlaceholder,
+              containerClassName: "border-b border-border/40"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "max-h-[280px] overflow-y-auto py-1", children: groups.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+            index > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mx-3 border-t border-border/30" }) : null,
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 pb-1 pt-2", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "img",
+                {
+                  src: group.logo,
+                  alt: group.displayName,
+                  className: "size-3.5 shrink-0 rounded-sm dark:invert"
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-1", children: group.models.map((model) => {
+              const nextValue = _common.modelKey.call(void 0, model.provider, model.modelId);
+              const isSelected = nextValue === value;
+              return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleSelect(model.provider, model.modelId),
+                  className: _utils.cn.call(void 0, 
+                    "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+                    isSelected ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex size-4 shrink-0 items-center justify-center", children: isSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "size-1.5 rounded-full bg-border" }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate font-medium", children: model.name }),
+                    model.reasoning ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Sparkles, { className: "size-3 shrink-0 text-amber-500/60" }) : null
+                  ]
+                },
+                nextValue
+              );
+            }) })
+          ] }, group.provider)) })
+        ]
+      }
+    )
+  ] });
+}
+
+
+exports.AvailableModelPicker = AvailableModelPicker;

package/dist/components/model-selection/available-model-picker.d.cts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SharedModelInfo, SharedAvailableModelGroup } from '@sero-ai/common';
+
+interface AvailableModelPickerProps<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>> {
+    groups: TGroup[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    noModelsLabel?: string;
+    allowClear?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+declare function AvailableModelPicker<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>>({ groups, value, onChange, placeholder, searchPlaceholder, emptyLabel, noModelsLabel, allowClear, disabled, className, }: AvailableModelPickerProps<TModel, TGroup>): react_jsx_runtime.JSX.Element;
+
+export { AvailableModelPicker };

package/dist/components/model-selection/available-model-picker.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SharedModelInfo, SharedAvailableModelGroup } from '@sero-ai/common';
+
+interface AvailableModelPickerProps<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>> {
+    groups: TGroup[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    noModelsLabel?: string;
+    allowClear?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+declare function AvailableModelPicker<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>>({ groups, value, onChange, placeholder, searchPlaceholder, emptyLabel, noModelsLabel, allowClear, disabled, className, }: AvailableModelPickerProps<TModel, TGroup>): react_jsx_runtime.JSX.Element;
+
+export { AvailableModelPicker };

package/dist/components/model-selection/available-model-picker.js

@@ -0,0 +1,172 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Check, ChevronDown, Sparkles, X } from "lucide-react";
+import {
+  filterModelGroups,
+  findGroup,
+  findModel,
+  modelKey,
+  parseModelKey
+} from "@sero-ai/common";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { SearchInput } from "../ui/search-input";
+import { cn } from "../../lib/utils";
+function AvailableModelPicker({
+  groups,
+  value,
+  onChange,
+  placeholder = "Choose a model",
+  searchPlaceholder = "Search models...",
+  emptyLabel = "No matching models",
+  noModelsLabel = "No models available",
+  allowClear = false,
+  disabled = false,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const inputRef = useRef(null);
+  const selected = useMemo(() => {
+    const parsed = parseModelKey(value);
+    if (!parsed) {
+      return value ? { group: null, model: null, fallbackLabel: value } : { group: null, model: null, fallbackLabel: null };
+    }
+    const group = findGroup(groups, parsed.provider, parsed.modelId) ?? null;
+    const model = findModel(groups, parsed.provider, parsed.modelId) ?? null;
+    return {
+      group,
+      model,
+      fallbackLabel: model ? null : value
+    };
+  }, [groups, value]);
+  const filteredGroups = useMemo(
+    () => filterModelGroups(groups, query),
+    [groups, query]
+  );
+  const totalResults = useMemo(
+    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
+    [filteredGroups]
+  );
+  const handleOpenChange = useCallback((nextOpen) => {
+    setOpen(nextOpen);
+    if (!nextOpen) return;
+    setQuery("");
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, []);
+  const handleSelect = useCallback((provider, modelId) => {
+    onChange(modelKey(provider, modelId));
+    setOpen(false);
+    setQuery("");
+  }, [onChange]);
+  const handleClear = useCallback((event) => {
+    event.stopPropagation();
+    onChange("");
+    setOpen(false);
+    setQuery("");
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        className: cn(
+          "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors",
+          "hover:bg-secondary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        children: [
+          selected.group && selected.model ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: selected.group.logo,
+                alt: selected.group.displayName,
+                className: "size-4 shrink-0 rounded-sm dark:invert"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: selected.model.name }),
+                selected.model.reasoning ? /* @__PURE__ */ jsx(Sparkles, { className: "size-3 shrink-0 text-amber-500/70" }) : null
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: selected.group.displayName })
+            ] })
+          ] }) : selected.fallbackLabel ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground", children: selected.fallbackLabel }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: placeholder }),
+          allowClear && value ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              className: "rounded p-1 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+              title: "Clear selection",
+              children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        side: "bottom",
+        align: "start",
+        sideOffset: 4,
+        className: "w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-xl border-border/60 bg-background p-0 shadow-xl",
+        onWheel: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              ref: inputRef,
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              placeholder: searchPlaceholder,
+              containerClassName: "border-b border-border/40"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "max-h-[280px] overflow-y-auto py-1", children: groups.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: emptyLabel }) : filteredGroups.map((group, index) => /* @__PURE__ */ jsxs("div", { children: [
+            index > 0 ? /* @__PURE__ */ jsx("div", { className: "mx-3 border-t border-border/30" }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 pb-1 pt-2", children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: group.logo,
+                  alt: group.displayName,
+                  className: "size-3.5 shrink-0 rounded-sm dark:invert"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group.displayName })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-1", children: group.models.map((model) => {
+              const nextValue = modelKey(model.provider, model.modelId);
+              const isSelected = nextValue === value;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleSelect(model.provider, model.modelId),
+                  className: cn(
+                    "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+                    isSelected ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: isSelected ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ jsx("div", { className: "size-1.5 rounded-full bg-border" }) }),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: model.name }),
+                    model.reasoning ? /* @__PURE__ */ jsx(Sparkles, { className: "size-3 shrink-0 text-amber-500/60" }) : null
+                  ]
+                },
+                nextValue
+              );
+            }) })
+          ] }, group.provider)) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  AvailableModelPicker
+};

package/dist/components/model-selection/model-warning-list.cjs

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+var _common = require('@sero-ai/common');
+var _utils = require('../../lib/utils');
+function ModelWarningList({ warnings, className }) {
+  if (warnings.length === 0) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "space-y-2", className), children: warnings.map((warning, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "rounded-lg border px-3 py-2 text-xs",
+        warning.severity === "info" ? "border-primary/20 bg-primary/5 text-primary" : "border-amber-500/20 bg-amber-500/5 text-amber-700 dark:text-amber-300"
+      ),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.TriangleAlert, { className: "mt-0.5 size-3.5 shrink-0" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: _common.formatModelValidationWarning.call(void 0, warning) })
+      ] })
+    },
+    `${warning.code}:${index}`
+  )) });
+}
+
+
+exports.ModelWarningList = ModelWarningList;

package/dist/components/model-selection/model-warning-list.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModelValidationWarning } from '@sero-ai/common';
+
+interface ModelWarningListProps {
+    warnings: ModelValidationWarning[];
+    className?: string;
+}
+declare function ModelWarningList({ warnings, className }: ModelWarningListProps): react_jsx_runtime.JSX.Element | null;
+
+export { ModelWarningList };

package/dist/components/model-selection/model-warning-list.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ModelValidationWarning } from '@sero-ai/common';
+
+interface ModelWarningListProps {
+    warnings: ModelValidationWarning[];
+    className?: string;
+}
+declare function ModelWarningList({ warnings, className }: ModelWarningListProps): react_jsx_runtime.JSX.Element | null;
+
+export { ModelWarningList };

package/dist/components/model-selection/model-warning-list.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from "lucide-react";
+import { formatModelValidationWarning } from "@sero-ai/common";
+import { cn } from "../../lib/utils";
+function ModelWarningList({ warnings, className }) {
+  if (warnings.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: warnings.map((warning, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border px-3 py-2 text-xs",
+        warning.severity === "info" ? "border-primary/20 bg-primary/5 text-primary" : "border-amber-500/20 bg-amber-500/5 text-amber-700 dark:text-amber-300"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: formatModelValidationWarning(warning) })
+      ] })
+    },
+    `${warning.code}:${index}`
+  )) });
+}
+export {
+  ModelWarningList
+};

package/dist/components/model-selection/thinking-level-picker.cjs

@@ -0,0 +1,39 @@
+"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 _common = require('@sero-ai/common');
+var _utils = require('../../lib/utils');
+function ThinkingLevelPicker({
+  value,
+  onChange,
+  availableLevels,
+  disabled = false,
+  showUnsupported = true,
+  className
+}) {
+  const allowed = new Set(_nullishCoalesce(availableLevels, () => ( _common.THINKING_LEVELS)));
+  const levels = showUnsupported || !availableLevels ? _common.THINKING_LEVELS : _common.THINKING_LEVELS.filter((level) => allowed.has(level));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "grid grid-cols-6 gap-1 rounded-lg border border-border/50 bg-muted/20 p-1", className), children: levels.map((level) => {
+    const isActive = value === level;
+    const isAvailable = allowed.has(level) || !availableLevels;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        disabled: disabled || !isAvailable,
+        onClick: () => onChange(level),
+        className: _utils.cn.call(void 0, 
+          "rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors",
+          isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
+          (!isAvailable || disabled) && "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground"
+        ),
+        children: _common.THINKING_LABELS[level]
+      },
+      level
+    );
+  }) });
+}
+
+
+exports.ThinkingLevelPicker = ThinkingLevelPicker;

package/dist/components/model-selection/thinking-level-picker.d.cts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ThinkingLevel } from '@sero-ai/common';
+
+interface ThinkingLevelPickerProps {
+    value: string;
+    onChange: (value: ThinkingLevel) => void;
+    availableLevels?: readonly string[];
+    disabled?: boolean;
+    showUnsupported?: boolean;
+    className?: string;
+}
+declare function ThinkingLevelPicker({ value, onChange, availableLevels, disabled, showUnsupported, className, }: ThinkingLevelPickerProps): react_jsx_runtime.JSX.Element;
+
+export { ThinkingLevelPicker };

package/dist/components/model-selection/thinking-level-picker.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ThinkingLevel } from '@sero-ai/common';
+
+interface ThinkingLevelPickerProps {
+    value: string;
+    onChange: (value: ThinkingLevel) => void;
+    availableLevels?: readonly string[];
+    disabled?: boolean;
+    showUnsupported?: boolean;
+    className?: string;
+}
+declare function ThinkingLevelPicker({ value, onChange, availableLevels, disabled, showUnsupported, className, }: ThinkingLevelPickerProps): react_jsx_runtime.JSX.Element;
+
+export { ThinkingLevelPicker };

package/dist/components/model-selection/thinking-level-picker.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  THINKING_LABELS,
+  THINKING_LEVELS
+} from "@sero-ai/common";
+import { cn } from "../../lib/utils";
+function ThinkingLevelPicker({
+  value,
+  onChange,
+  availableLevels,
+  disabled = false,
+  showUnsupported = true,
+  className
+}) {
+  const allowed = new Set(availableLevels ?? THINKING_LEVELS);
+  const levels = showUnsupported || !availableLevels ? THINKING_LEVELS : THINKING_LEVELS.filter((level) => allowed.has(level));
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-6 gap-1 rounded-lg border border-border/50 bg-muted/20 p-1", className), children: levels.map((level) => {
+    const isActive = value === level;
+    const isAvailable = allowed.has(level) || !availableLevels;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: disabled || !isAvailable,
+        onClick: () => onChange(level),
+        className: cn(
+          "rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors",
+          isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
+          (!isAvailable || disabled) && "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground"
+        ),
+        children: THINKING_LABELS[level]
+      },
+      level
+    );
+  }) });
+}
+export {
+  ThinkingLevelPicker
+};

package/dist/components/ui/accordion.cjs

@@ -0,0 +1,64 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+var _radixui = require('radix-ui');
+var _utils = require('../../lib/utils');
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Accordion.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _radixui.Accordion.Item,
+    {
+      "data-slot": "accordion-item",
+      className: _utils.cn.call(void 0, "border-b last:border-b-0", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Accordion.Header, { className: "flex", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _radixui.Accordion.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: _utils.cn.call(void 0, 
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _radixui.Accordion.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "pt-0 pb-4", className), children })
+    }
+  );
+}
+
+
+
+
+
+exports.Accordion = Accordion; exports.AccordionContent = AccordionContent; exports.AccordionItem = AccordionItem; exports.AccordionTrigger = AccordionTrigger;

package/dist/components/ui/accordion.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Accordion as Accordion$1 } from 'radix-ui';
+
+declare function Accordion({ ...props }: React.ComponentProps<typeof Accordion$1.Root>): react_jsx_runtime.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof Accordion$1.Item>): react_jsx_runtime.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof Accordion$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof Accordion$1.Content>): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/ui/accordion.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Accordion as Accordion$1 } from 'radix-ui';
+
+declare function Accordion({ ...props }: React.ComponentProps<typeof Accordion$1.Root>): react_jsx_runtime.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof Accordion$1.Item>): react_jsx_runtime.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof Accordion$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof Accordion$1.Content>): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };