feat: add JSON-driven onboarding flow for screen building

README.md

@@ -81,7 +81,7 @@ graph TB
   end
   subgraph presentation ["lib/presentation"]
     pages["pages"]
-    widgets["widgets/ ×22"]
+    widgets["widgets/ ×103"]
   end
   subgraph playground ["lib/playground"]
     pg_page["PlaygroundPage"]
@@ -101,13 +101,23 @@ graph TB
 
 ## Features
 
-### Components (22 types)
+### Components (103 types)
 
 | Category | Components |
 |----------|-----------|
-| **Layout** | `column` · `row` · `container` · `card` · `listView` · `stack` · `positioned` · `wrap` · `spacer` · `responsive` · `expanded` · `flexible` |
+| **Core Layout** | `column` · `row` · `container` · `card` · `listView` · `stack` · `positioned` · `wrap` · `spacer` · `responsive` · `expanded` · `flexible` |
+| **Layout Wrappers** | `center` · `align` · `padding` · `sizedBox` · `constrainedBox` · `fittedBox` · `fractionallySizedBox` · `intrinsicHeight` · `intrinsicWidth` · `limitedBox` · `overflowBox` · `aspectRatio` · `baseline` · `opacity` · `clipRRect` · `clipOval` · `safeArea` · `rotatedBox` · `ignorePointer` · `absorbPointer` · `offstage` · `visibility` |
+| **Decorators** | `material` · `hero` · `decoratedBox` · `indexedStack` · `transform` · `backdropFilter` · `banner` |
+| **Scrollables** | `scrollView` · `gridView` · `pageView` · `customScrollView` · `sliverList` · `sliverGrid` |
+| **Interactives** | `inkWell` · `gestureDetector` · `tooltip` · `dismissible` · `draggable` · `longPressDraggable` |
+| **Animated** | `animatedContainer` · `animatedOpacity` · `animatedCrossFade` · `animatedSwitcher` · `animatedAlign` · `animatedPadding` · `animatedPositioned` · `animatedSize` · `animatedScale` |
+| **Tiles** | `listTile` · `expansionTile` · `switchListTile` · `checkboxListTile` · `radioListTile` |
+| **Tables** | `table` · `tableRow` · `tableCell` · `dataTable` |
+| **Text Variants** | `selectableText` · `richText` · `defaultTextStyle` |
+| **Button Variants** | `textButton` · `outlinedButton` · `iconButton` · `floatingActionButton` · `segmentedButton` |
+| **Media & Display** | `placeholder` · `circleAvatar` · `verticalDivider` · `popupMenuButton` · `searchBar` · `searchAnchor` · `tooltip` |
 | **Leaf** | `text` · `button` · `image` · `input` · `divider` · `icon` · `chip` · `progress` · `badge` |
-| **Interactive** | `switch` · `checkbox` · `dropdown` · `tabBar` · `carousel` |
+| **Interactive Inputs** | `switch` · `checkbox` · `dropdown` · `tabBar` · `carousel` · `slider` · `rangeSlider` · `radio` |
 
 ### Actions (7 types)
 
@@ -137,10 +147,11 @@ graph TB
 | `home` | Welcome page with navigation to all demos and a banner image |
 | `profile` | User profile with avatar, details card, and snackbar action |
 | `form` | Feedback form with validation, entrance animations, and submit |
-| `components_showcase` | Every component type in one screen |
+| `components_showcase` | Every core component type in one screen |
 | `expressions_demo` | Template interpolation and conditional visibility |
 | `theme_demo` | Dark theme applied via JSON contract |
 | `new_components` | Dropdown, tab bar, and carousel showcase |
+| `advanced_components` | Layout wrappers, decorators, tiles, buttons, text variants, and misc widgets |
 
 ---
 
@@ -245,6 +256,7 @@ _registry.register('yourType', buildYourComponent);
 ## Documentation
 
 - [Architecture & Schema Specification](docs/ARCHITECTURE.md)
