@ziyarago/ui 0.8.0 → 0.10.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.8.0",
+ "version": "0.10.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -238,6 +238,7 @@
     "TourCard",
     "PrayerTimes",
     "RamadanTracker",
+    "QiblaCompass",
     "BookingCard",
     "GuestCard",
     "RoomGrid",
@@ -282,6 +283,17 @@
     "PageTeam",
     "PageIntegrations",
     "PageSearch",
+    "PageArticle",
+    "PageChangelog",
+    "PageHelp",
+    "PageStates",
+    "PageLegal",
+    "PageLocations",
+    "PageBookingFlow",
+    "PageItinerary",
+    "PagePrayer",
+    "PageGroupManager",
+    "PageTourPublic",
     "PageNotifications",
     "PageInbox",
     "PageCheckout",
@@ -4071,6 +4083,1363 @@
       "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>"
+     }
+    ]
+   },
+   {
+    "id": "itinerary",
+    "label": "Itinerary",
+    "component": "UiPageItinerary",
+    "description": "Itinerary: day tabs, a timeline of stops, transport and hotel blocks and a sticky trip summary.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "days",
+      "title": "Days",
+      "desc": "Switch between the days of the trip.",
+      "accepts": [
+       "Tabs",
+       "PillTabs"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiTabs v-model=\"day\" :items=\"days\" />"
+     },
+     {
+      "id": "timeline",
+      "title": "Day timeline",
+      "desc": "Stops of the active day with times, places and durations.",
+      "accepts": [
+       "Card",
+       "Timeline",
+       "StatRow"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Day 2 · Makkah\">…</UiCard>"
+     },
+     {
+      "id": "transport",
+      "title": "Transport",
+      "desc": "Flights, buses and transfers of the day.",
+      "accepts": [
+       "Card",
+       "StatRow"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Transport\">…</UiCard>"
+     },
+     {
+      "id": "hotel",
+      "title": "Hotel",
+      "desc": "Where the group stays.",
+      "accepts": [
+       "Card",
+       "Badge",
+       "IconTile"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "summary",
+      "title": "Trip summary",
+      "desc": "Dates, group size and what is booked.",
+      "accepts": [
+       "Card",
+       "Descriptions",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Trip summary\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "prayer",
+    "label": "Prayer times",
+    "component": "UiPagePrayer",
+    "description": "Prayer times: location picker, today with the next prayer, a month table and a sticky Qibla compass.",
+    "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": "location",
+      "title": "Location",
+      "desc": "City and calculation method.",
+      "accepts": [
+       "Select",
+       "PillSelect",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSelect v-model=\"city\" :options=\"cities\" />"
+     },
+     {
+      "id": "today",
+      "title": "Today",
+      "desc": "Five prayers with the next one highlighted and a countdown.",
+      "accepts": [
+       "Card",
+       "PrayerTimes"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiPrayerTimes :items=\"times\" :next=\"2\" />"
+     },
+     {
+      "id": "month",
+      "title": "Month table",
+      "desc": "Prayer times for every day of the month.",
+      "accepts": [
+       "Card",
+       "DataTable"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"days\" />"
+     },
+     {
+      "id": "qibla",
+      "title": "Qibla",
+      "desc": "Direction to the Kaaba.",
+      "accepts": [
+       "Card",
+       "QiblaCompass"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiQiblaCompass :bearing=\"248\" />"
+     }
+    ]
+   },
+   {
+    "id": "group-manager",
+    "label": "Group manager",
+    "component": "UiPageGroupManager",
+    "description": "Group manager: trip summary, pilgrims with documents and visa, bulk actions, rooming and payments.",
+    "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": "trip",
+      "title": "Trip summary",
+      "desc": "Dates, route, seats and readiness counters.",
+      "accepts": [
+       "Card",
+       "StatStrip",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiStatStrip :items=\"stats\" />"
+     },
+     {
+      "id": "toolbar",
+      "title": "Toolbar",
+      "desc": "Search and status filters.",
+      "accepts": [
+       "SearchInput",
+       "FilterChips"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput v-model=\"q\" />"
+     },
+     {
+      "id": "bulk",
+      "title": "Bulk actions",
+      "desc": "Shown when pilgrims are selected.",
+      "accepts": [
+       "Button",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiButton icon=\"send\">Remind selected</UiButton>"
+     },
+     {
+      "id": "pilgrims",
+      "title": "Pilgrims",
+      "desc": "Table with passport, visa and payment status.",
+      "accepts": [
+       "Card",
+       "DataTable",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
+     },
+     {
+      "id": "rooms",
+      "title": "Rooming",
+      "desc": "Room assignment for the hotel.",
+      "accepts": [
+       "Card",
+       "RoomGrid"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiRoomGrid :rooms=\"rooms\" />"
+     },
+     {
+      "id": "payments",
+      "title": "Payments",
+      "desc": "Collected, outstanding and the manager contact.",
+      "accepts": [
+       "Card",
+       "Progress",
+       "ContactPanel"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Payments\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "tour-public",
+    "label": "Tour page",
+    "component": "UiPageTourPublic",
+    "description": "Public tour page without the shell: gradient gallery, highlights, itinerary, inclusions, reviews and a sticky booking card.",
+    "shell": false,
+    "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": "gallery",
+      "title": "Gallery",
+      "desc": "Hero area made of gradients or photos.",
+      "accepts": [
+       "Gallery",
+       "Card"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "highlights",
+      "title": "Highlights",
+      "desc": "Key facts: nights, hotels, flights.",
+      "accepts": [
+       "StatStrip",
+       "IconTile"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiStatStrip :items=\"facts\" />"
+     },
+     {
+      "id": "itinerary",
+      "title": "Itinerary",
+      "desc": "Day by day program in an accordion.",
+      "accepts": [
+       "Accordion"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiAccordion :items=\"days\" />"
+     },
+     {
+      "id": "included",
+      "title": "Included",
+      "desc": "What the price includes and excludes.",
+      "accepts": [
+       "Card",
+       "Descriptions"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Included\">…</UiCard>"
+     },
+     {
+      "id": "reviews",
+      "title": "Reviews",
+      "desc": "What pilgrims say.",
+      "accepts": [
+       "Card",
+       "Rating",
+       "Avatar"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Reviews\">…</UiCard>"
+     },
+     {
+      "id": "booking",
+      "title": "Booking",
+      "desc": "Price, dates, seats and the booking button.",
+      "accepts": [
+       "Card",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Book\">…</UiCard>"
+     }
+    ]
    }
   ]
  },
@@ -5799,7 +7168,22 @@
     "error": {
      "type": "string",
      "forwarded": true,
-     "description": "Error message under the control. Turns the control red and is announced with role=\"alert\"."
+     "description": "Error message under the control. Turns the control red and is announced with role=\"alert\"."
+    },
+    "required": {
+     "type": "boolean",
+     "default": false,
+     "description": "Adds a red asterisk to the label and the native required attribute."
+    },
+    "name": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Native name attribute of the input."
+    },
+    "autofocus": {
+     "type": "boolean",
+     "forwarded": true,
+     "description": "Focuses the input on mount."
     },
     "autocomplete": {
      "type": "string",
@@ -7428,6 +8812,11 @@
      "default": true,
      "description": "Show the \"Forgot password?\" link."
     },
+    "showRemember": {
+     "type": "boolean",
+     "default": true,
+     "description": "Show the \"Remember device\" checkbox. Hide it when your backend has no such option; the submit payload then keeps remember: true."
+    },
     "submitLabel": {
      "type": "string",
      "default": "Sign in",
@@ -10266,9 +11655,261 @@
      "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\")."
+     "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": "",
+     "description": "Accessible description of the main image."
+    },
+    "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": "{ photo?: string }",
+     "default": "{ photo: 'Photo' }",
+     "description": "Override the thumbnail aria-label prefix."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Thumbnail strip size."
+    }
+   },
+   "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.",
+   "props": {
+    "items": {
+     "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'",
@@ -10280,102 +11921,199 @@
       "xl"
      ],
      "default": "md",
-     "description": "Scale of button size 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 clicked page number (also from the previous and next buttons)."
+    "change": "Called with the new slide index on arrow, dot, keyboard (left and right arrows) and autoplay changes."
    },
    "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\"."
+    "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": "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": "Map",
+   "tag": "UiMap",
+   "group": "media",
+   "description": "Interactive raster map with panning, zoom buttons and clickable markers, using OpenStreetMap data via CARTO tiles.",
    "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."
+    "lat": {
+     "type": "number",
+     "default": 21.4225,
+     "description": "Initial center latitude."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+    "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": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
+      "light",
+      "dark"
      ],
-     "default": "md",
-     "description": "Scale of header padding and text."
+     "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": [
-    "Open state is internal and single: opening one closes the others, all start closed."
+    "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": "Avatar",
-   "tag": "UiAvatar",
+   "name": "ProfileHeader",
+   "tag": "UiProfileHeader",
    "group": "media",
-   "description": "Round user picture that falls back to initials when there is no image.",
+   "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."
     },
-    "status": {
-     "type": "'online' | 'offline' | 'away' | 'busy'",
-     "values": [
-      "online",
-      "offline",
-      "away",
-      "busy"
-     ],
-     "description": "Shows a presence dot in the bottom corner."
+    "title": {
+     "type": "string",
+     "default": "Assistant",
+     "description": "Header title; also the aria-label. The header renders only when set."
+    },
+    "subtitle": {
+     "type": "string",
+     "description": "Muted text next to the title."
+    },
+    "placeholder": {
+     "type": "string",
+     "default": "Ask anything…",
+     "description": "Input placeholder."
+    }
+   },
+   "events": {
+    "send": "Called with the trimmed message text when the user presses Enter or the send button. The component does not append it to messages."
+   },
+   "notes": [
+    "Append the user message and the reply to messages yourself; set loading while waiting."
+   ]
+  },
+  {
+   "name": "HotelCard",
+   "tag": "UiHotelCard",
+   "group": "domain",
+   "description": "Hotel listing card with photo, tags, stars, distance, rating and nightly price; use in catalogs and search results.",
+   "props": {
+    "name": {
+     "type": "string",
+     "required": true,
+     "description": "Hotel name."
+    },
+    "image": {
+     "type": "string",
+     "description": "Photo URL, used as the card background image."
+    },
+    "tags": {
+     "type": "string[]",
+     "default": "[]",
+     "description": "Brand badges over the photo, e.g. \"Haram view\"."
+    },
+    "stars": {
+     "type": "number",
+     "default": 0,
+     "description": "Star class 0-5, rendered as repeated stars."
+    },
+    "distance": {
+     "type": "string",
+     "description": "Distance caption next to the stars, e.g. \"120 m to the Haram\"."
+    },
+    "rating": {
+     "type": "string | number",
+     "description": "Guest rating shown in a green badge, e.g. 9.2."
+    },
+    "price": {
+     "type": "number",
+     "description": "Price per unit, formatted with thousand separators; the currency label is fixed to SAR."
+    },
+    "night": {
+     "type": "string",
+     "default": "night",
+     "description": "Unit after \"SAR /\", e.g. \"night\"."
     },
     "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number",
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
       "xs",
       "sm",
@@ -10384,26 +12122,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",
@@ -10412,66 +12169,56 @@
       "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.",
+   "name": "PrayerTimes",
+   "tag": "UiPrayerTimes",
+   "group": "domain",
+   "description": "Row of daily prayer times with the upcoming prayer highlighted.",
    "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\"."
+    "items": {
+     "type": "{ name: string; time: string }[]",
+     "default": "[]",
+     "description": "Prayers in display order; time is shown as-is, e.g. \"05:12\"."
     },
-    "rounded": {
+    "next": {
      "type": "number",
-     "default": 20,
-     "description": "Corner radius in px."
+     "description": "Index in items of the next prayer; sets aria-current on it."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Scales padding, text and avatars."
     }
    }
   },
   {
-   "name": "Gallery",
-   "tag": "UiGallery",
-   "group": "media",
-   "description": "Large image with a counter and a thumbnail strip for browsing a set of photos.",
+   "name": "RamadanTracker",
+   "tag": "UiRamadanTracker",
+   "group": "domain",
+   "description": "Thirty-day Ramadan progress strip; the last ten days and odd nights are marked.",
    "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."
-    },
-    "index": {
+    "day": {
      "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."
+     "required": true,
+     "description": "Current day 1-30. Earlier days render as past, later days as upcoming."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -10483,47 +12230,36 @@
       "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."
+    "Exposed as role=\"img\" with aria-label \"Day N of 30\"."
    ]
   },
   {
-   "name": "Carousel",
-   "tag": "UiCarousel",
-   "group": "media",
-   "description": "Slideshow of image slides with captions, arrows and dot pagination.",
+   "name": "QiblaCompass",
+   "tag": "UiQiblaCompass",
+   "group": "domain",
+   "description": "Compass dial with a Kaaba marker pointing to the Qibla and the bearing in degrees below it.",
    "props": {
-    "items": {
-     "type": "{ image?: string; title: string; sub?: string }[]",
+    "bearing": {
+     "type": "number",
      "required": true,
-     "default": [],
-     "description": "Slides. title and sub form the caption over the image."
+     "default": 0,
+     "description": "Qibla bearing in degrees clockwise from true north, 0 to 360; other values wrap."
     },
-    "index": {
+    "heading": {
      "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."
+     "default": 0,
+     "description": "Direction the device points to, in degrees. The dial turns against it so the marker follows the real Qibla; 0 keeps north up."
     },
-    "label": {
+    "distance": {
      "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."
+     "description": "Optional small caption under the bearing, such as \"4 210 km to the Kaaba\"."
     },
     "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number",
      "values": [
       "xs",
       "sm",
@@ -10532,196 +12268,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": "Diameter: xs 120, sm 160, md 200, lg 250, xl 300 px; a number is used as px."
     }
    },
-   "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 a label that states the bearing. Compute the bearing and heading yourself (geolocation and DeviceOrientation); the component only draws them."
    ]
   },
   {
-   "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."
+    "code": {
+     "type": "string",
+     "required": true,
+     "description": "Booking reference, monospaced."
     },
-    "lon": {
-     "type": "number",
-     "default": 39.8262,
-     "description": "Initial center longitude."
+    "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."
     },
-    "zoom": {
-     "type": "number",
-     "default": 14,
-     "description": "Initial zoom level; the zoom buttons clamp it to 3..18."
+    "guest": {
+     "type": "string",
+     "description": "Guest name, also drives the avatar initials."
     },
-    "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\"."
+    "hotel": {
+     "type": "string",
+     "description": "Hotel name under the guest."
     },
-    "width": {
-     "type": "number",
-     "default": 640,
-     "description": "Pixel width used to compute which tiles to load; the map element itself fills its container."
+    "dates": {
+     "type": "string",
+     "description": "Preformatted date range, e.g. \"12-19 Mar\"."
     },
-    "height": {
+    "amount": {
      "type": "number",
-     "default": 360,
-     "description": "Height in px."
+     "description": "Total, formatted as \"SAR 1 200\"."
     },
-    "theme": {
-     "type": "'light' | 'dark'",
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
      "values": [
-      "light",
-      "dark"
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
      ],
-     "description": "Tile theme. If omitted, dark is used when the page is inside a dark data-theme."
-    },
-    "style": {
-     "type": "string",
-     "description": "CARTO tile style path, for example \"light_all\" or \"dark_all\". Overrides theme."
-    },
-    "label": {
-     "type": "string",
-     "default": "Map",
-     "description": "aria-label of the map region."
-    },
-    "labels": {
-     "type": "{ zoomIn?: string; zoomOut?: string }",
-     "default": "{ zoomIn: 'Zoom in', zoomOut: 'Zoom out' }",
-     "description": "Accessible names of the zoom buttons."
+     "default": "md",
+     "description": "Scales padding, text and avatars."
     }
-   },
-   "events": {
-    "select": "Called with the marker object when a marker is clicked.",
-    "move": "Called with { lat, lon, zoom } while the user pans or zooms (drag, touch, wheel, double click or the +/- buttons).",
-    "zoom": "Called with the new zoom level when it changes."
-   },
-   "notes": [
-    "The center and zoom props are initial values; user panning and zooming is kept in internal state. Listen to move/zoom to track it.",
-    "Drag or touch to pan, wheel or double click to zoom around the pointer. The tile theme follows the page data-theme after mount (light tiles on the server render) unless theme or style is set.",
-    "Tiles come from a third-party CDN, so it needs network access."
-   ]
+   }
   },
   {
-   "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'",
@@ -10737,38 +12434,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'",
@@ -10782,29 +12488,52 @@
      "default": "md",
      "description": "Scales padding, text and avatars."
     }
-   },
-   "slots": {
-    "actions": "Footer actions, usually Buttons."
-   },
-   "notes": [
-    "A fixed \"360°\" badge is always shown.",
-    "With seats = 0 or missing the bar is empty (0%) and the meta reads \"0/0\"."
-   ]
+   }
   },
   {
-   "name": "PrayerTimes",
-   "tag": "UiPrayerTimes",
+   "name": "DealCard",
+   "tag": "UiDealCard",
    "group": "domain",
-   "description": "Row of daily prayer times with the upcoming prayer highlighted.",
+   "description": "CRM deal card with stage badge, amount, win probability and owner; the card type inside PipelineBoard.",
    "props": {
-    "items": {
-     "type": "{ name: string; time: string }[]",
-     "default": "[]",
-     "description": "Prayers in display order; time is shown as-is, e.g. \"05:12\"."
+    "title": {
+     "type": "string",
+     "required": true,
+     "description": "Deal title."
     },
-    "next": {
+    "stage": {
+     "type": "string",
+     "description": "Stage badge text; no badge when omitted."
+    },
+    "tone": {
+     "type": "'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'",
+     "values": [
+      "default",
+      "brand",
+      "success",
+      "warning",
+      "danger",
+      "info"
+     ],
+     "default": "info",
+     "description": "Badge tone for the stage."
+    },
+    "amount": {
+     "type": "string | number",
+     "description": "Large amount, rendered as given."
+    },
+    "probability": {
      "type": "number",
-     "description": "Index in items of the next prayer; sets aria-current on it."
+     "default": 0,
+     "description": "Win probability 0-100, shown as a progress bar and percent."
+    },
+    "owner": {
+     "type": "string",
+     "description": "Owner name with avatar."
+    },
+    "due": {
+     "type": "string",
+     "description": "Due date caption, right aligned."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -10821,15 +12550,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'",
@@ -10844,45 +12573,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'",
@@ -10896,36 +12629,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'",
@@ -10939,23 +12662,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."
+    },
+    "tag": {
+     "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."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -10970,28 +12711,37 @@
      "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."
-   ]
+   "slots": {
+    "default": "Extra content between the subtitle and the tag. React passes it as children."
+   }
   },
   {
-   "name": "RoomCalendar",
-   "tag": "UiRoomCalendar",
+   "name": "CallRow",
+   "tag": "UiCallRow",
    "group": "domain",
-   "description": "Gantt-style occupancy calendar: rooms as rows, days as columns, bookings as bars.",
+   "description": "One-line call log row with avatar, status, duration and a play button.",
    "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."
+    "name": {
+     "type": "string",
+     "required": true,
+     "description": "Caller name."
     },
-    "days": {
+    "status": {
+     "type": "string",
+     "description": "Status text before the duration, e.g. \"Answered\"."
+    },
+    "duration": {
      "type": "number",
-     "default": 14,
-     "description": "Number of day columns, labelled 1..days."
+     "description": "Duration in seconds, formatted as \"3 m 05 s\" (units from durUnits); shows a dash when missing."
+    },
+    "durUnits": {
+     "type": "{ m?: string; s?: string }",
+     "default": "{ m: 'm', s: 's' }",
+     "description": "Minute and second unit labels for localized durations, e.g. { m: \"min\", s: \"sec\" }."
+    },
+    "labels": {
+     "type": "{ play?: string }",
+     "description": "Override built-in English strings. play is the aria-label of the play button."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -11006,48 +12756,57 @@
      "description": "Scales padding, text and avatars."
     }
    },
-   "notes": [
-    "Day headers are plain numbers 1..days; offset them yourself for a month view."
-   ]
+   "events": {
+    "play": "Called with no arguments when the play button is clicked."
+   }
   },
   {
-   "name": "LeadCard",
-   "tag": "UiLeadCard",
+   "name": "CallCard",
+   "tag": "UiCallCard",
    "group": "domain",
-   "description": "CRM lead card with avatar, code, phone and amount.",
+   "description": "Call recording card with status badge, a playback progress bar and duration.",
    "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": {
+    "phone": {
      "type": "string",
-     "description": "Optional badge text, e.g. a source or status."
+     "description": "Phone number."
     },
-    "tone": {
-     "type": "'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'",
+    "status": {
+     "type": "'Answered' | 'Missed' | 'Voicemail' | 'Busy' | 'Declined' | string",
      "values": [
-      "default",
-      "brand",
-      "success",
-      "warning",
-      "danger",
-      "info"
+      "Answered",
+      "Missed",
+      "Voicemail",
+      "Busy",
+      "Declined"
      ],
-     "description": "Badge tone for tag; neutral when omitted."
+     "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."
     },
-    "phone": {
-     "type": "string",
-     "description": "Phone number with a phone icon."
+    "statusTones": {
+     "type": "Record<string, 'success' | 'danger' | 'warning' | 'info' | 'brand'>",
+     "description": "Extra or overriding status to tone mapping, e.g. { \"No answer\": \"warning\" }."
     },
-    "amount": {
-     "type": "string | number",
-     "description": "Amount shown on the right, rendered as given (format it yourself)."
+    "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."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -11061,52 +12820,38 @@
      "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": "IncomingCall",
+   "tag": "UiIncomingCall",
    "group": "domain",
-   "description": "CRM deal card with stage badge, amount, win probability and owner; the card type inside PipelineBoard.",
+   "description": "Glass banner for an incoming call with Decline and Answer buttons.",
    "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."
-    },
-    "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."
+     "description": "Caller number."
     },
-    "owner": {
+    "label": {
      "type": "string",
-     "description": "Owner name with avatar."
+     "default": "Incoming call",
+     "description": "Caption above the name."
     },
-    "due": {
-     "type": "string",
-     "description": "Due date caption, right aligned."
+    "onDecline": {
+     "type": "() => void",
+     "description": "Decline button click."
+    },
+    "onAnswer": {
+     "type": "() => void",
+     "description": "Answer button click."
     },
     "size": {
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -11120,75 +12865,148 @@
      "default": "md",
      "description": "Scales padding, text and avatars."
     }
+   },
+   "events": {
+    "decline": "Decline button clicked.",
+    "answer": "Answer button clicked."
    }
   },
   {
-   "name": "PipelineBoard",
-   "tag": "UiPipelineBoard",
+   "name": "AuthSplit",
+   "tag": "UiAuthSplit",
    "group": "domain",
-   "description": "Horizontally scrolling kanban pipeline of stage columns filled with DealCards.",
+   "description": "Two-column sign-in layout with a brand panel on the left and the form on the right.",
    "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)."
+    "title": {
+     "type": "string",
+     "required": true,
+     "description": "Form heading."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
-     "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
-     ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
+    "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)."
     }
    },
-   "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."
+   "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'",
@@ -11204,408 +13022,407 @@
     }
    },
    "events": {
-    "call": "Called with no arguments when Call is clicked.",
-    "message": "Called with no arguments when Message is clicked."
-   }
+    "select": "A provider button was clicked; payload is \"google\" or \"apple\"."
+   },
+   "notes": [
+    "The kit only renders the buttons. The OAuth flow itself is yours."
+   ]
   },
   {
-   "name": "KanbanColumn",
-   "tag": "UiKanbanColumn",
-   "group": "domain",
-   "description": "Single kanban column with a title, count badge and stacked cards.",
+   "name": "PageDashboard",
+   "tag": "UiPageDashboard",
+   "group": "pages",
+   "description": "Dashboard template: greeting hero, KPI tiles, occupancy chart, sales funnel, top list and activity feed.",
    "props": {
     "title": {
+     "forwarded": true,
      "type": "string",
-     "required": true,
-     "description": "Column heading."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "count": {
-     "type": "number",
-     "description": "Count badge; defaults to the number of children."
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
-     "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
-     ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
    "slots": {
-    "default": "Cards, usually KanbanCard or DealCard. React passes them as children."
-   }
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "hero": "Large greeting/plan block; Card variant=\"inverse\" with Ring and a Button.",
+    "kpis": "Four key figures; KpiTile, StatsCard or KpiInline.",
+    "occupancy": "Per-day occupancy chart; OccupancyChart or MiniChart.",
+    "funnel": "Inquiry-to-payment funnel; SalesFunnel.",
+    "top": "Revenue leaderboard; DataTable with Progress share bars.",
+    "activity": "Recent actions, newest first; Timeline."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "hero and kpis share a row, as do occupancy/funnel and top/activity; they wrap on narrow screens."
+   ]
   },
   {
-   "name": "KanbanCard",
-   "tag": "UiKanbanCard",
-   "group": "domain",
-   "description": "Simple kanban card with title, subtitle, free content and an optional tag.",
+   "name": "PagePatterns",
+   "tag": "UiPagePatterns",
+   "group": "pages",
+   "description": "Showcase template combining twelve recurring dashboard card patterns (banner, strips, stat lines, charts, lists).",
+   "props": {
+    "title": {
+     "forwarded": true,
+     "type": "string",
+     "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 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": "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."
     }
    },
-   "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).",
+    "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": "IncomingCall",
-   "tag": "UiIncomingCall",
-   "group": "domain",
-   "description": "Glass banner for an incoming call with Decline and Answer buttons.",
+   "name": "PageDetail",
+   "tag": "UiPageDetail",
+   "group": "pages",
+   "description": "Detail page template (hotel, tour): gallery, summary, tabs, history and a booking side card.",
    "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).",
+    "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": "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": "PageSettings",
+   "tag": "UiPageSettings",
+   "group": "pages",
+   "description": "Settings template with a section sub-navigation and stacked settings sections.",
    "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).",
+    "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": [
-    "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": "PageUserList",
+   "tag": "UiPageUserList",
+   "group": "pages",
+   "description": "User or customer list template: stats, filters, toolbar, table and a right-hand add/edit drawer.",
    "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\"."
-    },
-    "image": {
-     "type": "string",
-     "description": "URL of the media image. Without it the panel shows an accent gradient."
+     "description": "Caption under the heading."
     },
-    "headline": {
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "stats": "Figures above the table; StatStrip.",
+    "filters": "Filter selects in a card; Select.",
+    "toolbar": "Page size, search, export and Add button; Select, SearchInput, Button.",
+    "table": "Users table with checkboxes and actions; DataTable with UserCell, Chip, IconButton.",
+    "drawer": "Side panel rendered in the side column; Drawer with TextField, Select, Button."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
+  },
+  {
+   "name": "PageProfile",
+   "tag": "UiPageProfile",
+   "group": "pages",
+   "description": "User profile template: cover header, tabs and two columns of about, activity and plan cards.",
+   "props": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "description": "Large text on the media panel (photo and tint)."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "caption": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Small text on the media panel (photo) or inside the glass bar (light, tint)."
+     "description": "Caption under the heading."
     },
-    "quote": {
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "profile": "Cover with avatar, name and meta; ProfileHeader.",
+    "tabs": "Section tabs; PillTabs.",
+    "about": "Left column key-value info; Card with Descriptions.",
+    "activity": "Right column activity feed; Timeline.",
+    "plan": "Right column plan card and upgrade button; Card, Badge, Progress, Button."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need."
+   ]
+  },
+  {
+   "name": "PageForm",
+   "tag": "UiPageForm",
+   "group": "pages",
+   "description": "Create/edit form template: main column, media, side column and header actions.",
+   "props": {
+    "title": {
+     "forwarded": true,
      "type": "string",
-     "description": "Line at the bottom of the media panel; photo only."
-    },
-    "chips": {
-     "type": "string[]",
-     "description": "Pill labels inside the glass bar; light and tint."
-    },
-    "people": {
-     "type": "{ name: string; src?: string }[]",
-     "description": "Avatars: floating on the photo, stacked in the proof pill."
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "proof": {
+    "subtitle": {
+     "forwarded": true,
      "type": "string",
-     "description": "Social-proof title, e.g. \"Join 20k+ users\"; light and tint. Shows the pill under the form."
+     "description": "Caption under the heading."
     },
-    "proofHint": {
-     "type": "string",
-     "description": "Second line of the proof pill."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
    "slots": {
-    "default": "Form fields and buttons. React passes them as children."
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Discard, Save draft and Publish buttons in the top-right of the built-in header; Button. Rendered right-aligned on their own when title is not set.",
+    "main": "Main column cards (info, options); Card, TextField, Textarea.",
+    "media": "Below main; upload dropzone; FileUpload or Gallery.",
+    "side": "Side column cards (price, status, tags); Card, NumberInput, Select, ChipInput."
    },
    "notes": [
-    "logo, footer, image, people are props in both Vue and React. The media panel is hidden below the form on narrow screens (stacks under it)."
+    "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "name": "SocialAuth",
-   "tag": "UiSocialAuth",
-   "group": "domain",
-   "description": "Continue with Google and Apple buttons with an \"or\" divider. Place it under the sign-in form.",
+   "name": "PageOrder",
+   "tag": "UiPageOrder",
+   "group": "pages",
+   "description": "Order/booking details template: status chips, items table, timeline and side info cards.",
    "props": {
-    "providers": {
-     "type": "('google' | 'apple')[]",
-     "default": "['google', 'apple']",
-     "description": "Which buttons to show, in order."
-    },
-    "variant": {
-     "type": "'stack' | 'icons'",
-     "values": [
-      "stack",
-      "icons"
-     ],
-     "default": "stack",
-     "description": "'stack': full-width buttons with a label, one per row. 'icons': a row of square icon buttons."
-    },
-    "divider": {
-     "type": "boolean",
-     "default": "true",
-     "description": "Show the \"or\" line above the buttons."
-    },
-    "labels": {
-     "type": "{ google?: string; apple?: string }",
-     "description": "Provider names inserted into \"Continue with {provider}\"."
+    "title": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
     },
-    "onSelect": {
-     "type": "(provider: 'google' | 'apple') => void",
-     "description": "Called with the clicked provider. Start your OAuth flow here."
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
     },
-    "size": {
-     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
-     "values": [
-      "xs",
-      "sm",
-      "md",
-      "lg",
-      "xl"
-     ],
-     "default": "md",
-     "description": "Scales padding, text and avatars."
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
     }
    },
-   "events": {
-    "select": "A provider button was clicked; payload is \"google\" or \"apple\"."
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "status": "Payment and fulfillment chips; Chip (tone success, warning, danger).",
+    "items": "Items table with totals; DataTable.",
+    "shipping": "Event timeline; Timeline.",
+    "side": "Customer, address and payment cards; UserCell, Descriptions, Button."
    },
    "notes": [
-    "The kit only renders the buttons. The OAuth flow itself is yours."
+    "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "name": "PageDashboard",
-   "tag": "UiPageDashboard",
+   "name": "PageAccount",
+   "tag": "UiPageAccount",
    "group": "pages",
-   "description": "Dashboard template: greeting hero, KPI tiles, occupancy chart, sales funnel, top list and activity feed.",
+   "description": "Account settings template with pill tabs and a swappable panel.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11623,26 +13440,22 @@
      "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."
+   "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."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "hero and kpis share a row, as do occupancy/funnel and top/activity; they wrap on narrow screens."
+    "The template does not switch panels by itself: keep the active tab in your own state (PillTabs v-model) and render only that tab content in the panel slot."
    ]
   },
   {
-   "name": "PagePatterns",
-   "tag": "UiPagePatterns",
+   "name": "PagePricing",
+   "tag": "UiPagePricing",
    "group": "pages",
-   "description": "Showcase template combining twelve recurring dashboard card patterns (banner, strips, stat lines, charts, lists).",
+   "description": "Pricing template: billing-period toggle, plan cards and an FAQ.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11663,27 +13476,19 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "hero": "Large banner; HeroBanner.",
-    "strip": "One card with four metrics; StatStrip with IconTile.",
-    "statlines": "Row of toned stat lines; StatLine (tone brand, sky, success, warning, danger).",
-    "chartcard": "Titled chart with menu and period select; ChartCard with PillSelect and OccupancyChart or MiniChart.",
-    "tiles": "Selectable tiles plus an add tile; TabTiles.",
-    "listrows": "Icon, title and value rows; StatRow.",
-    "countries": "Country amount rows; CountryRow.",
-    "versus": "Two values with a share bar; VersusBar.",
-    "segbar": "Composition bar with legend; SegBar.",
-    "activity": "Timeline of events; Timeline.",
-    "actioncard": "Card with collapse, refresh and close actions; ActionCard."
+    "toggle": "Monthly/annual switch with a savings badge; Switch, Chip.",
+    "plans": "Plan cards, one marked featured; PricingCard.",
+    "faq": "Questions accordion; Accordion."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "name": "PageCrm",
-   "tag": "UiPageCrm",
+   "name": "PageFaq",
+   "tag": "UiPageFaq",
    "group": "pages",
-   "description": "CRM template: summary tiles, filters, pipeline board and call queue.",
+   "description": "Help center template: search, categories, answers accordion and a contact block.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11704,20 +13509,20 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "summary": "Tiles above the board (leads, amount, conversion, overdue); StatsCard or KpiTile.",
-    "filters": "Status tabs, search and period switch; Tabs, SearchInput, SegmentedControl, FilterChips.",
-    "board": "Stage columns with deal cards; PipelineBoard, KanbanColumn, DealCard.",
-    "calls": "Recent call queue; CallRow, CallCard, IncomingCall."
+    "search": "Large search field; SearchInput.",
+    "cats": "Category list on the left; vertical PillTabs.",
+    "answers": "Answers on the right; Accordion.",
+    "contact": "Contact cards below; Card, IconTile, Button."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need."
    ]
   },
   {
-   "name": "PageBookings",
-   "tag": "UiPageBookings",
+   "name": "PageAnalytics",
+   "tag": "UiPageAnalytics",
    "group": "pages",
-   "description": "Bookings list template: stats, toolbar, bulk-action bar, table and pagination.",
+   "description": "Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11738,21 +13543,22 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "stats": "Booking figures for the period; StatsCard.",
-    "toolbar": "Search, quick filters and export menu above the table; SearchInput, FilterChips, Dropdown.",
-    "bulk": "Selection bar shown when rows are selected; Alert with Buttons. Render it conditionally.",
-    "table": "Sortable, selectable table; DataTable.",
-    "pager": "Page numbers below the table; Pagination."
+    "period": "Period presets and compare toggle; SegmentedControl, Select, Switch.",
+    "kpis": "Headline numbers with deltas; KpiTile, StatLine.",
+    "trend": "Main time series; ChartCard with MiniChart.",
+    "breakdown": "Split by channel or country; ChartCard with SegBar and CountryRow.",
+    "table": "Rows behind the numbers; DataTable."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot."
    ]
   },
   {
-   "name": "PageCatalog",
-   "tag": "UiPageCatalog",
+   "name": "PageCalendar",
+   "tag": "UiPageCalendar",
    "group": "pages",
-   "description": "Catalog template with a filter sidebar and a card grid (hotels, tours).",
+   "description": "Calendar template: view switch, time grid, mini calendar and event details.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11773,21 +13579,21 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "filters": "Left filter column (price, rating, services); Slider, Rating, RadioGroup, Checkbox.",
-    "toolbar": "Search, view switch and sort above the grid; SearchInput, ToggleGroup, Select.",
-    "grid": "Responsive grid of cards; HotelCard or TourCard.",
-    "pager": "Pagination at the bottom; Pagination."
+    "toolbar": "SegmentedControl, Button, IconButton.",
+    "grid": "Time grid with events; Card with custom grid, or CalendarView for the month.",
+    "mini": "Month picker; Calendar.",
+    "details": "Selected event; Card, Descriptions, Avatar, Button."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "The filter column is 260 px wide; on phones put filters in a Drawer yourself."
+    "The grid sits beside the mini calendar and details; they stack under 860 px."
    ]
   },
   {
-   "name": "PageDetail",
-   "tag": "UiPageDetail",
+   "name": "PageKanban",
+   "tag": "UiPageKanban",
    "group": "pages",
-   "description": "Detail page template (hotel, tour): gallery, summary, tabs, history and a booking side card.",
+   "description": "Kanban template: filters, task board columns and a card detail panel.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11808,22 +13614,20 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "gallery": "Main photo with thumbnails; Gallery, Carousel, LazyImage.",
-    "summary": "Name, stars, rating, badges; Card with Badge and Rating.",
-    "tabs": "Description, amenities, reviews; Tabs with Descriptions or Accordion.",
-    "history": "What changed (status, notes, price); Timeline.",
-    "booking": "Right-hand booking card with dates, guests, price and CTA; Card, Select, NumberInput, Button."
+    "filters": "SearchInput, FilterChips, Select.",
+    "board": "Columns with cards; KanbanColumn, KanbanCard.",
+    "detail": "Selected card; Card, Descriptions, Checkbox, Timeline."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "gallery, summary, tabs and history are the main column; booking is the side column."
+    "Board scrolls horizontally inside its area; detail goes below it under 860 px."
    ]
   },
   {
-   "name": "PageSettings",
-   "tag": "UiPageSettings",
+   "name": "PageBilling",
+   "tag": "UiPageBilling",
    "group": "pages",
-   "description": "Settings template with a section sub-navigation and stacked settings sections.",
+   "description": "Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11844,21 +13648,22 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "subnav": "Left section menu; SubNav or Tabs.",
-    "profile": "Profile section; SettingsSection with TextField, PhoneInput.",
-    "notifications": "Delivery channels; SettingsSection with Switch.",
-    "integrations": "Service cards (connected, off, error); IntegrationCard.",
-    "danger": "Irreversible actions; Alert, red Button, ConfirmDialog."
+    "plan": "Current plan; Card with Badge and Buttons.",
+    "usage": "Usage meters; Progress.",
+    "invoices": "Invoices; DataTable.",
+    "methods": "Saved cards; Card, IconTile, Badge.",
+    "upgrade": "Upgrade call to action; Card variant=\"inverse\" or PricingCard."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Plan, usage and invoices share the main column; methods and upgrade form the side column."
    ]
   },
   {
-   "name": "PageUserList",
-   "tag": "UiPageUserList",
+   "name": "PageTeam",
+   "tag": "UiPageTeam",
    "group": "pages",
-   "description": "User or customer list template: stats, filters, toolbar, table and a right-hand add/edit drawer.",
+   "description": "Team template: member stats, members table, roles and permissions matrix, and an invite form.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11879,21 +13684,21 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "stats": "Figures above the table; StatStrip.",
-    "filters": "Filter selects in a card; Select.",
-    "toolbar": "Page size, search, export and Add button; Select, SearchInput, Button.",
-    "table": "Users table with checkboxes and actions; DataTable with UserCell, Chip, IconButton.",
-    "drawer": "Side panel rendered in the side column; Drawer with TextField, Select, Button."
+    "stats": "Counters; KpiTile, StatsCard.",
+    "members": "Members; DataTable with UserCell, Select, Badge.",
+    "roles": "Permissions matrix; DataTable with Checkbox cells.",
+    "invite": "Invite form; Card, TextField, Select, Button."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Members and roles share the main column; the invite form is the side column."
    ]
   },
   {
-   "name": "PageProfile",
-   "tag": "UiPageProfile",
+   "name": "PageIntegrations",
+   "tag": "UiPageIntegrations",
    "group": "pages",
-   "description": "User profile template: cover header, tabs and two columns of about, activity and plan cards.",
+   "description": "Integrations template: connection cards, API keys and webhooks.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11914,21 +13719,21 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "profile": "Cover with avatar, name and meta; ProfileHeader.",
-    "tabs": "Section tabs; PillTabs.",
-    "about": "Left column key-value info; Card with Descriptions.",
-    "activity": "Right column activity feed; Timeline.",
-    "plan": "Right column plan card and upgrade button; Card, Badge, Progress, Button."
+    "filters": "SearchInput, FilterChips.",
+    "connections": "IntegrationCard grid.",
+    "keys": "Keys; DataTable with CopyButton and IconButton.",
+    "webhooks": "Webhooks list; Card, Switch, Chip."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Keys and webhooks share a row and wrap on narrow screens."
    ]
   },
   {
-   "name": "PageForm",
-   "tag": "UiPageForm",
+   "name": "PageSearch",
+   "tag": "UiPageSearch",
    "group": "pages",
-   "description": "Create/edit form template: main column, media, side column and header actions.",
+   "description": "Search template: query field, filter sidebar, result groups and an empty state.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11948,20 +13753,22 @@
    },
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
-    "actions": "Discard, Save draft and Publish buttons in the top-right of the built-in header; Button. Rendered right-aligned on their own when title is not set.",
-    "main": "Main column cards (info, options); Card, TextField, Textarea.",
-    "media": "Below main; upload dropzone; FileUpload or Gallery.",
-    "side": "Side column cards (price, status, tags); Card, NumberInput, Select, ChipInput."
+    "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
+    "search": "SearchInput, Tabs.",
+    "filters": "Filters; Card, Checkbox, Select.",
+    "results": "Result groups; Card, Chip, Divider.",
+    "empty": "Shown only when there are no results; EmptyState."
    },
    "notes": [
-    "Place inside AppShell; fill only the slots you need."
+    "Place inside AppShell; fill only the slots you need.",
+    "Filters sit left of the results and stack above them under 860 px. Fill empty only when there are no results."
    ]
   },
   {
-   "name": "PageOrder",
-   "tag": "UiPageOrder",
+   "name": "PageArticle",
+   "tag": "UiPageArticle",
    "group": "pages",
-   "description": "Order/booking details template: status chips, items table, timeline and side info cards.",
+   "description": "Article template: cover, post body, sticky table of contents, share row and related posts.",
    "props": {
     "title": {
      "forwarded": true,
@@ -11982,20 +13789,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).",
-    "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."
+    "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": "PageAccount",
-   "tag": "UiPageAccount",
+   "name": "PageChangelog",
+   "tag": "UiPageChangelog",
    "group": "pages",
-   "description": "Account settings template with pill tabs and a swappable panel.",
+   "description": "Changelog template: release timeline grouped by version with new, fix and improved tags, a filter and a subscribe card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12016,19 +13825,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).",
-    "tabs": "Section tabs (account, security, billing, notifications); PillTabs.",
-    "panel": "Content of the active tab; Card or SettingsSection with Switch and TextField."
+    "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.",
-    "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."
+    "Filters and timeline share the main column; the subscribe card is a sticky side column."
    ]
   },
   {
-   "name": "PagePricing",
-   "tag": "UiPagePricing",
+   "name": "PageHelp",
+   "tag": "UiPageHelp",
    "group": "pages",
-   "description": "Pricing template: billing-period toggle, plan cards and an FAQ.",
+   "description": "Help center home: search, category grid, popular articles and a contact card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12049,19 +13859,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."
+    "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": "PageFaq",
-   "tag": "UiPageFaq",
+   "name": "PageStates",
+   "tag": "UiPageStates",
    "group": "pages",
-   "description": "Help center template: search, categories, answers accordion and a contact block.",
+   "description": "State gallery: empty list, no results, no permission, offline, error with retry, loading and success on one page.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12082,20 +13894,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).",
-    "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."
+    "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."
+    "Place inside AppShell; fill only the slots you need.",
+    "The first six slots sit in two rows of auto-fit cards; success spans the full width."
    ]
   },
   {
-   "name": "PageAnalytics",
-   "tag": "UiPageAnalytics",
+   "name": "PageLegal",
+   "tag": "UiPageLegal",
    "group": "pages",
-   "description": "Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.",
+   "description": "Legal document template: last-updated line, sticky table of contents, numbered sections and a contact card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12116,22 +13932,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).",
-    "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."
+    "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.",
-    "Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot."
+    "The table of contents sits left of the document and stacks above it under 860 px."
    ]
   },
   {
-   "name": "PageCalendar",
-   "tag": "UiPageCalendar",
+   "name": "PageLocations",
+   "tag": "UiPageLocations",
    "group": "pages",
-   "description": "Calendar template: view switch, time grid, mini calendar and event details.",
+   "description": "Locations template: filters, a scrollable list of places and a sticky map panel.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12152,21 +13967,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).",
-    "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."
+    "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.",
-    "The grid sits beside the mini calendar and details; they stack under 860 px."
+    "The list is a fixed-width column left of the map; under 860 px the map goes below the list."
    ]
   },
   {
-   "name": "PageKanban",
-   "tag": "UiPageKanban",
+   "name": "PageBookingFlow",
+   "tag": "UiPageBookingFlow",
    "group": "pages",
-   "description": "Kanban template: filters, task board columns and a card detail panel.",
+   "description": "Booking flow template: stepper, the active step content, back and continue buttons and a sticky summary card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12187,20 +14001,21 @@
    "slots": {
     "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
     "actions": "Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).",
-    "filters": "SearchInput, FilterChips, Select.",
-    "board": "Columns with cards; KanbanColumn, KanbanCard.",
-    "detail": "Selected card; Card, Descriptions, Checkbox, Timeline."
+    "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.",
-    "Board scrolls horizontally inside its area; detail goes below it under 860 px."
+    "Render only the active step in content. The summary stays visible on the right and goes below the step under 860 px."
    ]
   },
   {
-   "name": "PageBilling",
-   "tag": "UiPageBilling",
+   "name": "PageItinerary",
+   "tag": "UiPageItinerary",
    "group": "pages",
-   "description": "Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.",
+   "description": "Itinerary template: day tabs, a timeline of stops for the chosen day, transport and hotel blocks and a sticky trip summary card.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12221,22 +14036,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).",
-    "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."
+    "days": "Day switcher; Tabs or PillTabs.",
+    "timeline": "Stops of the active day with times and places; Card, Timeline, StatRow.",
+    "transport": "Flights, buses and transfers of the day; Card, StatRow.",
+    "hotel": "Where the group stays that night; Card, Badge, IconTile.",
+    "summary": "Trip summary; Card, Descriptions, Progress."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "Plan, usage and invoices share the main column; methods and upgrade form the side column."
+    "Render only the active day in timeline, transport and hotel. The summary stays visible on the right and goes below the day under 860 px."
    ]
   },
   {
-   "name": "PageTeam",
-   "tag": "UiPageTeam",
+   "name": "PagePrayer",
+   "tag": "UiPagePrayer",
    "group": "pages",
-   "description": "Team template: member stats, members table, roles and permissions matrix, and an invite form.",
+   "description": "Prayer times template: a location picker, today's times with the next prayer highlighted, a month table and a sticky Qibla compass.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12257,21 +14072,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": "Counters; KpiTile, StatsCard.",
-    "members": "Members; DataTable with UserCell, Select, Badge.",
-    "roles": "Permissions matrix; DataTable with Checkbox cells.",
-    "invite": "Invite form; Card, TextField, Select, Button."
+    "location": "City and method pickers; Select, PillSelect, SegmentedControl.",
+    "today": "Today's prayers and the countdown to the next one; Card, PrayerTimes.",
+    "month": "Prayer times for the whole month; Card, DataTable.",
+    "qibla": "Qibla direction; Card, QiblaCompass."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "Members and roles share the main column; the invite form is the side column."
+    "The Qibla card stays visible on the right and goes below the times under 860 px."
    ]
   },
   {
-   "name": "PageIntegrations",
-   "tag": "UiPageIntegrations",
+   "name": "PageGroupManager",
+   "tag": "UiPageGroupManager",
    "group": "pages",
-   "description": "Integrations template: connection cards, API keys and webhooks.",
+   "description": "Group manager template: trip summary, pilgrims table with document and visa status, bulk actions, rooming and a sticky payments summary.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12292,21 +14107,23 @@
    "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": "SearchInput, FilterChips.",
-    "connections": "IntegrationCard grid.",
-    "keys": "Keys; DataTable with CopyButton and IconButton.",
-    "webhooks": "Webhooks list; Card, Switch, Chip."
+    "trip": "Trip header with dates, route and counters; Card, StatStrip, Progress.",
+    "toolbar": "Search and status filters; SearchInput, FilterChips.",
+    "bulk": "Actions for the selected pilgrims; Button, Badge.",
+    "pilgrims": "Pilgrims table with documents and visa; Card, DataTable, Badge.",
+    "rooms": "Rooming assignment; Card, RoomGrid.",
+    "payments": "Payments summary and manager contact; Card, Progress, ContactPanel."
    },
    "notes": [
     "Place inside AppShell; fill only the slots you need.",
-    "Keys and webhooks share a row and wrap on narrow screens."
+    "The payments card stays visible on the right and goes below the table under 860 px."
    ]
   },
   {
-   "name": "PageSearch",
-   "tag": "UiPageSearch",
+   "name": "PageTourPublic",
+   "tag": "UiPageTourPublic",
    "group": "pages",
-   "description": "Search template: query field, filter sidebar, result groups and an empty state.",
+   "description": "Public tour page: header, gradient gallery area, highlights, itinerary accordion, included and excluded lists, reviews and a sticky price and booking card. Has no shell and follows the theme.",
    "props": {
     "title": {
      "forwarded": true,
@@ -12327,14 +14144,16 @@
    "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": "SearchInput, Tabs.",
-    "filters": "Filters; Card, Checkbox, Select.",
-    "results": "Result groups; Card, Chip, Divider.",
-    "empty": "Shown only when there are no results; EmptyState."
+    "gallery": "Hero area made of gradients or photos; Gallery, Card.",
+    "highlights": "Key facts and highlights; StatStrip, IconTile.",
+    "itinerary": "Day by day program; Accordion.",
+    "included": "What the price includes and excludes; Card, Descriptions.",
+    "reviews": "Pilgrim reviews; Card, Rating, Avatar.",
+    "booking": "Price, dates, seats and the booking button; Card, Button."
    },
    "notes": [
-    "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."
+    "Render the page on its own, without AppShell: it supplies its own width and padding in your layout.",
+    "The booking card stays visible on the right and goes below the content under 860 px."
    ]
   },
   {