@crievo/omni 0.1.2 → 0.1.4

package/studio/web/styles/components/bencho/slide-confirm.css

@@ -0,0 +1,139 @@
+/* Slide to confirm (components/bencho/SlideToConfirm.tsx), as on bencho.dev.
+   A handle crossing a track; on commit the handle is the confirmation, unfurling leftward to fill what it crossed. */
+.bn-sld {
+  box-sizing: border-box;
+  /* a fluid track is width:100% and must not shrink out of a flex row */
+  max-width: 100%;
+  font-family: var(--font-ui);
+  color: var(--fill-on, var(--ink));
+}
+
+/* in a row of buttons the slide takes what is left, wrapping to its own line when the row is narrow */
+.bn-sld-grow {
+  flex: 1 1 240px;
+  min-width: 200px;
+}
+
+.bn-sld-track {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  /* the track is the slab, the handle is the ink: white track with a near-black handle in light, the reverse in dark.
+     On commit the handle fills the track, so the confirmed state is a solid ink pill in both */
+  background: var(--fill-slab, var(--card));
+  /* the drag is the component; the browser may not take the gesture for panning */
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+[data-stroke="on"] .bn-sld-track {
+  box-shadow: inset 0 0 0 1px var(--pane-edge);
+}
+
+/* the ground already covered: the same ink as the handle, so the pair reads as one capsule with a rounded cap at each
+   end (it runs from the left pad to the handle's right edge). Above the label so the advancing cap wipes the words
+   instead of leaving them muddy on their own colour; the handle needs a z-index of its own to stay over it */
+.bn-sld-wash {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  bottom: 4px;
+  background: var(--fill-on, var(--ink));
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* centred in the pill, not in the room beside the handle: the track is the object */
+.bn-sld-say {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: color-mix(in srgb, var(--fill-on, #17181a) 52%, var(--fill-slab, #ffffff));
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.bn-sld-grip {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  height: 48px;
+  padding: 0;
+  border: 0;
+  background: var(--fill-on, var(--ink));
+  color: var(--fill-slab, var(--card));
+  cursor: grab;
+  /* it takes the pointer so it can swell on hover; a press still reaches the track by bubbling */
+  pointer-events: auto;
+  /* the wall it lands against, so the squash compresses toward the end of the track */
+  transform-origin: 0% 50%;
+  /* it is placed by a motion value, so nothing here may transition `transform` */
+  transition: none;
+  z-index: 2;
+}
+
+/* the owner is not ready for this action (nothing to send yet, another request running): the slide is there but cannot
+   be taken */
+.bn-sld[data-disabled] {
+  opacity: 0.5;
+}
+
+.bn-sld[data-disabled] .bn-sld-grip {
+  cursor: not-allowed;
+}
+
+/* the keyboard's way in: the handle is ink on a slab, so a ring of the same ink one pad out sits inside the track */
+.bn-sld-grip:focus-visible {
+  outline: 2px solid var(--fill-on, var(--ink));
+  outline-offset: 2px;
+}
+
+.bn-sld-track[data-held] .bn-sld-grip {
+  cursor: grabbing;
+}
+
+/* two contents, both absolute: neither has to make room for the other and the handle's width is free to be whatever
+   the morph says. In one grid cell an overflowing item resolved `center` to `start` and shoved the arrow 21px off */
+.bn-sld-arrow,
+.bn-sld-done {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* working: the action the slide started is still running */
+.bn-sld-spin {
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--fill-slab, #fff) 35%, transparent);
+  border-top-color: var(--fill-slab, #fff);
+  animation: bn-sld-spin 0.8s linear infinite;
+}
+
+@keyframes bn-sld-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-sld-done {
+    transition-duration: 160ms;
+  }
+}

package/studio/web/styles/components/bencho/slosh.css

@@ -0,0 +1,137 @@
+/* Slosh slider (components/bencho/SloshSlider.tsx), as on bencho.dev. Ported from bencho.dev (MIT).
+   No transitions anywhere in here: every value on this block is written by the loop, and a transition on top of a
+   spring is two opinions about the same number. */
+
+/* the block's frame (the original's shared .ply base merged in), no card: just the track */
+.bn-slo {
+  position: relative;
+  box-sizing: border-box;
+  width: 320px;
+  font-family: var(--font-ui);
+  color: var(--ink);
+}
+
+/* In a real screen the track takes the width its row gives it (the demo's 320px is only the demo's). The studio's own
+   rules for a slider, which are more specific, still win over this on width. */
+.bn-slo--fluid {
+  width: 100%;
+}
+
+/* the hairline, hung on a ::before like every other stroke on the bench: transparent until Stroke says otherwise.
+   Slosh is not glass, so the hairline is the only edge it can have. */
+.bn-slo-track::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid transparent;
+  pointer-events: none;
+}
+
+[data-stroke="on"] .bn-slo-track::before {
+  border-color: var(--pane-edge);
+}
+
+/* In a real screen the card behind it is the same white as the liquid, which would leave a bare slider with no left
+   edge at all. The hairline is on there, in ink rather than glass. */
+.bn-scope .bn-slo-track::before {
+  z-index: 1;
+  border-color: rgba(var(--ink-rgb), 0.1);
+}
+
+/* The well is grey, the liquid is white: the thing that moves is the bright, raised surface and the back is a recess.
+   No shadow on either; the well is darker than the card it is cut into, which is the whole of how a recess reads.
+   Opaque, and mixed from the fill's own pair rather than a wash, so it looks the same whatever it stands on. */
+.bn-slo-track {
+  position: relative;
+  width: 100%;
+  /* 40px is the demo; the studio's slider sets --slo-h (or the height of its track slot) and takes the height from there */
+  height: var(--slo-h, 40px);
+  border-radius: var(--slo-r, 14px);
+  background: color-mix(in srgb, var(--fill-on, var(--ink)) 11%, var(--fill-slab, var(--board)));
+  /* the fill leans past its own width at speed, and the track is what stops the meniscus running off the end */
+  overflow: hidden;
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.bn-slo-track:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--fill-slab, var(--bg)),
+    0 0 0 4px rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.4);
+}
+
+/* The liquid. The leading edge is slanted by a clip rather than by a skew: a skew leans the whole body and the bottom
+   edge lifts off the floor of the track, which is a bar tipping over rather than a surface with momentum in it. */
+.bn-slo-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 62%;
+  background: var(--fill-slab, var(--board));
+  clip-path: polygon(0 0, calc(100% + var(--lean, 0px)) 0, calc(100% - var(--lean, 0px)) 100%, 0 100%);
+}
+
+/* The same two roles, the ramp the other way up: in a dark fill the slab is already the floor, so the well is the
+   slab and the slider is the lift off it. The slider is a raised grey rather than a literal white, since a near-white
+   body that size on a near-black page is the brightest object on the screen. */
+[data-fill="dark"] .bn-slo-track {
+  background: var(--fill-slab);
+}
+
+[data-fill="dark"] .bn-slo-fill {
+  background: color-mix(in srgb, var(--fill-on) 15%, var(--fill-slab));
+}
+
+/* Inside a real screen the fill follows the system theme (see .bn-scope in tokens.css), not a data-fill on a stage. */
+@media (prefers-color-scheme: dark) {
+  .bn-scope .bn-slo-track {
+    background: var(--fill-slab);
+  }
+
+  .bn-scope .bn-slo-fill {
+    background: color-mix(in srgb, var(--fill-on) 15%, var(--fill-slab));
+  }
+}
+
+.bn-slo[data-disabled] .bn-slo-track {
+  cursor: not-allowed;
+}
+
+/* A reference value (0 dB, 100 %): a dashed rule through the well and the liquid alike, so it reads on either. */
+.bn-slo-mark {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-left: 2px dashed rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.4);
+  pointer-events: none;
+}
+
+/* The words ride on top of the liquid and never get in the way of the finger. */
+.bn-slo-label {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  translate: 0 -50%;
+  pointer-events: none;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--fill-on, var(--ink));
+}
+
+/* The handle: rigid and under your finger. Thin on purpose, it is a reading of where you are, and the fill is the
+   thing with the mass. */
+.bn-slo-knob {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  left: 62%;
+  width: 3px;
+  margin-left: -1.5px;
+  border-radius: 999px;
+  background: var(--fill-on, var(--ink));
+  pointer-events: none;
+}

