@sero-ai/ui 0.4.0 → 0.4.2

package/dist/components/dashboard/item-list.cjs

@@ -35,7 +35,7 @@ function ItemListItem({
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _item.ItemTitle, { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: primary }),
           secondary && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _item.ItemDescription, { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: secondary })
         ] }),
-        trailing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: trailing }),
+        trailing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0 text-sm tabular-nums text-[var(--text-muted)]", children: trailing }),
         actions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _item.ItemActions, { children: actions })
       ]
     }
@@ -56,7 +56,7 @@ function ItemList({
       ...props,
       children: [
         children,
-        overflowCount > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "px-2 text-[11px] text-[var(--text-muted)]", children: [
+        overflowCount > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "px-2 text-sm text-[var(--text-muted)]", children: [
           "+",
           overflowCount,
           " more"

package/dist/components/dashboard/item-list.js

@@ -35,7 +35,7 @@ function ItemListItem({
           /* @__PURE__ */ jsx(ItemTitle, { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: primary }),
           secondary && /* @__PURE__ */ jsx(ItemDescription, { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: secondary })
         ] }),
-        trailing && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: trailing }),
+        trailing && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm tabular-nums text-[var(--text-muted)]", children: trailing }),
         actions && /* @__PURE__ */ jsx(ItemActions, { children: actions })
       ]
     }
