@ziyarago/ui 0.11.0 → 0.12.0

package/dist/llms-full.txt

@@ -2,7 +2,7 @@
 
 > ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 208 components and 40 page templates.
 
-Version 0.11.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.12.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -205,7 +205,7 @@ Props:
 Slots:
 - default: Fields and controls of the section.
 
-## UiLiquidGlass  (layout)
+## UiLiquidGlass  (layout, Pro)
 Frosted liquid-glass panel with adjustable corner radius and blur.
 Props:
 - `radius`: number | string = 24. Corner radius. Numbers are pixels.
@@ -225,7 +225,7 @@ Props:
 Slots:
 - default: Extra content after the links.
 
-## UiSortable  (layout)
+## UiSortable  (layout, Pro)
 Drag-and-drop reorderable list with grip handles and up/down buttons.
 Props:
 - `items` (required): { id?: string | number; label: string }[] = "[]". Items in current order. id is used as the key, falling back to the index.
@@ -290,7 +290,7 @@ Events:
 Notes:
 - For a non-button tag add role and keyboard handling yourself.
 
-## UiFab  (actions)
+## UiFab  (actions, Pro)
 Floating action button for the main action of a screen; extended when a label is given.
 Props:
 - `icon`: string = "plus". Icon name.
@@ -386,7 +386,7 @@ Slots:
 Notes:
 - Badge uses info for blue; Chip and Button use the tone name sky instead.
 
-## UiActionRail  (actions)
+## UiActionRail  (actions, Pro)
 Floating vertical or horizontal rail of icon buttons with a highlighted active item.
 Props:
 - `items` (required): { value?: string; icon?: string; label?: string; separator?: boolean }[] = "[]". Rail entries. An item with separator: true renders a divider instead of a button.
@@ -397,7 +397,7 @@ Events:
 Notes:
 - Items other than the active one are shown as ghost buttons; label is the accessible name.
 
-## UiActionCard  (actions)
+## UiActionCard  (actions, Pro)
 Card with a title and built-in collapse, refresh and remove controls.
 Props:
 - `title` (required): string. Card title.
@@ -415,7 +415,7 @@ Notes:
 - With collapsed set, update it from the collapse event, otherwise the card will not toggle.
 - Removing hides the card until the component is remounted; also remove it from your data on the remove event.
 
-## UiNotificationBell  (actions)
+## UiNotificationBell  (actions, Pro)
 Bell icon button with an unread counter and a dropdown list of notifications.
 Props:
 - `items`: { id: string | number; title: string; message?: string; time?: string; read?: boolean }[] = "[]". Notifications. Items without read: true count as unread and show a dot.
@@ -570,7 +570,7 @@ Events:
 Notes:
 - Sets autocomplete="one-time-code" so mobile keyboards offer the SMS code.
 
-## UiChipInput  (forms)
+## UiChipInput  (forms, Pro)
 Input that turns typed text into removable chips. Use for tags, keywords and email lists.
 Props:
 - `modelValue`: string[] = "[]" [v-model]. Current chips.
@@ -585,7 +585,7 @@ Events:
 Notes:
 - Enter or comma adds a chip, Backspace on empty input removes the last one. Duplicates are ignored.
 
-## UiInlineEdit  (forms)
+## UiInlineEdit  (forms, Pro)
 Text that turns into an input on click. Use for renaming and quick edits without a form.
 Props:
 - `modelValue`: string = "" [v-model]. Current text.
@@ -594,7 +594,7 @@ Props:
 Events:
 - change: Called with the edited text on Enter or on the save button. Escape cancels.
 
-## UiRichEditor  (forms)
+## UiRichEditor  (forms, Pro)
 Rich text editor with a formatting toolbar, built on contenteditable. Use for formatted descriptions and notes.
 Props:
 - `modelValue`: string = "" [v-model]. HTML string.
@@ -641,7 +641,7 @@ Events:
 Notes:
 - The trigger shows "N selected"; the list stays open while picking and closes on outside click or Escape.
 
-## UiGroupedSelect  (forms)
+## UiGroupedSelect  (forms, Pro)
 Single-choice dropdown with option groups under headings. Use for long lists that have natural categories.
 Props:
 - `modelValue`: string | number [v-model]. Value of the selected option.
@@ -675,7 +675,7 @@ Notes:
 - Selecting from the list is the only way to set a value: free text is never emitted.
 - The list closes on outside click and on Escape.
 
-## UiTreeSelect  (forms)
+## UiTreeSelect  (forms, Pro)
 Dropdown with a searchable tree. Use for hierarchical choices such as regions, categories or org units.
 Props:
 - `modelValue`: string | number [v-model]. id of the selected node.
@@ -691,7 +691,7 @@ Notes:
 - Typing in the search box expands all matching branches.
 - The popup closes on outside click and on Escape.
 
