@sero-ai/ui 0.4.1 → 0.4.2

package/dist/reference.js

@@ -226,7 +226,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__ */ jsx2("h3", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
+            heading && /* @__PURE__ */ jsx2("h3", { className: "truncate text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
             description && /* @__PURE__ */ jsx2("p", { className: "truncate text-xs text-[var(--text-muted)]", children: description })
           ] }),
           action && /* @__PURE__ */ jsx2("div", { className: "shrink-0", children: action })
@@ -263,11 +263,11 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 var textVariants = cva2("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" }
@@ -301,7 +301,7 @@ function Text({
 }
 var headingSize = {
   sm: "text-xs font-semibold",
-  md: "text-sm font-semibold",
+  md: "text-base font-semibold",
   lg: "text-base font-semibold"
 };
 function Heading({
@@ -384,7 +384,7 @@ function Metric({
       children: [
         /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
           icon && /* @__PURE__ */ jsx4(Icon, { icon, size: "sm" }),
-          /* @__PURE__ */ jsx4("span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
+          /* @__PURE__ */ jsx4("span", { className: "truncate text-sm font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
         ] }),
         /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-1.5", children: [
           /* @__PURE__ */ jsx4(
@@ -546,7 +546,7 @@ import { cva as cva3 } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var itemVariants = cva3(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "group/item flex items-center border border-transparent text-base rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
@@ -633,7 +633,7 @@ function ItemTitle({ className, ...props }) {
     {
       "data-slot": "item-title",
       className: cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        "flex w-fit items-center gap-2 text-base leading-snug font-medium",
         className
       ),
       ...props
@@ -646,7 +646,7 @@ function ItemDescription({ className, ...props }) {
     {
       "data-slot": "item-description",
       className: cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "text-muted-foreground line-clamp-2 text-base leading-normal font-normal text-balance",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
       ),
@@ -694,7 +694,7 @@ function ItemListItem({
           /* @__PURE__ */ jsx8(ItemTitle, { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: primary }),
           secondary && /* @__PURE__ */ jsx8(ItemDescription, { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: secondary })
         ] }),
-        trailing && /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: trailing }),
+        trailing && /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-sm tabular-nums text-[var(--text-muted)]", children: trailing }),
         actions && /* @__PURE__ */ jsx8(ItemActions, { children: actions })
       ]
     }
@@ -715,7 +715,7 @@ function ItemList({
       ...props,
       children: [
         children,
-        overflowCount > 0 && /* @__PURE__ */ jsxs5("span", { className: "px-2 text-[11px] text-[var(--text-muted)]", children: [
+        overflowCount > 0 && /* @__PURE__ */ jsxs5("span", { className: "px-2 text-sm text-[var(--text-muted)]", children: [
           "+",
           overflowCount,
           " more"
@@ -747,7 +747,7 @@ function ActivityListItem({
         /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
           /* @__PURE__ */ jsxs6("div", { className: "flex items-baseline justify-between gap-2", children: [
             /* @__PURE__ */ jsx9("span", { className: "truncate text-xs text-[var(--text-primary)]", children: label }),
-            timestamp && /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: timestamp })
+            timestamp && /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-sm tabular-nums text-[var(--text-muted)]", children: timestamp })
           ] }),
           detail && /* @__PURE__ */ jsx9("span", { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: detail })
         ] })
@@ -769,7 +769,7 @@ function ActivityList({
       ...props,
       children: [
         children,
-        overflowCount > 0 && /* @__PURE__ */ jsxs6("li", { className: "pl-5 pt-0.5 text-[11px] text-[var(--text-muted)]", children: [
+        overflowCount > 0 && /* @__PURE__ */ jsxs6("li", { className: "pl-5 pt-0.5 text-sm text-[var(--text-muted)]", children: [
           "+",
           overflowCount,
           " more"
@@ -861,7 +861,7 @@ import { cva as cva4 } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var buttonVariants = cva4(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -959,7 +959,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/styles/globals.css

@@ -116,7 +116,7 @@
   /* Typography (themeable) */
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
-  --font-size-base: 14px;
+  --font-size-base: 13px;
 
   /* Spacing */
   --space-xs: 4px;
@@ -132,7 +132,7 @@
 
   /* Sero font sizes (legacy — use Tailwind text-* for new components) */
   --sero-text-xs: 12px;
-  --sero-text-sm: 13px;
+  --sero-text-base: 13px;
   --sero-text-base: 14px;
   --sero-text-lg: 15px;
   --sero-text-xl: 16px;
@@ -236,6 +236,14 @@
 }
 
 @theme inline {
+  --text-xs: 0.8rem;
+  --text-xs--line-height: 1rem;
+  
+  --text-sm: 0.9rem;
+  --text-sm--line-height: 1.2rem;
+
+  --text-base--line-height: 1.4rem;
+
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -483,7 +491,7 @@
 }
 
 html {
-  font-size: var(--font-size-base, 14px);
+  font-size: var(--font-size-base, 13px);
   font-family: var(--font-sans);
 }
 
@@ -495,3 +503,14 @@ html {
     @apply bg-background text-foreground;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/styles/plugin-theme.css

@@ -0,0 +1,80 @@
+@theme inline {
+  --text-xs: 0.8rem;
+  --text-xs--line-height: 1rem;
+
+  --text-sm: 0.9rem;
+  --text-sm--line-height: 1.2rem;
+
+  --text-base--line-height: 1.4rem;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-brand-primary: var(--brand-primary);
+  --color-brand-primary-foreground: var(--brand-primary-foreground);
+  --color-brand-primary-muted: var(--brand-primary-muted);
+  --color-brand-primary-subtle: var(--brand-primary-subtle);
+  --color-brand-primary-faint: var(--brand-primary-faint);
+  --color-brand-primary-border: var(--brand-primary-border);
+  --color-brand-secondary: var(--brand-secondary);
+  --color-brand-secondary-foreground: var(--brand-secondary-foreground);
+  --color-brand-secondary-muted: var(--brand-secondary-muted);
+  --color-brand-secondary-subtle: var(--brand-secondary-subtle);
+  --color-brand-secondary-faint: var(--brand-secondary-faint);
+  --color-brand-secondary-border: var(--brand-secondary-border);
+  --color-status-success: var(--status-success);
+  --color-status-success-muted: var(--status-success-muted);
+  --color-status-success-subtle: var(--status-success-subtle);
+  --color-status-success-faint: var(--status-success-faint);
+  --color-status-success-border: var(--status-success-border);
+  --color-status-warning: var(--status-warning);
+  --color-status-warning-muted: var(--status-warning-muted);
+  --color-status-warning-subtle: var(--status-warning-subtle);
+  --color-status-warning-faint: var(--status-warning-faint);
+  --color-status-warning-border: var(--status-warning-border);
+  --color-status-error: var(--status-error);
+  --color-status-error-muted: var(--status-error-muted);
+  --color-status-error-subtle: var(--status-error-subtle);
+  --color-status-error-faint: var(--status-error-faint);
+  --color-status-error-border: var(--status-error-border);
+  --color-status-info: var(--status-info);
+  --color-status-info-muted: var(--status-info-muted);
+  --color-status-info-subtle: var(--status-info-subtle);
+  --color-status-info-faint: var(--status-info-faint);
+  --color-status-info-border: var(--status-info-border);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}

package/dist/styles/plugin.css

@@ -1,4 +1,16 @@
-@import "./globals.css";
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "./plugin-theme.css";
+
+@source "../components";
+
+@custom-variant dark (&:is(.dark *));
 
 /* Federated Sero plugins should import this file, then add plugin-local
-   @source directives. It keeps Tailwind 4 token names aligned with the shell. */
+   @source directives. The seroPluginCssScope Vite helper rewrites this file's
+   document-level selectors (:root/:host theme blocks, html/body preflight) to
+   :scope, so a plugin's default Tailwind theme and resets are self-contained on
+   its own scope root. Sero design tokens (--background, --brand-*, …) are still
+   owned by the host: plugin-theme.css references them via @theme inline, so
+   they inherit from the host document root. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sero-ai/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Shared UI components, AI elements, and design tokens for the Sero platform",
   "type": "module",
   "main": "./dist/index.js",
@@ -70,7 +70,7 @@
     "react-jsx-parser": "^2.4.1",
     "react-resizable-panels": "^4.7.2",
     "react-syntax-highlighter": "^16.1.1",
-    "recharts": "2.15.4",
+    "recharts": "3.9.2",
     "shiki": "^3.23.0",
     "sonner": "^2.0.7",
     "streamdown": "^2.5.0",

package/src/components/ai-elements/agent.tsx

@@ -41,7 +41,7 @@ export const AgentHeader = memo(
     >
       <div className="flex items-center gap-2">
         <BotIcon className="size-4 text-muted-foreground" />
-        <span className="font-medium text-sm">{name}</span>
+        <span className="font-medium text-base">{name}</span>
         {model && (
           <Badge className="font-mono text-xs" variant="secondary">
             {model}
@@ -67,10 +67,10 @@ export type AgentInstructionsProps = ComponentProps<"div"> & {
 export const AgentInstructions = memo(
   ({ className, children, ...props }: AgentInstructionsProps) => (
     <div className={cn("space-y-2", className)} {...props}>
-      <span className="font-medium text-muted-foreground text-sm">
+      <span className="font-medium text-muted-foreground text-base">
         Instructions
       </span>
-      <div className="rounded-md bg-muted/50 p-3 text-muted-foreground text-sm">
+      <div className="rounded-md bg-muted/50 p-3 text-muted-foreground text-base">
         <p>{children}</p>
       </div>
     </div>
@@ -81,7 +81,7 @@ export type AgentToolsProps = ComponentProps<typeof Accordion>;
 
 export const AgentTools = memo(({ className, ...props }: AgentToolsProps) => (
   <div className={cn("space-y-2", className)}>
-    <span className="font-medium text-muted-foreground text-sm">Tools</span>
+    <span className="font-medium text-muted-foreground text-base">Tools</span>
     <Accordion className="rounded-md border" {...props} />
   </div>
 ));
@@ -103,7 +103,7 @@ export const AgentTool = memo(
         value={value}
         {...props}
       >
-        <AccordionTrigger className="px-3 py-2 text-sm hover:no-underline">
+        <AccordionTrigger className="px-3 py-2 text-base hover:no-underline">
           {tool.description ?? "No description"}
         </AccordionTrigger>
         <AccordionContent className="px-3 pb-3">
@@ -123,7 +123,7 @@ export type AgentOutputProps = ComponentProps<"div"> & {
 export const AgentOutput = memo(
   ({ className, schema, ...props }: AgentOutputProps) => (
     <div className={cn("space-y-2", className)} {...props}>
-      <span className="font-medium text-muted-foreground text-sm">
+      <span className="font-medium text-muted-foreground text-base">
         Output Schema
       </span>
       <div className="rounded-md bg-muted/50">

package/src/components/ai-elements/artifact.tsx

@@ -68,7 +68,7 @@ export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
 
 export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
   <p
-    className={cn("font-medium text-foreground text-sm", className)}
+    className={cn("font-medium text-foreground text-base", className)}
     {...props}
   />
 );
@@ -79,7 +79,7 @@ export const ArtifactDescription = ({
   className,
   ...props
 }: ArtifactDescriptionProps) => (
-  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
+  <p className={cn("text-muted-foreground text-base", className)} {...props} />
 );
 
 export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;

package/src/components/ai-elements/attachments.tsx

@@ -209,7 +209,7 @@ export const Attachment = ({
           variant === "inline" && [
             "flex h-8 cursor-pointer select-none items-center gap-1.5",
             "rounded-md border border-border px-1.5",
-            "font-medium text-sm transition-all",
+            "font-medium text-base transition-all",
             "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
           ],
           variant === "list" && [
@@ -417,7 +417,7 @@ export const AttachmentEmpty = ({
 }: AttachmentEmptyProps) => (
   <div
     className={cn(
-      "flex items-center justify-center p-4 text-muted-foreground text-sm",
+      "flex items-center justify-center p-4 text-muted-foreground text-base",
       className
     )}
     {...props}

package/src/components/ai-elements/chain-of-thought.tsx

@@ -81,7 +81,7 @@ export const ChainOfThoughtHeader = memo(
       <Collapsible onOpenChange={setIsOpen} open={isOpen}>
         <CollapsibleTrigger
           className={cn(
-            "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+            "flex w-full items-center gap-2 text-muted-foreground text-base transition-colors hover:text-foreground",
             className
           )}
           {...props}
@@ -127,7 +127,7 @@ export const ChainOfThoughtStep = memo(
   }: ChainOfThoughtStepProps) => (
     <div
       className={cn(
-        "flex gap-2 text-sm",
+        "flex gap-2 text-base",
         stepStatusStyles[status],
         "fade-in-0 slide-in-from-top-2 animate-in",
         className

package/src/components/ai-elements/code-block.tsx

@@ -276,14 +276,14 @@ const CodeBlockBody = memo(
     return (
       <pre
         className={cn(
-          "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)] m-0 p-4 text-sm",
+          "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)] m-0 p-4 text-base",
           className
         )}
         style={preStyle}
       >
         <code
           className={cn(
-            "font-mono text-sm",
+            "font-mono",
             showLineNumbers && "[counter-increment:line_0] [counter-reset:line]"
           )}
         >
@@ -380,10 +380,12 @@ export const CodeBlockContent = ({
   code,
   language,
   showLineNumbers = false,
+  className
 }: {
   code: string;
   language: BundledLanguage;
   showLineNumbers?: boolean;
+  className?: string
 }) => {
   // Memoized raw tokens for immediate display
   const rawTokens = useMemo(() => createRawTokens(code), [code]);
@@ -413,7 +415,7 @@ export const CodeBlockContent = ({
 
   return (
     <div className="relative overflow-auto">
-      <CodeBlockBody showLineNumbers={showLineNumbers} tokenized={tokenized} />
+      <CodeBlockBody showLineNumbers={showLineNumbers} tokenized={tokenized} className={className} />
     </div>
   );
 };
@@ -436,6 +438,7 @@ export const CodeBlock = ({
           code={code}
           language={language}
           showLineNumbers={showLineNumbers}
+          className={className}
         />
       </CodeBlockContainer>
     </CodeBlockContext.Provider>

package/src/components/ai-elements/commit.tsx

@@ -70,7 +70,7 @@ export const CommitMessage = ({
   children,
   ...props
 }: CommitMessageProps) => (
-  <span className={cn("font-medium text-sm", className)} {...props}>
+  <span className={cn("font-medium text-base", className)} {...props}>
     {children}
   </span>
 );
@@ -291,7 +291,7 @@ export const CommitFile = ({
 }: CommitFileProps) => (
   <div
     className={cn(
-      "flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/50",
+      "flex items-center justify-between gap-2 rounded px-2 py-1 text-base hover:bg-muted/50",
       className
     )}
     {...props}

package/src/components/ai-elements/confirmation.tsx

@@ -169,5 +169,5 @@ export const ConfirmationActions = ({
 export type ConfirmationActionProps = ComponentProps<typeof Button>;
 
 export const ConfirmationAction = (props: ConfirmationActionProps) => (
-  <Button className="h-8 px-3 text-sm" type="button" {...props} />
+  <Button className="h-8 px-3 text-base" type="button" {...props} />
 );

package/src/components/ai-elements/conversation.tsx

@@ -59,9 +59,9 @@ export const ConversationEmptyState = ({
       <>
         {icon && <div className="text-muted-foreground">{icon}</div>}
         <div className="space-y-1">
-          <h3 className="font-medium text-sm">{title}</h3>
+          <h3 className="font-medium text-base">{title}</h3>
           {description && (
-            <p className="text-muted-foreground text-sm">{description}</p>
+            <p className="text-muted-foreground text-base">{description}</p>
           )}
         </div>
       </>

package/src/components/ai-elements/environment-variables.tsx

@@ -100,7 +100,7 @@ export const EnvironmentVariablesTitle = ({
   children,
   ...props
 }: EnvironmentVariablesTitleProps) => (
-  <h3 className={cn("font-medium text-sm", className)} {...props}>
+  <h3 className={cn("font-medium text-base", className)} {...props}>
     {children ?? "Environment Variables"}
   </h3>
 );
@@ -209,7 +209,7 @@ export const EnvironmentVariableName = ({
   const { name } = use(EnvironmentVariableContext);
 
   return (
-    <span className={cn("font-mono text-sm", className)} {...props}>
+    <span className={cn("font-mono text-base", className)} {...props}>
       {children ?? name}
     </span>
   );
@@ -232,7 +232,7 @@ export const EnvironmentVariableValue = ({
   return (
     <span
       className={cn(
-        "font-mono text-muted-foreground text-sm",
+        "font-mono text-muted-foreground text-base",
         !showValues && "select-none",
         className
       )}

package/src/components/ai-elements/file-tree.tsx

@@ -83,7 +83,7 @@ export const FileTree = ({
     <FileTreeContext.Provider value={contextValue}>
       <div
         className={cn(
-          "rounded-lg border bg-background font-mono text-sm",
+          "rounded-lg border bg-background font-mono text-base",
           className
         )}
         role="tree"

package/src/components/ai-elements/inline-citation.tsx

@@ -261,13 +261,13 @@ export const InlineCitationSource = ({
 }: InlineCitationSourceProps) => (
   <div className={cn("space-y-1", className)} {...props}>
     {title && (
-      <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>
+      <h4 className="truncate font-medium text-base leading-tight">{title}</h4>
     )}
     {url && (
       <p className="truncate break-all text-muted-foreground text-xs">{url}</p>
     )}
     {description && (
-      <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
+      <p className="line-clamp-3 text-muted-foreground text-base leading-relaxed">
         {description}
       </p>
     )}
@@ -284,7 +284,7 @@ export const InlineCitationQuote = ({
 }: InlineCitationQuoteProps) => (
   <blockquote
     className={cn(
-      "border-muted border-l-2 pl-3 text-muted-foreground text-sm italic",
+      "border-muted border-l-2 pl-3 text-muted-foreground text-base italic",
       className
     )}
     {...props}

package/src/components/ai-elements/jsx-preview.tsx

@@ -229,7 +229,7 @@ export const JSXPreviewError = memo(
     return (
       <div
         className={cn(
-          "flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm",
+          "flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-destructive text-base",
           className
         )}
         {...props}

package/src/components/ai-elements/message.tsx

@@ -55,7 +55,7 @@ export const MessageContent = ({
 }: MessageContentProps) => (
   <div
     className={cn(
-      "is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
+      "is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-base",
       "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
       "group-[.is-assistant]:text-foreground",
       className

package/src/components/ai-elements/package-info.tsx

@@ -83,7 +83,7 @@ export const PackageInfoName = ({
   return (
     <div className={cn("flex items-center gap-2", className)} {...props}>
       <PackageIcon className="size-4 text-muted-foreground" />
-      <span className="font-medium font-mono text-sm">{children ?? name}</span>
+      <span className="font-medium font-mono text-base">{children ?? name}</span>
     </div>
   );
 };
@@ -150,7 +150,7 @@ export const PackageInfoVersion = ({
   return (
     <div
       className={cn(
-        "mt-2 flex items-center gap-2 font-mono text-muted-foreground text-sm",
+        "mt-2 flex items-center gap-2 font-mono text-muted-foreground text-base",
         className
       )}
       {...props}
@@ -177,7 +177,7 @@ export const PackageInfoDescription = ({
   children,
   ...props
 }: PackageInfoDescriptionProps) => (
-  <p className={cn("mt-2 text-muted-foreground text-sm", className)} {...props}>
+  <p className={cn("mt-2 text-muted-foreground text-base", className)} {...props}>
     {children}
   </p>
 );
@@ -222,7 +222,7 @@ export const PackageInfoDependency = ({
   ...props
 }: PackageInfoDependencyProps) => (
   <div
-    className={cn("flex items-center justify-between text-sm", className)}
+    className={cn("flex items-center justify-between text-base", className)}
     {...props}
   >
     {children ?? (

package/src/components/ai-elements/prompt-input-context.tsx

@@ -245,8 +245,9 @@ export const PromptInputActionAddAttachments = ({
   );
 
   return (
-    <DropdownMenuItem {...props} onSelect={handleSelect}>
-      <ImageIcon className="mr-2 size-4" /> {label}
+    <DropdownMenuItem {...props} onSelect={handleSelect} className="text-sm">
+      <ImageIcon className="size-4" />
+      {label}
     </DropdownMenuItem>
   );
 };

package/src/components/ai-elements/queue.tsx

@@ -37,7 +37,7 @@ export type QueueItemProps = ComponentProps<"li">;
 export const QueueItem = ({ className, ...props }: QueueItemProps) => (
   <li
     className={cn(
-      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-base transition-colors hover:bg-muted",
       className
     )}
     {...props}
@@ -216,7 +216,7 @@ export const QueueSectionTrigger = ({
   <CollapsibleTrigger asChild>
     <button
       className={cn(
-        "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+        "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-base transition-colors hover:bg-muted",
         className
       )}
       type="button"