@toolr/ui-design 0.1.2 → 0.1.4

package/components/ui/registry-detail.tsx

@@ -29,6 +29,7 @@ export interface RegistryDetailProps {
   // File structure (rendered when files + onFetchContent are provided)
   files?: FileStructureSectionProps['files']
   rootName?: string
+  fileStructureVariant?: FileStructureSectionProps['variant']
   onFetchContent?: FileStructureSectionProps['onFetchContent']
 
   // Above header (e.g. badge row)
@@ -121,7 +122,7 @@ function CompatibleWithSection({ tools }: { tools: string[] }) {
         {tools.map((tool) => (
           <div key={tool} className="flex flex-col items-center gap-1">
             <AiToolIcon tool={tool} size={18} />
-            <span className="text-[10px] text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
+            <span className="text-xss text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
           </div>
         ))}
       </div>
@@ -145,6 +146,7 @@ export function RegistryDetail({
   compatibleTools,
   files,
   rootName,
+  fileStructureVariant,
   onFetchContent,
   aboveHeader,
   maxWidth = 'max-w-[1440px]',
@@ -160,7 +162,7 @@ export function RegistryDetail({
           <div className="min-w-0">
             <div className="flex items-center gap-3 flex-wrap">
               <Icon className={`w-6 h-6 shrink-0 ${iconColor}`} />
-              <h2 className="text-xl font-semibold text-neutral-200">{title}</h2>
+              <h2 className="text-lg font-semibold text-neutral-200">{title}</h2>
               {labels && labels.length > 0 && labels.map((labelProps, i) => (
                 <Label key={i} size="lg" {...labelProps} />
               ))}
@@ -210,6 +212,7 @@ export function RegistryDetail({
         {/* File structure */}
         {files && onFetchContent && rootName && (
           <FileStructureSection
+            variant={fileStructureVariant}
             files={files}
             rootName={rootName}
             onFetchContent={onFetchContent}

package/components/ui/resizable-textarea.tsx

@@ -176,8 +176,8 @@ function ResizableCode({
               inherit: true,
               rules: [],
               colors: {
-                'editor.background': variant === 'filled' ? '#262626' : '#00000000',
-                'editorGutter.background': variant === 'filled' ? '#262626' : '#00000000',
+                'editor.background': variant === 'filled' ? '#000000' : '#00000000',
+                'editorGutter.background': variant === 'filled' ? '#000000' : '#00000000',
                 'editor.lineHighlightBackground': '#00000000',
                 'editor.lineHighlightBorder': '#00000000',
               },

package/components/ui/segmented-toggle.tsx

@@ -12,7 +12,7 @@ export interface SegmentedToggleProps<T extends string> {
   options: SegmentedToggleOption<T>[]
   value: T
   onChange: (value: T) => void
-  accentColor?: 'blue' | 'purple' | 'orange' | 'green' | 'pink' | 'amber' | 'emerald' | 'teal' | 'sky'
+  accentColor?: 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
   /** Visual style: 'filled' (default) has a container background, 'outline' is transparent */
   variant?: 'filled' | 'outline'
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
@@ -34,8 +34,8 @@ const ICON_SIZE_CLASSES = {
 
 /** Text label button sizes — horizontal padding instead of fixed width */
 const TEXT_SIZE_CLASSES = {
-  xss: 'h-[18px] px-1.5 text-[9px]',
-  xs: 'h-6 px-2 text-[10px]',
+  xss: 'h-[18px] px-1.5 text-xss',
+  xs: 'h-6 px-2 text-xss',
   sm: 'h-7 px-2.5 text-xs',
   md: 'h-8 px-3 text-xs',
   lg: 'h-9 px-3.5 text-sm',
@@ -51,38 +51,56 @@ const ROUNDING_CLASSES = {
 
 const ACTIVE_COLORS: Record<string, string> = {
   blue: 'bg-blue-500/20 text-blue-300 border-blue-500/40',
-  purple: 'bg-purple-500/20 text-purple-300 border-purple-500/40',
-  orange: 'bg-orange-500/20 text-orange-300 border-orange-500/40',
   green: 'bg-green-500/20 text-green-300 border-green-500/40',
-  pink: 'bg-pink-500/20 text-pink-300 border-pink-500/40',
-  amber: 'bg-amber-500/20 text-amber-300 border-amber-500/40',
+  red: 'bg-red-500/20 text-red-300 border-red-500/40',
+  orange: 'bg-orange-500/20 text-orange-300 border-orange-500/40',
+  cyan: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/40',
+  yellow: 'bg-yellow-500/20 text-yellow-300 border-yellow-500/40',
+  purple: 'bg-purple-500/20 text-purple-300 border-purple-500/40',
+  indigo: 'bg-indigo-500/20 text-indigo-300 border-indigo-500/40',
   emerald: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40',
-  teal: 'bg-teal-500/20 text-teal-300 border-teal-500/40',
+  amber: 'bg-amber-500/20 text-amber-300 border-amber-500/40',
+  violet: 'bg-violet-500/20 text-violet-300 border-violet-500/40',
+  neutral: 'bg-neutral-500/20 text-neutral-300 border-neutral-500/40',
   sky: 'bg-sky-500/20 text-sky-300 border-sky-500/40',
+  pink: 'bg-pink-500/20 text-pink-300 border-pink-500/40',
+  teal: 'bg-teal-500/20 text-teal-300 border-teal-500/40',
 }
 
 const HOVER_COLORS: Record<string, string> = {
   blue: 'hover:bg-blue-500/15 hover:text-blue-300',
-  purple: 'hover:bg-purple-500/15 hover:text-purple-300',
-  orange: 'hover:bg-orange-500/15 hover:text-orange-300',
   green: 'hover:bg-green-500/15 hover:text-green-300',
-  pink: 'hover:bg-pink-500/15 hover:text-pink-300',
-  amber: 'hover:bg-amber-500/15 hover:text-amber-300',
+  red: 'hover:bg-red-500/15 hover:text-red-300',
+  orange: 'hover:bg-orange-500/15 hover:text-orange-300',
+  cyan: 'hover:bg-cyan-500/15 hover:text-cyan-300',
+  yellow: 'hover:bg-yellow-500/15 hover:text-yellow-300',
+  purple: 'hover:bg-purple-500/15 hover:text-purple-300',
+  indigo: 'hover:bg-indigo-500/15 hover:text-indigo-300',
   emerald: 'hover:bg-emerald-500/15 hover:text-emerald-300',
-  teal: 'hover:bg-teal-500/15 hover:text-teal-300',
+  amber: 'hover:bg-amber-500/15 hover:text-amber-300',
+  violet: 'hover:bg-violet-500/15 hover:text-violet-300',
+  neutral: 'hover:bg-neutral-500/15 hover:text-neutral-300',
   sky: 'hover:bg-sky-500/15 hover:text-sky-300',
+  pink: 'hover:bg-pink-500/15 hover:text-pink-300',
+  teal: 'hover:bg-teal-500/15 hover:text-teal-300',
 }
 
 const OUTLINE_CONTAINER: Record<string, string> = {
   blue: 'flex items-center border border-blue-500/50 rounded-md',
-  purple: 'flex items-center border border-purple-500/50 rounded-md',
-  orange: 'flex items-center border border-orange-500/50 rounded-md',
   green: 'flex items-center border border-green-500/50 rounded-md',
-  pink: 'flex items-center border border-pink-500/50 rounded-md',
-  amber: 'flex items-center border border-amber-500/50 rounded-md',
+  red: 'flex items-center border border-red-500/50 rounded-md',
+  orange: 'flex items-center border border-orange-500/50 rounded-md',
+  cyan: 'flex items-center border border-cyan-500/50 rounded-md',
+  yellow: 'flex items-center border border-yellow-500/50 rounded-md',
+  purple: 'flex items-center border border-purple-500/50 rounded-md',
+  indigo: 'flex items-center border border-indigo-500/50 rounded-md',
   emerald: 'flex items-center border border-emerald-500/50 rounded-md',
-  teal: 'flex items-center border border-teal-500/50 rounded-md',
+  amber: 'flex items-center border border-amber-500/50 rounded-md',
+  violet: 'flex items-center border border-violet-500/50 rounded-md',
+  neutral: 'flex items-center border border-neutral-500/50 rounded-md',
   sky: 'flex items-center border border-sky-500/50 rounded-md',
+  pink: 'flex items-center border border-pink-500/50 rounded-md',
+  teal: 'flex items-center border border-teal-500/50 rounded-md',
 }
 
 export function SegmentedToggle<T extends string>({

package/components/ui/select.tsx

@@ -29,7 +29,7 @@ const VARIANT_CLASSES = {
 }
 
 const SIZE_CLASSES = {
-  xss: 'h-[18px] px-1.5 text-[10px]',
+  xss: 'h-[18px] px-1.5 text-xss',
   xs: 'h-6 px-2 text-xs',
   sm: 'h-7 px-2 text-xs',
   md: 'h-8 px-3 text-sm',
@@ -134,7 +134,7 @@ export function Select<T extends string | number = string>({
       {isOpen && menuPos && createPortal(
         <div
           ref={menuRef}
-          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}
+          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}
           style={{
             top: menuPos.top,
             left: align === 'right' ? undefined : menuPos.left,
@@ -154,7 +154,7 @@ export function Select<T extends string | number = string>({
                 onPointerEnter={() => setHighlightIdx(idx)}
                 className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${
                   isHighlighted
-                    ? 'bg-neutral-600 text-neutral-200'
+                    ? `${FORM_COLORS[color].selectedBg} text-neutral-200`
                     : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
                 }`}
               >

package/components/ui/selection-grid.tsx

@@ -6,7 +6,7 @@ import {
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import type { IconName } from './icon-button.tsx'
-import { ConfirmBadge, type ConfirmBadgeColor } from './confirm-badge.tsx'
+import type { ConfirmBadgeColor } from './confirm-badge.tsx'
 import { cn } from '../lib/cn.ts'
 import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
 
@@ -233,23 +233,17 @@ function GridCard({ item, selected, onClick }: CardProps) {
       className={cn(
         'relative p-3 rounded-lg text-center transition-all border-2 flex flex-col items-center',
         item.disabled
-          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-black'
+          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]'
           : selected
             ? 'cursor-pointer'
-            : 'bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer',
+            : 'bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
       )}
       style={
         selected && !item.disabled
-          ? { borderColor: color, backgroundColor: `${color}15` }
+          ? { borderColor: color }
           : undefined
       }
     >
-      {selected && !item.disabled && (
-        <span className="absolute top-1 right-1">
-          <ConfirmBadge color={item.badgeColor || 'blue'} size="xs" />
-        </span>
-      )}
-
       {Icon && (
         <Icon
           className="w-7 h-7 mb-1"
@@ -278,23 +272,17 @@ function ListCard({ item, selected, onClick }: CardProps) {
       className={cn(
         'relative p-3 rounded-lg transition-all border-2 flex items-center gap-3 text-left',
         item.disabled
-          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-black'
+          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]'
           : selected
             ? 'cursor-pointer'
-            : 'bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer',
+            : 'bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
       )}
       style={
         selected && !item.disabled
-          ? { borderColor: color, backgroundColor: `${color}15` }
+          ? { borderColor: color }
           : undefined
       }
     >
-      {selected && !item.disabled && (
-        <span className="absolute top-1 right-1">
-          <ConfirmBadge color={item.badgeColor || 'blue'} size="xs" />
-        </span>
-      )}
-
       {Icon && (
         <Icon
           className="w-5 h-5 flex-shrink-0"

package/components/ui/settings-card.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../lib/cn.ts'
+
+export interface SettingsCardProps {
+  children: React.ReactNode
+  className?: string
+  title?: string
+  description?: string
+  testId?: string
+}
+
+export function SettingsCard({ children, className, title, description, testId }: SettingsCardProps) {
+  return (
+    <div
+      className={cn('bg-neutral-900 border border-neutral-800 rounded-lg p-4 space-y-4', className)}
+      data-testid={testId}
+    >
+      {title && (
+        <div>
+          <h3 className="text-sm font-medium text-neutral-200">{title}</h3>
+          {description && <p className="text-sm text-neutral-500 mt-1">{description}</p>}
+        </div>
+      )}
+      {!title && description && <p className="text-sm text-neutral-500">{description}</p>}
+      {children}
+    </div>
+  )
+}

package/components/ui/settings-info-box.tsx

@@ -0,0 +1,80 @@
+import { Info, AlertTriangle, CheckCircle, AlertCircle } from 'lucide-react'
+import { cn } from '../lib/cn.ts'
+
+export type SettingsInfoBoxColor = 'neutral' | 'blue' | 'amber' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'violet' | 'sky' | 'pink' | 'teal'
+
+export interface SettingsInfoBoxProps {
+  children: React.ReactNode
+  color?: SettingsInfoBoxColor
+  className?: string
+  testId?: string
+}
+
+const iconMap: Record<SettingsInfoBoxColor, typeof Info> = {
+  neutral: Info,
+  blue: Info,
+  amber: AlertTriangle,
+  green: CheckCircle,
+  red: AlertCircle,
+  orange: Info,
+  cyan: Info,
+  yellow: Info,
+  purple: Info,
+  indigo: Info,
+  emerald: Info,
+  violet: Info,
+  sky: Info,
+  pink: Info,
+  teal: Info,
+}
+
+const iconColorMap: Record<SettingsInfoBoxColor, string> = {
+  neutral: 'text-neutral-500',
+  blue: 'text-blue-400',
+  amber: 'text-amber-400',
+  green: 'text-green-400',
+  red: 'text-red-400',
+  orange: 'text-orange-400',
+  cyan: 'text-cyan-400',
+  yellow: 'text-yellow-400',
+  purple: 'text-purple-400',
+  indigo: 'text-indigo-400',
+  emerald: 'text-emerald-400',
+  violet: 'text-violet-400',
+  sky: 'text-sky-400',
+  pink: 'text-pink-400',
+  teal: 'text-teal-400',
+}
+
+const borderColorMap: Record<SettingsInfoBoxColor, string> = {
+  neutral: 'border-l-neutral-600',
+  blue: 'border-l-blue-500',
+  amber: 'border-l-amber-500',
+  green: 'border-l-green-500',
+  red: 'border-l-red-500',
+  orange: 'border-l-orange-500',
+  cyan: 'border-l-cyan-500',
+  yellow: 'border-l-yellow-500',
+  purple: 'border-l-purple-500',
+  indigo: 'border-l-indigo-500',
+  emerald: 'border-l-emerald-500',
+  violet: 'border-l-violet-500',
+  sky: 'border-l-sky-500',
+  pink: 'border-l-pink-500',
+  teal: 'border-l-teal-500',
+}
+
+export function SettingsInfoBox({ children, color = 'neutral', className, testId }: SettingsInfoBoxProps) {
+  const Icon = iconMap[color]
+
+  return (
+    <div
+      className={cn('flex items-start gap-3 border-l-2', borderColorMap[color], className)}
+      style={{ paddingLeft: 10 }}
+      data-testid={testId}
+    >
+      <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', iconColorMap[color])} />
+      <div className="text-sm text-neutral-500">{children}</div>
+    </div>
+  )
+}

package/components/ui/settings-section-title.tsx

@@ -0,0 +1,24 @@
+/**
+ * SettingsSectionTitle - Section header for settings pages
+ *
+ * Used by:
+ * - Settings pages - grouping related settings under a heading
+ * - Configuration panels - section dividers
+ */
+
+export interface SettingsSectionTitleProps {
+  children: React.ReactNode
+  className?: string
+  testId?: string
+}
+
+export function SettingsSectionTitle({ children, className = '', testId }: SettingsSectionTitleProps) {
+  return (
+    <h3
+      className={`text-xs font-medium text-neutral-400 uppercase tracking-wider ${className}`}
+      data-testid={testId}
+    >
+      {children}
+    </h3>
+  )
+}

package/components/ui/snapshot-card.tsx

@@ -59,7 +59,7 @@ export function SnapshotCard({
         </div>
 
         {timestamp && (
-          <p className="mt-1 text-[10px] text-neutral-500">{timestamp}</p>
+          <p className="mt-1 text-xss text-neutral-500">{timestamp}</p>
         )}
 
         {description && (
@@ -70,7 +70,7 @@ export function SnapshotCard({
           <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
             {stats.map((stat) => (
               <div key={stat.label}>
-                <p className="text-[10px] text-neutral-500">{stat.label}</p>
+                <p className="text-xss text-neutral-500">{stat.label}</p>
                 <p className="text-xs font-medium text-neutral-200">{stat.value}</p>
               </div>
             ))}

package/components/ui/snippets-panel.tsx

@@ -63,12 +63,12 @@ export function SnippetsPanel({
   return (
     <div className={cn('flex flex-col bg-neutral-800 rounded-lg overflow-hidden', className)}>
       <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-700">
-        <span className="text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
-        <span className="text-[10px] text-neutral-500">{snippets.length} snippets</span>
+        <span className="text-xss font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
+        <span className="text-xss text-neutral-500">{snippets.length} snippets</span>
       </div>
       {showSearch && (
         <div className="px-2 py-2 border-b border-neutral-700">
-          <div className="flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs">
+          <div className="flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] border border-neutral-700 rounded text-xs">
             <Search className="w-3 h-3 text-neutral-500 shrink-0" />
             <input
               type="text"
@@ -90,7 +90,7 @@ export function SnippetsPanel({
           />
         ))}
         {filteredSnippets.length === 0 && (
-          <p className="text-[11px] text-neutral-500 text-center py-4">No snippets found</p>
+          <p className="text-xss text-neutral-500 text-center py-4">No snippets found</p>
         )}
       </div>
     </div>
@@ -113,7 +113,7 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
           <span className="text-xs font-medium text-neutral-200 truncate">{snippet.label}</span>
           {snippet.language && (
             <span
-              className="px-1.5 py-0.5 text-[9px] font-medium rounded shrink-0"
+              className="px-1.5 py-0.5 text-xss font-medium rounded shrink-0"
               style={{ color: langColor, backgroundColor: `${langColor}20` }}
             >
               {snippet.language}
@@ -140,17 +140,17 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
         </div>
       </div>
       {snippet.description && (
-        <p className="px-2.5 pb-1.5 text-[11px] text-neutral-400 leading-relaxed">{snippet.description}</p>
+        <p className="px-2.5 pb-1.5 text-xss text-neutral-400 leading-relaxed">{snippet.description}</p>
       )}
-      <div className="mx-2.5 mb-2 rounded bg-black border border-neutral-700 overflow-hidden">
-        <pre className="p-2 text-[11px] text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
+      <div className="mx-2.5 mb-2 rounded bg-[var(--background)] border border-neutral-700 overflow-hidden">
+        <pre className="p-2 text-xss text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
           <code>{snippet.code}</code>
         </pre>
       </div>
       {snippet.tags && snippet.tags.length > 0 && (
         <div className="flex flex-wrap gap-1 px-2.5 pb-2">
           {snippet.tags.map((tag) => (
-            <span key={tag} className="px-1.5 py-0.5 text-[9px] rounded bg-neutral-700 text-neutral-500">
+            <span key={tag} className="px-1.5 py-0.5 text-xss rounded bg-neutral-700 text-neutral-500">
               {tag}
             </span>
           ))}

package/components/ui/sort-dropdown.tsx

@@ -88,7 +88,7 @@ export function SortDropdown({
       </button>
 
       {isOpen && (
-        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
           {fields.map((f, idx) => (
             <button
               key={f.value}

package/components/ui/tab-bar.tsx

@@ -54,7 +54,7 @@ export interface TabBarProps {
 }
 
 const sizeConfig = {
-  xss: { text: 'text-[10px]', icon: 'w-2.5 h-2.5', px: 'px-1.5', py: 'py-1', close: 'w-2.5 h-2.5', badgeSize: 'xss' as const, gap: 'gap-1' },
+  xss: { text: 'text-xss', icon: 'w-2.5 h-2.5', px: 'px-1.5', py: 'py-1', close: 'w-2.5 h-2.5', badgeSize: 'xss' as const, gap: 'gap-1' },
   xs: { text: 'text-xs', icon: 'w-3 h-3', px: 'px-2', py: 'py-1', close: 'w-3 h-3', badgeSize: 'xs' as const, gap: 'gap-1' },
   sm: { text: 'text-sm', icon: 'w-3.5 h-3.5', px: 'px-3', py: 'py-1.5', close: 'w-3 h-3', badgeSize: 'sm' as const, gap: 'gap-1.5' },
   md: { text: 'text-base', icon: 'w-4 h-4', px: 'px-4', py: 'py-2', close: 'w-3.5 h-3.5', badgeSize: 'md' as const, gap: 'gap-2' },

package/components/ui/tooltip.tsx

@@ -258,7 +258,7 @@ export function Tooltip({
   const tooltipContent = (
     <div
       ref={tooltipRef}
-      className={`fixed px-3 py-1.5 bg-[var(--popover)] backdrop-blur border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
+      className={`fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
       style={{
         top: coords.top,
         left: coords.left,

package/dist/content.js

@@ -65,7 +65,7 @@ function Callout({ color, children }) {
 }
 function CalloutCode({ color, children }) {
   const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue;
-  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-[13px] ${c.codeText}`, children });
+  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-sm ${c.codeText}`, children });
 }
 function CalloutDim({ children }) {
   return /* @__PURE__ */ jsx("p", { className: "text-neutral-500 mt-1.5", children });
@@ -115,7 +115,7 @@ function TitledLI({ color, title, children }) {
   ] });
 }
 function CalloutDialog({ color, lines }) {
-  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-[13px]", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-sm", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("span", { className: `text-${color}-300 font-semibold mr-1`, children: [
       line.speaker,
       ":"
@@ -131,7 +131,7 @@ function StatusBadge({ value, badgeColor, label, children, even }) {
     DLRow,
     {
       term: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full bg-${badgeColor}-500/20 text-${badgeColor}-400 text-[11px] font-bold shrink-0`, children: value }),
+        /* @__PURE__ */ jsx("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full bg-${badgeColor}-500/20 text-${badgeColor}-400 text-xss font-bold shrink-0`, children: value }),
         /* @__PURE__ */ jsx("span", { className: `text-${badgeColor}-400 font-semibold`, children: label })
       ] }),
       even,