+- [Component Reference Catalog](docs/COMPONENTS.md)
 - [Mock Server](server/README.md)
 
 ---

assets/screens/advanced_components.json

@@ -0,0 +1,270 @@
+{
+  "schemaVersion": "1.0",
+  "screen": {
+    "id": "advanced_components",
+    "title": "Advanced Components",
+    "root": {
+      "type": "column",
+      "props": {
+        "crossAxisAlignment": "stretch",
+        "padding": { "top": 24, "bottom": 32, "left": 24, "right": 24 }
+      },
+      "children": [
+        {
+          "type": "text",
+          "props": {
+            "content": "Layout Wrappers & Decorators",
+            "style": { "fontSize": 24, "fontWeight": "bold" }
+          }
+        },
+        { "type": "spacer", "props": { "height": 8 } },
+
+        {
+          "type": "text",
+          "props": {
+            "content": "Center + ClipRRect",
+            "style": { "fontSize": 16, "fontWeight": "w600" }
+          }
+        },
+        { "type": "spacer", "props": { "height": 8 } },
+        {
+          "type": "center",
+          "children": [
+            {
+              "type": "clipRRect",
+              "props": { "borderRadius": 16 },
+              "children": [
+                {
+                  "type": "container",
+                  "props": {
+                    "padding": 16,
+                    "decoration": {
+                      "color": "#E3F2FD",
+                      "borderRadius": 16
+                    }
+                  },
+                  "children": [
+                    {
+                      "type": "text",
+                      "props": { "content": "Clipped rounded content" }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+
+        { "type": "divider", "props": { "height": 32 } },
+
+        {
+          "type": "text",
+          "props": {
+            "content": "Opacity",
+            "style": { "fontSize": 16, "fontWeight": "w600" }
+          }
+        },
+        { "type": "spacer", "props": { "height": 8 } },
+        {
+          "type": "row",
+          "props": { "mainAxisAlignment": "spaceEvenly" },
+          "children": [
+            {
+              "type": "opacity",
+              "props": { "opacity": 1.0 },
+              "children": [
+                {
+                  "type": "chip",
+                  "props": { "label": "100%", "backgroundColor": "#2196F3" }
+                }
+              ]
+            },
+            {
+              "type": "opacity",
+              "props": { "opacity": 0.6 },
+              "children": [
+                {
+                  "type": "chip",
+                  "props": { "label": "60%", "backgroundColor": "#2196F3" }
+                }
+              ]
+            },
+            {
+              "type": "opacity",
+              "props": { "opacity": 0.3 },
+              "children": [
+                {
+                  "type": "chip",
+                  "props": { "label": "30%", "backgroundColor": "#2196F3" }
+                }
+              ]
+            }
+          ]
+        },
+
+        { "type": "divider", "props": { "height": 32 } },
+
+        {
+          "type": "text",
+          "props": {
+            "content": "Transform (Rotate & Scale)",
+            "style": { "fontSize": 16, "fontWeight": "w600" }
+          }
+        },
+        { "type": "spacer", "props": { "height": 8 } },
+        {
+          "type": "row",
+          "props": { "mainAxisAlignment": "spaceEvenly" },
+          "children": [
+            {
+              "type": "transform",
+              "props": { "transformType": "rotate", "angle": 0.3 },
+              "children": [
+                { "type": "icon", "props": { "name": "star", "size": 40, "color": "#FF9800" } }
+              ]
+            },
+            {
+              "type": "transform",
+              "props": { "transformType": "scale", "scale": 1.5 },
+              "children": [
+                { "type": "icon", "props": { "name": "favorite", "size": 32, "color": "#E91E63" } }
+              ]
+            }
+          ]
+        },
+
+        { "type": "divider", "props": { "height": 32 } },
+
+        {
+          "type": "text",
+          "props": {
+            "content": "Tiles",
+            "style": { "fontSize": 16, "fontWeight": "w600" }
+          }
+        },
+        { "type": "spacer", "props": { "height": 8 } },
+        {
+          "type": "listTile",
+          "props": {
+            "title": "Settings",
+            "subtitle": "Manage your preferences",
+            "leadingIcon": "settings"
+          }
+        },
+        {
+          "type": "expansionTile",
+          "props": { "title": "More Options", "initiallyExpanded": false },
+          "children": [
+            {
+              "type": "padding",
+              "props": { "padding": 16 },
+              "children": [
+                { "type": "text", "props": { "content": "Hidden content revealed on expand." } }
+              ]
+            }
+          ]
+        },
+
+        { "type": "divider", "props": { "height": 32 } },
+
+        {
+          "type": "text",
+          "props": {
+            "content": "Button Variants",
+            "style": { "fontSize": 16, "fontWeight": "w600" }
+          }
+        },
+        { "type": "spacer", "props": { "height": 8 } },
+        {
+          "type": "row",
+          "props": { "mainAxisAlignment": "spaceEvenly" },
+          "children": [
+            {
+              "type": "textButton",
+              "props": { "label": "Text" },
+              "action": { "type": "snackbar", "message": "Text button tapped" }
+            },
+            {
+              "type": "outlinedButton",
+              "props": { "label": "Outlined" },
+              "action": { "type": "snackbar", "message": "Outlined button tapped" }
+            },
+            {
+              "type": "iconButton",
+              "props": { "icon": "thumb_up", "tooltip": "Like" },
+              "action": { "type": "snackbar", "message": "Liked!" }
+            }
+          ]
+        },
+
+        { "type": "divider", "props": { "height": 32 } },
+
+        {
+          "type": "text",
+          "props": {
+            "content": "Text Variants",
+            "style": { "fontSize": 16, "fontWeight": "w600" }
+          }
+        },
+        { "type": "spacer", "props": { "height": 8 } },
+        {
+          "type": "selectableText",
+          "props": {
+            "content": "Long-press to select this text and copy it."
+          }
+        },
+        { "type": "spacer", "props": { "height": 8 } },
+        {
+          "type": "richText",
+          "props": {
+            "spans": [
+              { "text": "Bold ", "fontWeight": "bold" },
+              { "text": "and ", "color": "#666666" },
+              { "text": "colored", "color": "#E91E63", "fontWeight": "w600" },
+              { "text": " in one line." }
+            ]
+          }
+        },
+
+        { "type": "divider", "props": { "height": 32 } },
+
+        {
+          "type": "text",
+          "props": {
+            "content": "Miscellaneous",
+            "style": { "fontSize": 16, "fontWeight": "w600" }
+          }
+        },
+        { "type": "spacer", "props": { "height": 8 } },
+        {
+          "type": "row",
+          "props": { "mainAxisAlignment": "spaceEvenly" },
+          "children": [
+            {
+              "type": "circleAvatar",
+              "props": { "label": "AB", "radius": 28, "backgroundColor": "#7C4DFF" }
+            },
+            {
+              "type": "circleAvatar",
+              "props": { "icon": "person", "radius": 28, "backgroundColor": "#00BCD4" }
+            },
+            {
+              "type": "circleAvatar",
+              "props": { "label": "ZZ", "radius": 28, "backgroundColor": "#FF5722" }
+            }
+          ]
+        },
+        { "type": "spacer", "props": { "height": 12 } },
+        {
+          "type": "center",
+          "children": [
+            {
+              "type": "placeholder",
+              "props": { "width": 200, "height": 80 }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

assets/screens/home.json

@@ -82,6 +82,15 @@
                   "action": { "type": "navigate", "targetScreenId": "new_components" }
                 },
                 { "type": "spacer", "props": { "height": 8 } },
+                {
+                  "type": "button",
+                  "props": {
+                    "label": "Advanced Components",
+                    "style": { "backgroundColor": "#00897B", "textColor": "#FFFFFF" }
+                  },
+                  "action": { "type": "navigate", "targetScreenId": "advanced_components" }
+                },
+                { "type": "spacer", "props": { "height": 8 } },
                 {
                   "type": "button",
                   "props": {