@digital-ai/dot-illustrations 2.0.33 → 2.0.35

package/.github/workflows/publish.yml

@@ -6,6 +6,12 @@ on:
     branches:
       - main
 
+# OIDC token for npm Trusted Publishers (no NPM_TOKEN secret needed).
+# contents: write is required for the version-bump commit and release creation.
+permissions:
+  id-token: write  # Required for npm OIDC Trusted Publishing
+  contents: write  # Required for version bump commit + GitHub release
+
 jobs:
   # https://github.com/marketplace/actions/automated-version-bump
   bump-version:
@@ -19,7 +25,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 
@@ -64,7 +70,7 @@ jobs:
 
   # https://github.com/marketplace/actions/npm-publish
   npm-publish:
-    name: Publish Latest to NPM
+    name: Publish to npm (OIDC Trusted Publisher)
     runs-on: ubuntu-latest
     needs: [bump-version, create-release]
     if: needs.bump-version.outputs.new-version != ''
@@ -73,14 +79,19 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0  # necessary to get newly created tag above
+          fetch-depth: 0
           ref: 'main'
 
-      # https://github.com/JS-DevTools/npm-publish
-      - name: Publish to NPM
-        uses: JS-DevTools/npm-publish@v1
+      # registry-url wires the OIDC token into .npmrc automatically —
+      # no NPM_TOKEN secret required.
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          access: public
-          check-version: true
-          greater-version-only: true
-          token: ${{ secrets.NPM_TOKEN }}
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Update npm (≥ 11.5.1 required for OIDC)
+        run: npm install -g npm@latest
+
+      - name: Publish to npm
+        run: npm publish --access public

package/demo/demo.css

@@ -179,3 +179,30 @@ body.dark-mode .dot-illustration img.dark {
     height: 140px;
   }
 }
+
+/* ── Alphabet strip ─────────────────────────────────────────────────────── */
+#alphabet-strip {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+/* ── Tab nav horizontal scroll ──────────────────────────────────────────── */
+#main-tabs {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+#main-tabs::-webkit-scrollbar { display: none; }
+#floating-tabs { scrollbar-width: none; }
+#floating-tabs::-webkit-scrollbar { display: none; }
+
+/* ── GitHub user badge flex ─────────────────────────────────────────────── */
+#gh-user-badge[style*="flex"] { display: flex !important; }
+
+/* ── Integration card image sizing ─────────────────────────────────────── */
+.dot-integration img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

package/demo/github-upload.js

