@work-graph/cli 0.2.0

package/vendor/src/graphCanvasLitFlow/client/graphCanvasMinimap.ts

@@ -0,0 +1,261 @@
+import type { FlowCanvas } from 'lit-flow';
+
+type FlowNodeState = {
+  id: string;
+  position: { x: number; y: number };
+  width?: number;
+  height?: number;
+  measured?: { width?: number; height?: number };
+};
+
+type FlowInstanceLike = {
+  container: HTMLElement | null;
+  getState: () => { nodes: FlowNodeState[]; viewport: { x: number; y: number; zoom: number } };
+  getViewport: () => { x: number; y: number; zoom: number };
+  setViewport: (viewport: { x: number; y: number; zoom: number }) => void;
+  subscribe: (callback: () => void) => () => void;
+};
+
+type GraphBounds = {
+  minX: number;
+  minY: number;
+  width: number;
+  height: number;
+};
+
+type MinimapTransform = {
+  bounds: GraphBounds;
+  scale: number;
+  offsetX: number;
+  offsetY: number;
+};
+
+export type GraphCanvasMinimapOptions = {
+  width?: number;
+  height?: number;
+  theme?: 'dark' | 'light';
+};
+
+const minimapCleanups = new WeakMap<HTMLElement, () => void>();
+
+function nodeSize(node: FlowNodeState) {
+  return {
+    width: node.measured?.width ?? node.width ?? 240,
+    height: node.measured?.height ?? node.height ?? 96,
+  };
+}
+
+function computeGraphBounds(nodes: FlowNodeState[]): GraphBounds | null {
+  if (nodes.length === 0) {
+    return null;
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const node of nodes) {
+    const { width, height } = nodeSize(node);
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + width);
+    maxY = Math.max(maxY, node.position.y + height);
+  }
+
+  const pad = 28;
+  return {
+    minX: minX - pad,
+    minY: minY - pad,
+    width: Math.max(1, maxX - minX + pad * 2),
+    height: Math.max(1, maxY - minY + pad * 2),
+  };
+}
+
+function buildMinimapTransform(bounds: GraphBounds, width: number, height: number): MinimapTransform {
+  const scale = Math.min(width / bounds.width, height / bounds.height);
+  const offsetX = (width - bounds.width * scale) / 2;
+  const offsetY = (height - bounds.height * scale) / 2;
+  return { bounds, scale, offsetX, offsetY };
+}
+
+function graphToMinimap(transform: MinimapTransform, x: number, y: number) {
+  return {
+    x: transform.offsetX + (x - transform.bounds.minX) * transform.scale,
+    y: transform.offsetY + (y - transform.bounds.minY) * transform.scale,
+  };
+}
+
+function minimapToGraph(transform: MinimapTransform, x: number, y: number) {
+  return {
+    x: transform.bounds.minX + (x - transform.offsetX) / transform.scale,
+    y: transform.bounds.minY + (y - transform.offsetY) / transform.scale,
+  };
+}
+
+function createSvgElement<K extends keyof SVGElementTagNameMap>(
+  tag: K,
+  attrs: Record<string, string> = {},
+) {
+  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    element.setAttribute(key, value);
+  }
+  return element;
+}
+
+export function mountGraphCanvasMinimap(
+  host: HTMLElement,
+  getCanvas: () => FlowCanvas | null,
+  options: GraphCanvasMinimapOptions = {},
+): () => void {
+  minimapCleanups.get(host)?.();
+
+  const width = options.width ?? 168;
+  const height = options.height ?? 108;
+  host.replaceChildren();
+  host.classList.add('graph-canvas-minimap');
+  host.dataset.theme = options.theme ?? 'light';
+  host.setAttribute('role', 'img');
+  host.setAttribute('aria-label', 'Graph overview');
+
+  const svg = createSvgElement('svg', {
+    width: String(width),
+    height: String(height),
+    viewBox: `0 0 ${width} ${height}`,
+  });
+  const nodesLayer = createSvgElement('g', { class: 'graph-canvas-minimap-nodes' });
+  const viewportLayer = createSvgElement('rect', {
+    class: 'graph-canvas-minimap-viewport',
+    'pointer-events': 'none',
+  });
+  svg.appendChild(nodesLayer);
+  svg.appendChild(viewportLayer);
+  host.appendChild(svg);
+
+  let unsubscribe: (() => void) | null = null;
+  let rafId = 0;
+  let latestTransform: MinimapTransform | null = null;
+
+  const schedulePaint = () => {
+    window.cancelAnimationFrame(rafId);
+    rafId = window.requestAnimationFrame(paint);
+  };
+
+  const paint = () => {
+    const canvas = getCanvas();
+    const instance = canvas?.instance as FlowInstanceLike | undefined;
+    if (!instance) {
+      nodesLayer.replaceChildren();
+      viewportLayer.setAttribute('width', '0');
+      viewportLayer.setAttribute('height', '0');
+      return;
+    }
+
+    const { nodes } = instance.getState();
+    const bounds = computeGraphBounds(nodes);
+    if (!bounds) {
+      nodesLayer.replaceChildren();
+      viewportLayer.setAttribute('width', '0');
+      viewportLayer.setAttribute('height', '0');
+      return;
+    }
+
+    latestTransform = buildMinimapTransform(bounds, width, height);
+    nodesLayer.replaceChildren();
+
+    for (const node of nodes) {
+      const size = nodeSize(node);
+      const topLeft = graphToMinimap(latestTransform, node.position.x, node.position.y);
+      const rect = createSvgElement('rect', {
+        class: 'graph-canvas-minimap-node',
+        x: String(topLeft.x),
+        y: String(topLeft.y),
+        width: String(Math.max(2, size.width * latestTransform.scale)),
+        height: String(Math.max(2, size.height * latestTransform.scale)),
+        rx: '2',
+      });
+      nodesLayer.appendChild(rect);
+    }
+
+    const container = instance.container ?? canvas;
+    const viewport = instance.getViewport();
+    const zoom = viewport.zoom || 1;
+    const visibleX = -viewport.x / zoom;
+    const visibleY = -viewport.y / zoom;
+    const visibleWidth = container.clientWidth / zoom;
+    const visibleHeight = container.clientHeight / zoom;
+    const viewportTopLeft = graphToMinimap(latestTransform, visibleX, visibleY);
+    const viewportBottomRight = graphToMinimap(
+      latestTransform,
+      visibleX + visibleWidth,
+      visibleY + visibleHeight,
+    );
+
+    viewportLayer.setAttribute('x', String(viewportTopLeft.x));
+    viewportLayer.setAttribute('y', String(viewportTopLeft.y));
+    viewportLayer.setAttribute('width', String(Math.max(2, viewportBottomRight.x - viewportTopLeft.x)));
+    viewportLayer.setAttribute('height', String(Math.max(2, viewportBottomRight.y - viewportTopLeft.y)));
+  };
+
+  const bindInstance = () => {
+    unsubscribe?.();
+    unsubscribe = null;
+
+    const canvas = getCanvas();
+    const instance = canvas?.instance as FlowInstanceLike | undefined;
+    if (!instance?.subscribe) {
+      window.requestAnimationFrame(bindInstance);
+      return;
+    }
+
+    unsubscribe = instance.subscribe(schedulePaint);
+    schedulePaint();
+  };
+
+  const onPointerDown = (event: PointerEvent) => {
+    if (!latestTransform) {
+      return;
+    }
+    const canvas = getCanvas();
+    const instance = canvas?.instance as FlowInstanceLike | undefined;
+    if (!instance) {
+      return;
+    }
+
+    const rect = svg.getBoundingClientRect();
+    const localX = event.clientX - rect.left;
+    const localY = event.clientY - rect.top;
+    const graphPoint = minimapToGraph(latestTransform, localX, localY);
+    const container = instance.container ?? canvas;
+    const viewport = instance.getViewport();
+    const zoom = viewport.zoom || 1;
+
+    instance.setViewport({
+      x: container.clientWidth / 2 - graphPoint.x * zoom,
+      y: container.clientHeight / 2 - graphPoint.y * zoom,
+      zoom,
+    });
+    event.preventDefault();
+  };
+
+  svg.addEventListener('pointerdown', onPointerDown);
+
+  const cleanup = () => {
+    window.cancelAnimationFrame(rafId);
+    unsubscribe?.();
+    unsubscribe = null;
+    svg.removeEventListener('pointerdown', onPointerDown);
+    host.replaceChildren();
+  };
+
+  minimapCleanups.set(host, cleanup);
+  bindInstance();
+
+  return cleanup;
+}
+
+export function unmountGraphCanvasMinimap(host: HTMLElement) {
+  minimapCleanups.get(host)?.();
+  minimapCleanups.delete(host);
+}

