synabun 1.3.0

package/neural-interface/public/sw.js

@@ -0,0 +1,52 @@
+const CACHE_NAME = 'synabun-offline-v7';
+const OFFLINE_URL = '/offline.html';
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.add(new Request(OFFLINE_URL, { cache: 'reload' })))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((names) =>
+      Promise.all(names.filter((n) => n !== CACHE_NAME).map((n) => caches.delete(n)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.mode !== 'navigate') return;
+  event.respondWith(
+    fetch(event.request).catch(() => caches.match(OFFLINE_URL))
+  );
+});
+
+// ── Notifications (required for Safari PWA) ──
+
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SHOW_NOTIFICATION') {
+    const { title, body, tag, routing } = event.data;
+    event.waitUntil(
+      self.registration.showNotification(title, { body, tag, silent: true, data: routing || null })
+    );
+  }
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const routing = event.notification.data;
+  event.waitUntil(
+    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((list) => {
+      const target = list.length > 0 ? list[0] : null;
+      if (target) {
+        target.focus();
+        if (routing) target.postMessage({ type: 'NOTIFICATION_CLICK', ...routing });
+      } else {
+        clients.openWindow('/');
+      }
+    })
+  );
+});

package/neural-interface/public/toolbar-album.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.1935 16.793C20.8437 19.2739 20.6689 20.5143 19.7717 21.2572C18.8745 22 17.5512 22 14.9046 22H9.09536C6.44881 22 5.12553 22 4.22834 21.2572C3.33115 20.5143 3.15626 19.2739 2.80648 16.793L2.38351 13.793C1.93748 10.6294 1.71447 9.04765 2.66232 8.02383C3.61017 7 5.29758 7 8.67239 7H15.3276C18.7024 7 20.3898 7 21.3377 8.02383C22.0865 8.83268 22.1045 9.98979 21.8592 12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M19.5617 7C19.7904 5.69523 18.7863 4.5 17.4617 4.5H6.53788C5.21323 4.5 4.20922 5.69523 4.43784 7" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M17.4999 4.5C17.5283 4.24092 17.5425 4.11135 17.5427 4.00435C17.545 2.98072 16.7739 2.12064 15.7561 2.01142C15.6497 2 15.5194 2 15.2588 2H8.74099C8.48035 2 8.35002 2 8.24362 2.01142C7.22584 2.12064 6.45481 2.98072 6.45704 4.00434C6.45727 4.11135 6.47146 4.2409 6.49983 4.5" stroke="#1C274C" stroke-width="1.5"/>
+<circle cx="16.5" cy="11.5" r="1.5" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M19.9999 20L17.1157 17.8514C16.1856 17.1586 14.8004 17.0896 13.7766 17.6851L13.5098 17.8403C12.7984 18.2542 11.8304 18.1848 11.2156 17.6758L7.37738 14.4989C6.6113 13.8648 5.38245 13.8309 4.5671 14.4214L3.24316 15.3803" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/neural-interface/public/toolbar-question.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.125 8.875C10.125 7.83947 10.9645 7 12 7C13.0355 7 13.875 7.83947 13.875 8.875C13.875 9.56245 13.505 10.1635 12.9534 10.4899C12.478 10.7711 12 11.1977 12 11.75V13" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="12" cy="16" r="1" fill="#1C274C"/>
+<path d="M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C21.5093 4.43821 21.8356 5.80655 21.9449 8" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/neural-interface/public/toolbar-sessions.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 12.0002C2 7.28611 2 4.92909 3.46447 3.46462C4.70529 2.2238 6.58687 2.03431 10 2.00537M22 12.0002C22 7.28611 22 4.92909 20.5355 3.46462C19.2947 2.2238 17.4131 2.03431 14 2.00537" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M10 22C7.19974 22 5.79961 22 4.73005 21.455C3.78924 20.9757 3.02433 20.2108 2.54497 19.27C2 18.2004 2 16.8003 2 14C2 11.1997 2 9.79961 2.54497 8.73005C3.02433 7.78924 3.78924 7.02433 4.73005 6.54497C5.79961 6 7.19974 6 10 6H14C16.8003 6 18.2004 6 19.27 6.54497C20.2108 7.02433 20.9757 7.78924 21.455 8.73005C22 9.79961 22 11.1997 22 14C22 16.8003 22 18.2004 21.455 19.27C20.9757 20.2108 20.2108 20.9757 19.27 21.455C18.2004 22 16.8003 22 14 22" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12 11L12 17M12 17L14.5 14.5M12 17L9.5 14.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/neural-interface/public/variant/2d/background.js

