@crievo/omni 0.1.3 → 0.1.5

package/studio/web/styles/components/bencho/action-node.css

@@ -0,0 +1,227 @@
+/* Action node (components/bencho/ActionNode.tsx), as on bencho.dev (MIT).
+   A node card whose controls live in its top-right corner until the pointer asks for them. The component owns the
+   geometry (every number that decides where a button sits is arithmetic on an arc, in the .tsx); what is here is what
+   the card and the buttons are made of. */
+
+/* the Stroke ring follows the card's own corner, which is a knob; the buttons have nothing else on them */
+[data-stroke="on"] .bn-nod-card {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+  border-radius: var(--nod-r, 20px);
+}
+
+[data-stroke="on"] .bn-nod-act {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+/* the box is the card, plus air above and below, never beside: the width stays the card's */
+.bn-nod {
+  position: relative;
+  /* --nod-w is the Width prop; without it the box is the card's own 272 */
+  width: var(--nod-w, max-content);
+  font-family: var(--font-ui);
+}
+
+/* the card is painted over the fan, which is what makes the buttons come out of the corner rather than out of the
+   middle of the card: struck from a point inside it, at rest they sit under it with nothing showing */
+.bn-nod-card {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  /* a block, left-aligned, no underline: the card is a div, a button or a link depending on who renders it */
+  display: block;
+  width: var(--nod-w, 272px);
+  padding: 20px;
+  text-align: left;
+  text-decoration: none;
+  /* set per render, the Corner knob. The buttons are not cut with it: they are discs */
+  border-radius: var(--nod-r, 20px);
+  background: var(--fill-slab, var(--card));
+  color: var(--fill-on, var(--ink));
+  /* it lifts a hair while the fan is out: the card answers at the same moment they do */
+  transition: translate 220ms cubic-bezier(0.24, 1.34, 0.38, 1);
+}
+
+.bn-nod-card[data-on] {
+  translate: 0 -1px;
+}
+
+button.bn-nod-card,
+a.bn-nod-card {
+  cursor: pointer;
+}
+
+/* the card that is picked: a ring in the card's own ink, outside it so the layout does not move */
+.bn-nod-card[data-selected] {
+  box-shadow: 0 0 0 2px var(--fill-on, var(--ink));
+}
+
+.bn-nod-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* a caller's own marker replaces the wash box: it brings its own shape */
+.bn-nod-mark[data-bare] {
+  width: auto;
+  height: auto;
+  background: none;
+  border-radius: 0;
+  flex: none;
+}
+
+/* the product's mark, cut with the card (--nod-mark-r is a share of its radius; 15 on a 30px box is the old disc) */
+.bn-nod-mark {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--nod-mark-r, 14px);
+  background: rgba(var(--ink-rgb), var(--wash));
+  color: var(--fill-on, var(--ink));
+}
+
+/* 500, not 600: at 15px nothing has been given away, so 600 is just loud on a card about four quiet buttons */
+.bn-nod-name {
+  min-width: 0;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+
+/* the faces, overlapped: a negative margin and a ring in the card's own colour (not a fixed white, which would draw
+   bright arcs on the dark fill). Further from the sentence than the sentence is from the name: who is on the step is
+   an aside under the reading. */
+.bn-nod-chain {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+}
+
+.bn-nod-link {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--fill-on, #17181a) 12%, transparent);
+  box-shadow: 0 0 0 2px var(--fill-slab, var(--card));
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--ink-4);
+  letter-spacing: 0em;
+}
+
+.bn-nod-link img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bn-nod-link + .bn-nod-link {
+  margin-left: -6px;
+}
+
+.bn-nod-more {
+  margin-left: 8px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--ink-4);
+  letter-spacing: 0em;
+}
+
+.bn-nod-say {
+  display: block;
+  margin: 13px 0 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--ink-3);
+  letter-spacing: 0em;
+}
+
+/* the fan: a zero-sized box pinned to the card's top-right corner. The anchor is a point; giving it a size would
+   measure every offset from an edge that has nothing to do with the corner. Under the card (it comes after it in the
+   markup, so without z-index every button would show from the first frame). */
+.bn-nod-fan {
+  position: absolute;
+  z-index: 0;
+  width: 0;
+  height: 0;
+}
+
+/* the pad that makes the fan reachable: invisible, part of .bn-nod so the air between the card and the buttons is
+   not a place the pointer falls through. Inert until the fan is out. */
+.bn-nod-reach {
+  position: absolute;
+  pointer-events: none;
+}
+
+.bn-nod-reach[data-on] {
+  pointer-events: auto;
+}
+
+.bn-nod-act {
+  position: absolute;
+  /* the anchor is a point and the translate in the component moves the button from it */
+  top: 0;
+  left: 0;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--fill-slab, var(--card));
+  color: var(--fill-on, var(--ink));
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  /* two writers, one scale: the spring owns how far out a button is (--pop, every frame) and the hover owns whether
+     it is pointed at (--zoom, twice per hover). Only --zoom is transitioned, so the easing never smooths the
+     spring's own frames. */
+  scale: calc(var(--pop, 1) * var(--zoom, 1));
+  transition: --zoom 160ms cubic-bezier(0.24, 1.34, 0.38, 1);
+}
+
+/* the hover is the size and nothing else: one cue, the button grows and stays the colour it was */
+.bn-nod-act:hover {
+  --zoom: 1.12;
+}
+
+/* the fan flipped: the same geometry about the card's horizontal axis, so the glyphs are flipped back */
+.bn-nod[data-fan="down"] .bn-nod-fan {
+  transform: scaleY(-1);
+}
+
+.bn-nod[data-fan="down"] .bn-nod-act svg {
+  scale: 1 -1;
+}
+
+/* dense: for a card among cells (the pipeline stepper). The type and the padding give way, the corner radius is the
+   caller's, and the buttons keep their size: they are for a pointer, not for reading. */
+.bn-nod[data-dense] .bn-nod-card {
+  padding: 10px 12px;
+}
+
+.bn-nod[data-dense] .bn-nod-top {
+  gap: 7px;
+}
+
+.bn-nod[data-dense] .bn-nod-name {
+  font-size: 12.5px;
+  line-height: 1.2;
+}
+
+.bn-nod[data-dense] .bn-nod-say {
+  margin-top: 6px;
+  font-size: 11.5px;
+  line-height: 1.3;
+}
+
+.bn-nod[data-dense] .bn-nod-chain {
+  margin-top: 8px;
+}
+
+.bn-nod-act:disabled {
+  opacity: 0.45;
+  cursor: default;
+}

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

