@crievo/omni 0.1.2 → 0.1.4

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

@@ -0,0 +1,151 @@
+/* Generate (components/bencho/GenerateImage.tsx), as on bencho.dev.
+   A picture card and a pill in its middle. The card is a picture edge to edge, so it answers neither fill nor stroke;
+   the pill answers both. */
+.bn-gen {
+  font-family: var(--font-ui);
+  /* positioned, and load-bearing on a canvas: a board's grab halo is a positioned ::before, and a positioned layer
+     paints over every non-positioned sibling after it, so the pill sat under the halo and never heard a click */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.bn-gen-card {
+  position: relative;
+  width: 270px;
+  /* 330, down from the picture's own 360 (3:4). The print is `cover`, so the frame trims a sliver of paper top and
+     bottom rather than squashing the flower */
+  height: 330px;
+  border-radius: 20px;
+  overflow: hidden;
+  /* white, the blank page. The print's own paper is a warm grey, and the run carries the card from one to the other:
+     the haze fades up over the white, so the page greys as the picture arrives rather than starting grey */
+  background: var(--fill-slab, #ffffff);
+  /* the corner clips a canvas and an image, and Safari leaks both past a radius without a layer of its own */
+  isolation: isolate;
+}
+
+.bn-gen-print {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+/* the filter's defs, out of the flow: an svg with no size is 300x150 of layout otherwise */
+.bn-gen-defs {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+[data-stroke="on"] .bn-gen-card {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+/* the button, in the middle of the frame: light grey on the white page. It answers the pointer by size only, a little
+   on hover, more on the press, and leaves by shrinking and fading when the run starts. Every colour is the fill
+   control's, so dark gives a dark frame, a lifted pill and light ink */
+.bn-gen-go {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 42px;
+  padding: 0 20px;
+  border: 0;
+  border-radius: 20px;
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, var(--fill-slab, #ffffff));
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--fill-on, #17181a);
+  cursor: pointer;
+  translate: -50% -50%;
+  transition:
+    opacity 220ms ease,
+    scale 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  letter-spacing: -0.01em;
+}
+
+.bn-gen-go:hover:not(:disabled) {
+  scale: 0.97;
+}
+
+.bn-gen-go:active:not(:disabled) {
+  scale: 0.96;
+  transition-duration: 160ms;
+}
+
+.bn-gen-go:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--fill-slab, #ffffff),
+    0 0 0 4px rgba(var(--fill-on-rgb, 23, 24, 26), 0.45);
+}
+
+/* gone while a picture is being made */
+.bn-gen[data-loading="true"] .bn-gen-go {
+  opacity: 0;
+  scale: 0.9;
+  pointer-events: none;
+}
+
+/* made: out of the way until the pointer is on the picture, and white over the print: the grey that sits quietly on a
+   blank page reads as a smudge on a grey halftone */
+.bn-gen[data-made="true"]:not([data-loading="true"]) .bn-gen-go {
+  opacity: 0;
+  background: var(--fill-slab, #ffffff);
+}
+
+.bn-gen[data-made="true"]:not([data-loading="true"]) .bn-gen-card:hover .bn-gen-go,
+.bn-gen[data-made="true"]:not([data-loading="true"]) .bn-gen-go:focus-visible {
+  opacity: 1;
+}
+
+/* the count: a small pill in the bottom-left corner, only while a run is going (and for the beat it holds at 100) */
+.bn-gen-pct {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--fill-slab, #ffffff) 80%, transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--fill-on, #17181a);
+  font-variant-numeric: tabular-nums;
+  opacity: 0;
+  translate: 0 4px;
+  transition:
+    opacity 220ms ease,
+    translate 220ms ease;
+  pointer-events: none;
+  letter-spacing: 0em;
+}
+
+.bn-gen[data-loading="true"] .bn-gen-pct {
+  opacity: 1;
+  translate: 0 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-gen-go,
+  .bn-gen-pct {
+    transition-duration: 160ms;
+  }
+}

package/studio/web/styles/components/bencho/image-accordion.css

@@ -0,0 +1,37 @@
+/* Image accordion (components/bencho/ImageAccordion.tsx), as on bencho.dev.
+   A row of pictures cropped to slivers, one of which opens under the pointer. The arithmetic of who pays for that is
+   in the component (five grow numbers on five springs); here is the box they negotiate inside and the crop that keeps
+   a picture a picture while it happens. */
+.bn-acc {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  /* the strip's radius is set in the component and is the same number every picture takes (RMAX). The clip stays
+     because flex widths land on fractions and a cell can overhang its container by a sub-pixel. */
+  overflow: hidden;
+  -webkit-user-select: none;
+  user-select: none;
+  /* a finger dragged across the strip reads as a hover, not as an attempt to scroll the page sideways */
+  touch-action: pan-y;
+}
+
+.bn-acc-cell {
+  position: relative;
+  /* the grow number is the whole story: `flex-basis: 0` so nothing is reserved before the negotiation starts, and
+     `min-width: 0` because a flex item will not shrink below its content by default and the content is an image */
+  flex-basis: 0;
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  /* the radius is set per cell from the gap, so no notch of page shows at the joins */
+}
+
+.bn-acc-cell img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* `cover`, and the height fixes the scale: widening a cell admits more of the picture on each side and moves
+     nothing that was already showing, so it reads as a window opening rather than a picture being pulled about */
+  object-fit: cover;
+  -webkit-user-drag: none;
+}

package/studio/web/styles/components/bencho/liq-create.css

@@ -0,0 +1,279 @@
+/* Create menu (components/bencho/CreateMenu.tsx), as on bencho.dev.
+   The menu has no ::before to hang a ring on: its shape is a blob on its own layer, so the ring is a spread shadow,
+   which is the same mark by another means. */
+[data-stroke="on"] .bn-crt-body {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+/* The stage, the panel and the rows are the numbers this was drawn at: the open state is sized by the four rows it
+   holds, and the stage by the panel plus the room the shape needs to travel. */
+.bn-crt-stage {
+  position: relative;
+  width: 244px;
+  height: var(--stage-h, 244px);
+  /* the two states, as two sets of numbers: one attribute picks between them and everything else follows */
+  /* The pill only. Its width is set inline from the measured label, so this is the fallback for the frame before
+     that measurement lands. */
+  --pill-w: 120px;
+  --pill-h: 38px;
+  --panel-w: 212px;
+  --panel-h: 166px; /* four rows and the padding; no header. The component writes the real one from its item count. */
+  --w: var(--pill-w);
+  --h: var(--pill-h);
+  --r: var(--crt-shut-r, 999px);
+}
+
+.bn-crt-stage[data-open="true"] {
+  /* above whatever sits after it in a real column while the menu hangs over it */
+  z-index: 30;
+  --w: var(--panel-w);
+  --h: var(--panel-h);
+  /* 28 outside against a 10px inset leaves 18 for the rows to nest in, and a 34px row rounds fully at 17, so the two
+     curves are concentric rather than merely both round. The Corner knob moves all three together. */
+  --r: var(--crt-r, 28px);
+}
+
+/* No metaball filter on this one, and that is the point: one shape, so a blur can only damage it (the corners came
+   back bulged and uneven instead of at the radius they were given). The liquid here is entirely in the timing. */
+.bn-crt-blobs {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* One shape, dead centre in both states, centred by auto margins and NO TRANSFORM: Motion writes width and height
+   inline every frame, and a CSS transform on a Motion-managed element can lose the centring (CSS translate and scale
+   resolve before transform). inset: 0 plus margin: auto centres against the containing block at whatever size the box
+   is right now. */
+.bn-crt-body {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: var(--w);
+  height: var(--h);
+  border-radius: var(--r);
+  background: var(--slab);
+  /* no shadow: Stroke is the way to give it an edge */
+  /* width, height and the corner are Motion's now; `scale` stays here because the press beat is a discrete state,
+     not a value being interpolated from JS */
+  transition: scale 420ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* The first beat: pressed down. A plain uniform shrink, in fast, because a press should be felt at once. 160 against
+   the 60ms handoff: the spread starts while this is still running, so there is never a frame where nothing moves. */
+.bn-crt-stage[data-sink="true"] .bn-crt-body,
+.bn-crt-stage[data-sink="true"] .bn-crt-pill {
+  scale: 0.94;
+  transition: scale 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* and closing is the same single move, run down */
+.bn-crt-stage:not([data-open="true"]) .bn-crt-body {
+  transition: scale 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* A panel, not a slab of ink. --slab is redefined here rather than at the root because exactly two things read it.
+   On the stage, not the body: the shape and the type are two sibling layers, so tokens on the body would reach the
+   fill and none of the words. --board and --ink both flip with the theme, so one definition covers both. */
+.bn-crt-stage {
+  --slab: var(--fill-slab, var(--board));
+  --on-slab: var(--fill-on, var(--ink));
+  --on-slab-rgb: var(--fill-on-rgb, var(--ink-rgb));
+}
+
+.bn-crt-ink {
+  position: absolute;
+  inset: 0;
+}
+
+/* the pill. It does not move aside, it is simply not there once the shape has spread. The same auto-margin centring
+   as .bn-crt-body: three boxes on one stage centred by different mechanisms can round a sub-pixel apart. */
+.bn-crt-pill {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: var(--pill-w);
+  height: var(--pill-h);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 0;
+  background: none;
+  color: var(--on-slab);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 160ms ease,
+    scale 420ms cubic-bezier(0.22, 1, 0.36, 1);
+  letter-spacing: 0em;
+}
+
+.bn-crt-stage[data-open="true"] .bn-crt-pill {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms ease;
+}
+
+/* held at full strength through the press: fading it during the squash would hide the beat the squash is for */
+.bn-crt-stage[data-sink="true"] .bn-crt-pill {
+  opacity: 1;
+}
+
+.bn-crt-glyph {
+  display: grid;
+  place-items: center;
+}
+
+/* the pill takes the width of whatever it is saying, so the label can change without it jumping */
+.bn-crt-say {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: left;
+  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* inline-block so it has an offsetWidth to be measured by */
+.bn-crt-say > span {
+  display: inline-block;
+}
+
+/* Hung from the top right corner instead of centred: for a pill at the edge of a column. The stage is just the pill
+   (in flow, so the width transition follows a label change), and the shape and the window are pinned to its top right
+   corner and grow left and down from it, past the stage's box, which nothing clips. Motion still owns the body's width,
+   height and corner; only where they hang from changes. */
+.bn-crt-stage[data-anchor="top-end"] {
+  width: var(--pill-w);
+  height: var(--pill-h);
+  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bn-crt-stage[data-anchor="top-end"] .bn-crt-body,
+.bn-crt-stage[data-anchor="top-end"] .bn-crt-panel {
+  inset: 0 0 auto auto;
+  margin: 0;
+}
+
+/* The same surface as the column it hangs in (a white pill on a white sidebar, a dark one on a dark one), so the shape
+   gets the edge the gallery's stage gives it for free: a hairline in the ink colour, and under the open panel a soft
+   drop shadow so it reads as lifted. Only on the anchored form, which is the one that lives inside a screen. */
+.bn-crt-stage[data-anchor="top-end"] .bn-crt-body {
+  box-shadow:
+    0 0 0 1px rgba(var(--ink-rgb), 0.1),
+    0 6px 20px rgba(var(--shadow-rgb), 0.08);
+}
+
+/* the window, in the same place */
+.bn-crt-panel {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: var(--panel-w);
+  height: var(--panel-h);
+  padding: 12px 12px;
+  color: var(--on-slab);
+  pointer-events: none;
+}
+
+.bn-crt-stage[data-open="true"] .bn-crt-panel {
+  pointer-events: auto;
+}
+
+.bn-crt-menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  align-content: start;
+  gap: 2px;
+}
+
+.bn-crt-item {
+  opacity: 0;
+  transform: translateY(6px);
+  /* the same curve as the shell, and no overshoot either: a row that slides past its resting line and comes back is
+     the same wobble at a smaller size */
+  transition:
+    opacity 160ms ease,
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bn-crt-stage[data-open="true"] .bn-crt-item {
+  opacity: 1;
+  transform: none;
+}
+
+.bn-crt-item button {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 34px;
+  padding: 0 16px;
+  /* fully round, so a row nests inside the card's own corners instead of squaring off against them */
+  border: 0;
+  border-radius: var(--crt-row-r, 999px);
+  background: none;
+  /* 0.78, not 0.72: dark type at 0.72 on white lands at 4.6:1, and this is the menu's only body text */
+  color: rgba(var(--on-slab-rgb), 0.78);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: color 220ms ease;
+  letter-spacing: 0em;
+}
+
+.bn-crt-item button:hover {
+  color: var(--on-slab);
+}
+
+/* the hover wash, one per row: each fades its own in and out; nothing moves between them */
+.bn-crt-item button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: rgba(var(--on-slab-rgb), 0.08);
+  opacity: 0;
+  transition: opacity 220ms ease;
+  pointer-events: none;
+}
+
+@media (hover: hover) {
+  .bn-crt-item button:hover::before {
+    opacity: 1;
+    transition-duration: 160ms;
+  }
+}
+
+.bn-crt-item button:focus-visible::before {
+  opacity: 1;
+}
+
+/* the wash sits behind the label, inside its own row */
+.bn-crt-item button {
+  isolation: isolate;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-crt-body,
+  .bn-crt-pill,
+  .bn-crt-item,
+  .bn-crt-say,
+  .bn-crt-stage[data-anchor="top-end"] {
+    transition-duration: 160ms;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-crt-stage[data-sink="true"] .bn-crt-body,
+  .bn-crt-stage[data-sink="true"] .bn-crt-pill {
+    scale: 1;
+  }
+}

package/studio/web/styles/components/bencho/liq-toggle.css

@@ -0,0 +1,106 @@
+/* Liquid toggle (components/bencho/LiquidToggle.tsx), as on bencho.dev.
+   One droplet that stretches along its travel inside a pill track. The switch is black and white and has no edge of
+   its own: Stroke (data-stroke) is the only thing that draws one. */
+
+/* A 1px spread shadow is the hairline, and it composites without touching layout. The original's grouped rule also
+   rounded every element in it to --nod-r; that was meant for the node card alone, and on this one it would square the
+   pill, so only the ring is kept. */
+[data-stroke="on"] .bn-liq-sw {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+.bn-liq-well {
+  width: 240px;
+  height: 130px;
+  display: grid;
+  place-items: center;
+}
+
+/* The layout box. The switch inside is always drawn at 92x46 and scaled down from the top-left corner, so this box is
+   given the scaled size (inline, from the `scale` prop) and the neighbours lay out against what is seen, not against
+   the unscaled 92x46 a transform leaves behind. */
+.bn-liq-box {
+  position: relative;
+  display: inline-block;
+  flex: none;
+  border-radius: 999px;
+}
+
+/* The ring sits on the box, not the button: an outline on the scaled button would shrink with it to under a pixel. */
+.bn-liq-box:has(> .bn-liq-sw:focus-visible) {
+  outline: 2px solid var(--pick);
+  outline-offset: 2px;
+}
+
+.bn-liq-box[data-disabled] {
+  opacity: 0.5;
+}
+
+.bn-liq-box[data-disabled] .bn-liq-sw {
+  cursor: not-allowed;
+}
+
+.bn-liq-sw {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
+  width: 92px;
+  height: 46px;
+  padding: 0;
+  border: 0;
+  /* always a pill: that is the shape the gesture is named after, and squaring it turns a thing you slide into a
+     thing you click */
+  border-radius: 999px;
+  /* OFF is the slab, not a grey: the two states are the two ends of the fill's own ramp (white track on a light fill,
+     near-black on a dark one), and the dot is a grey mixed toward it. ON inverts: ink track, slab dot. The track
+     carries the state and the dot is along for the ride. */
+  background: var(--fill-slab, var(--card));
+  cursor: pointer;
+  /* it is a rail you can push along, not only a button */
+  touch-action: none;
+  transition: background 420ms ease;
+}
+
+/* the ring is drawn on the box (above), so the button's own would be a second, clipped one */
+.bn-liq-sw:focus-visible {
+  outline: none;
+}
+
+.bn-liq-sw[data-on="true"] {
+  background: var(--fill-on, var(--ink));
+}
+
+.bn-liq-sw-blobs {
+  position: absolute;
+  inset: 0;
+}
+
+/* The droplet is the only body. `left: 0` is not optional: it is an inline element, so with `left: auto` the static
+   position is wherever the line box put it, and the button it sits in centres its text, which pushed the thumb to the
+   middle of the track. The size comes from LiquidToggle.tsx, which also needs it for the travel: one number, so the
+   circle and the distance it crosses cannot disagree. Opaque on purpose, so the grey is a color-mix and not an alpha. */
+.bn-liq-thumb {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: var(--liq-thumb, 36px);
+  height: var(--liq-thumb, 36px);
+  margin-top: calc(var(--liq-thumb, 36px) / -2);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--fill-on, var(--ink)) 19%, var(--fill-slab, var(--card)));
+  /* transform is Motion's: a CSS transition on the same property re-interpolates every frame the spring writes, and
+     what you see is the easing, not the spring. The colour is the only thing here that eases. */
+  transition: background 420ms ease;
+}
+
+/* ON inverts the pair: ink track, slab droplet */
+.bn-liq-sw[data-on="true"] .bn-liq-thumb {
+  background: var(--fill-slab, var(--board));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-liq-thumb {
+    transition-duration: 160ms;
+  }
+}