@buoy-gg/floating-tools-core 2.1.11 → 2.1.13

package/lib/module/icons/icon-data.js

@@ -1,2264 +1 @@
-"use strict";
-
-/**
- * Icon Data Definitions - PURE DATA, NO JSX
- *
- * Each icon is just data. The renderer transforms it to components.
- * Change colors here = changes everywhere.
- *
- * Coordinates are relative to center (0,0 = center of icon)
- * Sizes are based on 24x24 base size, scaled automatically.
- */
-
-// ===========================================
-// NETWORK ICON (Globe)
-// ===========================================
-
-export const NETWORK_ICON_COLOR = '#00D4FF'; // Cyan
-
-export const networkIconData = {
-  color: NETWORK_ICON_COLOR,
-  bgColor: 'rgba(8, 12, 21, 0.95)',
-  elements: [
-  // Main globe with glow
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 9,
-    fill: 'bg',
-    border: true,
-    borderWidth: 2,
-    glow: true,
-    glowRadius: 4
-  },
-  // Vertical meridian
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 9,
-    border: true,
-    borderWidth: 2,
-    scaleX: 0.45,
-    opacity: 0.6
-  },
-  // Horizontal equator
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 9,
-    border: true,
-    borderWidth: 2,
-    scaleX: 1.33,
-    scaleY: 0.6,
-    opacity: 0.6
-  }]
-};
-
-// ===========================================
-// ENV ICON (Laptop)
-// ===========================================
-
-export const ENV_ICON_COLOR = '#4AFF9F'; // Green
-
-// Keyboard layout
-const KEYBOARD_ROW_1 = [1, 3, 5, 7, 9, 11, 13, 15, 17];
-const KEYBOARD_ROW_2 = [2, 4, 6, 8, 10, 12, 14, 16];
-export const envIconData = {
-  color: ENV_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Base glow (behind keyboard)
-  {
-    type: 'rect',
-    x: -11,
-    y: 3,
-    width: 22,
-    height: 10,
-    borderRadius: 1,
-    fill: 'color',
-    opacity: 0.15
-  },
-  // Laptop base/keyboard
-  {
-    type: 'rect',
-    x: -10,
-    y: 4,
-    width: 20,
-    height: 8,
-    borderRadius: 1,
-    fill: 'color',
-    opacity: 0.85
-  },
-  // Keyboard top row keys
-  ...KEYBOARD_ROW_1.map(xPos => ({
-    type: 'rect',
-    x: -10 + xPos,
-    y: 4 + 1.5,
-    width: 1.5,
-    height: 1.2,
-    borderRadius: 0.2,
-    fill: '#000',
-    opacity: 0.3
-  })),
-  // Keyboard bottom row keys
-  ...KEYBOARD_ROW_2.map(xPos => ({
-    type: 'rect',
-    x: -10 + xPos,
-    y: 4 + 3.2,
-    width: 1.5,
-    height: 1.2,
-    borderRadius: 0.2,
-    fill: '#000',
-    opacity: 0.3
-  })),
-  // Spacebar
-  {
-    type: 'rect',
-    x: -10 + 5,
-    y: 4 + 5.5,
-    width: 10,
-    height: 1,
-    borderRadius: 0.2,
-    fill: '#000',
-    opacity: 0.25
-  },
-  // Laptop screen
-  {
-    type: 'rect',
-    x: -9,
-    y: -10,
-    width: 18,
-    height: 12,
-    borderRadius: 1,
-    fill: 'color',
-    opacity: 0.9
-  },
-  // Screen inner (dark area)
-  {
-    type: 'rect',
-    x: -8,
-    y: -9,
-    width: 16,
-    height: 10,
-    borderRadius: 0.5,
-    fill: '#000',
-    opacity: 0.5
-  },
-  // Code line 1
-  {
-    type: 'rect',
-    x: -7,
-    y: -8,
-    width: 10,
-    height: 0.5,
-    fill: 'color',
-    opacity: 0.6
-  },
-  // Code line 2
-  {
-    type: 'rect',
-    x: -7,
-    y: -6,
-    width: 7,
-    height: 0.5,
-    fill: 'color',
-    opacity: 0.6
-  },
-  // Code line 3
-  {
-    type: 'rect',
-    x: -7,
-    y: -4,
-    width: 4,
-    height: 0.5,
-    fill: 'color',
-    opacity: 0.6
-  },
-  // Power indicator
-  {
-    type: 'rect',
-    x: -1,
-    y: 10,
-    width: 2,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.8
-  },
-  // Screen dot 1
-  {
-    type: 'rect',
-    x: -9 + 0.3 * 18,
-    y: -10 + 0.3 * 12,
-    width: 1,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.4
-  },
-  // Screen dot 2
-  {
-    type: 'rect',
-    x: -9 + 0.7 * 18,
-    y: -10 + 0.3 * 12,
-    width: 1,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.4
-  },
-  // Screen dot 3
-  {
-    type: 'rect',
-    x: -9 + 0.5 * 18,
-    y: -10 + 0.7 * 12,
-    width: 1,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.4
-  }]
-};
-
-// ===========================================
-// STORAGE ICON (Database Stack)
-// ===========================================
-
-export const STORAGE_ICON_COLOR = '#FFB800'; // Gold/Amber (database/storage)
-
-// Cylinder positions (relative to center, 24x24 base)
-const CYLINDER_POSITIONS = [{
-  y: -6,
-  opacity: 0.9
-},
-// Top cylinder
-{
-  y: -1.2,
-  opacity: 0.8
-},
-// Middle cylinder
-{
-  y: 3.6,
-  opacity: 0.7
-} // Bottom cylinder
-];
-export const storageIconData = {
-  color: STORAGE_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // === CYLINDER 1 (Top) ===
-  // Shadow/glow
-  {
-    type: 'rect',
-    x: -9,
-    y: -7,
-    width: 18,
-    height: 8,
-    borderRadius: 4,
-    fill: 'color',
-    opacity: 0.1
-  },
-  // Main body
-  {
-    type: 'rect',
-    x: -8,
-    y: -6,
-    width: 16,
-    height: 6,
-    borderRadius: 3,
-    fill: 'color',
-    opacity: 0.9
-  },
-  // Top highlight
-  {
-    type: 'rect',
-    x: -7,
-    y: -5.5,
-    width: 14,
-    height: 2,
-    borderRadius: 1,
-    fill: '#fff',
-    opacity: 0.15
-  },
-  // Edge glow (border)
-  {
-    type: 'rect',
-    x: -8,
-    y: -6,
-    width: 16,
-    height: 6,
-    borderRadius: 3,
-    border: true,
-    borderWidth: 0.5,
-    opacity: 0.3
-  },
-  // === CYLINDER 2 (Middle) ===
-  // Shadow/glow
-  {
-    type: 'rect',
-    x: -9,
-    y: -2.2,
-    width: 18,
-    height: 8,
-    borderRadius: 4,
-    fill: 'color',
-    opacity: 0.1
-  },
-  // Main body
-  {
-    type: 'rect',
-    x: -8,
-    y: -1.2,
-    width: 16,
-    height: 6,
-    borderRadius: 3,
-    fill: 'color',
-    opacity: 0.8
-  },
-  // Top highlight
-  {
-    type: 'rect',
-    x: -7,
-    y: -0.7,
-    width: 14,
-    height: 2,
-    borderRadius: 1,
-    fill: '#fff',
-    opacity: 0.15
-  },
-  // Edge glow (border)
-  {
-    type: 'rect',
-    x: -8,
-    y: -1.2,
-    width: 16,
-    height: 6,
-    borderRadius: 3,
-    border: true,
-    borderWidth: 0.5,
-    opacity: 0.3
-  },
-  // === CYLINDER 3 (Bottom) ===
-  // Shadow/glow
-  {
-    type: 'rect',
-    x: -9,
-    y: 2.6,
-    width: 18,
-    height: 8,
-    borderRadius: 4,
-    fill: 'color',
-    opacity: 0.1
-  },
-  // Main body
-  {
-    type: 'rect',
-    x: -8,
-    y: 3.6,
-    width: 16,
-    height: 6,
-    borderRadius: 3,
-    fill: 'color',
-    opacity: 0.7
-  },
-  // Top highlight
-  {
-    type: 'rect',
-    x: -7,
-    y: 4.1,
-    width: 14,
-    height: 2,
-    borderRadius: 1,
-    fill: '#fff',
-    opacity: 0.15
-  },
-  // Edge glow (border)
-  {
-    type: 'rect',
-    x: -8,
-    y: 3.6,
-    width: 16,
-    height: 6,
-    borderRadius: 3,
-    border: true,
-    borderWidth: 0.5,
-    opacity: 0.3
-  },
-  // === CONNECTION LINES ===
-  // Line 1 (between cylinder 1 and 2)
-  {
-    type: 'rect',
-    x: -0.25,
-    y: -3.6,
-    width: 0.5,
-    height: 6,
-    fill: 'color',
-    opacity: 0.3
-  },
-  // Line 2 (between cylinder 2 and 3)
-  {
-    type: 'rect',
-    x: -0.25,
-    y: 1.2,
-    width: 0.5,
-    height: 6,
-    fill: 'color',
-    opacity: 0.3
-  },
-  // === DATA DOTS ===
-  // Dot 1 (on cylinder 1)
-  {
-    type: 'rect',
-    x: -0.5,
-    y: -3.5,
-    width: 1,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.6
-  },
-  // Dot 2 (on cylinder 2)
-  {
-    type: 'rect',
-    x: -0.5,
-    y: 1.3,
-    width: 1,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.6
-  },
-  // Dot 3 (on cylinder 3)
-  {
-    type: 'rect',
-    x: -0.5,
-    y: 6.1,
-    width: 1,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.6
-  }]
-};
-
-// ===========================================
-// ROUTES ICON PARTS (for testing/iteration)
-// ===========================================
-// Breaking down the route icon into smaller testable pieces
-
-export const ROUTES_ICON_COLOR = '#FF9F1C'; // Orange (matching route-events theme)
-
-// Part 1: Single Map Pin (teardrop shape)
-// Circle for rounded top + triangle for point + inner dot
-export const routePinIconData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Rounded top of teardrop
-  {
-    type: 'circle',
-    cx: 0,
-    cy: -2,
-    r: 5,
-    fill: 'color',
-    opacity: 1
-  },
-  // Teardrop point extending down
-  {
-    type: 'triangle',
-    x: 0,
-    y: 4,
-    size: 5,
-    direction: 'down',
-    fill: 'color',
-    opacity: 1
-  },
-  // Inner hole/dot (dark for contrast)
-  {
-    type: 'circle',
-    cx: 0,
-    cy: -2,
-    r: 2,
-    fill: 'bg',
-    opacity: 1
-  }]
-};
-
-// ===========================================
-// BUTTON/CURVE TEST VARIATIONS
-// ===========================================
-// Testing different approaches to create S-curve using border tricks
-// Think of it as buttons with selective borders visible
-
-// ===========================================
-// STRETCHED BUTTON SHAPES - Different aspect ratios!
-// ===========================================
-// Using circles with scaleX/scaleY to create stretched ovals
-// And rects with borderRadius for pill/button shapes
-
-// Test A: Wide oval - bottom portion (wide smile)
-export const curveTestAData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 6,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 3,
-    scaleX: 1.5,
-    scaleY: 0.8,
-    opacity: 1
-  }]
-};
-
-// Test B: Tall oval - stretched vertically
-export const curveTestBData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 6,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 3,
-    scaleX: 0.6,
-    scaleY: 1.4,
-    opacity: 1
-  }]
-};
-
-// Test C: Wide pill shape using rect with full borderRadius (REFERENCE)
-export const curveTestCData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'rect',
-    x: -10,
-    y: -4,
-    width: 20,
-    height: 8,
-    borderRadius: 4,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 3,
-    opacity: 1
-  }]
-};
-
-// Test D: Wide pill - THINNER border (1.5px)
-export const curveTestDData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'rect',
-    x: -10,
-    y: -4,
-    width: 20,
-    height: 8,
-    borderRadius: 4,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  }]
-};
-
-// ===========================================
-// HALF-PILL SHAPES - Position pill so half is off-screen!
-// ===========================================
-// The key insight: position a wide pill so its LEFT or RIGHT half
-// extends beyond the icon bounds, showing only the curved end!
-
-// Test E: LEFT curved end only (pill extends off RIGHT side)
-// Shows just the left rounded cap
-export const curveTestEData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Pill positioned so right half is off-screen, only left curve shows
-  {
-    type: 'rect',
-    x: -10,
-    y: -4,
-    width: 20,
-    height: 8,
-    borderRadius: 4,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 2,
-    opacity: 1
-  }]
-};
-
-// Test F: RIGHT curved end only (pill extends off LEFT side)
-// Shows just the right rounded cap
-export const curveTestFData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Pill positioned so left half is off-screen, only right curve shows
-  {
-    type: 'rect',
-    x: -10,
-    y: -4,
-    width: 20,
-    height: 8,
-    borderRadius: 4,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 2,
-    opacity: 1
-  }]
-};
-
-// Test G: LEFT curve - thinner (1.5px border)
-export const curveTestGData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'rect',
-    x: -6,
-    y: -3,
-    width: 16,
-    height: 6,
-    borderRadius: 3,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  }]
-};
-
-// Test H: RIGHT curve - thinner (1.5px border)  
-// Positioned far left so only right cap shows
-export const curveTestHData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'rect',
-    x: -22,
-    y: -3,
-    width: 16,
-    height: 6,
-    borderRadius: 3,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  }]
-};
-
-// Test I: Two half-curves making an S - LEFT cap top, RIGHT cap bottom
-export const curveTestIData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Top: show LEFT curve (pill extends right, off-screen)
-  {
-    type: 'rect',
-    x: -8,
-    y: -7,
-    width: 20,
-    height: 6,
-    borderRadius: 3,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  },
-  // Bottom: show RIGHT curve (pill extends left, off-screen)
-  {
-    type: 'rect',
-    x: -12,
-    y: 1,
-    width: 20,
-    height: 6,
-    borderRadius: 3,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  }]
-};
-
-// Test J: S-curve - skinnier pills (4px height)
-export const curveTestJData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Top LEFT curve
-  {
-    type: 'rect',
-    x: -8,
-    y: -6,
-    width: 20,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  },
-  // Bottom RIGHT curve
-  {
-    type: 'rect',
-    x: -12,
-    y: 1,
-    width: 20,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  }]
-};
-
-// Test K: S-curve - even skinnier (3px height), 1px border
-export const curveTestKData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Top LEFT curve - ultra thin
-  {
-    type: 'rect',
-    x: -8,
-    y: -5,
-    width: 20,
-    height: 4,
-    borderRadius: 2,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1,
-    opacity: 1
-  },
-  // Bottom RIGHT curve - ultra thin
-  {
-    type: 'rect',
-    x: -12,
-    y: 1,
-    width: 20,
-    height: 4,
-    borderRadius: 2,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1,
-    opacity: 1
-  }]
-};
-
-// Test L: S-curve - wider gap between curves
-export const curveTestLData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Top LEFT curve - higher up
-  {
-    type: 'rect',
-    x: -6,
-    y: -8,
-    width: 20,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  },
-  // Bottom RIGHT curve - lower down
-  {
-    type: 'rect',
-    x: -14,
-    y: 3,
-    width: 20,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  }]
-};
-
-// Test M: S-curve - tighter together
-export const curveTestMData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Top LEFT curve
-  {
-    type: 'rect',
-    x: -7,
-    y: -5,
-    width: 18,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  },
-  // Bottom RIGHT curve - closer
-  {
-    type: 'rect',
-    x: -11,
-    y: 0,
-    width: 18,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  }]
-};
-
-// Test N: S-curve with 2px border
-export const curveTestNData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'rect',
-    x: -8,
-    y: -6,
-    width: 20,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 2,
-    opacity: 1
-  }, {
-    type: 'rect',
-    x: -12,
-    y: 1,
-    width: 20,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 2,
-    opacity: 1
-  }]
-};
-
-// Test O: S-curve with 1px border (thinnest)
-export const curveTestOData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'rect',
-    x: -8,
-    y: -6,
-    width: 20,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1,
-    opacity: 1
-  }, {
-    type: 'rect',
-    x: -12,
-    y: 1,
-    width: 20,
-    height: 5,
-    borderRadius: 2.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1,
-    opacity: 1
-  }]
-};
-
-// Test P: S-curve with taller pills (more curve visible)
-export const curveTestPData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'rect',
-    x: -8,
-    y: -7,
-    width: 20,
-    height: 7,
-    borderRadius: 3.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  }, {
-    type: 'rect',
-    x: -12,
-    y: 0,
-    width: 20,
-    height: 7,
-    borderRadius: 3.5,
-    fill: 'transparent',
-    border: true,
-    borderWidth: 1.5,
-    opacity: 1
-  }]
-};
-
-// Original Part 2: S-Curve Path (keeping for reference)
-export const routePathIconData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [{
-    type: 'smootharc',
-    cx: -3,
-    cy: -2,
-    r: 5,
-    stroke: 'color',
-    strokeWidth: 3,
-    opacity: 1,
-    portion: 'bottom'
-  }, {
-    type: 'smootharc',
-    cx: 3,
-    cy: 2,
-    r: 5,
-    stroke: 'color',
-    strokeWidth: 3,
-    opacity: 1,
-    portion: 'top'
-  }]
-};
-
-// Part 3: Inner Dot only (for testing)
-export const routeDotIconData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // Outer ring for reference
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 8,
-    fill: 'color',
-    opacity: 0.3
-  },
-  // Inner dot
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 3,
-    fill: 'bg',
-    opacity: 1
-  }]
-};
-
-// Part 4: Two Pins without path (positioning test)
-export const routeTwoPinsIconData = {
-  color: ROUTES_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // === BOTTOM-LEFT PIN ===
-  {
-    type: 'circle',
-    cx: -6,
-    cy: 4,
-    r: 3.5,
-    fill: 'color',
-    opacity: 1
-  }, {
-    type: 'triangle',
-    x: -6,
-    y: 8.5,
-    size: 3.5,
-    direction: 'down',
-    fill: 'color',
-    opacity: 1
-  }, {
-    type: 'circle',
-    cx: -6,
-    cy: 4,
-    r: 1.4,
-    fill: 'bg',
-    opacity: 1
-  },
-  // === TOP-RIGHT PIN ===
-  {
-    type: 'circle',
-    cx: 6,
-    cy: -5,
-    r: 3.5,
-    fill: 'color',
-    opacity: 1
-  }, {
-    type: 'triangle',
-    x: 6,
-    y: -0.5,
-    size: 3.5,
-    direction: 'down',
-    fill: 'color',
-    opacity: 1
-  }, {
-    type: 'circle',
-    cx: 6,
-    cy: -5,
-    r: 1.4,
-    fill: 'bg',
-    opacity: 1
-  }]
-};
-
-// ===========================================
-// ROUTES ICON (Custom satellite/network style)
-// ===========================================
-// Custom designed icon with satellite/orbit motif
-// Uses orange (#FF9F1C) as primary color to match route-events theme
-
-export const routesIconData = {
-  color: '#FF9F1C',
-  // Orange - matching route-events theme
-  bgColor: '#0a0a0f',
-  elements: [
-  // Main orbital circle (teal becomes orange)
-  {
-    type: 'circle',
-    cx: 2.846049894151541,
-    cy: 1.2649110640673518,
-    r: 4.110960958218893,
-    fill: '#FF9F1C',
-    // Was #00e7eb, now orange
-    scaleY: 0.94
-  },
-  // Satellite node 1
-  {
-    type: 'circle',
-    cx: 6.00832755431992,
-    cy: 6.324555320336758,
-    r: 4,
-    fill: 'color'
-  },
-  // Satellite node 2
-  {
-    type: 'circle',
-    cx: 6.324555320336758,
-    cy: -6.324555320336758,
-    r: 3.794733192202055,
-    fill: 'color',
-    scaleY: 0.97
-  },
-  // Inner dot on satellite 2 (uses bg color)
-  {
-    type: 'circle',
-    cx: 6.324555320336758,
-    cy: -6.00832755431992,
-    r: 1.5811388300841895,
-    fill: 'bg'
-  },
-  // Satellite node 3
-  {
-    type: 'circle',
-    cx: -6.324555320336758,
-    cy: 3.478505426185217,
-    r: 3.794733192202055,
-    fill: 'color',
-    scaleY: 0.97
-  },
-  // Inner dot on satellite 3 (uses bg color)
-  {
-    type: 'circle',
-    cx: -6.324555320336758,
-    cy: 3.478505426185217,
-    r: 1.5811388300841895,
-    fill: 'bg'
-  },
-  // Connection line 1
-  {
-    type: 'line',
-    x1: -8.854377448471462,
-    y1: 4.743416490252569,
-    x2: -6.00832755431992,
-    y2: 9.803060746521975,
-    stroke: 'color',
-    strokeWidth: 1.5
-  },
-  // Connection line 2
-  {
-    type: 'line',
-    x1: -3.162277660168379,
-    y1: 3.162277660168379,
-    x2: -6.640783086353596,
-    y2: 9.803060746521975,
-    stroke: 'color',
-    strokeWidth: 1.8
-  },
-  // Junction rect 1
-  {
-    type: 'rect',
-    x: -7.273238618387272,
-    y: 6.324555320336758,
-    width: 1.8973665961010275,
-    height: 2.2135943621178655,
-    fill: 'color'
-  },
-  // Central line (uses bg color)
-  {
-    type: 'line',
-    x1: 1.2649110640673518,
-    y1: 1.2649110640673518,
-    x2: 9.1706052144883,
-    y2: 1.2649110640673518,
-    stroke: 'bg',
-    strokeWidth: 2.4
-  },
-  // Connection line 3
-  {
-    type: 'line',
-    x1: 9.486832980505138,
-    y1: -6.640783086353596,
-    x2: 6.00832755431992,
-    y2: 0,
-    stroke: 'color',
-    strokeWidth: 1.8
-  },
-  // Connection line 4
-  {
-    type: 'line',
-    x1: 3.478505426185217,
-    y1: -5.375872022286244,
-    x2: 6.640783086353596,
-    y2: 0,
-    stroke: 'color',
-    strokeWidth: 1.5
-  },
-  // Junction rect 2
-  {
-    type: 'rect',
-    x: 5.692099788303082,
-    y: -3.478505426185217,
-    width: 1.8973665961010275,
-    height: 2.2135943621178655,
-    fill: 'color'
-  },
-  // Base rect (uses bg color)
-  {
-    type: 'rect',
-    x: 2.846049894151541,
-    y: 10,
-    width: 6,
-    height: 4,
-    fill: 'bg'
-  },
-  // Horizontal divider line (uses bg color)
-  {
-    type: 'line',
-    x1: -0.31622776601683794,
-    y1: 6.324555320336758,
-    x2: 7.58946638440411,
-    y2: 6.324555320336758,
-    stroke: 'bg',
-    strokeWidth: 2.3
-  },
-  // Bottom bar
-  {
-    type: 'rect',
-    x: -2.5298221281347035,
-    y: 7.5,
-    width: 7.273238618387272,
-    height: 2.5,
-    fill: 'color'
-  }]
-};
-
-// ===========================================
-// QUERY ICON (Query States Network)
-// ===========================================
-
-export const QUERY_ICON_COLOR = '#FF3366'; // Red/Pink (React Query brand)
-
-// Query state colors - MUST match packages/react-query/src/react-query/components/QuerySelector.tsx
-const QUERY_STATES = {
-  fresh: '#10B981',
-  // Green - data is current
-  fetching: '#3B82F6',
-  // Blue - loading
-  stale: '#F59E0B',
-  // Yellow/Amber - needs refresh
-  paused: '#8B5CF6',
-  // Purple - paused
-  inactive: '#6B7280' // Gray - no observers
-};
-export const queryIconData = {
-  color: QUERY_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // === CONNECTION LINES (using line elements - much cleaner!) ===
-  // Center to Fresh (top) - green
-  {
-    type: 'line',
-    x1: 0,
-    y1: 0,
-    x2: 0,
-    y2: -8,
-    stroke: QUERY_STATES.fresh,
-    strokeWidth: 1.2,
-    opacity: 0.5
-  },
-  // Center to Fetching (top-right) - cyan
-  {
-    type: 'line',
-    x1: 0,
-    y1: 0,
-    x2: 7.6,
-    y2: -2.5,
-    stroke: QUERY_STATES.fetching,
-    strokeWidth: 1.2,
-    opacity: 0.5
-  },
-  // Center to Stale (bottom-right) - yellow
-  {
-    type: 'line',
-    x1: 0,
-    y1: 0,
-    x2: 4.7,
-    y2: 6.5,
-    stroke: QUERY_STATES.stale,
-    strokeWidth: 1.2,
-    opacity: 0.5
-  },
-  // Center to Paused (bottom-left) - purple
-  {
-    type: 'line',
-    x1: 0,
-    y1: 0,
-    x2: -4.7,
-    y2: 6.5,
-    stroke: QUERY_STATES.paused,
-    strokeWidth: 1.2,
-    opacity: 0.5
-  },
-  // Center to Inactive (top-left) - gray
-  {
-    type: 'line',
-    x1: 0,
-    y1: 0,
-    x2: -7.6,
-    y2: -2.5,
-    stroke: QUERY_STATES.inactive,
-    strokeWidth: 1.2,
-    opacity: 0.5
-  },
-  // === STATE NODES (5 query states in pentagon) ===
-  // FRESH (top) - Green
-  {
-    type: 'circle',
-    cx: 0,
-    cy: -8,
-    r: 2.2,
-    fill: QUERY_STATES.fresh,
-    opacity: 0.2
-  }, {
-    type: 'circle',
-    cx: 0,
-    cy: -8,
-    r: 1.6,
-    fill: QUERY_STATES.fresh,
-    opacity: 0.9
-  },
-  // FETCHING (top-right) - Cyan
-  {
-    type: 'circle',
-    cx: 7.6,
-    cy: -2.5,
-    r: 2.2,
-    fill: QUERY_STATES.fetching,
-    opacity: 0.2
-  }, {
-    type: 'circle',
-    cx: 7.6,
-    cy: -2.5,
-    r: 1.6,
-    fill: QUERY_STATES.fetching,
-    opacity: 0.9
-  },
-  // STALE (bottom-right) - Yellow
-  {
-    type: 'circle',
-    cx: 4.7,
-    cy: 6.5,
-    r: 2.2,
-    fill: QUERY_STATES.stale,
-    opacity: 0.2
-  }, {
-    type: 'circle',
-    cx: 4.7,
-    cy: 6.5,
-    r: 1.6,
-    fill: QUERY_STATES.stale,
-    opacity: 0.9
-  },
-  // PAUSED (bottom-left) - Purple
-  {
-    type: 'circle',
-    cx: -4.7,
-    cy: 6.5,
-    r: 2.2,
-    fill: QUERY_STATES.paused,
-    opacity: 0.2
-  }, {
-    type: 'circle',
-    cx: -4.7,
-    cy: 6.5,
-    r: 1.6,
-    fill: QUERY_STATES.paused,
-    opacity: 0.9
-  },
-  // INACTIVE (top-left) - Gray
-  {
-    type: 'circle',
-    cx: -7.6,
-    cy: -2.5,
-    r: 2.2,
-    fill: QUERY_STATES.inactive,
-    opacity: 0.2
-  }, {
-    type: 'circle',
-    cx: -7.6,
-    cy: -2.5,
-    r: 1.6,
-    fill: QUERY_STATES.inactive,
-    opacity: 0.9
-  },
-  // === CENTER NODE (Your Query - cycles through states) ===
-  // Outer glow ring
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 4.5,
-    fill: 'color',
-    opacity: 0.1
-  },
-  // Main center (React Query pink)
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 3,
-    fill: 'color',
-    opacity: 0.95
-  },
-  // Inner highlight
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 0,
-    r: 1.3,
-    fill: '#fff',
-    opacity: 0.35
-  }]
-};
-
-// ===========================================
-// HIGHLIGHTER ICON (Custom highlight marker style)
-// ===========================================
-// Custom designed highlighter icon for render tracking
-// Uses emerald green (#10B981) to match highlight-updates theme
-
-export const HIGHLIGHTER_ICON_COLOR = '#10B981'; // Emerald green (same as highlight-updates)
-// Legacy alias for backward compatibility
-export const RENDERS_ICON_COLOR = HIGHLIGHTER_ICON_COLOR;
-export const highlighterIconData = {
-  color: HIGHLIGHTER_ICON_COLOR,
-  bgColor: '#0a0a0f',
-  elements: [
-  // Decorative diamond shape
-  {
-    type: 'rect',
-    x: -9.1706052144883,
-    y: 5.692099788303082,
-    width: 3.478505426185217,
-    height: 3.478505426185217,
-    fill: 'color',
-    rotation: 45
-  },
-  // Base block (uses bg color)
-  {
-    type: 'rect',
-    x: -10.119288512538814,
-    y: 8.538149682454623,
-    width: 6,
-    height: 4,
-    fill: 'bg'
-  },
-  // Horizontal accent line
-  {
-    type: 'line',
-    x1: -10.119288512538814,
-    y1: 7.905694150420948,
-    x2: -6.640783086353596,
-    y2: 7.905694150420948,
-    stroke: 'color',
-    strokeWidth: 1.5
-  },
-  // Diagonal stroke 1
-  {
-    type: 'line',
-    x1: -6.957010852370434,
-    y1: 5.059644256269407,
-    x2: -2.846049894151541,
-    y2: 5.059644256269407,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    rotation: 44
-  },
-  // Cross stroke 1
-  {
-    type: 'line',
-    x1: -5.91,
-    y1: -4.11,
-    x2: 7.27,
-    y2: -4.33,
-    stroke: 'color',
-    strokeWidth: 2.1,
-    rotation: 145
-  },
-  // Cross stroke 2
-  {
-    type: 'line',
-    x1: -1.56,
-    y1: 1.05,
-    x2: 10.435516278555651,
-    y2: -2.846049894151541,
-    stroke: 'color',
-    strokeWidth: 2.1,
-    rotation: 145
-  },
-  // Diagonal stroke 2
-  {
-    type: 'line',
-    x1: 4.110960958218893,
-    y1: -6.640783086353596,
-    x2: 9.486832980505138,
-    y2: -6.640783086353596,
-    stroke: 'color',
-    strokeWidth: 2.2,
-    rotation: 44
-  },
-  // Main highlight stroke
-  {
-    type: 'line',
-    x1: -4.743416490252569,
-    y1: -1.5811388300841895,
-    x2: 1.5811388300841895,
-    y2: 4.743416490252569,
-    stroke: 'color',
-    strokeWidth: 2.9
-  },
-  // Accent stroke 1
-  {
-    type: 'line',
-    x1: -6.957010852370434,
-    y1: 1.2649110640673518,
-    x2: -2.2135943621178655,
-    y2: 2.2135943621178655,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    rotation: 77
-  },
-  // Accent stroke 2
-  {
-    type: 'line',
-    x1: -1.2649110640673518,
-    y1: 0.9486832980505138,
-    x2: -2.5298221281347035,
-    y2: 7.905694150420948,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    rotation: 77
-  },
-  // Central highlighter body
-  {
-    type: 'rect',
-    x: -4.427188724235731,
-    y: 0.9486832980505138,
-    width: 3.794733192202055,
-    height: 4.110960958218893,
-    fill: 'color'
-  },
-  // Diagonal accent 1
-  {
-    type: 'line',
-    x1: -7.58946638440411,
-    y1: 1.8973665961010275,
-    x2: -0.9486832980505138,
-    y2: 1.8973665961010275,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    rotation: -48
-  },
-  // Diagonal accent 2
-  {
-    type: 'line',
-    x1: -5.375872022286244,
-    y1: 4.110960958218893,
-    x2: 1.2649110640673518,
-    y2: 4.110960958218893,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    rotation: -48
-  }]
-};
-
-// Legacy alias for backward compatibility
-export const rendersIconData = highlighterIconData;
-
-// ===========================================
-// BENCHMARK ICON (Stopwatch)
-// ===========================================
-
-export const BENCHMARK_ICON_COLOR = '#F59E0B'; // Amber/Orange
-
-export const benchmarkIconData = {
-  color: BENCHMARK_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // === STOPWATCH BODY ===
-  // Outer circle (stopwatch face)
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 1,
-    r: 7,
-    border: true,
-    borderWidth: 1.5,
-    opacity: 0.9
-  },
-  // Inner glow
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 1,
-    r: 5,
-    fill: 'color',
-    opacity: 0.15
-  },
-  // === BUTTON (top) ===
-  {
-    type: 'rect',
-    x: -2,
-    y: -10,
-    width: 4,
-    height: 3,
-    borderRadius: 1,
-    fill: 'color',
-    opacity: 0.9
-  },
-  // Crown/stem connecting button to clock
-  {
-    type: 'rect',
-    x: -1,
-    y: -7.5,
-    width: 2,
-    height: 2,
-    fill: 'color',
-    opacity: 0.9
-  },
-  // === STOPWATCH HAND ===
-  // Hand pointing to ~10 o'clock position
-  {
-    type: 'rect',
-    x: -0.75,
-    y: -4,
-    width: 1.5,
-    height: 5,
-    borderRadius: 1,
-    fill: 'color',
-    opacity: 0.9,
-    rotation: -45,
-    rotateFromCenter: true
-  },
-  // === CENTER DOT ===
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 1,
-    r: 1,
-    fill: 'color',
-    opacity: 0.9
-  },
-  // === TICK MARKS (hour indicators) ===
-  // 12 o'clock
-  {
-    type: 'rect',
-    x: -0.5,
-    y: -5,
-    width: 1,
-    height: 2,
-    fill: 'color',
-    opacity: 0.5
-  },
-  // 3 o'clock
-  {
-    type: 'rect',
-    x: 4,
-    y: 0.5,
-    width: 2,
-    height: 1,
-    fill: 'color',
-    opacity: 0.5
-  },
-  // 6 o'clock
-  {
-    type: 'rect',
-    x: -0.5,
-    y: 5,
-    width: 1,
-    height: 2,
-    fill: 'color',
-    opacity: 0.5
-  },
-  // 9 o'clock
-  {
-    type: 'rect',
-    x: -6,
-    y: 0.5,
-    width: 2,
-    height: 1,
-    fill: 'color',
-    opacity: 0.5
-  }]
-};
-
-// ===========================================
-// SENTRY ICON (Bug)
-// ===========================================
-
-export const SENTRY_ICON_COLOR = '#FF3366'; // Red/Pink (Sentry brand)
-
-export const sentryIconData = {
-  color: SENTRY_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // === BUG GLOW (behind) ===
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 1,
-    r: 8,
-    fill: 'color',
-    opacity: 0.15
-  },
-  // === BUG BODY ===
-  // Main oval body
-  {
-    type: 'rect',
-    x: -6,
-    y: -4,
-    width: 12,
-    height: 14,
-    borderRadius: 6,
-    fill: 'color',
-    opacity: 0.9
-  },
-  // === BUG HEAD ===
-  {
-    type: 'rect',
-    x: -4,
-    y: -9,
-    width: 8,
-    height: 6,
-    borderRadius: 4,
-    fill: 'color',
-    opacity: 0.95
-  },
-  // === ANTENNAE ===
-  // Left antenna
-  {
-    type: 'rect',
-    x: -3,
-    y: -12,
-    width: 0.8,
-    height: 4,
-    fill: 'color',
-    opacity: 0.7,
-    rotation: -15
-  }, {
-    type: 'circle',
-    cx: -4,
-    cy: -12,
-    r: 1.2,
-    fill: 'color',
-    opacity: 0.6
-  },
-  // Right antenna
-  {
-    type: 'rect',
-    x: 2.2,
-    y: -12,
-    width: 0.8,
-    height: 4,
-    fill: 'color',
-    opacity: 0.7,
-    rotation: 15
-  }, {
-    type: 'circle',
-    cx: 4,
-    cy: -12,
-    r: 1.2,
-    fill: 'color',
-    opacity: 0.6
-  },
-  // === LEGS (3 per side) ===
-  // Left legs
-  {
-    type: 'rect',
-    x: -10,
-    y: -2,
-    width: 4,
-    height: 1,
-    fill: 'color',
-    opacity: 0.8,
-    rotation: -20
-  }, {
-    type: 'rect',
-    x: -10,
-    y: 1,
-    width: 4,
-    height: 1,
-    fill: 'color',
-    opacity: 0.8,
-    rotation: -10
-  }, {
-    type: 'rect',
-    x: -10,
-    y: 4,
-    width: 4,
-    height: 1,
-    fill: 'color',
-    opacity: 0.8,
-    rotation: 10
-  },
-  // Right legs
-  {
-    type: 'rect',
-    x: 6,
-    y: -2,
-    width: 4,
-    height: 1,
-    fill: 'color',
-    opacity: 0.8,
-    rotation: 20
-  }, {
-    type: 'rect',
-    x: 6,
-    y: 1,
-    width: 4,
-    height: 1,
-    fill: 'color',
-    opacity: 0.8,
-    rotation: 10
-  }, {
-    type: 'rect',
-    x: 6,
-    y: 4,
-    width: 4,
-    height: 1,
-    fill: 'color',
-    opacity: 0.8,
-    rotation: -10
-  },
-  // === CENTER HIGHLIGHT ===
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 1,
-    r: 1,
-    fill: '#fff',
-    opacity: 0.3
-  }]
-};
-
-// ===========================================
-// WIFI ICON (Signal Arcs)
-// ===========================================
-
-export const WIFI_ICON_COLOR = '#00D4FF'; // Cyan
-
-/**
- * WiFi Icon using the "clever trick" - smooth arcs via border trick
- *
- * Uses IconSmoothArc which creates perfect anti-aliased curves by using
- * bordered circles with partial borders hidden. This is the same technique
- * used in the shared-ui WifiIcon for smooth, professional-looking arcs.
- *
- * The arcs use portion: 'top' centered at the signal dot position,
- * which shows the top portion of each circle - creating WiFi-style
- * arcs curving upward from the signal source.
- */
-export const wifiIconData = {
-  color: WIFI_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // === CENTER DOT (signal source) ===
-  {
-    type: 'circle',
-    cx: 0,
-    cy: 6,
-    r: 2,
-    fill: 'color',
-    opacity: 1
-  },
-  // === SIGNAL ARCS (using smootharc - the "clever trick"!) ===
-  // Uses border trick for perfect anti-aliased curves instead of line segments.
-  // portion: 'top' shows the top half of the circle, creating upward-curving arcs.
-
-  // Arc 1 (innermost)
-  {
-    type: 'smootharc',
-    cx: 0,
-    cy: 6,
-    r: 5,
-    stroke: 'color',
-    strokeWidth: 2,
-    opacity: 0.9,
-    portion: 'top'
-  },
-  // Arc 2 (middle)
-  {
-    type: 'smootharc',
-    cx: 0,
-    cy: 6,
-    r: 8,
-    stroke: 'color',
-    strokeWidth: 2,
-    opacity: 0.7,
-    portion: 'top'
-  },
-  // Arc 3 (outermost)
-  {
-    type: 'smootharc',
-    cx: 0,
-    cy: 6,
-    r: 11,
-    stroke: 'color',
-    strokeWidth: 2,
-    opacity: 0.5,
-    portion: 'top'
-  }]
-};
-
-// ===========================================
-// HIGHLIGHT ICON (Render Pulse/Stack Pulse)
-// ===========================================
-
-export const HIGHLIGHT_ICON_COLOR = '#10B981'; // Green (same as renders)
-
-export const highlightIconData = {
-  color: HIGHLIGHT_ICON_COLOR,
-  bgColor: '#000',
-  elements: [
-  // === PULSE RINGS (outer to inner) ===
-  // Outer ring
-  {
-    type: 'rect',
-    x: -10,
-    y: -10,
-    width: 20,
-    height: 20,
-    borderRadius: 3,
-    border: true,
-    borderWidth: 1.5,
-    opacity: 0.2
-  },
-  // Middle ring
-  {
-    type: 'rect',
-    x: -7.5,
-    y: -7.5,
-    width: 15,
-    height: 15,
-    borderRadius: 2.5,
-    border: true,
-    borderWidth: 1.5,
-    opacity: 0.4
-  },
-  // === INNER COMPONENT BOX ===
-  // Glow behind
-  {
-    type: 'rect',
-    x: -6,
-    y: -6,
-    width: 12,
-    height: 12,
-    borderRadius: 2,
-    fill: 'color',
-    opacity: 0.15
-  },
-  // Main component box
-  {
-    type: 'rect',
-    x: -5,
-    y: -5,
-    width: 10,
-    height: 10,
-    borderRadius: 1.5,
-    fill: 'color',
-    opacity: 0.9
-  },
-  // Inner screen
-  {
-    type: 'rect',
-    x: -3.5,
-    y: -3.5,
-    width: 7,
-    height: 7,
-    borderRadius: 1,
-    fill: '#000',
-    opacity: 0.4
-  },
-  // === CONTENT LINES inside component ===
-  {
-    type: 'rect',
-    x: -2,
-    y: -2,
-    width: 4,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.7
-  }, {
-    type: 'rect',
-    x: -2,
-    y: 0,
-    width: 3,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.5
-  }, {
-    type: 'rect',
-    x: -2,
-    y: 2,
-    width: 2,
-    height: 1,
-    borderRadius: 0.5,
-    fill: 'color',
-    opacity: 0.4
-  },
-  // === TOP HIGHLIGHT ===
-  {
-    type: 'rect',
-    x: -3,
-    y: -4.5,
-    width: 6,
-    height: 1.5,
-    borderRadius: 0.75,
-    fill: '#fff',
-    opacity: 0.2
-  },
-  // === CORNER DOTS ===
-  {
-    type: 'circle',
-    cx: -8,
-    cy: -8,
-    r: 1,
-    fill: 'color',
-    opacity: 0.6
-  }, {
-    type: 'circle',
-    cx: 8,
-    cy: -8,
-    r: 1,
-    fill: 'color',
-    opacity: 0.6
-  }, {
-    type: 'circle',
-    cx: -8,
-    cy: 8,
-    r: 1,
-    fill: 'color',
-    opacity: 0.6
-  }, {
-    type: 'circle',
-    cx: 8,
-    cy: 8,
-    r: 1,
-    fill: 'color',
-    opacity: 0.6
-  }]
-};
-
-// ===========================================
-// EVENTS ICON (Unified Timeline)
-// ===========================================
-// Shows a vertical timeline with event cards - representing
-// the unified event timeline that aggregates events from all sources
-
-export const EVENTS_ICON_COLOR = '#00D4FF'; // Cyan (data/events feel)
-
-export const eventsIconData = {
-  color: EVENTS_ICON_COLOR,
-  bgColor: '#0a0a0f',
-  elements: [
-  // === TIMELINE NODES (left side) - scaled up ===
-  // Node 1 (top)
-  {
-    type: 'circle',
-    cx: -7,
-    cy: -7,
-    r: 2.5,
-    fill: 'color',
-    opacity: 1
-  }, {
-    type: 'circle',
-    cx: -7,
-    cy: -7,
-    r: 1.4,
-    fill: '#000000',
-    opacity: 1
-  },
-  // Node 2 (middle)
-  {
-    type: 'circle',
-    cx: -7,
-    cy: 0,
-    r: 2.5,
-    fill: 'color',
-    opacity: 1
-  }, {
-    type: 'circle',
-    cx: -7,
-    cy: 0,
-    r: 1.4,
-    fill: '#000000',
-    opacity: 1
-  },
-  // Node 3 (bottom)
-  {
-    type: 'circle',
-    cx: -7,
-    cy: 7,
-    r: 2.5,
-    fill: 'color',
-    opacity: 1
-  }, {
-    type: 'circle',
-    cx: -7,
-    cy: 7,
-    r: 1.4,
-    fill: '#000000',
-    opacity: 1
-  },
-  // === VERTICAL TIMELINE LINES - thicker ===
-  {
-    type: 'line',
-    x1: -7,
-    y1: -4.2,
-    x2: -7,
-    y2: -2.8,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    opacity: 0.8
-  }, {
-    type: 'line',
-    x1: -7,
-    y1: 2.8,
-    x2: -7,
-    y2: 4.2,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    opacity: 0.8
-  },
-  // === HORIZONTAL CONNECTOR LINES (to cards) - thicker ===
-  {
-    type: 'line',
-    x1: -4.2,
-    y1: -7,
-    x2: -1,
-    y2: -7,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    opacity: 0.7
-  }, {
-    type: 'line',
-    x1: -4.2,
-    y1: 0,
-    x2: -1,
-    y2: 0,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    opacity: 0.7
-  }, {
-    type: 'line',
-    x1: -4.2,
-    y1: 7,
-    x2: -1,
-    y2: 7,
-    stroke: 'color',
-    strokeWidth: 1.5,
-    opacity: 0.7
-  },
-  // === EVENT CARD 1 (top) - larger ===
-  {
-    type: 'rect',
-    x: -1,
-    y: -10,
-    width: 11,
-    height: 6,
-    fill: 'color',
-    opacity: 0.95,
-    borderRadius: 1
-  }, {
-    type: 'rect',
-    x: 0,
-    y: -9,
-    width: 9,
-    height: 4,
-    fill: '#000000',
-    opacity: 1,
-    borderRadius: 0.5
-  },
-  // Content lines in card 1 - thicker
-  {
-    type: 'line',
-    x1: 1.5,
-    y1: -7.5,
-    x2: 7.5,
-    y2: -7.5,
-    stroke: 'color',
-    strokeWidth: 1.2,
-    opacity: 0.8
-  }, {
-    type: 'line',
-    x1: 1.5,
-    y1: -5.8,
-    x2: 6,
-    y2: -5.8,
-    stroke: 'color',
-    strokeWidth: 1.2,
-    opacity: 0.6
-  },
-  // === EVENT CARD 2 (middle) - larger ===
-  {
-    type: 'rect',
-    x: -1,
-    y: -3,
-    width: 11,
-    height: 6,
-    fill: 'color',
-    opacity: 0.95,
-    borderRadius: 1
-  }, {
-    type: 'rect',
-    x: 0,
-    y: -2,
-    width: 9,
-    height: 4,
-    fill: '#000000',
-    opacity: 1,
-    borderRadius: 0.5
-  },
-  // Content lines in card 2 - thicker
-  {
-    type: 'line',
-    x1: 1.5,
-    y1: -0.5,
-    x2: 7.5,
-    y2: -0.5,
-    stroke: 'color',
-    strokeWidth: 1.2,
-    opacity: 0.8
-  }, {
-    type: 'line',
-    x1: 1.5,
-    y1: 1.2,
-    x2: 5,
-    y2: 1.2,
-    stroke: 'color',
-    strokeWidth: 1.2,
-    opacity: 0.6
-  },
-  // === EVENT CARD 3 (bottom) - larger ===
-  {
-    type: 'rect',
-    x: -1,
-    y: 4,
-    width: 11,
-    height: 6,
-    fill: 'color',
-    opacity: 0.95,
-    borderRadius: 1
-  }, {
-    type: 'rect',
-    x: 0,
-    y: 5,
-    width: 9,
-    height: 4,
-    fill: '#000000',
-    opacity: 1,
-    borderRadius: 0.5
-  },
-  // Data dots in card 3 - larger
-  {
-    type: 'circle',
-    cx: 2,
-    cy: 6.2,
-    r: 0.6,
-    fill: 'color',
-    opacity: 0.9
-  }, {
-    type: 'circle',
-    cx: 4,
-    cy: 6.2,
-    r: 0.6,
-    fill: 'color',
-    opacity: 0.9
-  }, {
-    type: 'circle',
-    cx: 6,
-    cy: 6.2,
-    r: 0.6,
-    fill: 'color',
-    opacity: 0.9
-  }, {
-    type: 'circle',
-    cx: 8,
-    cy: 6.2,
-    r: 0.6,
-    fill: 'color',
-    opacity: 0.9
-  }, {
-    type: 'circle',
-    cx: 2,
-    cy: 8,
-    r: 0.6,
-    fill: 'color',
-    opacity: 0.9
-  }, {
-    type: 'circle',
-    cx: 4,
-    cy: 8,
-    r: 0.6,
-    fill: 'color',
-    opacity: 0.9
-  }, {
-    type: 'circle',
-    cx: 6,
-    cy: 8,
-    r: 0.6,
-    fill: 'color',
-    opacity: 0.9
-  }, {
-    type: 'circle',
-    cx: 8,
-    cy: 8,
-    r: 0.6,
-    fill: 'color',
-    opacity: 0.9
-  }]
-};
+"use strict";export const NETWORK_ICON_COLOR="#00D4FF";export const networkIconData={color:"#00D4FF",bgColor:"rgba(8, 12, 21, 0.95)",elements:[{type:"circle",cx:0,cy:0,r:9,fill:"bg",border:!0,borderWidth:2,glow:!0,glowRadius:4},{type:"circle",cx:0,cy:0,r:9,border:!0,borderWidth:2,scaleX:.45,opacity:.6},{type:"circle",cx:0,cy:0,r:9,border:!0,borderWidth:2,scaleX:1.33,scaleY:.6,opacity:.6}]};export const ENV_ICON_COLOR="#4AFF9F";const KEYBOARD_ROW_1=[1,3,5,7,9,11,13,15,17],KEYBOARD_ROW_2=[2,4,6,8,10,12,14,16];export const envIconData={color:"#4AFF9F",bgColor:"#000",elements:[{type:"rect",x:-11,y:3,width:22,height:10,borderRadius:1,fill:"color",opacity:.15},{type:"rect",x:-10,y:4,width:20,height:8,borderRadius:1,fill:"color",opacity:.85},...KEYBOARD_ROW_1.map(t=>({type:"rect",x:-10+t,y:5.5,width:1.5,height:1.2,borderRadius:.2,fill:"#000",opacity:.3})),...KEYBOARD_ROW_2.map(t=>({type:"rect",x:-10+t,y:7.2,width:1.5,height:1.2,borderRadius:.2,fill:"#000",opacity:.3})),{type:"rect",x:-5,y:9.5,width:10,height:1,borderRadius:.2,fill:"#000",opacity:.25},{type:"rect",x:-9,y:-10,width:18,height:12,borderRadius:1,fill:"color",opacity:.9},{type:"rect",x:-8,y:-9,width:16,height:10,borderRadius:.5,fill:"#000",opacity:.5},{type:"rect",x:-7,y:-8,width:10,height:.5,fill:"color",opacity:.6},{type:"rect",x:-7,y:-6,width:7,height:.5,fill:"color",opacity:.6},{type:"rect",x:-7,y:-4,width:4,height:.5,fill:"color",opacity:.6},{type:"rect",x:-1,y:10,width:2,height:1,borderRadius:.5,fill:"color",opacity:.8},{type:"rect",x:.3*18-9,y:-6.4,width:1,height:1,borderRadius:.5,fill:"color",opacity:.4},{type:"rect",x:12.6-9,y:-6.4,width:1,height:1,borderRadius:.5,fill:"color",opacity:.4},{type:"rect",x:0,y:.7*12-10,width:1,height:1,borderRadius:.5,fill:"color",opacity:.4}]};export const STORAGE_ICON_COLOR="#FFB800";const CYLINDER_POSITIONS=[{y:-6,opacity:.9},{y:-1.2,opacity:.8},{y:3.6,opacity:.7}];export const storageIconData={color:"#FFB800",bgColor:"#000",elements:[{type:"rect",x:-9,y:-7,width:18,height:8,borderRadius:4,fill:"color",opacity:.1},{type:"rect",x:-8,y:-6,width:16,height:6,borderRadius:3,fill:"color",opacity:.9},{type:"rect",x:-7,y:-5.5,width:14,height:2,borderRadius:1,fill:"#fff",opacity:.15},{type:"rect",x:-8,y:-6,width:16,height:6,borderRadius:3,border:!0,borderWidth:.5,opacity:.3},{type:"rect",x:-9,y:-2.2,width:18,height:8,borderRadius:4,fill:"color",opacity:.1},{type:"rect",x:-8,y:-1.2,width:16,height:6,borderRadius:3,fill:"color",opacity:.8},{type:"rect",x:-7,y:-.7,width:14,height:2,borderRadius:1,fill:"#fff",opacity:.15},{type:"rect",x:-8,y:-1.2,width:16,height:6,borderRadius:3,border:!0,borderWidth:.5,opacity:.3},{type:"rect",x:-9,y:2.6,width:18,height:8,borderRadius:4,fill:"color",opacity:.1},{type:"rect",x:-8,y:3.6,width:16,height:6,borderRadius:3,fill:"color",opacity:.7},{type:"rect",x:-7,y:4.1,width:14,height:2,borderRadius:1,fill:"#fff",opacity:.15},{type:"rect",x:-8,y:3.6,width:16,height:6,borderRadius:3,border:!0,borderWidth:.5,opacity:.3},{type:"rect",x:-.25,y:-3.6,width:.5,height:6,fill:"color",opacity:.3},{type:"rect",x:-.25,y:1.2,width:.5,height:6,fill:"color",opacity:.3},{type:"rect",x:-.5,y:-3.5,width:1,height:1,borderRadius:.5,fill:"color",opacity:.6},{type:"rect",x:-.5,y:1.3,width:1,height:1,borderRadius:.5,fill:"color",opacity:.6},{type:"rect",x:-.5,y:6.1,width:1,height:1,borderRadius:.5,fill:"color",opacity:.6}]};export const ROUTES_ICON_COLOR="#FF9F1C";export const routePinIconData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"circle",cx:0,cy:-2,r:5,fill:"color",opacity:1},{type:"triangle",x:0,y:4,size:5,direction:"down",fill:"color",opacity:1},{type:"circle",cx:0,cy:-2,r:2,fill:"bg",opacity:1}]};export const curveTestAData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"circle",cx:0,cy:0,r:6,fill:"transparent",border:!0,borderWidth:3,scaleX:1.5,scaleY:.8,opacity:1}]};export const curveTestBData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"circle",cx:0,cy:0,r:6,fill:"transparent",border:!0,borderWidth:3,scaleX:.6,scaleY:1.4,opacity:1}]};export const curveTestCData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-10,y:-4,width:20,height:8,borderRadius:4,fill:"transparent",border:!0,borderWidth:3,opacity:1}]};export const curveTestDData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-10,y:-4,width:20,height:8,borderRadius:4,fill:"transparent",border:!0,borderWidth:1.5,opacity:1}]};export const curveTestEData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-10,y:-4,width:20,height:8,borderRadius:4,fill:"transparent",border:!0,borderWidth:2,opacity:1}]};export const curveTestFData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-10,y:-4,width:20,height:8,borderRadius:4,fill:"transparent",border:!0,borderWidth:2,opacity:1}]};export const curveTestGData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-6,y:-3,width:16,height:6,borderRadius:3,fill:"transparent",border:!0,borderWidth:1.5,opacity:1}]};export const curveTestHData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-22,y:-3,width:16,height:6,borderRadius:3,fill:"transparent",border:!0,borderWidth:1.5,opacity:1}]};export const curveTestIData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-8,y:-7,width:20,height:6,borderRadius:3,fill:"transparent",border:!0,borderWidth:1.5,opacity:1},{type:"rect",x:-12,y:1,width:20,height:6,borderRadius:3,fill:"transparent",border:!0,borderWidth:1.5,opacity:1}]};export const curveTestJData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-8,y:-6,width:20,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:1.5,opacity:1},{type:"rect",x:-12,y:1,width:20,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:1.5,opacity:1}]};export const curveTestKData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-8,y:-5,width:20,height:4,borderRadius:2,fill:"transparent",border:!0,borderWidth:1,opacity:1},{type:"rect",x:-12,y:1,width:20,height:4,borderRadius:2,fill:"transparent",border:!0,borderWidth:1,opacity:1}]};export const curveTestLData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-6,y:-8,width:20,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:1.5,opacity:1},{type:"rect",x:-14,y:3,width:20,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:1.5,opacity:1}]};export const curveTestMData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-7,y:-5,width:18,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:1.5,opacity:1},{type:"rect",x:-11,y:0,width:18,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:1.5,opacity:1}]};export const curveTestNData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-8,y:-6,width:20,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:2,opacity:1},{type:"rect",x:-12,y:1,width:20,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:2,opacity:1}]};export const curveTestOData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-8,y:-6,width:20,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:1,opacity:1},{type:"rect",x:-12,y:1,width:20,height:5,borderRadius:2.5,fill:"transparent",border:!0,borderWidth:1,opacity:1}]};export const curveTestPData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"rect",x:-8,y:-7,width:20,height:7,borderRadius:3.5,fill:"transparent",border:!0,borderWidth:1.5,opacity:1},{type:"rect",x:-12,y:0,width:20,height:7,borderRadius:3.5,fill:"transparent",border:!0,borderWidth:1.5,opacity:1}]};export const routePathIconData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"smootharc",cx:-3,cy:-2,r:5,stroke:"color",strokeWidth:3,opacity:1,portion:"bottom"},{type:"smootharc",cx:3,cy:2,r:5,stroke:"color",strokeWidth:3,opacity:1,portion:"top"}]};export const routeDotIconData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"circle",cx:0,cy:0,r:8,fill:"color",opacity:.3},{type:"circle",cx:0,cy:0,r:3,fill:"bg",opacity:1}]};export const routeTwoPinsIconData={color:"#FF9F1C",bgColor:"#000",elements:[{type:"circle",cx:-6,cy:4,r:3.5,fill:"color",opacity:1},{type:"triangle",x:-6,y:8.5,size:3.5,direction:"down",fill:"color",opacity:1},{type:"circle",cx:-6,cy:4,r:1.4,fill:"bg",opacity:1},{type:"circle",cx:6,cy:-5,r:3.5,fill:"color",opacity:1},{type:"triangle",x:6,y:-.5,size:3.5,direction:"down",fill:"color",opacity:1},{type:"circle",cx:6,cy:-5,r:1.4,fill:"bg",opacity:1}]};export const routesIconData={color:"#FF9F1C",bgColor:"#0a0a0f",elements:[{type:"circle",cx:2.846049894151541,cy:1.2649110640673518,r:4.110960958218893,fill:"#FF9F1C",scaleY:.94},{type:"circle",cx:6.00832755431992,cy:6.324555320336758,r:4,fill:"color"},{type:"circle",cx:6.324555320336758,cy:-6.324555320336758,r:3.794733192202055,fill:"color",scaleY:.97},{type:"circle",cx:6.324555320336758,cy:-6.00832755431992,r:1.5811388300841895,fill:"bg"},{type:"circle",cx:-6.324555320336758,cy:3.478505426185217,r:3.794733192202055,fill:"color",scaleY:.97},{type:"circle",cx:-6.324555320336758,cy:3.478505426185217,r:1.5811388300841895,fill:"bg"},{type:"line",x1:-8.854377448471462,y1:4.743416490252569,x2:-6.00832755431992,y2:9.803060746521975,stroke:"color",strokeWidth:1.5},{type:"line",x1:-3.162277660168379,y1:3.162277660168379,x2:-6.640783086353596,y2:9.803060746521975,stroke:"color",strokeWidth:1.8},{type:"rect",x:-7.273238618387272,y:6.324555320336758,width:1.8973665961010275,height:2.2135943621178655,fill:"color"},{type:"line",x1:1.2649110640673518,y1:1.2649110640673518,x2:9.1706052144883,y2:1.2649110640673518,stroke:"bg",strokeWidth:2.4},{type:"line",x1:9.486832980505138,y1:-6.640783086353596,x2:6.00832755431992,y2:0,stroke:"color",strokeWidth:1.8},{type:"line",x1:3.478505426185217,y1:-5.375872022286244,x2:6.640783086353596,y2:0,stroke:"color",strokeWidth:1.5},{type:"rect",x:5.692099788303082,y:-3.478505426185217,width:1.8973665961010275,height:2.2135943621178655,fill:"color"},{type:"rect",x:2.846049894151541,y:10,width:6,height:4,fill:"bg"},{type:"line",x1:-.31622776601683794,y1:6.324555320336758,x2:7.58946638440411,y2:6.324555320336758,stroke:"bg",strokeWidth:2.3},{type:"rect",x:-2.5298221281347035,y:7.5,width:7.273238618387272,height:2.5,fill:"color"}]};export const QUERY_ICON_COLOR="#FF3366";const QUERY_STATES={fresh:"#10B981",fetching:"#3B82F6",stale:"#F59E0B",paused:"#8B5CF6",inactive:"#6B7280"};export const queryIconData={color:"#FF3366",bgColor:"#000",elements:[{type:"line",x1:0,y1:0,x2:0,y2:-8,stroke:QUERY_STATES.fresh,strokeWidth:1.2,opacity:.5},{type:"line",x1:0,y1:0,x2:7.6,y2:-2.5,stroke:QUERY_STATES.fetching,strokeWidth:1.2,opacity:.5},{type:"line",x1:0,y1:0,x2:4.7,y2:6.5,stroke:QUERY_STATES.stale,strokeWidth:1.2,opacity:.5},{type:"line",x1:0,y1:0,x2:-4.7,y2:6.5,stroke:QUERY_STATES.paused,strokeWidth:1.2,opacity:.5},{type:"line",x1:0,y1:0,x2:-7.6,y2:-2.5,stroke:QUERY_STATES.inactive,strokeWidth:1.2,opacity:.5},{type:"circle",cx:0,cy:-8,r:2.2,fill:QUERY_STATES.fresh,opacity:.2},{type:"circle",cx:0,cy:-8,r:1.6,fill:QUERY_STATES.fresh,opacity:.9},{type:"circle",cx:7.6,cy:-2.5,r:2.2,fill:QUERY_STATES.fetching,opacity:.2},{type:"circle",cx:7.6,cy:-2.5,r:1.6,fill:QUERY_STATES.fetching,opacity:.9},{type:"circle",cx:4.7,cy:6.5,r:2.2,fill:QUERY_STATES.stale,opacity:.2},{type:"circle",cx:4.7,cy:6.5,r:1.6,fill:QUERY_STATES.stale,opacity:.9},{type:"circle",cx:-4.7,cy:6.5,r:2.2,fill:QUERY_STATES.paused,opacity:.2},{type:"circle",cx:-4.7,cy:6.5,r:1.6,fill:QUERY_STATES.paused,opacity:.9},{type:"circle",cx:-7.6,cy:-2.5,r:2.2,fill:QUERY_STATES.inactive,opacity:.2},{type:"circle",cx:-7.6,cy:-2.5,r:1.6,fill:QUERY_STATES.inactive,opacity:.9},{type:"circle",cx:0,cy:0,r:4.5,fill:"color",opacity:.1},{type:"circle",cx:0,cy:0,r:3,fill:"color",opacity:.95},{type:"circle",cx:0,cy:0,r:1.3,fill:"#fff",opacity:.35}]};export const HIGHLIGHTER_ICON_COLOR="#10B981";export const RENDERS_ICON_COLOR="#10B981";export const highlighterIconData={color:"#10B981",bgColor:"#0a0a0f",elements:[{type:"rect",x:-9.1706052144883,y:5.692099788303082,width:3.478505426185217,height:3.478505426185217,fill:"color",rotation:45},{type:"rect",x:-10.119288512538814,y:8.538149682454623,width:6,height:4,fill:"bg"},{type:"line",x1:-10.119288512538814,y1:7.905694150420948,x2:-6.640783086353596,y2:7.905694150420948,stroke:"color",strokeWidth:1.5},{type:"line",x1:-6.957010852370434,y1:5.059644256269407,x2:-2.846049894151541,y2:5.059644256269407,stroke:"color",strokeWidth:1.5,rotation:44},{type:"line",x1:-5.91,y1:-4.11,x2:7.27,y2:-4.33,stroke:"color",strokeWidth:2.1,rotation:145},{type:"line",x1:-1.56,y1:1.05,x2:10.435516278555651,y2:-2.846049894151541,stroke:"color",strokeWidth:2.1,rotation:145},{type:"line",x1:4.110960958218893,y1:-6.640783086353596,x2:9.486832980505138,y2:-6.640783086353596,stroke:"color",strokeWidth:2.2,rotation:44},{type:"line",x1:-4.743416490252569,y1:-1.5811388300841895,x2:1.5811388300841895,y2:4.743416490252569,stroke:"color",strokeWidth:2.9},{type:"line",x1:-6.957010852370434,y1:1.2649110640673518,x2:-2.2135943621178655,y2:2.2135943621178655,stroke:"color",strokeWidth:1.5,rotation:77},{type:"line",x1:-1.2649110640673518,y1:.9486832980505138,x2:-2.5298221281347035,y2:7.905694150420948,stroke:"color",strokeWidth:1.5,rotation:77},{type:"rect",x:-4.427188724235731,y:.9486832980505138,width:3.794733192202055,height:4.110960958218893,fill:"color"},{type:"line",x1:-7.58946638440411,y1:1.8973665961010275,x2:-.9486832980505138,y2:1.8973665961010275,stroke:"color",strokeWidth:1.5,rotation:-48},{type:"line",x1:-5.375872022286244,y1:4.110960958218893,x2:1.2649110640673518,y2:4.110960958218893,stroke:"color",strokeWidth:1.5,rotation:-48}]};export const rendersIconData=highlighterIconData;export const BENCHMARK_ICON_COLOR="#F59E0B";export const benchmarkIconData={color:"#F59E0B",bgColor:"#000",elements:[{type:"circle",cx:0,cy:1,r:7,border:!0,borderWidth:1.5,opacity:.9},{type:"circle",cx:0,cy:1,r:5,fill:"color",opacity:.15},{type:"rect",x:-2,y:-10,width:4,height:3,borderRadius:1,fill:"color",opacity:.9},{type:"rect",x:-1,y:-7.5,width:2,height:2,fill:"color",opacity:.9},{type:"rect",x:-.75,y:-4,width:1.5,height:5,borderRadius:1,fill:"color",opacity:.9,rotation:-45,rotateFromCenter:!0},{type:"circle",cx:0,cy:1,r:1,fill:"color",opacity:.9},{type:"rect",x:-.5,y:-5,width:1,height:2,fill:"color",opacity:.5},{type:"rect",x:4,y:.5,width:2,height:1,fill:"color",opacity:.5},{type:"rect",x:-.5,y:5,width:1,height:2,fill:"color",opacity:.5},{type:"rect",x:-6,y:.5,width:2,height:1,fill:"color",opacity:.5}]};export const SENTRY_ICON_COLOR="#FF3366";export const sentryIconData={color:"#FF3366",bgColor:"#000",elements:[{type:"circle",cx:0,cy:1,r:8,fill:"color",opacity:.15},{type:"rect",x:-6,y:-4,width:12,height:14,borderRadius:6,fill:"color",opacity:.9},{type:"rect",x:-4,y:-9,width:8,height:6,borderRadius:4,fill:"color",opacity:.95},{type:"rect",x:-3,y:-12,width:.8,height:4,fill:"color",opacity:.7,rotation:-15},{type:"circle",cx:-4,cy:-12,r:1.2,fill:"color",opacity:.6},{type:"rect",x:2.2,y:-12,width:.8,height:4,fill:"color",opacity:.7,rotation:15},{type:"circle",cx:4,cy:-12,r:1.2,fill:"color",opacity:.6},{type:"rect",x:-10,y:-2,width:4,height:1,fill:"color",opacity:.8,rotation:-20},{type:"rect",x:-10,y:1,width:4,height:1,fill:"color",opacity:.8,rotation:-10},{type:"rect",x:-10,y:4,width:4,height:1,fill:"color",opacity:.8,rotation:10},{type:"rect",x:6,y:-2,width:4,height:1,fill:"color",opacity:.8,rotation:20},{type:"rect",x:6,y:1,width:4,height:1,fill:"color",opacity:.8,rotation:10},{type:"rect",x:6,y:4,width:4,height:1,fill:"color",opacity:.8,rotation:-10},{type:"circle",cx:0,cy:1,r:1,fill:"#fff",opacity:.3}]};export const WIFI_ICON_COLOR="#00D4FF";export const wifiIconData={color:"#00D4FF",bgColor:"#000",elements:[{type:"circle",cx:0,cy:6,r:2,fill:"color",opacity:1},{type:"smootharc",cx:0,cy:6,r:5,stroke:"color",strokeWidth:2,opacity:.9,portion:"top"},{type:"smootharc",cx:0,cy:6,r:8,stroke:"color",strokeWidth:2,opacity:.7,portion:"top"},{type:"smootharc",cx:0,cy:6,r:11,stroke:"color",strokeWidth:2,opacity:.5,portion:"top"}]};export const HIGHLIGHT_ICON_COLOR="#10B981";export const highlightIconData={color:"#10B981",bgColor:"#000",elements:[{type:"rect",x:-10,y:-10,width:20,height:20,borderRadius:3,border:!0,borderWidth:1.5,opacity:.2},{type:"rect",x:-7.5,y:-7.5,width:15,height:15,borderRadius:2.5,border:!0,borderWidth:1.5,opacity:.4},{type:"rect",x:-6,y:-6,width:12,height:12,borderRadius:2,fill:"color",opacity:.15},{type:"rect",x:-5,y:-5,width:10,height:10,borderRadius:1.5,fill:"color",opacity:.9},{type:"rect",x:-3.5,y:-3.5,width:7,height:7,borderRadius:1,fill:"#000",opacity:.4},{type:"rect",x:-2,y:-2,width:4,height:1,borderRadius:.5,fill:"color",opacity:.7},{type:"rect",x:-2,y:0,width:3,height:1,borderRadius:.5,fill:"color",opacity:.5},{type:"rect",x:-2,y:2,width:2,height:1,borderRadius:.5,fill:"color",opacity:.4},{type:"rect",x:-3,y:-4.5,width:6,height:1.5,borderRadius:.75,fill:"#fff",opacity:.2},{type:"circle",cx:-8,cy:-8,r:1,fill:"color",opacity:.6},{type:"circle",cx:8,cy:-8,r:1,fill:"color",opacity:.6},{type:"circle",cx:-8,cy:8,r:1,fill:"color",opacity:.6},{type:"circle",cx:8,cy:8,r:1,fill:"color",opacity:.6}]};export const EVENTS_ICON_COLOR="#00D4FF";export const eventsIconData={color:"#00D4FF",bgColor:"#0a0a0f",elements:[{type:"circle",cx:-7,cy:-7,r:2.5,fill:"color",opacity:1},{type:"circle",cx:-7,cy:-7,r:1.4,fill:"#000000",opacity:1},{type:"circle",cx:-7,cy:0,r:2.5,fill:"color",opacity:1},{type:"circle",cx:-7,cy:0,r:1.4,fill:"#000000",opacity:1},{type:"circle",cx:-7,cy:7,r:2.5,fill:"color",opacity:1},{type:"circle",cx:-7,cy:7,r:1.4,fill:"#000000",opacity:1},{type:"line",x1:-7,y1:-4.2,x2:-7,y2:-2.8,stroke:"color",strokeWidth:1.5,opacity:.8},{type:"line",x1:-7,y1:2.8,x2:-7,y2:4.2,stroke:"color",strokeWidth:1.5,opacity:.8},{type:"line",x1:-4.2,y1:-7,x2:-1,y2:-7,stroke:"color",strokeWidth:1.5,opacity:.7},{type:"line",x1:-4.2,y1:0,x2:-1,y2:0,stroke:"color",strokeWidth:1.5,opacity:.7},{type:"line",x1:-4.2,y1:7,x2:-1,y2:7,stroke:"color",strokeWidth:1.5,opacity:.7},{type:"rect",x:-1,y:-10,width:11,height:6,fill:"color",opacity:.95,borderRadius:1},{type:"rect",x:0,y:-9,width:9,height:4,fill:"#000000",opacity:1,borderRadius:.5},{type:"line",x1:1.5,y1:-7.5,x2:7.5,y2:-7.5,stroke:"color",strokeWidth:1.2,opacity:.8},{type:"line",x1:1.5,y1:-5.8,x2:6,y2:-5.8,stroke:"color",strokeWidth:1.2,opacity:.6},{type:"rect",x:-1,y:-3,width:11,height:6,fill:"color",opacity:.95,borderRadius:1},{type:"rect",x:0,y:-2,width:9,height:4,fill:"#000000",opacity:1,borderRadius:.5},{type:"line",x1:1.5,y1:-.5,x2:7.5,y2:-.5,stroke:"color",strokeWidth:1.2,opacity:.8},{type:"line",x1:1.5,y1:1.2,x2:5,y2:1.2,stroke:"color",strokeWidth:1.2,opacity:.6},{type:"rect",x:-1,y:4,width:11,height:6,fill:"color",opacity:.95,borderRadius:1},{type:"rect",x:0,y:5,width:9,height:4,fill:"#000000",opacity:1,borderRadius:.5},{type:"circle",cx:2,cy:6.2,r:.6,fill:"color",opacity:.9},{type:"circle",cx:4,cy:6.2,r:.6,fill:"color",opacity:.9},{type:"circle",cx:6,cy:6.2,r:.6,fill:"color",opacity:.9},{type:"circle",cx:8,cy:6.2,r:.6,fill:"color",opacity:.9},{type:"circle",cx:2,cy:8,r:.6,fill:"color",opacity:.9},{type:"circle",cx:4,cy:8,r:.6,fill:"color",opacity:.9},{type:"circle",cx:6,cy:8,r:.6,fill:"color",opacity:.9},{type:"circle",cx:8,cy:8,r:.6,fill:"color",opacity:.9}]};