@ziyarago/ui 0.1.1 → 0.3.0

package/src/compat/map.js

@@ -0,0 +1,282 @@
+// @ziyarago/ui/compat · declarative old-API to new-API translation tables. Pure data and small pure functions (no Vue, no DOM), so it is unit-testable in Node.
+// Old API = glass-ui-kit (@ziyarago/glass-ui-kit, Vue 3 + Tailwind, Ui* components). New API = @ziyarago/ui.
+// A spec describes ONE old component:
+//   to        new component name (string) or (src) => name
+//   defaults  old-API defaults applied before translation (old prop values, not new ones)
+//   size      size profile ('control' | 'shift' | 'same'); maps the old size onto the xs..xl scale, see SIZES
+//   props     per old prop: undefined = pass through unchanged, string = rename, null = unsupported (dropped, dev warning), false = consumed elsewhere (dropped silently),
+//             { to, map } = rename and map values, (value, src, cfg) => object = set any new props
+//   events    new event -> list of [oldEvent, fixedValue?] to emit; without fixedValue the original arguments are forwarded, NONE emits without arguments
+//   eventsWhen  new event -> (src) => boolean, the handler is attached only when true (the new kit shows UI such as a close button only when a handler exists)
+//   slots     old slot -> { into: 'default', at: 'start' | 'end', unless?: oldProp } (merge into the default slot) or a new slot name (rename)
+//   after     (newProps, src, cfg) => void, last-chance adjustments
+import { BOOL_PROPS } from '../core/bools.js';
+
+export const config = { sizes: 'height', warn: true, t: null, legacyIcons: true, primary: 'primary' };
+
+/** Global compat options. sizes: 'height' (default) keeps old pixel heights, 'name' maps sm/md/lg/xl to the same names. t: (key, fallback) => string, i18n bridge. warn: false silences dev warnings. legacyIcons: false disables the lucide rename table (use it after setIconBase to a lucide-static >= 1 build). primary: 'inverse' renders the old primary button (black pill in qrbon) with the new inverse variant instead of the brand-colored primary. */
+export function configureCompat(o = {}) { return Object.assign(config, o); }
+
+const camel = k => /^(aria|data)-/.test(k) || !k.includes('-') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+export const camelizeKeys = o => { const r = {}; for (const k of Object.keys(o)) if (o[k] !== undefined) r[camel(k)] = o[k]; return r; };
+
+// Old kit control heights: sm 36, md 48, lg 56, xl 64 px. New: xs 28, sm 32, md 40, lg 48, xl 56 px.
+export const SIZES = {
+  control: { height: { sm: 'md', md: 'lg', lg: 'xl', xl: 'xl' }, name: { sm: 'sm', md: 'md', lg: 'lg', xl: 'xl' } },
+  shift: { height: { sm: 'md', md: 'lg', lg: 'xl' }, name: { sm: 'sm', md: 'md', lg: 'lg' } },
+  same: { height: {}, name: {} },
+};
+export const mapSize = (profile, v, cfg = config) => (SIZES[profile] && SIZES[profile][cfg.sizes === 'name' ? 'name' : 'height'][v]) || v;
+
+// lucide-vue-next 1.x renamed a few icons that lucide-static@0.460 (the kit's default icon CDN version) still knows under the old name.
+export const ICON_RENAMES = { 'circle-question-mark': 'circle-help', 'text-align-start': 'align-left', 'text-align-center': 'align-center', 'text-align-end': 'align-right', 'text-align-justify': 'align-justify', 'file-code-corner': 'file-code-2', 'file-check-corner': 'file-check-2', funnel: 'filter', 'message-circle-question-mark': 'message-circle-question' };
+const old = n => (config.legacyIcons === false ? n : ICON_RENAMES[n] || n);
+
+/** Lucide component (lucide-vue-next) or string -> kebab-case icon name used by the new kit. Unknown shapes give undefined. */
+export function iconName(c) {
+  if (!c) return undefined;
+  if (typeof c === 'string') return c;
+  try {
+    if (typeof c === 'function') { const v = c({}, { slots: {}, attrs: {} }); if (v && v.props && typeof v.props.name === 'string') return old(v.props.name); }
+    const n = c.name || c.displayName || c.__name;
+    if (n) return old(String(n).replace(/^Lucide/, '').replace(/([a-z])([A-Z0-9])/g, '$1-$2').replace(/([0-9])([A-Z])/g, '$1-$2').toLowerCase());
+  } catch { /* not an icon component */ }
+  return undefined;
+}
+
+/** Marker for events entries: emit the old event without arguments (the new kit passes a DOM event the old one never had). */
+export const NONE = Symbol('none');
+const err = v => (v === true ? { error: ' ' } : v ? { error: v } : {});
+const BADGE_TONE = { sunshine: 'brand', cobalt: 'brand', petrol: 'info', ink: 'inverse', glass: undefined, neutral: undefined };
+const ALERT_TONE = { success: 'success', warning: 'warning', danger: 'danger', info: 'info', glass: 'info', neutral: 'info' };
+const CARD_TONE = { cobalt: 'brand', sunshine: 'warning', petrol: 'sky', ink: 'neutral' };
+const AVATAR_TONE = { cobalt: 'brand', sunshine: 'warning', petrol: 'sky', pink: 'danger', ink: 'neutral' };
+const PROGRESS_TONE = { success: 'success', warning: 'warning', danger: 'danger', sunshine: 'warning' };
+const MODAL_SIZE = { sm: { size: 'sm' }, md: { size: 'md' }, lg: { size: 'lg' }, xl: { size: 'xl' }, '2xl': { size: 'xl' }, '3xl': { size: 'xl', width: '768px' }, '4xl': { size: 'xl', width: '896px' }, '5xl': { size: 'xl', width: '1024px' } };
+const CARD_PADDING = { height: { none: 'md', sm: 'md', md: 'lg', lg: 'lg', xl: 'xl' }, name: { none: 'md', sm: 'sm', md: 'md', lg: 'lg', xl: 'xl' } };
+const num = v => (Number.isFinite(+v) ? +v : 0);
+
+export const SPECS = {
+  Button: {
+    to: 'Button', size: 'control', defaults: { variant: 'primary', size: 'lg' },
+    props: { variant: (v, s, cfg) => ({ glass: { variant: 'secondary' }, gradient: { variant: 'tonal', tone: 'brand' }, ink: { variant: 'inverse' } }[v] || { variant: v === 'primary' && cfg.primary === 'inverse' ? 'inverse' : v }) },
+    slots: { 'icon-left': { into: 'default', at: 'start', unless: 'loading' }, 'icon-right': { into: 'default', at: 'end', unless: 'loading' } },
+  },
+  Input: {
+    to: 'TextField', size: 'control', defaults: { size: 'lg' },
+    props: { error: err, help: 'hint', clearable: null },
+  },
+  Textarea: {
+    to: 'Textarea', defaults: { size: 'lg', resize: false },
+    props: { error: err },
+  },
+  Select: {
+    to: 'Select', size: 'control', defaults: { size: 'lg' },
+    props: { error: err },
+    t: { placeholder: ['common.select', 'Select an option'] },
+  },
+  Combobox: {
+    to: 'Combobox', size: 'control', defaults: { size: 'lg' },
+    props: { error: err },
+    t: { emptyText: ['common.noMatches', 'No matches'] },
+  },
+  Checkbox: { to: 'Checkbox', props: { error: err } },
+  Switch: { to: 'Switch', props: { error: err } },
+  Badge: {
+    to: 'Badge', size: 'shift', defaults: { tone: 'sunshine', size: 'md' },
+    props: { tone: v => (v in BADGE_TONE ? (BADGE_TONE[v] ? { tone: BADGE_TONE[v] } : {}) : { tone: v }) },
+    slots: { 'icon-left': { into: 'default', at: 'start' }, 'icon-right': { into: 'default', at: 'end' } },
+  },
+  Alert: {
+    to: 'Alert', defaults: { tone: 'info' },
+    props: { tone: v => ({ tone: ALERT_TONE[v] || 'info' }), closable: false, dismissible: false },
+    events: { close: [['close', NONE]] }, eventsWhen: { close: s => !!s.closable },
+  },
+  Skeleton: {
+    to: 'Skeleton',
+    props: { variant: v => (v === 'line' ? { variant: 'rect', height: '1px' } : { variant: v }), lastLineWidth: null },
+  },
+  Modal: {
+    to: 'Modal', defaults: { size: 'md' },
+    props: { size: v => MODAL_SIZE[v] || { size: v } },
+    events: { close: [['update:open', false], ['close', NONE]] },
+  },
+  ConfirmModal: {
+    to: 'ConfirmDialog', defaults: { confirmVariant: 'danger', size: 'sm' },
+    props: { message: 'description', confirmVariant: v => ({ tone: v === 'danger' ? 'danger' : 'default' }) },
+    t: { title: ['common.areYouSure', 'Are you sure?'], description: ['common.irreversible', 'This action cannot be undone.'], confirmLabel: ['common.delete', 'Delete'], cancelLabel: ['common.cancel', 'Cancel'] },
+  },
+  Card: {
+    to: 'Card', defaults: { padding: 'lg', variant: 'glass' },
+    props: {
+      variant: (v, s) => ({ gradient: { variant: 'gradient' }, outline: { variant: 'outline' }, block: { variant: 'gradient', intensity: 'vivid', tone: CARD_TONE[s.tone] || 'brand' } }[v] || {}),
+      tone: false, as: null,
+      padding: (v, s, cfg) => ({ size: CARD_PADDING[cfg.sizes === 'name' ? 'name' : 'height'][v] || 'lg', ...(v === 'none' ? { padding: 'none' } : {}) }),
+    },
+  },
+  Progress: {
+    to: 'Progress', defaults: { tone: 'ink' },
+    props: {
+      value: (v, s) => (v === undefined ? {} : { value: Math.max(0, Math.min(100, (num(v) / (num(s.max) || 100)) * 100)) }),
+      max: false,
+      showValue: (v, s) => (v && s.value !== undefined ? { meta: Math.round(Math.max(0, Math.min(100, (num(s.value) / (num(s.max) || 100)) * 100))) + '%' } : {}),
+      tone: v => (PROGRESS_TONE[v] ? { tone: PROGRESS_TONE[v] } : {}),
+    },
+  },
+  Breadcrumbs: { to: 'Breadcrumbs' },
+  Pagination: {
+    to: 'Pagination', props: { current: 'page', total: 'pages' },
+    events: { change: [['update:current']] },
+    after: (p, s, cfg) => { if (cfg.t) p.labels = { prev: cfg.t('common.prevPage', 'Previous page'), next: cfg.t('common.nextPage', 'Next page') }; },
+  },
+  StatsCard: {
+    to: s => (s.variant === 'block' ? 'KpiTile' : 'StatsCard'),
+    props: {
+      icon: v => ({ icon: iconName(v) }),
+      variant: (v, s) => (v === 'block' ? { variant: s.tone === 'ink' ? 'inverse' : 'brand' } : {}),
+      tone: false,
+      delta: (v, s) => {
+        if (v == null) return {};
+        const d = typeof v === 'object' ? v : { value: v };
+        const down = d.trend === 'down', text = String(d.value);
+        return { delta: s.variant === 'block' && down && !text.startsWith('-') ? '-' + text : text, trend: down ? 'down' : 'up', ...(d.sublabel ? { sub: d.sublabel } : {}) };
+      },
+    },
+  },
+  SegmentedControl: {
+    to: 'SegmentedControl', size: 'shift',
+    props: { options: v => ({ items: (v || []).map(o => (o.icon ? { ...o, icon: iconName(o.icon) } : o)) }) },
+  },
+  Avatar: {
+    to: 'Avatar', defaults: { size: 'md' },
+    props: { alt: 'name', tone: v => ({ tone: AVATAR_TONE[v] || 'brand' }), shape: v => (v === 'squircle' ? { shape: 'rounded' } : {}) },
+  },
+  Calendar: { to: 'Calendar', props: { range: null, initialMonth: null } },
+  DatePicker: {
+    to: 'DatePicker', size: 'control', defaults: { size: 'lg', clearable: true },
+    props: { error: err, range: false },
+  },
+  Spinner: { to: 'Spinner', props: { tone: null } },
+  Divider: { to: 'Divider', props: { align: null, orientation: null, tone: null } },
+  Banner: {
+    to: 'Banner', props: { tone: v => ({ tone: ALERT_TONE[v] || 'info' }), closable: false, sticky: null },
+    events: { close: [['close', NONE]] }, eventsWhen: { close: s => !!s.closable },
+  },
+  EmptyState: { to: 'EmptyState', props: { icon: v => ({ icon: iconName(v) }), tone: null, size: null }, slots: { actions: { into: 'default', at: 'end' } } },
+  Drawer: {
+    to: 'Drawer', defaults: { placement: 'right' },
+    props: { placement: v => ({ side: v === 'left' ? 'start' : 'end' }), size: null, closable: null, closeOnBackdrop: null, closeOnEsc: null },
+    events: { close: [['update:open', false], ['close', NONE]] },
+  },
+  Tag: {
+    to: 'Tag', props: { tone: null, size: null, removable: false, disabled: null },
+    slots: { 'icon-left': { into: 'default', at: 'start' } },
+    events: { remove: [['remove', NONE]] }, eventsWhen: { remove: s => !!s.removable },
+  },
+  OtpInput: { to: 'CodeInput', props: { masked: null, disabled: null, error: null, hint: null } },
+  KpiCard: {
+    to: 'KpiTile',
+    props: {
+      secondary: 'sub', icon: null, tone: null, loading: null,
+      delta: v => (v == null ? {} : { delta: String(typeof v === 'object' ? v.value : v) }),
+    },
+  },
+  FormField: { to: 'FormField' },
+};
+
+/** Old components (and old-kit names) that exist only as hand-written compat components in index.js. */
+export const CUSTOM = [
+  'Tabs', 'TabsList', 'Tab', 'TabPanel', 'Radio', 'RadioGroup', 'Dropdown', 'Menu', 'MenuItem', 'MenuSeparator', 'Table', 'Sidebar', 'SidebarSection', 'SidebarItem',
+  'Navbar', 'SubNav', 'ToastContainer', 'CommandPalette', 'FileUpload', 'DateTimePicker', 'AvatarGroup', 'MultilangInput', 'Form', 'Tooltip',
+];
+
+/** Every compat export name without the Ui prefix (components only; composables are listed in COMPAT_EXPORTS). */
+export const COMPAT_NAMES = [...new Set([...Object.keys(SPECS), ...CUSTOM])].sort();
+export const COMPAT_COMPONENTS = COMPAT_NAMES.map(n => 'Ui' + n);
+
+// Names of dev-time notes for props the new kit cannot honour. Used for warnings and documented in docs/MIGRATION.md.
+const warned = new Set();
+export function warnOnce(name, props) {
+  if (!config.warn || !props.length || (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production')) return;
+  for (const p of props) { const key = name + '.' + p; if (!warned.has(key)) { warned.add(key); console.warn(`[@ziyarago/ui/compat] <Ui${name}> prop "${p}" is not supported by the new kit and is ignored.`); } }
+}
+
+/** Translate old attrs for the old component `name`. Returns { component, props, dropped, src } or null for unknown names. */
+export function translate(name, attrs = {}, cfg = config) {
+  const spec = SPECS[name];
+  if (!spec) return null;
+  const src = { ...(spec.defaults || {}), ...camelizeKeys(attrs) };
+  for (const k of Object.keys(src)) if (src[k] === '' && BOOL_PROPS.has(k)) src[k] = true;
+  const props = {}, dropped = [];
+  for (const k of Object.keys(src)) {
+    const v = src[k], rule = spec.props && Object.prototype.hasOwnProperty.call(spec.props, k) ? spec.props[k] : undefined;
+    if (rule === undefined) {
+      if (k === 'size' && spec.size) props.size = mapSize(spec.size, v, cfg);
+      else props[k] = v;
+    } else if (rule === false) continue;
+    else if (rule === null) dropped.push(k);
+    else if (typeof rule === 'string') props[rule] = v;
+    else if (typeof rule === 'function') Object.assign(props, rule(v, src, cfg) || {});
+    else { const nv = rule.map && v in rule.map ? rule.map[v] : v; if (nv !== undefined) props[rule.to || k] = nv; }
+  }
+  if (spec.t) for (const k of Object.keys(spec.t)) if (props[k] === undefined) props[k] = cfg.t ? cfg.t(spec.t[k][0], spec.t[k][1]) : spec.t[k][1];
+  if (spec.after) spec.after(props, src, cfg);
+  return { component: typeof spec.to === 'function' ? spec.to(src) : spec.to, props, dropped, src };
+}
+
+/** Old event names a compat component must declare in `emits` so Vue does not forward them as listeners. */
+export function emitsOf(name) {
+  const spec = SPECS[name];
+  return spec && spec.events ? [...new Set(Object.values(spec.events).flatMap(t => t.map(e => e[0])))] : [];
+}
+
+/** Listener props for the new component: { onClose: fn } that re-emit old events. `emit` is the Vue emit function (or any (name, ...args) => void). */
+export function buildHandlers(name, src, emit) {
+  const spec = SPECS[name], out = {};
+  if (!spec || !spec.events) return out;
+  for (const ev of Object.keys(spec.events)) {
+    if (spec.eventsWhen && spec.eventsWhen[ev] && !spec.eventsWhen[ev](src)) continue;
+    out['on' + ev[0].toUpperCase() + ev.slice(1)] = (...a) => { for (const [n, ...fixed] of spec.events[ev]) { if (fixed[0] === NONE) emit(n); else emit(n, ...(fixed.length ? fixed : a)); } };
+  }
+  return out;
+}
+
+/** Old slot functions -> new slot functions. `slots` is { name: fn }, `src` the translated old props (for `unless`). Slot functions may receive args. */
+export function translateSlots(name, slots, src = {}) {
+  const spec = SPECS[name], rules = (spec && spec.slots) || {}, out = {}, pre = [], post = [];
+  for (const k of Object.keys(slots)) {
+    const r = rules[k];
+    if (r === undefined) out[k] = slots[k];
+    else if (typeof r === 'string') out[r] = slots[k];
+    else if (!(r.unless && src[r.unless])) (r.at === 'start' ? pre : post).push(slots[k]);
+  }
+  if (pre.length || post.length) {
+    const base = out.default;
+    out.default = (...a) => [...pre.map(f => f()), ...(base ? [].concat(base(...a)) : []), ...post.map(f => f())];
+  }
+  return out;
+}
+
+/** Tailwind width utility (w-32, w-[120px], w-1/2, w-full) -> CSS width. Anything else gives undefined. */
+export function twWidth(c) {
+  if (!c || typeof c !== 'string') return undefined;
+  const m = /(?:^|\s)w-(?:\[([^\]]+)\]|(\d+(?:\.\d+)?)|(full)|(\d+)\/(\d+))(?=\s|$)/.exec(c);
+  if (!m) return undefined;
+  if (m[1]) return m[1];
+  if (m[2]) return +m[2] * 0.25 + 'rem';
+  if (m[3]) return '100%';
+  return +(100 * m[4] / m[5]).toFixed(4) + '%';
+}
+
+/** Client-side sort used by the compat UiTable (the new DataTable is controlled and never sorts). */
+export function sortRows(rows, col, dir, getValue) {
+  const d = dir === 'desc' ? -1 : 1;
+  return [...rows].sort((a, b) => {
+    const av = getValue(a, col), bv = getValue(b, col);
+    if (av == null && bv == null) return 0;
+    if (av == null) return -1 * d;
+    if (bv == null) return 1 * d;
+    if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * d;
+    return String(av).localeCompare(String(bv)) * d;
+  });
+}

package/src/compat/resolver.js

@@ -0,0 +1,22 @@
+// unplugin-vue-components resolver for the compat layer: <UiInput>, <UiTable>, <UiSidebar> ... -> import from '@ziyarago/ui/compat'.
+//   Components({ dirs: [], resolvers: [ZiyaragoCompatResolver(), ZiyaragoUiResolver({ exclude: [...] })] })
+// Put it BEFORE ZiyaragoUiResolver: names that exist in both kits (UiButton, UiCard, ...) then resolve to the compat wrapper.
+import { COMPAT_COMPONENTS } from './map.js';
+
+const NAMES = new Set(COMPAT_COMPONENTS);
+
+/** @param {{ from?: string, exclude?: string[], css?: boolean | string }} [options]  exclude: full component names to leave alone, e.g. ['UiTable']. */
+export function ZiyaragoCompatResolver(options = {}) {
+  const { from = '@ziyarago/ui/compat', exclude = [], css = false } = options;
+  const skip = new Set(exclude);
+  const sideEffects = css ? (css === true ? '@ziyarago/ui/style.css' : css) : undefined;
+  return {
+    type: 'component',
+    resolve(name) {
+      if (!NAMES.has(name) || skip.has(name)) return;
+      return { name, from, ...(sideEffects ? { sideEffects } : {}) };
+    },
+  };
+}
+
+export default ZiyaragoCompatResolver;

package/src/compat/vite.js

@@ -0,0 +1,29 @@
+// Vite plugin: redirects imports of the project's local old-kit files (".../components/ui/Toast", ".../components/ui/Select/UiSelect.vue", "@/components/ui/Table", ...)
+// to '@ziyarago/ui/compat', so useToast, TableColumn, SelectOption, UiInput ... keep working without editing hundreds of import lines.
+//   import { ziyaragoCompat } from '@ziyarago/ui/compat/vite'   plugins: [ziyaragoCompat(), vue(), ...]
+const PREFIX = '\0ziyarago-compat:';
+
+/** @param {{ from?: string, ui?: RegExp, exclude?: RegExp[] }} [options] ui: matches the local ui directory in an import path. exclude: import paths to keep local (default: MultilangInput). */
+export function ziyaragoCompat(options = {}) {
+  const { from = '@ziyarago/ui/compat', ui = /(?:^|\/)components\/ui\/([A-Za-z]+)(?:\/([A-Za-z]+)(\.vue|\.ts)?)?$/, exclude = [/MultilangInput/] } = options;
+  return {
+    name: 'ziyarago-ui-compat',
+    enforce: 'pre',
+    resolveId(source, importer) {
+      const norm = source.replace(/\\/g, '/');
+      if (!importer || norm.startsWith('\0') || norm.startsWith(from)) return null;
+      if (importer.replace(/\\/g, '/').includes('/components/ui/')) return null;
+      if (exclude.some(r => r.test(norm))) return null;
+      const m = ui.exec(norm);
+      if (!m) return null;
+      return PREFIX + (m[2] && m[3] === '.vue' ? m[2] : m[1]);
+    },
+    load(id) {
+      if (!id.startsWith(PREFIX)) return null;
+      const name = id.slice(PREFIX.length), comp = name.startsWith('Ui') ? name : name === 'Toast' ? 'UiToastContainer' : 'Ui' + name;
+      return `export * from '${from}';\nimport * as C from '${from}';\nexport default C['${comp}'];\n`;
+    },
+  };
+}
+
+export default ziyaragoCompat;

package/src/core/bools.js

@@ -0,0 +1,4 @@
+// Names of props that are boolean in EVERY component that documents them. The Vue adapter turns the bare-attribute form (<UiButton block>, which Vue delivers as '') into true for these.
+// Names that are boolean somewhere and text elsewhere (modelValue, image, brand) are not listed: '' is a legitimate value there.
+// scripts/check-meta.mjs keeps this list in sync with src/meta.
+export const BOOL_PROPS = new Set(['addable', 'allowEmpty', 'autoResize', 'autofocus', 'banner', 'block', 'bold', 'checked', 'clearable', 'closable', 'closeOnBackdrop', 'closeOnEsc', 'collapsed', 'collapsible', 'disabled', 'dot', 'external', 'featured', 'frame', 'ghost', 'glass', 'hideArrows', 'hideIcon', 'highlightLast', 'iconOnly', 'indeterminate', 'interactive', 'labelLeft', 'last', 'loading', 'multi', 'multiple', 'open', 'pill', 'plain', 'readonly', 'required', 'resize', 'ring', 'sanitize', 'selectGroups', 'showCount', 'showForgot', 'showValue', 'spellcheck', 'ticks', 'truncate', 'vertical', 'vip', 'wrap']);

package/src/core/components.js

@@ -3,6 +3,9 @@
 // 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(' ');
+// Copies the listed props that are set; used to forward native attributes and listeners to the real <input>/<textarea>.
+export const pick = (p, keys) => { const o = {}; for (const k of keys) if (p[k] !== undefined) o[k] = p[k]; return o; };
+export const INPUT_ATTRS = ['name', 'autocomplete', 'required', 'min', 'max', 'step', 'maxlength', 'minlength', 'inputmode', 'pattern', 'spellcheck', 'autofocus', 'autocapitalize', 'onBlur', 'onFocus', 'onKeydown', 'onKeyDown', 'onKeyup', 'onKeyUp', 'onPaste'];
 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.
@@ -23,7 +26,7 @@ const ddSync = () => {
 };
 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(); }
