@crvouga/atlas 0.10.2 → 0.12.0

package/packages/visualizer/src/find/Finder.module.css

@@ -1,168 +0,0 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-  background: rgba(15, 20, 25, 0.28);
-}
-
-.content {
-  position: fixed;
-  z-index: 41;
-  top: 12vh;
-  left: 50%;
-  width: min(40rem, calc(100vw - 1.5rem));
-  transform: translateX(-50%);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  background: var(--bg);
-  box-shadow: var(--shadow-pop);
-  overflow: hidden;
-}
-
-.command {
-  display: flex;
-  flex-direction: column;
-  max-height: min(32rem, 70vh);
-}
-
-.input {
-  width: 100%;
-  height: 3.25rem;
-  padding: 0 1rem;
-  border: 0;
-  border-bottom: 1px solid var(--line);
-  background: transparent;
-  font-size: 1rem;
-}
-
-.input:focus {
-  outline: none;
-}
-
-.list {
-  min-height: 0;
-  overflow: auto;
-  padding: 0.35rem;
-}
-
-.empty {
-  margin: 0;
-  padding: 1.25rem 0.75rem;
-  color: var(--ink-3);
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: 0.65rem;
-  width: 100%;
-  padding: 0.45rem 0.6rem;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-}
-
-.item[data-selected='true'] {
-  background: var(--place-soft);
-}
-
-.text {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  flex: 1;
-}
-
-.title {
-  overflow: hidden;
-  color: var(--ink);
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.snippet {
-  overflow: hidden;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.meta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex: none;
-  max-width: 45%;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-}
-
-.subtitle {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kind {
-  flex: none;
-  font-weight: 600;
-}
-
-.footer {
-  display: flex;
-  gap: 1rem;
-  padding: 0.45rem 0.9rem;
-  border-top: 1px solid var(--line);
-  color: var(--ink-3);
-  font-size: 0.75rem;
-}
-
-.help {
-  position: fixed;
-  z-index: 42;
-  top: 18vh;
-  left: 50%;
-  width: min(26rem, calc(100vw - 1.5rem));
-  transform: translateX(-50%);
-  padding: 1.25rem 1.35rem 1rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  background: var(--bg);
-  box-shadow: var(--shadow-pop);
-}
-
-.help h2 {
-  margin: 0 0 0.75rem;
-  font-size: 1rem;
-}
-
-.help ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.help li {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.35rem 0;
-  border-top: 1px solid var(--line);
-}
-
-.help kbd {
-  color: var(--ink);
-  font-family: var(--font);
-  font-weight: 600;
-}
-
-.help button {
-  margin-top: 0.85rem;
-  padding: 0.35rem 0.8rem;
-  border: 1px solid var(--line-2);
-  border-radius: var(--pill);
-  background: var(--bg);
-  font-weight: 600;
-  cursor: pointer;
-}

package/packages/visualizer/src/looks/stage.module.css

@@ -1,300 +0,0 @@
-.stage {
-  --look-h: min(58vh, 620px);
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-  margin: 4px 0 8px;
-}
-
-.modes {
-  display: flex;
-  gap: 4px;
-  border-bottom: 1px solid var(--line);
-}
-
-.modes button {
-  padding: 8px 12px;
-  border: 0;
-  background: none;
-  color: var(--ink-3);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.modes button[aria-selected='true'] {
-  color: var(--ink);
-  font-weight: 600;
-  box-shadow: inset 0 -2px 0 var(--place);
-}
-
-.viewport {
-  display: grid;
-  justify-items: center;
-  align-content: start;
-  gap: 10px;
-  min-height: 12rem;
-  padding: 16px;
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  background:
-    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
-}
-
-.viewport:has(.moment) {
-  min-height: 0;
-  padding: 28px 20px;
-}
-
-.shot,
-.film {
-  display: block;
-  max-width: 100%;
-  max-height: var(--look-h);
-  object-fit: contain;
-  border-radius: 12px;
-  background: #fff;
-  box-shadow: var(--shadow-raised);
-}
-
-.film {
-  /* Phone clips stay phone-shaped. A wide clip uses the width of the plate. --ar is width / height, set once the file is known. */
-  --ar: 0.462;
-  width: min(100%, calc(var(--look-h) * var(--ar)));
-  height: auto;
-  background: #0e1216;
-}
-
-.shotFrame {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  line-height: 0;
-}
-
-.mark {
-  position: absolute;
-  width: 28px;
-  height: 28px;
-  margin: -14px 0 0 -14px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--place) 72%, transparent);
-  box-shadow:
-    0 0 0 7px color-mix(in srgb, var(--place) 28%, transparent),
-    var(--shadow-raised);
-  pointer-events: none;
-}
-
-.caption {
-  margin: 0;
-  color: var(--ink-2);
-  font-size: 0.8125rem;
-  text-align: center;
-}
-
-.caption[data-status='failed'] {
-  color: var(--failed-ink);
-  font-weight: 600;
-}
-
-.moment {
-  width: min(100%, 36rem);
-  margin: 0;
-  padding: 20px 22px;
-  border-radius: 12px;
-  background: var(--bg);
-  box-shadow: var(--shadow-raised);
-}
-
-.moment p {
-  margin: 0 0 6px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-
-.moment h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-  line-height: 1.3;
-}
-
-.story {
-  display: grid;
-  justify-items: center;
-  gap: 10px;
-  width: 100%;
-  margin: 0;
-}
-
-.storyCaption {
-  display: grid;
-  justify-items: center;
-  gap: 2px;
-  margin: 0;
-  text-align: center;
-}
-
-.storyCaption span {
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.storyCaption strong {
-  color: var(--ink);
-  font-size: 1rem;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-}
-
-.storyCaption[data-status='failed'] strong {
-  color: var(--failed-ink);
-}
-
-.moment[data-status='failed'] h3 {
-  color: var(--failed-ink);
-}
-
-.body {
-  width: 100%;
-  min-width: 0;
-}
-
-.transport {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.control {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 2rem;
-  padding: 0 12px;
-  border: 1px solid var(--line-2);
-  border-radius: var(--pill);
-  background: var(--bg);
-  color: var(--ink);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.stepper {
-  width: 2rem;
-  padding: 0;
-}
-
-.back {
-  transform: rotate(180deg);
-}
-
-.control:hover:enabled {
-  background: var(--bg-2);
-}
-
-.control:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.scrub {
-  flex: 1;
-  min-width: 8rem;
-  accent-color: var(--place);
-}
-
-.position {
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.strip,
-.chapters {
-  display: flex;
-  gap: 8px;
-  margin: 0;
-  padding: 2px;
-  overflow-x: auto;
-  list-style: none;
-  scroll-snap-type: x mandatory;
-}
-
-.strip button,
-.chapters button {
-  flex: none;
-  padding: 0;
-  border: 2px solid transparent;
-  border-radius: 10px;
-  background: var(--bg);
-  cursor: pointer;
-  scroll-snap-align: start;
-}
-
-.strip button {
-  width: 76px;
-  overflow: hidden;
-}
-
-.strip button[aria-current='true'],
-.chapters button[aria-current='true'] {
-  border-color: var(--place);
-}
-
-.strip img {
-  display: block;
-  width: 100%;
-  height: 96px;
-  object-fit: contain;
-  background: var(--bg-2);
-}
-
-.chip {
-  display: block;
-  height: 64px;
-  padding: 8px;
-  overflow: hidden;
-  color: var(--ink-2);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  line-height: 1.3;
-  text-align: left;
-}
-
-.chapters button {
-  max-width: 16rem;
-  padding: 6px 10px;
-  border-width: 1px;
-  border-color: var(--line-2);
-  border-radius: var(--pill);
-  color: var(--ink-2);
-  font-size: 0.75rem;
-  text-align: left;
-}
-
-.chapters button:hover {
-  background: var(--bg-2);
-}
-
-.notice,
-.quiet {
-  margin: 0;
-  color: var(--ink-3);
-  font-size: 0.8125rem;
-}
-
-.empty {
-  width: min(100%, 20rem);
-}

package/packages/visualizer/src/styles/global.css

@@ -1,105 +0,0 @@
-@import './tokens.css';
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body,
-#root {
-  height: 100%;
-}
-
-@media (max-width: 760px) {
-  html,
-  body,
-  #root {
-    height: auto;
-    min-height: 100%;
-  }
-}
-
-body {
-  margin: 0;
-  font-family: var(--font);
-  color: var(--ink);
-  background: var(--bg);
-  font-size: 0.9375rem;
-  line-height: 1.45;
-  -webkit-font-smoothing: antialiased;
-}
-
-a {
-  color: var(--place);
-}
-
-::selection {
-  background: var(--place-soft);
-}
-
-input,
-textarea {
-  caret-color: var(--place);
-}
-
-button,
-input,
-select {
-  font: inherit;
-  color: inherit;
-}
-
-:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-  border-radius: 0.375rem;
-}
-
-code,
-pre {
-  font-family: var(--mono);
-  font-size: 0.8rem;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.react-flow__attribution {
-  font-size: 9px;
-  opacity: 0.6;
-  background: transparent;
-}
-
-.react-flow__node:focus-visible {
-  outline: none;
-}
-
-.react-flow__node:focus-visible > * {
-  outline: 3px solid var(--focus);
-  outline-offset: 3px;
-}
-
-.react-flow__minimap {
-  border-radius: var(--radius);
-  border: 1px solid var(--line);
-  overflow: hidden;
-  box-shadow: var(--shadow-card);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    transition: none !important;
-    animation: none !important;
-  }
-}

package/packages/visualizer/src/styles/tokens.css

@@ -1,80 +0,0 @@
-:root {
-  /* Neutral surfaces and text. One blue marks what is chosen or can be followed. */
-  --ink: #0f1419;
-  --ink-2: #2f3336;
-  --ink-3: #536471;
-  --muted: #536471;
-  --faint: #8b98a5;
-  --line: #eff3f4;
-  --line-2: #cfd9de;
-  --bg: #ffffff;
-  --bg-2: #f7f9f9;
-  --card: #ffffff;
-  --place: #0b63ce;
-  --place-soft: #e8f1fd;
-
-  /* Who caused an event on the map. The person is the accent; everything else is gray. */
-  --user: #0b63ce;
-  --user-ink: #0a4fa6;
-  --user-soft: #e8f1fd;
-  --user-line: #b9d4f7;
-  --user-deep: #0a4fa6;
-  --user-ring: #d3e4fb;
-
-  --system: #536471;
-  --system-ink: #2f3336;
-  --system-soft: #f7f9f9;
-  --system-line: #cfd9de;
-  --system-wash: rgba(247, 249, 249, 0.97);
-
-  --time: #536471;
-  --time-ink: #2f3336;
-  --time-soft: #eff3f4;
-  --time-line: #cfd9de;
-
-  --handoff: #2f3336;
-  --handoff-ink: #0f1419;
-  --handoff-soft: #eff3f4;
-  --handoff-line: #cfd9de;
-
-  --passed: #1a7f37;
-  --passed-ink: #116329;
-  --passed-soft: #e6f4ea;
-  --passed-line: #b4dcc0;
-  --failed: #cf222e;
-  --failed-ink: #a40e26;
-  --failed-soft: #ffebe9;
-  --failed-line: #f7b9b5;
-  --flaky: #9a6700;
-  --flaky-ink: #7d4e00;
-  --flaky-soft: #fff8c5;
-  --not-reached: #cfd9de;
-  --unrun: #eff3f4;
-
-  --radius-sm: 0.5rem;
-  --radius: 0.75rem;
-  --radius-lg: 1rem;
-  --radius-xl: 1.25rem;
-  --pill: 999px;
-
-  --shadow-card: 0 1px 2px rgba(15, 20, 25, 0.06);
-  --shadow-raised: 0 2px 8px rgba(15, 20, 25, 0.06);
-  --shadow-sheet: 0 0 0 1px var(--line);
-  --shadow-pop: 0 8px 28px rgba(15, 20, 25, 0.14);
-  --focus: #0b63ce;
-
-  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-
-  --header-h: 3.25rem;
-  --index-w: 20rem;
-  --panel-w: min(30rem, 40vw);
-  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
-  --fade: 160ms;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --fade: 0ms;
-  }
-}