// File-tree and icon glyphs
const Glyph = {
  folder: (open) => (
    <span className={`glyph ${open ? 'g-folder-open' : 'g-folder'}`}>
      <svg viewBox="0 0 16 16" fill="currentColor">
        {open ? (
          <path d="M1.5 3h4l1.2 1.5H14a.5.5 0 0 1 .5.5v1H2.8l-1.3 6.5A.5.5 0 0 1 1 12V3.5a.5.5 0 0 1 .5-.5zm1.7 4H15l-1.3 6.3a.5.5 0 0 1-.49.4H2.7a.5.5 0 0 1-.49-.6L3.2 7z" />
        ) : (
          <path d="M1.5 3h4.2l1.3 1.5H14.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V3.5a.5.5 0 0 1 .5-.5z" />
        )}
      </svg>
    </span>
  ),
  md: () => (
    <span className="glyph g-md">
      <svg viewBox="0 0 16 16" fill="currentColor">
        <rect x="1" y="2" width="14" height="12" rx="1" fillOpacity="0.15" stroke="currentColor" strokeWidth="1" />
        <text x="8" y="11" fontFamily="monospace" fontSize="5" fontWeight="700" textAnchor="middle" fill="currentColor">MD</text>
      </svg>
    </span>
  ),
  json: () => (
    <span className="glyph g-json">
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2">
        <path d="M5 3c-1.5 0-2 .8-2 2v2c0 .8-.5 1-1 1 .5 0 1 .2 1 1v2c0 1.2.5 2 2 2" />
        <path d="M11 3c1.5 0 2 .8 2 2v2c0 .8.5 1 1 1-.5 0-1 .2-1 1v2c0 1.2-.5 2-2 2" />
      </svg>
    </span>
  ),
  js: () => (
    <span className="glyph g-js">
      <svg viewBox="0 0 16 16" fill="currentColor">
        <rect x="2" y="2" width="12" height="12" rx="1" />
        <text x="8" y="12" fontFamily="monospace" fontSize="7" fontWeight="800" textAnchor="middle" fill="#151b23">JS</text>
      </svg>
    </span>
  ),
  py: () => (
    <span className="glyph g-py">
      <svg viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 2c-2 0-3 .8-3 2v2h3v1H4c-1.5 0-2 1-2 2.5S2.5 12 4 12h1v-1.5C5 9 6 8 7.5 8h3c1.2 0 2-.8 2-2V4c0-1.2-1-2-2-2H8zm-1 1.5a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1z" />
      </svg>
    </span>
  ),
  java: () => (
    <span className="glyph g-java">
      <svg viewBox="0 0 16 16" fill="currentColor">
        <path d="M6 2s-2 3 1 5c1 1 .5 2-1 3h6c-1-1-1-2 0-3 2-2 2-4 0-5H6z" fillOpacity="0.5" />
        <path d="M4 12c0 1 2 2 4 2s4-1 4-2" stroke="currentColor" strokeWidth="1" fill="none" />
      </svg>
    </span>
  ),
  html: () => (
    <span className="glyph g-html">
      <svg viewBox="0 0 16 16" fill="currentColor">
        <path d="M2 2l1.2 11L8 14l4.8-1 1.2-11H2zm9 3H5.5l.1 1.5h5.2l-.4 4.5-2.4.7-2.4-.7-.1-2H7l.1 1 .9.3.9-.3.1-1.7H5.5L5 5h6l-.1 1z" />
      </svg>
    </span>
  ),
  git: () => (
    <span className="glyph g-git">
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3">
        <circle cx="4" cy="4" r="1.5" /><circle cx="4" cy="12" r="1.5" /><circle cx="12" cy="8" r="1.5" />
        <path d="M4 5.5v5M5.5 4h3a3 3 0 0 1 3 3v0" />
      </svg>
    </span>
  ),
  img: () => (
    <span className="glyph g-img">
      <svg viewBox="0 0 16 16" fill="currentColor">
        <rect x="1.5" y="2.5" width="13" height="11" rx="1" fill="none" stroke="currentColor" strokeWidth="1" />
        <circle cx="5" cy="6" r="1" />
        <path d="M2 12l3.5-3.5L9 12l3-2 2 2v1.5H2z" />
      </svg>
    </span>
  ),
  lock: () => (
    <span className="glyph g-lock">
      <svg viewBox="0 0 16 16" fill="currentColor">
        <rect x="3" y="7" width="10" height="7" rx="1" />
        <path d="M5 7V5a3 3 0 0 1 6 0v2" fill="none" stroke="currentColor" strokeWidth="1.3" />
      </svg>
    </span>
  ),
  chevron: (open) => (
    <span className="chev" style={{ transform: open ? 'rotate(90deg)' : 'none', display: 'inline-block', transition: 'transform .15s' }}>
      <svg viewBox="0 0 16 16" width="10" height="10" fill="currentColor">
        <path d="M6 4l4 4-4 4z" />
      </svg>
    </span>
  ),
};

window.Glyph = Glyph;
