From 92e9b02d6d09c56125a44fafaa13101456146ec5 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sun, 18 Jan 2026 13:16:08 +0000
Subject: [PATCH] Mark breadcrumb as JSON compatible

---
 json-components-registry.json                 |  3 +-
 src/components/atoms/Breadcrumb.tsx           |  4 +--
 src/lib/component-definition-utils.ts         |  4 +--
 src/lib/component-definitions-utils.ts        |  4 +--
 src/lib/component-definitions.ts              | 30 +++++++++++++++++++
 src/lib/json-ui/component-registry.ts         |  2 --
 .../json-ui/wrappers/BreadcrumbWrapper.tsx    | 11 -------
 src/lib/json-ui/wrappers/index.ts             |  1 -
 src/lib/json-ui/wrappers/interfaces.ts        | 10 -------
 src/types/json-ui.ts                          | 10 +++++++
 10 files changed, 46 insertions(+), 33 deletions(-)
 create mode 100644 src/lib/component-definitions.ts
 delete mode 100644 src/lib/json-ui/wrappers/BreadcrumbWrapper.tsx

diff --git a/json-components-registry.json b/json-components-registry.json
index 62e9f19..76d3d47 100644
--- a/json-components-registry.json
+++ b/json-components-registry.json
@@ -698,7 +698,8 @@
       "canHaveChildren": false,
       "description": "Navigation breadcrumb trail using the atoms/BreadcrumbNav JSON-safe items prop",
       "status": "supported",