@@ -0,0 +1,113 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — 2D Background
+// Focus Mode aesthetic: dark radial gradient,
+// SynaBun logo watermark, breathing animation
+// Drawn as first layer in the main canvas render loop
+// ═══════════════════════════════════════════
+
+import { gfx } from './gfx.js';
+
+// ── Private state ──
+let _logoBitmap = null;
+let _logoLoading = false;
+
+// Cached background gradient (recreated only on resize)
+let _bgGrad = null;
+let _bgGradW = 0;
+let _bgGradH = 0;
+
+// ═══════════════════════════════════════════
+// INIT
+// ═══════════════════════════════════════════
+
+/**
+ * Initialize the background — preload the SynaBun logo.
+ * Call once after DOM is ready.
+ */
+export function initBackground() {
+  if (_logoLoading || _logoBitmap) return;
+  _logoLoading = true;
+
+  const img = new Image();
+  img.onload = () => {
+    _logoBitmap = img;
+    _logoLoading = false;
+  };
+  img.onerror = () => {
+    _logoLoading = false;
+  };
+  img.src = '/synabun.png?v=2';
+}
+
+// ═══════════════════════════════════════════
+// DRAW (called each frame by graph.js)
+// ═══════════════════════════════════════════
+
+/**
+ * Draw the background onto the main canvas context.
+ * Called in screen-space (before any pan/zoom transforms).
+ *
+ * @param {CanvasRenderingContext2D} ctx  The main canvas context
+ * @param {number} time  requestAnimationFrame timestamp (ms)
+ * @param {number} w     Canvas pixel width
+ * @param {number} h     Canvas pixel height
+ */
+export function drawBackground(ctx, time, w, h) {
+  // ── 1. Dark radial gradient (cached — recreated only on resize) ──
+  if (!_bgGrad || _bgGradW !== w || _bgGradH !== h) {
+    const maxDim = Math.max(w, h);
+    _bgGrad = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, maxDim * 0.7);
+    _bgGrad.addColorStop(0, '#0e1218');
+    _bgGrad.addColorStop(1, '#070709');
+    _bgGradW = w;
+    _bgGradH = h;
+  }
+  ctx.fillStyle = _bgGrad;
+  ctx.fillRect(0, 0, w, h);
+
+  // ── 2. Breathing animation ──
+  if (gfx.bgBreathingEnabled) {
+    const phase = (Math.sin(time * 0.001 * (2 * Math.PI / 4)) + 1) / 2; // 4-second cycle
+    const breatheScale = 1 + phase * 0.15;
+    const breatheAlpha = 0.4 + phase * 0.3;
+    const breatheR = 150 * breatheScale;
+
+    const breatheGrad = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, breatheR);
+    breatheGrad.addColorStop(0, `rgba(100, 140, 200, ${(0.06 * breatheAlpha).toFixed(4)})`);
+    breatheGrad.addColorStop(1, 'rgba(100, 140, 200, 0)');
+    ctx.fillStyle = breatheGrad;
+    ctx.beginPath();
+    ctx.arc(w / 2, h / 2, breatheR, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  // ── 3. SynaBun logo watermark (disabled for 2D canvas view) ──
+  // if (gfx.bgLogoVisible && _logoBitmap) {
+  //   const logoH = 80;
+  //   const logoW = _logoBitmap.naturalWidth * (logoH / _logoBitmap.naturalHeight);
+  //   ctx.save();
+  //   ctx.globalAlpha = 0.18;
+  //   ctx.filter = 'grayscale(0.3)';
+  //   ctx.drawImage(_logoBitmap, w / 2 - logoW / 2, h / 2 - logoH / 2, logoW, logoH);
+  //   ctx.restore();
+  // }
+}
+
+// ═══════════════════════════════════════════
+// LIFECYCLE (compatibility with main.js)
+// ═══════════════════════════════════════════
+
+/**
+ * Stop background (no-op — background is drawn by graph.js render loop).
+ */
+export function stopBackground() {
+  // No-op: background is drawn as part of the main render loop.
+  // When viz is toggled off, the render loop stops, stopping the background too.
+}
+
+/**
+ * Resume background animation (no-op — controlled by render loop).
+ */
+export function animateBackground() {
+  // No-op
+}

package/neural-interface/public/variant/2d/context-menu.js

