@zendir/ui 0.1.11 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/index.js +6 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/react/astro/UnifiedTimeline.d.ts +4 -0
  4. package/dist/react/astro/UnifiedTimeline.js +319 -272
  5. package/dist/react/astro/UnifiedTimeline.js.map +1 -1
  6. package/dist/react/charts/GroundTrackMap.js +1123 -0
  7. package/dist/react/charts/GroundTrackMap.js.map +1 -0
  8. package/dist/react/charts/GroundTrackMapLeaflet.js +571 -0
  9. package/dist/react/charts/GroundTrackMapLeaflet.js.map +1 -0
  10. package/dist/react/charts/groundTrackMapLeafletTiles.js +11 -0
  11. package/dist/react/charts/groundTrackMapLeafletTiles.js.map +1 -0
  12. package/dist/react/charts/groundTrackMapLeafletUtils.js +109 -0
  13. package/dist/react/charts/groundTrackMapLeafletUtils.js.map +1 -0
  14. package/dist/react/charts/unified/AstroChart.js +1412 -0
  15. package/dist/react/charts/unified/AstroChart.js.map +1 -0
  16. package/dist/react/charts/unified/theme.d.ts +6 -6
  17. package/dist/react/charts/unified/theme.js +338 -0
  18. package/dist/react/charts/unified/theme.js.map +1 -0
  19. package/dist/react/charts/unified/types.d.ts +1 -1
  20. package/dist/react/context/DisplaySettingsContext.js +12 -0
  21. package/dist/react/context/DisplaySettingsContext.js.map +1 -1
  22. package/dist/react/core/SideNav.d.ts +7 -0
  23. package/dist/react/core/SideNav.js +108 -40
  24. package/dist/react/core/SideNav.js.map +1 -1
  25. package/dist/react/core/index.d.ts +1 -1
  26. package/dist/react/index.d.ts +5 -1
  27. package/dist/react.js +6 -1
  28. package/dist/react.js.map +1 -1
  29. package/dist/style.css +143 -0
  30. package/package.json +1 -1
