@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/action-node/action-node.js

@@ -0,0 +1,374 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar.js";
+import { springEasing } from "./action-node-spring.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/action-node/action-node.tsx
+const PREFIX = "action-node";
+/** Where closed buttons wait, tucked under the card, and their scale there. */
+const REST = {
+	x: -20,
+	y: 20
+};
+const REST_SCALE = .82;
+const OPEN_MS = 380;
+const CLOSE_MS = 200;
+const STYLES = `@supports (transition-timing-function: linear(0, 1)){[data-slot="${PREFIX}-item"][data-state="open"]{transition-timing-function:var(--${PREFIX}-spring)}}`;
+const actionNodeVariants = cva("relative flex justify-center py-13", {
+	variants: { 
+	/** `default` is a card-coloured node; `inverted` swaps surface and ink. */
+tone: {
+		default: "[--action-node-ink:var(--color-foreground)] [--action-node-surface:var(--color-card)]",
+		inverted: "[--action-node-ink:var(--color-background)] [--action-node-surface:var(--color-foreground)]"
+	} },
+	defaultVariants: { tone: "default" }
+});
+/** Ink mixed toward the surface, for the secondary text roles. */
+const ink = (percent) => `color-mix(in oklab, var(--action-node-ink) ${String(percent)}%, var(--action-node-surface))`;
+/**
+* Where each open button sits, relative to the card's top-end corner (x toward
+* the inline end, y down). The buttons lie on an arc centred just inside the
+* card, spaced a button plus a gap apart and symmetric about the corner's
+* diagonal — at reach 30 that is bencho's (−51.7, −31.1) … (31, 51.7).
+*/
+function fanPositions(count, reach) {
+	const radius = reach + 35.6;
+	const centre = reach + 1.2;
+	const step = 2 * Math.asin(Math.min(1, 47 / 2 / radius));
+	return Array.from({ length: count }, (_, index) => {
+		const angle = Math.PI / 4 + ((count - 1) / 2 - index) * step;
+		return {
+			x: Math.round((-centre + radius * Math.cos(angle)) * 10) / 10,
+			y: Math.round((centre - radius * Math.sin(angle)) * 10) / 10
+		};
+	});
+}
+function initials(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	return (words.length > 1 ? [words[0], words[words.length - 1]] : words).map((word) => word?.[0]?.toUpperCase() ?? "").join("");
+}
+function readRtl(element) {
+	const attribute = element.closest("[dir]")?.getAttribute("dir");
+	if (attribute === "rtl" || attribute === "ltr") return attribute === "rtl";
+	return getComputedStyle(element).direction === "rtl";
+}
+/** A workflow node card whose action buttons fan out around its top-end corner. */
+function ActionNode({ className, style, heading, description, icon, people = [], extraCount = 0, peopleLabel = "People", actions, open: openProp, defaultOpen = false, onOpenChange, bounce = 20, stagger = 55, reach = 30, corner = 20, stroke = false, tone, triggerLabel = "More actions", toolbarLabel = "Node actions", ...props }) {
+	const fanId = useId();
+	const [openState, setOpenState] = useState(defaultOpen);
+	const open = openProp ?? openState;
+	const [activeIndex, setActiveIndex] = useState(0);
+	const zoneRef = useRef(null);
+	const fanRef = useRef(null);
+	const triggerRef = useRef(null);
+	const buttonRefs = useRef([]);
+	const pendingFocus = useRef(null);
+	const keyboardOpen = useRef(false);
+	const [rtl, setRtl] = useState(false);
+	useLayoutEffect(() => {
+		if (zoneRef.current) setRtl(readRtl(zoneRef.current));
+	}, [props.dir]);
+	function setOpen(next) {
+		if (next === open) return;
+		if (!next) {
+			keyboardOpen.current = false;
+			if (fanRef.current?.contains(document.activeElement)) triggerRef.current?.focus();
+		}
+		if (openProp === void 0) setOpenState(next);
+		onOpenChange?.(next);
+	}
+	function openFromKeyboard(focusIndex) {
+		keyboardOpen.current = true;
+		pendingFocus.current = focusIndex;
+		if (open) focusAction(focusIndex);
+		else setOpen(true);
+	}
+	function focusAction(index) {
+		pendingFocus.current = null;
+		setActiveIndex(index);
+		buttonRefs.current[index]?.focus();
+	}
+	useEffect(() => {
+		if (open && pendingFocus.current !== null) focusAction(pendingFocus.current);
+	}, [open]);
+	const latestSetOpen = useRef(setOpen);
+	useLayoutEffect(() => {
+		latestSetOpen.current = setOpen;
+	});
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			if (!zoneRef.current?.contains(event.target)) latestSetOpen.current(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => {
+			document.removeEventListener("pointerdown", onPointerDown);
+		};
+	}, [open]);
+	function handlePointerEnter(event) {
+		if (event.pointerType === "touch") return;
+		setOpen(true);
+	}
+	function handlePointerLeave(event) {
+		if (event.pointerType === "touch") return;
+		if (keyboardOpen.current && zoneRef.current?.contains(document.activeElement)) return;
+		setOpen(false);
+	}
+	function handleTriggerClick(event) {
+		if (open) setOpen(false);
+		else if (event.detail === 0) openFromKeyboard(0);
+		else setOpen(true);
+	}
+	function handleTriggerKeyDown(event) {
+		if (event.key !== "ArrowDown") return;
+		event.preventDefault();
+		openFromKeyboard(0);
+	}
+	function handleZoneKeyDown(event) {
+		if (event.key !== "Escape" || !open) return;
+		event.preventDefault();
+		event.stopPropagation();
+		setOpen(false);
+		triggerRef.current?.focus();
+	}
+	function handleFanKeyDown(event) {
+		const count = actions.length;
+		const forward = rtl ? "ArrowLeft" : "ArrowRight";
+		const backward = rtl ? "ArrowRight" : "ArrowLeft";
+		let next = null;
+		if (event.key === forward || event.key === "ArrowDown") next = (activeIndex + 1) % count;
+		else if (event.key === backward || event.key === "ArrowUp") next = (activeIndex - 1 + count) % count;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = count - 1;
+		if (next === null) return;
+		event.preventDefault();
+		keyboardOpen.current = true;
+		focusAction(next);
+	}
+	function handleZoneBlur(event) {
+		const to = event.relatedTarget;
+		if (open && to && !zoneRef.current?.contains(to)) setOpen(false);
+	}
+	const sign = rtl ? -1 : 1;
+	const positions = fanPositions(actions.length, reach);
+	const staggerMs = Math.max(0, stagger) * .9;
+	const bridgeStart = reach + 45;
+	const bridgeEnd = reach + 26;
+	const bridgeSize = bridgeStart + bridgeEnd;
+	const cutX = bridgeStart / bridgeSize * 100;
+	const cutY = bridgeEnd / bridgeSize * 100;
+	const bridgeClip = rtl ? `polygon(100% 0, 0 0, 0 100%, ${String(100 - cutX)}% 100%, ${String(100 - cutX)}% ${String(cutY)}%, 100% ${String(cutY)}%)` : `polygon(0 0, 100% 0, 100% 100%, ${String(cutX)}% 100%, ${String(cutX)}% ${String(cutY)}%, 0 ${String(cutY)}%)`;
+	const surface = "bg-[var(--action-node-surface)] text-[var(--action-node-ink)]";
+	const hairline = stroke && "ring-1 ring-border ring-inset";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": PREFIX,
+		"data-state": open ? "open" : "closed",
+		className: cn(actionNodeVariants({ tone }), className),
+		style: {
+			"--action-node-spring": springEasing(Math.min(Math.max(bounce, 0), 100) / 100),
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("style", {
+			href: `dowel-${PREFIX}`,
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: zoneRef,
+			"data-slot": `${PREFIX}-zone`,
+			"data-open": open ? "" : void 0,
+			className: "group/action-node relative w-75 max-w-full",
+			onPointerEnter: handlePointerEnter,
+			onPointerLeave: handlePointerLeave,
+			onKeyDown: handleZoneKeyDown,
+			onBlur: handleZoneBlur,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": `${PREFIX}-card`,
+					"data-open": open ? "" : void 0,
+					className: cn("relative z-1 p-4.5", surface, hairline, "transition-[translate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)] data-[open]:-translate-y-px"),
+					style: { borderRadius: corner },
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2.5",
+							children: [
+								icon != null ? /* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									"data-slot": `${PREFIX}-icon`,
+									className: "flex size-7.5 shrink-0 items-center justify-center [&_svg]:size-4",
+									style: {
+										borderRadius: Math.round(corner * .4),
+										background: `color-mix(in oklab, var(--action-node-ink) 6%, transparent)`
+									},
+									children: icon
+								}) : null,
+								/* @__PURE__ */ jsx("div", {
+									"data-slot": `${PREFIX}-heading`,
+									className: "min-w-0 flex-1 text-[15px] font-medium",
+									children: heading
+								}),
+								/* @__PURE__ */ jsx("button", {
+									ref: triggerRef,
+									type: "button",
+									"aria-label": triggerLabel,
+									"aria-expanded": open,
+									"aria-controls": fanId,
+									"data-slot": `${PREFIX}-trigger`,
+									className: cn("-me-1.5 flex size-7 shrink-0 items-center justify-center rounded-full [&_svg]:size-4", "opacity-0 transition-opacity duration-[var(--duration-fast)] focus-visible:opacity-100", "group-hover/action-node:opacity-100 group-data-[open]/action-node:opacity-100 [@media(hover:none)]:opacity-100", focusRing),
+									style: { color: ink(60) },
+									onClick: handleTriggerClick,
+									onKeyDown: handleTriggerKeyDown,
+									children: /* @__PURE__ */ jsxs("svg", {
+										viewBox: "0 0 24 24",
+										fill: "currentColor",
+										"aria-hidden": "true",
+										children: [
+											/* @__PURE__ */ jsx("circle", {
+												cx: "5",
+												cy: "12",
+												r: "1.75"
+											}),
+											/* @__PURE__ */ jsx("circle", {
+												cx: "12",
+												cy: "12",
+												r: "1.75"
+											}),
+											/* @__PURE__ */ jsx("circle", {
+												cx: "19",
+												cy: "12",
+												r: "1.75"
+											})
+										]
+									})
+								})
+							]
+						}),
+						description != null ? /* @__PURE__ */ jsx("div", {
+							"data-slot": `${PREFIX}-description`,
+							className: "mt-2.5 text-[13.5px] leading-normal",
+							style: { color: ink(68) },
+							children: description
+						}) : null,
+						people.length > 0 || extraCount > 0 ? /* @__PURE__ */ jsxs("div", {
+							"data-slot": `${PREFIX}-people`,
+							className: "mt-3.5 flex items-center gap-1.5",
+							children: [people.length > 0 ? /* @__PURE__ */ jsx("ul", {
+								"aria-label": peopleLabel,
+								className: "flex items-center",
+								children: people.map((person, index) => /* @__PURE__ */ jsx("li", {
+									className: "-ms-1.5 first:ms-0",
+									children: /* @__PURE__ */ jsxs(Avatar, {
+										size: "xs",
+										className: "ring-2 ring-[var(--action-node-surface)]",
+										children: [person.image ? /* @__PURE__ */ jsx(AvatarImage, {
+											src: person.image,
+											alt: person.name,
+											draggable: false
+										}) : null, /* @__PURE__ */ jsxs(AvatarFallback, {
+											style: {
+												background: `color-mix(in oklab, var(--action-node-ink) 10%, var(--action-node-surface))`,
+												color: ink(70)
+											},
+											children: [/* @__PURE__ */ jsx("span", {
+												"aria-hidden": "true",
+												children: initials(person.name)
+											}), /* @__PURE__ */ jsx("span", {
+												className: "sr-only",
+												children: person.name
+											})]
+										})]
+									})
+								}, `${person.name}-${String(index)}`))
+							}) : null, extraCount > 0 ? /* @__PURE__ */ jsxs("span", {
+								className: "text-[11.5px] font-medium",
+								style: { color: ink(58) },
+								children: [/* @__PURE__ */ jsxs("span", {
+									"aria-hidden": "true",
+									children: ["+", extraCount]
+								}), /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: `and ${String(extraCount)} more`
+								})]
+							}) : null]
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute end-0 top-0 z-0 size-0",
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": `${PREFIX}-bridge`,
+						className: cn("absolute", open ? "pointer-events-auto" : "pointer-events-none"),
+						style: {
+							top: -bridgeEnd,
+							[rtl ? "right" : "left"]: -bridgeStart,
+							width: bridgeSize,
+							height: bridgeSize,
+							clipPath: bridgeClip
+						}
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: fanRef,
+					id: fanId,
+					role: "toolbar",
+					"aria-label": toolbarLabel,
+					"aria-hidden": open ? void 0 : true,
+					inert: !open,
+					"data-slot": `${PREFIX}-fan`,
+					className: "absolute end-0 top-0 z-0 size-0",
+					onKeyDown: handleFanKeyDown,
+					children: actions.map((action, index) => {
+						const at = open ? positions[index] : REST;
+						const delay = open ? index * staggerMs : 0;
+						return /* @__PURE__ */ jsx("span", {
+							"data-slot": `${PREFIX}-item`,
+							"data-state": open ? "open" : "closed",
+							className: "absolute transition-[translate,scale] ease-[var(--ease-out-quint)] data-[state=open]:ease-[var(--ease-overshoot)]",
+							style: {
+								left: -18,
+								top: -18,
+								translate: `${String(at.x * sign)}px ${String(at.y)}px`,
+								scale: open ? "1" : String(REST_SCALE),
+								transitionDuration: `calc(${String(open ? OPEN_MS : CLOSE_MS)}ms * var(--motion-scale))`,
+								transitionDelay: `calc(${String(delay)}ms * var(--motion-scale))`
+							},
+							children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx("button", {
+									ref: (node) => {
+										buttonRefs.current[index] = node;
+									},
+									type: "button",
+									"aria-label": action.label,
+									tabIndex: open && index === activeIndex ? 0 : -1,
+									"data-slot": `${PREFIX}-action`,
+									className: cn("flex size-9 items-center justify-center rounded-full shadow-sm [&_svg]:size-4", "transition-[scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:scale-112", surface, hairline, focusRing),
+									onFocus: () => {
+										setActiveIndex(index);
+									},
+									onClick: () => {
+										action.onSelect?.();
+									},
+									children: /* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										className: "contents",
+										children: action.icon
+									})
+								})
+							}), /* @__PURE__ */ jsx(TooltipContent, { children: action.label })] })
+						}, `${action.label}-${String(index)}`);
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { ActionNode, actionNodeVariants, fanPositions };
+
+//# sourceMappingURL=action-node.js.map

package/dist/components/action-node/action-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-node.js","names":[],"sources":["../../../src/components/action-node/action-node.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Action node (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/avatar\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/tooltip\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { springEasing } from \"./action-node-spring\";\n\n/*\n * A workflow node card whose actions fan out around its top-end corner.\n *\n * The source opens only on hover. Here hover still opens it, and so does a\n * \"More actions\" trigger in the card (aria-expanded, aria-controls): Enter,\n * Space or ArrowDown open the fan and focus its first action. The fan is a\n * `role=\"toolbar\"` with roving focus (arrows, Home, End), Escape closes it and\n * returns focus to the trigger, and while closed it is inert, so the tucked\n * buttons are neither focusable nor announced.\n *\n * Each button springs along an arc with a CSS transition whose easing is a\n * `linear()` spring (./action-node-spring), staggered by an inline delay that\n * runs through --motion-scale. Under reduced motion the fan simply appears.\n */\n\nconst PREFIX = \"action-node\";\n/** Action button diameter and the gap between neighbours on the arc, in px. */\nconst BUTTON = 36;\nconst ARC_GAP = 11;\n/** Where closed buttons wait, tucked under the card, and their scale there. */\nconst REST = { x: -20, y: 20 };\nconst REST_SCALE = 0.82;\nconst OPEN_MS = 380;\nconst CLOSE_MS = 200;\n\nconst STYLES = `@supports (transition-timing-function: linear(0, 1)){[data-slot=\"${PREFIX}-item\"][data-state=\"open\"]{transition-timing-function:var(--${PREFIX}-spring)}}`;\n\nconst actionNodeVariants = cva(\"relative flex justify-center py-13\", {\n  variants: {\n    /** `default` is a card-coloured node; `inverted` swaps surface and ink. */\n    tone: {\n      default:\n        \"[--action-node-ink:var(--color-foreground)] [--action-node-surface:var(--color-card)]\",\n      inverted:\n        \"[--action-node-ink:var(--color-background)] [--action-node-surface:var(--color-foreground)]\",\n    },\n  },\n  defaultVariants: { tone: \"default\" },\n});\n\n/** Ink mixed toward the surface, for the secondary text roles. */\nconst ink = (percent: number) =>\n  `color-mix(in oklab, var(--action-node-ink) ${String(percent)}%, var(--action-node-surface))`;\n\n/**\n * Where each open button sits, relative to the card's top-end corner (x toward\n * the inline end, y down). The buttons lie on an arc centred just inside the\n * card, spaced a button plus a gap apart and symmetric about the corner's\n * diagonal — at reach 30 that is bencho's (−51.7, −31.1) … (31, 51.7).\n */\nexport function fanPositions(count: number, reach: number): { x: number; y: number }[] {\n  // Fitted to the measured positions: about a button wider than the reach.\n  const radius = reach + 35.6;\n  const centre = reach + 1.2;\n  const step = 2 * Math.asin(Math.min(1, (BUTTON + ARC_GAP) / 2 / radius));\n  return Array.from({ length: count }, (_, index) => {\n    const angle = Math.PI / 4 + ((count - 1) / 2 - index) * step;\n    return {\n      x: Math.round((-centre + radius * Math.cos(angle)) * 10) / 10,\n      y: Math.round((centre - radius * Math.sin(angle)) * 10) / 10,\n    };\n  });\n}\n\nfunction initials(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const letters = words.length > 1 ? [words[0], words[words.length - 1]] : words;\n  return letters.map((word) => word?.[0]?.toUpperCase() ?? \"\").join(\"\");\n}\n\nfunction readRtl(element: HTMLElement): boolean {\n  const attribute = element.closest(\"[dir]\")?.getAttribute(\"dir\");\n  if (attribute === \"rtl\" || attribute === \"ltr\") return attribute === \"rtl\";\n  return getComputedStyle(element).direction === \"rtl\";\n}\n\nexport interface ActionNodeAction {\n  /** The button's accessible name and tooltip. */\n  label: string;\n  /** Decorative icon. */\n  icon: ReactNode;\n  onSelect?: () => void;\n}\n\nexport interface ActionNodePerson {\n  /** Alt text and the fallback's accessible name. */\n  name: string;\n  /** Avatar image URL. Without it the initials show. */\n  image?: string;\n}\n\nexport interface ActionNodeProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof actionNodeVariants> {\n  /** The node's name, e.g. \"Node 07\". */\n  heading: ReactNode;\n  description?: ReactNode;\n  /** Decorative icon in the chip beside the heading. */\n  icon?: ReactNode;\n  /** People shown as overlapping avatars. */\n  people?: ActionNodePerson[];\n  /** Shown after the avatars as \"+N\". */\n  extraCount?: number;\n  /** Names the avatar list. */\n  peopleLabel?: string;\n  /** The fan's buttons; two to four read best. */\n  actions: ActionNodeAction[];\n  /** Whether the fan is open (controlled). */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Spring overshoot, 0–100. */\n  bounce?: number;\n  /** Delay between buttons, 0–100 (about 0.9ms per step). */\n  stagger?: number;\n  /** Arc radius in px, 20–40. */\n  reach?: number;\n  /** Card radius in px; the chip's radius derives from it. */\n  corner?: number;\n  /** Adds a 1px hairline to the card and the buttons. */\n  stroke?: boolean;\n  /** The trigger's accessible name. */\n  triggerLabel?: string;\n  /** The toolbar's accessible name. */\n  toolbarLabel?: string;\n}\n\n/** A workflow node card whose action buttons fan out around its top-end corner. */\nexport function ActionNode({\n  className,\n  style,\n  heading,\n  description,\n  icon,\n  people = [],\n  extraCount = 0,\n  peopleLabel = \"People\",\n  actions,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  bounce = 20,\n  stagger = 55,\n  reach = 30,\n  corner = 20,\n  stroke = false,\n  tone,\n  triggerLabel = \"More actions\",\n  toolbarLabel = \"Node actions\",\n  ...props\n}: ActionNodeProps) {\n  const fanId = useId();\n  const [openState, setOpenState] = useState(defaultOpen);\n  const open = openProp ?? openState;\n  const [activeIndex, setActiveIndex] = useState(0);\n  const zoneRef = useRef<HTMLDivElement>(null);\n  const fanRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const pendingFocus = useRef<number | null>(null);\n  // Opened from the keyboard: the pointer leaving must not close it under focus.\n  const keyboardOpen = useRef(false);\n  const [rtl, setRtl] = useState(false);\n\n  useLayoutEffect(() => {\n    if (zoneRef.current) setRtl(readRtl(zoneRef.current));\n  }, [props.dir]);\n\n  function setOpen(next: boolean) {\n    if (next === open) return;\n    if (!next) {\n      keyboardOpen.current = false;\n      // Never strand focus on a button that is about to become inert.\n      if (fanRef.current?.contains(document.activeElement)) triggerRef.current?.focus();\n    }\n    if (openProp === undefined) setOpenState(next);\n    onOpenChange?.(next);\n  }\n\n  function openFromKeyboard(focusIndex: number) {\n    keyboardOpen.current = true;\n    pendingFocus.current = focusIndex;\n    if (open) focusAction(focusIndex);\n    else setOpen(true);\n  }\n\n  function focusAction(index: number) {\n    pendingFocus.current = null;\n    setActiveIndex(index);\n    buttonRefs.current[index]?.focus();\n  }\n\n  useEffect(() => {\n    if (open && pendingFocus.current !== null) focusAction(pendingFocus.current);\n  }, [open]);\n\n  // A press anywhere else closes it, which is also how touch dismisses it.\n  const latestSetOpen = useRef(setOpen);\n  useLayoutEffect(() => {\n    latestSetOpen.current = setOpen;\n  });\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: globalThis.PointerEvent) => {\n      if (!zoneRef.current?.contains(event.target as Node)) latestSetOpen.current(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n    };\n  }, [open]);\n\n  function handlePointerEnter(event: PointerEvent<HTMLDivElement>) {\n    if (event.pointerType === \"touch\") return;\n    setOpen(true);\n  }\n\n  function handlePointerLeave(event: PointerEvent<HTMLDivElement>) {\n    if (event.pointerType === \"touch\") return;\n    if (keyboardOpen.current && zoneRef.current?.contains(document.activeElement)) return;\n    setOpen(false);\n  }\n\n  function handleTriggerClick(event: MouseEvent<HTMLButtonElement>) {\n    // detail 0 is a click from Enter or Space rather than a pointer.\n    if (open) setOpen(false);\n    else if (event.detail === 0) openFromKeyboard(0);\n    else setOpen(true);\n  }\n\n  function handleTriggerKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    if (event.key !== \"ArrowDown\") return;\n    event.preventDefault();\n    openFromKeyboard(0);\n  }\n\n  function handleZoneKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (event.key !== \"Escape\" || !open) return;\n    event.preventDefault();\n    event.stopPropagation();\n    setOpen(false);\n    triggerRef.current?.focus();\n  }\n\n  function handleFanKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const count = actions.length;\n    const forward = rtl ? \"ArrowLeft\" : \"ArrowRight\";\n    const backward = rtl ? \"ArrowRight\" : \"ArrowLeft\";\n    let next: number | null = null;\n    if (event.key === forward || event.key === \"ArrowDown\") next = (activeIndex + 1) % count;\n    else if (event.key === backward || event.key === \"ArrowUp\")\n      next = (activeIndex - 1 + count) % count;\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = count - 1;\n    if (next === null) return;\n    event.preventDefault();\n    keyboardOpen.current = true;\n    focusAction(next);\n  }\n\n  function handleZoneBlur(event: FocusEvent<HTMLDivElement>) {\n    const to = event.relatedTarget;\n    if (open && to && !zoneRef.current?.contains(to)) setOpen(false);\n  }\n\n  const sign = rtl ? -1 : 1;\n  const positions = fanPositions(actions.length, reach);\n  const staggerMs = Math.max(0, stagger) * 0.9;\n  const bridgeStart = reach + 45;\n  const bridgeEnd = reach + 26;\n  const bridgeSize = bridgeStart + bridgeEnd;\n  const cutX = (bridgeStart / bridgeSize) * 100;\n  const cutY = (bridgeEnd / bridgeSize) * 100;\n  // The L-shaped hover bridge: a square round the corner minus the card's part.\n  const bridgeClip = rtl\n    ? `polygon(100% 0, 0 0, 0 100%, ${String(100 - cutX)}% 100%, ${String(100 - cutX)}% ${String(cutY)}%, 100% ${String(cutY)}%)`\n    : `polygon(0 0, 100% 0, 100% 100%, ${String(cutX)}% 100%, ${String(cutX)}% ${String(cutY)}%, 0 ${String(cutY)}%)`;\n\n  const surface = \"bg-[var(--action-node-surface)] text-[var(--action-node-ink)]\";\n  const hairline = stroke && \"ring-1 ring-border ring-inset\";\n\n  return (\n    <div\n      data-slot={PREFIX}\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(actionNodeVariants({ tone }), className)}\n      style={\n        {\n          \"--action-node-spring\": springEasing(Math.min(Math.max(bounce, 0), 100) / 100),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <style href={`dowel-${PREFIX}`} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      {/* Hover, Escape and focus-leaving are observed here; the controls inside are real buttons. */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n      <div\n        ref={zoneRef}\n        data-slot={`${PREFIX}-zone`}\n        data-open={open ? \"\" : undefined}\n        className=\"group/action-node relative w-75 max-w-full\"\n        onPointerEnter={handlePointerEnter}\n        onPointerLeave={handlePointerLeave}\n        onKeyDown={handleZoneKeyDown}\n        onBlur={handleZoneBlur}\n      >\n        <div\n          data-slot={`${PREFIX}-card`}\n          data-open={open ? \"\" : undefined}\n          className={cn(\n            \"relative z-1 p-4.5\",\n            surface,\n            hairline,\n            \"transition-[translate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)] data-[open]:-translate-y-px\",\n          )}\n          style={{ borderRadius: corner }}\n        >\n          <div className=\"flex items-center gap-2.5\">\n            {icon != null ? (\n              <span\n                aria-hidden=\"true\"\n                data-slot={`${PREFIX}-icon`}\n                className=\"flex size-7.5 shrink-0 items-center justify-center [&_svg]:size-4\"\n                style={{\n                  borderRadius: Math.round(corner * 0.4),\n                  background: `color-mix(in oklab, var(--action-node-ink) 6%, transparent)`,\n                }}\n              >\n                {icon}\n              </span>\n            ) : null}\n            <div\n              data-slot={`${PREFIX}-heading`}\n              className=\"min-w-0 flex-1 text-[15px] font-medium\"\n            >\n              {heading}\n            </div>\n            <button\n              ref={triggerRef}\n              type=\"button\"\n              aria-label={triggerLabel}\n              aria-expanded={open}\n              aria-controls={fanId}\n              data-slot={`${PREFIX}-trigger`}\n              className={cn(\n                \"-me-1.5 flex size-7 shrink-0 items-center justify-center rounded-full [&_svg]:size-4\",\n                \"opacity-0 transition-opacity duration-[var(--duration-fast)] focus-visible:opacity-100\",\n                \"group-hover/action-node:opacity-100 group-data-[open]/action-node:opacity-100 [@media(hover:none)]:opacity-100\",\n                focusRing,\n              )}\n              style={{ color: ink(60) }}\n              onClick={handleTriggerClick}\n              onKeyDown={handleTriggerKeyDown}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                <circle cx=\"5\" cy=\"12\" r=\"1.75\" />\n                <circle cx=\"12\" cy=\"12\" r=\"1.75\" />\n                <circle cx=\"19\" cy=\"12\" r=\"1.75\" />\n              </svg>\n            </button>\n          </div>\n          {description != null ? (\n            <div\n              data-slot={`${PREFIX}-description`}\n              className=\"mt-2.5 text-[13.5px] leading-normal\"\n              style={{ color: ink(68) }}\n            >\n              {description}\n            </div>\n          ) : null}\n          {people.length > 0 || extraCount > 0 ? (\n            <div data-slot={`${PREFIX}-people`} className=\"mt-3.5 flex items-center gap-1.5\">\n              {people.length > 0 ? (\n                <ul aria-label={peopleLabel} className=\"flex items-center\">\n                  {people.map((person, index) => (\n                    <li key={`${person.name}-${String(index)}`} className=\"-ms-1.5 first:ms-0\">\n                      <Avatar size=\"xs\" className=\"ring-2 ring-[var(--action-node-surface)]\">\n                        {person.image ? (\n                          <AvatarImage src={person.image} alt={person.name} draggable={false} />\n                        ) : null}\n                        <AvatarFallback\n                          style={{\n                            background: `color-mix(in oklab, var(--action-node-ink) 10%, var(--action-node-surface))`,\n                            color: ink(70),\n                          }}\n                        >\n                          <span aria-hidden=\"true\">{initials(person.name)}</span>\n                          <span className=\"sr-only\">{person.name}</span>\n                        </AvatarFallback>\n                      </Avatar>\n                    </li>\n                  ))}\n                </ul>\n              ) : null}\n              {extraCount > 0 ? (\n                <span className=\"text-[11.5px] font-medium\" style={{ color: ink(58) }}>\n                  <span aria-hidden=\"true\">+{extraCount}</span>\n                  <span className=\"sr-only\">{`and ${String(extraCount)} more`}</span>\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n        <div aria-hidden=\"true\" className=\"pointer-events-none absolute end-0 top-0 z-0 size-0\">\n          <div\n            data-slot={`${PREFIX}-bridge`}\n            className={cn(\"absolute\", open ? \"pointer-events-auto\" : \"pointer-events-none\")}\n            style={{\n              top: -bridgeEnd,\n              [rtl ? \"right\" : \"left\"]: -bridgeStart,\n              width: bridgeSize,\n              height: bridgeSize,\n              clipPath: bridgeClip,\n            }}\n          />\n        </div>\n        <div\n          ref={fanRef}\n          id={fanId}\n          role=\"toolbar\"\n          aria-label={toolbarLabel}\n          aria-hidden={open ? undefined : true}\n          inert={!open}\n          data-slot={`${PREFIX}-fan`}\n          className=\"absolute end-0 top-0 z-0 size-0\"\n          onKeyDown={handleFanKeyDown}\n        >\n          {actions.map((action, index) => {\n            const at = open ? (positions[index] as { x: number; y: number }) : REST;\n            const delay = open ? index * staggerMs : 0;\n            return (\n              <span\n                key={`${action.label}-${String(index)}`}\n                data-slot={`${PREFIX}-item`}\n                data-state={open ? \"open\" : \"closed\"}\n                className=\"absolute transition-[translate,scale] ease-[var(--ease-out-quint)] data-[state=open]:ease-[var(--ease-overshoot)]\"\n                style={{\n                  left: -BUTTON / 2,\n                  top: -BUTTON / 2,\n                  translate: `${String(at.x * sign)}px ${String(at.y)}px`,\n                  scale: open ? \"1\" : String(REST_SCALE),\n                  transitionDuration: `calc(${String(open ? OPEN_MS : CLOSE_MS)}ms * var(--motion-scale))`,\n                  transitionDelay: `calc(${String(delay)}ms * var(--motion-scale))`,\n                }}\n              >\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <button\n                      ref={(node) => {\n                        buttonRefs.current[index] = node;\n                      }}\n                      type=\"button\"\n                      aria-label={action.label}\n                      tabIndex={open && index === activeIndex ? 0 : -1}\n                      data-slot={`${PREFIX}-action`}\n                      className={cn(\n                        \"flex size-9 items-center justify-center rounded-full shadow-sm [&_svg]:size-4\",\n                        \"transition-[scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:scale-112\",\n                        surface,\n                        hairline,\n                        focusRing,\n                      )}\n                      onFocus={() => {\n                        setActiveIndex(index);\n                      }}\n                      onClick={() => {\n                        action.onSelect?.();\n                      }}\n                    >\n                      <span aria-hidden=\"true\" className=\"contents\">\n                        {action.icon}\n                      </span>\n                    </button>\n                  </TooltipTrigger>\n                  <TooltipContent>{action.label}</TooltipContent>\n                </Tooltip>\n              </span>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport { actionNodeVariants };\n"],"mappings":"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"}

package/dist/components/action-node/index.d.ts

@@ -0,0 +1,2 @@
+import { ActionNode, ActionNodeAction, ActionNodePerson, ActionNodeProps, actionNodeVariants, fanPositions } from "./action-node.js";
+export { ActionNode, type ActionNodeAction, type ActionNodePerson, type ActionNodeProps, actionNodeVariants, fanPositions };

package/dist/components/action-node/index.js

@@ -0,0 +1,2 @@
+import { ActionNode, actionNodeVariants, fanPositions } from "./action-node.js";
+export { ActionNode, actionNodeVariants, fanPositions };

package/dist/components/action-node/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/action-node/meta.ts
+const meta = defineMeta({
+	name: "action-node",
+	title: "Action Node",
+	description: "A workflow node card whose round action buttons spring out in an arc around its top-end corner on hover or from a More actions trigger.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["avatar", "tooltip"],
+	files: ["action-node.tsx", "action-node-spring.ts"],
+	a11y: "Hover opens the fan, and so does the \"More actions\" trigger (aria-expanded, aria-controls), which is revealed on hover and keyboard focus and always shown on devices without hover. Enter, Space or ArrowDown on it open the fan and focus the first action. The fan is role=\"toolbar\" (named by toolbarLabel) with a roving tab stop: the arrow keys move along the arc (Left/Right mirrored in right-to-left layouts) with wrap-around, Home/End jump to the ends, and Escape closes it and returns focus to the trigger. Closed, the fan is inert and aria-hidden, so tucked buttons are neither focusable nor announced. Every action is an icon button named by aria-label and repeated in a tooltip. The hover bridge is aria-hidden; the springs are CSS transitions that settle at once under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/action-node/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/action-node/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"action-node\",\n  title: \"Action Node\",\n  description:\n    \"A workflow node card whose round action buttons spring out in an arc around its top-end corner on hover or from a More actions trigger.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"avatar\", \"tooltip\"],\n  files: [\"action-node.tsx\", \"action-node-spring.ts\"],\n  a11y:\n    'Hover opens the fan, and so does the \"More actions\" trigger (aria-expanded, aria-controls), which is revealed on ' +\n    \"hover and keyboard focus and always shown on devices without hover. Enter, Space or ArrowDown on it open the fan \" +\n    'and focus the first action. The fan is role=\"toolbar\" (named by toolbarLabel) with a roving tab stop: the arrow ' +\n    \"keys move along the arc (Left/Right mirrored in right-to-left layouts) with wrap-around, Home/End jump to the ends, \" +\n    \"and Escape closes it and returns focus to the trigger. Closed, the fan is inert and aria-hidden, so tucked buttons \" +\n    \"are neither focusable nor announced. Every action is an icon button named by aria-label and repeated in a tooltip. \" +\n    \"The hover bridge is aria-hidden; the springs are CSS transitions that settle at once under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,UAAU,SAAS;CAC1C,OAAO,CAAC,mBAAmB,uBAAuB;CAClD,MACE;AAOJ,CAAC"}

package/dist/components/ai-agent-plan/ai-agent-plan.d.ts

@@ -28,14 +28,25 @@ interface PlanStep {
   error?: string;
   /** One level of sub-steps. Deeper nesting is a tree, which this is not. */
   steps?: PlanStep[];
+  /** A short end-aligned note, e.g. "12/12" or "3 files". Read after the title. */
+  note?: ReactNode;
 }
+/** How the running step is marked. */
+type PlanRunningIndicator = "pulse" | "sweep";
 interface AgentPlanProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
   steps: PlanStep[];
   /** Names the plan, so the list is not an unlabelled sequence. */
   label: string;
   children?: ReactNode;
+  /** Completed steps recede, so the running one is what stands out. */
+  quietCompleted?: boolean;
+  /**
+   * How the running step is marked: `pulse` pulses its marker; `sweep` runs a
+   * light along the bottom of its row instead — one moving thing at a time.
+   */
+  runningIndicator?: PlanRunningIndicator;
 }
-declare function AgentPlan({ className, steps, label, children, ...props }: AgentPlanProps): import("react").JSX.Element;
+declare function AgentPlan({ className, steps, label, children, quietCompleted, runningIndicator, ...props }: AgentPlanProps): import("react").JSX.Element;
 /** "Step 3 of 6" plus the overall state, in words. */
 declare function AgentPlanSummary({ className, ...props }: ComponentPropsWithRef<"p">): import("react").JSX.Element;
 declare function AgentPlanSteps({ className, ...props }: ComponentPropsWithRef<"ol">): import("react").JSX.Element;
@@ -46,5 +57,5 @@ interface AgentPlanStepProps extends Omit<ComponentPropsWithRef<"li">, "children
 }
 declare function AgentPlanStep({ className, step, nested, ...props }: AgentPlanStepProps): import("react").JSX.Element;
 //#endregion