-## UiPillSelect  (forms)
+## UiPillSelect  (forms, Pro)
 Small pill-shaped dropdown button. Use for inline filters and sort controls in toolbars.
 Props:
 - `modelValue`: string | number [v-model]. Value of the selected option.
@@ -749,7 +749,7 @@ Props:
 Events:
 - change: Called with the value of the chosen option.
 
-## UiOptionCard  (forms)
+## UiOptionCard  (forms, Pro)
 Selectable card with title, description, price and optional image or icon. Usually rendered by OptionCards.
 Props:
 - `title`: string. Main text.
@@ -763,7 +763,7 @@ Props:
 Events:
 - click: Called when the card is pressed. Toggle checked yourself.
 
-## UiOptionCards  (forms)
+## UiOptionCards  (forms, Pro)
 Grid of selectable OptionCards, single or multiple choice. Use for plans, room types and delivery options.
 Props:
 - `modelValue`: string | number | (string | number)[] [v-model]. Selected value, or an array of values when multiple is true.
@@ -791,7 +791,7 @@ Props:
 Events:
 - change: Called with the new number while dragging.
 
-## UiRangeSlider  (forms)
+## UiRangeSlider  (forms, Pro)
 Two-handle slider for a min-max range. Use for price, duration or date-number filters.
 Props:
 - `modelValue`: [number, number] [v-model]. Tuple [from, to]. Defaults to [min, max].
@@ -815,7 +815,7 @@ Props:
 Events:
 - change: Called with the clicked star count (1..max). Clicking the current value does not reset it.
 
-## UiColorPicker  (forms)
+## UiColorPicker  (forms, Pro)
 Swatch row for choosing a color from presets. Use for tags, labels and theme accents.
 Props:
 - `modelValue`: string [v-model]. Selected color, same string as in presets.
@@ -843,7 +843,7 @@ Events:
 Notes:
 - The event payload is a Date, not a string: convert to ISO yourself if the model is a string.
 
-## UiRangeCalendar  (forms)
+## UiRangeCalendar  (forms, Pro)
 Month grid for picking a date range with hover preview. Use for stays, trips and report periods.
 Props:
 - `modelValue`: [Date | string | number | null, Date | string | number | null] [v-model]. Controlled range [start, end]; either end may be null. Date-only ISO strings are read as local dates. When omitted the selection is kept internally.
@@ -912,7 +912,7 @@ Notes:
 - Click, Enter or Space opens the picker; files can also be dropped onto the zone, which highlights while dragging.
 - Stateless: the component does not list the chosen files, render them yourself.
 
-## UiImageUpload  (forms)
+## UiImageUpload  (forms, Pro)
 Image picker with a live preview, square or circular. Use for avatars, covers and logos.
 Props:
 - `modelValue`: string [v-model]. Image URL or data URL to show before the user picks a new file.
@@ -939,7 +939,7 @@ Slots:
 Notes:
 - Does not link label and control by id: put the control inside a label or pass an aria-label yourself.
 
-## UiValidatedField  (forms)
+## UiValidatedField  (forms, Pro)
 TextField (or PasswordInput) with built-in validation rules. Use for simple client-side validation without a form library.
 Props:
 - `modelValue`: string = "" [v-model]. Current value.
@@ -975,7 +975,7 @@ Notes:
 - Field values live inside the component: read them from the submit payload.
 - Translate the texts with labels; the "email" value holds an email or phone.
 
-## UiStepForm  (forms)
+## UiStepForm  (forms, Pro)
 Multi-step form shell: stepper, current step content and Back/Next buttons. Use for wizards and onboarding.
 Props:
 - `steps`: { label: string; content: VNode }[] = "[]". Steps in order. content is rendered while the step is active.
@@ -986,7 +986,7 @@ Events:
 Notes:
 - The current step is internal; Next never validates, so guard the content yourself.
 
-## UiStepper  (forms)
+## UiStepper  (forms, Pro)
 Horizontal progress indicator with numbered steps. Use to show position in a multi-step flow.
 Props:
 - `steps`: string[] = "[]". Step labels in order.
@@ -1035,7 +1035,7 @@ Notes:
 - Sorting and selection are fully controlled: the table never reorders rows or stores selection.
 - render receives (value, row) and, in React/Vue, the h function as third argument.
 
-## UiDataGroup  (data)
+## UiDataGroup  (data, Pro)
 Table whose rows are collapsed into labeled groups, with optional per-row expandable details.
 Props:
 - `columns` (required): { key: string; label: string; num?: boolean; render?: (value, row) => VNode | string }[] = []. Column definitions, same shape as DataTable without sorting.
