@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/ui/form/index.d.ts

@@ -0,0 +1,26 @@
+import * as FormPrimitive from 'formsnap';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import FieldErrors from './form-field-errors.svelte';
+import Field from './form-field.svelte';
+import Fieldset from './form-fieldset.svelte';
+import Legend from './form-legend.svelte';
+import ElementField from './form-element-field.svelte';
+import Button from './form-button.svelte';
+declare const Control: import("svelte").Component<FormPrimitive.ControlProps, {}, "">;
+interface FormNamespace {
+    Field: typeof Field;
+    Control: typeof Control;
+    Label: typeof Label;
+    Button: typeof Button;
+    FieldErrors: typeof FieldErrors;
+    Description: typeof Description;
+    Fieldset: typeof Fieldset;
+    Legend: typeof Legend;
+    ElementField: typeof ElementField;
+    Item: typeof Field;
+    ItemErrors: typeof FieldErrors;
+    Message: typeof FieldErrors;
+}
+declare const Form: FormNamespace;
+export { Field, Control, Label, Button, FieldErrors, Description, Fieldset, Legend, ElementField, Form, Field as FormField, Field as FormItem, Control as FormControl, Description as FormDescription, Label as FormLabel, FieldErrors as FormFieldErrors, FieldErrors as FormItemErrors, FieldErrors as FormMessage, Fieldset as FormFieldset, Legend as FormLegend, ElementField as FormElementField, Button as FormButton };

package/dist/lib/components/ui/form/index.js

@@ -0,0 +1,27 @@
+import * as FormPrimitive from 'formsnap';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import FieldErrors from './form-field-errors.svelte';
+import Field from './form-field.svelte';
+import Fieldset from './form-fieldset.svelte';
+import Legend from './form-legend.svelte';
+import ElementField from './form-element-field.svelte';
+import Button from './form-button.svelte';
+const Control = FormPrimitive.Control;
+const Form = {
+    Field,
+    Control,
+    Label,
+    Button,
+    FieldErrors,
+    Description,
+    Fieldset,
+    Legend,
+    ElementField,
+    Item: Field,
+    ItemErrors: FieldErrors,
+    Message: FieldErrors
+};
+export { Field, Control, Label, Button, FieldErrors, Description, Fieldset, Legend, ElementField, Form, 
+//
+Field as FormField, Field as FormItem, Control as FormControl, Description as FormDescription, Label as FormLabel, FieldErrors as FormFieldErrors, FieldErrors as FormItemErrors, FieldErrors as FormMessage, Fieldset as FormFieldset, Legend as FormLegend, ElementField as FormElementField, Button as FormButton };

package/dist/lib/components/ui/glass-panel/glass-budget.test-fixture.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import GlassPanel from "./glass-panel.svelte";
+let { ids = [
+	0,
+	1,
+	2,
+	3,
+	4
+] } = $props();
+</script>
+
+<div data-vibes-motion="full">
+	{#each ids as id (id)}
+		<GlassPanel
+			data-testid={`budget-panel-${id}`}
+			composition="gpu"
+			fidelity="balanced"
+			style={`position: fixed; left: 400px; top: ${16 + id * 72}px; width: 160px; height: 56px;`}
+		>
+			Context {id}
+		</GlassPanel>
+	{/each}
+</div>

package/dist/lib/components/ui/glass-panel/glass-budget.test-fixture.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    ids?: number[];
+}
+declare const GlassBudget: import("svelte").Component<Props, {}, "">;
+type GlassBudget = ReturnType<typeof GlassBudget>;
+export default GlassBudget;

package/dist/lib/components/ui/glass-panel/glass-caustics.svelte

