@crvouga/atlas 0.10.2 → 0.12.0

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

@@ -1,136 +0,0 @@
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.78rem;
-  color: var(--muted);
-  background: transparent;
-  border: 1px solid var(--line);
-  border-radius: var(--pill);
-  padding: 0.3rem 0.7rem;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.trigger:hover {
-  border-color: var(--line-2);
-  color: var(--ink-2);
-}
-
-.trigger[data-has-problems='true'] {
-  color: var(--system-ink);
-}
-
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(15, 23, 42, 0.18);
-  z-index: 60;
-}
-
-.sheet {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: min(34rem, 100vw);
-  background: var(--card);
-  border-left: 1px solid var(--line);
-  box-shadow: var(--shadow-pop);
-  z-index: 61;
-  display: flex;
-  flex-direction: column;
-  padding: 1.25rem 1.25rem 0;
-}
-
-.head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.title {
-  margin: 0;
-  font-size: 1.15rem;
-}
-
-.close {
-  border: 0;
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  width: 2rem;
-  height: 2rem;
-  display: grid;
-  place-items: center;
-  border-radius: var(--pill);
-}
-
-.close:hover {
-  background: var(--bg-2);
-}
-
-.lead {
-  margin: 0.4rem 0 1rem;
-  color: var(--ink-3);
-  font-size: 0.9rem;
-}
-
-.list {
-  overflow-y: auto;
-  padding-bottom: 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.fileName {
-  margin: 0 0 0.4rem;
-  font-family: var(--mono);
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: var(--ink-2);
-  word-break: break-all;
-}
-
-.items {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.item {
-  display: grid;
-  grid-template-columns: 4.6rem 1fr;
-  gap: 0.6rem;
-  font-size: 0.85rem;
-  color: var(--ink-2);
-  background: var(--bg);
-  border-radius: var(--radius-sm);
-  padding: 0.5rem 0.65rem;
-}
-
-.severity {
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--muted);
-  padding-top: 0.1rem;
-}
-
-.item[data-severity='error'] .severity {
-  color: var(--failed-ink);
-}
-
-.item[data-severity='warning'] .severity {
-  color: var(--system-ink);
-}
-
-.path {
-  font-weight: 600;
-  color: var(--ink);
-}

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

@@ -1,114 +0,0 @@
-.header {
-  position: relative;
-  z-index: 20;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 16px;
-  min-height: 54px;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--line);
-  background: var(--bg);
-}
-.home {
-  color: var(--ink);
-  font-size: 15px;
-  font-weight: 700;
-  text-decoration: none;
-}
-.breadcrumbs, .tools { display: flex; align-items: center; min-width: 0; gap: 6px; }
-.breadcrumbs { color: var(--faint); }
-.tools { justify-content: flex-end; }
-.picker { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
-.picker::after {
-  position: absolute;
-  right: 10px;
-  top: 12px;
-  width: 5px;
-  height: 5px;
-  border-right: 1.5px solid var(--ink-3);
-  border-bottom: 1.5px solid var(--ink-3);
-  transform: rotate(45deg);
-  pointer-events: none;
-  content: '';
-}
-.select, .search, .menu > summary, .sources {
-  box-sizing: border-box;
-  height: 32px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--ink);
-  font: 500 13px var(--font);
-  cursor: pointer;
-}
-.select {
-  appearance: none;
-  min-width: 0;
-  max-width: min(24rem, 30vw);
-  padding: 0 28px 0 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.picker[data-project] .select { max-width: 200px; border-color: var(--line); }
-.select:disabled { color: var(--ink-3); cursor: default; }
-.select:hover:not(:disabled), .search:hover, .menu > summary:hover, .sources:hover { background: var(--bg-2); }
-.select:focus-visible, .search:focus-visible, .menu > summary:focus-visible, .sources:focus-visible, .tabs a:focus-visible {
-  outline: 2px solid var(--place);
-  outline-offset: 2px;
-}
-.search { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 0; color: var(--ink-3); }
-.menu { position: relative; min-width: 0; }
-.menu > summary { display: flex; align-items: center; gap: 8px; padding: 0 10px; list-style: none; white-space: nowrap; }
-.menu > summary::-webkit-details-marker { display: none; }
-.menu[data-tools] > summary { width: 32px; justify-content: center; padding: 0; font-size: 16px; letter-spacing: 1px; }
-.menu[open] > summary { background: var(--bg-2); }
-.dropdown {
-  position: absolute;
-  z-index: 100;
-  top: calc(100% + 8px);
-  left: 0;
-  min-width: 200px;
-  max-width: min(320px, calc(100vw - 32px));
-  padding: 6px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--bg);
-  box-shadow: 0 8px 24px #00000014;
-}
-.menu:not([open]) > .dropdown { display: none; }
-.menu[data-tools] .dropdown { left: auto; right: 0; width: 260px; }
-.tabs { display: flex; flex-direction: column; }
-.tabs a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 4px; color: var(--ink-3); font-size: 13px; text-decoration: none; }
-.tabs a:hover { background: var(--bg-2); color: var(--ink); }
-.tabs a[aria-current='page'] { background: var(--place-soft); color: var(--ink); font-weight: 600; }
-.failing { color: var(--failed-ink); font-size: 12px; }
-.options { display: flex; flex-direction: column; gap: 4px; }
-.optionGroup { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px 10px; border-bottom: 1px solid var(--line); }
-.optionLabel { padding: 0 6px; color: var(--ink-3); font-size: 11px; }
-.optionGroup .picker, .optionGroup .select { width: 100%; max-width: 100%; }
-.optionGroup .select { border-color: var(--line); }
-.sources { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 10px; text-decoration: none; text-align: left; }
-.sources span { color: var(--ink-3); font-weight: 400; }
-.sources[data-filtered], .sources[data-filtered] span { color: var(--place); }
-.connection { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 32px; flex: none; }
-.connectionDot, .liveDot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
-.connection[data-status='live'] .connectionDot { background: var(--passed); }
-.connection[data-status='reconnecting'] .connectionDot { background: var(--failed-ink); }
-.live { display: flex; align-items: center; gap: 6px; padding: 6px 10px; color: var(--ink-3); font-size: 12px; }
-.liveDot { background: var(--place); }
-.notice { margin-top: 4px; padding: 8px 4px 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; line-height: 1.5; }
-.notice p { margin: 0 6px 6px; }
-@media (max-width: 700px) {
-  .header { gap: 4px 10px; padding: 6px 12px; }
-  .home { grid-column: 1; grid-row: 1; }
-  .tools { grid-column: 2 / -1; grid-row: 1; }
-  .breadcrumbs { grid-column: 1 / -1; grid-row: 2; }
-  .breadcrumbs .picker { flex: 1; }
-  .breadcrumbs .select { width: 100%; max-width: 100%; }
-  .picker[data-project] .select { max-width: min(180px, 43vw); }
-  .menu[data-tools] .dropdown { position: fixed; top: 44px; left: 12px; right: 12px; width: auto; max-width: none; }
-}
-
-.picker[data-running] .select { padding-left: 28px; }
-.pickerActivity { position: absolute; left: 9px; top: 10px; display: flex; pointer-events: none; }

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