@@ -1057,7 +1057,7 @@ Props:
 - `items` (required): { title: string; text?: string; time: string }[] = []. Events from top to bottom. title is bold, text is optional detail, time is the caption.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Dot, spacing and font size.
 
-## UiTreeView  (data)
+## UiTreeView  (data, Pro)
 Expandable tree of nodes for hierarchies such as folders, categories or regions.
 Props:
 - `nodes` (required): { id: string; label: string; icon?: string; children?: Node[] }[] = []. Root nodes. children nest recursively; icon is an icon name. Ids must be unique.
@@ -1068,7 +1068,7 @@ Events:
 Notes:
 - The first level is open by default; deeper levels start collapsed.
 
-## UiCalendarView  (data)
+## UiCalendarView  (data, Pro)
 Month calendar that marks days with events, wrapping Calendar with a list-style events prop.
 Props:
 - `events`: { date: string; label: string }[] = []. Marked days. date is "YYYY-MM-DD"; label shows as the day tooltip.
@@ -1088,7 +1088,7 @@ Props:
 - `variant`: 'brand' | 'inverse'. Filled brand tile or dark inverse tile. Omit for the default glass tile.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Padding and value size.
 
-## UiKpiInline  (data)
+## UiKpiInline  (data, Pro)
 Compact inline metric with a label, value and delta, for toolbars and card headers.
 Props:
 - `label` (required): string. Metric name.
@@ -1106,7 +1106,7 @@ Props:
 - `trend`: 'up' | 'down' = "up". Direction and color of the delta.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Padding and value size.
 
-## UiStatRow  (data)
+## UiStatRow  (data, Pro)
 List row with an icon tile, title, subtitle and a right-aligned value with delta.
 Props:
 - `title` (required): string. Primary text.
@@ -1117,7 +1117,7 @@ Props:
 - `tone`: 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral' = "brand". Color of the icon tile. Unknown values fall back to brand.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number = "md". Row height and icon tile size. Named sizes map to a 28/34/40/48/56 px tile; a number is used as the tile size in px.
 
-## UiStatLine  (data)
+## UiStatLine  (data, Pro)
 Card with a large value, icon tile, label and an accent bar, for a single headline number.
 Props:
 - `label` (required): string. Metric name under the value.
@@ -1127,13 +1127,13 @@ Props:
 - `delta`: string. Change indicator such as "+12%" or "-3.4%". A leading "-" renders as a decrease, anything else as an increase.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number = "md". Icon tile size. Named sizes map to 28/34/40/48/56 px; a number is used in px.
 
