@crievo/omni 0.1.2 → 0.1.4

package/studio/web/components/bencho/CreateMenu.tsx

@@ -0,0 +1,258 @@
+/* A pill that spreads into the create menu it was all along. One shape and no goo filter on it: the other liquid
+   studies fuse two or more shapes, this has exactly one, so a blur could only damage it. The liquid here is entirely in
+   the timing: the press sinks, and the spread starts while the sink is still running so there is never a still frame.
+   Ported from bencho.dev (MIT).
+
+   Two layers: the opaque body (animated width, height and corner by Motion) and, above it and unfiltered, the label
+   and the rows, so the type keeps its antialiasing. The pill's width is measured from its own label and written back
+   as --pill-w, so the label can change without the shape jumping. */
+
+import { type ComponentType, type CSSProperties, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { motion } from "motion/react";
+import { FileText, GridFour, Play, Plus, Sparkle } from "../icons";
+
+export type CreateMenuItem = {
+  id: string;
+  label: string;
+  icon: ComponentType<{ size?: number; weight?: "bold" }>;
+  onSelect: () => void;
+};
+
+/* the elastic: zeta = 14 / (2 * sqrt(220 * 0.5)) is about 0.67, so it overshoots about 6% before it settles */
+const LIQUID = {
+  type: "spring" as const,
+  stiffness: 220,
+  damping: 14,
+  mass: 0.5,
+};
+
+/* The same liquid without the overshoot, for the shape whose corner radius is animating: a spring that passes its
+   target drags the radius past it too, and corners that dip under and come back read as a wobble. Not just more
+   damping (that creeps, about 470ms to settle): stiffness comes up with it, which holds zeta at 1.03 and lands in
+   about 180ms. */
+const LIQUID_STILL = { ...LIQUID, stiffness: 420, damping: 30 };
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+
+/* what the gallery shows; a real screen passes its own `items` */
+const DEMO_ITEMS: CreateMenuItem[] = [
+  { id: "video", icon: Play, label: "Vídeo", onSelect: () => {} },
+  { id: "carousel", icon: GridFour, label: "Carrossel", onSelect: () => {} },
+  { id: "style", icon: Sparkle, label: "Estilo visual", onSelect: () => {} },
+  { id: "script", icon: FileText, label: "Roteiro", onSelect: () => {} },
+];
+
+/* The open panel is as wide as it was drawn (212) and as tall as the rows it holds: a 34px row, the 2px gap between
+   rows and the 12px padding top and bottom. Four rows come to 166, the number the original was drawn at. */
+const PANEL_W = 212;
+const ROW_H = 34;
+const ROW_GAP = 2;
+const PANEL_PAD = 12;
+const panelHeight = (rows: number) => rows * ROW_H + Math.max(0, rows - 1) * ROW_GAP + PANEL_PAD * 2;
+/* The centred stage is the panel plus the ground the shape needs to travel: 244 wide, and 78 taller than the panel
+   (244 for four rows). */
+const STAGE_W = 244;
+const STAGE_EXTRA = 78;
+
+/* The menu's corners, three of them: the panel is 28, the rows inside it are cut to that less the 10px inset
+   (concentric), and the shut pill is a 38px button, so 19 is round for it. One knob moves all three because they are
+   one relationship; each is capped at half its own height. */
+const CRT_CORNER = 20;
+const CRT_MAX = 40;
+
+type CreateMenuProps = {
+  corner?: number;
+  /* the shut pill's word */
+  label?: string;
+  items?: CreateMenuItem[];
+  /* the shut pill's height; its corner and the type scale with it only through `corner` (default 38) */
+  pillHeight?: number;
+  /* "center": the shape grows about the middle of a fixed stage, as in the original. "top-end": the stage is just the
+     pill, in flow, and the menu hangs from its top right corner, for a pill that sits at the edge of a column. */
+  anchor?: "center" | "top-end";
+  className?: string;
+};
+
+export function CreateMenu({
+  corner = CRT_CORNER,
+  label = "Criar",
+  items = DEMO_ITEMS,
+  pillHeight = 38,
+  anchor = "center",
+  className,
+}: CreateMenuProps) {
+  const [open, setOpen] = useState(false);
+  const [sink, setSink] = useState(false);
+
+  const panel = useRef<HTMLDivElement | null>(null);
+  const pill = useRef<HTMLButtonElement | null>(null);
+  const say = useRef<HTMLSpanElement | null>(null);
+  const beat = useRef(0);
+
+  const [sayW, setSayW] = useState(96);
+  /* Measure twice: once now, once the font is real. The label clips what it cannot fit, so a width even slightly
+     short takes the edge off the last letter. offsetWidth is an integer and the label is not ("Criar" measures
+     fractional), so +1 covers the rounding; and a layout effect runs before a webfont swaps in, so it measures again
+     when fonts are ready. */
+  useLayoutEffect(() => {
+    const el = say.current;
+    if (!el) return;
+    let live = true;
+    const measure = () => {
+      if (live) setSayW(el.offsetWidth + 1);
+    };
+    measure();
+    document.fonts?.ready.then(measure).catch(() => {});
+    return () => {
+      live = false;
+    };
+  }, [label]);
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(beat.current);
+    },
+    [],
+  );
+
+  /* No close button and no title bar: a press anywhere but the menu puts it away. Registered only while open, in an
+     effect, so the very press that opened it cannot close it on the same click. */
+  useEffect(() => {
+    if (!open) return;
+    const away = (e: PointerEvent) => {
+      /* a press by somebody, not by the page: scripted presses on other components must not slam this one shut */
+      if (!e.isTrusted) return;
+      /* Hit-test the visible panel's own rectangle, not the reserved stage: the stage is bigger than the menu it
+         holds, so containment would count every press in the spare ground as a press on the menu. Read per press,
+         since the panel is a different size on every frame of the open. */
+      const box = panel.current?.querySelector(".bn-crt-panel")?.getBoundingClientRect();
+      const on =
+        !!box && e.clientX >= box.left && e.clientX <= box.right && e.clientY >= box.top && e.clientY <= box.bottom;
+      if (!on) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", away);
+    return () => document.removeEventListener("pointerdown", away);
+  }, [open]);
+
+  /* Escape puts it away and hands focus back to the pill; the first row takes focus as it opens, so Enter and the
+     arrow-free Tab order start inside the menu. preventScroll: the panel is still growing when this runs. */
+  useEffect(() => {
+    if (!open) return;
+    panel.current?.querySelector<HTMLButtonElement>(".bn-crt-item button")?.focus({ preventScroll: true });
+    const esc = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      pill.current?.focus({ preventScroll: true });
+    };
+    document.addEventListener("keydown", esc);
+    return () => document.removeEventListener("keydown", esc);
+  }, [open]);
+
+  const press = () => {
+    setSink(true);
+    window.clearTimeout(beat.current);
+    /* 60ms handoff against a 120ms sink: the spread begins while the press is still running */
+    beat.current = window.setTimeout(() => {
+      setSink(false);
+      setOpen(true);
+    }, 60);
+  };
+
+  /* glyph + gap + label + the padding either side */
+  const pillW = 18 + 8 + sayW + 34;
+
+  const panelH = panelHeight(items.length);
+  /* the two the animation needs as numbers: Motion writes borderRadius inline, so it cannot read a css variable */
+  const panelR = clamp(corner, 0, CRT_MAX);
+  const shutHalf = pillHeight / 2;
+  const shutR = Math.min(shutHalf, panelR * (shutHalf / CRT_CORNER));
+
+  return (
+    <motion.div
+      className={className ? `bn-crt-stage ${className}` : "bn-crt-stage"}
+      data-open={open || undefined}
+      data-sink={sink || undefined}
+      data-anchor={anchor === "center" ? undefined : anchor}
+      ref={panel}
+      /* tabbing to another element puts it away too; focus moving between its own rows does not, and neither does a
+         press on the panel's padding (relatedTarget is null there, and the outside-press listener covers real exits) */
+      onBlur={e => {
+        const to = e.relatedTarget as Node | null;
+        if (open && to && !e.currentTarget.contains(to)) setOpen(false);
+      }}
+      style={
+        {
+          "--pill-w": `${pillW}px`,
+          "--pill-h": `${pillHeight}px`,
+          "--panel-h": `${panelH}px`,
+          "--stage-h": `${panelH + STAGE_EXTRA}px`,
+          "--crt-r": `${clamp(corner, 0, CRT_MAX)}px`,
+          /* the shut pill's own half height is as round as it goes */
+          "--crt-shut-r": `${shutR.toFixed(2)}px`,
+          /* concentric: the panel's corner less its 10px inset, and no rounder than the 34px row's own half */
+          "--crt-row-r": `${Math.min(17, Math.max(0, clamp(corner, 0, CRT_MAX) - 10)).toFixed(2)}px`,
+        } as CSSProperties
+      }
+    >
+      <div className="bn-crt-blobs" aria-hidden="true">
+        {/* LIQUID_STILL, not LIQUID: this is the one shape here that must not overshoot */}
+        <motion.div
+          className="bn-crt-body"
+          animate={{
+            width: open ? PANEL_W : pillW,
+            height: open ? panelH : pillHeight,
+            /* Motion writes this inline every frame, so the stylesheet's var(--r) never gets a look in: the shape
+               is told separately, with the same two numbers the vars carry */
+            borderRadius: open ? panelR : shutR,
+          }}
+          transition={LIQUID_STILL}
+        />
+      </div>
+
+      <button
+        type="button"
+        className="bn-crt-pill"
+        ref={pill}
+        onClick={press}
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        <span className="bn-crt-glyph" aria-hidden="true">
+          <Plus size={16} weight="bold" />
+        </span>
+        <span className="bn-crt-say" style={{ width: sayW || undefined }}>
+          <span ref={say}>{label}</span>
+        </span>
+      </button>
+
+      <div className="bn-crt-panel" aria-hidden={!open || undefined}>
+        {/* each row lights its own wash (see .bn-crt-item button::before); nothing travels between them */}
+        <ul className="bn-crt-menu">
+          {items.map((it, i) => (
+            <li
+              className="bn-crt-item"
+              key={it.id}
+              /* tightened with the shell: the last row must not start after the box has finished in 180 */
+              style={{ transitionDelay: open ? `${30 + i * 22}ms` : "0ms" }}
+            >
+              <button
+                type="button"
+                /* shut, the rows are still in the DOM (faded out): keep them out of the Tab order */
+                tabIndex={open ? 0 : -1}
+                onClick={() => {
+                  setOpen(false);
+                  it.onSelect();
+                }}
+              >
+                <it.icon size={16} weight="bold" />
+                {it.label}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </motion.div>
+  );
+}

package/studio/web/components/bencho/GenerateImage.tsx

@@ -0,0 +1,290 @@
+/* Generate: a picture that is made in front of you, slowly. Press Generate and the flower arrives the way a generated
+   image does, the large decisions first and the fine ones last, under a glassy liquid surface that stills as it lands.
+   Ported from bencho.dev (MIT).
+
+   Three scales of detail, in order:
+   - shapes: heavily blurred and pushed hard in contrast, the flower is a few clean masses (where the dark is, nothing
+     more). The contrast is what makes them shapes rather than fog.
+   - form: the blur lets go on a slow curve and the contrast eases back to the print's own, so the petals find their
+     edges and tones. A low drifting ripple keeps the surface liquid while it happens.
+   - grain: the halftone only comes in over the last quarter, through the print itself. The finest detail is the last
+     thing decided, which reads as generated rather than revealed.
+   (A version built from halftone dots in passes, coarse to fine, read as pixels arriving, and was too busy.)
+
+   Identity at rest: the filter only exists while a run is going, so at rest the card is the print and nothing else. */
+
+import { type CSSProperties, useEffect, useId, useRef, useState } from "react";
+
+/* read once, as a preference and not a live input */
+const stillness = () =>
+  typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+const clamp = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v));
+const mix = (a: number, b: number, t: number) => a + (b - a) * t;
+const smooth = (a: number, b: number, v: number) => {
+  const u = clamp((v - a) / (b - a), 0, 1);
+  return u * u * (3 - 2 * u);
+};
+
+/* the print's paper, as a luminance. Contrast turns about this and not mid-grey: about 0.5 the paper went to white
+   and the card was a glowing sheet that snapped back to grey at the end. About the paper, the ground holds and the
+   ink deepens */
+const PAPER = 0.9;
+
+/* The count keeps its own time: a number climbing at one steady rate reads as a timer, not as work. So it runs on a
+   curve of its own, re-rolled every run (a quick start, a slow stretch, a burst, a stall, another burst, a crawl
+   through the last tenth), while the picture forms on the plain clock underneath. Knots are (time, value) pairs, both
+   0..1 and both rising, so the count never goes backwards. Between two knots it is half linear and half smoothstep:
+   speed changes read as easing rather than corners, and never quite stop. */
+type Knot = [number, number];
+const r = (a: number, b: number) => a + Math.random() * (b - a);
+const knots = (): Knot[] => [
+  [0, 0],
+  [r(0.1, 0.16), r(0.1, 0.16)] /* quick start */,
+  [r(0.32, 0.38), r(0.22, 0.3)] /* slow stretch */,
+  [r(0.44, 0.49), r(0.5, 0.6)] /* burst */,
+  [r(0.56, 0.61), r(0.62, 0.68)] /* stall */,
+  [r(0.68, 0.72), r(0.84, 0.88)] /* burst */,
+  [1, 1] /* and the long last bit */,
+];
+const along = (ks: Knot[], t: number) => {
+  for (let i = 1; i < ks.length; i++) {
+    const [t0, v0] = ks[i - 1];
+    const [t1, v1] = ks[i];
+    if (t > t1) continue;
+    const u = clamp((t - t0) / (t1 - t0), 0, 1);
+    return mix(v0, v1, mix(u, u * u * (3 - 2 * u), 0.5));
+  }
+  return 1;
+};
+
+/* The picture that resolves: a flower printed in halftone on warm grey paper, drawn in SVG (3:4, `slice` so the
+   frame trims a sliver of paper top and bottom rather than squashing it). Broad masses first (petals, centre, stem),
+   rims and the dot screen last, so what the filter reveals late is the fine detail. */
+const PETAL = "M0 0C-26-22-22-62 0-84C22-62 26-22 0 0Z";
+const OUTER = Array.from({ length: 10 }, (_, i) => i * 36);
+const INNER = Array.from({ length: 8 }, (_, i) => 18 + i * 45);
+
+function Flower({ uid, label, style }: { uid: string; label?: string; style?: CSSProperties }) {
+  const rim = `${uid}-rim`;
+  const deep = `${uid}-deep`;
+  const dots = `${uid}-dots`;
+  const stem = `${uid}-stem`;
+  return (
+    <svg
+      className="bn-gen-print"
+      viewBox="0 0 270 360"
+      preserveAspectRatio="xMidYMid slice"
+      role={label ? "img" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      focusable="false"
+      style={style}
+    >
+      <defs>
+        <linearGradient id={rim} x1="0" y1="0" x2="0" y2="-84" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#242426" />
+          <stop offset="0.5" stopColor="#5c5a58" />
+          <stop offset="1" stopColor="#aaa6a0" />
+        </linearGradient>
+        <linearGradient id={deep} x1="0" y1="0" x2="0" y2="-60" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#131315" />
+          <stop offset="0.6" stopColor="#3b3a3a" />
+          <stop offset="1" stopColor="#77746f" />
+        </linearGradient>
+        <linearGradient id={stem} x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0" stopColor="#2c2c2d" />
+          <stop offset="1" stopColor="#555452" />
+        </linearGradient>
+        <pattern id={dots} width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(22)">
+          <circle cx="2.5" cy="2.5" r="1.15" fill="#e9e6e1" opacity="0.55" />
+        </pattern>
+      </defs>
+      <rect width="270" height="360" fill="#e7e4df" />
+      {/* stem and leaves */}
+      <path d="M133 218C128 262 142 306 136 360H146C152 306 138 262 141 218Z" fill={`url(#${stem})`} />
+      <path d="M137 296C170 286 196 262 206 232C176 238 150 262 137 296Z" fill="#3a3a3b" />
+      <path d="M136 316C106 308 82 290 70 262C100 266 126 288 136 316Z" fill="#4a4948" />
+      {/* petals: the outer ring lighter, the inner ring deeper */}
+      <g transform="translate(135 150)">
+        {OUTER.map(a => (
+          <path
+            key={a}
+            d={PETAL}
+            transform={`rotate(${a})`}
+            fill={`url(#${rim})`}
+            stroke="#ece9e4"
+            strokeOpacity="0.55"
+            strokeWidth="1.2"
+          />
+        ))}
+        {INNER.map(a => (
+          <path
+            key={a}
+            d={PETAL}
+            transform={`rotate(${a}) scale(0.72)`}
+            fill={`url(#${deep})`}
+            stroke="#ece9e4"
+            strokeOpacity="0.35"
+            strokeWidth="1.4"
+          />
+        ))}
+        <circle r="20" fill="#0f0f10" />
+        <circle r="13" fill="none" stroke="#6a6866" strokeOpacity="0.7" strokeWidth="1.4" strokeDasharray="1.5 3.2" />
+      </g>
+      {/* the screen: dots of paper over everything, the halftone grain */}
+      <rect width="270" height="360" fill={`url(#${dots})`} />
+    </svg>
+  );
+}
+
+export function GenerateImage({
+  /* seconds from the press to the picture */
+  pace = 5,
+  /* how liquid the surface is while it forms, 0..100 */
+  ripple = 50,
+  /* the frame's corner, px. The button is a pill at every setting: the frame is the picture, the pill is a control */
+  corner = 20,
+}: {
+  pace?: number;
+  ripple?: number;
+  corner?: number;
+} = {}) {
+  const still = stillness();
+  const uid = useId().replace(/:/g, "");
+  const id = `bn-gen-${uid}`;
+  const [t, setT] = useState(1);
+  const raf = useRef(0);
+  const curve = useRef<Knot[]>(knots());
+  const busy = t < 1;
+  /* 100 is held for a beat: the run ending and the pill reading "Gerar" again on the same frame would mean nobody
+     ever sees 100, so the pill stays a loader a moment after the picture lands */
+  const [held, setHeld] = useState(false);
+  /* it starts empty: a block about making a picture that already has the picture in it has answered its own question
+     before anybody pressed it. Once made the print stays, and pressing again remakes it from blank */
+  const [made, setMade] = useState(false);
+  const hold = useRef(0);
+  const loading = busy || held;
+  /* 99 at most until the run has finished: the 100 belongs to the picture landing, not to the curve */
+  const pct = held ? 100 : Math.min(99, Math.floor(along(curve.current, t) * 100));
+
+  useEffect(
+    () => () => {
+      cancelAnimationFrame(raf.current);
+      raf.current = 0;
+      window.clearTimeout(hold.current);
+    },
+    [],
+  );
+
+  const generate = () => {
+    if (loading) return;
+    const total = still ? 400 : Math.max(2, pace) * 1000;
+    let t0 = 0;
+    const tick = (now: number) => {
+      if (!t0) t0 = now;
+      const v = Math.min(1, (now - t0) / total);
+      setT(v);
+      if (v < 1) raf.current = requestAnimationFrame(tick);
+      else {
+        raf.current = 0;
+        setMade(true);
+        setHeld(true);
+        hold.current = window.setTimeout(() => setHeld(false), 650);
+      }
+    };
+    curve.current = knots();
+    setT(0);
+    raf.current = requestAnimationFrame(tick);
+  };
+
+  /* the three windows. The haze is one long rise with no pulse: dimming and brightening before anything is decided
+     reads as hesitating */
+  const haze = smooth(0, 0.3, t);
+  const form = smooth(0.1, 0.82, t);
+  const grain = smooth(0.7, 1, t);
+  /* blur falls fast at first and then crawls through the small radii, where the detail lives */
+  const sd = mix(20, 1.6, 1 - (1 - form) ** 2.2);
+  const k = mix(2.4, 1, form);
+  const warp = (clamp(ripple, 0, 100) / 100) * 32 * (1 - smooth(0.05, 0.9, t)) ** 1.5;
+  /* a slow drift in the noise so the water moves rather than sitting as a fixed distortion */
+  const f = 0.006 + 0.0018 * Math.sin(t * 4.4);
+  const cut = (PAPER - PAPER * k).toFixed(3);
+
+  return (
+    <div className="bn-gen" data-busy={busy} data-loading={loading} data-made={made}>
+      <div className="bn-gen-card" style={{ borderRadius: clamp(corner, 0, 40) }}>
+        {busy && !still && (
+          <>
+            <svg className="bn-gen-defs" aria-hidden="true">
+              <filter id={id} x="-10%" y="-10%" width="120%" height="120%" colorInterpolationFilters="sRGB">
+                <feTurbulence
+                  type="fractalNoise"
+                  baseFrequency={`${f.toFixed(4)} ${(f * 1.3).toFixed(4)}`}
+                  numOctaves={2}
+                  seed={7}
+                  result="n"
+                />
+                <feDisplacementMap
+                  in="SourceGraphic"
+                  in2="n"
+                  scale={warp.toFixed(2)}
+                  xChannelSelector="R"
+                  yChannelSelector="G"
+                  result="d"
+                />
+                <feGaussianBlur in="d" stdDeviation={sd.toFixed(2)} />
+                <feComponentTransfer>
+                  <feFuncR type="linear" slope={k.toFixed(3)} intercept={cut} />
+                  <feFuncG type="linear" slope={k.toFixed(3)} intercept={cut} />
+                  <feFuncB type="linear" slope={k.toFixed(3)} intercept={cut} />
+                </feComponentTransfer>
+              </filter>
+            </svg>
+            <Flower
+              uid={`${uid}a`}
+              style={{
+                filter: `url(#${id})`,
+                opacity: haze * mix(0.7, 1, form),
+                scale: `${mix(1.04, 1, smooth(0, 0.9, t))}`,
+              }}
+            />
+          </>
+        )}
+        {/* the print: the whole card at rest once made, and the grain that arrives last during a run */}
+        {(made || busy) && (
+          <Flower
+            uid={`${uid}b`}
+            label="Uma flor impressa em retícula"
+            style={
+              busy
+                ? {
+                    opacity: still ? t : grain,
+                    filter: still ? undefined : `blur(${mix(1.6, 0, grain).toFixed(2)}px)`,
+                  }
+                : undefined
+            }
+          />
+        )}
+
+        {/* the way in, in the middle of the frame: on the blank frame it is the only thing there. Once a picture is
+            made it steps aside and only comes back under the pointer, so the print is left clean */}
+        <button
+          type="button"
+          className="bn-gen-go"
+          onClick={generate}
+          disabled={loading}
+          tabIndex={loading ? -1 : 0}
+          aria-label="Gerar"
+        >
+          <span>Gerar</span>
+        </button>
+
+        {/* the count, small, in the corner: just the number going up */}
+        <span className="bn-gen-pct" role="status" aria-live="off">
+          {pct}%
+        </span>
+      </div>
+    </div>
+  );
+}