@botiverse/raft-ui 0.81.0 → 0.83.0

package/dist/components/selection-toolbar/selection-toolbar.mjs

@@ -0,0 +1,217 @@
+import { Button } from "../button/button.mjs";
+import { DropdownMenuItem } from "../dropdown-menu/dropdown-menu.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { FitToolbar, FitToolbarGroup, FitToolbarMoreItems, useFitItem, useFitMore } from "../fit-toolbar/fit-toolbar.mjs";
+import { selectionToolbar } from "./selection-toolbar.recipe.mjs";
+import { ChevronDown, MoreHorizontal, X } from "lucide-react";
+import { cloneElement, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/selection-toolbar/selection-toolbar.tsx
+/**
+* The order things give way in as the toolbar runs out of room: the hint,
+* then the secondary actions into More (the last first), then the labels (the
+* last first, so the first action's goes last), then the other actions into
+* More, the last first. The count and × never do.
+*/
+const HINT_STEP = 10;
+const SECONDARY_STEP = 20;
+const LABEL_STEP = 30;
+const MORE_STEP = 40;
+/**
+* Where the toolbar floats: centered, 12px above the bottom of the list or
+* conversation it sits in (plus the safe area), 20px from its sides. Its
+* parent must be positioned.
+*/
+function SelectionToolbarDock({ className, render, ...props }) {
+	const { dock } = selectionToolbar();
+	const defaultProps = { className: dock({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-dock" }
+	});
+}
+/**
+* The floating toolbar for selected items (messages, tasks): the count, an
+* optional hint, the actions on the selection, More while some are out of
+* the row, then ×. One row at any width: what doesn't fit gives way, measured
+* in the width it floats in, and never wraps. A `role="toolbar"`, one Tab
+* stop with the arrow keys inside: give it an `aria-label`.
+*/
+function SelectionToolbar({ className, ...props }) {
+	const { root } = selectionToolbar();
+	return /* @__PURE__ */ jsx(FitToolbar, {
+		"data-slot": "selection-toolbar",
+		className: root({ className }),
+		...props
+	});
+}
+/**
+* What the actions act on ("3 selected"), first. Announced when it changes.
+* Put the number in `SelectionToolbarCountValue`.
+*/
+function SelectionToolbarCount({ className, render, ...props }) {
+	const { count } = selectionToolbar();
+	const defaultProps = {
+		"aria-live": "polite",
+		"aria-atomic": true,
+		className: count({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-count" }
+	});
+}
+/** The number in the count, in Space Mono. */
+function SelectionToolbarCountValue({ className, render, ...props }) {
+	const { countValue } = selectionToolbar();
+	const defaultProps = { className: countValue({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-count-value" }
+	});
+}
+/**
+* A short line after the count, such as "1 will be skipped". The first to
+* give way: it is then read by screen readers only.
+*/
+function SelectionToolbarHint({ className, render, ...props }) {
+	const { hint } = selectionToolbar();
+	const item = useFitItem({ label: HINT_STEP });
+	const defaultProps = {
+		className: hint({ className }),
+		...item.props
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-hint" }
+	});
+}
+/**
+* Any other control of the toolbar, such as a thread's select-all checkbox
+* before the count, so the arrow keys reach it. It takes the toolbar's focus
+* handling only: the control keeps its role and its own keys.
+*/
+function SelectionToolbarItem({ children }) {
+	const renderItem = useCallback((itemProps) => {
+		const { role: _role, type: _type, onClick: _onClick, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp, onMouseDown: _onMouseDown, onPointerDown: _onPointerDown, "aria-disabled": _ariaDisabled, ...composite } = itemProps;
+		return cloneElement(children, mergeProps(children.props, {
+			...composite,
+			"data-selection-toolbar-item": ""
+		}));
+	}, [children]);
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		nativeButton: false,
+		render: renderItem
+	});
+}
+/** The actions on the selection, in one row. */
+function SelectionToolbarActions({ className, ...props }) {
+	const { actions } = selectionToolbar();
+	return /* @__PURE__ */ jsx(FitToolbarGroup, {
+		"data-slot": "selection-toolbar-actions",
+		className: actions({ className }),
+		...props
+	});
+}
+let warnedMenuWithoutMoreItem = false;
+function warnMenuWithoutMoreItem() {
+	if (warnedMenuWithoutMoreItem) return;
+	warnedMenuWithoutMoreItem = true;
+	console.warn("raft-ui: a SelectionToolbarAction with `menu` has no `moreItem`; it would vanish when it moves into More. Give it its menu as a DropdownMenuSubmenu.");
+}
+/**
+* One action on the selection: a 14px icon and a label, an `md` ghost button
+* with a mouse on a desktop, a 44px bar button showing its icon alone on a
+* phone and a touch screen.
+*/
+function SelectionToolbarAction({ icon, children, secondary = false, menu = false, moreItem, className, onClick, disabled, ...props }) {
+	const { action, actionLabel, actionChevron } = selectionToolbar({ menu });
+	if (process.env.NODE_ENV !== "production" && menu && moreItem === void 0) warnMenuWithoutMoreItem();
+	const item = useFitItem({
+		label: LABEL_STEP,
+		more: secondary ? SECONDARY_STEP : MORE_STEP,
+		moreItem: moreItem !== void 0 ? moreItem : menu ? null : /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled,
+			onClick,
+			children: [icon, children]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !item.taken("label"),
+		children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+			"data-slot": "button",
+			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: /* @__PURE__ */ jsx(Button, {
+				"data-selection-toolbar-action": "",
+				"data-secondary": secondary ? "" : void 0,
+				variant: "ghost",
+				size: "md",
+				className: action({ className }),
+				onClick,
+				disabled,
+				...item.props,
+				...props
+			}) }),
+			children: [
+				icon,
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "selection-toolbar-action-label",
+					className: actionLabel(),
+					children
+				}),
+				menu ? /* @__PURE__ */ jsx(ChevronDown, {
+					"aria-hidden": true,
+					className: actionChevron()
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
+	});
+}
+/**
+* More, after the actions, shown only while some are in it. Render it as a
+* `DropdownMenuTrigger` whose menu opens upward (`side="top"`), with
+* `SelectionToolbarMoreItems` in the menu.
+*/
+function SelectionToolbarMore({ className, children, ...props }) {
+	const { more } = selectionToolbar();
+	const fit = useFitMore();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		render: /* @__PURE__ */ jsx(Button, {
+			"data-selection-toolbar-more": "",
+			variant: "ghost",
+			size: "md",
+			className: more({ className }),
+			...fit.props,
+			...props
+		}),
+		children: children ?? /* @__PURE__ */ jsx(MoreHorizontal, {})
+	});
+}
+/** The actions in More, in their order, each as its `moreItem`: put it in More's menu. */
+const SelectionToolbarMoreItems = FitToolbarMoreItems;
+/** ×, last: ends the selection, as Escape does. */
+function SelectionToolbarClose({ className, children, ...props }) {
+	const { close } = selectionToolbar();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		render: /* @__PURE__ */ jsx(Button, {
+			"data-selection-toolbar-close": "",
+			variant: "ghost",
+			size: "icon-md",
+			className: close({ className }),
+			...props
+		}),
+		children: children ?? /* @__PURE__ */ jsx(X, {})
+	});
+}
+//#endregion
+export { SelectionToolbar, SelectionToolbarAction, SelectionToolbarActions, SelectionToolbarClose, SelectionToolbarCount, SelectionToolbarCountValue, SelectionToolbarDock, SelectionToolbarHint, SelectionToolbarItem, SelectionToolbarMore, SelectionToolbarMoreItems };

