project-graph-mcp 2.3.1 → 2.4.0

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

@@ -1,379 +0,0 @@
-/**
- * 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

@@ -1,263 +0,0 @@
-/**
- * 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

@@ -1,20 +0,0 @@
-/**
- * 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>
-`;