@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/context.js

@@ -4,7 +4,7 @@ import { Button } from "./ui/button.js";
 import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { deriveContextModel } from "./context-model.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 //#region src/context.tsx
@@ -16,14 +16,20 @@ function useContextValue() {
 }
 function Context({ segments, maxTokens, model: modelName, locale, open, defaultOpen, onOpenChange, className, children, ...props }) {
 	const model = deriveContextModel(segments, maxTokens);
+	const numberFormatter = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+	const percentageFormatter = useMemo(() => new Intl.NumberFormat(locale, {
+		style: "percent",
+		maximumFractionDigits: 1
+	}), [locale]);
+	const percentage = model.ratio === null ? null : percentageFormatter.format(model.ratio);
+	const usedTokens = numberFormatter.format(model.usedTokens);
 	const context = {
 		model,
 		modelName,
-		numberFormatter: new Intl.NumberFormat(locale),
-		percentageFormatter: new Intl.NumberFormat(locale, {
-			style: "percent",
-			maximumFractionDigits: 1
-		})
+		numberFormatter,
+		percentageFormatter,
+		percentage,
+		usage: model.maxTokens === null ? `${usedTokens} tokens used; limit unavailable` : `${usedTokens} of ${numberFormatter.format(model.maxTokens)} tokens used (${percentage})${model.overageTokens > 0 ? `; ${numberFormatter.format(model.overageTokens)} tokens over limit` : ""}`
 	};
 	return /* @__PURE__ */ jsx(ContextValueContext.Provider, {
 		value: context,
@@ -43,24 +49,22 @@ function Context({ segments, maxTokens, model: modelName, locale, open, defaultO
 		})
 	});
 }
-function ContextTrigger({ "aria-label": ariaLabel, variant = "surface", size = "sm", className, children, ...props }) {
-	const { model, numberFormatter, percentageFormatter } = useContextValue();
-	const percentage = model.ratio === null ? null : percentageFormatter.format(model.ratio);
+function ContextTrigger({ "aria-describedby": describedBy, variant = "surface", size = "sm", className, children, ...props }) {
+	const { model, percentage, usage } = useContextValue();
+	const usageId = useId();
 	const visualPercentage = Math.min(100, Math.max(0, (model.ratio ?? 0) * 100));
-	const shortLabel = percentage === null ? "Context unavailable" : `${percentage} context`;
-	const accessibleLabel = model.maxTokens === null ? `Context window: ${numberFormatter.format(model.usedTokens)} tokens used; limit unavailable` : `Context window: ${numberFormatter.format(model.usedTokens)} of ${numberFormatter.format(model.maxTokens)} tokens used (${percentage})${model.overageTokens > 0 ? `; ${numberFormatter.format(model.overageTokens)} tokens over limit` : ""}`;
-	return /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs("span", {
 		"data-control-ui": "context",
 		"data-control-family": "context",
 		"data-slot": "trigger",
 		"data-status": model.status,
 		className: "relative inline-flex",
-		children: /* @__PURE__ */ jsx(Button, {
+		children: [/* @__PURE__ */ jsx(Button, {
 			...props,
 			render: /* @__PURE__ */ jsx(PopoverTrigger, {}),
 			variant,
 			size,
-			"aria-label": ariaLabel ?? accessibleLabel,
+			"aria-describedby": describedBy ? `${usageId} ${describedBy}` : usageId,
 			className: cn("group/context after:absolute after:-inset-1.5 after:content-['']", className),
 			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("svg", {
 				"data-control-ui": "context",
@@ -96,9 +100,13 @@ function ContextTrigger({ "aria-label": ariaLabel, variant = "surface", size = "
 				"data-control-ui": "context",
 				"data-control-family": "context",
 				"data-slot": "trigger-label",
-				children: shortLabel
+				children: percentage === null ? "Context unavailable" : `${percentage} context`
 			})] })
-		})
+		}), /* @__PURE__ */ jsx("span", {
+			id: usageId,
+			className: "sr-only",
+			children: usage
+		})]
 	});
 }
 function ContextContent({ "aria-label": ariaLabel, side = "top", align = "end", sideOffset = 8, collisionPadding = 16, padding = "none", className, children, ...props }) {
@@ -170,8 +178,7 @@ function ContextDescription({ className, children, ...props }) {
 	});
 }
 function ContextSummary({ className, children, ...props }) {
-	const { model, numberFormatter, percentageFormatter } = useContextValue();
-	const percentage = model.ratio === null ? null : percentageFormatter.format(model.ratio);
+	const { model, numberFormatter, percentage } = useContextValue();
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		"data-control-ui": "context",
@@ -183,21 +190,29 @@ function ContextSummary({ className, children, ...props }) {
 			"data-control-ui": "context",
 			"data-control-family": "context",
 			"data-slot": "summary-value",
-			children: model.maxTokens === null ? "Limit unavailable" : `${numberFormatter.format(model.usedTokens)} / ${numberFormatter.format(model.maxTokens)} tokens`
+			children: model.maxTokens === null ? "Limit unavailable" : `${numberFormatter.format(model.usedTokens)} of ${numberFormatter.format(model.maxTokens)} tokens`
 		})] })
 	});
 }
