synabun 1.3.0

package/neural-interface/public/shared/colors.js

@@ -0,0 +1,153 @@
+// ═══════════════════════════════════════════
+// COLORS — shared color utility functions
+// ═══════════════════════════════════════════
+//
+// Pure utility functions for color resolution, alpha blending,
+// importance-to-radius mapping, and the custom <select> upgrade.
+// No variant-specific dependencies.
+
+import { COLOR_PALETTE, KEYS } from './constants.js';
+import { storage } from './storage.js';
+import { state } from './state.js';
+
+/**
+ * Resolve the display color for a category.
+ * Priority: storage override > backend metadata color > palette index > hash fallback.
+ * @param {string} category  Category name
+ * @returns {string} Hex color string
+ */
+export function catColor(category) {
+  // 1. User override from storage (highest priority)
+  try {
+    const overrides = JSON.parse(storage.getItem(KEYS.CATEGORY_COLORS) || '{}');
+    if (overrides[category]) return overrides[category];
+  } catch {}
+  // 2. Backend color from category metadata
+  if (state.categoryMetadata[category]?.color) {
+    return state.categoryMetadata[category].color;
+  }
+  // 3. Index-based from palette (deterministic -- same position = same color)
+  const idx = state.allCategoryNames.indexOf(category);
+  if (idx >= 0) return COLOR_PALETTE[idx % COLOR_PALETTE.length];
+  // 4. Hash-based fallback for unknown categories
+  let hash = 0;
+  for (let i = 0; i < category.length; i++) hash = ((hash << 5) - hash + category.charCodeAt(i)) | 0;
+  return COLOR_PALETTE[Math.abs(hash) % COLOR_PALETTE.length];
+}
+
+/**
+ * Convert a hex color + alpha (0-1) to an rgba() string.
+ * @param {string} hex    Hex color (e.g. '#C47A8E')
+ * @param {number} alpha  Alpha value 0-1
+ * @returns {string} rgba() CSS string
+ */
+export function hexAlpha(hex, alpha) {
+  const c = parseInt(hex.replace('#', ''), 16);
+  return `rgba(${(c >> 16) & 255},${(c >> 8) & 255},${c & 255},${alpha})`;
+}
+
+/**
+ * Map an importance score (1-10) to a node radius.
+ * @param {number} importance  1-10
+ * @returns {number} Radius (2 to 6.5)
+ */
+export function importanceToRadius(importance) {
+  return 2 + (importance - 1) * 0.5; // 2 to 6.5
+}
+
+/**
+ * Replace a native <select> with a styled custom dropdown.
+ * Keeps the hidden <select> synced so .value still works.
+ * Adds category color dots via catColor() when values match categories.
+ *
+ * If the select was already upgraded, refreshes the existing wrapper
+ * (useful after options change dynamically).
+ *
+ * @param {HTMLSelectElement} selectEl  The native <select> to upgrade
+ * @returns {HTMLDivElement|null} The .styled-select wrapper, or null if selectEl is falsy
+ */
+export function upgradeSelect(selectEl) {
+  if (!selectEl) return null;
+
+  // If already upgraded, refresh the existing wrapper
+  if (selectEl.dataset.upgraded) {
+    const existing = selectEl.closest('.styled-select');
+    if (existing && existing._refresh) { existing._refresh(); return existing; }
+  }
+
+  selectEl.dataset.upgraded = '1';
+  selectEl.style.display = 'none';
+
+  const wrapper = document.createElement('div');
+  wrapper.className = 'styled-select';
+
+  const trigger = document.createElement('button');
+  trigger.type = 'button';
+  trigger.className = 'styled-select-trigger';
+
+  const menu = document.createElement('div');
+  menu.className = 'styled-select-menu';
+
+  function updateTrigger() {
+    trigger.innerHTML = '';
+    const sel = selectEl.options[selectEl.selectedIndex];
+    if (sel && sel.value) {
+      const dot = document.createElement('span');
+      dot.className = 'styled-select-dot';
+      dot.style.background = catColor(sel.value);
+      trigger.appendChild(dot);
+    }
+    const lbl = document.createElement('span');
+    lbl.className = 'styled-select-label';
+    lbl.textContent = sel ? sel.textContent : '';
+    trigger.appendChild(lbl);
+  }
+
+  function buildOptions() {
+    menu.innerHTML = '';
+    Array.from(selectEl.options).forEach(opt => {
+      const row = document.createElement('div');
+      row.className = 'styled-select-option' + (opt.value === selectEl.value ? ' active' : '');
+      if (opt.value) {
+        const dot = document.createElement('span');
+        dot.className = 'styled-select-dot';
+        dot.style.background = catColor(opt.value);
+        row.appendChild(dot);
+      }
+      const lbl = document.createElement('span');
+      lbl.textContent = opt.textContent;
+      row.appendChild(lbl);
+      row.addEventListener('click', () => {
+        selectEl.value = opt.value;
+        selectEl.dispatchEvent(new Event('change', { bubbles: true }));
+        updateTrigger();
+        buildOptions();
+        wrapper.classList.remove('open');
+      });
+      menu.appendChild(row);
+    });
+  }
+
+  trigger.addEventListener('click', (e) => {
+    e.stopPropagation();
+    // Close any other open styled selects first
+    document.querySelectorAll('.styled-select.open').forEach(s => {
+      if (s !== wrapper) s.classList.remove('open');
+    });
+    const opening = wrapper.classList.toggle('open');
+    if (opening) buildOptions();
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!wrapper.contains(e.target)) wrapper.classList.remove('open');
+  });
+
+  selectEl.parentNode.insertBefore(wrapper, selectEl);
+  wrapper.appendChild(trigger);
+  wrapper.appendChild(menu);
+  wrapper.appendChild(selectEl);
+
+  wrapper._refresh = () => { updateTrigger(); buildOptions(); };
+  updateTrigger();
+  return wrapper;
+}