@@ -0,0 +1,448 @@
+<script lang="ts">import { onMount } from "svelte";
+import { parseThemeColor } from "../../theme/theme-contrast.js";
+import { cn } from "../../../utils.js";
+import { createGlassContextLeaseOwner, DEFAULT_VISIBLE_GLASS_CONTEXT_BUDGET, glassContextBudget } from "./glass-context-budget.js";
+import { resolveGlassCompositionPolicy } from "./glass-composition.js";
+let { fidelity = "auto", intensity = .55, speed = 1, interactive = false, class: className } = $props();
+let host;
+let renderer = $state("css");
+let animating = $state(false);
+let fallbackReason = $state("visibility-pending");
+let reconcilePolicy;
+const compositorState = $derived(fallbackReason === "visibility-pending" ? "pending" : renderer === "webgl2" ? "enhanced" : "fallback");
+const vertexSource = `#version 300 es
+		in vec2 a_position;
+		void main() {
+			gl_Position = vec4(a_position, 0.0, 1.0);
+		}`;
+const fragmentSource = `#version 300 es
+		precision highp float;
+
+		uniform vec2 u_resolution;
+		uniform float u_time;
+		uniform float u_intensity;
+		uniform vec3 u_tint_a;
+		uniform vec3 u_tint_b;
+		out vec4 out_color;
+
+		float softRibbon(float distanceFromLine, float width) {
+			return 1.0 - smoothstep(0.0, width, abs(distanceFromLine));
+		}
+
+		void main() {
+			vec2 resolution = max(u_resolution, vec2(1.0));
+			vec2 uv = gl_FragCoord.xy / resolution;
+			vec2 p = uv - 0.5;
+			p.x *= resolution.x / resolution.y;
+
+			float drift = u_time * 0.16;
+			float foldA = sin((p.x * 5.4) + drift) * 0.075;
+			float foldB = cos((p.x * 3.1) - (drift * 0.72)) * 0.11;
+			float ribbonA = softRibbon(p.y - foldA - 0.08, 0.24);
+			float ribbonB = softRibbon(p.y + foldB + 0.12, 0.34);
+			float interference = 0.5 + 0.5 * sin((p.x - p.y) * 8.0 + drift * 1.8);
+			float edgeLight = pow(clamp(1.0 - length(p * vec2(0.72, 1.0)), 0.0, 1.0), 4.0);
+
+			float light = (ribbonA * 0.48 + ribbonB * 0.27 + interference * 0.12) * edgeLight;
+			vec3 tint = mix(u_tint_a, u_tint_b, clamp(uv.x + foldA * 2.0, 0.0, 1.0));
+			float alpha = clamp(light * u_intensity, 0.0, 0.34);
+
+			out_color = vec4(tint * alpha, alpha);
+		}`;
+function compileShader(gl, type, source) {
+	const shader = gl.createShader(type);
+	if (!shader) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
+	gl.deleteShader(shader);
+	return null;
+}
+function abandonContext(gl) {
+	gl.getExtension("WEBGL_lose_context")?.loseContext();
+}
+function createRenderer(canvasElement, quality) {
+	const gl = canvasElement.getContext("webgl2", {
+		alpha: true,
+		antialias: false,
+		depth: false,
+		stencil: false,
+		premultipliedAlpha: true,
+		powerPreference: quality === "cinematic" ? "high-performance" : "low-power"
+	});
+	if (!gl) return null;
+	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
+	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+	if (!vertexShader || !fragmentShader) {
+		if (vertexShader) gl.deleteShader(vertexShader);
+		if (fragmentShader) gl.deleteShader(fragmentShader);
+		abandonContext(gl);
+		return null;
+	}
+	const program = gl.createProgram();
+	if (!program) {
+		gl.deleteShader(vertexShader);
+		gl.deleteShader(fragmentShader);
+		abandonContext(gl);
+		return null;
+	}
+	gl.attachShader(program, vertexShader);
+	gl.attachShader(program, fragmentShader);
+	gl.linkProgram(program);
+	gl.deleteShader(vertexShader);
+	gl.deleteShader(fragmentShader);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+		gl.deleteProgram(program);
+		abandonContext(gl);
+		return null;
+	}
+	const positionBuffer = gl.createBuffer();
+	if (!positionBuffer) {
+		gl.deleteProgram(program);
+		abandonContext(gl);
+		return null;
+	}
+	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+		-1,
+		-1,
+		3,
+		-1,
+		-1,
+		3
+	]), gl.STATIC_DRAW);
+	const positionLocation = gl.getAttribLocation(program, "a_position");
+	if (positionLocation < 0) {
+		gl.deleteBuffer(positionBuffer);
+		gl.deleteProgram(program);
+		abandonContext(gl);
+		return null;
+	}
+	return {
+		gl,
+		program,
+		positionBuffer,
+		positionLocation,
+		resolutionLocation: gl.getUniformLocation(program, "u_resolution"),
+		timeLocation: gl.getUniformLocation(program, "u_time"),
+		intensityLocation: gl.getUniformLocation(program, "u_intensity"),
+		tintALocation: gl.getUniformLocation(program, "u_tint_a"),
+		tintBLocation: gl.getUniformLocation(program, "u_tint_b")
+	};
+}
+function releaseRenderer(resources) {
+	if (!resources || resources.gl.isContextLost()) return;
+	resources.gl.deleteBuffer(resources.positionBuffer);
+	resources.gl.deleteProgram(resources.program);
+}
+function cssTriplet(element, name, fallback) {
+	const value = element.ownerDocument.defaultView?.getComputedStyle(element).getPropertyValue(name).trim() ?? "";
+	const color = parseThemeColor(value);
+	if (color) return [
+		color.r,
+		color.g,
+		color.b
+	];
+	const parts = value.split(/\s+/).map(Number);
+	if (parts.length !== 3 || parts.some((part) => !Number.isFinite(part))) return fallback;
+	return [
+		parts[0],
+		parts[1],
+		parts[2]
+	];
+}
+onMount(() => {
+	const document = host.ownerDocument;
+	const view = document.defaultView;
+	if (!view) return;
+	const reducedMotionQuery = view.matchMedia("(prefers-reduced-motion: reduce)");
+	const reducedTransparencyQuery = view.matchMedia("(prefers-reduced-transparency: reduce)");
+	const forcedColorsQuery = view.matchMedia("(forced-colors: active)");
+	const slowUpdateQuery = view.matchMedia("(update: slow)");
+	const motionRoot = host.closest("[data-vibes-motion]");
+	const backdropFilter = view.CSS?.supports?.("backdrop-filter", "blur(1px)") === true || view.CSS?.supports?.("-webkit-backdrop-filter", "blur(1px)") === true;
+	const contextLeaseOwner = createGlassContextLeaseOwner();
+	let disposed = false;
+	let visible = false;
+	let visibilityKnown = false;
+	let canvasElement = null;
+	let resources = null;
+	let contextLost = false;
+	let policy = resolveGlassCompositionPolicy("gpu", fidelity, {
+		webgl2: Boolean(view.WebGL2RenderingContext),
+		backdropFilter,
+		reducedMotion: reducedMotionQuery.matches,
+		reducedTransparency: reducedTransparencyQuery.matches,
+		forcedColors: forcedColorsQuery.matches,
+		slowUpdate: slowUpdateQuery.matches,
+		visible: false,
+		motionMode: "full"
+	});
+	let animationFrame = 0;
+	let lastFrameAt = 0;
+	let settleAt = 0;
+	let compositionTime = 0;
+	const stopAnimation = () => {
+		if (animationFrame) view.cancelAnimationFrame(animationFrame);
+		animationFrame = 0;
+		lastFrameAt = 0;
+		settleAt = 0;
+		animating = false;
+	};
+	const readMotionMode = () => {
+		const value = motionRoot?.dataset.vibesMotion;
+		return value === "off" || value === "reduced" ? value : "full";
+	};
+	const resize = () => {
+		if (!resources || !canvasElement) return;
+		const bounds = host.getBoundingClientRect();
+		const dpr = Math.min(view.devicePixelRatio || 1, policy.maxDevicePixelRatio);
+		const width = Math.max(1, Math.round(bounds.width * dpr));
+		const height = Math.max(1, Math.round(bounds.height * dpr));
+		if (canvasElement.width !== width || canvasElement.height !== height) {
+			canvasElement.width = width;
+			canvasElement.height = height;
+		}
+		resources.gl.viewport(0, 0, width, height);
+	};
+	const draw = () => {
+		if (!resources || !canvasElement) return;
+		resize();
+		const { gl, program } = resources;
+		const tintA = cssTriplet(host, "--vibes-glass-caustic-a", [
+			.63,
+			.79,
+			1
+		]);
+		const tintB = cssTriplet(host, "--vibes-glass-caustic-b", [
+			.8,
+			.64,
+			1
+		]);
+		gl.useProgram(program);
+		gl.bindBuffer(gl.ARRAY_BUFFER, resources.positionBuffer);
+		gl.enableVertexAttribArray(resources.positionLocation);
+		gl.vertexAttribPointer(resources.positionLocation, 2, gl.FLOAT, false, 0, 0);
+		gl.uniform2f(resources.resolutionLocation, canvasElement.width, canvasElement.height);
+		gl.uniform1f(resources.timeLocation, compositionTime * Math.max(0, speed));
+		gl.uniform1f(resources.intensityLocation, Math.min(1, Math.max(0, intensity)));
+		gl.uniform3f(resources.tintALocation, tintA[0], tintA[1], tintA[2]);
+		gl.uniform3f(resources.tintBLocation, tintB[0], tintB[1], tintB[2]);
+		gl.clearColor(0, 0, 0, 0);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+		gl.drawArrays(gl.TRIANGLES, 0, 3);
+	};
+	const onContextLost = (event) => {
+		event.preventDefault();
+		stopAnimation();
+		resources = null;
+		contextLost = true;
+		glassContextBudget.release(contextLeaseOwner);
+		renderer = "css";
+		fallbackReason = "webgl2-unavailable";
+	};
+	const onContextRestored = () => {
+		contextLost = false;
+		if (!disposed) reconcile();
+	};
+	const ensureCanvas = () => {
+		if (canvasElement) return canvasElement;
+		const nextCanvas = document.createElement("canvas");
+		nextCanvas.addEventListener("webglcontextlost", onContextLost);
+		nextCanvas.addEventListener("webglcontextrestored", onContextRestored);
+		host.appendChild(nextCanvas);
+		canvasElement = nextCanvas;
+		return nextCanvas;
+	};
+	const destroyRenderer = () => {
+		stopAnimation();
+		const currentResources = resources;
+		resources = null;
+		if (currentResources) {
+			const loseContext = currentResources.gl.getExtension("WEBGL_lose_context");
+			releaseRenderer(currentResources);
+			loseContext?.loseContext();
+		}
+		if (canvasElement) {
+			canvasElement.removeEventListener("webglcontextlost", onContextLost);
+			canvasElement.removeEventListener("webglcontextrestored", onContextRestored);
+			canvasElement.width = 1;
+			canvasElement.height = 1;
+			canvasElement.remove();
+			canvasElement = null;
+		}
+		contextLost = false;
+		glassContextBudget.release(contextLeaseOwner);
+	};
+	const animate = (timestamp) => {
+		if (!policy.animate || !resources || timestamp >= settleAt) {
+			animationFrame = 0;
+			lastFrameAt = 0;
+			animating = false;
+			return;
+		}
+		const minimumFrameTime = 1e3 / policy.framesPerSecond;
+		if (!lastFrameAt || timestamp - lastFrameAt >= minimumFrameTime) {
+			const delta = lastFrameAt ? Math.min((timestamp - lastFrameAt) / 1e3, .05) : 0;
+			compositionTime += delta;
+			draw();
+			lastFrameAt = timestamp;
+		}
+		animationFrame = view.requestAnimationFrame(animate);
+	};
+	const startInteractionResponse = () => {
+		if (!interactive || !policy.animate || !resources) return;
+		if (animationFrame) return;
+		settleAt = view.performance.now() + 650;
+		animating = true;
+		animationFrame = view.requestAnimationFrame(animate);
+	};
+	const setCssFallback = (reason) => {
+		destroyRenderer();
+		renderer = "css";
+		fallbackReason = reason;
+	};
+	const reconcile = () => {
+		if (disposed) return;
+		if (!visibilityKnown) {
+			setCssFallback("visibility-pending");
+			return;
+		}
+		const constraints = {
+			webgl2: Boolean(view.WebGL2RenderingContext),
+			backdropFilter,
+			reducedMotion: reducedMotionQuery.matches,
+			reducedTransparency: reducedTransparencyQuery.matches,
+			forcedColors: forcedColorsQuery.matches,
+			slowUpdate: slowUpdateQuery.matches,
+			visible: visible && !document.hidden,
+			motionMode: readMotionMode()
+		};
+		policy = resolveGlassCompositionPolicy("gpu", fidelity, constraints);
+		if (policy.renderer === "css") {
+			setCssFallback(policy.fallbackReason ?? "webgl2-unavailable");
+			return;
+		}
+		if (contextLost) {
+			stopAnimation();
+			renderer = "css";
+			fallbackReason = "webgl2-unavailable";
+			return;
+		}
+		if (!glassContextBudget.acquire(contextLeaseOwner)) {
+			setCssFallback("context-budget-exhausted");
+			return;
+		}
+		if (!resources) resources = createRenderer(ensureCanvas(), fidelity);
+		if (!resources) {
+			setCssFallback("webgl2-unavailable");
+			return;
+		}
+		renderer = "webgl2";
+		fallbackReason = null;
+		draw();
+		stopAnimation();
+	};
+	reconcilePolicy = reconcile;
+	const onResize = () => {
+		if (resources) draw();
+	};
+	const resizeObserver = view.ResizeObserver ? new view.ResizeObserver(onResize) : null;
+	if (resizeObserver) resizeObserver.observe(host);
+	else view.addEventListener("resize", onResize);
+	const intersectionObserver = view.IntersectionObserver ? new view.IntersectionObserver((entries) => {
+		visibilityKnown = true;
+		visible = entries[0]?.isIntersecting ?? false;
+		reconcile();
+	}, { threshold: .01 }) : null;
+	if (intersectionObserver) intersectionObserver.observe(host);
+	else {
+		visibilityKnown = true;
+		visible = true;
+	}
+	const onCapabilityChange = () => reconcile();
+	const capabilityQueries = [
+		reducedMotionQuery,
+		reducedTransparencyQuery,
+		forcedColorsQuery,
+		slowUpdateQuery
+	];
+	for (const query of capabilityQueries) query.addEventListener("change", onCapabilityChange);
+	const motionObserver = motionRoot ? new view.MutationObserver(() => reconcile()) : null;
+	if (motionRoot && motionObserver) {
+		motionObserver.observe(motionRoot, {
+			attributes: true,
+			attributeFilter: ["data-vibes-motion"]
+		});
+	}
+	const themeObserver = new view.MutationObserver(() => {
+		if (resources) draw();
+	});
+	themeObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: [
+			"class",
+			"style",
+			"data-theme"
+		]
+	});
+	const themeRoot = host.closest("[data-theme]");
+	if (themeRoot && themeRoot !== document.documentElement) {
+		themeObserver.observe(themeRoot, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"style",
+				"data-theme"
+			]
+		});
+	}
+	const interactionTarget = host.parentElement;
+	interactionTarget?.addEventListener("pointerenter", startInteractionResponse);
+	interactionTarget?.addEventListener("pointermove", startInteractionResponse);
+	interactionTarget?.addEventListener("focusin", startInteractionResponse);
+	const unsubscribeBudget = glassContextBudget.subscribe(() => {
+		if (!resources) reconcile();
+	});
+	document.addEventListener("visibilitychange", reconcile);
+	reconcile();
+	return () => {
+		disposed = true;
+		reconcilePolicy = undefined;
+		unsubscribeBudget();
+		resizeObserver?.disconnect();
+		intersectionObserver?.disconnect();
+		view.removeEventListener("resize", onResize);
+		motionObserver?.disconnect();
+		themeObserver.disconnect();
+		interactionTarget?.removeEventListener("pointerenter", startInteractionResponse);
+		interactionTarget?.removeEventListener("pointermove", startInteractionResponse);
+		interactionTarget?.removeEventListener("focusin", startInteractionResponse);
+		document.removeEventListener("visibilitychange", reconcile);
+		for (const query of capabilityQueries) {
+			query.removeEventListener("change", onCapabilityChange);
+		}
+		destroyRenderer();
+	};
+});
+$effect(() => {
+	const nextFidelity = fidelity;
+	const nextIntensity = intensity;
+	const nextSpeed = speed;
+	if (nextFidelity && Number.isFinite(nextIntensity) && Number.isFinite(nextSpeed)) {
+		reconcilePolicy?.();
+	}
+});
+</script>
+
+<div
+	bind:this={host}
+	data-slot="glass-caustics"
+	data-glass-state={compositorState}
+	data-glass-renderer={renderer}
+	data-glass-animating={animating ? 'true' : 'false'}
+	data-glass-fallback={fallbackReason ?? undefined}
+	data-glass-context-budget={DEFAULT_VISIBLE_GLASS_CONTEXT_BUDGET}
+	class={cn('vibes-glass-compositor', className)}
+	aria-hidden="true"
+></div>

