@sero-ai/ui 0.4.1 → 0.5.0

package/scripts/smoke-dist.mjs

@@ -7,13 +7,14 @@
 // any entrypoint no longer resolves. Run after `pnpm build`.
 
 import { createRequire } from "node:module";
-import { existsSync, readFileSync } from "node:fs";
+import { existsSync, readFileSync, statSync } 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 packageRoot = resolve(here, "..");
 
 const fail = (msg) => {
   console.error(`✗ ${msg}`);
@@ -25,6 +26,105 @@ if (!existsSync(dist)) {
   process.exit(1);
 }
 
+// The lightweight root must not re-export specialized dependency graphs.
+const rootEntries = ["index.js", "index.cjs", "index.d.ts", "index.d.cts"];
+const forbiddenRootImports = [
+  "@sero-ai/ui/ai-elements",
+  "@sero-ai/ui/model-selection",
+  "@sero-ai/ui/components/context-editor",
+  "components/ai-elements",
+  "components/model-selection",
+  "components/context-editor",
+  "mermaid",
+  "shiki",
+  "react-jsx-parser",
+  "streamdown",
+  "unified",
+];
+
+const importPatterns = [
+  /(?:from\s+|import\s*)["'](\.[^"']+)["']/g,
+  /(?:require|import)\(\s*["'](\.[^"']+)["']\s*\)/g,
+];
+
+function localImports(contents) {
+  return importPatterns.flatMap((pattern) =>
+    [...contents.matchAll(pattern)].map((match) => match[1]),
+  );
+}
+
+function emittedExtension(file) {
+  if (file.endsWith(".d.cts")) return ".d.cts";
+  if (file.endsWith(".d.ts")) return ".d.ts";
+  if (file.endsWith(".cjs")) return ".cjs";
+  return ".js";
+}
+
+function resolveLocalImport(fromFile, specifier) {
+  const base = resolve(dirname(fromFile), specifier);
+  const extension = emittedExtension(fromFile);
+  const candidates = [];
+
+  if (extension.startsWith(".d.") && specifier.endsWith(".js")) {
+    candidates.push(base.replace(/\.js$/, extension));
+  }
+  candidates.push(base, `${base}${extension}`, resolve(base, `index${extension}`));
+
+  return candidates.find(
+    (candidate) => existsSync(candidate) && statSync(candidate).isFile(),
+  );
+}
+
+function inspectRootGraph(entry) {
+  const pending = [resolve(dist, entry)];
+  const visited = new Set();
+
+  while (pending.length > 0) {
+    const file = pending.pop();
+    if (visited.has(file)) continue;
+    visited.add(file);
+
+    const contents = readFileSync(file, "utf8");
+    const relativeFile = file.slice(dist.length + 1);
+    const leak = forbiddenRootImports.find(
+      (dependency) =>
+        relativeFile.includes(dependency) || contents.includes(dependency),
+    );
+    if (leak) fail(`${relativeFile} exposes unrelated dependency ${leak}`);
+
+    for (const specifier of localImports(contents)) {
+      const dependency = resolveLocalImport(file, specifier);
+      if (dependency) pending.push(dependency);
+      else fail(`${relativeFile} has unresolved local import ${specifier}`);
+    }
+  }
+}
+
+for (const file of rootEntries) {
+  inspectRootGraph(file);
+}
+
+// Specialized components remain available through stable public subpaths.
+const packageJson = JSON.parse(
+  readFileSync(resolve(packageRoot, "package.json"), "utf8"),
+);
+for (const [subpath, output] of [
+  ["./ai-elements/*", "components/ai-elements/message.js"],
+  ["./model-selection/*", "components/model-selection/available-model-picker.js"],
+]) {
+  if (!packageJson.publishConfig.exports[subpath]) {
+    fail(`publishConfig is missing ${subpath}`);
+  }
+  if (!existsSync(resolve(dist, output))) fail(`${output} not emitted to dist`);
+}
+for (const style of [
+  "styles/ai-elements.css",
+  "styles/model-selection.css",
+  "styles/context-editor.css",
+]) {
+  if (!existsSync(resolve(dist, style))) fail(`${style} not emitted to dist`);
+}
+
 // 1. Reference entrypoint resolves as ESM and exposes the example widgets.
 const EXPECTED = [
   "StarterExample",
@@ -64,5 +164,7 @@ else {
 if (process.exitCode) {
   console.error("Smoke test failed.");
 } else {
-  console.log("✓ dist entrypoints resolve (reference esm+cjs, catalog json)");
+  console.log(
+    "✓ dist entrypoints resolve and the root excludes specialized dependencies",
+  );
 }

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"

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

@@ -177,7 +177,7 @@ export const ReasoningTrigger = memo(
     return (
       <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}
@@ -211,7 +211,7 @@ export const ReasoningContent = memo(
   ({ className, children, ...props }: ReasoningContentProps) => (
     <CollapsibleContent
       className={cn(
-        "mt-4 text-sm",
+        "mt-4 text-base",
         "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
         className
       )}

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

@@ -53,7 +53,7 @@ export const SandboxHeader = ({
   >
     <div className="flex items-center gap-2">
       <Code className="size-4 text-muted-foreground" />
-      <span className="font-medium text-sm">{title}</span>
+      <span className="font-medium text-base">{title}</span>
       {getStatusBadge(state)}
     </div>
     <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
@@ -116,7 +116,7 @@ export const SandboxTabsTrigger = ({
 }: SandboxTabsTriggerProps) => (
   <TabsTrigger
     className={cn(
-      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-base transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
       className
     )}
     {...props}
@@ -129,5 +129,5 @@ export const SandboxTabContent = ({
   className,
   ...props
 }: SandboxTabContentProps) => (
-  <TabsContent className={cn("mt-0 text-sm", className)} {...props} />
+  <TabsContent className={cn("mt-0 text-base", className)} {...props} />
 );

package/src/components/ai-elements/schema-display.tsx

@@ -174,7 +174,7 @@ export const SchemaDisplayPath = ({
 
   return (
     <span
-      className={cn("font-mono text-sm", className)}
+      className={cn("font-mono text-base", className)}
       // biome-ignore lint/security/noDangerouslySetInnerHtml: "needed for parameter highlighting"
       // oxlint-disable-next-line eslint-plugin-react(no-danger)
       dangerouslySetInnerHTML={{ __html: children ?? highlightedPath }}
@@ -196,7 +196,7 @@ export const SchemaDisplayDescription = ({
   return (
     <p
       className={cn(
-        "border-b px-4 py-3 text-muted-foreground text-sm",
+        "border-b px-4 py-3 text-muted-foreground text-base",
         className
       )}
       {...props}
@@ -231,7 +231,7 @@ export const SchemaDisplayParameters = ({
     <Collapsible className={cn(className)} defaultOpen {...props}>
       <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50">
         <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-        <span className="font-medium text-sm">Parameters</span>
+        <span className="font-medium text-base">Parameters</span>
         <Badge className="ml-auto text-xs" variant="secondary">
           {parameters?.length}
         </Badge>
@@ -262,7 +262,7 @@ export const SchemaDisplayParameter = ({
 }: SchemaDisplayParameterProps) => (
   <div className={cn("px-4 py-3 pl-10", className)} {...props}>
     <div className="flex items-center gap-2">
-      <span className="font-mono text-sm">{name}</span>
+      <span className="font-mono text-base">{name}</span>
       <Badge className="text-xs" variant="outline">
         {type}
       </Badge>
@@ -281,7 +281,7 @@ export const SchemaDisplayParameter = ({
       )}
     </div>
     {description && (
-      <p className="mt-1 text-muted-foreground text-sm">{description}</p>
+      <p className="mt-1 text-muted-foreground text-base">{description}</p>
     )}
   </div>
 );
@@ -299,7 +299,7 @@ export const SchemaDisplayRequest = ({
     <Collapsible className={cn(className)} defaultOpen {...props}>
       <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50">
         <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-        <span className="font-medium text-sm">Request Body</span>
+        <span className="font-medium text-base">Request Body</span>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="border-t">
@@ -326,7 +326,7 @@ export const SchemaDisplayResponse = ({
     <Collapsible className={cn(className)} defaultOpen {...props}>
       <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50">
         <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-        <span className="font-medium text-sm">Response</span>
+        <span className="font-medium text-base">Response</span>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="border-t">
@@ -382,7 +382,7 @@ export const SchemaDisplayProperty = ({
           style={{ paddingLeft }}
         >
           <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-          <span className="font-mono text-sm">{name}</span>
+          <span className="font-mono text-base">{name}</span>
           <Badge className="text-xs" variant="outline">
             {type}
           </Badge>
@@ -397,7 +397,7 @@ export const SchemaDisplayProperty = ({
         </CollapsibleTrigger>
         {description && (
           <p
-            className="pb-2 text-muted-foreground text-sm"
+            className="pb-2 text-muted-foreground text-base"
             style={{ paddingLeft: paddingLeft + 24 }}
           >
             {description}
@@ -434,7 +434,7 @@ export const SchemaDisplayProperty = ({
       <div className="flex items-center gap-2">
         {/* Spacer for alignment */}
         <span className="size-4" />
-        <span className="font-mono text-sm">{name}</span>
+        <span className="font-mono text-base">{name}</span>
         <Badge className="text-xs" variant="outline">
           {type}
         </Badge>
@@ -448,7 +448,7 @@ export const SchemaDisplayProperty = ({
         )}
       </div>
       {description && (
-        <p className="mt-1 pl-6 text-muted-foreground text-sm">{description}</p>
+        <p className="mt-1 pl-6 text-muted-foreground text-base">{description}</p>
       )}
     </div>
   );
@@ -463,7 +463,7 @@ export const SchemaDisplayExample = ({
 }: SchemaDisplayExampleProps) => (
   <pre
     className={cn(
-      "mx-4 mb-4 overflow-auto rounded-md bg-muted p-4 font-mono text-sm",
+      "mx-4 mb-4 overflow-auto rounded-md bg-muted p-4 font-mono text-base",
       className
     )}
     {...props}