@botiverse/raft-ui 0.81.0 → 0.82.0

package/dist/components/steps/otter-indicator.css

@@ -1,141 +1,166 @@
-/* ─────────────────────────────────────────────────────────────────────────
-   OtterIndicator — an otter posed by a status (an agent's turn, a step). The
-   picture is fixed art; only the badges and the "z" take token colours.
-   ───────────────────────────────────────────────────────────────────────── */
-
+/* Fixed Ottie artwork in separate CSS assets; no image modules/base64 in JS. */
 .r-otter-indicator {
-  overflow: visible;
-}
-.r-otter-indicator * {
-  transform-box: view-box;
-}
-.r-otter-indicator__body {
-  transform-origin: 24px 28px;
-}
-.r-otter-indicator__arm {
-  transform-origin: 29px 27px;
-}
-.r-otter-indicator__ripple {
-  opacity: 0;
-  transform-origin: 6px 30.5px;
-}
-.r-otter-indicator__z {
-  opacity: 0;
-}
-.r-otter-indicator__parcel--adrift {
-  transform-origin: 6px 25px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.r-otter-indicator--wait {
+  --r-ottie-art: url("./ottie-assets/wait.webp");
+}
+.r-otter-indicator--process {
+  --r-ottie-art: url("./ottie-assets/process.webp");
+}
+.r-otter-indicator--error {
+  --r-ottie-art: url("./ottie-assets/error.webp");
+}
+.r-otter-indicator--finish {
+  --r-ottie-art: url("./ottie-assets/finish.webp");
+}
+.r-otter-indicator__viewport {
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+.r-otter-indicator__art {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.r-otter-indicator__base,
+.r-otter-indicator__frames,
+.r-otter-indicator__rest {
+  position: absolute;
+  inset: 0;
+  background-image: var(--r-ottie-art);
+  background-size: 300% 200%;
+  background-repeat: no-repeat;
+  background-position: 0% 0%;
+}
+.r-otter-indicator__rest {
+  background-size: contain;
+  background-position: center;
+  transform-origin: 50% 80%;
+}
+.r-otter-indicator--process .r-otter-indicator__frames {
+  mask-image:
+    radial-gradient(ellipse 11% 9% at 40% 60%, oklch(0 0 0) 88%, transparent 100%),
+    radial-gradient(ellipse 11% 9% at 61% 60%, oklch(0 0 0) 88%, transparent 100%);
+}
+.r-otter-indicator--error .r-otter-indicator__frames {
+  mask-image: linear-gradient(oklch(0 0 0) 0 58%, transparent 64%);
+}
+.r-otter-indicator--error .r-otter-indicator__frames,
+.r-otter-indicator--finish .r-otter-indicator__frames {
+  background-position: 100% 100%;
+}
+.r-otter-indicator__question {
+  fill: oklch(0.57 0.09 75);
+  font-family: ui-rounded, system-ui, sans-serif;
 }
 @media (prefers-reduced-motion: no-preference) {
-  .r-otter-indicator__wave {
-    animation: r-otter-indicator-wave 1.2s linear infinite;
+  .r-otter-indicator__rest {
+    animation: r-ottie-breathe 6s ease-in-out infinite;
   }
-  .r-otter-indicator__wave--back {
-    animation-duration: 2s;
+  .r-otter-indicator--process .r-otter-indicator__frames {
+    animation: r-ottie-type 4.52s steps(1, end) infinite;
   }
-  .r-otter-indicator--process .r-otter-indicator__body {
-    animation: r-otter-indicator-bob 1.8s ease-in-out infinite alternate;
+  .r-otter-indicator--error .r-otter-indicator__frames {
+    animation: r-ottie-tilt 1.55s steps(1, end) both;
   }
-  .r-otter-indicator--process .r-otter-indicator__arm {
-    animation: r-otter-indicator-paddle 0.9s ease-in-out infinite alternate;
+  .r-otter-indicator--finish .r-otter-indicator__frames {
+    animation: r-ottie-finish 1.24s steps(1, end) both;
   }
-  .r-otter-indicator--process .r-otter-indicator__ripple {
-    animation: r-otter-indicator-ripple 1.8s ease-out infinite;
+  .r-otter-indicator__question {
+    animation: r-ottie-question 1s linear both;
   }
-  .r-otter-indicator--process .r-otter-indicator__ripple--late {
-    animation-delay: 0.9s;
+  .r-otter-indicator .r-otter-indicator__rest,
+  .r-otter-indicator .r-otter-indicator__frames,
+  .r-otter-indicator .r-otter-indicator__question {
+    animation-play-state: paused;
   }
-  .r-otter-indicator--finish .r-otter-indicator__wave {
-    animation-duration: 3s;
+  .r-otter-indicator[data-animate="true"] .r-otter-indicator__rest,
+  .r-otter-indicator[data-animate="true"] .r-otter-indicator__frames,
+  .r-otter-indicator[data-animate="true"] .r-otter-indicator__question {
+    animation-play-state: running;
   }
-  .r-otter-indicator--finish .r-otter-indicator__body {
-    animation: r-otter-indicator-bob 3.2s ease-in-out infinite alternate;
-  }
-  .r-otter-indicator--wait .r-otter-indicator__body {
-    animation: r-otter-indicator-breathe 2.4s ease-in-out infinite alternate;
+}
+@keyframes r-ottie-breathe {
+  0%,
+  100% {
+    transform: scaleY(1);
   }
-  .r-otter-indicator--wait .r-otter-indicator__z {
-    animation: r-otter-indicator-z 2.4s ease-out infinite;
+  50% {
+    transform: scaleY(1.006);
   }
-  .r-otter-indicator--wait .r-otter-indicator__z--late {
-    animation-delay: 1.2s;
+}
+@keyframes r-ottie-type {
+  0%,
+  100% {
+    background-position: 0% 0%;
   }
-  .r-otter-indicator--error .r-otter-indicator__body {
-    animation: r-otter-indicator-shiver 0.18s linear infinite alternate;
+  48.6726% {
+    background-position: 50% 0%;
   }
-  .r-otter-indicator--error .r-otter-indicator__parcel--adrift {
-    animation: r-otter-indicator-drift 2s ease-in-out infinite alternate;
+  52.6549% {
+    background-position: 100% 0%;
   }
-}
-@media (prefers-reduced-motion: reduce) {
-  .r-otter-indicator__z {
-    opacity: 1;
+  58.8496% {
+    background-position: 0% 100%;
   }
-}
-@keyframes r-otter-indicator-bob {
-  from {
-    transform: translateY(-0.6px) rotate(-3deg);
+  62.8319% {
+    background-position: 50% 100%;
   }
-  to {
-    transform: translateY(1.2px) rotate(2deg);
+  69.0265% {
+    background-position: 100% 100%;
   }
 }
-@keyframes r-otter-indicator-paddle {
-  from {
-    transform: rotate(-35deg);
+@keyframes r-ottie-tilt {
+  0% {
+    background-position: 0% 0%;
   }
-  to {
-    transform: rotate(30deg);
+  8.3871% {
+    background-position: 50% 0%;
   }
-}
-@keyframes r-otter-indicator-wave {
-  to {
-    transform: translateX(-12px);
-  }
-}
-@keyframes r-otter-indicator-ripple {
-  from {
-    opacity: 0.8;
-    transform: scale(0.4);
+  16.7742% {
+    background-position: 100% 0%;
   }
-  to {
-    opacity: 0;
-    transform: scale(1.6);
+  25.1613% {
+    background-position: 0% 100%;
   }
-}
-@keyframes r-otter-indicator-breathe {
-  from {
-    transform: scale(1, 1);
+  33.5484% {
+    background-position: 50% 100%;
   }
-  to {
-    transform: scale(1.02, 1.05);
+  41.9355%,
+  100% {
+    background-position: 100% 100%;
   }
 }
-@keyframes r-otter-indicator-z {
-  from {
-    opacity: 0;
-    transform: translate(0, 0);
+@keyframes r-ottie-finish {
+  0% {
+    background-position: 0% 0%;
   }
-  30% {
-    opacity: 1;
+  13.7097% {
+    background-position: 50% 0%;
   }
-  to {
-    opacity: 0;
-    transform: translate(4px, -7px);
+  26.6129% {
+    background-position: 100% 0%;
   }
-}
-@keyframes r-otter-indicator-shiver {
-  from {
-    transform: translateX(-0.4px);
+  38.7097% {
+    background-position: 0% 100%;
   }
-  to {
-    transform: translateX(0.4px);
+  51.6129% {
+    background-position: 50% 100%;
+  }
+  63.7097%,
+  100% {
+    background-position: 100% 100%;
   }
 }
-@keyframes r-otter-indicator-drift {
-  from {
-    transform: translate(0, 0) rotate(-18deg);
+@keyframes r-ottie-question {
+  0%,
+  72% {
+    opacity: 0;
   }
-  to {
-    transform: translate(-1.5px, 1.2px) rotate(-8deg);
+  100% {
+    opacity: 1;
   }
 }

package/dist/components/steps/otter-indicator.d.mts

@@ -5,13 +5,10 @@ export interface OtterIndicatorProps extends Omit<ComponentPropsWithRef<"svg">,
   status: StepStatus;
 }
 /**
- * An otter on its back, one pose per status:
- * - `wait`: asleep on the dry bank, the parcel still on its belly.
- * - `process`: afloat, paddling with one arm, the parcel on its belly.
- * - `finish`: drifting at ease, hugging the delivered parcel.
- * - `error`: shivering in the water; the parcel has slipped away.
- *
- * It fills its box; give it 48px or more so the poses read.
+ * Ottie resting, quietly typing, tilting its head or celebrating.
+ * Wait/process loop only while visible. Error/finish play once on entry.
+ * Reduced motion shows a still pose. Give it an explicit square box, 40px or larger.
+ * Decorative by default; the consumer supplies the nearby status text.
  */
-export declare function OtterIndicator({ status, className, ...props }: OtterIndicatorProps): import("react").JSX.Element;
+export declare function OtterIndicator({ status, className, ref, ...props }: OtterIndicatorProps): import("react").JSX.Element;
 //#endregion

package/dist/components/steps/otter-indicator.mjs

@@ -1,330 +1,54 @@
 import { cn } from "../../cn.mjs";
-import { useId } from "react";
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { observeOtterAnimation } from "./otter-animation-visibility.mjs";
+import { useEffect, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/steps/otter-indicator.tsx
-const WAVE_PATH = "M-12 30q3-1.6 6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0V48H-12Z";
-const FUR = "oklch(0.5 0.07 55)";
-const FUR_DARK = "oklch(0.42 0.06 55)";
-const INK = "oklch(0.22 0.03 45)";
-const WHITE = "oklch(1 0 0)";
-function Parcel({ x, y }) {
-	return /* @__PURE__ */ jsxs("g", {
-		transform: `translate(${x} ${y})`,
-		children: [/* @__PURE__ */ jsx("rect", {
-			width: "9",
-			height: "7",
-			rx: "0.8",
-			fill: "oklch(0.78 0.12 75)",
-			stroke: FUR_DARK,
-			strokeWidth: "0.8"
-		}), /* @__PURE__ */ jsx("path", {
-			d: "M4.5 0v7M0 3h9",
-			stroke: "oklch(0.63 0.11 65)",
-			strokeWidth: "0.8"
-		})]
-	});
-}
-/** The face changes with the step: asleep, paddling, pleased or upset. */
-function Face({ status }) {
-	const line = {
-		fill: "none",
-		stroke: INK,
-		strokeWidth: .8,
-		strokeLinecap: "round"
-	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		status === "process" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
-			cx: "36.3",
-			cy: "20.6",
-			r: "1.1",
-			fill: INK
-		}), /* @__PURE__ */ jsx("circle", {
-			cx: "36.7",
-			cy: "20.2",
-			r: "0.35",
-			fill: WHITE
-		})] }),
-		status === "wait" && /* @__PURE__ */ jsx("path", {
-			d: "M35.2 20.6q1.1 0.9 2.2 0",
-			...line
-		}),
-		status === "finish" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", {
-			d: "M35.2 21.2q1.1-1.3 2.2 0",
-			...line
-		}), /* @__PURE__ */ jsx("ellipse", {
-			cx: "38.6",
-			cy: "22.4",
-			rx: "1.3",
-			ry: "0.8",
-			fill: "oklch(0.8 0.1 20)",
-			opacity: "0.8"
-		})] }),
-		status === "error" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx("circle", {
-				cx: "36.3",
-				cy: "20.8",
-				r: "1.2",
-				fill: WHITE,
-				stroke: INK,
-				strokeWidth: "0.5"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "36.5",
-				cy: "21",
-				r: "0.55",
-				fill: INK
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M34.6 18.2l2.8 0.8",
-				...line
-			})
-		] }),
-		/* @__PURE__ */ jsx("ellipse", {
-			cx: "42.6",
-			cy: "23.6",
-			rx: "1.4",
-			ry: "1.1",
-			fill: INK
-		}),
-		/* @__PURE__ */ jsx("path", {
-			d: status === "error" ? "M39.6 27.2q1-0.9 2.1 0" : "M39.6 26.6q1 0.9 2.1 0",
-			...line,
-			strokeWidth: .7
-		}),
-		/* @__PURE__ */ jsx("path", {
-			d: "M41 25.2l4.2-0.8M41 26l4.2 0.6",
-			stroke: FUR_DARK,
-			strokeWidth: "0.4",
-			strokeLinecap: "round"
-		})
-	] });
-}
-/** A small badge above the head: ✓ when done, ! when failed. */
-function Badge({ status }) {
-	if (status !== "finish" && status !== "error") return null;
-	return /* @__PURE__ */ jsxs("g", {
-		transform: "translate(43 9)",
-		children: [/* @__PURE__ */ jsx("circle", {
-			r: "4.6",
-			fill: status === "finish" ? "var(--success)" : "var(--danger)",
-			stroke: WHITE,
-			strokeWidth: "1"
-		}), status === "finish" ? /* @__PURE__ */ jsx("path", {
-			d: "M-2 0l1.4 1.5L2.1-1.4",
-			fill: "none",
-			stroke: WHITE,
-			strokeWidth: "1.2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}) : /* @__PURE__ */ jsx("path", {
-			d: "M0-2.4v2.6M0 2.1v0.1",
-			stroke: WHITE,
-			strokeWidth: "1.3",
-			strokeLinecap: "round"
-		})]
-	});
-}
-/** The otter on its back, posed by the step: paddling, at ease, upset or asleep. */
-function OtterBody({ status }) {
-	return /* @__PURE__ */ jsxs("g", {
-		className: "r-otter-indicator__body",
-		children: [
-			/* @__PURE__ */ jsx("path", {
-				d: "M13 26.5Q6 26.5 1.5 30.5Q7 32 13 31Z",
-				fill: FUR_DARK
-			}),
-			/* @__PURE__ */ jsx("ellipse", {
-				cx: "11",
-				cy: "21.5",
-				rx: "1.9",
-				ry: "3",
-				fill: FUR_DARK,
-				transform: "rotate(-25 11 21.5)"
-			}),
-			/* @__PURE__ */ jsx("ellipse", {
-				cx: "14.5",
-				cy: "20.5",
-				rx: "1.9",
-				ry: "3",
-				fill: FUR_DARK,
-				transform: "rotate(-10 14.5 20.5)"
-			}),
-			/* @__PURE__ */ jsx("g", {
-				className: "r-otter-indicator__arm",
-				children: /* @__PURE__ */ jsx("path", {
-					d: status === "process" ? "M29 27q4 3.5 2.5 8" : "M29 26q3 0.5 4-2",
-					fill: "none",
-					stroke: FUR_DARK,
-					strokeWidth: "2.8",
-					strokeLinecap: "round"
-				})
-			}),
-			/* @__PURE__ */ jsx("ellipse", {
-				cx: "22",
-				cy: "28",
-				rx: "12",
-				ry: "6.5",
-				fill: FUR
-			}),
-			/* @__PURE__ */ jsx("ellipse", {
-				cx: "22",
-				cy: "25",
-				rx: "9",
-				ry: "3.6",
-				fill: "oklch(0.8 0.06 70)"
-			}),
-			status !== "error" && /* @__PURE__ */ jsx(Parcel, {
-				x: 16.5,
-				y: 16.5
-			}),
-			/* @__PURE__ */ jsx("ellipse", {
-				cx: "26.5",
-				cy: "21",
-				rx: "1.7",
-				ry: "2.4",
-				fill: FUR_DARK,
-				transform: "rotate(30 26.5 21)"
-			}),
-			status === "finish" && /* @__PURE__ */ jsx("ellipse", {
-				cx: "16",
-				cy: "21.5",
-				rx: "1.6",
-				ry: "2.2",
-				fill: FUR_DARK,
-				transform: "rotate(-30 16 21.5)"
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "31.5",
-				cy: "17.3",
-				r: "1.8",
-				fill: FUR_DARK
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: "35",
-				cy: "23",
-				r: "7",
-				fill: FUR
-			}),
-			/* @__PURE__ */ jsx("ellipse", {
-				cx: "39",
-				cy: "25",
-				rx: "4.2",
-				ry: "3.2",
-				fill: "oklch(0.87 0.05 75)"
-			}),
-			/* @__PURE__ */ jsx(Face, { status }),
-			status === "error" && /* @__PURE__ */ jsx("path", {
-				d: "M37.4 22.3q-0.8 1.4 0 1.9q0.8-0.5 0-1.9Z",
-				fill: "oklch(0.8 0.08 230)"
-			})
-		]
-	});
-}
 /**
-* An otter on its back, one pose per status:
-* - `wait`: asleep on the dry bank, the parcel still on its belly.
-* - `process`: afloat, paddling with one arm, the parcel on its belly.
-* - `finish`: drifting at ease, hugging the delivered parcel.
-* - `error`: shivering in the water; the parcel has slipped away.
-*
-* It fills its box; give it 48px or more so the poses read.
+* Ottie resting, quietly typing, tilting its head or celebrating.
+* Wait/process loop only while visible. Error/finish play once on entry.
+* Reduced motion shows a still pose. Give it an explicit square box, 40px or larger.
+* Decorative by default; the consumer supplies the nearby status text.
 */
-function OtterIndicator({ status, className, ...props }) {
-	const pondId = `otter-pond${useId().replace(/[^\w-]/g, "")}`;
-	const pond = `url(#${pondId})`;
-	const wet = status !== "wait";
+function OtterIndicator({ status, className, ref, ...props }) {
+	const node = useRef(null);
+	const [mergedRef] = useMergedRef(node, ref);
+	useEffect(() => {
+		if (node.current) return observeOtterAnimation(node.current);
+	}, []);
 	return /* @__PURE__ */ jsxs("svg", {
 		"aria-hidden": "true",
-		viewBox: "0 0 48 48",
 		width: "100%",
 		height: "100%",
 		"data-slot": "otter-indicator",
 		...props,
+		ref: mergedRef,
 		className: cn("r-otter-indicator", `r-otter-indicator--${status}`, className),
-		children: [
-			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
-				id: pondId,
-				children: /* @__PURE__ */ jsx("ellipse", {
-					cx: "24",
-					cy: "35",
-					rx: "23.5",
-					ry: "8"
+		children: [/* @__PURE__ */ jsx("foreignObject", {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "r-otter-indicator__viewport",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "r-otter-indicator__art",
+					children: status === "wait" ? /* @__PURE__ */ jsx("div", { className: "r-otter-indicator__rest" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [status !== "finish" && /* @__PURE__ */ jsx("div", { className: "r-otter-indicator__base" }), /* @__PURE__ */ jsx("div", { className: "r-otter-indicator__frames" })] })
 				})
-			}) }),
-			/* @__PURE__ */ jsxs("g", {
-				transform: "translate(0 -5)",
-				children: [
-					wet ? /* @__PURE__ */ jsx("g", {
-						clipPath: pond,
-						children: /* @__PURE__ */ jsx("path", {
-							className: "r-otter-indicator__wave r-otter-indicator__wave--back",
-							d: WAVE_PATH,
-							fill: "oklch(0.88 0.07 215)",
-							transform: "translate(0 -1.5)"
-						})
-					}) : /* @__PURE__ */ jsxs("g", { children: [
-						/* @__PURE__ */ jsx("ellipse", {
-							cx: "24",
-							cy: "34",
-							rx: "22",
-							ry: "5.5",
-							fill: "oklch(0.9 0.06 85)"
-						}),
-						/* @__PURE__ */ jsx("ellipse", {
-							cx: "7",
-							cy: "34.5",
-							rx: "1.6",
-							ry: "1",
-							fill: "oklch(0.78 0.06 75)"
-						}),
-						/* @__PURE__ */ jsx("ellipse", {
-							cx: "41",
-							cy: "35.5",
-							rx: "1.2",
-							ry: "0.8",
-							fill: "oklch(0.78 0.06 75)"
-						})
-					] }),
-					status === "process" && ["", " r-otter-indicator__ripple--late"].map((late) => /* @__PURE__ */ jsx("ellipse", {
-						className: `r-otter-indicator__ripple${late}`,
-						cx: "6",
-						cy: "30.5",
-						rx: "5",
-						ry: "1.4",
-						fill: "none",
-						stroke: WHITE,
-						strokeWidth: "0.8"
-					}, late)),
-					status === "error" && /* @__PURE__ */ jsx("g", {
-						className: "r-otter-indicator__parcel--adrift",
-						children: /* @__PURE__ */ jsx(Parcel, {
-							x: 1.5,
-							y: 22
-						})
-					}),
-					/* @__PURE__ */ jsx(OtterBody, { status }),
-					wet && /* @__PURE__ */ jsx("g", {
-						clipPath: pond,
-						children: /* @__PURE__ */ jsx("path", {
-							className: "r-otter-indicator__wave",
-							d: WAVE_PATH,
-							fill: "oklch(0.78 0.11 220)",
-							fillOpacity: "0.9"
-						})
-					}),
-					status === "wait" && ["", " r-otter-indicator__z--late"].map((late, i) => /* @__PURE__ */ jsx("text", {
-						className: `r-otter-indicator__z${late}`,
-						x: i === 0 ? 38 : 43,
-						y: i === 0 ? 15 : 9,
-						fontSize: i === 0 ? 9 : 7,
-						fontWeight: "700",
-						fill: "var(--foreground-muted, currentColor)",
-						children: "z"
-					}, late))
-				]
-			}),
-			/* @__PURE__ */ jsx(Badge, { status })
-		]
+			})
+		}, `art-${status}`), status === "error" && /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 48 48",
+			width: "100%",
+			height: "100%",
+			overflow: "visible",
+			children: /* @__PURE__ */ jsx("text", {
+				className: "r-otter-indicator__question",
+				x: "40.3",
+				y: "11.4",
+				fontSize: "11.4",
+				fontWeight: "800",
+				transform: "rotate(10 40.3 11.4)",
+				children: "?"
+			}, `question-${status}`)
+		})]
 	});
 }
 //#endregion