-## UiStatStrip  (data)
+## UiStatStrip  (data, Pro)
 Horizontal strip of several icon, value and label stats in one card.
 Props:
 - `items` (required): { icon?: string; tone?: 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral'; value: string | number; label: string }[] = []. Stats shown side by side. tone defaults to brand.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number = "md". Icon tile size. Named sizes map to 30/36/44/52/60 px; a number is used in px.
 
-## UiCountryRow  (data)
+## UiCountryRow  (data, Pro)
 Row with a country code badge, amount, country name and a percentage change.
 Props:
 - `code` (required): string. Short code shown in the circle, such as "UZ".
@@ -1141,7 +1141,7 @@ Props:
 - `amount` (required): string | number. Formatted amount shown in bold.
 - `pct`: string. Percentage change such as "+8%" or "-2%".
 
-## UiVersusBar  (data)
+## UiVersusBar  (data, Pro)
 Head-to-head comparison of two values with a proportional two-color bar.
 Props:
 - `left` (required): { label: string; value: number }. Left side. Its share of the bar is value / (left.value + right.value) in the brand color.
@@ -1150,7 +1150,7 @@ Props:
 Notes:
 - A missing side renders an empty label and 0; with both at 0 the bar is split with no brand share.
 
-## UiSegBar  (data)
+## UiSegBar  (data, Pro)
 Single stacked bar split into proportional segments with a legend, for distributions.
 Props:
 - `segments` (required): { label: string; value: number; color?: string }[] = []. Segments; widths are value / sum of values. color is any CSS color; the default cycles brand, sky, green, amber, red.
@@ -1166,7 +1166,7 @@ Props:
 Notes:
 - The chart is decorative (no axes or values); pair it with a visible number.
 
-## UiChartCard  (data)
+## UiChartCard  (data, Pro)
 Card shell for a chart with title, subtitle and an optional overflow menu; put the chart in the default slot.
 Props:
 - `title` (required): string. Card title.
@@ -1189,23 +1189,23 @@ Props:
 - `valueSize`: number. Percentage font size in px. Defaults to 22% of the diameter.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number = "md". Diameter: xs 72, sm 120, md 180, lg 240, xl 300 px; a number is used as px.
 
-## UiOccupancyChart  (data)
+## UiOccupancyChart  (data, Pro)
 Bar chart of percentages by label, such as hotel occupancy per day or month.
 Props:
 - `values` (required): number[] = []. Percentages from 0 to 100, one per bar. Values above 90 are highlighted in brand color.
 - `labels`: string[] = []. Axis label under each bar, matched by index.
 
-## UiSalesFunnel  (data)
+## UiSalesFunnel  (data, Pro)
 Horizontal funnel of steps with bars scaled to the largest value, for conversion flows.
 Props:
 - `steps` (required): { label: string; value: number }[] = []. Steps from top to bottom. Bars scale to the max value; the last step is highlighted in brand color.
 
-## UiSystemStatus  (data)
+## UiSystemStatus  (data, Pro)
 List of services with a status dot and a value such as uptime or latency.
 Props:
 - `items` (required): { name: string; value: string; state?: 'ok' | 'warn' | 'down' }[] = []. Services. state sets the color: ok green (default), warn amber, down red.
 
-## UiUserCell  (data)
+## UiUserCell  (data, Pro)
 Avatar with a name and optional subtitle, for table cells and lists of people.
 Props:
 - `name` (required): string. Display name, also used for avatar initials.
@@ -1231,7 +1231,7 @@ Props:
 Notes:
 - Focusable (tabindex 0) so the tooltip works from the keyboard; the icon itself is aria-hidden, so put the meaning in tip.
 
-## UiHeroBanner  (data)
+## UiHeroBanner  (data, Pro)
 Wide promotional banner with title, text, a big value, optional action and a background image.
 Props:
 - `title` (required): string. Banner heading.
@@ -1244,7 +1244,7 @@ Slots:
 Events:
 - cta: Called when the call-to-action button is clicked.
 
-## UiTabTiles  (data)
+## UiTabTiles  (data, Pro)
 Row of icon tiles that work as tabs, with an optional add button.
 Props:
 - `items` (required): { value: string; label: string; icon?: string }[] = []. Tiles. icon defaults to circle.
@@ -1256,7 +1256,7 @@ Events:
 Notes:
 - Active state is exposed as aria-pressed on buttons, not as a tablist.
 
-## UiPricingCard  (data)
+## UiPricingCard  (data, Pro)
 Pricing plan card with price, feature list and a select button.
 Props:
 - `name` (required): string. Plan name.
@@ -1270,7 +1270,7 @@ Props:
 Events:
 - select: Called when the button is clicked.
 
-## UiIntegrationCard  (data)
+## UiIntegrationCard  (data, Pro)
 Card for a third-party integration showing its connection status and a connect or manage button.
 Props:
 - `name` (required): string. Integration name.
@@ -1502,7 +1502,7 @@ Events:
 Notes:
 - Open state is internal. The popover closes on outside click and on Escape.
 
-## UiStepDialog  (overlay)
+## UiStepDialog  (overlay, Pro)
 Wide Modal with a vertical step list on the left and Previous/Next buttons; use for multi-step wizards.
 Props:
 - `open`: boolean = false. Shows the dialog when true; renders nothing when false.
@@ -1520,7 +1520,7 @@ Notes:
 - You own the current index: update it in the back and next handlers.
 - Has aria-modal. Escape calls close; on open focus moves into the dialog, Tab is trapped inside it and focus returns to the previously focused element on close.
 
-## UiFullscreenDialog  (overlay)
+## UiFullscreenDialog  (overlay, Pro)
 Full-screen dialog with a close button, title and Save action in the header; use for long editing flows on mobile.
 Props:
 - `open`: boolean = false. Shows the dialog when true; renders nothing when false.
@@ -1550,7 +1550,7 @@ Notes:
 - The handle is decorative: it does not support dragging.
 - There is no close button; always handle close (scrim click and Escape). Escape calls close; on open focus moves into the dialog, Tab is trapped inside it and focus returns to the previously focused element on close.
 
-## UiActionsheet  (overlay)
+## UiActionsheet  (overlay, Pro)
 Bottom sheet with a list of actions and a Cancel button; use for mobile "more actions" menus.
 Props:
 - `open`: boolean = false. Shows the sheet when true; renders nothing when false.
@@ -1572,7 +1572,7 @@ Slots:
 Notes:
 - Open state is internal and toggled by the trigger. The panel closes on outside click and on Escape (focus returns to the trigger).
 
-## UiHoverCard  (overlay)
+## UiHoverCard  (overlay, Pro)
 Rich card shown on hover or keyboard focus of a trigger; use for previews of users, links or entities.
 Props:
 - `trigger`: string | VNode. Content that triggers the card.
@@ -1631,7 +1631,7 @@ Notes:
 - The native context menu is prevented inside the area. Clicking outside, right-clicking again or pressing Escape closes it.
 - The menu is clamped to the viewport using a rough 42 px per row.
 
-## UiCommandBar  (overlay)
+## UiCommandBar  (overlay, Pro)
 Floating glass toolbar of icon buttons; use for selection actions or editor tools.
 Props:
 - `items`: { id: string; icon?: string; label: string; disabled?: boolean; separator?: boolean }[] = "[]". Buttons. label is the tooltip and aria-label, icon defaults to "circle", separator true draws a divider.
@@ -1653,7 +1653,7 @@ Notes:
 - Keyboard: ArrowDown/ArrowUp move the active command (wraps around, aria-selected), Enter runs it, Escape closes. The active item resets to the first one when the query changes.
 - The input receives focus on open and Tab stays inside the dialog. There is no global hotkey; bind Cmd+K yourself.
 
-## UiImageViewer  (overlay)
+## UiImageViewer  (overlay, Pro)
 Full-screen lightbox for one or several images with previous/next buttons and a counter.
 Props:
 - `open`: boolean = false. Shows the viewer when true; renders nothing when false.
@@ -1665,7 +1665,7 @@ Events:
 Notes:
 - Navigation buttons appear only when there is more than one image.
 
-## UiTour  (overlay)
+## UiTour  (overlay, Pro)
 Guided product tour that dims the page, highlights a target element and shows a step popover.
 Props:
 - `open`: boolean = false. Shows the tour when true; renders nothing when false.
@@ -1679,7 +1679,7 @@ Notes:
 - Targets are looked up with document.querySelector and scrolled into view.
 - The internal step resets to 0 whenever the tour closes.
 
-## UiTourPopover  (overlay)
+## UiTourPopover  (overlay, Pro)
 Step card of a tour with title, text, step counter and Back/Next buttons; used by Tour and usable standalone.
 Props:
 - `title`: string. Step heading.
@@ -1691,7 +1691,7 @@ Events:
 - next: Next or Finish button.
 - close: Close icon.
 
-## UiScreensaver  (overlay)
+## UiScreensaver  (overlay, Pro)
 Full-screen idle screen with a large clock, date and the brand mark; show it after inactivity.
 Props:
 - `open`: boolean = false. Shows the screensaver when true; renders nothing when false.
@@ -1832,7 +1832,7 @@ Props:
 - `aspectRatio`: string = "16/9". CSS aspect-ratio value such as "1/1" or "4/3".
 - `rounded`: number = 20. Corner radius in px.
 
-## UiGallery  (media)
+## UiGallery  (media, Pro)
 Large image with a counter and a thumbnail strip for browsing a set of photos.
 Props:
 - `images` (required): string[] = []. Image URLs. The first one is shown initially; clicking a thumbnail switches the main image.
@@ -1845,7 +1845,7 @@ Events:
 Notes:
 - An empty or missing images array renders an empty frame (no counter, no thumbnails). Invalid index values are clamped to the available range.
 
-## UiCarousel  (media)
+## UiCarousel  (media, Pro)
 Slideshow of image slides with captions, arrows and dot pagination.
 Props:
 - `items` (required): { image?: string; title: string; sub?: string }[] = []. Slides. title and sub form the caption over the image.
@@ -1860,7 +1860,7 @@ 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.
 
-## UiMap  (media)
+## UiMap  (media, Pro)
 Interactive raster map with panning, zoom buttons and clickable markers, using OpenStreetMap data via CARTO tiles.
 Props:
 - `lat`: number = 21.4225. Initial center latitude.
@@ -1882,7 +1882,7 @@ Notes:
 - 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.
 
-## UiProfileHeader  (media)
+## UiProfileHeader  (media, Pro)
 Profile card with a cover image, large avatar, name and a row of meta items.
 Props:
 - `name` (required): string. Person or organization name.
@@ -1892,7 +1892,7 @@ Props:
 Slots:
 - default: Extra content on the right of the name row, usually action buttons.
 
-## UiChatAi  (media)
+## UiChatAi  (media, Pro)
 Chat panel with message bubbles, a typing indicator and an input, for AI assistant UIs.
 Props:
 - `messages` (required): { role: 'user' | 'ai'; text: string }[] = []. Conversation in order. Any role other than "user" renders as an assistant bubble.
@@ -1905,7 +1905,7 @@ Events:
 Notes:
 - Append the user message and the reply to messages yourself; set loading while waiting.
 
-## UiHotelCard  (domain)
+## UiHotelCard  (domain, Pro)
 Hotel listing card with photo, tags, stars, distance, rating and nightly price; use in catalogs and search results.
 Props:
 - `name` (required): string. Hotel name.
@@ -1921,7 +1921,7 @@ Notes:
 - Currency is hard-coded to SAR.
 - Wrap in a clickable element yourself; the card has no click handler.
 
-## UiTourCard  (domain)
+## UiTourCard  (domain, Pro)
 Tour or virtual-tour card with session count and a seat-occupancy bar.
 Props:
 - `name` (required): string. Tour title.
@@ -1936,14 +1936,14 @@ Notes:
 - A fixed "360°" badge is always shown.
 - With seats = 0 or missing the bar is empty (0%) and the meta reads "0/0".
 
-## UiPrayerTimes  (domain)
+## UiPrayerTimes  (domain, Pro)
 Row of daily prayer times with the upcoming prayer highlighted.
 Props:
 - `items`: { name: string; time: string }[] = "[]". Prayers in display order; time is shown as-is, e.g. "05:12".
 - `next`: number. Index in items of the next prayer; sets aria-current on it.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scales padding, text and avatars.
 
-## UiRamadanTracker  (domain)
+## UiRamadanTracker  (domain, Pro)
 Thirty-day Ramadan progress strip; the last ten days and odd nights are marked.
 Props:
 - `day` (required): number. Current day 1-30. Earlier days render as past, later days as upcoming.
@@ -1951,7 +1951,7 @@ Props:
 Notes:
 - Exposed as role="img" with aria-label "Day N of 30".
 
-## UiQiblaCompass  (domain)
+## UiQiblaCompass  (domain, Pro)
 Compass dial with a Kaaba marker pointing to the Qibla and the bearing in degrees below it.
 Props:
 - `bearing` (required): number = 0. Qibla bearing in degrees clockwise from true north, 0 to 360; other values wrap.
@@ -1961,7 +1961,7 @@ Props:
 Notes:
 - 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.
 
-## UiBookingCard  (domain)
+## UiBookingCard  (domain, Pro)
 Compact booking summary: code, status, guest, hotel, dates and total.
 Props:
 - `code` (required): string. Booking reference, monospaced.
@@ -1972,7 +1972,7 @@ Props:
 - `amount`: number. Total, formatted as "SAR 1 200".
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scales padding, text and avatars.
 
-## UiGuestCard  (domain)
+## UiGuestCard  (domain, Pro)
 Guest profile card with avatar, country, stay length and tags.
 Props:
 - `name` (required): string. Guest name.
@@ -1982,7 +1982,7 @@ Props:
 - `tags`: string[] = "[]". Preference tags, e.g. "Halal", "Late check-in".
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scales padding, text and avatars.
 
-## UiRoomGrid  (domain)
+## UiRoomGrid  (domain, Pro)
 Tile grid of rooms colored by housekeeping status; use for front-desk room selection.
 Props:
 - `rooms`: { no: string; type: string; status: "occupied" | "clean" | "dirty" | "blocked" }[] = "[]". 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).
