project-graph-mcp 2.2.4 → 2.3.0

package/vendor/symbiote-node/node/GraphNode/GraphNode.css.js

@@ -0,0 +1,683 @@
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+graph-node {
+  display: block;
+  min-width: var(--sn-node-min-width, 180px);
+  max-width: var(--sn-node-max-width, 280px);
+  border-radius: var(--sn-node-radius, 10px);
+  background: var(--sn-node-bg, #16213e);
+  border: var(--sn-node-border-width, 2px) solid var(--sn-node-border, #2a2a4a);
+  box-shadow: var(--sn-node-shadow, 0 4px 16px var(--sn-shadow-color, rgba(0, 0, 0, 0.3)));
+  user-select: none;
+  cursor: move;
+  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out;
+  overflow: visible;
+  font-family: var(--sn-font, 'Inter', sans-serif);
+  font-size: var(--sn-node-font-size, 13px);
+  -webkit-font-smoothing: antialiased;
+
+  /* Symbiote animateOut: CSS-driven exit transition */
+  &[leaving] {
+    opacity: 0;
+    transform: scale(0.92);
+    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out;
+  }
+
+  &[data-selected] {
+    border-color: var(--sn-node-selected, #4a9eff);
+    box-shadow: 0 0 20px color-mix(in srgb, var(--sn-node-selected, #4a9eff) 30%, transparent);
+  }
+
+  &[data-collapsed] {
+    & .controls {
+      display: none;
+    }
+    & .sn-node-body {
+      padding: 4px 0;
+    }
+    & .port-label {
+      display: none;
+    }
+  }
+
+  &[data-muted] {
+    opacity: 0.45;
+    filter: saturate(0.3);
+
+    & .sn-node-label {
+      text-decoration: line-through;
+    }
+  }
+
+  /* Compact mode — hide node body (ports & controls).
+     Activated by canvas.setCompactMode(true) which sets data-compact on the canvas.
+     SubgraphNodes (node-type="subgraph") keep body visible for inner graph preview. */
+  node-canvas[data-compact] &:not([node-type="subgraph"]) .sn-node-body {
+    display: none;
+  }
+
+  /* LOD: medium — strip heavy rendering for performance */
+  &[data-lod="medium"] {
+    box-shadow: none;
+    transition: none;
+    will-change: auto;
+    pointer-events: auto;
+
+    &:hover {
+      border-color: var(--sn-node-border, #2a2a4a);
+    }
+
+    &[data-selected] {
+      box-shadow: none;
+    }
+
+    &[data-processing] {
+      box-shadow: none;
+      animation: none;
+    }
+
+    &[data-completed] {
+      box-shadow: none;
+    }
+
+    &[data-muted] {
+      filter: none;
+      opacity: 0.5;
+    }
+
+    & .controls,
+    & .port-label,
+    & .sn-subgraph-preview,
+    & .error-frame,
+    & .sn-quick-toolbar {
+      display: none;
+    }
+
+    & .sn-node-body {
+      padding: 2px 0;
+    }
+
+    & node-socket {
+      transition: none;
+      cursor: default;
+
+      &:hover {
+        transform: none;
+        box-shadow: none;
+      }
+    }
+  }
+
+
+  &[node-type="subgraph"] .sn-subgraph-preview {
+    display: block;
+    width: 100%;
+    height: 80px;
+    border-top: 1px solid color-mix(in srgb, currentColor 6%, transparent);
+    opacity: 0.7;
+  }
+
+  &[data-processing] {
+    border-color: var(--sn-node-accent, var(--sn-node-selected, #4a9eff));
+    box-shadow: 0 0 16px color-mix(in srgb, var(--sn-node-accent, #4a9eff) 40%, transparent),
+                0 0 4px color-mix(in srgb, var(--sn-node-accent, #4a9eff) 60%, transparent);
+    animation: sn-node-pulse 1s ease-in-out infinite;
+  }
+
+  &[data-completed] {
+    border-color: var(--sn-success-color, #5cd87a);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--sn-success-color, #5cd87a) 30%, transparent);
+  }
+
+  &[data-error] {
+    border-color: color-mix(in srgb, var(--sn-danger-color, #ef4444) 60%, transparent);
+    position: relative;
+  }
+
+  &[data-error] .sn-node-header {
+    background: color-mix(in srgb, var(--sn-danger-color, #ef4444) 10%, transparent);
+  }
+
+  & .error-frame {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 140px;
+    max-width: 320px;
+    border: 2px solid color-mix(in srgb, var(--sn-danger-color, #ef4444) 60%, transparent);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--sn-danger-color, #ef4444) 8%, transparent);
+    pointer-events: none;
+    z-index: 10;
+    transition: bottom 0.15s ease;
+  }
+
+  & .error-frame-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 10px;
+    font-size: 12px;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--sn-danger-color, #ef4444) 90%, white);
+    border-bottom: 1px solid color-mix(in srgb, var(--sn-danger-color, #ef4444) 20%, transparent);
+    user-select: none;
+  }
+
+  & .error-frame-header .material-symbols-outlined {
+    font-size: 14px;
+    opacity: 0.8;
+  }
+
+  & .error-frame-body {
+    padding: 6px 10px;
+    font-size: 11px;
+    line-height: 1.4;
+    color: color-mix(in srgb, var(--sn-danger-color, #ef4444) 75%, white);
+    word-wrap: break-word;
+  }
+
+
+
+  &[data-selected] .error-frame {
+    bottom: calc(100% + 46px);
+  }
+
+  &:hover {
+    border-color: var(--sn-node-hover, #3a3a6a);
+  }
+
+  &[node-category="server"] {
+    --sn-node-accent: var(--sn-cat-server, #4a9eff);
+  }
+  &[node-category="instance"] {
+    --sn-node-accent: var(--sn-cat-instance, #4ade80);
+  }
+  &[node-category="control"] {
+    --sn-node-accent: var(--sn-cat-control, #fbbf24);
+  }
+  &[node-category="data"] {
+    --sn-node-accent: var(--sn-cat-data, #a78bfa);
+  }
+  &[node-category="default"] {
+    --sn-node-accent: var(--sn-cat-default, #94a3b8);
+  }
+  /* Codebase categories */
+  &[node-category="directory"] {
+    --sn-node-accent: var(--sn-cat-directory, #f0b840);
+  }
+  &[node-category="file"] {
+    --sn-node-accent: var(--sn-cat-file, #5cb8ff);
+  }
+  &[node-category="function"] {
+    --sn-node-accent: var(--sn-cat-function, #4ade80);
+  }
+  &[node-category="class"] {
+    --sn-node-accent: var(--sn-cat-class, #a78bfa);
+  }
+  &[node-category="module"] {
+    --sn-node-accent: var(--sn-cat-module, #ff6b9d);
+  }
+
+  /* Shape: pill — compact horizontal capsule */
+  &[node-shape="pill"] {
+    min-width: 100px;
+    max-width: 200px;
+    border-radius: 999px;
+
+    & .sn-node-header {
+      display: none;
+    }
+    & .sn-node-body {
+      padding: 8px 20px;
+      align-items: center;
+      justify-content: center;
+      flex-direction: row;
+      gap: 8px;
+    }
+    & .inputs, & .outputs {
+      padding: 0;
+    }
+    & .sn-port-in node-socket {
+      margin-left: -26px;
+    }
+    & .sn-port-out node-socket {
+      margin-right: -26px;
+    }
+    & .controls {
+      display: none;
+    }
+  }
+
+  /* Shape: circle — hub/connector node */
+  &[node-shape="circle"] {
+    min-width: 100px;
+    min-height: 100px;
+    border-radius: 50%;
+    aspect-ratio: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    & .sn-node-header {
+      background: transparent;
+      border-bottom: none;
+      justify-content: center;
+      padding: 6px;
+    }
+    & .sn-node-body {
+      padding: 0 8px 8px;
+      flex-direction: row;
+      align-items: center;
+      gap: 0;
+    }
+    & .inputs {
+      position: absolute;
+      left: -6px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    & .outputs {
+      position: absolute;
+      right: -6px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    & .port-label {
+      display: none;
+    }
+    & .controls {
+      display: none;
+    }
+  }
+
+  /* Shape: diamond — condition/decision */
+  &[node-shape="diamond"] {
+    min-width: 100px;
+    min-height: 100px;
+    border-radius: 4px;
+    transform-origin: center;
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & .sn-node-header {
+      display: none;
+    }
+    & .sn-node-body {
+      text-align: center;
+      padding: 25% 10%;
+    }
+    & .controls {
+      display: none;
+    }
+  }
+
+  /* Shape: comment — annotation banner */
+  &[node-shape="comment"] {
+    min-width: 200px;
+    max-width: 400px;
+    border-radius: var(--sn-comment-radius, 6px);
+    background: var(--sn-comment-bg, rgba(255, 255, 255, 0.05));
+    border-color: var(--sn-comment-border, rgba(255, 255, 255, 0.1));
+    cursor: default;
+    box-shadow: none;
+
+    & .sn-node-header {
+      display: none;
+    }
+    & .sn-node-body {
+      padding: 12px 16px;
+    }
+    & .inputs, & .outputs {
+      display: none;
+    }
+  }
+
+  /* Shape: SVG custom — node with SVG background path */
+  &[data-svg-shape] {
+    position: relative;
+    min-width: 100px;
+    min-height: 100px;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    overflow: visible;
+    cursor: default;
+
+    /* Move cursor only over SVG path fill area */
+    & > svg {
+      pointer-events: none;
+      & > path {
+        pointer-events: visibleFill;
+        cursor: move;
+        transition: stroke 0.2s ease;
+      }
+    }
+
+    & .sn-node-header {
+      position: absolute;
+      top: -28px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--sn-node-header-bg, color-mix(in srgb, var(--sn-node-accent, #4a9eff) 20%, var(--sn-node-bg, #16213e)));
+      border: 2px solid var(--sn-node-border, #2a2a4a);
+      border-radius: 20px;
+      padding: 3px 12px;
+      white-space: nowrap;
+      z-index: 1;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease;
+    }
+    &:hover .sn-node-header {
+      opacity: 1;
+    }
+    &[data-selected] .sn-node-header {
+      opacity: 0;
+    }
+    & .sn-node-body {
+      padding: 4px 0;
+      align-items: center;
+    }
+    & .controls {
+      display: none;
+    }
+    & .sn-shape-watermark {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 40px;
+      color: var(--sn-node-accent, var(--sn-text-dim, #888));
+      pointer-events: none;
+      z-index: 0;
+    }
+    /* Hide DOM port items — ConnectionRenderer computes positions mathematically */
+    & .inputs, & .outputs {
+      display: none;
+    }
+  }
+
+  /* SVG shape states — target inline svg > path directly.
+     border/box-shadow have no effect on SVG nodes (border: none).
+     Only stroke COLOR changes on state — width stays the same as inactive,
+     matching HTML nodes where border-width stays 1px on selection. */
+  &[data-svg-shape][data-selected] > svg > path {
+    stroke: var(--sn-node-selected, #4a9eff);
+    transition: stroke 0.2s ease;
+  }
+
+  &[data-svg-shape][data-error] > svg > path {
+    stroke: var(--sn-danger-color, #ef4444);
+    transition: stroke 0.2s ease;
+  }
+
+  &[data-svg-shape][data-muted] > svg > path {
+    opacity: 0.35;
+    filter: saturate(0.2);
+    transition: opacity 0.2s ease, filter 0.2s ease;
+  }
+
+  &[data-svg-shape][data-processing] > svg > path {
+    stroke: var(--sn-node-accent, var(--sn-node-selected, #4a9eff));
+    animation: sn-svg-pulse 1s ease-in-out infinite;
+  }
+
+  &[data-svg-shape][data-completed] > svg > path {
+    stroke: var(--sn-success-color, #5cd87a);
+    transition: stroke 0.2s ease;
+  }
+
+  & .sn-node-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    background: var(--sn-node-header-bg, color-mix(in srgb, var(--sn-node-accent) 15%, transparent));
+    border-bottom: 1px solid color-mix(in srgb, currentColor 6%, transparent);
+    border-radius: var(--sn-node-radius, 10px) var(--sn-node-radius, 10px) 0 0;
+  }
+
+  & .sn-node-icon {
+    font-size: 18px;
+    color: var(--sn-node-accent);
+    opacity: 1;
+  }
+
+  & .sn-node-label {
+    font-weight: 600;
+    font-size: var(--sn-node-label-size, inherit);
+    color: var(--sn-text, #e2e8f0);
+    opacity: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  & .sn-node-body {
+    padding: 8px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  & .inputs, & .outputs {
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.15s ease;
+  }
+
+  /* Port hint: slide ports to nearest side during connector drag */
+  &[data-port-hint="right"] .inputs {
+    transform: translateX(calc(100% - 12px));
+  }
+
+  &[data-port-hint="left"] .outputs {
+    transform: translateX(calc(-100% + 12px));
+  }
+
+  /* Compatible SVG node during drag: subtle outline hint only — dots handle highlight */
+  &[data-svg-shape][data-port-hint] > svg > path {
+    stroke: var(--sn-node-selected, #4a9eff);
+    stroke-width: 0.5;
+    opacity: 0.8;
+    transition: stroke 0.15s ease, opacity 0.15s ease;
+  }
+
+  /* Incompatible dimming for nodes without compatible ports */
+  &[data-port-hint="none"] {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  & .sn-port {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 12px;
+    min-height: 24px;
+  }
+
+  & .sn-port-in {
+    flex-direction: row;
+
+    & node-socket {
+      margin-left: -18px;
+    }
+  }
+
+  & .sn-port-out {
+    flex-direction: row;
+    justify-content: flex-end;
+
+    & node-socket {
+      margin-right: -18px;
+    }
+  }
+
+  & .port-label {
+    color: var(--sn-text-dim, #94a3b8);
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  & .controls {
+    padding: 0 12px;
+  }
+
+  & .sn-control-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 4px 0;
+  }
+
+  & .sn-control-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--sn-text-dim, #94a3b8);
+    letter-spacing: 0.5px;
+  }
+
+  & .sn-control-input {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+    border-radius: 4px;
+    padding: 4px 8px;
+    color: var(--sn-text, #e2e8f0);
+    font-size: 12px;
+    outline: none;
+    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
+
+    &:focus {
+      border-color: var(--sn-node-accent);
+    }
+
+    &[readonly] {
+      opacity: 0.6;
+      cursor: default;
+    }
+  }
+}
+
+/* Preview Area — image/text preview at bottom of node */
+.sn-preview {
+  border-top: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.06));
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+  max-height: 120px;
+  background: rgba(0, 0, 0, 0.2);
+
+  &[hidden] {
+    display: none;
+  }
+
+  & img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+    max-height: 120px;
+  }
+
+  & .sn-preview-text {
+    padding: 6px 10px;
+    font-size: 11px;
+    color: var(--sn-text-dim, #94a3b8);
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+    line-height: 1.4;
+  }
+}
+
+node-socket {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--socket-color, var(--sn-node-accent, #4a9eff));
+  border: 2px solid var(--sn-node-bg, #16213e);
+  cursor: crosshair;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+  z-index: 10;
+  position: relative;
+
+  /* 44×44px invisible touch target */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 44px;
+    height: 44px;
+    transform: translate(-50%, -50%);
+  }
+
+  &:hover {
+    transform: scale(1.3);
+    box-shadow: 0 0 8px var(--socket-color, var(--sn-node-accent));
+  }
+
+  /* Port shape: square — array/object types */
+  &[data-socket-shape="square"] {
+    border-radius: 2px;
+  }
+
+  /* Port shape: diamond — execution/trigger */
+  &[data-socket-shape="diamond"] {
+    border-radius: 1px;
+    transform: rotate(45deg) scale(0.85);
+
+    &:hover {
+      transform: rotate(45deg) scale(1.1);
+    }
+  }
+
+  /* Port shape: triangle — trigger/event */
+  &[data-socket-shape="triangle"] {
+    border-radius: 0;
+    background: transparent;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-left: 10px solid var(--socket-color, var(--sn-node-accent));
+    border-right: none;
+  }
+}
+
+@keyframes sn-node-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes sn-node-error-pulse {
+  0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--sn-danger-color, #ef4444) 35%, transparent), 0 0 4px color-mix(in srgb, var(--sn-danger-color, #ef4444) 50%, transparent); }
+  50% { box-shadow: 0 0 24px color-mix(in srgb, var(--sn-danger-color, #ef4444) 50%, transparent), 0 0 8px color-mix(in srgb, var(--sn-danger-color, #ef4444) 70%, transparent); }
+}
+
+@keyframes sn-svg-pulse {
+  0%, 100% { opacity: 0.7; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.05); }
+}
+
+
+
+/* Accessibility: reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  graph-node {
+    transition: none;
+    animation: none;
+  }
+  node-socket {
+    transition: none;
+  }
+}
+`;