+  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 }); if (!o.self && el.scrollIntoView) el.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } ddSync(); }
   else Promise.resolve().then(ddPrune);
 };
 export const dzp = (p, b) => Math.round(b * (DZ[p.size] || 1));
@@ -51,41 +54,46 @@ const nav = (h, it, cur, onChange, collapsed) => h('button', { key: it.value, cl
   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 },
+  Button: { render: ({ h, props: p, children }) => h('button', { type: p.type || 'button', title: p.title, class: cx('zg-btn', 'zg-btn--' + (p.variant || 'secondary'), p.size && 'zg-btn--' + p.size, p.block && 'zg-btn--block', p.iconOnly && 'zg-btn--sq', 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))) },
+  Badge: { render: ({ h, props: p, children }) => h('span', { class: cx('zg-badge', p.tone && 'zg-badge--' + p.tone, p.shape === 'square' && 'zg-badge--sq') }, p.dot ? h('span', { class: 'zg-badge__dot' }) : null, ...children) },
+  Avatar: { render: ({ h, props: p }) => h('span', { class: cx('zg-avatar', p.shape === 'rounded' && 'zg-avatar--sq', p.ring && 'zg-avatar--ring', p.status && 'zg-avatar--st', p.tone && 'zg-avatar--' + p.tone), 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.initials ? String(p.initials).slice(0, 3).toUpperCase() : (p.name || '?').split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase(),
+    p.status ? h('i', { class: 'zg-avatar__st zg-avatar__st--' + p.status, role: 'img', 'aria-label': p.status }) : null) },
+  Switch: { render: ({ h, props: p }) => { const txt = p.label || p.hint || p.error ? h('span', null, p.label || null, p.hint && !p.error ? h('span', { class: 'zg-hint', style: { display: 'block' } }, p.hint) : null, p.error ? h('span', { class: 'zg-hint zg-hint--error', role: 'alert', style: { display: 'block' } }, p.error) : null) : null, tr = h('span', { class: 'zg-switch__track' }, h('span', { class: 'zg-switch__thumb' }));
+    return 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) }, ...(p.labelLeft ? [txt, tr] : [tr, txt])); } },
+  Checkbox: { render: ({ h, props: p }) => h('button', { type: 'button', role: 'checkbox', class: cx('zg-check', p.error && 'zg-check--error'), 'aria-checked': p.indeterminate ? 'mixed' : String(!!p.modelValue), disabled: p.disabled, 'aria-disabled': p.disabled ? 'true' : undefined, onClick: () => !p.disabled && p.onChange && p.onChange(p.indeterminate ? true : !p.modelValue) }, h('span', { class: 'zg-check__box' }, p.indeterminate ? icon(h, 'minus', 14) : p.modelValue ? icon(h, 'check', 14) : null),
+    p.label || p.hint || p.error ? h('span', null, p.label || null, p.hint && !p.error ? h('span', { class: 'zg-hint', style: { display: 'block' } }, p.hint) : null, p.error && typeof p.error === 'string' ? h('span', { class: 'zg-hint zg-hint--error', role: 'alert', style: { display: 'block' } }, p.error) : null) : null) },
+  SegmentedControl: { render: ({ h, props: p }) => h('div', { class: cx('zg-seg', p.size === 'sm' && 'zg-seg--sm', p.block && 'zg-seg--block'), role: 'group', 'aria-label': p.ariaLabel }, ...(p.items || []).map(it => h('button', { key: it.value, type: 'button', disabled: it.disabled, title: p.iconOnly ? it.label : undefined, 'aria-label': p.iconOnly && it.icon ? it.label : undefined, 'aria-pressed': String(it.value === p.modelValue), onClick: () => !it.disabled && p.onChange && p.onChange(it.value) }, it.icon ? icon(h, it.icon, 16) : null, p.iconOnly && it.icon ? null : 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),
+  TextField: { slots: ['prefix', 'suffix'], render: ({ h, props: p, slots }) => h('label', { class: 'zg-field' }, p.label ? h('span', { class: 'zg-label' }, p.label, p.required ? h('span', { class: 'zg-req', 'aria-hidden': 'true' }, ' *') : null) : 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') }, slots.prefix || (p.icon ? icon(h, p.icon, 18) : null), h('input', { ...pick(p, INPUT_ATTRS), 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.onInput && p.onInput(e); } }), slots.suffix || 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)); } },
+    return h('div', { class: 'zg-field' }, p.label ? h('span', { class: 'zg-label' }, p.label, p.required ? h('span', { class: 'zg-req', 'aria-hidden': 'true' }, ' *') : null) : null,
+      h('div', { class: 'zg-select' }, h('button', { type: 'button', class: cx('zg-btn', 'zg-select__trigger', p.error && 'zg-select__trigger--error'), '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),
+      p.name ? h('input', { type: 'hidden', name: p.name, value: p.modelValue ?? '' }) : 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); } },
   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)); } },
+  Card: { slots: ['header', 'footer'], 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', p.variant === 'outline' && 'zg-card--outline', p.padding === 'none' && 'zg-card--flush', p.interactive && 'zg-card--click'), 'data-theme': p.variant === 'inverse' ? 'dark' : (p.variant === 'gradient' && p.intensity === 'vivid' ? (['brand', 'warning', undefined].includes(p.tone) ? 'light' : 'dark') : undefined), onClick: p.onClick, tabIndex: p.interactive && p.onClick ? 0 : undefined, onKeydown: p.interactive && p.onClick ? e => { if (e.key === 'Enter' && e.target === e.currentTarget) p.onClick(e); } : undefined },
+    slots.header ? h('div', { class: 'zg-card__head' }, slots.header) : (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, slots.footer ? h('div', { class: 'zg-card__foot' }, slots.footer) : null) },
+  Modal: { slots: ['title', 'subtitle'], render: ({ h, props: p, children, slots }) => { const foot = slots.footer || p.footer, sub = slots.subtitle || p.subtitle, ttl = slots.title || p.title; return !p.open ? null : h('div', { class: 'zg-modal-scrim', onClick: p.closeOnBackdrop === false ? undefined : p.onClose }, h('div', { class: 'zg-modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': p.title, style: p.width ? { maxWidth: p.width } : undefined, ref: trap({ onClose: p.closeOnEsc === false ? undefined : p.onClose }), onClick: e => e.stopPropagation() },
+    h('div', { class: 'zg-modal__head' }, sub ? h('div', { style: { flex: 1, minWidth: 0 } }, h('h3', null, ttl), h('div', { class: 'zg-modal__sub' }, sub)) : h('h3', null, ttl), p.closable === false ? null : 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)])) },
+  Breadcrumbs: { render: ({ h, props: p }) => h('nav', { class: 'zg-crumbs', 'aria-label': 'Breadcrumb' }, ...(p.items || []).flatMap((it, i, a) => [i ? (p.separator === 'slash' || p.separator === 'dot' ? h('span', { key: 's' + i, class: 'zg-crumbs__sep', 'aria-hidden': 'true' }, p.separator === 'slash' ? '/' : '\u00b7') : 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))); } },
+    return h('nav', { class: 'zg-pager', 'aria-label': p.label || 'Pagination' }, p.hideArrows ? null : h('button', { key: 'prev', type: 'button', class: 'zg-pager__nav', 'aria-label': (p.labels && p.labels.prev) || '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': ((p.labels && p.labels.page) || 'Page') + ' ' + n, 'aria-current': n === p.page ? 'page' : undefined, onClick: () => go(n) }, n)),
+      p.hideArrows ? null : h('button', { key: 'next', type: 'button', class: 'zg-pager__nav', 'aria-label': (p.labels && p.labels.next) || '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 = [];
@@ -95,10 +103,10 @@ export const components = {
       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);
+  DataTable: { render: ({ h, props: p, slots }) => { const cs = c => (c.align || c.width) ? { textAlign: c.align, width: c.width } : undefined, 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, style: cs(c) }, 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 || '—')))])))); } },
+      h('tbody', null, ...(rows.length ? rows.map((r, ri) => h('tr', { key: r.id, 'aria-selected': sel.includes(r.id) ? 'true' : undefined, class: p.onRowClick ? 'zg-tr--click' : undefined, onClick: p.onRowClick ? () => p.onRowClick(r, ri) : 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, style: cs(c) }, 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' }, slots.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))))) },