@@ -1,84 +0,0 @@
-.legend {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.94);
-  padding: 0.5rem 0.8rem;
-  border-radius: var(--radius);
-  border: 1px solid var(--line);
-  font-size: 0.78rem;
-  color: var(--ink-2);
-  box-shadow: var(--shadow-card);
-}
-
-.item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  white-space: nowrap;
-}
-
-.sep {
-  width: 1px;
-  height: 1rem;
-  background: var(--line);
-}
-
-.chip {
-  display: inline-grid;
-  place-items: center;
-  width: 1.6rem;
-  height: 1.1rem;
-  border-radius: var(--pill);
-  border: 1.5px solid;
-}
-
-.chip[data-kind='user'] {
-  background: var(--user-soft);
-  color: var(--user);
-  border-color: var(--user-line);
-}
-
-.chip[data-kind='system'] {
-  background: var(--system-soft);
-  color: var(--system);
-  border-color: var(--system-line);
-}
-
-.chip[data-kind='time'] {
-  background: var(--time-soft);
-  color: var(--time);
-  border-color: var(--time-line);
-}
-
-.chip[data-kind='none'] {
-  background: var(--bg);
-  border-color: var(--line-2);
-  border-style: dashed;
-}
-
-.frame {
-  width: 0.8rem;
-  height: 1.1rem;
-  border-radius: 0.2rem;
-  border: 2px solid var(--line);
-  background: var(--card);
-}
-
-.frame[data-status='passed'] {
-  border-color: var(--passed-line);
-}
-
-.frame[data-status='flaky'] {
-  border-color: var(--flaky);
-}
-
-.frame[data-status='failed'] {
-  border-color: var(--failed);
-}
-
-.frame[data-status='none'] {
-  border-style: dashed;
-  border-color: var(--faint);
-}

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

