feat: migrate shadcn/ui components to JSON wrapper definitions (Phase 8)

Implemented JSON wrappers for 29 key shadcn/ui components, enabling JSON-based configuration for commonly-used library components. These stay as TSX internally but are now JSON-compatible. Components migrated: - Button: ShadcnButton - Badge: ShadcnBadge - Card family: ShadcnCard, ShadcnCardHeader, ShadcnCardTitle, ShadcnCardContent - Form inputs: ShadcnLabel, ShadcnInput, ShadcnTextarea, ShadcnCheckbox, ShadcnSwitch - Separator: ShadcnSeparator - ScrollArea: ShadcnScrollArea - Tabs family: ShadcnTabs, ShadcnTabsList, ShadcnTabsTrigger, ShadcnTabsContent - Dialog family: ShadcnDialog, ShadcnDialogContent, ShadcnDialogHeader, ShadcnDialogTitle - Select family: ShadcnSelect, ShadcnSelectTrigger, ShadcnSelectContent, ShadcnSelectItem - Slider: ShadcnSlider - Tooltip family: ShadcnTooltip, ShadcnTooltipTrigger, ShadcnTooltipContent Files created: - 14 TypeScript interface files in src/lib/json-ui/interfaces/ - 29 JSON definition files in src/components/json-definitions/ Updated exports in: - src/lib/json-ui/json-components.ts (29 new components) - src/lib/json-ui/interfaces/index.ts (14 new interfaces) Build: ✓ PASSED Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-04-24 21:54:56 +00:00 · 2026-01-21 04:07:03 +00:00
parent e4b0b92d80
commit 788109dfe3
61 changed files with 2035 additions and 5 deletions
--- a/src/components/json-definitions/comprehensive-demo-header.json
+++ b/src/components/json-definitions/comprehensive-demo-header.json
@@ -0,0 +1,18 @@
+{
+  "id": "comprehensive-demo-header-container",
+  "type": "Box",
+  "className": "space-y-2",
+  "children": [
+    {
+      "type": "Heading",
+      "level": 1,
+      "className": "text-4xl font-bold bg-gradient-to-r from-primary via-primary to-accent bg-clip-text text-transparent",
+      "children": [{ "type": "Text", "value": "{title}" }]
+    },
+    {
+      "type": "Paragraph",
+      "className": "text-muted-foreground",
+      "children": [{ "type": "Text", "value": "{subtitle}" }]
+    }
+  ]
+}
--- a/src/components/json-definitions/comprehensive-demo-stats-row.json
+++ b/src/components/json-definitions/comprehensive-demo-stats-row.json
@@ -0,0 +1,156 @@
+{
+  "id": "comprehensive-demo-stats-row-container",
+  "type": "Box",
+  "className": "grid grid-cols-1 md:grid-cols-4 gap-4",
+  "children": [
+    {
+      "id": "stats-total-card",
+      "type": "Card",
+      "className": "bg-card/50 backdrop-blur",
+      "children": [
+        {
+          "type": "CardContent",
+          "className": "pt-6",
+          "children": [
+            {
+              "type": "Box",
+              "className": "space-y-1",
+              "children": [
+                {
+                  "type": "Paragraph",
+                  "className": "text-sm text-muted-foreground",
+                  "children": [{ "type": "Text", "value": "{totalLabel}" }]
+                },
+                {
+                  "type": "Box",
+                  "className": "text-3xl font-bold",
+                  "children": [{ "type": "Text", "value": "{total}" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stats-completed-card",
+      "type": "Card",
+      "className": "bg-green-500/5 backdrop-blur border-green-500/20",
+      "children": [
+        {
+          "type": "CardContent",
+          "className": "pt-6",
+          "children": [
+            {
+              "type": "Flex",
+              "align": "start",
+              "justify": "between",
+              "children": [
+                {
+                  "type": "Box",
+                  "className": "space-y-1",
+                  "children": [
+                    {
+                      "type": "Paragraph",
+                      "className": "text-sm text-muted-foreground",
+                      "children": [{ "type": "Text", "value": "{completedLabel}" }]
+                    },
+                    {
+                      "type": "Box",
+                      "className": "text-3xl font-bold text-green-600",
+                      "children": [{ "type": "Text", "value": "{completed}" }]
+                    }
+                  ]
+                },
+                {
+                  "type": "Icon",
+                  "name": "Check",
+                  "size": 24,
+                  "weight": "duotone",
+                  "className": "text-green-600"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stats-pending-card",
+      "type": "Card",
+      "className": "bg-blue-500/5 backdrop-blur border-blue-500/20",
+      "children": [
+        {
+          "type": "CardContent",
+          "className": "pt-6",
+          "children": [
+            {
+              "type": "Flex",
+              "align": "start",
+              "justify": "between",
+              "children": [
+                {
+                  "type": "Box",
+                  "className": "space-y-1",
+                  "children": [
+                    {
+                      "type": "Paragraph",
+                      "className": "text-sm text-muted-foreground",
+                      "children": [{ "type": "Text", "value": "{pendingLabel}" }]
+                    },
+                    {
+                      "type": "Box",
+                      "className": "text-3xl font-bold text-blue-600",
+                      "children": [{ "type": "Text", "value": "{pending}" }]
+                    }
+                  ]
+                },
+                {
+                  "type": "Icon",
+                  "name": "Clock",
+                  "size": 24,
+                  "weight": "duotone",
+                  "className": "text-blue-600"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stats-completion-card",
+      "type": "Card",
+      "className": "bg-primary/5 backdrop-blur border-primary/20",
+      "children": [
+        {
+          "type": "CardContent",
+          "className": "pt-6",
+          "children": [
+            {
+              "type": "Box",
+              "className": "space-y-2",
+              "children": [
+                {
+                  "type": "Paragraph",
+                  "className": "text-sm text-muted-foreground",
+                  "children": [{ "type": "Text", "value": "{completionLabel}" }]
+                },
+                {
+                  "type": "Box",
+                  "className": "text-3xl font-bold text-primary",
+                  "children": [{ "type": "Text", "value": "{completionRate}%" }]
+                },
+                {
+                  "type": "ProgressBar",
+                  "value": "{completionRate}",
+                  "className": "h-2"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
--- a/src/components/json-definitions/config-card.json
+++ b/src/components/json-definitions/config-card.json
@@ -0,0 +1,29 @@
+{
+  "id": "config-card-container",
+  "type": "Card",
+  "children": [
+    {
+      "type": "CardHeader",
+      "children": [
+        {
+          "type": "CardTitle",
+          "children": [{ "type": "Text", "value": "{title}" }]
+        },
+        {
+          "type": "CardDescription",
+          "children": [{ "type": "Text", "value": "{description}" }]
+        }
+      ]
+    },
+    {
+      "type": "CardContent",
+      "className": "space-y-4",
+      "bindings": {
+        "children": {
+          "source": "fields",
+          "transform": "source.map((field) => ({ id: `field-${field.id}`, type: 'Box', children: [{ type: 'Label', htmlFor: field.id, children: [{ type: 'Text', value: field.label }] }, { type: 'Input', id: field.id, placeholder: field.placeholder, value: `{${field.key}}`, onChange: `(e) => onFieldChange(${JSON.stringify(field)}, e.target.value)` }, ...(field.helper ? [{ type: 'Paragraph', className: 'text-xs text-muted-foreground mt-1', children: [{ type: 'Text', value: field.helper }] }] : []) ] }))"
+        }
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/conflict-resolution-stats.json
+++ b/src/components/json-definitions/conflict-resolution-stats.json
@@ -0,0 +1,171 @@
+{
+  "id": "conflict-resolution-stats-container",
+  "type": "Box",
+  "className": "grid grid-cols-1 md:grid-cols-4 gap-4",
+  "children": [
+    {
+      "id": "stats-total",
+      "type": "Card",
+      "children": [
+        {
+          "type": "CardContent",
+          "className": "pt-6",
+          "children": [
+            {
+              "type": "Flex",
+              "align": "center",
+              "justify": "between",
+              "children": [
+                {
+                  "type": "Box",
+                  "children": [
+                    {
+                      "type": "Box",
+                      "className": "text-2xl font-bold",
+                      "children": [{ "type": "Text", "value": "{totalConflicts}" }]
+                    },
+                    {
+                      "type": "Box",
+                      "className": "text-xs text-muted-foreground",
+                      "children": [{ "type": "Text", "value": "{totalLabel}" }]
+                    }
+                  ]
+                },
+                {
+                  "type": "Icon",
+                  "name": "Warning",
+                  "size": 24,
+                  "weight": "duotone",
+                  "className": "text-destructive"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stats-files",
+      "type": "Card",
+      "children": [
+        {
+          "type": "CardContent",
+          "className": "pt-6",
+          "children": [
+            {
+              "type": "Flex",
+              "align": "center",
+              "justify": "between",
+              "children": [
+                {
+                  "type": "Box",
+                  "children": [
+                    {
+                      "type": "Box",
+                      "className": "text-2xl font-bold",
+                      "children": [{ "type": "Text", "value": "{fileConflicts}" }]
+                    },
+                    {
+                      "type": "Box",
+                      "className": "text-xs text-muted-foreground",
+                      "children": [{ "type": "Text", "value": "{fileLabel}" }]
+                    }
+                  ]
+                },
+                {
+                  "type": "Icon",
+                  "name": "Database",
+                  "size": 24,
+                  "weight": "duotone",
+                  "className": "text-primary"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stats-models",
+      "type": "Card",
+      "children": [
+        {
+          "type": "CardContent",
+          "className": "pt-6",
+          "children": [
+            {
+              "type": "Flex",
+              "align": "center",
+              "justify": "between",
+              "children": [
+                {
+                  "type": "Box",
+                  "children": [
+                    {
+                      "type": "Box",
+                      "className": "text-2xl font-bold",
+                      "children": [{ "type": "Text", "value": "{modelConflicts}" }]
+                    },
+                    {
+                      "type": "Box",
+                      "className": "text-xs text-muted-foreground",
+                      "children": [{ "type": "Text", "value": "{modelLabel}" }]
+                    }
+                  ]
+                },
+                {
+                  "type": "Icon",
+                  "name": "Database",
+                  "size": 24,
+                  "weight": "duotone",
+                  "className": "text-accent"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stats-other",
+      "type": "Card",
+      "children": [
+        {
+          "type": "CardContent",
+          "className": "pt-6",
+          "children": [
+            {
+              "type": "Flex",
+              "align": "center",
+              "justify": "between",
+              "children": [
+                {
+                  "type": "Box",
+                  "children": [
+                    {
+                      "type": "Box",
+                      "className": "text-2xl font-bold",
+                      "children": [{ "type": "Text", "value": "{otherConflicts}" }]
+                    },
+                    {
+                      "type": "Box",
+                      "className": "text-xs text-muted-foreground",
+                      "children": [{ "type": "Text", "value": "{otherLabel}" }]
+                    }
+                  ]
+                },
+                {
+                  "type": "Icon",
+                  "name": "Cloud",
+                  "size": 24,
+                  "weight": "duotone",
+                  "className": "text-muted-foreground"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
--- a/src/components/json-definitions/error-panel-empty-state.json
+++ b/src/components/json-definitions/error-panel-empty-state.json
@@ -0,0 +1,33 @@
+{
+  "id": "error-panel-empty-state-container",
+  "type": "ConditionalRender",
+  "condition": "isScanning",
+  "then": {
+    "type": "EmptyState",
+    "icon": {
+      "type": "Icon",
+      "name": "Lightning",
+      "size": 48,
+      "weight": "duotone",
+      "className": "text-accent animate-pulse"
+    },
+    "bindings": {
+      "title": { "source": "scanningTitle" },
+      "description": { "source": "scanningDescription" }
+    }
+  },
+  "else": {
+    "type": "EmptyState",
+    "icon": {
+      "type": "Icon",
+      "name": "CheckCircle",
+      "size": 48,
+      "weight": "duotone",
+      "className": "text-green-500"
+    },
+    "bindings": {
+      "title": { "source": "noIssuesTitle" },
+      "description": { "source": "noIssuesDescription" }
+    }
+  }
+}
--- a/src/components/json-definitions/error-panel-header.json
+++ b/src/components/json-definitions/error-panel-header.json
@@ -0,0 +1,140 @@
+{
+  "id": "error-panel-header-container",
+  "type": "Box",
+  "className": "border-b border-border bg-card px-6 py-4",
+  "children": [
+    {
+      "id": "error-panel-header-flex",
+      "type": "Flex",
+      "align": "center",
+      "justify": "between",
+      "children": [
+        {
+          "id": "error-panel-header-left",
+          "type": "Flex",
+          "align": "center",
+          "gap": "md",
+          "children": [
+            {
+              "id": "error-panel-header-icon-text",
+              "type": "IconText",
+              "icon": {
+                "type": "Icon",
+                "name": "Wrench",
+                "size": 20,
+                "weight": "duotone",
+                "className": "text-accent"
+              },
+              "children": [
+                {
+                  "id": "error-panel-header-title",
+                  "type": "Heading",
+                  "level": 3,
+                  "children": [
+                    {
+                      "type": "Text",
+                      "value": "{title}"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "id": "error-panel-header-badges",
+              "type": "Box",
+              "bindings": {
+                "className": {
+                  "source": "showBadges",
+                  "transform": "data ? 'flex gap-2' : 'hidden'"
+                }
+              },
+              "children": [
+                {
+                  "type": "Badge",
+                  "variant": "destructive",
+                  "bindings": {
+                    "className": {
+                      "source": "errorCount",
+                      "transform": "data > 0 ? 'flex' : 'hidden'"
+                    }
+                  },
+                  "children": [
+                    {
+                      "type": "Text",
+                      "value": "{errorCount} {errorLabel}"
+                    }
+                  ]
+                },
+                {
+                  "type": "Badge",
+                  "variant": "secondary",
+                  "bindings": {
+                    "className": {
+                      "source": "warningCount",
+                      "transform": "data > 0 ? 'flex' : 'hidden'"
+                    }
+                  },
+                  "children": [
+                    {
+                      "type": "Text",
+                      "value": "{warningCount} {warningLabel}"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "error-panel-header-actions",
+          "type": "Flex",
+          "gap": "sm",
+          "children": [
+            {
+              "id": "error-panel-header-scan-btn",
+              "type": "ActionButton",
+              "icon": {
+                "type": "Icon",
+                "name": "Lightning",
+                "size": 16
+              },
+              "bindings": {
+                "label": {
+                  "source": "isScanning",
+                  "transform": "data ? 'scanningLabel' : 'scanLabel'"
+                },
+                "disabled": {
+                  "source": ["isScanning", "isRepairing"],
+                  "transform": "sources.isScanning || sources.isRepairing"
+                }
+              },
+              "variant": "outline",
+              "onClick": "onScan"
+            },
+            {
+              "id": "error-panel-header-repair-btn",
+              "type": "ActionButton",
+              "icon": {
+                "type": "Icon",
+                "name": "Wrench",
+                "size": 16
+              },
+              "bindings": {
+                "label": {
+                  "source": "isRepairing",
+                  "transform": "data ? 'repairingLabel' : 'repairAllLabel'"
+                },
+                "disabled": {
+                  "source": ["errorCount", "warningCount", "isRepairing", "isScanning"],
+                  "transform": "sources.errorCount + sources.warningCount === 0 || sources.isRepairing || sources.isScanning"
+                }
+              },
+              "variant": "default",
+              "onClick": "onRepairAll"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
--- a/src/components/json-definitions/how-it-works-card.json
+++ b/src/components/json-definitions/how-it-works-card.json
@@ -0,0 +1,32 @@
+{
+  "id": "how-it-works-card-container",
+  "type": "Card",
+  "className": "bg-accent/5 border-accent/20",
+  "children": [
+    {
+      "type": "CardHeader",
+      "children": [
+        {
+          "type": "CardTitle",
+          "className": "text-base",
+          "children": [{ "type": "Text", "value": "{title}" }]
+        }
+      ]
+    },
+    {
+      "type": "CardContent",
+      "className": "space-y-2 text-sm",
+      "children": [
+        {
+          "type": "Box",
+          "bindings": {
+            "children": {
+              "source": "steps",
+              "transform": "source.map((step, index) => ({ id: `step-${index}`, type: 'Box', className: 'flex gap-2', children: [{ type: 'Box', className: 'w-6 h-6 rounded-full bg-primary/20 text-primary flex items-center justify-center text-xs font-bold flex-shrink-0', children: [{ type: 'Text', value: String(index + 1) }] }, { type: 'Paragraph', className: 'text-muted-foreground', children: [{ type: 'Text', value: step }] }] }))"
+            }
+          }
+        }
+      ]
+    }
+  ]
+}
--- a/src/components/json-definitions/info-section.json
+++ b/src/components/json-definitions/info-section.json
@@ -0,0 +1,36 @@
+{
+  "id": "info-section-container",
+  "type": "Box",
+  "className": "space-y-4",
+  "children": [
+    {
+      "type": "Box",
+      "children": [
+        {
+          "type": "Heading",
+          "level": 3,
+          "className": "text-lg font-semibold mb-1",
+          "children": [{ "type": "Text", "value": "{title}" }]
+        },
+        {
+          "type": "Paragraph",
+          "className": "text-sm text-muted-foreground",
+          "children": [{ "type": "Text", "value": "{description}" }]
+        }
+      ]
+    },
+    {
+      "type": "Separator"
+    },
+    {
+      "type": "Box",
+      "className": "space-y-3",
+      "bindings": {
+        "children": {
+          "source": "items",
+          "transform": "source.map((item, index) => ({ id: `item-${index}`, type: 'Box', className: 'flex items-center justify-between', children: [{ type: 'Label', className: 'text-sm', children: [{ type: 'Text', value: item.label }] }, { type: 'Box', className: 'text-sm font-mono text-muted-foreground', children: [{ type: 'Text', value: item.value }] }] }))"
+        }
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/list-header.json
+++ b/src/components/json-definitions/list-header.json
@@ -0,0 +1,45 @@
+{
+  "id": "list-header-container",
+  "type": "Box",
+  "className": "border-b border-border bg-card px-6 py-4",
+  "children": [
+    {
+      "type": "Flex",
+      "align": "center",
+      "justify": "between",
+      "children": [
+        {
+          "type": "Box",
+          "children": [
+            {
+              "type": "Heading",
+              "level": 3,
+              "children": [{ "type": "Text", "value": "{title}" }]
+            },
+            {
+              "type": "Paragraph",
+              "className": "text-sm text-muted-foreground mt-1",
+              "bindings": {
+                "className": {
+                  "source": "subtitle",
+                  "transform": "data ? 'text-sm text-muted-foreground mt-1' : 'hidden'"
+                }
+              },
+              "children": [{ "type": "Text", "value": "{subtitle}" }]
+            }
+          ]
+        },
+        {
+          "type": "Badge",
+          "bindings": {
+            "children": [{ "type": "Text", "value": "{count}" }],
+            "className": {
+              "source": "count",
+              "transform": "data > 0 ? 'inline-flex' : 'hidden'"
+            }
+          }
+        }
+      ]
+    }
+  ]
+}
--- a/src/components/json-definitions/pwa-cache-section.json
+++ b/src/components/json-definitions/pwa-cache-section.json
@@ -0,0 +1,106 @@
+{
+  "id": "pwa-cache-section-container",
+  "type": "Card",
+  "className": "p-6",
+  "children": [
+    {
+      "type": "Box",
+      "className": "space-y-4",
+      "children": [
+        {
+          "type": "Box",
+          "children": [
+            {
+              "type": "Heading",
+              "level": 3,
+              "className": "text-lg font-semibold mb-1",
+              "children": [{ "type": "Text", "value": "{title}" }]
+            },
+            {
+              "type": "Paragraph",
+              "className": "text-sm text-muted-foreground",
+              "children": [{ "type": "Text", "value": "{description}" }]
+            }
+          ]
+        },
+        { "type": "Separator" },
+        {
+          "type": "Box",
+          "className": "space-y-3",
+          "children": [
+            {
+              "type": "Flex",
+              "align": "center",
+              "justify": "between",
+              "children": [
+                {
+                  "type": "Label",
+                  "className": "text-sm",
+                  "children": [{ "type": "Text", "value": "{sizeLabel}" }]
+                },
+                {
+                  "type": "Box",
+                  "className": "text-sm font-mono text-muted-foreground",
+                  "children": [{ "type": "Text", "value": "{cacheSize}" }]
+                }
+              ]
+            },
+            {
+              "type": "Flex",
+              "align": "center",
+              "justify": "between",
+              "children": [
+                {
+                  "type": "Label",
+                  "className": "text-sm",
+                  "children": [{ "type": "Text", "value": "{serviceWorkerLabel}" }]
+                },
+                {
+                  "type": "Badge",
+                  "bindings": {
+                    "variant": {
+                      "source": "hasRegistration",
+                      "transform": "data ? 'default' : 'secondary'"
+                    }
+                  },
+                  "children": [
+                    {
+                      "type": "Text",
+                      "bindings": {
+                        "value": {
+                          "source": "hasRegistration",
+                          "transform": "data ? 'activeStatus' : 'inactiveStatus'"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        { "type": "Separator" },
+        {
+          "type": "Button",
+          "className": "w-full",
+          "variant": "destructive",
+          "onClick": "onClearCache",
+          "children": [
+            {
+              "type": "Icon",
+              "name": "Trash",
+              "size": 16,
+              "className": "mr-2"
+            },
+            { "type": "Text", "value": "{clearAction}" }
+          ]
+        },
+        {
+          "type": "Paragraph",
+          "className": "text-xs text-muted-foreground text-center",
+          "children": [{ "type": "Text", "value": "{helper}" }]
+        }
+      ]
+    }
+  ]
+}
--- a/src/components/json-definitions/pwa-update-section.json
+++ b/src/components/json-definitions/pwa-update-section.json
@@ -0,0 +1,79 @@
+{
+  "id": "pwa-update-section-container",
+  "type": "Box",
+  "bindings": {
+    "className": {
+      "source": "isUpdateAvailable",
+      "transform": "data ? 'block' : 'hidden'"
+    }
+  },
+  "children": [
+    {
+      "type": "Card",
+      "className": "p-6 border-accent",
+      "children": [
+        {
+          "type": "Box",
+          "className": "space-y-4",
+          "children": [
+            {
+              "type": "Box",
+              "children": [
+                {
+                  "type": "Heading",
+                  "level": 3,
+                  "className": "text-lg font-semibold mb-1",
+                  "children": [{ "type": "Text", "value": "{title}" }]
+                },
+                {
+                  "type": "Paragraph",
+                  "className": "text-sm text-muted-foreground",
+                  "children": [{ "type": "Text", "value": "{description}" }]
+                }
+              ]
+            },
+            {
+              "type": "Box",
+              "className": "flex items-center justify-between",
+              "children": [
+                {
+                  "type": "Flex",
+                  "align": "center",
+                  "gap": "3",
+                  "children": [
+                    {
+                      "type": "Icon",
+                      "name": "CloudArrowDown",
+                      "size": 20,
+                      "className": "text-accent"
+                    },
+                    {
+                      "type": "Box",
+                      "children": [
+                        {
+                          "type": "Label",
+                          "className": "text-base",
+                          "children": [{ "type": "Text", "value": "{label}" }]
+                        },
+                        {
+                          "type": "Paragraph",
+                          "className": "text-xs text-muted-foreground",
+                          "children": [{ "type": "Text", "value": "{status}" }]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "type": "Button",
+                  "children": [{ "type": "Text", "value": "{action}" }],
+                  "onClick": "onUpdate"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
--- a/src/components/json-definitions/search-empty-state.json
+++ b/src/components/json-definitions/search-empty-state.json
@@ -0,0 +1,19 @@
+{
+  "id": "search-empty-state-container",
+  "type": "Box",
+  "className": "flex flex-col items-center gap-2 py-6",
+  "children": [
+    {
+      "type": "Icon",
+      "name": "MagnifyingGlass",
+      "size": 48,
+      "weight": "duotone",
+      "className": "text-muted-foreground"
+    },
+    {
+      "type": "Paragraph",
+      "className": "text-sm text-muted-foreground",
+      "children": [{ "type": "Text", "value": "No results found" }]
+    }
+  ]
+}
--- a/src/components/json-definitions/search-results.json
+++ b/src/components/json-definitions/search-results.json
@@ -0,0 +1,10 @@
+{
+  "id": "search-results-container",
+  "type": "Box",
+  "bindings": {
+    "children": {
+      "source": "groupedResults",
+      "transform": "Object.entries(source).map(([category, results], index) => ({ id: `category-${index}`, type: 'Box', children: [{ ...(index > 0 ? { type: 'CommandSeparator' } : {}), id: `separator-${index}` }, { id: `group-${index}`, type: 'CommandGroup', heading: category, children: results.map((result, rIdx) => ({ id: `result-${index}-${rIdx}`, type: 'CommandItem', value: result.id, onClick: `() => onSelect(${JSON.stringify(result)})`, className: 'flex items-center gap-3 px-4 py-3 cursor-pointer', children: [{ type: 'Box', className: 'flex-shrink-0 text-muted-foreground', children: [{ type: 'Icon', ...result.icon }] }, { type: 'Box', className: 'flex-1 min-w-0', children: [{ type: 'Box', className: 'font-medium truncate', children: [{ type: 'Text', value: result.title }] }, ...(result.subtitle ? [{ type: 'Box', className: 'text-xs text-muted-foreground truncate', children: [{ type: 'Text', value: result.subtitle }] }] : []) ] }, { type: 'Badge', variant: 'outline', className: 'flex-shrink-0 text-xs', children: [{ type: 'Text', value: category }] } ] })) }] }))"
+    }
+  }
+}
--- a/src/components/json-definitions/shadcn-badge.json
+++ b/src/components/json-definitions/shadcn-badge.json
@@ -0,0 +1,22 @@
+{
+  "id": "shadcn-badge",
+  "type": "ShadcnBadge",
+  "bindings": {
+    "variant": {
+      "source": "variant",
+      "transform": "data || 'default'"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "text",
+      "content": {
+        "source": "children"
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-button.json
+++ b/src/components/json-definitions/shadcn-button.json
@@ -0,0 +1,34 @@
+{
+  "id": "shadcn-button",
+  "type": "ShadcnButton",
+  "bindings": {
+    "variant": {
+      "source": "variant",
+      "transform": "data || 'default'"
+    },
+    "size": {
+      "source": "size",
+      "transform": "data || 'default'"
+    },
+    "disabled": {
+      "source": "disabled",
+      "transform": "data || false"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    },
+    "onClick": {
+      "source": "onClick",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "text",
+      "content": {
+        "source": "children"
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-card-content.json
+++ b/src/components/json-definitions/shadcn-card-content.json
@@ -0,0 +1,16 @@
+{
+  "id": "shadcn-card-content",
+  "type": "ShadcnCardContent",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-card-header.json
+++ b/src/components/json-definitions/shadcn-card-header.json
@@ -0,0 +1,16 @@
+{
+  "id": "shadcn-card-header",
+  "type": "ShadcnCardHeader",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-card-title.json
+++ b/src/components/json-definitions/shadcn-card-title.json
@@ -0,0 +1,18 @@
+{
+  "id": "shadcn-card-title",
+  "type": "ShadcnCardTitle",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "text",
+      "content": {
+        "source": "children"
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-card.json
+++ b/src/components/json-definitions/shadcn-card.json
@@ -0,0 +1,16 @@
+{
+  "id": "shadcn-card",
+  "type": "ShadcnCard",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-checkbox.json
+++ b/src/components/json-definitions/shadcn-checkbox.json
@@ -0,0 +1,26 @@
+{
+  "id": "shadcn-checkbox",
+  "type": "ShadcnCheckbox",
+  "bindings": {
+    "checked": {
+      "source": "checked",
+      "transform": "data || false"
+    },
+    "onCheckedChange": {
+      "source": "onCheckedChange",
+      "transform": "data"
+    },
+    "disabled": {
+      "source": "disabled",
+      "transform": "data || false"
+    },
+    "required": {
+      "source": "required",
+      "transform": "data || false"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  }
+}
--- a/src/components/json-definitions/shadcn-dialog-content.json
+++ b/src/components/json-definitions/shadcn-dialog-content.json
@@ -0,0 +1,16 @@
+{
+  "id": "shadcn-dialog-content",
+  "type": "ShadcnDialogContent",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-dialog-header.json
+++ b/src/components/json-definitions/shadcn-dialog-header.json
@@ -0,0 +1,16 @@
+{
+  "id": "shadcn-dialog-header",
+  "type": "ShadcnDialogHeader",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-dialog-title.json
+++ b/src/components/json-definitions/shadcn-dialog-title.json
@@ -0,0 +1,18 @@
+{
+  "id": "shadcn-dialog-title",
+  "type": "ShadcnDialogTitle",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "text",
+      "content": {
+        "source": "children"
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-dialog.json
+++ b/src/components/json-definitions/shadcn-dialog.json
@@ -0,0 +1,24 @@
+{
+  "id": "shadcn-dialog",
+  "type": "ShadcnDialog",
+  "bindings": {
+    "open": {
+      "source": "open",
+      "transform": "data"
+    },
+    "onOpenChange": {
+      "source": "onOpenChange",
+      "transform": "data"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-input.json
+++ b/src/components/json-definitions/shadcn-input.json
@@ -0,0 +1,30 @@
+{
+  "id": "shadcn-input",
+  "type": "ShadcnInput",
+  "bindings": {
+    "type": {
+      "source": "type",
+      "transform": "data || 'text'"
+    },
+    "placeholder": {
+      "source": "placeholder",
+      "transform": "data"
+    },
+    "value": {
+      "source": "value",
+      "transform": "data"
+    },
+    "disabled": {
+      "source": "disabled",
+      "transform": "data || false"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    },
+    "onChange": {
+      "source": "onChange",
+      "transform": "data"
+    }
+  }
+}
--- a/src/components/json-definitions/shadcn-label.json
+++ b/src/components/json-definitions/shadcn-label.json
@@ -0,0 +1,22 @@
+{
+  "id": "shadcn-label",
+  "type": "ShadcnLabel",
+  "bindings": {
+    "htmlFor": {
+      "source": "htmlFor",
+      "transform": "data"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "text",
+      "content": {
+        "source": "children"
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-scroll-area.json
+++ b/src/components/json-definitions/shadcn-scroll-area.json
@@ -0,0 +1,16 @@
+{
+  "id": "shadcn-scroll-area",
+  "type": "ShadcnScrollArea",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-select-content.json
+++ b/src/components/json-definitions/shadcn-select-content.json
@@ -0,0 +1,24 @@
+{
+  "id": "shadcn-select-content",
+  "type": "ShadcnSelectContent",
+  "bindings": {
+    "position": {
+      "source": "position",
+      "transform": "data || 'popper'"
+    },
+    "sideOffset": {
+      "source": "sideOffset",
+      "transform": "data"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-select-item.json
+++ b/src/components/json-definitions/shadcn-select-item.json
@@ -0,0 +1,30 @@
+{
+  "id": "shadcn-select-item",
+  "type": "ShadcnSelectItem",
+  "bindings": {
+    "value": {
+      "source": "value",
+      "transform": "data"
+    },
+    "disabled": {
+      "source": "disabled",
+      "transform": "data || false"
+    },
+    "textValue": {
+      "source": "textValue",
+      "transform": "data"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "text",
+      "content": {
+        "source": "children"
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-select-trigger.json
+++ b/src/components/json-definitions/shadcn-select-trigger.json
@@ -0,0 +1,16 @@
+{
+  "id": "shadcn-select-trigger",
+  "type": "ShadcnSelectTrigger",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-select.json
+++ b/src/components/json-definitions/shadcn-select.json
@@ -0,0 +1,40 @@
+{
+  "id": "shadcn-select",
+  "type": "ShadcnSelect",
+  "bindings": {
+    "value": {
+      "source": "value",
+      "transform": "data"
+    },
+    "onValueChange": {
+      "source": "onValueChange",
+      "transform": "data"
+    },
+    "defaultValue": {
+      "source": "defaultValue",
+      "transform": "data"
+    },
+    "disabled": {
+      "source": "disabled",
+      "transform": "data || false"
+    },
+    "open": {
+      "source": "open",
+      "transform": "data"
+    },
+    "onOpenChange": {
+      "source": "onOpenChange",
+      "transform": "data"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-separator.json
+++ b/src/components/json-definitions/shadcn-separator.json
@@ -0,0 +1,18 @@
+{
+  "id": "shadcn-separator",
+  "type": "ShadcnSeparator",
+  "bindings": {
+    "orientation": {
+      "source": "orientation",
+      "transform": "data || 'horizontal'"
+    },
+    "decorative": {
+      "source": "decorative",
+      "transform": "data"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  }
+}
--- a/src/components/json-definitions/shadcn-slider.json
+++ b/src/components/json-definitions/shadcn-slider.json
@@ -0,0 +1,42 @@
+{
+  "id": "shadcn-slider",
+  "type": "ShadcnSlider",
+  "bindings": {
+    "value": {
+      "source": "value",
+      "transform": "data"
+    },
+    "onValueChange": {
+      "source": "onValueChange",
+      "transform": "data"
+    },
+    "defaultValue": {
+      "source": "defaultValue",
+      "transform": "data"
+    },
+    "min": {
+      "source": "min",
+      "transform": "data || 0"
+    },
+    "max": {
+      "source": "max",
+      "transform": "data || 100"
+    },
+    "step": {
+      "source": "step",
+      "transform": "data || 1"
+    },
+    "disabled": {
+      "source": "disabled",
+      "transform": "data || false"
+    },
+    "orientation": {
+      "source": "orientation",
+      "transform": "data || 'horizontal'"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  }
+}
--- a/src/components/json-definitions/shadcn-switch.json
+++ b/src/components/json-definitions/shadcn-switch.json
@@ -0,0 +1,26 @@
+{
+  "id": "shadcn-switch",
+  "type": "ShadcnSwitch",
+  "bindings": {
+    "checked": {
+      "source": "checked",
+      "transform": "data || false"
+    },
+    "onCheckedChange": {
+      "source": "onCheckedChange",
+      "transform": "data"
+    },
+    "disabled": {
+      "source": "disabled",
+      "transform": "data || false"
+    },
+    "required": {
+      "source": "required",
+      "transform": "data || false"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  }
+}
--- a/src/components/json-definitions/shadcn-tabs-content.json
+++ b/src/components/json-definitions/shadcn-tabs-content.json
@@ -0,0 +1,20 @@
+{
+  "id": "shadcn-tabs-content",
+  "type": "ShadcnTabsContent",
+  "bindings": {
+    "value": {
+      "source": "value",
+      "transform": "data"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-tabs-list.json
+++ b/src/components/json-definitions/shadcn-tabs-list.json
@@ -0,0 +1,16 @@
+{
+  "id": "shadcn-tabs-list",
+  "type": "ShadcnTabsList",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-tabs-trigger.json
+++ b/src/components/json-definitions/shadcn-tabs-trigger.json
@@ -0,0 +1,26 @@
+{
+  "id": "shadcn-tabs-trigger",
+  "type": "ShadcnTabsTrigger",
+  "bindings": {
+    "value": {
+      "source": "value",
+      "transform": "data"
+    },
+    "disabled": {
+      "source": "disabled",
+      "transform": "data || false"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "text",
+      "content": {
+        "source": "children"
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-tabs.json
+++ b/src/components/json-definitions/shadcn-tabs.json
@@ -0,0 +1,32 @@
+{
+  "id": "shadcn-tabs",
+  "type": "ShadcnTabs",
+  "bindings": {
+    "defaultValue": {
+      "source": "defaultValue",
+      "transform": "data"
+    },
+    "value": {
+      "source": "value",
+      "transform": "data"
+    },
+    "onValueChange": {
+      "source": "onValueChange",
+      "transform": "data"
+    },
+    "orientation": {
+      "source": "orientation",
+      "transform": "data || 'horizontal'"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-textarea.json
+++ b/src/components/json-definitions/shadcn-textarea.json
@@ -0,0 +1,30 @@
+{
+  "id": "shadcn-textarea",
+  "type": "ShadcnTextarea",
+  "bindings": {
+    "placeholder": {
+      "source": "placeholder",
+      "transform": "data"
+    },
+    "value": {
+      "source": "value",
+      "transform": "data"
+    },
+    "disabled": {
+      "source": "disabled",
+      "transform": "data || false"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    },
+    "onChange": {
+      "source": "onChange",
+      "transform": "data"
+    },
+    "rows": {
+      "source": "rows",
+      "transform": "data"
+    }
+  }
+}
--- a/src/components/json-definitions/shadcn-tooltip-content.json
+++ b/src/components/json-definitions/shadcn-tooltip-content.json
@@ -0,0 +1,26 @@
+{
+  "id": "shadcn-tooltip-content",
+  "type": "ShadcnTooltipContent",
+  "bindings": {
+    "sideOffset": {
+      "source": "sideOffset",
+      "transform": "data"
+    },
+    "side": {
+      "source": "side",
+      "transform": "data || 'top'"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "text",
+      "content": {
+        "source": "children"
+      }
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-tooltip-trigger.json
+++ b/src/components/json-definitions/shadcn-tooltip-trigger.json
@@ -0,0 +1,16 @@
+{
+  "id": "shadcn-tooltip-trigger",
+  "type": "ShadcnTooltipTrigger",
+  "bindings": {
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/shadcn-tooltip.json
+++ b/src/components/json-definitions/shadcn-tooltip.json
@@ -0,0 +1,20 @@
+{
+  "id": "shadcn-tooltip",
+  "type": "ShadcnTooltip",
+  "bindings": {
+    "delayDuration": {
+      "source": "delayDuration",
+      "transform": "data"
+    },
+    "className": {
+      "source": "className",
+      "transform": "data"
+    }
+  },
+  "children": [
+    {
+      "type": "slot",
+      "source": "children"
+    }
+  ]
+}
--- a/src/components/json-definitions/status-card.json
+++ b/src/components/json-definitions/status-card.json
@@ -0,0 +1,42 @@
+{
+  "id": "status-card-container",
+  "type": "Card",
+  "children": [
+    {
+      "type": "CardContent",
+      "className": "pt-6",
+      "children": [
+        {
+          "type": "Flex",
+          "align": "center",
+          "justify": "between",
+          "children": [
+            {
+              "type": "Box",
+              "children": [
+                {
+                  "type": "Box",
+                  "className": "text-2xl font-bold",
+                  "children": [{ "type": "Text", "value": "{count}" }]
+                },
+                {
+                  "type": "Box",
+                  "className": "text-xs text-muted-foreground",
+                  "children": [{ "type": "Text", "value": "{label}" }]
+                }
+              ]
+            },
+            {
+              "type": "Icon",
+              "bindings": {
+                "name": { "source": "iconName" },
+                "size": { "source": "iconSize" },
+                "className": { "source": "iconClass" }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
--- a/src/lib/json-ui/interfaces/comprehensive-demo-header.ts
+++ b/src/lib/json-ui/interfaces/comprehensive-demo-header.ts
@@ -0,0 +1,4 @@
+export interface ComprehensiveDemoHeaderProps {
+  title: string
+  subtitle: string
+}
--- a/src/lib/json-ui/interfaces/comprehensive-demo-stats-row.ts
+++ b/src/lib/json-ui/interfaces/comprehensive-demo-stats-row.ts
@@ -0,0 +1,10 @@
+export interface ComprehensiveDemoStatsRowProps {
+  total: number
+  completed: number
+  pending: number
+  completionRate: number
+  totalLabel: string
+  completedLabel: string
+  pendingLabel: string
+  completionLabel: string
+}
--- a/src/lib/json-ui/interfaces/config-card.ts
+++ b/src/lib/json-ui/interfaces/config-card.ts
@@ -0,0 +1,14 @@
+export interface ConfigField {
+  id: string
+  key: string
+  label: string
+  placeholder: string
+  helper?: string
+}
+
+export interface ConfigCardProps {
+  title: string
+  description: string
+  fields: ConfigField[]
+  onFieldChange: (field: ConfigField, value: string) => void
+}
--- a/src/lib/json-ui/interfaces/conflict-resolution-stats.ts
+++ b/src/lib/json-ui/interfaces/conflict-resolution-stats.ts
@@ -0,0 +1,10 @@
+export interface ConflictResolutionStatsProps {
+  totalConflicts: number
+  fileConflicts: number
+  modelConflicts: number
+  otherConflicts: number
+  totalLabel: string
+  fileLabel: string
+  modelLabel: string
+  otherLabel: string
+}
--- a/src/lib/json-ui/interfaces/error-panel-empty-state.ts
+++ b/src/lib/json-ui/interfaces/error-panel-empty-state.ts
@@ -0,0 +1,7 @@
+export interface ErrorPanelEmptyStateProps {
+  isScanning: boolean
+  noIssuesTitle: string
+  noIssuesDescription: string
+  scanningTitle: string
+  scanningDescription: string
+}
--- a/src/lib/json-ui/interfaces/error-panel-header.ts
+++ b/src/lib/json-ui/interfaces/error-panel-header.ts
@@ -0,0 +1,17 @@
+export interface ErrorPanelHeaderProps {
+  title: string
+  scanLabel: string
+  scanningLabel: string
+  repairAllLabel: string
+  repairingLabel: string
+  errorCount: number
+  warningCount: number
+  errorLabel: string
+  errorsLabel: string
+  warningLabel: string
+  warningsLabel: string
+  isScanning: boolean
+  isRepairing: boolean
+  onScan: () => void
+  onRepairAll: () => void
+}
--- a/src/lib/json-ui/interfaces/how-it-works-card.ts
+++ b/src/lib/json-ui/interfaces/how-it-works-card.ts
@@ -0,0 +1,4 @@
+export interface HowItWorksCardProps {
+  title: string
+  steps: string[]
+}
--- a/src/lib/json-ui/interfaces/index.ts
+++ b/src/lib/json-ui/interfaces/index.ts
@@ -161,3 +161,20 @@ export * from './stat-card'
 export * from './status-badge'
 export * from './text'
 export * from './tree-icon'
+
+// Shadcn/ui wrapper interfaces
+export * from './shadcn-button'
+export * from './shadcn-badge'
+export * from './shadcn-card'
+export * from './shadcn-label'
+export * from './shadcn-input'
+export * from './shadcn-textarea'
+export * from './shadcn-separator'
+export * from './shadcn-scroll-area'
+export * from './shadcn-tabs'
+export * from './shadcn-dialog'
+export * from './shadcn-select'
+export * from './shadcn-slider'
+export * from './shadcn-switch'
+export * from './shadcn-checkbox'
+export * from './shadcn-tooltip'
--- a/src/lib/json-ui/interfaces/info-section.ts
+++ b/src/lib/json-ui/interfaces/info-section.ts
@@ -0,0 +1,10 @@
+export interface InfoItem {
+  label: string
+  value: string
+}
+
+export interface InfoSectionProps {
+  title: string
+  description: string
+  items: InfoItem[]
+}
--- a/src/lib/json-ui/interfaces/list-header.ts
+++ b/src/lib/json-ui/interfaces/list-header.ts
@@ -0,0 +1,5 @@
+export interface ListHeaderProps {
+  title: string
+  subtitle?: string
+  count: number
+}
--- a/src/lib/json-ui/interfaces/pwa-cache-section.ts
+++ b/src/lib/json-ui/interfaces/pwa-cache-section.ts
@@ -0,0 +1,13 @@
+export interface PWACacheSectionProps {
+  cacheSize: string
+  hasRegistration: boolean
+  onClearCache: () => void
+  title: string
+  description: string
+  sizeLabel: string
+  serviceWorkerLabel: string
+  activeStatus: string
+  inactiveStatus: string
+  clearAction: string
+  helper: string
+}
--- a/src/lib/json-ui/interfaces/pwa-update-section.ts
+++ b/src/lib/json-ui/interfaces/pwa-update-section.ts
@@ -0,0 +1,9 @@
+export interface PWAUpdateSectionProps {
+  isUpdateAvailable: boolean
+  onUpdate: () => void
+  title: string
+  description: string
+  label: string
+  status: string
+  action: string
+}
--- a/src/lib/json-ui/interfaces/search-empty-state.ts
+++ b/src/lib/json-ui/interfaces/search-empty-state.ts
@@ -0,0 +1 @@
+export interface SearchEmptyStateProps {}
--- a/src/lib/json-ui/interfaces/search-results.ts
+++ b/src/lib/json-ui/interfaces/search-results.ts
@@ -0,0 +1,11 @@
+export interface SearchResult {
+  id: string
+  title: string
+  subtitle?: string
+  icon: React.ReactNode
+}
+
+export interface SearchResultsProps {
+  groupedResults: Record<string, SearchResult[]>
+  onSelect: (result: SearchResult) => void
+}
--- a/src/lib/json-ui/interfaces/status-card.ts
+++ b/src/lib/json-ui/interfaces/status-card.ts
@@ -0,0 +1,7 @@
+export interface StatusCardProps {
+  count: number
+  label: string
+  iconName: string
+  iconSize: number
+  iconClass: string
+}
--- a/src/lib/json-ui/json-components.ts
+++ b/src/lib/json-ui/json-components.ts
@@ -168,6 +168,35 @@ import type {
  StatusBadgeProps,
  TextProps,
  TreeIconProps,
+  ShadcnButtonProps,
+  ShadcnCardProps,
+  ShadcnCardHeaderProps,
+  ShadcnCardTitleProps,
+  ShadcnCardContentProps,
+  ShadcnBadgeProps,
+  ShadcnLabelProps,
+  ShadcnInputProps,
+  ShadcnTextareaProps,
+  ShadcnSeparatorProps,
+  ShadcnScrollAreaProps,
+  ShadcnTabsProps,
+  ShadcnTabsListProps,
+  ShadcnTabsTriggerProps,
+  ShadcnTabsContentProps,
+  ShadcnDialogProps,
+  ShadcnDialogContentProps,
+  ShadcnDialogHeaderProps,
+  ShadcnDialogTitleProps,
+  ShadcnSelectProps,
+  ShadcnSelectTriggerProps,
+  ShadcnSelectContentProps,
+  ShadcnSelectItemProps,
+  ShadcnSliderProps,
+  ShadcnSwitchProps,
+  ShadcnCheckboxProps,
+  ShadcnTooltipProps,
+  ShadcnTooltipTriggerProps,
+  ShadcnTooltipContentProps,
 } from './interfaces'

 // Import JSON definitions
@@ -332,6 +361,37 @@ import statusBadgeDef from '@/components/json-definitions/status-badge.json'
 import textDef from '@/components/json-definitions/text.json'
 import treeIconDef from '@/components/json-definitions/tree-icon.json'

+// Shadcn/ui component definitions
+import shadcnButtonDef from '@/components/json-definitions/shadcn-button.json'
+import shadcnBadgeDef from '@/components/json-definitions/shadcn-badge.json'
+import shadcnCardDef from '@/components/json-definitions/shadcn-card.json'
+import shadcnCardHeaderDef from '@/components/json-definitions/shadcn-card-header.json'
+import shadcnCardTitleDef from '@/components/json-definitions/shadcn-card-title.json'
+import shadcnCardContentDef from '@/components/json-definitions/shadcn-card-content.json'
+import shadcnLabelDef from '@/components/json-definitions/shadcn-label.json'
+import shadcnInputDef from '@/components/json-definitions/shadcn-input.json'
+import shadcnTextareaDef from '@/components/json-definitions/shadcn-textarea.json'
+import shadcnSeparatorDef from '@/components/json-definitions/shadcn-separator.json'
+import shadcnScrollAreaDef from '@/components/json-definitions/shadcn-scroll-area.json'
+import shadcnTabsDef from '@/components/json-definitions/shadcn-tabs.json'
+import shadcnTabsListDef from '@/components/json-definitions/shadcn-tabs-list.json'
+import shadcnTabsTriggerDef from '@/components/json-definitions/shadcn-tabs-trigger.json'
+import shadcnTabsContentDef from '@/components/json-definitions/shadcn-tabs-content.json'
+import shadcnDialogDef from '@/components/json-definitions/shadcn-dialog.json'
+import shadcnDialogContentDef from '@/components/json-definitions/shadcn-dialog-content.json'
+import shadcnDialogHeaderDef from '@/components/json-definitions/shadcn-dialog-header.json'
+import shadcnDialogTitleDef from '@/components/json-definitions/shadcn-dialog-title.json'
+import shadcnSelectDef from '@/components/json-definitions/shadcn-select.json'
+import shadcnSelectTriggerDef from '@/components/json-definitions/shadcn-select-trigger.json'
+import shadcnSelectContentDef from '@/components/json-definitions/shadcn-select-content.json'
+import shadcnSelectItemDef from '@/components/json-definitions/shadcn-select-item.json'
+import shadcnSliderDef from '@/components/json-definitions/shadcn-slider.json'
+import shadcnSwitchDef from '@/components/json-definitions/shadcn-switch.json'
+import shadcnCheckboxDef from '@/components/json-definitions/shadcn-checkbox.json'
+import shadcnTooltipDef from '@/components/json-definitions/shadcn-tooltip.json'
+import shadcnTooltipTriggerDef from '@/components/json-definitions/shadcn-tooltip-trigger.json'
+import shadcnTooltipContentDef from '@/components/json-definitions/shadcn-tooltip-content.json'
+
 // Create pure JSON components (no hooks)
 export const BindingIndicator = createJsonComponent<BindingIndicatorProps>(bindingIndicatorDef)
 export const ButtonGroup = createJsonComponent<ButtonGroupProps>(buttonGroupDef)
@@ -636,4 +696,35 @@ export const StatusBadge = createJsonComponent<StatusBadgeProps>(statusBadgeDef)
 export const Text = createJsonComponent<TextProps>(textDef)
 export const TreeIcon = createJsonComponent<TreeIconProps>(treeIconDef)

+// Shadcn/ui wrapper components
+export const ShadcnButton = createJsonComponent<ShadcnButtonProps>(shadcnButtonDef)
+export const ShadcnBadge = createJsonComponent<ShadcnBadgeProps>(shadcnBadgeDef)
+export const ShadcnCard = createJsonComponent<ShadcnCardProps>(shadcnCardDef)
+export const ShadcnCardHeader = createJsonComponent<ShadcnCardHeaderProps>(shadcnCardHeaderDef)
+export const ShadcnCardTitle = createJsonComponent<ShadcnCardTitleProps>(shadcnCardTitleDef)
+export const ShadcnCardContent = createJsonComponent<ShadcnCardContentProps>(shadcnCardContentDef)
+export const ShadcnLabel = createJsonComponent<ShadcnLabelProps>(shadcnLabelDef)
+export const ShadcnInput = createJsonComponent<ShadcnInputProps>(shadcnInputDef)
+export const ShadcnTextarea = createJsonComponent<ShadcnTextareaProps>(shadcnTextareaDef)
+export const ShadcnSeparator = createJsonComponent<ShadcnSeparatorProps>(shadcnSeparatorDef)
+export const ShadcnScrollArea = createJsonComponent<ShadcnScrollAreaProps>(shadcnScrollAreaDef)
+export const ShadcnTabs = createJsonComponent<ShadcnTabsProps>(shadcnTabsDef)
+export const ShadcnTabsList = createJsonComponent<ShadcnTabsListProps>(shadcnTabsListDef)
+export const ShadcnTabsTrigger = createJsonComponent<ShadcnTabsTriggerProps>(shadcnTabsTriggerDef)
+export const ShadcnTabsContent = createJsonComponent<ShadcnTabsContentProps>(shadcnTabsContentDef)
+export const ShadcnDialog = createJsonComponent<ShadcnDialogProps>(shadcnDialogDef)
+export const ShadcnDialogContent = createJsonComponent<ShadcnDialogContentProps>(shadcnDialogContentDef)
+export const ShadcnDialogHeader = createJsonComponent<ShadcnDialogHeaderProps>(shadcnDialogHeaderDef)
+export const ShadcnDialogTitle = createJsonComponent<ShadcnDialogTitleProps>(shadcnDialogTitleDef)
+export const ShadcnSelect = createJsonComponent<ShadcnSelectProps>(shadcnSelectDef)
+export const ShadcnSelectTrigger = createJsonComponent<ShadcnSelectTriggerProps>(shadcnSelectTriggerDef)
+export const ShadcnSelectContent = createJsonComponent<ShadcnSelectContentProps>(shadcnSelectContentDef)
+export const ShadcnSelectItem = createJsonComponent<ShadcnSelectItemProps>(shadcnSelectItemDef)
+export const ShadcnSlider = createJsonComponent<ShadcnSliderProps>(shadcnSliderDef)
+export const ShadcnSwitch = createJsonComponent<ShadcnSwitchProps>(shadcnSwitchDef)
+export const ShadcnCheckbox = createJsonComponent<ShadcnCheckboxProps>(shadcnCheckboxDef)
+export const ShadcnTooltip = createJsonComponent<ShadcnTooltipProps>(shadcnTooltipDef)
+export const ShadcnTooltipTrigger = createJsonComponent<ShadcnTooltipTriggerProps>(shadcnTooltipTriggerDef)
+export const ShadcnTooltipContent = createJsonComponent<ShadcnTooltipContentProps>(shadcnTooltipContentDef)
+
 // All components converted to pure JSON! 🎉