@@ -56,7 +56,7 @@ function ItemList({
       ...props,
       children: [
         children,
-        overflowCount > 0 && /* @__PURE__ */ jsxs("span", { className: "px-2 text-[11px] text-[var(--text-muted)]", children: [
+        overflowCount > 0 && /* @__PURE__ */ jsxs("span", { className: "px-2 text-sm text-[var(--text-muted)]", children: [
           "+",
           overflowCount,
           " more"

package/dist/components/dashboard/layout.cjs

@@ -153,7 +153,7 @@ function Section({
       children: [
         (heading || action) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-            heading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
+            heading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "truncate text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
             description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate text-xs text-[var(--text-muted)]", children: description })
           ] }),
           action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "shrink-0", children: action })

package/dist/components/dashboard/layout.js

@@ -153,7 +153,7 @@ function Section({
       children: [
         (heading || action) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-            heading && /* @__PURE__ */ jsx("h3", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
+            heading && /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
             description && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--text-muted)]", children: description })
           ] }),
           action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })

package/dist/components/dashboard/metric.cjs

@@ -34,7 +34,7 @@ function Metric({
       children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
           icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _typography.Icon, { icon, size: "sm" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate text-sm font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
         ] }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-baseline gap-1.5", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 

package/dist/components/dashboard/metric.js

@@ -34,7 +34,7 @@ function Metric({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
           icon && /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
           /* @__PURE__ */ jsx(

package/dist/components/dashboard/stale-indicator.cjs

@@ -15,7 +15,7 @@ function StaleIndicator({
     {
       "data-slot": "stale-indicator",
       className: _utils.cn.call(void 0, 
-        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        "flex items-center gap-1.5 text-sm text-[var(--text-muted)]",
         className
       ),
       ...props,

package/dist/components/dashboard/stale-indicator.js

@@ -15,7 +15,7 @@ function StaleIndicator({
     {
       "data-slot": "stale-indicator",
       className: cn(
-        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        "flex items-center gap-1.5 text-sm text-[var(--text-muted)]",
         className
       ),
       ...props,

package/dist/components/dashboard/status.cjs

@@ -10,6 +10,8 @@ function Status({
   ...props
 }) {
   const hasLabel = children != null && children !== "";
+  const hasAccessibleName = props["aria-label"] != null || props["aria-labelledby"] != null;
+  const hiddenLabel = !hasLabel && !hasAccessibleName ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: _tone.toneLabel[tone] }) : null;
   if (variant === "pill") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "span",
@@ -24,7 +26,8 @@ function Status({
         ...props,
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "size-1.5 shrink-0 rounded-full", _tone.toneDot[tone]) }),
-          children
+          children,
+          hiddenLabel
         ]
       }
     );
@@ -52,7 +55,8 @@ function Status({
             )
           }
         ),
-        children
+        children,
+        hiddenLabel
       ]
     }
   );

package/dist/components/dashboard/status.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-import { toneColor, toneDot, tonePill } from "./tone";
+import { toneColor, toneDot, toneLabel, tonePill } from "./tone";
 function Status({
   className,
   tone = "neutral",
@@ -10,6 +10,8 @@ function Status({
   ...props
 }) {
   const hasLabel = children != null && children !== "";
+  const hasAccessibleName = props["aria-label"] != null || props["aria-labelledby"] != null;
+  const hiddenLabel = !hasLabel && !hasAccessibleName ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: toneLabel[tone] }) : null;
   if (variant === "pill") {
     return /* @__PURE__ */ jsxs(
       "span",
@@ -24,7 +26,8 @@ function Status({
         ...props,
         children: [
           /* @__PURE__ */ jsx("span", { className: cn("size-1.5 shrink-0 rounded-full", toneDot[tone]) }),
-          children
+          children,
+          hiddenLabel
         ]
       }
     );
@@ -52,7 +55,8 @@ function Status({
             )
           }
         ),
-        children
+        children,
+        hiddenLabel
       ]
     }
   );

package/dist/components/dashboard/tone.cjs

@@ -12,6 +12,13 @@ const toneDot = {
   error: "bg-[var(--status-error)]",
   info: "bg-[var(--status-info)]"
 };
+const toneLabel = {
+  neutral: "Neutral",
+  success: "Success",
+  warning: "Warning",
+  error: "Error",
+  info: "Info"
+};
 const tonePill = {
   neutral: "bg-[var(--surface-flat)] text-[var(--text-secondary)]",
   success: "bg-[var(--status-success-muted)] text-[var(--status-success)]",
@@ -23,4 +30,5 @@ const tonePill = {
 
 
 
-exports.toneColor = toneColor; exports.toneDot = toneDot; exports.tonePill = tonePill;
+
+exports.toneColor = toneColor; exports.toneDot = toneDot; exports.toneLabel = toneLabel; exports.tonePill = tonePill;

package/dist/components/dashboard/tone.d.cts

@@ -3,7 +3,13 @@ type Tone = "neutral" | "success" | "warning" | "error" | "info";
 declare const toneColor: Record<Tone, string>;
 /** Solid background colour for a tone (status dots). */
 declare const toneDot: Record<Tone, string>;
+/**
+ * Default accessible name for a tone, used as the text alternative when a
+ * status indicator carries no visible label. Generic by design — callers with
+ * a domain-specific meaning should pass their own `aria-label`.
+ */
+declare const toneLabel: Record<Tone, string>;
 /** Muted tinted background + matching text for a tone (pills, chips). */
 declare const tonePill: Record<Tone, string>;
 
-export { type Tone, toneColor, toneDot, tonePill };
+export { type Tone, toneColor, toneDot, toneLabel, tonePill };

package/dist/components/dashboard/tone.d.ts

@@ -3,7 +3,13 @@ type Tone = "neutral" | "success" | "warning" | "error" | "info";
 declare const toneColor: Record<Tone, string>;
 /** Solid background colour for a tone (status dots). */
 declare const toneDot: Record<Tone, string>;
+/**
+ * Default accessible name for a tone, used as the text alternative when a
+ * status indicator carries no visible label. Generic by design — callers with
+ * a domain-specific meaning should pass their own `aria-label`.
+ */
+declare const toneLabel: Record<Tone, string>;
 /** Muted tinted background + matching text for a tone (pills, chips). */
 declare const tonePill: Record<Tone, string>;
 
-export { type Tone, toneColor, toneDot, tonePill };
+export { type Tone, toneColor, toneDot, toneLabel, tonePill };

package/dist/components/dashboard/tone.js

@@ -12,6 +12,13 @@ const toneDot = {
   error: "bg-[var(--status-error)]",
   info: "bg-[var(--status-info)]"
 };
+const toneLabel = {
+  neutral: "Neutral",
+  success: "Success",
+  warning: "Warning",
+  error: "Error",
+  info: "Info"
+};
 const tonePill = {
   neutral: "bg-[var(--surface-flat)] text-[var(--text-secondary)]",
   success: "bg-[var(--status-success-muted)] text-[var(--status-success)]",
@@ -22,5 +29,6 @@ const tonePill = {
 export {
   toneColor,
   toneDot,
+  toneLabel,
   tonePill
 };

package/dist/components/dashboard/typography.cjs

@@ -5,11 +5,11 @@ var _tone = require('./tone');
 const textVariants = _classvarianceauthority.cva.call(void 0, "min-w-0", {
   variants: {
     variant: {
-      body: "text-sm text-[var(--text-primary)]",
-      label: "text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]",
+      body: "text-base text-[var(--text-primary)]",
+      label: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]",
       supporting: "text-xs text-[var(--text-secondary)]",
       muted: "text-xs text-[var(--text-muted)]",
-      numeric: "text-sm font-semibold tabular-nums text-[var(--text-primary)]"
+      numeric: "text-base font-semibold tabular-nums text-[var(--text-primary)]"
     }
   },
   defaultVariants: { variant: "body" }
@@ -43,7 +43,7 @@ function Text({
 }
 const headingSize = {
   sm: "text-xs font-semibold",
-  md: "text-sm font-semibold",
+  md: "text-base font-semibold",
   lg: "text-base font-semibold"
 };
 function Heading({

package/dist/components/dashboard/typography.d.cts

@@ -20,7 +20,7 @@ interface TextProps extends Omit<React.ComponentProps<"span">, "color">, Variant
 declare function Text({ className, variant, truncate, clamp, tone, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 declare const headingSize: {
     readonly sm: "text-xs font-semibold";
-    readonly md: "text-sm font-semibold";
+    readonly md: "text-base font-semibold";
     readonly lg: "text-base font-semibold";
 };
 interface HeadingProps extends React.ComponentProps<"h2"> {

package/dist/components/dashboard/typography.d.ts

@@ -20,7 +20,7 @@ interface TextProps extends Omit<React.ComponentProps<"span">, "color">, Variant
 declare function Text({ className, variant, truncate, clamp, tone, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 declare const headingSize: {
     readonly sm: "text-xs font-semibold";
-    readonly md: "text-sm font-semibold";
+    readonly md: "text-base font-semibold";
     readonly lg: "text-base font-semibold";
 };
 interface HeadingProps extends React.ComponentProps<"h2"> {

package/dist/components/dashboard/typography.js

@@ -5,11 +5,11 @@ import { toneColor } from "./tone";
 const textVariants = cva("min-w-0", {
   variants: {
     variant: {
-      body: "text-sm text-[var(--text-primary)]",
-      label: "text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]",
+      body: "text-base text-[var(--text-primary)]",
+      label: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]",
       supporting: "text-xs text-[var(--text-secondary)]",
       muted: "text-xs text-[var(--text-muted)]",
-      numeric: "text-sm font-semibold tabular-nums text-[var(--text-primary)]"
+      numeric: "text-base font-semibold tabular-nums text-[var(--text-primary)]"
     }
   },
   defaultVariants: { variant: "body" }
@@ -43,7 +43,7 @@ function Text({
 }
 const headingSize = {
   sm: "text-xs font-semibold",
-  md: "text-sm font-semibold",
+  md: "text-base font-semibold",
   lg: "text-base font-semibold"
 };
 function Heading({

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

@@ -71,7 +71,7 @@ function AvailableModelPicker({
         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",
+          "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-base 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
@@ -91,9 +91,9 @@ function AvailableModelPicker({
                 /* @__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 })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "truncate text-sm 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 }),
+          ] }) : selected.fallbackLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "min-w-0 flex-1 truncate font-mono text-sm 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",
             {
@@ -127,7 +127,7 @@ function AvailableModelPicker({
               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: [
+          /* @__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-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: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -138,7 +138,7 @@ function AvailableModelPicker({
                   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, "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);
@@ -149,7 +149,7 @@ function AvailableModelPicker({
                   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",
+                    "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: [

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

@@ -71,7 +71,7 @@ function AvailableModelPicker({
         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",
+          "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-base 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
@@ -91,9 +91,9 @@ function AvailableModelPicker({
                 /* @__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 })
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm 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 }),
+          ] }) : selected.fallbackLabel ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-sm 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",
             {
@@ -127,7 +127,7 @@ function AvailableModelPicker({
               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: [
+          /* @__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(
@@ -138,7 +138,7 @@ function AvailableModelPicker({
                   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("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);
@@ -149,7 +149,7 @@ function AvailableModelPicker({
                   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",
+                    "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: [

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

@@ -24,7 +24,7 @@ function ThinkingLevelPicker({
         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",
+          "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"
         ),

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

@@ -24,7 +24,7 @@ function ThinkingLevelPicker({
         disabled: disabled || !isAvailable,
         onClick: () => onChange(level),
         className: cn(
-          "rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors",
+          "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"
         ),

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

@@ -0,0 +1,70 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+var _react = require('motion/react');
+var _common = require('@sero-ai/common');
+var _utils = require('../../lib/utils');
+const COMPACT_LABELS = {
+  ..._common.THINKING_LABELS,
+  xhigh: "X-High"
+};
+function ThinkingPicker({
+  available,
+  current,
+  disabled,
+  onSelect,
+  className
+}) {
+  const levels = disabled ? _common.THINKING_LEVELS : _common.THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
+  const activeIndex = Math.max(
+    0,
+    levels.indexOf(disabled ? "off" : current)
+  );
+  const isOff = disabled || current === "off";
+  const isMax = !disabled && current === "max";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, `flex flex-col gap-2 border-[var(--border-subtle)] px-3 py-3 transition-opacity duration-150 ${disabled ? "pointer-events-none opacity-40" : ""}`, className),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Brain, { className: "size-3 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: "Thinking" })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] p-0.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _react.motion.div,
+            {
+              className: "absolute inset-y-0.5 rounded-md shadow-sm ring-1 ring-inset ring-white/5",
+              initial: false,
+              animate: {
+                x: `${activeIndex * 100}%`,
+                width: `${100 / levels.length}%`
+              },
+              transition: { type: "spring", stiffness: 500, damping: 38 },
+              style: {
+                background: isOff ? "var(--bg-elevated)" : isMax ? "linear-gradient(135deg, #f59e0b40, #ef444440)" : "linear-gradient(135deg, #6366f140, #8b5cf640)"
+              }
+            }
+          ),
+          levels.map((level) => {
+            const isActive = current === level && !disabled;
+            const textClass = isActive ? level === "max" ? "text-status-warning" : level === "off" ? "text-[var(--text-primary)]" : "text-[var(--banner-primary)]" : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]";
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(level),
+                className: `relative z-10 flex flex-1 items-center justify-center whitespace-nowrap rounded-md py-1.5 text-sm font-medium leading-none transition-colors duration-150 ${textClass}`,
+                children: COMPACT_LABELS[level]
+              },
+              level
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+
+
+exports.ThinkingPicker = ThinkingPicker;

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

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThinkingPickerProps {
+    available: readonly string[];
+    current: string;
+    disabled: boolean;
+    onSelect: (level: string) => void;
+    className?: string;
+}
+declare function ThinkingPicker({ available, current, disabled, onSelect, className }: ThinkingPickerProps): react_jsx_runtime.JSX.Element;
+
+export { ThinkingPicker };

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

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ThinkingPickerProps {
+    available: readonly string[];
+    current: string;
+    disabled: boolean;
+    onSelect: (level: string) => void;
+    className?: string;
+}
+declare function ThinkingPicker({ available, current, disabled, onSelect, className }: ThinkingPickerProps): react_jsx_runtime.JSX.Element;
+
+export { ThinkingPicker };

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

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Brain } from "lucide-react";
+import { motion } from "motion/react";
+import { THINKING_LABELS, THINKING_LEVELS } from "@sero-ai/common";
+import { cn } from "../../lib/utils";
+const COMPACT_LABELS = {
+  ...THINKING_LABELS,
+  xhigh: "X-High"
+};
+function ThinkingPicker({
+  available,
+  current,
+  disabled,
+  onSelect,
+  className
+}) {
+  const levels = disabled ? THINKING_LEVELS : THINKING_LEVELS.filter((level) => level === "off" || available.includes(level));
+  const activeIndex = Math.max(
+    0,
+    levels.indexOf(disabled ? "off" : current)
+  );
+  const isOff = disabled || current === "off";
+  const isMax = !disabled && current === "max";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(`flex flex-col gap-2 border-[var(--border-subtle)] px-3 py-3 transition-opacity duration-150 ${disabled ? "pointer-events-none opacity-40" : ""}`, className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Brain, { className: "size-3 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: "Thinking" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] p-0.5", children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "absolute inset-y-0.5 rounded-md shadow-sm ring-1 ring-inset ring-white/5",
+              initial: false,
+              animate: {
+                x: `${activeIndex * 100}%`,
+                width: `${100 / levels.length}%`
+              },
+              transition: { type: "spring", stiffness: 500, damping: 38 },
+              style: {
+                background: isOff ? "var(--bg-elevated)" : isMax ? "linear-gradient(135deg, #f59e0b40, #ef444440)" : "linear-gradient(135deg, #6366f140, #8b5cf640)"
+              }
+            }
+          ),
+          levels.map((level) => {
+            const isActive = current === level && !disabled;
+            const textClass = isActive ? level === "max" ? "text-status-warning" : level === "off" ? "text-[var(--text-primary)]" : "text-[var(--banner-primary)]" : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]";
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(level),
+                className: `relative z-10 flex flex-1 items-center justify-center whitespace-nowrap rounded-md py-1.5 text-sm font-medium leading-none transition-colors duration-150 ${textClass}`,
+                children: COMPACT_LABELS[level]
+              },
+              level
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ThinkingPicker
+};

package/dist/components/ui/accordion.cjs

@@ -30,7 +30,7 @@ function AccordionTrigger({
     {
       "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",
+        "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-base 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,
@@ -50,7 +50,7 @@ function AccordionContent({
     _radixui.Accordion.Content,
     {
       "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-base",
       ...props,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "pt-0 pb-4", className), children })
     }