@crvouga/atlas 0.10.2 → 0.12.0

package/packages/visualizer/src/map/map.module.css

@@ -1,546 +1,12 @@
-.flow {
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(circle at 1px 1px, #d5e0e7 1px, transparent 0) 0 0 / 22px 22px;
-}
-
-.markers {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.handle {
-  opacity: 0;
-  pointer-events: none;
-  width: 1px;
-  height: 1px;
-  min-width: 0;
-  min-height: 0;
-  border: 0;
-}
-
-/* Screens */
-
-.screen {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0.4rem;
-  padding: 6px;
-  background: var(--card);
-  border: 2px solid var(--line);
-  border-radius: 1rem;
-  color: var(--ink);
-  text-decoration: none;
-  box-shadow: var(--shadow-card);
-  transition:
-    box-shadow 160ms var(--ease),
-    border-color 160ms var(--ease),
-    opacity var(--fade) var(--ease);
-}
-
-.screen:hover {
-  box-shadow: var(--shadow-raised);
-}
-
-.screen[data-status='passed'] {
-  border-color: var(--passed-line);
-}
-.screen[data-status='failed'] {
-  border-color: var(--failed);
-}
-.screen[data-status='flaky'] {
-  border-color: var(--flaky);
-}
-.screen[data-status='not-reached'],
-.screen[data-status='not-yet-run'],
-.screen[data-status='spec-only'] {
-  border-style: dashed;
-  border-color: var(--line-2);
-}
-
-.screen[data-final='true'] {
-  box-shadow:
-    0 0 0 3px var(--card),
-    0 0 0 4.5px var(--line-2),
-    var(--shadow-card);
-}
-
-.screen[data-selected='true'] {
-  box-shadow: 0 0 0 2px var(--place);
-}
-
-.screen[data-dimmed='true'],
-.chartLink[data-dimmed='true'],
-.context[data-dimmed='true'],
-.summary[data-dimmed='true'] {
-  opacity: 0.35;
-}
-
-.screenLabel {
-  font-size: 0.78rem;
-  font-weight: 600;
-  line-height: 1.2;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.35rem;
-  align-items: baseline;
-  padding: 0 0.15rem;
-  overflow: hidden;
-}
-
-.screenLabel > span:last-child {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.assumed {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  font-size: 0.6rem;
-  font-weight: 700;
-  padding: 0.1rem 0.4rem;
-  border-radius: var(--pill);
-  color: var(--ink-3);
-  background: rgba(241, 245, 249, 0.95);
-  border: 1px dashed var(--faint);
-}
-
-/* Groups and regions */
-
-.group {
-  width: 100%;
-  height: 100%;
-  border: 1px solid var(--line);
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.55);
-}
-
-.group[data-variant='region'] {
-  border-style: dashed;
-  border-color: var(--line-2);
-  background: rgba(248, 250, 252, 0.6);
-}
-
-.group[data-variant='parallel'] {
-  border-style: dashed;
-}
-
-.groupLabel {
-  position: absolute;
-  top: 0.7rem;
-  left: 1rem;
-  right: 1rem;
-  display: flex;
-  gap: 0.45rem;
-  align-items: center;
-  font-size: 0.85rem;
-  font-weight: 400;
-  color: var(--ink-2);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.group[data-variant='region'] .groupLabel {
-  color: var(--ink-2);
-}
-
-.groupTag {
-  font-size: 0.65rem;
-  font-weight: 400;
-  color: var(--ink-3);
-  background: var(--bg);
-  border-radius: var(--pill);
-  padding: 0.1rem 0.5rem;
-}
-
-/* Child chart box */
-
-.chartLink {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.45rem;
-  justify-content: center;
-  padding: 1rem 1.1rem;
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  color: var(--ink);
-  text-decoration: none;
-  box-shadow: var(--shadow-card);
-  transition: opacity var(--fade) var(--ease);
-}
-
-.chartTitle {
-  font-size: 1rem;
-  line-height: 1.2;
-}
-
-.chartDescription {
-  font-size: 0.78rem;
-  color: var(--ink-3);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.chartCta {
-  font-size: 0.8rem;
-  color: var(--place);
-}
-
-/* Screens from other charts */
-
-.context {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.35rem;
-  padding: 0.75rem;
-  background: var(--bg);
-  border: 1.5px dashed var(--line-2);
-  border-radius: var(--radius-lg);
-  color: var(--ink);
-  text-decoration: none;
-  transition: opacity var(--fade) var(--ease);
-}
-
-.context:hover {
-  border-color: var(--place);
-}
-
-.contextChart {
-  font-size: 0.65rem;
-  font-weight: 400;
-  color: var(--muted);
-}
-
-/* A collapsed section: the name and how many places are inside. */
-
-.summary {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.35rem;
-  padding: 0.85rem 1rem;
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  color: var(--ink);
-  text-decoration: none;
-  box-shadow: var(--shadow-card);
-}
-
-.summary:hover {
-  border-color: var(--place);
-}
-
-.summary[data-status='failed'] {
-  border-color: var(--failed);
-}
-
-.summary[data-status='flaky'] {
-  border-color: var(--flaky);
-}
-
-.summaryName {
-  display: flex;
-  gap: 0.45rem;
-  align-items: center;
-  font-size: 0.95rem;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.summaryCount {
-  font-size: 0.8rem;
-  color: var(--ink-2);
-}
-
-/* The flow pane owns the drag. These boxes still need their own clicks. */
-.screen,
-.summary,
-.chartLink,
-.context {
-  pointer-events: all;
-}
-
-.contextName {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.35rem;
-  align-items: baseline;
-  font-size: 0.8rem;
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-/* Edges and event chips */
-
-.edge {
-  fill: none;
-  stroke: var(--line-2);
-  stroke-width: 2;
-  transition:
-    stroke var(--fade) var(--ease),
-    opacity var(--fade) var(--ease);
-}
-
-.edge[data-kind='user'][data-status='passed'],
-.edge[data-kind='user'][data-status='flaky'] {
-  stroke: var(--user-line);
-}
-.edge[data-kind='system'][data-status='passed'],
-.edge[data-kind='system'][data-status='flaky'] {
-  stroke: var(--system-line);
-}
-.edge[data-kind='time'][data-status='passed'],
-.edge[data-kind='time'][data-status='flaky'] {
-  stroke: var(--time-line);
-}
-.edge[data-kind='hand-off'][data-status='passed'] {
-  stroke: var(--handoff-line);
-}
-.edge[data-status='failed'] {
-  stroke: var(--failed-line);
-}
-.edge[data-unchecked='true'] {
-  stroke-dasharray: 6 5;
-}
-.edge[data-selected='true'],
-.edge[data-highlight='true'] {
-  stroke: var(--place);
-  stroke-width: 2.5;
-  stroke-dasharray: none;
-}
-.edge[data-dimmed='true'] {
-  opacity: 0.25;
-}
-
-.chip {
-  position: absolute;
-  z-index: 1;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0 0.6rem 0 0.4rem;
-  border-radius: var(--pill);
-  font-size: 0.72rem;
-  font-weight: 600;
-  text-decoration: none;
-  white-space: nowrap;
-  overflow: hidden;
-  border: 1.5px solid;
-  pointer-events: all;
-  transition:
-    transform 160ms var(--ease),
-    box-shadow 160ms var(--ease),
-    opacity var(--fade) var(--ease);
-}
-
-.chip[data-kind='user'] {
-  background: var(--user-soft);
-  color: var(--user-ink);
-  border-color: var(--user-line);
-}
-.chip[data-kind='system'] {
-  background: var(--system-soft);
-  color: var(--system-ink);
-  border-color: var(--system-line);
-}
-.chip[data-kind='time'] {
-  background: var(--time-soft);
-  color: var(--time-ink);
-  border-color: var(--time-line);
-}
-.chip[data-kind='hand-off'] {
-  background: var(--handoff-soft);
-  color: var(--handoff-ink);
-  border-color: var(--handoff-line);
-}
-.chip[data-unchecked='true'] {
-  background: var(--bg);
-  color: var(--ink-3);
-  border-color: var(--line-2);
-  border-style: dashed;
-}
-.chip[data-status='failed'] {
-  border-color: var(--failed);
-  color: var(--failed-ink);
-}
-.chip[data-status='flaky'] {
-  border-color: var(--flaky-ink);
-  color: var(--flaky-ink);
-}
-.chip[data-selected='true'] {
-  outline: 2px solid var(--place);
-  outline-offset: 1px;
-}
-.chip[data-highlight='true'] {
-  box-shadow: var(--shadow-raised);
-}
-.chip[data-dimmed='true'] {
-  opacity: 0.3;
-}
-.chip:hover {
-  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
-}
-
-.chipIcon {
-  flex: none;
-  display: inline-grid;
-  place-items: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.85);
-}
-
-.chip[data-kind='user'] .chipIcon {
-  color: var(--user);
-}
-.chip[data-kind='system'] .chipIcon {
-  color: var(--system);
-}
-.chip[data-kind='time'] .chipIcon {
-  color: var(--time);
-}
-.chip[data-kind='hand-off'] .chipIcon {
-  color: var(--handoff);
-}
-
-.chipText {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.stepNo {
-  flex: none;
-  background: var(--user);
-  color: #fff;
-  border-radius: var(--pill);
-  min-width: 1.3rem;
-  height: 1.3rem;
-  display: inline-grid;
-  place-items: center;
-  font-size: 0.7rem;
-}
-
-/* Controls */
-
-.zoom {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  z-index: 5;
-}
-
-.zoomButton {
-  width: 2.25rem;
-  height: 2.25rem;
-  display: grid;
-  place-items: center;
-  border: 1px solid var(--line);
-  background: var(--card);
-  color: var(--ink);
-  border-radius: var(--pill);
-  cursor: pointer;
-  box-shadow: var(--shadow-card);
-}
-
-.zoomButton:hover {
-  border-color: var(--place);
-  color: var(--place);
-}
-
-.legendSlot {
-  position: absolute;
-  left: 1rem;
-  bottom: 1rem;
-  z-index: 5;
-  max-width: calc(100% - 15rem);
-}
-
-.minimap {
-  width: 180px;
-  height: 120px;
-}
-
-/* Loading and messages */
-
-.skeleton,
-.mapMessage {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1.25rem;
-  color: var(--muted);
-  background: radial-gradient(circle at 1px 1px, #e2e8f0 1px, transparent 0) 0 0 / 22px 22px;
-}
-
-.skeletonRow {
-  display: flex;
-  gap: 2.5rem;
-}
-
-.skeletonPhone {
-  width: 120px;
-  height: 260px;
-  border-radius: 1rem;
-  border: 2px dashed var(--line-2);
-  background: linear-gradient(100deg, var(--bg-2) 30%, #e9eef5 50%, var(--bg-2) 70%) 0 0 / 300% 100%;
-  animation: shimmer 1.4s linear infinite;
-}
-
-@keyframes shimmer {
-  to {
-    background-position: -150% 0;
-  }
-}
-
-.skeletonLabel {
-  font-size: 0.9rem;
-}
-
-.retryButton {
-  border: 1px solid var(--line);
-  background: var(--card);
-  color: var(--user);
-  border-radius: var(--pill);
-  padding: 0.4rem 0.9rem;
-  cursor: pointer;
-}
-
-@media (max-width: 900px) {
-  .legendSlot {
-    max-width: calc(100% - 2rem);
-    bottom: auto;
-    top: 1rem;
-    right: 4rem;
-  }
-  .minimap {
-    display: none;
-  }
-}
+/* React Flow requires geometry and SVG edge styles. Ordinary UI uses Mantine. */
+.handle { opacity: 0; pointer-events: none; }
+.markers { position: absolute; width: 0; height: 0; }
+.node { text-decoration: none; color: var(--mantine-color-text); }
+.node[data-selected='true'] { outline: 2px solid var(--mantine-primary-color-filled); }
+.node[data-status='failed'] { border-color: var(--mantine-color-red-6); }
+.node[data-dimmed='true'], .chip[data-dimmed='true'], .edge[data-dimmed='true'] { opacity: 0.35; }
+.edge { fill: none; stroke: var(--mantine-color-gray-6); stroke-width: 1.5; }
+.edge[data-kind='user'] { stroke: var(--mantine-color-blue-7); }
+.edge[data-selected='true'], .edge[data-highlight='true'] { stroke: var(--mantine-primary-color-filled); stroke-width: 2.5; }
+.edge[data-unchecked='true'] { stroke: var(--mantine-color-gray-4); stroke-dasharray: 5 4; }
+.chip { position: absolute; pointer-events: all; max-width: none; text-decoration: none; }