@@ -0,0 +1,133 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — 2D Context Menu
+// Right-click on a card shows a context menu with actions.
+// Listens for 'node-context-menu' events from graph.js.
+// Element: #context-menu
+// ═══════════════════════════════════════════
+
+import { state, emit, on } from '../../shared/state.js';
+import { getAllCards } from './graph.js';
+
+const $ = (id) => document.getElementById(id);
+
+// ── Private state ──
+let _contextMenuNode = null;
+let _contextMenu = null;
+
+// ═══════════════════════════════════════════
+// INIT
+// ═══════════════════════════════════════════
+
+/**
+ * Initialize the context menu system.
+ * @param {object} _graphInstance  Unused — kept for API compatibility
+ */
+export function initContextMenu(_graphInstance) {
+  _contextMenu = $('context-menu');
+  if (!_contextMenu) return;
+
+  // ── Menu item clicks ──
+  _contextMenu.addEventListener('click', _onMenuClick);
+
+  // ── Close on outside click ──
+  document.addEventListener('click', _onDocumentClick);
+
+  // ── Listen for context menu events from the graph renderer ──
+  on('node-context-menu', ({ node, event }) => {
+    showContextMenu(node, event);
+  });
+}
+
+// ═══════════════════════════════════════════
+// SHOW / HIDE
+// ═══════════════════════════════════════════
+
+/**
+ * Show the context menu at the given screen coordinates for a node.
+ * @param {object} node   The graph node object
+ * @param {MouseEvent} event  The triggering mouse event (for coordinates)
+ */
+export function showContextMenu(node, event) {
+  if (!_contextMenu) return;
+
+  _contextMenuNode = node;
+  _contextMenu.style.left = event.clientX + 'px';
+  _contextMenu.style.top = event.clientY + 'px';
+  _contextMenu.classList.add('open');
+
+  // Update pin text based on card pinned state
+  const pinItem = _contextMenu.querySelector('[data-action="pin"]');
+  if (pinItem) {
+    const cards = getAllCards();
+    const card = cards.find(c => c.node.id === node.id);
+    pinItem.textContent = (card && card.pinned) ? 'Unpin' : 'Pin';
+  }
+}
+
+/**
+ * Hide the context menu and clear the tracked node.
+ */
+export function hideContextMenu() {
+  if (!_contextMenu) return;
+  _contextMenu.classList.remove('open');
+  _contextMenuNode = null;
+}
+
+// ═══════════════════════════════════════════
+// EVENT HANDLERS
+// ═══════════════════════════════════════════
+
+function _onMenuClick(e) {
+  const action = e.target.closest('.ctx-item')?.dataset.action;
+  if (!action || !_contextMenuNode) return;
+  const node = _contextMenuNode;
+  hideContextMenu();
+
+  switch (action) {
+    case 'open':
+      emit('context-menu:open', { node });
+      break;
+    case 'edit':
+      emit('context-menu:edit', { node });
+      break;
+    case 'move':
+      emit('context-menu:move', { node });
+      break;
+    case 'pin': {
+      const cards = getAllCards();
+      const card = cards.find(c => c.node.id === node.id);
+      if (card) {
+        card.pinned = !card.pinned;
+        emit('context-menu:pin', { node, pinned: card.pinned });
+      }
+      break;
+    }
+    case 'focus':
+      emit('context-menu:focus', { node });
+      break;
+    case 'bookmark':
+      emit('context-menu:bookmark', { node });
+      break;
+    case 'trash':
+      emit('context-menu:trash', { node });
+      break;
+  }
+}
+
+function _onDocumentClick(e) {
+  if (_contextMenu && !_contextMenu.contains(e.target)) {
+    hideContextMenu();
+  }
+}
+
+// ═══════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════
+
+export function setGraph(_graphInstance) {
+  // No-op — context menu is event-driven
+}
+
+export function getContextMenuNode() {
+  return _contextMenuNode;
+}

package/neural-interface/public/variant/2d/gfx.js

@@ -0,0 +1,45 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — 2D Graphics Config
+// Orbital layout & visual defaults, load/save
+// ═══════════════════════════════════════════
+
+export const GFX_DEFAULTS_2D = {
+  // Layout
+  parentOrbitRadius: 600,     // base radius for parent category ring
+  childOrbitGap: 200,         // base radius for child category orbits
+  cardGap: 15,                // spacing between cards in orbit rings
+
+  // Visual
+  cardOpacity: 0.88,          // card background opacity
+  regionGlowOpacity: 0.05,   // category region background glow intensity
+  linkOpacity: 0.15,          // link line opacity
+
+  // Background
+  bgBreathingEnabled: true,   // breathing animation circle
+  bgLogoVisible: true,        // SynaBun logo watermark
+
+  // Minimap
+  minimapEnabled: true,
+};
+
+import { storage } from '../../shared/storage.js';
+
+const STORAGE_KEY = 'neural-gfx-config-2d';
+
+export function loadGfxConfig() {
+  try {
+    const saved = JSON.parse(storage.getItem(STORAGE_KEY) || '{}');
+    return { ...GFX_DEFAULTS_2D, ...saved };
+  } catch { return { ...GFX_DEFAULTS_2D }; }
+}
+
+export function saveGfxConfig(cfg) {
+  const diff = {};
+  for (const k in cfg) {
+    if (cfg[k] !== GFX_DEFAULTS_2D[k]) diff[k] = cfg[k];
+  }
+  storage.setItem(STORAGE_KEY, JSON.stringify(diff));
+}
+
+// Initialize and export the live config object
+export const gfx = loadGfxConfig();