@crvouga/atlas 0.10.2 → 0.12.0

package/packages/visualizer/src/components/Status.module.css

@@ -1,116 +0,0 @@
-.dot {
-  width: 0.6rem;
-  height: 0.6rem;
-  border-radius: 50%;
-  display: inline-block;
-  flex: none;
-  background: var(--faint);
-}
-
-.dot[data-status='passed'] {
-  background: var(--passed);
-}
-.dot[data-status='failed'] {
-  background: var(--failed);
-}
-.dot[data-status='flaky'] {
-  background: var(--flaky);
-}
-.dot[data-status='not-reached'] {
-  background: transparent;
-  border: 1.5px dashed var(--faint);
-}
-.dot[data-status='not-yet-run'],
-.dot[data-status='spec-only'] {
-  background: transparent;
-  border: 1.5px solid var(--line-2);
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: var(--pill);
-  padding: 0.15rem 0.6rem;
-  background: #eef2f7;
-  color: var(--muted);
-  white-space: nowrap;
-}
-
-.badge[data-status='passed'] {
-  background: var(--passed-soft);
-  color: var(--passed-ink);
-}
-.badge[data-status='failed'] {
-  background: var(--failed-soft);
-  color: var(--failed-ink);
-}
-.badge[data-status='flaky'] {
-  background: var(--flaky-soft);
-  color: var(--flaky-ink);
-}
-.badge[data-status='not-reached'] {
-  background: var(--bg);
-  border: 1px dashed var(--line-2);
-}
-.badge[data-status='spec-only'],
-.badge[data-status='not-yet-run'] {
-  background: var(--bg);
-  border: 1px solid var(--line);
-}
-
-.summary {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  min-width: 0;
-}
-
-.summaryLabel {
-  font-size: 0.8rem;
-  color: var(--muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.summaryLabel strong {
-  color: var(--ink);
-  font-weight: 650;
-}
-
-.bar {
-  display: flex;
-  height: 0.5rem;
-  border-radius: var(--pill);
-  background: #eef2f7;
-  overflow: hidden;
-}
-
-.bar[data-unrun='true'] {
-  background: repeating-linear-gradient(-45deg, #eef2f7, #eef2f7 5px, #e2e8f0 5px, #e2e8f0 10px);
-}
-
-.seg {
-  height: 100%;
-  transition: width var(--fade) var(--ease);
-}
-
-.seg[data-status='passed'] {
-  background: var(--passed);
-}
-.seg[data-status='flaky'] {
-  background: var(--flaky);
-}
-.seg[data-status='failed'] {
-  background: var(--failed);
-}
-.seg[data-status='not-reached'] {
-  background: var(--not-reached);
-}
-.seg[data-status='not-yet-run'],
-.seg[data-status='spec-only'] {
-  background: transparent;
-}

package/packages/visualizer/src/components/icons.tsx

@@ -1,156 +0,0 @@
-import type { SVGProps } from 'react';
-
-type IconProps = SVGProps<SVGSVGElement> & { size?: number };
-
-function Svg({ size = 14, children, ...rest }: IconProps) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false" {...rest}>
-      {children}
-    </svg>
-  );
-}
-
-export const PlayIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M4.5 2.8v10.4a.6.6 0 0 0 .9.5l8.2-5.2a.6.6 0 0 0 0-1L5.4 2.3a.6.6 0 0 0-.9.5Z" fill="currentColor" />
-  </Svg>
-);
-
-export const BoltIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M9.2 1.2 3.4 9.1h4.1l-1 5.7 6.1-8.2H8.4l.8-5.4Z" fill="currentColor" />
-  </Svg>
-);
-
-export const ClockIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <circle cx="8" cy="8" r="6.2" stroke="currentColor" strokeWidth="1.8" />
-    <path d="M8 4.6V8l2.4 1.6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
-  </Svg>
-);
-
-export const HandOffIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M3 4.5h6.5a3 3 0 0 1 0 6H4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
-    <path d="m6.5 8.2-2.4 2.3 2.4 2.3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
-  </Svg>
-);
-
-export const PlusIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
-  </Svg>
-);
-
-export const MinusIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M3 8h10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
-  </Svg>
-);
-
-export const FitIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M2.5 6V2.5H6M10 2.5h3.5V6M13.5 10v3.5H10M6 13.5H2.5V10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
-  </Svg>
-);
-
-export const CloseIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="m4 4 8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
-  </Svg>
-);
-
-export const NoteIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <circle cx="8" cy="8" r="6.2" stroke="currentColor" strokeWidth="1.6" />
-    <path d="M8 7.2v4M8 4.8v.1" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
-  </Svg>
-);
-
-export const WarnIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M8 2.2 1.8 13h12.4L8 2.2Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
-    <path d="M8 6.5v3M8 11.3v.1" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
-  </Svg>
-);
-
-export const MapIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="m1.8 3.6 4-1.4 4.4 1.6 4-1.4v10l-4 1.4-4.4-1.6-4 1.4v-10Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
-    <path d="M5.8 2.2v10M10.2 3.8v10" stroke="currentColor" strokeWidth="1.5" />
-  </Svg>
-);
-
-export const ChevronIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="m6 3.5 4.5 4.5L6 12.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
-  </Svg>
-);
-
-export const ChevronDownIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="m3.5 6 4.5 4.5L12.5 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
-  </Svg>
-);
-
-export const SearchIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <circle cx="7" cy="7" r="4.6" stroke="currentColor" strokeWidth="1.7" />
-    <path d="m10.5 10.5 3.2 3.2" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
-  </Svg>
-);
-
-export const CheckIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="m3.2 8.4 3 3 6.6-6.8" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />
-  </Svg>
-);
-
-export const SlidersIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M2.5 4.5h6M12 4.5h1.5M2.5 11.5H4M7.5 11.5h6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
-    <circle cx="10.2" cy="4.5" r="1.7" stroke="currentColor" strokeWidth="1.6" />
-    <circle cx="5.8" cy="11.5" r="1.7" stroke="currentColor" strokeWidth="1.6" />
-  </Svg>
-);
-
-export const ArrowLeftIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M13 8H3.5M7.5 3.8 3.3 8l4.2 4.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
-  </Svg>
-);
-
-export const ArrowRightIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M3 8h9.5M8.5 3.8 12.7 8l-4.2 4.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
-  </Svg>
-);
-
-export const PauseIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <rect x="4" y="3" width="2.8" height="10" rx="0.8" fill="currentColor" />
-    <rect x="9.2" y="3" width="2.8" height="10" rx="0.8" fill="currentColor" />
-  </Svg>
-);
-
-export const ExternalIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M9.5 2.8h3.7v3.7M13 3 7.6 8.4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M11.5 9.5v2.6a1.1 1.1 0 0 1-1.1 1.1H3.9a1.1 1.1 0 0 1-1.1-1.1V5.6a1.1 1.1 0 0 1 1.1-1.1h2.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
-  </Svg>
-);
-
-export const RouteIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <circle cx="3.8" cy="12.2" r="1.8" stroke="currentColor" strokeWidth="1.6" />
-    <circle cx="12.2" cy="3.8" r="1.8" stroke="currentColor" strokeWidth="1.6" />
-    <path d="M5.6 12.2h4.2a2.2 2.2 0 0 0 0-4.4H6.2a2.2 2.2 0 0 1 0-4.4h4.2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
-  </Svg>
-);
-
-export const ReplayIcon = (p: IconProps) => (
-  <Svg {...p}>
-    <path d="M3 8a5 5 0 1 0 1.6-3.7" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
-    <path d="M3.2 2.6v2.6h2.6" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
-  </Svg>
-);

