@ziyarago/ui 0.7.0 → 0.8.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.7.0",
+ "version": "0.8.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -276,6 +276,12 @@
     "PagePricing",
     "PageFaq",
     "PageAnalytics",
+    "PageCalendar",
+    "PageKanban",
+    "PageBilling",
+    "PageTeam",
+    "PageIntegrations",
+    "PageSearch",
     "PageNotifications",
     "PageInbox",
     "PageCheckout",
@@ -3382,6 +3388,689 @@
       "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
      }
     ]
+   },
+   {
+    "id": "calendar",
+    "label": "Calendar",
+    "component": "UiPageCalendar",
+    "description": "Schedule: week, day and month switch, event grid, mini calendar and an event details side panel.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "toolbar",
+      "title": "Toolbar",
+      "desc": "View switch, date navigation and filters.",
+      "accepts": [
+       "SegmentedControl",
+       "Button",
+       "IconButton",
+       "Select"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSegmentedControl v-model=\"view\" :items=\"views\" />"
+     },
+     {
+      "id": "grid",
+      "title": "Event grid",
+      "desc": "Week, day or month grid with events.",
+      "accepts": [
+       "CalendarView",
+       "Card"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard padding=\"none\">…grid…</UiCard>"
+     },
+     {
+      "id": "mini",
+      "title": "Mini calendar",
+      "desc": "Small month picker.",
+      "accepts": [
+       "Calendar"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCalendar v-model=\"day\" />"
+     },
+     {
+      "id": "details",
+      "title": "Event details",
+      "desc": "Selected event with time, place, guests and actions.",
+      "accepts": [
+       "Card",
+       "Descriptions",
+       "Avatar",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Hotel check-in\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "kanban",
+    "label": "Kanban",
+    "component": "UiPageKanban",
+    "description": "Task board: columns with cards, filters and a card detail panel.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Search, assignee and label filters.",
+      "accepts": [
+       "SearchInput",
+       "FilterChips",
+       "Select"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiFilterChips v-model=\"f\" :items=\"labels\" />"
+     },
+     {
+      "id": "board",
+      "title": "Board",
+      "desc": "Task columns with cards.",
+      "accepts": [
+       "KanbanColumn",
+       "KanbanCard"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiKanbanColumn title=\"To do\" :count=\"3\">…</UiKanbanColumn>"
+     },
+     {
+      "id": "detail",
+      "title": "Card detail",
+      "desc": "Side panel for the selected card.",
+      "accepts": [
+       "Card",
+       "Descriptions",
+       "Timeline",
+       "Checkbox"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Task\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "billing",
+    "label": "Billing",
+    "component": "UiPageBilling",
+    "description": "Billing: current plan, usage meters, invoices table, payment methods and upgrade.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "plan",
+      "title": "Current plan",
+      "desc": "Plan name, price, renewal date and actions.",
+      "accepts": [
+       "Card",
+       "Badge",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Pro plan\">…</UiCard>"
+     },
+     {
+      "id": "usage",
+      "title": "Usage",
+      "desc": "Meters for seats, storage and requests.",
+      "accepts": [
+       "Progress",
+       "Card"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiProgress :value=\"72\" label=\"Seats\" />"
+     },
+     {
+      "id": "invoices",
+      "title": "Invoices",
+      "desc": "Past invoices with status and download.",
+      "accepts": [
+       "DataTable",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
+     },
+     {
+      "id": "methods",
+      "title": "Payment methods",
+      "desc": "Saved cards with default marker.",
+      "accepts": [
+       "Card",
+       "IconTile",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Payment methods\">…</UiCard>"
+     },
+     {
+      "id": "upgrade",
+      "title": "Upgrade",
+      "desc": "Upsell card for the next plan.",
+      "accepts": [
+       "Card",
+       "PricingCard",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard variant=\"inverse\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "team",
+    "label": "Team",
+    "component": "UiPageTeam",
+    "description": "Team: members table, invite form and a roles and permissions matrix.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "stats",
+      "title": "Summary",
+      "desc": "Seats, pending invites and admins.",
+      "accepts": [
+       "StatsCard",
+       "KpiTile"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiKpiTile label=\"Members\" value=\"12\" />"
+     },
+     {
+      "id": "members",
+      "title": "Members",
+      "desc": "Members table with role and status.",
+      "accepts": [
+       "DataTable",
+       "UserCell",
+       "Select",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
+     },
+     {
+      "id": "roles",
+      "title": "Roles and permissions",
+      "desc": "Matrix of permissions per role.",
+      "accepts": [
+       "DataTable",
+       "Checkbox",
+       "Switch"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"roleCols\" :rows=\"perms\" />"
+     },
+     {
+      "id": "invite",
+      "title": "Invite",
+      "desc": "Email, role and send button.",
+      "accepts": [
+       "Card",
+       "TextField",
+       "Select",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Invite\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "integrations",
+    "label": "Integrations",
+    "component": "UiPageIntegrations",
+    "description": "Integrations: connection cards with status, API keys table with reveal, copy and revoke, and a webhooks list.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Search and category filter.",
+      "accepts": [
+       "SearchInput",
+       "FilterChips"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput v-model=\"q\" />"
+     },
+     {
+      "id": "connections",
+      "title": "Connections",
+      "desc": "Cards with connected, error or off status.",
+      "accepts": [
+       "IntegrationCard"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiIntegrationCard name=\"Telegram\" status=\"connected\" />"
+     },
+     {
+      "id": "keys",
+      "title": "API keys",
+      "desc": "Keys with reveal, copy and revoke.",
+      "accepts": [
+       "DataTable",
+       "CopyButton",
+       "IconButton"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"keys\" />"
+     },
+     {
+      "id": "webhooks",
+      "title": "Webhooks",
+      "desc": "Endpoints with event types and on/off switch.",
+      "accepts": [
+       "Card",
+       "Switch",
+       "Chip"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Webhooks\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "search",
+    "label": "Search results",
+    "component": "UiPageSearch",
+    "description": "Search results: query field, filters, grouped results and an empty state.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "search",
+      "title": "Search field",
+      "desc": "Large query field with tabs for result types.",
+      "accepts": [
+       "SearchInput",
+       "Tabs"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput v-model=\"q\" />"
+     },
+     {
+      "id": "filters",
+      "title": "Filters",
+      "desc": "Sidebar with checkboxes, range and select.",
+      "accepts": [
+       "Card",
+       "Checkbox",
+       "RangeSlider",
+       "Select"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Filters\">…</UiCard>"
+     },
+     {
+      "id": "results",
+      "title": "Results",
+      "desc": "Result groups with titles and counts.",
+      "accepts": [
+       "Card",
+       "Chip",
+       "Divider"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard padding=\"none\">…</UiCard>"
+     },
+     {
+      "id": "empty",
+      "title": "Empty state",
+      "desc": "Shown when nothing matches.",
+      "accepts": [
+       "EmptyState"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiEmptyState icon=\"search-x\" title=\"No results\" />"
+     }
+    ]
    }
   ]
  },
@@ -11438,6 +12127,216 @@
     "Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot."
    ]
   },
+  {
+   "name": "PageCalendar",
+   "tag": "UiPageCalendar",
+   "group": "pages",
+   "description": "Calendar template: view switch, time grid, mini calendar and event details.",
+   "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).",
+    "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 grid sits beside the mini calendar and details; they stack under 860 px."
+   ]
+  },
+  {
+   "name": "PageKanban",
+   "tag": "UiPageKanban",
+   "group": "pages",
+   "description": "Kanban template: filters, task board columns and a card detail 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": "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.",
+    "Board scrolls horizontally inside its area; detail goes below it under 860 px."
+   ]
+  },
+  {
+   "name": "PageBilling",
+   "tag": "UiPageBilling",
+   "group": "pages",
+   "description": "Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.",
+   "props": {
+    "title": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
+    },
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
+    },
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "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."
+   },
+   "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."
+   ]
+  },
+  {
+   "name": "PageTeam",
+   "tag": "UiPageTeam",
+   "group": "pages",
+   "description": "Team template: member stats, members table, roles and permissions matrix, and an invite form.",
+   "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).",
+    "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.",
+    "Members and roles share the main column; the invite form is the side column."
+   ]
+  },
+  {
+   "name": "PageIntegrations",
+   "tag": "UiPageIntegrations",
+   "group": "pages",
+   "description": "Integrations template: connection cards, API keys and webhooks.",
+   "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": "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.",
+    "Keys and webhooks share a row and wrap on narrow screens."
+   ]
+  },
+  {
+   "name": "PageSearch",
+   "tag": "UiPageSearch",
+   "group": "pages",
+   "description": "Search template: query field, filter sidebar, result groups and an empty state.",
+   "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).",
+    "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.",
+    "Filters sit left of the results and stack above them under 860 px. Fill empty only when there are no results."
+   ]
+  },
   {
    "name": "PageNotifications",
    "tag": "UiPageNotifications",