archgraph 0.1.0

package/packages/viewer/public/styles.css

@@ -0,0 +1,728 @@
+/* ──────────────────────────────────────────────────────────────────
+   BGX Viewer — Figma-like canvas layout
+   ────────────────────────────────────────────────────────────────── */
+
+/* ─── Design tokens (light mode) ─────────────────────────────────── */
+:root {
+  --bg: #f0f4fa;
+  --surface: #ffffff;
+  --surface-2: #f8fafc;
+  --line: #d8dfeb;
+  --line-2: #e8edf5;
+  --text: #132136;
+  --text-2: #354a63;
+  --muted: #61758f;
+  --endpoint: #0a6cf2;
+  --handler: #0f766e;
+  --condition: #b45309;
+  --agent: #6d28d9;
+  --mcp: #be185d;
+  --edge: #7a91aa;
+  --shadow: rgba(0, 0, 0, 0.08);
+  --shadow-md: rgba(0, 0, 0, 0.14);
+  --radius: 10px;
+  --radius-sm: 6px;
+  --radius-lg: 14px;
+}
+
+/* ─── Dark mode tokens ────────────────────────────────────────────── */
+[data-theme="dark"] {
+  --bg: #0e1724;
+  --surface: #162030;
+  --surface-2: #1c2a3e;
+  --line: #253649;
+  --line-2: #1e2f44;
+  --text: #dceaf8;
+  --text-2: #8fa8c4;
+  --muted: #5a7a96;
+  --edge: #4a6a88;
+  --shadow: rgba(0, 0, 0, 0.3);
+  --shadow-md: rgba(0, 0, 0, 0.5);
+}
+
+/* ─── Base reset ──────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
+  font-size: 14px;
+  color: var(--text);
+  background: var(--bg);
+}
+
+/* ─── Canvas root — full screen ───────────────────────────────────── */
+#canvasRoot {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background: var(--bg);
+  background-image:
+    radial-gradient(circle, var(--line-2) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+#graphSvg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  overflow: visible;
+}
+
+#graphSvg:active {
+  cursor: grabbing;
+}
+
+/* ─── Floating toolbar ────────────────────────────────────────────── */
+#toolbar {
+  position: fixed;
+  top: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  box-shadow: 0 4px 20px var(--shadow-md);
+  backdrop-filter: blur(12px);
+  white-space: nowrap;
+  max-width: calc(100vw - 32px);
+  overflow-x: auto;
+}
+
+.toolbar-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--text);
+  padding-right: 8px;
+  border-right: 1px solid var(--line);
+}
+
+#toolbarControls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ctrl-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+.ctrl-name {
+  font-weight: 500;
+}
+
+.ctrl-label select,
+.ctrl-label input {
+  font: inherit;
+  font-size: 0.82rem;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ctrl-label select:focus,
+.ctrl-label input:focus {
+  border-color: var(--endpoint);
+}
+
+.ctrl-search input {
+  width: 160px;
+}
+
+#toolbarActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 8px;
+  border-left: 1px solid var(--line);
+}
+
+.btn-ghost {
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-2);
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 4px 10px;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+
+.btn-ghost:hover {
+  background: var(--surface-2);
+  border-color: var(--endpoint);
+  color: var(--endpoint);
+}
+
+.summary-badge {
+  font-size: 0.72rem;
+  color: var(--muted);
+}
+
+/* ─── Code sidebar ────────────────────────────────────────────────── */
+.sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 440px;
+  max-width: 90vw;
+  height: 100vh;
+  background: var(--surface);
+  border-left: 1px solid var(--line);
+  box-shadow: -4px 0 24px var(--shadow);
+  transform: translateX(100%);
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar--open {
+  transform: translateX(0);
+}
+
+.sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface-2);
+  flex-shrink: 0;
+}
+
+.sidebar__title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px 16px;
+}
+
+.sidebar-file {
+  font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-size: 0.72rem;
+  color: var(--muted);
+  margin-bottom: 10px;
+  word-break: break-all;
+}
+
+.code-block {
+  white-space: pre-wrap;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 10px 12px;
+  font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  font-size: 0.75rem;
+  line-height: 1.55;
+  background: var(--surface-2);
+  overflow-x: auto;
+  margin: 10px 0;
+}
+
+.related-title {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-2);
+  margin: 14px 0 6px;
+}
+
+.related-list details {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  margin-bottom: 6px;
+  overflow: hidden;
+}
+
+.related-list summary {
+  padding: 6px 10px;
+  font-size: 0.78rem;
+  cursor: pointer;
+  background: var(--surface-2);
+  user-select: none;
+}
+
+.related-list pre {
+  padding: 8px 10px;
+  font-size: 0.72rem;
+  font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
+  white-space: pre-wrap;
+  background: var(--surface);
+}
+
+.desc-card {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 10px 12px;
+  margin-bottom: 10px;
+  background: var(--surface-2);
+  font-size: 0.82rem;
+}
+
+.desc-card h4 {
+  font-size: 0.78rem;
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: var(--text-2);
+}
+
+.desc-card p {
+  color: var(--text);
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+/* Syntax tokens */
+.tok-keyword { color: #7c3aed; }
+.tok-string  { color: #047857; }
+.tok-comment { color: #6b7280; font-style: italic; }
+.tok-number  { color: #b45309; }
+[data-theme="dark"] .tok-keyword { color: #a78bfa; }
+[data-theme="dark"] .tok-string  { color: #34d399; }
+[data-theme="dark"] .tok-comment { color: #6b7280; }
+[data-theme="dark"] .tok-number  { color: #fbbf24; }
+
+/* ─── Comment overlay ─────────────────────────────────────────────── */
+.overlay {
+  position: fixed;
+  width: 320px;
+  max-height: 520px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 8px 32px var(--shadow-md);
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.96);
+  transform-origin: top left;
+  transition: opacity 0.14s ease, transform 0.14s ease;
+}
+
+.overlay--open {
+  opacity: 1;
+  pointer-events: all;
+  transform: scale(1);
+}
+
+.overlay__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface-2);
+  flex-shrink: 0;
+  font-size: 0.85rem;
+}
+
+.overlay__thread {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 12px;
+}
+
+.overlay__form {
+  border-top: 1px solid var(--line);
+  padding: 10px 12px;
+  background: var(--surface-2);
+  flex-shrink: 0;
+}
+
+.form-row {
+  margin-bottom: 8px;
+}
+
+#taskForm {
+  display: grid;
+  gap: 8px;
+}
+
+#taskForm textarea {
+  width: 100%;
+  font: inherit;
+  font-size: 0.82rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
+  resize: vertical;
+  background: var(--surface);
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.14s;
+}
+
+#taskForm textarea:focus {
+  border-color: var(--endpoint);
+}
+
+.btn-primary {
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #fff;
+  background: var(--endpoint);
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 7px 14px;
+  cursor: pointer;
+  transition: opacity 0.12s;
+}
+
+.btn-primary:hover {
+  opacity: 0.88;
+}
+
+.btn-icon {
+  font: inherit;
+  font-size: 0.9rem;
+  color: var(--muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: var(--radius-sm);
+  transition: background 0.12s, color 0.12s;
+  line-height: 1;
+}
+
+.btn-icon:hover {
+  background: var(--line-2);
+  color: var(--text);
+}
+
+/* ─── Task cards ──────────────────────────────────────────────────── */
+.task-card {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  background: var(--surface);
+}
+
+.task-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.task-id {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.68rem;
+  color: var(--muted);
+}
+
+.task-meta {
+  color: var(--muted);
+  font-size: 0.72rem;
+  margin-bottom: 4px;
+}
+
+.task-prompt {
+  font-size: 0.82rem;
+  color: var(--text);
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+
+.task-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.task-actions button {
+  font: inherit;
+  font-size: 0.72rem;
+  padding: 3px 8px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  color: var(--text-2);
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+.task-actions button:hover {
+  background: var(--line-2);
+  border-color: var(--endpoint);
+  color: var(--endpoint);
+}
+
+.no-tasks {
+  color: var(--muted);
+  font-size: 0.82rem;
+  display: block;
+  text-align: center;
+  padding: 12px 0;
+}
+
+/* Status badges */
+.status {
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+.status-open     { background: #eaf2ff; color: #0a57c9; }
+.status-approved { background: #ecfdf3; color: #157447; }
+.status-running  { background: #fff7e8; color: #a04b0f; }
+.status-done     { background: #e8faf5; color: #0f766e; }
+.status-failed   { background: #ffeceb; color: #b42318; }
+
+[data-theme="dark"] .status-open     { background: #0d2040; color: #60a5fa; }
+[data-theme="dark"] .status-approved { background: #064e3b; color: #34d399; }
+[data-theme="dark"] .status-running  { background: #451a03; color: #fbbf24; }
+[data-theme="dark"] .status-done     { background: #022c22; color: #6ee7b7; }
+[data-theme="dark"] .status-failed   { background: #450a0a; color: #fca5a5; }
+
+/* ─── Minimap ─────────────────────────────────────────────────────── */
+#minimap {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  width: 180px;
+  height: 120px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  z-index: 40;
+  overflow: hidden;
+  box-shadow: 0 2px 10px var(--shadow);
+}
+
+#minimapSvg {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.mm-node { opacity: 0.75; }
+.mm-endpoint { fill: #0a6cf2; }
+.mm-route_handler, .mm-handler { fill: #0f766e; }
+.mm-agent, .mm-langgraph_node { fill: #6d28d9; }
+.mm-condition { fill: #b45309; }
+.mm-mcp_tool { fill: #be185d; }
+.mm-default, .mm-function, .mm-method, .mm-class { fill: #61758f; }
+.mm-viewport {
+  fill: rgba(10, 108, 242, 0.06);
+  stroke: #0a6cf2;
+  stroke-width: 1.5;
+}
+
+/* ─── Node tooltip ────────────────────────────────────────────────── */
+.tooltip {
+  position: fixed;
+  z-index: 70;
+  pointer-events: none;
+  background: var(--text);
+  color: var(--surface);
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  font-size: 0.78rem;
+  max-width: 300px;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.tooltip--visible {
+  opacity: 1;
+}
+
+.tooltip-kind {
+  opacity: 0.7;
+  font-size: 0.68rem;
+  margin-top: 2px;
+}
+
+.tooltip-file {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.64rem;
+  opacity: 0.65;
+  margin-top: 2px;
+}
+
+/* ─── SVG graph elements ──────────────────────────────────────────── */
+
+/* Edges */
+.edge {
+  stroke: var(--edge);
+  stroke-width: 1.6;
+}
+
+.edge-label {
+  fill: var(--muted);
+  font-size: 10px;
+  font-family: 'IBM Plex Sans', sans-serif;
+}
+
+.edge-condition {
+  stroke: var(--condition);
+  stroke-dasharray: 5 3;
+}
+
+.edge-handles {
+  stroke: var(--handler);
+}
+
+.edge-calls {
+  stroke: var(--endpoint);
+  stroke-opacity: 0.7;
+}
+
+.edge-langgraph {
+  stroke: var(--agent);
+  stroke-opacity: 0.8;
+}
+
+/* Node groups */
+.node rect {
+  fill: var(--surface);
+  stroke: var(--line);
+  stroke-width: 1.2;
+  transition: stroke 0.12s, fill 0.12s;
+}
+
+.node {
+  cursor: pointer;
+}
+
+.node:hover rect {
+  stroke: var(--endpoint);
+  stroke-width: 1.8;
+}
+
+.node.selected rect {
+  stroke-width: 2.2;
+  stroke: var(--endpoint);
+  filter: drop-shadow(0 0 6px rgba(10, 108, 242, 0.35));
+}
+
+.node-endpoint rect   { fill: #eaf2ff; stroke: #92b7ef; }
+.node-handler rect    { fill: #e8faf5; stroke: #88cdc0; }
+.node-condition rect  { fill: #fff5e6; stroke: #f2c58d; }
+.node-agent rect      { fill: #f3eeff; stroke: #bba7ef; }
+.node-mcp rect        { fill: #fdf2f8; stroke: #f0abcf; }
+.node-default rect    { fill: var(--surface-2); stroke: var(--line); }
+
+[data-theme="dark"] .node-endpoint rect   { fill: #0d2040; stroke: #1a4a90; }
+[data-theme="dark"] .node-handler rect    { fill: #022c28; stroke: #0f5c50; }
+[data-theme="dark"] .node-condition rect  { fill: #2a1400; stroke: #7a3a00; }
+[data-theme="dark"] .node-agent rect      { fill: #1e0a40; stroke: #5b2da8; }
+[data-theme="dark"] .node-mcp rect        { fill: #2a0a1e; stroke: #8c1f5e; }
+[data-theme="dark"] .node-default rect    { fill: var(--surface-2); stroke: var(--line); }
+
+.node-kind {
+  fill: var(--muted);
+  font-size: 9px;
+  font-family: 'IBM Plex Sans', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.node-label {
+  fill: var(--text);
+  font-size: 12px;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 500;
+}
+
+/* Collapse toggle */
+.collapse-toggle {
+  cursor: pointer;
+}
+
+.collapse-toggle circle {
+  fill: var(--endpoint);
+  stroke: none;
+  opacity: 0.85;
+  transition: opacity 0.12s;
+}
+
+.collapse-toggle:hover circle {
+  opacity: 1;
+}
+
+.collapse-sign {
+  fill: #fff;
+  font-size: 11px;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 600;
+  dominant-baseline: central;
+}
+
+/* Comment pins */
+.comment-pin {
+  cursor: pointer;
+}
+
+.comment-bubble {
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
+  transition: r 0.12s;
+}
+
+.comment-pin:hover .comment-bubble {
+  r: 14;
+}
+
+.comment-count {
+  fill: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  font-family: 'IBM Plex Sans', sans-serif;
+}
+
+/* Pin status colors (overridden by status class) */
+.comment-bubble.status-open    { fill: var(--endpoint); }
+.comment-bubble.status-approved{ fill: #157447; }
+.comment-bubble.status-running { fill: #d97706; }
+.comment-bubble.status-done    { fill: #0f766e; }
+.comment-bubble.status-failed  { fill: #dc2626; }
+
+/* ─── Scrollbar styling ───────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--muted); }