@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/styles/components/clone-voice.css

@@ -0,0 +1,379 @@
+/* CloneVoiceDialog.tsx: panels, language, samples, recording, meter and orb, voice avatars. */
+
+/* clone the voice (Settings → Voice): two panels, like ElevenLabs' Instant Voice Cloning */
+.clone {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.clone-frame {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+  padding: 8px;
+  border: 1px solid var(--border-strong);
+  border-radius: 24px 24px 24px 24px;
+  background: rgb(0 0 0 / 0.02);
+}
+@media (prefers-color-scheme: dark) {
+  .clone-frame {
+    background: rgb(255 255 255 / 0.03);
+  }
+}
+@container (max-width: 560px) {
+  .clone-frame {
+    grid-template-columns: 1fr;
+  }
+}
+.clone-left,
+.clone-right {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 420px;
+  border-radius: 16px;
+}
+.clone-left {
+  padding: 0;
+  background: transparent;
+  max-height: 560px;
+}
+.clone-right {
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px;
+  background: var(--surface);
+  border-radius: var(--radius);
+  text-align: center;
+}
+.clone-top {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 8px;
+}
+.clone-top b {
+  font: 500 14px / 20px var(--sans);
+}
+.clone-language {
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 0;
+  min-height: 36px;
+  padding: 0 12px;
+  border-radius: 9999px;
+  font: 500 14px / 20px var(--sans);
+}
+.clone-bar.language {
+  gap: 8px;
+}
+.clone-language-field {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.clone-language-field > span {
+  white-space: nowrap;
+  font-size: 13px;
+}
+.clone-script {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  padding: 8px 16px 16px;
+  overflow-y: auto;
+  font: 500 16px / 24px var(--sans);
+  color: var(--text-3);
+  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
+  mask-image: linear-gradient(180deg, #000 80%, transparent);
+}
+.clone-script span {
+  transition: color 0.18s ease-out;
+}
+.clone-script span.read {
+  color: var(--text);
+}
+.clone-empty {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  text-align: center;
+  padding: 16px;
+}
+.clone-empty b {
+  font: 500 14px / 20px var(--sans);
+}
+.clone-empty small {
+  color: var(--text-3);
+  font-size: 12px;
+}
+.clone-samples {
+  flex: 1 1 auto;
+  list-style: none;
+  margin: 0;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: auto;
+}
+.clone-samples li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--el-radius-control);
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+.clone-sample-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 13px / 20px var(--sans);
+}
+.clone-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 0 0 0;
+  padding: 8px;
+  border-radius: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  min-height: 52px;
+}
+.clone-bar.two,
+.clone-bar.three {
+  padding: 4px;
+}
+.clone-bar.two .button,
+.clone-bar.three .button {
+  flex: 1 1 0;
+  border-color: transparent;
+}
+.clone-bar.three {
+  flex-wrap: wrap;
+}
+.clone-bar.three .button {
+  flex: 1 1 0;
+  min-width: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 16px;
+  font-size: 13px;
+}
+.clone-bar.three .button.already-have {
+  flex: 1 1 100%;
+  white-space: normal;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  border: 1px solid var(--border-strong);
+}
+.clone-bar.three .button.already-have:not(:disabled):hover {
+  background: var(--el-muted);
+  border-color: var(--border-strong);
+}
+.button.pill {
+  border-radius: 9999px;
+}
+.button.large {
+  min-height: 44px;
+  padding: 0 20px;
+  font-size: 15px;
+}
+.clone-record {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 0;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: 18px;
+  cursor: pointer;
+}
+.clone-record:not(:disabled):not(.active):hover {
+  color: var(--text);
+}
+.clone-record:disabled {
+  color: var(--text-3);
+  cursor: default;
+}
+.clone-record.active {
+  background: var(--error);
+  color: #fff;
+}
+.clone-record.active {
+  box-shadow: 0 0 0 4px var(--error-bg);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.clone-time {
+  color: var(--error);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.clone-level {
+  min-width: 120px;
+  text-align: right;
+  font-size: 13px;
+  color: var(--text-3);
+}
+.clone-level .bars {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 20px;
+}
+.clone-level .bars i {
+  width: 3px;
+  border-radius: 2px;
+  background: var(--action);
+  transition: height 0.08s;
+}
+
+/* the meter: dotted arc, orb in the middle, Mín. and Melhor below */
+.clone-meter {
+  position: relative;
+  width: 160px;
+  height: 112px;
+}
+.clone-meter svg {
+  width: 100%;
+  height: 100px;
+  overflow: visible;
+}
+.clone-meter path {
+  fill: none;
+  stroke-linecap: round;
+}
+.clone-meter .trail {
+  stroke: var(--border-strong);
+  stroke-width: 2.5;
+  stroke-dasharray: 0.1 6;
+}
+.clone-meter .filled {
+  stroke: var(--running);
+  stroke-width: 2.5;
+  transition: stroke-dasharray 0.25s;
+}
+.clone-meter.ok .filled {
+  stroke: var(--ok);
+}
+/* the orb: sharp and opaque, always breathing; the glow goes around inside */
+.clone-meter .orb {
+  position: absolute;
+  left: 50%;
+  top: 22px;
+  width: 76px;
+  height: 76px;
+  margin-left: -38px;
+  border-radius: 50%;
+  transition: transform 0.25s;
+}
+.clone-meter .orb-body {
+  position: absolute;
+  inset: 0;
+  display: block;
+  border-radius: 50%;
+  overflow: hidden;
+  background: radial-gradient(circle at 32% 28%, #e8f6ff 0%, #7cc4ff 30%, var(--el-chart-primary) 78%, #0a2a8a 100%);
+  animation: orb-breathe 4.2s ease-in-out infinite;
+}
+.clone-meter .orb-body::before {
+  content: "";
+  position: absolute;
+  inset: -30%;
+  background: radial-gradient(circle at 50% 18%, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0) 34%);
+  animation: orb-spin 7s linear infinite;
+}
+/* the same grain as the voice avatars, over the orb */
+.clone-meter .orb-body::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0.4;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  background-size: 100% 100%;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
+}
+@keyframes orb-breathe {
+  0%,
+  100% {
+    transform: scale(0.94);
+  }
+  50% {
+    transform: scale(1.04);
+  }
+}
+@keyframes orb-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .clone-meter .orb-body,
+  .clone-meter .orb-body::before {
+    animation: none;
+  }
+}
+.clone-meter .label {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  font-size: 11px;
+  line-height: 14px;
+  color: var(--text-3);
+}
+.clone-meter .label small {
+  font-size: 11px;
+  opacity: 0.7;
+}
+.clone-meter .label.min {
+  left: -32px;
+  align-items: flex-start;
+}
+.clone-meter .label.max {
+  right: -32px;
+  align-items: flex-end;
+}
+.clone-hint {
+  margin: 0;
+  max-width: 28ch;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--text-2);
+}
+.clone-hint.warning {
+  color: var(--warning);
+}
+.clone-create {
+  min-width: 160px;
+  margin-top: 4px;
+}
+.clone-providers {
+  display: flex;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+.clone-cards {
+  display: grid;
+  gap: 8px;
+}

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

@@ -0,0 +1,70 @@
+/* Base controls: textarea, .actions, .button and its approve/reject states, .response. */
+
+textarea {
+  width: 100%;
+  resize: vertical;
+  min-height: 70px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-strong);
+  background: var(--surface-2);
+  color: var(--text);
+  font: 13px / 1.5 var(--sans);
+}
+textarea:focus {
+  outline: 2px solid color-mix(in srgb, var(--running) 60%, transparent);
+  outline-offset: 1px;
+  border-color: transparent;
+}
+.actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.button {
+  padding: 8px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-strong);
+  background: var(--surface-2);
+  font-weight: 600;
+  font-size: 13px;
+}
+/* a secondary action beside a primary one: the border only (a link styled as a button, too) */
+.button.outlined {
+  background: transparent;
+  color: var(--text);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+}
+.button.outlined:hover {
+  background: var(--surface-2);
+}
+.button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.button.approve {
+  background: var(--ok);
+  border-color: var(--ok);
+  color: #06150d;
+}
+.button.approve:not(:disabled):hover {
+  filter: brightness(1.08);
+}
+.button.reject:not(:disabled):hover {
+  border-color: var(--warning);
+  color: var(--warning);
+}
+.response {
+  margin: 0;
+  font-size: 13px;
+}
+.response.ok {
+  color: var(--ok);
+}
+.response.error {
+  color: var(--error);
+  white-space: pre-wrap;
+}