package/vendor/src/graphCanvasLitFlow/client/graphCanvasSvgEdges.ts

@@ -0,0 +1,259 @@
+import {
+  buildGraphCanvasEdgeLabelHtml,
+  buildGraphCanvasEdgeStrokeStyle,
+} from '../graphCanvasEdgeLabels.mjs';
+import { buildGraphCanvasEdgeRoutes } from '../graphCanvasEdgeRouter.mjs';
+import type { FlowCanvas } from 'lit-flow';
+
+type GraphCanvasProjection = {
+  layoutDirection?: string;
+  nodes: Array<{ id: string; x?: number; y?: number; width?: number; height?: number }>;
+  edges: Array<{ id?: string; from: string; to: string; label?: string; rejected?: boolean; upstream?: boolean }>;
+};
+
+type SvgEdgeLayer = {
+  host: HTMLElement;
+  svg: SVGSVGElement;
+  labelsLayer: HTMLElement;
+  observer: MutationObserver | null;
+  paintKey: string;
+};
+
+const svgEdgeLayers = new WeakMap<FlowCanvas, SvgEdgeLayer>();
+
+function resolveGraphCanvasTheme(): 'dark' | 'light' {
+  return document.body?.dataset?.theme === 'dark' ? 'dark' : 'light';
+}
+
+function buildPaintKey(projection: GraphCanvasProjection, theme: 'dark' | 'light') {
+  return `${theme}:${projection.layoutDirection ?? 'LR'}:${projection.edges.length}:${projection.nodes.length}`;
+}
+
+function buildMarkerDefs(theme: 'dark' | 'light') {
+  const color = theme === 'dark' ? '#858585' : '#8b8b95';
+  return `
+    <defs>
+      <marker id="wg-edge-arrow" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto" markerUnits="userSpaceOnUse">
+        <path d="M0,0 L12,6 L0,12 Z" fill="${color}" />
+      </marker>
+      <marker id="wg-edge-arrow-upstream" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto" markerUnits="userSpaceOnUse">
+        <path d="M0,0 L12,6 L0,12 Z" fill="${color}" opacity="0.72" />
+      </marker>
+      <marker id="wg-edge-arrow-rejected" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto" markerUnits="userSpaceOnUse">
+        <path d="M0,0 L12,6 L0,12 Z" fill="${color}" opacity="0.42" />
+      </marker>
+    </defs>
+  `;
+}
+
+function paintSvgEdges(
+  layer: SvgEdgeLayer,
+  projection: GraphCanvasProjection,
+  theme: 'dark' | 'light',
+  force = false,
+) {
+  const paintKey = buildPaintKey(projection, theme);
+  if (!force && layer.paintKey === paintKey) {
+    return;
+  }
+
+  const routes = buildGraphCanvasEdgeRoutes(projection);
+  const paths = routes.map((route) => {
+    const stroke = buildGraphCanvasEdgeStrokeStyle(
+      { rejected: route.rejected, upstream: route.upstream },
+      theme,
+    );
+    const marker = route.rejected
+      ? 'url(#wg-edge-arrow-rejected)'
+      : route.upstream
+        ? 'url(#wg-edge-arrow-upstream)'
+        : 'url(#wg-edge-arrow)';
+    const dash = route.rejected
+      ? 'stroke-dasharray="6 4" opacity="0.42"'
+      : route.upstream
+        ? 'stroke-dasharray="5 4" opacity="0.72"'
+        : '';
+    return `<path class="graph-canvas-edge-path" data-edge-id="${route.id}" d="${route.d}" fill="none" stroke="${stroke.stroke}" stroke-width="${route.rejected ? 1.75 : 2.25}" marker-end="${marker}" ${dash} />`;
+  }).join('');
+
+  layer.svg.innerHTML = `${buildMarkerDefs(theme)}<g class="graph-canvas-edge-paths">${paths}</g>`;
+
+  layer.labelsLayer.replaceChildren();
+  for (const route of routes) {
+    if (!route.label) {
+      continue;
+    }
+    const labelHtml = buildGraphCanvasEdgeLabelHtml(route.label, theme, { rejected: route.rejected });
+    if (!labelHtml) {
+      continue;
+    }
+    const label = document.createElement('div');
+    label.className = 'graph-canvas-edge-label';
+    label.style.left = `${route.labelX}px`;
+    label.style.top = `${route.labelY}px`;
+    if (route.labelPlacement === 'start') {
+      label.style.transform = 'translate(8px, -50%)';
+    } else {
+      label.style.transform = 'translate(-50%, -50%)';
+    }
+    label.innerHTML = labelHtml;
+    layer.labelsLayer.appendChild(label);
+  }
+
+  layer.paintKey = paintKey;
+}
+
+function createSvgEdgeHost(): HTMLElement {
+  const host = document.createElement('div');
+  host.className = 'graph-canvas-wg-edges-layer';
+  host.dataset.testid = 'graph-canvas-svg-edges';
+  host.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible;';
+  return host;
+}
+
+function createSvgEdgeLayer(host: HTMLElement): SvgEdgeLayer {
+  host.replaceChildren();
+
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('class', 'graph-canvas-svg-edges-svg');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.style.cssText = 'position:absolute;inset:0;overflow:visible;display:block;';
+
+  const labelsLayer = document.createElement('div');
+  labelsLayer.className = 'graph-canvas-svg-edge-labels';
+  labelsLayer.style.cssText = 'position:absolute;inset:0;pointer-events:none;';
+
+  host.appendChild(svg);
+  host.appendChild(labelsLayer);
+
+  return {
+    host,
+    svg,
+    labelsLayer,
+    observer: null,
+    paintKey: '',
+  };
+}
+
+function getFlowViewport(canvas: FlowCanvas) {
+  return canvas.shadowRoot?.querySelector('.flow-viewport') ?? null;
+}
+
+function restoreSvgEdgeLayerIfMissing(canvas: FlowCanvas, projection: GraphCanvasProjection) {
+  const viewport = getFlowViewport(canvas);
+  const nodesLayer = viewport?.querySelector('.flow-nodes-layer');
+  if (!viewport || !nodesLayer) {
+    return null;
+  }
+
+  let layer = svgEdgeLayers.get(canvas);
+  if (layer?.host.isConnected && viewport.contains(layer.host)) {
+    return layer;
+  }
+
+  const host = createSvgEdgeHost();
+  viewport.insertBefore(host, nodesLayer);
+  layer = createSvgEdgeLayer(host);
+  svgEdgeLayers.set(canvas, layer);
+  paintSvgEdges(layer, projection, resolveGraphCanvasTheme(), true);
+  return layer;
+}
+
+function watchForSvgEdgeHostRemoval(canvas: FlowCanvas, projection: GraphCanvasProjection) {
+  const root = canvas.shadowRoot;
+  if (!root) {
+    return;
+  }
+
+  const existing = svgEdgeLayers.get(canvas);
+  existing?.observer?.disconnect();
+
+  let restoring = false;
+  const observer = new MutationObserver(() => {
+    if (restoring) {
+      return;
+    }
+    const viewport = getFlowViewport(canvas);
+    if (!viewport?.querySelector('.flow-nodes-layer')) {
+      return;
+    }
+    if (viewport.querySelector('.graph-canvas-wg-edges-layer')) {
+      return;
+    }
+
+    restoring = true;
+    try {
+      restoreSvgEdgeLayerIfMissing(canvas, projection);
+    } finally {
+      restoring = false;
+    }
+  });
+
+  observer.observe(root, { childList: true, subtree: true });
+
+  const layer = svgEdgeLayers.get(canvas);
+  if (layer) {
+    layer.observer = observer;
+  }
+}
+
+export function injectFlowCanvasNativeEdgeHide(canvas: FlowCanvas) {
+  const root = canvas.shadowRoot;
+  if (!root || root.querySelector('[data-wg-hide-native-edges]')) {
+    return;
+  }
+  const style = document.createElement('style');
+  style.setAttribute('data-wg-hide-native-edges', 'true');
+  style.textContent = `
+    .flow-edges-layer,
+    .flow-labels-overlay {
+      display: none !important;
+    }
+  `;
+  root.appendChild(style);
+}
+
+export function mountGraphCanvasSvgEdges(
+  canvas: FlowCanvas,
+  projection: GraphCanvasProjection,
+): () => void {
+  unmountGraphCanvasSvgEdges(canvas);
+
+  let attempts = 0;
+  const tryMount = () => {
+    const layer = restoreSvgEdgeLayerIfMissing(canvas, projection);
+    if (!layer) {
+      attempts += 1;
+      if (attempts < 120) {
+        window.requestAnimationFrame(tryMount);
+      }
+      return;
+    }
+    watchForSvgEdgeHostRemoval(canvas, projection);
+  };
+
+  tryMount();
+
+  return () => unmountGraphCanvasSvgEdges(canvas);
+}
+
+export function unmountGraphCanvasSvgEdges(canvas: FlowCanvas) {
+  const layer = svgEdgeLayers.get(canvas);
+  if (!layer) {
+    return;
+  }
+  layer.observer?.disconnect();
+  layer.host.remove();
+  svgEdgeLayers.delete(canvas);
+}
+
+export function repaintGraphCanvasSvgEdges(
+  canvas: FlowCanvas,
+  projection: GraphCanvasProjection,
+) {
+  const layer = restoreSvgEdgeLayerIfMissing(canvas, projection);
+  if (!layer) {
+    return;
+  }
+  paintSvgEdges(layer, projection, resolveGraphCanvasTheme(), true);
+}

