project-graph-mcp 2.2.4 → 2.3.0

package/vendor/symbiote-node/layout/LayoutSidebar/LayoutSidebar.css.js

@@ -0,0 +1,379 @@
+/**
+ * LayoutSidebar styles
+ * @module symbiote-node/layout/LayoutSidebar
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const sidebarStyles = css`
+layout-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  min-width: 220px;
+  background: var(--sn-bg, #1e1e1e);
+  border-right: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.06));
+  overflow: hidden;
+  transition: width 0.2s ease, min-width 0.2s ease;
+  user-select: none;
+  position: relative;
+
+  &[collapsed] {
+    width: 48px;
+    min-width: 48px;
+  }
+}
+
+/* Resize handle — right edge */
+layout-sidebar .sb-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+  transition: background 0.15s;
+
+  &:hover, &.dragging {
+    background: var(--sn-node-selected, #4a9eff);
+    opacity: 0.5;
+  }
+
+  layout-sidebar[collapsed] & {
+    display: none;
+  }
+}
+
+/* ═══════════════════════ Header — same as panel headers ═══════════════════════ */
+layout-sidebar .sb-header {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 4px;
+  min-height: 28px;
+  background: var(--bg-header, var(--sn-bg, #1e1e1e));
+  border-bottom: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.06));
+  flex-shrink: 0;
+
+  /* Collapsed: center the collapse button */
+  layout-sidebar[collapsed] & {
+    justify-content: center;
+    padding: 2px 0;
+  }
+}
+
+layout-sidebar .sb-header-spacer {
+  flex: 1;
+
+  layout-sidebar[collapsed] & {
+    display: none;
+  }
+}
+
+/* Header buttons — same style as panel header-btn */
+layout-sidebar .sb-header-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-dim, var(--sn-text-dim, #888));
+  font-size: 0.75rem;
+  transition: background 0.1s, color 0.1s;
+
+  &:hover {
+    background: var(--bg-hover, var(--sn-node-hover, rgba(255, 255, 255, 0.06)));
+    color: var(--text-main, var(--sn-text, #d4d4d4));
+  }
+
+  & .material-symbols-outlined {
+    font-size: 16px;
+  }
+
+  /* Active tune button in edit mode */
+  layout-sidebar[edit-mode] &:first-child {
+    color: var(--sn-cat-server, #5cb8ff);
+    background: color-mix(in srgb, var(--sn-cat-server, #5cb8ff) 10%, transparent);
+  }
+}
+
+/* Hide tune button when collapsed */
+layout-sidebar[collapsed] .sb-header-btn:first-child {
+  display: none;
+}
+
+/* Collapse icon rotation */
+layout-sidebar .sb-collapse-icon {
+  transition: transform 0.2s ease;
+}
+
+layout-sidebar[collapsed] .sb-collapse-icon {
+  transform: rotate(180deg);
+}
+
+/* ═══════════════════════ Sections container ═══════════════════════ */
+layout-sidebar .sb-sections {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 0;
+}
+
+/* ═══════════════════════ SidebarSection ═══════════════════════ */
+sidebar-section {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  position: relative;
+
+  /* Hidden section in normal mode */
+  &[data-hidden] {
+    display: none;
+  }
+
+  /* Disabled section — shown but not interactive */
+  &[data-disabled] {
+    opacity: 0.35;
+    pointer-events: none;
+    filter: grayscale(0.5);
+  }
+
+  /* In edit mode, show disabled sections normally (admin might want to toggle visibility) */
+  layout-sidebar[edit-mode] &[data-disabled] {
+    opacity: 0.5;
+    pointer-events: auto;
+    filter: none;
+  }
+
+  /* In edit mode, hidden sections are dimmed */
+  layout-sidebar[edit-mode] &[data-hidden] {
+    display: flex;
+    opacity: 0.35;
+  }
+
+  /* Drag states */
+  &[data-dragging] {
+    opacity: 0.4;
+  }
+
+  &[data-dragover] {
+    border-top: 2px solid var(--sn-cat-server, #5cb8ff);
+  }
+}
+
+/* Drag handle — edit mode only */
+sidebar-section .sec-drag-handle {
+  display: none;
+  align-items: center;
+  padding: 0 2px;
+  cursor: grab;
+  color: var(--text-dim, var(--sn-text-dim, #888));
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  & .material-symbols-outlined {
+    font-size: 16px;
+  }
+
+  layout-sidebar[edit-mode] & {
+    display: flex;
+  }
+
+  layout-sidebar[collapsed] & {
+    display: none;
+  }
+}
+
+/* Section row */
+sidebar-section .sec-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  padding: 6px 14px;
+  min-height: 28px;
+  cursor: pointer;
+  color: var(--text-dim, var(--sn-text-dim, #888));
+  transition: background 0.12s, color 0.12s;
+  white-space: nowrap;
+  overflow: hidden;
+
+  layout-sidebar[edit-mode] & {
+    padding-left: 4px;
+  }
+
+  &:hover {
+    background: var(--bg-hover, var(--sn-node-hover, rgba(255, 255, 255, 0.06)));
+    color: var(--text-main, var(--sn-text, #d4d4d4));
+  }
+}
+
+sidebar-section .sec-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+sidebar-section .sec-label {
+  font-size: 13px;
+  font-weight: 500;
+
+  layout-sidebar[collapsed] & {
+    display: none;
+  }
+}
+
+/* Expand chevron */
+sidebar-section .sec-expand {
+  margin-left: auto;
+  font-size: 16px;
+  transition: transform 0.15s, opacity 0.15s;
+
+  layout-sidebar[collapsed] & {
+    display: none;
+  }
+
+  layout-sidebar[edit-mode] & {
+    display: none;
+  }
+
+  /* Inactive state when no sub-panels */
+  sidebar-section:not([data-has-sub]) & {
+    opacity: 0.2;
+    cursor: default;
+  }
+}
+
+/* Active section */
+sidebar-section[data-active] > .sec-item {
+  color: var(--text-main, var(--sn-text, #d4d4d4));
+  background: var(--bg-hover, var(--sn-node-hover, rgba(255, 255, 255, 0.06)));
+  border-left: 2px solid var(--sn-cat-server, #5cb8ff);
+  padding-left: 12px;
+
+  layout-sidebar[edit-mode] & {
+    padding-left: 2px;
+  }
+}
+
+/* Eye visibility button — edit mode only */
+sidebar-section .sec-eye {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-dim, var(--sn-text-dim, #888));
+  transition: color 0.15s, background 0.15s;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--bg-hover, var(--sn-node-hover, rgba(255, 255, 255, 0.06)));
+    color: var(--text-main, var(--sn-text, #d4d4d4));
+  }
+
+  & .material-symbols-outlined {
+    font-size: 16px;
+  }
+
+  layout-sidebar[edit-mode] & {
+    display: flex;
+  }
+
+  layout-sidebar[collapsed] & {
+    display: none;
+  }
+
+  sidebar-section[data-hidden] & {
+    opacity: 0.5;
+  }
+}
+
+/* ═══════════════════════ Sub-panels ═══════════════════════ */
+sidebar-section .sec-sub-panels {
+  width: 100%;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.2s ease;
+
+  layout-sidebar[collapsed] & {
+    display: none;
+  }
+
+  layout-sidebar[edit-mode] & {
+    display: none;
+  }
+}
+
+sidebar-section[data-expanded] .sec-sub-panels {
+  max-height: 300px;
+}
+
+sidebar-section[data-expanded] .sec-expand {
+  transform: rotate(90deg);
+}
+
+sidebar-section .sub-panel-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 14px 4px 38px;
+  min-height: 24px;
+  font-size: 12px;
+  color: var(--text-dim, var(--sn-text-dim, #888));
+  cursor: default;
+  transition: background 0.12s, color 0.12s;
+
+  &:hover {
+    background: var(--bg-hover, var(--sn-node-hover, rgba(255, 255, 255, 0.04)));
+    color: var(--text-main, var(--sn-text, #d4d4d4));
+  }
+
+  & .material-symbols-outlined {
+    font-size: 14px;
+    opacity: 0.6;
+  }
+}
+
+/* Close button on sub-panel items */
+sidebar-section .sub-panel-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  color: var(--text-dim, var(--sn-text-dim, #888));
+  opacity: 0;
+  transition: opacity 0.12s, background 0.12s, color 0.12s;
+
+  & .material-symbols-outlined {
+    font-size: 14px;
+  }
+
+  &:hover {
+    background: color-mix(in srgb, var(--sn-danger-color, #ef4444) 15%, transparent);
+    color: var(--sn-danger-color, #ff6b6b);
+  }
+}
+
+/* Show close only on hover of non-master items */
+sidebar-section .sub-panel-item:hover .sub-panel-close {
+  opacity: 1;
+}
+
+/* Hide close button on master panel items */
+sidebar-sub-item[data-master] .sub-panel-close {
+  display: none;
+}
+`;

package/vendor/symbiote-node/layout/LayoutSidebar/LayoutSidebar.js

@@ -0,0 +1,263 @@
+/**
+ * LayoutSidebar — collapsible workspace navigation with edit mode
+ *
+ * Normal mode: shows only visible sections
+ * Edit mode (Blender-style): shows all sections with eye toggles + drag handles
+ *
+ * @module symbiote-node/layout/LayoutSidebar
+ */
+import Symbiote from '@symbiotejs/symbiote';
+import { sidebarTemplate } from './LayoutSidebar.tpl.js';
+import { sidebarStyles } from './LayoutSidebar.css.js';
+import { navigate } from '../LayoutRouter/LayoutRouter.js';
+import './SidebarSection.js';
+
+const STORAGE_KEY_COLLAPSED = 'sn-sidebar-collapsed';
+const STORAGE_KEY_CONFIG = 'sn-sidebar-config';
+const STORAGE_KEY_WIDTH = 'sn-sidebar-width';
+
+export class LayoutSidebar extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+    collapsed: false,
+    editMode: false,
+    sections: [],
+
+    onToggle: () => {
+      this.$.collapsed = !this.$.collapsed;
+    },
+
+    onToggleEditMode: () => {
+      this.$.editMode = !this.$.editMode;
+    },
+  };
+
+  /** @type {Array<{id: string, icon: string, label: string}>} */
+  #allSections = [];
+
+  renderCallback() {
+    // Reflect attributes
+    this.sub('collapsed', (val) => {
+      this.toggleAttribute('collapsed', val);
+    });
+    this.sub('editMode', (val) => {
+      this.toggleAttribute('edit-mode', val);
+    });
+
+    // Restore collapsed state (default: collapsed)
+    if (typeof localStorage !== 'undefined') {
+      const stored = localStorage.getItem(STORAGE_KEY_COLLAPSED);
+      if (stored === null || stored === 'true') {
+        this.$.collapsed = true;
+      }
+
+      // Restore saved width
+      const savedWidth = localStorage.getItem(STORAGE_KEY_WIDTH);
+      if (savedWidth) this.style.width = savedWidth + 'px';
+    }
+
+    // Persist collapsed state
+    this.sub('collapsed', (val) => {
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(STORAGE_KEY_COLLAPSED, String(val));
+        // Reset inline width when collapsing (CSS handles 48px)
+        if (val) {
+          this.style.width = '';
+          this.style.minWidth = '';
+        } else {
+          // Restore saved width when expanding
+          const w = localStorage.getItem(STORAGE_KEY_WIDTH);
+          if (w) {
+            this.style.width = w + 'px';
+            this.style.minWidth = w + 'px';
+          }
+        }
+      }
+    });
+
+    // Resize drag handle
+    const handle = this.querySelector('.sb-resize-handle');
+    if (handle) {
+      let startX = 0;
+      let startW = 0;
+
+      const onMove = (e) => {
+        const newWidth = Math.max(120, Math.min(600, startW + (e.clientX - startX)));
+        this.style.width = newWidth + 'px';
+        this.style.minWidth = newWidth + 'px';
+        this.style.transition = 'none';
+      };
+
+      const onUp = () => {
+        handle.classList.remove('dragging');
+        this.style.transition = '';
+        const w = this.offsetWidth;
+        if (typeof localStorage !== 'undefined') {
+          localStorage.setItem(STORAGE_KEY_WIDTH, w);
+        }
+        if (typeof document !== 'undefined') {
+          document.removeEventListener('pointermove', onMove);
+          document.removeEventListener('pointerup', onUp);
+        }
+      };
+
+      handle.addEventListener('pointerdown', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        startX = e.clientX;
+        startW = this.offsetWidth;
+        handle.classList.add('dragging');
+        if (typeof document !== 'undefined') {
+          document.addEventListener('pointermove', onMove);
+          document.addEventListener('pointerup', onUp);
+        }
+      });
+    }
+  }
+
+  /**
+   * Configure sidebar sections
+   * @param {Array<{id: string, icon: string, label: string}>} items
+   */
+  setSections(items) {
+    this.#allSections = items;
+
+    // Load saved config (order + visibility)
+    const savedConfig = this.#loadConfig();
+    let ordered = items;
+
+    if (savedConfig) {
+      // Reorder based on saved order
+      const orderMap = new Map(savedConfig.map((c, i) => [c.id, i]));
+      ordered = [...items].sort((a, b) => {
+        const ai = orderMap.get(a.id) ?? 999;
+        const bi = orderMap.get(b.id) ?? 999;
+        return ai - bi;
+      });
+    }
+
+    this.#buildSections(ordered, savedConfig);
+
+    // Subscribe to route changes to update active section
+    this.sub('ROUTER/panel', (panel) => {
+      this.$.sections = this.$.sections.map((s) => ({
+        ...s,
+        isActive: s.sectionId === panel,
+      }));
+    });
+  }
+
+  /**
+   * Build sections array from ordered items + config
+   * @param {Array<{id: string, icon: string, label: string}>} items
+   * @param {Array<{id: string, visible: boolean}>|null} config
+   */
+  #buildSections(items, config) {
+    const visibilityMap = config
+      ? new Map(config.map((c) => [c.id, c.visible]))
+      : null;
+
+    this.$.sections = items.map((item) => ({
+      sectionId: item.id,
+      icon: item.icon,
+      label: item.label,
+      isActive: false,
+      isVisible: visibilityMap ? (visibilityMap.get(item.id) ?? true) : true,
+      isExpanded: false,
+      subPanels: [],
+    }));
+  }
+
+  /**
+   * Toggle visibility of a section
+   * @param {string} sectionId
+   */
+  toggleVisibility(sectionId) {
+    this.$.sections = this.$.sections.map((s) => {
+      if (s.sectionId !== sectionId) return s;
+      return { ...s, isVisible: !s.isVisible };
+    });
+    this.#saveConfig();
+  }
+
+  /**
+   * Move section by drag (swap positions)
+   * @param {number} fromIndex
+   * @param {number} toIndex
+   */
+  moveSection(fromIndex, toIndex) {
+    const arr = [...this.$.sections];
+    const [moved] = arr.splice(fromIndex, 1);
+    arr.splice(toIndex, 0, moved);
+    this.$.sections = arr;
+    this.#saveConfig();
+  }
+
+  /**
+   * Reset sections to default order and visibility
+   */
+  resetConfig() {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.removeItem(STORAGE_KEY_CONFIG);
+    }
+    this.#buildSections(this.#allSections, null);
+  }
+
+  /**
+   * Save current section order and visibility
+   */
+  #saveConfig() {
+    const config = this.$.sections.map((s) => ({
+      id: s.sectionId,
+      visible: s.isVisible,
+    }));
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(STORAGE_KEY_CONFIG, JSON.stringify(config));
+    }
+  }
+
+  /**
+   * Load saved section config
+   * @returns {Array<{id: string, visible: boolean}>|null}
+   */
+  #loadConfig() {
+    try {
+      if (typeof localStorage !== 'undefined') {
+        const raw = localStorage.getItem(STORAGE_KEY_CONFIG);
+        return raw ? JSON.parse(raw) : null;
+      }
+    } catch {
+      return null;
+    }
+    return null;
+  }
+
+  /**
+   * Update sub-panel list for a section
+   * @param {string} sectionId
+   * @param {Array<{title: string, icon: string}>} panels
+   */
+  updateSubPanels(sectionId, panels) {
+    this.$.sections = this.$.sections.map((s) => {
+      if (s.sectionId !== sectionId) return s;
+      return { ...s, subPanels: panels };
+    });
+  }
+
+  /**
+   * Mark sections as disabled (shown but not clickable)
+   * @param {string[]} disabledIds - Section IDs to disable
+   */
+  setDisabledSections(disabledIds) {
+    const disabledSet = new Set(disabledIds);
+    this.$.sections = this.$.sections.map((s) => ({
+      ...s,
+      isDisabled: disabledSet.has(s.sectionId),
+    }));
+  }
+}
+
+LayoutSidebar.template = sidebarTemplate;
+LayoutSidebar.rootStyles = sidebarStyles;
+LayoutSidebar.reg('layout-sidebar');

package/vendor/symbiote-node/layout/LayoutSidebar/LayoutSidebar.tpl.js

@@ -0,0 +1,20 @@
+/**
+ * LayoutSidebar template
+ * @module symbiote-node/layout/LayoutSidebar
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const sidebarTemplate = html`
+<div class="sb-header">
+  <button class="sb-header-btn" ${{ onclick: 'onToggleEditMode' }}>
+    <span class="material-symbols-outlined">tune</span>
+  </button>
+  <div class="sb-header-spacer"></div>
+  <button class="sb-header-btn" ${{ onclick: 'onToggle' }}>
+    <span class="material-symbols-outlined sb-collapse-icon">chevron_left</span>
+  </button>
+</div>
+
+<div class="sb-sections" itemize="sections" item-tag="sidebar-section"></div>
+<div class="sb-resize-handle"></div>
+`;