-function ContextGraph({ className, ...props }) {
-	const { model } = useContextValue();
+function ContextGraph({ "aria-label": ariaLabel = "Context usage", className, ...props }) {
+	const { model, usage } = useContextValue();
+	const meterProps = model.maxTokens === null ? { "aria-hidden": true } : {
+		role: "meter",
+		"aria-label": ariaLabel,
+		"aria-valuemin": 0,
+		"aria-valuemax": model.maxTokens,
+		"aria-valuenow": Math.min(model.usedTokens, model.maxTokens),
+		"aria-valuetext": usage
+	};
 	return /* @__PURE__ */ jsxs("svg", {
 		...props,
+		...meterProps,
 		"data-control-ui": "context",
 		"data-control-family": "context",
 		"data-slot": "graph",
 		"data-status": model.status,
 		viewBox: "0 0 100 10",
 		preserveAspectRatio: "none",
-		"aria-hidden": "true",
 		className: cn("w-full overflow-hidden", className),
 		children: [
 			/* @__PURE__ */ jsx("rect", {
@@ -322,7 +337,7 @@ function ContextClose({ variant = "ghost", size = "xs", iconOnly = true, "aria-l
 		size,
 		iconOnly,
 		"aria-label": ariaLabel,
-		className: cn("ml-auto", className),
+		className: cn("ms-auto", className),
 		children: children ?? /* @__PURE__ */ jsx(X, {
 			"aria-hidden": "true",
 			className: "size-4"

package/dist/dynamic-notification-canvas-loop.d.ts

@@ -0,0 +1,24 @@
+//#region src/dynamic-notification-canvas-loop.d.ts
+export type NotificationCanvasFrame = {
+  reduced: boolean;
+  now: number;
+  deltaMs: number;
+};
+export type NotificationCanvasLoop = {
+  invalidate: () => void;
+  cancel: () => void;
+  destroy: () => void;
+};
+export type NotificationMotionValues = {
+  radius: number;
+  aurora: number;
+  reveal: number;
+  settle: number;
+  lift: number;
+};
+export declare function createNotificationMotion(initialState: string | undefined): {
+  values: NotificationMotionValues;
+  advance: (state: string | undefined, radius: number, reduced: boolean, deltaMs: number) => boolean;
+};
+export declare function createNotificationCanvasLoop(canvas: HTMLCanvasElement, render: (frame: NotificationCanvasFrame) => boolean): NotificationCanvasLoop;
+//#endregion

package/dist/dynamic-notification-canvas-loop.js

@@ -0,0 +1,113 @@
+import { prefersReducedMotion } from "./lib/motion.js";
+//#region src/dynamic-notification-canvas-loop.ts
+const FRAME_MS_AT_60HZ = 1e3 / 60;
+const MAX_FRAME_DELTA_MS = 100;
+function approachAt60Hz(current, target, response, deltaMs) {
+	const frameScale = Math.max(0, deltaMs) / FRAME_MS_AT_60HZ;
+	return current + (target - current) * (1 - (1 - response) ** frameScale);
+}
+function motionTargets(state, radius) {
+	const thinking = state === "thinking";
+	return {
+		radius,
+		aurora: thinking ? 1 : 0,
+		reveal: state === "collapsed" ? 0 : 1,
+		settle: state === "expanded" ? 1 : 0,
+		lift: thinking ? 0 : 1
+	};
+}
+function createNotificationMotion(initialState) {
+	const values = motionTargets(initialState, 0);
+	function advance(state, radius, reduced, deltaMs) {
+		const targets = motionTargets(state, radius);
+		if (reduced) {
+			Object.assign(values, targets);
+			return false;
+		}
+		values.radius = approachAt60Hz(values.radius, targets.radius, .25, deltaMs);
+		values.aurora = approachAt60Hz(values.aurora, targets.aurora, .06, deltaMs);
+		values.reveal = approachAt60Hz(values.reveal, targets.reveal, .07, deltaMs);
+		values.settle = approachAt60Hz(values.settle, targets.settle, .07, deltaMs);
+		values.lift = targets.lift === 1 ? Math.min(1, values.lift + deltaMs * .00216) : approachAt60Hz(values.lift, 0, .28, deltaMs);
+		return state === "thinking" || Math.abs(values.radius - targets.radius) > .05 || Math.abs(values.aurora - targets.aurora) > .002 || Math.abs(values.reveal - targets.reveal) > .002 || Math.abs(values.settle - targets.settle) > .002 || Math.abs(values.lift - targets.lift) > .002;
+	}
+	return {
+		values,
+		advance
+	};
+}
+function createNotificationCanvasLoop(canvas, render) {
+	let destroyed = false;
+	let intersecting = true;
+	let pageVisible = !document.hidden;
+	let rafId = 0;
+	let staticFrameDrawn = false;
+	let previousFrameAt = performance.now();
+	const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+	function tick() {
+		rafId = 0;
+		if (destroyed || !intersecting || !pageVisible) return;
+		const now = performance.now();
+		const deltaMs = Math.min(MAX_FRAME_DELTA_MS, now - previousFrameAt);
+		previousFrameAt = now;
+		const reduced = prefersReducedMotion(canvas);
+		const keepAnimating = render({
+			reduced,
+			now,
+			deltaMs
+		}) && !reduced;
+		staticFrameDrawn = !keepAnimating;
+		if (keepAnimating) rafId = requestAnimationFrame(tick);
+	}
+	function invalidate() {
+		staticFrameDrawn = false;
+		if (destroyed || !intersecting || !pageVisible || rafId !== 0) return;
+		previousFrameAt = performance.now();
+		rafId = requestAnimationFrame(tick);
+	}
+	function cancel() {
+		if (rafId !== 0) cancelAnimationFrame(rafId);
+		rafId = 0;
+	}
+	function handleVisibility() {
+		pageVisible = !document.hidden;
+		invalidate();
+	}
+	const resizeObserver = new ResizeObserver(invalidate);
+	resizeObserver.observe(canvas);
+	const intersectionObserver = new IntersectionObserver((entries) => {
+		for (const entry of entries) intersecting = entry.isIntersecting;
+		invalidate();
+	}, { rootMargin: "64px" });
+	intersectionObserver.observe(canvas);
+	const motionObserver = new MutationObserver(() => {
+		if (!staticFrameDrawn || !prefersReducedMotion(canvas)) invalidate();
+	});
+	motionObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["data-motion"]
+	});
+	const stateObserver = new MutationObserver(invalidate);
+	if (canvas.parentElement) stateObserver.observe(canvas.parentElement, {
+		attributes: true,
+		attributeFilter: ["data-state"]
+	});
+	document.addEventListener("visibilitychange", handleVisibility);
+	reducedMotionQuery.addEventListener("change", invalidate);
+	return {
+		invalidate,
+		cancel,
+		destroy() {
+			destroyed = true;
+			cancel();
+			resizeObserver.disconnect();
+			intersectionObserver.disconnect();
+			motionObserver.disconnect();
+			stateObserver.disconnect();
+			document.removeEventListener("visibilitychange", handleVisibility);
+			reducedMotionQuery.removeEventListener("change", invalidate);
+		}
+	};
+}
+//#endregion
+export { createNotificationCanvasLoop, createNotificationMotion };

package/dist/dynamic-notification-glass.js

@@ -1,3 +1,4 @@
+import { createNotificationCanvasLoop, createNotificationMotion } from "./dynamic-notification-canvas-loop.js";
 import { DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL } from "./dynamic-notification-siri-wave.js";
 //#region src/dynamic-notification-glass.ts
 const VERTEX_SHADER = `
@@ -141,15 +142,6 @@ function buildProgram(gl) {
 		ribbonHorizon: gl.getUniformLocation(program, "u_ribbonHorizon")
 	};
 }
-function auroraTarget(state) {
-	return state === "thinking" ? 1 : 0;
-}
-function revealTarget(state) {
-	return state === "collapsed" ? 0 : 1;
-}
-function settleTarget(state) {
-	return state === "expanded" ? 1 : 0;
-}
 function createDynamicNotificationGlass(canvas, options = {}) {
 	const { intensity = 1, maxDpr = 2 } = options;
 	const gl = canvas.getContext("webgl", {
@@ -161,28 +153,9 @@ function createDynamicNotificationGlass(canvas, options = {}) {
 	let contextLost = gl.isContextLost();
 	let glass = contextLost ? null : buildProgram(gl);
 	if (!contextLost && !glass) return () => {};
-	let destroyed = false;
-	let intersecting = true;
-	let pageVisible = !document.hidden;
-	let rafId = 0;
 	let dpr = 1;
-	let radius = 0;
-	let aurora = auroraTarget(canvas.parentElement?.dataset.state);
-	let lift = 1 - aurora;
-	let reveal = revealTarget(canvas.parentElement?.dataset.state);
-	let settle = settleTarget(canvas.parentElement?.dataset.state);
-	let staticFrameDrawn = false;
+	const motion = createNotificationMotion(canvas.parentElement?.dataset.state);
 	const startedAt = performance.now();
-	const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-	function reducedMotion() {
-		return reducedMotionQuery.matches || canvas.closest("[data-motion=\"reduced\"]") !== null;
-	}
-	function targetRadius() {
-		const host = canvas.parentElement;
-		if (!host) return 0;
-		const parsed = Number.parseFloat(getComputedStyle(host).borderTopLeftRadius);
-		return Number.isFinite(parsed) ? parsed * dpr : 0;
-	}
 	function resize() {
 		dpr = Math.min(window.devicePixelRatio || 1, maxDpr);
 		const width = Math.max(1, Math.round(canvas.clientWidth * dpr));
@@ -192,111 +165,47 @@ function createDynamicNotificationGlass(canvas, options = {}) {
 			canvas.height = height;
 		}
 	}
-	function advanceMotion(reduced) {
-		const target = targetRadius();
-		radius = reduced ? target : radius + (target - radius) * .25;
-		const auroraGoal = auroraTarget(canvas.parentElement?.dataset.state);
-		aurora = reduced ? auroraGoal : aurora + (auroraGoal - aurora) * .06;
-		const liftGoal = auroraGoal >= .5 ? 0 : 1;
-		if (reduced) lift = liftGoal;
-		else if (liftGoal === 1) lift = Math.min(1, lift + .036);
-		else lift *= .72;
-		const revealGoal = revealTarget(canvas.parentElement?.dataset.state);
-		reveal = reduced ? revealGoal : reveal + (revealGoal - reveal) * .07;
-		const settleGoal = settleTarget(canvas.parentElement?.dataset.state);
-		settle = reduced ? settleGoal : settle + (settleGoal - settle) * .07;
-	}
-	function uploadUniforms(activeGl, activeGlass, reduced) {
-		activeGl.uniform2f(activeGlass.resolution, canvas.width, canvas.height);
-		activeGl.uniform1f(activeGlass.time, reduced ? 4.2 : (performance.now() - startedAt) / 1e3);
-		activeGl.uniform1f(activeGlass.radius, radius);
-		activeGl.uniform1f(activeGlass.intensity, intensity);
-		activeGl.uniform1f(activeGlass.aurora, aurora);
-		activeGl.uniform1f(activeGlass.reveal, reveal);
-		activeGl.uniform1f(activeGlass.settle, settle);
-		activeGl.uniform1f(activeGlass.lift, lift);
-		activeGl.uniform1f(activeGlass.ribbonHorizon, .5);
-	}
-	function draw() {
-		if (!gl || !glass || contextLost) return;
+	function render({ reduced, now, deltaMs }) {
+		const host = canvas.parentElement;
+		if (!gl || !glass || contextLost || !host) return false;
 		resize();
+		const hostRadius = Number.parseFloat(getComputedStyle(host).borderTopLeftRadius);
+		const keepAnimating = motion.advance(host.dataset.state, Number.isFinite(hostRadius) ? hostRadius * dpr : 0, reduced, deltaMs);
+		const { radius, aurora, reveal, settle, lift } = motion.values;
 		gl.viewport(0, 0, canvas.width, canvas.height);
 		gl.clearColor(0, 0, 0, 0);
 		gl.clear(gl.COLOR_BUFFER_BIT);
 		gl.useProgram(glass.program);
-		const reduced = reducedMotion();
-		advanceMotion(reduced);
-		uploadUniforms(gl, glass, reduced);
+		gl.uniform2f(glass.resolution, canvas.width, canvas.height);
+		gl.uniform1f(glass.time, reduced ? 4.2 : (now - startedAt) / 1e3);
+		gl.uniform1f(glass.radius, radius);
+		gl.uniform1f(glass.intensity, intensity);
+		gl.uniform1f(glass.aurora, aurora);
+		gl.uniform1f(glass.reveal, reveal);
+		gl.uniform1f(glass.settle, settle);
+		gl.uniform1f(glass.lift, lift);
+		gl.uniform1f(glass.ribbonHorizon, .5);
 		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 		if (canvas.dataset.glassReady !== "true") canvas.dataset.glassReady = "true";
+		return keepAnimating;
 	}
-	function visible() {
-		return intersecting && pageVisible;
-	}
-	function tick() {
-		rafId = 0;
-		if (destroyed || !visible() || contextLost) return;
-		draw();
-		if (reducedMotion()) {
-			staticFrameDrawn = true;
-			return;
-		}
-		staticFrameDrawn = false;
-		rafId = requestAnimationFrame(tick);
-	}
-	function invalidate() {
-		staticFrameDrawn = false;
-		if (destroyed || !visible() || contextLost || rafId !== 0) return;
-		rafId = requestAnimationFrame(tick);
-	}
-	function handleVisibility() {
-		pageVisible = !document.hidden;
-		invalidate();
-	}
+	const loop = createNotificationCanvasLoop(canvas, render);
 	function handleContextLost(event) {
 		event.preventDefault();
 		contextLost = true;
-		if (rafId !== 0) cancelAnimationFrame(rafId);
-		rafId = 0;
+		loop.cancel();
 	}
 	function handleContextRestored() {
 		if (!gl) return;
 		contextLost = false;
 		glass = buildProgram(gl);
-		invalidate();
-	}
-	const resizeObserver = new ResizeObserver(() => {
-		invalidate();
-	});
-	resizeObserver.observe(canvas);
-	const intersectionObserver = new IntersectionObserver((entries) => {
-		for (const entry of entries) intersecting = entry.isIntersecting;
-		invalidate();
-	}, { rootMargin: "64px" });
-	intersectionObserver.observe(canvas);
-	const motionObserver = new MutationObserver(() => {
-		if (!staticFrameDrawn || !reducedMotion()) invalidate();
-	});
-	motionObserver.observe(document.documentElement, {
-		attributes: true,
-		attributeFilter: ["data-motion"]
-	});
-	function handleMotionPreference() {
-		invalidate();
+		loop.invalidate();
 	}
-	document.addEventListener("visibilitychange", handleVisibility);
-	reducedMotionQuery.addEventListener("change", handleMotionPreference);
 	canvas.addEventListener("webglcontextlost", handleContextLost);
 	canvas.addEventListener("webglcontextrestored", handleContextRestored);
-	invalidate();
+	loop.invalidate();
 	return () => {
-		destroyed = true;
-		if (rafId !== 0) cancelAnimationFrame(rafId);
-		resizeObserver.disconnect();
-		intersectionObserver.disconnect();
-		motionObserver.disconnect();
-		document.removeEventListener("visibilitychange", handleVisibility);
-		reducedMotionQuery.removeEventListener("change", handleMotionPreference);
+		loop.destroy();
 		canvas.removeEventListener("webglcontextlost", handleContextLost);
 		canvas.removeEventListener("webglcontextrestored", handleContextRestored);
 		delete canvas.dataset.glassReady;

package/dist/dynamic-notification-liquid.js

@@ -1,3 +1,4 @@
+import { createNotificationCanvasLoop, createNotificationMotion } from "./dynamic-notification-canvas-loop.js";
 import { DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL } from "./dynamic-notification-siri-wave.js";
 import { LIQUID_GLASS_OPTICS_GLSL } from "./lib/liquid-glass-optics.js";
 //#region src/dynamic-notification-liquid.ts
@@ -192,19 +193,6 @@ function buildProgram(gl) {
 		ribbonHorizon: gl.getUniformLocation(program, "u_ribbonHorizon")
 	};
 }
-function auroraTarget(state) {
-	return state === "thinking" ? 1 : 0;
-}
-function revealTarget(state) {
-	return state === "collapsed" ? 0 : 1;
-}
-function settleTarget(state) {
-	return state === "expanded" ? 1 : 0;
-}
-function approachAt60Hz(current, target, response, deltaMs) {
-	const frameScale = Math.max(0, deltaMs) / (1e3 / 60);
-	return current + (target - current) * (1 - (1 - response) ** frameScale);
-}
 const EXCLUDE_SELECTOR = "[data-control-ui=\"dynamic-notification\"]";
 function cssImageUrls(value) {
 	return Array.from(value.matchAll(/url\((["']?)(.*?)\1\)/g), (match) => match[2]?.trim()).filter((url) => Boolean(url && !url.startsWith("data:") && !url.startsWith("#")));
@@ -434,31 +422,13 @@ function createDynamicNotificationLiquid(canvas, options = {}) {
 		};
 	}
 	let destroyed = false;
-	let intersecting = true;
-	let pageVisible = !document.hidden;
-	let rafId = 0;
 	let dpr = 1;
-	let radius = 0;
-	const initialState = canvas.parentElement?.dataset.state;
-	let aurora = auroraTarget(initialState);
-	let reveal = revealTarget(initialState);
-	let settle = settleTarget(initialState);
-	let lift = 1 - aurora;
-	let staticFrameDrawn = false;
+	const motion = createNotificationMotion(canvas.parentElement?.dataset.state);
 	let captured = null;
 	let textureFresh = false;
 	let captureToken = 0;
 	let captureTimer = 0;
 	const startedAt = performance.now();
-	let previousFrameAt = startedAt;
-	const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-	function reducedMotion() {
-		return reducedMotionQuery.matches || canvas.closest("[data-motion=\"reduced\"]") !== null;
-	}
-	function targetRadius(host) {
-		const parsed = Number.parseFloat(getComputedStyle(host).borderTopLeftRadius);
-		return Number.isFinite(parsed) ? parsed : 0;
-	}
 	function resize() {
 		dpr = Math.min(window.devicePixelRatio || 1, maxDpr);
 		const width = Math.max(1, Math.round(canvas.clientWidth * dpr));
@@ -494,36 +464,14 @@ function createDynamicNotificationLiquid(canvas, options = {}) {
 			captured = result;
 			delete canvas.dataset.glassFailed;
 			uploadTexture();
-			invalidate();
+			loop.invalidate();
 		});
 	}
 	function scheduleRecapture() {
 		window.clearTimeout(captureTimer);
 		captureTimer = window.setTimeout(recapture, 200);
 	}
-	function advanceMotion(host, reduced, deltaMs) {
-		const state = host.dataset.state;
-		const targetAurora = auroraTarget(state);
-		const targets = {
-			radius: targetRadius(host),
-			aurora: targetAurora,
-			reveal: revealTarget(state),
-			settle: settleTarget(state),
-			lift: targetAurora >= .5 ? 0 : 1
-		};
-		radius = reduced ? targets.radius : approachAt60Hz(radius, targets.radius, .25, deltaMs);
-		aurora = reduced ? targets.aurora : approachAt60Hz(aurora, targets.aurora, .06, deltaMs);
-		reveal = reduced ? targets.reveal : approachAt60Hz(reveal, targets.reveal, .07, deltaMs);
-		settle = reduced ? targets.settle : approachAt60Hz(settle, targets.settle, .07, deltaMs);
-		if (reduced) lift = targets.lift;
-		else if (targets.lift === 1) lift = Math.min(1, lift + deltaMs * .00216);
-		else lift = approachAt60Hz(lift, 0, .28, deltaMs);
-		return targets;
-	}
-	function shouldAnimate(host, reduced, targets) {
-		return !reduced && (host.dataset.state === "thinking" || Math.abs(radius - targets.radius) > .05 || Math.abs(aurora - targets.aurora) > .002 || Math.abs(reveal - targets.reveal) > .002 || Math.abs(settle - targets.settle) > .002 || Math.abs(lift - targets.lift) > .002);
-	}
-	function draw() {
+	function render({ reduced, now, deltaMs }) {
 		if (!gl || !liquid || contextLost || !textureFresh) return false;
 		const host = canvas.parentElement;
 		if (!host) return false;
@@ -531,15 +479,13 @@ function createDynamicNotificationLiquid(canvas, options = {}) {
 		const hostRect = host.getBoundingClientRect();
 		const sceneRect = scene.getBoundingClientRect();
 		if (sceneRect.width < 1 || sceneRect.height < 1) return false;
+		const hostRadius = Number.parseFloat(getComputedStyle(host).borderTopLeftRadius);
+		const keepAnimating = motion.advance(host.dataset.state, Number.isFinite(hostRadius) ? hostRadius : 0, reduced, deltaMs);
+		const { radius, aurora, reveal, settle, lift } = motion.values;
 		gl.viewport(0, 0, canvas.width, canvas.height);
 		gl.clearColor(0, 0, 0, 0);
 		gl.clear(gl.COLOR_BUFFER_BIT);
 		gl.useProgram(liquid.program);
-		const reduced = reducedMotion();
-		const now = performance.now();
-		const deltaMs = Math.min(100, now - previousFrameAt);
-		previousFrameAt = now;
-		const targets = advanceMotion(host, reduced, deltaMs);
 		gl.activeTexture(gl.TEXTURE0);
 		gl.bindTexture(gl.TEXTURE_2D, liquid.sharpTexture);
 		gl.activeTexture(gl.TEXTURE1);
@@ -566,38 +512,16 @@ function createDynamicNotificationLiquid(canvas, options = {}) {
 		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 		delete canvas.dataset.glassFailed;
 		if (canvas.dataset.glassReady !== "true") canvas.dataset.glassReady = "true";
-		return shouldAnimate(host, reduced, targets);
-	}
-	function visible() {
-		return intersecting && pageVisible;
-	}
-	function tick() {
-		rafId = 0;
-		if (destroyed || !visible() || contextLost) return;
-		if (!draw()) {
-			staticFrameDrawn = true;
-			return;
-		}
-		staticFrameDrawn = false;
-		rafId = requestAnimationFrame(tick);
-	}
-	function invalidate() {
-		staticFrameDrawn = false;
-		if (destroyed || !visible() || contextLost || rafId !== 0) return;
-		rafId = requestAnimationFrame(tick);
-	}
-	function handleVisibility() {
-		pageVisible = !document.hidden;
-		invalidate();
+		return keepAnimating;
 	}
+	const loop = createNotificationCanvasLoop(canvas, render);
 	function handleContextLost(event) {
 		event.preventDefault();
 		contextLost = true;
 		textureFresh = false;
 		delete canvas.dataset.glassReady;
 		canvas.dataset.glassFailed = "context";
-		if (rafId !== 0) cancelAnimationFrame(rafId);
-		rafId = 0;
+		loop.cancel();
 	}
 	function handleContextRestored() {
 		if (!gl) return;
@@ -608,15 +532,9 @@ function createDynamicNotificationLiquid(canvas, options = {}) {
 			return;
 		}
 		uploadTexture();
-		invalidate();
+		loop.invalidate();
 	}
-	const resizeObserver = new ResizeObserver(() => {
-		invalidate();
-	});
-	resizeObserver.observe(canvas);
-	const sceneResizeObserver = new ResizeObserver(() => {
-		scheduleRecapture();
-	});
+	const sceneResizeObserver = new ResizeObserver(scheduleRecapture);
 	sceneResizeObserver.observe(scene);
 	const sceneMutationObserver = new MutationObserver((mutations) => {
 		for (const mutation of mutations) {
@@ -632,38 +550,16 @@ function createDynamicNotificationLiquid(canvas, options = {}) {
 		childList: true,
 		subtree: true
 	});
-	const intersectionObserver = new IntersectionObserver((entries) => {
-		for (const entry of entries) intersecting = entry.isIntersecting;
-		invalidate();
-	}, { rootMargin: "64px" });
-	intersectionObserver.observe(canvas);
-	const motionObserver = new MutationObserver(() => {
-		if (!staticFrameDrawn || !reducedMotion()) invalidate();
-	});
-	motionObserver.observe(document.documentElement, {
-		attributes: true,
-		attributeFilter: ["data-motion"]
-	});
-	function handleMotionPreference() {
-		invalidate();
-	}
-	document.addEventListener("visibilitychange", handleVisibility);
-	reducedMotionQuery.addEventListener("change", handleMotionPreference);
 	canvas.addEventListener("webglcontextlost", handleContextLost);
 	canvas.addEventListener("webglcontextrestored", handleContextRestored);
 	recapture();
-	invalidate();
+	loop.invalidate();
 	return () => {
 		destroyed = true;
-		if (rafId !== 0) cancelAnimationFrame(rafId);
+		loop.destroy();
 		window.clearTimeout(captureTimer);
-		resizeObserver.disconnect();
 		sceneResizeObserver.disconnect();
 		sceneMutationObserver.disconnect();
-		intersectionObserver.disconnect();
-		motionObserver.disconnect();
-		document.removeEventListener("visibilitychange", handleVisibility);
-		reducedMotionQuery.removeEventListener("change", handleMotionPreference);
 		canvas.removeEventListener("webglcontextlost", handleContextLost);
 		canvas.removeEventListener("webglcontextrestored", handleContextRestored);
 		delete canvas.dataset.glassReady;