/* LandIntelligence UI kit — browser-global React components.
   Stack: React 18 UMD + Babel Standalone, NO modules. Do not add import/export.
   Load order: li-tokens.css → React UMD → Babel → <script type="text/babel" src="li-ui.jsx"> → consumers.
   Exposes window.LIUI. All visuals follow DESIGN-SYSTEM.md; never restyle per page. */

(function () {
  'use strict';

  /* ---- self-injected component styles (tokens come from li-tokens.css; fallbacks inline) ---- */
  if (!document.getElementById('li-ui-styles')) {
    var css = `
.li-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:8px;padding:10px 18px;font-family:var(--li-font-body,'IBM Plex Sans',sans-serif);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;border:none;transition:background .15s ease,border-color .15s ease;}
.li-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--li-focus-ring,rgba(46,125,91,.35));}
.li-btn--primary{background:var(--li-deep,#14352A);color:var(--li-cream,#F5F1E8);}
.li-btn--primary:hover:not(:disabled){background:#1C4636;}
.li-btn--secondary{background:transparent;color:var(--li-deep,#14352A);border:1px solid var(--li-border,#D8D2C4);padding:9px 18px;}
.li-btn--secondary:hover:not(:disabled){background:var(--li-bg,#F5F1E8);border-color:var(--li-border-hover,#B7B0A0);}
.li-btn--ghost{background:transparent;color:var(--li-green,#2E7D5B);padding:10px 12px;}
.li-btn--ghost:hover:not(:disabled){background:rgba(46,125,91,.08);}
.li-btn--danger{background:var(--li-danger,#A8442E);color:var(--li-cream,#F5F1E8);}
.li-btn--danger:hover:not(:disabled){background:#933B28;}
.li-btn--sm{padding:7px 13px;font-size:12px;}
.li-btn--lg{padding:13px 24px;font-size:14px;border-radius:10px;}
.li-btn:disabled{cursor:default;}
.li-btn--primary:disabled,.li-btn--danger:disabled{opacity:.45;}
.li-btn--secondary:disabled,.li-btn--ghost:disabled{color:var(--li-text-3,#8A8578);border:1px solid #E1DCD0;background:transparent;}
@keyframes li-ui-dot{0%,100%{opacity:.25}30%{opacity:1}}
.li-field{display:flex;flex-direction:column;gap:6px;}
.li-field__label{font-size:12.5px;font-weight:600;color:var(--li-text,#14352A);font-family:var(--li-font-body,'IBM Plex Sans',sans-serif);}
.li-field__hint{font-size:12px;color:var(--li-text-3,#8A8578);}
.li-field__error{font-size:12px;color:var(--li-danger,#A8442E);}
.li-input{background:var(--li-surface-2,#FFF);border:1px solid var(--li-border,#D8D2C4);border-radius:8px;padding:10px 12px;font-family:var(--li-font-body,'IBM Plex Sans',sans-serif);font-size:13.5px;color:var(--li-text,#14352A);outline:none;width:100%;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
.li-input:focus{border-color:var(--li-green,#2E7D5B);box-shadow:0 0 0 3px var(--li-focus-ring,rgba(46,125,91,.35));}
.li-input--mono{font-family:var(--li-font-mono,'IBM Plex Mono',monospace);}
.li-input--error{border-color:var(--li-danger,#A8442E);box-shadow:0 0 0 3px rgba(168,68,46,.15);}
.li-input::placeholder{color:var(--li-text-3,#8A8578);}
.li-search{display:flex;align-items:center;gap:8px;background:var(--li-surface-2,#FFF);border:1px solid var(--li-border,#D8D2C4);border-radius:8px;padding:10px 12px;transition:border-color .15s,box-shadow .15s;}
.li-search:focus-within{border-color:var(--li-green,#2E7D5B);box-shadow:0 0 0 3px var(--li-focus-ring,rgba(46,125,91,.35));}
.li-search input{border:none;outline:none;background:transparent;font-family:var(--li-font-body,'IBM Plex Sans',sans-serif);font-size:13.5px;color:var(--li-text,#14352A);flex:1;padding:0;}
.li-search__kbd{font-family:var(--li-font-mono,'IBM Plex Mono',monospace);font-size:11px;color:#B7B0A0;border:1px solid #E1DCD0;border-radius:5px;padding:1px 6px;}
.li-check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--li-text,#14352A);font-family:var(--li-font-body,'IBM Plex Sans',sans-serif);user-select:none;}
.li-seg{display:inline-flex;background:#EDE8DC;border-radius:8px;padding:3px;gap:2px;}
.li-seg__opt{padding:6px 14px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--li-text-3,#8A8578);background:transparent;border:none;font-family:var(--li-font-body,'IBM Plex Sans',sans-serif);}
.li-seg__opt--on{background:#FFF;color:var(--li-deep,#14352A);box-shadow:0 1px 2px rgba(20,53,42,.12);}
.li-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;font-family:var(--li-font-body,'IBM Plex Sans',sans-serif);}
.li-card{box-sizing:border-box;background:var(--li-surface,#FBF9F4);border:1px solid var(--li-border,#D8D2C4);border-radius:12px;padding:16px;transition:border-color .15s;}
.li-card--click{cursor:pointer;}
.li-card--click:hover{border-color:var(--li-border-hover,#B7B0A0);}
.li-card--selected{border-color:var(--li-green,#2E7D5B);}
.li-card--selected:hover{border-color:var(--li-green,#2E7D5B);}
.li-card--dark{background:var(--li-panel,#12241D);border-color:var(--li-panel,#12241D);color:var(--li-cream,#F5F1E8);}
.li-tabs{display:flex;gap:26px;border-bottom:1px solid #E1DCD0;}
.li-tabs__tab{padding:15px 2px 12px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--li-text-3,#8A8578);border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:var(--li-font-body,'IBM Plex Sans',sans-serif);}
.li-tabs__tab--on{color:var(--li-deep,#14352A);border-bottom-color:var(--li-green,#2E7D5B);}
.li-table{background:var(--li-surface,#FBF9F4);border:1px solid var(--li-border,#D8D2C4);border-radius:12px;overflow:hidden;}
.li-table__head{display:grid;padding:11px 20px;gap:12px;background:var(--li-bg,#F5F1E8);border-bottom:1px solid #E1DCD0;}
.li-table__th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--li-text-3,#8A8578);}
.li-table__row{display:grid;padding:13px 20px;gap:12px;align-items:center;border-bottom:1px solid #EFEAE0;}
.li-table__row:last-child{border-bottom:none;}
.li-table__row--click{cursor:pointer;}
.li-table__row--click:hover{background:var(--li-bg,#F5F1E8);}
.li-table__cell{font-size:13px;font-variant-numeric:tabular-nums;color:var(--li-text,#14352A);}
.li-table__cell--mono{font-family:var(--li-font-mono,'IBM Plex Mono',monospace);font-size:12.5px;}
.li-alert{display:flex;gap:11px;border-radius:10px;padding:13px 16px;border:1px solid;}
.li-empty{background:var(--li-surface,#FBF9F4);border:1px dashed #C9C2B2;border-radius:12px;padding:48px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
`;
    var tag = document.createElement('style');
    tag.id = 'li-ui-styles';
    tag.textContent = css;
    document.head.appendChild(tag);
  }

  var e = React.createElement;
  var FONT_BODY = "var(--li-font-body,'IBM Plex Sans',sans-serif)";
  var FONT_DISPLAY = "var(--li-font-display,'Space Grotesk',sans-serif)";

  /* warn once if tokens stylesheet is missing */
  if (typeof getComputedStyle !== 'undefined') {
    var probe = getComputedStyle(document.documentElement).getPropertyValue('--li-deep');
    if (!probe || !probe.trim()) console.warn('[LIUI] li-tokens.css not loaded — using inline fallbacks. Add <link rel="stylesheet" href="li-tokens.css">.');
  }

  /* ---- Button ---- */
  function Dots() {
    var d = function (bg, delay) {
      return e('span', { style: { width: 5, height: 5, borderRadius: 2, background: bg, animation: 'li-ui-dot 1.2s ease infinite', animationDelay: delay } });
    };
    return e('span', { style: { display: 'inline-flex', gap: 3 }, 'aria-hidden': true },
      d('#3E9A72', '0s'), d('#3E9A72', '0.2s'), d('#C96F4A', '0.4s'));
  }

  function Button(props) {
    var variant = props.variant || 'primary';
    var size = props.size || 'md';
    var cls = 'li-btn li-btn--' + variant + (size !== 'md' ? ' li-btn--' + size : '') + (props.className ? ' ' + props.className : '');
    return e('button',
      { className: cls, onClick: props.onClick, disabled: props.disabled || props.loading, type: props.type || 'button', style: props.style, title: props.title },
      props.loading ? e(Dots) : null,
      props.children);
  }

  /* ---- Field / Input / Select / SearchInput ---- */
  function Field(props) {
    return e('div', { className: 'li-field', style: props.style },
      props.label ? e('label', { className: 'li-field__label' }, props.label) : null,
      props.children,
      props.error ? e('div', { className: 'li-field__error' }, props.error)
        : (props.hint ? e('div', { className: 'li-field__hint' }, props.hint) : null));
  }

  function Input(props) {
    var cls = 'li-input' + (props.mono ? ' li-input--mono' : '') + (props.error ? ' li-input--error' : '');
    var rest = Object.assign({}, props);
    delete rest.mono; delete rest.error;
    return e('input', Object.assign(rest, { className: cls }));
  }

  function Select(props) {
    var cls = 'li-input' + (props.error ? ' li-input--error' : '');
    var rest = Object.assign({}, props);
    delete rest.error; delete rest.options;
    return e('select', Object.assign(rest, { className: cls }),
      props.options ? props.options.map(function (o, i) {
        var v = typeof o === 'string' ? { value: o, label: o } : o;
        return e('option', { key: i, value: v.value }, v.label);
      }) : props.children);
  }

  function SearchInput(props) {
    return e('div', { className: 'li-search', style: props.style },
      e('svg', { width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': true },
        e('circle', { cx: 7, cy: 7, r: 5, stroke: '#8A8578', strokeWidth: 1.8 }),
        e('path', { d: 'M11 11 L14.5 14.5', stroke: '#8A8578', strokeWidth: 1.8, strokeLinecap: 'round' })),
      e('input', { placeholder: props.placeholder || 'Search…', value: props.value, onChange: props.onChange }),
      props.shortcut ? e('span', { className: 'li-search__kbd' }, props.shortcut) : null);
  }

  /* ---- Toggle / Checkbox / Radio / Segmented ---- */
  function Toggle(props) {
    var on = !!props.checked;
    return e('div', { className: 'li-check', onClick: function () { if (props.onChange) props.onChange(!on); }, role: 'switch', 'aria-checked': on, tabIndex: 0 },
      e('div', { style: { width: 38, height: 22, borderRadius: 999, background: on ? 'var(--li-green,#2E7D5B)' : '#C9C2B2', position: 'relative', transition: 'background .18s ease', flex: 'none' } },
        e('div', { style: { position: 'absolute', top: 3, left: on ? 19 : 3, width: 16, height: 16, borderRadius: 999, background: '#FFF', transition: 'left .18s ease', boxShadow: '0 1px 2px rgba(20,53,42,.25)' } })),
      props.label ? e('span', null, props.label) : null);
  }

  function Checkbox(props) {
    var on = !!props.checked;
    return e('div', { className: 'li-check', onClick: function () { if (props.onChange) props.onChange(!on); }, role: 'checkbox', 'aria-checked': on, tabIndex: 0 },
      on
        ? e('div', { style: { width: 17, height: 17, borderRadius: 5, background: 'var(--li-deep,#14352A)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' } },
            e('svg', { width: 10, height: 8, viewBox: '0 0 10 8', fill: 'none' },
              e('path', { d: 'M1 4 L3.8 6.8 L9 1', stroke: '#F5F1E8', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' })))
        : e('div', { style: { width: 17, height: 17, borderRadius: 5, border: '1.5px solid #B7B0A0', background: '#FFF', boxSizing: 'border-box', flex: 'none' } }),
      props.label ? e('span', null, props.label) : null);
  }

  function Radio(props) {
    var on = !!props.checked;
    return e('div', { className: 'li-check', onClick: function () { if (props.onChange) props.onChange(true); }, role: 'radio', 'aria-checked': on, tabIndex: 0 },
      e('div', { style: { width: 17, height: 17, borderRadius: 999, border: on ? '5.5px solid var(--li-deep,#14352A)' : '1.5px solid #B7B0A0', background: '#FFF', boxSizing: 'border-box', flex: 'none' } }),
      props.label ? e('span', null, props.label) : null);
  }

  function Segmented(props) {
    var opts = props.options || [];
    return e('div', { className: 'li-seg', role: 'tablist' },
      opts.map(function (o, i) {
        var v = typeof o === 'string' ? { value: o, label: o } : o;
        var on = props.value === v.value;
        return e('button', {
          key: i, className: 'li-seg__opt' + (on ? ' li-seg__opt--on' : ''), type: 'button',
          onClick: function () { if (props.onChange) props.onChange(v.value); }
        }, v.label);
      }));
  }

  /* ---- Badge ---- */
  var BADGE_TONES = {
    success:  { background: 'rgba(46,125,91,0.12)',  color: '#2E7D5B' },
    warning:  { background: 'rgba(201,111,74,0.14)', color: '#A8562F' },
    danger:   { background: 'rgba(168,68,46,0.12)',  color: '#A8442E' },
    neutral:  { background: '#EDE8DC',               color: '#5C6660' },
    solid:    { background: 'var(--li-deep,#14352A)', color: 'var(--li-cream,#F5F1E8)', fontWeight: 700 },
    outline:  { background: 'transparent', color: '#5C6660', border: '1px solid var(--li-border,#D8D2C4)', fontWeight: 500 }
  };
  function Badge(props) {
    var tone = BADGE_TONES[props.tone || 'neutral'] || BADGE_TONES.neutral;
    return e('span', { className: 'li-badge', style: Object.assign({}, tone, props.style) },
      props.children,
      props.onRemove ? e('span', { onClick: props.onRemove, style: { color: '#B7B0A0', fontWeight: 700, cursor: 'pointer' } }, '\u00D7') : null);
  }

  /* ---- Card / StatCard ---- */
  function Card(props) {
    var cls = 'li-card' + (props.selected ? ' li-card--selected' : '') + (props.dark ? ' li-card--dark' : '') + (props.onClick ? ' li-card--click' : '');
    return e('div', { className: cls, onClick: props.onClick, style: props.style }, props.children);
  }

  function StatCard(props) {
    return e(Card, { dark: true, style: props.style },
      e('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
        e('div', { style: { fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'rgba(245,241,232,0.5)', fontFamily: FONT_BODY } }, props.label),
        e('div', { style: { fontFamily: FONT_DISPLAY, fontSize: 30, fontWeight: 700, color: '#F5F1E8' } },
          props.value, props.unit ? e('span', { style: { fontSize: 15, fontWeight: 500, color: 'rgba(245,241,232,0.55)' } }, ' ' + props.unit) : null),
        props.delta ? e('div', { style: { fontSize: 12, color: '#3E9A72', fontWeight: 600, fontFamily: FONT_BODY } }, props.delta) : null));
  }

  /* ---- Tabs ---- */
  function Tabs(props) {
    var tabs = props.tabs || [];
    return e('div', { className: 'li-tabs', role: 'tablist' },
      tabs.map(function (t, i) {
        var label = typeof t === 'string' ? t : t.label;
        var on = props.value === i;
        return e('button', {
          key: i, className: 'li-tabs__tab' + (on ? ' li-tabs__tab--on' : ''), role: 'tab', 'aria-selected': on, type: 'button',
          onClick: function () { if (props.onChange) props.onChange(i); }
        }, label);
      }));
  }

  /* ---- Table ----
     columns: [{key, label, w:'2fr', align:'right', mono:true, render:(row)=>node}]  rows: [{...}] */
  function Table(props) {
    var cols = props.columns || [];
    var grid = cols.map(function (c) { return c.w || '1fr'; }).join(' ');
    return e('div', { className: 'li-table', style: props.style },
      e('div', { className: 'li-table__head', style: { gridTemplateColumns: grid } },
        cols.map(function (c, i) {
          return e('div', { key: i, className: 'li-table__th', style: { textAlign: c.align || 'left' } }, c.label);
        })),
      (props.rows || []).map(function (row, ri) {
        return e('div', {
          key: ri,
          className: 'li-table__row' + (props.onRowClick ? ' li-table__row--click' : ''),
          style: { gridTemplateColumns: grid },
          onClick: props.onRowClick ? function () { props.onRowClick(row, ri); } : undefined
        }, cols.map(function (c, ci) {
          return e('div', { key: ci, className: 'li-table__cell' + (c.mono ? ' li-table__cell--mono' : ''), style: { textAlign: c.align || 'left' } },
            c.render ? c.render(row) : row[c.key]);
        }));
      }));
  }

  /* ---- Alert ---- */
  var ALERT_TONES = {
    success: { bg: 'rgba(46,125,91,0.09)',  border: 'rgba(46,125,91,0.35)',  color: '#2E7D5B', icon: '\u2713' },
    warning: { bg: 'rgba(201,111,74,0.09)', border: 'rgba(201,111,74,0.4)',  color: '#A8562F', icon: '!' },
    danger:  { bg: 'rgba(168,68,46,0.08)',  border: 'rgba(168,68,46,0.4)',   color: '#A8442E', icon: '\u00D7' }
  };
  function Alert(props) {
    var t = ALERT_TONES[props.tone || 'success'] || ALERT_TONES.success;
    return e('div', { className: 'li-alert', style: { background: t.bg, borderColor: t.border }, role: 'alert' },
      e('div', { style: { color: t.color, fontWeight: 700, fontSize: 14 } }, t.icon),
      e('div', { style: { display: 'flex', flexDirection: 'column', gap: 2 } },
        props.title ? e('div', { style: { fontSize: 13.5, fontWeight: 600 } }, props.title) : null,
        props.children ? e('div', { style: { fontSize: 12.5, color: 'var(--li-text-2,#5C6660)' } }, props.children) : null));
  }

  /* ---- EmptyState ---- */
  function EmptyState(props) {
    return e('div', { className: 'li-empty', style: props.style },
      e('div', { style: { position: 'relative', width: 56, height: 42, border: '2px dashed #C9C2B2', borderRadius: 6 } }),
      e('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 } },
        e('div', { style: { fontSize: 15, fontWeight: 600 } }, props.title),
        props.hint ? e('div', { style: { fontSize: 13, color: 'var(--li-text-3,#8A8578)' } }, props.hint) : null),
      props.action || null);
  }

  window.LIUI = {
    Button: Button, Dots: Dots,
    Field: Field, Input: Input, Select: Select, SearchInput: SearchInput,
    Toggle: Toggle, Checkbox: Checkbox, Radio: Radio, Segmented: Segmented,
    Badge: Badge, Card: Card, StatCard: StatCard,
    Tabs: Tabs, Table: Table, Alert: Alert, EmptyState: EmptyState
  };
})();