@@ -1993,7 +1993,7 @@ Events:
 Notes:
 - Each tile is a button; status is conveyed by color only, so add a legend.
 
-## UiRoomCalendar  (domain)
+## UiRoomCalendar  (domain, Pro)
 Gantt-style occupancy calendar: rooms as rows, days as columns, bookings as bars.
 Props:
 - `rooms`: { no: string; bookings?: { from: number; nights: number; guest: string }[] }[] = "[]". Rooms with their bookings; from is the zero-based day index of check-in, nights its length. guest is the cell tooltip.
@@ -2002,7 +2002,7 @@ Props:
 Notes:
 - Day headers are plain numbers 1..days; offset them yourself for a month view.
 
-## UiLeadCard  (domain)
+## UiLeadCard  (domain, Pro)
 CRM lead card with avatar, code, phone and amount.
 Props:
 - `name` (required): string. Lead name.
@@ -2013,7 +2013,7 @@ Props:
 - `amount`: string | number. Amount shown on the right, rendered as given (format it yourself).
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scales padding, text and avatars.
 
-## UiDealCard  (domain)
+## UiDealCard  (domain, Pro)
 CRM deal card with stage badge, amount, win probability and owner; the card type inside PipelineBoard.
 Props:
 - `title` (required): string. Deal title.