package/packages/visualizer/src/evidence/artifacts.module.css

@@ -1,213 +0,0 @@
-.panel {
-  display: grid;
-  gap: 14px;
-  margin: 12px 0;
-}
-
-.panel h4 {
-  margin: 0 0 6px;
-  font-size: 0.78rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--faint);
-}
-
-.chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.chip {
-  display: inline-flex;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: var(--pill);
-  background: var(--unrun);
-  color: var(--ink-3);
-  font-size: 0.78rem;
-}
-
-.chip b {
-  font-weight: 600;
-  color: var(--ink-2, inherit);
-}
-
-.links a {
-  font-size: 0.85rem;
-}
-
-.gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 12px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.figure {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  min-width: 0;
-}
-
-.figure[data-wide] {
-  grid-column: 1 / -1;
-}
-
-.figure img,
-.figure video {
-  width: 100%;
-  max-height: 420px;
-  object-fit: contain;
-  border: 1px solid var(--line, #dfe3e8);
-  border-radius: 6px;
-  background: #f6f7f9;
-}
-
-.figure iframe {
-  width: 100%;
-  height: 360px;
-  border: 1px solid var(--line, #dfe3e8);
-  border-radius: 6px;
-  background: #fff;
-}
-
-.figure audio {
-  width: 100%;
-}
-
-.figure figcaption {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: baseline;
-  font-size: 0.8rem;
-  color: var(--ink-3);
-}
-
-.figure figcaption strong {
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.role {
-  padding: 0 6px;
-  border-radius: var(--pill);
-  background: var(--unrun);
-  font-size: 0.72rem;
-}
-
-.text {
-  max-height: 260px;
-  margin: 0;
-  padding: 8px 10px;
-  overflow: auto;
-  border: 1px solid var(--line, #dfe3e8);
-  border-radius: 6px;
-  background: #f6f7f9;
-  font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.timeline,
-.timeline ol {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.timeline ol {
-  margin-left: 18px;
-  padding-left: 8px;
-  border-left: 1px solid var(--line, #dfe3e8);
-}
-
-.step {
-  display: grid;
-  gap: 4px;
-}
-
-.stepRow {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 0.9rem;
-}
-
-.stepRow .spacer {
-  flex: 1;
-}
-
-.stepKind,
-.stepTime {
-  font-size: 0.75rem;
-  color: var(--faint);
-}
-
-.step[data-status='failed'] > .stepRow .stepName {
-  color: var(--failed);
-}
-
-.stepDetail {
-  margin: 0 0 0 24px;
-  font-size: 0.82rem;
-  color: var(--ink-3);
-  white-space: pre-wrap;
-}
-
-.notes {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.note {
-  display: flex;
-  gap: 8px;
-  align-items: baseline;
-  font-size: 0.88rem;
-}
-
-.level {
-  flex: none;
-  padding: 0 7px;
-  border-radius: var(--pill);
-  background: var(--unrun);
-  color: var(--ink-3);
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.level[data-level='warning'] {
-  background: #fff4d6;
-  color: #7a5200;
-}
-
-.level[data-level='error'] {
-  background: #fde4e4;
-  color: var(--failed);
-}
-
-.where {
-  color: var(--faint);
-  font-size: 0.78rem;
-}
-
-.raw summary {
-  cursor: pointer;
-  font-size: 0.82rem;
-  color: var(--ink-3);
-}