@ziyarago/ui 0.0.0-stage → 0.1.0

package/dist/tokens.css

@@ -0,0 +1,48 @@
+/* generated */
+/* @ziyarago/ui · tokens (OKLCH). Theme: [data-theme=dark|light] · Palette: [data-palette=gold|tamam] · Direction: dir=rtl */
+:root,[data-palette="gold"]{--zg-brand:oklch(0.676 0.084 67.4);--zg-brand-hover:oklch(0.73 0.09 67.4);--zg-sky:oklch(0.703 0.09 229.6)}
+[data-palette="tamam"]{--zg-brand:oklch(0.77 0.23 142);--zg-brand-hover:oklch(0.82 0.23 142);--zg-sky:oklch(0.72 0.1 200)}
+:root,[data-theme="dark"]{--zg-pop:oklch(0.262 0.004 17.4);
+  --zg-on-brand:oklch(0.2 0.02 60);
+  --zg-brand-soft:color-mix(in oklch,var(--zg-brand) 22%,transparent);
+  --zg-brand-glow:color-mix(in oklch,var(--zg-brand) 40%,transparent);
+  --zg-brand-text:color-mix(in oklch,var(--zg-brand) 70%,white);
+  --zg-sky-text:oklch(0.8 0.08 226);
+  --zg-bg:oklch(0.216 0.003 17.4);
+  --zg-s1:oklch(1 0 0 / .055);--zg-s2:oklch(1 0 0 / .085);--zg-s3:oklch(1 0 0 / .13);
+  --zg-glass:oklch(0.235 0.006 40 / .92);
+  --zg-stroke:oklch(1 0 0 / .08);
+  --zg-text-1:oklch(0.97 0.004 70);--zg-text-2:oklch(0.82 0.008 70);--zg-text-3:oklch(0.66 0.01 70);
+  --zg-inv-bg:oklch(0.96 0.004 70);--zg-inv-fg:oklch(0.2 0.01 60);
+  --zg-green:oklch(0.76 0.15 150);--zg-amber:oklch(0.8 0.14 80);--zg-red:oklch(0.7 0.18 25);
+  --zg-rim:inset 0 1px 0 oklch(1 0 0 / .16),inset 0 0 0 1px oklch(1 0 0 / .07),inset 0 -1px 0 oklch(0 0 0 / .25);
+  --zg-shadow-1:0 8px 24px oklch(0 0 0 / .28);--zg-shadow-2:0 24px 64px oklch(0 0 0 / .5);
+}
+[data-theme="light"]{--zg-pop:oklch(0.985 0.003 70);
+  --zg-on-brand:oklch(0.2 0.02 60);
+  --zg-brand-text:oklch(0.45 0.07 65);
+  --zg-sky-text:oklch(0.48 0.08 230);
+  --zg-bg:oklch(0.919 0.007 67.6);
+  --zg-s1:oklch(1 0 0 / .62);--zg-s2:oklch(1 0 0 / .74);--zg-s3:oklch(1 0 0 / .88);
+  --zg-glass:oklch(0.975 0.004 70 / .94);
+  --zg-stroke:oklch(0.3 0.02 60 / .15);
+  --zg-text-1:oklch(0.2 0.01 60);--zg-text-2:oklch(0.36 0.012 60);--zg-text-3:oklch(0.47 0.012 60);
+  --zg-inv-bg:oklch(0.22 0.01 60);--zg-inv-fg:oklch(0.97 0.004 70);
+  --zg-green:oklch(0.5 0.14 150);--zg-amber:oklch(0.55 0.13 70);--zg-red:oklch(0.52 0.19 25);
+  --zg-rim:inset 0 1px 0 oklch(1 0 0 / .95),inset 0 0 0 1px oklch(1 0 0 / .45),0 0 0 1px oklch(0.3 0.02 60 / .13);
+  --zg-shadow-1:0 8px 24px oklch(0.4 0.03 60 / .17);--zg-shadow-2:0 24px 64px oklch(0.4 0.03 60 / .22);
+}
+:root{--zg-z-bar:50;--zg-z-pop:60;--zg-z-modal:200;
+  --zg-font:'Manrope','Thmanyah Sans',system-ui,sans-serif;--zg-font-ar:'Thmanyah Sans',system-ui,sans-serif;--zg-font-ar-display:'Thmanyah Serif Display','Thmanyah Sans',serif;--zg-font-ar-text:'Thmanyah Serif Text','Thmanyah Sans',serif;--zg-font-mono:'JetBrains Mono',ui-monospace,monospace;
+  --zg-h-xs:28px;--zg-h-sm:32px;--zg-h-md:40px;--zg-h-lg:48px;--zg-h-xl:56px;
+  --zg-r-card:32px;--zg-r-tile:20px;--zg-ease:cubic-bezier(.2,.8,.2,1);
+}
+[dir="rtl"]{--zg-font:var(--zg-font-ar)}
+
+/* Size scale. Adapters put data-size="xs|sm|md|lg|xl" on a component root when it has a size prop.
+   Component CSS must read these only inside its own [data-size] selector, never in default rules, so sizes do not leak into children. */
+[data-size="xs"]{--zg-sz-h:28px;--zg-sz-fs:12px;--zg-sz-px:10px;--zg-sz-gap:6px;--zg-sz-icon:14px;--zg-sz-pad:10px}
+[data-size="sm"]{--zg-sz-h:32px;--zg-sz-fs:13px;--zg-sz-px:12px;--zg-sz-gap:8px;--zg-sz-icon:16px;--zg-sz-pad:12px}
+[data-size="md"]{--zg-sz-h:40px;--zg-sz-fs:14px;--zg-sz-px:16px;--zg-sz-gap:10px;--zg-sz-icon:18px;--zg-sz-pad:16px}
+[data-size="lg"]{--zg-sz-h:48px;--zg-sz-fs:15px;--zg-sz-px:20px;--zg-sz-gap:12px;--zg-sz-icon:20px;--zg-sz-pad:20px}
+[data-size="xl"]{--zg-sz-h:56px;--zg-sz-fs:16px;--zg-sz-px:24px;--zg-sz-gap:14px;--zg-sz-icon:22px;--zg-sz-pad:24px}

