@digital-ai/dot-illustrations 2.0.36 → 2.0.38

package/demo/local-proxy.js

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+/**
+ * local-proxy.js — GitHub API proxy for local demo development
+ *
+ * Uses your existing `gh auth` credentials — no token input needed.
+ * Run from the repo root:  node demo/local-proxy.js
+ *
+ * The demo page detects this proxy at http://localhost:3001 and
+ * authenticates automatically using your gh CLI identity.
+ */
+
+'use strict';
+
+const http  = require('http');
+const https = require('https');
+const { execSync } = require('child_process');
+
+const PROXY_PORT = 3001;
+
+// Resolve the gh CLI token once at startup
+let GH_TOKEN, GH_USER;
+try {
+  GH_TOKEN = execSync('gh auth token', { stdio: ['pipe','pipe','pipe'] }).toString().trim();
+  GH_USER  = execSync('gh api user --jq .login', { stdio: ['pipe','pipe','pipe'] }).toString().trim();
+} catch (e) {
+  console.error('❌  gh CLI is not authenticated. Run: gh auth login --web');
+  process.exit(1);
+}
+
+const server = http.createServer((req, res) => {
+  // Allow the demo page (any localhost origin) to call this proxy
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+
+  // Special: /whoami — tells the demo page who is logged in
+  if (req.url === '/whoami') {
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ login: GH_USER, proxy: true }));
+    return;
+  }
+
+  // Proxy everything else to api.github.com
+  let body = '';
+  req.on('data', chunk => { body += chunk; });
+  req.on('end', () => {
+    const options = {
+      hostname: 'api.github.com',
+      path:     req.url,
+      method:   req.method,
+      headers: {
+        'Authorization': `Bearer ${GH_TOKEN}`,
+        'Accept':        'application/vnd.github.v3+json',
+        'Content-Type':  'application/json',
+        'User-Agent':    'dot-illustrations-local-proxy',
+        ...(body ? { 'Content-Length': Buffer.byteLength(body) } : {}),
+      },
+    };
+
+    const proxyReq = https.request(options, proxyRes => {
+      res.writeHead(proxyRes.statusCode, {
+        'Content-Type': proxyRes.headers['content-type'] || 'application/json',
+        'Access-Control-Allow-Origin': '*',
+      });
+      proxyRes.pipe(res);
+    });
+
+    proxyReq.on('error', err => {
+      res.writeHead(502);
+      res.end(JSON.stringify({ error: err.message }));
+    });
+
+    if (body) proxyReq.write(body);
+    proxyReq.end();
+  });
+});
+
+server.listen(PROXY_PORT, '127.0.0.1', () => {
+  console.log(`✅  GitHub proxy running at http://localhost:${PROXY_PORT}`);
+  console.log(`👤  Authenticated as: @${GH_USER}`);
+  console.log(`\n    Open the demo: http://localhost:5175/demo/`);
+  console.log('    The demo will connect automatically — no token input needed.\n');
+  console.log('    Press Ctrl+C to stop.\n');
+});

package/demo/script.js

@@ -1,7 +1,8 @@
 // Make currentTab and root globally accessible
 const root = document.documentElement;