@@ -2025,7 +2025,7 @@ Props:
 - `due`: string. Due date caption, right aligned.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scales padding, text and avatars.
 
-## UiPipelineBoard  (domain)
+## UiPipelineBoard  (domain, Pro)
 Horizontally scrolling kanban pipeline of stage columns filled with DealCards.
 Props:
 - `stages`: { id: string | number; title: string; cards: DealCardProps[] }[] = "[]". 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).
@@ -2037,7 +2037,7 @@ Notes:
 - 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.
 
-## UiContactPanel  (domain)
+## UiContactPanel  (domain, Pro)
 Contact detail card with avatar, role, contact fields and Call / Message buttons.
 Props:
 - `name` (required): string. Contact name.
@@ -2052,7 +2052,7 @@ Events:
 - call: Called with no arguments when Call is clicked.
 - message: Called with no arguments when Message is clicked.
 
-## UiKanbanColumn  (domain)
+## UiKanbanColumn  (domain, Pro)
 Single kanban column with a title, count badge and stacked cards.
 Props:
 - `title` (required): string. Column heading.
@@ -2061,7 +2061,7 @@ Props:
 Slots:
 - default: Cards, usually KanbanCard or DealCard. React passes them as children.
 
-## UiKanbanCard  (domain)
+## UiKanbanCard  (domain, Pro)
 Simple kanban card with title, subtitle, free content and an optional tag.
 Props:
 - `title` (required): string. Card title.
