/* Nutshell UI kit — icon set
   SF-Symbols-style line icons (stroke 1.8, round caps), the web stand-in
   for Apple SF Symbols used in the real app. Exposed on window.NSIcons. */
(function () {
  const P = {
    play:      { fill: 1, body: <path d="M8 5v14l11-7z" /> },
    pause:     { fill: 1, body: <g><rect x="6" y="5" width="4" height="14" rx="1" /><rect x="14" y="5" width="4" height="14" rx="1" /></g> },
    prev:      <g><path d="M19 20 9 12l10-8z" fill="currentColor" stroke="none" /><line x1="5" y1="19" x2="5" y2="5" /></g>,
    next:      <g><path d="M5 4l10 8-10 8z" fill="currentColor" stroke="none" /><line x1="19" y1="5" x2="19" y2="19" /></g>,
    share:     <g><path d="M12 15V4" /><path d="M8 8l4-4 4 4" /><path d="M5 13v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5" /></g>,
    link:      <g><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1" /><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1" /></g>,
    search:    <g><circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16.5" y2="16.5" /></g>,
    plus:      <g><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></g>,
    sparkles:  <g><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6z" /><path d="M19 14l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z" /></g>,
    graph:     <g><rect x="4" y="4" width="6" height="5" rx="1.2" /><rect x="14" y="15" width="6" height="5" rx="1.2" /><rect x="4" y="15" width="6" height="5" rx="1.2" /><path d="M7 9v3a2 2 0 0 0 2 2h8" /></g>,
    text:      <g><line x1="5" y1="7" x2="19" y2="7" /><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="17" x2="13" y2="17" /></g>,
    youtube:   { fill: 1, body: <path d="M21.6 7.2a2.8 2.8 0 0 0-2-2C17.9 4.8 12 4.8 12 4.8s-5.9 0-7.6.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.8 2.8 2.8 0 0 0 2 2c1.7.4 7.6.4 7.6.4s5.9 0 7.6-.4a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.8zM10 15V9l5 3z" /> },
    settings:  <g><circle cx="12" cy="12" r="3" /><path d="M19.4 13.5a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.2a1.6 1.6 0 0 0-2.7-1.1l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0-1.1-2.7H3a2 2 0 1 1 0-4h.2a1.6 1.6 0 0 0 1.1-2.7l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.2a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.2a1.6 1.6 0 0 0-1.4 1z" /></g>,
    library:   <g><rect x="4" y="4" width="7" height="7" rx="1.5" /><rect x="13" y="4" width="7" height="7" rx="1.5" /><rect x="4" y="13" width="7" height="7" rx="1.5" /><rect x="13" y="13" width="7" height="7" rx="1.5" /></g>,
    book:      <g><path d="M12 6c-2-1.3-5-1.3-7 0v12c2-1.3 5-1.3 7 0M12 6c2-1.3 5-1.3 7 0v12c-2-1.3-5-1.3-7 0M12 6v12" /></g>,
    collection:<g><rect x="4" y="4" width="13" height="13" rx="2.2" /><path d="M7.5 20h11a1.5 1.5 0 0 0 1.5-1.5v-11" /></g>,
    wand:      <g><path d="M15 4V2M15 10V8M11 6H9M21 6h-2" /><path d="M12.5 7.5 4 16l4 4 8.5-8.5z" /></g>,
    activity:  <path d="M3 12h4l3 8 4-16 3 8h4" />,
    chat:      <path d="M21 11.5a8.4 8.4 0 0 1-12 7.6L3 21l1.9-6A8.4 8.4 0 1 1 21 11.5z" />,
    mic:       <g><rect x="9" y="3" width="6" height="11" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3" /></g>,
    wave:      { fill: 1, body: <g><rect x="3" y="9" width="2.2" height="6" rx="1.1" /><rect x="7.5" y="5" width="2.2" height="14" rx="1.1" /><rect x="12" y="8" width="2.2" height="8" rx="1.1" /><rect x="16.5" y="6" width="2.2" height="12" rx="1.1" /><rect x="21" y="10" width="2.2" height="4" rx="1.1" /></g> },
    chevronDown:  <path d="M6 9l6 6 6-6" />,
    chevronUp:    <path d="M6 15l6-6 6 6" />,
    chevronRight: <path d="M9 6l6 6-6 6" />,
    chevronLeft:  <path d="M15 6l-6 6 6 6" />,
    x:         <g><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></g>,
    check:     <path d="M5 12l5 5 9-11" />,
    trash:     <g><path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13" /></g>,
    bookmark:  <path d="M6 4h12v17l-6-4-6 4z" />,
    bookmarkFill: { fill: 1, body: <path d="M6 4h12v17l-6-4-6 4z" /> },
    cursor:    { fill: 1, body: <path d="M5 3l6 16 2.2-6.4L19 10z" /> },
    clipboard: <g><rect x="6" y="4" width="12" height="17" rx="2" /><rect x="9" y="2.5" width="6" height="3.5" rx="1.2" /></g>,
    clock:     <g><circle cx="12" cy="12" r="8.5" /><path d="M12 7v5l3.5 2" /></g>,
    zoomIn:    <g><circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16.5" y2="16.5" /><line x1="11" y1="8" x2="11" y2="14" /><line x1="8" y1="11" x2="14" y2="11" /></g>,
    zoomOut:   <g><circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16.5" y2="16.5" /><line x1="8" y1="11" x2="14" y2="11" /></g>,
    gauge:     <g><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" /><path d="M12 12l4-4M4.5 18a9 9 0 1 1 15 0" /></g>,
    volume:    <g><path d="M4 9v6h4l5 4V5L8 9z" /><path d="M16 9a3 3 0 0 1 0 6M18.5 7a6 6 0 0 1 0 10" /></g>,
    info:      <g><circle cx="12" cy="12" r="9" /><line x1="12" y1="11" x2="12" y2="16" /><circle cx="12" cy="7.8" r="0.6" fill="currentColor" /></g>,
    refresh:   <g><path d="M21 12a9 9 0 1 1-3-6.7M21 4v4h-4" /></g>,
    panelLeft: <g><rect x="3" y="4" width="18" height="16" rx="2.5" /><line x1="9" y1="4" x2="9" y2="20" /></g>,
    arrowUp:   <g><line x1="12" y1="19" x2="12" y2="5" /><path d="M6 11l6-6 6 6" /></g>,
    stop:      { fill: 1, body: <rect x="6" y="6" width="12" height="12" rx="2.5" /> },
    expand:    <g><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3" /></g>,
    bolt:      { fill: 1, body: <path d="M13 2 4 14h6l-1 8 9-12h-6z" /> },
    dot:       { fill: 1, body: <circle cx="12" cy="12" r="4" /> },
    lock:      <g><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></g>,
    eject:     <g><path d="M5 14h14L12 5z" fill="currentColor" stroke="none" /><line x1="5" y1="18" x2="19" y2="18" /></g>,
  };

  function Icon({ name, size = 18, stroke = 1.8, style, ...rest }) {
    const def = P[name];
    if (!def) return null;
    const filled = def.fill;
    const body = def.body || def;
    return (
      <svg viewBox="0 0 24 24" width={size} height={size}
        fill={filled ? "currentColor" : "none"}
        stroke={filled ? "none" : "currentColor"}
        strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
        style={style} aria-hidden="true" {...rest}>
        {body}
      </svg>
    );
  }

  window.NSIcons = { Icon, names: Object.keys(P) };
})();