package/vendor/src/graphCanvasLitFlow/client/graphCanvasTheme.css

@@ -0,0 +1,152 @@
+/* Work Graph overrides for lit-flow chrome inside backlog UI */
+
+.graph-canvas-lit-flow-host {
+  --wg-graph-node-bg: #ffffff;
+  --wg-graph-node-border: #dfe1e6;
+  --wg-graph-node-text: #172b4d;
+  --wg-graph-node-subtext: #5e6c84;
+  --wg-graph-node-hover-border: #c1c7d0;
+  --wg-graph-node-selected-border: #0052cc;
+  --wg-graph-node-rejected-bg: #f4f5f7;
+  --wg-graph-node-selected-bg: linear-gradient(180deg, #deebff 0%, #ffffff 72%);
+  --wg-graph-layer-bg: rgba(9, 30, 66, 0.05);
+  --wg-graph-layer-border: rgba(9, 30, 66, 0.1);
+  --wg-graph-badge-bg: #f4f5f7;
+  --wg-graph-badge-border: #dfe1e6;
+  --wg-graph-badge-done-bg: #e3fcef;
+  --wg-graph-badge-done-border: #abf5d1;
+  --wg-graph-badge-done-text: #006644;
+  --wg-graph-badge-doing-bg: #fff7d6;
+  --wg-graph-badge-doing-border: #f0c36d;
+  --wg-graph-badge-doing-text: #7a4f01;
+  --wg-graph-badge-ready-bg: #deebff;
+  --wg-graph-badge-ready-border: #85b8ff;
+  --wg-graph-badge-ready-text: #0052cc;
+  --wg-graph-badge-blocked-bg: #ffebe6;
+  --wg-graph-badge-blocked-border: #ffbdad;
+  --wg-graph-badge-blocked-text: #bf2600;
+  --wg-graph-tone-question: #0052cc;
+  --wg-graph-tone-analysis: #5b21b6;
+  --wg-graph-tone-decision: #9a6700;
+  --wg-graph-tone-work: #1a7f37;
+  --wg-graph-tone-architecture: #0052cc;
+}
+
+.graph-canvas-lit-flow-host[data-graph-theme='dark'],
+body[data-theme='dark'] .graph-canvas-lit-flow-host {
+  --wg-graph-node-bg: #252526;
+  --wg-graph-node-border: #3c3c3c;
+  --wg-graph-node-text: #e0e0e0;
+  --wg-graph-node-subtext: #9d9d9d;
+  --wg-graph-node-hover-border: #4a4a4a;
+  --wg-graph-node-selected-border: #0066ff;
+  --wg-graph-node-rejected-bg: #1f1f1f;
+  --wg-graph-node-selected-bg: linear-gradient(180deg, #1a2940 0%, #252526 72%);
+  --wg-graph-layer-bg: rgba(255, 255, 255, 0.05);
+  --wg-graph-layer-border: rgba(255, 255, 255, 0.08);
+  --wg-graph-badge-bg: #2d2d30;
+  --wg-graph-badge-border: #3c3c3c;
+  --wg-graph-badge-done-bg: #173b2b;
+  --wg-graph-badge-done-border: #2f6f4f;
+  --wg-graph-badge-done-text: #b5f2cf;
+  --wg-graph-badge-doing-bg: #3d2e12;
+  --wg-graph-badge-doing-border: #7a5a16;
+  --wg-graph-badge-doing-text: #ffd599;
+  --wg-graph-badge-ready-bg: #17324d;
+  --wg-graph-badge-ready-border: #24517a;
+  --wg-graph-badge-ready-text: #cce0ff;
+  --wg-graph-badge-blocked-bg: #4a1f1a;
+  --wg-graph-badge-blocked-border: #8f3328;
+  --wg-graph-badge-blocked-text: #ffb3b3;
+  --wg-graph-tone-question: #4d9fff;
+  --wg-graph-tone-analysis: #a371f7;
+  --wg-graph-tone-decision: #f0ad4e;
+  --wg-graph-tone-work: #2ea043;
+  --wg-graph-tone-architecture: #569cd6;
+}
+
+.graph-canvas-lit-flow-shell flow-canvas[theme='dark'] {
+  --flow-background-color: #1e1e1e;
+  --flow-grid-color: #3c3c3c;
+  --flow-edge-color: #858585;
+  --flow-edge-selected-color: #0066ff;
+  --flow-node-selected-border: #0066ff;
+}
+
+.graph-canvas-lit-flow-shell flow-canvas[theme='light'] {
+  --flow-background-color: #f4f5f7;
+  --flow-grid-color: #dfe1e6;
+  --flow-edge-color: #97a0af;
+  --flow-edge-selected-color: #0052cc;
+  --flow-node-selected-border: #0052cc;
+}
+
+.graph-canvas-lit-flow-host:focus-visible {
+  outline: 2px solid var(--accent, #0066ff);
+  outline-offset: 2px;
+}
+
+.graph-canvas-lit-flow-host .empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--muted, #9d9d9d);
+  font-size: 13px;
+}
+
+.graph-canvas-minimap-host {
+  bottom: 12px;
+  pointer-events: auto;
+  position: absolute;
+  right: 12px;
+  z-index: 4;
+}
+
+.graph-canvas-minimap {
+  background: var(--wg-graph-minimap-bg, #ffffff);
+  border: 1px solid var(--wg-graph-minimap-border, #dfe1e6);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  height: 108px;
+  opacity: 0.94;
+  overflow: hidden;
+  width: 168px;
+}
+
+.graph-canvas-minimap[data-theme='dark'] {
+  --wg-graph-minimap-bg: #252526;
+  --wg-graph-minimap-border: #3c3c3c;
+  --wg-graph-minimap-node-fill: #3c3c3c;
+  --wg-graph-minimap-node-stroke: #569cd6;
+  --wg-graph-minimap-viewport-stroke: #0066ff;
+  --wg-graph-minimap-viewport-fill: rgba(0, 102, 255, 0.14);
+}
+
+.graph-canvas-minimap[data-theme='light'] {
+  --wg-graph-minimap-bg: #ffffff;
+  --wg-graph-minimap-border: #dfe1e6;
+  --wg-graph-minimap-node-fill: #ebecf0;
+  --wg-graph-minimap-node-stroke: #97a0af;
+  --wg-graph-minimap-viewport-stroke: #0052cc;
+  --wg-graph-minimap-viewport-fill: rgba(0, 82, 204, 0.12);
+}
+
+.graph-canvas-minimap-node {
+  fill: var(--wg-graph-minimap-node-fill, #ebecf0);
+  stroke: var(--wg-graph-minimap-node-stroke, #97a0af);
+  stroke-width: 1;
+}
+
+.graph-canvas-minimap-viewport {
+  fill: var(--wg-graph-minimap-viewport-fill, rgba(0, 82, 204, 0.12));
+  stroke: var(--wg-graph-minimap-viewport-stroke, #0052cc);
+  stroke-width: 1.5;
+}
+
+.graph-canvas-svg-edge-labels .graph-canvas-edge-label {
+  pointer-events: none;
+  position: absolute;
+  white-space: nowrap;
+}