-let currentTab   = 'all';
-let alphabetFilter = ''; // '' = show all letters
+let currentSection = 'illustrations'; // 'illustrations' | 'integrations' | 'upload'
+let currentTab     = 'all';
+let alphabetFilter = '';
 
 function myFunction() {
   var input, filter, divs, i, div, txtValue;
@@ -116,48 +117,117 @@ document.addEventListener('DOMContentLoaded', () => {
   const mainTabs = document.querySelectorAll('.tab-btn');
   const floatingTabs = document.querySelectorAll('.floating-tab');
 
-  function updateTabUI(tab) {
-    [...mainTabs, ...floatingTabs].forEach(t => {
-      const isActive = t.dataset.tab === tab;
-      t.classList.toggle('text-blue-600',  isActive);
-      t.classList.toggle('dark:text-blue-400', isActive);
-      t.classList.toggle('bg-blue-100',    isActive);
-      t.classList.toggle('dark:bg-blue-900', isActive);
-      t.classList.toggle('text-gray-700',  !isActive && t.dataset.tab !== 'upload');
-      t.classList.toggle('dark:text-gray-300', !isActive && t.dataset.tab !== 'upload');
-      t.setAttribute('aria-selected', isActive ? 'true' : 'false');
+  // ── Upload New button (in header) ────────────────────────────────────────
+  // ── Upload New: type picker → form ──────────────────────────────────────
+  function showUploadStep(step) {
+    // step: 'picker' | 'illustration' | 'integration'
+    document.getElementById('upload-type-picker').classList.toggle('hidden', step !== 'picker');
+    document.getElementById('upload-illus-panel').classList.toggle('hidden', step !== 'illustration');
+    document.getElementById('upload-integ-panel').classList.toggle('hidden', step !== 'integration');
+  }
+
+  function openUploadModal() {
+    const panel = document.getElementById('upload-panel');
+    panel.classList.remove('hidden');
+    showUploadStep('picker');
+    updateUploadAuthUI();
+    document.getElementById('upload-new-btn').classList.add('ring-2','ring-blue-400','bg-blue-700');
+  }
+  function closeUploadModal() {
+    document.getElementById('upload-panel').classList.add('hidden');
+    document.getElementById('upload-new-btn').classList.remove('ring-2','ring-blue-400','bg-blue-700');
+  }
+
+  document.getElementById('upload-new-btn')?.addEventListener('click', openUploadModal);
+
+  // Backdrop click does NOT close — use X button or Escape
+
+  // Close on X button
+  document.getElementById('upload-modal-close')?.addEventListener('click', closeUploadModal);
+
+  // Close on Escape
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape' && !document.getElementById('upload-panel').classList.contains('hidden')) closeUploadModal();
+  });
+
+  document.getElementById('pick-illustration')?.addEventListener('click', () => { showUploadStep('illustration'); updateUploadAuthUI(); });
+  document.getElementById('pick-integration')?.addEventListener('click',  () => { showUploadStep('integration');  updateUploadAuthUI(); });
+  document.getElementById('back-from-illus')?.addEventListener('click', () => showUploadStep('picker'));
+  document.getElementById('back-from-integ')?.addEventListener('click', () => showUploadStep('picker'));
+
+  // ── Section switcher (Illustrations | Integrations) — pill style ──────────
+  function updateSectionUI(section) {
+    document.querySelectorAll('.section-btn, .floating-section-btn').forEach(btn => {
+      const active = btn.dataset.section === section;
+      // Active pill: white card on gray background
+      btn.classList.toggle('bg-white',            active);
+      btn.classList.toggle('dark:bg-gray-700',    active);
+      btn.classList.toggle('text-gray-900',       active);
+      btn.classList.toggle('dark:text-white',     active);
+      btn.classList.toggle('shadow-sm',           active);
+      // Inactive: transparent
+      btn.classList.toggle('text-gray-500',       !active);
+      btn.classList.toggle('dark:text-gray-400',  !active);
     });
   }
 
-  function setTab(tab) {
-    currentTab = tab;
+  function setSection(section) {
+    currentSection = section;
     alphabetFilter = '';
-    updateTabUI(tab);
+    updateSectionUI(section);
 
-    const uploadPanel = document.getElementById('upload-panel');
-    const grid        = document.getElementById('illustration-list');
-    const alphaStrip  = document.getElementById('alphabet-strip');
-    const integNote   = document.getElementById('integrations-note');
-
-    if (tab === 'upload') {
-      uploadPanel.classList.remove('hidden');
-      grid.classList.add('hidden');
-      alphaStrip.classList.add('hidden');
-      integNote.classList.add('hidden');
-      document.getElementById('result-count').textContent = '';
-      updateUploadAuthUI();
-    } else {
-      uploadPanel.classList.add('hidden');
+    const grid         = document.getElementById('illustration-list');
+    const alphaStrip   = document.getElementById('alphabet-strip');
+    const illusSubTabs = document.getElementById('illus-sub-tabs');
+    const floatingTabs = document.getElementById('floating-tabs');
+    const resultCount  = document.getElementById('result-count');
+
+    if (section === 'integrations') {
       grid.classList.remove('hidden');
-      // Show alphabet strip only for tabs that have many items
-      const showStrip = ['all','global','dashboards','integrations','favourites'].includes(tab);
-      alphaStrip.classList.toggle('hidden', !showStrip);
-      integNote.classList.toggle('hidden', tab !== 'integrations');
+      illusSubTabs.classList.add('hidden');
+      if (floatingTabs) floatingTabs.classList.add('hidden');
+      // Alphabet strip — show as flex for integrations (110 items benefit from A–Z jump)
+      alphaStrip.style.display = 'flex';
       renderAlphabetStrip();
       renderIllustrations();
+    } else {
+      // Illustrations — search is sufficient for 72 items; hide alphabet strip
+      grid.classList.remove('hidden');
+      illusSubTabs.classList.remove('hidden');
+      if (floatingTabs) floatingTabs.classList.remove('hidden');
+      alphaStrip.style.display = 'none';
+      alphabetFilter = '';
+      renderIllustrations();
     }
   }
 
+  document.querySelectorAll('.section-btn, .floating-section-btn').forEach(btn => {
+    btn.addEventListener('click', () => setSection(btn.dataset.section));
+  });
+
+  // ── Illustration sub-tabs — pill style ───────────────────────────────────
+  function updateTabUI(tab) {
+    document.querySelectorAll('.tab-btn').forEach(t => {
+      const active = t.dataset.tab === tab;
+      t.classList.toggle('bg-white',          active);
+      t.classList.toggle('dark:bg-gray-700',  active);
+      t.classList.toggle('text-gray-900',     active);
+      t.classList.toggle('dark:text-white',   active);
+      t.classList.toggle('shadow-sm',         active);
+      t.classList.toggle('text-gray-500',     !active);
+      t.classList.toggle('dark:text-gray-400', !active);
+      t.setAttribute('aria-selected', active ? 'true' : 'false');
+    });
+  }
+
+  function setTab(tab) {
+    currentTab = tab;
+    alphabetFilter = '';
+    updateTabUI(tab);
+    renderAlphabetStrip();
+    renderIllustrations();
+  }
+
   function wireTabs() {
     document.querySelectorAll('.tab-btn').forEach(tab => {
       tab.addEventListener('click', function() { setTab(this.dataset.tab); });
@@ -311,7 +381,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     let imgHtml, dotCodeString, codeString;
     if (isInteg) {
-      imgHtml       = `<span class="dot-integration" style="display:inline-flex;align-items:center;justify-content:center;width:200px;height:200px;"><img class="${item}" style="width:100%;height:100%;object-fit:contain;"/></span>`;
+      imgHtml       = `<img src="../integrations/${item}.svg" alt="${item}" style="width:160px;height:160px;object-fit:contain;" />`;
       dotCodeString = `<span class="dot-integration"><img class="${item}"/></span>`;
       codeString    = dotCodeString;
     } else {
@@ -368,14 +438,19 @@ document.addEventListener('DOMContentLoaded', () => {
     const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
 
     strip.innerHTML = `
-      <button class="alpha-btn px-2 py-0.5 text-xs rounded font-mono ${alphabetFilter === '' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'} transition" data-letter="">All</button>
+      <button class="alpha-btn text-xs font-medium px-1.5 py-0.5 rounded-md transition-all ${
+        alphabetFilter === ''
+          ? 'text-blue-600 dark:text-blue-400 font-semibold'
+          : 'text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+      }" data-letter="">All</button>
+      <span class="text-gray-200 dark:text-gray-700 text-xs select-none">|</span>
       ${letters.map(l => `
-        <button class="alpha-btn px-2 py-0.5 text-xs rounded font-mono ${
+        <button class="alpha-btn text-xs font-medium px-1.5 py-0.5 rounded-md transition-all ${
           available.has(l)
             ? alphabetFilter === l
-              ? 'bg-blue-600 text-white'
-              : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-800 transition'
-            : 'opacity-30 cursor-default bg-gray-100 dark:bg-gray-800 text-gray-400'
+              ? 'text-blue-600 dark:text-blue-400 font-semibold bg-blue-50 dark:bg-blue-900/30'
+              : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800'
+            : 'text-gray-200 dark:text-gray-700 cursor-default'
         }" data-letter="${l}" ${available.has(l) ? '' : 'disabled'}>${l}</button>
       `).join('')}
     `;
@@ -391,11 +466,15 @@ document.addEventListener('DOMContentLoaded', () => {
   function getCurrentPool(filterOverride) {
     const f = filterOverride !== undefined ? filterOverride : alphabetFilter;
     let base = [];
-    if (currentTab === 'all')          base = illustrations;
-    else if (currentTab === 'global')  base = globalList;
-    else if (currentTab === 'dashboards') base = dashboardsList;
-    else if (currentTab === 'integrations') base = integrationsList;
-    else if (currentTab === 'favourites')   base = [...illustrations, ...integrationsList].filter(id => getFavourites().includes(id));
+    if (currentSection === 'integrations') {
+      base = integrationsList;
+    } else {
+      // illustrations section
+      if (currentTab === 'all')             base = illustrations;
+      else if (currentTab === 'global')     base = globalList;
+      else if (currentTab === 'dashboards') base = dashboardsList;
+      else if (currentTab === 'favourites') base = illustrations.filter(id => getFavourites().includes(id));
+    }
     if (f) base = base.filter(id => id[0].toUpperCase() === f);
     return base;
   }
@@ -417,8 +496,7 @@ document.addEventListener('DOMContentLoaded', () => {
       return;
     }
 
-    const isIntegrations = currentTab === 'integrations' ||
-      (currentTab === 'favourites' && toShow.every(id => integrationsList.includes(id)));
+    const isIntegrations = currentSection === 'integrations';
     const favs = getFavourites();
     const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
 
@@ -427,57 +505,54 @@ document.addEventListener('DOMContentLoaded', () => {
       const isFav = favs.includes(item);
 
       if (isInteg) {
-        // Integration card (single SVG, dot-integration wrapper)
-        const codeString = `<span class="dot-integration"><img class="${item}"/></span>`;
+        // Integration card — use direct <img src> so the image always loads
+        // ── Integration card ─────────────────────────────────────────────
+        const htmlCode = `<span class="dot-integration"><img class="${item}"/></span>`;
         const div = document.createElement('div');
-        div.setAttribute('class', 'copy-container relative group flex flex-col items-center justify-between bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-2 md:p-3 transition-transform duration-200 hover:scale-105 hover:shadow-2xl h-[302px] w-full');
-        div.dataset.itemId = item;
+        div.className = 'copy-container group relative bg-white dark:bg-gray-900 rounded-2xl overflow-hidden cursor-pointer shadow-sm transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-400/30 dark:hover:ring-blue-500/30';
+        div.dataset.itemId   = item;
         div.dataset.itemType = 'integration';
         div.innerHTML = `
-          <button class="absolute top-2 right-2 z-10 p-1 rounded-full bg-white/80 dark:bg-gray-800/80 hover:bg-yellow-100 dark:hover:bg-yellow-300 transition" title="Toggle favourite" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
-            <svg class="h-5 w-5" fill="${isFav ? 'gold' : 'none'}" viewBox="0 0 24 24" stroke="gold"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/></svg>
+          <button class="fav-btn absolute top-2.5 right-2.5 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
+            <svg class="w-3.5 h-3.5" fill="${isFav ? '#FBBF24' : 'none'}" viewBox="0 0 24 24" stroke="${isFav ? '#FBBF24' : '#9CA3AF'}" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/></svg>
           </button>
-          <div class="flex-1 flex flex-col justify-center items-center">
-            <span class="dot-integration flex items-center justify-center" style="width:160px;height:160px;"><img class="${item}" style="width:100%;height:100%;object-fit:contain;"/></span>
-            <span class="iconID block text-center text-base font-medium text-gray-800 dark:text-gray-200 my-2">${item}</span>
+          <div class="flex items-center justify-center h-36 px-4">
+            <img src="../integrations/${item}.svg" alt="${item}" class="w-[80px] h-[80px] object-contain" loading="lazy" />
+          </div>
+          <div class="px-3 py-3">
+            <p class="iconID text-[11px] text-center text-gray-500 dark:text-gray-400 font-medium leading-tight truncate">${item}</p>
           </div>
-          <div class="button-group flex flex-row items-center justify-center gap-2 mt-2">
-            <button class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyText(this)">
-              Copy Dot Code<span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy Dot Code</span>
-            </button>
-            <button class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyCode(this)">
-              Copy Code<span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy Code</span>
-            </button>
+          <div class="action-bar absolute bottom-0 inset-x-0 bg-white/97 dark:bg-gray-900/97 backdrop-blur-sm border-t border-gray-100 dark:border-gray-800 p-2 flex gap-1.5 translate-y-full group-hover:translate-y-0 transition-transform duration-150 ease-out">
+            <button class="button flex-1 py-1.5 text-[10px] font-semibold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/60 transition" onclick="event.stopPropagation();copyText(this)">Dot Code</button>
+            <button class="button flex-1 py-1.5 text-[10px] font-semibold text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition" onclick="event.stopPropagation();copyCode(this)">HTML</button>
           </div>
-          <pre class="codeBlock"><code class="codeBlock">${codeString}</code></pre>
+          <pre class="codeBlock hidden"><code class="codeBlock">${htmlCode}</code></pre>
         `;
         list.appendChild(div);
       } else {
-        // Illustration card (light/dark, dot-illustration wrapper)
+        // ── Illustration card ─────────────────────────────────────────────
         let categoryFolder = globalList.includes(item) ? 'global' : 'dashboards';
-        const svgPath = `illustrations/${themeClass}/${categoryFolder}/${item}.svg`;
+        const svgPath   = `illustrations/${themeClass}/${categoryFolder}/${item}.svg`;
         const codeString = `<span class="dot-illustration"><img src="${svgPath}" class="${item} ${themeClass}"/></span>`;
         const div = document.createElement('div');
-        div.setAttribute('class', 'copy-container relative group flex flex-col items-center justify-between bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-2 md:p-3 transition-transform duration-200 hover:scale-105 hover:shadow-2xl h-[302px] w-full');
-        div.dataset.itemId = item;
+        div.className = 'copy-container group relative bg-white dark:bg-gray-900 rounded-2xl overflow-hidden cursor-pointer shadow-sm transition-all duration-200 hover:shadow-md hover:ring-2 hover:ring-blue-400/30 dark:hover:ring-blue-500/30';
+        div.dataset.itemId   = item;
         div.dataset.itemType = 'illustration';
         div.innerHTML = `
-          <button class="absolute top-2 right-2 z-10 p-1 rounded-full bg-white/80 dark:bg-gray-800/80 hover:bg-yellow-100 dark:hover:bg-yellow-300 transition" title="Toggle favourite" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
-            <svg class="h-5 w-5" fill="${isFav ? 'gold' : 'none'}" viewBox="0 0 24 24" stroke="gold"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/></svg>
+          <button class="fav-btn absolute top-2.5 right-2.5 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
+            <svg class="w-3.5 h-3.5" fill="${isFav ? '#FBBF24' : 'none'}" viewBox="0 0 24 24" stroke="${isFav ? '#FBBF24' : '#9CA3AF'}" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/></svg>
           </button>
-          <div class="flex-1 flex flex-col justify-center items-center">
-            <span class="dot-illustration"><img src="${svgPath}" class="${item} ${themeClass}"/></span>
-            <span class="iconID block text-center text-base font-medium text-gray-800 dark:text-gray-200 my-2">${item}</span>
+          <div class="flex items-center justify-center h-36 px-4 dot-illustration">
+            <img src="${svgPath}" class="${item} ${themeClass}" style="width:120px;height:120px;object-fit:contain;display:block;" />
+          </div>
+          <div class="px-3 py-3">
+            <p class="iconID text-[11px] text-center text-gray-500 dark:text-gray-400 font-medium leading-tight break-words">${item}</p>
           </div>
-          <div class="button-group flex flex-row items-center justify-center gap-2 mt-2">
-            <button id="CopyID" class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyText(this)">
-              Copy Dot Code<span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy Dot Code</span>
-            </button>
-            <button class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyCode(this)">
-              Copy Code<span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy Code</span>
-            </button>
+          <div class="action-bar absolute bottom-0 inset-x-0 bg-white/97 dark:bg-gray-900/97 backdrop-blur-sm border-t border-gray-100 dark:border-gray-800 p-2 flex gap-1.5 translate-y-full group-hover:translate-y-0 transition-transform duration-150 ease-out">
+            <button class="button flex-1 py-1.5 text-[10px] font-semibold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/60 transition" onclick="event.stopPropagation();copyText(this)">Dot Code</button>
+            <button class="button flex-1 py-1.5 text-[10px] font-semibold text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition" onclick="event.stopPropagation();copyCode(this)">HTML</button>
           </div>
-          <pre class="codeBlock"><code class="codeBlock">${codeString}</code></pre>
+          <pre class="codeBlock hidden"><code class="codeBlock">${codeString}</code></pre>
         `;
         list.appendChild(div);
       }
@@ -590,7 +665,10 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  // No session restore — token is in-memory only for security
+  // Auto-connect via local proxy (node demo/local-proxy.js) — no token input needed
+  window.GitHubUpload?.tryLocalProxy?.().then(user => {
+    if (user) { updateAuthBadge(user); updateUploadAuthUI(); }
+  });
 
   // ── Upload panel ─────────────────────────────────────────────────────────
   const uploadBufs = { illusLight: null, illusDark: null, integSvg: null };
@@ -678,8 +756,12 @@ document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('upload-illus-btn')?.addEventListener('click', handleIllusUpload);
   document.getElementById('upload-integ-btn')?.addEventListener('click', handleIntegUpload);
 
-  // Set initial tab state to 'all' and update UI (this will also render illustrations)
-  setTab('all');
+  // Initial render — start on illustrations, alphabet hidden
+  const strip = document.getElementById('alphabet-strip');
+  if (strip) strip.style.display = 'none';
+  updateSectionUI('illustrations');
+  updateTabUI('all');
+  renderIllustrations();
 
   // --- FLOATING BAR LOGIC ---
   const floatingBar = document.getElementById('floating-bar');
@@ -709,13 +791,12 @@ function fuzzyMatch(str, query) {
 
 function getSuggestions(query) {
   if (!query) return [];
-  // Use current tab's list
   let pool = [];
-  if (currentTab === 'all') pool = illustrations;
-  else if (currentTab === 'global') pool = globalList;
-  else if (currentTab === 'dashboards') pool = dashboardsList;
-  else if (currentTab === 'integrations') pool = integrationsList;
-  else if (currentTab === 'favourites') pool = getFavourites();
+  if (currentSection === 'integrations') pool = integrationsList;
+  else if (currentTab === 'all')         pool = illustrations;
+  else if (currentTab === 'global')      pool = globalList;
+  else if (currentTab === 'dashboards')  pool = dashboardsList;
+  else if (currentTab === 'favourites')  pool = illustrations.filter(id => getFavourites().includes(id));
   // Fuzzy match, sort by closeness (shorter index of first match, then length)
   let scored = pool
     .map(id => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-illustrations",
-  "version": "2.0.36",
+  "version": "2.0.38",
   "description": "A central place for the design team to keep illustrations and for dev teams to find them.",
   "main": "./index.css",
   "scripts": {