/* Shared primitives: Chip, MiniBar, Sparkline, MetricStack, DualLayer wrap */

const Chip = ({ klass, children, compact }) => (
  <span className="chip" data-class={klass} style={compact ? {height:22,padding:'0 10px',fontSize:11} : undefined}>
    {children}
  </span>
);
window.Chip = Chip;

const MiniBar = ({ value, tone='var(--moss)', height=6 }) => (
  <div style={{height,borderRadius:height/2,background:'var(--canvas-3)',overflow:'hidden'}}>
    <div style={{width:`${value}%`,height:'100%',background:tone,transition:'width 520ms var(--ease-quiet)'}}/>
  </div>
);
window.MiniBar = MiniBar;

const StackedBar = ({ t, a, n, height=8 }) => (
  <div style={{height,borderRadius:height/2,overflow:'hidden',display:'flex',background:'var(--canvas-3)'}}>
    <div style={{width:`${t}%`,background:'var(--class-true)'}}/>
    <div style={{width:`${a}%`,background:'var(--class-ambig)'}}/>
    <div style={{width:`${n}%`,background:'var(--class-none)'}}/>
  </div>
);
window.StackedBar = StackedBar;

const Sparkline = ({ points, width=120, height=28, color='var(--moss)' }) => {
  const max = Math.max(...points), min = Math.min(...points);
  const r = max - min || 1;
  const coords = points.map((p, i) => {
    const x = (i / (points.length - 1)) * (width - 2) + 1;
    const y = height - 2 - ((p - min) / r) * (height - 4);
    return `${x},${y}`;
  }).join(' ');
  return (
    <svg width={width} height={height} style={{display:'block'}}>
      <polyline points={coords} fill="none" stroke={color} strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
};
window.Sparkline = Sparkline;

const EyebrowRow = ({ label }) => (
  <div className="eyebrow-row">
    <span className="dot"/>
    <span className="eyebrow">{label}</span>
  </div>
);
window.EyebrowRow = EyebrowRow;