-      "source": "atoms"
+      "source": "atoms",
+      "jsonCompatible": true
     },
     {
       "type": "ContextMenu",
diff --git a/src/components/atoms/Breadcrumb.tsx b/src/components/atoms/Breadcrumb.tsx
index 4cce34b..5134007 100644
--- a/src/components/atoms/Breadcrumb.tsx
+++ b/src/components/atoms/Breadcrumb.tsx
@@ -8,11 +8,11 @@ interface BreadcrumbItem {
 }
 
 interface BreadcrumbNavProps {
-  items: BreadcrumbItem[]
+  items?: BreadcrumbItem[]
   className?: string
 }
 
-export function BreadcrumbNav({ items, className }: BreadcrumbNavProps) {
+export function BreadcrumbNav({ items = [], className }: BreadcrumbNavProps) {
   return (
     <nav aria-label="Breadcrumb" className={cn('flex items-center gap-2', className)}>
       {items.map((item, index) => {
diff --git a/src/lib/component-definition-utils.ts b/src/lib/component-definition-utils.ts
index 9796af7..e857bfb 100644
--- a/src/lib/component-definition-utils.ts
+++ b/src/lib/component-definition-utils.ts
@@ -1,8 +1,6 @@
-import componentDefinitionsData from '@/lib/component-definitions.json'
 import { ComponentDefinition } from '@/lib/component-definition-types'
 import { ComponentType } from '@/types/json-ui'
-
-export const componentDefinitions = componentDefinitionsData as ComponentDefinition[]
+import { componentDefinitions } from '@/lib/component-definitions'
 
 export function getCategoryComponents(category: string): ComponentDefinition[] {
   return componentDefinitions.filter(c => c.category === category)
diff --git a/src/lib/component-definitions-utils.ts b/src/lib/component-definitions-utils.ts
index 1bc98d4..ffe7ec8 100644
--- a/src/lib/component-definitions-utils.ts
+++ b/src/lib/component-definitions-utils.ts
@@ -1,5 +1,5 @@
 import { ComponentType } from '@/types/json-ui'
-import componentDefinitionsData from '@/lib/component-definitions.json'
+import { componentDefinitions } from '@/lib/component-definitions'
 
 export interface ComponentDefinition {
   type: ComponentType
@@ -10,8 +10,6 @@ export interface ComponentDefinition {
   canHaveChildren?: boolean
 }
 
-export const componentDefinitions = componentDefinitionsData as ComponentDefinition[]
-
 export function getCategoryComponents(category: string): ComponentDefinition[] {
   return componentDefinitions.filter(component => component.category === category)
 }
diff --git a/src/lib/component-definitions.ts b/src/lib/component-definitions.ts
new file mode 100644
index 0000000..c560a1d
--- /dev/null
+++ b/src/lib/component-definitions.ts
@@ -0,0 +1,30 @@
+import componentDefinitionsData from '@/lib/component-definitions.json'
+import type { ComponentDefinition } from '@/lib/component-definition-types'
+
+export const componentDefinitions = (componentDefinitionsData as ComponentDefinition[]).map(
+  (definition) => {
+    if (definition.type !== 'Breadcrumb') {
+      return definition
+    }
+
+    return {
+      ...definition,
+      props: [
+        {
+          name: 'items',
+          type: 'BreadcrumbItem[]',
+          description: 'Breadcrumb items with labels and optional hrefs.',
+          supportsBinding: true,
+        },
+        {
+          name: 'className',
+          type: 'string',
+          description: 'Optional class names for the breadcrumb container.',
+          supportsBinding: true,
+        },
+      ],
+    }
+  }
+)
+
+export default componentDefinitions
diff --git a/src/lib/json-ui/component-registry.ts b/src/lib/json-ui/component-registry.ts
index 90df225..f08ab26 100644
--- a/src/lib/json-ui/component-registry.ts
+++ b/src/lib/json-ui/component-registry.ts
@@ -21,7 +21,6 @@ import * as AtomComponents from '@/components/atoms'
 import * as MoleculeComponents from '@/components/molecules'
 import * as OrganismComponents from '@/components/organisms'
 import {
-  BreadcrumbWrapper,
   LazyBarChartWrapper,
   LazyD3BarChartWrapper,
   LazyLineChartWrapper,
@@ -197,7 +196,6 @@ export const organismComponents: UIComponentRegistry = buildRegistryFromNames(
 )
 
 export const jsonWrapperComponents: UIComponentRegistry = {
-  Breadcrumb: BreadcrumbWrapper,
   SaveIndicator: SaveIndicatorWrapper,
   LazyBarChart: LazyBarChartWrapper,
   LazyLineChart: LazyLineChartWrapper,
diff --git a/src/lib/json-ui/wrappers/BreadcrumbWrapper.tsx b/src/lib/json-ui/wrappers/BreadcrumbWrapper.tsx
deleted file mode 100644
index 22d0a28..0000000
--- a/src/lib/json-ui/wrappers/BreadcrumbWrapper.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { BreadcrumbNav } from '@/components/atoms'
-import { cn } from '@/lib/utils'
-import type { BreadcrumbWrapperProps } from './interfaces'
-
-export function BreadcrumbWrapper({ items = [], className }: BreadcrumbWrapperProps) {
-  if (items.length === 0) {
-    return null
-  }
-
-  return <BreadcrumbNav items={items} className={cn('flex items-center', className)} />
-}
diff --git a/src/lib/json-ui/wrappers/index.ts b/src/lib/json-ui/wrappers/index.ts
index 3e06399..4af1d11 100644
--- a/src/lib/json-ui/wrappers/index.ts
+++ b/src/lib/json-ui/wrappers/index.ts
@@ -1,4 +1,3 @@
-export { BreadcrumbWrapper } from './BreadcrumbWrapper'
 export { SaveIndicatorWrapper } from './SaveIndicatorWrapper'
 export { LazyBarChartWrapper } from './LazyBarChartWrapper'
 export { LazyLineChartWrapper } from './LazyLineChartWrapper'
diff --git a/src/lib/json-ui/wrappers/interfaces.ts b/src/lib/json-ui/wrappers/interfaces.ts
index 3096b76..8cc5469 100644
--- a/src/lib/json-ui/wrappers/interfaces.ts
+++ b/src/lib/json-ui/wrappers/interfaces.ts
@@ -1,15 +1,5 @@
 import type { StorageBackendKey } from '@/components/storage/storageSettingsConfig'
 
-export interface BreadcrumbItem {
-  label: string
-  href?: string
-}
-
-export interface BreadcrumbWrapperProps {
-  items?: BreadcrumbItem[]
-  className?: string
-}
-
 export type SaveIndicatorStatus = 'saved' | 'synced'
 
 export interface SaveIndicatorWrapperProps {
diff --git a/src/types/json-ui.ts b/src/types/json-ui.ts
index 51c6c9b..fb4ec8b 100644
--- a/src/types/json-ui.ts
+++ b/src/types/json-ui.ts
@@ -25,6 +25,16 @@ export type ComponentType =
   | 'PageHeaderContent' | 'PropertyEditor' | 'SchemaEditorCanvas' | 'SchemaEditorLayout'
   | 'SchemaEditorPropertiesPanel' | 'SchemaEditorSidebar' | 'SchemaEditorToolbar' | 'SearchBar' | 'ToolbarActions'
 
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface BreadcrumbProps {
+  items?: BreadcrumbItem[]
+  className?: string
+}
+
 export type ActionType =
   | 'create' | 'update' | 'delete' | 'navigate'
   | 'show-toast' | 'open-dialog' | 'close-dialog'