@sero-ai/ui 0.4.0 → 0.4.2

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,67 +1,43 @@
 {
   "name": "@sero-ai/ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Shared UI components, AI elements, and design tokens for the Sero platform",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./dashboard-catalog": "./src/dashboard-catalog.ts",
-    "./reference": "./src/reference.ts",
-    "./theme": "./src/theme/index.ts",
-    "./theme/*": "./src/theme/*",
-    "./styles/*": "./src/styles/*",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dashboard-catalog.json": "./dist/components/dashboard/catalog.json",
+    "./reference": {
+      "types": "./dist/reference.d.ts",
+      "import": "./dist/reference.js",
+      "require": "./dist/reference.cjs"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js",
+      "require": "./dist/theme/index.cjs"
+    },
+    "./theme/*": {
+      "types": "./dist/theme/*.d.ts",
+      "import": "./dist/theme/*.js",
+      "require": "./dist/theme/*.cjs"
+    },
+    "./styles/*": "./dist/styles/*",
     "./package.json": "./package.json",
-    "./*": "./src/*"
-  },
-  "scripts": {
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
-  },
-  "publishConfig": {
-    "main": "./dist/index.js",
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "require": "./dist/index.cjs"
-      },
-      "./dashboard-catalog": {
-        "types": "./dist/dashboard-catalog.d.ts",
-        "import": "./dist/dashboard-catalog.js",
-        "require": "./dist/dashboard-catalog.cjs"
-      },
-      "./reference": {
-        "types": "./dist/reference.d.ts",
-        "import": "./dist/reference.js",
-        "require": "./dist/reference.cjs"
-      },
-      "./theme": {
-        "types": "./dist/theme/index.d.ts",
-        "import": "./dist/theme/index.js",
-        "require": "./dist/theme/index.cjs"
-      },
-      "./theme/*": {
-        "types": "./dist/theme/*.d.ts",
-        "import": "./dist/theme/*.js",
-        "require": "./dist/theme/*.cjs"
-      },
-      "./styles/*": "./dist/styles/*",
-      "./package.json": "./package.json",
-      "./*": {
-        "types": "./dist/*.d.ts",
-        "import": "./dist/*.js",
-        "require": "./dist/*.cjs"
-      }
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
     }
   },
   "peerDependencies": {
-    "react": "catalog:peer",
-    "react-dom": "catalog:peer"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
@@ -70,7 +46,6 @@
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@remixicon/react": "^4.9.0",
     "@rive-app/react-webgl2": "^4.27.1",
-    "@sero-ai/common": "workspace:*",
     "@streamdown/cjk": "^1.0.2",
     "@streamdown/code": "^1.1.0",
     "@streamdown/math": "^1.0.2",
@@ -84,9 +59,9 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "catalog:",
+    "lucide-react": "^0.563.0",
     "media-chrome": "^4.18.0",
-    "motion": "catalog:",
+    "motion": "^12.34.0",
     "nanoid": "^5.1.11",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
@@ -95,28 +70,36 @@
     "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": "catalog:",
+    "streamdown": "^2.5.0",
     "tailwind-merge": "^3.5.0",
     "tokenlens": "^1.3.1",
     "use-stick-to-bottom": "^1.1.4",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "@sero-ai/common": "0.3.1"
   },
   "devDependencies": {
     "@hookform/resolvers": "^5.2.2",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "jsdom": "^26.1.0",
-    "react": "catalog:peer",
-    "react-dom": "catalog:peer",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "shadcn": "^3.8.5",
-    "tailwindcss": "catalog:",
+    "tailwindcss": "4.1.18",
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
-    "typescript": "catalog:",
-    "vitest": "catalog:"
-  }
-}
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.7"
+  },
+  "scripts": {
+    "build": "tsup && tsup --config tsup.reference.config.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "smoke": "node scripts/smoke-dist.mjs"
+  },
+  "module": "./dist/index.js"
+}

