AkurAI-Framework / site/frontend/ai-gallery.html

Latest change d2de65b4934c81cfa0049cf6b956720e001fe1ec - feat(ai): add AI components gallery page (stub manifest + gallery.js + ai-gallery.html) by Ólafur Búi Ólafsson

{% include "header" %}
    <main class="container components">
      <header class="page-head">
        <span class="eyebrow">AI Components</span>
        <h1>AI Component Gallery</h1>
        <p class="lede">Every tool-UI component rendered live from its preset example.
        Components are pure ES modules — no bundler, no React, no runtime dependency.
        <a href="/docs/ai-components">How the library works →</a></p>
      </header>

      <!-- Gallery mounts here — gallery.js populates nav + cards -->
      <div id="ai-gallery-root"></div>
    </main>

    <style>
      /* Gallery-scoped styles — do NOT edit styles.css */

      /* Sticky nav for category jump links */
      .gallery-nav {
        position: sticky;
        top: 64px;
        z-index: 10;
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: blur(8px);
        padding: 10px 0;
        margin-bottom: 8px;
      }

      /* Category section spacing */
      .gallery-section { padding-bottom: 48px; }

      /* Card grid — 2 columns on wide, 1 on narrow */
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 20px;
        margin-top: 20px;
      }

      /* Individual showcase card */
      .gallery-card {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow: hidden;
      }

      .gallery-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 18px 12px;
        border-bottom: 1px solid var(--border);
      }
      .gallery-card-head h3 { margin: 0; font-size: 15px; }

      .gallery-badge {
        font-family: var(--mono);
        font-size: 11px;
        white-space: nowrap;
      }

      /* Live render area */
      .gallery-live {
        padding: 22px 18px;
        min-height: 72px;
        background: var(--bg-2);
        flex: 1;
      }

      /* Payload viewer */
      .gallery-payload {
        border-top: 1px solid var(--border);
      }
      .gallery-payload > summary {
        padding: 10px 18px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--dim);
        cursor: pointer;
        user-select: none;
      }
      .gallery-payload > summary:hover { color: var(--muted); }
      .gallery-payload-pre {
        margin: 0;
        padding: 14px 18px;
        background: #0c0f16;
        border-top: 1px solid var(--border);
        font-family: var(--mono);
        font-size: 12px;
        line-height: 1.65;
        color: #cdd6ea;
        overflow-x: auto;
        max-height: 260px;
        overflow-y: auto;
      }
      .gallery-payload-footer {
        padding: 8px 18px;
        border-top: 1px solid var(--border);
        background: var(--panel);
        display: flex;
        justify-content: flex-end;
      }

      /* Error chip */
      .gallery-err {
        background: color-mix(in srgb, var(--danger) 12%, transparent);
        color: var(--danger);
        border-color: color-mix(in srgb, var(--danger) 30%, transparent);
        font-size: 12px;
      }

      @media (max-width: 820px) {
        .gallery-nav { top: 56px; }
        .gallery-grid { grid-template-columns: 1fr; }
      }
    </style>

    <script type="module" src="/ai/gallery.js"></script>
{% include "footer" %}