@@ -2072,7 +2072,7 @@ Props:
 Slots:
 - default: Extra content between the subtitle and the tag. React passes it as children.
 
-## UiCallRow  (domain)
+## UiCallRow  (domain, Pro)
 One-line call log row with avatar, status, duration and a play button.
 Props:
 - `name` (required): string. Caller name.
@@ -2084,7 +2084,7 @@ Props:
 Events:
 - play: Called with no arguments when the play button is clicked.
 
-## UiCallCard  (domain)
+## UiCallCard  (domain, Pro)
 Call recording card with status badge, a playback progress bar and duration.
 Props:
 - `name` (required): string. Caller name.
@@ -2099,7 +2099,7 @@ Props:
 Events:
 - play: Called with no arguments when the play button is clicked.
 
-## UiIncomingCall  (domain)
+## UiIncomingCall  (domain, Pro)
 Glass banner for an incoming call with Decline and Answer buttons.
 Props:
 - `name` (required): string. Caller name.
@@ -2124,7 +2124,7 @@ Slots:
 Notes:
 - logo and aside are props in both Vue and React (pass a VNode / element).
 
-## UiAuthShowcase  (domain)
+## UiAuthShowcase  (domain, Pro)
 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:
 - `variant`: 'photo' | 'light' | 'tint' = "photo". '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.
@@ -2178,7 +2178,7 @@ 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.
 
-## UiPagePatterns  (pages)
+## UiPagePatterns  (pages, Pro)
 Showcase template combining twelve recurring dashboard card patterns (banner, strips, stat lines, charts, lists).
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2201,7 +2201,7 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
-## UiPageCrm  (pages)
+## UiPageCrm  (pages, Pro)
 CRM template: summary tiles, filters, pipeline board and call queue.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2217,7 +2217,7 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
-## UiPageBookings  (pages)
+## UiPageBookings  (pages, Pro)
 Bookings list template: stats, toolbar, bulk-action bar, table and pagination.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2234,7 +2234,7 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
-## UiPageCatalog  (pages)
+## UiPageCatalog  (pages, Pro)
 Catalog template with a filter sidebar and a card grid (hotels, tours).
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2251,7 +2251,7 @@ 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.
 
-## UiPageDetail  (pages)
+## UiPageDetail  (pages, Pro)
 Detail page template (hotel, tour): gallery, summary, tabs, history and a booking side card.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2303,7 +2303,7 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
-## UiPageProfile  (pages)
+## UiPageProfile  (pages, Pro)
 User profile template: cover header, tabs and two columns of about, activity and plan cards.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2320,7 +2320,7 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
-## UiPageForm  (pages)
+## UiPageForm  (pages, Pro)
 Create/edit form template: main column, media, side column and header actions.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2335,7 +2335,7 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
-## UiPageOrder  (pages)
+## UiPageOrder  (pages, Pro)
 Order/booking details template: status chips, items table, timeline and side info cards.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2351,7 +2351,7 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
-## UiPageAccount  (pages)
+## UiPageAccount  (pages, Pro)
 Account settings template with pill tabs and a swappable panel.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2381,7 +2381,7 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
-## UiPageFaq  (pages)
+## UiPageFaq  (pages, Pro)
 Help center template: search, categories, answers accordion and a contact block.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2397,7 +2397,7 @@ Slots:
 Notes:
 - Place inside AppShell; fill only the slots you need.
 
-## UiPageAnalytics  (pages)
+## UiPageAnalytics  (pages, Pro)
 Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2415,7 +2415,7 @@ 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.
 
-## UiPageCalendar  (pages)
+## UiPageCalendar  (pages, Pro)
 Calendar template: view switch, time grid, mini calendar and event details.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2432,7 +2432,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - The grid sits beside the mini calendar and details; they stack under 860 px.
 
-## UiPageKanban  (pages)
+## UiPageKanban  (pages, Pro)
 Kanban template: filters, task board columns and a card detail panel.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2448,7 +2448,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - Board scrolls horizontally inside its area; detail goes below it under 860 px.
 