package/neural-interface/public/shared/constants.js

@@ -0,0 +1,141 @@
+// ═══════════════════════════════════════════
+// CONSTANTS — shared between 3D and 2D variants
+// ═══════════════════════════════════════════
+
+export const DEFAULT_COLOR = '#888888';
+
+export const COLOR_PALETTE = [
+  '#4FC3F7', '#66BB6A', '#FFC107', '#FF7043', '#29B6F6',
+  '#BDBDBD', '#42A5F5', '#EF5350', '#FFCA28', '#AB47BC',
+  '#26A69A', '#FF8A65', '#7E57C2', '#26C6DA', '#D4E157',
+  '#FF7043', '#26A69A', '#CE93D8', '#FFB300', '#00ACC1',
+  '#9CCC65', '#00BCD4', '#7986CB', '#EF5350', '#E53935',
+  '#00BFA5', '#5C6BC0', '#EC407A',
+];
+
+/** All storage key names used across both variants.
+ *  Most keys are persisted to data/ui-state.json via shared/storage.js.
+ *  Keys marked "sessionStorage" remain browser-only (ephemeral). */
+export const KEYS = {
+  BOOKMARKS:           'neural-bookmarks',
+  CATEGORY_COLORS:     'neural-category-colors',
+  CATEGORY_ORDER:      'neural-category-order',
+  SELECTED_NODE:       'neural-selected-node',
+  SELECTED_SWITCH:     'neural-selected-node-switch',   // sessionStorage — preserve selection across variant switch
+  UI_SCALE:            'neural-ui-scale',
+  GFX_CONFIG_3D:       'neural-gfx-config',
+  GFX_CONFIG_2D:       'neural-gfx-config-2d',
+  GFX_PRESET:          'neural-gfx-preset',
+  LAYOUT_PRESETS_3D:   'neural-layout-presets',
+  LAYOUT_PRESETS_2D:   'neural-user-presets-2d',
+  PANEL_PREFIX:        'neural-panel-',
+  NODE_POS_3D:         'synabun-node-positions',
+  NODE_POS_2D:         'synabun-node-positions-2d',
+  CAM_HUD_PINNED:      'neural-cam-hud-pinned',
+  CAM_HUD_POS:         'neural-cam-hud-pos',
+  LAYOUT_VERSION:      'synabun-layout-version',
+  INTERFACE_CONFIG:    'neural-interface-config',
+  EXPLORER_CAT_ORDER:  'neural-explorer-cat-order',
+  EXPLORER_COLLAPSED:  'neural-explorer-collapsed',
+  EXPLORER_SORT:       'neural-explorer-sort',
+  EXPLORER_VISIBLE:    'neural-explorer-visible',
+  EXPLORER_WIDTH:      'neural-explorer-width',
+  TERMINAL_HEIGHT:     'neural-terminal-height',
+  TERMINAL_OPEN:       'neural-terminal-open',
+  TERMINAL_DETACHED:   'neural-terminal-detached',
+  TERMINAL_FLOAT_POS:  'neural-terminal-float-pos',
+  TERMINAL_SESSIONS:   'neural-terminal-active-sessions',
+  TERMINAL_SPLIT_RATIO: 'neural-terminal-split-ratio',
+  TERMINAL_NOTIFICATIONS: 'neural-terminal-notifications',
+  NOTIF_SOUND:           'neural-notif-sound',
+  NOTIF_SOUND_VOLUME:    'neural-notif-sound-volume',
+  NOTIF_SOUND_TYPE:      'neural-notif-sound-type',
+  NOTIF_BANNER:          'neural-notif-banner',
+  NOTIF_BANNER_FOCUSED:  'neural-notif-banner-focused',
+  NOTIF_ACTION_ONLY:     'neural-notif-action-only',
+  NOTIF_SOURCE_CLI:      'neural-notif-source-cli',
+  NOTIF_SOURCE_PANEL:    'neural-notif-source-panel',
+  NOTIF_TRIGGER_DONE:    'neural-notif-trigger-done',
+  NOTIF_TRIGGER_ACTION:  'neural-notif-trigger-action',
+  NOTIF_TRIGGER_ASK:     'neural-notif-trigger-ask',
+  NOTIF_TRIGGER_ERROR:   'neural-notif-trigger-error',
+  NOTIF_TOAST:           'neural-notif-toast',
+  NOTIF_TOAST_DURATION:  'neural-notif-toast-duration',
+  NOTIF_TOAST_POSITION:  'neural-notif-toast-position',
+  OPEN_CARDS:          'neural-open-cards',
+  WORKSPACES:          'neural-workspaces',
+  ACTIVE_WORKSPACE:    'neural-active-workspace',  // sessionStorage
+  GRID_SNAP:           'neural-grid-snap',
+  CATEGORIES_VISIBLE:  'neural-categories-visible',
+  WHITEBOARD:          'neural-whiteboard',
+  TUTORIAL_COMPLETED:  'neural-tutorial-completed',
+  TUTORIAL_SKIPPED:    'neural-tutorial-skipped',
+  TUTORIAL_STEP:       'neural-tutorial-step',
+  TUTORIAL_STARTED:    'neural-tutorial-started',
+  ONBOARDING_EXPLORE:  'neural-onboarding-explore',
+  ONBOARDING_CLI:      'neural-onboarding-cli',
+  ONBOARDING_MODEL:    'neural-onboarding-model',
+  ONBOARDING_PROJECT:  'neural-onboarding-project',
+  LINK_PANEL_POS:      'neural-link-panel-pos',
+  LINK_PANEL_SIZE:     'neural-link-panel-size',
+  ACTIVE_LINKS:        'neural-active-links',
+  COMMAND_RUNNER:      'neural-command-runner',
+  FILE_EXPLORER_VISIBLE:  'neural-file-explorer-visible',
+  FILE_EXPLORER_WIDTH:    'neural-file-explorer-width',
+  FILE_EXPLORER_COLLAPSED:'neural-file-explorer-collapsed',
+  FILE_EXPLORER_SORT:     'neural-file-explorer-sort',
+  FILE_EXPLORER_PROJECT:  'neural-file-explorer-project',
+  FILE_EXPLORER_FOLDER_COLORS: 'neural-file-explorer-folder-colors',
+  ACTIVE_SKIN:            'neural-active-skin',
+  COST_WIDGET_POS:        'neural-cost-widget-pos',
+  COST_WIDGET_COLLAPSED:  'neural-cost-widget-collapsed',
+  COST_WIDGET_DOCKED:     'neural-cost-widget-docked',
+  NODE_LIMIT:             'neural-node-limit',
+  MINIMAP_POS:            'synabun-2d-minimap-pos',
+};
+
+/** Default keybind mappings — action ID → combo string.
+ *  Combo format: {Ctrl+}{Alt+}{Shift+}{Meta+}{key}
+ *  key is KeyboardEvent.key (lowercase for printable chars). */
+export const DEFAULT_KEYBINDS = {
+  'toggle-categories':   'c',
+  'open-skills':         'k',
+  'open-automations':    'z',
+  'toggle-terminal':     't',
+  'toggle-terminal-alt': 'Ctrl+`',
+  'focus-search':        '/',
+  'toggle-help':         '?',
+  'toggle-explorer':     'f',
+  'toggle-focus-mode':   'v',
+  'toggle-minimap':      'm',
+  'open-keybinds':       'n',
+  'launch-claude':       '1',
+  'launch-codex':        '2',
+  'launch-gemini':       '3',
+  'launch-browser':      'b',
+  'launch-youtube':      'y',
+  'toggle-file-explorer': 'e',
+  'open-settings':       's',
+};
+
+/** Display metadata for each rebindable action. */
+export const KEYBIND_META = {
+  'toggle-categories':   { label: 'Toggle Categories',     group: 'Navigation' },
+  'open-skills':         { label: 'Open Skills Studio',    group: 'Navigation' },
+  'open-automations':    { label: 'Open Automation Studio', group: 'Navigation' },
+  'toggle-terminal':     { label: 'Toggle Terminal',       group: 'Navigation' },
+  'toggle-terminal-alt': { label: 'Toggle Terminal (alt)', group: 'Navigation' },
+  'focus-search':        { label: 'Focus Search',          group: 'Navigation' },
+  'toggle-help':         { label: 'Toggle Help',           group: 'Navigation' },
+  'toggle-explorer':     { label: 'Toggle Explorer',       group: 'Navigation' },
+  'toggle-focus-mode':   { label: 'Toggle Focus Mode',     group: 'Navigation' },
+  'toggle-minimap':      { label: 'Toggle Minimap',        group: 'View' },
+  'open-settings':       { label: 'Open Settings',          group: 'Settings' },
+  'open-keybinds':       { label: 'Open Keybinds',         group: 'Settings' },
+  'launch-claude':       { label: 'Claude Code',           group: 'Launch App', icon: 'claude' },
+  'launch-codex':        { label: 'Codex CLI',             group: 'Launch App', icon: 'codex' },
+  'launch-gemini':       { label: 'Gemini CLI',            group: 'Launch App', icon: 'gemini' },
+  'launch-browser':      { label: 'Browser',               group: 'Launch App', icon: 'browser' },
+  'launch-youtube':      { label: 'YouTube',               group: 'Launch App', icon: 'youtube' },
+  'toggle-file-explorer': { label: 'Toggle File Explorer', group: 'Navigation' },
+};