/* ============================================================
   Bizia — Reusable UI primitives
   Button, Card, Badge, StatusBadge, Chip, Toggle, Avatar,
   Input, Textarea, Select, Segmented, Tabs, Modal, Drawer,
   Tooltip, ProgressBar, MetricCard, Skeleton, EmptyState
   ============================================================ */
(function () {
  const { useState, useEffect, useRef } = React;

  /* ---------- Button ---------- */
  function Button({ variant = 'primary', size = 'md', icon, iconRight, children, full, style, className, ...rest }) {
    const sizes = {
      sm: { h: 34, px: 12, fs: 13, gap: 7, ic: 15 },
      md: { h: 40, px: 16, fs: 14, gap: 8, ic: 17 },
      lg: { h: 48, px: 22, fs: 15.5, gap: 9, ic: 19 },
      xl: { h: 56, px: 28, fs: 16.5, gap: 10, ic: 20 },
    }[size];
    const variants = {
      primary: {
        background: 'linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%)',
        color: '#fff', border: '1px solid var(--primary-600)', boxShadow: 'var(--sh-primary-sm)',
      },
      secondary: {
        background: 'linear-gradient(180deg, var(--secondary) 0%, #0FA593 100%)',
        color: '#fff', border: '1px solid #0FA593', boxShadow: '0 6px 16px -6px rgba(18,184,166,0.5)',
      },
      ghost: { background: 'transparent', color: 'var(--text-2)', border: '1px solid transparent' },
      outline: { background: 'var(--surface)', color: 'var(--text)', border: '1px solid var(--border-strong)', boxShadow: 'var(--sh-xs)' },
      soft: { background: 'var(--primary-soft)', color: 'var(--primary-700)', border: '1px solid transparent' },
      danger: { background: 'var(--danger)', color: '#fff', border: '1px solid var(--danger)' },
      dark: { background: 'var(--text)', color: 'var(--surface)', border: '1px solid var(--text)' },
    }[variant];
    const [hov, setHov] = useState(false);
    return React.createElement('button', {
      className: 'bz-focusable ' + (className || ''),
      onMouseEnter: () => setHov(true), onMouseLeave: () => setHov(false),
      style: {
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: sizes.gap,
        height: sizes.h, padding: '0 ' + sizes.px + 'px', fontSize: sizes.fs, fontWeight: 600,
        borderRadius: 'var(--r-md)', cursor: 'pointer', whiteSpace: 'nowrap', letterSpacing: '-0.01em',
        width: full ? '100%' : 'auto', transition: 'transform .16s var(--ease), filter .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease)',
        transform: hov ? 'translateY(-1px)' : 'none',
        filter: hov && (variant === 'primary' || variant === 'secondary' || variant === 'danger' || variant === 'dark') ? 'brightness(1.06)' : 'none',
        ...(hov && variant === 'ghost' ? { background: 'var(--surface-3)' } : {}),
        ...(hov && variant === 'outline' ? { borderColor: 'var(--muted-2)' } : {}),
        ...(hov && variant === 'soft' ? { filter: 'brightness(0.97)' } : {}),
        ...variants, ...style,
      }, ...rest,
    },
      icon ? React.createElement(window.Icon, { name: icon, size: sizes.ic }) : null,
      children,
      iconRight ? React.createElement(window.Icon, { name: iconRight, size: sizes.ic }) : null,
    );
  }

  /* ---------- IconButton ---------- */
  function IconButton({ name, size = 18, label, active, badge, style, ...rest }) {
    const [hov, setHov] = useState(false);
    return React.createElement('button', {
      'aria-label': label, title: label, className: 'bz-focusable',
      onMouseEnter: () => setHov(true), onMouseLeave: () => setHov(false),
      style: {
        position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 38, height: 38, borderRadius: 'var(--r-sm)', cursor: 'pointer',
        background: active ? 'var(--primary-soft)' : hov ? 'var(--surface-3)' : 'transparent',
        color: active ? 'var(--primary-700)' : 'var(--text-2)',
        border: '1px solid ' + (active ? 'transparent' : 'transparent'),
        transition: 'background .15s var(--ease), color .15s', ...style,
      }, ...rest,
    },
      React.createElement(window.Icon, { name, size }),
      badge ? React.createElement('span', {
        style: {
          position: 'absolute', top: 6, right: 6, width: 7, height: 7, borderRadius: 999,
          background: 'var(--accent)', border: '2px solid var(--surface)',
        },
      }) : null,
    );
  }

  /* ---------- Card ---------- */
  function Card({ glass, hover, pad = 20, children, style, className, ...rest }) {
    const [hov, setHov] = useState(false);
    return React.createElement('div', {
      className: (className || ''),
      onMouseEnter: hover ? () => setHov(true) : undefined,
      onMouseLeave: hover ? () => setHov(false) : undefined,
      style: {
        background: glass ? 'var(--glass-strong)' : 'var(--surface)',
        backdropFilter: glass ? 'blur(18px) saturate(140%)' : 'none',
        WebkitBackdropFilter: glass ? 'blur(18px) saturate(140%)' : 'none',
        border: '1px solid var(--border)', borderRadius: 'var(--r-lg)',
        boxShadow: hov ? 'var(--sh-lg)' : 'var(--sh-sm)',
        padding: pad, transition: 'box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s',
        transform: hov ? 'translateY(-3px)' : 'none',
        borderColor: hov ? 'var(--border-strong)' : 'var(--border)',
        ...style,
      }, ...rest,
    }, children);
  }

  /* ---------- Badge ---------- */
  const TONES = {
    primary: ['var(--primary-soft)', 'var(--primary-700)'],
    secondary: ['var(--secondary-soft)', '#0E8C7E'],
    accent: ['var(--accent-soft)', '#B26A00'],
    success: ['var(--success-soft)', 'var(--success)'],
    warning: ['var(--warning-soft)', 'var(--warning)'],
    danger: ['var(--danger-soft)', 'var(--danger)'],
    info: ['var(--info-soft)', 'var(--info)'],
    neutral: ['var(--surface-3)', 'var(--muted)'],
  };
  function Badge({ tone = 'neutral', icon, dot, children, size = 'md', style }) {
    const [bg, fg] = TONES[tone] || TONES.neutral;
    const s = size === 'sm' ? { fs: 11, px: 8, h: 20, ic: 12 } : { fs: 12, px: 10, h: 24, ic: 13 };
    return React.createElement('span', {
      style: {
        display: 'inline-flex', alignItems: 'center', gap: 5, height: s.h, padding: '0 ' + s.px + 'px',
        background: bg, color: fg, borderRadius: 'var(--r-pill)', fontSize: s.fs, fontWeight: 600,
        letterSpacing: '-0.005em', whiteSpace: 'nowrap', ...style,
      },
    },
      dot ? React.createElement('span', { style: { width: 6, height: 6, borderRadius: 999, background: fg } }) : null,
      icon ? React.createElement(window.Icon, { name: icon, size: s.ic }) : null,
      children,
    );
  }

  /* ---------- StatusBadge ---------- */
  const STATUS = {
    live: ['success', 'Live', 'check'], published: ['success', 'Published', 'checkcircle'],
    ready: ['success', 'Ready', 'check'], connected: ['success', 'Connected', 'check'],
    active: ['secondary', 'Active', 'dot'], draft: ['neutral', 'Draft', 'edit'],
    pending: ['warning', 'Pending', 'clock'], 'in-progress': ['info', 'In progress', 'clock'],
    review: ['accent', 'Needs review', 'alert'], warning: ['warning', 'Action needed', 'alert'],
    error: ['danger', 'Error', 'alert'], paused: ['neutral', 'Paused', 'clock'],
    'not-started': ['neutral', 'Not started', 'dot'], optional: ['neutral', 'Optional', 'dot'],
    new: ['info', 'New', 'sparkles'], saved: ['secondary', 'Draft saved', 'check'],
  };
  function StatusBadge({ status, label, size = 'md' }) {
    const [tone, text, icon] = STATUS[status] || ['neutral', status, 'dot'];
    return React.createElement(Badge, { tone, icon, size }, label || text);
  }

  /* ---------- Chip (selectable) ---------- */
  function Chip({ active, icon, children, onClick, style }) {
    const [hov, setHov] = useState(false);
    return React.createElement('button', {
      onClick, onMouseEnter: () => setHov(true), onMouseLeave: () => setHov(false),
      style: {
        display: 'inline-flex', alignItems: 'center', gap: 7, height: 36, padding: '0 14px',
        borderRadius: 'var(--r-pill)', fontSize: 13.5, fontWeight: 550, cursor: 'pointer',
        border: '1px solid ' + (active ? 'var(--primary)' : 'var(--border-strong)'),
        background: active ? 'var(--primary-soft)' : hov ? 'var(--surface-3)' : 'var(--surface)',
        color: active ? 'var(--primary-700)' : 'var(--text-2)',
        transition: 'all .15s var(--ease)', ...style,
      },
    },
      icon ? React.createElement(window.Icon, { name: icon, size: 15 }) : null,
      children,
    );
  }

  /* ---------- Toggle ---------- */
  function Toggle({ on, onChange, size = 'md' }) {
    const w = size === 'sm' ? 36 : 44, h = size === 'sm' ? 21 : 25, k = h - 6;
    return React.createElement('button', {
      role: 'switch', 'aria-checked': on, onClick: () => onChange && onChange(!on), className: 'bz-focusable',
      style: {
        width: w, height: h, borderRadius: 999, padding: 3, cursor: 'pointer', border: 'none',
        background: on ? 'linear-gradient(180deg,var(--primary),var(--primary-600))' : 'var(--border-strong)',
        transition: 'background .2s var(--ease)', position: 'relative', flexShrink: 0,
      },
    },
      React.createElement('span', {
        style: {
          display: 'block', width: k, height: k, borderRadius: 999, background: '#fff',
          boxShadow: '0 1px 3px rgba(0,0,0,0.25)', transform: 'translateX(' + (on ? w - h : 0) + 'px)',
          transition: 'transform .2s var(--ease)',
        },
      }),
    );
  }

  /* ---------- Avatar ---------- */
  function Avatar({ name = '?', src, size = 36, tone, ring }) {
    const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
    const hues = ['#5B5CFF', '#12B8A6', '#FF8A5B', '#A855F7', '#EC4899', '#0EA5E9', '#F59E0B'];
    const hue = tone || hues[(name.charCodeAt(0) + (name.charCodeAt(1) || 0)) % hues.length];
    return React.createElement('div', {
      style: {
        width: size, height: size, borderRadius: '32%', flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: src ? 'var(--surface-3)' : 'linear-gradient(135deg,' + hue + ', ' + hue + 'cc)',
        color: '#fff', fontSize: size * 0.38, fontWeight: 650, letterSpacing: '-0.02em',
        boxShadow: ring ? '0 0 0 2px var(--surface), 0 0 0 3.5px ' + hue + '55' : 'none',
        overflow: 'hidden', backgroundSize: 'cover',
        ...(src ? { backgroundImage: 'url(' + src + ')' } : {}),
      },
    }, src ? null : initials);
  }

  /* ---------- Input ---------- */
  function Input({ icon, label, hint, error, suffix, style, wrapStyle, ...rest }) {
    const [foc, setFoc] = useState(false);
    return React.createElement('label', { style: { display: 'block', ...wrapStyle } },
      label ? React.createElement('span', { style: { display: 'block', fontSize: 13, fontWeight: 600, color: 'var(--text-2)', marginBottom: 7 } }, label) : null,
      React.createElement('div', {
        style: {
          display: 'flex', alignItems: 'center', gap: 9, height: 44, padding: '0 14px',
          borderRadius: 'var(--r-md)', background: 'var(--surface)',
          border: '1px solid ' + (error ? 'var(--danger)' : foc ? 'var(--primary)' : 'var(--border-strong)'),
          boxShadow: foc ? '0 0 0 3px var(--ring)' : 'var(--sh-xs)', transition: 'all .15s var(--ease)',
        },
      },
        icon ? React.createElement(window.Icon, { name: icon, size: 17, style: { color: 'var(--muted)' } }) : null,
        React.createElement('input', {
          onFocus: () => setFoc(true), onBlur: () => setFoc(false),
          style: {
            flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 14.5,
            color: 'var(--text)', width: '100%', ...style,
          }, ...rest,
        }),
        suffix ? React.createElement('span', { style: { fontSize: 13, color: 'var(--muted)', fontWeight: 500 } }, suffix) : null,
      ),
      hint && !error ? React.createElement('span', { style: { display: 'block', fontSize: 12.5, color: 'var(--muted)', marginTop: 6 } }, hint) : null,
      error ? React.createElement('span', { style: { display: 'flex', alignItems: 'center', gap: 5, fontSize: 12.5, color: 'var(--danger)', marginTop: 6 } },
        React.createElement(window.Icon, { name: 'alert', size: 13 }), error) : null,
    );
  }

  /* ---------- Segmented control ---------- */
  function Segmented({ options, value, onChange, size = 'md', full }) {
    const h = size === 'sm' ? 32 : 38;
    return React.createElement('div', {
      style: {
        display: 'inline-flex', padding: 3, background: 'var(--surface-3)', borderRadius: 'var(--r-md)',
        border: '1px solid var(--border-soft)', width: full ? '100%' : 'auto',
      },
    },
      options.map(o => {
        const val = typeof o === 'string' ? o : o.value;
        const active = val === value;
        return React.createElement('button', {
          key: val, onClick: () => onChange(val), className: 'bz-focusable',
          style: {
            flex: full ? 1 : 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            height: h, padding: '0 13px', borderRadius: 'var(--r-sm)', border: 'none', cursor: 'pointer',
            fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap',
            background: active ? 'var(--surface)' : 'transparent',
            color: active ? 'var(--text)' : 'var(--muted)',
            boxShadow: active ? 'var(--sh-sm)' : 'none', transition: 'all .15s var(--ease)',
          },
        },
          o.icon ? React.createElement(window.Icon, { name: o.icon, size: 15 }) : null,
          (typeof o === 'string' ? o : o.label),
        );
      }),
    );
  }

  /* ---------- Tabs ---------- */
  function Tabs({ tabs, value, onChange, style }) {
    return React.createElement('div', {
      style: { display: 'flex', gap: 4, borderBottom: '1px solid var(--border)', ...style },
    },
      tabs.map(t => {
        const val = typeof t === 'string' ? t : t.value;
        const active = val === value;
        return React.createElement('button', {
          key: val, onClick: () => onChange(val),
          style: {
            position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 7,
            padding: '11px 14px', border: 'none', background: 'transparent', cursor: 'pointer',
            fontSize: 14, fontWeight: 600, color: active ? 'var(--text)' : 'var(--muted)',
            transition: 'color .15s', marginBottom: -1,
          },
        },
          (typeof t === 'object' && t.icon) ? React.createElement(window.Icon, { name: t.icon, size: 16 }) : null,
          (typeof t === 'string' ? t : t.label),
          (typeof t === 'object' && t.count != null) ? React.createElement('span', {
            style: { fontSize: 11.5, fontWeight: 600, padding: '1px 7px', borderRadius: 999, background: active ? 'var(--primary-soft)' : 'var(--surface-3)', color: active ? 'var(--primary-700)' : 'var(--muted)' },
          }, t.count) : null,
          active ? React.createElement('span', {
            style: { position: 'absolute', left: 8, right: 8, bottom: -1, height: 2.5, borderRadius: 3, background: 'var(--primary)' },
          }) : null,
        );
      }),
    );
  }

  /* ---------- Modal ---------- */
  function Modal({ open, onClose, children, width = 520, pad = 28 }) {
    useEffect(() => {
      if (!open) return;
      const h = (e) => e.key === 'Escape' && onClose && onClose();
      window.addEventListener('keydown', h);
      return () => window.removeEventListener('keydown', h);
    }, [open, onClose]);
    if (!open) return null;
    return React.createElement('div', {
      onMouseDown: onClose,
      style: {
        position: 'fixed', inset: 0, zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'rgba(15,18,35,0.42)', backdropFilter: 'blur(4px)', padding: 20, animation: 'bz-fade-in .18s var(--ease)',
      },
    },
      React.createElement('div', {
        onMouseDown: (e) => e.stopPropagation(),
        style: {
          width: '100%', maxWidth: width, maxHeight: '90vh', overflow: 'auto', background: 'var(--surface)',
          borderRadius: 'var(--r-xl)', border: '1px solid var(--border)', boxShadow: 'var(--sh-xl)',
          padding: pad, animation: 'bz-scale-in .22s var(--ease)',
        },
      }, children),
    );
  }

  /* ---------- Drawer ---------- */
  function Drawer({ open, onClose, children, width = 460, side = 'right' }) {
    useEffect(() => {
      if (!open) return;
      const h = (e) => e.key === 'Escape' && onClose && onClose();
      window.addEventListener('keydown', h);
      return () => window.removeEventListener('keydown', h);
    }, [open, onClose]);
    if (!open) return null;
    return React.createElement('div', {
      onMouseDown: onClose,
      style: { position: 'fixed', inset: 0, zIndex: 200, display: 'flex', justifyContent: side === 'right' ? 'flex-end' : 'flex-start', background: 'rgba(15,18,35,0.42)', backdropFilter: 'blur(4px)', animation: 'bz-fade-in .18s var(--ease)' },
    },
      React.createElement('div', {
        onMouseDown: (e) => e.stopPropagation(),
        style: {
          width: '100%', maxWidth: width, height: '100%', background: 'var(--surface)', overflow: 'auto',
          borderLeft: side === 'right' ? '1px solid var(--border)' : 'none',
          borderRight: side === 'left' ? '1px solid var(--border)' : 'none',
          boxShadow: 'var(--sh-xl)', animation: (side === 'right' ? 'bz-slide-r' : 'bz-slide-l') + ' .26s var(--ease)',
        },
      }, children),
    );
  }

  /* ---------- ProgressBar ---------- */
  function ProgressBar({ value, height = 8, tone = 'primary', track, animated, style }) {
    const colors = {
      primary: 'linear-gradient(90deg,var(--primary),var(--secondary))',
      secondary: 'var(--secondary)', accent: 'var(--accent)', success: 'var(--success)',
    };
    return React.createElement('div', {
      style: { width: '100%', height, borderRadius: 999, background: track || 'var(--surface-3)', overflow: 'hidden', ...style },
    },
      React.createElement('div', {
        style: {
          width: Math.max(0, Math.min(100, value)) + '%', height: '100%', borderRadius: 999,
          background: colors[tone] || colors.primary, transition: animated ? 'width .8s var(--ease)' : 'width .4s var(--ease)',
        },
      }),
    );
  }

  /* ---------- Ring progress ---------- */
  function RingProgress({ value, size = 64, stroke = 7, tone = 'var(--primary)', label, sub }) {
    const r = (size - stroke) / 2, c = 2 * Math.PI * r;
    const id = React.useMemo(() => 'rg' + Math.random().toString(36).slice(2, 6), []);
    return React.createElement('div', { style: { position: 'relative', width: size, height: size } },
      React.createElement('svg', { width: size, height: size, style: { transform: 'rotate(-90deg)' } },
        React.createElement('defs', null,
          React.createElement('linearGradient', { id, x1: '0', y1: '0', x2: '1', y2: '1' },
            React.createElement('stop', { offset: '0', stopColor: 'var(--primary)' }),
            React.createElement('stop', { offset: '1', stopColor: 'var(--secondary)' }),
          ),
        ),
        React.createElement('circle', { cx: size / 2, cy: size / 2, r, fill: 'none', stroke: 'var(--surface-3)', strokeWidth: stroke }),
        React.createElement('circle', {
          cx: size / 2, cy: size / 2, r, fill: 'none', stroke: 'url(#' + id + ')', strokeWidth: stroke,
          strokeLinecap: 'round', strokeDasharray: c, strokeDashoffset: c * (1 - value / 100),
          style: { transition: 'stroke-dashoffset .9s var(--ease)' },
        }),
      ),
      React.createElement('div', {
        style: { position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' },
      },
        React.createElement('span', { style: { fontSize: size * 0.26, fontWeight: 700, letterSpacing: '-0.03em' } }, label != null ? label : value + '%'),
        sub ? React.createElement('span', { style: { fontSize: size * 0.13, color: 'var(--muted)', fontWeight: 500 } }, sub) : null,
      ),
    );
  }

  /* ---------- MetricCard ---------- */
  function MetricCard({ icon, iconTone = 'primary', label, value, delta, deltaDir, sub, spark, onClick }) {
    const [bg, fg] = TONES[iconTone] || TONES.primary;
    return React.createElement(Card, {
      hover: !!onClick, onClick, pad: 18,
      style: { cursor: onClick ? 'pointer' : 'default', minWidth: 0 },
    },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 } },
        React.createElement('div', {
          style: { width: 38, height: 38, borderRadius: 'var(--r-md)', background: bg, color: fg, display: 'flex', alignItems: 'center', justifyContent: 'center' },
        }, React.createElement(window.Icon, { name: icon, size: 19 })),
        delta != null ? React.createElement('span', {
          style: {
            display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 12.5, fontWeight: 650,
            color: deltaDir === 'down' ? 'var(--danger)' : 'var(--success)',
          },
        },
          React.createElement(window.Icon, { name: deltaDir === 'down' ? 'trendDown' : 'trendUp', size: 14 }), delta,
        ) : null,
      ),
      React.createElement('div', { style: { marginTop: 14, fontSize: 27, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1 } }, value),
      React.createElement('div', { style: { marginTop: 6, fontSize: 13, color: 'var(--muted)', fontWeight: 500 } }, label),
      sub ? React.createElement('div', { style: { marginTop: 4, fontSize: 12, color: 'var(--muted-2)' } }, sub) : null,
      spark ? React.createElement('div', { style: { marginTop: 12 } }, spark) : null,
    );
  }

  /* ---------- Skeleton ---------- */
  function Skeleton({ w = '100%', h = 14, r = 8, style }) {
    return React.createElement('div', { className: 'bz-skel', style: { width: w, height: h, borderRadius: r, ...style } });
  }

  /* ---------- EmptyState ---------- */
  function EmptyState({ icon = 'inbox', title, desc, action }) {
    return React.createElement('div', {
      style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '56px 24px' },
    },
      React.createElement('div', {
        style: { width: 56, height: 56, borderRadius: 'var(--r-lg)', background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)', marginBottom: 16 },
      }, React.createElement(window.Icon, { name: icon, size: 26 })),
      React.createElement('h4', { style: { fontSize: 16, fontWeight: 650 } }, title),
      desc ? React.createElement('p', { style: { fontSize: 13.5, color: 'var(--muted)', marginTop: 6, maxWidth: 340, lineHeight: 1.5 } }, desc) : null,
      action ? React.createElement('div', { style: { marginTop: 18 } }, action) : null,
    );
  }

  /* ---------- SectionTitle ---------- */
  function SectionTitle({ title, sub, action, style }) {
    return React.createElement('div', {
      style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, marginBottom: 16, ...style },
    },
      React.createElement('div', null,
        React.createElement('h3', { style: { fontSize: 18, fontWeight: 650, letterSpacing: '-0.02em' } }, title),
        sub ? React.createElement('p', { style: { fontSize: 13.5, color: 'var(--muted)', marginTop: 4 } }, sub) : null,
      ),
      action || null,
    );
  }

  /* ---------- Tooltip (simple) ---------- */
  function Tooltip({ label, children, side = 'top' }) {
    const [show, setShow] = useState(false);
    const pos = side === 'top'
      ? { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 8 }
      : { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: 8 };
    return React.createElement('span', {
      style: { position: 'relative', display: 'inline-flex' },
      onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false),
    },
      children,
      show ? React.createElement('span', {
        style: {
          position: 'absolute', ...pos, zIndex: 100, whiteSpace: 'nowrap', padding: '6px 10px',
          background: 'var(--text)', color: 'var(--surface)', fontSize: 12, fontWeight: 550,
          borderRadius: 'var(--r-sm)', boxShadow: 'var(--sh-md)', pointerEvents: 'none', animation: 'bz-fade-in .12s',
        },
      }, label) : null,
    );
  }

  /* ---------- Field label with hint ---------- */
  function FieldNote({ children }) {
    return React.createElement('p', { style: { fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.5, marginTop: 4 } }, children);
  }

  Object.assign(window, {
    Button, IconButton, Card, Badge, StatusBadge, Chip, Toggle, Avatar, Input,
    Segmented, Tabs, Modal, Drawer, ProgressBar, RingProgress, MetricCard,
    Skeleton, EmptyState, SectionTitle, Tooltip, FieldNote, BZ_TONES: TONES,
  });
})();