package/studio/web/styles/components/data-and-image.css

@@ -0,0 +1,54 @@
+/* Definition lists (.data) and image frames (.image) shared by several pages. */
+
+.data {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 6px 14px;
+  margin: 0;
+  font-size: 13px;
+}
+.data dt {
+  color: var(--text-3);
+}
+.data dd {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.image {
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  background: var(--surface-2);
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  min-width: 0;
+}
+.image img {
+  width: 100%;
+  height: 140px;
+  object-fit: contain;
+  display: block;
+  background: var(--surface-3);
+}
+.image span {
+  font: 11px var(--mono);
+  color: var(--text-3);
+  padding: 4px 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.image:hover {
+  border-color: var(--border-strong);
+}
+.image.portrait img {
+  height: 170px;
+  object-fit: cover;
+}
+.image.wide img {
+  height: 200px;
+}

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

@@ -0,0 +1,132 @@
+/* Buttons (primary, small), links, forms, fields, inputs; reference header actions. */
+
+/* --- hub: buttons, forms ---------------------------------------------------------- */
+.button.primary {
+  background: var(--text);
+  border-color: var(--text);
+  color: var(--bg);
+}
+.button.primary:not(:disabled):hover {
+  filter: brightness(0.92);
+}
+.button.small {
+  padding: 4px 10px;
+  font-size: 12px;
+}
+.push-end {
+  margin-left: auto;
+}
+/* on the reference page the switch sits above the title and delete next to Edit, on the left */
+.video-header > .reference-actions,
+.video-title > .reference-actions {
+  margin-left: 0;
+}
+.title-editing {
+  flex: 1 1 360px;
+  min-width: 0;
+  font: 600 22px / 30px var(--sans);
+}
+.text-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 16px 0;
+}
+.text-editor textarea {
+  width: 100%;
+  min-height: 420px;
+  resize: vertical;
+  font: 13px / 1.55 var(--mono);
+  tab-size: 2;
+}
+.reference-actions .button.danger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.link {
+  text-decoration: underline;
+  text-decoration-color: var(--border-strong);
+  text-underline-offset: 3px;
+}
+.link:hover {
+  color: var(--text);
+}
+.subtle-link {
+  border: 0;
+  background: none;
+  padding: 0;
+  color: var(--text-3);
+  font-size: 12.5px;
+  width: fit-content;
+}
+.subtle-link:hover {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.new {
+  max-width: none;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 200px;
+}
+.field.wide {
+  flex: 3 1 320px;
+}
+.field > span {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text-2);
+}
+.field > span em {
+  font-style: normal;
+  font-weight: 400;
+  color: var(--text-3);
+  margin-left: 4px;
+}
+.field small {
+  color: var(--text-3);
+  font-size: 12px;
+}
+.fields-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+}
+input,
+select {
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-strong);
+  background: var(--surface-2);
+  color: var(--text);
+  font: 13px / 1.4 var(--sans);
+}
+input:focus,
+select:focus {
+  outline: 2px solid color-mix(in srgb, var(--running) 60%, transparent);
+  outline-offset: 1px;
+  border-color: transparent;
+}
+.actions {
+  align-items: center;
+}

