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

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

@@ -1 +1,2264 @@
-"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}]};
+"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
+  }]
+};