-## UiPageBilling  (pages)
+## UiPageBilling  (pages, Pro)
 Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2466,7 +2466,7 @@ 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.
 
-## UiPageTeam  (pages)
+## UiPageTeam  (pages, Pro)
 Team template: member stats, members table, roles and permissions matrix, and an invite form.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2483,7 +2483,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - Members and roles share the main column; the invite form is the side column.
 
-## UiPageIntegrations  (pages)
+## UiPageIntegrations  (pages, Pro)
 Integrations template: connection cards, API keys and webhooks.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2500,7 +2500,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - Keys and webhooks share a row and wrap on narrow screens.
 
-## UiPageSearch  (pages)
+## UiPageSearch  (pages, Pro)
 Search template: query field, filter sidebar, result groups and an empty state.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2517,7 +2517,7 @@ 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.
 
-## UiPageArticle  (pages)
+## UiPageArticle  (pages, Pro)
 Article template: cover, post body, sticky table of contents, share row and related posts.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2535,7 +2535,7 @@ Notes:
 - 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.
 
-## UiPageChangelog  (pages)
+## UiPageChangelog  (pages, Pro)
 Changelog template: release timeline grouped by version with new, fix and improved tags, a filter and a subscribe card.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2551,7 +2551,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - Filters and timeline share the main column; the subscribe card is a sticky side column.
 
-## UiPageHelp  (pages)
+## UiPageHelp  (pages, Pro)
 Help center home: search, category grid, popular articles and a contact card.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2568,7 +2568,7 @@ Notes:
 - 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.
 
-## UiPageStates  (pages)
+## UiPageStates  (pages, Pro)
 State gallery: empty list, no results, no permission, offline, error with retry, loading and success on one page.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2588,7 +2588,7 @@ Notes:
 - 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.
 
-## UiPageLegal  (pages)
+## UiPageLegal  (pages, Pro)
 Legal document template: last-updated line, sticky table of contents, numbered sections and a contact card.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2605,7 +2605,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - The table of contents sits left of the document and stacks above it under 860 px.
 
-## UiPageLocations  (pages)
+## UiPageLocations  (pages, Pro)
 Locations template: filters, a scrollable list of places and a sticky map panel.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2621,7 +2621,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - The list is a fixed-width column left of the map; under 860 px the map goes below the list.
 
-## UiPageBookingFlow  (pages)
+## UiPageBookingFlow  (pages, Pro)
 Booking flow template: stepper, the active step content, back and continue buttons and a sticky summary card.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2638,7 +2638,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - Render only the active step in content. The summary stays visible on the right and goes below the step under 860 px.
 
-## UiPageItinerary  (pages)
+## UiPageItinerary  (pages, Pro)
 Itinerary template: day tabs, a timeline of stops for the chosen day, transport and hotel blocks and a sticky trip summary card.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2656,7 +2656,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - 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.
 
-## UiPagePrayer  (pages)
+## UiPagePrayer  (pages, Pro)
 Prayer times template: a location picker, today's times with the next prayer highlighted, a month table and a sticky Qibla compass.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2673,7 +2673,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - The Qibla card stays visible on the right and goes below the times under 860 px.
 
-## UiPageGroupManager  (pages)
+## UiPageGroupManager  (pages, Pro)
 Group manager template: trip summary, pilgrims table with document and visa status, bulk actions, rooming and a sticky payments summary.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2692,7 +2692,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - The payments card stays visible on the right and goes below the table under 860 px.
 
-## UiPageTourPublic  (pages)
+## UiPageTourPublic  (pages, Pro)
 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`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2711,7 +2711,7 @@ Notes:
 - 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.
 
-## UiPageNotifications  (pages)
+## UiPageNotifications  (pages, Pro)
 Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2727,7 +2727,7 @@ 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.
 
-## UiPageInbox  (pages)
+## UiPageInbox  (pages, Pro)
 Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2745,7 +2745,7 @@ 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.
 
-## UiPageCheckout  (pages)
+## UiPageCheckout  (pages, Pro)
 Checkout template: step indicator, cart items, delivery address, payment and an order summary column.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2763,7 +2763,7 @@ Notes:
 - Place inside AppShell; fill only the slots you need.
 - Summary sits in the side column and drops below the form on narrow screens.
 
-## UiPageOnboarding  (pages)
+## UiPageOnboarding  (pages, Pro)
 Onboarding template: progress block, active step content, setup checklist and a column of tips.
 Props:
 - `title`: string. Page heading. The built-in header renders only when title is set and the header slot is empty.
@@ -2780,7 +2780,7 @@ 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.
 
-## UiPageLanding  (pages)
+## UiPageLanding  (pages, Pro)
 Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.
 Slots:
 - hero: Hero block; HeroBanner, Card, Button.