From a854f02854447af528127fb72b199791b79adb7c Mon Sep 17 00:00:00 2001
From: Tyler Koenig <tyler@lerkolabs.com>
Date: Sun, 17 May 2026 13:28:10 -0400
Subject: [PATCH] feat(themes): add catppuccin mocha, nord, and dracula themes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Community-standard palettes mapped to nib's 18-token design system.
Theme cycle extended: dark → paper → tinycard → catppuccin → nord → dracula.
---
 web/app.js    | 16 ++++++++-----
 web/style.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/web/app.js b/web/app.js
index adbe789..a76b8ca 100644
--- a/web/app.js
+++ b/web/app.js
@@ -17,6 +17,9 @@
   const PAGE_SIZE = 50;
 
   const INTENT_HINTS = { grab: 'scan + copy', read: 'expand + study', fill: 'templates only' };
+  const READ_TYPES = ['note', 'link', 'decision'];
+  const FILL_TYPES = ['template', 'checklist'];
+  const GRAB_TYPES = ['snippet'];
 
   const state = {
     view: 'stream',
@@ -363,7 +366,7 @@
       html += '<div class="rail-lbl">intent</div>';
       for (const k of ['grab', 'read', 'fill']) {
         const on = state.intent === k ? ' on' : '';
-        const count = k === 'grab' ? state.entities.length : k === 'read' ? state.entities.filter(e => e.card_data).length : state.entities.filter(e => e.body && /\$\{.+\}/.test(e.body)).length;
+        const count = k === 'grab' ? state.entities.filter(e => !e.card_type || GRAB_TYPES.includes(e.card_type)).length : k === 'read' ? state.entities.filter(e => READ_TYPES.includes(e.card_type)).length : state.entities.filter(e => FILL_TYPES.includes(e.card_type)).length;
         html += `<button class="rail-item${on}" data-intent="${k}">`;
         html += `<span class="rail-arrow">${state.intent === k ? '▸' : ''}</span>`;
         html += '<span class="rail-dot"></span>';
@@ -1842,9 +1845,10 @@
   });
 
   function filterByIntent(entities) {
-    if (state.view !== 'cards' || state.intent === 'grab') return entities;
-    if (state.intent === 'read') return entities.filter(e => e.card_data);
-    if (state.intent === 'fill') return entities.filter(e => e.body && /\$\{.+\}/.test(e.body));
+    if (state.view !== 'cards') return entities;
+    if (state.intent === 'grab') return entities.filter(e => !e.card_type || GRAB_TYPES.includes(e.card_type));
+    if (state.intent === 'read') return entities.filter(e => READ_TYPES.includes(e.card_type));
+    if (state.intent === 'fill') return entities.filter(e => FILL_TYPES.includes(e.card_type));
     return entities;
   }
 
@@ -1888,8 +1892,8 @@
 
   // ========== Theme ==========
 
-  const THEMES = ['dark', 'paper', 'tinycard'];
-  const THEME_ICONS = { dark: '◑', paper: '◐', tinycard: '◈' };
+  const THEMES = ['dark', 'paper', 'tinycard', 'catppuccin', 'nord', 'dracula'];
+  const THEME_ICONS = { dark: '◑', paper: '◐', tinycard: '◈', catppuccin: '◕', nord: '◓', dracula: '◒' };
 
   const themeToggle = $('#theme-toggle');
   let nibTheme = localStorage.getItem('nib:theme') || 'dark';
diff --git a/web/style.css b/web/style.css
index 3a07d22..8d730e3 100644
--- a/web/style.css
+++ b/web/style.css
@@ -74,6 +74,72 @@
     --mono: 'JetBrains Mono', ui-monospace, monospace;
 }
 
+[data-theme="catppuccin"] {
+    color-scheme: dark;
+    --bg: #1e1e2e;
+    --surf: #181825;
+    --raised: #313244;
+    --border: #45475a;
+    --soft: #252536;
+    --text: #cdd6f4;
+    --muted: #a6adc8;
+    --dim: #6c7086;
+    --accent: #cba6f7;
+    --a-bg: rgba(203,166,247,.09);
+    --a-str: rgba(203,166,247,.22);
+    --todo: #f9e2af;
+    --note: #94e2d5;
+    --event: #89b4fa;
+    --remind: #fab387;
+    --ok: #a6e3a1;
+    --danger: #f38ba8;
+    --lineage: #f5c2e7;
+}
+
+[data-theme="nord"] {
+    color-scheme: dark;
+    --bg: #2e3440;
+    --surf: #3b4252;
+    --raised: #434c5e;
+    --border: #4c566a;
+    --soft: #363d4a;
+    --text: #eceff4;
+    --muted: #d8dee9;
+    --dim: #4c566a;
+    --accent: #88c0d0;
+    --a-bg: rgba(136,192,208,.09);
+    --a-str: rgba(136,192,208,.22);
+    --todo: #ebcb8b;
+    --note: #8fbcbb;
+    --event: #81a1c1;
+    --remind: #d08770;
+    --ok: #a3be8c;
+    --danger: #bf616a;
+    --lineage: #b48ead;
+}
+
+[data-theme="dracula"] {
+    color-scheme: dark;
+    --bg: #282a36;
+    --surf: #21222c;
+    --raised: #44475a;
+    --border: #6272a4;
+    --soft: #343746;
+    --text: #f8f8f2;
+    --muted: #bfbfbf;
+    --dim: #6272a4;
+    --accent: #bd93f9;
+    --a-bg: rgba(189,147,249,.09);
+    --a-str: rgba(189,147,249,.22);
+    --todo: #f1fa8c;
+    --note: #8be9fd;
+    --event: #8be9fd;
+    --remind: #ffb86c;
+    --ok: #50fa7b;
+    --danger: #ff5555;
+    --lineage: #ff79c6;
+}
+
 /* ── RESET ──────────────────────────────────────────── */
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 html, body { height: 100%; overflow: hidden; }