package/dist/lib/components/ui/glass-panel/glass-caustics.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type GlassPanelFidelity } from './glass-composition.ts';
+interface Props {
+    fidelity?: GlassPanelFidelity;
+    intensity?: number;
+    speed?: number;
+    interactive?: boolean;
+    class?: string;
+}
+declare const GlassCaustics: import("svelte").Component<Props, {}, "">;
+type GlassCaustics = ReturnType<typeof GlassCaustics>;
+export default GlassCaustics;

package/dist/lib/components/ui/glass-panel/glass-composition.d.ts

@@ -0,0 +1,26 @@
+export type GlassPanelFidelity = 'auto' | 'simple' | 'balanced' | 'cinematic';
+export type GlassPanelComposition = 'css' | 'gpu';
+export type GlassCompositionRenderer = 'css' | 'webgl2';
+export type GlassCompositionFallbackReason = 'css-requested' | 'simple-fidelity' | 'webgl2-unavailable' | 'backdrop-filter-unavailable' | 'context-budget-exhausted' | 'visibility-pending' | 'offscreen' | 'reduced-transparency' | 'forced-colors' | 'slow-update' | 'reduced-motion';
+export interface GlassCompositionSignals {
+    webgl2: boolean;
+    backdropFilter: boolean;
+    reducedMotion: boolean;
+    reducedTransparency: boolean;
+    forcedColors: boolean;
+    slowUpdate: boolean;
+    visible: boolean;
+    motionMode: 'full' | 'reduced' | 'off';
+}
+export interface GlassCompositionPolicy {
+    renderer: GlassCompositionRenderer;
+    animate: boolean;
+    framesPerSecond: 30 | 60;
+    maxDevicePixelRatio: 1 | 1.5 | 2;
+    fallbackReason: GlassCompositionFallbackReason | null;
+}
+/**
+ * Resolve an optional visual enhancement without turning it into a product or
+ * runtime capability. Accessibility and display constraints always win.
+ */
+export declare function resolveGlassCompositionPolicy(composition: GlassPanelComposition, fidelity: GlassPanelFidelity, signals: GlassCompositionSignals): GlassCompositionPolicy;

