@crievo/omni 0.1.2 → 0.1.4

package/studio/web/styles/components/bencho/stacked-bars.css

@@ -0,0 +1,334 @@
+/* Stacked bars (components/bencho/StackedBars.tsx), as on bencho.dev (MIT).
+   Colours are the reference's own: the palette in data-colour="on", or ink mixed toward the slab in Mono. Nothing
+   here is faded: the others step back by mixing toward the slab. */
+.bn-stb {
+  --stb-c1: color-mix(in srgb, var(--fill-on, #17181a) 100%, var(--fill-slab, #ffffff));
+  --stb-c2: color-mix(in srgb, var(--fill-on, #17181a) 78%, var(--fill-slab, #ffffff));
+  --stb-c3: color-mix(in srgb, var(--fill-on, #17181a) 60%, var(--fill-slab, #ffffff));
+  --stb-c4: color-mix(in srgb, var(--fill-on, #17181a) 44%, var(--fill-slab, #ffffff));
+  --stb-c5: color-mix(in srgb, var(--fill-on, #17181a) 32%, var(--fill-slab, #ffffff));
+  --stb-c6: color-mix(in srgb, var(--fill-on, #17181a) 22%, var(--fill-slab, #ffffff));
+  --stb-alert: color-mix(in srgb, var(--fill-on, #17181a) 100%, var(--fill-slab, #ffffff));
+  --stb-soft: color-mix(in srgb, var(--fill-on, #17181a) 72%, var(--fill-slab, #ffffff));
+  --stb-mute: color-mix(in srgb, var(--fill-on, #17181a) 52%, var(--fill-slab, #ffffff));
+  --stb-faint: color-mix(in srgb, var(--fill-on, #17181a) 32%, var(--fill-slab, #ffffff));
+  --stb-w6: color-mix(in srgb, var(--fill-on, #17181a) 6%, transparent);
+  --stb-w12: color-mix(in srgb, var(--fill-on, #17181a) 12%, transparent);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  box-sizing: border-box;
+  border-radius: 20px;
+  background: var(--fill-slab, #ffffff);
+  color: var(--fill-on, #17181a);
+  font-family: var(--font-ui);
+  font-size: 13px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.bn-stb[data-colour="on"] {
+  --stb-c1: #9d7bf5;
+  --stb-c2: #5b8def;
+  --stb-c3: #9ab8db;
+  --stb-c4: #f2c46d;
+  --stb-c5: #74dcae;
+  --stb-c6: #e57bb8;
+  --stb-alert: #e5484d;
+}
+
+[data-stroke="on"] .bn-stb {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+/* header: icon tile, title, Day / Week */
+.bn-stb-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.bn-stb-titles {
+  flex: 1;
+  min-width: 0;
+}
+
+.bn-stb-title {
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  line-height: 18px;
+}
+
+.bn-stb-sub {
+  font-size: 12px;
+  color: var(--stb-mute);
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+}
+
+.bn-stb-seg-ctl {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 2px;
+  border-radius: 10px;
+  background: var(--stb-w6);
+}
+
+.bn-stb-thumb {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 2px;
+  width: calc(50% - 2px);
+  border-radius: 8px;
+  background: var(--fill-slab, #ffffff);
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bn-stb-seg-ctl[data-mode="Week"] .bn-stb-thumb {
+  transform: translateX(100%);
+}
+
+.bn-stb-tab {
+  position: relative;
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 0 10px;
+  height: 28px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--stb-mute);
+  cursor: pointer;
+  border-radius: 8px;
+  transition:
+    color 160ms ease,
+    scale 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bn-stb-tab[data-on] {
+  color: var(--fill-on, #17181a);
+}
+
+.bn-stb-tab:hover:not([data-on]) {
+  color: var(--stb-soft);
+}
+
+.bn-stb-tab:active {
+  scale: 0.96;
+}
+
+.bn-stb-tab:focus-visible {
+  outline: 2px solid #2231dd;
+  outline-offset: 0;
+}
+
+/* the one figure */
+.bn-stb-figure {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: -4px;
+}
+
+.bn-stb-num {
+  font-size: 30px;
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 32px;
+  font-variant-numeric: tabular-nums;
+}
+
+.bn-stb-unit {
+  font-size: 13px;
+  color: var(--stb-mute);
+}
+
+/* Price flow's pop in: each character rises a touch from below, out
+   of a slight blur and from nothing, a hair past its mark — left to
+   right, 70ms apart */
+.bn-stb-digit {
+  display: inline-block;
+}
+
+.bn-stb-digit[data-pop] {
+  animation: bn-stb-pop 500ms cubic-bezier(0.34, 1.45, 0.64, 1) both;
+  animation-delay: calc(var(--i, 0) * 70ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-stb-digit[data-pop] {
+    animation: none;
+  }
+}
+
+/* the plot: absolutely placed columns, each segment its own rounded box */
+.bn-stb-plot {
+  position: relative;
+  width: 100%;
+  touch-action: none;
+  cursor: crosshair;
+}
+
+.bn-stb-base {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--stb-w12);
+}
+
+.bn-stb-col {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.bn-stb-bar,
+.bn-stb-esc {
+  position: absolute;
+  left: 0;
+  right: 0;
+  border-radius: var(--stb-r);
+  transition:
+    height 600ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 14ms),
+    bottom 600ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 14ms),
+    background-color 160ms ease;
+}
+
+.bn-stb-bar {
+  background-color: var(--c);
+}
+
+.bn-stb-esc {
+  background-color: var(--stb-alert);
+}
+
+/* Mono: escalated is full ink, hatched, so it never reads as Identity */
+.bn-stb[data-colour="off"] .bn-stb-esc {
+  background-image: repeating-linear-gradient(-45deg, transparent 0 1.5px, var(--fill-slab, #ffffff) 1.5px 3px);
+}
+
+/* scrubbing: the others step back by mixing toward the slab */
+.bn-stb[data-scrub] .bn-stb-col:not([data-on]) .bn-stb-bar {
+  background-color: color-mix(in srgb, var(--c) 38%, var(--fill-slab, #ffffff));
+}
+
+.bn-stb[data-scrub] .bn-stb-col:not([data-on]) .bn-stb-esc {
+  background-color: color-mix(in srgb, var(--stb-alert) 38%, var(--fill-slab, #ffffff));
+}
+
+.bn-stb-ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  border: 1.5px solid var(--stb-mute);
+  border-radius: var(--stb-rr);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+.bn-stb[data-scrub] .bn-stb-ring {
+  opacity: 1;
+}
+
+/* the tooltip: beside the column, gliding on a spring */
+.bn-stb-tip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: var(--fill-slab, #ffffff);
+  /* filled like the card, parted from the bars by a soft grey hairline */
+  border: 1px solid color-mix(in srgb, var(--fill-on, #17181a) 10%, var(--fill-slab, #ffffff));
+  font-size: 12px;
+  line-height: 16px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+.bn-stb[data-scrub] .bn-stb-tip {
+  opacity: 1;
+}
+
+.bn-stb-tip-head,
+.bn-stb-tip-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.bn-stb-tip-head {
+  justify-content: space-between;
+  color: var(--stb-mute);
+  margin-bottom: 2px;
+}
+
+.bn-stb-tip b {
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--fill-on, #17181a);
+}
+
+.bn-stb-tip-row span {
+  flex: 1;
+  color: var(--stb-soft);
+}
+
+.bn-stb-tip-row b {
+  font-weight: 400;
+}
+
+.bn-stb-tip-row i {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  background-color: var(--c);
+}
+
+.bn-stb-tip-row[data-esc] i {
+  background-color: var(--stb-alert);
+}
+
+.bn-stb[data-colour="off"] .bn-stb-tip-row[data-esc] i {
+  background-image: repeating-linear-gradient(-45deg, transparent 0 1.5px, var(--fill-slab, #ffffff) 1.5px 3px);
+}
+
+/* one tiny footer: first and last date */
+.bn-stb-axis {
+  display: flex;
+  justify-content: space-between;
+  margin-top: -8px;
+  font-size: 11px;
+  line-height: 14px;
+  color: var(--stb-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+@keyframes bn-stb-pop {
+  from {
+    transform: translateY(0.18em);
+    opacity: 0;
+    filter: blur(2px);
+  }
+  to {
+    transform: none;
+    opacity: 1;
+    filter: blur(0);
+  }
+}

package/studio/web/styles/components/bencho/toast-stack.css

@@ -0,0 +1,192 @@
+/* Toast stack (components/bencho/ToastStack.tsx), as on bencho.dev.
+   Three toasts stacked, fanning into a list on hover. Tones are the
+   reference's: the front one white, the tucked ones a barely-there
+   2% grey — both the same, so they read as paper behind paper rather
+   than a darkening ramp. Where the reference separates them with a
+   soft shadow, this uses a faint hairline (no drop shadows on the
+   bench). Status icons are their own solid colours, never faded.
+
+   The frame takes no clicks of its own: the toasts hang from its bottom edge and the open list grows up past it, so
+   only the toasts (and, while open, the gap above each one) are hit. That is what lets the real stack sit in a corner
+   of the screen without blocking what is under its empty part. */
+.bn-tst {
+  position: relative;
+  pointer-events: none;
+  font-family: var(--font-ui);
+  color: var(--fill-on, var(--ink));
+  --tst-mute: color-mix(in srgb, var(--fill-on, #17181a) 52%, var(--fill-slab, #ffffff));
+  --tst-wash: color-mix(in srgb, var(--fill-on, #17181a) 6%, var(--fill-slab, #ffffff));
+}
+
+.bn-tst-toast {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  pointer-events: auto;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 12px 0 16px;
+  border-radius: var(--tst-r);
+  background: var(--fill-slab, #ffffff);
+  transform-origin: 50% 0;
+  transition:
+    background-color 220ms ease,
+    box-shadow 220ms ease;
+}
+
+/* open, the gap above a toast is part of it, so the pointer crossing from one to the next never leaves the stack */
+.bn-tst[data-open] .bn-tst-toast::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  height: var(--tst-gap, 10px);
+}
+
+/* floating over a page, a toast needs an edge and a lift the gallery's card gives it for free */
+.bn-tst[data-floating] .bn-tst-toast {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--fill-on, #17181a) 8%, transparent),
+    0 10px 28px rgba(var(--shadow-rgb, 23, 24, 26), 0.16);
+}
+
+/* tucked: the same near-white for both, and a faint edge so each
+   sliver has a line to read by */
+.bn-tst:not([data-open]) .bn-tst-toast:not([data-front]) {
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, var(--fill-slab, #ffffff));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fill-on, #17181a) 6%, transparent);
+}
+
+[data-stroke="on"] .bn-tst-toast {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+/* only the front one is read while stacked; the rest are slivers */
+.bn-tst-toast > * {
+  transition: opacity 220ms ease;
+}
+
+.bn-tst:not([data-open]) .bn-tst-toast:not([data-front]) > * {
+  opacity: 0;
+}
+
+.bn-tst-icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+}
+
+.bn-tst-toast[data-kind="success"] .bn-tst-icon {
+  color: #1f9d55;
+}
+
+.bn-tst-toast[data-kind="error"] .bn-tst-icon {
+  color: #e5484d;
+}
+
+.bn-tst-toast[data-kind="warning"] .bn-tst-icon {
+  color: #e09a12;
+}
+
+.bn-tst-toast[data-kind="info"] .bn-tst-icon {
+  color: var(--tst-mute);
+}
+
+.bn-tst-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bn-tst-text b {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.01em;
+}
+
+.bn-tst-text span {
+  font-size: 13px;
+  line-height: 17px;
+  color: var(--tst-mute);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: 0em;
+}
+
+/* a real message is longer than a demo's line: the body gets two (18 + 2 + 34 still fits the 64px toast) and a longer
+   one is cut with an ellipsis */
+.bn-tst[data-floating] .bn-tst-text span {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.bn-tst-act {
+  flex: none;
+  height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--tst-wash);
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: scale 160ms cubic-bezier(0.22, 1, 0.36, 1);
+  letter-spacing: 0em;
+}
+
+.bn-tst-act:active {
+  scale: 0.96;
+}
+
+.bn-tst-x {
+  flex: none;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: none;
+  color: var(--tst-mute);
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease;
+}
+
+.bn-tst-x:hover {
+  background: var(--tst-wash);
+  color: var(--fill-on, var(--ink));
+}
+
+.bn-tst-act:focus-visible,
+.bn-tst-x:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--signal, #2231dd);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bn-tst-toast,
+  .bn-tst-toast > *,
+  .bn-tst-act,
+  .bn-tst-x {
+    transition: none;
+  }
+}