@ziyarago/ui 0.7.0 → 0.9.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.7.0",
+ "version": "0.9.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -276,6 +276,19 @@
     "PagePricing",
     "PageFaq",
     "PageAnalytics",
+    "PageCalendar",
+    "PageKanban",
+    "PageBilling",
+    "PageTeam",
+    "PageIntegrations",
+    "PageSearch",
+    "PageArticle",
+    "PageChangelog",
+    "PageHelp",
+    "PageStates",
+    "PageLegal",
+    "PageLocations",
+    "PageBookingFlow",
     "PageNotifications",
     "PageInbox",
     "PageCheckout",
@@ -3382,6 +3395,1510 @@
       "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\" />"
+     }
+    ]
+   },
+   {
+    "id": "article",
+    "label": "Article",
+    "component": "UiPageArticle",
+    "description": "Blog article: cover, title and author, body with a table of contents, share row and related posts.",
+    "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": "cover",
+      "title": "Cover",
+      "desc": "Cover with category, title, author and reading time.",
+      "accepts": [
+       "Card",
+       "Chip",
+       "Avatar",
+       "LazyImage"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "body",
+      "title": "Article body",
+      "desc": "Headings, paragraphs, quote and code.",
+      "accepts": [
+       "Heading",
+       "Text",
+       "Code",
+       "Alert"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiHeading level=\"2\">…</UiHeading>"
+     },
+     {
+      "id": "toc",
+      "title": "Table of contents",
+      "desc": "Sticky list of section links.",
+      "accepts": [
+       "Card",
+       "Link"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"On this page\">…</UiCard>"
+     },
+     {
+      "id": "share",
+      "title": "Share",
+      "desc": "Share buttons and copy link.",
+      "accepts": [
+       "Button",
+       "IconButton",
+       "CopyButton"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCopyButton :value=\"url\" />"
+     },
+     {
+      "id": "related",
+      "title": "Related posts",
+      "desc": "Cards with other posts.",
+      "accepts": [
+       "Card",
+       "Chip"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "changelog",
+    "label": "Changelog",
+    "component": "UiPageChangelog",
+    "description": "Changelog: release timeline grouped by version with new, fix and improved tags, a filter and subscribe.",
+    "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": "Tag filter and search.",
+      "accepts": [
+       "FilterChips",
+       "SearchInput"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiFilterChips v-model=\"tag\" :items=\"tags\" />"
+     },
+     {
+      "id": "timeline",
+      "title": "Release timeline",
+      "desc": "Versions with date and tagged changes.",
+      "accepts": [
+       "Card",
+       "Chip",
+       "Divider"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "subscribe",
+      "title": "Subscribe",
+      "desc": "Email field to get release notes.",
+      "accepts": [
+       "Card",
+       "TextField",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Get updates\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "help",
+    "label": "Help center",
+    "component": "UiPageHelp",
+    "description": "Help center home: search, category tiles, popular articles and contact.",
+    "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",
+      "desc": "Large search field.",
+      "accepts": [
+       "SearchInput"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput size=\"lg\" />"
+     },
+     {
+      "id": "categories",
+      "title": "Categories",
+      "desc": "Grid of category tiles.",
+      "accepts": [
+       "Card",
+       "IconTile"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "popular",
+      "title": "Popular articles",
+      "desc": "List of top articles.",
+      "accepts": [
+       "Card",
+       "Link",
+       "Chip"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Popular\">…</UiCard>"
+     },
+     {
+      "id": "contact",
+      "title": "Contact",
+      "desc": "Ways to reach support.",
+      "accepts": [
+       "Card",
+       "Button",
+       "IconTile"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Still need help?\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "states",
+    "label": "States",
+    "component": "UiPageStates",
+    "description": "State gallery: empty, no results, no permission, offline, error with retry, loading and success.",
+    "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": "empty",
+      "title": "Empty list",
+      "desc": "First-use empty state with an action.",
+      "accepts": [
+       "EmptyState",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiEmptyState icon=\"inbox\" title=\"Nothing here yet\" />"
+     },
+     {
+      "id": "noresults",
+      "title": "No results",
+      "desc": "Search found nothing.",
+      "accepts": [
+       "EmptyState",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiEmptyState icon=\"search-x\" title=\"No results\" />"
+     },
+     {
+      "id": "forbidden",
+      "title": "No permission",
+      "desc": "Access denied.",
+      "accepts": [
+       "EmptyState",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiEmptyState icon=\"lock\" title=\"No access\" />"
+     },
+     {
+      "id": "offline",
+      "title": "Offline",
+      "desc": "No connection.",
+      "accepts": [
+       "DataState"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataState state=\"offline\" />"
+     },
+     {
+      "id": "error",
+      "title": "Error",
+      "desc": "Failure with a retry button.",
+      "accepts": [
+       "DataState",
+       "Alert"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataState state=\"error\" />"
+     },
+     {
+      "id": "loading",
+      "title": "Loading",
+      "desc": "Skeleton placeholders.",
+      "accepts": [
+       "Skeleton",
+       "DataState"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSkeleton />"
+     },
+     {
+      "id": "success",
+      "title": "Success",
+      "desc": "Confirmation after an action.",
+      "accepts": [
+       "Alert",
+       "EmptyState"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiAlert tone=\"success\" title=\"Saved\" />"
+     }
+    ]
+   },
+   {
+    "id": "legal",
+    "label": "Legal",
+    "component": "UiPageLegal",
+    "description": "Legal document: last updated, sticky table of contents, sections, print and download.",
+    "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": "meta",
+      "title": "Meta",
+      "desc": "Version, last updated and document actions.",
+      "accepts": [
+       "Chip",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiChip>Last updated 12 Mar 2026</UiChip>"
+     },
+     {
+      "id": "toc",
+      "title": "Table of contents",
+      "desc": "Sticky list of section links.",
+      "accepts": [
+       "Card",
+       "Link"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Contents\">…</UiCard>"
+     },
+     {
+      "id": "document",
+      "title": "Document",
+      "desc": "Numbered sections of text.",
+      "accepts": [
+       "Card",
+       "Heading",
+       "Text"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "contact",
+      "title": "Contact",
+      "desc": "Questions about this document.",
+      "accepts": [
+       "Card",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Questions?\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "locations",
+    "label": "Locations",
+    "component": "UiPageLocations",
+    "description": "Locations: filters, a list of places and a sticky map 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 and category chips.",
+      "accepts": [
+       "SearchInput",
+       "FilterChips"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput v-model=\"q\" />"
+     },
+     {
+      "id": "list",
+      "title": "Places",
+      "desc": "Cards with name, distance and rating.",
+      "accepts": [
+       "Card",
+       "Chip",
+       "Rating"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard padding=\"none\">…</UiCard>"
+     },
+     {
+      "id": "map",
+      "title": "Map",
+      "desc": "Map with markers.",
+      "accepts": [
+       "Map",
+       "Card"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiMap :markers=\"pins\" />"
+     }
+    ]
+   },
+   {
+    "id": "booking-flow",
+    "label": "Booking flow",
+    "component": "UiPageBookingFlow",
+    "description": "Booking flow: stepper from search to confirmation with a sticky summary card.",
+    "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": "Progress through the flow.",
+      "accepts": [
+       "Stepper"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiStepper :steps=\"steps\" :current=\"1\" />"
+     },
+     {
+      "id": "content",
+      "title": "Active step",
+      "desc": "Search, pick, guests or confirm.",
+      "accepts": [
+       "Card",
+       "DatePicker",
+       "OptionCards",
+       "NumberInput"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Guests\">…</UiCard>"
+     },
+     {
+      "id": "nav",
+      "title": "Navigation",
+      "desc": "Back and continue buttons.",
+      "accepts": [
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiButton variant=\"primary\">Continue</UiButton>"
+     },
+     {
+      "id": "summary",
+      "title": "Summary",
+      "desc": "Price and details of the booking.",
+      "accepts": [
+       "Card",
+       "Descriptions",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Summary\">…</UiCard>"
+     }
+    ]
    }
   ]
  },
@@ -9566,20 +11083,223 @@
      "default": 1,
      "description": "Page buttons shown on each side of the current page. First and last page are always shown; gaps become an ellipsis."
     },
-    "label": {
+    "label": {
+     "type": "string",
+     "default": "Pagination",
+     "description": "Accessible name of the navigation landmark."
+    },
+    "hideArrows": {
+     "type": "boolean",
+     "default": false,
+     "description": "Hides the previous and next buttons."
+    },
+    "labels": {
+     "type": "{ prev?: string; next?: string; page?: string }",
+     "default": "{ prev: 'Previous page', next: 'Next page', page: 'Page' }",
+     "description": "Accessible names of the arrow buttons and of each page button (\"Page 3\")."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scale of button size and text."
+    }
+   },
+   "events": {
+    "change": "Called with the clicked page number (also from the previous and next buttons)."
+   },
+   "notes": [
+    "Shows first, last and current plus or minus siblings with an ellipsis for gaps, so it scales to hundreds of pages. A gap of a single page shows that page instead of an ellipsis.",
+    "Previous and next buttons carry aria-label \"Previous page\" and \"Next page\" and are disabled at the ends; the current page has aria-current=\"page\"."
+   ]
+  },
+  {
+   "name": "Accordion",
+   "tag": "UiAccordion",
+   "group": "navigation",
+   "description": "Vertical list of collapsible sections where one is open at a time; use for FAQs and grouped details.",
+   "props": {
+    "items": {
+     "type": "{ id: string; title: string; body: string | VNode }[]",
+     "default": "[]",
+     "description": "Sections. id must be unique; body is shown when the section is open."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scale of header padding and text."
+    }
+   },
+   "notes": [
+    "Open state is internal and single: opening one closes the others, all start closed."
+   ]
+  },
+  {
+   "name": "Avatar",
+   "tag": "UiAvatar",
+   "group": "media",
+   "description": "Round user picture that falls back to initials when there is no image.",
+   "props": {
+    "name": {
+     "type": "string",
+     "description": "Full name. Shown as the tooltip and used for up to two initials; \"?\" when empty."
+    },
+    "src": {
+     "type": "string",
+     "description": "Image URL. Initials are shown without it."
+    },
+    "initials": {
+     "type": "string",
+     "description": "Explicit initials (up to 3 characters, uppercased) instead of the ones derived from name."
+    },
+    "tone": {
+     "type": "'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'",
+     "values": [
+      "brand",
+      "sky",
+      "success",
+      "warning",
+      "danger",
+      "neutral"
+     ],
+     "default": "brand",
+     "description": "Background color of the initials avatar."
+    },
+    "shape": {
+     "type": "'circle' | 'rounded'",
+     "values": [
+      "circle",
+      "rounded"
+     ],
+     "default": "circle",
+     "description": "rounded gives a squircle with a 30% corner radius."
+    },
+    "ring": {
+     "type": "boolean",
+     "default": false,
+     "description": "Adds a background-colored ring so overlapping avatars stay separated."
+    },
+    "status": {
+     "type": "'online' | 'offline' | 'away' | 'busy'",
+     "values": [
+      "online",
+      "offline",
+      "away",
+      "busy"
+     ],
+     "description": "Shows a presence dot in the bottom corner."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Diameter: xs 24, sm 32, md 40, lg 56, xl 72 px. A number is used directly as px."
+    }
+   },
+   "notes": [
+    "Avatar sizes differ from other components (lg 56, xl 72), and a number gives any custom size."
+   ]
+  },
+  {
+   "name": "Icon",
+   "tag": "UiIcon",
+   "group": "media",
+   "description": "Renders a named icon from the library at a chosen size.",
+   "props": {
+    "name": {
+     "type": "string",
+     "default": "circle",
+     "description": "Icon name from the library, for example \"check\" or \"map-pin\"."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Pixel size: xs 14, sm 16, md 20, lg 24, xl 32. A number is used directly as px."
+    }
+   },
+   "notes": [
+    "The icon is aria-hidden; add a label on the surrounding control for accessibility.",
+    "Icons load lazily, so the glyph may appear a moment after first render."
+   ]
+  },
+  {
+   "name": "LazyImage",
+   "tag": "UiLazyImage",
+   "group": "media",
+   "description": "Image box with a fixed aspect ratio and rounded corners, rendered as a background image.",
+   "props": {
+    "src": {
+     "type": "string",
+     "description": "Image URL. An empty placeholder is shown without it."
+    },
+    "alt": {
+     "type": "string",
+     "default": "",
+     "description": "Accessible description, exposed as aria-label on role=\"img\"."
+    },
+    "aspectRatio": {
+     "type": "string",
+     "default": "16/9",
+     "description": "CSS aspect-ratio value such as \"1/1\" or \"4/3\"."
+    },
+    "rounded": {
+     "type": "number",
+     "default": 20,
+     "description": "Corner radius in px."
+    }
+   }
+  },
+  {
+   "name": "Gallery",
+   "tag": "UiGallery",
+   "group": "media",
+   "description": "Large image with a counter and a thumbnail strip for browsing a set of photos.",
+   "props": {
+    "images": {
+     "type": "string[]",
+     "required": true,
+     "default": [],
+     "description": "Image URLs. The first one is shown initially; clicking a thumbnail switches the main image."
+    },
+    "alt": {
      "type": "string",
-     "default": "Pagination",
-     "description": "Accessible name of the navigation landmark."
+     "default": "",
+     "description": "Accessible description of the main image."
     },
-    "hideArrows": {
-     "type": "boolean",
-     "default": false,
-     "description": "Hides the previous and next buttons."
+    "index": {
+     "type": "number",
+     "description": "Controlled active image index. When set, the gallery only changes image when you update it from onChange; when omitted it keeps its own state starting at 0."
     },
     "labels": {
-     "type": "{ prev?: string; next?: string; page?: string }",
-     "default": "{ prev: 'Previous page', next: 'Next page', page: 'Page' }",
-     "description": "Accessible names of the arrow buttons and of each page button (\"Page 3\")."
+     "type": "{ photo?: string }",
+     "default": "{ photo: 'Photo' }",
+     "description": "Override the thumbnail aria-label prefix."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9591,27 +11311,44 @@
       "xl"
      ],
      "default": "md",
-     "description": "Scale of button size and text."
+     "description": "Thumbnail strip size."
     }
    },
    "events": {
-    "change": "Called with the clicked page number (also from the previous and next buttons)."
+    "change": "Called with the new image index when a thumbnail is clicked."
    },
    "notes": [
-    "Shows first, last and current plus or minus siblings with an ellipsis for gaps, so it scales to hundreds of pages. A gap of a single page shows that page instead of an ellipsis.",
-    "Previous and next buttons carry aria-label \"Previous page\" and \"Next page\" and are disabled at the ends; the current page has aria-current=\"page\"."
+    "An empty or missing images array renders an empty frame (no counter, no thumbnails). Invalid index values are clamped to the available range."
    ]
   },
   {
-   "name": "Accordion",
-   "tag": "UiAccordion",
-   "group": "navigation",
-   "description": "Vertical list of collapsible sections where one is open at a time; use for FAQs and grouped details.",
+   "name": "Carousel",
+   "tag": "UiCarousel",
+   "group": "media",
+   "description": "Slideshow of image slides with captions, arrows and dot pagination.",
    "props": {
     "items": {
-     "type": "{ id: string; title: string; body: string | VNode }[]",
-     "default": "[]",
-     "description": "Sections. id must be unique; body is shown when the section is open."
+     "type": "{ image?: string; title: string; sub?: string }[]",
+     "required": true,
+     "default": [],
+     "description": "Slides. title and sub form the caption over the image."
+    },
+    "index": {
+     "type": "number",
+     "description": "Controlled active slide index. When set, the carousel only changes slide when you update it from onChange; when omitted it keeps its own state starting at 0."
+    },
+    "autoplay": {
+     "type": "number | boolean",
+     "description": "Advance automatically every N milliseconds (true = 5000). Starts only in the browser, pauses while the pointer is over or focus is inside the carousel and while the tab is hidden, and is disabled for prefers-reduced-motion and data-motion=\"off\". Needs at least 2 slides."
+    },
+    "label": {
+     "type": "string",
+     "description": "Accessible name of the carousel region."
+    },
+    "labels": {
+     "type": "{ prev?: string; next?: string; slide?: string }",
+     "default": "{ prev: 'Previous', next: 'Next', slide: 'Slide' }",
+     "description": "Override the aria-labels of the arrows and dots."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9623,70 +11360,199 @@
       "xl"
      ],
      "default": "md",
-     "description": "Scale of header padding and text."
+     "description": "Slide aspect ratio and caption size: xs 16/6, sm 16/7, md 16/8, lg 16/9, xl 16/10."
     }
    },
+   "events": {
+    "change": "Called with the new slide index on arrow, dot, keyboard (left and right arrows) and autoplay changes."
+   },
    "notes": [
-    "Open state is internal and single: opening one closes the others, all start closed."
+    "Arrows wrap around at both ends and are hidden with fewer than 2 slides; an empty items array renders an empty frame.",
+    "Autoplay has no visible pause button; hover or focus pauses it. Prefer a manual carousel for essential content."
    ]
   },
   {
-   "name": "Avatar",
-   "tag": "UiAvatar",
+   "name": "Map",
+   "tag": "UiMap",
    "group": "media",
-   "description": "Round user picture that falls back to initials when there is no image.",
+   "description": "Interactive raster map with panning, zoom buttons and clickable markers, using OpenStreetMap data via CARTO tiles.",
+   "props": {
+    "lat": {
+     "type": "number",
+     "default": 21.4225,
+     "description": "Initial center latitude."
+    },
+    "lon": {
+     "type": "number",
+     "default": 39.8262,
+     "description": "Initial center longitude."
+    },
+    "zoom": {
+     "type": "number",
+     "default": 14,
+     "description": "Initial zoom level; the zoom buttons clamp it to 3..18."
+    },
+    "markers": {
+     "type": "{ lat: number; lon: number; label?: string; icon?: string; tone?: 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral' }[]",
+     "default": [],
+     "description": "Pins. label is the tooltip, icon defaults to \"map-pin\"."
+    },
+    "width": {
+     "type": "number",
+     "default": 640,
+     "description": "Pixel width used to compute which tiles to load; the map element itself fills its container."
+    },
+    "height": {
+     "type": "number",
+     "default": 360,
+     "description": "Height in px."
+    },
+    "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",
-     "description": "Full name. Shown as the tooltip and used for up to two initials; \"?\" when empty."
+     "required": true,
+     "description": "Person or organization name."
     },
     "src": {
      "type": "string",
-     "description": "Image URL. Initials are shown without it."
+     "description": "Avatar image URL; initials are shown without it."
     },
-    "initials": {
+    "cover": {
      "type": "string",
-     "description": "Explicit initials (up to 3 characters, uppercased) instead of the ones derived from name."
-    },
-    "tone": {
-     "type": "'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'",
-     "values": [
-      "brand",
-      "sky",
-      "success",
-      "warning",
-      "danger",
-      "neutral"
-     ],
-     "default": "brand",
-     "description": "Background color of the initials avatar."
+     "description": "Cover image URL."
     },
-    "shape": {
-     "type": "'circle' | 'rounded'",
-     "values": [
-      "circle",
-      "rounded"
-     ],
-     "default": "circle",
-     "description": "rounded gives a squircle with a 30% corner radius."
+    "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."
     },
-    "ring": {
+    "loading": {
      "type": "boolean",
      "default": false,
-     "description": "Adds a background-colored ring so overlapping avatars stay separated."
+     "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."
     },
-    "status": {
-     "type": "'online' | 'offline' | 'away' | 'busy'",
-     "values": [
-      "online",
-      "offline",
-      "away",
-      "busy"
-     ],
-     "description": "Shows a presence dot in the bottom corner."
+    "night": {
+     "type": "string",
+     "default": "night",
+     "description": "Unit after \"SAR /\", e.g. \"night\"."
     },
     "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number",
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
       "xs",
       "sm",
@@ -9695,26 +11561,45 @@
       "xl"
      ],
      "default": "md",
-     "description": "Diameter: xs 24, sm 32, md 40, lg 56, xl 72 px. A number is used directly as px."
+     "description": "Scales padding, text and avatars."
     }
    },
    "notes": [
-    "Avatar sizes differ from other components (lg 56, xl 72), and a number gives any custom size."
+    "Currency is hard-coded to SAR.",
+    "Wrap in a clickable element yourself; the card has no click handler."
    ]
   },
   {
-   "name": "Icon",
-   "tag": "UiIcon",
-   "group": "media",
-   "description": "Renders a named icon from the library at a chosen size.",
+   "name": "TourCard",
+   "tag": "UiTourCard",
+   "group": "domain",
+   "description": "Tour or virtual-tour card with session count and a seat-occupancy bar.",
    "props": {
     "name": {
      "type": "string",
-     "default": "circle",
-     "description": "Icon name from the library, for example \"check\" or \"map-pin\"."
+     "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' | number",
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
       "xs",
       "sm",
@@ -9723,66 +11608,31 @@
       "xl"
      ],
      "default": "md",
-     "description": "Pixel size: xs 14, sm 16, md 20, lg 24, xl 32. A number is used directly as px."
+     "description": "Scales padding, text and avatars."
     }
    },
+   "slots": {
+    "actions": "Footer actions, usually Buttons."
+   },
    "notes": [
-    "The icon is aria-hidden; add a label on the surrounding control for accessibility.",
-    "Icons load lazily, so the glyph may appear a moment after first render."
+    "A fixed \"360°\" badge is always shown.",
+    "With seats = 0 or missing the bar is empty (0%) and the meta reads \"0/0\"."
    ]
   },
   {
-   "name": "LazyImage",
-   "tag": "UiLazyImage",
-   "group": "media",
-   "description": "Image box with a fixed aspect ratio and rounded corners, rendered as a background image.",
-   "props": {
-    "src": {
-     "type": "string",
-     "description": "Image URL. An empty placeholder is shown without it."
-    },
-    "alt": {
-     "type": "string",
-     "default": "",
-     "description": "Accessible description, exposed as aria-label on role=\"img\"."
-    },
-    "aspectRatio": {
-     "type": "string",
-     "default": "16/9",
-     "description": "CSS aspect-ratio value such as \"1/1\" or \"4/3\"."
-    },
-    "rounded": {
-     "type": "number",
-     "default": 20,
-     "description": "Corner radius in px."
-    }
-   }
-  },
-  {
-   "name": "Gallery",
-   "tag": "UiGallery",
-   "group": "media",
-   "description": "Large image with a counter and a thumbnail strip for browsing a set of photos.",
+   "name": "PrayerTimes",
+   "tag": "UiPrayerTimes",
+   "group": "domain",
+   "description": "Row of daily prayer times with the upcoming prayer highlighted.",
    "props": {
-    "images": {
-     "type": "string[]",
-     "required": true,
-     "default": [],
-     "description": "Image URLs. The first one is shown initially; clicking a thumbnail switches the main image."
-    },
-    "alt": {
-     "type": "string",
-     "default": "",
-     "description": "Accessible description of the main image."
+    "items": {
+     "type": "{ name: string; time: string }[]",
+     "default": "[]",
+     "description": "Prayers in display order; time is shown as-is, e.g. \"05:12\"."
     },
-    "index": {
+    "next": {
      "type": "number",
-     "description": "Controlled active image index. When set, the gallery only changes image when you update it from onChange; when omitted it keeps its own state starting at 0."
-    },
-    "labels": {
-     "type": "{ photo?: string }",
-     "default": "{ photo: 'Photo' }",
-     "description": "Override the thumbnail aria-label prefix."
+     "description": "Index in items of the next prayer; sets aria-current on it."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9794,44 +11644,20 @@
       "xl"
      ],
      "default": "md",
-     "description": "Thumbnail strip size."
+     "description": "Scales padding, text and avatars."
     }
-   },
-   "events": {
-    "change": "Called with the new image index when a thumbnail is clicked."
-   },
-   "notes": [
-    "An empty or missing images array renders an empty frame (no counter, no thumbnails). Invalid index values are clamped to the available range."
-   ]
+   }
   },
   {
-   "name": "Carousel",
-   "tag": "UiCarousel",
-   "group": "media",
-   "description": "Slideshow of image slides with captions, arrows and dot pagination.",
+   "name": "RamadanTracker",
+   "tag": "UiRamadanTracker",
+   "group": "domain",
+   "description": "Thirty-day Ramadan progress strip; the last ten days and odd nights are marked.",
    "props": {
-    "items": {
-     "type": "{ image?: string; title: string; sub?: string }[]",
-     "required": true,
-     "default": [],
-     "description": "Slides. title and sub form the caption over the image."
-    },
-    "index": {
+    "day": {
      "type": "number",
-     "description": "Controlled active slide index. When set, the carousel only changes slide when you update it from onChange; when omitted it keeps its own state starting at 0."
-    },
-    "autoplay": {
-     "type": "number | boolean",
-     "description": "Advance automatically every N milliseconds (true = 5000). Starts only in the browser, pauses while the pointer is over or focus is inside the carousel and while the tab is hidden, and is disabled for prefers-reduced-motion and data-motion=\"off\". Needs at least 2 slides."
-    },
-    "label": {
-     "type": "string",
-     "description": "Accessible name of the carousel region."
-    },
-    "labels": {
-     "type": "{ prev?: string; next?: string; slide?: string }",
-     "default": "{ prev: 'Previous', next: 'Next', slide: 'Slide' }",
-     "description": "Override the aria-labels of the arrows and dots."
+     "required": true,
+     "description": "Current day 1-30. Earlier days render as past, later days as upcoming."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -9843,196 +11669,157 @@
       "xl"
      ],
      "default": "md",
-     "description": "Slide aspect ratio and caption size: xs 16/6, sm 16/7, md 16/8, lg 16/9, xl 16/10."
+     "description": "Scales padding, text and avatars."
     }
    },
-   "events": {
-    "change": "Called with the new slide index on arrow, dot, keyboard (left and right arrows) and autoplay changes."
-   },
    "notes": [
-    "Arrows wrap around at both ends and are hidden with fewer than 2 slides; an empty items array renders an empty frame.",
-    "Autoplay has no visible pause button; hover or focus pauses it. Prefer a manual carousel for essential content."
+    "Exposed as role=\"img\" with aria-label \"Day N of 30\"."
    ]
   },
   {
-   "name": "Map",
-   "tag": "UiMap",
-   "group": "media",
-   "description": "Interactive raster map with panning, zoom buttons and clickable markers, using OpenStreetMap data via CARTO tiles.",
+   "name": "BookingCard",
+   "tag": "UiBookingCard",
+   "group": "domain",
+   "description": "Compact booking summary: code, status, guest, hotel, dates and total.",
    "props": {
-    "lat": {
-     "type": "number",
-     "default": 21.4225,
-     "description": "Initial center latitude."
-    },
-    "lon": {
-     "type": "number",
-     "default": 39.8262,
-     "description": "Initial center longitude."
-    },
-    "zoom": {
-     "type": "number",
-     "default": 14,
-     "description": "Initial zoom level; the zoom buttons clamp it to 3..18."
-    },
-    "markers": {
-     "type": "{ lat: number; lon: number; label?: string; icon?: string; tone?: 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral' }[]",
-     "default": [],
-     "description": "Pins. label is the tooltip, icon defaults to \"map-pin\"."
-    },
-    "width": {
-     "type": "number",
-     "default": 640,
-     "description": "Pixel width used to compute which tiles to load; the map element itself fills its container."
-    },
-    "height": {
-     "type": "number",
-     "default": 360,
-     "description": "Height in px."
+    "code": {
+     "type": "string",
+     "required": true,
+     "description": "Booking reference, monospaced."
     },
-    "theme": {
-     "type": "'light' | 'dark'",
+    "status": {
+     "type": "'Confirmed' | 'Pending' | 'Cancelled' | string",
      "values": [
-      "light",
-      "dark"
+      "Confirmed",
+      "Pending",
+      "Cancelled"
      ],
-     "description": "Tile theme. If omitted, dark is used when the page is inside a dark data-theme."
+     "description": "Status text. Confirmed is green, Pending amber, Cancelled red; any other value gets a neutral badge."
     },
-    "style": {
+    "guest": {
      "type": "string",
-     "description": "CARTO tile style path, for example \"light_all\" or \"dark_all\". Overrides theme."
+     "description": "Guest name, also drives the avatar initials."
     },
-    "label": {
+    "hotel": {
      "type": "string",
-     "default": "Map",
-     "description": "aria-label of the map region."
+     "description": "Hotel name under the guest."
     },
-    "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."
-   ]
+    "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."
+    }
+   }
   },
   {
-   "name": "ProfileHeader",
-   "tag": "UiProfileHeader",
-   "group": "media",
-   "description": "Profile card with a cover image, large avatar, name and a row of meta items.",
+   "name": "GuestCard",
+   "tag": "UiGuestCard",
+   "group": "domain",
+   "description": "Guest profile card with avatar, country, stay length and tags.",
    "props": {
     "name": {
      "type": "string",
      "required": true,
-     "description": "Person or organization name."
+     "description": "Guest name."
     },
-    "src": {
+    "country": {
      "type": "string",
-     "description": "Avatar image URL; initials are shown without it."
+     "description": "Country shown in the subtitle."
     },
-    "cover": {
-     "type": "string",
-     "description": "Cover image URL."
+    "nights": {
+     "type": "number",
+     "description": "Number of nights, shown as \"N nights\"."
     },
-    "meta": {
-     "type": "{ icon: string; label: string }[]",
-     "default": [],
-     "description": "Facts under the name such as location or join date. label must be unique."
+    "vip": {
+     "type": "boolean",
+     "default": false,
+     "description": "Shows a VIP badge."
+    },
+    "tags": {
+     "type": "string[]",
+     "default": "[]",
+     "description": "Preference tags, e.g. \"Halal\", \"Late check-in\"."
+    },
+    "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": "RoomGrid",
+   "tag": "UiRoomGrid",
+   "group": "domain",
+   "description": "Tile grid of rooms colored by housekeeping status; use for front-desk room selection.",
    "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."
+    "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)."
     },
-    "subtitle": {
-     "type": "string",
-     "description": "Muted text next to the 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."
     },
-    "placeholder": {
-     "type": "string",
-     "default": "Ask anything…",
-     "description": "Input placeholder."
+    "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'",
@@ -10048,38 +11835,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'",
@@ -10093,29 +11889,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."
+    },
+    "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",
+     "default": 0,
+     "description": "Win probability 0-100, shown as a progress bar and percent."
+    },
+    "owner": {
+     "type": "string",
+     "description": "Owner name with avatar."
     },
-    "next": {
-     "type": "number",
-     "description": "Index in items of the next prayer; sets aria-current on it."
+    "due": {
+     "type": "string",
+     "description": "Due date caption, right aligned."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -10132,15 +11951,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'",
@@ -10155,45 +11974,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'",
@@ -10207,36 +12030,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'",
@@ -10250,59 +12063,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'",
@@ -10317,48 +12112,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'",
@@ -10372,52 +12156,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"
-     ],
-     "default": "info",
-     "description": "Badge tone for the stage."
+      "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."
     },
-    "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'",
@@ -10431,18 +12221,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'",
@@ -10458,48 +12268,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'",
@@ -10515,408 +12423,473 @@
     }
    },
    "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",
+     "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": "Caption under the heading."
+    },
+    "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).",
+    "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": "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": "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 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."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
   },
   {
-   "name": "KanbanCard",
-   "tag": "UiKanbanCard",
-   "group": "domain",
-   "description": "Simple kanban card with title, subtitle, free content and an optional tag.",
+   "name": "PageCrm",
+   "tag": "UiPageCrm",
+   "group": "pages",
+   "description": "CRM template: summary tiles, filters, pipeline board and call queue.",
    "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."
-   }
+    "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": "CallRow",
-   "tag": "UiCallRow",
-   "group": "domain",
-   "description": "One-line call log row with avatar, status, duration and a play button.",
+   "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."
     },
-    "status": {
+    "subtitle": {
+     "forwarded": true,
      "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."
+     "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).",
+    "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": "CallCard",
-   "tag": "UiCallCard",
-   "group": "domain",
-   "description": "Call recording card with status badge, a playback progress bar and duration.",
+   "name": "PageCatalog",
+   "tag": "UiPageCatalog",
+   "group": "pages",
+   "description": "Catalog template with a filter sidebar and a card grid (hotels, tours).",
    "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."
+    }
+   },
+   "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": "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",
+     "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": "Caption under the heading."
+    },
+    "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).",
+    "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": [
+    "Place inside AppShell; fill only the slots you need.",
+    "gallery, summary, tabs and history are the main column; booking is the side column."
+   ]
   },
   {
-   "name": "IncomingCall",
-   "tag": "UiIncomingCall",
-   "group": "domain",
-   "description": "Glass banner for an incoming call with Decline and Answer buttons.",
+   "name": "PageSettings",
+   "tag": "UiPageSettings",
+   "group": "pages",
+   "description": "Settings template with a section sub-navigation and stacked settings sections.",
    "props": {
-    "name": {
-     "type": "string",
-     "required": true,
-     "description": "Caller name."
-    },
-    "phone": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "description": "Caller number."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "label": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "default": "Incoming call",
-     "description": "Caption above the name."
-    },
-    "onDecline": {
-     "type": "() => void",
-     "description": "Decline button click."
-    },
-    "onAnswer": {
-     "type": "() => void",
-     "description": "Answer button click."
+     "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).",
+    "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": "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": "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",
-     "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).",
+    "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": [
-    "logo and aside are props in both Vue and React (pass a VNode / element)."
+    "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "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": "PageProfile",
+   "tag": "UiPageProfile",
+   "group": "pages",
+   "description": "User profile template: cover header, tabs and two columns of about, activity and plan cards.",
    "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."
-    },
-    "footer": {
-     "type": "VNode",
-     "description": "Content under the fields, for example \"No account? Sign up\"."
+     "description": "Caption under the heading."
     },
-    "image": {
+    "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": "URL of the media image. Without it the panel shows an accent gradient."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "headline": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Large text on the media panel (photo and tint)."
+     "description": "Caption under the heading."
     },
-    "caption": {
+    "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": "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": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
+  },
+  {
+   "name": "PageOrder",
+   "tag": "UiPageOrder",
+   "group": "pages",
+   "description": "Order/booking details template: status chips, items table, timeline and side info cards.",
+   "props": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "description": "Small text on the media panel (photo) or inside the glass bar (light, tint)."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "quote": {
+    "subtitle": {
+     "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": "Caption under the heading."
     },
-    "proof": {
+    "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).",
+    "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": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
+  },
+  {
+   "name": "PageAccount",
+   "tag": "UiPageAccount",
+   "group": "pages",
+   "description": "Account settings template with pill tabs and a swappable panel.",
+   "props": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "description": "Social-proof title, e.g. \"Join 20k+ users\"; light and tint. Shows the pill under the form."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "proofHint": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Second line of the proof pill."
+     "description": "Caption under the heading."
+    },
+    "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": "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."
    },
    "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.",
+    "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": "SocialAuth",
-   "tag": "UiSocialAuth",
-   "group": "domain",
-   "description": "Continue with Google and Apple buttons with an \"or\" divider. Place it under the sign-in form.",
+   "name": "PagePricing",
+   "tag": "UiPagePricing",
+   "group": "pages",
+   "description": "Pricing template: billing-period toggle, plan cards and an FAQ.",
    "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).",
+    "toggle": "Monthly/annual switch with a savings badge; Switch, Chip.",
+    "plans": "Plan cards, one marked featured; PricingCard.",
+    "faq": "Questions accordion; Accordion."
    },
    "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": "PageFaq",
+   "tag": "UiPageFaq",
    "group": "pages",
-   "description": "Dashboard template: greeting hero, KPI tiles, occupancy chart, sales funnel, top list and activity feed.",
+   "description": "Help center template: search, categories, answers accordion and a contact block.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10937,23 +12910,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).",
-    "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."
+    "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.",
-    "hero and kpis share a row, as do occupancy/funnel and top/activity; they wrap on narrow screens."
+    "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "name": "PagePatterns",
-   "tag": "UiPagePatterns",
+   "name": "PageAnalytics",
+   "tag": "UiPageAnalytics",
    "group": "pages",
-   "description": "Showcase template combining twelve recurring dashboard card patterns (banner, strips, stat lines, charts, lists).",
+   "description": "Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.",
    "props": {
     "title": {
      "forwarded": true,
@@ -10974,27 +12944,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).",
-    "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."
+    "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": "PageCrm",
-   "tag": "UiPageCrm",
+   "name": "PageCalendar",
+   "tag": "UiPageCalendar",
    "group": "pages",
-   "description": "CRM template: summary tiles, filters, pipeline board and call queue.",
+   "description": "Calendar template: view switch, time grid, mini calendar and event details.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11015,20 +12980,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).",
-    "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."
+    "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."
+    "Place inside AppShell; fill only the slots you need.",
+    "The grid sits beside the mini calendar and details; they stack under 860 px."
    ]
   },
   {
-   "name": "PageBookings",
-   "tag": "UiPageBookings",
+   "name": "PageKanban",
+   "tag": "UiPageKanban",
    "group": "pages",
-   "description": "Bookings list template: stats, toolbar, bulk-action bar, table and pagination.",
+   "description": "Kanban template: filters, task board columns and a card detail panel.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11049,21 +13015,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).",
-    "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."
+    "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."
+    "Place inside AppShell; fill only the slots you need.",
+    "Board scrolls horizontally inside its area; detail goes below it under 860 px."
    ]
   },
   {
-   "name": "PageCatalog",
-   "tag": "UiPageCatalog",
+   "name": "PageBilling",
+   "tag": "UiPageBilling",
    "group": "pages",
-   "description": "Catalog template with a filter sidebar and a card grid (hotels, tours).",
+   "description": "Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11084,21 +13049,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).",
-    "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."
+    "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.",
-    "The filter column is 260 px wide; on phones put filters in a Drawer yourself."
+    "Plan, usage and invoices share the main column; methods and upgrade form the side column."
    ]
   },
   {
-   "name": "PageDetail",
-   "tag": "UiPageDetail",
+   "name": "PageTeam",
+   "tag": "UiPageTeam",
    "group": "pages",
-   "description": "Detail page template (hotel, tour): gallery, summary, tabs, history and a booking side card.",
+   "description": "Team template: member stats, members table, roles and permissions matrix, and an invite form.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11119,22 +13085,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).",
-    "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."
+    "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.",
-    "gallery, summary, tabs and history are the main column; booking is the side column."
+    "Members and roles share the main column; the invite form is the side column."
    ]
   },
   {
-   "name": "PageSettings",
-   "tag": "UiPageSettings",
+   "name": "PageIntegrations",
+   "tag": "UiPageIntegrations",
    "group": "pages",
-   "description": "Settings template with a section sub-navigation and stacked settings sections.",
+   "description": "Integrations template: connection cards, API keys and webhooks.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11155,21 +13120,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).",
-    "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."
+    "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": "PageUserList",
-   "tag": "UiPageUserList",
+   "name": "PageSearch",
+   "tag": "UiPageSearch",
    "group": "pages",
-   "description": "User or customer list template: stats, filters, toolbar, table and a right-hand add/edit drawer.",
+   "description": "Search template: query field, filter sidebar, result groups and an empty state.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11190,21 +13155,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."
+    "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": "PageProfile",
-   "tag": "UiPageProfile",
+   "name": "PageArticle",
+   "tag": "UiPageArticle",
    "group": "pages",
-   "description": "User profile template: cover header, tabs and two columns of about, activity and plan cards.",
+   "description": "Article template: cover, post body, sticky table of contents, share row and related posts.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11225,21 +13190,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).",
-    "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."
+    "cover": "Cover image area with title and author line; a gradient Card or LazyImage.",
+    "body": "Article text; Heading, Text, Code, Alert.",
+    "toc": "Sticky table of contents; Card with a list of anchor links.",
+    "share": "Share and reaction row; Button, IconButton, CopyButton.",
+    "related": "Related posts; Card grid."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Body, share and related share the main column; the table of contents stays visible on the right while the body scrolls and drops under the body below 860 px."
    ]
   },
   {
-   "name": "PageForm",
-   "tag": "UiPageForm",
+   "name": "PageChangelog",
+   "tag": "UiPageChangelog",
    "group": "pages",
-   "description": "Create/edit form template: main column, media, side column and header actions.",
+   "description": "Changelog template: release timeline grouped by version with new, fix and improved tags, a filter and a subscribe card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11259,20 +13225,21 @@
    },
    "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).",
+    "filters": "Tag filter; FilterChips, SearchInput.",
+    "timeline": "Releases grouped by version; Card, Chip, Divider.",
+    "subscribe": "Sticky subscribe card; Card, TextField, Button."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Filters and timeline share the main column; the subscribe card is a sticky side column."
    ]
   },
   {
-   "name": "PageOrder",
-   "tag": "UiPageOrder",
+   "name": "PageHelp",
+   "tag": "UiPageHelp",
    "group": "pages",
-   "description": "Order/booking details template: status chips, items table, timeline and side info cards.",
+   "description": "Help center home: search, category grid, popular articles and a contact card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11293,20 +13260,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).",
-    "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."
+    "search": "Large search field; SearchInput.",
+    "categories": "Category tiles; Card with IconTile.",
+    "popular": "Popular articles list; Card.",
+    "contact": "Contact options; Card, Button."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Popular articles and contact share a row and wrap on narrow screens. For a single question list use PageFaq."
    ]
   },
   {
-   "name": "PageAccount",
-   "tag": "UiPageAccount",
+   "name": "PageStates",
+   "tag": "UiPageStates",
    "group": "pages",
-   "description": "Account settings template with pill tabs and a swappable panel.",
+   "description": "State gallery: empty list, no results, no permission, offline, error with retry, loading and success on one page.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11327,19 +13295,24 @@
    "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."
+    "empty": "Empty list; EmptyState with a primary action.",
+    "noresults": "No search results; EmptyState with a reset action.",
+    "forbidden": "No permission; EmptyState with a request-access action.",
+    "offline": "Offline; DataState state=\"offline\".",
+    "error": "Error with retry; DataState state=\"error\".",
+    "loading": "Loading; Skeleton or DataState state=\"loading\".",
+    "success": "Success confirmation; Alert tone=\"success\" or EmptyState."
    },
    "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."
+    "The first six slots sit in two rows of auto-fit cards; success spans the full width."
    ]
   },
   {
-   "name": "PagePricing",
-   "tag": "UiPagePricing",
+   "name": "PageLegal",
+   "tag": "UiPageLegal",
    "group": "pages",
-   "description": "Pricing template: billing-period toggle, plan cards and an FAQ.",
+   "description": "Legal document template: last-updated line, sticky table of contents, numbered sections and a contact card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11360,19 +13333,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).",
-    "toggle": "Monthly/annual switch with a savings badge; Switch, Chip.",
-    "plans": "Plan cards, one marked featured; PricingCard.",
-    "faq": "Questions accordion; Accordion."
+    "meta": "Version, last-updated date and print or download buttons; Chip, Button.",
+    "toc": "Sticky table of contents; Card with anchor links.",
+    "document": "Document sections; Card, Heading, Text.",
+    "contact": "Questions card; Card, Button."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "The table of contents sits left of the document and stacks above it under 860 px."
    ]
   },
   {
-   "name": "PageFaq",
-   "tag": "UiPageFaq",
+   "name": "PageLocations",
+   "tag": "UiPageLocations",
    "group": "pages",
-   "description": "Help center template: search, categories, answers accordion and a contact block.",
+   "description": "Locations template: filters, a scrollable list of places and a sticky map panel.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11393,20 +13368,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).",
-    "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."
+    "filters": "Search and category filters; SearchInput, FilterChips.",
+    "list": "Places list; Card rows.",
+    "map": "Map panel; Map, or a gradient placeholder."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "The list is a fixed-width column left of the map; under 860 px the map goes below the list."
    ]
   },
   {
-   "name": "PageAnalytics",
-   "tag": "UiPageAnalytics",
+   "name": "PageBookingFlow",
+   "tag": "UiPageBookingFlow",
    "group": "pages",
-   "description": "Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.",
+   "description": "Booking flow template: stepper, the active step content, back and continue buttons and a sticky summary card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11427,15 +13402,14 @@
    "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).",
-    "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."
+    "steps": "Progress; Stepper.",
+    "content": "Content of the active step (search, pick, guests, confirm); Card, DatePicker, OptionCards, NumberInput.",
+    "nav": "Back and Continue buttons.",
+    "summary": "Booking summary; Card, Descriptions."
    },
    "notes": [
     "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."
+    "Render only the active step in content. The summary stays visible on the right and goes below the step under 860 px."
    ]
   },
   {