@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/styles/components/platform-card.css

@@ -0,0 +1,140 @@
+/* PlatformCard.tsx: platform multi-select cards, .avatar, .platform-icon. */
+
+/* platform cards (web/components/PlatformCard.tsx): multi-select with the connected account */
+.platform-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 10px;
+}
+.platform-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--surface);
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    background 0.15s;
+}
+.platform-card-choice {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  cursor: pointer;
+  position: relative;
+}
+.platform-card-choice .platform-card-input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  border: 0;
+  pointer-events: none;
+}
+.platform-card:hover:not(.blocked) {
+  border-color: var(--text-3);
+}
+.platform-card:has(.platform-card-input:focus-visible) {
+  outline: 2px solid var(--action);
+  outline-offset: 2px;
+}
+.platform-card.checked {
+  border-color: var(--action);
+  box-shadow: inset 0 0 0 1px var(--action);
+  background: var(--muted);
+}
+.platform-card.blocked .platform-card-choice {
+  cursor: not-allowed;
+}
+.platform-card.blocked:not(.checked) .platform-card-choice {
+  opacity: 0.6;
+}
+.platform-card-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+.platform-card-top b {
+  flex: 1;
+  font-weight: 600;
+}
+.platform-card-check {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--border-strong);
+  color: transparent;
+}
+.platform-card.checked .platform-card-check {
+  background: var(--action);
+  border-color: var(--action);
+  color: var(--action-text);
+}
+.platform-card-account {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  font-size: 13px;
+  min-width: 0;
+}
+.platform-card-who {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.platform-card-who > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.platform-card-who small {
+  color: var(--text-3);
+  font-size: 11.5px;
+}
+.platform-card-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 12px 12px;
+}
+.platform-card-footer p {
+  margin: 0;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  flex: none;
+  object-fit: cover;
+  background: var(--surface-3);
+}
+.avatar.empty {
+  display: grid;
+  place-items: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-2);
+}
+.platform-icon {
+  flex: none;
+}
+.platform-icon.youtube {
+  color: #ff0000;
+}
+.platform-icon.instagram {
+  color: #e4405f;
+}
+.platform-icon.tiktok {
+  color: var(--text);
+}

package/studio/web/styles/components/provider-card.css

@@ -0,0 +1,132 @@
+/* ProviderCard.tsx and VoiceProviderCard.tsx. */
+
+.provider-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--surface);
+  transition:
+    border-color 0.12s,
+    box-shadow 0.12s;
+}
+.provider-card-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+}
+.provider-card-extra {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 12px 12px;
+}
+.provider-card.checked {
+  border-color: var(--text);
+  box-shadow: 0 0 0 1px var(--text);
+}
+/* the whole card is the checkbox; the name link sits on top of it */
+.provider-card-toggle {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: none;
+  cursor: pointer;
+}
+.provider-card-toggle:disabled {
+  cursor: default;
+}
+.provider-card-toggle:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--running) 60%, transparent);
+  outline-offset: 2px;
+}
+.provider-card .provider-logo,
+.provider-card-mark {
+  pointer-events: none;
+}
+.provider-card.unset .provider-logo {
+  opacity: 0.5;
+}
+.provider-card.inactive {
+  opacity: 0.5;
+}
+.provider-card-name {
+  position: relative;
+  z-index: 1;
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  pointer-events: none;
+}
+.provider-card-name a {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font: 600 14px / 20px var(--sans);
+  color: var(--text);
+  text-decoration: none;
+}
+.provider-card-name a:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.provider-card-name a .ic {
+  font-size: 12px;
+  color: var(--text-3);
+}
+.provider-card-name b {
+  font: 600 14px / 20px var(--sans);
+}
+.provider-card-name small {
+  font-size: 12px;
+  color: var(--text-3);
+}
+.provider-card-name small.warning {
+  color: var(--warning);
+}
+.provider-card-order {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  width: 28px;
+}
+.provider-card-order .button.small {
+  min-height: 20px;
+  height: 20px;
+  padding: 0;
+  justify-content: center;
+}
+.provider-card-actions {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.provider-card-mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  border: 1px solid var(--border-strong);
+  font-size: 14px;
+}
+.provider-card.checked .provider-card-mark {
+  background: var(--text);
+  border-color: var(--text);
+  color: var(--bg);
+}

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

