/* ui.jsx — icons + shared primitives */

const ICONS = {
  waveform: 'M2 12h2l2-7 3 16 3-22 3 19 2-6h3',
  gauge: 'M12 14l4-4 M3.5 14a8.5 8.5 0 1 1 17 0',
  list: 'M8 6h12 M8 12h12 M8 18h12 M3 6h.01 M3 12h.01 M3 18h.01',
  clipboard: 'M9 3h6a1 1 0 0 1 1 1v1h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2V4a1 1 0 0 1 1-1z M8 5h8 M8 11h6 M8 15h4',
  bell: 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9 M10.3 21a1.94 1.94 0 0 0 3.4 0',
  alert: 'M10.3 4.3 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z M12 9v4 M12 17h.01',
  report: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M9 13h6 M9 17h4',
  trend: 'M3 17l6-6 4 4 8-8 M17 7h4v4',
  settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z',
  chevron: 'M6 9l6 6 6-6',
  more: 'M12 5h.01 M12 12h.01 M12 19h.01',
  info: 'M12 16v-4 M12 8h.01',
  play: 'M6 4l14 8-14 8z',
  stop: 'M6 6h12v12H6z',
  check: 'M20 6 9 17l-5-5',
  x: 'M18 6 6 18 M6 6l12 12',
  clock: 'M12 7v5l3 2 M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z',
  mic: 'M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z M5 10v1a7 7 0 0 0 14 0v-1 M12 18v3',
  speaker: 'M11 5 6 9H2v6h4l5 4z M15.5 8.5a5 5 0 0 1 0 7 M19 5a9 9 0 0 1 0 14',
  music: 'M9 18V5l12-2v13 M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0z M21 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0z',
  monitor: 'M3 4h18v12H3z M8 20h8 M12 16v4',
  download: 'M12 3v12 M7 10l5 5 5-5 M5 21h14',
  arrow: 'M5 12h14 M13 6l6 6-6 6',
  calendar: 'M8 2v4 M16 2v4 M3 9h18 M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z',
  refresh: 'M3 12a9 9 0 0 1 15-6.7L21 8 M21 3v5h-5 M21 12a9 9 0 0 1-15 6.7L3 16 M3 21v-5h5',
  guitar: 'M11.9 12.1 4 20a2.8 2.8 0 1 0 4 0l7.9-7.9 M14 9l1-1 M9 14l1-1 M19 2l-4 4 1 3 3 1 4-4-3 1-1-3z',
  zap: 'M13 2 3 14h7l-1 8 10-12h-7z',
  drum: 'M3 7l18-2v4l-18 2z M3 9v6a3 9 0 0 0 18 0V7 M7 13v4 M12 12.5v4.5 M17 13v4',
  cpu: 'M9 2v2 M15 2v2 M9 20v2 M15 20v2 M2 9h2 M2 15h2 M20 9h2 M20 15h2 M5 5h14v14H5z M9 9h6v6H9z',
  layers: 'M12 2 2 7l10 5 10-5z M2 17l10 5 10-5 M2 12l10 5 10-5',
  signal: 'M2 20h.01 M7 20v-4 M12 20v-8 M17 20V8 M22 20V4',
  filter: 'M3 4h18l-7 8v6l-4 2v-8z',
  user: 'M20 21a8 8 0 1 0-16 0 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
};

function Icon({ name, size = 20, color = "currentColor", strokeWidth = 2, style, fill = "none" }) {
  const d = ICONS[name];
  if (!d) return null;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={color}
      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {d.split(" M").map((seg, i) => <path key={i} d={(i === 0 ? "" : "M") + seg} />)}
    </svg>
  );
}

function gradeLabel(g) {
  return { good: "Good", low: "Low", high: "High", warn: "Drift", off: "—" }[g] || g;
}

function GradeChip({ grade, children }) {
  if (grade === "off") return <span className="dim mono" style={{ fontSize: 13 }}>—</span>;
  return <span className={`chip ${grade}`}><span className="dot" />{children || gradeLabel(grade)}</span>;
}

function InfoDot() {
  return <span className="i" title="metric info"><Icon name="info" size={15} color="var(--fg-3)" /></span>;
}

function Panel({ title, icon, right, children, info, style, className }) {
  return (
    <section className={"panel " + (className || "")} style={style}>
      {(title || right) && (
        <div className="panel-head">
          <div className="panel-title">
            {icon && <Icon name={icon} size={17} color="var(--fg-2)" />}
            {title}
            {info && <InfoDot />}
          </div>
          {right}
        </div>
      )}
      {children}
    </section>
  );
}

Object.assign(window, { Icon, ICONS, GradeChip, gradeLabel, InfoDot, Panel });