@@ -0,0 +1,182 @@
+/* Checklist (components/bencho/Checklist.tsx), as on bencho.dev.
+   Three tasks; tick one and the box fills, the tick draws in and the words strike out. */
+.bn-chk {
+  box-sizing: border-box;
+  /* it opens, it does not jump: the component states its height rather than letting the rows add up to it, which is
+     what gives this something to interpolate. The overflow is clipped so it reads as the card opening: the new task
+     takes the empty slot the spare row was in. */
+  overflow: hidden;
+  transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1);
+  /* the rows stay in flow and the fall is a transform on each; this is the stacking context the heap's z-order needs */
+  position: relative;
+  background: var(--fill-slab, var(--card));
+  font-family: var(--font-ui);
+  color: var(--fill-on, var(--ink));
+}
+
+/* the hairline is the Stroke control's to give: a spread shadow rather than a border, so it costs the card no layout */
+[data-stroke="on"] .bn-chk {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+.bn-chk-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  /* so the heap can be ordered: the row that lands last is the top of the pile, the opposite of DOM order */
+  position: relative;
+  /* nothing at the sides: the card's own padding is the inset */
+  padding: 0;
+  border: 0;
+  border-radius: 10px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  /* the row is the target, not the box: the words beside it are the part anybody points at */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* The spare row is the one thing here that is not a task, so it has the same geometry as a row and a third of the ink.
+   The type is set once on the row: a button and an input are the same line of text at two moments. */
+.bn-chk-add {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  transition: opacity 220ms ease;
+}
+
+/* it keeps its space while the heap is down: removing it would change the card's height in the middle of a fall */
+.bn-chk-add[data-hide] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* the box that is not a checkbox: the ring at a fraction of its strength and nothing inside it */
+.bn-chk-ghost {
+  flex: none;
+  box-shadow: inset 0 0 0 1.5px rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.16);
+}
+
+.bn-chk-new {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  /* `font: inherit` does not carry this: a button and an input take letter-spacing from the UA sheet */
+  letter-spacing: inherit;
+  text-align: left;
+  cursor: pointer;
+  opacity: 0.34;
+  transition: opacity 160ms ease;
+}
+
+.bn-chk-new:hover {
+  opacity: 0.62;
+}
+
+.bn-chk-field {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  outline: none;
+}
+
+.bn-chk-field::placeholder {
+  color: color-mix(in srgb, var(--fill-on, #17181a) 32%, var(--fill-slab, #ffffff));
+}
+
+/* On the floor: opaque, and only once it has fallen, or two tasks read through each other at three degrees of rotation.
+   On a pseudo-element, inset, because the row's own box is not the object that falls: a row is 40px tall so that the
+   whole line is a target, what you see is about twenty. The component sends its own inset down as --slip. Behind the
+   words: the row carries a z-index while fallen, which makes it a stacking context, so the negative one lands under
+   its own contents and nothing else. */
+.bn-chk-row[data-fell]::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: var(--slip, 9px);
+  bottom: var(--slip, 9px);
+  border-radius: 10px;
+  background: var(--fill-slab, var(--card));
+  z-index: -1;
+}
+
+.bn-chk-row:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.4);
+}
+
+/* The ring never changes; the fill opens inside it. `overflow: hidden` keeps the fill's overshoot inside the ring. */
+.bn-chk-box {
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1.5px rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.28);
+}
+
+.bn-chk-fill {
+  position: absolute;
+  inset: 0;
+  background: var(--fill-on, var(--ink));
+  /* from the middle out: a corner origin would read as a panel sliding in */
+  transform-origin: center;
+}
+
+/* Drawn rather than faded: stroke-dashoffset walks the stroke on from its start. It sits on the fill and takes the
+   fill's own ground colour, so it can be full strength and invisible until there is something under it. */
+.bn-chk-tick {
+  position: relative;
+  width: 68%;
+  height: 68%;
+  overflow: visible;
+  fill: none;
+  stroke: var(--fill-slab, var(--card));
+  stroke-width: 2.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.bn-chk-say {
+  position: relative;
+  /* sized to the words, not to the row: the rule is a scale of this box, so a full-width span would strike out the
+     empty half of the line as well */
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.bn-chk-word {
+  display: inline-block;
+}
+
+.bn-chk-rule {
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* on the type's own middle rather than the box's: a rule centred on a line box sits low, the box carries the
+     descender space and the letters do not */
+  top: 46%;
+  height: 1.5px;
+  border-radius: 2px;
+  background: currentColor;
+  transform-origin: left center;
+  pointer-events: none;
+}

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

@@ -0,0 +1,188 @@
+/* Magnifying dock (components/bencho/MagnifyDock.tsx), as on bencho.dev.
+   Glass navigation: 60% white, 2px frost, refraction, lit inner edge. The glass tokens (--pane, --g-*) come from the
+   stage's data-surface="glass". */
+.bn-gdock {
+  position: relative;
+  background: var(--pane);
+  -webkit-backdrop-filter: blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%));
+  backdrop-filter: blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%));
+  isolation: isolate;
+  color: var(--ink);
+}
+
+.bn-gdock::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  /* transparent unless Stroke says otherwise, see the stroke block below */
+  border: 1px solid transparent;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.bn-gdock {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 28px;
+  /* sideways is the dock's, up and down stays the page's: a finger passing over this on the way down is scrolling,
+     not picking */
+  touch-action: pan-y;
+}
+
+/* no tile behind the icon: scaling a translucent rectangle over glass is what made this look cheap. The glyph scales
+   instead, and SVG scales cleanly at any size. */
+.bn-gdock-item {
+  position: relative;
+  width: 44px;
+  height: 44px;
+  border: 0;
+  background: none;
+  color: var(--ink);
+  opacity: 0.42;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: opacity 220ms ease;
+}
+
+/* the magnification lives here, so the dot and the label keep their own size and their own distance from the bar */
+.bn-gdock-glyph {
+  display: grid;
+  place-items: center;
+  transform-origin: center bottom;
+  transition: transform 420ms cubic-bezier(0.24, 1.34, 0.38, 1);
+}
+
+.bn-gdock-item[data-near="1"] {
+  opacity: 0.66;
+}
+
+.bn-gdock-item[data-near="0"] {
+  opacity: 1;
+}
+
+.bn-gdock-item[data-active="true"] {
+  opacity: 1;
+}
+
+.bn-gdock-item:focus-visible {
+  outline: 1.5px solid var(--ink);
+  outline-offset: 3px;
+  border-radius: 10px;
+}
+
+/* the running dot, the only persistent mark in the dock. Inside the item, not slung underneath it: the glyph is 20px
+   in a 44px box, so anything hung off the bottom edge lands 17px from the mark it belongs to. */
+.bn-gdock-dot {
+  position: absolute;
+  left: 50%;
+  bottom: 3px;
+  width: 3px;
+  height: 3px;
+  margin-left: -1.5px;
+  border-radius: 50%;
+  background: var(--ink);
+  opacity: 0;
+  transform: scale(0.4);
+  transition:
+    opacity 220ms ease,
+    transform 420ms cubic-bezier(0.24, 1.34, 0.38, 1);
+}
+
+.bn-gdock-dot[data-on="true"] {
+  opacity: 0.55;
+  transform: scale(1);
+}
+
+/* One tip for the whole dock: a dark pill above the bar that slides to the icon under the pointer and grows or shrinks
+   to the word, both on the same 160ms curve, and fades in 120ms. The word is centred in a box whose width animates,
+   and the box clips it, so a longer word is uncovered rather than squeezed. */
+.bn-gdock-tip {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 8px);
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--fill-on, var(--ink));
+  color: var(--fill-slab, var(--on-ink));
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 32px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 2;
+  transition:
+    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
+    width 160ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
+  letter-spacing: 0em;
+}
+
+.bn-gdock-tip > span {
+  flex: none;
+}
+
+.bn-gdock-tip:not([data-ready]) {
+  transition: opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bn-gdock-tip[data-on="true"] {
+  opacity: 1;
+}
+
+/* The frost is switched off at the element, not through a token: a var() holding a url() filter cannot be validated at
+   parse time, so the browser would drop the property outright, which breaks the two-declaration fallback the glass
+   depends on. */
+[data-surface="flat"] .bn-gdock {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+/* Stroke: whether the dock draws a hairline round itself. Off by default; glass draws its own lit rim, which is the
+   material rather than a stroke, so glass wins the border wherever the two meet (this sits above the glass rule). */
+[data-stroke="on"] .bn-gdock::before {
+  border-color: var(--pane-edge);
+}
+
+/* The rim: a gradient ring, bright at the corner facing the light, almost nothing along the sides that run edge-on to
+   it, and a second weaker catch at the far corner. A gradient in a border needs the border box filled and the padding
+   box punched out of it, which is what the two masks do. Only under glass. */
+[data-surface="glass"] .bn-gdock::before {
+  border-color: transparent;
+  background: linear-gradient(
+      142deg,
+      rgba(255, 255, 255, var(--g-edge-hi, 0)) 0%,
+      rgba(255, 255, 255, var(--g-edge-lo, 0)) 26%,
+      rgba(255, 255, 255, var(--g-edge-lo, 0)) 62%,
+      rgba(255, 255, 255, var(--g-edge-far, 0)) 100%
+    )
+    border-box;
+  -webkit-mask:
+    linear-gradient(#000 0 0) padding-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) padding-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+/* Thickness: the lit line along the top is where light enters the edge of a real sheet, the shadow underneath says the
+   pane is above the page rather than painted onto it (the one thing a backdrop-filter alone can never say). Both ride on
+   --glass and are gone at zero, where the fallbacks take over and the surface is flat. */
+[data-surface="glass"] .bn-gdock {
+  box-shadow: var(
+    --g-shadow,
+    inset 0 1px 0 rgba(255, 255, 255, var(--g-spec, 0)),
+    0 10px 40px rgba(var(--shadow-rgb), var(--g-lift, 0))
+  );
+}

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

@@ -0,0 +1,109 @@
+/* The /bencho gallery page (pages/BenchoPage). The element reset the components need lives in scope.css. */
+
+.bencho {
+  min-height: 100%;
+  padding: 28px 32px 64px;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-ui);
+  -webkit-font-smoothing: antialiased;
+}
+.bn-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px 32px;
+  margin-bottom: 24px;
+}
+.bn-top h1 {
+  font-size: 26px;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+.bn-top p {
+  margin-top: 4px;
+  font-size: 14px;
+  color: var(--ink-4);
+}
+.bn-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+.bn-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  font-size: 13px;
+}
+.bn-choice span {
+  padding: 0 8px 0 10px;
+  color: var(--ink-4);
+}
+.bn-choice button {
+  padding: 5px 12px;
+  border-radius: 999px;
+  color: var(--ink-3);
+}
+.bn-choice button[aria-pressed="true"] {
+  background: var(--bg);
+  color: var(--ink);
+  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.12);
+}
+
+.bn-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  gap: 16px;
+}
+.bn-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  padding: 14px;
+  border-radius: 20px;
+  background: var(--surface);
+}
+.bn-card > header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+.bn-card h2 {
+  font-size: 15px;
+  font-weight: 500;
+}
+.bn-cat {
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-5);
+}
+.bn-card > p {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--ink-4);
+}
+.bn-stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  margin-top: 8px;
+  padding: 24px;
+  overflow: hidden;
+  border-radius: 14px;
+  background: var(--board);
+  color: var(--ink);
+}
+/* bencho.dev's stage is paper under the light fill, so white components (cells, pills, tracks) stay visible */
+.bn-stage[data-fill="light"] {
+  background: var(--paper-2);
+}