@sero-ai/ui 0.4.0 → 0.4.2

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}

package/src/components/ai-elements/speech-input.tsx

@@ -101,6 +101,7 @@ export const SpeechInput = ({
   const [isRecognitionReady, setIsRecognitionReady] = useState(false);
   const recognitionRef = useRef<SpeechRecognition | null>(null);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const mediaRecorderCleanupRef = useRef<(() => void) | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const audioChunksRef = useRef<Blob[]>([]);
   const onTranscriptionChangeRef = useRef<
@@ -184,6 +185,7 @@ export const SpeechInput = ({
       if (mediaRecorderRef.current?.state === "recording") {
         mediaRecorderRef.current.stop();
       }
+      mediaRecorderCleanupRef.current?.();
       if (streamRef.current) {
         for (const track of streamRef.current.getTracks()) {
           track.stop();
@@ -216,6 +218,7 @@ export const SpeechInput = ({
           track.stop();
         }
         streamRef.current = null;
+        cleanupMediaRecorder();
 
         const audioBlob = new Blob(audioChunksRef.current, {
           type: "audio/webm",
@@ -242,6 +245,19 @@ export const SpeechInput = ({
           track.stop();
         }
         streamRef.current = null;
+        cleanupMediaRecorder();
+      };
+
+      const cleanupMediaRecorder = () => {
+        mediaRecorder.removeEventListener("dataavailable", handleDataAvailable);
+        mediaRecorder.removeEventListener("stop", handleStop);
+        mediaRecorder.removeEventListener("error", handleError);
+        if (mediaRecorderRef.current === mediaRecorder) {
+          mediaRecorderRef.current = null;
+        }
+        if (mediaRecorderCleanupRef.current === cleanupMediaRecorder) {
+          mediaRecorderCleanupRef.current = null;
+        }
       };
 
       mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
@@ -249,6 +265,7 @@ export const SpeechInput = ({
       mediaRecorder.addEventListener("error", handleError);
 
       mediaRecorderRef.current = mediaRecorder;
+      mediaRecorderCleanupRef.current = cleanupMediaRecorder;
       mediaRecorder.start();
       setIsListening(true);
     } catch {

package/src/components/ai-elements/stack-trace.tsx

@@ -197,7 +197,7 @@ export const StackTrace = memo(
       <StackTraceContext.Provider value={contextValue}>
         <div
           className={cn(
-            "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-sm",
+            "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-base",
             className
           )}
           {...props}

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

@@ -31,7 +31,7 @@ export const TaskItemFile = ({
 export type TaskItemProps = ComponentProps<"div">;
 
 export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
-  <div className={cn("text-muted-foreground text-sm", className)} {...props}>
+  <div className={cn("text-muted-foreground text-base", className)} {...props}>
     {children}
   </div>
 );
@@ -58,9 +58,9 @@ export const TaskTrigger = ({
 }: TaskTriggerProps) => (
   <CollapsibleTrigger asChild className={cn("group", className)} {...props}>
     {children ?? (
-      <div className="flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground">
+      <div className="flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-base transition-colors hover:text-foreground">
         <SearchIcon className="size-4" />
-        <p className="text-sm">{title}</p>
+        <p className="text-base">{title}</p>
         <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
       </div>
     )}

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

@@ -107,7 +107,7 @@ export const TerminalTitle = ({
   ...props
 }: TerminalTitleProps) => (
   <div
-    className={cn("flex items-center gap-2 text-sm text-zinc-400", className)}
+    className={cn("flex items-center gap-2 text-base text-zinc-400", className)}
     {...props}
   >
     <TerminalIcon className="size-4" />
@@ -258,7 +258,7 @@ export const TerminalContent = ({
   return (
     <div
       className={cn(
-        "max-h-96 overflow-auto p-4 font-mono text-sm leading-relaxed",
+        "max-h-96 overflow-auto p-4 font-mono text-base leading-relaxed",
         className
       )}
       ref={containerRef}

package/src/components/ai-elements/test-results.tsx

@@ -151,7 +151,7 @@ export const TestResultsDuration = ({
   }
 
   return (
-    <span className={cn("text-muted-foreground text-sm", className)} {...props}>
+    <span className={cn("text-muted-foreground text-base", className)} {...props}>
       {children ?? formatDuration(summary.duration)}
     </span>
   );
@@ -263,7 +263,7 @@ export const TestSuiteName = ({
     >
       <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
       <TestStatusIcon status={status} />
-      <span className="font-medium text-sm">{children ?? name}</span>
+      <span className="font-medium text-base">{children ?? name}</span>
     </CollapsibleTrigger>
   );
 };
@@ -353,7 +353,7 @@ export const Test = ({
   return (
     <TestContext.Provider value={contextValue}>
       <div
-        className={cn("flex items-center gap-2 px-4 py-2 text-sm", className)}
+        className={cn("flex items-center gap-2 px-4 py-2 text-base", className)}
         {...props}
       >
         {children ?? (
@@ -469,7 +469,7 @@ export const TestErrorMessage = ({
 }: TestErrorMessageProps) => (
   <p
     className={cn(
-      "font-medium text-red-700 text-sm dark:text-red-400",
+      "font-medium text-red-700 text-base dark:text-red-400",
       className
     )}
     {...props}

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

@@ -92,7 +92,7 @@ export const ToolHeader = ({
       {...props}
     >
       <div className="flex items-center gap-2">
-        <WrenchIcon className="size-4 text-muted-foreground" />
+        <WrenchIcon className="size-3.5 text-muted-foreground" />
         <span className="font-medium text-sm">{title ?? derivedName}</span>
         {getStatusBadge(state)}
       </div>
@@ -123,7 +123,7 @@ export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
       Parameters
     </h4>
     <div className="rounded-md bg-muted/50">
-      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+      <CodeBlock className="text-sm" code={JSON.stringify(input, null, 2)} language="json" />
     </div>
   </div>
 );
@@ -147,10 +147,10 @@ export const ToolOutput = ({
 
   if (typeof output === "object" && !isValidElement(output)) {
     Output = (
-      <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />
+      <CodeBlock className="text-sm" code={JSON.stringify(output, null, 2)} language="json" />
     );
   } else if (typeof output === "string") {
-    Output = <CodeBlock code={output} language="json" />;
+    Output = <CodeBlock className="text-sm" code={output} language="json" />;
   }
 
   return (

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

@@ -60,7 +60,7 @@ export const Transcription = ({
     <TranscriptionContext.Provider value={contextValue}>
       <div
         className={cn(
-          "flex flex-wrap gap-1 text-sm leading-relaxed",
+          "flex flex-wrap gap-1 text-base leading-relaxed",
           className
         )}
         data-slot="transcription"

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

@@ -173,7 +173,7 @@ export const WebPreviewUrl = ({
 
   return (
     <Input
-      className="h-8 flex-1 text-sm"
+      className="h-8 flex-1 text-base"
       onChange={onChange ?? handleChange}
       onKeyDown={handleKeyDown}
       placeholder="Enter URL..."
@@ -227,7 +227,7 @@ export const WebPreviewConsole = ({
 
   return (
     <Collapsible
-      className={cn("border-t bg-muted/50 font-mono text-sm", className)}
+      className={cn("border-t bg-muted/50 font-mono text-base", className)}
       onOpenChange={setConsoleOpen}
       open={consoleOpen}
       {...props}

package/src/components/context-editor/CapabilitySection.tsx

@@ -53,7 +53,7 @@ export function CapabilitySection<TItem extends ContextToolInfo | ContextSkillIn
       <div className="space-y-1">
         {items.length > 0 && (
           <div className="mb-1 flex items-center justify-between rounded-md border-b border-border/20 px-2 pb-2">
-            <span className="text-[11px] font-medium text-[var(--text-secondary)]">
+            <span className="text-sm font-medium text-[var(--text-secondary)]">
               {includeAllLabel}
             </span>
             <Switch
@@ -75,7 +75,7 @@ export function CapabilitySection<TItem extends ContextToolInfo | ContextSkillIn
         ))}
 
         {items.length === 0 && (
-          <span className="text-[11px] italic text-[var(--text-muted)]">
+          <span className="text-sm italic text-[var(--text-muted)]">
             {emptyLabel}
           </span>
         )}

package/src/components/context-editor/ContextEditor.tsx

@@ -81,7 +81,7 @@ export function ContextEditor({
         showCloseButton
       >
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 text-sm">
+          <DialogTitle className="flex items-center gap-2 text-base">
             <Settings2 className="size-4 text-[var(--text-muted)]" />
             {title}
           </DialogTitle>
@@ -113,7 +113,7 @@ export function ContextEditor({
         {applyError && (
           <div className="flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-muted px-3 py-2">
             <AlertCircle className="mt-0.5 size-3.5 shrink-0 text-status-error" />
-            <span className="text-[11px] text-status-error">{applyError}</span>
+            <span className="text-sm text-status-error">{applyError}</span>
           </div>
         )}
 

package/src/components/context-editor/PresetBar.tsx

@@ -39,7 +39,7 @@ export function PresetBar({
   return (
     <>
       <div className="flex items-center gap-2">
-        <span className="text-[11px] font-medium text-[var(--text-muted)]">
+        <span className="text-sm font-medium text-[var(--text-muted)]">
           Preset:
         </span>
         <Select value={activePresetId ?? ''} onValueChange={onPresetChange}>
@@ -68,7 +68,7 @@ export function PresetBar({
         {!showSaveInput && (
           <button type="button"
             onClick={onShowSave}
-            className="flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
+            className="flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
           >
             <Save className="size-3" />
             Save as
@@ -78,7 +78,7 @@ export function PresetBar({
         {hasOverrides && (
           <button type="button"
             onClick={onReset}
-            className="ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
+            className="ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
           >
             <RotateCcw className="size-3" />
             Reset

package/src/components/context-editor/SystemPromptSection.tsx

@@ -59,7 +59,7 @@ export function SystemPromptSection({
     >
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <span className="text-[10px] text-[var(--text-muted)]">
+          <span className="text-sm text-[var(--text-muted)]">
             {systemPrompt === null
               ? c.defaultHint
               : systemPrompt === ''
@@ -69,7 +69,7 @@ export function SystemPromptSection({
           {systemPrompt !== null && (
             <button type="button"
               onClick={() => onSystemPromptChange(null)}
-              className="text-[10px] text-[var(--text-muted)] transition-colors hover:text-[var(--text-secondary)]"
+              className="text-sm text-[var(--text-muted)] transition-colors hover:text-[var(--text-secondary)]"
             >
               Reset to default
             </button>
@@ -78,10 +78,10 @@ export function SystemPromptSection({
         <textarea aria-label="System prompt"
           value={displayedPrompt}
           onChange={(event) => onSystemPromptChange(event.target.value)}
-          className="h-80 w-full resize-y rounded-md border border-border/30 bg-[var(--bg-base)] p-2 font-mono text-[11px] text-[var(--text-secondary)] placeholder:text-[var(--text-muted)] outline-none focus:border-[var(--accent-primary)]"
+          className="h-80 w-full resize-y rounded-md border border-border/30 bg-[var(--bg-base)] p-2 font-mono text-sm text-[var(--text-secondary)] placeholder:text-[var(--text-muted)] outline-none focus:border-[var(--accent-primary)]"
           placeholder={c.placeholder}
         />
-        <p className="text-[10px] text-[var(--text-muted)]">{c.footnote}</p>
+        <p className="text-sm text-[var(--text-muted)]">{c.footnote}</p>
       </div>
     </ContextSection>
   );

package/src/components/context-editor/parts.tsx

@@ -94,7 +94,7 @@ export function ContextSection({
         </span>
 
         {count !== undefined && (
-          <span className="text-[11px] text-[var(--text-muted)]">
+          <span className="text-sm text-[var(--text-muted)]">
             ({count})
           </span>
         )}
@@ -102,7 +102,7 @@ export function ContextSection({
         {badge && (
           <span
             className={cn(
-              'ml-auto rounded-full px-2 py-0.5 text-[10px] font-medium',
+              'ml-auto rounded-full px-2 py-0.5 text-sm font-medium',
               badgeClass[badgeVariant],
             )}
           >
@@ -154,13 +154,13 @@ export function ToggleRow({
     >
       <div className="min-w-0 flex-1">
         <div className={cn(
-          'text-[11px] font-medium',
+          'text-sm font-medium',
           enabled ? 'text-[var(--text-secondary)]' : 'text-[var(--text-muted)]',
         )}>
           {name}
         </div>
         {description && (
-          <div className="mt-0.5 text-[10px] leading-snug text-[var(--text-muted)]/60">
+          <div className="mt-0.5 text-sm leading-snug text-[var(--text-muted)]/60">
             {description}
           </div>
         )}
@@ -202,13 +202,13 @@ export function SavePresetInput({
       <button type="button"
         onClick={() => name.trim() && onSave(name.trim())}
         disabled={!name.trim()}
-        className="rounded-md bg-[var(--accent-primary)] px-2 py-1 text-[11px] font-medium text-white disabled:opacity-50"
+        className="rounded-md bg-[var(--accent-primary)] px-2 py-1 text-sm font-medium text-white disabled:opacity-50"
       >
         Save
       </button>
       <button type="button"
         onClick={onCancel}
-        className="text-[11px] text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+        className="text-sm text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
       >
         Cancel
       </button>

package/src/components/dashboard/__tests__/catalog.test.ts

@@ -1,10 +1,15 @@
-// Catalogue integrity — keeps the typed catalogue honest against the exports.
+// Catalogue integrity — keeps the JSON catalogue honest against the exports.
 
 import { describe, expect, it } from "vitest";
 
-import { dashboardComponentCatalog } from "../catalog";
+import type { DashboardComponentCatalogEntry } from "../catalog";
+import catalogJson from "../catalog.json";
 import * as dashboard from "../index";
 
+// The JSON is the source of truth. JSON imports widen literal unions to
+// `string`, so assert the authored entry shape for the checks below.
+const dashboardComponentCatalog = catalogJson as DashboardComponentCatalogEntry[];
+
 // Reused primitives live in other component folders, not the dashboard barrel.
 const REUSED_PRIMITIVES = new Set(["Badge", "Alert", "Button", "Skeleton"]);