package/dist/components/selection-toolbar/selection-toolbar.recipe.mjs

@@ -0,0 +1,42 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/selection-toolbar/selection-toolbar.recipe.ts
+const selectionToolbar = tv({
+	slots: {
+		dock: [
+			"pointer-events-none absolute inset-x-0 bottom-0 z-10 flex justify-center",
+			"px-5 pb-[calc(--spacing(3)+env(safe-area-inset-bottom))]",
+			"*:pointer-events-auto"
+		],
+		root: [
+			"w-fit gap-0 md:pointer-fine:gap-1",
+			"h-(--header-height) px-(--header-air) py-0",
+			"rounded-container bg-layer-popover ring-1 ring-line-seam shadow-float",
+			"**:data-[slot=button]:after:inset-x-[-1.5px] md:pointer-fine:**:data-[slot=button]:after:inset-x-[-3px]",
+			"*:data-[slot=button]:first:after:-left-[(var(--header-air)+1.5px)] *:data-[slot=button]:last:after:-right-[(var(--header-air)+1.5px)]"
+		],
+		count: ["shrink-0 pr-0 pl-2 md:pointer-fine:px-2", "whitespace-nowrap text-callout font-bold text-foreground tabular-nums"],
+		countValue: ["font-mono"],
+		hint: ["shrink-0 pr-1 whitespace-nowrap text-caption text-foreground-hint", "data-fit-label:sr-only"],
+		actions: ["gap-0 md:pointer-fine:gap-1"],
+		action: [
+			"[&_svg:not([class*='size-'])]:size-3.5",
+			"size-(--bar-button-size) justify-center px-0 after:inset-y-[-1.5px]",
+			"rounded-(--bar-button-radius) md:pointer-fine:rounded-control",
+			"md:pointer-fine:w-auto md:pointer-fine:pr-3 md:pointer-fine:pl-2.5",
+			"md:pointer-fine:data-fit-label:w-(--control-height) md:pointer-fine:data-fit-label:px-0",
+			"data-fit-more:hidden"
+		],
+		actionLabel: ["sr-only md:pointer-fine:not-sr-only md:pointer-fine:in-data-fit-label:sr-only"],
+		actionChevron: ["-ml-1 hidden size-3 md:pointer-fine:block md:pointer-fine:in-data-fit-label:hidden"],
+		more: [
+			"hidden data-fit-shown:inline-flex [&_svg:not([class*='size-'])]:size-3.5",
+			"size-(--bar-button-size) px-0 after:inset-y-[-1.5px]",
+			"rounded-(--bar-button-radius) md:pointer-fine:rounded-control",
+			"md:pointer-fine:w-(--control-height)"
+		],
+		close: ["size-(--bar-button-size) after:inset-y-[-1.5px]", "rounded-(--bar-button-radius) md:pointer-fine:rounded-control"]
+	},
+	variants: { menu: { true: { action: "md:pointer-fine:pr-2.5" } } }
+});
+//#endregion
+export { selectionToolbar };