-export { AgentPlan, AgentPlanProps, AgentPlanStep, AgentPlanStepProps, AgentPlanSteps, AgentPlanSummary, PlanStep, StepStatus };
+export { AgentPlan, AgentPlanProps, AgentPlanStep, AgentPlanStepProps, AgentPlanSteps, AgentPlanSummary, PlanRunningIndicator, PlanStep, StepStatus };
 //# sourceMappingURL=ai-agent-plan.d.ts.map

package/dist/components/ai-agent-plan/ai-agent-plan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-agent-plan.d.ts","names":[],"sources":["../../../src/components/ai-agent-plan/ai-agent-plan.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;KA+BY;UAEK;EACf;EACA;EACA,QAAQ;;EAER;;EAEA;;EAEA,QAAQ;;UAyCO,uBAAuB,KAAK;EAC3C,OAAO;;EAEP;EACA,WAAW;;iBAGG,YAAY,WAAW,OAAO,OAAO,aAAa,SAAS,iCAAc,IAAA;;iBAqDzE,mBAAmB,cAAc,SAAS,6CAA0B,IAAA;iBA2BpE,iBAAiB,cAAc,SAAS,8CAA2B,IAAA;UAkBlE,2BAA2B,KAAK;EAC/C,MAAM;;EAEN;;iBAGc,gBACd,WACA,MACA,WACG,SACF,qCAAkB,IAAA"}
+{"version":3,"file":"ai-agent-plan.d.ts","names":[],"sources":["../../../src/components/ai-agent-plan/ai-agent-plan.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;KAgCY;UAEK;EACf;EACA;EACA,QAAQ;;EAER;;EAEA;;EAEA,QAAQ;;EAER,OAAO;;;KAkCG;UAqBK,uBAAuB,KAAK;EAC3C,OAAO;;EAEP;EACA,WAAW;;EAEX;;;;;EAKA,mBAAmB;;iBAGL,YACd,WACA,OACA,OACA,UACA,gBACA,qBACG,SACF,iCAAc,IAAA;;iBA4DD,mBAAmB,cAAc,SAAS,6CAA0B,IAAA;iBA2BpE,iBAAiB,cAAc,SAAS,8CAA2B,IAAA;UAkBlE,2BAA2B,KAAK;EAC/C,MAAM;;EAEN;;iBAGc,gBACd,WACA,MACA,WACG,SACF,qCAAkB,IAAA"}