@ziyarago/ui 0.6.1 → 0.8.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.6.1",
+ "version": "0.8.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -275,6 +275,18 @@
     "PageAccount",
     "PagePricing",
     "PageFaq",
+    "PageAnalytics",
+    "PageCalendar",
+    "PageKanban",
+    "PageBilling",
+    "PageTeam",
+    "PageIntegrations",
+    "PageSearch",
+    "PageNotifications",
+    "PageInbox",
+    "PageCheckout",
+    "PageOnboarding",
+    "PageLanding",
     "PageAuth",
     "PageStatus"
    ]
@@ -2648,6 +2660,1417 @@
       "use": "<UiAccordion :items=\"faq\" />"
      }
     ]
+   },
+   {
+    "id": "landing",
+    "label": "Landing",
+    "component": "UiPageLanding",
+    "description": "Marketing page: hero, logos, feature grid, social proof, pricing teaser, final call to action and footer.",
+    "shell": false,
+    "slots": [
+     {
+      "id": "hero",
+      "title": "Hero",
+      "desc": "Headline, subtitle and two buttons on a gradient card.",
+      "accepts": [
+       "HeroBanner",
+       "Card",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1 and a short supporting line"
+       }
+      ],
+      "use": "<UiHeroBanner title=\"Plan your Umrah\" cta=\"Get started\" />"
+     },
+     {
+      "id": "logos",
+      "title": "Logo strip",
+      "desc": "Row of partner names under the hero.",
+      "accepts": [
+       "Chip",
+       "Text"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "string[]",
+        "desc": "Partner names"
+       }
+      ],
+      "use": "<UiChip pill>Hilton</UiChip>"
+     },
+     {
+      "id": "features",
+      "title": "Features",
+      "desc": "Grid of icon, title and text cards.",
+      "accepts": [
+       "Card",
+       "IconTile"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{icon,title,text}[]",
+        "desc": "Three to six features"
+       }
+      ],
+      "use": "<UiCard title=\"Offline guides\">…</UiCard>"
+     },
+     {
+      "id": "proof",
+      "title": "Social proof",
+      "desc": "Stats strip and customer quotes.",
+      "accepts": [
+       "StatStrip",
+       "Card",
+       "Avatar"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{value,label}[]",
+        "desc": "Headline numbers"
+       }
+      ],
+      "use": "<UiStatStrip :items=\"stats\" />"
+     },
+     {
+      "id": "pricing",
+      "title": "Pricing teaser",
+      "desc": "Two or three plans with a link to the full pricing page.",
+      "accepts": [
+       "PricingCard",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "plans",
+        "type": "Plan[]",
+        "desc": "Name, price, features"
+       }
+      ],
+      "use": "<UiPricingCard name=\"Plus\" price=\"$4.99\" />"
+     },
+     {
+      "id": "cta",
+      "title": "Call to action",
+      "desc": "Closing block with one primary button.",
+      "accepts": [
+       "Card",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "cta",
+        "type": "string",
+        "desc": "Button label"
+       }
+      ],
+      "use": "<UiCard variant=\"gradient\">…</UiCard>"
+     },
+     {
+      "id": "footer",
+      "title": "Footer",
+      "desc": "Copyright and links.",
+      "accepts": [
+       "Footer"
+      ],
+      "props": [
+       {
+        "name": "links",
+        "type": "{label,href}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiFooter copyright=\"© 2026\" :links=\"links\" />"
+     }
+    ]
+   },
+   {
+    "id": "onboarding",
+    "label": "Onboarding",
+    "component": "UiPageOnboarding",
+    "description": "First-run setup: progress, step content, checklist and side tips.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "progress",
+      "title": "Progress",
+      "desc": "Stepper and overall completion bar.",
+      "accepts": [
+       "Stepper",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "current",
+        "type": "number",
+        "desc": "Index of the active step"
+       }
+      ],
+      "use": "<UiStepper :steps=\"steps\" :current=\"1\" />"
+     },
+     {
+      "id": "steps",
+      "title": "Step content",
+      "desc": "Form or choice for the active step.",
+      "accepts": [
+       "Card",
+       "TextField",
+       "OptionCards",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "step",
+        "type": "number",
+        "desc": "Active step"
+       }
+      ],
+      "use": "<UiCard title=\"Your company\">…</UiCard>"
+     },
+     {
+      "id": "checklist",
+      "title": "Checklist",
+      "desc": "Tasks to finish setup with done marks.",
+      "accepts": [
+       "Card",
+       "Checkbox",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{id,label,done}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCheckbox v-model=\"done\" label=\"Add a hotel\" />"
+     },
+     {
+      "id": "tips",
+      "title": "Tips",
+      "desc": "Side cards with help and a contact link.",
+      "accepts": [
+       "Card",
+       "IconTile",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "tips",
+        "type": "{icon,title,text}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Need help?\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "checkout",
+    "label": "Checkout",
+    "component": "UiPageCheckout",
+    "description": "Checkout: steps, cart items, address, payment method and an order summary.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "steps",
+      "title": "Steps",
+      "desc": "Cart, details, payment, done.",
+      "accepts": [
+       "Stepper"
+      ],
+      "props": [
+       {
+        "name": "current",
+        "type": "number",
+        "desc": ""
+       }
+      ],
+      "use": "<UiStepper :steps=\"steps\" :current=\"1\" />"
+     },
+     {
+      "id": "items",
+      "title": "Cart items",
+      "desc": "Lines with quantity and price.",
+      "accepts": [
+       "Card",
+       "NumberInput",
+       "IconButton"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{title,qty,price}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Your cart\">…</UiCard>"
+     },
+     {
+      "id": "address",
+      "title": "Address",
+      "desc": "Contact and delivery fields.",
+      "accepts": [
+       "Card",
+       "TextField",
+       "Select"
+      ],
+      "props": [
+       {
+        "name": "address",
+        "type": "object",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Address\">…</UiCard>"
+     },
+     {
+      "id": "payment",
+      "title": "Payment",
+      "desc": "Payment method choice and card fields.",
+      "accepts": [
+       "OptionCards",
+       "TextField"
+      ],
+      "props": [
+       {
+        "name": "method",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiOptionCards v-model=\"method\" :options=\"methods\" />"
+     },
+     {
+      "id": "summary",
+      "title": "Order summary",
+      "desc": "Totals, promo code and the pay button.",
+      "accepts": [
+       "Card",
+       "Descriptions",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "total",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Summary\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "inbox",
+    "label": "Inbox",
+    "component": "UiPageInbox",
+    "description": "Conversation list, message thread with composer and a customer panel; stacks on mobile.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Search and folder chips above the list.",
+      "accepts": [
+       "SearchInput",
+       "FilterChips"
+      ],
+      "props": [
+       {
+        "name": "query",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput v-model=\"q\" />"
+     },
+     {
+      "id": "list",
+      "title": "Conversations",
+      "desc": "List of conversations with unread marks.",
+      "accepts": [
+       "Card",
+       "Avatar",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{id,name,preview,time,unread}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "thread",
+      "title": "Thread",
+      "desc": "Messages of the open conversation.",
+      "accepts": [
+       "Card",
+       "Avatar"
+      ],
+      "props": [
+       {
+        "name": "messages",
+        "type": "{from,text,time}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Aziz Karimov\">…</UiCard>"
+     },
+     {
+      "id": "composer",
+      "title": "Composer",
+      "desc": "Reply field and send button.",
+      "accepts": [
+       "Textarea",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "value",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiTextarea v-model=\"reply\" />"
+     },
+     {
+      "id": "customer",
+      "title": "Customer",
+      "desc": "Contact details and tags of the person.",
+      "accepts": [
+       "ContactPanel",
+       "Descriptions",
+       "Tag"
+      ],
+      "props": [
+       {
+        "name": "name",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiContactPanel name=\"Aziz Karimov\" />"
+     }
+    ]
+   },
+   {
+    "id": "notifications",
+    "label": "Notifications",
+    "component": "UiPageNotifications",
+    "description": "Activity feed grouped by day with filters, mark all as read and an empty state.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Filter chips: all, unread, mentions.",
+      "accepts": [
+       "FilterChips",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "value",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiFilterChips v-model=\"f\" :items=\"filters\" />"
+     },
+     {
+      "id": "feed",
+      "title": "Feed",
+      "desc": "Day groups with notification rows.",
+      "accepts": [
+       "Card",
+       "IconTile",
+       "Badge",
+       "Divider"
+      ],
+      "props": [
+       {
+        "name": "groups",
+        "type": "{day,items}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Today\">…</UiCard>"
+     },
+     {
+      "id": "empty",
+      "title": "Empty state",
+      "desc": "Shown when nothing matches or all is read.",
+      "accepts": [
+       "EmptyState"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiEmptyState icon=\"bell-off\" title=\"All caught up\" />"
+     }
+    ]
+   },
+   {
+    "id": "analytics",
+    "label": "Analytics",
+    "component": "UiPageAnalytics",
+    "description": "Reports: period picker, KPI strip, charts, breakdown and a data table with export.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "period",
+      "title": "Period",
+      "desc": "Range presets and compare toggle.",
+      "accepts": [
+       "SegmentedControl",
+       "Select",
+       "Switch"
+      ],
+      "props": [
+       {
+        "name": "value",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSegmentedControl v-model=\"p\" :items=\"periods\" />"
+     },
+     {
+      "id": "kpis",
+      "title": "KPI strip",
+      "desc": "Four headline numbers with deltas.",
+      "accepts": [
+       "KpiTile",
+       "StatLine"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{label,value,delta}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiKpiTile label=\"Revenue\" value=\"$48k\" delta=\"+8%\" />"
+     },
+     {
+      "id": "trend",
+      "title": "Trend chart",
+      "desc": "Main time series.",
+      "accepts": [
+       "ChartCard",
+       "MiniChart"
+      ],
+      "props": [
+       {
+        "name": "values",
+        "type": "number[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiChartCard title=\"Revenue\">…</UiChartCard>"
+     },
+     {
+      "id": "breakdown",
+      "title": "Breakdown",
+      "desc": "Split by channel or country.",
+      "accepts": [
+       "SegBar",
+       "CountryRow",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "segments",
+        "type": "{label,value}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSegBar :segments=\"segments\" />"
+     },
+     {
+      "id": "table",
+      "title": "Detail table",
+      "desc": "Rows behind the numbers.",
+      "accepts": [
+       "DataTable"
+      ],
+      "props": [
+       {
+        "name": "rows",
+        "type": "object[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
+     }
+    ]
+   },
+   {
+    "id": "calendar",
+    "label": "Calendar",
+    "component": "UiPageCalendar",
+    "description": "Schedule: week, day and month switch, event grid, mini calendar and an event details side panel.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "toolbar",
+      "title": "Toolbar",
+      "desc": "View switch, date navigation and filters.",
+      "accepts": [
+       "SegmentedControl",
+       "Button",
+       "IconButton",
+       "Select"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSegmentedControl v-model=\"view\" :items=\"views\" />"
+     },
+     {
+      "id": "grid",
+      "title": "Event grid",
+      "desc": "Week, day or month grid with events.",
+      "accepts": [
+       "CalendarView",
+       "Card"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard padding=\"none\">…grid…</UiCard>"
+     },
+     {
+      "id": "mini",
+      "title": "Mini calendar",
+      "desc": "Small month picker.",
+      "accepts": [
+       "Calendar"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCalendar v-model=\"day\" />"
+     },
+     {
+      "id": "details",
+      "title": "Event details",
+      "desc": "Selected event with time, place, guests and actions.",
+      "accepts": [
+       "Card",
+       "Descriptions",
+       "Avatar",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Hotel check-in\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "kanban",
+    "label": "Kanban",
+    "component": "UiPageKanban",
+    "description": "Task board: columns with cards, filters and a card detail panel.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Search, assignee and label filters.",
+      "accepts": [
+       "SearchInput",
+       "FilterChips",
+       "Select"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiFilterChips v-model=\"f\" :items=\"labels\" />"
+     },
+     {
+      "id": "board",
+      "title": "Board",
+      "desc": "Task columns with cards.",
+      "accepts": [
+       "KanbanColumn",
+       "KanbanCard"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiKanbanColumn title=\"To do\" :count=\"3\">…</UiKanbanColumn>"
+     },
+     {
+      "id": "detail",
+      "title": "Card detail",
+      "desc": "Side panel for the selected card.",
+      "accepts": [
+       "Card",
+       "Descriptions",
+       "Timeline",
+       "Checkbox"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Task\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "billing",
+    "label": "Billing",
+    "component": "UiPageBilling",
+    "description": "Billing: current plan, usage meters, invoices table, payment methods and upgrade.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "plan",
+      "title": "Current plan",
+      "desc": "Plan name, price, renewal date and actions.",
+      "accepts": [
+       "Card",
+       "Badge",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Pro plan\">…</UiCard>"
+     },
+     {
+      "id": "usage",
+      "title": "Usage",
+      "desc": "Meters for seats, storage and requests.",
+      "accepts": [
+       "Progress",
+       "Card"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiProgress :value=\"72\" label=\"Seats\" />"
+     },
+     {
+      "id": "invoices",
+      "title": "Invoices",
+      "desc": "Past invoices with status and download.",
+      "accepts": [
+       "DataTable",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
+     },
+     {
+      "id": "methods",
+      "title": "Payment methods",
+      "desc": "Saved cards with default marker.",
+      "accepts": [
+       "Card",
+       "IconTile",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Payment methods\">…</UiCard>"
+     },
+     {
+      "id": "upgrade",
+      "title": "Upgrade",
+      "desc": "Upsell card for the next plan.",
+      "accepts": [
+       "Card",
+       "PricingCard",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard variant=\"inverse\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "team",
+    "label": "Team",
+    "component": "UiPageTeam",
+    "description": "Team: members table, invite form and a roles and permissions matrix.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "stats",
+      "title": "Summary",
+      "desc": "Seats, pending invites and admins.",
+      "accepts": [
+       "StatsCard",
+       "KpiTile"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiKpiTile label=\"Members\" value=\"12\" />"
+     },
+     {
+      "id": "members",
+      "title": "Members",
+      "desc": "Members table with role and status.",
+      "accepts": [
+       "DataTable",
+       "UserCell",
+       "Select",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
+     },
+     {
+      "id": "roles",
+      "title": "Roles and permissions",
+      "desc": "Matrix of permissions per role.",
+      "accepts": [
+       "DataTable",
+       "Checkbox",
+       "Switch"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"roleCols\" :rows=\"perms\" />"
+     },
+     {
+      "id": "invite",
+      "title": "Invite",
+      "desc": "Email, role and send button.",
+      "accepts": [
+       "Card",
+       "TextField",
+       "Select",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Invite\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "integrations",
+    "label": "Integrations",
+    "component": "UiPageIntegrations",
+    "description": "Integrations: connection cards with status, API keys table with reveal, copy and revoke, and a webhooks list.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Search and category filter.",
+      "accepts": [
+       "SearchInput",
+       "FilterChips"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput v-model=\"q\" />"
+     },
+     {
+      "id": "connections",
+      "title": "Connections",
+      "desc": "Cards with connected, error or off status.",
+      "accepts": [
+       "IntegrationCard"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiIntegrationCard name=\"Telegram\" status=\"connected\" />"
+     },
+     {
+      "id": "keys",
+      "title": "API keys",
+      "desc": "Keys with reveal, copy and revoke.",
+      "accepts": [
+       "DataTable",
+       "CopyButton",
+       "IconButton"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"keys\" />"
+     },
+     {
+      "id": "webhooks",
+      "title": "Webhooks",
+      "desc": "Endpoints with event types and on/off switch.",
+      "accepts": [
+       "Card",
+       "Switch",
+       "Chip"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Webhooks\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "search",
+    "label": "Search results",
+    "component": "UiPageSearch",
+    "description": "Search results: query field, filters, grouped results and an empty state.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "search",
+      "title": "Search field",
+      "desc": "Large query field with tabs for result types.",
+      "accepts": [
+       "SearchInput",
+       "Tabs"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput v-model=\"q\" />"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Sidebar with checkboxes, range and select.",
+      "accepts": [
+       "Card",
+       "Checkbox",
+       "RangeSlider",
+       "Select"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Filters\">…</UiCard>"
+     },
+     {
+      "id": "results",
+      "title": "Results",
+      "desc": "Result groups with titles and counts.",
+      "accepts": [
+       "Card",
+       "Chip",
+       "Divider"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard padding=\"none\">…</UiCard>"
+     },
+     {
+      "id": "empty",
+      "title": "Empty state",
+      "desc": "Shown when nothing matches.",
+      "accepts": [
+       "EmptyState"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiEmptyState icon=\"search-x\" title=\"No results\" />"
+     }
+    ]
    }
   ]
  },
@@ -9156,149 +10579,419 @@
      "default": 360,
      "description": "Height in px."
     },
-    "theme": {
-     "type": "'light' | 'dark'",
+    "theme": {
+     "type": "'light' | 'dark'",
+     "values": [
+      "light",
+      "dark"
+     ],
+     "description": "Tile theme. If omitted, dark is used when the page is inside a dark data-theme."
+    },
+    "style": {
+     "type": "string",
+     "description": "CARTO tile style path, for example \"light_all\" or \"dark_all\". Overrides theme."
+    },
+    "label": {
+     "type": "string",
+     "default": "Map",
+     "description": "aria-label of the map region."
+    },
+    "labels": {
+     "type": "{ zoomIn?: string; zoomOut?: string }",
+     "default": "{ zoomIn: 'Zoom in', zoomOut: 'Zoom out' }",
+     "description": "Accessible names of the zoom buttons."
+    }
+   },
+   "events": {
+    "select": "Called with the marker object when a marker is clicked.",
+    "move": "Called with { lat, lon, zoom } while the user pans or zooms (drag, touch, wheel, double click or the +/- buttons).",
+    "zoom": "Called with the new zoom level when it changes."
+   },
+   "notes": [
+    "The center and zoom props are initial values; user panning and zooming is kept in internal state. Listen to move/zoom to track it.",
+    "Drag or touch to pan, wheel or double click to zoom around the pointer. The tile theme follows the page data-theme after mount (light tiles on the server render) unless theme or style is set.",
+    "Tiles come from a third-party CDN, so it needs network access."
+   ]
+  },
+  {
+   "name": "ProfileHeader",
+   "tag": "UiProfileHeader",
+   "group": "media",
+   "description": "Profile card with a cover image, large avatar, name and a row of meta items.",
+   "props": {
+    "name": {
+     "type": "string",
+     "required": true,
+     "description": "Person or organization name."
+    },
+    "src": {
+     "type": "string",
+     "description": "Avatar image URL; initials are shown without it."
+    },
+    "cover": {
+     "type": "string",
+     "description": "Cover image URL."
+    },
+    "meta": {
+     "type": "{ icon: string; label: string }[]",
+     "default": [],
+     "description": "Facts under the name such as location or join date. label must be unique."
+    }
+   },
+   "slots": {
+    "default": "Extra content on the right of the name row, usually action buttons."
+   }
+  },
+  {
+   "name": "ChatAi",
+   "tag": "UiChatAi",
+   "group": "media",
+   "description": "Chat panel with message bubbles, a typing indicator and an input, for AI assistant UIs.",
+   "props": {
+    "messages": {
+     "type": "{ role: 'user' | 'ai'; text: string }[]",
+     "required": true,
+     "default": [],
+     "description": "Conversation in order. Any role other than \"user\" renders as an assistant bubble."
+    },
+    "loading": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows the typing dots and disables sending."
+    },
+    "title": {
+     "type": "string",
+     "default": "Assistant",
+     "description": "Header title; also the aria-label. The header renders only when set."
+    },
+    "subtitle": {
+     "type": "string",
+     "description": "Muted text next to the title."
+    },
+    "placeholder": {
+     "type": "string",
+     "default": "Ask anything…",
+     "description": "Input placeholder."
+    }
+   },
+   "events": {
+    "send": "Called with the trimmed message text when the user presses Enter or the send button. The component does not append it to messages."
+   },
+   "notes": [
+    "Append the user message and the reply to messages yourself; set loading while waiting."
+   ]
+  },
+  {
+   "name": "HotelCard",
+   "tag": "UiHotelCard",
+   "group": "domain",
+   "description": "Hotel listing card with photo, tags, stars, distance, rating and nightly price; use in catalogs and search results.",
+   "props": {
+    "name": {
+     "type": "string",
+     "required": true,
+     "description": "Hotel name."
+    },
+    "image": {
+     "type": "string",
+     "description": "Photo URL, used as the card background image."
+    },
+    "tags": {
+     "type": "string[]",
+     "default": "[]",
+     "description": "Brand badges over the photo, e.g. \"Haram view\"."
+    },
+    "stars": {
+     "type": "number",
+     "default": 0,
+     "description": "Star class 0-5, rendered as repeated stars."
+    },
+    "distance": {
+     "type": "string",
+     "description": "Distance caption next to the stars, e.g. \"120 m to the Haram\"."
+    },
+    "rating": {
+     "type": "string | number",
+     "description": "Guest rating shown in a green badge, e.g. 9.2."
+    },
+    "price": {
+     "type": "number",
+     "description": "Price per unit, formatted with thousand separators; the currency label is fixed to SAR."
+    },
+    "night": {
+     "type": "string",
+     "default": "night",
+     "description": "Unit after \"SAR /\", e.g. \"night\"."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scales padding, text and avatars."
+    }
+   },
+   "notes": [
+    "Currency is hard-coded to SAR.",
+    "Wrap in a clickable element yourself; the card has no click handler."
+   ]
+  },
+  {
+   "name": "TourCard",
+   "tag": "UiTourCard",
+   "group": "domain",
+   "description": "Tour or virtual-tour card with session count and a seat-occupancy bar.",
+   "props": {
+    "name": {
+     "type": "string",
+     "required": true,
+     "description": "Tour title."
+    },
+    "city": {
+     "type": "string",
+     "description": "City shown in the subtitle."
+    },
+    "sessions": {
+     "type": "number",
+     "description": "Number of sessions, shown as \"N sessions\"."
+    },
+    "booked": {
+     "type": "number",
+     "required": true,
+     "description": "Seats already booked."
+    },
+    "seats": {
+     "type": "number",
+     "required": true,
+     "description": "Total seats; the bar shows booked / seats."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scales padding, text and avatars."
+    }
+   },
+   "slots": {
+    "actions": "Footer actions, usually Buttons."
+   },
+   "notes": [
+    "A fixed \"360°\" badge is always shown.",
+    "With seats = 0 or missing the bar is empty (0%) and the meta reads \"0/0\"."
+   ]
+  },
+  {
+   "name": "PrayerTimes",
+   "tag": "UiPrayerTimes",
+   "group": "domain",
+   "description": "Row of daily prayer times with the upcoming prayer highlighted.",
+   "props": {
+    "items": {
+     "type": "{ name: string; time: string }[]",
+     "default": "[]",
+     "description": "Prayers in display order; time is shown as-is, e.g. \"05:12\"."
+    },
+    "next": {
+     "type": "number",
+     "description": "Index in items of the next prayer; sets aria-current on it."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scales padding, text and avatars."
+    }
+   }
+  },
+  {
+   "name": "RamadanTracker",
+   "tag": "UiRamadanTracker",
+   "group": "domain",
+   "description": "Thirty-day Ramadan progress strip; the last ten days and odd nights are marked.",
+   "props": {
+    "day": {
+     "type": "number",
+     "required": true,
+     "description": "Current day 1-30. Earlier days render as past, later days as upcoming."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
-      "light",
-      "dark"
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
      ],
-     "description": "Tile theme. If omitted, dark is used when the page is inside a dark data-theme."
-    },
-    "style": {
-     "type": "string",
-     "description": "CARTO tile style path, for example \"light_all\" or \"dark_all\". Overrides theme."
-    },
-    "label": {
-     "type": "string",
-     "default": "Map",
-     "description": "aria-label of the map region."
-    },
-    "labels": {
-     "type": "{ zoomIn?: string; zoomOut?: string }",
-     "default": "{ zoomIn: 'Zoom in', zoomOut: 'Zoom out' }",
-     "description": "Accessible names of the zoom buttons."
+     "default": "md",
+     "description": "Scales padding, text and avatars."
     }
    },
-   "events": {
-    "select": "Called with the marker object when a marker is clicked.",
-    "move": "Called with { lat, lon, zoom } while the user pans or zooms (drag, touch, wheel, double click or the +/- buttons).",
-    "zoom": "Called with the new zoom level when it changes."
-   },
    "notes": [
-    "The center and zoom props are initial values; user panning and zooming is kept in internal state. Listen to move/zoom to track it.",
-    "Drag or touch to pan, wheel or double click to zoom around the pointer. The tile theme follows the page data-theme after mount (light tiles on the server render) unless theme or style is set.",
-    "Tiles come from a third-party CDN, so it needs network access."
+    "Exposed as role=\"img\" with aria-label \"Day N of 30\"."
    ]
   },
   {
-   "name": "ProfileHeader",
-   "tag": "UiProfileHeader",
-   "group": "media",
-   "description": "Profile card with a cover image, large avatar, name and a row of meta items.",
+   "name": "BookingCard",
+   "tag": "UiBookingCard",
+   "group": "domain",
+   "description": "Compact booking summary: code, status, guest, hotel, dates and total.",
    "props": {
-    "name": {
+    "code": {
      "type": "string",
      "required": true,
-     "description": "Person or organization name."
+     "description": "Booking reference, monospaced."
     },
-    "src": {
+    "status": {
+     "type": "'Confirmed' | 'Pending' | 'Cancelled' | string",
+     "values": [
+      "Confirmed",
+      "Pending",
+      "Cancelled"
+     ],
+     "description": "Status text. Confirmed is green, Pending amber, Cancelled red; any other value gets a neutral badge."
+    },
+    "guest": {
      "type": "string",
-     "description": "Avatar image URL; initials are shown without it."
+     "description": "Guest name, also drives the avatar initials."
     },
-    "cover": {
+    "hotel": {
      "type": "string",
-     "description": "Cover image URL."
+     "description": "Hotel name under the guest."
     },
-    "meta": {
-     "type": "{ icon: string; label: string }[]",
-     "default": [],
-     "description": "Facts under the name such as location or join date. label must be unique."
+    "dates": {
+     "type": "string",
+     "description": "Preformatted date range, e.g. \"12-19 Mar\"."
+    },
+    "amount": {
+     "type": "number",
+     "description": "Total, formatted as \"SAR 1 200\"."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scales padding, text and avatars."
     }
-   },
-   "slots": {
-    "default": "Extra content on the right of the name row, usually action buttons."
    }
   },
   {
-   "name": "ChatAi",
-   "tag": "UiChatAi",
-   "group": "media",
-   "description": "Chat panel with message bubbles, a typing indicator and an input, for AI assistant UIs.",
+   "name": "GuestCard",
+   "tag": "UiGuestCard",
+   "group": "domain",
+   "description": "Guest profile card with avatar, country, stay length and tags.",
    "props": {
-    "messages": {
-     "type": "{ role: 'user' | 'ai'; text: string }[]",
+    "name": {
+     "type": "string",
      "required": true,
-     "default": [],
-     "description": "Conversation in order. Any role other than \"user\" renders as an assistant bubble."
+     "description": "Guest name."
     },
-    "loading": {
+    "country": {
+     "type": "string",
+     "description": "Country shown in the subtitle."
+    },
+    "nights": {
+     "type": "number",
+     "description": "Number of nights, shown as \"N nights\"."
+    },
+    "vip": {
      "type": "boolean",
      "default": false,
-     "description": "Shows the typing dots and disables sending."
+     "description": "Shows a VIP badge."
     },
-    "title": {
-     "type": "string",
-     "default": "Assistant",
-     "description": "Header title; also the aria-label. The header renders only when set."
+    "tags": {
+     "type": "string[]",
+     "default": "[]",
+     "description": "Preference tags, e.g. \"Halal\", \"Late check-in\"."
     },
-    "subtitle": {
-     "type": "string",
-     "description": "Muted text next to the title."
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scales padding, text and avatars."
+    }
+   }
+  },
+  {
+   "name": "RoomGrid",
+   "tag": "UiRoomGrid",
+   "group": "domain",
+   "description": "Tile grid of rooms colored by housekeeping status; use for front-desk room selection.",
+   "props": {
+    "rooms": {
+     "type": "{ no: string; type: string; status: \"occupied\" | \"clean\" | \"dirty\" | \"blocked\" }[]",
+     "default": "[]",
+     "description": "Rooms; no is the room number and the unique key, type is the room class label, status sets the tile color (any other value renders neutral)."
     },
-    "placeholder": {
-     "type": "string",
-     "default": "Ask anything…",
-     "description": "Input placeholder."
+    "statusTones": {
+     "type": "Record<string, 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'>",
+     "default": "{ occupied: 'brand', clean: 'success', dirty: 'warning', blocked: 'danger' }",
+     "description": "Maps a room status to a tile tone. Merged over the defaults, so you can add custom statuses (e.g. { maintenance: \"sky\" }) or recolor known ones. Statuses without a tone render neutral."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scales padding, text and avatars."
     }
    },
    "events": {
-    "send": "Called with the trimmed message text when the user presses Enter or the send button. The component does not append it to messages."
+    "select": "Called with the room number (room.no) of the clicked tile."
    },
    "notes": [
-    "Append the user message and the reply to messages yourself; set loading while waiting."
+    "Each tile is a button; status is conveyed by color only, so add a legend."
    ]
   },
   {
-   "name": "HotelCard",
-   "tag": "UiHotelCard",
+   "name": "RoomCalendar",
+   "tag": "UiRoomCalendar",
    "group": "domain",
-   "description": "Hotel listing card with photo, tags, stars, distance, rating and nightly price; use in catalogs and search results.",
+   "description": "Gantt-style occupancy calendar: rooms as rows, days as columns, bookings as bars.",
    "props": {
-    "name": {
-     "type": "string",
-     "required": true,
-     "description": "Hotel name."
-    },
-    "image": {
-     "type": "string",
-     "description": "Photo URL, used as the card background image."
-    },
-    "tags": {
-     "type": "string[]",
+    "rooms": {
+     "type": "{ no: string; bookings?: { from: number; nights: number; guest: string }[] }[]",
      "default": "[]",
-     "description": "Brand badges over the photo, e.g. \"Haram view\"."
-    },
-    "stars": {
-     "type": "number",
-     "default": 0,
-     "description": "Star class 0-5, rendered as repeated stars."
-    },
-    "distance": {
-     "type": "string",
-     "description": "Distance caption next to the stars, e.g. \"120 m to the Haram\"."
-    },
-    "rating": {
-     "type": "string | number",
-     "description": "Guest rating shown in a green badge, e.g. 9.2."
+     "description": "Rooms with their bookings; from is the zero-based day index of check-in, nights its length. guest is the cell tooltip."
     },
-    "price": {
+    "days": {
      "type": "number",
-     "description": "Price per unit, formatted with thousand separators; the currency label is fixed to SAR."
-    },
-    "night": {
-     "type": "string",
-     "default": "night",
-     "description": "Unit after \"SAR /\", e.g. \"night\"."
+     "default": 14,
+     "description": "Number of day columns, labelled 1..days."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9314,38 +11007,47 @@
     }
    },
    "notes": [
-    "Currency is hard-coded to SAR.",
-    "Wrap in a clickable element yourself; the card has no click handler."
+    "Day headers are plain numbers 1..days; offset them yourself for a month view."
    ]
   },
   {
-   "name": "TourCard",
-   "tag": "UiTourCard",
+   "name": "LeadCard",
+   "tag": "UiLeadCard",
    "group": "domain",
-   "description": "Tour or virtual-tour card with session count and a seat-occupancy bar.",
+   "description": "CRM lead card with avatar, code, phone and amount.",
    "props": {
     "name": {
      "type": "string",
      "required": true,
-     "description": "Tour title."
+     "description": "Lead name."
     },
-    "city": {
+    "code": {
      "type": "string",
-     "description": "City shown in the subtitle."
+     "description": "Lead or deal code under the name, monospaced."
     },
-    "sessions": {
-     "type": "number",
-     "description": "Number of sessions, shown as \"N sessions\"."
+    "tag": {
+     "type": "string",
+     "description": "Optional badge text, e.g. a source or status."
     },
-    "booked": {
-     "type": "number",
-     "required": true,
-     "description": "Seats already booked."
+    "tone": {
+     "type": "'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'",
+     "values": [
+      "default",
+      "brand",
+      "success",
+      "warning",
+      "danger",
+      "info"
+     ],
+     "description": "Badge tone for tag; neutral when omitted."
     },
-    "seats": {
-     "type": "number",
-     "required": true,
-     "description": "Total seats; the bar shows booked / seats."
+    "phone": {
+     "type": "string",
+     "description": "Phone number with a phone icon."
+    },
+    "amount": {
+     "type": "string | number",
+     "description": "Amount shown on the right, rendered as given (format it yourself)."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9359,29 +11061,52 @@
      "default": "md",
      "description": "Scales padding, text and avatars."
     }
-   },
-   "slots": {
-    "actions": "Footer actions, usually Buttons."
-   },
-   "notes": [
-    "A fixed \"360°\" badge is always shown.",
-    "With seats = 0 or missing the bar is empty (0%) and the meta reads \"0/0\"."
-   ]
+   }
   },
   {
-   "name": "PrayerTimes",
-   "tag": "UiPrayerTimes",
+   "name": "DealCard",
+   "tag": "UiDealCard",
    "group": "domain",
-   "description": "Row of daily prayer times with the upcoming prayer highlighted.",
+   "description": "CRM deal card with stage badge, amount, win probability and owner; the card type inside PipelineBoard.",
    "props": {
-    "items": {
-     "type": "{ name: string; time: string }[]",
-     "default": "[]",
-     "description": "Prayers in display order; time is shown as-is, e.g. \"05:12\"."
+    "title": {
+     "type": "string",
+     "required": true,
+     "description": "Deal title."
     },
-    "next": {
+    "stage": {
+     "type": "string",
+     "description": "Stage badge text; no badge when omitted."
+    },
+    "tone": {
+     "type": "'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'",
+     "values": [
+      "default",
+      "brand",
+      "success",
+      "warning",
+      "danger",
+      "info"
+     ],
+     "default": "info",
+     "description": "Badge tone for the stage."
+    },
+    "amount": {
+     "type": "string | number",
+     "description": "Large amount, rendered as given."
+    },
+    "probability": {
      "type": "number",
-     "description": "Index in items of the next prayer; sets aria-current on it."
+     "default": 0,
+     "description": "Win probability 0-100, shown as a progress bar and percent."
+    },
+    "owner": {
+     "type": "string",
+     "description": "Owner name with avatar."
+    },
+    "due": {
+     "type": "string",
+     "description": "Due date caption, right aligned."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9398,15 +11123,15 @@
    }
   },
   {
-   "name": "RamadanTracker",
-   "tag": "UiRamadanTracker",
+   "name": "PipelineBoard",
+   "tag": "UiPipelineBoard",
    "group": "domain",
-   "description": "Thirty-day Ramadan progress strip; the last ten days and odd nights are marked.",
+   "description": "Horizontally scrolling kanban pipeline of stage columns filled with DealCards.",
    "props": {
-    "day": {
-     "type": "number",
-     "required": true,
-     "description": "Current day 1-30. Earlier days render as past, later days as upcoming."
+    "stages": {
+     "type": "{ id: string | number; title: string; cards: DealCardProps[] }[]",
+     "default": "[]",
+     "description": "Columns in order; cards take the DealCard props (title, stage, tone, amount, probability, owner, due). The column count badge is cards.length. Give cards an id so onMove can report which one moved (the index is used otherwise)."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9421,45 +11146,49 @@
      "description": "Scales padding, text and avatars."
     }
    },
+   "events": {
+    "move": "Called with { id, from, to } (card id, source stage id, target stage id) when a card is dropped on another stage. The board does not reorder itself: update stages in your state."
+   },
    "notes": [
-    "Exposed as role=\"img\" with aria-label \"Day N of 30\"."
+    "Drag and drop is enabled only when a move handler is passed; without it the board renders and behaves as before.",
+    "Uses HTML5 drag and drop (mouse and desktop browsers); there is no keyboard alternative, so also offer a stage select on the card if you need one.",
+    "Cards are fixed to DealCard; for custom cards compose KanbanColumn and KanbanCard."
    ]
   },
   {
-   "name": "BookingCard",
-   "tag": "UiBookingCard",
+   "name": "ContactPanel",
+   "tag": "UiContactPanel",
    "group": "domain",
-   "description": "Compact booking summary: code, status, guest, hotel, dates and total.",
+   "description": "Contact detail card with avatar, role, contact fields and Call / Message buttons.",
    "props": {
-    "code": {
+    "name": {
      "type": "string",
      "required": true,
-     "description": "Booking reference, monospaced."
+     "description": "Contact name."
     },
-    "status": {
-     "type": "'Confirmed' | 'Pending' | 'Cancelled' | string",
-     "values": [
-      "Confirmed",
-      "Pending",
-      "Cancelled"
-     ],
-     "description": "Status text. Confirmed is green, Pending amber, Cancelled red; any other value gets a neutral badge."
+    "role": {
+     "type": "string",
+     "description": "Role or company under the name."
     },
-    "guest": {
+    "phone": {
      "type": "string",
-     "description": "Guest name, also drives the avatar initials."
+     "description": "Phone row."
     },
-    "hotel": {
+    "telegram": {
      "type": "string",
-     "description": "Hotel name under the guest."
+     "description": "Telegram handle row."
     },
-    "dates": {
+    "email": {
      "type": "string",
-     "description": "Preformatted date range, e.g. \"12-19 Mar\"."
+     "description": "Email row."
     },
-    "amount": {
-     "type": "number",
-     "description": "Total, formatted as \"SAR 1 200\"."
+    "city": {
+     "type": "string",
+     "description": "City row."
+    },
+    "labels": {
+     "type": "{ call?: string; message?: string }",
+     "description": "Override built-in English strings."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9473,36 +11202,26 @@
      "default": "md",
      "description": "Scales padding, text and avatars."
     }
+   },
+   "events": {
+    "call": "Called with no arguments when Call is clicked.",
+    "message": "Called with no arguments when Message is clicked."
    }
   },
   {
-   "name": "GuestCard",
-   "tag": "UiGuestCard",
+   "name": "KanbanColumn",
+   "tag": "UiKanbanColumn",
    "group": "domain",
-   "description": "Guest profile card with avatar, country, stay length and tags.",
+   "description": "Single kanban column with a title, count badge and stacked cards.",
    "props": {
-    "name": {
+    "title": {
      "type": "string",
      "required": true,
-     "description": "Guest name."
-    },
-    "country": {
-     "type": "string",
-     "description": "Country shown in the subtitle."
+     "description": "Column heading."
     },
-    "nights": {
+    "count": {
      "type": "number",
-     "description": "Number of nights, shown as \"N nights\"."
-    },
-    "vip": {
-     "type": "boolean",
-     "default": false,
-     "description": "Shows a VIP badge."
-    },
-    "tags": {
-     "type": "string[]",
-     "default": "[]",
-     "description": "Preference tags, e.g. \"Halal\", \"Late check-in\"."
+     "description": "Count badge; defaults to the number of children."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9516,59 +11235,41 @@
      "default": "md",
      "description": "Scales padding, text and avatars."
     }
+   },
+   "slots": {
+    "default": "Cards, usually KanbanCard or DealCard. React passes them as children."
    }
   },
   {
-   "name": "RoomGrid",
-   "tag": "UiRoomGrid",
+   "name": "KanbanCard",
+   "tag": "UiKanbanCard",
    "group": "domain",
-   "description": "Tile grid of rooms colored by housekeeping status; use for front-desk room selection.",
+   "description": "Simple kanban card with title, subtitle, free content and an optional tag.",
    "props": {
-    "rooms": {
-     "type": "{ no: string; type: string; status: \"occupied\" | \"clean\" | \"dirty\" | \"blocked\" }[]",
-     "default": "[]",
-     "description": "Rooms; no is the room number and the unique key, type is the room class label, status sets the tile color (any other value renders neutral)."
+    "title": {
+     "type": "string",
+     "required": true,
+     "description": "Card title."
     },
-    "statusTones": {
-     "type": "Record<string, 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'>",
-     "default": "{ occupied: 'brand', clean: 'success', dirty: 'warning', blocked: 'danger' }",
-     "description": "Maps a room status to a tile tone. Merged over the defaults, so you can add custom statuses (e.g. { maintenance: \"sky\" }) or recolor known ones. Statuses without a tone render neutral."
+    "sub": {
+     "type": "string",
+     "description": "Subtitle under the title."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+    "tag": {
+     "type": "string",
+     "description": "Badge at the bottom."
+    },
+    "tone": {
+     "type": "'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'",
      "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
+      "default",
+      "brand",
+      "success",
+      "warning",
+      "danger",
+      "info"
      ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
-    }
-   },
-   "events": {
-    "select": "Called with the room number (room.no) of the clicked tile."
-   },
-   "notes": [
-    "Each tile is a button; status is conveyed by color only, so add a legend."
-   ]
-  },
-  {
-   "name": "RoomCalendar",
-   "tag": "UiRoomCalendar",
-   "group": "domain",
-   "description": "Gantt-style occupancy calendar: rooms as rows, days as columns, bookings as bars.",
-   "props": {
-    "rooms": {
-     "type": "{ no: string; bookings?: { from: number; nights: number; guest: string }[] }[]",
-     "default": "[]",
-     "description": "Rooms with their bookings; from is the zero-based day index of check-in, nights its length. guest is the cell tooltip."
-    },
-    "days": {
-     "type": "number",
-     "default": 14,
-     "description": "Number of day columns, labelled 1..days."
+     "description": "Badge tone for tag."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9583,48 +11284,37 @@
      "description": "Scales padding, text and avatars."
     }
    },
-   "notes": [
-    "Day headers are plain numbers 1..days; offset them yourself for a month view."
-   ]
+   "slots": {
+    "default": "Extra content between the subtitle and the tag. React passes it as children."
+   }
   },
   {
-   "name": "LeadCard",
-   "tag": "UiLeadCard",
+   "name": "CallRow",
+   "tag": "UiCallRow",
    "group": "domain",
-   "description": "CRM lead card with avatar, code, phone and amount.",
+   "description": "One-line call log row with avatar, status, duration and a play button.",
    "props": {
     "name": {
      "type": "string",
      "required": true,
-     "description": "Lead name."
-    },
-    "code": {
-     "type": "string",
-     "description": "Lead or deal code under the name, monospaced."
+     "description": "Caller name."
     },
-    "tag": {
+    "status": {
      "type": "string",
-     "description": "Optional badge text, e.g. a source or status."
+     "description": "Status text before the duration, e.g. \"Answered\"."
     },
-    "tone": {
-     "type": "'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'",
-     "values": [
-      "default",
-      "brand",
-      "success",
-      "warning",
-      "danger",
-      "info"
-     ],
-     "description": "Badge tone for tag; neutral when omitted."
+    "duration": {
+     "type": "number",
+     "description": "Duration in seconds, formatted as \"3 m 05 s\" (units from durUnits); shows a dash when missing."
     },
-    "phone": {
-     "type": "string",
-     "description": "Phone number with a phone icon."
+    "durUnits": {
+     "type": "{ m?: string; s?: string }",
+     "default": "{ m: 'm', s: 's' }",
+     "description": "Minute and second unit labels for localized durations, e.g. { m: \"min\", s: \"sec\" }."
     },
-    "amount": {
-     "type": "string | number",
-     "description": "Amount shown on the right, rendered as given (format it yourself)."
+    "labels": {
+     "type": "{ play?: string }",
+     "description": "Override built-in English strings. play is the aria-label of the play button."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9638,52 +11328,58 @@
      "default": "md",
      "description": "Scales padding, text and avatars."
     }
+   },
+   "events": {
+    "play": "Called with no arguments when the play button is clicked."
    }
   },
   {
-   "name": "DealCard",
-   "tag": "UiDealCard",
+   "name": "CallCard",
+   "tag": "UiCallCard",
    "group": "domain",
-   "description": "CRM deal card with stage badge, amount, win probability and owner; the card type inside PipelineBoard.",
+   "description": "Call recording card with status badge, a playback progress bar and duration.",
    "props": {
-    "title": {
+    "name": {
      "type": "string",
      "required": true,
-     "description": "Deal title."
+     "description": "Caller name."
     },
-    "stage": {
+    "phone": {
      "type": "string",
-     "description": "Stage badge text; no badge when omitted."
+     "description": "Phone number."
     },
-    "tone": {
-     "type": "'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'",
+    "status": {
+     "type": "'Answered' | 'Missed' | 'Voicemail' | 'Busy' | 'Declined' | string",
      "values": [
-      "default",
-      "brand",
-      "success",
-      "warning",
-      "danger",
-      "info"
+      "Answered",
+      "Missed",
+      "Voicemail",
+      "Busy",
+      "Declined"
      ],
-     "default": "info",
-     "description": "Badge tone for the stage."
+     "description": "Badge text. Known statuses (case-insensitive): Answered green, Missed and Declined red, Voicemail and Busy amber, Ringing blue. Any other value is neutral. The badge is hidden when empty."
     },
-    "amount": {
-     "type": "string | number",
-     "description": "Large amount, rendered as given."
+    "statusTones": {
+     "type": "Record<string, 'success' | 'danger' | 'warning' | 'info' | 'brand'>",
+     "description": "Extra or overriding status to tone mapping, e.g. { \"No answer\": \"warning\" }."
     },
-    "probability": {
+    "progress": {
      "type": "number",
      "default": 0,
-     "description": "Win probability 0-100, shown as a progress bar and percent."
+     "description": "Playback progress 0-100."
     },
-    "owner": {
-     "type": "string",
-     "description": "Owner name with avatar."
+    "duration": {
+     "type": "number",
+     "description": "Duration in seconds."
     },
-    "due": {
-     "type": "string",
-     "description": "Due date caption, right aligned."
+    "durUnits": {
+     "type": "{ m?: string; s?: string }",
+     "default": "{ m: 'm', s: 's' }",
+     "description": "Minute and second unit labels for the duration."
+    },
+    "labels": {
+     "type": "{ play?: string }",
+     "description": "Override built-in English strings. play is the aria-label of the play button."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9697,18 +11393,38 @@
      "default": "md",
      "description": "Scales padding, text and avatars."
     }
+   },
+   "events": {
+    "play": "Called with no arguments when the play button is clicked."
    }
   },
   {
-   "name": "PipelineBoard",
-   "tag": "UiPipelineBoard",
+   "name": "IncomingCall",
+   "tag": "UiIncomingCall",
    "group": "domain",
-   "description": "Horizontally scrolling kanban pipeline of stage columns filled with DealCards.",
+   "description": "Glass banner for an incoming call with Decline and Answer buttons.",
    "props": {
-    "stages": {
-     "type": "{ id: string | number; title: string; cards: DealCardProps[] }[]",
-     "default": "[]",
-     "description": "Columns in order; cards take the DealCard props (title, stage, tone, amount, probability, owner, due). The column count badge is cards.length. Give cards an id so onMove can report which one moved (the index is used otherwise)."
+    "name": {
+     "type": "string",
+     "required": true,
+     "description": "Caller name."
+    },
+    "phone": {
+     "type": "string",
+     "description": "Caller number."
+    },
+    "label": {
+     "type": "string",
+     "default": "Incoming call",
+     "description": "Caption above the name."
+    },
+    "onDecline": {
+     "type": "() => void",
+     "description": "Decline button click."
+    },
+    "onAnswer": {
+     "type": "() => void",
+     "description": "Answer button click."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9724,48 +11440,146 @@
     }
    },
    "events": {
-    "move": "Called with { id, from, to } (card id, source stage id, target stage id) when a card is dropped on another stage. The board does not reorder itself: update stages in your state."
+    "decline": "Decline button clicked.",
+    "answer": "Answer button clicked."
+   }
+  },
+  {
+   "name": "AuthSplit",
+   "tag": "UiAuthSplit",
+   "group": "domain",
+   "description": "Two-column sign-in layout with a brand panel on the left and the form on the right.",
+   "props": {
+    "title": {
+     "type": "string",
+     "required": true,
+     "description": "Form heading."
+    },
+    "subtitle": {
+     "type": "string",
+     "description": "Text under the heading."
+    },
+    "logo": {
+     "type": "VNode",
+     "description": "Logo node above the heading."
+    },
+    "aside": {
+     "type": "VNode",
+     "description": "Content of the left brand panel (hidden on narrow screens)."
+    }
+   },
+   "slots": {
+    "default": "Form content under the heading. React passes it as children."
    },
    "notes": [
-    "Drag and drop is enabled only when a move handler is passed; without it the board renders and behaves as before.",
-    "Uses HTML5 drag and drop (mouse and desktop browsers); there is no keyboard alternative, so also offer a stage select on the card if you need one.",
-    "Cards are fixed to DealCard; for custom cards compose KanbanColumn and KanbanCard."
+    "logo and aside are props in both Vue and React (pass a VNode / element)."
    ]
   },
   {
-   "name": "ContactPanel",
-   "tag": "UiContactPanel",
+   "name": "AuthShowcase",
+   "tag": "UiAuthShowcase",
    "group": "domain",
-   "description": "Contact detail card with avatar, role, contact fields and Call / Message buttons.",
+   "description": "Sign-in layout with a media panel: dark photo card with floating avatars, light gradient card with a social-proof pill, or a tinted panel with a glass caption. The default slot is the form.",
    "props": {
-    "name": {
+    "variant": {
+     "type": "'photo' | 'light' | 'tint'",
+     "values": [
+      "photo",
+      "light",
+      "tint"
+     ],
+     "default": "photo",
+     "description": "'photo': one framed card, media on the left. 'light': gradient form card, proof pill below, glass caption on the media. 'tint': like light, with a coloured panel, a heading on the media and cyan accent."
+    },
+    "title": {
      "type": "string",
      "required": true,
-     "description": "Contact name."
+     "description": "Form heading."
     },
-    "role": {
+    "subtitle": {
      "type": "string",
-     "description": "Role or company under the name."
+     "description": "Text under the heading."
     },
-    "phone": {
+    "logo": {
+     "type": "VNode",
+     "description": "Logo node above the heading."
+    },
+    "footer": {
+     "type": "VNode",
+     "description": "Content under the fields, for example \"No account? Sign up\"."
+    },
+    "image": {
      "type": "string",
-     "description": "Phone row."
+     "description": "URL of the media image. Without it the panel shows an accent gradient."
     },
-    "telegram": {
+    "headline": {
      "type": "string",
-     "description": "Telegram handle row."
+     "description": "Large text on the media panel (photo and tint)."
     },
-    "email": {
+    "caption": {
      "type": "string",
-     "description": "Email row."
+     "description": "Small text on the media panel (photo) or inside the glass bar (light, tint)."
     },
-    "city": {
+    "quote": {
      "type": "string",
-     "description": "City row."
+     "description": "Line at the bottom of the media panel; photo only."
+    },
+    "chips": {
+     "type": "string[]",
+     "description": "Pill labels inside the glass bar; light and tint."
+    },
+    "people": {
+     "type": "{ name: string; src?: string }[]",
+     "description": "Avatars: floating on the photo, stacked in the proof pill."
+    },
+    "proof": {
+     "type": "string",
+     "description": "Social-proof title, e.g. \"Join 20k+ users\"; light and tint. Shows the pill under the form."
+    },
+    "proofHint": {
+     "type": "string",
+     "description": "Second line of the proof pill."
+    }
+   },
+   "slots": {
+    "default": "Form fields and buttons. React passes them as children."
+   },
+   "notes": [
+    "logo, footer, image, people are props in both Vue and React. The media panel is hidden below the form on narrow screens (stacks under it)."
+   ]
+  },
+  {
+   "name": "SocialAuth",
+   "tag": "UiSocialAuth",
+   "group": "domain",
+   "description": "Continue with Google and Apple buttons with an \"or\" divider. Place it under the sign-in form.",
+   "props": {
+    "providers": {
+     "type": "('google' | 'apple')[]",
+     "default": "['google', 'apple']",
+     "description": "Which buttons to show, in order."
+    },
+    "variant": {
+     "type": "'stack' | 'icons'",
+     "values": [
+      "stack",
+      "icons"
+     ],
+     "default": "stack",
+     "description": "'stack': full-width buttons with a label, one per row. 'icons': a row of square icon buttons."
+    },
+    "divider": {
+     "type": "boolean",
+     "default": "true",
+     "description": "Show the \"or\" line above the buttons."
     },
     "labels": {
-     "type": "{ call?: string; message?: string }",
-     "description": "Override built-in English strings."
+     "type": "{ google?: string; apple?: string }",
+     "description": "Provider names inserted into \"Continue with {provider}\"."
+    },
+    "onSelect": {
+     "type": "(provider: 'google' | 'apple') => void",
+     "description": "Called with the clicked provider. Start your OAuth flow here."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9781,408 +11595,407 @@
     }
    },
    "events": {
-    "call": "Called with no arguments when Call is clicked.",
-    "message": "Called with no arguments when Message is clicked."
-   }
+    "select": "A provider button was clicked; payload is \"google\" or \"apple\"."
+   },
+   "notes": [
+    "The kit only renders the buttons. The OAuth flow itself is yours."
+   ]
   },
   {
-   "name": "KanbanColumn",
-   "tag": "UiKanbanColumn",
-   "group": "domain",
-   "description": "Single kanban column with a title, count badge and stacked cards.",
+   "name": "PageDashboard",
+   "tag": "UiPageDashboard",
+   "group": "pages",
+   "description": "Dashboard template: greeting hero, KPI tiles, occupancy chart, sales funnel, top list and activity feed.",
    "props": {
     "title": {
+     "forwarded": true,
      "type": "string",
-     "required": true,
-     "description": "Column heading."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "count": {
-     "type": "number",
-     "description": "Count badge; defaults to the number of children."
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
-     "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
-     ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
    "slots": {
-    "default": "Cards, usually KanbanCard or DealCard. React passes them as children."
-   }
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "hero": "Large greeting/plan block; Card variant=\"inverse\" with Ring and a Button.",
+    "kpis": "Four key figures; KpiTile, StatsCard or KpiInline.",
+    "occupancy": "Per-day occupancy chart; OccupancyChart or MiniChart.",
+    "funnel": "Inquiry-to-payment funnel; SalesFunnel.",
+    "top": "Revenue leaderboard; DataTable with Progress share bars.",
+    "activity": "Recent actions, newest first; Timeline."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "hero and kpis share a row, as do occupancy/funnel and top/activity; they wrap on narrow screens."
+   ]
   },
   {
-   "name": "KanbanCard",
-   "tag": "UiKanbanCard",
-   "group": "domain",
-   "description": "Simple kanban card with title, subtitle, free content and an optional tag.",
+   "name": "PagePatterns",
+   "tag": "UiPagePatterns",
+   "group": "pages",
+   "description": "Showcase template combining twelve recurring dashboard card patterns (banner, strips, stat lines, charts, lists).",
    "props": {
     "title": {
+     "forwarded": true,
      "type": "string",
-     "required": true,
-     "description": "Card title."
-    },
-    "sub": {
-     "type": "string",
-     "description": "Subtitle under the title."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "tag": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Badge at the bottom."
-    },
-    "tone": {
-     "type": "'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'",
-     "values": [
-      "default",
-      "brand",
-      "success",
-      "warning",
-      "danger",
-      "info"
-     ],
-     "description": "Badge tone for tag."
+     "description": "Caption under the heading."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
-     "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
-     ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
    "slots": {
-    "default": "Extra content between the subtitle and the tag. React passes it as children."
-   }
-  },
-  {
-   "name": "CallRow",
-   "tag": "UiCallRow",
-   "group": "domain",
-   "description": "One-line call log row with avatar, status, duration and a play button.",
-   "props": {
-    "name": {
-     "type": "string",
-     "required": true,
-     "description": "Caller name."
-    },
-    "status": {
-     "type": "string",
-     "description": "Status text before the duration, e.g. \"Answered\"."
-    },
-    "duration": {
-     "type": "number",
-     "description": "Duration in seconds, formatted as \"3 m 05 s\" (units from durUnits); shows a dash when missing."
-    },
-    "durUnits": {
-     "type": "{ m?: string; s?: string }",
-     "default": "{ m: 'm', s: 's' }",
-     "description": "Minute and second unit labels for localized durations, e.g. { m: \"min\", s: \"sec\" }."
-    },
-    "labels": {
-     "type": "{ play?: string }",
-     "description": "Override built-in English strings. play is the aria-label of the play button."
-    },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
-     "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
-     ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
-    }
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "hero": "Large banner; HeroBanner.",
+    "strip": "One card with four metrics; StatStrip with IconTile.",
+    "statlines": "Row of toned stat lines; StatLine (tone brand, sky, success, warning, danger).",
+    "chartcard": "Titled chart with menu and period select; ChartCard with PillSelect and OccupancyChart or MiniChart.",
+    "tiles": "Selectable tiles plus an add tile; TabTiles.",
+    "listrows": "Icon, title and value rows; StatRow.",
+    "countries": "Country amount rows; CountryRow.",
+    "versus": "Two values with a share bar; VersusBar.",
+    "segbar": "Composition bar with legend; SegBar.",
+    "activity": "Timeline of events; Timeline.",
+    "actioncard": "Card with collapse, refresh and close actions; ActionCard."
    },
-   "events": {
-    "play": "Called with no arguments when the play button is clicked."
-   }
+   "notes": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
   },
   {
-   "name": "CallCard",
-   "tag": "UiCallCard",
-   "group": "domain",
-   "description": "Call recording card with status badge, a playback progress bar and duration.",
+   "name": "PageCrm",
+   "tag": "UiPageCrm",
+   "group": "pages",
+   "description": "CRM template: summary tiles, filters, pipeline board and call queue.",
    "props": {
-    "name": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "required": true,
-     "description": "Caller name."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "phone": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Phone number."
-    },
-    "status": {
-     "type": "'Answered' | 'Missed' | 'Voicemail' | 'Busy' | 'Declined' | string",
-     "values": [
-      "Answered",
-      "Missed",
-      "Voicemail",
-      "Busy",
-      "Declined"
-     ],
-     "description": "Badge text. Known statuses (case-insensitive): Answered green, Missed and Declined red, Voicemail and Busy amber, Ringing blue. Any other value is neutral. The badge is hidden when empty."
-    },
-    "statusTones": {
-     "type": "Record<string, 'success' | 'danger' | 'warning' | 'info' | 'brand'>",
-     "description": "Extra or overriding status to tone mapping, e.g. { \"No answer\": \"warning\" }."
-    },
-    "progress": {
-     "type": "number",
-     "default": 0,
-     "description": "Playback progress 0-100."
-    },
-    "duration": {
-     "type": "number",
-     "description": "Duration in seconds."
-    },
-    "durUnits": {
-     "type": "{ m?: string; s?: string }",
-     "default": "{ m: 'm', s: 's' }",
-     "description": "Minute and second unit labels for the duration."
-    },
-    "labels": {
-     "type": "{ play?: string }",
-     "description": "Override built-in English strings. play is the aria-label of the play button."
+     "description": "Caption under the heading."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
-     "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
-     ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
-   "events": {
-    "play": "Called with no arguments when the play button is clicked."
-   }
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "summary": "Tiles above the board (leads, amount, conversion, overdue); StatsCard or KpiTile.",
+    "filters": "Status tabs, search and period switch; Tabs, SearchInput, SegmentedControl, FilterChips.",
+    "board": "Stage columns with deal cards; PipelineBoard, KanbanColumn, DealCard.",
+    "calls": "Recent call queue; CallRow, CallCard, IncomingCall."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
   },
   {
-   "name": "IncomingCall",
-   "tag": "UiIncomingCall",
-   "group": "domain",
-   "description": "Glass banner for an incoming call with Decline and Answer buttons.",
+   "name": "PageBookings",
+   "tag": "UiPageBookings",
+   "group": "pages",
+   "description": "Bookings list template: stats, toolbar, bulk-action bar, table and pagination.",
    "props": {
-    "name": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "required": true,
-     "description": "Caller name."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "phone": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Caller number."
+     "description": "Caption under the heading."
     },
-    "label": {
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "stats": "Booking figures for the period; StatsCard.",
+    "toolbar": "Search, quick filters and export menu above the table; SearchInput, FilterChips, Dropdown.",
+    "bulk": "Selection bar shown when rows are selected; Alert with Buttons. Render it conditionally.",
+    "table": "Sortable, selectable table; DataTable.",
+    "pager": "Page numbers below the table; Pagination."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
+  },
+  {
+   "name": "PageCatalog",
+   "tag": "UiPageCatalog",
+   "group": "pages",
+   "description": "Catalog template with a filter sidebar and a card grid (hotels, tours).",
+   "props": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "default": "Incoming call",
-     "description": "Caption above the name."
-    },
-    "onDecline": {
-     "type": "() => void",
-     "description": "Decline button click."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "onAnswer": {
-     "type": "() => void",
-     "description": "Answer button click."
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
-     "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
-     ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
-   "events": {
-    "decline": "Decline button clicked.",
-    "answer": "Answer button clicked."
-   }
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "filters": "Left filter column (price, rating, services); Slider, Rating, RadioGroup, Checkbox.",
+    "toolbar": "Search, view switch and sort above the grid; SearchInput, ToggleGroup, Select.",
+    "grid": "Responsive grid of cards; HotelCard or TourCard.",
+    "pager": "Pagination at the bottom; Pagination."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "The filter column is 260 px wide; on phones put filters in a Drawer yourself."
+   ]
   },
   {
-   "name": "AuthSplit",
-   "tag": "UiAuthSplit",
-   "group": "domain",
-   "description": "Two-column sign-in layout with a brand panel on the left and the form on the right.",
+   "name": "PageDetail",
+   "tag": "UiPageDetail",
+   "group": "pages",
+   "description": "Detail page template (hotel, tour): gallery, summary, tabs, history and a booking side card.",
    "props": {
     "title": {
+     "forwarded": true,
      "type": "string",
-     "required": true,
-     "description": "Form heading."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
     "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Text under the heading."
-    },
-    "logo": {
-     "type": "VNode",
-     "description": "Logo node above the heading."
+     "description": "Caption under the heading."
     },
-    "aside": {
-     "type": "VNode",
-     "description": "Content of the left brand panel (hidden on narrow screens)."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
    "slots": {
-    "default": "Form content under the heading. React passes it as children."
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "gallery": "Main photo with thumbnails; Gallery, Carousel, LazyImage.",
+    "summary": "Name, stars, rating, badges; Card with Badge and Rating.",
+    "tabs": "Description, amenities, reviews; Tabs with Descriptions or Accordion.",
+    "history": "What changed (status, notes, price); Timeline.",
+    "booking": "Right-hand booking card with dates, guests, price and CTA; Card, Select, NumberInput, Button."
    },
    "notes": [
-    "logo and aside are props in both Vue and React (pass a VNode / element)."
+    "Place inside AppShell; fill only the slots you need.",
+    "gallery, summary, tabs and history are the main column; booking is the side column."
    ]
   },
   {
-   "name": "AuthShowcase",
-   "tag": "UiAuthShowcase",
-   "group": "domain",
-   "description": "Sign-in layout with a media panel: dark photo card with floating avatars, light gradient card with a social-proof pill, or a tinted panel with a glass caption. The default slot is the form.",
+   "name": "PageSettings",
+   "tag": "UiPageSettings",
+   "group": "pages",
+   "description": "Settings template with a section sub-navigation and stacked settings sections.",
    "props": {
-    "variant": {
-     "type": "'photo' | 'light' | 'tint'",
-     "values": [
-      "photo",
-      "light",
-      "tint"
-     ],
-     "default": "photo",
-     "description": "'photo': one framed card, media on the left. 'light': gradient form card, proof pill below, glass caption on the media. 'tint': like light, with a coloured panel, a heading on the media and cyan accent."
-    },
     "title": {
+     "forwarded": true,
      "type": "string",
-     "required": true,
-     "description": "Form heading."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
     "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Text under the heading."
-    },
-    "logo": {
-     "type": "VNode",
-     "description": "Logo node above the heading."
+     "description": "Caption under the heading."
     },
-    "footer": {
-     "type": "VNode",
-     "description": "Content under the fields, for example \"No account? Sign up\"."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "subnav": "Left section menu; SubNav or Tabs.",
+    "profile": "Profile section; SettingsSection with TextField, PhoneInput.",
+    "notifications": "Delivery channels; SettingsSection with Switch.",
+    "integrations": "Service cards (connected, off, error); IntegrationCard.",
+    "danger": "Irreversible actions; Alert, red Button, ConfirmDialog."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
+  },
+  {
+   "name": "PageUserList",
+   "tag": "UiPageUserList",
+   "group": "pages",
+   "description": "User or customer list template: stats, filters, toolbar, table and a right-hand add/edit drawer.",
+   "props": {
+    "title": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "image": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "URL of the media image. Without it the panel shows an accent gradient."
+     "description": "Caption under the heading."
     },
-    "headline": {
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "stats": "Figures above the table; StatStrip.",
+    "filters": "Filter selects in a card; Select.",
+    "toolbar": "Page size, search, export and Add button; Select, SearchInput, Button.",
+    "table": "Users table with checkboxes and actions; DataTable with UserCell, Chip, IconButton.",
+    "drawer": "Side panel rendered in the side column; Drawer with TextField, Select, Button."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
+  },
+  {
+   "name": "PageProfile",
+   "tag": "UiPageProfile",
+   "group": "pages",
+   "description": "User profile template: cover header, tabs and two columns of about, activity and plan cards.",
+   "props": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "description": "Large text on the media panel (photo and tint)."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "caption": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Small text on the media panel (photo) or inside the glass bar (light, tint)."
+     "description": "Caption under the heading."
     },
-    "quote": {
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "profile": "Cover with avatar, name and meta; ProfileHeader.",
+    "tabs": "Section tabs; PillTabs.",
+    "about": "Left column key-value info; Card with Descriptions.",
+    "activity": "Right column activity feed; Timeline.",
+    "plan": "Right column plan card and upgrade button; Card, Badge, Progress, Button."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
+  },
+  {
+   "name": "PageForm",
+   "tag": "UiPageForm",
+   "group": "pages",
+   "description": "Create/edit form template: main column, media, side column and header actions.",
+   "props": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "description": "Line at the bottom of the media panel; photo only."
-    },
-    "chips": {
-     "type": "string[]",
-     "description": "Pill labels inside the glass bar; light and tint."
-    },
-    "people": {
-     "type": "{ name: string; src?: string }[]",
-     "description": "Avatars: floating on the photo, stacked in the proof pill."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "proof": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Social-proof title, e.g. \"Join 20k+ users\"; light and tint. Shows the pill under the form."
+     "description": "Caption under the heading."
     },
-    "proofHint": {
-     "type": "string",
-     "description": "Second line of the proof pill."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
    "slots": {
-    "default": "Form fields and buttons. React passes them as children."
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Discard, Save draft and Publish buttons in the top-right of the built-in header; Button. Rendered right-aligned on their own when title is not set.",
+    "main": "Main column cards (info, options); Card, TextField, Textarea.",
+    "media": "Below main; upload dropzone; FileUpload or Gallery.",
+    "side": "Side column cards (price, status, tags); Card, NumberInput, Select, ChipInput."
    },
    "notes": [
-    "logo, footer, image, people are props in both Vue and React. The media panel is hidden below the form on narrow screens (stacks under it)."
+    "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "name": "SocialAuth",
-   "tag": "UiSocialAuth",
-   "group": "domain",
-   "description": "Continue with Google and Apple buttons with an \"or\" divider. Place it under the sign-in form.",
+   "name": "PageOrder",
+   "tag": "UiPageOrder",
+   "group": "pages",
+   "description": "Order/booking details template: status chips, items table, timeline and side info cards.",
    "props": {
-    "providers": {
-     "type": "('google' | 'apple')[]",
-     "default": "['google', 'apple']",
-     "description": "Which buttons to show, in order."
-    },
-    "variant": {
-     "type": "'stack' | 'icons'",
-     "values": [
-      "stack",
-      "icons"
-     ],
-     "default": "stack",
-     "description": "'stack': full-width buttons with a label, one per row. 'icons': a row of square icon buttons."
-    },
-    "divider": {
-     "type": "boolean",
-     "default": "true",
-     "description": "Show the \"or\" line above the buttons."
-    },
-    "labels": {
-     "type": "{ google?: string; apple?: string }",
-     "description": "Provider names inserted into \"Continue with {provider}\"."
+    "title": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "onSelect": {
-     "type": "(provider: 'google' | 'apple') => void",
-     "description": "Called with the clicked provider. Start your OAuth flow here."
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
-     "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
-     ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
-   "events": {
-    "select": "A provider button was clicked; payload is \"google\" or \"apple\"."
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "status": "Payment and fulfillment chips; Chip (tone success, warning, danger).",
+    "items": "Items table with totals; DataTable.",
+    "shipping": "Event timeline; Timeline.",
+    "side": "Customer, address and payment cards; UserCell, Descriptions, Button."
    },
    "notes": [
-    "The kit only renders the buttons. The OAuth flow itself is yours."
+    "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "name": "PageDashboard",
-   "tag": "UiPageDashboard",
+   "name": "PageAccount",
+   "tag": "UiPageAccount",
    "group": "pages",
-   "description": "Dashboard template: greeting hero, KPI tiles, occupancy chart, sales funnel, top list and activity feed.",
+   "description": "Account settings template with pill tabs and a swappable panel.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10203,23 +12016,19 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "hero": "Large greeting/plan block; Card variant=\"inverse\" with Ring and a Button.",
-    "kpis": "Four key figures; KpiTile, StatsCard or KpiInline.",
-    "occupancy": "Per-day occupancy chart; OccupancyChart or MiniChart.",
-    "funnel": "Inquiry-to-payment funnel; SalesFunnel.",
-    "top": "Revenue leaderboard; DataTable with Progress share bars.",
-    "activity": "Recent actions, newest first; Timeline."
+    "tabs": "Section tabs (account, security, billing, notifications); PillTabs.",
+    "panel": "Content of the active tab; Card or SettingsSection with Switch and TextField."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "hero and kpis share a row, as do occupancy/funnel and top/activity; they wrap on narrow screens."
+    "The template does not switch panels by itself: keep the active tab in your own state (PillTabs v-model) and render only that tab content in the panel slot."
    ]
   },
   {
-   "name": "PagePatterns",
-   "tag": "UiPagePatterns",
+   "name": "PagePricing",
+   "tag": "UiPagePricing",
    "group": "pages",
-   "description": "Showcase template combining twelve recurring dashboard card patterns (banner, strips, stat lines, charts, lists).",
+   "description": "Pricing template: billing-period toggle, plan cards and an FAQ.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10240,27 +12049,19 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "hero": "Large banner; HeroBanner.",
-    "strip": "One card with four metrics; StatStrip with IconTile.",
-    "statlines": "Row of toned stat lines; StatLine (tone brand, sky, success, warning, danger).",
-    "chartcard": "Titled chart with menu and period select; ChartCard with PillSelect and OccupancyChart or MiniChart.",
-    "tiles": "Selectable tiles plus an add tile; TabTiles.",
-    "listrows": "Icon, title and value rows; StatRow.",
-    "countries": "Country amount rows; CountryRow.",
-    "versus": "Two values with a share bar; VersusBar.",
-    "segbar": "Composition bar with legend; SegBar.",
-    "activity": "Timeline of events; Timeline.",
-    "actioncard": "Card with collapse, refresh and close actions; ActionCard."
+    "toggle": "Monthly/annual switch with a savings badge; Switch, Chip.",
+    "plans": "Plan cards, one marked featured; PricingCard.",
+    "faq": "Questions accordion; Accordion."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "name": "PageCrm",
-   "tag": "UiPageCrm",
+   "name": "PageFaq",
+   "tag": "UiPageFaq",
    "group": "pages",
-   "description": "CRM template: summary tiles, filters, pipeline board and call queue.",
+   "description": "Help center template: search, categories, answers accordion and a contact block.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10281,20 +12082,20 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "summary": "Tiles above the board (leads, amount, conversion, overdue); StatsCard or KpiTile.",
-    "filters": "Status tabs, search and period switch; Tabs, SearchInput, SegmentedControl, FilterChips.",
-    "board": "Stage columns with deal cards; PipelineBoard, KanbanColumn, DealCard.",
-    "calls": "Recent call queue; CallRow, CallCard, IncomingCall."
+    "search": "Large search field; SearchInput.",
+    "cats": "Category list on the left; vertical PillTabs.",
+    "answers": "Answers on the right; Accordion.",
+    "contact": "Contact cards below; Card, IconTile, Button."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "name": "PageBookings",
-   "tag": "UiPageBookings",
+   "name": "PageAnalytics",
+   "tag": "UiPageAnalytics",
    "group": "pages",
-   "description": "Bookings list template: stats, toolbar, bulk-action bar, table and pagination.",
+   "description": "Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10315,21 +12116,22 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "stats": "Booking figures for the period; StatsCard.",
-    "toolbar": "Search, quick filters and export menu above the table; SearchInput, FilterChips, Dropdown.",
-    "bulk": "Selection bar shown when rows are selected; Alert with Buttons. Render it conditionally.",
-    "table": "Sortable, selectable table; DataTable.",
-    "pager": "Page numbers below the table; Pagination."
+    "period": "Period presets and compare toggle; SegmentedControl, Select, Switch.",
+    "kpis": "Headline numbers with deltas; KpiTile, StatLine.",
+    "trend": "Main time series; ChartCard with MiniChart.",
+    "breakdown": "Split by channel or country; ChartCard with SegBar and CountryRow.",
+    "table": "Rows behind the numbers; DataTable."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot."
    ]
   },
   {
-   "name": "PageCatalog",
-   "tag": "UiPageCatalog",
+   "name": "PageCalendar",
+   "tag": "UiPageCalendar",
    "group": "pages",
-   "description": "Catalog template with a filter sidebar and a card grid (hotels, tours).",
+   "description": "Calendar template: view switch, time grid, mini calendar and event details.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10350,21 +12152,21 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "filters": "Left filter column (price, rating, services); Slider, Rating, RadioGroup, Checkbox.",
-    "toolbar": "Search, view switch and sort above the grid; SearchInput, ToggleGroup, Select.",
-    "grid": "Responsive grid of cards; HotelCard or TourCard.",
-    "pager": "Pagination at the bottom; Pagination."
+    "toolbar": "SegmentedControl, Button, IconButton.",
+    "grid": "Time grid with events; Card with custom grid, or CalendarView for the month.",
+    "mini": "Month picker; Calendar.",
+    "details": "Selected event; Card, Descriptions, Avatar, Button."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "The filter column is 260 px wide; on phones put filters in a Drawer yourself."
+    "The grid sits beside the mini calendar and details; they stack under 860 px."
    ]
   },
   {
-   "name": "PageDetail",
-   "tag": "UiPageDetail",
+   "name": "PageKanban",
+   "tag": "UiPageKanban",
    "group": "pages",
-   "description": "Detail page template (hotel, tour): gallery, summary, tabs, history and a booking side card.",
+   "description": "Kanban template: filters, task board columns and a card detail panel.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10385,22 +12187,20 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "gallery": "Main photo with thumbnails; Gallery, Carousel, LazyImage.",
-    "summary": "Name, stars, rating, badges; Card with Badge and Rating.",
-    "tabs": "Description, amenities, reviews; Tabs with Descriptions or Accordion.",
-    "history": "What changed (status, notes, price); Timeline.",
-    "booking": "Right-hand booking card with dates, guests, price and CTA; Card, Select, NumberInput, Button."
+    "filters": "SearchInput, FilterChips, Select.",
+    "board": "Columns with cards; KanbanColumn, KanbanCard.",
+    "detail": "Selected card; Card, Descriptions, Checkbox, Timeline."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "gallery, summary, tabs and history are the main column; booking is the side column."
+    "Board scrolls horizontally inside its area; detail goes below it under 860 px."
    ]
   },
   {
-   "name": "PageSettings",
-   "tag": "UiPageSettings",
+   "name": "PageBilling",
+   "tag": "UiPageBilling",
    "group": "pages",
-   "description": "Settings template with a section sub-navigation and stacked settings sections.",
+   "description": "Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10421,21 +12221,22 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "subnav": "Left section menu; SubNav or Tabs.",
-    "profile": "Profile section; SettingsSection with TextField, PhoneInput.",
-    "notifications": "Delivery channels; SettingsSection with Switch.",
-    "integrations": "Service cards (connected, off, error); IntegrationCard.",
-    "danger": "Irreversible actions; Alert, red Button, ConfirmDialog."
+    "plan": "Current plan; Card with Badge and Buttons.",
+    "usage": "Usage meters; Progress.",
+    "invoices": "Invoices; DataTable.",
+    "methods": "Saved cards; Card, IconTile, Badge.",
+    "upgrade": "Upgrade call to action; Card variant=\"inverse\" or PricingCard."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Plan, usage and invoices share the main column; methods and upgrade form the side column."
    ]
   },
   {
-   "name": "PageUserList",
-   "tag": "UiPageUserList",
+   "name": "PageTeam",
+   "tag": "UiPageTeam",
    "group": "pages",
-   "description": "User or customer list template: stats, filters, toolbar, table and a right-hand add/edit drawer.",
+   "description": "Team template: member stats, members table, roles and permissions matrix, and an invite form.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10456,21 +12257,21 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "stats": "Figures above the table; StatStrip.",
-    "filters": "Filter selects in a card; Select.",
-    "toolbar": "Page size, search, export and Add button; Select, SearchInput, Button.",
-    "table": "Users table with checkboxes and actions; DataTable with UserCell, Chip, IconButton.",
-    "drawer": "Side panel rendered in the side column; Drawer with TextField, Select, Button."
+    "stats": "Counters; KpiTile, StatsCard.",
+    "members": "Members; DataTable with UserCell, Select, Badge.",
+    "roles": "Permissions matrix; DataTable with Checkbox cells.",
+    "invite": "Invite form; Card, TextField, Select, Button."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Members and roles share the main column; the invite form is the side column."
    ]
   },
   {
-   "name": "PageProfile",
-   "tag": "UiPageProfile",
+   "name": "PageIntegrations",
+   "tag": "UiPageIntegrations",
    "group": "pages",
-   "description": "User profile template: cover header, tabs and two columns of about, activity and plan cards.",
+   "description": "Integrations template: connection cards, API keys and webhooks.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10491,21 +12292,21 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "profile": "Cover with avatar, name and meta; ProfileHeader.",
-    "tabs": "Section tabs; PillTabs.",
-    "about": "Left column key-value info; Card with Descriptions.",
-    "activity": "Right column activity feed; Timeline.",
-    "plan": "Right column plan card and upgrade button; Card, Badge, Progress, Button."
+    "filters": "SearchInput, FilterChips.",
+    "connections": "IntegrationCard grid.",
+    "keys": "Keys; DataTable with CopyButton and IconButton.",
+    "webhooks": "Webhooks list; Card, Switch, Chip."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Keys and webhooks share a row and wrap on narrow screens."
    ]
   },
   {
-   "name": "PageForm",
-   "tag": "UiPageForm",
+   "name": "PageSearch",
+   "tag": "UiPageSearch",
    "group": "pages",
-   "description": "Create/edit form template: main column, media, side column and header actions.",
+   "description": "Search template: query field, filter sidebar, result groups and an empty state.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10525,20 +12326,22 @@
    },
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
-    "actions": "Discard, Save draft and Publish buttons in the top-right of the built-in header; Button. Rendered right-aligned on their own when title is not set.",
-    "main": "Main column cards (info, options); Card, TextField, Textarea.",
-    "media": "Below main; upload dropzone; FileUpload or Gallery.",
-    "side": "Side column cards (price, status, tags); Card, NumberInput, Select, ChipInput."
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "search": "SearchInput, Tabs.",
+    "filters": "Filters; Card, Checkbox, Select.",
+    "results": "Result groups; Card, Chip, Divider.",
+    "empty": "Shown only when there are no results; EmptyState."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Filters sit left of the results and stack above them under 860 px. Fill empty only when there are no results."
    ]
   },
   {
-   "name": "PageOrder",
-   "tag": "UiPageOrder",
+   "name": "PageNotifications",
+   "tag": "UiPageNotifications",
    "group": "pages",
-   "description": "Order/booking details template: status chips, items table, timeline and side info cards.",
+   "description": "Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10559,20 +12362,20 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "status": "Payment and fulfillment chips; Chip (tone success, warning, danger).",
-    "items": "Items table with totals; DataTable.",
-    "shipping": "Event timeline; Timeline.",
-    "side": "Customer, address and payment cards; UserCell, Descriptions, Button."
+    "filters": "Filter chips such as all, unread and mentions; FilterChips.",
+    "feed": "Notification rows grouped by day; Card, IconTile, Badge, Divider.",
+    "empty": "Shown instead of the feed when nothing matches; EmptyState."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Fill empty only when the feed has no rows. Mark all read goes in the actions slot."
    ]
   },
   {
-   "name": "PageAccount",
-   "tag": "UiPageAccount",
+   "name": "PageInbox",
+   "tag": "UiPageInbox",
    "group": "pages",
-   "description": "Account settings template with pill tabs and a swappable panel.",
+   "description": "Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10593,19 +12396,22 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "tabs": "Section tabs (account, security, billing, notifications); PillTabs.",
-    "panel": "Content of the active tab; Card or SettingsSection with Switch and TextField."
+    "filters": "Search and folder chips above the list; SearchInput, FilterChips.",
+    "list": "Conversation rows with unread marks; Card, Avatar, Badge.",
+    "thread": "Messages of the open conversation; Card, Avatar.",
+    "composer": "Reply field and send button; Textarea, Button.",
+    "customer": "Customer details; ContactPanel, Descriptions, Tag."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "The template does not switch panels by itself: keep the active tab in your own state (PillTabs v-model) and render only that tab content in the panel slot."
+    "List, thread and customer panel sit side by side and stack in that order at 860px and below. Keep the selected conversation in your own state."
    ]
   },
   {
-   "name": "PagePricing",
-   "tag": "UiPagePricing",
+   "name": "PageCheckout",
+   "tag": "UiPageCheckout",
    "group": "pages",
-   "description": "Pricing template: billing-period toggle, plan cards and an FAQ.",
+   "description": "Checkout template: step indicator, cart items, delivery address, payment and an order summary column.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10626,19 +12432,22 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "toggle": "Monthly/annual switch with a savings badge; Switch, Chip.",
-    "plans": "Plan cards, one marked featured; PricingCard.",
-    "faq": "Questions accordion; Accordion."
+    "steps": "Checkout steps above the content; Stepper.",
+    "items": "Cart lines with quantity and price; Card with NumberInput.",
+    "address": "Contact and delivery fields; Card with TextField and Select.",
+    "payment": "Payment method and card fields; OptionCards, TextField.",
+    "summary": "Totals, promo code and the pay button; Card, Descriptions, Button."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Summary sits in the side column and drops below the form on narrow screens."
    ]
   },
   {
-   "name": "PageFaq",
-   "tag": "UiPageFaq",
+   "name": "PageOnboarding",
+   "tag": "UiPageOnboarding",
    "group": "pages",
-   "description": "Help center template: search, categories, answers accordion and a contact block.",
+   "description": "Onboarding template: progress block, active step content, setup checklist and a column of tips.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10659,13 +12468,33 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "search": "Large search field; SearchInput.",
-    "cats": "Category list on the left; vertical PillTabs.",
-    "answers": "Answers on the right; Accordion.",
-    "contact": "Contact cards below; Card, IconTile, Button."
+    "progress": "Stepper and a completion bar above the content; Stepper, Progress.",
+    "steps": "Content of the active step; Card with form fields.",
+    "checklist": "Remaining setup tasks; Card with Checkbox rows.",
+    "tips": "Side column with help cards; Card, IconTile, Button."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Keep the active step in your own state; the template does not switch steps. Steps and checklist share the main column, tips go to the side and stack below it on narrow screens."
+   ]
+  },
+  {
+   "name": "PageLanding",
+   "tag": "UiPageLanding",
+   "group": "pages",
+   "description": "Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.",
+   "props": {},
+   "slots": {
+    "hero": "Hero block; HeroBanner, Card, Button.",
+    "logos": "Partner row; Chip or Text.",
+    "features": "Feature cards; Card, IconTile.",
+    "proof": "Numbers and quotes; StatStrip, Card, Avatar.",
+    "pricing": "Plan cards; PricingCard.",
+    "cta": "Closing block; Card variant=\"gradient\", Button.",
+    "footer": "Page footer; Footer."
+   },
+   "notes": [
+    "Landing does not use the app shell: render it on its own page. Blocks stack in one column; each block may use its own grid and wraps on narrow screens."
    ]
   },
   {