package/dist/components/steps/otter-animation-visibility.mjs

@@ -0,0 +1,45 @@
+//#region src/components/steps/otter-animation-visibility.ts
+/** One observer/listener per document, regardless of the number of illustrations. */
+const documents = /* @__PURE__ */ new WeakMap();
+function observeOtterAnimation(node) {
+	const doc = node.ownerDocument;
+	let manager = documents.get(doc);
+	if (!manager) {
+		const visible = /* @__PURE__ */ new Map();
+		const update = (element, intersects) => {
+			element.dataset.animate = String(intersects && !doc.hidden);
+		};
+		const onVisibility = () => {
+			for (const [element, intersects] of visible) update(element, intersects);
+		};
+		const Observer = doc.defaultView?.IntersectionObserver;
+		const observer = Observer ? new Observer((entries) => {
+			for (const entry of entries) {
+				const element = entry.target;
+				if (!visible.has(element)) continue;
+				visible.set(element, entry.isIntersecting);
+				update(element, entry.isIntersecting);
+			}
+		}) : null;
+		doc.addEventListener("visibilitychange", onVisibility);
+		manager = { observe(element) {
+			visible.set(element, !observer);
+			update(element, !observer);
+			observer?.observe(element);
+			return () => {
+				observer?.unobserve(element);
+				visible.delete(element);
+				delete element.dataset.animate;
+				if (visible.size === 0) {
+					observer?.disconnect();
+					doc.removeEventListener("visibilitychange", onVisibility);
+					documents.delete(doc);
+				}
+			};
+		} };
+		documents.set(doc, manager);
+	}
+	return manager.observe(node);
+}
+//#endregion
+export { observeOtterAnimation };

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