@@ -1,312 +0,0 @@
-.phone {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 390 / 844;
-  border-radius: 0.65rem;
-  overflow: hidden;
-  background: var(--bg-2);
-  display: block;
-}
-
-.phone[data-size='full'] {
-  border-radius: 1.4rem;
-  border: 1px solid var(--line);
-  box-shadow: var(--shadow-raised);
-}
-
-.phone[data-variant='sketch'] {
-  background:
-    radial-gradient(circle at 1px 1px, rgba(28, 36, 48, 0.08) 1px, transparent 0) 0 0 / 10px 10px,
-    linear-gradient(180deg, #f7fafb 0%, var(--bg) 100%);
-  border: 1px dashed var(--line-2);
-}
-
-.phone[data-size='full'][data-variant='sketch'] {
-  border-width: 1px;
-}
-
-.notch {
-  position: absolute;
-  top: 5px;
-  left: 50%;
-  width: 34%;
-  height: 7px;
-  transform: translateX(-50%);
-  border-radius: var(--pill);
-  background: rgba(28, 36, 48, 0.1);
-}
-
-.phone[data-size='full'] .notch {
-  top: 12px;
-  height: 16px;
-  width: 30%;
-}
-
-.sketch {
-  position: absolute;
-  inset: 18px 8px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  text-align: left;
-  overflow: hidden;
-}
-
-.phone[data-size='full'] .sketch {
-  inset: 44px 22px 22px;
-  gap: 12px;
-}
-
-.reason {
-  align-self: flex-start;
-  font-size: 7.5px;
-  font-weight: 400;
-  padding: 2px 6px;
-  border-radius: var(--pill);
-  background: var(--bg);
-  color: var(--ink-3);
-  border: 1px solid var(--line);
-}
-
-.reason[data-reason='not-reached'] {
-  color: var(--muted);
-  border-style: dashed;
-  border-color: var(--line-2);
-}
-
-.reason[data-reason='processing'] {
-  color: var(--time-ink);
-  border-color: var(--time-line);
-}
-
-.phone[data-size='full'] .reason {
-  font-size: 0.7rem;
-  padding: 0.2rem 0.6rem;
-}
-
-.title {
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 1.2;
-  color: var(--ink);
-}
-
-.phone[data-size='full'] .title {
-  font-size: 1.15rem;
-}
-
-.missing {
-  font-size: 8px;
-  color: var(--ink-3);
-}
-
-.phone[data-size='full'] .missing {
-  font-size: 0.85rem;
-}
-
-.description {
-  font-size: 8px;
-  line-height: 1.35;
-  color: var(--ink-3);
-  display: -webkit-box;
-  -webkit-line-clamp: 6;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.phone[data-size='full'] .description {
-  font-size: 0.85rem;
-  -webkit-line-clamp: 8;
-}
-
-.lines {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 2px;
-}
-
-.line {
-  display: grid;
-  grid-template-columns: 8px 1fr;
-  gap: 4px;
-  align-items: start;
-  font-size: 7px;
-  line-height: 1.3;
-  color: var(--muted);
-  background: rgba(255, 255, 255, 0.75);
-  border-radius: 4px;
-  padding: 3px 4px;
-}
-
-.line > span:last-child {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.phone[data-size='full'] .line {
-  font-size: 0.75rem;
-  grid-template-columns: 0.75rem 1fr;
-  padding: 0.4rem 0.55rem;
-  gap: 0.45rem;
-}
-
-.tick {
-  margin-top: 2px;
-  width: 6px;
-  height: 6px;
-  border-radius: 2px;
-  border: 1.2px solid var(--user-line);
-}
-
-.phone[data-size='full'] .tick {
-  width: 0.7rem;
-  height: 0.7rem;
-}
-
-.bars {
-  margin-top: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.barWide,
-.barNarrow,
-.button {
-  display: block;
-  height: 5px;
-  border-radius: var(--pill);
-  background: rgba(28, 36, 48, 0.08);
-}
-
-.barNarrow {
-  width: 62%;
-}
-
-.card {
-  display: block;
-  height: 46px;
-  border-radius: 6px;
-  margin-bottom: 4px;
-  background: rgba(255, 255, 255, 0.8);
-  border: 1px solid var(--line);
-}
-
-.phone[data-size='full'] .card {
-  height: 7rem;
-  border-radius: 0.8rem;
-}
-
-.button {
-  height: 12px;
-  margin-top: 4px;
-  background: rgba(28, 36, 48, 0.12);
-}
-
-.phone[data-size='full'] .barWide,
-.phone[data-size='full'] .barNarrow {
-  height: 10px;
-}
-
-.phone[data-size='full'] .button {
-  height: 2.4rem;
-}
-
-.design {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.designTag {
-  position: absolute;
-  left: 6px;
-  right: 6px;
-  bottom: 6px;
-  text-align: center;
-  font-size: 8px;
-  font-weight: 400;
-  padding: 3px 4px;
-  border-radius: var(--pill);
-  color: var(--ink-2);
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid var(--line);
-}
-
-.phone[data-size='full'] .designTag {
-  font-size: 0.75rem;
-  bottom: 14px;
-  left: 14px;
-  right: 14px;
-}
-
-.underlay {
-  position: absolute;
-  inset: 0;
-}
-
-.underlay > .phone {
-  height: 100%;
-}
-
-.skeleton {
-  position: absolute;
-  inset: 0;
-  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;
-  }
-}
-
-.img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: top;
-  display: block;
-  opacity: 0;
-  transition: opacity var(--fade) var(--ease);
-}
-
-.phone[data-state='loaded'] .img {
-  opacity: 1;
-}
-
-.failed {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px;
-  text-align: center;
-  font-size: 8.5px;
-  color: var(--muted);
-  background: var(--bg);
-}
-
-.phone[data-size='full'] .failed {
-  font-size: 0.85rem;
-}
-
-.retry {
-  font-size: inherit;
-  border: 1px solid var(--line);
-  background: var(--card);
-  color: var(--user);
-  border-radius: var(--pill);
-  padding: 2px 8px;
-  cursor: pointer;
-}