package/studio/web/styles/components/human-banner.css

@@ -0,0 +1,99 @@
+/* TopBanners.tsx: what broke (ErrorBanner), what waits for your decision
+   (HumanBanner); and the approval notice link. */
+
+/* the stack is what stays fixed on top of the whole app; its height is --banner */
+.top-banners {
+  position: sticky;
+  top: 0;
+  z-index: 60;
+}
+
+/* what waits for your decision: cannot be closed */
+.human-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 20px;
+  padding: 10px 20px;
+  font-size: 13px;
+  background: var(--warning-bg);
+  border-bottom: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
+}
+.human-banner strong {
+  color: var(--warning);
+}
+.human-banner ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 20px;
+}
+.human-banner a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.human-banner a span:first-child {
+  font-weight: 600;
+}
+.approval-notice a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* what broke (ErrorBanner.tsx): each line links to where it is fixed; × dismisses it until it fails again */
+.error-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 20px;
+  padding: 10px 20px;
+  font-size: 13px;
+  background: var(--error-bg);
+  border-bottom: 1px solid color-mix(in srgb, var(--error) 45%, transparent);
+}
+.error-banner strong {
+  color: var(--error);
+}
+.error-banner ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 20px;
+  min-width: 0;
+}
+.error-banner li {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  min-width: 0;
+}
+.error-banner a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  overflow-wrap: anywhere;
+}
+.error-banner a span:first-child {
+  font-weight: 600;
+}
+.error-banner-message {
+  color: var(--el-secondary);
+}
+.error-banner-dismiss {
+  align-self: center;
+  display: inline-flex;
+  padding: 2px;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+}
+.error-banner-dismiss:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--error) 15%, transparent);
+}