feat: migrate Tier 3 atoms batch 2 - Breadcrumb through ContextMenu (6 components)

Completed JSON migration for 6 atomic components:
- Breadcrumb: Navigation breadcrumb with configurable items
- Button: Interactive button with icons, loading, and full width support
- Calendar: Date picker using shadcn/ui Calendar
- Card: Container with variants (default, bordered, elevated, flat) and padding options
- Checkbox: Checkbox control with indeterminate state and size variants
- ContextMenu: Right-click context menu with nested submenu support

Changes:
- Created interface definitions in src/lib/json-ui/interfaces/
- Created JSON definitions in src/components/json-definitions/
- Exported all components from src/lib/json-ui/json-components.ts
- Updated json-components-registry.json with conversion metadata
- All components are pure stateless JSON (no hooks required)
- Build verified successful with no new TypeScript errors

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/components/json-definitions/dialog.json

@@ -0,0 +1,85 @@
+{
+  "id": "dialog-root",
+  "type": "Dialog",
+  "bindings": {
+    "open": "data.open",
+    "onOpenChange": "handlers.handleOpenChange"
+  },
+  "children": [
+    {
+      "id": "dialog-trigger",
+      "type": "DialogTrigger",
+      "bindings": {
+        "asChild": true
+      },
+      "children": [
+        {
+          "id": "dialog-trigger-content",
+          "type": "slot",
+          "slot": "trigger",
+          "defaultContent": {
+            "id": "trigger-button",
+            "type": "Button",
+            "bindings": {
+              "children": "data.triggerLabel || 'Open'"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "dialog-content",
+      "type": "DialogContent",
+      "children": [
+        {
+          "id": "dialog-header",
+          "type": "DialogHeader",
+          "children": [
+            {
+              "id": "dialog-title",
+              "type": "DialogTitle",
+              "bindings": {
+                "children": "data.title"
+              }
+            },
+            {
+              "id": "dialog-description",
+              "type": "DialogDescription",
+              "bindings": {
+                "children": "data.description"
+              }
+            }
+          ]
+        },
+        {
+          "id": "dialog-body",
+          "type": "slot",
+          "slot": "children"
+        },
+        {
+          "id": "dialog-footer",
+          "type": "DialogFooter",
+          "children": [
+            {
+              "id": "dialog-close-button",
+              "type": "Button",
+              "bindings": {
+                "variant": "outline",
+                "children": "data.cancelLabel || 'Cancel'",
+                "onClick": "handlers.handleCancel"
+              }
+            },
+            {
+              "id": "dialog-submit-button",
+              "type": "Button",
+              "bindings": {
+                "children": "data.submitLabel || 'Submit'",
+                "onClick": "handlers.handleSubmit"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

src/components/json-definitions/drawer.json

@@ -0,0 +1,86 @@
+{
+  "id": "drawer-root",
+  "type": "Drawer",
+  "bindings": {
+    "open": "data.open",
+    "onOpenChange": "handlers.handleOpenChange",
+    "direction": "data.direction || 'right'"
+  },
+  "children": [
+    {
+      "id": "drawer-trigger",
+      "type": "DrawerTrigger",
+      "bindings": {
+        "asChild": true
+      },
+      "children": [
+        {
+          "id": "drawer-trigger-content",
+          "type": "slot",
+          "slot": "trigger",
+          "defaultContent": {
+            "id": "trigger-button",
+            "type": "Button",
+            "bindings": {
+              "children": "data.triggerLabel || 'Open'"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "drawer-content",
+      "type": "DrawerContent",
+      "children": [
+        {
+          "id": "drawer-header",
+          "type": "DrawerHeader",
+          "children": [
+            {
+              "id": "drawer-title",
+              "type": "DrawerTitle",
+              "bindings": {
+                "children": "data.title"
+              }
+            },
+            {
+              "id": "drawer-description",
+              "type": "DrawerDescription",
+              "bindings": {
+                "children": "data.description"
+              }
+            }
+          ]
+        },
+        {
+          "id": "drawer-body",
+          "type": "slot",
+          "slot": "children"
+        },
+        {
+          "id": "drawer-footer",
+          "type": "DrawerFooter",
+          "children": [
+            {
+              "id": "drawer-close-button",
+              "type": "Button",
+              "bindings": {
+                "variant": "outline",
+                "children": "data.cancelLabel || 'Cancel'",
+                "onClick": "handlers.handleCancel"
+              }
+            },
+            {
+              "id": "drawer-submit-button",
+              "type": "Button",
+              "bindings": {
+                "children": "data.submitLabel || 'Submit'",
+                "onClick": "handlers.handleSubmit"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

src/components/json-definitions/dropdown-menu.json

@@ -0,0 +1,44 @@
+{
+  "id": "dropdown-menu-root",
+  "type": "DropdownMenu",
+  "children": [
+    {
+      "id": "dropdown-menu-trigger",
+      "type": "DropdownMenuTrigger",
+      "bindings": {
+        "asChild": true
+      },
+      "children": [
+        {
+          "id": "dropdown-trigger-content",
+          "type": "slot",
+          "slot": "trigger",
+          "defaultContent": {
+            "id": "trigger-button",
+            "type": "Button",
+            "bindings": {
+              "variant": "ghost",
+              "size": "sm",
+              "children": "data.triggerLabel || 'Menu'"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "dropdown-menu-content",
+      "type": "DropdownMenuContent",
+      "bindings": {
+        "align": "data.align || 'end'",
+        "side": "data.side || 'bottom'"
+      },
+      "children": [
+        {
+          "id": "dropdown-menu-items",
+          "type": "slot",
+          "slot": "children"
+        }
+      ]
+    }
+  ]
+}

src/components/json-definitions/form-field.json

@@ -0,0 +1,16 @@
+{
+  "id": "form-field-root",
+  "type": "FormField",
+  "bindings": {
+    "className": "data.className",
+    "control": "data.control",
+    "name": "data.name"
+  },
+  "children": [
+    {
+      "id": "form-field-content",
+      "type": "slot",
+      "slot": "children"
+    }
+  ]
+}

src/components/json-definitions/form.json

@@ -0,0 +1,15 @@
+{
+  "id": "form-root",
+  "type": "Form",
+  "bindings": {
+    "className": "data.className",
+    "onSubmit": "handlers.handleSubmit"
+  },
+  "children": [
+    {
+      "id": "form-content",
+      "type": "slot",
+      "slot": "children"
+    }
+  ]
+}

src/components/json-definitions/heading.json

@@ -0,0 +1,15 @@
+{
+  "id": "heading-root",
+  "type": "Heading",
+  "bindings": {
+    "level": "data.level || 1",
+    "className": "data.className"
+  },
+  "children": [
+    {
+      "id": "heading-content",
+      "type": "slot",
+      "slot": "children"
+    }
+  ]
+}

src/components/json-definitions/hover-card.json

@@ -0,0 +1,43 @@
+{
+  "id": "hover-card-root",
+  "type": "HoverCard",
+  "children": [
+    {
+      "id": "hover-card-trigger",
+      "type": "HoverCardTrigger",
+      "bindings": {
+        "asChild": true
+      },
+      "children": [
+        {
+          "id": "hover-trigger-content",
+          "type": "slot",
+          "slot": "trigger",
+          "defaultContent": {
+            "id": "trigger-element",
+            "type": "span",
+            "bindings": {
+              "children": "data.triggerLabel || 'Hover'"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "hover-card-content",
+      "type": "HoverCardContent",
+      "bindings": {
+        "side": "data.side || 'bottom'",
+        "align": "data.align || 'center'",
+        "className": "data.className"
+      },
+      "children": [
+        {
+          "id": "hover-content",
+          "type": "slot",
+          "slot": "children"
+        }
+      ]
+    }
+  ]
+}

src/components/json-definitions/icon.json

@@ -0,0 +1,11 @@
+{
+  "id": "icon-root",
+  "type": "Icon",
+  "bindings": {
+    "name": "data.name",
+    "size": "data.size || 'md'",
+    "className": "data.className",
+    "color": "data.color",
+    "strokeWidth": "data.strokeWidth"
+  }
+}