@ctrl-ui/react 0.8.6 → 0.8.8

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;

package/dist/dynamic-notification.d.ts

@@ -2,25 +2,31 @@ import { FormSubmitEvent, OpenChangeReason } from "./control-props.js";
 import { Button } from "./ui/button.js";
 import { DynamicNotificationKnobStyle } from "./knob-contracts/dynamic-notification-knobs.js";
 import { DynamicNotificationProps, DynamicNotificationVariant } from "./hooks/use-dynamic-notification.js";
-import { CSSProperties, ComponentProps } from "react";
+import { CSSProperties, ComponentProps, RefObject } from "react";
 //#region src/dynamic-notification.d.ts
 export type DynamicNotificationState = "collapsed" | "thinking" | "expanded";
 export declare function useDynamicNotificationContext(): {
   open: boolean;
   disabled: boolean;
-  setOpen: (nextOpen: boolean, reason: OpenChangeReason, event: Event, trigger?: Element) => void;
+  setOpen: (nextOpen: boolean, reason: OpenChangeReason, event: Event, trigger?: Element) => boolean;
   reply: string;
   setReply: (nextValue: string) => void;
   normalizedReply: string;
   canSubmit: boolean;
+  replyPending: boolean;
+  replyFailed: boolean;
   clear: () => void;
-  submitReply: () => void;
+  submitReply: () => Promise<void>;
   handleReplySubmit: (event: FormSubmitEvent) => void;
   state: DynamicNotificationState;
   variant: DynamicNotificationVariant;
   contentId: string;
+  publishMessage: (text: string) => void;
+  pillRef: RefObject<HTMLButtonElement | null>;
+  focusReplyOnExpandRef: RefObject<boolean>;
+  replyErrorLabel: string;
 };
-export declare function DynamicNotification({ open, defaultOpen, onOpenChange, loading, replyValue, defaultReplyValue, onReplyValueChange, onReply, variant, disabled, className, children, ...props }: DynamicNotificationProps): import("react").JSX.Element;
+export declare function DynamicNotification({ open, defaultOpen, onOpenChange, loading, replyValue, defaultReplyValue, onReplyValueChange, onReply, variant, disabled, thinkingLabel, replyErrorLabel, className, children, ...props }: DynamicNotificationProps): import("react").JSX.Element;
 export type DynamicNotificationIslandProps = ComponentProps<"section"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
@@ -38,7 +44,7 @@ export declare function DynamicNotificationLiquid({ className, ...props }: Dynam
 export type DynamicNotificationPillProps = ComponentProps<"button"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
-export declare function DynamicNotificationPill({ className, children, onClick, ...props }: DynamicNotificationPillProps): import("react").JSX.Element;
+export declare function DynamicNotificationPill({ className, children, onClick, ref, ...props }: DynamicNotificationPillProps): import("react").JSX.Element;
 export type DynamicNotificationIndicatorProps = ComponentProps<"span"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
@@ -61,13 +67,15 @@ export declare function DynamicNotificationMessage({ className, children, ...pro
 export type DynamicNotificationReplyProps = ComponentProps<"form"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
-export declare function DynamicNotificationReply({ className, onSubmit, ...props }: DynamicNotificationReplyProps): import("react").JSX.Element;
+export declare function DynamicNotificationReply({ className, onSubmit, children, ...props }: DynamicNotificationReplyProps): import("react").JSX.Element;
 export type DynamicNotificationReplyInputProps = ComponentProps<"input"> & {
   style?: CSSProperties & DynamicNotificationKnobStyle;
 };
 export declare function DynamicNotificationReplyInput({ className, onChange, disabled, ...props }: DynamicNotificationReplyInputProps): import("react").JSX.Element;
 export type DynamicNotificationReplySubmitProps = ComponentProps<typeof Button>;
 export declare function DynamicNotificationReplySubmit({ className, disabled, children, ...props }: DynamicNotificationReplySubmitProps): import("react").JSX.Element;
-export type DynamicNotificationCloseProps = ComponentProps<typeof Button>;
-export declare function DynamicNotificationClose({ className, children, onClick, ...props }: DynamicNotificationCloseProps): import("react").JSX.Element;
+export type DynamicNotificationCloseProps = ComponentProps<typeof Button> & {
+  collapseLabel?: string;
+};
+export declare function DynamicNotificationClose({ className, children, onClick, collapseLabel, ...props }: DynamicNotificationCloseProps): import("react").JSX.Element;
 //#endregion