@digital-ai/dot-illustrations 2.0.32 → 2.0.35

package/demo/script.js

@@ -1,6 +1,7 @@
 // Make currentTab and root globally accessible
 const root = document.documentElement;
-let currentTab = 'all';
+let currentTab   = 'all';
+let alphabetFilter = ''; // '' = show all letters
 
 function myFunction() {
   var input, filter, divs, i, div, txtValue;
@@ -69,20 +70,18 @@ window.copyCode = function(button) {
 const origCopyText = window.copyText;
 window.copyText = function(button) {
   var parentDiv = button.closest('.copy-container');
-  var copyText = parentDiv.querySelector('.iconID');
-  var illustrationId = copyText.textContent;
-  var dotCode = `<DotIllustration illustrationId=\"${illustrationId}\" />`;
+  var idEl = parentDiv.querySelector('.iconID');
+  var itemId = idEl.textContent;
+  var isInteg = integrationsList && integrationsList.includes(itemId) && !globalList.concat(dashboardsList).includes(itemId);
+  var dotCode = isInteg
+    ? `<span class="dot-integration"><img class="${itemId}"/></span>`
+    : `<DotIllustration illustrationId="${itemId}" />`;
   navigator.clipboard.writeText(dotCode).then(function() {
     var tooltip = button.querySelector('.tooltiptext');
     tooltip.innerHTML = "Copied Dot Code";
     tooltip.style.visibility = 'visible';
-    setTimeout(function() {
-      tooltip.innerHTML = "Copy Dot Code";
-      tooltip.style.visibility = 'hidden';
-    }, 2000);
+    setTimeout(function() { tooltip.innerHTML = "Copy Dot Code"; tooltip.style.visibility = 'hidden'; }, 2000);
     showToast('Copied Dot Code: ' + dotCode);
-  }, function(err) {
-    console.error('Failed to copy dot code: ', err);
   });
 }
 
@@ -117,43 +116,54 @@ 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');
+    });
+  }
+
   function setTab(tab) {
     currentTab = tab;
-    // Update main tabs
-    mainTabs.forEach(t => {
-      t.classList.remove('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
-      t.classList.add('text-gray-700', 'dark:text-gray-300');
-      t.setAttribute('aria-selected', 'false');
-      if (t.dataset.tab === tab) {
-        t.classList.add('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
-        t.classList.remove('text-gray-700', 'dark:text-gray-300');
-        t.setAttribute('aria-selected', 'true');
-      }
-    });
-    // Update floating tabs
-    floatingTabs.forEach(t => {
-      t.classList.remove('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
-      t.classList.add('text-gray-700', 'dark:text-gray-300');
-      t.setAttribute('aria-selected', 'false');
-      if (t.dataset.tab === tab) {
-        t.classList.add('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
-        t.classList.remove('text-gray-700', 'dark:text-gray-300');
-        t.setAttribute('aria-selected', 'true');
-      }
-    });
-    renderIllustrations();
+    alphabetFilter = '';
+    updateTabUI(tab);
+
+    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');
+      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');
+      renderAlphabetStrip();
+      renderIllustrations();
+    }
   }
 
-  mainTabs.forEach(tab => {
-    tab.addEventListener('click', function() {
-      setTab(this.dataset.tab);
+  function wireTabs() {
+    document.querySelectorAll('.tab-btn').forEach(tab => {
+      tab.addEventListener('click', function() { setTab(this.dataset.tab); });
     });
-  });
-  floatingTabs.forEach(tab => {
-    tab.addEventListener('click', function() {
-      setTab(this.dataset.tab);
-    });
-  });
+  }
+  wireTabs();
 
   // --- ILLUSTRATION DATA ---
   const globalList = [
@@ -168,6 +178,7 @@ document.addEventListener('DOMContentLoaded', () => {
     "commitrepo",
     "chart",
     "custom-dashboards",
+    "delete",
     "dependency-down",
     "dependency-up",
     "disconnected",
@@ -190,6 +201,7 @@ document.addEventListener('DOMContentLoaded', () => {
     "nothing-defined",
     "password-token",
     "protection-in-progress",
+    "remote-cloud",
     "reports","scan-document",
     "releases",
     "survey",
@@ -227,7 +239,28 @@ document.addEventListener('DOMContentLoaded', () => {
     "data-extraction",
     "workflow"
   ];
-  const illustrations = [...globalList, ...dashboardsList, "my-new-illustration"];
+  const illustrations = [...globalList, ...dashboardsList];
+
+  const integrationsList = [
+    "agility","amazon-eks","ansible","apache-tomcat","app-aware","app-dynamics",
+    "app-management","application-protection","aras","arc-sight","argocd","atlassian",
+    "avaya","aws","azure","azure-aks-2","azure-devops-tfs","azure-functions",
+    "bamboo","bit-bucket","biztalk","black-duck","blazemeter","bmc-helix",
+    "checkmarx","chef","chrome","cisco","citrix","clarity-ppm","cloud-foundry",
+    "continuostesting","cyberark","dai-logo","delphix","deploy","docker","docker-compose",
+    "dynatrace","edge","essential-app-protection","explorer","f5","firefox",
+    "flux-cd","fortify","fortify-on-demand","free-marker","git-ops","github",
+    "github-actions","gitlab","google","google-cloud","google-cloud-functions",
+    "hashi-corp-vault","helm","ibm","ingress","inteligence","jboss","jenkins",
+    "jfrog","jira","key","kubernetes","linux","mailhog","microsoft-iis",
+    "microsoft-teams","mysql","netscaler","new-relic","octopus-deploy",
+    "open-policy-agent","openid","openshift","opsgenie","oracle","parasoft",
+    "pendo","planview","podman","powershell","progress-chef","puppet","python",
+    "rabbitmq","release","safari","salesforce","servicenow","skytab","slack",
+    "sonarcloud","sonarqube","sonatype","svn","team-forge","teamcity","terraform",
+    "testlink","topaz","travis-ci","urbancode-deploy","vmware","webhook",
+    "windows","xray","zendesk",
+  ];
 
   // --- FAVOURITES LOGIC ---
   function getFavourites() {
@@ -269,43 +302,44 @@ document.addEventListener('DOMContentLoaded', () => {
   const modalClose = document.getElementById('modal-close');
   const modalCloseBottom = document.getElementById('modal-close-bottom');
 
-  function openModal(illustration) {
+  function openModal(item, type) {
     if (modalDescription) modalDescription.innerHTML = '';
     if (!descriptionsLoaded) return;
+
     const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
-    let categoryFolder = "";
-    if (globalList.includes(illustration)) {
-      categoryFolder = "global";
-    } else if (dashboardsList.includes(illustration)) {
-      categoryFolder = "dashboards";
+    const isInteg    = type === 'integration' || integrationsList.includes(item) && !illustrations.includes(item);
+
+    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>`;
+      dotCodeString = `<span class="dot-integration"><img class="${item}"/></span>`;
+      codeString    = dotCodeString;
+    } else {
+      const cat     = globalList.includes(item) ? 'global' : 'dashboards';
+      const svgPath = `illustrations/${themeClass}/${cat}/${item}.svg`;
+      imgHtml       = `<span class="dot-illustration"><img src="${svgPath}" class="${item} ${themeClass}" style="width:286px;height:286px;object-fit:contain;"/></span>`;
+      dotCodeString = `<DotIllustration illustrationId="${item}" />`;
+      codeString    = `<span class="dot-illustration"><img src="${svgPath}" class="${item} ${themeClass}"/></span>`;
     }
-    const svgPath = `illustrations/${themeClass}/${categoryFolder}/${illustration}.svg`;
-    modalImage.innerHTML = `<span class=\"dot-illustration\"><img src=\"${svgPath}\" class=\"${illustration} ${themeClass}\" style=\"width:286px;height:286px;object-fit:contain;\"/></span>`;
-    // Set the illustration name
+
+    modalImage.innerHTML = imgHtml;
     const modalIllustrationName = document.getElementById('modal-illustration-name');
-    if (modalIllustrationName) modalIllustrationName.textContent = illustration;
-    // Set the Dot Code textarea value
-    const dotCodeString = `<DotIllustration illustrationId=\"${illustration}\" />`;
+    if (modalIllustrationName) modalIllustrationName.textContent = item;
     const modalDotCode = document.getElementById('modal-dot-code');
     if (modalDotCode) modalDotCode.value = dotCodeString;
-    // Show the HTML code snippet in the modal
-    const codeString = `<span class=\"dot-illustration\"><img src=\"${svgPath}\" class=\"${illustration} ${themeClass}\"/></span>`;
     modalCode.value = codeString;
+
     modal.classList.add('active');
     modal.classList.remove('hidden');
-    // Attach Copy Dot Code button event listener each time modal opens
+
     const modalCopyDotCode = document.getElementById('modal-copy-dot-code');
     if (modalCopyDotCode) {
-      modalCopyDotCode.onclick = function() {
+      modalCopyDotCode.onclick = () => {
         if (modalDotCode) {
-          navigator.clipboard.writeText(modalDotCode.value).then(function() {
+          navigator.clipboard.writeText(modalDotCode.value).then(() => {
             modalCopyDotCode.textContent = 'Copied!';
             showToast('Copied Dot Code: ' + modalDotCode.value);
-            setTimeout(() => {
-              modalCopyDotCode.textContent = 'Copy Dot Code';
-            }, 2000);
-          }, function(err) {
-            console.error('Failed to copy dot code: ', err);
+            setTimeout(() => { modalCopyDotCode.textContent = 'Copy Dot Code'; }, 2000);
           });
         }
       };
@@ -324,75 +358,139 @@ document.addEventListener('DOMContentLoaded', () => {
     showToast('Copied code: ' + modalCode.value);
   });
 
-  // --- ILLUSTRATION RENDERING ---
+  // --- ALPHABET STRIP ---
+  function renderAlphabetStrip() {
+    const strip = document.getElementById('alphabet-strip');
+    if (!strip) return;
+
+    const pool = getCurrentPool('');
+    const available = new Set(pool.map(id => id[0].toUpperCase()).filter(c => /[A-Z]/.test(c)));
+    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>
+      ${letters.map(l => `
+        <button class="alpha-btn px-2 py-0.5 text-xs rounded font-mono ${
+          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'
+        }" data-letter="${l}" ${available.has(l) ? '' : 'disabled'}>${l}</button>
+      `).join('')}
+    `;
+    strip.querySelectorAll('.alpha-btn:not([disabled])').forEach(btn => {
+      btn.addEventListener('click', () => {
+        alphabetFilter = btn.dataset.letter;
+        renderAlphabetStrip();
+        renderIllustrations();
+      });
+    });
+  }
+
+  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 (f) base = base.filter(id => id[0].toUpperCase() === f);
+    return base;
+  }
+
+  // --- ILLUSTRATION + INTEGRATION RENDERING ---
   function renderIllustrations() {
     const list = document.getElementById("illustration-list");
     list.innerHTML = "";
-    let toShow = [];
-    if (currentTab === 'all') {
-      toShow = illustrations;
-    } else if (currentTab === 'global') {
-      toShow = globalList;
-    } else if (currentTab === 'dashboards') {
-      toShow = dashboardsList;
-    } else if (currentTab === 'favourites') {
-      const favs = getFavourites();
-      toShow = illustrations.filter(id => favs.includes(id));
-    }
-    const filter = (document.getElementById('myInput')?.value || '').toUpperCase();
-    toShow = toShow.filter(id => id.toUpperCase().includes(filter));
+    const searchFilter = (document.getElementById('myInput')?.value || '').toUpperCase();
+    let toShow = getCurrentPool().filter(id => id.toUpperCase().includes(searchFilter));
+
+    const countEl = document.getElementById('result-count');
+    if (countEl) countEl.textContent = toShow.length > 0 ? `${toShow.length} item${toShow.length === 1 ? '' : 's'}` : '';
+
     if (toShow.length === 0) {
-      list.innerHTML = '<div class="col-span-full text-center text-gray-500 dark:text-gray-400">No illustrations found.</div>';
+      list.innerHTML = `<div class="col-span-full text-center text-gray-500 dark:text-gray-400 py-8">${
+        currentTab === 'favourites' ? 'No favourites yet.' : 'No items found.'
+      }</div>`;
       return;
     }
+
+    const isIntegrations = currentTab === 'integrations' ||
+      (currentTab === 'favourites' && toShow.every(id => integrationsList.includes(id)));
     const favs = getFavourites();
     const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
-    toShow.forEach(illustration => {
-      let categoryFolder = "";
-      if (globalList.includes(illustration)) {
-        categoryFolder = "global";
-      } else if (dashboardsList.includes(illustration)) {
-        categoryFolder = "dashboards";
-      }
-      const svgPath = `illustrations/${themeClass}/${categoryFolder}/${illustration}.svg`;
-      const isFav = favs.includes(illustration);
-      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 justify-center");
-      // Show the HTML code snippet in the card
-      const codeString = `<span class=\"dot-illustration\"><img src=\"${svgPath}\" class=\"${illustration} ${themeClass}\"/></span>`;
-      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 && window.toggleFavourite('${illustration}')">
-          <svg xmlns="http://www.w3.org/2000/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>
-        <div class="flex-1 flex flex-col justify-center items-center">
-          <span class="dot-illustration">
-            <img src="${svgPath}" class="${illustration} ${themeClass}"/>
-          </span>
-          <span class="iconID block text-center text-base font-medium text-gray-800 dark:text-gray-200 my-2">${illustration}</span>
-        </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>
+
+    toShow.forEach(item => {
+      const isInteg = integrationsList.includes(item) && !illustrations.includes(item);
+      const isFav = favs.includes(item);
+
+      if (isInteg) {
+        // Integration card (single SVG, dot-integration wrapper)
+        const codeString = `<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.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>
-          <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>
+          <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>
+          <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>
+          <pre class="codeBlock"><code class="codeBlock">${codeString}</code></pre>
+        `;
+        list.appendChild(div);
+      } else {
+        // Illustration card (light/dark, dot-illustration wrapper)
+        let categoryFolder = globalList.includes(item) ? 'global' : 'dashboards';
+        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.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>
-        </div>
-        <pre class="codeBlock"><code class="codeBlock">${codeString}</code></pre>
-      `;
-      list.appendChild(div);
+          <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>
+          <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>
+          <pre class="codeBlock"><code class="codeBlock">${codeString}</code></pre>
+        `;
+        list.appendChild(div);
+      }
     });
-    // Attach modal click handler to each card
+
+    // Modal click on each card
     document.querySelectorAll('.copy-container').forEach(card => {
       card.addEventListener('click', function(e) {
         if (e.target.closest('button')) return;
-        if (!descriptionsLoaded) return; // Wait for descriptions
-        const id = this.querySelector('.iconID')?.textContent;
-        if (id) openModal(id);
+        if (!descriptionsLoaded) return;
+        const id   = this.dataset.itemId || this.querySelector('.iconID')?.textContent;
+        const type = this.dataset.itemType;
+        if (id) openModal(id, type);
       });
     });
   }
@@ -408,6 +506,183 @@ document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('myInput').value = '';
   document.getElementById('floatingInput').value = '';
 
+  // ── GitHub auth ──────────────────────────────────────────────────────────
+  function updateAuthBadge(user) {
+    const btn   = document.getElementById('gh-connect-btn');
+    const badge = document.getElementById('gh-user-badge');
+    const name  = document.getElementById('gh-user-name');
+    if (user) {
+      btn.classList.add('hidden');
+      badge.classList.remove('hidden');
+      badge.style.display = 'flex';
+      name.textContent = `@${user.login}`;
+      localStorage.setItem('gh_illus_user', JSON.stringify(user));
+    } else {
+      btn.classList.remove('hidden');
+      badge.style.display = 'none';
+    }
+  }
+
+  function updateUploadAuthUI() {
+    const token = window.GitHubUpload?.getToken?.();
+    ['upload-illus-auth-gate','upload-integ-auth-gate'].forEach(id => {
+      document.getElementById(id)?.classList.toggle('hidden', !!token);
+    });
+    ['upload-illus-form','upload-integ-form'].forEach(id => {
+      document.getElementById(id)?.classList.toggle('hidden', !token);
+    });
+  }
+
+  async function tryDeviceFlow() {
+    const modal = document.getElementById('gh-device-modal');
+    modal.classList.remove('hidden');
+    document.getElementById('gh-device-step-code').classList.remove('hidden');
+    document.getElementById('gh-device-step-pat').classList.add('hidden');
+    document.getElementById('gh-device-error').classList.add('hidden');
+    try {
+      const { user_code, verification_uri, device_code, expires_in, interval } =
+        await window.GitHubUpload.startDeviceFlow();
+      document.getElementById('gh-device-uri').href = verification_uri;
+      document.getElementById('gh-device-uri').textContent = verification_uri;
+      document.getElementById('gh-device-code').textContent = user_code;
+      document.getElementById('gh-copy-code-btn').onclick = () =>
+        navigator.clipboard.writeText(user_code).then(() => showToast('Code copied!'));
+      const token = await window.GitHubUpload.pollForToken(device_code, interval || 5);
+      window.GitHubUpload.setToken(token);
+      const user = await window.GitHubUpload.getUser();
+      updateAuthBadge(user);
+      modal.classList.add('hidden');
+      updateUploadAuthUI();
+      showToast(`Connected as @${user.login}`);
+    } catch (err) {
+      if (err.message === 'NO_CLIENT_ID' || err.name === 'TypeError') {
+        document.getElementById('gh-device-step-code').classList.add('hidden');
+        document.getElementById('gh-device-step-pat').classList.remove('hidden');
+      } else {
+        document.getElementById('gh-device-error').textContent = err.message;
+        document.getElementById('gh-device-error').classList.remove('hidden');
+      }
+    }
+  }
+
+  document.getElementById('gh-connect-btn')?.addEventListener('click', tryDeviceFlow);
+  document.getElementById('gh-logout-btn')?.addEventListener('click', () => {
+    window.GitHubUpload?.clearToken?.();
+    updateAuthBadge(null);
+    updateUploadAuthUI();
+    showToast('Disconnected from GitHub');
+  });
+  document.getElementById('gh-device-close')?.addEventListener('click', () => {
+    document.getElementById('gh-device-modal').classList.add('hidden');
+  });
+  document.getElementById('gh-pat-submit')?.addEventListener('click', async () => {
+    const pat = document.getElementById('gh-pat-input').value.trim();
+    if (!pat) return;
+    window.GitHubUpload.setToken(pat);
+    try {
+      const user = await window.GitHubUpload.getUser();
+      updateAuthBadge(user);
+      document.getElementById('gh-device-modal').classList.add('hidden');
+      updateUploadAuthUI();
+      showToast(`Connected as @${user.login}`);
+    } catch {
+      document.getElementById('gh-device-error').textContent = 'Invalid token.';
+      document.getElementById('gh-device-error').classList.remove('hidden');
+    }
+  });
+
+  // Restore session
+  const savedUser = localStorage.getItem('gh_illus_user');
+  if (window.GitHubUpload?.getToken?.() && savedUser) {
+    try { updateAuthBadge(JSON.parse(savedUser)); } catch {}
+  }
+
+  // ── Upload panel ─────────────────────────────────────────────────────────
+  const uploadBufs = { illusLight: null, illusDark: null, integSvg: null };
+
+  function bindFileDrop(dropId, inputId, nameId, bufKey) {
+    const drop  = document.getElementById(dropId);
+    const input = document.getElementById(inputId);
+    const nameEl = document.getElementById(nameId);
+    if (!drop || !input) return;
+    drop.addEventListener('click', () => input.click());
+    drop.addEventListener('dragover', e => { e.preventDefault(); drop.classList.add('border-blue-400'); });
+    drop.addEventListener('dragleave', () => drop.classList.remove('border-blue-400'));
+    drop.addEventListener('drop', e => { e.preventDefault(); drop.classList.remove('border-blue-400'); handleFile(e.dataTransfer.files[0], bufKey, nameEl, drop); });
+    input.addEventListener('change', () => handleFile(input.files[0], bufKey, nameEl, drop));
+  }
+
+  function handleFile(file, bufKey, nameEl, drop) {
+    if (!file || !file.name.endsWith('.svg')) { showToast('Please select an SVG file'); return; }
+    const reader = new FileReader();
+    reader.onload = e => {
+      uploadBufs[bufKey] = e.target.result;
+      if (nameEl) { nameEl.textContent = `✓ ${file.name}`; nameEl.classList.remove('hidden'); }
+      drop.classList.add('border-green-400', 'dark:border-green-600');
+      drop.classList.remove('border-gray-300', 'dark:border-gray-600');
+    };
+    reader.readAsArrayBuffer(file);
+  }
+
+  bindFileDrop('illus-light-drop', 'illus-light-input', 'illus-light-name', 'illusLight');
+  bindFileDrop('illus-dark-drop',  'illus-dark-input',  'illus-dark-name',  'illusDark');
+  bindFileDrop('integ-svg-drop',   'integ-svg-input',   'integ-svg-name',   'integSvg');
+
+  async function handleIllusUpload() {
+    const id  = document.getElementById('upload-illus-id')?.value.trim();
+    const cat = document.getElementById('upload-illus-category')?.value;
+    const btn    = document.getElementById('upload-illus-btn');
+    const status = document.getElementById('upload-illus-status');
+    const prLink = document.getElementById('upload-illus-pr-link');
+    if (!id)                  { showToast('Enter illustration ID'); return; }
+    if (!uploadBufs.illusLight) { showToast('Select the light SVG'); return; }
+    if (!uploadBufs.illusDark)  { showToast('Select the dark SVG');  return; }
+    if (!window.GitHubUpload?.getToken?.()) { showToast('Connect GitHub first'); return; }
+    btn.disabled = true; btn.textContent = 'Creating PR…';
+    status.classList.add('hidden'); prLink.classList.add('hidden');
+    try {
+      const url = await window.GitHubUpload.createIllustrationPR(id, cat, uploadBufs.illusLight, uploadBufs.illusDark);
+      status.textContent = 'PR created!';
+      status.className = 'text-sm text-center text-green-600 dark:text-green-400';
+      status.classList.remove('hidden');
+      document.getElementById('upload-illus-pr-anchor').href = url;
+      prLink.classList.remove('hidden');
+      showToast('PR created!');
+    } catch (err) {
+      status.textContent = `Error: ${err.message}`;
+      status.className = 'text-sm text-center text-red-600 dark:text-red-400';
+      status.classList.remove('hidden');
+    } finally { btn.disabled = false; btn.textContent = 'Create PR'; }
+  }
+
+  async function handleIntegUpload() {
+    const id  = document.getElementById('upload-integ-id')?.value.trim();
+    const btn    = document.getElementById('upload-integ-btn');
+    const status = document.getElementById('upload-integ-status');
+    const prLink = document.getElementById('upload-integ-pr-link');
+    if (!id)                 { showToast('Enter integration ID'); return; }
+    if (!uploadBufs.integSvg) { showToast('Select an SVG file'); return; }
+    if (!window.GitHubUpload?.getToken?.()) { showToast('Connect GitHub first'); return; }
+    btn.disabled = true; btn.textContent = 'Creating PR…';
+    status.classList.add('hidden'); prLink.classList.add('hidden');
+    try {
+      const url = await window.GitHubUpload.createIntegrationPR(id, uploadBufs.integSvg);
+      status.textContent = 'PR created!';
+      status.className = 'text-sm text-center text-green-600 dark:text-green-400';
+      status.classList.remove('hidden');
+      document.getElementById('upload-integ-pr-anchor').href = url;
+      prLink.classList.remove('hidden');
+      showToast('PR created!');
+    } catch (err) {
+      status.textContent = `Error: ${err.message}`;
+      status.className = 'text-sm text-center text-red-600 dark:text-red-400';
+      status.classList.remove('hidden');
+    } finally { btn.disabled = false; btn.textContent = 'Create PR'; }
+  }
+
+  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');
 
@@ -444,6 +719,7 @@ function getSuggestions(query) {
   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();
   // Fuzzy match, sort by closeness (shorter index of first match, then length)
   let scored = pool