@ziyarago/ui 0.6.1 → 0.7.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.6.1",
+ "version": "0.7.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -275,6 +275,12 @@
     "PageAccount",
     "PagePricing",
     "PageFaq",
+    "PageAnalytics",
+    "PageNotifications",
+    "PageInbox",
+    "PageCheckout",
+    "PageOnboarding",
+    "PageLanding",
     "PageAuth",
     "PageStatus"
    ]
@@ -2648,6 +2654,734 @@
       "use": "<UiAccordion :items=\"faq\" />"
      }
     ]
+   },
+   {
+    "id": "landing",
+    "label": "Landing",
+    "component": "UiPageLanding",
+    "description": "Marketing page: hero, logos, feature grid, social proof, pricing teaser, final call to action and footer.",
+    "shell": false,
+    "slots": [
+     {
+      "id": "hero",
+      "title": "Hero",
+      "desc": "Headline, subtitle and two buttons on a gradient card.",
+      "accepts": [
+       "HeroBanner",
+       "Card",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1 and a short supporting line"
+       }
+      ],
+      "use": "<UiHeroBanner title=\"Plan your Umrah\" cta=\"Get started\" />"
+     },
+     {
+      "id": "logos",
+      "title": "Logo strip",
+      "desc": "Row of partner names under the hero.",
+      "accepts": [
+       "Chip",
+       "Text"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "string[]",
+        "desc": "Partner names"
+       }
+      ],
+      "use": "<UiChip pill>Hilton</UiChip>"
+     },
+     {
+      "id": "features",
+      "title": "Features",
+      "desc": "Grid of icon, title and text cards.",
+      "accepts": [
+       "Card",
+       "IconTile"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{icon,title,text}[]",
+        "desc": "Three to six features"
+       }
+      ],
+      "use": "<UiCard title=\"Offline guides\">…</UiCard>"
+     },
+     {
+      "id": "proof",
+      "title": "Social proof",
+      "desc": "Stats strip and customer quotes.",
+      "accepts": [
+       "StatStrip",
+       "Card",
+       "Avatar"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{value,label}[]",
+        "desc": "Headline numbers"
+       }
+      ],
+      "use": "<UiStatStrip :items=\"stats\" />"
+     },
+     {
+      "id": "pricing",
+      "title": "Pricing teaser",
+      "desc": "Two or three plans with a link to the full pricing page.",
+      "accepts": [
+       "PricingCard",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "plans",
+        "type": "Plan[]",
+        "desc": "Name, price, features"
+       }
+      ],
+      "use": "<UiPricingCard name=\"Plus\" price=\"$4.99\" />"
+     },
+     {
+      "id": "cta",
+      "title": "Call to action",
+      "desc": "Closing block with one primary button.",
+      "accepts": [
+       "Card",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "cta",
+        "type": "string",
+        "desc": "Button label"
+       }
+      ],
+      "use": "<UiCard variant=\"gradient\">…</UiCard>"
+     },
+     {
+      "id": "footer",
+      "title": "Footer",
+      "desc": "Copyright and links.",
+      "accepts": [
+       "Footer"
+      ],
+      "props": [
+       {
+        "name": "links",
+        "type": "{label,href}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiFooter copyright=\"© 2026\" :links=\"links\" />"
+     }
+    ]
+   },
+   {
+    "id": "onboarding",
+    "label": "Onboarding",
+    "component": "UiPageOnboarding",
+    "description": "First-run setup: progress, step content, checklist and side tips.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "progress",
+      "title": "Progress",
+      "desc": "Stepper and overall completion bar.",
+      "accepts": [
+       "Stepper",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "current",
+        "type": "number",
+        "desc": "Index of the active step"
+       }
+      ],
+      "use": "<UiStepper :steps=\"steps\" :current=\"1\" />"
+     },
+     {
+      "id": "steps",
+      "title": "Step content",
+      "desc": "Form or choice for the active step.",
+      "accepts": [
+       "Card",
+       "TextField",
+       "OptionCards",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "step",
+        "type": "number",
+        "desc": "Active step"
+       }
+      ],
+      "use": "<UiCard title=\"Your company\">…</UiCard>"
+     },
+     {
+      "id": "checklist",
+      "title": "Checklist",
+      "desc": "Tasks to finish setup with done marks.",
+      "accepts": [
+       "Card",
+       "Checkbox",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{id,label,done}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCheckbox v-model=\"done\" label=\"Add a hotel\" />"
+     },
+     {
+      "id": "tips",
+      "title": "Tips",
+      "desc": "Side cards with help and a contact link.",
+      "accepts": [
+       "Card",
+       "IconTile",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "tips",
+        "type": "{icon,title,text}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Need help?\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "checkout",
+    "label": "Checkout",
+    "component": "UiPageCheckout",
+    "description": "Checkout: steps, cart items, address, payment method and an order summary.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "steps",
+      "title": "Steps",
+      "desc": "Cart, details, payment, done.",
+      "accepts": [
+       "Stepper"
+      ],
+      "props": [
+       {
+        "name": "current",
+        "type": "number",
+        "desc": ""
+       }
+      ],
+      "use": "<UiStepper :steps=\"steps\" :current=\"1\" />"
+     },
+     {
+      "id": "items",
+      "title": "Cart items",
+      "desc": "Lines with quantity and price.",
+      "accepts": [
+       "Card",
+       "NumberInput",
+       "IconButton"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{title,qty,price}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Your cart\">…</UiCard>"
+     },
+     {
+      "id": "address",
+      "title": "Address",
+      "desc": "Contact and delivery fields.",
+      "accepts": [
+       "Card",
+       "TextField",
+       "Select"
+      ],
+      "props": [
+       {
+        "name": "address",
+        "type": "object",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Address\">…</UiCard>"
+     },
+     {
+      "id": "payment",
+      "title": "Payment",
+      "desc": "Payment method choice and card fields.",
+      "accepts": [
+       "OptionCards",
+       "TextField"
+      ],
+      "props": [
+       {
+        "name": "method",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiOptionCards v-model=\"method\" :options=\"methods\" />"
+     },
+     {
+      "id": "summary",
+      "title": "Order summary",
+      "desc": "Totals, promo code and the pay button.",
+      "accepts": [
+       "Card",
+       "Descriptions",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "total",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Summary\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "inbox",
+    "label": "Inbox",
+    "component": "UiPageInbox",
+    "description": "Conversation list, message thread with composer and a customer panel; stacks on mobile.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Search and folder chips above the list.",
+      "accepts": [
+       "SearchInput",
+       "FilterChips"
+      ],
+      "props": [
+       {
+        "name": "query",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput v-model=\"q\" />"
+     },
+     {
+      "id": "list",
+      "title": "Conversations",
+      "desc": "List of conversations with unread marks.",
+      "accepts": [
+       "Card",
+       "Avatar",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{id,name,preview,time,unread}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "thread",
+      "title": "Thread",
+      "desc": "Messages of the open conversation.",
+      "accepts": [
+       "Card",
+       "Avatar"
+      ],
+      "props": [
+       {
+        "name": "messages",
+        "type": "{from,text,time}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Aziz Karimov\">…</UiCard>"
+     },
+     {
+      "id": "composer",
+      "title": "Composer",
+      "desc": "Reply field and send button.",
+      "accepts": [
+       "Textarea",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "value",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiTextarea v-model=\"reply\" />"
+     },
+     {
+      "id": "customer",
+      "title": "Customer",
+      "desc": "Contact details and tags of the person.",
+      "accepts": [
+       "ContactPanel",
+       "Descriptions",
+       "Tag"
+      ],
+      "props": [
+       {
+        "name": "name",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiContactPanel name=\"Aziz Karimov\" />"
+     }
+    ]
+   },
+   {
+    "id": "notifications",
+    "label": "Notifications",
+    "component": "UiPageNotifications",
+    "description": "Activity feed grouped by day with filters, mark all as read and an empty state.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Filter chips: all, unread, mentions.",
+      "accepts": [
+       "FilterChips",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "value",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiFilterChips v-model=\"f\" :items=\"filters\" />"
+     },
+     {
+      "id": "feed",
+      "title": "Feed",
+      "desc": "Day groups with notification rows.",
+      "accepts": [
+       "Card",
+       "IconTile",
+       "Badge",
+       "Divider"
+      ],
+      "props": [
+       {
+        "name": "groups",
+        "type": "{day,items}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Today\">…</UiCard>"
+     },
+     {
+      "id": "empty",
+      "title": "Empty state",
+      "desc": "Shown when nothing matches or all is read.",
+      "accepts": [
+       "EmptyState"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiEmptyState icon=\"bell-off\" title=\"All caught up\" />"
+     }
+    ]
+   },
+   {
+    "id": "analytics",
+    "label": "Analytics",
+    "component": "UiPageAnalytics",
+    "description": "Reports: period picker, KPI strip, charts, breakdown and a data table with export.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "period",
+      "title": "Period",
+      "desc": "Range presets and compare toggle.",
+      "accepts": [
+       "SegmentedControl",
+       "Select",
+       "Switch"
+      ],
+      "props": [
+       {
+        "name": "value",
+        "type": "string",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSegmentedControl v-model=\"p\" :items=\"periods\" />"
+     },
+     {
+      "id": "kpis",
+      "title": "KPI strip",
+      "desc": "Four headline numbers with deltas.",
+      "accepts": [
+       "KpiTile",
+       "StatLine"
+      ],
+      "props": [
+       {
+        "name": "items",
+        "type": "{label,value,delta}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiKpiTile label=\"Revenue\" value=\"$48k\" delta=\"+8%\" />"
+     },
+     {
+      "id": "trend",
+      "title": "Trend chart",
+      "desc": "Main time series.",
+      "accepts": [
+       "ChartCard",
+       "MiniChart"
+      ],
+      "props": [
+       {
+        "name": "values",
+        "type": "number[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiChartCard title=\"Revenue\">…</UiChartCard>"
+     },
+     {
+      "id": "breakdown",
+      "title": "Breakdown",
+      "desc": "Split by channel or country.",
+      "accepts": [
+       "SegBar",
+       "CountryRow",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "segments",
+        "type": "{label,value}[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSegBar :segments=\"segments\" />"
+     },
+     {
+      "id": "table",
+      "title": "Detail table",
+      "desc": "Rows behind the numbers.",
+      "accepts": [
+       "DataTable"
+      ],
+      "props": [
+       {
+        "name": "rows",
+        "type": "object[]",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
+     }
+    ]
    }
   ]
  },
@@ -10668,6 +11402,202 @@
     "Place inside AppShell; fill only the slots you need."
    ]
   },
+  {
+   "name": "PageAnalytics",
+   "tag": "UiPageAnalytics",
+   "group": "pages",
+   "description": "Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.",
+   "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).",
+    "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.",
+    "Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot."
+   ]
+  },
+  {
+   "name": "PageNotifications",
+   "tag": "UiPageNotifications",
+   "group": "pages",
+   "description": "Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.",
+   "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).",
+    "filters": "Filter chips such as all, unread and mentions; FilterChips.",
+    "feed": "Notification rows grouped by day; Card, IconTile, Badge, Divider.",
+    "empty": "Shown instead of the feed when nothing matches; EmptyState."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "Fill empty only when the feed has no rows. Mark all read goes in the actions slot."
+   ]
+  },
+  {
+   "name": "PageInbox",
+   "tag": "UiPageInbox",
+   "group": "pages",
+   "description": "Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.",
+   "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).",
+    "filters": "Search and folder chips above the list; SearchInput, FilterChips.",
+    "list": "Conversation rows with unread marks; Card, Avatar, Badge.",
+    "thread": "Messages of the open conversation; Card, Avatar.",
+    "composer": "Reply field and send button; Textarea, Button.",
+    "customer": "Customer details; ContactPanel, Descriptions, Tag."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "List, thread and customer panel sit side by side and stack in that order at 860px and below. Keep the selected conversation in your own state."
+   ]
+  },
+  {
+   "name": "PageCheckout",
+   "tag": "UiPageCheckout",
+   "group": "pages",
+   "description": "Checkout template: step indicator, cart items, delivery address, payment and an order summary column.",
+   "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).",
+    "steps": "Checkout steps above the content; Stepper.",
+    "items": "Cart lines with quantity and price; Card with NumberInput.",
+    "address": "Contact and delivery fields; Card with TextField and Select.",
+    "payment": "Payment method and card fields; OptionCards, TextField.",
+    "summary": "Totals, promo code and the pay button; Card, Descriptions, Button."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "Summary sits in the side column and drops below the form on narrow screens."
+   ]
+  },
+  {
+   "name": "PageOnboarding",
+   "tag": "UiPageOnboarding",
+   "group": "pages",
+   "description": "Onboarding template: progress block, active step content, setup checklist and a column of tips.",
+   "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).",
+    "progress": "Stepper and a completion bar above the content; Stepper, Progress.",
+    "steps": "Content of the active step; Card with form fields.",
+    "checklist": "Remaining setup tasks; Card with Checkbox rows.",
+    "tips": "Side column with help cards; Card, IconTile, Button."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "Keep the active step in your own state; the template does not switch steps. Steps and checklist share the main column, tips go to the side and stack below it on narrow screens."
+   ]
+  },
+  {
+   "name": "PageLanding",
+   "tag": "UiPageLanding",
+   "group": "pages",
+   "description": "Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.",
+   "props": {},
+   "slots": {
+    "hero": "Hero block; HeroBanner, Card, Button.",
+    "logos": "Partner row; Chip or Text.",
+    "features": "Feature cards; Card, IconTile.",
+    "proof": "Numbers and quotes; StatStrip, Card, Avatar.",
+    "pricing": "Plan cards; PricingCard.",
+    "cta": "Closing block; Card variant=\"gradient\", Button.",
+    "footer": "Page footer; Footer."
+   },
+   "notes": [
+    "Landing does not use the app shell: render it on its own page. Blocks stack in one column; each block may use its own grid and wraps on narrow screens."
+   ]
+  },
   {
    "name": "PageAuth",
    "tag": "UiPageAuth",