// Tiny, restrained icon set (stroked, 1.25px). Nothing ornamental.
const Ico = {
  folder: (p={}) => (
    <svg width={p.s||14} height={p.s||14} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25">
      <path d="M1.5 4.5c0-.6.4-1 1-1H6l1.5 1.5h6c.6 0 1 .4 1 1v6c0 .6-.4 1-1 1h-11c-.6 0-1-.4-1-1v-7.5z"/>
    </svg>
  ),
  folderOpen: (p={}) => (
    <svg width={p.s||14} height={p.s||14} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25">
      <path d="M1.5 4.5c0-.6.4-1 1-1H6l1.5 1.5h6c.6 0 1 .4 1 1V7H1.5V4.5z"/>
      <path d="M1.5 7h13l-1.2 5a1 1 0 0 1-1 .8H2.7a1 1 0 0 1-1-.8L1.5 7z"/>
    </svg>
  ),
  doc: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25">
      <path d="M3.5 1.5h6l3 3v10c0 .3-.2.5-.5.5h-8.5a.5.5 0 0 1-.5-.5v-12.5c0-.3.2-.5.5-.5z"/>
      <path d="M9.5 1.5v3h3"/>
      <path d="M5 8h6M5 10.5h6M5 13h4"/>
    </svg>
  ),
  ppt: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25">
      <rect x="1.5" y="2.5" width="13" height="9" rx=".5"/>
      <path d="M6 11.5v2M10 11.5v2M4.5 13.5h7"/>
      <path d="M4 5.5h5M4 7.5h3"/>
    </svg>
  ),
  video: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25">
      <rect x="1.5" y="3.5" width="9" height="9" rx=".5"/>
      <path d="M10.5 6.5l4-2v7l-4-2z"/>
    </svg>
  ),
  audio: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25">
      <path d="M2 6.5v3M4.5 4.5v7M7 2.5v11M9.5 5v6M12 7v2M14.5 6v4"/>
    </svg>
  ),
  image: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25">
      <rect x="1.5" y="2.5" width="13" height="11" rx=".5"/>
      <circle cx="5.5" cy="6.5" r="1.2"/>
      <path d="M2 12l3.5-3.5 3 3 2.5-2 4 3"/>
    </svg>
  ),
  chev: (p={}) => (
    <svg width={p.s||10} height={p.s||10} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" style={{transition:'transform .18s', transform: p.open ? 'rotate(90deg)' : 'rotate(0)'}}>
      <path d="M4.5 2.5l3 3.5-3 3.5"/>
    </svg>
  ),
  plus: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M6 1.5v9M1.5 6h9"/>
    </svg>
  ),
  sparkle: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.3">
      <path d="M6 1l1 3.2L10 5.5 7 6.8 6 10 5 6.8 2 5.5l3-1.3z"/>
    </svg>
  ),
  pin: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.3">
      <path d="M6 1.5l3 3-1 1 1 2-2.5-.5L3 10.5l-.5-3-.5-1 1-1 3-3z"/>
    </svg>
  ),
  dot: (p={}) => (
    <svg width={p.s||8} height={p.s||8} viewBox="0 0 8 8"><circle cx="4" cy="4" r="3" fill="currentColor"/></svg>
  ),
  drag: (p={}) => (
    <svg width={p.s||10} height={p.s||14} viewBox="0 0 10 14" fill="currentColor">
      <circle cx="3" cy="3" r="1"/><circle cx="7" cy="3" r="1"/>
      <circle cx="3" cy="7" r="1"/><circle cx="7" cy="7" r="1"/>
      <circle cx="3" cy="11" r="1"/><circle cx="7" cy="11" r="1"/>
    </svg>
  ),
  arrow: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.3">
      <path d="M2 6h8M7 3l3 3-3 3"/>
    </svg>
  ),
  x: (p={}) => (
    <svg width={p.s||10} height={p.s||10} viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M2 2l6 6M8 2l-6 6"/>
    </svg>
  ),
  search: (p={}) => (
    <svg width={p.s||12} height={p.s||12} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
      <circle cx="6" cy="6" r="4"/><path d="M9 9l3.5 3.5"/>
    </svg>
  ),
};

const kindIcon = (k) => ({
  doc: Ico.doc, ppt: Ico.ppt, video: Ico.video, audio: Ico.audio, image: Ico.image,
})[k] || Ico.doc;

const kindLabel = (k) => ({
  doc:'DOC', ppt:'PPT', video:'VIDEO', audio:'AUDIO', image:'IMAGE'
})[k] || 'FILE';

window.Ico = Ico;
window.kindIcon = kindIcon;
window.kindLabel = kindLabel;
