Fix all validation errors - add missing component definitions

Fixed all "Unknown component type" validation errors by:

1. Restored Card sub-components (CardHeader, CardTitle, CardDescription, CardContent, CardFooter)
   - Restored src/components/ui/card.tsx with all sub-components
   - Created JSON definitions for all 5 Card sub-components

2. Restored Tabs sub-components (TabsList, TabsTrigger, TabsContent)
   - Restored src/components/ui/tabs.tsx with all sub-components
   - Created JSON definitions for all 3 Tabs sub-components

3. Added 20 missing custom page components
   - Created JSON wrappers for all custom page components
   - AtomicLibraryShowcase, CodeEditor, ComponentTreeBuilder, etc.
   - All components properly reference their TypeScript implementations

4. Updated registry system
   - Enhanced update-registry-from-json.ts to support 'custom' source
   - Added components directory scanning
   - Registry now includes all 342 components

Results:
- ✅ All "Unknown component type" errors resolved
- ✅ Registry updated: 322 → 342 components (+20)
- ✅ 28 new JSON files created (8 UI sub-components + 20 custom components)
- ⚠️ Remaining validation errors are pre-existing schema format issues in page definitions (unrelated to component conversion)

Registry Statistics:
- Total components: 342
- JSON compatible: 119
- By source: atoms (142), ui (65), molecules (45), icons (38), custom (20), organisms (16), wrappers (10), primitive (6)

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

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import { ComponentProps } from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { ComponentProps } from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/config/pages/components/atomic-library-showcase.json

@@ -0,0 +1,10 @@
+{
+  "type": "AtomicLibraryShowcase",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/AtomicLibraryShowcase",
+    "export": "AtomicLibraryShowcase"
+  },
+  "props": {}
+}

src/config/pages/components/code-editor.json

@@ -0,0 +1,10 @@
+{
+  "type": "CodeEditor",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/CodeEditor",
+    "export": "CodeEditor"
+  },
+  "props": {}
+}

src/config/pages/components/component-tree-builder.json

@@ -0,0 +1,10 @@
+{
+  "type": "ComponentTreeBuilder",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/ComponentTreeBuilder",
+    "export": "ComponentTreeBuilder"
+  },
+  "props": {}
+}

src/config/pages/components/component-tree-manager.json

@@ -0,0 +1,10 @@
+{
+  "type": "ComponentTreeManager",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/ComponentTreeManager",
+    "export": "ComponentTreeManager"
+  },
+  "props": {}
+}

src/config/pages/components/conflict-resolution-page.json

@@ -0,0 +1,10 @@
+{
+  "type": "ConflictResolutionPage",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/ConflictResolutionPage",
+    "export": "ConflictResolutionPage"
+  },
+  "props": {}
+}

src/config/pages/components/docker-build-debugger.json

@@ -0,0 +1,10 @@
+{
+  "type": "DockerBuildDebugger",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/DockerBuildDebugger",
+    "export": "DockerBuildDebugger"
+  },
+  "props": {}
+}

src/config/pages/components/documentation-view.json

@@ -0,0 +1,10 @@
+{
+  "type": "DocumentationView",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/DocumentationView",
+    "export": "DocumentationView"
+  },
+  "props": {}
+}

src/config/pages/components/error-panel.json

@@ -0,0 +1,10 @@
+{
+  "type": "ErrorPanel",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/ErrorPanel",
+    "export": "ErrorPanel"
+  },
+  "props": {}
+}

src/config/pages/components/favicon-designer.json

@@ -0,0 +1,10 @@
+{
+  "type": "FaviconDesigner",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/FaviconDesigner",
+    "export": "FaviconDesigner"
+  },
+  "props": {}
+}

src/config/pages/components/feature-idea-cloud.json

@@ -0,0 +1,10 @@
+{
+  "type": "FeatureIdeaCloud",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/FeatureIdeaCloud",
+    "export": "FeatureIdeaCloud"
+  },
+  "props": {}
+}

src/config/pages/components/feature-toggle-settings.json

@@ -0,0 +1,10 @@
+{
+  "type": "FeatureToggleSettings",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/FeatureToggleSettings",
+    "export": "FeatureToggleSettings"
+  },
+  "props": {}
+}

src/config/pages/components/j-s-o-n-component-tree-manager.json

@@ -0,0 +1,10 @@
+{
+  "type": "JSONComponentTreeManager",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/JSONComponentTreeManager",
+    "export": "JSONComponentTreeManager"
+  },
+  "props": {}
+}

