@extends('layouts.app')

{{-- Line Icons — faithful re-expression of src/html/icons/line.html.
     Same DOM/classes/ARIA. Alpine x-data on the .ax-dash-grid; inline
     iconGallery() component + page-local <style> kept in place. --}}

@section('content')

        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Line Icons</h1>
              <p class="ax-page-head__subtitle">A lighter, Feather-style outline aesthetic — 1.5px hairline strokes with round caps. Click any tile to copy its name.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/icons/tabler">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h6v6h-6z"/><path d="M14 4h6v6h-6z"/><path d="M4 14h6v6h-6z"/><path d="M14 14h6v6h-6z"/></svg>
                <span class="ax-btn__label">Tabler set</span>
              </a>
              <a class="ax-btn ax-btn--primary" href="/icons/solid">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.979 -1.404a6 6 0 0 1 3.124 10.236l-.18 .185l-7.5 7.428l-7.5 -7.428a6 6 0 0 1 2.018 -10.43z"/></svg>
                <span class="ax-btn__label">Solid set</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid"
          x-data="iconGallery({
            mode:'line',
            icons:[
              {n:'home',c:'System',k:'house main start',o:'<path d=\'M5 12l-2 0l9 -9l9 9l-2 0\'/><path d=\'M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7\'/><path d=\'M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6\'/>'},
              {n:'user',c:'People',k:'person account profile avatar',o:'<path d=\'M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\'/><path d=\'M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\'/>'},
              {n:'mail',c:'Communication',k:'email envelope message inbox',o:'<path d=\'M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10\'/><path d=\'M3 7l9 6l9 -6\'/>'},
              {n:'search',c:'System',k:'find magnifier lookup',o:'<path d=\'M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\'/><path d=\'M21 21l-6 -6\'/>'},
              {n:'bell',c:'System',k:'notification alert ring',o:'<path d=\'M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6\'/><path d=\'M9 17v1a3 3 0 0 0 6 0v-1\'/>'},
              {n:'calendar',c:'System',k:'date schedule event month',o:'<path d=\'M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12\'/><path d=\'M16 3v4\'/><path d=\'M8 3v4\'/><path d=\'M4 11h16\'/><path d=\'M11 15h1\'/><path d=\'M12 15v3\'/>'},
              {n:'heart',c:'Health',k:'love like favorite',o:'<path d=\'M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572\'/>'},
              {n:'star',c:'System',k:'rate favorite bookmark',o:'<path d=\'M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245\'/>'},
              {n:'settings',c:'System',k:'gear cog config preferences',o:'<path d=\'M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\'/><path d=\'M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/>'},
              {n:'download',c:'System',k:'save arrow down export',o:'<path d=\'M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\'/><path d=\'M7 11l5 5l5 -5\'/><path d=\'M12 4l0 12\'/>'},
              {n:'upload',c:'System',k:'arrow up import share',o:'<path d=\'M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\'/><path d=\'M7 9l5 -5l5 5\'/><path d=\'M12 4l0 12\'/>'},
              {n:'trash',c:'System',k:'delete remove bin garbage',o:'<path d=\'M4 7l16 0\'/><path d=\'M10 11l0 6\'/><path d=\'M14 11l0 6\'/><path d=\'M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12\'/><path d=\'M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3\'/>'},
              {n:'edit',c:'System',k:'pencil write modify pen',o:'<path d=\'M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\'/><path d=\'M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\'/><path d=\'M16 5l3 3\'/>'},
              {n:'plus',c:'System',k:'add new create increment',o:'<path d=\'M12 5l0 14\'/><path d=\'M5 12l14 0\'/>'},
              {n:'check',c:'System',k:'tick done confirm success',o:'<path d=\'M5 12l5 5l10 -10\'/>'},
              {n:'x',c:'System',k:'close cancel cross dismiss',o:'<path d=\'M18 6l-12 12\'/><path d=\'M6 6l12 12\'/>'},
              {n:'eye',c:'System',k:'view show preview visible',o:'<path d=\'M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\'/><path d=\'M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\'/>'},
              {n:'lock',c:'System',k:'secure private password locked',o:'<path d=\'M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6\'/><path d=\'M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0\'/><path d=\'M8 11v-4a4 4 0 1 1 8 0v4\'/>'},
              {n:'bookmark',c:'System',k:'save ribbon flag favorite',o:'<path d=\'M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4\'/>'},
              {n:'folder',c:'Files',k:'directory storage archive',o:'<path d=\'M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2\'/>'},
              {n:'file',c:'Files',k:'document page sheet',o:'<path d=\'M14 3v4a1 1 0 0 0 1 1h4\'/><path d=\'M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2\'/>'},
              {n:'cloud',c:'Weather',k:'storage upload sky sync',o:'<path d=\'M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878\'/>'},
              {n:'message-circle',c:'Communication',k:'chat talk comment bubble',o:'<path d=\'M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\'/>'},
              {n:'phone',c:'Communication',k:'call dial telephone contact',o:'<path d=\'M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2\'/>'},
              {n:'map-pin',c:'Map',k:'location place marker geo',o:'<path d=\'M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/><path d=\'M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0\'/>'},
              {n:'shopping-cart',c:'E-commerce',k:'buy store basket checkout',o:'<path d=\'M4 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\'/><path d=\'M15 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\'/><path d=\'M17 17h-11v-14h-2\'/><path d=\'M6 5l14 1l-1 7h-13\'/>'},
              {n:'credit-card',c:'E-commerce',k:'payment money pay bank',o:'<path d=\'M3 8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -8\'/><path d=\'M3 10l18 0\'/><path d=\'M7 15l.01 0\'/><path d=\'M11 15l2 0\'/>'},
              {n:'chart-bar',c:'Data',k:'graph analytics stats bars',o:'<path d=\'M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -6\'/><path d=\'M15 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -10\'/><path d=\'M9 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -14\'/><path d=\'M4 20h14\'/>'},
              {n:'briefcase',c:'Business',k:'work job portfolio bag',o:'<path d=\'M3 9a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -9\'/><path d=\'M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2\'/><path d=\'M12 12l0 .01\'/><path d=\'M3 13a20 20 0 0 0 18 0\'/>'},
              {n:'world',c:'Map',k:'globe earth international planet',o:'<path d=\'M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\'/><path d=\'M3.6 9h16.8\'/><path d=\'M3.6 15h16.8\'/><path d=\'M11.5 3a17 17 0 0 0 0 18\'/><path d=\'M12.5 3a17 17 0 0 1 0 18\'/>'},
              {n:'gift',c:'System',k:'present reward box surprise',o:'<path d=\'M3 9a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1l0 -2\'/><path d=\'M12 8l0 13\'/><path d=\'M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7\'/><path d=\'M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5\'/>'},
              {n:'flag',c:'System',k:'banner mark country report',o:'<path d=\'M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0v9a5 5 0 0 1 -7 0a5 5 0 0 0 -7 0v-9\'/><path d=\'M5 21v-7\'/>'},
              {n:'moon',c:'Weather',k:'night dark theme sleep',o:'<path d=\'M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008\'/>'},
              {n:'sun',c:'Weather',k:'day light theme bright',o:'<path d=\'M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0\'/><path d=\'M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7\'/>'},
              {n:'bolt',c:'System',k:'flash lightning fast power energy',o:'<path d=\'M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11\'/>'},
              {n:'paperclip',c:'System',k:'attach clip file link',o:'<path d=\'M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5\'/>'},
              {n:'link',c:'System',k:'url chain hyperlink connect',o:'<path d=\'M9 15l6 -6\'/><path d=\'M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464\'/><path d=\'M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463\'/>'},
              {n:'printer',c:'Devices',k:'print paper office document',o:'<path d=\'M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2\'/><path d=\'M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4\'/><path d=\'M7 15a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2l0 -4\'/>'},
              {n:'music',c:'Media',k:'note song audio sound play',o:'<path d=\'M3 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/><path d=\'M13 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/><path d=\'M9 17v-13h10v13\'/><path d=\'M9 8h10\'/>'},
              {n:'photo',c:'Media',k:'image picture gallery landscape',o:'<path d=\'M15 8h.01\'/><path d=\'M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12\'/><path d=\'M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5\'/><path d=\'M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3\'/>'},
              {n:'video',c:'Media',k:'film movie record play camera',o:'<path d=\'M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4\'/><path d=\'M3 8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -8\'/>'},
              {n:'microphone',c:'Media',k:'mic record voice audio speak',o:'<path d=\'M9 5a3 3 0 0 1 3 -3a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3a3 3 0 0 1 -3 -3l0 -5\'/><path d=\'M5 10a7 7 0 0 0 14 0\'/><path d=\'M8 21l8 0\'/><path d=\'M12 17l0 4\'/>'},
              {n:'headphones',c:'Devices',k:'audio sound music listen',o:'<path d=\'M4 15a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2l0 -3\'/><path d=\'M15 15a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2l0 -3\'/><path d=\'M4 15v-3a8 8 0 0 1 16 0v3\'/>'},
              {n:'rocket',c:'System',k:'launch startup ship boost',o:'<path d=\'M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3\'/><path d=\'M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3\'/><path d=\'M14 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\'/>'},
              {n:'flame',c:'Weather',k:'fire hot trending burn',o:'<path d=\'M12 10.941c2.333 -3.308 .167 -7.823 -1 -8.941c0 3.395 -2.235 5.299 -3.667 6.706c-1.43 1.408 -2.333 3.294 -2.333 5.588c0 3.704 3.134 6.706 7 6.706c3.866 0 7 -3.002 7 -6.706c0 -1.712 -1.232 -4.403 -2.333 -5.588c-2.084 3.353 -3.257 3.353 -4.667 2.235\'/>'},
              {n:'camera',c:'Media',k:'photo capture snap lens',o:'<path d=\'M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2\'/><path d=\'M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/>'}
            ]
          })">

          <!-- ───── GALLERY CARD ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Line icon gallery">
            <div class="ax-card__header" style="flex-wrap:wrap;gap:var(--ax-space-3);">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Outline aesthetic</span>
                <h2 class="ax-card__title">Browse the set</h2>
                <p class="ax-card__subtitle"><span class="ax-num" x-text="filtered.length"></span> of <span class="ax-num" x-text="icons.length"></span> shown · 1.5px hairline strokes</p>
              </div>
              <div class="ax-card__actions" style="flex-wrap:wrap;gap:var(--ax-space-2);">
                <!-- size preview -->
                <div class="ax-segment" role="group" aria-label="Preview size">
                  <button type="button" class="ax-segment__option" :aria-pressed="size==='sm'" @click="size='sm'">SM</button>
                  <button type="button" class="ax-segment__option" :aria-pressed="size==='md'" @click="size='md'">MD</button>
                  <button type="button" class="ax-segment__option" :aria-pressed="size==='lg'" @click="size='lg'">LG</button>
                </div>
                <!-- color preview -->
                <div class="ax-segment" role="group" aria-label="Preview color">
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='text'" @click="color='text'" aria-label="Text color"><span style="font-weight:600;">A</span></button>
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='accent'" @click="color='accent'" aria-label="Accent color"><span style="font-weight:600;color:var(--ax-accent);">A</span></button>
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='success'" @click="color='success'" aria-label="Success color"><span style="font-weight:600;color:var(--ax-success-500);">A</span></button>
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='danger'" @click="color='danger'" aria-label="Danger color"><span style="font-weight:600;color:var(--ax-danger-500);">A</span></button>
                </div>
                <!-- search -->
                <div style="position:relative;min-width:220px;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:var(--ax-icon-sm);height:var(--ax-icon-sm);color:var(--ax-text-subtle);pointer-events:none;"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                  <input type="search" class="ax-input ax-input--sm" placeholder="Search icons…" x-model.debounce.150ms="q" aria-label="Search line icons" style="padding-inline-start:36px;width:100%;">
                </div>
              </div>
            </div>

            <div class="ax-card__body">
              <!-- grid -->
              <div class="ax-icongrid" x-show="filtered.length">
                <template x-for="ic in filtered" :key="ic.n">
                  <button type="button" class="ax-icontile" :title="ic.n" @click="copy(ic.n)" :aria-label="'Copy icon name '+ic.n">
                    <span class="ax-icontile__glyph" :class="['is-'+size,'is-'+color]">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" x-html="ic.o"></svg>
                    </span>
                    <span class="ax-icontile__name ax-truncate" x-text="ic.n"></span>
                  </button>
                </template>
              </div>

              <!-- empty state -->
              <div x-show="!filtered.length" x-cloak style="text-align:center;padding:var(--ax-space-9) var(--ax-space-4);">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:48px;height:48px;color:var(--ax-text-subtle);margin-bottom:var(--ax-space-3);"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/><path d="M7 10l6 0"/></svg>
                <p style="font-size:var(--ax-text-md);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);margin:0;">No icons match "<span x-text="q"></span>"</p>
                <p style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);margin:4px 0 var(--ax-space-4);">Try a different name, tag or keyword.</p>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" @click="q=''">Clear search</button>
              </div>
            </div>
          </section>

          <!-- ───── USAGE NOTE ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Usage">
            <div class="ax-card__body" style="display:flex;align-items:flex-start;gap:var(--ax-space-4);flex-wrap:wrap;">
              <span class="ax-avatar ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);flex:0 0 auto;">
                <svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l11 0"/><path d="M9 12l11 0"/><path d="M9 18l11 0"/><path d="M5 6l0 .01"/><path d="M5 12l0 .01"/><path d="M5 18l0 .01"/></svg>
              </span>
              <div style="flex:1 1 320px;min-width:0;">
                <h3 style="margin:0 0 4px;font-size:var(--ax-text-md);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Lighter weight, same grid</h3>
                <p style="margin:0 0 var(--ax-space-3);font-size:var(--ax-text-sm);color:var(--ax-text-muted);">The line set is the same 24×24 geometry rendered at a slimmer <code class="ax-code">stroke-width:1.5</code> for a calmer, editorial feel — ideal for dense lists, table rows and inline labels. Still <code class="ax-code">currentColor</code>, still fully themeable.</p>
                <pre class="ax-code" style="display:block;padding:var(--ax-space-3) var(--ax-space-4);border-radius:var(--ax-radius-md);background:var(--ax-surface-subtle);overflow-x:auto;font-size:var(--ax-text-xs);margin:0;color:var(--ax-text);">&lt;svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"&gt;…&lt;/svg&gt;</pre>
              </div>
            </div>
          </section>

          <!-- copy confirmation pill -->
          <div class="ax-copytoast" role="status" aria-live="polite" x-show="copied" x-cloak x-transition.opacity>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
            <span>Copied <code class="ax-code" style="background:transparent;padding:0;color:var(--ax-accent);" x-text="copied"></code></span>
          </div>

        </div>

        <!-- gallery component + page-local styles (role-tokens only) -->
        <style>
          .ax-icongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--ax-space-2);}
          .ax-icontile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ax-space-2);padding:var(--ax-space-4) var(--ax-space-2);min-width:0;color:var(--ax-text-muted);background:var(--ax-surface-subtle);border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);cursor:pointer;transition:color var(--ax-motion-fast) var(--ax-ease-standard),background var(--ax-motion-fast) var(--ax-ease-standard),border-color var(--ax-motion-fast) var(--ax-ease-standard),transform var(--ax-motion-fast) var(--ax-ease-standard);}
          .ax-icontile:hover{color:var(--ax-accent);background:var(--ax-accent-wash);border-color:var(--ax-border-strong);transform:translateY(-2px);}
          .ax-icontile:focus-visible{outline:2px solid var(--ax-accent);outline-offset:2px;}
          .ax-icontile__glyph{display:grid;place-items:center;height:32px;}
          .ax-icontile__glyph svg{width:24px;height:24px;}
          .ax-icontile__glyph.is-sm svg{width:18px;height:18px;}
          .ax-icontile__glyph.is-md svg{width:24px;height:24px;}
          .ax-icontile__glyph.is-lg svg{width:32px;height:32px;}
          .ax-icontile__glyph.is-accent{color:var(--ax-accent);}
          .ax-icontile__glyph.is-success{color:var(--ax-success-500);}
          .ax-icontile__glyph.is-danger{color:var(--ax-danger-500);}
          .ax-icontile:hover .ax-icontile__glyph.is-text{color:var(--ax-accent);}
          .ax-icontile__name{font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);text-align:center;max-width:100%;}
          .ax-copytoast{position:fixed;inset-block-end:var(--ax-space-6);inset-inline:0;margin-inline:auto;width:max-content;max-width:90vw;z-index:var(--ax-z-toast,80);display:flex;align-items:center;gap:var(--ax-space-2);padding:var(--ax-space-3) var(--ax-space-5);color:var(--ax-text-strong);background:var(--ax-surface-overlay);border:1px solid var(--ax-border);border-radius:var(--ax-radius-pill);box-shadow:var(--ax-shadow-lg);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);}
          .ax-copytoast svg{width:var(--ax-icon-sm);height:var(--ax-icon-sm);color:var(--ax-success-500);}
        </style>

        <script>
          function iconGallery(cfg){
            return {
              icons: cfg.icons,
              mode: cfg.mode || 'gallery',
              variant: cfg.variant || 'outline',
              size: 'md',
              color: 'text',
              q: '',
              copied: false,
              _t: null,
              get filtered(){
                const q = this.q.trim().toLowerCase();
                if(!q) return this.icons;
                return this.icons.filter(i =>
                  i.n.toLowerCase().includes(q) ||
                  (i.k && i.k.toLowerCase().includes(q)) ||
                  (i.c && i.c.toLowerCase().includes(q))
                );
              },
              copy(name){
                try { navigator.clipboard?.writeText(name); } catch(e){ /* noop */ }
                this.copied = name;
                clearTimeout(this._t);
                this._t = setTimeout(() => { this.copied = false; }, 1500);
              }
            };
          }
        </script>
@endsection