@sero-ai/ui 0.4.2 → 0.6.0

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

@@ -1,15 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { Check, ChevronDown, Sparkles, X } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { 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 { ModelPickerBody, ProviderLogo } from "./model-picker-body";
 import { cn } from "../../lib/utils";
 function AvailableModelPicker({
   groups,
@@ -24,8 +22,6 @@ function AvailableModelPicker({
   className
 }) {
   const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const inputRef = useRef(null);
   const selected = useMemo(() => {
     const parsed = parseModelKey(value);
     if (!parsed) {
@@ -39,32 +35,16 @@ function AvailableModelPicker({
       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));
+  const handleSelect = useCallback((nextValue) => {
+    onChange(nextValue);
     setOpen(false);
-    setQuery("");
   }, [onChange]);
   const handleClear = useCallback((event) => {
     event.stopPropagation();
     onChange("");
     setOpen(false);
-    setQuery("");
   }, [onChange]);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
       "div",
       {
@@ -79,11 +59,11 @@ function AvailableModelPicker({
         children: [
           selected.group && selected.model ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
-              "img",
+              ProviderLogo,
               {
-                src: selected.group.logo,
-                alt: selected.group.displayName,
-                className: "size-4 shrink-0 rounded-sm dark:invert"
+                logo: selected.group.logo,
+                displayName: selected.group.displayName,
+                className: "size-4"
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -108,7 +88,7 @@ function AvailableModelPicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       PopoverContent,
       {
         side: "bottom",
@@ -116,53 +96,17 @@ function AvailableModelPicker({
         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-sm text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm 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-sm 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-sm 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)) })
-        ]
+        children: /* @__PURE__ */ jsx(
+          ModelPickerBody,
+          {
+            groups,
+            value,
+            onChange: handleSelect,
+            searchPlaceholder,
+            emptyLabel,
+            noModelsLabel
+          }
+        )
       }
     )
   ] });

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

@@ -0,0 +1,106 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _searchinput = require('../ui/search-input');
+var _utils = require('../../lib/utils');
+function ProviderLogo({
+  logo,
+  displayName,
+  className
+}) {
+  const [failed, setFailed] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => setFailed(false), [logo]);
+  if (!logo || failed) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "img",
+    {
+      src: logo,
+      alt: displayName,
+      onError: () => setFailed(true),
+      className: _utils.cn.call(void 0, "size-3.5 shrink-0 rounded-sm dark:invert", className)
+    }
+  );
+}
+function ModelPickerBody({
+  groups,
+  value,
+  onChange,
+  searchPlaceholder = "Search models...",
+  emptyLabel = "No matching models",
+  noModelsLabel = "No models available",
+  autoFocusSearch = true,
+  showProviderLogos = true,
+  searchEndAdornment,
+  className,
+  listClassName
+}) {
+  const [query, setQuery] = _react.useState.call(void 0, "");
+  const inputRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!autoFocusSearch) return;
+    const frame = requestAnimationFrame(() => _optionalChain([inputRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.focus, 'call', _3 => _3()]));
+    return () => cancelAnimationFrame(frame);
+  }, [autoFocusSearch]);
+  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 handleSelect = _react.useCallback.call(void 0, 
+    (provider, modelId) => {
+      onChange(_common.modelKey.call(void 0, provider, modelId));
+      setQuery("");
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _searchinput.SearchInput,
+      {
+        ref: inputRef,
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        placeholder: searchPlaceholder,
+        "data-slot": "model-filter",
+        containerClassName: "border-b border-border/40",
+        endAdornment: searchEndAdornment
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "max-h-[280px] overflow-y-auto py-1", listClassName), children: groups.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-4 text-center text-sm 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: [
+        showProviderLogos ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProviderLogo, { logo: group.logo, displayName: group.displayName }) : null,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm 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-sm 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.ModelPickerBody = ModelPickerBody; exports.ProviderLogo = ProviderLogo;

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

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SharedModelInfo, SharedAvailableModelGroup } from '@sero-ai/common';
+
+/**
+ * A provider logo.
+ *
+ * `logo` is a remote URL, so it is empty for some providers and it fails
+ * on a machine with no internet. Either way we show nothing rather than
+ * a broken image.
+ */
+declare function ProviderLogo({ logo, displayName, className, }: {
+    logo: string;
+    displayName: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+interface ModelPickerBodyProps<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>> {
+    groups: TGroup[];
+    /** The selected model as `provider/modelId`, or '' for none. */
+    value: string;
+    /** Called with the new `provider/modelId`. */
+    onChange: (value: string) => void;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    noModelsLabel?: string;
+    /**
+     * Focus the search field on mount. Turn this off on a phone: the
+     * on-screen keyboard would cover the list the user came to read.
+     */
+    autoFocusSearch?: boolean;
+    /** Hide provider logos where the network may not reach them. */
+    showProviderLogos?: boolean;
+    /** Shown at the right of the search field, such as a settings button. */
+    searchEndAdornment?: ReactNode;
+    className?: string;
+    /** Applied to the scrolling list, so a caller sets its height. */
+    listClassName?: string;
+}
+declare function ModelPickerBody<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>>({ groups, value, onChange, searchPlaceholder, emptyLabel, noModelsLabel, autoFocusSearch, showProviderLogos, searchEndAdornment, className, listClassName, }: ModelPickerBodyProps<TModel, TGroup>): react_jsx_runtime.JSX.Element;
+
+export { ModelPickerBody, ProviderLogo };

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

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SharedModelInfo, SharedAvailableModelGroup } from '@sero-ai/common';
+
+/**
+ * A provider logo.
+ *
+ * `logo` is a remote URL, so it is empty for some providers and it fails
+ * on a machine with no internet. Either way we show nothing rather than
+ * a broken image.
+ */
+declare function ProviderLogo({ logo, displayName, className, }: {
+    logo: string;
+    displayName: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+interface ModelPickerBodyProps<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>> {
+    groups: TGroup[];
+    /** The selected model as `provider/modelId`, or '' for none. */
+    value: string;
+    /** Called with the new `provider/modelId`. */
+    onChange: (value: string) => void;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    noModelsLabel?: string;
+    /**
+     * Focus the search field on mount. Turn this off on a phone: the
+     * on-screen keyboard would cover the list the user came to read.
+     */
+    autoFocusSearch?: boolean;
+    /** Hide provider logos where the network may not reach them. */
+    showProviderLogos?: boolean;
+    /** Shown at the right of the search field, such as a settings button. */
+    searchEndAdornment?: ReactNode;
+    className?: string;
+    /** Applied to the scrolling list, so a caller sets its height. */
+    listClassName?: string;
+}
+declare function ModelPickerBody<TModel extends SharedModelInfo, TGroup extends SharedAvailableModelGroup<TModel>>({ groups, value, onChange, searchPlaceholder, emptyLabel, noModelsLabel, autoFocusSearch, showProviderLogos, searchEndAdornment, className, listClassName, }: ModelPickerBodyProps<TModel, TGroup>): react_jsx_runtime.JSX.Element;
+
+export { ModelPickerBody, ProviderLogo };

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

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Check, Sparkles } from "lucide-react";
+import {
+  filterModelGroups,
+  modelKey
+} from "@sero-ai/common";
+import { SearchInput } from "../ui/search-input";
+import { cn } from "../../lib/utils";
+function ProviderLogo({
+  logo,
+  displayName,
+  className
+}) {
+  const [failed, setFailed] = useState(false);
+  useEffect(() => setFailed(false), [logo]);
+  if (!logo || failed) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: logo,
+      alt: displayName,
+      onError: () => setFailed(true),
+      className: cn("size-3.5 shrink-0 rounded-sm dark:invert", className)
+    }
+  );
+}
+function ModelPickerBody({
+  groups,
+  value,
+  onChange,
+  searchPlaceholder = "Search models...",
+  emptyLabel = "No matching models",
+  noModelsLabel = "No models available",
+  autoFocusSearch = true,
+  showProviderLogos = true,
+  searchEndAdornment,
+  className,
+  listClassName
+}) {
+  const [query, setQuery] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (!autoFocusSearch) return;
+    const frame = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [autoFocusSearch]);
+  const filteredGroups = useMemo(() => filterModelGroups(groups, query), [groups, query]);
+  const totalResults = useMemo(
+    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
+    [filteredGroups]
+  );
+  const handleSelect = useCallback(
+    (provider, modelId) => {
+      onChange(modelKey(provider, modelId));
+      setQuery("");
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        ref: inputRef,
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        placeholder: searchPlaceholder,
+        "data-slot": "model-filter",
+        containerClassName: "border-b border-border/40",
+        endAdornment: searchEndAdornment
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: cn("max-h-[280px] overflow-y-auto py-1", listClassName), children: groups.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: noModelsLabel }) : totalResults === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm 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: [
+        showProviderLogos ? /* @__PURE__ */ jsx(ProviderLogo, { logo: group.logo, displayName: group.displayName }) : null,
+        /* @__PURE__ */ jsx("span", { className: "text-sm 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-sm 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 {
+  ModelPickerBody,
+  ProviderLogo
+};

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

@@ -4,6 +4,10 @@
 
 var _common = require('@sero-ai/common');
 var _utils = require('../../lib/utils');
+const COMPACT_LABELS = {
+  ..._common.THINKING_LABELS,
+  xhigh: "X-High"
+};
 function ThinkingLevelPicker({
   value,
   onChange,
@@ -14,7 +18,7 @@ function ThinkingLevelPicker({
 }) {
   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) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "grid grid-cols-7 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, 
@@ -24,11 +28,11 @@ function ThinkingLevelPicker({
         disabled: disabled || !isAvailable,
         onClick: () => onChange(level),
         className: _utils.cn.call(void 0, 
-          "rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
+          "whitespace-nowrap rounded-md px-2 py-1.5 text-sm 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]
+        children: COMPACT_LABELS[level]
       },
       level
     );

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

@@ -4,6 +4,10 @@ import {
   THINKING_LEVELS
 } from "@sero-ai/common";
 import { cn } from "../../lib/utils";
+const COMPACT_LABELS = {
+  ...THINKING_LABELS,
+  xhigh: "X-High"
+};
 function ThinkingLevelPicker({
   value,
   onChange,
@@ -14,7 +18,7 @@ function ThinkingLevelPicker({
 }) {
   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) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-7 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(
@@ -24,11 +28,11 @@ function ThinkingLevelPicker({
         disabled: disabled || !isAvailable,
         onClick: () => onChange(level),
         className: cn(
-          "rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
+          "whitespace-nowrap rounded-md px-2 py-1.5 text-sm 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]
+        children: COMPACT_LABELS[level]
       },
       level
     );

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

@@ -14,7 +14,7 @@ function ThinkingPicker({
   onSelect,
   className
 }) {
-  const levels = disabled ? _common.THINKING_LEVELS : _common.THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
+  const levels = disabled ? _common.THINKING_LEVELS.filter((level) => level === "off") : _common.THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
   const activeIndex = Math.max(
     0,
     levels.indexOf(disabled ? "off" : current)

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

@@ -14,7 +14,7 @@ function ThinkingPicker({
   onSelect,
   className
 }) {
-  const levels = disabled ? THINKING_LEVELS : THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
+  const levels = disabled ? THINKING_LEVELS.filter((level) => level === "off") : THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
   const activeIndex = Math.max(
     0,
     levels.indexOf(disabled ? "off" : current)

package/dist/components/ui/calendar.cjs

@@ -79,7 +79,7 @@ function Calendar({
           captionLayout === "label" ? "text-base" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-base h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
-        table: "w-full border-collapse",
+        month_grid: _utils.cn.call(void 0, "w-full border-collapse", defaultClassNames.month_grid),
         weekdays: _utils.cn.call(void 0, "flex", defaultClassNames.weekdays),
         weekday: _utils.cn.call(void 0, 
           "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",

package/dist/components/ui/calendar.js

@@ -79,7 +79,7 @@ function Calendar({
           captionLayout === "label" ? "text-base" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-base h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
-        table: "w-full border-collapse",
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",

package/dist/components/ui/combobox.cjs

@@ -225,7 +225,7 @@ function ComboboxChips({
     {
       "data-slot": "combobox-chips",
       className: _utils.cn.call(void 0, 
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "dark:bg-input/30 border-input focus-within:border-ring has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] has-data-[slot=combobox-chip]:px-1.5",
         className
       ),
       ...props

package/dist/components/ui/combobox.js

@@ -225,7 +225,7 @@ function ComboboxChips({
     {
       "data-slot": "combobox-chips",
       className: cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "dark:bg-input/30 border-input focus-within:border-ring has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] has-data-[slot=combobox-chip]:px-1.5",
         className
       ),
       ...props

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

@@ -4,14 +4,14 @@ import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as React from 'react';
 import { Slot, Label } from 'radix-ui';
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;
     isDirty: boolean;
     isTouched: boolean;
     isValidating: boolean;
-    error?: react_hook_form.FieldError;
+    error?: react_hook_form.FieldError | undefined;
     id: string;
     name: string;
     formItemId: string;

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

@@ -4,14 +4,14 @@ import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as React from 'react';
 import { Slot, Label } from 'radix-ui';
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;
     isDirty: boolean;
     isTouched: boolean;
     isValidating: boolean;
-    error?: react_hook_form.FieldError;
+    error?: react_hook_form.FieldError | undefined;
     id: string;
     name: string;
     formItemId: string;

package/dist/components/ui/input-group.cjs

@@ -19,7 +19,7 @@ function InputGroup({ className, ...props }) {
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring",
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
         className

package/dist/components/ui/input-group.js

@@ -19,7 +19,7 @@ function InputGroup({ className, ...props }) {
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring",
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
         className