package/scripts/ensure-pnpm-publish.mjs

@@ -0,0 +1,23 @@
+// Publish guard — this package MUST be published with `pnpm publish`.
+//
+// The `publishConfig` block swaps main/types/exports over to the built `dist/`
+// at publish time. That override is a pnpm (and yarn) feature; plain npm
+// IGNORES it and publishes the top-level fields, which point at `src/`. So
+// `npm publish` here silently ships raw TypeScript source instead of the
+// compiled package — exactly how 0.4.0 went out wrong.
+//
+// This runs from `prepublishOnly`, so it fires on every publish. It aborts
+// unless the invoking package manager is pnpm.
+
+const ua = process.env.npm_config_user_agent ?? "";
+
+if (!ua.startsWith("pnpm")) {
+  const tool = ua.split("/")[0] || "an unknown tool";
+  console.error(
+    `\n✖ @sero-ai/ui must be published with pnpm, but this ran under ${tool}.\n\n` +
+      "  Plain npm ignores the publishConfig dist overrides and would ship raw\n" +
+      "  TypeScript source instead of the built dist/. Use:\n\n" +
+      "      pnpm publish   (from packages/ui)\n",
+  );
+  process.exit(1);
+}

package/scripts/smoke-dist.mjs

@@ -0,0 +1,68 @@
+// Smoke test for the published artifact.
+//
+// The package is bundle:false and bundler-resolved, so its public entrypoints
+// are easy to break under raw Node ESM (extensionless / directory imports).
+// This runs the built dist the way a published consumer would: it imports the
+// reference entry (ESM + CJS) and reads the catalogue JSON, failing loudly if
+// any entrypoint no longer resolves. Run after `pnpm build`.
+
+import { createRequire } from "node:module";
+import { existsSync, readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const require = createRequire(import.meta.url);
+const here = dirname(fileURLToPath(import.meta.url));
+const dist = resolve(here, "..", "dist");
+
+const fail = (msg) => {
+  console.error(`✗ ${msg}`);
+  process.exitCode = 1;
+};
+
+if (!existsSync(dist)) {
+  fail("dist/ is missing — run `pnpm build` first");
+  process.exit(1);
+}
+
+// 1. Reference entrypoint resolves as ESM and exposes the example widgets.
+const EXPECTED = [
+  "StarterExample",
+  "SchedulerExample",
+  "ResourceExample",
+  "ActivityExample",
+];
+
+const esm = await import(resolve(dist, "reference.js"));
+for (const name of EXPECTED) {
+  if (typeof esm[name] !== "function") fail(`reference.js missing export ${name}`);
+}
+
+// 2. Reference entrypoint resolves as CJS too.
+const cjs = require(resolve(dist, "reference.cjs"));
+for (const name of EXPECTED) {
+  if (typeof cjs[name] !== "function") fail(`reference.cjs missing export ${name}`);
+}
+
+// The publishConfig `types` map points at these; a clean-race once dropped them.
+for (const f of ["reference.d.ts", "reference.d.cts"]) {
+  if (!existsSync(resolve(dist, f))) fail(`${f} not emitted to dist`);
+}
+
+// 3. Catalogue ships as plain JSON with the expected shape.
+const catalogPath = resolve(dist, "components", "dashboard", "catalog.json");
+if (!existsSync(catalogPath)) fail("dashboard-catalog.json not emitted to dist");
+else {
+  const catalog = JSON.parse(readFileSync(catalogPath, "utf8"));
+  if (!Array.isArray(catalog) || catalog.length === 0) {
+    fail("dashboard-catalog.json is not a non-empty array");
+  } else if (!catalog.every((e) => e.name && e.category && e.kind)) {
+    fail("dashboard-catalog.json has malformed entries");
+  }
+}
+
+if (process.exitCode) {
+  console.error("Smoke test failed.");
+} else {
+  console.log("✓ dist entrypoints resolve (reference esm+cjs, catalog json)");
+}

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"