package/studio/web/styles/components/bencho/sound.css

@@ -0,0 +1,260 @@
+/* Now playing (components/bencho/NowPlaying.tsx), as on bencho.dev.
+   A now-playing bar that opens into a player.
+
+   There is almost nothing here, and that is deliberate: every position, size and radius is written by the tween in
+   NowPlaying.tsx and arrives as an inline style. A transition on any of these rules would be a second opinion about
+   where a thing is, fighting the first one every frame. What is left is the material: the surfaces, the type and the
+   two hover states. Ported from bencho.dev (MIT). */
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-snd-op,
+  .bn-snd-art,
+  .bn-snd-like {
+    transition-duration: 160ms;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-snd-like[data-on] svg {
+    animation: none;
+  }
+}
+
+.bn-snd {
+  position: relative;
+  display: grid;
+  place-items: center;
+  font-family: var(--font-ui);
+}
+
+/* The object: the quietest surface that still reads as one, the pane the rest of the bench uses. */
+.bn-snd-box {
+  position: relative;
+  background: var(--pane);
+  -webkit-backdrop-filter: blur(2px) saturate(150%);
+  backdrop-filter: blur(2px) saturate(150%);
+  overflow: hidden;
+}
+
+/* No border of its own: the hairline is the Stroke control's to give, as a spread shadow, since the box has
+   overflow: hidden and a border would be one more thing the morph has to carry through every frame. */
+[data-stroke="on"] .bn-snd-box {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+/* The cover. `cover`, not `contain`: the square is the fixed thing and the picture is cropped to it. The gradient
+   stays underneath as the ground, for the frame before the art has decoded. */
+.bn-snd-art {
+  position: absolute;
+  background-color: var(--surface-2);
+  background-image: linear-gradient(148deg, var(--surface-3), var(--surface-2));
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* The words: one block that travels beside the cover. Centred by the box, not by a number: it is given the sleeve's
+   own height and centres inside it, so the two are level at every size the morph passes through. */
+.bn-snd-say {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-width: 0;
+  pointer-events: none;
+}
+
+.bn-snd-title {
+  color: var(--ink);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bn-snd-by {
+  color: var(--ink-4);
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
+/* The track: a rail and a run, and the times at either end under it. Nothing here is interactive. */
+.bn-snd-bar {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.bn-snd-rail {
+  display: block;
+  height: 3px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--fill-on, #17181a) 12%, transparent);
+  overflow: hidden;
+}
+
+.bn-snd-run {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--ink);
+}
+
+/* The interface face with tabular figures, so the digits stop moving as the count ticks. line-height 1 makes the row
+   the height of the digits and not of the font's own leading. */
+.bn-snd-clock {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--font-ui);
+  font-variant-numeric: tabular-nums;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0em;
+  color: var(--ink-4);
+}
+
+/* The transport, placed by its centre: the row's own width changes between the two states, so an edge would move even
+   when the middle of it did not. */
+.bn-snd-ops {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  translate: -50% -50%;
+}
+
+.bn-snd-op {
+  flex: none;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ink-3);
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    color 160ms ease,
+    background 160ms ease,
+    scale 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bn-snd-op:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, transparent);
+}
+
+/* The press yields before it acts. `scale` as its own property, not inside a transform: the row is placed with
+   `translate` and the play button's size is written by the tween. */
+.bn-snd-op:active {
+  scale: 0.96;
+}
+
+/* the one you press most, and the only one that is filled */
+.bn-snd-op[data-lead] {
+  background: var(--ink);
+  color: var(--on-ink);
+}
+
+.bn-snd-op[data-lead]:hover {
+  background: var(--ink);
+  opacity: 0.88;
+}
+
+.bn-snd-op:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--card),
+    0 0 0 4px rgba(var(--ink-rgb), 0.35);
+}
+
+/* The heart: built off .bn-snd-op rather than sharing it, since it is not in the transport row and it is the only
+   control that stays on after you let go. Ink when on, not red: the shape already carries the meaning. */
+.bn-snd-like {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ink-3);
+  cursor: pointer;
+  transition:
+    color 160ms ease,
+    background 160ms ease,
+    scale 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bn-snd-like:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, transparent);
+}
+
+.bn-snd-like:active {
+  scale: 0.96;
+}
+
+.bn-snd-like[data-on] {
+  color: var(--ink);
+}
+
+.bn-snd-like[data-on]:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, transparent);
+}
+
+/* The beat, on the way on only: unliking does not deserve a flourish. Overshoot is the whole effect. */
+.bn-snd-like[data-on] svg {
+  animation: bn-snd-beat 340ms cubic-bezier(0.3, 1.4, 0.5, 1);
+}
+
+.bn-snd-like:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--card),
+    0 0 0 4px rgba(var(--ink-rgb), 0.35);
+}
+
+/* the hit area, and nothing else */
+.bn-snd-tap {
+  position: absolute;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+/* the cover gives too: it is the thing you press to change the shape, so it answers the way the transport does.
+   Scoped to the art, since the hit area is invisible and scaling nothing looks like nothing. */
+.bn-snd-box:has(.bn-snd-tap:active) .bn-snd-art {
+  scale: 0.96;
+}
+
+.bn-snd-art {
+  transition: scale 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bn-snd-tap:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--card),
+    0 0 0 4px rgba(var(--ink-rgb), 0.35);
+}
+
+@keyframes bn-snd-beat {
+  0% {
+    scale: 1;
+  }
+  38% {
+    scale: 1.34;
+  }
+  100% {
+    scale: 1;
+  }
+}