package/dist/react/astro/UnifiedTimeline.js CHANGED
@@ -78,17 +78,32 @@ const EventListItem = memo(function EventListItem2({
78
78
  onMouseLeave: () => setHovered(false),
79
79
  onClick: () => onEventClick == null ? void 0 : onEventClick(event),
80
80
  style: {
81
+ position: "relative",
81
82
  flex: 1,
82
83
  marginBottom: "16px",
83
- padding: "16px 20px",
84
+ padding: event.color ? "19px 20px 16px 20px" : "16px 20px",
84
85
  backgroundColor: tokens.colors.background.surface,
85
86
  border: `1px solid ${hovered ? tokens.colors.accent.primary : tokens.colors.border.muted}`,
86
87
  borderRadius: tokens.borderRadius.lg,
87
88
  cursor: onEventClick ? "pointer" : "default",
88
89
  transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
90
+ overflow: "hidden",
89
91
  boxShadow: hovered ? `0 4px 20px ${tokens.colors.accent.primary}15, 0 0 0 1px ${tokens.colors.accent.primary}20` : "none"
90
92
  },
91
93
  children: [
94
+ event.color && /* @__PURE__ */ jsx(
95
+ "div",
96
+ {
97
+ style: {
98
+ position: "absolute",
99
+ top: 0,
100
+ left: 0,
101
+ right: 0,
102
+ height: 3,
103
+ backgroundColor: event.color
104
+ }
105
+ }
106
+ ),
92
107
  /* @__PURE__ */ jsxs(
93
108
  "div",
94
109
  {
@@ -634,6 +649,20 @@ const ChartView = memo(function ChartView2({
634
649
  transform: isHovered ? "translateY(-3px) scale(1.02)" : "none"
635
650
  },
636
651
  children: [
652
+ event.color && /* @__PURE__ */ jsx(
653
+ "div",
654
+ {
655
+ style: {
656
+ position: "absolute",
657
+ top: 0,
658
+ left: 0,
659
+ right: 0,
660
+ height: 3,
661
+ backgroundColor: event.color,
662
+ borderRadius: "4px 4px 0 0"
663
+ }
664
+ }
665
+ ),
637
666
  /* @__PURE__ */ jsx(
638
667
  "div",
639
668
  {
@@ -798,158 +827,166 @@ const ChartView = memo(function ChartView2({
798
827
  )
799
828
  }
800
829
  ),
801
- hoveredEventData && tooltipPos && /* @__PURE__ */ jsxs(
802
- "div",
803
- {
804
- style: {
805
- position: "fixed",
806
- left: tooltipPos.x,
807
- top: tooltipPos.y,
808
- transform: "translate(-50%, -100%)",
809
- zIndex: 1e3,
810
- pointerEvents: "none",
811
- animation: "zendir-tooltip-appear 150ms ease"
812
- },
813
- children: [
814
- /* @__PURE__ */ jsxs(
815
- "div",
816
- {
817
- style: {
818
- backgroundColor: "rgba(15, 23, 42, 0.98)",
819
- border: `1px solid ${getStatusColor(hoveredEventData.status)}50`,
820
- borderRadius: tokens.borderRadius.md,
821
- padding: "12px 16px",
822
- minWidth: 220,
823
- maxWidth: 320,
824
- boxShadow: `0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px ${getStatusColor(hoveredEventData.status)}30`,
825
- backdropFilter: "blur(12px)"
826
- },
827
- children: [
828
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
830
+ hoveredEventData && tooltipPos && (() => {
831
+ var _a;
832
+ const tooltipColor = getStatusColor(hoveredEventData.status);
833
+ return /* @__PURE__ */ jsxs(
834
+ "div",
835
+ {
836
+ style: {
837
+ position: "fixed",
838
+ left: tooltipPos.x,
839
+ top: tooltipPos.y,
840
+ transform: "translate(-50%, -100%)",
841
+ zIndex: 1e3,
842
+ pointerEvents: "none",
843
+ animation: "zendir-tooltip-appear 150ms ease"
844
+ },
845
+ children: [
846
+ /* @__PURE__ */ jsxs(
847
+ "div",
848
+ {
849
+ style: {
850
+ backgroundColor: "rgba(15, 23, 42, 0.98)",
851
+ border: `1px solid ${tooltipColor}50`,
852
+ borderRadius: tokens.borderRadius.md,
853
+ padding: "12px 16px",
854
+ minWidth: 220,
855
+ maxWidth: 320,
856
+ boxShadow: `0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px ${tooltipColor}30`,
857
+ backdropFilter: "blur(12px)"
858
+ },
859
+ children: [
860
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
861
+ /* @__PURE__ */ jsx(
862
+ TimelineStatusMarker,
863
+ {
864
+ status: hoveredEventData.status,
865
+ fillColor: tooltipColor,
866
+ size: 10
867
+ }
868
+ ),
869
+ /* @__PURE__ */ jsx(
870
+ "span",
871
+ {
872
+ style: {
873
+ fontSize: "0.75rem",
874
+ fontWeight: 500,
875
+ // AstroUXDS medium (was 600)
876
+ color: tooltipColor,
877
+ textTransform: "uppercase",
878
+ letterSpacing: "0.05em"
879
+ },
880
+ children: getStatusLabel(hoveredEventData.status)
881
+ }
882
+ ),
883
+ hoveredEventData.badge && /* @__PURE__ */ jsx(
884
+ "span",
885
+ {
886
+ style: {
887
+ marginLeft: "auto",
888
+ fontSize: "0.625rem",
889
+ fontWeight: 500,
890
+ // AstroUXDS medium (was 600)
891
+ padding: "2px 6px",
892
+ borderRadius: tokens.borderRadius.sm,
893
+ backgroundColor: `${tooltipColor}20`,
894
+ color: tooltipColor
895
+ },
896
+ children: hoveredEventData.badge
897
+ }
898
+ )
899
+ ] }),
900
+ hoveredEventData.color && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [
901
+ /* @__PURE__ */ jsx("div", { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: hoveredEventData.color, flexShrink: 0 } }),
902
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6875rem", color: hoveredEventData.color, fontWeight: 500 }, children: ((_a = hoveredEventData.arguments) == null ? void 0 : _a.Team) || hoveredEventData.badge || "Team" })
903
+ ] }),
829
904
  /* @__PURE__ */ jsx(
830
- TimelineStatusMarker,
905
+ "div",
831
906
  {
832
- status: hoveredEventData.status,
833
- fillColor: getStatusColor(hoveredEventData.status),
834
- size: 10
907
+ style: {
908
+ fontSize: "0.875rem",
909
+ fontWeight: 500,
910
+ // AstroUXDS medium (was 600)
911
+ color: "#fff",
912
+ marginBottom: 4
913
+ },
914
+ children: hoveredEventData.title
835
915
  }
836
916
  ),
837
- /* @__PURE__ */ jsx(
838
- "span",
917
+ hoveredEventData.subtitle && /* @__PURE__ */ jsx(
918
+ "div",
839
919
  {
840
920
  style: {
841
921
  fontSize: "0.75rem",
842
- fontWeight: 500,
843
- // AstroUXDS medium (was 600)
844
- color: getStatusColor(hoveredEventData.status),
845
- textTransform: "uppercase",
846
- letterSpacing: "0.05em"
922
+ color: "rgba(255, 255, 255, 0.6)",
923
+ marginBottom: 12
847
924
  },
848
- children: getStatusLabel(hoveredEventData.status)
925
+ children: hoveredEventData.subtitle
849
926
  }
850
927
  ),
851
- hoveredEventData.badge && /* @__PURE__ */ jsx(
852
- "span",
928
+ /* @__PURE__ */ jsxs(
929
+ "div",
853
930
  {
854
931
  style: {
855
- marginLeft: "auto",
932
+ display: "grid",
933
+ gridTemplateColumns: "auto 1fr",
934
+ gap: "6px 12px",
935
+ fontSize: "0.6875rem",
936
+ borderTop: `1px solid ${tokens.colors.border.muted}30`,
937
+ paddingTop: 10
938
+ },
939
+ children: [
940
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Start:" }),
941
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.primary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTime(hoveredEventData.start, true) }),
942
+ hoveredEventData.end && /* @__PURE__ */ jsxs(Fragment, { children: [
943
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "End:" }),
944
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.primary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTime(hoveredEventData.end, true) }),
945
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Duration:" }),
946
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.accent.secondary, fontWeight: 500 }, children: formatDuration(hoveredEventData.end.getTime() - hoveredEventData.start.getTime()) })
947
+ ] }),
948
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "UTC:" }),
949
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono, fontSize: "0.625rem" }, children: formatUTC(hoveredEventData.start) })
950
+ ]
951
+ }
952
+ ),
953
+ onEventClick && /* @__PURE__ */ jsx(
954
+ "div",
955
+ {
956
+ style: {
957
+ marginTop: 10,
958
+ paddingTop: 8,
959
+ borderTop: `1px solid ${tokens.colors.border.muted}20`,
856
960
  fontSize: "0.625rem",
857
- fontWeight: 500,
858
- // AstroUXDS medium (was 600)
859
- padding: "2px 6px",
860
- borderRadius: tokens.borderRadius.sm,
861
- backgroundColor: `${getStatusColor(hoveredEventData.status)}20`,
862
- color: getStatusColor(hoveredEventData.status)
961
+ color: tokens.colors.text.tertiary,
962
+ textAlign: "center"
863
963
  },
864
- children: hoveredEventData.badge
964
+ children: "Click for details"
865
965
  }
866
966
  )
867
- ] }),
868
- /* @__PURE__ */ jsx(
869
- "div",
870
- {
871
- style: {
872
- fontSize: "0.875rem",
873
- fontWeight: 500,
874
- // AstroUXDS medium (was 600)
875
- color: "#fff",
876
- marginBottom: 4
877
- },
878
- children: hoveredEventData.title
879
- }
880
- ),
881
- hoveredEventData.subtitle && /* @__PURE__ */ jsx(
882
- "div",
883
- {
884
- style: {
885
- fontSize: "0.75rem",
886
- color: "rgba(255, 255, 255, 0.6)",
887
- marginBottom: 12
888
- },
889
- children: hoveredEventData.subtitle
890
- }
891
- ),
892
- /* @__PURE__ */ jsxs(
893
- "div",
894
- {
895
- style: {
896
- display: "grid",
897
- gridTemplateColumns: "auto 1fr",
898
- gap: "6px 12px",
899
- fontSize: "0.6875rem",
900
- borderTop: `1px solid ${tokens.colors.border.muted}30`,
901
- paddingTop: 10
902
- },
903
- children: [
904
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Start:" }),
905
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.primary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTime(hoveredEventData.start, true) }),
906
- hoveredEventData.end && /* @__PURE__ */ jsxs(Fragment, { children: [
907
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "End:" }),
908
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.primary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTime(hoveredEventData.end, true) }),
909
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Duration:" }),
910
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.accent.secondary, fontWeight: 500 }, children: formatDuration(hoveredEventData.end.getTime() - hoveredEventData.start.getTime()) })
911
- ] }),
912
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "UTC:" }),
913
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono, fontSize: "0.625rem" }, children: formatUTC(hoveredEventData.start) })
914
- ]
915
- }
916
- ),
917
- onEventClick && /* @__PURE__ */ jsx(
918
- "div",
919
- {
920
- style: {
921
- marginTop: 10,
922
- paddingTop: 8,
923
- borderTop: `1px solid ${tokens.colors.border.muted}20`,
924
- fontSize: "0.625rem",
925
- color: tokens.colors.text.tertiary,
926
- textAlign: "center"
927
- },
928
- children: "Click for details"
929
- }
930
- )
931
- ]
932
- }
933
- ),
934
- /* @__PURE__ */ jsx(
935
- "div",
936
- {
937
- style: {
938
- position: "absolute",
939
- bottom: -6,
940
- left: "50%",
941
- transform: "translateX(-50%) rotate(45deg)",
942
- width: 12,
943
- height: 12,
944
- backgroundColor: "rgba(15, 23, 42, 0.98)",
945
- borderRight: `1px solid ${getStatusColor(hoveredEventData.status)}50`,
946
- borderBottom: `1px solid ${getStatusColor(hoveredEventData.status)}50`
967
+ ]
947
968
  }
948
- }
949
- )
950
- ]
951
- }
952
- ),
969
+ ),
970
+ /* @__PURE__ */ jsx(
971
+ "div",
972
+ {
973
+ style: {
974
+ position: "absolute",
975
+ bottom: -6,
976
+ left: "50%",
977
+ transform: "translateX(-50%) rotate(45deg)",
978
+ width: 12,
979
+ height: 12,
980
+ backgroundColor: "rgba(15, 23, 42, 0.98)",
981
+ borderRight: `1px solid ${tooltipColor}50`,
982
+ borderBottom: `1px solid ${tooltipColor}50`
983
+ }
984
+ }
985
+ )
986
+ ]
987
+ }
988
+ );
989
+ })(),
953
990
  /* @__PURE__ */ jsx("style", { children: `
954
991
  .zendir-timeline-region:hover {
955
992
  z-index: 100 !important;
@@ -1170,7 +1207,9 @@ const ScatterView = memo(function ScatterView2({
1170
1207
  cursor: "pointer",
1171
1208
  transition: "all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
1172
1209
  zIndex: isHovered ? 20 : 1,
1173
- lineHeight: 0
1210
+ lineHeight: 0,
1211
+ borderRadius: "50%",
1212
+ boxShadow: event.color ? `0 0 0 2px ${event.color}` : void 0
1174
1213
  },
1175
1214
  "aria-label": event.title,
1176
1215
  children: /* @__PURE__ */ jsx(TimelineStatusMarker, { status: effectiveStatus, fillColor: color, size: dotSize })
@@ -1188,153 +1227,161 @@ const ScatterView = memo(function ScatterView2({
1188
1227
  ]
1189
1228
  }
1190
1229
  ),
1191
- hoveredEventData && tooltipPosition && /* @__PURE__ */ jsxs(
1192
- "div",
1193
- {
1194
- className: "zendir-scatter-tooltip",
1195
- style: {
1196
- position: "fixed",
1197
- left: tooltipPosition.x,
1198
- top: tooltipPosition.y - 12,
1199
- transform: "translate(-50%, -100%)",
1200
- backgroundColor: "rgba(11, 26, 40, 0.98)",
1201
- border: `1px solid ${tokens.colors.accent.primary}40`,
1202
- borderRadius: tokens.borderRadius.lg,
1203
- padding: "12px 16px",
1204
- minWidth: 200,
1205
- maxWidth: 320,
1206
- zIndex: 1e3,
1207
- boxShadow: `0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px ${tokens.colors.accent.primary}20`,
1208
- backdropFilter: "blur(12px)",
1209
- animation: "zendir-tooltip-in 150ms cubic-bezier(0.34, 1.56, 0.64, 1)"
1210
- },
1211
- children: [
1212
- /* @__PURE__ */ jsx(
1213
- "div",
1214
- {
1215
- style: {
1216
- position: "absolute",
1217
- bottom: -6,
1218
- left: "50%",
1219
- transform: "translateX(-50%) rotate(45deg)",
1220
- width: 12,
1221
- height: 12,
1222
- backgroundColor: "rgba(11, 26, 40, 0.98)",
1223
- borderRight: `1px solid ${tokens.colors.accent.primary}40`,
1224
- borderBottom: `1px solid ${tokens.colors.accent.primary}40`
1225
- }
1226
- }
1227
- ),
1228
- hoveredEventData.status && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
1229
- /* @__PURE__ */ jsx(
1230
- TimelineStatusMarker,
1231
- {
1232
- status: hoveredEventData.status,
1233
- fillColor: getStatusColor(hoveredEventData.status),
1234
- size: 10
1235
- }
1236
- ),
1230
+ hoveredEventData && tooltipPosition && (() => {
1231
+ var _a;
1232
+ const scatterTipColor = getStatusColor(hoveredEventData.status);
1233
+ return /* @__PURE__ */ jsxs(
1234
+ "div",
1235
+ {
1236
+ className: "zendir-scatter-tooltip",
1237
+ style: {
1238
+ position: "fixed",
1239
+ left: tooltipPosition.x,
1240
+ top: tooltipPosition.y - 12,
1241
+ transform: "translate(-50%, -100%)",
1242
+ backgroundColor: "rgba(11, 26, 40, 0.98)",
1243
+ border: `1px solid ${scatterTipColor}40`,
1244
+ borderRadius: tokens.borderRadius.lg,
1245
+ padding: "12px 16px",
1246
+ minWidth: 200,
1247
+ maxWidth: 320,
1248
+ zIndex: 1e3,
1249
+ boxShadow: `0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px ${scatterTipColor}20`,
1250
+ backdropFilter: "blur(12px)",
1251
+ animation: "zendir-tooltip-in 150ms cubic-bezier(0.34, 1.56, 0.64, 1)"
1252
+ },
1253
+ children: [
1237
1254
  /* @__PURE__ */ jsx(
1238
- "span",
1239
- {
1240
- style: {
1241
- fontSize: "0.75rem",
1242
- fontWeight: 500,
1243
- color: getStatusColor(hoveredEventData.status),
1244
- textTransform: "uppercase",
1245
- letterSpacing: "0.05em"
1246
- },
1247
- children: hoveredEventData.status
1248
- }
1249
- ),
1250
- hoveredEventData.badge && /* @__PURE__ */ jsx(
1251
- "span",
1252
- {
1253
- style: {
1254
- marginLeft: "auto",
1255
- fontSize: "0.625rem",
1256
- fontWeight: 500,
1257
- padding: "2px 6px",
1258
- borderRadius: tokens.borderRadius.sm,
1259
- backgroundColor: `${getStatusColor(hoveredEventData.status)}20`,
1260
- color: getStatusColor(hoveredEventData.status)
1261
- },
1262
- children: hoveredEventData.badge
1263
- }
1264
- )
1265
- ] }),
1266
- /* @__PURE__ */ jsx(
1267
- "div",
1268
- {
1269
- style: {
1270
- fontSize: "0.875rem",
1271
- fontWeight: 500,
1272
- color: "#fff",
1273
- marginBottom: 8
1274
- },
1275
- children: hoveredEventData.title
1276
- }
1277
- ),
1278
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
1279
- /* @__PURE__ */ jsxs(
1280
- "div",
1281
- {
1282
- style: {
1283
- display: "flex",
1284
- justifyContent: "space-between",
1285
- fontSize: "0.75rem"
1286
- },
1287
- children: [
1288
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Time:" }),
1289
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTimeLabel(hoveredEventData.start) })
1290
- ]
1291
- }
1292
- ),
1293
- hoveredEventData.badge && /* @__PURE__ */ jsxs(
1294
1255
  "div",
1295
1256
  {
1296
1257
  style: {
1297
- display: "flex",
1298
- justifyContent: "space-between",
1299
- fontSize: "0.75rem"
1300
- },
1301
- children: [
1302
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Trigger:" }),
1303
- /* @__PURE__ */ jsx("span", { style: { color: safeAccentText(tokens.colors.accent.primary), fontWeight: 500 }, children: hoveredEventData.badge })
1304
- ]
1258
+ position: "absolute",
1259
+ bottom: -6,
1260
+ left: "50%",
1261
+ transform: "translateX(-50%) rotate(45deg)",
1262
+ width: 12,
1263
+ height: 12,
1264
+ backgroundColor: "rgba(11, 26, 40, 0.98)",
1265
+ borderRight: `1px solid ${scatterTipColor}40`,
1266
+ borderBottom: `1px solid ${scatterTipColor}40`
1267
+ }
1305
1268
  }
1306
1269
  ),
1307
- /* @__PURE__ */ jsxs(
1270
+ hoveredEventData.status && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
1271
+ /* @__PURE__ */ jsx(
1272
+ TimelineStatusMarker,
1273
+ {
1274
+ status: hoveredEventData.status,
1275
+ fillColor: scatterTipColor,
1276
+ size: 10
1277
+ }
1278
+ ),
1279
+ /* @__PURE__ */ jsx(
1280
+ "span",
1281
+ {
1282
+ style: {
1283
+ fontSize: "0.75rem",
1284
+ fontWeight: 500,
1285
+ color: scatterTipColor,
1286
+ textTransform: "uppercase",
1287
+ letterSpacing: "0.05em"
1288
+ },
1289
+ children: hoveredEventData.status
1290
+ }
1291
+ ),
1292
+ hoveredEventData.badge && /* @__PURE__ */ jsx(
1293
+ "span",
1294
+ {
1295
+ style: {
1296
+ marginLeft: "auto",
1297
+ fontSize: "0.625rem",
1298
+ fontWeight: 500,
1299
+ padding: "2px 6px",
1300
+ borderRadius: tokens.borderRadius.sm,
1301
+ backgroundColor: `${scatterTipColor}20`,
1302
+ color: scatterTipColor
1303
+ },
1304
+ children: hoveredEventData.badge
1305
+ }
1306
+ )
1307
+ ] }),
1308
+ hoveredEventData.color && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [
1309
+ /* @__PURE__ */ jsx("div", { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: hoveredEventData.color, flexShrink: 0 } }),
1310
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6875rem", color: hoveredEventData.color, fontWeight: 500 }, children: ((_a = hoveredEventData.arguments) == null ? void 0 : _a.Team) || hoveredEventData.badge || "Team" })
1311
+ ] }),
1312
+ /* @__PURE__ */ jsx(
1308
1313
  "div",
1309
1314
  {
1310
1315
  style: {
1311
- display: "flex",
1312
- justifyContent: "space-between",
1313
- fontSize: "0.75rem"
1316
+ fontSize: "0.875rem",
1317
+ fontWeight: 500,
1318
+ color: "#fff",
1319
+ marginBottom: 8
1314
1320
  },
1315
- children: [
1316
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "UTC:" }),
1317
- /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono }, children: hoveredEventData.start.toISOString().replace("T", " ").slice(0, 19) })
1318
- ]
1321
+ children: hoveredEventData.title
1319
1322
  }
1320
1323
  ),
1321
- hoveredEventData.subtitle && /* @__PURE__ */ jsx(
1322
- "div",
1323
- {
1324
- style: {
1325
- marginTop: 4,
1326
- paddingTop: 8,
1327
- borderTop: `1px solid ${tokens.colors.border.muted}`,
1328
- fontSize: "0.75rem",
1329
- color: tokens.colors.text.secondary
1330
- },
1331
- children: hoveredEventData.subtitle
1332
- }
1333
- )
1334
- ] })
1335
- ]
1336
- }
1337
- ),
1324
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
1325
+ /* @__PURE__ */ jsxs(
1326
+ "div",
1327
+ {
1328
+ style: {
1329
+ display: "flex",
1330
+ justifyContent: "space-between",
1331
+ fontSize: "0.75rem"
1332
+ },
1333
+ children: [
1334
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Time:" }),
1335
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTimeLabel(hoveredEventData.start) })
1336
+ ]
1337
+ }
1338
+ ),
1339
+ hoveredEventData.badge && /* @__PURE__ */ jsxs(
1340
+ "div",
1341
+ {
1342
+ style: {
1343
+ display: "flex",
1344
+ justifyContent: "space-between",
1345
+ fontSize: "0.75rem"
1346
+ },
1347
+ children: [
1348
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Trigger:" }),
1349
+ /* @__PURE__ */ jsx("span", { style: { color: safeAccentText(tokens.colors.accent.primary), fontWeight: 500 }, children: hoveredEventData.badge })
1350
+ ]
1351
+ }
1352
+ ),
1353
+ /* @__PURE__ */ jsxs(
1354
+ "div",
1355
+ {
1356
+ style: {
1357
+ display: "flex",
1358
+ justifyContent: "space-between",
1359
+ fontSize: "0.75rem"
1360
+ },
1361
+ children: [
1362
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "UTC:" }),
1363
+ /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono }, children: hoveredEventData.start.toISOString().replace("T", " ").slice(0, 19) })
1364
+ ]
1365
+ }
1366
+ ),
1367
+ hoveredEventData.subtitle && /* @__PURE__ */ jsx(
1368
+ "div",
1369
+ {
1370
+ style: {
1371
+ marginTop: 4,
1372
+ paddingTop: 8,
1373
+ borderTop: `1px solid ${tokens.colors.border.muted}`,
1374
+ fontSize: "0.75rem",
1375
+ color: tokens.colors.text.secondary
1376
+ },
1377
+ children: hoveredEventData.subtitle
1378
+ }
1379
+ )
1380
+ ] })
1381
+ ]
1382
+ }
1383
+ );
1384
+ })(),
1338
1385
  /* @__PURE__ */ jsx("style", { children: `
1339
1386
  @keyframes zendir-tooltip-in {
1340
1387
  from {