@botiverse/raft-ui 0.80.0 → 0.82.0

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

package/dist/components/tabs/tabs.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
 import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { createDragAnnouncements, dragInstructions } from "../drag/drag-announcements.mjs";
-import { DragLift, useDragSiblingTransition, useLiftContainer } from "../drag/drag-lift.mjs";
+import { DragLift, useDragSiblingTransition } from "../drag/drag-lift.mjs";
 import { useDragSensors } from "../drag/drag-sensors.mjs";
 import { DropPlaceholder } from "../drag/drop-placeholder.mjs";
 import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -275,7 +275,6 @@ function SortableTabsList({ value, onReorder, onDragStart, messages, container,
 	const sensors = useDragSensors();
 	const [copies] = useState(() => /* @__PURE__ */ new Map());
 	const [nodes] = useState(() => /* @__PURE__ */ new Map());
-	const liftContainer = useLiftContainer(container);
 	const selectedValue = use(TabsValueContext);
 	const { tab: tabClassName, content: contentClassName } = tabs({
 		variant,
@@ -353,7 +352,7 @@ function SortableTabsList({ value, onReorder, onDragStart, messages, container,
 			})
 		}), /* @__PURE__ */ jsx(DragLift, {
 			className: "rounded-control",
-			container: liftContainer,
+			container,
 			children: activeId === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "tabs-tab",
 				"data-active": selectedValue === activeId ? "" : void 0,

package/dist/components/task-dnd/task-dnd.d.mts

@@ -62,7 +62,11 @@ export declare function TaskDropPlaceholder({ id, placement, className, render,
 export type TaskDragOverlayProps = {
   children?: ReactNode;
   className?: string;
-  /** Render the copy in another element, such as `document.body` when an ancestor has a transform. */
+  /**
+   * Where the copy renders: `document.body` by default, so it rises above
+   * everything outside a ScrollArea the board is in. `null` renders it in
+   * place (`DragLift`'s `container`).
+   */
   container?: Element | DocumentFragment | null;
 };
 /**