Add breadcrumb to JSON component registry

src/components/atoms/Breadcrumb.tsx

@@ -17,19 +17,19 @@ export function BreadcrumbNav({ items, className }: BreadcrumbNavProps) {
     <nav aria-label="Breadcrumb" className={cn('flex items-center gap-2', className)}>
       {items.map((item, index) => {
         const isLast = index === items.length - 1
+        const linkClassName = cn(
+          'text-sm transition-colors',
+          isLast ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground'
+        )
 
         return (
           <div key={index} className="flex items-center gap-2">
-            {item.href || item.onClick ? (
-              <button
-                onClick={item.onClick}
-                className={cn(
-                  'text-sm transition-colors',
-                  isLast
-                    ? 'text-foreground font-medium'
-                    : 'text-muted-foreground hover:text-foreground'
-                )}
-              >
+            {item.href ? (
+              <a href={item.href} onClick={item.onClick} className={linkClassName}>
+                {item.label}
+              </a>
+            ) : item.onClick ? (
+              <button onClick={item.onClick} className={linkClassName}>
                 {item.label}
               </button>
             ) : (
@@ -49,3 +49,5 @@ export function BreadcrumbNav({ items, className }: BreadcrumbNavProps) {
     </nav>
   )
 }
+
+export const Breadcrumb = BreadcrumbNav

src/components/atoms/index.ts

@@ -54,7 +54,7 @@ export { Timestamp } from './Timestamp'
 export { ScrollArea } from './ScrollArea'
 
 export { Tag } from './Tag'
-export { BreadcrumbNav } from './Breadcrumb'
+export { Breadcrumb, BreadcrumbNav } from './Breadcrumb'
 export { IconText } from './IconText'
 export { TextArea } from './TextArea'
 export { Input } from './Input'
@@ -118,4 +118,3 @@ export { MetricDisplay } from './MetricDisplay'
 export { KeyValue } from './KeyValue'
 export { EmptyMessage } from './EmptyMessage'
 export { StepIndicator } from './StepIndicator'
-

src/lib/component-definitions.ts

@@ -224,6 +224,19 @@ export const componentDefinitions: ComponentDefinition[] = [
     canHaveChildren: true,
     defaultProps: { href: '#', children: 'Link' }
   },
+  {
+    type: 'Breadcrumb',
+    label: 'Breadcrumb',
+    category: 'navigation',
+    icon: 'CaretRight',
+    canHaveChildren: false,
+    defaultProps: {
+      items: [
+        { label: 'Home', href: '/' },
+        { label: 'Current' }
+      ]
+    }
+  },
   // Feedback Components
   {
     type: 'Alert',

src/lib/json-ui/component-registry.ts

@@ -141,6 +141,11 @@ export const atomComponents: UIComponentRegistry = buildRegistryFromNames(
   AtomComponents as Record<string, ComponentType<any>>
 )
 
+const breadcrumbComponent = AtomComponents.Breadcrumb ?? AtomComponents.BreadcrumbNav
+if (breadcrumbComponent) {
+  atomComponents.Breadcrumb = breadcrumbComponent as ComponentType<any>
+}
+
 export const moleculeComponents: UIComponentRegistry = buildRegistryFromNames(
   moleculeRegistryNames,
   MoleculeComponents as Record<string, ComponentType<any>>

src/types/json-ui.ts

@@ -4,7 +4,7 @@ export type ComponentType =
   | 'Input' | 'TextArea' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'NumberInput'
   | 'Badge' | 'Progress' | 'Separator' | 'Tabs' | 'TabsContent' | 'TabsList' | 'TabsTrigger' | 'Dialog'
   | 'Text' | 'Heading' | 'Label' | 'List' | 'Grid' | 'Stack' | 'Flex' | 'Container'
-  | 'Link' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'
+  | 'Link' | 'Breadcrumb' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'
   | 'Alert' | 'InfoBox' | 'EmptyState' | 'StatusBadge' 
   | 'Table' | 'KeyValue' | 'StatCard' | 'DataCard' | 'SearchInput' | 'ActionBar'
   | 'AppBranding' | 'LabelWithBadge' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState' | 'NavigationGroupHeader'