@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/styles/components/results-drawer.css

@@ -0,0 +1,224 @@
+/* Previous results drawer: .drawer, .close, versions, runs, compare. */
+
+/* --- previous results drawer --------------------------------------------------- */
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  background: rgb(0 0 0 / 0.45);
+}
+.drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(540px, 100vw);
+  background: var(--surface);
+  border-left: 1px solid var(--border-strong);
+  box-shadow: -16px 0 48px rgb(0 0 0 / 0.35);
+  overflow-y: auto;
+  padding: 0 20px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  animation: enter 0.18s ease-out;
+}
+@keyframes enter {
+  from {
+    transform: translateX(28px);
+    opacity: 0;
+  }
+}
+.drawer > header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px 0 12px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+.drawer > header .subtle {
+  font-size: 12px;
+}
+.drawer h2 {
+  font-size: 20px;
+}
+.drawer section > h3 {
+  margin-bottom: 10px;
+}
+.drawer h4 {
+  margin: 12px 0 8px;
+  font-size: 13px;
+}
+.close {
+  border: 1px solid var(--border-strong);
+  background: none;
+  border-radius: var(--radius-sm);
+  padding: 4px 10px;
+  font-size: 12px;
+  color: var(--text-2);
+  white-space: nowrap;
+}
+.close:hover {
+  color: var(--text);
+}
+
+.version {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+  background: var(--surface-2);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.version > header {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 13px;
+}
+.version-when {
+  font-weight: 600;
+}
+.version p {
+  margin: 0;
+}
+.version-text {
+  font-size: 13.5px;
+}
+.version-media {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.version-media.images {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.version-media video {
+  width: 100%;
+  max-height: 380px;
+  background: #000;
+  border-radius: 6px;
+  display: block;
+}
+.version-media audio {
+  width: 100%;
+  height: 32px;
+}
+.version-thumb {
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--surface-3);
+}
+.version-thumb img {
+  height: 120px;
+  max-width: 100%;
+  display: block;
+}
+.version footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 12.5px;
+}
+.run-row {
+  display: inline-flex;
+  gap: 6px;
+  align-items: baseline;
+  border: 0;
+  background: none;
+  padding: 0;
+  font-size: 12.5px;
+  text-align: left;
+}
+.run-row:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.compare-button {
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  border-radius: 999px;
+  padding: 3px 10px;
+  font-size: 12px;
+}
+.compare-button:hover {
+  border-color: var(--text-3);
+}
+
+.compare-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  background: rgb(0 0 0 / 0.8);
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+.compare {
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  width: min(1240px, 100%);
+  max-height: 100%;
+  overflow: auto;
+  padding: 16px 20px 20px;
+}
+.compare > header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.compare > header h2 {
+  margin-right: auto;
+  font-size: 17px;
+}
+.compare-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 16px;
+  align-items: start;
+}
+.compare-side video {
+  width: 100%;
+  max-height: 72vh;
+  background: #000;
+  border-radius: 6px;
+  display: block;
+}
+.compare-side img {
+  width: 100%;
+  border-radius: 6px;
+  background: var(--surface-3);
+  cursor: zoom-in;
+  display: block;
+}
+.compare-side audio {
+  width: 100%;
+}
+.compare .hint {
+  margin-top: 10px;
+}
+.compared-text {
+  margin: 0;
+  max-height: 64vh;
+  overflow: auto;
+  background: var(--log-bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px;
+  font: 11.5px / 1.5 var(--mono);
+  white-space: pre-wrap;
+}

package/studio/web/styles/components/segmented.css

@@ -0,0 +1,115 @@
+/* Segmented control, video tabs and counts; also the voice picker row and the archive rows of VideosPage. */
+
+.segmented {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  align-self: flex-start;
+}
+.segmented button {
+  border: 0;
+  background: none;
+  padding: 5px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-2);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.segmented button.active {
+  background: var(--bg);
+  color: var(--text);
+  box-shadow: 0 0 0 1px var(--border);
+}
+.segmented button:disabled {
+  opacity: 0.4;
+}
+.segmented.small button {
+  padding: 3px 10px;
+  font-size: 12.5px;
+}
+.videos-tabs {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  margin-bottom: 14px;
+}
+.videos-tabs .videos-order {
+  width: auto;
+  min-width: 190px;
+}
+.tab-count {
+  min-width: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+}
+.segmented button.active .tab-count {
+  background: var(--surface-2);
+}
+.voice-picker-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.vr-archive {
+  margin-left: auto;
+  border: 0;
+  background: none;
+  padding: 0;
+  color: var(--text-3);
+  font-size: 12px;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.vr-archive:not(:disabled):hover {
+  color: var(--text);
+}
+.vr-archive:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  text-decoration: none;
+}
+.video-row.archived {
+  background: var(--surface-2);
+}
+.vr-platforms {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.vr-plat {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+a.vr-plat:hover {
+  border-color: var(--border-strong);
+  background: var(--surface-2);
+}
+.vr-plat.scheduled {
+  border-style: dashed;
+  opacity: 0.55;
+}
+.vr-plat.draft {
+  border-style: dotted;
+}

package/studio/web/styles/components/side-panel-tab.css

@@ -0,0 +1,23 @@
+/* SidePanel.tsx floating tab: frosted glass. */
+
+/* side panel floating tab: frosted glass; the state color becomes a veil on top */
+.panel-tab.process-status {
+  background-color: color-mix(in srgb, var(--bg) 55%, transparent);
+  -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  backdrop-filter: blur(14px) saturate(1.4);
+}
+.panel-tab.done {
+  background-image: linear-gradient(var(--ok-bg), var(--ok-bg));
+}
+.panel-tab.running,
+.panel-tab.redoing {
+  background-image: linear-gradient(var(--running-bg), var(--running-bg));
+}
+.panel-tab.user,
+.panel-tab.rejected,
+.panel-tab.warning {
+  background-image: linear-gradient(var(--warning-bg), var(--warning-bg));
+}
+.panel-tab.error {
+  background-image: linear-gradient(var(--error-bg), var(--error-bg));
+}

package/studio/web/styles/components/status-signals.css

@@ -0,0 +1,66 @@
+/* Status dots: .signal (ConnectionSignals.tsx) and .point, plus the pulse and spin keyframes. */
+
+.signal {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 9px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: 12px;
+  color: var(--text-2);
+}
+a.signal:hover {
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+.signal.live {
+  border-color: transparent;
+  color: var(--text-3);
+}
+.signal.live::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ok);
+}
+.signal.live.error {
+  color: var(--error);
+}
+.signal.live.error::before {
+  background: var(--error);
+}
+
+.point {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-3);
+  flex: none;
+  display: inline-block;
+}
+.point.ok {
+  background: var(--ok);
+}
+.point.warning {
+  background: var(--warning);
+}
+.point.error {
+  background: var(--error);
+}
+.point.running {
+  background: var(--running);
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/studio/web/styles/components/stepper.css

@@ -0,0 +1,208 @@
+/* StageStepper.tsx: the pipeline stepper, full and compact. */
+
+/* --- stepper ------------------------------------------------------------------------ */
+.stepper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+.step {
+  flex: 1 1 0;
+  min-width: 0;
+  position: relative;
+}
+.step > a,
+.step > button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+  height: 100%;
+  padding: 8px 2px;
+  border: 0;
+  background: none;
+  border-radius: var(--radius-sm);
+  text-align: center;
+}
+.step > a:hover,
+.step > button:hover {
+  background: var(--surface-2);
+}
+/* the line linking to the previous step; green when the previous one is done */
+.step + .step::before {
+  content: "";
+  position: absolute;
+  top: 22px;
+  left: calc(-50% + 17px);
+  right: calc(50% + 17px);
+  height: 2px;
+  background: var(--border-strong);
+}
+.step.done + .step::before {
+  background: color-mix(in srgb, var(--emerald) 70%, transparent);
+}
+.step-mark {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 2px solid var(--border-strong);
+  background: var(--bg);
+  color: var(--text-3);
+  font-size: 12px;
+  font-weight: 700;
+}
+.step-name {
+  font-size: 12px;
+  line-height: 1.25;
+  color: var(--text-2);
+  font-weight: 700;
+  text-transform: capitalize;
+  margin-top: 6px;
+  transition:
+    font-size 0.15s ease,
+    margin-top 0.15s ease;
+}
+.step-status {
+  margin-top: auto;
+  font-size: 11px;
+  line-height: 1.2;
+  color: var(--text-3);
+  min-height: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.spinning {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  border: 2px solid var(--running);
+  border-top-color: transparent;
+  animation: spin 0.9s linear infinite;
+}
+
+.step.done .step-mark {
+  background: var(--emerald);
+  border-color: var(--emerald);
+  color: #06150d;
+}
+.step.done .step-name,
+.step.done .step-status {
+  color: var(--emerald);
+}
+.step.running .step-mark {
+  border-color: var(--running);
+  box-shadow: 0 0 0 4px var(--running-bg);
+}
+.step.running .step-status,
+.step.running .step-name {
+  color: var(--running);
+}
+.step.redoing .step-mark {
+  border-color: var(--running);
+  color: var(--running);
+  box-shadow: 0 0 0 4px var(--running-bg);
+}
+.step.redoing .step-status {
+  color: var(--running);
+}
+.step.queued .step-mark {
+  border-style: dashed;
+  border-color: var(--running);
+  color: var(--running);
+}
+.step.queued .step-status {
+  color: var(--running);
+}
+.step.user .step-mark {
+  background: var(--warning);
+  border-color: var(--warning);
+  color: #1d1300;
+  box-shadow: 0 0 0 4px var(--warning-bg);
+}
+.step.user .step-status,
+.step.user .step-name {
+  color: var(--warning);
+  font-weight: 700;
+}
+.step.rejected .step-mark,
+.step.warning .step-mark {
+  border-color: var(--warning);
+  color: var(--warning);
+}
+.step.rejected .step-status,
+.step.warning .step-status {
+  color: var(--warning);
+}
+.step.error .step-mark {
+  background: var(--error);
+  border-color: var(--error);
+  color: #fff;
+}
+.step.error .step-status {
+  color: var(--error);
+}
+.step.next .step-mark {
+  border-color: var(--warning);
+  color: var(--warning);
+}
+.step.next .step-status {
+  color: var(--warning);
+}
+.step.na .step-mark {
+  border-style: dashed;
+}
+.step.scheduled .step-mark {
+  border-color: var(--running);
+  color: var(--running);
+}
+.step.scheduled .step-status {
+  color: var(--running);
+}
+.step.chosen .step-name {
+  color: var(--text);
+  font-size: 14px;
+  margin-top: 10px;
+}
+.step.done.chosen .step-name {
+  color: var(--emerald);
+}
+
+.stepper.compact .step > a {
+  padding: 4px 1px 2px;
+  gap: 3px;
+}
+.stepper.compact .step + .step::before {
+  top: 15px;
+  left: calc(-50% + 12px);
+  right: calc(50% + 12px);
+}
+.stepper.compact .step-mark {
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+  border-width: 1.5px;
+}
+.stepper.compact .step-name {
+  font-size: 10.5px;
+  margin-top: 4px;
+}
+.stepper.compact .step.chosen .step-name {
+  font-size: 12px;
+  margin-top: 7px;
+}
+.stepper.compact .step-status {
+  font-size: 10px;
+  white-space: normal;
+}
+.stepper.compact .spinning {
+  width: 10px;
+  height: 10px;
+}

package/studio/web/styles/components/table.css

@@ -0,0 +1,19 @@
+/* Tables (.table). */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.table th,
+.table td {
+  text-align: left;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+.table th {
+  color: var(--text-3);
+  font-weight: 600;
+  font-size: 12px;
+}

package/studio/web/styles/components/tabs.css

@@ -0,0 +1,24 @@
+/* Tabs (.tabs). */
+
+.tabs {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  padding: 6px;
+  border-bottom: 1px solid var(--border);
+}
+.tabs button {
+  border: 0;
+  background: none;
+  padding: 5px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--text-2);
+  font: 12px var(--mono);
+}
+.tabs button:hover {
+  color: var(--text);
+}
+.tabs button.active {
+  background: var(--surface-2);
+  color: var(--text);
+}