infaira-canvas 0.1.9

package/templates/resources/ican-components.js

@@ -0,0 +1,1734 @@
+/**
+ * ICan Components — InfAIra Canvas v2.0
+ * Complete local-dev mirror of window.ICanComponents (matches widget-bridge.ts production export).
+ * Pure vanilla JS IIFE — no imports, no CDN fetches (except MapComponent's lazy Leaflet).
+ * All colours use CSS custom properties.
+ *
+ * IMPORTANT: Prop signatures MUST match widget-bridge.ts (the canonical runtime).
+ *  - DataTable:   `rows`  (NOT `data`),  columns use `key`/`label`/`render` (NOT `title`/`renderColumn`)
+ *  - Select:      `value` (NOT `selected`)
+ *  - Tabs:        `tabs[].key` + `activeKey` + `onChange` (controlled, no internal selection)
+ *  - Modal:       `open` + `onClose` + `title` + `footer` + `width`
+ *  - Badge:       `label` + `variant` + `dot` (no children)
+ *  - IconButton:  `type` (limited set), `active`, `tooltip`
+ */
+(function () {
+  'use strict';
+
+  var R = window.React;
+  if (!R) { console.error('[ICan] React must be loaded before ican-components.js'); return; }
+
+  var useState   = R.useState;
+  var useEffect  = R.useEffect;
+  var useRef     = R.useRef;
+
+  function el() { return R.createElement.apply(R, arguments); }
+
+  /* ─────────────────────────────────────────────────────
+   * LAYOUT / SHELL
+   * ───────────────────────────────────────────────────── */
+
+  function WidgetWrapper(props) {
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }, props.style || {})
+    }, props.children);
+  }
+
+  function Loading(props) {
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', color: 'var(--ican-secondary-text)', gap: '8px', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      el('span', { style: { fontSize: '18px' } }, '⟳'),
+      el('span', null, props.label || 'Loading...')
+    );
+  }
+
+  function TitleBar(props) {
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', borderBottom: '1px solid var(--ican-border)', minHeight: '44px', flexShrink: 0 }, props.style || {})
+    },
+      el('div', null,
+        el('div', { style: { fontFamily: 'var(--ican-font-brand)', fontWeight: 600, fontSize: '12px', color: 'var(--ican-primary-text)', textTransform: 'uppercase', letterSpacing: '0.06em' } }, props.title),
+        props.subtitle ? el('div', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', marginTop: '2px' } }, props.subtitle) : null
+      ),
+      props.children ? el('div', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, props.children) : null
+    );
+  }
+
+  function FilterPanel(props) {
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap' }, props.style || {})
+    }, props.children);
+  }
+
+  function ErrorDisplay(props) {
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ padding: '16px', color: 'var(--ican-error)', background: 'rgba(237,48,131,0.1)', borderRadius: 'var(--ican-radius-md)', fontSize: '13px', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      '⚠ ',
+      props.message
+    );
+  }
+
+  function Card(props) {
+    var hasSlots = props.header != null || props.footer != null;
+    if (!hasSlots) {
+      return el('div', {
+        className: props.className,
+        style: Object.assign({ background: 'var(--ican-card-bg)', borderRadius: 'var(--ican-radius-md)', border: '1px solid var(--ican-border)', padding: '12px' }, props.style || {})
+      }, props.children);
+    }
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ background: 'var(--ican-card-bg)', borderRadius: 'var(--ican-radius-md)', border: '1px solid var(--ican-border)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }, props.style || {})
+    },
+      props.header ? el('div', { style: { padding: '10px 14px', borderBottom: '1px solid var(--ican-border)', fontWeight: 600, fontSize: '13px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)' } }, props.header) : null,
+      el('div', { style: { padding: '12px', flex: 1 } }, props.children),
+      props.footer ? el('div', { style: { padding: '10px 14px', borderTop: '1px solid var(--ican-border)', fontSize: '12px', color: 'var(--ican-secondary-text)', fontFamily: 'var(--ican-font-body)' } }, props.footer) : null
+    );
+  }
+
+  function DataList(props) {
+    var items = props.items || [];
+    return el('dl', { className: props.className, style: Object.assign({ margin: 0, padding: 0 }, props.style || {}) },
+      items.map(function (item) {
+        return el('div', {
+          key: item.label,
+          style: { display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: '1px solid var(--ican-border)', fontSize: '13px' }
+        },
+          el('dt', { style: { color: 'var(--ican-secondary-text)' } }, item.label),
+          el('dd', { style: { color: 'var(--ican-primary-text)', fontWeight: 500 } }, String(item.value))
+        );
+      })
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * BUTTONS
+   * ───────────────────────────────────────────────────── */
+
+  function Button(props) {
+    var variant = props.variant || 'primary';
+    var size = props.size || 'md';
+    var disabled = !!props.disabled;
+    var loading = !!props.loading;
+    var bgMap = { primary: 'var(--ican-accent)', secondary: 'transparent', danger: 'var(--ican-error)', ghost: 'transparent' };
+    var colorMap = { primary: '#fff', secondary: 'var(--ican-primary-text)', danger: '#fff', ghost: 'var(--ican-secondary-text)' };
+    var borderMap = { primary: 'none', secondary: '1px solid var(--ican-border)', danger: 'none', ghost: 'none' };
+    var paddingMap = { sm: '4px 10px', md: '7px 16px', lg: '10px 22px' };
+    var fontSizeMap = { sm: '11px', md: '13px', lg: '15px' };
+    return el('button', {
+      className: props.className,
+      onClick: disabled || loading ? undefined : props.onClick,
+      disabled: disabled || loading,
+      style: Object.assign({
+        background: bgMap[variant], color: colorMap[variant], border: borderMap[variant],
+        borderRadius: 'var(--ican-radius-md)', padding: paddingMap[size], fontSize: fontSizeMap[size],
+        fontFamily: 'var(--ican-font-body)', cursor: disabled || loading ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1, display: 'inline-flex', alignItems: 'center', gap: '6px',
+        lineHeight: 1.4, transition: 'opacity 0.15s, background var(--ican-transition-fast)'
+      }, props.style || {})
+    },
+      loading ? el('span', { style: { display: 'inline-block', animation: 'ican-spin 0.8s linear infinite', fontSize: '14px' } }, '↻')
+        : (props.icon ? el('span', { style: { display: 'inline-flex', alignItems: 'center', fontSize: '14px' } }, props.icon) : null),
+      props.label
+    );
+  }
+
+  function AsyncButton(props) {
+    var _s = useState(false);
+    var loading = _s[0]; var setLoading = _s[1];
+    var variant = props.variant || 'primary';
+    var bgMap = { primary: 'var(--ican-btn-primary-bg, var(--ican-accent))', secondary: 'var(--ican-btn-secondary-bg, transparent)', danger: 'var(--ican-error)' };
+    var colorMap = { primary: 'var(--ican-btn-primary-text, #fff)', secondary: 'var(--ican-btn-secondary-text, var(--ican-primary-text))', danger: '#fff' };
+    var borderMap = { primary: 'none', secondary: '1px solid var(--ican-border)', danger: 'none' };
+
+    function handleClick() {
+      if (loading || props.disabled) return;
+      setLoading(true);
+      Promise.resolve().then(function () { return props.onClick(); }).finally(function () { setLoading(false); });
+    }
+
+    return el('button', {
+      className: props.className,
+      onClick: handleClick,
+      disabled: props.disabled || loading,
+      style: Object.assign({ background: bgMap[variant], color: colorMap[variant], border: borderMap[variant], borderRadius: 'var(--ican-radius-md)', padding: '7px 16px', fontSize: '13px', fontFamily: 'var(--ican-font-body)', cursor: props.disabled || loading ? 'not-allowed' : 'pointer', opacity: props.disabled ? 0.5 : 1, display: 'inline-flex', alignItems: 'center', gap: '6px', transition: 'opacity var(--ican-transition-fast)' }, props.style || {})
+    },
+      loading ? el('span', { style: { display: 'inline-block', animation: 'ican-spin 0.8s linear infinite', fontSize: '14px' } }, '↻')
+        : (props.icon ? el('span', null, props.icon) : null),
+      loading ? (props.loadingLabel || 'Loading…') : props.label
+    );
+  }
+
+  function ConfirmButton(props) {
+    var _s = useState('idle');
+    var stage = _s[0]; var setStage = _s[1];
+    var timeoutRef = useRef(null);
+    var variant = props.variant || 'primary';
+
+    function handleClick() {
+      if (props.disabled || stage === 'loading') return;
+      if (stage === 'idle') {
+        setStage('confirm');
+        timeoutRef.current = setTimeout(function () { setStage('idle'); }, 3000);
+      } else if (stage === 'confirm') {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        setStage('loading');
+        Promise.resolve().then(function () { return props.onConfirm(); }).finally(function () { setStage('idle'); });
+      }
+    }
+
+    useEffect(function () { return function () { if (timeoutRef.current) clearTimeout(timeoutRef.current); }; }, []);
+
+    var bg = stage === 'confirm' ? 'var(--ican-warning)' : variant === 'danger' ? 'var(--ican-error)' : 'var(--ican-btn-primary-bg, var(--ican-accent))';
+    return el('button', {
+      className: props.className,
+      onClick: handleClick,
+      onBlur: function () { if (stage === 'confirm') { if (timeoutRef.current) clearTimeout(timeoutRef.current); setStage('idle'); } },
+      disabled: props.disabled || stage === 'loading',
+      style: Object.assign({ background: bg, color: '#fff', border: 'none', borderRadius: 'var(--ican-radius-md)', padding: '7px 16px', fontSize: '13px', fontFamily: 'var(--ican-font-body)', cursor: props.disabled ? 'not-allowed' : 'pointer', opacity: props.disabled ? 0.5 : 1, display: 'inline-flex', alignItems: 'center', gap: '6px', transition: 'background var(--ican-transition-fast)' }, props.style || {})
+    },
+      stage === 'loading' ? el('span', { style: { fontSize: '14px' } }, '↻') : null,
+      stage === 'idle' ? props.label : stage === 'confirm' ? (props.confirmLabel || 'Are you sure?') : 'Loading…'
+    );
+  }
+
+  var ICON_MAP = {
+    search: '⌕', close: '✕', done: '✓', edit: '✎', delete: '✕', add: '+', filter: '≡',
+    'arrow-up': '↑', 'arrow-down': '↓', 'arrow-left': '←', 'arrow-right': '→',
+    pin: '⊕', copy: '⧉', refresh: '↻'
+  };
+
+  function IconButton(props) {
+    var size = props.size || 'md';
+    var sizeMap = { sm: '22px', md: '28px', lg: '34px' };
+    var fontSizeMap = { sm: '12px', md: '14px', lg: '18px' };
+    var disabled = !!props.disabled;
+    var active = !!props.active;
+    return el('button', {
+      className: props.className,
+      onClick: disabled ? undefined : props.onClick,
+      disabled: disabled,
+      title: props.tooltip,
+      style: Object.assign({
+        width: sizeMap[size], height: sizeMap[size], display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        background: active ? 'var(--ican-accent)' : 'transparent',
+        color: active ? 'var(--ican-btn-primary-text, #fff)' : 'var(--ican-secondary-text)',
+        border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-sm)',
+        cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.4 : 1,
+        fontSize: fontSizeMap[size],
+        transition: 'background var(--ican-transition-fast), color var(--ican-transition-fast)',
+        fontFamily: 'var(--ican-font-body)'
+      }, props.style || {})
+    }, ICON_MAP[props.type] || props.type);
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * FORM INPUTS
+   * ───────────────────────────────────────────────────── */
+
+  function Input(props) {
+    var type = props.type || 'text';
+    var disabled = !!props.disabled;
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      props.label ? el('label', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500 } }, props.label) : null,
+      el('input', {
+        type: type, value: props.value, placeholder: props.placeholder, disabled: disabled,
+        onChange: function (e) { if (props.onChange) props.onChange(e.target.value); },
+        style: {
+          background: 'var(--ican-card-bg)',
+          border: props.error ? '1px solid var(--ican-error)' : '1px solid var(--ican-border)',
+          borderRadius: 'var(--ican-radius-md)', padding: '6px 10px', fontSize: '13px',
+          color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)',
+          outline: 'none', opacity: disabled ? 0.5 : 1, width: '100%', boxSizing: 'border-box'
+        }
+      }),
+      props.error ? el('span', { style: { fontSize: '11px', color: 'var(--ican-error)' } }, props.error) : null
+    );
+  }
+
+  function TextArea(props) {
+    var rows = props.rows || 4;
+    var disabled = !!props.disabled;
+    return el('div', { className: props.className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) },
+      props.label ? el('label', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500 } }, props.label) : null,
+      el('textarea', {
+        value: props.value, placeholder: props.placeholder, rows: rows, disabled: disabled, maxLength: props.maxLength,
+        onChange: function (e) { if (props.onChange) props.onChange(e.target.value); },
+        style: { background: 'var(--ican-input-bg, var(--ican-card-bg))', border: props.error ? '1px solid var(--ican-error)' : '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '6px 10px', fontSize: '13px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', outline: 'none', opacity: disabled ? 0.5 : 1, width: '100%', boxSizing: 'border-box', resize: 'both', lineHeight: 1.5 }
+      }),
+      el('div', { style: { display: 'flex', justifyContent: 'space-between' } },
+        props.error ? el('span', { style: { fontSize: '11px', color: 'var(--ican-error)' } }, props.error) : el('span', null),
+        props.maxLength ? el('span', { style: { fontSize: '11px', color: 'var(--ican-tertiary-text, var(--ican-secondary-text))' } }, (props.value || '').length + '/' + props.maxLength) : null
+      )
+    );
+  }
+
+  function Select(props) {
+    var disabled = !!props.disabled;
+    var value = props.value != null ? props.value : '';
+    return el('div', { className: props.className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) },
+      props.label ? el('label', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500 } }, props.label) : null,
+      el('select', {
+        value: value, disabled: disabled,
+        onChange: function (e) { if (props.onChange) props.onChange(e.target.value); },
+        style: {
+          background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)',
+          borderRadius: 'var(--ican-radius-md)', padding: '6px 10px', fontSize: '13px',
+          color: value ? 'var(--ican-primary-text)' : 'var(--ican-secondary-text)',
+          fontFamily: 'var(--ican-font-body)', outline: 'none', opacity: disabled ? 0.5 : 1,
+          width: '100%', cursor: disabled ? 'not-allowed' : 'pointer'
+        }
+      },
+        props.placeholder ? el('option', { value: '', disabled: true }, props.placeholder) : null,
+        (props.options || []).map(function (opt) {
+          return el('option', { key: opt.value, value: opt.value }, opt.label);
+        })
+      )
+    );
+  }
+
+  function Checkbox(props) {
+    var type = props.type || 'default';
+    var disabled = !!props.disabled;
+    var checked = !!props.checked;
+    var baseStyle = { display: 'inline-flex', alignItems: 'center', gap: '8px', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, fontFamily: 'var(--ican-font-body)', fontSize: '13px', color: 'var(--ican-primary-text)' };
+    function click() { if (!disabled && props.onChange) props.onChange(!checked); }
+
+    if (type === 'switch') {
+      return el('div', { className: props.className, style: Object.assign({}, baseStyle, props.style || {}), onClick: click },
+        el('div', { style: { width: '36px', height: '20px', borderRadius: '10px', background: checked ? 'var(--ican-accent)' : 'var(--ican-border)', position: 'relative', transition: 'background var(--ican-transition-fast)', flexShrink: 0 } },
+          el('div', { style: { position: 'absolute', top: '3px', left: checked ? '19px' : '3px', width: '14px', height: '14px', borderRadius: '50%', background: '#fff', transition: 'left var(--ican-transition-fast)', boxShadow: '0 1px 3px rgba(0,0,0,0.3)' } })
+        ),
+        props.label ? el('span', null, props.label) : null
+      );
+    }
+    if (type === 'toggle') {
+      return el('button', {
+        className: props.className,
+        onClick: click,
+        style: Object.assign({}, baseStyle, { gap: 0, background: checked ? 'var(--ican-accent)' : 'var(--ican-secondary-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-sm)', padding: '4px 12px', color: checked ? 'var(--ican-btn-primary-text, #fff)' : 'var(--ican-primary-text)', transition: 'background var(--ican-transition-fast)', fontSize: '13px' }, props.style || {})
+      }, props.label != null ? props.label : (checked ? 'On' : 'Off'));
+    }
+    if (type === 'indicator') {
+      return el('div', { className: props.className, style: Object.assign({}, baseStyle, props.style || {}), onClick: click },
+        el('div', { style: { width: '10px', height: '10px', borderRadius: '50%', background: checked ? 'var(--ican-success)' : 'var(--ican-border)', flexShrink: 0, transition: 'background var(--ican-transition-fast)' } }),
+        props.label ? el('span', null, props.label) : null
+      );
+    }
+    // default + bordered
+    var boxStyle = { width: '16px', height: '16px', borderRadius: 'var(--ican-radius-xs)', border: checked ? (type === 'bordered' ? '2px solid var(--ican-accent)' : '1px solid var(--ican-accent)') : '1px solid var(--ican-border)', background: checked ? 'var(--ican-accent)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'background var(--ican-transition-fast)', boxShadow: type === 'bordered' && checked ? '0 0 0 2px var(--ican-accent-dim)' : 'none' };
+    return el('div', { className: props.className, style: Object.assign({}, baseStyle, props.style || {}), onClick: click },
+      el('div', { style: boxStyle }, checked ? el('span', { style: { color: '#fff', fontSize: '11px', lineHeight: 1 } }, '✓') : null),
+      props.label ? el('span', null, props.label) : null
+    );
+  }
+
+  function MultiSelect(props) {
+    var _o = useState(false); var open = _o[0]; var setOpen = _o[1];
+    var _s = useState(''); var search = _s[0]; var setSearch = _s[1];
+    var ref = useRef(null);
+    var options = props.options || [];
+    var selected = props.selected || [];
+    var searchable = !!props.searchable;
+    var maxHeight = props.maxHeight || '200px';
+    var placeholder = props.placeholder || 'Select…';
+
+    useEffect(function () {
+      if (!open) return;
+      function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
+      document.addEventListener('mousedown', handler);
+      return function () { document.removeEventListener('mousedown', handler); };
+    }, [open]);
+
+    var filtered = searchable && search ? options.filter(function (o) { return o.label.toLowerCase().includes(search.toLowerCase()); }) : options;
+    function toggle(value) { if (props.onChange) props.onChange(selected.includes(value) ? selected.filter(function (v) { return v !== value; }) : selected.concat([value])); }
+    function removeChip(value, e) { e.stopPropagation(); if (props.onChange) props.onChange(selected.filter(function (v) { return v !== value; })); }
+    var selectedOpts = selected.map(function (v) { return options.find(function (o) { return o.value === v; }); }).filter(Boolean);
+
+    return el('div', { className: props.className, ref: ref, style: Object.assign({ position: 'relative', fontFamily: 'var(--ican-font-body)' }, props.style || {}) },
+      props.label ? el('label', { style: { display: 'block', fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500, marginBottom: '4px' } }, props.label) : null,
+      el('div', {
+        onClick: function () { setOpen(!open); },
+        style: { width: '100%', background: 'var(--ican-input-bg, var(--ican-card-bg))', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: selected.length === 0 ? '6px 10px' : '4px 8px', fontSize: '13px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left', minHeight: '32px', boxSizing: 'border-box' }
+      },
+        selected.length === 0
+          ? el('span', { style: { color: 'var(--ican-secondary-text)' } }, placeholder)
+          : el('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '4px', flex: 1 } },
+              selectedOpts.map(function (opt) {
+                return el('span', {
+                  key: opt.value,
+                  style: { display: 'inline-flex', alignItems: 'center', gap: '4px', background: 'var(--ican-accent-dim)', color: 'var(--ican-accent)', borderRadius: '999px', padding: '2px 8px', fontSize: '11px', fontWeight: 500 }
+                },
+                  opt.label,
+                  el('button', {
+                    onClick: function (e) { removeChip(opt.value, e); },
+                    style: { background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ican-accent)', fontSize: '12px', padding: 0, lineHeight: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }
+                  }, '×')
+                );
+              })
+            ),
+        el('span', { style: { fontSize: '10px', color: 'var(--ican-secondary-text)', marginLeft: '6px', flexShrink: 0 } }, open ? '▲' : '▼')
+      ),
+      open ? el('div', {
+        style: { position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', boxShadow: 'var(--ican-card-shadow)', zIndex: 100, overflow: 'hidden' }
+      },
+        searchable ? el('div', { style: { padding: '6px 8px', borderBottom: '1px solid var(--ican-border)' } },
+          el('input', {
+            value: search, placeholder: 'Search…',
+            onChange: function (e) { setSearch(e.target.value); },
+            style: { width: '100%', background: 'transparent', border: 'none', outline: 'none', fontSize: '12px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', boxSizing: 'border-box' }
+          })
+        ) : null,
+        el('div', { style: { maxHeight: maxHeight, overflowY: 'auto' } },
+          filtered.map(function (opt) {
+            return el('div', {
+              key: opt.value, onClick: function () { toggle(opt.value); },
+              style: { display: 'flex', alignItems: 'center', gap: '8px', padding: '7px 10px', cursor: 'pointer', fontSize: '13px', color: 'var(--ican-primary-text)', background: selected.includes(opt.value) ? 'var(--ican-accent-dim)' : 'transparent' }
+            },
+              el('div', { style: { width: '14px', height: '14px', borderRadius: 'var(--ican-radius-xs)', border: selected.includes(opt.value) ? '1px solid var(--ican-accent)' : '1px solid var(--ican-border)', background: selected.includes(opt.value) ? 'var(--ican-accent)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } },
+                selected.includes(opt.value) ? el('span', { style: { color: '#fff', fontSize: '10px' } }, '✓') : null
+              ),
+              opt.label
+            );
+          })
+        ),
+        selected.length > 0 ? el('div', { style: { borderTop: '1px solid var(--ican-border)', padding: '6px 10px' } },
+          el('button', { onClick: function () { if (props.onChange) props.onChange([]); }, style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '12px', color: 'var(--ican-secondary-text)', fontFamily: 'var(--ican-font-body)' } }, 'Clear all')
+        ) : null
+      ) : null
+    );
+  }
+
+  function ToggleFilter(props) {
+    var size = props.size || 'md';
+    return el('div', { className: props.className, style: Object.assign({ display: 'inline-flex', gap: '4px', flexWrap: 'wrap' }, props.style || {}) },
+      (props.options || []).map(function (opt) {
+        var active = opt.value === props.value;
+        return el('button', {
+          key: opt.value,
+          onClick: function () { if (props.onChange) props.onChange(opt.value); },
+          style: { padding: size === 'sm' ? '3px 10px' : '5px 14px', fontSize: size === 'sm' ? '11px' : '13px', borderRadius: '999px', border: '1px solid var(--ican-border)', background: active ? 'var(--ican-accent)' : 'var(--ican-secondary-bg)', color: active ? 'var(--ican-btn-primary-text, #fff)' : 'var(--ican-primary-text)', cursor: 'pointer', fontFamily: 'var(--ican-font-body)', transition: 'background var(--ican-transition-fast), color var(--ican-transition-fast)', fontWeight: active ? 600 : 400 }
+        }, opt.label);
+      })
+    );
+  }
+
+  function ColorPicker(props) {
+    var _o = useState(false); var open = _o[0]; var setOpen = _o[1];
+    var ref = useRef(null);
+    var presets = props.presets || ['var(--ican-accent)', 'var(--ican-success)', 'var(--ican-warning)', 'var(--ican-error)', 'var(--ican-info)', '#6366f1'];
+    useEffect(function () {
+      if (!open) return;
+      function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
+      document.addEventListener('mousedown', handler);
+      return function () { document.removeEventListener('mousedown', handler); };
+    }, [open]);
+    return el('div', { className: props.className, ref: ref, style: Object.assign({ display: 'inline-flex', flexDirection: 'column', gap: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) },
+      props.label ? el('label', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500 } }, props.label) : null,
+      el('div', { style: { position: 'relative' } },
+        el('div', {
+          onClick: function () { setOpen(!open); },
+          style: { width: '32px', height: '32px', borderRadius: 'var(--ican-radius-sm)', background: props.color, border: '2px solid var(--ican-border)', cursor: 'pointer', boxSizing: 'border-box' }
+        }),
+        open ? el('div', { style: { position: 'absolute', top: '38px', left: 0, background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '12px', boxShadow: 'var(--ican-card-shadow)', zIndex: 200, display: 'flex', flexDirection: 'column', gap: '10px', minWidth: '180px' } },
+          el('div', { style: { display: 'flex', gap: '6px', flexWrap: 'wrap' } },
+            presets.map(function (p, i) {
+              return el('div', {
+                key: i,
+                onClick: function () { if (props.onChange) props.onChange(p); setOpen(false); },
+                style: { width: '22px', height: '22px', borderRadius: 'var(--ican-radius-xs)', background: p, border: p === props.color ? '2px solid var(--ican-border-focus)' : '1px solid var(--ican-border)', cursor: 'pointer', boxSizing: 'border-box' }
+              });
+            })
+          ),
+          el('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+            el('input', { type: 'color', value: (props.color || '').startsWith('#') ? props.color : '#6366f1', onChange: function (e) { if (props.onChange) props.onChange(e.target.value); }, style: { width: '32px', height: '28px', border: 'none', padding: 0, cursor: 'pointer', background: 'transparent' } }),
+            el('input', { type: 'text', value: props.color, onChange: function (e) { if (props.onChange) props.onChange(e.target.value); }, style: { flex: 1, background: 'var(--ican-input-bg, var(--ican-card-bg))', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-sm)', padding: '4px 6px', fontSize: '12px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-mono)', outline: 'none' } })
+          )
+        ) : null
+      )
+    );
+  }
+
+  function SearchInput(props) {
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ position: 'relative', display: 'inline-flex', alignItems: 'center', width: '100%', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      el('input', {
+        type: 'text', value: props.value, placeholder: props.placeholder || 'Search…',
+        onChange: function (e) { if (props.onChange) props.onChange(e.target.value); },
+        style: { background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '6px 32px 6px 10px', fontSize: '13px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', outline: 'none', width: '100%', boxSizing: 'border-box' }
+      }),
+      props.value ? el('button', {
+        onClick: props.onClear ? props.onClear : function () { if (props.onChange) props.onChange(''); },
+        style: { position: 'absolute', right: '8px', background: 'none', border: 'none', cursor: 'pointer', fontSize: '14px', color: 'var(--ican-secondary-text)', lineHeight: 1, padding: 0 }
+      }, '×') : null
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * DATE / TIME PICKERS
+   * ───────────────────────────────────────────────────── */
+
+  function DatePicker(props) {
+    return el('div', { className: props.className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) },
+      props.label ? el('label', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500 } }, props.label) : null,
+      el('input', {
+        type: 'date',
+        value: props.value || '',
+        min: props.minDate, max: props.maxDate,
+        disabled: !!props.disabled, placeholder: props.placeholder,
+        onChange: function (e) { if (props.onChange) props.onChange(e.target.value); },
+        style: { background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '6px 10px', fontSize: '13px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', outline: 'none', opacity: props.disabled ? 0.5 : 1, width: '100%', boxSizing: 'border-box' }
+      })
+    );
+  }
+
+  function TimePicker(props) {
+    return el('div', { className: props.className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) },
+      props.label ? el('label', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500 } }, props.label) : null,
+      el('input', {
+        type: 'time',
+        value: props.value || '',
+        disabled: !!props.disabled, placeholder: props.placeholder,
+        onChange: function (e) { if (props.onChange) props.onChange(e.target.value); },
+        style: { background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '6px 10px', fontSize: '13px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', outline: 'none', opacity: props.disabled ? 0.5 : 1, width: '100%', boxSizing: 'border-box' }
+      })
+    );
+  }
+
+  function DateRangePicker(props) {
+    return el('div', { className: props.className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) },
+      props.label ? el('label', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500 } }, props.label) : null,
+      el('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+        el('input', {
+          type: 'date', value: props.startDate || '', disabled: !!props.disabled,
+          onChange: function (e) { if (props.onChange) props.onChange(e.target.value, props.endDate || ''); },
+          style: { background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '6px 10px', fontSize: '13px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', outline: 'none', flex: 1 }
+        }),
+        el('span', { style: { color: 'var(--ican-secondary-text)', fontSize: '12px' } }, '→'),
+        el('input', {
+          type: 'date', value: props.endDate || '', disabled: !!props.disabled,
+          onChange: function (e) { if (props.onChange) props.onChange(props.startDate || '', e.target.value); },
+          style: { background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '6px 10px', fontSize: '13px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', outline: 'none', flex: 1 }
+        })
+      )
+    );
+  }
+
+  function DateTimePicker(props) {
+    return el('div', { className: props.className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) },
+      props.label ? el('label', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500 } }, props.label) : null,
+      el('input', {
+        type: 'datetime-local',
+        value: props.value || '',
+        disabled: !!props.disabled,
+        onChange: function (e) { if (props.onChange) props.onChange(e.target.value); },
+        style: { background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '6px 10px', fontSize: '13px', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', outline: 'none', opacity: props.disabled ? 0.5 : 1, width: '100%', boxSizing: 'border-box' }
+      })
+    );
+  }
+
+  function CalendarView(props) {
+    var today = new Date();
+    var _cur = useState(new Date(today.getFullYear(), today.getMonth(), 1));
+    var cur = _cur[0]; var setCur = _cur[1];
+    var _sel = useState(null);
+    var selected = _sel[0]; var setSelected = _sel[1];
+
+    var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+    var days = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+    var yr = cur.getFullYear(); var mo = cur.getMonth();
+    var firstDay = new Date(yr, mo, 1).getDay();
+    var daysInMonth = new Date(yr, mo + 1, 0).getDate();
+    var cells = [];
+    for (var i = 0; i < firstDay; i++) cells.push(null);
+    for (var d = 1; d <= daysInMonth; d++) cells.push(d);
+
+    var highlighted = (props.dates || []).reduce(function (acc, s) {
+      var dt = new Date(s);
+      if (!isNaN(dt)) acc[dt.getFullYear() + '-' + (dt.getMonth()+1) + '-' + dt.getDate()] = true;
+      return acc;
+    }, {});
+
+    function isoStr(day) { return yr + '-' + String(mo+1).padStart(2,'0') + '-' + String(day).padStart(2,'0'); }
+
+    return el('div', { className: props.className, style: Object.assign({ fontFamily: 'var(--ican-font-body)', background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '16px', display: 'inline-block', minWidth: '240px' }, props.style || {}) },
+      el('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' } },
+        el('button', { onClick: function () { setCur(new Date(yr, mo - 1, 1)); }, style: { background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ican-secondary-text)', fontSize: '14px' } }, '←'),
+        el('span', { style: { fontSize: '13px', fontWeight: 600, color: 'var(--ican-primary-text)' } }, months[mo] + ' ' + yr),
+        el('button', { onClick: function () { setCur(new Date(yr, mo + 1, 1)); }, style: { background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ican-secondary-text)', fontSize: '14px' } }, '→')
+      ),
+      el('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: '1px', marginBottom: '4px' } },
+        days.map(function (d) {
+          return el('div', { key: d, style: { textAlign: 'center', fontSize: '10px', color: 'var(--ican-secondary-text)', fontWeight: 600, padding: '2px' } }, d);
+        })
+      ),
+      el('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: '2px' } },
+        cells.map(function (day, i) {
+          if (!day) return el('div', { key: 'e' + i });
+          var key = yr + '-' + (mo+1) + '-' + day;
+          var isHl = highlighted[key];
+          var isSel = selected && selected.getTime && selected.getFullYear() === yr && selected.getMonth() === mo && selected.getDate() === day;
+          var isToday = today.getFullYear() === yr && today.getMonth() === mo && today.getDate() === day;
+          var bg = 'transparent'; var color = 'var(--ican-primary-text)'; var fw = 400;
+          if (isSel) { bg = 'var(--ican-accent)'; color = 'var(--ican-btn-primary-text, #fff)'; fw = 700; }
+          else if (isHl) { bg = 'var(--ican-accent-dim)'; }
+          else if (isToday) { bg = 'rgba(99,102,241,0.15)'; fw = 600; }
+          return el('div', {
+            key: i,
+            onClick: function () { setSelected(new Date(yr, mo, day)); if (props.onSelectDate) props.onSelectDate(isoStr(day)); },
+            style: { textAlign: 'center', padding: '4px 2px', borderRadius: 'var(--ican-radius-sm)', background: bg, color: color, fontWeight: fw, cursor: 'pointer', fontSize: '12px', transition: 'background var(--ican-transition-fast)' }
+          }, day);
+        })
+      )
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * BADGE / STAT CARD / EMPTY STATE
+   * ───────────────────────────────────────────────────── */
+
+  function Badge(props) {
+    var variant = props.variant || 'default';
+    var dot = !!props.dot;
+    var colorMap = { default: 'var(--ican-secondary-text)', success: 'var(--ican-success, #22c55e)', warning: 'var(--ican-warning, #f59e0b)', error: 'var(--ican-error)', info: 'var(--ican-accent)' };
+    var bgMap = { default: 'rgba(128,128,128,0.12)', success: 'rgba(34,197,94,0.12)', warning: 'rgba(245,158,11,0.12)', error: 'rgba(237,48,131,0.12)', info: 'rgba(var(--ican-accent-rgb,99,102,241),0.12)' };
+    return el('span', {
+      className: props.className,
+      style: Object.assign({ display: 'inline-flex', alignItems: 'center', gap: '4px', padding: '2px 8px', borderRadius: '999px', fontSize: '11px', fontWeight: 500, fontFamily: 'var(--ican-font-body)', color: colorMap[variant], background: bgMap[variant], whiteSpace: 'nowrap' }, props.style || {})
+    },
+      dot ? el('span', { style: { width: '6px', height: '6px', borderRadius: '50%', background: colorMap[variant], flexShrink: 0 } }) : null,
+      props.label
+    );
+  }
+
+  function StatCard(props) {
+    var trend = props.trend;
+    var trendColor = trend === undefined ? undefined : (trend >= 0 ? 'var(--ican-success, #22c55e)' : 'var(--ican-error)');
+    var trendPrefix = trend !== undefined && trend >= 0 ? '▲ ' : '▼ ';
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: '6px', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      el('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
+        el('span', { style: { fontSize: '11px', color: 'var(--ican-secondary-text)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.05em' } }, props.label),
+        props.icon ? el('span', { style: { fontSize: '18px' } }, props.icon) : null
+      ),
+      el('div', { style: { display: 'flex', alignItems: 'baseline', gap: '4px' } },
+        el('span', { style: { fontSize: '28px', fontWeight: 700, color: 'var(--ican-primary-text)', lineHeight: 1 } }, String(props.value)),
+        props.unit ? el('span', { style: { fontSize: '13px', color: 'var(--ican-secondary-text)' } }, props.unit) : null
+      ),
+      el('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' } },
+        trend !== undefined ? el('span', { style: { fontSize: '12px', color: trendColor, fontWeight: 500 } }, trendPrefix + Math.abs(trend) + '%') : null,
+        props.description ? el('span', { style: { fontSize: '11px', color: 'var(--ican-tertiary-text, var(--ican-secondary-text))' } }, props.description) : null
+      )
+    );
+  }
+
+  function EmptyState(props) {
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '40px 24px', gap: '12px', textAlign: 'center', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      props.icon ? el('span', { style: { fontSize: '40px', lineHeight: 1 } }, props.icon) : null,
+      el('div', { style: { fontWeight: 600, fontSize: '14px', color: 'var(--ican-primary-text)' } }, props.title),
+      props.description ? el('div', { style: { fontSize: '13px', color: 'var(--ican-secondary-text)', maxWidth: '320px' } }, props.description) : null,
+      props.action ? el('div', { style: { marginTop: '4px' } }, props.action) : null
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * DATA TABLE  (rows / columns[].key + label + render)
+   * ───────────────────────────────────────────────────── */
+
+  function DataTable(props) {
+    var _sort = useState(null);
+    var sort = _sort[0]; var setSort = _sort[1];
+
+    var columns = props.columns || [];
+    var rawRows = props.rows || [];
+    var loading = !!props.loading;
+    var emptyMessage = props.emptyMessage || 'No data';
+    var stickyHeader = !!props.stickyHeader;
+
+    var rows = rawRows;
+    if (sort && sort.key) {
+      var col = columns.find(function (c) { return c.key === sort.key; });
+      if (col) {
+        rows = rawRows.slice().sort(function (a, b) {
+          var av = a[sort.key]; var bv = b[sort.key];
+          if (av == null) return 1; if (bv == null) return -1;
+          if (typeof av === 'number' && typeof bv === 'number') return sort.dir === 'asc' ? av - bv : bv - av;
+          return sort.dir === 'asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+        });
+      }
+    }
+
+    if (loading) return el(Loading, { label: 'Loading table...' });
+
+    function toggleSort(key) {
+      if (!sort || sort.key !== key) setSort({ key: key, dir: 'asc' });
+      else if (sort.dir === 'asc') setSort({ key: key, dir: 'desc' });
+      else setSort(null);
+    }
+
+    var headerCells = columns.map(function (col) {
+      var isSorted = sort && sort.key === col.key;
+      var arrow = isSorted ? (sort.dir === 'asc' ? ' ▲' : ' ▼') : '';
+      return el('th', {
+        key: col.key,
+        onClick: col.sortable ? function () { toggleSort(col.key); } : undefined,
+        style: Object.assign({
+          padding: '8px 12px', textAlign: 'left', fontSize: '11px', fontWeight: 600,
+          color: isSorted ? 'var(--ican-accent)' : 'var(--ican-secondary-text)', textTransform: 'uppercase', letterSpacing: '0.05em',
+          borderBottom: '1px solid var(--ican-border)', background: 'var(--ican-card-bg)',
+          whiteSpace: 'nowrap', width: col.width,
+          cursor: col.sortable ? 'pointer' : 'default',
+          userSelect: 'none'
+        }, stickyHeader ? { position: 'sticky', top: 0, zIndex: 1 } : {})
+      }, col.label + arrow);
+    });
+
+    var bodyContent = rows.length === 0
+      ? el('tr', null,
+          el('td', {
+            colSpan: columns.length,
+            style: { padding: '32px', textAlign: 'center', color: 'var(--ican-secondary-text)', fontSize: '13px', fontFamily: 'var(--ican-font-body)' }
+          }, emptyMessage)
+        )
+      : rows.map(function (row, rowIdx) {
+          return el('tr', {
+            key: rowIdx,
+            onClick: props.onRowClick ? function () { props.onRowClick(row); } : undefined,
+            onMouseEnter: function (e) { e.currentTarget.style.background = 'var(--ican-hover, var(--ican-secondary-bg))'; },
+            onMouseLeave: function (e) { e.currentTarget.style.background = 'transparent'; },
+            style: { cursor: props.onRowClick ? 'pointer' : 'default', transition: 'background 0.1s' }
+          },
+            columns.map(function (col) {
+              return el('td', {
+                key: col.key,
+                style: { padding: '8px 12px', fontSize: '13px', color: 'var(--ican-primary-text)', borderBottom: '1px solid var(--ican-border)', fontFamily: 'var(--ican-font-body)' }
+              }, col.render ? col.render(row[col.key], row) : String(row[col.key] != null ? row[col.key] : ''));
+            })
+          );
+        });
+
+    return el('div', { className: props.className, style: Object.assign({ overflowX: 'auto', width: '100%' }, props.style || {}) },
+      el('table', { style: { width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--ican-font-body)' } },
+        el('thead', null, el('tr', null, headerCells)),
+        el('tbody', null, bodyContent)
+      )
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * DATA GRID
+   * ───────────────────────────────────────────────────── */
+
+  function DataGrid(props) {
+    var items = props.items || [];
+    var columns = props.columns || 3;
+    var gap = props.gap || '12px';
+    var loading = !!props.loading;
+    var emptyMessage = props.emptyMessage || 'No items';
+    if (loading) return el(Loading, { label: 'Loading…' });
+    if (items.length === 0) return el('div', { className: props.className, style: Object.assign({ padding: '32px', textAlign: 'center', color: 'var(--ican-secondary-text)', fontSize: '13px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) }, emptyMessage);
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: 'grid', gridTemplateColumns: 'repeat(' + columns + ', 1fr)', gap: gap }, props.style || {})
+    },
+      items.map(function (item, i) { return props.renderItem(item, i); })
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * ITEM CARD / ITEM LIST CARD / PROFILE IMAGE
+   * ───────────────────────────────────────────────────── */
+
+  function ProfileImage(props) {
+    var size = props.size || 'md';
+    var sizeMap = { xs: '20px', sm: '28px', md: '36px', lg: '48px' };
+    var fontMap = { xs: '9px', sm: '11px', md: '13px', lg: '17px' };
+    var initials = (props.name || '?').split(' ').map(function (w) { return w[0] || ''; }).join('').slice(0, 2).toUpperCase();
+    var hash = Array.from(props.name || '').reduce(function (a, c) { return a + c.charCodeAt(0); }, 0);
+    var colors = ['var(--ican-accent)', 'var(--ican-success)', 'var(--ican-info)', 'var(--ican-warning)'];
+    var bg = props.bgColor || colors[hash % colors.length];
+    var dim = sizeMap[size];
+    if (props.image) {
+      return el('img', { className: props.className, src: props.image, alt: props.name, style: Object.assign({ width: dim, height: dim, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }, props.style || {}) });
+    }
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ width: dim, height: dim, borderRadius: '50%', background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: fontMap[size], fontWeight: 700, flexShrink: 0, fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    }, initials);
+  }
+
+  function ItemCard(props) {
+    var name = props.name || props.title;
+    var initials = (name || '').split(' ').map(function (w) { return w[0] || ''; }).join('').slice(0, 2).toUpperCase();
+    var hash = Array.from(name || '').reduce(function (a, c) { return a + c.charCodeAt(0); }, 0);
+    var colors = ['var(--ican-accent)', 'var(--ican-success)', 'var(--ican-info)', 'var(--ican-warning)'];
+    var bg = colors[hash % colors.length];
+    return el('div', {
+      className: props.className,
+      onClick: props.onClick,
+      onMouseEnter: props.onClick ? function (e) { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--ican-card-hover-shadow, 0 6px 18px rgba(0,0,0,0.18))'; } : undefined,
+      onMouseLeave: props.onClick ? function (e) { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; } : undefined,
+      style: Object.assign({ background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '14px', display: 'flex', flexDirection: 'column', gap: '10px', cursor: props.onClick ? 'pointer' : 'default', transition: 'transform var(--ican-transition-fast), box-shadow var(--ican-transition-fast)', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      el('div', { style: { display: 'flex', gap: '10px', alignItems: 'center' } },
+        props.image
+          ? el('img', { src: props.image, alt: name, style: { width: '36px', height: '36px', borderRadius: '50%', objectFit: 'cover', flexShrink: 0 } })
+          : el('div', { style: { width: '36px', height: '36px', borderRadius: '50%', background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '13px', fontWeight: 700, flexShrink: 0 } }, initials),
+        el('div', { style: { flex: 1, minWidth: 0 } },
+          el('div', { style: { fontWeight: 600, fontSize: '13px', color: 'var(--ican-primary-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, props.title),
+          props.subtitle ? el('div', { style: { fontSize: '12px', color: 'var(--ican-secondary-text)', marginTop: '2px' } }, props.subtitle) : null
+        )
+      ),
+      props.meta ? el('div', { style: { fontSize: '12px', color: 'var(--ican-tertiary-text, var(--ican-secondary-text))' } }, props.meta) : null,
+      props.actions ? el('div', { style: { display: 'flex', gap: '6px', marginTop: '2px' } }, props.actions) : null
+    );
+  }
+
+  function ItemListCard(props) {
+    return el('div', {
+      className: props.className,
+      onClick: props.onClick,
+      style: Object.assign({ background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '14px', display: 'flex', flexDirection: 'column', gap: '10px', cursor: props.onClick ? 'pointer' : 'default', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      el('div', null,
+        el('div', { style: { fontWeight: 600, fontSize: '13px', color: 'var(--ican-primary-text)' } }, props.title),
+        props.subtitle ? el('div', { style: { fontSize: '12px', color: 'var(--ican-secondary-text)', marginTop: '2px' } }, props.subtitle) : null
+      ),
+      el('dl', { style: { margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '4px' } },
+        (props.fields || []).map(function (f, i) {
+          return el('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: '13px', gap: '8px' } },
+            el('dt', { style: { color: 'var(--ican-secondary-text)', flexShrink: 0 } }, f.label),
+            el('dd', { style: { color: 'var(--ican-primary-text)', fontWeight: 500, textAlign: 'right', margin: 0 } }, f.value)
+          );
+        })
+      ),
+      props.actions ? el('div', { style: { display: 'flex', gap: '6px', paddingTop: '6px', borderTop: '1px solid var(--ican-border)' } }, props.actions) : null
+    );
+  }
+
+  function HorizontalScrollList(props) {
+    var items = props.items || [];
+    var itemWidth = props.itemWidth || '200px';
+    return el('div', { className: props.className, style: Object.assign({ display: 'flex', gap: '12px', overflowX: 'auto', paddingBottom: '4px', scrollbarWidth: 'thin' }, props.style || {}) },
+      items.map(function (item, i) {
+        return el('div', { key: i, style: { flexShrink: 0, width: itemWidth } }, props.renderItem(item, i));
+      })
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * NOTIFICATION BLOCK
+   * ───────────────────────────────────────────────────── */
+
+  function NotificationBlock(props) {
+    var type = props.type || 'info';
+    var colorMap = { info: 'var(--ican-info)', success: 'var(--ican-success)', warning: 'var(--ican-warning)', error: 'var(--ican-error)' };
+    var bgMap = { info: 'rgba(99,102,241,0.08)', success: 'var(--ican-success-dim)', warning: 'var(--ican-warning-dim)', error: 'var(--ican-error-dim)' };
+    var defaultIcons = { info: 'ℹ', success: '✓', warning: '⚠', error: '✕' };
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: 'flex', alignItems: 'flex-start', gap: '10px', padding: '12px 14px', borderRadius: 'var(--ican-radius-md)', background: bgMap[type], border: '1px solid ' + colorMap[type], borderLeft: '4px solid ' + colorMap[type], fontFamily: 'var(--ican-font-body)', fontSize: '13px' }, props.style || {})
+    },
+      el('span', { style: { color: colorMap[type], fontWeight: 700, flexShrink: 0, marginTop: '1px' } }, props.icon || defaultIcons[type]),
+      el('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: '2px', lineHeight: 1.5 } },
+        props.title ? el('div', { style: { color: 'var(--ican-primary-text)', fontWeight: 600, fontSize: '13px' } }, props.title) : null,
+        el('div', { style: { color: props.title ? 'var(--ican-secondary-text)' : 'var(--ican-primary-text)', fontSize: '13px' } }, props.message)
+      ),
+      props.onClose ? el('button', { onClick: props.onClose, style: { background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ican-secondary-text)', fontSize: '14px', padding: 0, flexShrink: 0 } }, '✕') : null
+    );
+  }
+
+  function SampleDataLabel(props) {
+    if (props.show === false) return null;
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ position: 'absolute', top: '8px', right: '8px', background: 'var(--ican-warning-dim)', color: 'var(--ican-warning)', border: '1px solid var(--ican-warning)', borderRadius: 'var(--ican-radius-xs)', padding: '2px 6px', fontSize: '10px', fontWeight: 600, fontFamily: 'var(--ican-font-body)', pointerEvents: 'none', zIndex: 10 }, props.style || {})
+    }, 'Sample Data');
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * TOOLTIP / POPOVER / DROPDOWN BUTTON
+   * ───────────────────────────────────────────────────── */
+
+  function Tooltip(props) {
+    var _v = useState(false); var visible = _v[0]; var setVisible = _v[1];
+    var timer = useRef(null);
+    var position = props.position || 'top';
+    var delay = props.delay != null ? props.delay : 200;
+    var posStyles = {
+      top: { bottom: 'calc(100% + 6px)', left: '50%', transform: 'translateX(-50%)' },
+      bottom: { top: 'calc(100% + 6px)', left: '50%', transform: 'translateX(-50%)' },
+      left: { right: 'calc(100% + 6px)', top: '50%', transform: 'translateY(-50%)' },
+      right: { left: 'calc(100% + 6px)', top: '50%', transform: 'translateY(-50%)' }
+    };
+    function show() {
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(function () { setVisible(true); }, delay);
+    }
+    function hide() {
+      if (timer.current) clearTimeout(timer.current);
+      setVisible(false);
+    }
+    useEffect(function () { return function () { if (timer.current) clearTimeout(timer.current); }; }, []);
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ position: 'relative', display: 'inline-flex' }, props.style || {}),
+      onMouseEnter: show,
+      onMouseLeave: hide
+    },
+      props.children,
+      visible ? el('div', {
+        style: Object.assign({ position: 'absolute', background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-sm)', padding: '5px 9px', fontSize: '12px', color: 'var(--ican-primary-text)', whiteSpace: 'nowrap', zIndex: 9000, boxShadow: 'var(--ican-card-shadow)', pointerEvents: 'none', fontFamily: 'var(--ican-font-body)' }, posStyles[position])
+      }, props.content) : null
+    );
+  }
+
+  function Popover(props) {
+    var _o = useState(false); var open = _o[0]; var setOpen = _o[1];
+    var ref = useRef(null);
+    var position = props.position || 'bottom';
+    function toggle() {
+      var next = !open;
+      setOpen(next);
+      if (next) { if (props.onOpen) props.onOpen(); } else { if (props.onClose) props.onClose(); }
+    }
+    useEffect(function () {
+      if (!open) return;
+      function handler(e) { if (ref.current && !ref.current.contains(e.target)) { setOpen(false); if (props.onClose) props.onClose(); } }
+      document.addEventListener('mousedown', handler);
+      return function () { document.removeEventListener('mousedown', handler); };
+    }, [open]);
+    var posStyles = {
+      bottom: { top: 'calc(100% + 6px)', left: 0 },
+      top: { bottom: 'calc(100% + 6px)', left: 0 },
+      right: { left: 'calc(100% + 6px)', top: 0 },
+      left: { right: 'calc(100% + 6px)', top: 0 }
+    };
+    return el('div', { className: props.className, ref: ref, style: Object.assign({ position: 'relative', display: 'inline-flex' }, props.style || {}) },
+      el('div', { onClick: toggle }, props.trigger),
+      open ? el('div', {
+        style: Object.assign({ position: 'absolute', background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', boxShadow: 'var(--ican-card-shadow)', zIndex: 500, minWidth: '180px' }, posStyles[position])
+      }, props.content) : null
+    );
+  }
+
+  function DropDownButton(props) {
+    var _o = useState(false); var open = _o[0]; var setOpen = _o[1];
+    var ref = useRef(null);
+    var position = props.position || 'bottom-left';
+    useEffect(function () {
+      if (!open) return;
+      function handler(e) { if (ref.current && !ref.current.contains(e.target)) { setOpen(false); if (props.onClose) props.onClose(); } }
+      document.addEventListener('mousedown', handler);
+      return function () { document.removeEventListener('mousedown', handler); };
+    }, [open]);
+    var posMap = {
+      'bottom-left': { top: 'calc(100% + 4px)', left: 0 },
+      'bottom-right': { top: 'calc(100% + 4px)', right: 0 },
+      'top-left': { bottom: 'calc(100% + 4px)', left: 0 },
+      'top-right': { bottom: 'calc(100% + 4px)', right: 0 }
+    };
+    return el('div', { className: props.className, ref: ref, style: Object.assign({ position: 'relative', display: 'inline-flex' }, props.style || {}) },
+      el('button', {
+        onClick: function () { var n = !open; setOpen(n); if (n) { if (props.onOpen) props.onOpen(); } else { if (props.onClose) props.onClose(); } },
+        style: { display: 'inline-flex', alignItems: 'center', gap: '6px', padding: '7px 12px', fontSize: '13px', background: 'var(--ican-btn-secondary-bg, transparent)', color: 'var(--ican-primary-text)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', cursor: 'pointer', fontFamily: 'var(--ican-font-body)' }
+      },
+        props.icon ? el('span', null, props.icon) : null,
+        props.label,
+        el('span', { style: { fontSize: '9px', color: 'var(--ican-secondary-text)', marginLeft: '2px' } }, open ? '▲' : '▼')
+      ),
+      open ? el('div', {
+        style: Object.assign({ position: 'absolute', background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', boxShadow: 'var(--ican-card-shadow)', zIndex: 500, minWidth: '160px', overflow: 'hidden' }, posMap[position])
+      }, props.children) : null
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * TABS / MODAL / PAGINATION  (controlled — activeKey + onChange)
+   * ───────────────────────────────────────────────────── */
+
+  function Tabs(props) {
+    var tabs = props.tabs || [];
+    function handleKey(e) {
+      if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+      var idx = tabs.findIndex(function (t) { return t.key === props.activeKey; });
+      if (idx < 0) return;
+      var next = e.key === 'ArrowRight' ? (idx + 1) % tabs.length : (idx - 1 + tabs.length) % tabs.length;
+      if (props.onChange) props.onChange(tabs[next].key);
+      e.preventDefault();
+    }
+    return el('div', {
+      className: props.className,
+      role: 'tablist',
+      onKeyDown: handleKey,
+      style: Object.assign({ display: 'flex', borderBottom: '1px solid var(--ican-border)', gap: 0, fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      tabs.map(function (tab) {
+        var isActive = tab.key === props.activeKey;
+        return el('button', {
+          key: tab.key,
+          role: 'tab',
+          'aria-selected': isActive,
+          tabIndex: isActive ? 0 : -1,
+          onClick: function () { if (props.onChange) props.onChange(tab.key); },
+          style: { padding: '8px 16px', fontSize: '13px', fontWeight: isActive ? 600 : 400, color: isActive ? 'var(--ican-accent)' : 'var(--ican-secondary-text)', background: 'transparent', border: 'none', borderBottom: isActive ? '2px solid var(--ican-accent)' : '2px solid transparent', cursor: 'pointer', fontFamily: 'var(--ican-font-body)', transition: 'color 0.15s', marginBottom: '-1px', outline: 'none' }
+        }, tab.label);
+      })
+    );
+  }
+
+  function Modal(props) {
+    var closable = props.closable !== false;
+    useEffect(function () {
+      if (!props.open || !closable) return;
+      function onKey(e) { if (e.key === 'Escape' && props.onClose) props.onClose(); }
+      document.addEventListener('keydown', onKey);
+      return function () { document.removeEventListener('keydown', onKey); };
+    }, [props.open, props.onClose, closable]);
+    if (!props.open) return null;
+    var width = props.width || '480px';
+    var ReactDOM = window.ReactDOM;
+    var inner = el('div', {
+      className: props.className,
+      onClick: function (e) { if (closable && e.target === e.currentTarget && props.onClose) props.onClose(); },
+      style: Object.assign({ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      el('div', {
+        style: { background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', width: width, maxWidth: '96vw', maxHeight: '90vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }
+      },
+        props.title ? el('div', {
+          style: { padding: '14px 16px', borderBottom: '1px solid var(--ican-border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }
+        },
+          el('span', { style: { fontWeight: 600, fontSize: '14px', color: 'var(--ican-primary-text)' } }, props.title),
+          closable ? el('button', { onClick: props.onClose, style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', color: 'var(--ican-secondary-text)', lineHeight: 1, padding: '0 2px' } }, '×') : null
+        ) : null,
+        el('div', { style: { padding: '16px', overflowY: 'auto', flex: 1 } }, props.children),
+        props.footer ? el('div', {
+          style: { padding: '12px 16px', borderTop: '1px solid var(--ican-border)', display: 'flex', justifyContent: 'flex-end', gap: '8px', flexShrink: 0 }
+        }, props.footer) : null
+      )
+    );
+    if (ReactDOM && ReactDOM.createPortal) return ReactDOM.createPortal(inner, document.body);
+    return inner;
+  }
+
+  function Pagination(props) {
+    var _j = useState('');
+    var jump = _j[0]; var setJump = _j[1];
+    var page = props.page;
+    var pageSize = props.pageSize;
+    var total = props.total;
+    var totalPages = Math.max(1, Math.ceil(total / pageSize));
+    var start = Math.min((page - 1) * pageSize + 1, total);
+    var end = Math.min(page * pageSize, total);
+    function applyJump() {
+      var n = parseInt(jump, 10);
+      if (!isNaN(n) && n >= 1 && n <= totalPages) props.onChange(n);
+      setJump('');
+    }
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: 'flex', alignItems: 'center', gap: '12px', fontFamily: 'var(--ican-font-body)', fontSize: '13px', color: 'var(--ican-secondary-text)', flexWrap: 'wrap' }, props.style || {})
+    },
+      el('span', null, 'Showing ' + start + '–' + end + ' of ' + total),
+      el('div', { style: { display: 'flex', gap: '6px', alignItems: 'center' } },
+        el('button', {
+          onClick: function () { props.onChange(page - 1); },
+          disabled: page <= 1,
+          style: { padding: '4px 10px', fontSize: '12px', background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', color: 'var(--ican-primary-text)', cursor: page <= 1 ? 'not-allowed' : 'pointer', opacity: page <= 1 ? 0.4 : 1, fontFamily: 'var(--ican-font-body)' }
+        }, 'Prev'),
+        el('span', { style: { fontSize: '12px', color: 'var(--ican-secondary-text)' } }, 'Page ' + page + ' / ' + totalPages),
+        el('button', {
+          onClick: function () { props.onChange(page + 1); },
+          disabled: page >= totalPages,
+          style: { padding: '4px 10px', fontSize: '12px', background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', color: 'var(--ican-primary-text)', cursor: page >= totalPages ? 'not-allowed' : 'pointer', opacity: page >= totalPages ? 0.4 : 1, fontFamily: 'var(--ican-font-body)' }
+        }, 'Next')
+      ),
+      totalPages > 5 ? el('div', { style: { display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px' } },
+        el('span', null, 'Go to'),
+        el('input', {
+          type: 'number', min: 1, max: totalPages, value: jump,
+          onChange: function (e) { setJump(e.target.value); },
+          onKeyDown: function (e) { if (e.key === 'Enter') applyJump(); },
+          onBlur: applyJump,
+          style: { width: '52px', padding: '3px 6px', fontSize: '12px', background: 'var(--ican-card-bg)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-sm)', color: 'var(--ican-primary-text)', fontFamily: 'var(--ican-font-body)', outline: 'none', textAlign: 'center' }
+        })
+      ) : null
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * WIZARD / MODAL WIZARD
+   * ───────────────────────────────────────────────────── */
+
+  function Wizard(props) {
+    var steps = props.steps || [];
+    var _i = useState(0); var activeIdx = _i[0]; var setActiveIdx = _i[1];
+    var _l = useState(false); var loading = _l[0]; var setLoading = _l[1];
+    var _d = useState(false); var done = _d[0]; var setDone = _d[1];
+    var isFirst = activeIdx === 0;
+    var isLast = activeIdx === steps.length - 1;
+
+    function goNext() {
+      var step = steps[activeIdx];
+      function proceed() {
+        if (isLast) { setDone(true); if (props.onComplete) props.onComplete(); }
+        else setActiveIdx(activeIdx + 1);
+      }
+      if (step && step.onNext) {
+        setLoading(true);
+        Promise.resolve(step.onNext()).then(function (ok) {
+          setLoading(false);
+          if (ok !== false) proceed();
+        }).catch(function () { setLoading(false); });
+      } else { proceed(); }
+    }
+
+    if (done) return el('div', { className: props.className, style: Object.assign({ textAlign: 'center', padding: '32px', fontFamily: 'var(--ican-font-body)', color: 'var(--ican-primary-text)', fontWeight: 600, fontSize: '15px' }, props.style || {}) }, props.completionTitle || 'Done!');
+
+    var step = steps[activeIdx] || {};
+    return el('div', { className: props.className, style: Object.assign({ display: 'flex', flexDirection: 'column', gap: '16px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) },
+      el('div', { style: { display: 'flex', alignItems: 'center', gap: 0 } },
+        steps.reduce(function (out, s, i) {
+          var completed = i < activeIdx; var active = i === activeIdx;
+          out.push(el('div', { key: s.id, style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' } },
+            el('div', { style: { width: '28px', height: '28px', borderRadius: '50%', background: completed ? 'var(--ican-success)' : active ? 'var(--ican-accent)' : 'var(--ican-secondary-bg)', border: '2px solid ' + (completed ? 'var(--ican-success)' : active ? 'var(--ican-accent)' : 'var(--ican-border)'), display: 'flex', alignItems: 'center', justifyContent: 'center', color: completed || active ? '#fff' : 'var(--ican-secondary-text)', fontSize: '12px', fontWeight: 700 } }, completed ? '✓' : String(i + 1)),
+            el('span', { style: { fontSize: '10px', color: active ? 'var(--ican-accent)' : 'var(--ican-secondary-text)', fontWeight: active ? 600 : 400, whiteSpace: 'nowrap' } }, s.title)
+          ));
+          if (i < steps.length - 1) {
+            out.push(el('div', { key: 'l' + i, style: { flex: 1, height: '2px', background: i < activeIdx ? 'var(--ican-success)' : 'var(--ican-border)', margin: '0 4px', marginBottom: '18px' } }));
+          }
+          return out;
+        }, [])
+      ),
+      el('div', { style: { flex: 1 } }, step.render ? step.render({ next: goNext, prev: function () { setActiveIdx(Math.max(0, activeIdx - 1)); }, isFirst: isFirst, isLast: isLast }) : null),
+      el('div', { style: { display: 'flex', justifyContent: 'space-between', paddingTop: '12px', borderTop: '1px solid var(--ican-border)' } },
+        el('button', { onClick: function () { setActiveIdx(Math.max(0, activeIdx - 1)); }, disabled: isFirst || loading, style: { padding: '7px 16px', fontSize: '13px', background: 'transparent', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', color: 'var(--ican-primary-text)', cursor: isFirst ? 'not-allowed' : 'pointer', opacity: isFirst ? 0.4 : 1, fontFamily: 'var(--ican-font-body)' } }, '← Prev'),
+        el('button', { onClick: goNext, disabled: loading, style: { padding: '7px 16px', fontSize: '13px', background: 'var(--ican-accent)', border: 'none', borderRadius: 'var(--ican-radius-md)', color: 'var(--ican-btn-primary-text, #fff)', cursor: loading ? 'wait' : 'pointer', fontFamily: 'var(--ican-font-body)', display: 'inline-flex', alignItems: 'center', gap: '6px' } },
+          loading ? el('span', null, '↻') : null,
+          isLast ? 'Finish' : 'Next →'
+        )
+      )
+    );
+  }
+
+  function ModalWizard(props) {
+    return el(Modal, { open: props.open, onClose: props.onClose, title: props.title || 'Wizard', width: props.width || '640px' },
+      el('div', { className: props.className, style: Object.assign({ display: 'flex', gap: 0, minHeight: '300px' }, props.style || {}) },
+        el('div', { style: { width: '160px', flexShrink: 0, borderRight: '1px solid var(--ican-border)', paddingRight: '12px', display: 'flex', flexDirection: 'column', gap: '4px' } },
+          (props.steps || []).map(function (s, i) {
+            return el('div', { key: s.id, style: { display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 8px', borderRadius: 'var(--ican-radius-sm)', fontSize: '12px', color: 'var(--ican-secondary-text)' } },
+              el('div', { style: { width: '18px', height: '18px', borderRadius: '50%', background: 'var(--ican-secondary-bg)', border: '1px solid var(--ican-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px', flexShrink: 0 } }, String(i + 1)),
+              s.title
+            );
+          })
+        ),
+        el('div', { style: { flex: 1, paddingLeft: '16px' } },
+          el(Wizard, {
+            steps: props.steps,
+            onComplete: function () { if (props.onComplete) props.onComplete(); if (props.onClose) props.onClose(); },
+            completionTitle: props.completionTitle
+          })
+        )
+      )
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * FORM FIELD / LABEL / FORM FEEDBACK
+   * ───────────────────────────────────────────────────── */
+
+  function Label(props) {
+    return el('label', {
+      className: props.className,
+      style: Object.assign({ display: 'block', fontSize: '12px', fontWeight: 500, color: 'var(--ican-secondary-text)', marginBottom: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    },
+      props.children,
+      props.required ? el('span', { style: { color: 'var(--ican-error)', marginLeft: '2px' } }, '*') : null
+    );
+  }
+
+  function FormField(props) {
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: props.inline ? 'flex' : 'block', alignItems: props.inline ? 'center' : undefined, gap: props.inline ? '12px' : undefined, marginBottom: '12px' }, props.style || {})
+    },
+      props.label ? el('label', {
+        style: { display: 'block', fontSize: '12px', fontWeight: 500, color: 'var(--ican-secondary-text)', marginBottom: '4px', fontFamily: 'var(--ican-font-body)' }
+      },
+        props.label,
+        props.required ? el('span', { style: { color: 'var(--ican-error)', marginLeft: '2px' } }, '*') : null
+      ) : null,
+      el('div', { style: { flex: props.inline ? 1 : undefined } }, props.children),
+      props.hint && !props.error ? el('div', { style: { fontSize: '11px', color: 'var(--ican-tertiary-text)', marginTop: '4px' } }, props.hint) : null,
+      props.error ? el('div', { style: { fontSize: '11px', color: 'var(--ican-error)', marginTop: '4px' } }, props.error) : null
+    );
+  }
+
+  function FormFeedback(props) {
+    var valid = props.validInput !== false;
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ padding: '8px 12px', borderRadius: 'var(--ican-radius-sm)', fontSize: '12px', background: valid ? 'rgba(34,197,94,0.1)' : 'rgba(239,68,68,0.1)', color: valid ? 'var(--ican-success)' : 'var(--ican-error)', border: '1px solid ' + (valid ? 'rgba(34,197,94,0.3)' : 'rgba(239,68,68,0.3)'), marginTop: '4px', fontFamily: 'var(--ican-font-body)' }, props.style || {})
+    }, props.children);
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * SVG CHARTS
+   * ───────────────────────────────────────────────────── */
+
+  var PIE_COLORS = ['var(--ican-accent)', 'var(--ican-success)', 'var(--ican-warning)', 'var(--ican-info)', 'var(--ican-error)', '#8b5cf6', '#ec4899', '#14b8a6', '#f97316', '#06b6d4'];
+
+  function PieChart(props) {
+    var R = window.React;
+    var hoverState = R.useState(null); var hovered = hoverState[0]; var setHovered = hoverState[1];
+    var posState = R.useState({ x: 0, y: 0 }); var pos = posState[0]; var setPos = posState[1];
+
+    var data = props.data || [];
+    var size = props.size || 200;
+    var donut = !!props.donut;
+    var showLegend = props.showLegend !== false;
+    var total = data.reduce(function (s, d) { return s + d.value; }, 0);
+    if (total === 0) return el('div', { className: props.className, style: Object.assign({ color: 'var(--ican-secondary-text)', fontSize: '13px', textAlign: 'center', padding: '24px' }, props.style || {}) }, 'No data');
+    var cx = size / 2; var cy = size / 2; var r = size * 0.4; var innerR = donut ? r * 0.55 : 0;
+    var angle = -Math.PI / 2;
+    var slices = data.map(function (d, i) {
+      var sweep = (d.value / total) * 2 * Math.PI;
+      var x1 = cx + r * Math.cos(angle); var y1 = cy + r * Math.sin(angle);
+      angle += sweep;
+      var x2 = cx + r * Math.cos(angle); var y2 = cy + r * Math.sin(angle);
+      var largeArc = sweep > Math.PI ? 1 : 0;
+      var color = d.color || PIE_COLORS[i % PIE_COLORS.length];
+      var path;
+      if (donut) {
+        var xi1 = cx + innerR * Math.cos(angle - sweep); var yi1 = cy + innerR * Math.sin(angle - sweep);
+        var xi2 = cx + innerR * Math.cos(angle); var yi2 = cy + innerR * Math.sin(angle);
+        path = 'M' + x1 + ',' + y1 + ' A' + r + ',' + r + ' 0 ' + largeArc + ',1 ' + x2 + ',' + y2 + ' L' + xi2 + ',' + yi2 + ' A' + innerR + ',' + innerR + ' 0 ' + largeArc + ',0 ' + xi1 + ',' + yi1 + ' Z';
+      } else {
+        path = 'M' + cx + ',' + cy + ' L' + x1 + ',' + y1 + ' A' + r + ',' + r + ' 0 ' + largeArc + ',1 ' + x2 + ',' + y2 + ' Z';
+      }
+      return { path: path, color: color, d: d, i: i, pct: ((d.value / total) * 100).toFixed(1) };
+    });
+    function trackPos(e) {
+      var rect = e.currentTarget.getBoundingClientRect();
+      setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    }
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ display: 'flex', flexDirection: showLegend ? 'column' : 'row', alignItems: 'center', gap: '16px', fontFamily: 'var(--ican-font-body)', position: 'relative' }, props.style || {}),
+      onMouseMove: trackPos,
+      onMouseLeave: function () { setHovered(null); }
+    },
+      el('svg', { width: size, height: size, viewBox: '0 0 ' + size + ' ' + size, style: { flexShrink: 0 } },
+        slices.map(function (s) {
+          return el('path', {
+            key: s.i, d: s.path, fill: s.color,
+            opacity: hovered == null || hovered.i === s.i ? 1 : 0.5,
+            style: { transition: 'opacity 0.15s, transform 0.15s', cursor: 'pointer', transformOrigin: cx + 'px ' + cy + 'px', transform: hovered && hovered.i === s.i ? 'scale(1.03)' : 'scale(1)' },
+            onMouseEnter: function () { setHovered(s); }
+          });
+        }),
+        donut && props.centerLabel ? el('text', { x: cx, y: cy, textAnchor: 'middle', dominantBaseline: 'middle', fill: 'var(--ican-primary-text)', fontSize: '14', fontWeight: '600', fontFamily: 'var(--ican-font-body)' }, props.centerLabel) : null
+      ),
+      showLegend ? el('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '8px 16px' } },
+        slices.map(function (s) {
+          return el('div', {
+            key: s.i,
+            style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px', color: 'var(--ican-primary-text)', cursor: 'pointer', opacity: hovered == null || hovered.i === s.i ? 1 : 0.5, transition: 'opacity 0.15s' },
+            onMouseEnter: function () { setHovered(s); }
+          },
+            el('div', { style: { width: '10px', height: '10px', borderRadius: '2px', background: s.color, flexShrink: 0 } }),
+            el('span', null, s.d.label + ' (' + s.pct + '%)')
+          );
+        })
+      ) : null,
+      hovered ? el('div', {
+        style: { position: 'absolute', left: pos.x + 12, top: pos.y + 12, pointerEvents: 'none', background: 'var(--ican-card-bg)', color: 'var(--ican-primary-text)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '8px 12px', fontSize: '12px', fontFamily: 'var(--ican-font-body)', boxShadow: 'var(--ican-card-shadow, 0 4px 12px rgba(0,0,0,0.25))', zIndex: 10, whiteSpace: 'nowrap', backdropFilter: 'var(--ican-backdrop-filter)', WebkitBackdropFilter: 'var(--ican-backdrop-filter)' }
+      },
+        el('div', { style: { display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '2px' } },
+          el('span', { style: { width: '8px', height: '8px', borderRadius: '50%', background: hovered.color, display: 'inline-block' } }),
+          el('strong', null, hovered.d.label)
+        ),
+        el('div', { style: { color: 'var(--ican-secondary-text)', fontSize: '11px' } }, hovered.d.value + ' • ' + hovered.pct + '%')
+      ) : null
+    );
+  }
+
+  function LineChart(props) {
+    var R = window.React;
+    var hoverState = R.useState(null); var hovered = hoverState[0]; var setHovered = hoverState[1];
+
+    var series = props.series || [];
+    if (series.length === 0 || !series.some(function (s) { return s.data && s.data.length; })) {
+      return el('div', { className: props.className, style: Object.assign({ color: 'var(--ican-secondary-text)', fontSize: '13px', textAlign: 'center', padding: '24px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) }, 'No data');
+    }
+    var height = props.height || 200;
+    var showGrid = props.showGrid !== false;
+    var showDots = props.showDots !== false;
+    var W = 400; var H = height;
+    var PAD = { top: 16, right: 16, bottom: props.xLabel ? 36 : 24, left: props.yLabel ? 48 : 36 };
+    var allY = series.reduce(function (a, s) { return a.concat(s.data.map(function (p) { return p.y; })); }, []);
+    var yMin = Math.min.apply(null, allY); var yMax = Math.max.apply(null, allY);
+    var yRange = yMax - yMin || 1;
+    var allX = (series[0] && series[0].data ? series[0].data.map(function (p) { return p.x; }) : []);
+    var n = allX.length;
+    function toSvgX(i) { return PAD.left + (i / Math.max(n - 1, 1)) * (W - PAD.left - PAD.right); }
+    function toSvgY(v) { return PAD.top + (1 - (v - yMin) / yRange) * (H - PAD.top - PAD.bottom); }
+    var LINE_COLORS = ['var(--ican-accent)', 'var(--ican-success)', 'var(--ican-warning)', 'var(--ican-error)', 'var(--ican-info)'];
+
+    function trackHover(e) {
+      var svg = e.currentTarget;
+      var rect = svg.getBoundingClientRect();
+      var localX = ((e.clientX - rect.left) / rect.width) * W;
+      // Snap to nearest x-index
+      var idx = Math.round((localX - PAD.left) / Math.max((W - PAD.left - PAD.right) / Math.max(n - 1, 1), 1));
+      idx = Math.max(0, Math.min(n - 1, idx));
+      setHovered({ idx: idx, label: allX[idx] });
+    }
+
+    return el('div', { className: props.className, style: Object.assign({ fontFamily: 'var(--ican-font-body)', position: 'relative' }, props.style || {}) },
+      el('svg', {
+        viewBox: '0 0 ' + W + ' ' + H, width: '100%', style: { display: 'block' },
+        onMouseMove: trackHover,
+        onMouseLeave: function () { setHovered(null); }
+      },
+        showGrid ? el('g', null,
+          [0,1,2,3,4].map(function (i) {
+            var v = yMin + (yRange / 4) * i; var sy = toSvgY(v);
+            return el('g', { key: i },
+              el('line', { x1: PAD.left, y1: sy, x2: W - PAD.right, y2: sy, stroke: 'var(--ican-border)', strokeWidth: 0.5 }),
+              el('text', { x: PAD.left - 4, y: sy, textAnchor: 'end', dominantBaseline: 'middle', fontSize: 9, fill: 'var(--ican-secondary-text)', fontFamily: 'var(--ican-font-body)' }, Math.round(v))
+            );
+          })
+        ) : null,
+        allX.filter(function (_, i) { return n <= 8 || i % Math.ceil(n / 8) === 0; }).map(function (x, i) {
+          var idx = allX.indexOf(x);
+          return el('text', { key: i, x: toSvgX(idx), y: H - PAD.bottom + 14, textAnchor: 'middle', fontSize: 9, fill: 'var(--ican-secondary-text)', fontFamily: 'var(--ican-font-body)' }, String(x));
+        }),
+        series.map(function (s, si) {
+          var color = s.color || LINE_COLORS[si % LINE_COLORS.length];
+          var pts = s.data.map(function (p, i) { return toSvgX(i) + ',' + toSvgY(p.y); }).join(' ');
+          var fillPath = s.data.length > 0 ? 'M' + toSvgX(0) + ',' + toSvgY(s.data[0].y) + ' ' + s.data.map(function (p, i) { return 'L' + toSvgX(i) + ',' + toSvgY(p.y); }).join(' ') + ' L' + toSvgX(s.data.length - 1) + ',' + (H - PAD.bottom) + ' L' + toSvgX(0) + ',' + (H - PAD.bottom) + ' Z' : '';
+          return el('g', { key: si },
+            s.fill ? el('path', { d: fillPath, fill: color, opacity: 0.15 }) : null,
+            el('polyline', { points: pts, fill: 'none', stroke: color, strokeWidth: 2, strokeLinejoin: 'round', strokeLinecap: 'round' }),
+            showDots ? s.data.map(function (p, i) { return el('circle', { key: i, cx: toSvgX(i), cy: toSvgY(p.y), r: hovered && hovered.idx === i ? 5 : 3, fill: color, style: { transition: 'r 0.15s' } }); }) : null
+          );
+        }),
+        // Hover crosshair line
+        hovered ? el('line', { x1: toSvgX(hovered.idx), y1: PAD.top, x2: toSvgX(hovered.idx), y2: H - PAD.bottom, stroke: 'var(--ican-accent)', strokeWidth: 1, strokeDasharray: '3,3', opacity: 0.6 }) : null
+      ),
+      // Floating tooltip
+      hovered ? el('div', {
+        style: { position: 'absolute', left: ((toSvgX(hovered.idx) / W) * 100) + '%', top: '6px', transform: 'translateX(-50%)', pointerEvents: 'none', background: 'var(--ican-card-bg)', color: 'var(--ican-primary-text)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '8px 12px', fontSize: '12px', fontFamily: 'var(--ican-font-body)', boxShadow: 'var(--ican-card-shadow, 0 4px 12px rgba(0,0,0,0.25))', zIndex: 10, whiteSpace: 'nowrap', backdropFilter: 'var(--ican-backdrop-filter)', WebkitBackdropFilter: 'var(--ican-backdrop-filter)' }
+      },
+        el('div', { style: { fontWeight: 600, marginBottom: '4px' } }, String(hovered.label)),
+        series.map(function (s, si) {
+          var color = s.color || LINE_COLORS[si % LINE_COLORS.length];
+          var p = s.data[hovered.idx];
+          return p ? el('div', { key: si, style: { display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--ican-secondary-text)' } },
+            el('span', { style: { width: '8px', height: '8px', borderRadius: '50%', background: color, display: 'inline-block', flexShrink: 0 } }),
+            el('span', null, s.label + ': '),
+            el('strong', { style: { color: 'var(--ican-primary-text)' } }, p.y)
+          ) : null;
+        })
+      ) : null,
+      el('div', { style: { display: 'flex', gap: '12px', flexWrap: 'wrap', marginTop: '8px' } },
+        series.map(function (s, si) {
+          return el('div', { key: si, style: { display: 'flex', alignItems: 'center', gap: '5px', fontSize: '11px', color: 'var(--ican-secondary-text)' } },
+            el('div', { style: { width: '16px', height: '2px', background: s.color || LINE_COLORS[si % LINE_COLORS.length], borderRadius: '1px' } }),
+            s.label
+          );
+        })
+      )
+    );
+  }
+
+  function BarChart(props) {
+    var R = window.React;
+    var hoverState = R.useState(null); var hovered = hoverState[0]; var setHovered = hoverState[1];
+    var posState = R.useState({ x: 0, y: 0 }); var pos = posState[0]; var setPos = posState[1];
+
+    var data = props.data || [];
+    if (data.length === 0) {
+      return el('div', { className: props.className, style: Object.assign({ color: 'var(--ican-secondary-text)', fontSize: '13px', textAlign: 'center', padding: '24px', fontFamily: 'var(--ican-font-body)' }, props.style || {}) }, 'No data');
+    }
+    var height = props.height || 200;
+    var horizontal = !!props.horizontal;
+    var showValues = props.showValues !== false;
+    var showGrid = props.showGrid !== false;
+    var maxVal = Math.max.apply(null, data.map(function (d) { return d.value; }).concat([1]));
+    var W = 400; var H = height;
+    var PAD = { top: 16, right: 16, bottom: 28, left: 36 };
+    var chartW = W - PAD.left - PAD.right;
+    var chartH = H - PAD.top - PAD.bottom;
+    var nLen = data.length;
+    var barGap = 4;
+    var barW = (horizontal ? chartH : chartW) / nLen - barGap;
+
+    function trackPos(e) {
+      var rect = e.currentTarget.getBoundingClientRect();
+      setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    }
+
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ fontFamily: 'var(--ican-font-body)', position: 'relative' }, props.style || {}),
+      onMouseMove: trackPos,
+      onMouseLeave: function () { setHovered(null); }
+    },
+      el('svg', { viewBox: '0 0 ' + W + ' ' + H, width: '100%', style: { display: 'block' } },
+        showGrid ? el('g', null,
+          [0, 0.25, 0.5, 0.75, 1].map(function (f, i) {
+            if (horizontal) {
+              var x = PAD.left + f * chartW;
+              return el('g', { key: i },
+                el('line', { x1: x, y1: PAD.top, x2: x, y2: H - PAD.bottom, stroke: 'var(--ican-border)', strokeWidth: 0.5 }),
+                el('text', { x: x, y: H - PAD.bottom + 12, textAnchor: 'middle', fontSize: 9, fill: 'var(--ican-secondary-text)' }, Math.round(maxVal * f))
+              );
+            }
+            var y = PAD.top + (1 - f) * chartH;
+            return el('g', { key: i },
+              el('line', { x1: PAD.left, y1: y, x2: W - PAD.right, y2: y, stroke: 'var(--ican-border)', strokeWidth: 0.5 }),
+              el('text', { x: PAD.left - 4, y: y, textAnchor: 'end', dominantBaseline: 'middle', fontSize: 9, fill: 'var(--ican-secondary-text)' }, Math.round(maxVal * f))
+            );
+          })
+        ) : null,
+        data.map(function (d, i) {
+          var color = d.color || PIE_COLORS[i % PIE_COLORS.length];
+          var ratio = d.value / maxVal;
+          var isHover = hovered && hovered.i === i;
+          if (horizontal) {
+            var y = PAD.top + i * (barW + barGap);
+            var w = ratio * chartW;
+            return el('g', { key: i, onMouseEnter: function () { setHovered({ i: i, d: d, color: color }); }, style: { cursor: 'pointer' } },
+              el('rect', { x: PAD.left, y: y, width: w, height: barW, fill: color, opacity: hovered == null || isHover ? 1 : 0.5, rx: 3, style: { transition: 'opacity 0.15s' } }),
+              el('text', { x: PAD.left - 4, y: y + barW / 2, textAnchor: 'end', dominantBaseline: 'middle', fontSize: 9, fill: 'var(--ican-secondary-text)' }, d.label),
+              showValues ? el('text', { x: PAD.left + w + 4, y: y + barW / 2, dominantBaseline: 'middle', fontSize: 9, fill: 'var(--ican-primary-text)', fontWeight: '600' }, d.value) : null
+            );
+          }
+          var x = PAD.left + i * (barW + barGap);
+          var bh = ratio * chartH;
+          var by = PAD.top + chartH - bh;
+          return el('g', { key: i, onMouseEnter: function () { setHovered({ i: i, d: d, color: color }); }, style: { cursor: 'pointer' } },
+            el('rect', { x: x, y: by, width: barW, height: bh, fill: color, opacity: hovered == null || isHover ? 1 : 0.5, rx: 3, style: { transition: 'opacity 0.15s' } }),
+            el('text', { x: x + barW / 2, y: H - PAD.bottom + 12, textAnchor: 'middle', fontSize: 9, fill: 'var(--ican-secondary-text)' }, d.label),
+            showValues ? el('text', { x: x + barW / 2, y: by - 3, textAnchor: 'middle', fontSize: 9, fill: 'var(--ican-primary-text)', fontWeight: '600' }, d.value) : null
+          );
+        })
+      ),
+      hovered ? el('div', {
+        style: { position: 'absolute', left: pos.x + 12, top: pos.y + 12, pointerEvents: 'none', background: 'var(--ican-card-bg)', color: 'var(--ican-primary-text)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '8px 12px', fontSize: '12px', fontFamily: 'var(--ican-font-body)', boxShadow: 'var(--ican-card-shadow, 0 4px 12px rgba(0,0,0,0.25))', zIndex: 10, whiteSpace: 'nowrap', backdropFilter: 'var(--ican-backdrop-filter)', WebkitBackdropFilter: 'var(--ican-backdrop-filter)' }
+      },
+        el('div', { style: { display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '2px' } },
+          el('span', { style: { width: '8px', height: '8px', borderRadius: '50%', background: hovered.color, display: 'inline-block' } }),
+          el('strong', null, hovered.d.label)
+        ),
+        el('div', { style: { color: 'var(--ican-secondary-text)', fontSize: '11px' } }, 'Value: ' + hovered.d.value)
+      ) : null
+    );
+  }
+
+  function RadialGauge(props) {
+    var _h = useState(false); var hover = _h[0]; var setHover = _h[1];
+    var value = props.value;
+    var min = props.min != null ? props.min : 0;
+    var max = props.max != null ? props.max : 100;
+    var unit = props.unit || '';
+    var size = props.size || 180;
+    var thickness = props.thickness || 18;
+    var defaultColors = props.colors || [{ color: 'var(--ican-success)', stopAt: 0.6 }, { color: 'var(--ican-warning)', stopAt: 0.85 }, { color: 'var(--ican-error)', stopAt: 1 }];
+    var pct = Math.max(0, Math.min(1, (value - min) / (max - min)));
+    var cx = size / 2; var cy = size / 2;
+    var r = (size - thickness) / 2;
+    var startAngle = -210; var endAngle = 30; var totalSpan = endAngle - startAngle;
+    function toRad(deg) { return (deg * Math.PI) / 180; }
+    function arc(startDeg, endDeg) {
+      var s = toRad(startDeg); var e = toRad(endDeg);
+      var x1 = cx + r * Math.cos(s); var y1 = cy + r * Math.sin(s);
+      var x2 = cx + r * Math.cos(e); var y2 = cy + r * Math.sin(e);
+      var large = endDeg - startDeg > 180 ? 1 : 0;
+      return 'M' + x1 + ',' + y1 + ' A' + r + ',' + r + ' 0 ' + large + ',1 ' + x2 + ',' + y2;
+    }
+    var valueColor = (function () {
+      for (var c = 0; c < defaultColors.length; c++) { if (pct <= defaultColors[c].stopAt) return defaultColors[c].color; }
+      return defaultColors[defaultColors.length - 1].color;
+    })();
+    var valueDeg = startAngle + pct * totalSpan;
+    return el('div', {
+      className: props.className,
+      onMouseEnter: function () { setHover(true); },
+      onMouseLeave: function () { setHover(false); },
+      style: Object.assign({ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', fontFamily: 'var(--ican-font-body)', position: 'relative' }, props.style || {})
+    },
+      el('svg', { width: size, height: size * 0.7, viewBox: '0 0 ' + size + ' ' + (size * 0.8), style: { overflow: 'visible' } },
+        el('path', { d: arc(startAngle, endAngle), fill: 'none', stroke: 'var(--ican-border)', strokeWidth: thickness, strokeLinecap: 'round' }),
+        el('path', { d: arc(startAngle, valueDeg), fill: 'none', stroke: valueColor, strokeWidth: thickness, strokeLinecap: 'round' }),
+        el('text', { x: cx, y: cy * 1.1, textAnchor: 'middle', dominantBaseline: 'middle', fontSize: size * 0.13, fontWeight: '700', fill: 'var(--ican-primary-text)' }, value + unit),
+        props.label ? el('text', { x: cx, y: cy * 1.28, textAnchor: 'middle', fontSize: size * 0.07, fill: 'var(--ican-secondary-text)' }, props.label) : null
+      ),
+      hover ? el('div', {
+        style: { position: 'absolute', top: '-8px', left: '50%', transform: 'translate(-50%, -100%)', pointerEvents: 'none', background: 'var(--ican-card-bg)', color: 'var(--ican-primary-text)', border: '1px solid var(--ican-border)', borderRadius: 'var(--ican-radius-md)', padding: '6px 10px', fontSize: '12px', fontFamily: 'var(--ican-font-body)', boxShadow: 'var(--ican-card-shadow, 0 4px 12px rgba(0,0,0,0.25))', zIndex: 10, whiteSpace: 'nowrap' }
+      },
+        el('div', { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+          el('span', { style: { width: '8px', height: '8px', borderRadius: '50%', background: valueColor, display: 'inline-block' } }),
+          el('strong', null, value + unit),
+          el('span', { style: { color: 'var(--ican-secondary-text)' } }, '(' + Math.round(pct * 100) + '% of ' + max + unit + ')')
+        )
+      ) : null
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * CHART LOADERS
+   * ───────────────────────────────────────────────────── */
+
+  function shimmerStyle(animated) {
+    return {
+      background: animated ? 'linear-gradient(90deg, var(--ican-secondary-bg) 25%, var(--ican-border) 50%, var(--ican-secondary-bg) 75%)' : 'var(--ican-secondary-bg)',
+      backgroundSize: '200% 100%',
+      animation: animated ? 'ican-shimmer 1.5s infinite' : 'none',
+      borderRadius: 'var(--ican-radius-sm)'
+    };
+  }
+
+  function ChartLoader(props) {
+    return el('div', { className: props.className, style: Object.assign({ width: '100%', height: (props.height || 200) + 'px' }, shimmerStyle(props.animated !== false), props.style || {}) });
+  }
+
+  function BarChartLoader(props) {
+    var height = props.height || 200;
+    var animated = props.animated !== false;
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ width: '100%', height: height + 'px', display: 'flex', alignItems: 'flex-end', gap: '8px', padding: '0 8px', boxSizing: 'border-box' }, props.style || {})
+    },
+      [0.6, 0.8, 0.4, 0.9, 0.5, 0.7, 0.3].map(function (h, i) {
+        return el('div', { key: i, style: Object.assign({ flex: 1, height: (h * 100) + '%' }, shimmerStyle(animated)) });
+      })
+    );
+  }
+
+  function DonutChartLoader(props) {
+    var height = props.height || 160;
+    var animated = props.animated !== false;
+    var s = Math.min(height, 160);
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ width: s + 'px', height: s + 'px', borderRadius: '50%', background: 'conic-gradient(var(--ican-border) 0%, var(--ican-secondary-bg) 50%, var(--ican-border) 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: animated ? 'ican-spin 2s linear infinite' : 'none' }, props.style || {})
+    },
+      el('div', { style: { width: (s * 0.55) + 'px', height: (s * 0.55) + 'px', borderRadius: '50%', background: 'var(--ican-card-bg)' } })
+    );
+  }
+
+  function GaugeLoader(props) {
+    var height = props.height || 120;
+    var animated = props.animated !== false;
+    return el('div', { className: props.className, style: Object.assign({ width: (height * 1.5) + 'px', height: height + 'px', position: 'relative' }, props.style || {}) },
+      el('div', { style: Object.assign({ position: 'absolute', bottom: 0, left: 0, right: 0, height: height + 'px', borderRadius: height + 'px ' + height + 'px 0 0' }, shimmerStyle(animated)) })
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * MAP COMPONENT (lazy Leaflet loader)
+   * ───────────────────────────────────────────────────── */
+
+  function MapComponent(props) {
+    var ref = useRef(null);
+    var _map = useRef(null);
+    var _s = useState('loading');
+    var status = _s[0]; var setStatus = _s[1];
+
+    function initMap(L) {
+      if (!ref.current || _map.current) return;
+      try {
+        var center = props.center || [51.505, -0.09];
+        var zoom = props.zoom || 13;
+        var map = L.map(ref.current).setView(center, zoom);
+        _map.current = map;
+        if (props.staticImage) {
+          var si = props.staticImage;
+          var bounds = [[0, 0], [si.height, si.width]];
+          L.imageOverlay(si.url, bounds).addTo(map);
+          map.fitBounds(bounds);
+        } else {
+          var tileUrl = props.tileUrl || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+          L.tileLayer(tileUrl, { attribution: '© OpenStreetMap contributors' }).addTo(map);
+        }
+        (props.markers || []).forEach(function (m) {
+          var marker = L.marker([m.lat, m.lng]).addTo(map);
+          if (m.popup) marker.bindPopup(m.popup);
+          if (props.onMarkerClick) marker.on('click', function () { props.onMarkerClick(m); });
+        });
+        setStatus('ready');
+      } catch (e) { setStatus('error'); }
+    }
+
+    useEffect(function () {
+      if (window.L) { initMap(window.L); return; }
+      if (!document.getElementById('leaflet-css')) {
+        var link = document.createElement('link');
+        link.id = 'leaflet-css';
+        link.rel = 'stylesheet';
+        link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
+        document.head.appendChild(link);
+      }
+      var existing = document.getElementById('leaflet-js');
+      if (!existing) {
+        var script = document.createElement('script');
+        script.id = 'leaflet-js';
+        script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
+        script.async = true;
+        script.onload = function () { initMap(window.L); };
+        script.onerror = function () { setStatus('error'); };
+        document.head.appendChild(script);
+      } else {
+        var attempts = 0;
+        var poll = setInterval(function () {
+          attempts += 1;
+          if (window.L) { clearInterval(poll); initMap(window.L); }
+          else if (attempts > 150) { clearInterval(poll); }
+        }, 100);
+        return function () { clearInterval(poll); };
+      }
+      return function () { if (_map.current) { _map.current.remove(); _map.current = null; } };
+    }, []);
+
+    return el('div', {
+      className: props.className,
+      style: Object.assign({ position: 'relative', width: '100%', height: props.height || '300px', borderRadius: 'var(--ican-radius-md)', overflow: 'hidden', border: '1px solid var(--ican-border)' }, props.style || {})
+    },
+      el('div', { ref: ref, style: { width: '100%', height: '100%' } }),
+      status === 'loading' ? el('div', { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--ican-secondary-bg)', color: 'var(--ican-secondary-text)', fontSize: '13px', fontFamily: 'var(--ican-font-body)', gap: '8px' } }, '↻ Loading map…') : null,
+      status === 'error' ? el('div', { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--ican-error-dim)', color: 'var(--ican-error)', fontSize: '13px', fontFamily: 'var(--ican-font-body)' } }, '⚠ Map unavailable') : null
+    );
+  }
+
+  /* ─────────────────────────────────────────────────────
+   * INJECT KEYFRAME STYLES
+   * ───────────────────────────────────────────────────── */
+
+  (function injectStyles() {
+    if (document.getElementById('ican-keyframes')) return;
+    var style = document.createElement('style');
+    style.id = 'ican-keyframes';
+    style.textContent = [
+      '@keyframes ican-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }',
+      '@keyframes ican-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }',
+      '@keyframes ican-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }',
+      // Themed focus ring for ICan form inputs (replaces browser default outline removed via inline style).
+      '[data-module="ican"] input:focus,',
+      '[data-module="ican"] textarea:focus,',
+      '[data-module="ican"] select:focus {',
+      '  border-color: var(--ican-accent) !important;',
+      '  box-shadow: 0 0 0 3px var(--ican-accent-dim, rgba(99,102,241,0.15)) !important;',
+      '}',
+      // Same selectors un-scoped for the dev harness (which may not have data-module).
+      'body input:focus,',
+      'body textarea:focus,',
+      'body select:focus {',
+      '  border-color: var(--ican-accent);',
+      '  box-shadow: 0 0 0 3px var(--ican-accent-dim, rgba(99,102,241,0.15));',
+      '}'
+    ].join('\n');
+    document.head.appendChild(style);
+  })();
+
+  /* ─────────────────────────────────────────────────────
+   * EXPORT
+   * ───────────────────────────────────────────────────── */
+
+  window.ICanComponents = {
+    // Layout
+    WidgetWrapper:        WidgetWrapper,
+    Loading:              Loading,
+    TitleBar:             TitleBar,
+    FilterPanel:          FilterPanel,
+    ErrorDisplay:         ErrorDisplay,
+    Card:                 Card,
+    DataList:             DataList,
+    // Buttons
+    Button:               Button,
+    AsyncButton:          AsyncButton,
+    ConfirmButton:        ConfirmButton,
+    IconButton:           IconButton,
+    // Form Inputs
+    Input:                Input,
+    TextArea:             TextArea,
+    Select:               Select,
+    Checkbox:             Checkbox,
+    MultiSelect:          MultiSelect,
+    ToggleFilter:         ToggleFilter,
+    ColorPicker:          ColorPicker,
+    SearchInput:          SearchInput,
+    FormField:            FormField,
+    Label:                Label,
+    FormFeedback:         FormFeedback,
+    // Date & Time
+    DatePicker:           DatePicker,
+    TimePicker:           TimePicker,
+    DateRangePicker:      DateRangePicker,
+    DateTimePicker:       DateTimePicker,
+    CalendarView:         CalendarView,
+    // Data Display
+    Badge:                Badge,
+    StatCard:             StatCard,
+    EmptyState:           EmptyState,
+    DataTable:            DataTable,
+    DataGrid:             DataGrid,
+    ItemCard:             ItemCard,
+    ItemListCard:         ItemListCard,
+    HorizontalScrollList: HorizontalScrollList,
+    NotificationBlock:    NotificationBlock,
+    ProfileImage:         ProfileImage,
+    SampleDataLabel:      SampleDataLabel,
+    // Overlays
+    Tooltip:              Tooltip,
+    Popover:              Popover,
+    DropDownButton:       DropDownButton,
+    Tabs:                 Tabs,
+    Modal:                Modal,
+    Pagination:           Pagination,
+    // Wizards
+    Wizard:               Wizard,
+    ModalWizard:          ModalWizard,
+    // Charts
+    PieChart:             PieChart,
+    LineChart:            LineChart,
+    BarChart:             BarChart,
+    RadialGauge:          RadialGauge,
+    ChartLoader:          ChartLoader,
+    BarChartLoader:       BarChartLoader,
+    DonutChartLoader:     DonutChartLoader,
+    GaugeLoader:          GaugeLoader,
+    // Map
+    MapComponent:         MapComponent
+  };
+
+  if (!window.registerWidget)       window.registerWidget       = function () {};
+  if (!window.registerLink)         window.registerLink         = function () {};
+  if (!window.registerUI)           window.registerUI           = function () {};
+  if (!window.registerMenuItem)     window.registerMenuItem     = function () {};
+  if (!window.registerLocalization) window.registerLocalization = function () {};
+  if (!window.UXPComponents)        window.UXPComponents        = {};
+  if (!window.WidgetDesignerComponents) window.WidgetDesignerComponents = {};
+
+  console.log('[ICan] Components loaded — InfAIra Canvas v2.0 (canonical, matches widget-bridge.ts)');
+})();