package/dist/lib/components/ui/glass-panel/glass-composition.js

@@ -0,0 +1,43 @@
+/**
+ * Resolve an optional visual enhancement without turning it into a product or
+ * runtime capability. Accessibility and display constraints always win.
+ */
+export function resolveGlassCompositionPolicy(composition, fidelity, signals) {
+    const framesPerSecond = fidelity === 'cinematic' ? 60 : 30;
+    const maxDevicePixelRatio = fidelity === 'cinematic' ? 2 : fidelity === 'simple' ? 1 : 1.5;
+    const fallbackReason = composition === 'css'
+        ? 'css-requested'
+        : fidelity === 'simple'
+            ? 'simple-fidelity'
+            : !signals.webgl2
+                ? 'webgl2-unavailable'
+                : !signals.backdropFilter
+                    ? 'backdrop-filter-unavailable'
+                    : signals.reducedTransparency
+                        ? 'reduced-transparency'
+                        : signals.forcedColors
+                            ? 'forced-colors'
+                            : signals.slowUpdate
+                                ? 'slow-update'
+                                : signals.reducedMotion || signals.motionMode !== 'full'
+                                    ? 'reduced-motion'
+                                    : !signals.visible
+                                        ? 'offscreen'
+                                        : null;
+    if (fallbackReason) {
+        return {
+            renderer: 'css',
+            animate: false,
+            framesPerSecond,
+            maxDevicePixelRatio,
+            fallbackReason
+        };
+    }
+    return {
+        renderer: 'webgl2',
+        animate: true,
+        framesPerSecond,
+        maxDevicePixelRatio,
+        fallbackReason: null
+    };
+}

package/dist/lib/components/ui/glass-panel/glass-context-budget.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Browsers impose a shared WebGL context ceiling. Keep decorative glass in this
+ * loaded VibesKit realm comfortably below it so product canvases retain priority.
+ */
+export declare const DEFAULT_VISIBLE_GLASS_CONTEXT_BUDGET = 4;
+/** One compositor's claim on a context; the budget tracks each owner by identity. */
+export interface GlassContextLeaseOwner {
+    readonly id: symbol;
+}
+export declare function createGlassContextLeaseOwner(): GlassContextLeaseOwner;
+export interface GlassContextBudget {
+    readonly capacity: number;
+    readonly activeCount: number;
+    acquire(owner: GlassContextLeaseOwner): boolean;
+    has(owner: GlassContextLeaseOwner): boolean;
+    release(owner: GlassContextLeaseOwner): void;
+    subscribe(listener: () => void): () => void;
+}
+export declare function createGlassContextBudget(capacity?: number): GlassContextBudget;
+export declare const glassContextBudget: GlassContextBudget;