@@ -0,0 +1,289 @@
+/**
+ * GitHub Upload Helper — dot-illustrations
+ * OAuth Device Flow + REST API for illustrations and integrations.
+ *
+ * Setup:
+ * 1. Register a GitHub OAuth App at https://github.com/settings/developers
+ *    - Homepage: https://digital-ai.github.io/dot-illustrations/demo/
+ *    - Check "Enable Device Flow" — no callback URL needed
+ * 2. Set GITHUB_OAUTH_CLIENT_ID to your Client ID
+ */
+
+const GITHUB_UPLOAD_CONFIG = {
+  CLIENT_ID: 'YOUR_GITHUB_OAUTH_CLIENT_ID',
+  REPO_OWNER: 'digital-ai',
+  REPO_NAME: 'dot-illustrations',
+  BASE_BRANCH: 'main',
+  SCOPES: 'public_repo',
+};
+
+const STORAGE_TOKEN_KEY = 'gh_illus_token';
+const STORAGE_USER_KEY  = 'gh_illus_user';
+
+// ─── Token helpers ──────────────────────────────────────────────────────────
+
+function ghGetToken()  { return localStorage.getItem(STORAGE_TOKEN_KEY); }
+function ghSetToken(t) { localStorage.setItem(STORAGE_TOKEN_KEY, t); }
+function ghClearToken() {
+  localStorage.removeItem(STORAGE_TOKEN_KEY);
+  localStorage.removeItem(STORAGE_USER_KEY);
+}
+
+// ─── GitHub API helpers ──────────────────────────────────────────────────────
+
+async function ghApi(path, opts = {}) {
+  const token = ghGetToken();
+  const resp = await fetch(`https://api.github.com${path}`, {
+    ...opts,
+    headers: {
+      'Authorization': `Bearer ${token}`,
+      'Accept': 'application/vnd.github.v3+json',
+      'Content-Type': 'application/json',
+      ...(opts.headers || {}),
+    },
+  });
+  const data = await resp.json();
+  if (!resp.ok) throw new Error(data.message || `GitHub API error ${resp.status}`);
+  return data;
+}
+
+async function ghGetUser() { return ghApi('/user'); }
+
+async function ghGetMainSha() {
+  const d = await ghApi(
+    `/repos/${GITHUB_UPLOAD_CONFIG.REPO_OWNER}/${GITHUB_UPLOAD_CONFIG.REPO_NAME}/git/ref/heads/${GITHUB_UPLOAD_CONFIG.BASE_BRANCH}`
+  );
+  return d.object.sha;
+}
+
+async function ghCreateBranch(name, sha) {
+  return ghApi(
+    `/repos/${GITHUB_UPLOAD_CONFIG.REPO_OWNER}/${GITHUB_UPLOAD_CONFIG.REPO_NAME}/git/refs`,
+    { method: 'POST', body: JSON.stringify({ ref: `refs/heads/${name}`, sha }) }
+  );
+}
+
+async function ghGetFile(path, branch) {
+  try {
+    const d = await ghApi(
+      `/repos/${GITHUB_UPLOAD_CONFIG.REPO_OWNER}/${GITHUB_UPLOAD_CONFIG.REPO_NAME}/contents/${path}?ref=${branch}`
+    );
+    return { content: atob(d.content.replace(/\n/g, '')), sha: d.sha };
+  } catch { return null; }
+}
+
+async function ghPutFile(path, textContent, message, branch, existingSha) {
+  const body = { message, branch, content: btoa(unescape(encodeURIComponent(textContent))) };
+  if (existingSha) body.sha = existingSha;
+  return ghApi(
+    `/repos/${GITHUB_UPLOAD_CONFIG.REPO_OWNER}/${GITHUB_UPLOAD_CONFIG.REPO_NAME}/contents/${path}`,
+    { method: 'PUT', body: JSON.stringify(body) }
+  );
+}
+
+async function ghPutBinaryFile(path, arrayBuffer, message, branch, existingSha) {
+  const bytes = new Uint8Array(arrayBuffer);
+  let bin = '';
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+  const body = { message, branch, content: btoa(bin) };
+  if (existingSha) body.sha = existingSha;
+  return ghApi(
+    `/repos/${GITHUB_UPLOAD_CONFIG.REPO_OWNER}/${GITHUB_UPLOAD_CONFIG.REPO_NAME}/contents/${path}`,
+    { method: 'PUT', body: JSON.stringify(body) }
+  );
+}
+
+async function ghCreatePR(head, title, body) {
+  return ghApi(
+    `/repos/${GITHUB_UPLOAD_CONFIG.REPO_OWNER}/${GITHUB_UPLOAD_CONFIG.REPO_NAME}/pulls`,
+    { method: 'POST', body: JSON.stringify({ title, body, head, base: GITHUB_UPLOAD_CONFIG.BASE_BRANCH }) }
+  );
+}
+
+// ─── Device Flow ─────────────────────────────────────────────────────────────
+
+async function ghStartDeviceFlow() {
+  if (!GITHUB_UPLOAD_CONFIG.CLIENT_ID || GITHUB_UPLOAD_CONFIG.CLIENT_ID === 'YOUR_GITHUB_OAUTH_CLIENT_ID') {
+    throw new Error('NO_CLIENT_ID');
+  }
+  const resp = await fetch('https://github.com/login/device/code', {
+    method: 'POST',
+    headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
+    body: JSON.stringify({ client_id: GITHUB_UPLOAD_CONFIG.CLIENT_ID, scope: GITHUB_UPLOAD_CONFIG.SCOPES }),
+  });
+  if (!resp.ok) throw new Error('Device flow initiation failed');
+  return resp.json();
+}
+
+function ghPollForToken(deviceCode, intervalSec) {
+  return new Promise((resolve, reject) => {
+    const timer = setInterval(async () => {
+      try {
+        const resp = await fetch('https://github.com/login/oauth/access_token', {
+          method: 'POST',
+          headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            client_id: GITHUB_UPLOAD_CONFIG.CLIENT_ID,
+            device_code: deviceCode,
+            grant_type: 'urn:ietf:params:oauth:grant-type:device_code',
+          }),
+        });
+        const d = await resp.json();
+        if (d.access_token) { clearInterval(timer); resolve(d.access_token); }
+        else if (d.error === 'expired_token' || d.error === 'access_denied') {
+          clearInterval(timer); reject(new Error(d.error_description || d.error));
+        }
+      } catch (e) { clearInterval(timer); reject(e); }
+    }, Math.max(intervalSec, 5) * 1000);
+  });
+}
+
+// ─── High-level: create PR for a new illustration ────────────────────────────
+
+/**
+ * @param {string}      id          - illustration ID (no .svg)
+ * @param {string}      category    - 'global' | 'dashboards'
+ * @param {ArrayBuffer} lightBuf    - light SVG
+ * @param {ArrayBuffer} darkBuf     - dark SVG
+ * @returns {string} PR URL
+ */
+async function ghCreateIllustrationPR(id, category, lightBuf, darkBuf) {
+  const slug   = id.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+  const branch = `add-illustration-${slug}-${Date.now()}`;
+
+  const mainSha = await ghGetMainSha();
+  await ghCreateBranch(branch, mainSha);
+
+  // Upload light + dark SVGs
+  const lightPath = `illustrations/light/${category}/${id}.svg`;
+  const darkPath  = `illustrations/dark/${category}/${id}.svg`;
+
+  const [existingLight, existingDark] = await Promise.all([
+    ghGetFile(lightPath, branch),
+    ghGetFile(darkPath, branch),
+  ]);
+  await Promise.all([
+    ghPutBinaryFile(lightPath, lightBuf, `feat(illustrations): add ${id} (light)`, branch, existingLight?.sha),
+    ghPutBinaryFile(darkPath,  darkBuf,  `feat(illustrations): add ${id} (dark)`,  branch, existingDark?.sha),
+  ]);
+
+  // Update index.css — add CSS rules
+  const cssFile = await ghGetFile('index.css', branch);
+  if (cssFile) {
+    const newRules = `\n.dot-illustration img.${id}.light {\n    content: url('./illustrations/light/${category}/${id}.svg');\n}\n.dot-illustration img.${id}.dark {\n    content: url('./illustrations/dark/${category}/${id}.svg');\n}\n`;
+    const updatedCss = cssFile.content + newRules;
+    await ghPutFile('index.css', updatedCss, `feat(css): add ${id} illustration rules`, branch, cssFile.sha);
+  }
+
+  // Update demo/script.js — append to the correct array
+  const scriptFile = await ghGetFile('demo/script.js', branch);
+  if (scriptFile) {
+    const arrayName = category === 'dashboards' ? 'dashboardsList' : 'globalList';
+    const updated   = appendToJsArray(scriptFile.content, arrayName, id);
+    if (updated !== scriptFile.content) {
+      await ghPutFile('demo/script.js', updated, `feat(demo): add ${id} to ${arrayName}`, branch, scriptFile.sha);
+    }
+  }
+
+  const pr = await ghCreatePR(
+    branch,
+    `feat(illustrations): add ${id} (${category})`,
+    `## New illustration: \`${id}\`
+
+**Category:** ${category}
+
+### Files added
+- \`illustrations/light/${category}/${id}.svg\`
+- \`illustrations/dark/${category}/${id}.svg\`
+
+### Checklist for reviewer
+- [ ] Light and dark variants are visually correct
+- [ ] SVGs are optimised (no raster images, no external references)
+- [ ] CSS rules added to \`index.css\`
+- [ ] Demo list updated in \`demo/script.js\`
+
+> This PR was created automatically via the dot-illustrations demo upload UI.`
+  );
+  return pr.html_url;
+}
+
+// ─── High-level: create PR for a new integration ─────────────────────────────
+
+/**
+ * @param {string}      id     - integration ID (no .svg)
+ * @param {ArrayBuffer} svgBuf - SVG file
+ * @returns {string} PR URL
+ */
+async function ghCreateIntegrationPR(id, svgBuf) {
+  const slug   = id.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+  const branch = `add-integration-${slug}-${Date.now()}`;
+
+  const mainSha = await ghGetMainSha();
+  await ghCreateBranch(branch, mainSha);
+
+  // Upload SVG
+  const svgPath     = `integrations/${id}.svg`;
+  const existingSvg = await ghGetFile(svgPath, branch);
+  await ghPutBinaryFile(svgPath, svgBuf, `feat(integrations): add ${id}`, branch, existingSvg?.sha);
+
+  // Update index.css
+  const cssFile = await ghGetFile('index.css', branch);
+  if (cssFile) {
+    const newRule = `\n.dot-integration img.${id} {\n    content: url('./integrations/${id}.svg');\n}\n`;
+    await ghPutFile('index.css', cssFile.content + newRule, `feat(css): add ${id} integration rule`, branch, cssFile.sha);
+  }
+
+  // Update demo/script.js — append to integrationsList
+  const scriptFile = await ghGetFile('demo/script.js', branch);
+  if (scriptFile) {
+    const updated = appendToJsArray(scriptFile.content, 'integrationsList', id);
+    if (updated !== scriptFile.content) {
+      await ghPutFile('demo/script.js', updated, `feat(demo): add ${id} to integrationsList`, branch, scriptFile.sha);
+    }
+  }
+
+  const pr = await ghCreatePR(
+    branch,
+    `feat(integrations): add ${id} logo`,
+    `## New integration: \`${id}\`
+
+**File:** \`integrations/${id}.svg\`
+
+### Checklist for reviewer
+- [ ] SVG is optimised and legible at 48×48px
+- [ ] Logo follows brand guidelines
+- [ ] No raster images or external references
+- [ ] CSS rule added to \`index.css\`
+- [ ] Demo list updated in \`demo/script.js\`
+
+> This PR was created automatically via the dot-illustrations demo upload UI.`
+  );
+  return pr.html_url;
+}
+
+// ─── Utility: append an ID to a JS array in source text ──────────────────────
+
+function appendToJsArray(source, arrayName, id) {
+  // Find the last entry in the named array and insert after it
+  const re = new RegExp(`(const ${arrayName} = \\[)([\\s\\S]*?)(\\s*\\];)`, 'm');
+  const match = source.match(re);
+  if (!match) return source;
+  const body   = match[2];
+  const indent = (body.match(/\n(\s+)"/) || body.match(/\n(\s+)/) || ['', '    '])[1];
+  const newEntry = `\n${indent}"${id}",`;
+  return source.replace(re, `$1$2${newEntry}$3`);
+}
+
+// ─── Export ──────────────────────────────────────────────────────────────────
+
+window.GitHubUpload = {
+  config: GITHUB_UPLOAD_CONFIG,
+  getToken:              ghGetToken,
+  setToken:              ghSetToken,
+  clearToken:            ghClearToken,
+  getUser:               ghGetUser,
+  startDeviceFlow:       ghStartDeviceFlow,
+  pollForToken:          ghPollForToken,
+  createIllustrationPR:  ghCreateIllustrationPR,
+  createIntegrationPR:   ghCreateIntegrationPR,
+};

package/demo/index.html

@@ -9,6 +9,7 @@
     <script src="https://unpkg.com/@heroicons/vue@2.0.18/dist/heroicons.min.js"></script>
     <link rel="stylesheet" href="../index.css" />
     <link rel="stylesheet" href="./demo.css" />
+    <script src="./github-upload.js" defer></script>
     <script src="script.js" defer></script>
     <script>
       // Tailwind dark mode config
@@ -19,23 +20,38 @@
     <div id="floating-bar" class="fixed top-0 left-0 w-full z-50 flex items-center justify-center bg-white/90 dark:bg-gray-900/90 shadow-md px-2 py-1 transition-transform duration-300 -translate-y-full" style="backdrop-filter: blur(6px);">
       <div class="flex flex-row items-center gap-2 w-full max-w-5xl">
         <input class="floating-search flex-1 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" type="text" id="floatingInput" autocomplete="off" placeholder="Search...">
-        <nav class="inline-flex rounded shadow overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
-          <button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900" id="floating-tab-all" data-tab="all" aria-selected="true" role="tab">All</button>
-          <button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-global" data-tab="global" aria-selected="false" role="tab">Global</button>
-          <button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-dashboards" data-tab="dashboards" aria-selected="false" role="tab">Dashboards</button>
-          <button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-favourites" data-tab="favourites" aria-selected="false" role="tab">Favourites</button>
+        <nav class="inline-flex rounded shadow overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-x-auto" id="floating-tabs" role="tablist">
+          <button class="floating-tab tab-btn whitespace-nowrap px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900" id="floating-tab-all" data-tab="all" aria-selected="true" role="tab">All</button>
+          <button class="floating-tab tab-btn whitespace-nowrap px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-global" data-tab="global" aria-selected="false" role="tab">Global</button>
+          <button class="floating-tab tab-btn whitespace-nowrap px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-dashboards" data-tab="dashboards" aria-selected="false" role="tab">Dashboards</button>
+          <button class="floating-tab tab-btn whitespace-nowrap px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-integrations" data-tab="integrations" aria-selected="false" role="tab">Integrations</button>
+          <button class="floating-tab tab-btn whitespace-nowrap px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-favourites" data-tab="favourites" aria-selected="false" role="tab">Favourites</button>
+          <button class="floating-tab tab-btn whitespace-nowrap px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-green-700 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/40" id="floating-tab-upload" data-tab="upload" aria-selected="false" role="tab">+ Upload</button>
         </nav>
       </div>
     </div>
     <div class="container mx-auto px-4 py-8">
       <div class="flex flex-col md:flex-row items-center justify-between mb-6 gap-4">
         <h1 class="text-3xl md:text-5xl font-bold text-center md:text-left text-gray-900 dark:text-white">Dot Illustrations</h1>
-        <button id="theme-toggle" aria-label="Toggle dark mode" class="flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-full shadow hover:bg-gray-300 dark:hover:bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500">
-          <span id="theme-icon" class="transition-transform duration-300">
-            <!-- Sun/Moon icon will be injected by JS -->
-          </span>
-          <span class="hidden sm:inline">Switch theme</span>
-        </button>
+        <div class="flex items-center gap-3">
+          <!-- GitHub connect -->
+          <div id="gh-auth-area">
+            <button id="gh-connect-btn" class="flex items-center gap-2 px-3 py-2 bg-gray-900 dark:bg-gray-700 text-white rounded-full shadow hover:bg-gray-700 dark:hover:bg-gray-600 transition text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.015 2.898-.015 3.293 0 .322.216.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+              Connect GitHub
+            </button>
+            <span id="gh-user-badge" class="hidden items-center gap-2 px-3 py-2 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
+              <span id="gh-user-name"></span>
+              <button id="gh-logout-btn" class="ml-1 text-xs underline opacity-70 hover:opacity-100">Log out</button>
+            </span>
+          </div>
+          <!-- Dark mode toggle -->
+          <button id="theme-toggle" aria-label="Toggle dark mode" class="flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-full shadow hover:bg-gray-300 dark:hover:bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500">
+            <span id="theme-icon" class="transition-transform duration-300"></span>
+            <span class="hidden sm:inline">Switch theme</span>
+          </button>
+        </div>
       </div>
       <p class="text-center text-gray-700 dark:text-gray-300 mb-2">
         For more details please see
@@ -47,16 +63,111 @@
         <div id="search-suggestions" class="absolute top-full left-1/2 -translate-x-1/2 w-full md:w-1/2 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-b-lg shadow-lg hidden max-h-72 overflow-y-auto"></div>
       </div>
       <!-- Tabs -->
-      <div class="mb-8 flex justify-center">
-        <nav class="inline-flex rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
-          <button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900" id="tab-all" data-tab="all" aria-selected="true" role="tab">All Illustrations</button>
-          <button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-global" data-tab="global" aria-selected="false" role="tab">Global</button>
-          <button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-dashboards" data-tab="dashboards" aria-selected="false" role="tab">Dashboards</button>
-          <button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-favourites" data-tab="favourites" aria-selected="false" role="tab">Favourites</button>
+      <div class="mb-4 flex justify-center overflow-x-auto">
+        <nav class="inline-flex rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shrink-0" role="tablist" id="main-tabs">
+          <button class="tab-btn whitespace-nowrap px-5 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900" id="tab-all" data-tab="all" aria-selected="true" role="tab">All Illustrations</button>
+          <button class="tab-btn whitespace-nowrap px-5 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-global" data-tab="global" aria-selected="false" role="tab">Global</button>
+          <button class="tab-btn whitespace-nowrap px-5 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-dashboards" data-tab="dashboards" aria-selected="false" role="tab">Dashboards</button>
+          <button class="tab-btn whitespace-nowrap px-5 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-integrations" data-tab="integrations" aria-selected="false" role="tab">Integrations</button>
+          <button class="tab-btn whitespace-nowrap px-5 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-favourites" data-tab="favourites" aria-selected="false" role="tab">Favourites</button>
+          <button class="tab-btn whitespace-nowrap px-5 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-green-700 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/40" id="tab-upload" data-tab="upload" aria-selected="false" role="tab">+ Upload New</button>
         </nav>
       </div>
-      <div id="illustration-list" class="demo-wrapper dot-illustration grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-6 max-h-[calc(100vh-300px)] overflow-y-auto px-2">
-        <!-- Illustrations will be injected here -->
+
+      <!-- Alphabet filter strip -->
+      <div id="alphabet-strip" class="hidden mb-4 flex flex-wrap justify-center gap-1 px-2">
+        <button class="alpha-btn px-2 py-0.5 text-xs rounded font-mono bg-blue-600 text-white" data-letter="all">All</button>
+      </div>
+
+      <!-- Result count + integration note -->
+      <p id="result-count" class="text-center text-sm text-gray-500 dark:text-gray-400 mb-4"></p>
+      <p id="integrations-note" class="hidden text-center text-xs text-gray-500 dark:text-gray-400 mb-4">
+        Integration logos are single-theme (no dark variant). Use <code class="font-mono bg-gray-200 dark:bg-gray-800 px-1 rounded">.dot-integration</code> wrapper.
+      </p>
+
+      <!-- Grid -->
+      <div id="illustration-list" class="demo-wrapper dot-illustration grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-6 max-h-[calc(100vh-320px)] overflow-y-auto px-2">
+        <!-- injected by JS -->
+      </div>
+
+      <!-- Upload panel -->
+      <div id="upload-panel" class="hidden mt-8">
+        <div class="max-w-2xl mx-auto grid md:grid-cols-2 gap-6">
+
+          <!-- Illustration upload -->
+          <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700 flex flex-col gap-4">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Upload Illustration → PR</h2>
+            <div id="upload-illus-auth-gate" class="p-3 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700 rounded-lg text-sm text-yellow-800 dark:text-yellow-200">
+              Connect GitHub (header) to enable.
+            </div>
+            <div id="upload-illus-form" class="hidden flex flex-col gap-3">
+              <div>
+                <label class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 block">Illustration ID <span class="text-red-500">*</span></label>
+                <input id="upload-illus-id" type="text" placeholder="e.g. my-illustration" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+              </div>
+              <div>
+                <label class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 block">Category</label>
+                <select id="upload-illus-category" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                  <option value="global" selected>Global</option>
+                  <option value="dashboards">Dashboards</option>
+                </select>
+              </div>
+              <div class="grid grid-cols-2 gap-3">
+                <div>
+                  <label class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 block">☀️ Light SVG <span class="text-red-500">*</span></label>
+                  <div id="illus-light-drop" class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-3 text-center cursor-pointer hover:border-blue-400 transition text-xs text-gray-500 dark:text-gray-400">
+                    Drop or click
+                    <input id="illus-light-input" type="file" accept=".svg" class="hidden" />
+                  </div>
+                  <p id="illus-light-name" class="text-xs text-green-600 dark:text-green-400 mt-1 truncate hidden"></p>
+                </div>
+                <div>
+                  <label class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 block">🌙 Dark SVG <span class="text-red-500">*</span></label>
+                  <div id="illus-dark-drop" class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-3 text-center cursor-pointer hover:border-blue-400 transition text-xs text-gray-500 dark:text-gray-400">
+                    Drop or click
+                    <input id="illus-dark-input" type="file" accept=".svg" class="hidden" />
+                  </div>
+                  <p id="illus-dark-name" class="text-xs text-green-600 dark:text-green-400 mt-1 truncate hidden"></p>
+                </div>
+              </div>
+              <button id="upload-illus-btn" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-sm transition focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50">Create PR</button>
+              <div id="upload-illus-status" class="hidden text-sm text-center"></div>
+              <div id="upload-illus-pr-link" class="hidden text-center">
+                <a id="upload-illus-pr-anchor" href="#" target="_blank" class="inline-flex items-center gap-2 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium text-sm transition">View Pull Request ↗</a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Integration upload -->
+          <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700 flex flex-col gap-4">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Upload Integration → PR</h2>
+            <div id="upload-integ-auth-gate" class="p-3 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700 rounded-lg text-sm text-yellow-800 dark:text-yellow-200">
+              Connect GitHub (header) to enable.
+            </div>
+            <div id="upload-integ-form" class="hidden flex flex-col gap-3">
+              <div>
+                <label class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 block">Integration ID <span class="text-red-500">*</span></label>
+                <input id="upload-integ-id" type="text" placeholder="e.g. my-tool" class="w-full px-3 py-1.5 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+              </div>
+              <div>
+                <label class="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 block">SVG file (single, no dark variant) <span class="text-red-500">*</span></label>
+                <div id="integ-svg-drop" class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 text-center cursor-pointer hover:border-blue-400 transition text-sm text-gray-500 dark:text-gray-400">
+                  Drop SVG here or click to browse
+                  <input id="integ-svg-input" type="file" accept=".svg" class="hidden" />
+                </div>
+                <p id="integ-svg-name" class="text-xs text-green-600 dark:text-green-400 mt-1 truncate hidden"></p>
+              </div>
+              <div class="p-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg text-xs text-blue-800 dark:text-blue-200">
+                Integration logos have no dark variant. Use a square, brand-accurate SVG.
+              </div>
+              <button id="upload-integ-btn" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-sm transition focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50">Create PR</button>
+              <div id="upload-integ-status" class="hidden text-sm text-center"></div>
+              <div id="upload-integ-pr-link" class="hidden text-center">
+                <a id="upload-integ-pr-anchor" href="#" target="_blank" class="inline-flex items-center gap-2 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium text-sm transition">View Pull Request ↗</a>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <!-- Modal for illustration details -->
@@ -85,5 +196,33 @@
         <button id="modal-close-bottom" class="mt-4 px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition">Close</button>
       </div>
     </div>
+    <!-- GitHub Device Flow modal -->
+    <div id="gh-device-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 dark:bg-black/70 hidden">
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-2xl max-w-sm w-full p-6 relative flex flex-col items-center mx-4">
+        <button id="gh-device-close" class="absolute top-3 right-3 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl font-bold focus:outline-none">&times;</button>
+        <svg class="w-10 h-10 mb-4 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.015 2.898-.015 3.293 0 .322.216.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Connect GitHub</h2>
+        <div id="gh-device-step-code" class="w-full flex flex-col items-center gap-3">
+          <p class="text-sm text-gray-600 dark:text-gray-400 text-center">Open the URL below and enter the code to authorise.</p>
+          <a id="gh-device-uri" href="#" target="_blank" class="text-blue-600 dark:text-blue-400 underline text-sm font-medium"></a>
+          <div class="flex items-center gap-2">
+            <code id="gh-device-code" class="text-2xl font-mono tracking-widest bg-gray-100 dark:bg-gray-800 px-4 py-2 rounded-lg text-gray-900 dark:text-white"></code>
+            <button id="gh-copy-code-btn" class="text-xs px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition">Copy</button>
+          </div>
+          <div class="flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm">
+            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path></svg>
+            Waiting for authorisation…
+          </div>
+        </div>
+        <div id="gh-device-step-pat" class="w-full flex flex-col gap-3 hidden">
+          <p class="text-sm text-gray-600 dark:text-gray-400 text-center">Enter a GitHub Personal Access Token with <code class="font-mono text-xs">public_repo</code> scope.</p>
+          <input id="gh-pat-input" type="password" placeholder="ghp_…" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+          <a href="https://github.com/settings/tokens/new?scopes=public_repo&description=dot-illustrations+demo+upload" target="_blank" class="text-xs text-blue-600 dark:text-blue-400 underline text-center">Create a token on GitHub ↗</a>
+          <button id="gh-pat-submit" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition">Connect with token</button>
+        </div>
+        <div id="gh-device-error" class="hidden mt-2 text-sm text-red-600 dark:text-red-400 text-center"></div>
+      </div>
+    </div>
+
   </body>
 </html>