@crievo/omni 0.1.3 → 0.1.4

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

@@ -0,0 +1,273 @@
+/* A row of pictures cropped to slivers. Point at one and it opens; the others give up exactly what it takes.
+   Ported from bencho.dev (MIT).
+
+   The row is a fixed width, and that is the component: nothing grows, so opening a picture is a negotiation. Every
+   pixel the pointed one gains the other four pay between them. Flexbox with five grow numbers does that arithmetic at
+   any count and any gap.
+   The neighbours of the open picture open a little too (a falloff, not a switch being thrown). `reach` is that
+   falloff: tight, one picture opens; wide, the whole row leans toward the cursor.
+   Pointing is stable: the picture under the pointer is the one that grows, so its edges move away from the pointer,
+   never across it, and it cannot shrink out from under you and hand the hover to a neighbour. */
+
+import { useEffect, useRef, useState } from "react";
+
+/* One spring for everything that settles: velocity accumulates toward the target, is damped, and the loop parks itself
+   when both the delta and the velocity fall under 0.02. `dt` is in sixtieths of a second and the damping is raised to
+   it (not multiplied), so a dropped frame decays the same energy as the two frames it replaced. */
+
+/* 0..100 into the two numbers a spring has, chosen by damping ratio zeta = -ln(d) / (2 sqrt(k)):
+     0 -> zeta ~0.85, heavy, arrives without a ring
+     50 -> zeta ~0.41
+     100 -> zeta ~0.20, lively, two visible rebounds
+   Both ends stay usable. */
+const springOf = (tune: number) => ({
+  /* stiffness: how hard it is pulled toward the target */
+  k: 0.08 + (tune / 100) * 0.16,
+  /* decay, per frame: how much of the velocity survives */
+  d: 0.62 + (tune / 100) * 0.2,
+});
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+
+/* The snap threshold is absolute, so callers work in pixels or in 0..100: a spring over 0..1 would be "settled"
+   before it had visibly moved. */
+function useSpring(target: number, tune = 50, instant = false) {
+  const [at, setAt] = useState(target);
+  const cur = useRef(target);
+  const vel = useRef(0);
+  const raf = useRef(0);
+
+  useEffect(() => {
+    if (instant) {
+      cur.current = target;
+      vel.current = 0;
+      setAt(target);
+      return;
+    }
+    const { k, d } = springOf(tune);
+    let prev = 0;
+    const tick = (t: number) => {
+      const dt = prev ? clamp((t - prev) / 16.67, 0, 2.5) : 1;
+      prev = t;
+      vel.current += (target - cur.current) * k * dt;
+      vel.current *= d ** dt;
+      cur.current += vel.current * dt;
+      if (Math.abs(target - cur.current) < 0.02 && Math.abs(vel.current) < 0.02) {
+        cur.current = target;
+        vel.current = 0;
+        setAt(target);
+        raf.current = 0;
+        return;
+      }
+      setAt(cur.current);
+      raf.current = requestAnimationFrame(tick);
+    };
+    raf.current = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf.current);
+      raf.current = 0;
+    };
+    /* `tune` sits beside `target` because the loop closes over it: a knob turned mid-flight restarts the effect,
+       which picks up from the refs and continues rather than snapping. */
+  }, [target, tune, instant]);
+
+  return at;
+}
+
+/* Read once: a preference, not a live input. */
+const stillness = () =>
+  typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+/* The pictures: five generated landscapes, 800x1200 portrait (the one shape this block wants), drawn as inline SVG
+   and handed to <img> as data URIs so `object-fit: cover` re-frames them exactly as it would a photograph. Every
+   ridge is a few summed sines, so the set is deterministic. */
+type Shot = {
+  name: string;
+  sky: [string, string];
+  sun: [number, number, number, string];
+  ridges: [number, number, number, number, string][];
+  water?: string;
+};
+
+/* a ridge line across the frame at height `y`, `amp` tall, `f` wiggles, shifted by `ph`, filled down to the bottom */
+const ridge = (y: number, amp: number, f: number, ph: number) => {
+  let d = "M0 1200";
+  for (let x = 0; x <= 800; x += 20) {
+    const u = x / 800;
+    const h = Math.sin(u * f * Math.PI * 2 + ph) * 0.6 + Math.sin(u * f * 2.3 * Math.PI * 2 + ph * 1.7) * 0.4;
+    d += ` L${x} ${(y - h * amp).toFixed(1)}`;
+  }
+  return `${d} L800 1200 Z`;
+};
+
+const paint = (s: Shot) => {
+  const [sx, sy, sr, sc] = s.sun;
+  const layers = s.ridges.map(([y, amp, f, ph, fill]) => `<path d="${ridge(y, amp, f, ph)}" fill="${fill}"/>`);
+  const water = s.water
+    ? `<rect y="860" width="800" height="340" fill="${s.water}" opacity=".55"/><ellipse cx="${sx}" cy="960" rx="${sr * 0.3}" ry="${sr * 2.4}" fill="${sc}" opacity=".7"/>`
+    : "";
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1200"><defs>` +
+    `<linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${s.sky[0]}"/><stop offset="1" stop-color="${s.sky[1]}"/></linearGradient>` +
+    `<radialGradient id="h"><stop offset="0" stop-color="${sc}" stop-opacity=".9"/><stop offset="1" stop-color="${sc}" stop-opacity="0"/></radialGradient></defs>` +
+    `<rect width="800" height="1200" fill="url(#g)"/>` +
+    `<circle cx="${sx}" cy="${sy}" r="${sr * 3}" fill="url(#h)"/><circle cx="${sx}" cy="${sy}" r="${sr}" fill="${sc}"/>` +
+    `${layers.join("")}${water}</svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+};
+
+/* ridges are [height, amplitude, wiggles, phase, fill], back to front */
+const SHOTS: (Shot & { src: string })[] = (
+  [
+    {
+      name: "dunas",
+      sky: ["#f6c58b", "#fbe7c8"],
+      sun: [560, 330, 70, "#fff3d6"],
+      ridges: [
+        [700, 70, 1.2, 0.4, "#e2a366"],
+        [820, 90, 1.6, 2.1, "#c97f47"],
+        [960, 80, 1.1, 4.0, "#a85d34"],
+        [1100, 60, 1.8, 1.0, "#7d3f27"],
+      ],
+    },
+    {
+      name: "lago",
+      sky: ["#2f4b7c", "#f2a58e"],
+      sun: [250, 640, 55, "#ffe9c2"],
+      ridges: [
+        [700, 120, 1.5, 1.3, "#3b3f6b"],
+        [800, 90, 2.2, 3.3, "#262a4f"],
+      ],
+      water: "#1d2442",
+    },
+    {
+      name: "serra",
+      sky: ["#a7c7d9", "#eef3ef"],
+      sun: [620, 260, 46, "#ffffff"],
+      ridges: [
+        [560, 150, 1.3, 0.2, "#9db3c2"],
+        [700, 160, 1.9, 2.6, "#6f8aa0"],
+        [860, 130, 1.4, 4.4, "#47647c"],
+        [1040, 90, 2.4, 0.9, "#2b4258"],
+      ],
+    },
+    {
+      name: "pôr do sol",
+      sky: ["#5a2a6b", "#ff9a5a"],
+      sun: [400, 700, 120, "#ffd27a"],
+      ridges: [
+        [820, 70, 2.0, 0.7, "#8a3a5a"],
+        [940, 80, 1.4, 2.9, "#5b2650"],
+        [1080, 60, 2.6, 5.0, "#341a3d"],
+      ],
+    },
+    {
+      name: "floresta",
+      sky: ["#cfe3c3", "#f4f1d0"],
+      sun: [180, 300, 58, "#fffbe0"],
+      ridges: [
+        [640, 90, 2.8, 1.1, "#8fbf86"],
+        [780, 110, 3.4, 3.7, "#5e9a68"],
+        [930, 100, 2.2, 0.3, "#3d7653"],
+        [1090, 70, 3.8, 2.4, "#245240"],
+      ],
+    },
+  ] satisfies Shot[]
+).map(s => ({ ...s, src: paint(s) }));
+
+/* The strip is fixed: 340 across and 300 down, so at the default gap five pictures are a little under 62 wide against
+   300 tall, the ratio at which a photograph stops being a photograph and becomes a stripe of colour. The width is not
+   a function of the count: take a picture out and the rest get wider. */
+const W = 340;
+const H = 300;
+
+const PICS = SHOTS;
+
+/* The corner follows the gap, capped at RMAX. A rounded picture next to a rounded picture with no air between leaves
+   a notch of page at every join, so the radius can never be larger than the air it has to fit into. The strip reads
+   the same number, so the ends are not rounder than the middle three. */
+const RMAX = 12;
+
+/* How much the open one takes, as a share of what an unopened picture has. 50 is 1.8: the open picture is nearly three
+   times a resting one. At 0 it is a lean rather than an opening; at 100 it is about two fifths of the strip. */
+const lift = (open: number) => 0.4 + (clamp(open, 0, 100) / 100) * 2.8;
+
+/* How far the swell carries: a gaussian on the distance in pictures. 0.35 puts the first neighbour at three
+   ten-thousandths (off), 1.25 at better than half; the default of 35 lands it at a tenth. */
+const fall = (d: number, reach: number) => {
+  const s = 0.35 + (clamp(reach, 0, 100) / 100) * 0.9;
+  return Math.exp(-((d / s) ** 2));
+};
+
+export function ImageAccordion({
+  /* how much the open picture takes, 0..100 */
+  open = 50,
+  /* how far the swell carries into its neighbours, 0..100 */
+  reach = 35,
+  /* the spring, 0..100 */
+  bounce = 10,
+  /* the air between pictures, in px. The corner follows it. */
+  gap = 8,
+}: {
+  open?: number;
+  reach?: number;
+  bounce?: number;
+  gap?: number;
+} = {}) {
+  /* which picture the pointer is on; null rather than -1 so "none" cannot be confused with the first */
+  const [at, setAt] = useState<number | null>(null);
+  const still = stillness();
+
+  /* One spring each and no stagger: these are not five things responding in turn, they are one width being divided.
+     If the last picture gave up its share a beat after its neighbour, the strip would visibly fail to add up for that
+     beat. A hook cannot be called conditionally, so there are five, one per picture. Driven over 0..100 rather than
+     over the grow number itself (see useSpring). */
+  const want = (i: number) => (at === null ? 0 : fall(Math.abs(i - at), reach) * 100);
+  const a0 = useSpring(want(0), bounce, still);
+  const a1 = useSpring(want(1), bounce, still);
+  const a2 = useSpring(want(2), bounce, still);
+  const a3 = useSpring(want(3), bounce, still);
+  const a4 = useSpring(want(4), bounce, still);
+  const swell = [a0, a1, a2, a3, a4];
+
+  const g = clamp(gap, 0, 20);
+  const k = lift(open);
+
+  return (
+    <div
+      className="bn-acc"
+      style={{ width: W, height: H, gap: g, borderRadius: Math.min(RMAX, g) }}
+      /* `out` with a containment test, not `leave`: a scripted pointer walked off the block carries
+         `relatedTarget: null`, which React never turns into a leave */
+      onPointerOut={e => {
+        const to = e.relatedTarget as Node | null;
+        if (!to || !e.currentTarget.contains(to)) setAt(null);
+      }}
+      onPointerCancel={() => setAt(null)}
+    >
+      {PICS.map((pic, i) => {
+        const u = swell[i] / 100;
+        return (
+          <div
+            key={pic.name}
+            className="bn-acc-cell"
+            data-open={at === i || undefined}
+            style={{
+              /* the whole layout, in one number per picture: `flex-basis: 0` so the grow numbers are the entire
+                 story (and the cell carries `min-width: 0` in the sheet, or the image would stop it shrinking) */
+              flexGrow: 1 + k * u,
+              borderRadius: Math.min(RMAX, g),
+            }}
+            onPointerEnter={() => {
+              if (at !== i) setAt(i);
+            }}
+          >
+            {/* `cover` re-frames rather than stretching: the height never changes, so as the cell widens the crop
+                admits more of the picture on both sides and nothing in it moves or resizes */}
+            <img src={pic.src} alt="" draggable={false} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,289 @@
+/* A switch whose droplet stretches as it slides across the track. Drag the droplet, or click, or press Space/Enter.
+   Ported from bencho.dev (MIT).
+
+   One body, not a trail: a second, smaller blob on a lagging spring necked into a thread through a goo filter, which
+   is what a trail is and what it looks like. The one droplet lengthens along its direction of travel and thins across
+   it instead (area kept: scaleY is 1/scaleX), so the elasticity is in the shape of the thing moving. With nothing left
+   to merge there is no goo filter either: a blur-then-threshold pass over a single round shape can only soften its
+   edge, and a plain border-radius circle is drawn at device resolution and stays crisp at any zoom. */
+
+import {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  forwardRef,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { animate, motion, useMotionValue, useSpring, useTransform, useVelocity } from "motion/react";
+
+const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+const noop = () => {};
+
+const TRACK = 92;
+/* The droplet, and the air round it: 36 in a 46 track, so five pixels of track show all the way round (a droplet
+   sitting in a slot, not a thumb pressed into it). PAD is the same five, because the inset at the ends and the inset
+   above and below are the same gap seen twice. The size is handed to the stylesheet as `--liq-thumb` rather than
+   written there as well: the travel maths needs it and so does the circle, and two copies of a number that must agree
+   is one copy too many. */
+const THUMB = 36;
+const PAD = (46 - THUMB) / 2;
+const HEIGHT = 46;
+
+/* the two ends of the thumb's travel, and the line between */
+const SHUT_X = PAD;
+const OPEN_X = TRACK - THUMB - PAD;
+const MID_X = (SHUT_X + OPEN_X) / 2;
+
+export type LiquidSwitchProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "type" | "role" | "value" | "defaultValue" | "defaultChecked" | "children" | "onChange"
+> & {
+  /* controlled value; when given it wins over everything the switch does on its own */
+  checked?: boolean;
+  /* uncontrolled start value, for a caller that keeps no state */
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  /* a form field: the hidden checkbox is only written when there is a name */
+  name?: string;
+  value?: string;
+  required?: boolean;
+  /* the whole switch drawn at a fraction; the layout box is the scaled size, the physics stay in the 92x46 units */
+  scale?: number;
+  /* how much the droplet lengthens into its own travel, 0..100 */
+  stretch?: number;
+  /* how fast it crosses, 0..100 */
+  speed?: number;
+};
+
+export const LiquidSwitch = forwardRef<HTMLButtonElement, LiquidSwitchProps>(function LiquidSwitch(
+  {
+    checked,
+    defaultChecked = false,
+    onCheckedChange,
+    name,
+    value = "on",
+    required,
+    disabled,
+    scale = 1,
+    stretch = 36,
+    speed = 50,
+    className,
+    style,
+    onClick,
+    ...rest
+  },
+  ref,
+) {
+  const controlled = checked !== undefined;
+  const [inner, setInner] = useState(defaultChecked);
+  /* the controlled value is the only truth: a parent that refuses a change leaves this where it was, and the droplet
+     settles back to it when the finger lets go */
+  const on = controlled ? checked : inner;
+  /* held, so the settling spring knows to keep out of the way while a finger owns the thumb */
+  const [held, setHeld] = useState(false);
+  /* which side of the middle a drag is on. The track answers under the finger, but nothing is reported to the parent
+     until release: a caller's onCheckedChange can save or confirm, and must fire once, not on every crossing */
+  const [lean, setLean] = useState<boolean | null>(null);
+  /* the pointer is over the switch: state and not `:hover`, because what it drives is a spring in the same transform
+     the position lives in (see `swell`) */
+  const [hot, setHot] = useState(false);
+  const rail = useRef<HTMLButtonElement | null>(null);
+  const grip = useRef<{ id: number; grab: number | null; moved: boolean } | null>(null);
+  /* a tap is toggled on release, and the click the browser sends right after must not toggle it a second time */
+  const tapped = useRef(false);
+
+  const setRefs = useCallback(
+    (el: HTMLButtonElement | null) => {
+      rail.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref],
+  );
+
+  const commit = (next: boolean) => {
+    if (next === on) return;
+    if (!controlled) setInner(next);
+    onCheckedChange?.(next);
+  };
+
+  /* One position, written two ways: the thumb's x is a motion value rather than a prop, which lets a finger and a
+     spring both drive it without one having to know about the other. A drag writes it directly, a release animates
+     it, and nothing re-renders either way. */
+  const x = useMotionValue<number>(on ? OPEN_X : SHUT_X);
+
+  /* The stretch follows the thumb's velocity through a spring. Dragging slowly keeps the pair one shape; a flick
+     lengthens it. The divisor is the whole tuning: the peak speed on a 44px crossing is about 150px a second, so
+     600 puts the peak stretch at about 1.09 at the default (1400 peaked at 1.039, present and invisible), and the cap
+     at 0.4 leaves the top of the knob somewhere to go. */
+  const vel = useVelocity(x);
+  const eased = useSpring(vel, { stiffness: 380, damping: 34, mass: 0.6 });
+  const lengthen = (v: number) => 1 + Math.min(0.4, Math.abs(v) / 600) * (clamp(stretch, 0, 100) / 100);
+
+  /* The hover swell goes in the same transform. As the CSS `scale` property it composed wrongly: individual transform
+     properties apply before `transform`, so `scale: 1.035` scaled the coordinate system `translateX(51px)` then moved
+     through (51 became 52.8) and the droplet drifted toward the end it already sat at. Multiplied into scaleX and
+     scaleY here it is a swell about the droplet's own centre and the position is untouched. */
+  const swell = useSpring(hot && !disabled ? 1.035 : 1, { stiffness: 380, damping: 34, mass: 0.6 });
+  const wide = useTransform([eased, swell], ([v, s]: number[]) => lengthen(v) * s);
+  const tall = useTransform([eased, swell], ([v, s]: number[]) => s / lengthen(v));
+
+  /* How the thumb lands when it is let go: Speed is the stiffness, damping is a constant. 170/21.5 is zeta 0.87, which
+     arrives with a hint of give and no hard stop (a switch is not a thing anybody wants a bounce dial on). */
+  const settle = useMemo(
+    () => ({
+      type: "spring" as const,
+      stiffness: 170 - (50 - speed) * 1.1,
+      damping: 21.5,
+      mass: 0.9,
+    }),
+    [speed],
+  );
+
+  /* Rest is wherever `on` says, and only applied when nothing is holding the thumb. The cleanup stopping the animation
+     is what makes grabbing it mid-flight work: `held` turning true tears down the settle and leaves the value exactly
+     where the spring had got to. `held` going false re-runs it even when `on` did not change, which is what brings the
+     droplet home after a drag the parent refused. */
+  useEffect(() => {
+    if (held) return;
+    const run = animate(x, on ? OPEN_X : SHUT_X, settle);
+    return () => run.stop();
+  }, [on, held, x, settle]);
+
+  /* the component may be drawn at a fraction, so a client delta has to be divided back out before it means anything in
+     the track's own units */
+  const local = (clientX: number) => {
+    const el = rail.current;
+    if (!el) return 0;
+    const b = el.getBoundingClientRect();
+    const k = b.width / (el.offsetWidth || b.width) || 1;
+    return (clientX - b.left) / k;
+  };
+
+  const down = (e: ReactPointerEvent) => {
+    if (disabled || e.button !== 0) return;
+    /* No offset yet: it is taken at the first move. Deciding here made an off-thumb press teleport the droplet, since
+       `x.set()` is a hard write with no spring behind it (46px between two frames). Taking it at the first move means
+       that move produces no displacement and every one after tracks the delta, so a drag always starts from where the
+       droplet actually is. */
+    grip.current = { id: e.pointerId, grab: null, moved: false };
+    setHeld(true);
+    /* it throws if the id is not a live pointer (a synthetic event), and the drag is usable without it */
+    try {
+      rail.current?.setPointerCapture(e.pointerId);
+    } catch {
+      /* not live */
+    }
+  };
+
+  const move = (e: ReactPointerEvent) => {
+    const g = grip.current;
+    if (!g || g.id !== e.pointerId) return;
+    const at = local(e.clientX);
+    /* the offset, taken from where the droplet is: the first move asks for exactly the position it already has */
+    if (g.grab === null) g.grab = at - x.get();
+    const next = clamp(at - g.grab, SHUT_X, OPEN_X);
+    if (Math.abs(next - x.get()) > 0.4) g.moved = true;
+    x.set(next);
+    /* it flips as it passes the middle rather than on release, so the track answers under your finger */
+    if (g.moved) setLean(next > MID_X);
+  };
+
+  const up = (e: ReactPointerEvent) => {
+    const g = grip.current;
+    if (!g) return;
+    grip.current = null;
+    /* guarded too: the capture in `down` can quietly fail, and an unguarded throw here would skip `setHeld(false)`
+       and leave the droplet stopped wherever the drag ended */
+    try {
+      rail.current?.releasePointerCapture?.(e.pointerId);
+    } catch {
+      /* never captured */
+    }
+    /* a cancelled gesture (the system took the touch) decides nothing */
+    if (e.type !== "pointercancel") {
+      /* a press that never travelled is a click, and a click toggles; a drag decides by where the droplet ended. Both
+         swallow the click event that follows, which would otherwise toggle again. */
+      commit(g.moved ? x.get() > MID_X : !on);
+      tapped.current = true;
+      setTimeout(() => {
+        tapped.current = false;
+      }, 0);
+    }
+    setLean(null);
+    setHeld(false);
+  };
+
+  /* Clicks that did not come from this pointer: Space and Enter on the focused button, a <label> wrapped round the
+     switch, a programmatic .click(). They toggle like any switch. */
+  const click = (e: ReactMouseEvent<HTMLButtonElement>) => {
+    onClick?.(e);
+    if (e.defaultPrevented || disabled || tapped.current) return;
+    commit(!on);
+  };
+
+  const shown = lean ?? on;
+
+  return (
+    <span
+      className={`bn-liq-box${className ? ` ${className}` : ""}`}
+      style={{ width: TRACK * scale, height: HEIGHT * scale }}
+      data-disabled={disabled ? "" : undefined}
+    >
+      <button
+        {...rest}
+        ref={setRefs}
+        type="button"
+        className="bn-liq-sw"
+        style={{ "--liq-thumb": `${THUMB}px`, transform: `scale(${scale})`, ...style } as CSSProperties}
+        data-on={shown}
+        data-state={on ? "checked" : "unchecked"}
+        data-disabled={disabled ? "" : undefined}
+        role="switch"
+        aria-checked={on}
+        aria-required={required || undefined}
+        disabled={disabled}
+        onClick={click}
+        onPointerDown={down}
+        onPointerMove={move}
+        onPointerUp={up}
+        onPointerCancel={up}
+        onPointerEnter={() => setHot(true)}
+        onPointerLeave={() => setHot(false)}
+      >
+        <span className="bn-liq-sw-blobs" aria-hidden="true">
+          <motion.span className="bn-liq-thumb" style={{ x, scaleX: wide, scaleY: tall }} />
+        </span>
+      </button>
+      {/* after the button on purpose: a <label> around the switch targets the first labelable element inside it */}
+      {name !== undefined && (
+        <input
+          hidden
+          type="checkbox"
+          tabIndex={-1}
+          aria-hidden="true"
+          name={name}
+          value={value}
+          checked={on}
+          required={required}
+          disabled={disabled}
+          onChange={noop}
+        />
+      )}
+    </span>
+  );
+});
+
+/* The gallery's demo: the same switch at full size, on a stage of its own with the two tuning dials. */
+export function LiquidToggle({ stretch = 36, speed = 50 }: { stretch?: number; speed?: number } = {}) {
+  return (
+    <div className="bn-liq-well">
+      <LiquidSwitch stretch={stretch} speed={speed} aria-label="Interruptor líquido" />
+    </div>
+  );
+}