src/config/pages/components/j-s-o-n-lambda-designer.json

@@ -0,0 +1,10 @@
+{
+  "type": "JSONLambdaDesigner",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/JSONLambdaDesigner",
+    "export": "JSONLambdaDesigner"
+  },
+  "props": {}
+}

src/config/pages/components/j-s-o-n-model-designer.json

@@ -0,0 +1,10 @@
+{
+  "type": "JSONModelDesigner",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/JSONModelDesigner",
+    "export": "JSONModelDesigner"
+  },
+  "props": {}
+}

src/config/pages/components/p-w-a-settings.json

@@ -0,0 +1,10 @@
+{
+  "type": "PWASettings",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/PWASettings",
+    "export": "PWASettings"
+  },
+  "props": {}
+}

src/config/pages/components/persistence-dashboard.json

@@ -0,0 +1,10 @@
+{
+  "type": "PersistenceDashboard",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/PersistenceDashboard",
+    "export": "PersistenceDashboard"
+  },
+  "props": {}
+}

src/config/pages/components/persistence-example.json

@@ -0,0 +1,10 @@
+{
+  "type": "PersistenceExample",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/PersistenceExample",
+    "export": "PersistenceExample"
+  },
+  "props": {}
+}

src/config/pages/components/project-dashboard.json

@@ -0,0 +1,10 @@
+{
+  "type": "ProjectDashboard",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/ProjectDashboard",
+    "export": "ProjectDashboard"
+  },
+  "props": {}
+}

src/config/pages/components/sass-styles-showcase.json

@@ -0,0 +1,10 @@
+{
+  "type": "SassStylesShowcase",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/SassStylesShowcase",
+    "export": "SassStylesShowcase"
+  },
+  "props": {}
+}

src/config/pages/components/style-designer.json

@@ -0,0 +1,10 @@
+{
+  "type": "StyleDesigner",
+  "jsonCompatible": false,
+  "wrapperRequired": true,
+  "load": {
+    "path": "@/components/StyleDesigner",
+    "export": "StyleDesigner"
+  },
+  "props": {}
+}

src/config/pages/ui/card-content.json

@@ -0,0 +1,9 @@
+{
+  "type": "CardContent",
+  "source": "ui",
+  "load": {
+    "path": "@/components/ui/card",
+    "export": "CardContent"
+  },
+  "props": {}
+}

src/config/pages/ui/card-description.json

@@ -0,0 +1,9 @@
+{
+  "type": "CardDescription",
+  "source": "ui",
+  "load": {
+    "path": "@/components/ui/card",
+    "export": "CardDescription"
+  },
+  "props": {}
+}

src/config/pages/ui/card-footer.json

@@ -0,0 +1,9 @@
+{
+  "type": "CardFooter",
+  "source": "ui",
+  "load": {
+    "path": "@/components/ui/card",
+    "export": "CardFooter"
+  },
+  "props": {}
+}

src/config/pages/ui/card-header.json

@@ -0,0 +1,9 @@
+{
+  "type": "CardHeader",
+  "source": "ui",
+  "load": {
+    "path": "@/components/ui/card",
+    "export": "CardHeader"
+  },
+  "props": {}
+}

src/config/pages/ui/card-title.json

@@ -0,0 +1,9 @@
+{
+  "type": "CardTitle",
+  "source": "ui",
+  "load": {
+    "path": "@/components/ui/card",
+    "export": "CardTitle"
+  },
+  "props": {}
+}

src/config/pages/ui/tabs-content.json

@@ -0,0 +1,9 @@
+{
+  "type": "TabsContent",
+  "source": "ui",
+  "load": {
+    "path": "@/components/ui/tabs",
+    "export": "TabsContent"
+  },
+  "props": {}
+}

src/config/pages/ui/tabs-list.json

@@ -0,0 +1,9 @@
+{
+  "type": "TabsList",
+  "source": "ui",
+  "load": {
+    "path": "@/components/ui/tabs",
+    "export": "TabsList"
+  },
+  "props": {}
+}

src/config/pages/ui/tabs-trigger.json

@@ -0,0 +1,9 @@
+{
+  "type": "TabsTrigger",
+  "source": "ui",
+  "load": {
+    "path": "@/components/ui/tabs",
+    "export": "TabsTrigger"
+  },
+  "props": {}
+}