@crievo/omni 0.1.2 → 0.1.4

package/studio/web/styles/components/bencho/one-time-code.css

@@ -0,0 +1,148 @@
+/* One-time code (components/bencho/OneTimeCode.tsx), as on bencho.dev.
+   Everything that moves is written inline; what is here is the material. */
+
+/* The goo's <defs> hold nothing you can see, and an <svg> with no dimensions is a 300x150 box in the flow: taking it
+   out of flow costs nothing. */
+.bn-liq-defs {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+/* positioned at the root so a grab halo does not paint over the field */
+.bn-otp {
+  position: relative;
+  font-family: var(--font-ui);
+  display: grid;
+  place-items: center;
+}
+
+.bn-otp-row {
+  position: relative;
+}
+
+.bn-otp-goo {
+  position: absolute;
+  inset: 0;
+}
+
+/* one colour under the filter, or the threshold smears two */
+.bn-otp-cell {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: var(--fill-slab, var(--card));
+}
+
+.bn-otp-slot {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+.bn-otp-digit {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  color: var(--fill-on, var(--ink));
+  animation: bn-otp-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  transition: color 160ms ease;
+}
+
+.bn-otp[data-phase="no"] .bn-otp-digit {
+  color: #e5484d;
+}
+
+.bn-otp-caret {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 2px;
+  height: 18px;
+  margin-top: -9px;
+  border-radius: 2px;
+  background: var(--fill-on, var(--ink));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms ease;
+}
+
+.bn-otp-caret[data-on="true"] {
+  opacity: 1;
+  animation: bn-otp-breathe 1.1s ease-in-out infinite alternate;
+}
+
+.bn-otp-ok {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--fill-on, var(--ink));
+  pointer-events: none;
+  letter-spacing: -0.01em;
+}
+
+/* the field: over the whole row, there and invisible. 16px so iOS does not zoom the page when it takes focus. */
+.bn-otp-field {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border: 0;
+  padding: 0;
+  font-size: 16px;
+  caret-color: transparent;
+  cursor: text;
+  letter-spacing: -0.01em;
+}
+
+.bn-otp[data-phase="ok"] .bn-otp-field {
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-otp-digit {
+    animation: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-otp-caret[data-on="true"] {
+    animation: none;
+  }
+}
+
+@keyframes bn-otp-in {
+  from {
+    transform: translateY(45%) scale(0.86);
+    opacity: 0;
+    filter: blur(3px);
+  }
+  to {
+    transform: none;
+    opacity: 1;
+    filter: none;
+  }
+}
+
+@keyframes bn-otp-breathe {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
+}

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

@@ -0,0 +1,204 @@
+/* Assignees picker (components/bencho/AssigneePicker.tsx), as on bencho.dev.
+   A pill that fills with faces, and the list it fills from. The rail's width is an inline number rather than
+   anything measured. */
+.bn-pik {
+  position: relative;
+  box-sizing: border-box;
+  font-family: var(--font-ui);
+  color: var(--fill-on, var(--ink));
+}
+
+.bn-pik-pill {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  height: 44px;
+  /* tighter on the left: a face is a filled circle and a word is not, so 16 of air beside a word is 8 beside a
+     picture */
+  padding: 0 12px 0 8px;
+  border: 0;
+  background: var(--fill-slab, var(--card));
+  /* no shadow and no hairline: the ring comes back only when Stroke asks for it */
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  letter-spacing: -0.01em;
+}
+
+[data-stroke="on"] .bn-pik-pill {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+.bn-pik-pill:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.45);
+}
+
+/* the rail the faces sit in: its width is the whole animation. The faces are absolute inside it, so none moves when
+   another arrives. */
+.bn-pik-rail {
+  position: relative;
+  flex: none;
+  height: 28px;
+  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bn-pik-face {
+  position: absolute;
+  /* both corners pinned: the face is placed by its transform, in the row and in the quad alike */
+  top: 0;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  overflow: hidden;
+  /* the ring is the CARD's colour, not white: it is the gap between two overlapping faces, so it has to be whatever
+     is behind them or the stack grows a halo in dark mode */
+  box-shadow: 0 0 0 2px var(--fill-slab, var(--card));
+}
+
+.bn-pik-face canvas,
+.bn-pik-av canvas {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* with no faces the rail collapses to nothing but the pill's gap still sits in front of the word; pull it back so
+   the text is inset 12 from the edge, matching the pill's own right padding */
+.bn-pik-say {
+  margin-left: -6px;
+  color: var(--fill-on, var(--ink));
+}
+
+/* the chevron is the hover state: the glyph goes to a stronger ink, nothing new on screen */
+.bn-pik-chev {
+  flex: none;
+  margin-left: -2px;
+  color: color-mix(in srgb, var(--fill-on, #17181a) 32%, var(--fill-slab, #ffffff));
+  transition:
+    rotate 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 160ms ease;
+}
+
+.bn-pik-pill:hover .bn-pik-chev {
+  color: color-mix(in srgb, var(--fill-on, #17181a) 72%, var(--fill-slab, #ffffff));
+}
+
+.bn-pik-pill[aria-expanded="true"] .bn-pik-chev {
+  rotate: 180deg;
+}
+
+/* the list: absolute, so opening it moves nothing */
+.bn-pik-card {
+  position: absolute;
+  top: 54px;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  padding: 8px;
+  background: var(--fill-slab, var(--card));
+  /* it unfolds from the pill's corner: top left, not the middle */
+  transform-origin: 0 0;
+}
+
+[data-stroke="on"] .bn-pik-card {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+.bn-pik-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  height: 48px;
+  padding: 0 8px;
+  border: 0;
+  /* the card's corner less its 6px padding, set in the component so it tracks the Corner knob */
+  border-radius: var(--pik-row-r, 14px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background 160ms ease;
+}
+
+.bn-pik-row:hover {
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, transparent);
+}
+
+.bn-pik-row:focus-visible {
+  outline: none;
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, transparent);
+}
+
+.bn-pik-av {
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  overflow: hidden;
+  display: block;
+}
+
+.bn-pik-who {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.bn-pik-name {
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: 0em;
+}
+
+.bn-pik-role {
+  font-size: 11px;
+  color: color-mix(in srgb, var(--fill-on, #17181a) 52%, var(--fill-slab, #ffffff));
+  letter-spacing: 0em;
+}
+
+/* the mark is drawn at rest as an empty ring and filled when on, so the row always shows that it can be chosen */
+.bn-pik-mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  /* a rounded square, not a disc: one radius for both states, 0.3 of the side */
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1.5px rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.22);
+  transition:
+    background 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.bn-pik-row[data-on] .bn-pik-mark {
+  background: var(--fill-on, var(--ink));
+  box-shadow: inset 0 0 0 1.5px var(--fill-on, var(--ink));
+}
+
+.bn-pik-tick {
+  display: grid;
+  place-items: center;
+  color: var(--fill-slab, var(--card));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-pik-rail,
+  .bn-pik-chev {
+    transition-duration: 160ms;
+  }
+}

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

@@ -0,0 +1,313 @@
+/* Pull to refresh (components/bencho/PullToRefresh.tsx), as on bencho.dev.
+   A portfolio card: pull it down and it stretches, let go past the line to refresh. */
+
+/* Stroke is a question about the block's own edge: a 1px spread shadow is the same mark as a border without
+   needing a pseudo-element, and it composites without touching layout. */
+[data-stroke="on"] .bn-bal {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+/* Height is not declared: the content sizes the card, so there is nothing to keep in agreement. */
+.bn-bal {
+  position: relative;
+  box-sizing: border-box;
+  width: 300px;
+  border-radius: var(--bal-r, 28px);
+  background: var(--fill-slab, color-mix(in srgb, var(--fill-on, #17181a) 6%, transparent));
+  overflow: hidden;
+  font-family: var(--font-ui);
+  /* The card grows with the pull. The sheet inside slides down by --at and the card's own height follows it, so
+     the top edge stays put and the bottom travels with the finger. Padding rather than a scale: a scaled box drags
+     its corner radius out of shape. --grow carries the rest padding as well as the growth, so the rebound can
+     spend it: the spring goes past zero on the way home and the card compresses a few pixels below its resting
+     height. That is the bounce.
+
+     The negative margin cancels it in layout. A card whose real height changed during a pull would make whatever
+     measures it re-pack and rescale every frame, and the re-render mid-gesture made the pull stop responding.
+     Growing and un-growing by the same number leaves the margin box exactly where it was: the card paints taller
+     and measures the same. */
+  padding-bottom: var(--grow, 8px);
+  margin-bottom: calc(-1 * var(--grow, 8px));
+}
+
+/* The indicator, under the sheet and revealed as the sheet is pulled down off it. --dx/--dy are worked out in the
+   component from each dot's angle and the spread. The ring turns as a whole while it works (the animation is on
+   this box, not on the dots). */
+.bn-bal-goo {
+  position: absolute;
+  left: 50%;
+  /* the ring has to clear the sheet's top edge at the moment the pull commits */
+  top: 30px;
+  width: 60px;
+  height: 60px;
+  margin: -30px 0 0 -30px;
+  z-index: 1;
+  pointer-events: none;
+  /* the dots share one cell and are displaced out of it */
+  display: grid;
+  place-items: center;
+  opacity: var(--p, 0);
+  scale: calc(0.82 + var(--p, 0) * 0.18);
+}
+
+.bn-bal[data-phase="work"] .bn-bal-goo {
+  opacity: 1;
+  scale: 1;
+  animation: bn-bal-spin var(--rpm, 900ms) linear infinite;
+}
+
+.bn-bal-drop {
+  grid-area: 1 / 1;
+  width: 4px;
+  height: 4px;
+  border-radius: 999px;
+  /* grey, not ink: a loading mark is the quietest thing that can be on a screen and still do its job. A wash of the
+     fill's own ink, so it stays a step off whatever the component is made of in either direction. */
+  background: color-mix(in srgb, var(--fill-on, #17181a) 32%, transparent);
+  transform: translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px));
+}
+
+.bn-bal-scroll {
+  position: relative;
+  z-index: 2;
+  transform: translateY(var(--at));
+  /* pan-x reserves the vertical drag for the element and leaves horizontal to the browser, the right way round for
+     something you pull down. .bn-bal-plot is the opposite case (its scrub is horizontal) and keeps pan-y. */
+  touch-action: pan-x;
+  /* a pull must not select the figures under the finger (the site's stage supplied this) */
+  -webkit-user-select: none;
+  user-select: none;
+  /* opaque, or the dots underneath show through the sheet they are supposed to be hidden behind */
+  background: var(--fill-slab, var(--card));
+}
+
+.bn-bal-scroll:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.45);
+  border-radius: 28px;
+}
+
+/* Everything is on the fill's own ink, so a dark Fill inverts the whole sheet. The top gets more padding than the
+   sides; the foot gets less, because the card under it already carries 8px of its own for the squash. */
+.bn-bal-sheet {
+  padding: 24px 12px 4px;
+}
+
+.bn-bal-sum {
+  margin: 0;
+  font-size: 30px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  color: var(--fill-on, var(--ink));
+  font-variant-numeric: tabular-nums;
+}
+
+/* the mark is part of the number: same size, weight and colour */
+.bn-bal-cur {
+  font-size: inherit;
+  font-weight: inherit;
+  margin-right: 2px;
+}
+
+.bn-bal-dec {
+  font-size: 20px;
+  opacity: 0.34;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+.bn-bal-move {
+  /* tabular above all: this line is rewritten on every step of a scrub */
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 9px 0 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: color-mix(in srgb, var(--fill-on, #17181a) 52%, var(--fill-slab, #ffffff));
+  letter-spacing: 0em;
+}
+
+.bn-bal-move[data-up="true"] {
+  color: var(--ok);
+}
+
+.bn-bal-move[data-up="false"] {
+  color: var(--ember);
+}
+
+/* the word, or the time: always the quiet half of the line */
+.bn-bal-when {
+  color: color-mix(in srgb, var(--fill-on, #17181a) 32%, var(--fill-slab, #ffffff));
+  font-variant-numeric: tabular-nums;
+}
+
+/* The line. Green because the reading it draws is: `color` is set on the wrapper so the stroke, the guide and the
+   dot all agree without any of them naming a value. */
+.bn-bal-plot {
+  position: relative;
+  display: block;
+  margin: 22px 0 6px;
+  /* The grab area is the plot, and it is worth more than the line is tall. It is a variable because the dot and the
+     guide place themselves against the chart, and the plot is 12px taller than the chart: written once, they
+     cannot drift. */
+  --pad-y: 6px;
+  padding: var(--pad-y) 0;
+  /* brighter than the number on purpose: --ok is a text green, and drawn as a 1.7px stroke it is muddy, since a
+     thin line of a dark colour always looks darker than a block of it */
+  --line: #1f9d55;
+  color: var(--line);
+  cursor: crosshair;
+  touch-action: pan-y;
+}
+
+[data-theme="dark"] .bn-bal-plot {
+  --line: #1f9d55;
+}
+
+/* and the same argument the other way for a fall */
+.bn-bal-plot[data-up="false"] {
+  --line: #e5484d;
+  color: var(--line);
+}
+
+[data-theme="dark"] .bn-bal-plot[data-up="false"] {
+  --line: #ff7a4d;
+}
+
+.bn-bal-line {
+  display: block;
+  width: 100%;
+  height: 92px;
+  overflow: visible;
+}
+
+.bn-bal-curve {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.1;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  /* without this the stroke stretches with the viewBox: a rope along one axis and a hairline along the other */
+  vector-effect: non-scaling-stroke;
+}
+
+/* The guide only exists while you are on the plot. */
+.bn-bal-guide {
+  position: absolute;
+  top: var(--pad-y, 6px);
+  bottom: var(--pad-y, 6px);
+  width: 1px;
+  margin-left: -0.5px;
+  background: currentColor;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms ease;
+}
+
+.bn-bal-plot[data-scrub] .bn-bal-guide {
+  opacity: 0.28;
+}
+
+/* The mark on the reading, outside the stretched svg, placed from the same points the path was built from.
+   It does not transition its position: a dot that eases toward the pointer is wrong for 140ms at every step, and the
+   whole claim of a scrub is that the number and the place agree. Only the size changes on a timer.
+   `--tip` is where the reading is down the chart, 0 at the top and 1 at the bottom, resolved against the chart's own
+   height: a plain `top: %` resolves against the plot, which would land the dot 6px high at the top of the range, 6px
+   low at the bottom and exactly right in the middle. */
+.bn-bal-tip {
+  position: absolute;
+  top: calc(var(--pad-y, 6px) + (100% - 2 * var(--pad-y, 6px)) * var(--tip, 0));
+  width: 9px;
+  height: 9px;
+  margin: -4.5px 0 0 -4.5px;
+  border-radius: 999px;
+  background: var(--fill-slab, var(--bg));
+  box-shadow: 0 0 0 2px currentColor;
+  pointer-events: none;
+  transition: scale 160ms cubic-bezier(0.24, 1.34, 0.38, 1);
+}
+
+.bn-bal-plot[data-scrub] .bn-bal-tip {
+  scale: 1.18;
+}
+
+/* The window: three small pills. Light on purpose: the chart above is the subject, and what sits under it should be
+   a control rather than a second reading competing with the first. */
+.bn-bal-win {
+  position: relative;
+  display: flex;
+  gap: 4px;
+  margin: 16px 0 0;
+}
+
+/* One tab wide, and one tab plus a gap per step across. The percentage in translateX is of the pill's own width,
+   which is the tab width, so the sum is exact at any card scale and nothing has to be measured. */
+.bn-bal-win-pill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: calc((100% - (var(--win-n, 3) - 1) * 4px) / var(--win-n, 3));
+  border-radius: var(--bal-tab-r, 999px);
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, transparent);
+  transform: translateX(calc(var(--win, 0) * (100% + 4px)));
+  /* a bounce you feel rather than watch: the overshoot is what separates a thing being moved from a thing being
+     switched, but kept in the low single figures */
+  transition: transform 420ms cubic-bezier(0.24, 1.34, 0.38, 1);
+}
+
+.bn-bal-win-btn {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  height: 32px;
+  border: 0;
+  border-radius: var(--bal-tab-r, 999px);
+  background: none;
+  color: color-mix(in srgb, var(--fill-on, #17181a) 52%, var(--fill-slab, #ffffff));
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0em;
+  cursor: pointer;
+  /* the label lands before the pill does, so the word you pressed is the one that reads first */
+  transition:
+    color 220ms ease,
+    transform 220ms cubic-bezier(0.24, 1.34, 0.38, 1);
+}
+
+.bn-bal-win-btn:hover {
+  color: var(--fill-on, var(--ink));
+}
+
+.bn-bal-win-btn:active {
+  transform: scale(0.96);
+}
+
+/* the pad is the pill's now; this only carries the ink */
+.bn-bal-win-btn[data-on] {
+  color: var(--fill-on, var(--ink));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-bal[data-phase="work"] .bn-bal-goo {
+    animation-duration: 3s;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-bal-tip,
+  .bn-bal-guide,
+  .bn-bal-win-pill {
+    transition-duration: 160ms;
+  }
+}
+
+@keyframes bn-bal-spin {
+  to {
+    rotate: 360deg;
+  }
+}

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

@@ -0,0 +1,42 @@
+/* What bencho.dev's Tailwind preflight gave the ported components, over the studio's own element rules. Applies inside
+   the gallery page (.bencho) and inside any real screen's wrapper (.bn-scope), never outside. */
+
+.bencho *,
+.bencho *::before,
+.bencho *::after,
+.bn-scope *,
+.bn-scope *::before,
+.bn-scope *::after {
+  box-sizing: border-box;
+}
+/* the wrapper adds no box: layout around it is untouched, the custom properties still inherit through it */
+.bn-scope {
+  display: contents;
+  font-family: var(--font-ui);
+  color: var(--ink);
+  -webkit-font-smoothing: antialiased;
+}
+:where(.bencho, .bn-scope) :where(button, input, textarea, select) {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  outline-offset: 2px;
+  letter-spacing: inherit;
+}
+:where(.bencho, .bn-scope) :where(button) {
+  cursor: pointer;
+}
+:where(.bencho, .bn-scope) :where(h1, h2, h3, h4, p) {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-transform: none;
+}
+:where(.bencho, .bn-scope) :where(svg) {
+  display: block;
+}