@crievo/omni 0.1.3 → 0.1.4

package/studio/web/styles/components/bencho/voice-note.css

@@ -0,0 +1,337 @@
+/* ══ Voice note ═══════════════════════════════════════════ */
+/* a fixed frame, so opening the pill never rescales the block */
+.bn-vn-frame {
+  position: relative;
+  width: 300px;
+  height: 156px;
+  display: grid;
+  place-items: center;
+}
+
+.bn-vn {
+  --red: #e5484d;
+  position: relative;
+  width: var(--w);
+  max-width: 100%;
+  height: 56px;
+  border-radius: var(--r);
+  overflow: hidden;
+  background: var(--fill-slab, var(--card));
+  color: var(--fill-on, var(--ink));
+  font-family: var(--font-ui);
+  font-size: 16px;
+  font-weight: 500;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  /* y1 past 1 is the overshoot; Bounce sets it */
+  transition:
+    width 420ms cubic-bezier(0.3, var(--ov), 0.4, 1),
+    scale 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  letter-spacing: -0.01em;
+}
+
+[data-stroke="on"] .bn-vn {
+  box-shadow: inset 0 0 0 1px var(--pane-edge);
+}
+
+.bn-vn[data-phase="clip"] {
+  cursor: default;
+}
+
+/* tap to record, in a screen rather than on a stage: the frame is as wide as the room it is given and as tall as the
+   pill, and the red line under it takes flow space instead of the hint's reserved band */
+.bn-vn-frame[data-mode="tap"] {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+/* inside a screen the pill sits on a surface almost as light as itself: a hairline holds its edge */
+.bn-vn[data-mode="tap"] {
+  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb, 23, 24, 26), 0.1);
+}
+
+.bn-vn[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.bn-vn:focus-visible,
+.bn-vn[data-mode="tap"]:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--fill-slab, #fff),
+    0 0 0 4px var(--signal, #2231dd);
+}
+
+.bn-vn-in {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  animation: bn-vn-in 240ms ease 80ms both;
+}
+
+.bn-vn-idle {
+  justify-content: center;
+  gap: 12px;
+}
+
+.bn-vn-rec {
+  gap: 12px;
+  padding: 0 24px;
+}
+
+.bn-vn-clip {
+  gap: 12px;
+  padding: 0 12px 0 8px;
+}
+
+/* the stop and cancel buttons ride the end of the row; the clock and wave give up the room */
+.bn-vn[data-mode="tap"] .bn-vn-rec {
+  gap: 8px;
+  padding: 0 6px 0 22px;
+}
+
+.bn-vn[data-mode="tap"] .bn-vn-rec .bn-vn-time {
+  margin-right: 4px;
+}
+
+.bn-vn[data-mode="tap"] .bn-vn-clip {
+  gap: 8px;
+}
+
+.bn-vn[data-mode="tap"] .bn-vn-clip .bn-vn-time {
+  margin-inline: 4px;
+}
+
+.bn-vn-time {
+  font-variant-numeric: tabular-nums;
+  min-width: 38px;
+  opacity: 0.6;
+}
+
+.bn-vn-rec .bn-vn-time {
+  opacity: 1;
+}
+
+.bn-vn-dot {
+  width: 9px;
+  height: 9px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--red);
+  animation: bn-vn-blink 1s ease-in-out infinite;
+}
+
+.bn-vn-wave {
+  flex: 1;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* the wave goes quiet as you drag toward throwing it away */
+  opacity: calc(1 - var(--pull) * 0.7);
+}
+
+.bn-vn-bar {
+  width: 3px;
+  flex: none;
+  height: calc(4px + var(--l) * 28px);
+  border-radius: 2px;
+  background: currentColor;
+  transition: height 160ms linear;
+}
+
+/* each new sample grows in from the middle */
+.bn-vn-rec .bn-vn-bar {
+  animation: bn-vn-grow 200ms cubic-bezier(0.3, 1.5, 0.4, 1) both;
+}
+
+/* the playhead: a bar is lit once progress has passed it */
+.bn-vn-scrub {
+  cursor: ew-resize;
+}
+
+.bn-vn-scrub .bn-vn-bar {
+  transition: none;
+  opacity: clamp(0.3, calc((var(--prog) * var(--n) - var(--i)) * 99), 1);
+}
+
+/* thrown away: the bars fold to nothing before the pill closes */
+.bn-vn[data-phase="cancel"] .bn-vn-in {
+  animation: none;
+}
+
+.bn-vn[data-phase="cancel"] .bn-vn-bar {
+  scale: 1 0;
+  opacity: 0;
+  transition:
+    scale 220ms ease,
+    opacity 220ms ease;
+}
+
+.bn-vn[data-phase="cancel"] .bn-vn-dot,
+.bn-vn[data-phase="cancel"] .bn-vn-time,
+.bn-vn[data-phase="cancel"] button {
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+.bn-vn-play,
+.bn-vn-x {
+  display: grid;
+  place-items: center;
+  flex: none;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    scale 160ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 160ms ease;
+}
+
+.bn-vn-play {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--inner);
+  background: var(--fill-on, var(--ink));
+  color: var(--fill-slab, var(--card));
+}
+
+.bn-vn-x {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: none;
+  color: color-mix(in srgb, var(--fill-on, var(--ink)) 50%, var(--fill-slab, var(--card)));
+}
+
+.bn-vn-x:hover {
+  color: var(--fill-on, var(--ink));
+}
+
+.bn-vn-play:active,
+.bn-vn-x:active {
+  scale: 0.96;
+}
+
+.bn-vn-play:focus-visible,
+.bn-vn-x:focus-visible {
+  outline: 2px solid var(--signal, #2231dd);
+  outline-offset: 2px;
+}
+
+.bn-vn-hint {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(50% + 42px);
+  text-align: center;
+  font-family: var(--font-ui);
+  font-size: 13px;
+  color: var(--ink-3);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 220ms ease;
+  letter-spacing: 0em;
+}
+
+.bn-vn-hint[data-on] {
+  opacity: calc(1 - var(--pull, 0));
+}
+
+.bn-vn-hint[data-armed] {
+  opacity: 1;
+  color: var(--red, #e5484d);
+}
+
+/* the row fades as it slides, so the cancel mark has the left
+   end of the pill to itself when it arrives */
+.bn-vn-rec {
+  opacity: calc(1 - var(--pull) * 0.55);
+}
+
+/* the dot and the clock are gone before the mark lands on them */
+.bn-vn-rec .bn-vn-dot,
+.bn-vn-rec .bn-vn-time {
+  opacity: max(0, 1 - var(--pull) * 1.6);
+}
+
+.bn-vn-cancel {
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  width: 28px;
+  height: 28px;
+  margin-top: -14px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: #e5484d;
+  color: #fff;
+  opacity: 0;
+  scale: 0.4;
+  pointer-events: none;
+  transition:
+    opacity 160ms ease,
+    scale 160ms ease;
+}
+
+.bn-vn-cancel[data-on] {
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity 160ms ease,
+    scale 420ms cubic-bezier(0.24, 1.34, 0.38, 1);
+}
+
+.bn-vn[data-phase="cancel"] .bn-vn-cancel {
+  opacity: 0;
+  scale: 0.6;
+  transition:
+    opacity 220ms ease,
+    scale 220ms ease;
+}
+
+.bn-vn-note {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(50% + 42px);
+  text-align: center;
+  font-family: var(--font-ui);
+  font-size: 13px;
+  color: var(--red, #e5484d);
+}
+
+.bn-vn-frame[data-mode="tap"] .bn-vn-note {
+  position: static;
+}
+
+@keyframes bn-vn-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes bn-vn-blink {
+  50% {
+    opacity: 0.25;
+  }
+}
+
+@keyframes bn-vn-grow {
+  from {
+    scale: 1 0.2;
+  }
+}

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

@@ -226,12 +226,22 @@
   align-items: center;
   gap: 6px;
 }
+/* the voice note pill takes a row of the bar to itself; the level check sits under it */
+.clone-voicenote {
+  flex: 1 1 100%;
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
 .clone-level {
-  min-width: 120px;
-  text-align: right;
+  flex: 1 1 100%;
+  text-align: center;
   font-size: 13px;
   color: var(--text-3);
 }
+.clone-level:empty {
+  display: none;
+}
 .clone-level .bars {
   display: inline-flex;
   align-items: center;

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

@@ -606,8 +606,13 @@
 }
 .omni-pending-actions {
   display: flex;
+  flex-direction: column;
   gap: 8px;
-  justify-content: flex-end;
+  align-items: stretch;
+}
+.omni-pending-actions .button {
+  align-self: center;
+  justify-content: center;
 }
 
 /* the Conteúdos page's floating "Agente, fila e serviços" tab sits left of Omni */

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

@@ -1,4 +1,5 @@
-/* StageStepper.tsx: the pipeline stepper, full and compact. */
+/* StageStepper.tsx: the pipeline stepper, full and compact. The pipeline's own steps are Bencho action-node cards
+   (.stepper.cards); the bare .step rules also serve the omnichat rule's steps (OmnichatRulePanel/RuleConfig.tsx). */
 
 /* --- stepper ------------------------------------------------------------------------ */
 .stepper {
@@ -12,7 +13,6 @@
   min-width: 0;
   position: relative;
 }
-.step > a,
 .step > button {
   display: flex;
   flex-direction: column;
@@ -26,7 +26,6 @@
   border-radius: var(--radius-sm);
   text-align: center;
 }
-.step > a:hover,
 .step > button:hover {
   background: var(--surface-2);
 }
@@ -175,10 +174,6 @@
   color: var(--emerald);
 }
 
-.stepper.compact .step > a {
-  padding: 4px 1px 2px;
-  gap: 3px;
-}
 .stepper.compact .step + .step::before {
   top: 15px;
   left: calc(-50% + 12px);
@@ -206,3 +201,124 @@
   width: 10px;
   height: 10px;
 }
+
+/* --- cards: each stage as a Bencho action node ---------------------------------------------- */
+/* a grid that wraps instead of scrolling: the fan hangs below the cards, and a scrolling box would clip it */
+.stepper.cards {
+  --steps: 6;
+  --gap: 10px;
+  display: grid;
+  /* every step on one row when each gets at least 118px, else the row wraps; --steps is set by the component */
+  grid-template-columns: repeat(
+      auto-fit,
+      minmax(max(118px, calc((100% - var(--gap) * (var(--steps) - 1)) / var(--steps))), 1fr)
+    );
+  gap: var(--gap);
+  /* the last card's fan opens past its right edge */
+  padding-right: 22px;
+}
+.stepper.cards.compact {
+  --gap: 8px;
+  grid-template-columns: repeat(
+      auto-fit,
+      minmax(max(100px, calc((100% - var(--gap) * (var(--steps) - 1)) / var(--steps))), 1fr)
+    );
+}
+.stepper.cards .step {
+  display: flex;
+  min-width: 0;
+}
+/* the connector line belongs to the circles; the cards carry the sequence in their numbers */
+.stepper.cards .step + .step::before {
+  display: none;
+}
+.stepper.cards .bn-nod {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.stepper.cards .bn-nod-card {
+  height: 100%;
+}
+/* the open fan sits above the neighbouring cards and what is under the stepper */
+.stepper.cards .bn-nod:hover,
+.stepper.cards .bn-nod:focus-within {
+  z-index: 6;
+}
+/* the card and its buttons are the Bencho fill, which on a page of the same colour needs an edge to be seen */
+.stepper.cards .bn-nod-card,
+.stepper.cards .bn-nod-act {
+  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.1);
+}
+.stepper.cards .bn-nod-card[data-selected] {
+  box-shadow: 0 0 0 2px var(--fill-on, var(--ink));
+}
+.stepper.cards .bn-nod-mark {
+  margin-top: 0;
+}
+.stepper.cards .step-mark {
+  width: 26px;
+  height: 26px;
+  font-size: 11px;
+}
+.stepper.cards.compact .step-mark {
+  width: 20px;
+  height: 20px;
+  font-size: 9.5px;
+  border-width: 1.5px;
+}
+.stepper.cards .step.chosen .step-mark {
+  transform: none;
+  box-shadow: none;
+}
+.stepper.cards .bn-nod-top {
+  align-items: flex-start;
+}
+.stepper.cards .bn-nod-name {
+  /* two lines at most: "Roteiro de motion" in a narrow cell */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  /* centred on the mark when it is one line */
+  align-self: center;
+}
+.stepper.cards .bn-nod-say {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stepper.cards.compact .bn-nod-top {
+  gap: 4px;
+}
+.stepper.cards.compact .bn-nod-name {
+  font-size: 11px;
+}
+.stepper.cards.compact .bn-nod-say {
+  font-size: 10.5px;
+  margin-top: 4px;
+}
+.stepper.cards.compact .bn-nod-card {
+  padding: 6px;
+}
+
+/* the state in the description: the studio's signal colours, pulled toward the card's ink so they read on its fill */
+.stepper.cards .step.done {
+  --tone: var(--emerald);
+}
+.stepper.cards .step:is(.running, .redoing, .queued, .scheduled) {
+  --tone: var(--running);
+}
+.stepper.cards .step:is(.user, .rejected, .warning, .next) {
+  --tone: var(--warning);
+}
+.stepper.cards .step.error {
+  --tone: var(--error);
+}
+.stepper.cards
+  .step:is(.done, .running, .redoing, .queued, .scheduled, .user, .rejected, .warning, .next, .error)
+  .bn-nod-say {
+  color: color-mix(in srgb, var(--tone) 80%, var(--ink));
+}
+.stepper.cards .step:is(.user, .error) .bn-nod-say {
+  font-weight: 600;
+}

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

@@ -0,0 +1,10 @@
+/* Toaster.tsx: the corner the toasts live in. Above everything the studio draws (the Omni widget 60, the lightbox 70,
+   the modals and the offline screen 100, the select and date pickers 300) except the tooltips (400). The corner itself
+   is click-through; only the toasts take the pointer (bencho/toast-stack.css). */
+.toaster {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 350;
+  pointer-events: none;
+}

package/studio/web/styles/components/ui/slider.css

@@ -2,8 +2,9 @@
 
 /* --- .tdc-slider: tdc's slider (channels), web/components/ui/slider.tsx -------------------------------
    Same CSS as its flat theme, with the tokens from here. Two variants: `line`, the thin
-   rule, and `fill`, the tall track where the fill is the value and the text lives inside. The
-   geometry stays in :where() so the call site can change height and radius. */
+   rule, and `fill`, the tall track where the fill is the value and the text lives inside (drawn by
+   components/bencho/SloshSlider.tsx, so only its height and the root are set here). The geometry stays in
+   :where() so the call site can change height and radius. */
 :where(.tdc-slider) {
   position: relative;
   display: flex;
@@ -21,19 +22,15 @@
   border-radius: 9999px;
   background: var(--surface-2);
 }
-:where(.tdc-slider[data-variant="fill"] [data-slot="slider-track"]) {
-  height: 2rem;
-  border-radius: var(--el-radius-control, var(--radius));
+/* the fill variant is drawn by components/bencho/SloshSlider.tsx, which reads its track height from here */
+:where(.tdc-slider[data-variant="fill"]) {
+  --slo-h: 2rem;
 }
 :where(.tdc-slider [data-slot="slider-range"]) {
   position: absolute;
   height: 100%;
   background: var(--action);
 }
-/* in the tall track the fill is a large area: the full color would eat the number inside */
-:where(.tdc-slider[data-variant="fill"] [data-slot="slider-range"]) {
-  background: color-mix(in srgb, var(--action) 10%, transparent);
-}
 :where(.tdc-slider [data-slot="slider-thumb"]) {
   display: block;
   height: 1rem;
@@ -48,13 +45,6 @@
 :where(.tdc-slider [data-slot="slider-thumb"]):active {
   cursor: grabbing;
 }
-/* thin bar instead of a disc: inside a 32 px track the disc vanishes against the fill */
-:where(.tdc-slider[data-variant="fill"] [data-slot="slider-thumb"]) {
-  width: 4px;
-  border-radius: 2px;
-  background: var(--action);
-  box-shadow: inset 0 0 0 1px var(--action);
-}
 .tdc-slider [data-slot="slider-thumb"]:focus-visible {
   outline: 2px solid color-mix(in srgb, var(--action) 60%, transparent);
   outline-offset: 2px;

package/studio/web/styles/components/ui/switch.css

@@ -1,41 +1,2 @@
-/* ui/switch.tsx (.ui-switch). */
-
-.ui-switch {
-  position: relative;
-  flex: none;
-  width: 36px;
-  height: 20px;
-  padding: 0;
-  border: 0;
-  border-radius: 999px;
-  background: var(--el-alpha-200);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.ui-switch[data-state="checked"] {
-  background: var(--action);
-}
-.ui-switch:focus-visible {
-  outline: 2px solid var(--running);
-  outline-offset: 2px;
-}
-.ui-switch:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.ui-switch-thumb {
-  display: block;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
-  transform: translateX(2px);
-  transition:
-    transform 0.15s,
-    background 0.15s;
-}
-.ui-switch[data-state="checked"] .ui-switch-thumb {
-  transform: translateX(18px);
-  background: var(--action-text);
-}
+/* ui/switch.tsx (.ui-switch). The switch draws as Bencho's liquid toggle: the box, track, droplet and focus ring live in
+   components/bencho/liq-toggle.css (.bn-liq-*). `.ui-switch` is only the hook callers and theme rules style it by. */

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

@@ -22,6 +22,7 @@
   max-width: 760px;
 }
 .carousel-window {
+  position: relative;
   overflow: hidden;
   height: 196px;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
@@ -44,6 +45,8 @@
   background: none;
   padding: 0;
   cursor: pointer;
+  /* --shift pulls the voices before the center under the add ball; --s is the scale of its distance */
+  transform: translateX(var(--shift, 0px)) scale(var(--s, 1));
   transition:
     transform 0.5s cubic-bezier(0.22, 0.8, 0.24, 1),
     opacity 0.4s;
@@ -54,21 +57,60 @@
   transition: box-shadow 0.3s;
 }
 .carousel-item.d0 {
-  transform: scale(1);
+  --s: 1;
   opacity: 1;
 }
 .carousel-item.d1 {
-  transform: scale(0.7);
+  --s: 0.7;
   opacity: 0.75;
 }
 .carousel-item.d2 {
-  transform: scale(0.52);
+  --s: 0.52;
   opacity: 0.45;
 }
 .carousel-item.d3 {
-  transform: scale(0.4);
+  --s: 0.4;
   opacity: 0.25;
 }
+/* the voices behind the add ball: only the one right before the center stays (covered), the rest is gone */
+.carousel-item.under {
+  opacity: 0;
+  pointer-events: none;
+}
+/* the add ball: always the slot before the center (centered while there is no voice) */
+.carousel-add {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  z-index: 1;
+  width: var(--slot);
+  height: 196px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  transform: translateX(calc(var(--add-x) * var(--slot))) scale(var(--s, 1));
+  transition:
+    transform 0.5s cubic-bezier(0.22, 0.8, 0.24, 1),
+    opacity 0.4s;
+}
+.carousel-add.d0 {
+  --s: 1;
+  opacity: 1;
+}
+.carousel-add.d1 {
+  --s: 0.7;
+  opacity: 0.75;
+}
+/* opaque when it covers a voice, so the one beneath doesn't show through */
+.carousel-add.d1.covering {
+  opacity: 1;
+}
+.carousel-add:focus-visible {
+  outline: none;
+}
 /* the ring marks the chosen avatar only in the compact picker (clone voice); the voice carousel has no border */
 .carousel.compact .carousel-item.active.d0 .voice-avatar {
   box-shadow: