docs(example): Guide tutorial + Showcase hub + nav reorg + borderless card

example/lib/main.dart

@@ -1,21 +1,25 @@
 import 'package:coflui/coflui.dart';
 import 'package:flutter/material.dart';
 
-import 'screens/detail_page_screen.dart';
-import 'screens/dynamic_components_screen.dart';
-import 'screens/dynamic_dashboard_screen.dart';
-import 'screens/dynamic_form_screen.dart';
+import 'screens/guide_screen.dart';
+import 'screens/icon_catalog_screen.dart';
 import 'screens/playground_screen.dart';
 import 'screens/reference_screen.dart';
-import 'screens/responsive_screen.dart';
+import 'screens/showcase_screen.dart';
 import 'screens/widget_gallery_screen.dart';
 
 /// Coflui example app entry point.
 ///
-/// A simple shell with a NavigationRail (desktop/tablet) or BottomNavigationBar
-/// (mobile) — itself demonstrating responsive layout.
+/// Navigation is organized into **6 tabs by learning path**:
+/// 1. **Guide** — start here (tutorials, JSON conventions, clone patterns)
+/// 2. **Gallery** — native widget showcase
+/// 3. **Showcase** — full dynamic-UI pages (Detail, Components, Form, Dashboard)
+/// 4. **Playground** — live JSON → UI editor
+/// 5. **Icons** — searchable icon catalog (tap to copy)
+/// 6. **Reference** — JSON schema reference
+///
+/// The Responsive demo lives inside Gallery.
 void main() {
-  // Register the dynamic UI engine's default builders once at app boot.
   DynamicUIBootstrap.registerDefaults();
   runApp(const CofluiExampleApp());
 }
@@ -45,7 +49,6 @@ class CofluiExampleApp extends StatelessWidget {
   }
 }
 
-/// Responsive shell: NavigationRail on tablet/desktop, BottomNav on mobile.
 class _Shell extends StatefulWidget {
   const _Shell();
 
@@ -57,62 +60,49 @@ class _ShellState extends State<_Shell> {
   int _index = 0;
 
   static const _destinations = [
+    (
+      label: 'Guide',
+      icon: Icons.school_outlined,
+      selectedIcon: Icons.school,
+    ),
     (
       label: 'Gallery',
       icon: Icons.widgets_outlined,
       selectedIcon: Icons.widgets,
     ),
     (
-      label: 'Detail',
-      icon: Icons.receipt_long_outlined,
-      selectedIcon: Icons.receipt_long,
-    ),
-    (
-      label: 'Components',
-      icon: Icons.extension_outlined,
-      selectedIcon: Icons.extension,
-    ),
-    (
-      label: 'Form',
-      icon: Icons.description_outlined,
-      selectedIcon: Icons.description,
-    ),
-    (
-      label: 'Dashboard',
-      icon: Icons.dashboard_outlined,
-      selectedIcon: Icons.dashboard,
+      label: 'Showcase',
+      icon: Icons.view_carousel_outlined,
+      selectedIcon: Icons.view_carousel,
     ),
     (
       label: 'Playground',
       icon: Icons.code_outlined,
       selectedIcon: Icons.code,
     ),
+    (
+      label: 'Icons',
+      icon: Icons.grid_view_outlined,
+      selectedIcon: Icons.grid_view,
+    ),
     (
       label: 'Reference',
       icon: Icons.menu_book_outlined,
       selectedIcon: Icons.menu_book,
     ),
-    (
-      label: 'Responsive',
-      icon: Icons.devices_outlined,
-      selectedIcon: Icons.devices,
-    ),
   ];
 
   static const _screens = <Widget>[
+    GuideScreen(),
     WidgetGalleryScreen(),
-    DetailPageScreen(),
-    DynamicComponentsScreen(),
-    DynamicFormScreen(),
-    DynamicDashboardScreen(),
+    ShowcaseScreen(),
     PlaygroundScreen(),
+    IconCatalogScreen(),
     ReferenceScreen(),
-    ResponsiveScreen(),
   ];
 
   @override
   Widget build(BuildContext context) {
-    // Use Coflui's own breakpoint to switch nav style.
     final useRail = !CofluiBreakpoints.isMobile(context);
 
     if (useRail) {

example/lib/samples/detail_page_json.dart

@@ -62,6 +62,7 @@ List<Map<String, dynamic>> buildDetailJson(Map<String, dynamic> d) {
     {
       'id': 'detail_card',
       'type': 'card',
+      'props': {'borderless': true},
       'style': {'padding': 16},
       'children': [
         {

example/lib/samples/icon_catalog.dart

@@ -0,0 +1,37 @@
+// Katalog nama ikon Material yang didukung IconResolver.
+//
+// Daftar ini disinkronkan dengan IconResolver.map di lib/. Setiap entri bisa
+// di-copy sebagai snippet JSON siap tempel ke Playground atau detail_page.
+const List<String> cofluiIconCatalog = [
+  // Actions
+  'add', 'edit', 'create', 'delete', 'remove', 'reset', 'refresh',
+  'check', 'check_circle', 'done', 'close', 'clear', 'cancel',
+  'save', 'send', 'search', 'filter', 'sort',
+  // Navigation
+  'arrow_back', 'arrow_forward', 'arrow_upward', 'arrow_downward',
+  'chevron_right', 'chevron_left', 'expand_more', 'expand_less',
+  'home', 'menu', 'dashboard', 'more_vert', 'more_horiz',
+  // People
+  'person', 'people', 'group', 'account', 'account_circle',
+  'admin', 'badge', 'verified_user',
+  // Content
+  'description', 'article', 'document', 'folder', 'file_copy',
+  'image', 'photo', 'picture', 'picture_as_pdf', 'pdf',
+  'attachment', 'attach_file', 'download', 'upload',
+  'cloud_upload', 'cloud_download', 'link',
+  // Communication
+  'email', 'mail', 'phone', 'call', 'message', 'chat',
+  'notifications', 'bell', 'share', 'favorite', 'heart', 'star',
+  // Commerce
+  'shopping_cart', 'cart', 'payment', 'receipt', 'money', 'currency',
+  'account_balance', 'payments',
+  // Status
+  'info', 'warning', 'error', 'success', 'pending',
+  'clock', 'time', 'schedule', 'calendar', 'calendar_today', 'event',
+  'history', 'visibility', 'visibility_off', 'lock', 'unlock', 'key',
+  'fingerprint', 'verified', 'task', 'task_alt',
+  // Misc
+  'copy', 'print', 'help', 'help_outline', 'lightbulb', 'flag',
+  'tag', 'label', 'location', 'location_on', 'place',
+  'gavel', 'shield', 'security',
+];

example/lib/samples/playground_templates.dart

@@ -138,6 +138,7 @@ const playgroundTemplates = <PlaygroundTemplate>[
   {
     "id": "detail_card",
     "type": "card",
+    "props": { "borderless": true },
     "style": { "padding": 16 },
     "children": [
       { "id": "dr1", "type": "detail_row", "props": { "icon": "domain", "label": "Company", "value": "PT Pura Barutama" } },