@@ -0,0 +1,185 @@
+/* Queue pieces (QueuePanel, RunningTask, FinishedTask, WaitList, LogStream) and the services bars. */
+
+.task.running {
+  border: 1px solid color-mix(in srgb, var(--running) 40%, transparent);
+  background: var(--running-bg);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+  margin-bottom: 10px;
+}
+.task-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 10px;
+}
+.task-video {
+  color: var(--text-2);
+  text-decoration: underline;
+  text-decoration-color: var(--border-strong);
+  text-underline-offset: 3px;
+}
+.task-video:hover {
+  color: var(--text);
+}
+.time {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-2);
+}
+.pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--running);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.command {
+  display: block;
+  margin: 8px 0;
+  padding: 0;
+  background: none;
+  color: var(--text-3);
+  font-size: 11.5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.log {
+  margin: 0;
+  padding: 10px 12px;
+  background: var(--log-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font: 11.5px / 1.55 var(--mono);
+  color: var(--text-2);
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.wait-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.wait-list li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+  padding: 8px 10px;
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+}
+.wait-list-pos {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-3);
+  width: 22px;
+}
+
+.done-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.done-list > li + li {
+  border-top: 1px solid var(--border);
+}
+.done-row {
+  display: grid;
+  grid-template-columns: 18px auto minmax(0, 1fr) auto auto;
+  gap: 10px;
+  align-items: baseline;
+  width: 100%;
+  padding: 7px 2px;
+  border: 0;
+  background: none;
+  text-align: left;
+  font-size: 13px;
+}
+.done-row:hover .done-name {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.done-video {
+  color: var(--text-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+.done-when {
+  font-size: 12px;
+  white-space: nowrap;
+}
+.icon {
+  text-align: center;
+  font-weight: 700;
+}
+.icon.ok {
+  color: var(--ok);
+}
+.icon.error {
+  color: var(--error);
+}
+.icon.interrupted,
+.icon.waiting {
+  color: var(--text-2);
+}
+.done-detail {
+  padding: 0 0 12px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.done-detail .command {
+  margin: 0;
+  white-space: normal;
+  word-break: break-all;
+}
+
+.services {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.services li {
+  display: grid;
+  grid-template-columns: 14px auto minmax(0, 1fr);
+  align-items: center;
+  gap: 2px 8px;
+}
+.services li .subtle {
+  font-size: 12.5px;
+}
+.services .hint,
+.services .bar {
+  grid-column: 2 / -1;
+}
+.bar {
+  height: 4px;
+  border-radius: 4px;
+  background: var(--surface-3);
+  overflow: hidden;
+  margin-top: 6px;
+}
+.bar div {
+  height: 100%;
+  border-radius: 4px;
+  background: var(--ok);
+}
+.bar div.warning {
+  background: var(--warning);
+}
+.bar div.error {
+  background: var(--error);
+}

package/studio/web/styles/components/reference-actions.css

@@ -0,0 +1,133 @@
+/* ReferenceActions.tsx: toggle switch, delete confirm, danger and destructive buttons; .refs-off. */
+
+/* --- references: enable, disable and delete ---------------------------------------- */
+.reference-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-left: auto;
+  font-size: 12.5px;
+}
+.toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  cursor: pointer;
+  color: var(--text-2);
+  user-select: none;
+}
+.toggle-switch input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+}
+.toggle-switch i {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--el-alpha-200);
+  border: 0;
+  transition: background 0.15s;
+}
+.toggle-switch i::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+  transition: transform 0.15s;
+}
+.toggle-switch input:checked + i {
+  background: var(--action);
+}
+.toggle-switch input:checked + i::after {
+  transform: translateX(16px);
+  background: var(--action-text);
+}
+.toggle-switch input:focus-visible + i {
+  outline: 2px solid var(--running);
+  outline-offset: 2px;
+}
+.toggle-switch input:disabled + i {
+  opacity: 0.5;
+}
+.delete-button {
+  border: 0;
+  background: none;
+  padding: 0;
+  color: var(--text-3);
+  font-size: 12.5px;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.delete-button:hover {
+  color: var(--error);
+}
+.confirm-delete {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.confirm-delete .warning {
+  color: var(--warning);
+}
+.button.danger {
+  background: var(--error);
+  border-color: var(--error);
+  color: #fff;
+}
+.button.danger:not(:disabled):hover {
+  background: var(--error);
+  border-color: var(--error);
+  filter: brightness(1.08);
+}
+/* destructive without fill: the first click of a deleting action (the second is .danger) */
+.button.destructive {
+  color: var(--error);
+  border-color: var(--error);
+}
+.button.destructive:not(:disabled):hover {
+  color: var(--error);
+  border-color: var(--error);
+  background: color-mix(in srgb, var(--error) 8%, transparent);
+}
+.response.center {
+  text-align: center;
+}
+.reference-actions .button {
+  padding: 4px 10px;
+  font-size: 12.5px;
+}
+.refs-off {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 8px;
+}
+.refs-off h2 {
+  margin: 0;
+  font-size: 15px;
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+}
+.refs-off h2 .subtle {
+  font-weight: 400;
+  font-size: 12.5px;
+}
+.reference-card.off {
+  opacity: 0.45;
+  transition: opacity 0.15s;
+}
+.reference-card.off:hover,
+.reference-card.off:focus-within {
+  opacity: 0.85;
+}

package/studio/web/styles/components/reference-picker.css

@@ -0,0 +1,146 @@
+/* ReferencePicker.tsx: the reference choice on the new video. */
+
+/* --- reference choice on the new video ----------------------------------------------- */
+.refs-strip {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  scroll-snap-type: x proximity;
+  padding: 4px 2px 12px;
+  margin: 0 -2px;
+  overscroll-behavior-x: contain;
+}
+.reference-choice {
+  flex: 0 0 168px;
+  width: 168px;
+  min-width: 0;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  text-align: left;
+  font-weight: 400;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+.reference-choice:hover {
+  border-color: var(--border-strong);
+}
+.reference-choice.chosen {
+  border-color: var(--text);
+  box-shadow: 0 0 0 2px var(--text);
+}
+.reference-choice:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--running) 60%, transparent);
+  outline-offset: 2px;
+}
+.choice-media {
+  position: relative;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 9 / 16;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  background: #000;
+  color: var(--text-3);
+  font-size: 28px;
+}
+.choice-media img,
+.choice-media video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.choice-media video {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.reference-choice:hover .choice-media video,
+.reference-choice:focus-visible .choice-media video {
+  opacity: 1;
+}
+.choice-play {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: rgb(0 0 0 / 0.55);
+  color: #fff;
+  font-size: 10px;
+  transition: opacity 0.2s;
+}
+.reference-choice:hover .choice-play {
+  opacity: 0;
+}
+.choice-mark {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--text);
+  color: var(--bg);
+  font-size: 13px;
+  font-weight: 700;
+}
+.reference-choice.none .choice-media,
+.reference-choice.more .choice-media {
+  background: var(--surface-3);
+}
+.choice-media .voice-avatar.frame {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.reference-choice.more {
+  border-style: dashed;
+  background: none;
+}
+.choice-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  padding: 0 2px 2px;
+}
+.choice-text b {
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.choice-text > span {
+  font-size: 11.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.choice-text .palette {
+  margin-top: 3px;
+  gap: 3px;
+}
+.choice-text .sample-color i {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+}