package/package.json

@@ -1,6 +1,120 @@
 {
   "name": "@ziyarago/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "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, 160+ components and 16 page templates.",
+  "keywords": [
+    "ui",
+    "design-system",
+    "components",
+    "vue",
+    "react",
+    "glassmorphism",
+    "rtl",
+    "arabic",
+    "oklch",
+    "umrah",
+    "hajj",
+    "ziyarago",
+    "nuxt"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "author": "ZiyaraGo <dev@ziyarago.com>",
+  "homepage": "https://ziyara.vip",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ziyarago/ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ziyarago/ui/issues"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./src/core/index.js",
+  "module": "./src/core/index.js",
+  "types": "./types/core.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/core.d.ts",
+      "default": "./src/core/index.js"
+    },
+    "./vue": {
+      "types": "./types/vue.d.ts",
+      "default": "./src/vue/index.js"
+    },
+    "./react": {
+      "types": "./types/react.d.ts",
+      "default": "./src/react/index.js"
+    },
+    "./theme": {
+      "types": "./types/theme.d.ts",
+      "default": "./src/theme.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens.json": "./tokens/tokens.json",
+    "./assets/*": "./assets/*",
+    "./package.json": "./package.json",
+    "./nuxt": {
+      "types": "./types/nuxt.d.ts",
+      "default": "./src/nuxt/module.mjs"
+    },
+    "./manifest.json": "./dist/manifest.json",
+    "./llms.txt": "./dist/llms.txt",
+    "./llms-full.txt": "./dist/llms-full.txt",
+    "./meta": {
+      "default": "./src/meta/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "types",
+    "assets",
+    "tokens",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "THIRD_PARTY_NOTICES.md",
+    "src"
+  ],
+  "scripts": {
+    "types": "node scripts/types.mjs",
+    "build": "node scripts/build.mjs && node scripts/types.mjs && node scripts/manifest.mjs",
+    "check": "node scripts/check.mjs && node scripts/check-meta.mjs",
+    "prepack": "npm run build && npm run check",
+    "pack:dry": "npm pack --dry-run"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "@nuxt/kit": ">=3.0.0",
+    "react": ">=18",
+    "vue": ">=3.5"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "@nuxt/kit": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^3.21.11",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/git": "^10.0.1",
+    "conventional-changelog-conventionalcommits": "^9.3.1",
+    "semantic-release": "^24.2.9",
+    "vue": "^3.5.44"
+  }
+}

package/src/catalog.js

@@ -0,0 +1,4 @@
+// Source: ziyarago/glass-ui-kit src/data/componentCatalog.ts (ids + groups). Excluded by scope: AI, Restaurants, Logistics.
+export const CATALOG = [["Accordion","Surfaces"],["AppShell","Layout"],["AuthLayout","Layout"],["Alert","Surfaces"],["Avatar","Data"],["Badge","Data"],["Breadcrumbs","Navigation"],["Button","Actions"],["Card","Surfaces"],["Checkbox","Forms"],["ChipInput","Forms"],["ConfirmDialog","Surfaces"],["ColorPicker","Forms"],["Combobox","Forms"],["CommandPalette","Actions"],["DatePicker","Forms"],["DashboardLayout","Layout"],["DataState","Surfaces"],["Drawer","Surfaces"],["Dropdown","Actions"],["EmptyState","Surfaces"],["FileUpload","Forms"],["Form","Forms"],["Kbd","Data"],["Input","Forms"],["NotificationBell","Actions"],["Menu","Actions"],["Modal","Surfaces"],["Navbar","Navigation"],["Pagination","Navigation"],["Page","Layout"],["MiniChart","Data"],["Progress","Surfaces"],["Radio","Forms"],["SegmentedControl","Forms"],["OtpInput","Forms"],["SearchInput","Forms"],["Select","Forms"],["Slider","Forms"],["Stepper","Navigation"],["Sidebar","Navigation"],["Skeleton","Surfaces"],["StatsCard","Data"],["KpiCard","Data"],["SubNav","Navigation"],["Switch","Forms"],["Table","Data"],["Tabs","Navigation"],["Textarea","Forms"],["Toast","Surfaces"],["Tooltip","Actions"],["CopyButton","Actions"],["Divider","Surfaces"],["Rating","Forms"],["Timeline","Data"],["GroupedSelect","Forms"],["HoverCard","Actions"],["LazyImage","Data"],["LoadingOverlay","Surfaces"],["LoginForm","Forms"],["Carousel","Surfaces"],["CommandBar","Actions"],["PhoneInput","Forms"],["TreeView","Data"],["TreeSelect","Forms"],["Banner","Surfaces"],["Code","Surfaces"],["ImageUpload","Forms"],["Spinner","Surfaces"],["MultiSelect","Forms"],["PasswordInput","Forms"],["ScrollArea","Layout"],["ToggleGroup","Actions"],["ContextMenu","Actions"],["InlineEdit","Forms"],["NumberInput","Forms"],["Popover","Actions"],["Tag","Data"],["TimePicker","Forms"],["Sortable","Data"],["CalendarView","Data"],["Fab","Actions"],["RichTextEditor","Forms"],["PricingCard","Surfaces"],["Kanban","Data"],["SettingsSection","Layout"],["SplitLayout","Layout"],["IntegrationCard","Surfaces"],["ErrorPage","Surfaces"],["IncomingCall","Surfaces"],["Screensaver","Surfaces"],["CallCard","Surfaces"],["AuthPages","Templates"],["SystemStatus","Data"],["CrmDashboard","Templates"],["TourBiDashboard","Templates"],["AdminBiDashboard","Templates"],["StepForm","Forms"],["Icons","Templates"],["Chart","Data"],["Gallery","Surfaces"],["Map","Data"],["Descriptions","Data"],["Popconfirm","Surfaces"],["ChatBubble","Surfaces"],["ConversationList","Surfaces"],["ChunkCard","Data"],["PillTab","Navigation"],["KpiInline","Data"],["ActionRail","Navigation"],["DealCard","CRM"],["PipelineBoard","CRM"],["LeadCard","CRM"],["ContactPanel","CRM"],["ActivityTimeline","CRM"],["SalesFunnel","CRM"],["BookingCard","Hotels"],["GuestCard","Hotels"],["RoomCalendar","Hotels"],["RoomGrid","Hotels"],["OccupancyChart","Hotels"]].map(([id, group]) => ({ id, group }));
+// glass-ui-kit name → @ziyarago/ui name (when different)
+export const ALIAS = { CrmDashboard: 'PageCrm', AuthPages: 'PageAuth', TourBiDashboard: 'PageDashboard', AdminBiDashboard: 'PageDashboard', Icons: 'IconTile', RichTextEditor: 'RichEditor', Input: 'TextField', KpiCard: 'KpiTile', Table: 'DataTable', Sidebar: 'SideNav', Navbar: 'TopNav', Page: 'PageHeader', DashboardLayout: 'AppShell', PillTab: 'SegmentedControl', ActivityTimeline: 'Timeline', Kanban: 'KanbanColumn', Radio: 'RadioGroup', OtpInput: 'CodeInput', Form: 'FormField', ImageUpload: 'FileUpload', Chart: 'MiniChart', Progress: 'Progress' };

package/src/core/components.js

@@ -0,0 +1,124 @@
+// @ziyarago/ui · framework-neutral component definitions.
+// Each component: { state?, render({ h, props, children, slots, state, set }) }.
+// h(tag, props, ...children) is supplied by the Vue / React adapter. No hooks inside.
+import { trap } from './dialog.js';
+export const cx = (...a) => a.filter(Boolean).join(' ');
+export const DZ = { xs: .82, sm: .91, md: 1, lg: 1.12, xl: 1.25 };
+// Shared outside-click / Escape close for popups. Put `ref: ddRef(close)` on the popup element; its parent is the component root
+// (trigger + popup). Listeners attach only in the browser, only while a popup is mounted, and detach when the last one unmounts.
+const ddReg = [];
+const ddPrune = () => { for (let i = ddReg.length - 1; i >= 0; i--) if (!ddReg[i].el.isConnected) ddReg.splice(i, 1); ddSync(); };
+const ddDown = e => { ddPrune(); for (const r of ddReg.slice()) { const root = r.self ? r.el : (r.el.parentElement || r.el); if (!root.contains(e.target)) r.close(); } };
+const ddKey = e => {
+  if (e.key !== 'Escape') return; ddPrune(); const r = ddReg[ddReg.length - 1]; if (!r) return;
+  const root = r.self ? r.el : (r.el.parentElement || r.el);
+  const t = [...root.querySelectorAll('button,input')].find(x => !r.el.contains(x));
+  const ae = document.activeElement; r.close(); if (t && !t.disabled && !(ae && root.contains(ae) && !r.el.contains(ae))) t.focus();
+};
+let ddOn = false;
+const ddSync = () => {
+  if (typeof document === 'undefined') return;
+  if (ddReg.length && !ddOn) { document.addEventListener('pointerdown', ddDown, true); document.addEventListener('keydown', ddKey); ddOn = true; }
+  else if (!ddReg.length && ddOn) { document.removeEventListener('pointerdown', ddDown, true); document.removeEventListener('keydown', ddKey); ddOn = false; }
+};
+export const ddRef = (close, o = {}) => el => {
+  if (typeof document === 'undefined') return;
+  if (el) { const r = ddReg.find(x => x.el === el); if (r) { r.close = close; r.self = !!o.self; } else ddReg.push({ el, close, self: !!o.self }); ddSync(); }
+  else Promise.resolve().then(ddPrune);
+};
+export const dzp = (p, b) => Math.round(b * (DZ[p.size] || 1));
+export const dzf = n => `calc(${n}px*var(--dz,1))`;
+export const dzb = p => ({ xs: 'xs', sm: 'xs', md: 'sm', lg: 'md', xl: 'lg' }[p.size] || 'sm');
+// Icons: Lucide SVGs fetched once, inlined as data-URI masks (works offline after first load; override the base to self-host).
+export let ZG_ICON_BASE = 'https://unpkg.com/lucide-static@0.460.0/icons/';
+export const setIconBase = b => { ZG_ICON_BASE = b.endsWith('/') ? b : b + '/'; };
+const iconCache = {}, iconPending = {};
+const iconUri = svg => 'url("data:image/svg+xml,' + encodeURIComponent(svg.replace(/stroke="currentColor"/g, 'stroke="black"').replace(/currentColor/g, 'black')) + '")';
+const loadIcon = name => {
+  if (iconCache[name] || iconPending[name] || typeof document === 'undefined') return;
+  iconPending[name] = fetch(ZG_ICON_BASE + name + '.svg').then(r => r.text()).then(svg => {
+    iconCache[name] = iconUri(svg);
+    document.querySelectorAll('[data-zg-icon="' + name + '"]').forEach(el => el.style.setProperty('--zg-icon', iconCache[name]));
+  }).catch(() => {});
+};
+export const icon = (h, name, size) => { loadIcon(name); return h('span', { class: 'zg-icon', 'data-zg-icon': name, style: { ...(iconCache[name] ? { '--zg-icon': iconCache[name] } : {}), ...(size ? { width: size + 'px', height: size + 'px' } : {}) }, 'aria-hidden': 'true' }); };
+const fmt = {
+  num: n => (n == null || Number.isNaN(n)) ? '—' : n === -1 ? '∞' : String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, '\u2009'),
+  sar: n => (n == null || Number.isNaN(n)) ? '—' : 'SAR\u00a0' + String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, '\u2009'),
+  dur: (s, u) => { if (s == null || Number.isNaN(+s)) return '—'; s = Math.max(0, Math.round(+s)); const m = Math.floor(s / 60), r = s % 60; return `${m} ${(u && u.m) || 'm'} ${String(r).padStart(2, '0')} ${(u && u.s) || 's'}`; },
+};
+const nav = (h, it, cur, onChange, collapsed) => h('button', { key: it.value, class: 'zg-navitem', 'aria-current': it.value === cur ? 'page' : undefined, title: collapsed ? it.label : undefined, onClick: () => onChange && onChange(it.value) },
+  it.icon ? icon(h, it.icon, 18) : null, h('span', null, it.label), it.count ? h('span', { class: 'zg-navitem__count' }, it.count) : null);
+
+export const components = {
+  Button: { render: ({ h, props: p, children }) => h('button', { type: 'button', class: cx('zg-btn', 'zg-btn--' + (p.variant || 'secondary'), p.size && 'zg-btn--' + p.size, p.block && 'zg-btn--block', p.tone && 'zg-t-' + p.tone), disabled: p.disabled || p.loading, onClick: p.onClick },
+    p.loading ? h('span', { class: 'zg-spin' }) : p.icon ? icon(h, p.icon, 16) : null, ...children, p.iconRight ? icon(h, p.iconRight, 16) : null) },
+  IconButton: { render: ({ h, props: p }) => h('button', { type: 'button', 'aria-label': p.label, class: cx('zg-ibtn', p.size && 'zg-ibtn--' + p.size, p.ghost && 'zg-ibtn--ghost'), onClick: p.onClick }, icon(h, p.icon)) },
+  Badge: { render: ({ h, props: p, children }) => h('span', { class: cx('zg-badge', p.tone && 'zg-badge--' + p.tone) }, p.dot ? h('span', { class: 'zg-badge__dot' }) : null, ...children) },
+  Avatar: { render: ({ h, props: p }) => h('span', { class: 'zg-avatar', style: { '--s': ({ xs: 24, sm: 32, md: 40, lg: 56, xl: 72 }[p.size] || p.size || 40) + 'px' }, title: p.name }, p.src ? h('img', { src: p.src, alt: p.name || '' }) : (p.name || '?').split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase()) },
+  Switch: { render: ({ h, props: p }) => h('button', { type: 'button', role: 'switch', class: 'zg-switch', 'aria-checked': String(!!p.modelValue), disabled: p.disabled, 'aria-disabled': p.disabled ? 'true' : undefined, onClick: () => !p.disabled && p.onChange && p.onChange(!p.modelValue) }, h('span', { class: 'zg-switch__track' }, h('span', { class: 'zg-switch__thumb' })), p.label || null) },
+  Checkbox: { render: ({ h, props: p }) => h('button', { type: 'button', role: 'checkbox', class: 'zg-check', 'aria-checked': String(!!p.modelValue), disabled: p.disabled, 'aria-disabled': p.disabled ? 'true' : undefined, onClick: () => !p.disabled && p.onChange && p.onChange(!p.modelValue) }, h('span', { class: 'zg-check__box' }, p.modelValue ? icon(h, 'check', 14) : null), p.label || null) },
+  SegmentedControl: { render: ({ h, props: p }) => h('div', { class: cx('zg-seg', p.size === 'sm' && 'zg-seg--sm'), role: 'group' }, ...(p.items || []).map(it => h('button', { key: it.value, type: 'button', 'aria-pressed': String(it.value === p.modelValue), onClick: () => p.onChange && p.onChange(it.value) }, it.label))) },
+  Tabs: { render: ({ h, props: p }) => h('div', { class: 'zg-tabs', role: 'tablist' }, ...(p.items || []).map(it => h('button', { key: it.value, role: 'tab', 'aria-selected': String(it.value === p.modelValue), onClick: () => p.onChange && p.onChange(it.value) }, it.label))) },
+  FilterChips: { render: ({ h, props: p }) => { const sel = p.multi ? (p.modelValue || []) : [p.modelValue]; return h('div', { class: 'zg-chips' }, ...(p.items || []).map(it => h('button', { key: it.value, type: 'button', class: 'zg-chip', 'aria-pressed': String(sel.includes(it.value)), onClick: () => { if (!p.onChange) return; p.onChange(p.multi ? (sel.includes(it.value) ? sel.filter(v => v !== it.value) : [...sel, it.value]) : it.value); } }, it.label))); } },
+  TextField: { render: ({ h, props: p }) => h('label', { class: 'zg-field' }, p.label ? h('span', { class: 'zg-label' }, p.label) : null,
+    h('span', { class: cx('zg-input', p.error && 'zg-input--error', p.variant && 'zg-input--' + p.variant, p.density === 'compact' && 'zg-input--compact', p.disabled && 'zg-input--disabled') }, p.icon ? icon(h, p.icon, 18) : null, h('input', { type: p.type || 'text', value: p.modelValue ?? '', placeholder: p.placeholder, disabled: p.disabled, readOnly: p.readonly, onInput: e => p.onChange && p.onChange(e.target.value) }), p.suffix || null),
+    p.error ? h('span', { class: 'zg-hint zg-hint--error', role: 'alert' }, p.error) : p.hint ? h('span', { class: 'zg-hint' }, p.hint) : null) },
+  Select: { state: { open: false }, render: ({ h, props: p, state, set }) => { const cur = (p.options || []).find(o => o.value === p.modelValue), open = state.open && !p.disabled;
+    return h('div', { class: 'zg-field' }, p.label ? h('span', { class: 'zg-label' }, p.label) : null,
+      h('div', { class: 'zg-select' }, h('button', { type: 'button', class: 'zg-btn zg-select__trigger', 'aria-haspopup': 'listbox', 'aria-expanded': String(open), disabled: p.disabled, style: { height: 'var(--zg-h-lg)' }, onClick: () => set({ open: !state.open }) }, h('span', null, cur ? cur.label : p.placeholder || '—'), icon(h, open ? 'chevron-up' : 'chevron-down', 16)),
+        open ? h('div', { class: 'zg-select__list', role: 'listbox', 'data-zg-dd': '', ref: ddRef(() => set({ open: false })) }, ...(p.options || []).map(o => h('button', { key: o.value, type: 'button', role: 'option', class: 'zg-select__opt', disabled: o.disabled, 'aria-disabled': o.disabled ? 'true' : undefined, 'aria-selected': String(o.value === p.modelValue), onClick: () => { set({ open: false }); p.onChange && p.onChange(o.value); } }, o.label, o.value === p.modelValue ? icon(h, 'check', 16) : null))) : null)); } },
+  CodeInput: { render: ({ h, props: p }) => { const n = p.length || 6, v = p.modelValue || '';
+    return h('div', { class: 'zg-code', style: { '--n': n } }, ...Array.from({ length: n }, (_, i) => h('span', { key: i, class: cx('zg-code__cell', i === v.length && 'zg-code__cell--on') }, v[i] || '')),
+      h('input', { value: v, inputMode: 'numeric', autoComplete: 'one-time-code', maxLength: n, 'aria-label': p.label || 'Code', onInput: e => { const x = e.target.value.replace(/\D/g, '').slice(0, n); p.onChange && p.onChange(x); if (x.length === n && v.length !== n) p.onComplete && p.onComplete(x); } })); } },
+  Stepper: { render: ({ h, props: p }) => h('div', { class: 'zg-stepper' }, ...(p.steps || []).flatMap((s, i) => [i ? h('span', { key: 'b' + i, class: 'zg-step__bar' }) : null, h('span', { key: i, class: cx('zg-step', i < p.current && 'zg-step--done', i === p.current && 'zg-step--cur') }, h('span', { class: 'zg-step__n' }, i < p.current ? icon(h, 'check', 14) : i + 1), s)])) },
+  Card: { render: ({ h, props: p, children, slots }) => h('section', { class: cx('zg-card', 'zg-glass', p.variant === 'inverse' && 'zg-card--inverse', p.variant === 'gradient' && 'zg-card--grad', p.variant === 'gradient' && 'zg-card--t-' + (p.tone || 'brand'), p.variant === 'gradient' && p.intensity === 'vivid' && 'zg-card--vivid'), 'data-theme': p.variant === 'inverse' ? 'dark' : (p.variant === 'gradient' && p.intensity === 'vivid' ? (['brand', 'warning', undefined].includes(p.tone) ? 'light' : 'dark') : undefined) },
+    (p.title || slots.actions) ? h('div', { class: 'zg-card__head' }, h('div', { style: { flex: 1, minWidth: 0 } }, h('h3', { class: 'zg-card__title' }, p.title), p.subtitle ? h('div', { class: 'zg-card__sub' }, p.subtitle) : null), slots.actions || null) : null, ...children) },
+  Modal: { render: ({ h, props: p, children, slots }) => { const foot = slots.footer || p.footer; return !p.open ? null : h('div', { class: 'zg-modal-scrim', onClick: p.onClose }, h('div', { class: 'zg-modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': p.title, ref: trap({ onClose: p.onClose }), onClick: e => e.stopPropagation() },
+    h('div', { class: 'zg-modal__head' }, h('h3', null, p.title), h('button', { type: 'button', class: 'zg-ibtn zg-ibtn--sm zg-ibtn--ghost', 'aria-label': 'Close', onClick: p.onClose }, icon(h, 'x'))), h('div', { class: 'zg-modal__body' }, ...children), foot ? h('div', { class: 'zg-modal__foot' }, foot) : null)); } },
+  Drawer: { render: ({ h, props: p, children, slots }) => { const foot = slots.footer || p.footer; return !p.open ? null : h('div', { class: cx('zg-modal-scrim', 'zg-drawer-scrim', 'zg-drawer-scrim--' + (p.side || 'end')), onClick: p.onClose }, h('div', { class: 'zg-modal zg-drawer', role: 'dialog', 'aria-modal': 'true', 'aria-label': p.title, ref: trap({ onClose: p.onClose }), onClick: e => e.stopPropagation() },
+    h('div', { class: 'zg-modal__head' }, h('h3', null, p.title), h('button', { type: 'button', class: 'zg-ibtn zg-ibtn--sm zg-ibtn--ghost', 'aria-label': 'Close', onClick: p.onClose }, icon(h, 'x'))), h('div', { class: 'zg-modal__body' }, ...children), foot ? h('div', { class: 'zg-modal__foot' }, foot) : null)); } },
+  Toast: { render: ({ h, props: p, children }) => h('div', { class: cx('zg-toast', 'zg-toast--' + (p.tone || 'info')), role: 'status' }, h('span', { class: 'zg-toast__icon' }, icon(h, { success: 'check', danger: 'circle-alert', warning: 'triangle-alert' }[p.tone] || 'info', 18)), h('div', null, p.title ? h('b', null, p.title) : null, h('span', null, ...children))) },
+  Breadcrumbs: { render: ({ h, props: p }) => h('nav', { class: 'zg-crumbs', 'aria-label': 'Breadcrumb' }, ...(p.items || []).flatMap((it, i, a) => [i ? icon(h, 'chevron-right', 14) : null, i === a.length - 1 ? h('b', { key: i, 'aria-current': 'page' }, it.label) : h('a', { key: i, href: it.href || '#' }, it.label)])) },
+  Pagination: { render: ({ h, props: p }) => { const total = Math.max(1, Math.floor(+p.pages) || 1), cur = Math.min(total, Math.max(1, +p.page || 1)), s = Math.max(0, p.siblings == null ? 1 : Math.floor(+p.siblings) || 0), go = n => p.onChange && n >= 1 && n <= total && n !== p.page && p.onChange(n);
+    const set = new Set([1, total]); for (let i = cur - s; i <= cur + s; i++) if (i >= 1 && i <= total) set.add(i);
+    const nums = [...set].sort((a, b) => a - b), items = []; nums.forEach((n, i) => { const prev = nums[i - 1]; if (prev && n - prev === 2) items.push(prev + 1); else if (prev && n - prev > 2) items.push('…'); items.push(n); });
+    return h('nav', { class: 'zg-pager', 'aria-label': p.label || 'Pagination' }, h('button', { key: 'prev', type: 'button', class: 'zg-pager__nav', 'aria-label': 'Previous page', disabled: cur <= 1, onClick: () => go(cur - 1) }, icon(h, 'chevron-left', 16)),
+      ...items.map((n, i) => n === '…' ? h('span', { key: 'e' + i, class: 'zg-pager__gap', 'aria-hidden': 'true' }, '…') : h('button', { key: n, type: 'button', 'aria-label': 'Page ' + n, 'aria-current': n === p.page ? 'page' : undefined, onClick: () => go(n) }, n)),
+      h('button', { key: 'next', type: 'button', class: 'zg-pager__nav', 'aria-label': 'Next page', disabled: cur >= total, onClick: () => go(cur + 1) }, icon(h, 'chevron-right', 16))); } },
+  Progress: { render: ({ h, props: p }) => h('div', { class: cx('zg-progress', p.tone && 'zg-progress--' + p.tone) }, (p.label || p.meta) ? h('div', { class: 'zg-progress__row' }, h('span', null, p.label), h('span', { class: 'zg-mono' }, p.meta)) : null, h('div', { class: 'zg-progress__track', role: 'progressbar', 'aria-valuenow': p.value, 'aria-valuemin': 0, 'aria-valuemax': 100 }, h('div', { class: 'zg-progress__bar', style: { width: Math.max(0, Math.min(100, p.value || 0)) + '%' } }))) },
+  Ring: { render: ({ h, props: p }) => { const s = { xs: 72, sm: 120, md: 180, lg: 240, xl: 300 }[p.size] || (Number(p.size) > 0 ? Number(p.size) : 180), th = p.thickness || Math.max(8, Math.round(s * .078)), ticks = p.ticks !== false, v = Math.max(0, Math.min(100, p.value || 0)) / 100, col = p.color || 'var(--zg-brand)';
+    const r = (s - th) / 2 - (ticks ? 12 : 0), cir = 2 * Math.PI * r, tk = [];
+    if (ticks) for (let i = 0; i < 60; i++) { const an = i / 60 * 2 * Math.PI, R = s / 2 - 2, L = i % 5 ? 4 : 8; tk.push(h('line', { key: i, x1: +(s / 2 + Math.cos(an) * R).toFixed(2), y1: +(s / 2 + Math.sin(an) * R).toFixed(2), x2: +(s / 2 + Math.cos(an) * (R - L)).toFixed(2), y2: +(s / 2 + Math.sin(an) * (R - L)).toFixed(2), stroke: i / 60 <= v ? col : 'var(--zg-s3)', 'stroke-width': i % 5 ? 1 : 1.6, 'stroke-linecap': 'round' })); }
+    return h('div', { class: 'zg-ring', style: { width: s + 'px', height: s + 'px' }, role: 'img', 'aria-label': Math.round(v * 100) + '%' }, h('svg', { width: s, height: s, viewBox: `0 0 ${s} ${s}` }, ...tk,
+      h('circle', { cx: s / 2, cy: s / 2, r, fill: 'none', stroke: 'var(--zg-stroke)', 'stroke-width': th }),
+      h('circle', { cx: s / 2, cy: s / 2, r, fill: 'none', stroke: col, 'stroke-width': th, 'stroke-linecap': 'round', 'stroke-dasharray': cir, 'stroke-dashoffset': cir * (1 - v), style: { filter: 'drop-shadow(0 0 10px color-mix(in oklch, ' + col + ' 45%, transparent))', transition: 'stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)' } })),
+      h('div', { class: 'zg-ring__c' }, h('span', { class: 'zg-ring__v', style: { fontSize: (p.valueSize || s * .22) + 'px' } }, Math.round(v * 100), h('span', { style: { fontSize: '.45em', color: 'var(--zg-text-3)' } }, '%')), p.label ? h('span', { class: 'zg-ring__l' }, p.label) : null)); } },
+  KpiTile: { render: ({ h, props: p }) => h('div', { class: cx('zg-kpi', p.variant && 'zg-kpi--' + p.variant) }, h('span', { class: 'zg-kpi__label' }, p.label), h('span', { class: 'zg-kpi__value zg-num' }, p.value), (p.sub || p.delta) ? h('span', { class: 'zg-kpi__sub' }, p.delta ? h('span', { class: cx('zg-delta', String(p.delta).startsWith('-') ? 'zg-delta--down' : 'zg-delta--up') }, p.delta + ' ') : null, p.sub) : null) },
+  DataTable: { render: ({ h, props: p }) => { const cols = p.columns || [], rows = p.rows || [], sel = p.selected || [], all = rows.length && rows.every(r => sel.includes(r.id));
+    const th = c => h('th', { key: c.key, 'aria-sort': p.sortKey === c.key ? (p.sortDir === 'desc' ? 'descending' : 'ascending') : undefined, class: c.num ? 'num' : undefined }, c.sortable ? h('button', { type: 'button', onClick: () => p.onSort && p.onSort(c.key, p.sortKey === c.key && p.sortDir !== 'desc' ? 'desc' : 'asc') }, c.label, p.sortKey === c.key ? icon(h, p.sortDir === 'desc' ? 'arrow-down' : 'arrow-up', 12) : null) : c.label);
+    return h('div', { class: 'zg-table-wrap' }, h('table', { class: 'zg-table' }, h('thead', null, h('tr', null, p.onSelect ? h('th', { style: { width: '44px' } }, h('button', { type: 'button', role: 'checkbox', class: 'zg-check', 'aria-checked': String(!!all), 'aria-label': (p.labels && p.labels.selectAll) || 'Select all', onClick: () => p.onSelect(all ? [] : rows.map(r => r.id)) }, h('span', { class: 'zg-check__box' }, all ? icon(h, 'check', 14) : null))) : null, ...cols.map(th))),
+      h('tbody', null, ...(rows.length ? rows.map(r => h('tr', { key: r.id, 'aria-selected': sel.includes(r.id) ? 'true' : undefined }, p.onSelect ? h('td', null, h('button', { type: 'button', role: 'checkbox', class: 'zg-check', 'aria-checked': String(sel.includes(r.id)), 'aria-label': (p.labels && p.labels.selectRow) || 'Select row', onClick: () => p.onSelect(sel.includes(r.id) ? sel.filter(i => i !== r.id) : [...sel, r.id]) }, h('span', { class: 'zg-check__box' }, sel.includes(r.id) ? icon(h, 'check', 14) : null))) : null, ...cols.map(c => h('td', { key: c.key, class: c.num ? 'num' : undefined }, c.render ? c.render(r[c.key], r, h) : (r[c.key] ?? '—'))))) : [h('tr', { key: 'e' }, h('td', { colSpan: cols.length + 1 }, h('div', { class: 'zg-empty' }, p.empty || '—')))])))); } },
+  KanbanColumn: { render: ({ h, props: p, children }) => h('div', { class: 'zg-kcol zg-dm' }, h('div', { class: 'zg-kcol__head' }, p.title, h('span', { class: 'zg-badge' }, p.count ?? children.length)), ...children) },
+  KanbanCard: { render: ({ h, props: p, children }) => h('div', { class: 'zg-kcard zg-dm' }, h('b', { style: { fontSize: dzf(14) } }, p.title), p.sub ? h('span', { class: 'zg-hint' }, p.sub) : null, ...children, p.tag ? h('span', { class: cx('zg-badge', p.tone && 'zg-badge--' + p.tone), style: { alignSelf: 'flex-start' } }, p.tag) : null) },
+  Timeline: { render: ({ h, props: p }) => h('div', { class: 'zg-timeline' }, ...(p.items || []).map((it, i, a) => h('div', { key: i, class: 'zg-tl' }, h('div', { class: 'zg-tl__rail' }, h('span', { class: 'zg-tl__dot' }), i < a.length - 1 ? h('span', { class: 'zg-tl__line' }) : null), h('div', { class: 'zg-tl__body' }, h('b', null, it.title), it.text ? h('span', null, it.text) : null, h('span', { class: 'zg-tl__time' }, it.time))))) },
+  TopNav: { render: ({ h, props: p, slots }) => h('header', { class: 'zg-topnav' }, h('div', { class: 'zg-topnav__brand' }, p.brand), h('nav', { class: 'zg-topnav__items', 'aria-label': 'Main' }, ...(p.items || []).map(it => nav(h, it, p.value, p.onChange))), h('div', { class: 'zg-topnav__actions' }, slots.actions || p.actions || null)) },
+  SideNav: { render: ({ h, props: p, slots }) => h('aside', { class: cx('zg-sidenav', p.collapsed && 'zg-sidenav--collapsed') }, h('div', { class: 'zg-sidenav__brand' }, p.brand), ...(p.items || []).map(it => it.group ? h('div', { key: it.group, class: 'zg-sidenav__group', style: p.collapsed ? { display: 'none' } : undefined }, it.group) : nav(h, it, p.value, p.onChange, p.collapsed)), h('div', { class: 'zg-sidenav__sp' }), slots.footer || p.footer || null,
+    p.onToggle ? h('button', { type: 'button', class: 'zg-navitem', onClick: p.onToggle, 'aria-label': 'Toggle sidebar' }, icon(h, p.collapsed ? 'panel-left-open' : 'panel-left-close', 18), h('span', null, p.collapseLabel || 'Collapse')) : null) },
+  AppShell: { state: { collapsed: false }, render: ({ C, h, props: p, children, slots, state, set }) => {
+    const brand = p.brand, top = (p.nav || 'top') === 'top', col = p.collapsed ?? state.collapsed, toggle = () => p.onCollapse ? p.onCollapse(!col) : set({ collapsed: !state.collapsed });
+    return h('div', { class: cx('zg-root', 'zg-shell', top && 'zg-shell--top', p.frame && 'zg-shell--frame'), style: { background: 'var(--zg-bg)' } },
+      top ? h(C.TopNav, { brand, items: p.items, value: p.value, onChange: p.onChange, actions: p.actions }, null) : h(C.SideNav, { brand, items: p.items, value: p.value, onChange: p.onChange, collapsed: col, onToggle: p.collapsible !== false ? toggle : undefined, footer: slots.footer, collapseLabel: p.collapseLabel }),
+      h('main', { class: 'zg-shell__main' }, ...children)); } },
+  PageHeader: { render: ({ C, h, props: p, slots }) => h('div', { class: 'zg-page-head' }, h('div', { style: { flex: 1, minWidth: 0 } }, p.crumbs ? h(C.Breadcrumbs, { items: p.crumbs }) : null, h('h1', null, p.title), p.subtitle ? h('p', null, p.subtitle) : null), slots.actions || null) },
+  AuthLayout: { render: ({ h, props: p, children }) => h('div', { class: 'zg-root zg-auth', style: p.style }, h('div', { class: 'zg-auth__card' }, p.logo || null, h('div', null, h('h1', { style: { margin: 0, font: '300 30px var(--zg-font)', letterSpacing: '-.03em' } }, p.title), p.subtitle ? h('p', { style: { margin: '6px 0 0', color: 'var(--zg-text-2)', lineHeight: 1.5 } }, p.subtitle) : null), ...children)) },
+  LeadCard: { render: ({ C, h, props: p }) => h('div', { class: 'zg-lead zg-dm' }, h('div', { class: 'zg-lead__row' }, h(C.Avatar, { name: p.name, size: dzp(p, 32) }), h('div', { style: { flex: 1, minWidth: 0 } }, h('b', { style: { fontSize: dzf(14) } }, p.name), h('div', { class: 'zg-hint zg-mono' }, p.code)), p.tag ? h('span', { class: cx('zg-badge', p.tone && 'zg-badge--' + p.tone) }, p.tag) : null), h('div', { class: 'zg-lead__row', style: { fontSize: dzf(13), color: 'var(--zg-text-2)' } }, icon(h, 'phone', dzp(p, 14)), p.phone, h('span', { class: 'zg-num', style: { marginInlineStart: 'auto', fontSize: dzf(15), fontWeight: 600, color: 'var(--zg-text-1)' } }, p.amount))) },
+  HotelCard: { render: ({ h, props: p }) => h('article', { class: 'zg-hotel zg-dm' }, h('div', { class: 'zg-hotel__img', style: { backgroundImage: p.image ? `url(${p.image})` : undefined } }, h('div', { class: 'zg-hotel__tags' }, ...(p.tags || []).map(t => h('span', { key: t, class: 'zg-badge zg-badge--brand' }, t)))), h('div', { class: 'zg-hotel__body' },
+    h('div', { class: 'zg-hotel__row' }, h('div', { style: { minWidth: 0 } }, h('b', { style: { fontSize: dzf(17) } }, p.name), h('div', { class: 'zg-hint' }, '★'.repeat(p.stars || 0), ' · ', p.distance)), h('span', { class: 'zg-badge zg-badge--success', style: { marginInlineStart: 'auto' } }, p.rating)),
+    h('div', { class: 'zg-hotel__row', style: { alignItems: 'center' } }, h('span', { class: 'zg-hint' }, 'SAR / ', p.night || 'night'), h('div', { class: 'zg-hotel__price' }, h('div', { class: 'zg-num', style: { fontSize: dzf(26), fontWeight: 300 } }, fmt.num(p.price))))) ) },
+  TourCard: { render: ({ C, h, props: p, slots }) => { const seats = Number(p.seats) || 0, booked = Number(p.booked) || 0; return h('article', { class: 'zg-card zg-glass zg-dm' }, h('div', { class: 'zg-card__head' }, h('div', { style: { flex: 1 } }, h('h3', { class: 'zg-card__title' }, p.name), h('div', { class: 'zg-card__sub' }, [p.city, p.sessions != null && p.sessions !== '' ? p.sessions + ' sessions' : null].filter(Boolean).join(' · '))), h('span', { class: 'zg-badge zg-badge--info' }, '360°')), h(C.Progress, { value: seats > 0 ? Math.min(100, booked / seats * 100) : 0, label: 'Seats', meta: `${booked}/${seats}` }), slots.actions || null); } },
+  PrayerTimes: { render: ({ h, props: p }) => h('div', { class: 'zg-pt zg-dm' }, ...(p.items || []).map((it, i) => { it = it || {}; return h('div', { key: i, class: 'zg-pt__i', 'aria-current': i === p.next ? 'true' : undefined }, it.name, h('b', null, it.time)); })) },
+  RamadanTracker: { render: ({ h, props: p }) => { const day = Number(p.day) || 0; return h('div', { class: 'zg-rt zg-dm', role: 'img', 'aria-label': day ? `Day ${day} of 30` : 'Ramadan tracker' }, ...Array.from({ length: 30 }, (_, i) => { const n = i + 1; return h('i', { key: n, 'data-s': n === day ? 'cur' : n < day ? 'past' : n > 20 ? 'last' : undefined, 'data-odd': n > 20 && n % 2 ? '' : undefined, title: String(n) }); })); } },
+  CallRow: { render: ({ C, h, props: p }) => h('div', { class: 'zg-call zg-dm' }, h(C.Avatar, { name: p.name, size: dzp(p, 36) }), h('div', { style: { minWidth: 0 } }, h('b', { style: { fontSize: dzf(14) } }, p.name), h('div', { class: 'zg-hint' }, [p.status, fmt.dur(p.duration, p.durUnits)].filter(Boolean).join(' · '))), h(C.IconButton, { icon: 'play', label: (p.labels && p.labels.play) || 'Play', size: dzb(p), onClick: p.onPlay })) },
+};
+export { fmt };