@claralight-design/react 0.0.1

package/dist/lib/anchored.js

@@ -0,0 +1,821 @@
+"use client";
+import { cn, tokenNumber } from "./utils.js";
+import { composeRefs } from "./squircle.js";
+import { generatePath, getLayoutSize, parseBorder } from "@lisse/core";
+import { Fragment, cloneElement, isValidElement, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/anchored.tsx
+/** The tail sits on the edge facing the anchor — opposite the resolved side. */
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/** Direction of travel along each edge, following the generated path's winding. */
+const ALONG = {
+	top: {
+		x: 1,
+		y: 0
+	},
+	right: {
+		x: 0,
+		y: 1
+	},
+	bottom: {
+		x: -1,
+		y: 0
+	},
+	left: {
+		x: 0,
+		y: -1
+	}
+};
+/** Outward normal of each edge. */
+const OUTWARD = {
+	top: {
+		x: 0,
+		y: -1
+	},
+	right: {
+		x: 1,
+		y: 0
+	},
+	bottom: {
+		x: 0,
+		y: 1
+	},
+	left: {
+		x: -1,
+		y: 0
+	}
+};
+const TAIL_BODY_CONTROL = -.84;
+const TAIL_MID = -.5;
+const TAIL_TIP_CONTROL = -.225;
+const TAIL_SHOULDER_CONTROL = -2.6149999999999998 / 4;
+const TAIL_MID_CONTROL = 2 * TAIL_MID - TAIL_SHOULDER_CONTROL;
+/** Sub-pixel slack when deciding whether a point sits on an edge. */
+const EPSILON = .01;
+const round = (value) => Number(value.toFixed(4));
+const format = (point) => `${round(point.x)} ${round(point.y)}`;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+* The surface's filled region and the strokes that trace its boundary.
+*
+* The tail is spliced into the body's own path whenever the anchored edge has
+* a straight run long enough to hold its base. That is the case for every
+* top and bottom overlay and for tall ones on the left or right, and it is the
+* better construction: one continuous outline, stroked in one pass.
+*
+* A short edge has no straight run at all — the corners meet in the middle of
+* it — and no amount of splicing can put a 24px base on it. There the surface
+* becomes the union of the body and a tail whose base sinks below the body's
+* outline, which is what Flutter draws too. The `clip-path` unions them by
+* winding, and the two strokes are clipped against each other.
+*
+* Both constructions need to know where the corners let go of the edge, and
+* that is read off the path Lisse emitted rather than derived from the radius —
+* see `edgeRun`.
+*/
+function surfacePath(geometry) {
+	const edge = OPPOSITE[geometry.side];
+	const vertical = edge === "left" || edge === "right";
+	const inset = geometry.arrow ? geometry.extent : 0;
+	const bodyWidth = Math.max(0, geometry.width - (vertical ? inset : 0));
+	const bodyHeight = Math.max(0, geometry.height - (vertical ? 0 : inset));
+	const offset = {
+		x: edge === "left" ? inset : 0,
+		y: edge === "top" ? inset : 0
+	};
+	const body = segments(generatePath(bodyWidth, bodyHeight, {
+		radius: geometry.radius,
+		smoothing: geometry.smoothing
+	}));
+	const span = vertical ? bodyHeight : bodyWidth;
+	const depth = vertical ? bodyWidth : bodyHeight;
+	if (!geometry.arrow || span <= 0 || depth <= 0) {
+		const only = translate(body, offset);
+		const middle = span / 2;
+		return {
+			clip: only,
+			outline: [only],
+			origin: edgeOrigin(edge, geometry, middle),
+			center: middle,
+			range: {
+				min: middle,
+				max: middle
+			}
+		};
+	}
+	const run = edgeRun(body, edge, bodyWidth, bodyHeight);
+	const length = run ? run.end - run.start : 0;
+	const halfWidth = fitTail(geometry.arrowWidth / 2, geometry.extent, span, run);
+	if (run && length >= geometry.arrowWidth) {
+		const range = {
+			min: run.start + halfWidth,
+			max: run.end - halfWidth
+		};
+		const center = clamp(geometry.center, range.min, range.max);
+		const spliced = translate(body, offset, {
+			edge,
+			tail: tail(edge, center, halfWidth, 0, geometry.extent, bodyWidth, bodyHeight, offset, false),
+			width: bodyWidth,
+			height: bodyHeight
+		});
+		return {
+			clip: spliced,
+			outline: [spliced],
+			origin: edgeOrigin(edge, geometry, center),
+			center,
+			range
+		};
+	}
+	const minimum = geometry.radius + halfWidth + 1;
+	const maximum = span - minimum;
+	const range = maximum < minimum ? {
+		min: span / 2,
+		max: span / 2
+	} : {
+		min: minimum,
+		max: maximum
+	};
+	const center = clamp(geometry.center, range.min, range.max);
+	const origin = edgeOrigin(edge, geometry, center);
+	const startCorner = run ? run.start : span / 2;
+	const endCorner = run ? span - run.end : span / 2;
+	const sink = Math.min(depth / 2, Math.max(sunkBase(center - halfWidth, startCorner), sunkBase(span - center - halfWidth, endCorner)) + 1);
+	if (halfWidth <= sink) {
+		const only = translate(body, offset);
+		return {
+			clip: only,
+			outline: [only],
+			origin,
+			center,
+			range
+		};
+	}
+	const bodyPath = translate(body, offset);
+	const tailPath = tail(edge, center, halfWidth, -sink, geometry.extent, bodyWidth, bodyHeight, offset, true);
+	return {
+		clip: `${bodyPath} ${tailPath}`,
+		outline: [bodyPath, tailPath],
+		origin,
+		center,
+		range
+	};
+}
+/**
+* The widest half-tail this edge can carry.
+*
+* A tail wider than the edge's straight run has to sit partly on the corners,
+* where the body's outline curves away beneath it — so the wider it gets, the
+* deeper it has to sink and the less of it stays above the surface. Rather than
+* bury a full-width tail and leave only its tip showing, narrow it until it
+* sinks by no more than a quarter of its own height, which keeps the shape
+* ClaraLight draws and simply scales it to the surface.
+*/
+function fitTail(halfWidth, extent, span, run) {
+	if (run && run.end - run.start >= halfWidth * 2) return halfWidth;
+	const corner = run ? Math.max(run.start, span - run.end) : span / 2;
+	const budget = extent / 4;
+	const reach = Math.sqrt(Math.max(0, 2 * corner * budget - budget * budget));
+	return Math.max(0, Math.min(halfWidth, Math.max(0, span / 2 - corner) + reach));
+}
+/**
+* How deep the body's outline lies at a base end that has run `distance` past
+* the start of the edge, approximating the corner as a circle of its own
+* tangency length — exact at both ends of the corner and within a fraction of
+* a pixel between them, which is all the join needs.
+*/
+function sunkBase(distance, corner) {
+	if (distance >= corner) return 0;
+	const into = clamp(corner - distance, 0, corner);
+	return corner - Math.sqrt(Math.max(0, corner * corner - into * into));
+}
+/** The tail's tip, in the surface's own coordinates: what the entrance grows from. */
+function edgeOrigin(edge, geometry, center) {
+	switch (edge) {
+		case "top": return {
+			x: center,
+			y: 0
+		};
+		case "bottom": return {
+			x: center,
+			y: geometry.height
+		};
+		case "left": return {
+			x: 0,
+			y: center
+		};
+		case "right": return {
+			x: geometry.width,
+			y: center
+		};
+	}
+}
+/**
+* The tail, entering and leaving along the edge's own direction of travel so it
+* can be dropped straight into the body's path, or closed into a subpath of its
+* own when the surface is a union.
+*
+* `base` and `tip` are the tail's two ends measured outwards from the body's
+* edge, so a negative base is one that starts below the surface it grows from.
+*/
+function tail(edge, center, halfWidth, base, tip, bodyWidth, bodyHeight, offset, closed) {
+	const along = ALONG[edge];
+	const outward = OUTWARD[edge];
+	const start = {
+		x: (edge === "right" ? bodyWidth : edge === "left" ? 0 : center) + offset.x,
+		y: (edge === "bottom" ? bodyHeight : edge === "top" ? 0 : center) + offset.y
+	};
+	/** `cross` runs along the edge from the tail's centre, `out` from base to tip. */
+	const point = (cross, out) => {
+		const distance = base + out * (tip - base);
+		return {
+			x: start.x + along.x * cross * halfWidth + outward.x * distance,
+			y: start.y + along.y * cross * halfWidth + outward.y * distance
+		};
+	};
+	const curve = (c1, c2, end) => `C ${format(c1)} ${format(c2)} ${format(end)}`;
+	return [
+		`${closed ? "M" : "L"} ${format(point(-1, 0))}`,
+		curve(point(TAIL_BODY_CONTROL, 0), point(TAIL_SHOULDER_CONTROL, 0), point(TAIL_MID, .25)),
+		curve(point(TAIL_MID_CONTROL, .5), point(TAIL_TIP_CONTROL, 1), point(0, 1)),
+		curve(point(.225, 1), point(.34625000000000006, .5), point(.5, .25)),
+		curve(point(.6537499999999999, 0), point(.84, 0), point(1, 0)),
+		...closed ? ["Z"] : []
+	].join(" ");
+}
+/**
+* Lisse's output, split into commands that know where the pen was.
+*
+* Only `M` and `L` are absolute; corners are relative `c` and `a`, but they
+* still advance the pen, and every one of them ends on its last coordinate
+* pair — which is all the tracking needs.
+*/
+function segments(path) {
+	const commands = path.match(/[A-Za-z][^A-Za-z]*/g) ?? [];
+	const parsed = [];
+	let pen = {
+		x: 0,
+		y: 0
+	};
+	for (const command of commands) {
+		const type = command[0] ?? "";
+		const from = pen;
+		if (type === "M" || type === "L") {
+			const numbers = (command.slice(1).match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? []).map(Number);
+			pen = {
+				x: numbers[0] ?? 0,
+				y: numbers[1] ?? 0
+			};
+		} else if (type !== "Z" && type !== "z") {
+			const numbers = (command.slice(1).match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? []).map(Number);
+			pen = {
+				x: pen.x + (numbers.at(-2) ?? 0),
+				y: pen.y + (numbers.at(-1) ?? 0)
+			};
+		}
+		parsed.push({
+			type,
+			raw: command.trim(),
+			from,
+			to: pen
+		});
+	}
+	return parsed;
+}
+/**
+* Where the corners let go of one edge, read off the body Lisse actually drew.
+*
+* Not derived from the radius, because `(1 + smoothing) * radius` is not what
+* Lisse spends on a corner: it caps the radius to half the shorter side, caps
+* the smoothing again to the corner's budget, and for a body as flat as a
+* tooltip it switches construction altogether. Each of those makes the
+* arithmetic wrong in a different direction — too long a corner sends a surface
+* to the union branch that had room to splice, too short a one lets the tail's
+* base reach into the corner, where the splice doubles back along the edge and
+* the stroke runs over the curve twice.
+*
+* The emitted path already knows the answer. Every edge carries exactly one
+* non-degenerate `L`, which is the run — the generator emits a zero-length `L`
+* after each corner as well, so length is part of the test rather than position
+* alone, and an edge whose corners meet has no run at all.
+*/
+function edgeRun(body, edge, width, height) {
+	const along = edge === "left" || edge === "right" ? "y" : "x";
+	for (const segment of body) {
+		if (segment.type !== "L") continue;
+		if (!onEdge(segment.from, edge, width, height)) continue;
+		if (!onEdge(segment.to, edge, width, height)) continue;
+		const start = Math.min(segment.from[along], segment.to[along]);
+		const end = Math.max(segment.from[along], segment.to[along]);
+		if (end - start > EPSILON) return {
+			start,
+			end
+		};
+	}
+	return null;
+}
+/**
+* Move the generated body into place and, when asked, insert the tail.
+*
+* Absolute commands are rewritten; relative corners come through as they were.
+* The tail replaces the `L` that runs along the target edge, which is the same
+* segment `edgeRun` measured.
+*/
+function translate(body, offset, splice) {
+	const output = [];
+	let inserted = false;
+	for (const segment of body) {
+		const { type, from, to } = segment;
+		if (type === "M" || type === "L") {
+			if (splice && !inserted && type === "L" && onEdge(from, splice.edge, splice.width, splice.height) && onEdge(to, splice.edge, splice.width, splice.height) && (Math.abs(to.x - from.x) > EPSILON || Math.abs(to.y - from.y) > EPSILON)) {
+				output.push(splice.tail);
+				inserted = true;
+			}
+			output.push(`${type} ${format({
+				x: to.x + offset.x,
+				y: to.y + offset.y
+			})}`);
+		} else if (type === "Z" || type === "z") output.push("Z");
+		else output.push(segment.raw);
+	}
+	return output.join(" ");
+}
+function onEdge(point, edge, width, height) {
+	switch (edge) {
+		case "top": return Math.abs(point.y) < EPSILON;
+		case "bottom": return Math.abs(point.y - height) < EPSILON;
+		case "left": return Math.abs(point.x) < EPSILON;
+		case "right": return Math.abs(point.x - width) < EPSILON;
+	}
+}
+/** Big enough to cover any surface, so `evenodd` leaves everything outside a subpath. */
+const COVER = "M -9999 -9999 H 9999 V 9999 H -9999 Z";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const EMPTY = {
+	clip: "",
+	outline: [],
+	origin: null,
+	width: 0,
+	height: 0,
+	side: "top",
+	tailCenter: null
+};
+function AnchoredSurface({ radius, side, arrow = true, smoothing, wrapperClassName, className, asChild = false, children, ref: forwardedRef, style, tailMotion = "none", ...props }) {
+	const [element, setElement] = useState(null);
+	const nodes = useRef({
+		root: null,
+		svg: null,
+		clip: null,
+		strokes: [],
+		masks: []
+	});
+	const child = asChild ? getShapeChild(children) : void 0;
+	const childProps = child?.props;
+	const mergedRef = useMemo(() => composeRefs(setElement, forwardedRef, childProps?.ref), [forwardedRef, childProps?.ref]);
+	const mergedStyle = {
+		...style,
+		...childProps?.style
+	};
+	const appearance = useAppearance(element, nodes, {
+		radius,
+		side,
+		arrow,
+		smoothing,
+		tailMotion
+	});
+	const clipId = `cl-anchored-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const shaped = appearance.clip.length > 0;
+	const shapeProps = {
+		...props,
+		ref: mergedRef,
+		"data-cl-anchored": radius,
+		style: {
+			...mergedStyle,
+			borderRadius: shaped ? void 0 : mergedStyle.borderRadius ?? `var(--radius-${radius})`,
+			clipPath: shaped ? `path("${appearance.clip}")` : void 0
+		},
+		className: cn("cl-anchored", arrow && "cl-anchored-arrow", className, childProps?.className)
+	};
+	const border = appearance.border;
+	const stroke = shaped && border && typeof border.color === "string" ? border : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (node) => {
+			nodes.current.root = node;
+		},
+		className: cn("cl-anchored-root relative", wrapperClassName),
+		style: appearance.origin ? { transformOrigin: `${appearance.origin.x}px ${appearance.origin.y}px` } : void 0,
+		children: [child ? cloneElement(child, shapeProps) : /* @__PURE__ */ jsx("div", {
+			...shapeProps,
+			children
+		}), stroke ? /* @__PURE__ */ jsxs("svg", {
+			ref: (node) => {
+				nodes.current.svg = node;
+			},
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute top-0 left-0",
+			width: appearance.width,
+			height: appearance.height,
+			children: [/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("clipPath", {
+				id: clipId,
+				children: /* @__PURE__ */ jsx("path", {
+					ref: (node) => {
+						nodes.current.clip = node;
+					},
+					d: appearance.clip
+				})
+			}), appearance.outline.length > 1 ? appearance.outline.map((_, index) => /* @__PURE__ */ jsx("clipPath", {
+				id: `${clipId}-${index}`,
+				children: /* @__PURE__ */ jsx("path", {
+					ref: (node) => {
+						nodes.current.masks[index] = node;
+					},
+					clipRule: "evenodd",
+					d: `${COVER} ${appearance.outline[index === 0 ? 1 : 0]}`
+				})
+			}, index)) : null] }), /* @__PURE__ */ jsx("g", {
+				clipPath: `url(#${clipId})`,
+				children: appearance.outline.map((d, index) => /* @__PURE__ */ jsx("path", {
+					ref: (node) => {
+						nodes.current.strokes[index] = node;
+					},
+					d,
+					fill: "none",
+					stroke: stroke.color,
+					strokeOpacity: stroke.opacity,
+					strokeWidth: stroke.width * 2,
+					clipPath: appearance.outline.length > 1 ? `url(#${clipId}-${index})` : void 0
+				}, index))
+			})]
+		}) : null]
+	});
+}
+function getShapeChild(child) {
+	if (!isValidElement(child) || child.type === Fragment) throw new Error("AnchoredSurface: `asChild` expects exactly one non-Fragment React element.");
+	return child;
+}
+const BORDER_SIDES = [
+	"border-top-color",
+	"border-right-color",
+	"border-bottom-color",
+	"border-left-color"
+];
+/** Insets Base UI writes the positioner's place with, per axis. */
+const ALONG_X = ["left", "right"];
+const ALONG_Y = ["top", "bottom"];
+/**
+* Measure the surface and keep the fused path in sync.
+*
+* Every input is read from the shape's own computed style rather than from
+* `documentElement`, so a locally scoped theme, a `rem` radius or an inline
+* token override all work — the same reasoning as `Squircle`'s reader.
+*
+* There is no frame polling at rest. Four things move the tail, and each one has
+* a signal: the surface resizing (`ResizeObserver`), Base UI flipping the side
+* (`data-side`), Floating UI re-solving the arrow offset, which it writes as
+* inline `left`/`top` on the probe, and the positioner being sent to a new
+* anchor, which it writes as inline insets (`[data-cl-anchor-track]`). The last
+* is what a shared tooltip changing trigger looks like, and the only one that
+* starts the motion track.
+*/
+function useAppearance(element, nodes, inputs) {
+	const [appearance, setAppearance] = useState(EMPTY);
+	const latest = useRef(inputs);
+	latest.current = inputs;
+	/** What React last rendered, which is the DOM structure a frame may write into. */
+	const renderedRef = useRef(EMPTY);
+	const syncRef = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		if (!element) return;
+		const view = element.ownerDocument.defaultView;
+		if (!view) return;
+		const saved = /* @__PURE__ */ new Map();
+		let frame = null;
+		let measured = null;
+		/** Whether the surface has changed since it was last read. */
+		let stale = true;
+		/** What the DOM is showing, which a frame of the motion track may have written. */
+		let showing = EMPTY;
+		/** The tail centre the track is holding, or `null` when the tail is at rest. */
+		let leading = null;
+		/** How far along its edge the tail could reach, as of the last surface built. */
+		let reach = null;
+		let clock = 0;
+		let deadline = 0;
+		const restore = () => {
+			for (const [property, source] of saved) if (element.style.getPropertyValue(property) === "transparent") element.style.setProperty(property, source.value, source.priority);
+			saved.clear();
+		};
+		const same = (a, b) => a.clip === b.clip && a.width === b.width && a.height === b.height && a.side === b.side && a.tailCenter === b.tailCenter && a.origin?.x === b.origin?.x && a.origin?.y === b.origin?.y && a.outline.length === b.outline.length && a.outline.every((subpath, index) => subpath === b.outline[index]) && a.border?.color === b.border?.color && a.border?.opacity === b.border?.opacity && a.border?.width === b.border?.width;
+		const commit = (next) => {
+			renderedRef.current = next;
+			showing = next;
+			setAppearance((current) => same(current, next) ? current : next);
+		};
+		/** Whether an appearance renders the outline, and with how many subpaths. */
+		const structure = (value) => `${value.outline.length}:${value.clip.length > 0 && typeof value.border?.color === "string"}`;
+		/**
+		* Write one frame of the tail's slide straight into the DOM.
+		*
+		* Only the coordinates move while the tail travels, so the frames set
+		* attributes on what React already rendered and leave the reconciler out of
+		* the animation; the last frame commits. A frame that *would* change the
+		* structure — the surface becoming a union, or its outline appearing — goes
+		* through state instead, and the frame after it paints again.
+		*/
+		const paint = (next) => {
+			if (structure(next) !== structure(renderedRef.current)) {
+				commit(next);
+				return;
+			}
+			showing = next;
+			const { root, svg, clip, strokes, masks } = nodes.current;
+			element.style.clipPath = `path("${next.clip}")`;
+			if (root && next.origin) root.style.transformOrigin = `${next.origin.x}px ${next.origin.y}px`;
+			svg?.setAttribute("width", String(next.width));
+			svg?.setAttribute("height", String(next.height));
+			clip?.setAttribute("d", next.clip);
+			for (const [index, subpath] of next.outline.entries()) {
+				strokes[index]?.setAttribute("d", subpath);
+				const other = next.outline[index === 0 ? 1 : 0];
+				if (other !== void 0) masks[index]?.setAttribute("d", `${COVER} ${other}`);
+			}
+		};
+		const measure = () => {
+			const { radius: token, side, arrow, smoothing } = latest.current;
+			restore();
+			const computed = view.getComputedStyle(element);
+			const { width, height } = getLayoutSize(element, computed);
+			const border = parseBorder(element, computed);
+			const number = (name) => Number.parseFloat(computed.getPropertyValue(name));
+			const duration = (name) => tokenNumber(computed.getPropertyValue(name));
+			const authored = element.style.borderTopLeftRadius;
+			element.style.borderTopLeftRadius = `var(--radius-${token})`;
+			const radius = Number.parseFloat(computed.borderTopLeftRadius);
+			element.style.borderTopLeftRadius = authored;
+			const resolvedSide = readSide(element) ?? side;
+			const tokenSmoothing = number("--cl-corner-smoothing");
+			const extent = number("--cl-arrow-extent");
+			const arrowWidth = number("--cl-arrow-width");
+			const drawArrow = arrow && Number.isFinite(extent) && Number.isFinite(arrowWidth);
+			const geometry = {
+				width,
+				height,
+				side: resolvedSide,
+				radius: Number.isFinite(radius) ? Math.max(0, radius) : 0,
+				smoothing: clamp(smoothing ?? (Number.isFinite(tokenSmoothing) ? tokenSmoothing : 0), 0, 1),
+				arrow: drawArrow,
+				extent: drawArrow ? extent : 0,
+				arrowWidth: drawArrow ? arrowWidth : 0,
+				center: drawArrow ? tailCenter(element, resolvedSide, width, height) : 0
+			};
+			if (border) for (const property of BORDER_SIDES) {
+				saved.set(property, {
+					value: element.style.getPropertyValue(property),
+					priority: element.style.getPropertyPriority(property)
+				});
+				element.style.setProperty(property, "transparent", "important");
+			}
+			stale = false;
+			return {
+				geometry,
+				border,
+				lead: duration("--cl-duration-tooltip-tail") ?? 60,
+				morph: duration("--cl-duration-tooltip-morph") ?? 180
+			};
+		};
+		const build = (source, center = source.geometry.center) => {
+			const geometry = {
+				...source.geometry,
+				center
+			};
+			const surface = geometry.width > 0 && geometry.height > 0 ? surfacePath(geometry) : void 0;
+			if (surface) reach = surface.range;
+			return {
+				width: geometry.width,
+				height: geometry.height,
+				side: geometry.side,
+				tailCenter: geometry.arrow ? surface?.center ?? null : null,
+				border: source.border,
+				clip: surface?.clip ?? "",
+				outline: surface?.outline ?? [],
+				origin: surface?.origin ?? null
+			};
+		};
+		/**
+		* How far the surface still has to travel along the tail's edge, in px.
+		*
+		* The morph is a CSS transition on the positioner's insets, so the browser is
+		* already holding both numbers this needs: the inline style is the inset Base
+		* UI asked for — the end of the journey, which a transition does not touch —
+		* and the computed style is how far along it is. Their difference is the
+		* travel left, read off the browser rather than predicted from a duration and
+		* a curve, which is what lets the tail survive a morph that is interrupted,
+		* re-aimed, or overtaken by the anchor moving.
+		*/
+		const remaining = (horizontal) => {
+			const track = element.closest("[data-cl-anchor-track]");
+			if (!track) return 0;
+			const computed = view.getComputedStyle(track);
+			for (const property of horizontal ? ALONG_X : ALONG_Y) {
+				const end = tokenNumber(track.style.getPropertyValue(property));
+				if (end === void 0) continue;
+				const now = tokenNumber(computed.getPropertyValue(property));
+				if (now === void 0) continue;
+				return property === "left" || property === "top" ? end - now : now - end;
+			}
+			return 0;
+		};
+		const stop = () => {
+			if (frame !== null) {
+				view.cancelAnimationFrame(frame);
+				frame = null;
+			}
+			leading = null;
+		};
+		/**
+		* The tail leads the surface to its new anchor, then waits for it there.
+		*
+		* Each frame asks for the centre that would keep the tail pointing at the
+		* anchor from where the surface currently is: its resting centre, plus the
+		* travel the surface has left. Early on that is far beyond the edge, so the
+		* ask is brought back to the end of the straight run *before* the follower
+		* sees it — the tail then slides to that limit over the time constant and
+		* rides there. Aiming the follower at the raw ask instead would land it on the
+		* limit in one step, because a first step of 60% of 180px is not a slide but a
+		* jump. Once the surface has closed enough of the distance for the ask to come
+		* back inside the run, the tail is already where it belongs and holds still on
+		* screen while the surface finishes arriving.
+		*
+		* The follow is a time constant rather than a duration, because there is no
+		* fixed distance to cover: the aim moves with the surface, and a new trigger
+		* can change it mid-flight. `--cl-duration-tooltip-tail` is the time to close
+		* 95% of a standing gap, which is three of those constants.
+		*
+		* Both halves of this movement are worth reading together when judging it: the
+		* surface travels on a CSS transition and the tail on this timer, so a
+		* DevTools playback rate slows one and not the other. Scale
+		* `--cl-duration-tooltip-morph` and `--cl-duration-tooltip-tail` by the same
+		* factor instead.
+		*/
+		const step = (now) => {
+			frame = null;
+			if (leading === null || latest.current.tailMotion !== "fast") return;
+			if (stale || measured === null) measured = measure();
+			const { geometry, lead } = measured;
+			const horizontal = geometry.side === "top" || geometry.side === "bottom";
+			const travel = remaining(horizontal);
+			const landed = Math.abs(travel) < .5;
+			const ask = geometry.center + travel;
+			const aim = reach ? clamp(ask, reach.min, reach.max) : ask;
+			const elapsed = clamp(now - clock, 0, 64);
+			clock = now;
+			const closed = 1 - Math.exp(-3 * elapsed / Math.max(1, lead));
+			const from = leading;
+			const next = build(measured, from + (aim - from) * closed);
+			paint(next);
+			leading = next.tailCenter ?? from;
+			if (landed && Math.abs(aim - leading) < .1 || now > deadline) {
+				stop();
+				commit(build(measured));
+				return;
+			}
+			frame = view.requestAnimationFrame(step);
+		};
+		const start = (from, morph) => {
+			deadline = view.performance.now() + 2 * morph + 400;
+			if (frame !== null) return;
+			leading = from;
+			clock = view.performance.now();
+			frame = view.requestAnimationFrame(step);
+		};
+		/**
+		* Re-read the surface and put it on screen.
+		*
+		* `retarget` says the signal was the tail being sent somewhere new, which is
+		* the one that may start the motion track. While the track runs it owns the
+		* tail, so a pass of any kind only re-measures and repaints around it.
+		*/
+		const sync = (retarget) => {
+			measured = measure();
+			const { geometry, morph } = measured;
+			const flipped = showing.side !== geometry.side;
+			const reduced = view.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+			if (flipped) stop();
+			if (retarget && !flipped && !reduced && latest.current.tailMotion === "fast" && geometry.arrow && showing.tailCenter !== null) start(showing.tailCenter, morph);
+			if (frame !== null && leading !== null) paint(build(measured, leading));
+			else commit(build(measured));
+			observer.takeRecords();
+		};
+		const observer = new view.MutationObserver(() => sync(true));
+		const resize = new view.ResizeObserver(() => {
+			stale = true;
+			if (frame === null) sync(false);
+		});
+		const cleanup = () => {
+			stop();
+			observer.disconnect();
+			resize.disconnect();
+			syncRef.current = null;
+			restore();
+		};
+		try {
+			syncRef.current = () => sync(false);
+			observer.observe(element, {
+				attributes: true,
+				attributeFilter: ["data-side"]
+			});
+			const probe = element.querySelector("[data-cl-anchor-probe]");
+			if (probe) observer.observe(probe, {
+				attributes: true,
+				attributeFilter: ["style"]
+			});
+			const track = element.closest("[data-cl-anchor-track]");
+			if (track) observer.observe(track, {
+				attributes: true,
+				attributeFilter: ["style"]
+			});
+			resize.observe(element);
+			sync(false);
+			return cleanup;
+		} catch (error) {
+			cleanup();
+			throw error;
+		}
+	}, [
+		element,
+		nodes,
+		inputs.arrow,
+		inputs.tailMotion
+	]);
+	useIsomorphicLayoutEffect(() => {
+		syncRef.current?.();
+	});
+	return appearance;
+}
+/**
+* The leading number of a length or duration token, read from an element's own
+* cascade — a local theme, a scoped override or a `rem` value all resolve.
+*/
+function themedNumber(element, name) {
+	const view = element?.ownerDocument.defaultView;
+	if (!element || !view) return void 0;
+	return tokenNumber(view.getComputedStyle(element).getPropertyValue(name));
+}
+/**
+* `themedNumber` for the props Base UI cannot take as a callback.
+*
+* `sideOffset` accepts a function and is resolved during positioning, so it can
+* read the token inline; `collisionPadding` and the tooltip delays are plain
+* numbers, and reading them needs a mounted element. Running in a layout effect
+* keeps the correction ahead of paint, so a first pass on Base UI's own default
+* is never visible.
+*/
+function useThemedNumber(ref, name) {
+	const [value, setValue] = useState();
+	useIsomorphicLayoutEffect(() => {
+		const next = themedNumber(ref.current, name);
+		setValue((current) => current === next ? current : next);
+	});
+	return value;
+}
+function readSide(element) {
+	const side = element.dataset.side;
+	return side === "top" || side === "bottom" || side === "left" || side === "right" ? side : void 0;
+}
+/**
+* Where the tail meets the body, from the surface's own origin.
+*
+* Read off Base UI's arrow element, which Floating UI has already solved and
+* clamped against the anchor.
+*
+* Offset geometry rather than `getBoundingClientRect`, because this has to
+* survive the entrance. The wrapper scales from zero, so on the first frame
+* every rect inside it collapses to a point, and nothing can be recovered from
+* the ratio — a couple of rects at 0 measure a tail at the surface's left edge.
+* Offsets are layout space: a transform does not move them, and the measurement
+* is therefore right the first time instead of being right later, which is the
+* difference between a tail that follows the anchor and one that waits for the
+* next resize.
+*
+* An absolutely positioned box is placed from its containing block's *padding*
+* box, so a probe whose offset parent is the surface itself is short by that
+* surface's own border — and the path is drawn in border-box space. The surface
+* is the probe's containing block whenever it carries the frost, whose
+* `backdrop-filter` establishes one; the wrapper is the alternative, and it has
+* no insets of its own to correct for.
+*/
+function tailCenter(element, side, width, height) {
+	const probe = element.querySelector("[data-cl-anchor-probe]");
+	if (!probe) return (side === "left" || side === "right" ? height : width) / 2;
+	const horizontal = side === "top" || side === "bottom";
+	const border = probe.offsetParent === element ? horizontal ? element.clientLeft : element.clientTop : 0;
+	return horizontal ? probe.offsetLeft + border + probe.offsetWidth / 2 : probe.offsetTop + border + probe.offsetHeight / 2;
+}
+//#endregion
+export { AnchoredSurface, surfacePath, themedNumber, tokenNumber, useThemedNumber };
+
+//# sourceMappingURL=anchored.js.map