@rinzai/zen 0.6.0 → 0.7.0

package/dist/utils/styles.d.ts

@@ -1,5 +1,10 @@
-/** Shared field look: faint glass, hairline border lit by the pointer, violet glow on focus. */
+/** Shared field look: faint glass, a hairline in the glow colour (white would grey it out) lit by the pointer, violet glow on focus. */
 export declare const FIELD: string;
+/** A picker's previous/next arrows (Calendar, MonthPicker). */
+export declare const PICKER_NAV = "text-muted-foreground cursor-pointer hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 grid size-8 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2";
+/** A month in a picker's month grid (Calendar, MonthPicker); add PICKER_MONTH_ON for the chosen one. */
+export declare const PICKER_MONTH = "cursor-pointer rounded-lg py-2 text-sm outline-hidden transition-colors disabled:cursor-not-allowed disabled:opacity-35 focus-visible:ring-ring/50 focus-visible:ring-2 hover:bg-tint/[0.07]";
+export declare const PICKER_MONTH_ON = "bg-primary text-primary-foreground hover:bg-primary";
 /** Glow a trigger carries while its popup is open. */
 export declare const TRIGGER_OPEN = "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]";
 /** Trigger for popup fields (dropdown): a field that glows while open. */
@@ -8,9 +13,10 @@ export declare const TRIGGER: string;
 export declare const POPUP = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/0.5)] outline-hidden";
 /** Pills (and TabList variant="pills"): a glass track… */
 export declare const PILL_TRACK = "glow-edge relative flex w-fit items-center gap-1 rounded-full border border-tint/5 bg-tint/[0.03] p-1";
-/** …a glowing pill that slides to the active item… */
+/** …a glowing pill that slides to the active item (its look is repeated in theme.css, for before it's measured)… */
 export declare const PILL_INDICATOR = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/0.6)] transition-[translate,width] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]";
-/** …and items that sit above it, lit when current (a link) or selected (a tab). */
+/** …and items that sit above it, lit when current (a link) or selected (a tab). Only their text colour
+ * transitions: the pill they wear before the indicator is measured (theme.css) must go at once. */
 export declare const PILL: string;
 /**
  * For a wrapper whose child input takes focus (InputGroup): FIELD, lit by

package/dist/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../packages/utils/styles.ts"],"names":[],"mappings":"AAEA,gGAAgG;AAChG,eAAO,MAAM,KAAK,QAKmC,CAAC;AAEtD,sDAAsD;AACtD,eAAO,MAAM,YAAY,qIAC6G,CAAC;AAEvI,0EAA0E;AAC1E,eAAO,MAAM,OAAO,QAAgF,CAAC;AAErG,oEAAoE;AACpE,eAAO,MAAM,KAAK,kIACiH,CAAC;AAEpI,0DAA0D;AAC1D,eAAO,MAAM,UAAU,0GACoF,CAAC;AAE5G,sDAAsD;AACtD,eAAO,MAAM,cAAc,iOACuM,CAAC;AAEnO,mFAAmF;AACnF,eAAO,MAAM,IAAI,QAEkG,CAAC;AAEpH;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAK4B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../packages/utils/styles.ts"],"names":[],"mappings":"AAEA,wIAAwI;AACxI,eAAO,MAAM,KAAK,QAKmC,CAAC;AAEtD,+DAA+D;AAC/D,eAAO,MAAM,UAAU,+MACyL,CAAC;AAEjN,wGAAwG;AACxG,eAAO,MAAM,YAAY,iMACyK,CAAC;AACnM,eAAO,MAAM,eAAe,wDAAwD,CAAC;AAErF,sDAAsD;AACtD,eAAO,MAAM,YAAY,qIAC6G,CAAC;AAEvI,0EAA0E;AAC1E,eAAO,MAAM,OAAO,QAA+F,CAAC;AAEpH,oEAAoE;AACpE,eAAO,MAAM,KAAK,kIACiH,CAAC;AAEpI,0DAA0D;AAC1D,eAAO,MAAM,UAAU,0GACoF,CAAC;AAE5G,oHAAoH;AACpH,eAAO,MAAM,cAAc,iOACuM,CAAC;AAEnO;mGACmG;AACnG,eAAO,MAAM,IAAI,QAEkG,CAAC;AAEpH;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAK4B,CAAC"}

package/dist/utils/styles.js

@@ -1,6 +1,6 @@
 "use client";
 import { cx as e } from "./cx.js";
 //#region packages/utils/styles.ts
-var t = "glow-border h-10 rounded-lg border [--glow-border-color:oklch(var(--tint)/0.1)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-muted-foreground hover:[--glow-border-color:oklch(var(--tint)/0.2)] focus-visible:border-glow/60 focus-visible:[--glow-border-color:transparent] focus-visible:bg-tint/[0.05] focus-visible:shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)] focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", n = "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", r = e(t, "inline-flex items-center justify-between gap-2 whitespace-nowrap"), i = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/0.5)] outline-hidden", a = "glow-edge relative flex w-fit items-center gap-1 rounded-full border border-tint/5 bg-tint/[0.03] p-1", o = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/0.6)] transition-[translate,width] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]", s = "relative z-10 rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap outline-hidden transition-colors duration-300 select-none focus-visible:ring-2 focus-visible:ring-ring/40 text-muted-foreground hover:text-foreground aria-[current=page]:text-foreground aria-selected:text-foreground", c = "glow-border flex w-full items-center gap-1.5 h-10 rounded-lg border [--glow-border-color:oklch(var(--tint)/0.1)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-muted-foreground hover:[--glow-border-color:oklch(var(--tint)/0.2)] focus-within:border-glow/60 focus-within:[--glow-border-color:transparent] focus-within:bg-tint/[0.05] focus-within:shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)] focus-within:outline-hidden disabled:cursor-not-allowed disabled:opacity-50";
+var t = "glow-border h-10 rounded-lg border [--glow-border-color:oklch(var(--glow)/0.22)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-muted-foreground hover:[--glow-border-color:oklch(var(--glow)/0.4)] focus-visible:border-glow/60 focus-visible:[--glow-border-color:transparent] focus-visible:bg-tint/[0.05] focus-visible:shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)] focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", n = "text-muted-foreground cursor-pointer hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 grid size-8 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", r = "cursor-pointer rounded-lg py-2 text-sm outline-hidden transition-colors disabled:cursor-not-allowed disabled:opacity-35 focus-visible:ring-ring/50 focus-visible:ring-2 hover:bg-tint/[0.07]", i = "bg-primary text-primary-foreground hover:bg-primary", a = "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", o = e(t, "inline-flex cursor-pointer items-center justify-between gap-2 whitespace-nowrap"), s = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/0.5)] outline-hidden", c = "glow-edge relative flex w-fit items-center gap-1 rounded-full border border-tint/5 bg-tint/[0.03] p-1", l = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/0.6)] transition-[translate,width] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]", u = "relative z-10 cursor-pointer disabled:cursor-not-allowed rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap outline-hidden transition-[color] duration-300 select-none focus-visible:ring-2 focus-visible:ring-ring/40 text-muted-foreground hover:text-foreground aria-[current=page]:text-foreground aria-selected:text-foreground", d = "glow-border flex w-full items-center gap-1.5 h-10 rounded-lg border [--glow-border-color:oklch(var(--glow)/0.22)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-muted-foreground hover:[--glow-border-color:oklch(var(--glow)/0.4)] focus-within:border-glow/60 focus-within:[--glow-border-color:transparent] focus-within:bg-tint/[0.05] focus-within:shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)] focus-within:outline-hidden disabled:cursor-not-allowed disabled:opacity-50";
 //#endregion
-export { t as FIELD, c as FIELD_WITHIN, s as PILL, o as PILL_INDICATOR, a as PILL_TRACK, i as POPUP, r as TRIGGER, n as TRIGGER_OPEN };
+export { t as FIELD, d as FIELD_WITHIN, r as PICKER_MONTH, i as PICKER_MONTH_ON, n as PICKER_NAV, u as PILL, l as PILL_INDICATOR, c as PILL_TRACK, s as POPUP, o as TRIGGER, a as TRIGGER_OPEN };

package/dist/utils/theme-wave.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Gets the water ready before a switch, e.g. when the pointer or focus reaches
+ * the button: its shader is compiled and drawn once, off the page. The GPU
+ * driver otherwise finishes that work on the first frame of the first switch,
+ * which then hitches.
+ */
+export declare function prepareThemeWave(): void;
+/**
+ * Changes the theme (`change` swaps the classes or variables) like a drop
+ * falling into water at `from` (an element's centre, or a point; the screen's
+ * centre by default). Into a light theme, the new theme spreads in a wavy
+ * ring; into a dark one, the old theme is pulled into the point. Ripples trail the ring's edge, glinting in the
+ * theme's glow colours, and the edge shimmers like a soap film. The water is
+ * drawn on the GPU, over the page, which itself doesn't bend. Without a GPU
+ * (lite graphics, or no WebGL), without view transitions, or with reduced
+ * motion (the OS setting or html.reduce-motion), the theme just changes: drawn
+ * on the CPU, even a plain full-screen circle stutters. Call prepareThemeWave
+ * when the pointer or focus reaches the switch, so the first switch is smooth.
+ */
+export declare function themeWave(change: () => void, from?: Element | {
+    x: number;
+    y: number;
+} | null): void;
+//# sourceMappingURL=theme-wave.d.ts.map

package/dist/utils/theme-wave.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-wave.d.ts","sourceRoot":"","sources":["../../packages/utils/theme-wave.ts"],"names":[],"mappings":"AA+MA;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,IAAI,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,GAAG,IAAI,CA0HpG"}

package/dist/utils/theme-wave.js

@@ -0,0 +1,219 @@
+"use client";
+import { applyGraphicsMode as e } from "./graphics.js";
+import { oklchToLinearRgb as t } from "./theme.js";
+//#region packages/utils/theme-wave.ts
+var n = 1330, r = [
+	.25,
+	.55,
+	.35,
+	1
+], i = 1050, a = [
+	.55,
+	0,
+	.85,
+	.35
+], o = .05, s = 36, c = [
+	[
+		3,
+		1.9,
+		.5
+	],
+	[
+		5,
+		-2.7,
+		.3
+	],
+	[
+		8,
+		4.1,
+		.2
+	]
+], l = 48, u = 72, d = "zen-theme-waving", f = "zen-theme-closing", p = "zen-theme-water", m = 0;
+function h([e, t, n, r], i) {
+	let a = (e, t, n) => 3 * e * n * (1 - n) ** 2 + 3 * t * n ** 2 * (1 - n) + n ** 3, o = 0, s = 1;
+	for (let t = 0; t < 24; t++) {
+		let t = (o + s) / 2;
+		a(e, n, t) < i ? o = t : s = t;
+	}
+	return a(t, r, (o + s) / 2);
+}
+function g(e, t, n, r) {
+	return Math.min(s, o * t) * c.reduce((t, [i, a, o], s) => t + o * Math.sin(i * e + a * n + r * (s + 1)), 0);
+}
+var _ = `
+precision highp float;
+uniform vec2 res;
+uniform float dpr;
+uniform vec2 from;
+uniform float time;
+uniform float seed;
+uniform float strength;
+// 1 while the edge spreads out, -1 while it closes in.
+uniform float dir;
+uniform float edge;
+uniform float prism;
+uniform vec3 aurora[3];
+uniform float light;
+
+float wobble(float a, float r) {
+    float size = min(${s.toFixed(1)}, ${o.toFixed(3)} * r);
+    return size * (${c.map(([e, t, n], r) => `${n.toFixed(2)} * sin(${e.toFixed(1)} * a + ${t.toFixed(2)} * time + seed * ${(r + 1).toFixed(1)})`).join(" + ")});
+}
+
+// A train of ripples whose front is x px away (ahead of it when positive, as it moves):
+// a steep front, crests fading out behind it, and running outwards through
+// the train faster than it spreads, as on water.
+float ripples(float x, float wavelength) {
+    float k = 6.2832 / wavelength;
+    float reach = x < 0.0 ? 2.5 * wavelength : 0.35 * wavelength;
+    return exp(-x * x / (2.0 * reach * reach)) * cos(k * x - 7.0 * time) / k;
+}
+
+float height(vec2 p, float a) {
+    return strength * ripples(dir * (distance(p, from) - edge - wobble(a, edge)), 20.0 + 0.02 * edge);
+}
+
+// Light from the top left. A glint off a surface of this slope, bent a little
+// more or less for each colour, so glints split into a rainbow at their edges.
+const vec3 LIGHT = vec3(-0.45, -0.55, 0.7);
+float glint(vec2 slope, float bend) {
+    vec3 n = normalize(vec3(-slope * bend, 1.0));
+    vec3 mid = normalize(normalize(LIGHT) + vec3(0.0, 0.0, 1.0));
+    return max(0.0, pow(max(dot(n, mid), 0.0), 40.0) - pow(mid.z, 40.0));
+}
+
+void main() {
+    vec2 p = vec2(gl_FragCoord.x, res.y - gl_FragCoord.y) / dpr;
+    vec2 v = p - from;
+    float a = atan(v.y, v.x);
+    float h = height(p, a);
+    vec2 slope = 0.9 * vec2(height(p + vec2(1.0, 0.0), a) - h, height(p + vec2(0.0, 1.0), a) - h);
+
+    // Aurora: the glow colours, drifting round the circle.
+    float hue = fract(a / 6.2832 + 0.15 * time + length(v) * 0.0008) * 3.0;
+    vec3 tint = hue < 1.0 ? mix(aurora[0], aurora[1], hue)
+        : hue < 2.0 ? mix(aurora[1], aurora[2], hue - 1.0)
+        : mix(aurora[2], aurora[0], hue - 2.0);
+
+    // How far from the edge (outside it when positive).
+    float e = length(v) - edge - wobble(a, edge);
+    // Iridescence, as on a soap film: the colour turns with the film's thickness,
+    // which swells and thins round the ring and over time, slowly, and in soft
+    // colours: nothing flickers, or flashes saturated colour (photosensitivity).
+    float film = 0.02 * e + 0.35 * sin(2.0 * a + 0.6 * time + seed) + 0.25 * sin(5.0 * a - 0.9 * time) + 0.25 * time;
+    vec3 sheen = mix(mix(tint, 0.5 + 0.5 * cos(6.2832 * (film + vec3(0.0, 0.33, 0.67))), 0.5), vec3(1.0), 0.2);
+
+    vec3 spark = vec3(glint(slope, 0.8), glint(slope, 1.0), glint(slope, 1.2));
+    // Slopes facing the light are lit, the others shaded.
+    float facing = dot(normalize(vec3(-slope, 1.0)), normalize(LIGHT)) - normalize(LIGHT).z;
+    vec3 color = 1.6 * spark * mix(vec3(1.0), mix(tint, sheen, 0.6), mix(0.4, 0.85, light)) + 0.6 * max(facing, 0.0) * tint;
+    float shade = mix(0.7, 0.45, light) * max(-facing, 0.0);
+
+    // The edge: a band of sheen with a bright core, and the aurora trailing behind.
+    color += prism * (0.9 * sheen * exp(-e * e / 160.0) + 0.5 * exp(-e * e / 6.0));
+    color += prism * 0.45 * tint * exp(-(e + 28.0 * dir) * (e + 28.0 * dir) / 1800.0);
+
+    color = clamp(color, 0.0, 1.0);
+    float cover = max(color.r, max(color.g, color.b));
+    gl_FragColor = vec4(color, cover + shade * (1.0 - cover));
+}`, v = "attribute vec2 at; void main() { gl_Position = vec4(at, 0.0, 1.0); }", y;
+function b() {
+	if (y !== void 0) return y;
+	y = null;
+	let e = document.createElement("canvas");
+	e.setAttribute("aria-hidden", "true"), e.style.cssText = `position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2147483647;view-transition-name:${p}`;
+	let t = e.getContext("webgl", {
+		premultipliedAlpha: !0,
+		antialias: !1
+	}), n = t?.createProgram();
+	if (!t || !n) return null;
+	for (let [e, r] of [[t.VERTEX_SHADER, v], [t.FRAGMENT_SHADER, _]]) {
+		let i = t.createShader(e);
+		if (!i) return null;
+		t.shaderSource(i, r), t.compileShader(i), t.attachShader(n, i);
+	}
+	if (t.bindAttribLocation(n, 0, "at"), t.linkProgram(n), !t.getProgramParameter(n, t.LINK_STATUS)) return null;
+	t.useProgram(n), t.bindBuffer(t.ARRAY_BUFFER, t.createBuffer()), t.bufferData(t.ARRAY_BUFFER, new Float32Array([
+		-1,
+		-1,
+		3,
+		-1,
+		-1,
+		3
+	]), t.STATIC_DRAW), t.enableVertexAttribArray(0), t.vertexAttribPointer(0, 2, t.FLOAT, !1, 0, 0);
+	let r = /* @__PURE__ */ new Map();
+	return y = {
+		canvas: e,
+		gl: t,
+		uniform: (e) => (r.has(e) || r.set(e, t.getUniformLocation(n, e)), r.get(e))
+	}, y;
+}
+function x(e) {
+	e.gl.clear(e.gl.COLOR_BUFFER_BIT), e.canvas.remove();
+}
+function S(e) {
+	return t(e).map((e) => e <= .0031308 ? 12.92 * e : 1.055 * e ** (1 / 2.4) - .055);
+}
+function C() {
+	return !(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || document.documentElement.classList.contains("reduce-motion")) && !!document.startViewTransition && e() !== "lite";
+}
+function w() {
+	if (y !== void 0 || !C()) return;
+	let e = b();
+	e?.gl.drawArrays(e.gl.TRIANGLES, 0, 3);
+}
+function T(e, t) {
+	let o = document.documentElement, c = C() ? b() : null;
+	if (!c) {
+		e();
+		return;
+	}
+	let p = window.innerWidth, _ = window.innerHeight, v = p / 2, y = _ / 2;
+	if (t instanceof Element) {
+		let e = t.getBoundingClientRect();
+		v = e.left + e.width / 2, y = e.top + e.height / 2;
+	} else t && ({x: v, y} = t);
+	let w = Math.hypot(Math.max(v, p - v), Math.max(y, _ - y)), T = Math.random() * 2 * Math.PI, E = w + s + 2, D = ++m;
+	x(c), o.classList.add(d);
+	let O = [], k = !1, A = document.startViewTransition(() => {
+		e();
+		let t = getComputedStyle(o);
+		k = Number(t.getPropertyValue("--background").trim().split(" ")[0]) <= .5, o.classList.toggle(f, k);
+		let n = t.getPropertyValue("--glow").trim(), [r, i, a] = n.split(" ").map(Number);
+		O = [
+			n,
+			t.getPropertyValue("--glow-2").trim(),
+			`${r} ${i} ${(a + 240) % 360}`
+		].flatMap(S), document.body.append(c.canvas);
+	});
+	A.ready.then(() => {
+		let e = k ? i : n, t = (e) => (k ? 1 - h(a, e) : h(r, e)) * E, s = k ? "::view-transition-old(root)" : "::view-transition-new(root)", d = (n) => {
+			let r = t(n), i = n * e / 1e3;
+			return `polygon(${Array.from({ length: u }, (e, t) => {
+				let n = t / u * 2 * Math.PI, a = Math.max(0, r + g(n, r, i, T));
+				return `${(v + a * Math.cos(n)).toFixed(1)}px ${(y + a * Math.sin(n)).toFixed(1)}px`;
+			}).join(",")})`;
+		}, f = Array.from({ length: 49 }, (e, t) => ({
+			clipPath: d(t / l),
+			offset: t / l
+		})), b = o.animate(f, {
+			duration: e,
+			pseudoElement: s,
+			fill: "forwards"
+		});
+		A.finished.finally(() => b.cancel());
+		let { canvas: S, gl: C, uniform: w } = c, j = Math.min(window.devicePixelRatio || 1, 2);
+		S.width = Math.round(p * j), S.height = Math.round(_ * j), C.viewport(0, 0, S.width, S.height), C.uniform2f(w("res"), S.width, S.height), C.uniform1f(w("dpr"), j), C.uniform2f(w("from"), v, y), C.uniform1f(w("seed"), T), C.uniform3fv(w("aurora[0]"), O), C.uniform1f(w("light"), +!k);
+		let M = (e) => (1 - Math.exp(-e * 14)) * (1 - e) ** 1.5, N = () => {
+			if (D !== m) return;
+			if (b.playState === "finished") return x(c);
+			let n = Math.min(1, Number(b.currentTime ?? 0) / e), r = t(n), i = Math.min(1, (1 - n) / .12), a, o;
+			k ? (a = 1.6 * n * Math.sqrt(1 - n) * i, o = Math.min(1, n * 4) * Math.min(1, r / 24) * i) : (a = M(n) * i, o = Math.min(1, r / 40) * (1 - n ** 3) * i), C.uniform1f(w("time"), n * e / 1e3), C.uniform1f(w("edge"), r), C.uniform1f(w("dir"), k ? -1 : 1), C.uniform1f(w("strength"), a), C.uniform1f(w("prism"), o), C.drawArrays(C.TRIANGLES, 0, 3), requestAnimationFrame(N);
+		};
+		N();
+	}).catch(() => {}), A.finished.finally(() => {
+		D === m && (o.classList.remove(d, f), x(c));
+	});
+}
+//#endregion
+export { w as prepareThemeWave, T as themeWave };

package/dist/utils/typeahead.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Type to jump, as in a native list: keys typed quickly in a row search
+ * together. Returns what's been typed so far (lower case) when the key is a
+ * letter or digit, else null; match it against the start of each item's label.
+ */
+export declare function useTypeahead(): (e: {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}) => string | null;
+//# sourceMappingURL=typeahead.d.ts.map

package/dist/utils/typeahead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeahead.d.ts","sourceRoot":"","sources":["../../packages/utils/typeahead.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,CAAC,CAAC,EAAE;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACnB,KAAK,MAAM,GAAG,IAAI,CASlB"}

package/dist/utils/typeahead.js

@@ -0,0 +1,19 @@
+"use client";
+import { useRef as e } from "react";
+//#region packages/utils/typeahead.ts
+function t() {
+	let t = e({
+		text: "",
+		at: 0
+	});
+	return (e) => {
+		if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return null;
+		let n = Date.now(), r = (n - t.current.at < 700 ? t.current.text : "") + e.key.toLowerCase();
+		return t.current = {
+			text: r,
+			at: n
+		}, r;
+	};
+}
+//#endregion
+export { t as useTypeahead };

package/dist/utils/useAnchoredPopup.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, RefObject } from 'react';
 /**
  * A popup anchored to a trigger, on the native Popover API: opens below the
  * trigger (flipping above if there's no room), closes on outside click and
@@ -10,26 +10,41 @@ export declare function useAnchoredPopup<T extends HTMLElement = HTMLDivElement>
     open: boolean;
     setOpen: (next: boolean) => void;
     triggerProps: {
+        'data-zen-anchor': string;
+        style: CSSProperties;
         popoverTarget: string;
         'aria-expanded': boolean;
         'aria-controls': string;
         'data-popup-open': true | undefined;
-        style: CSSProperties;
     };
     popupProps: {
-        ref: import('react').RefObject<T | null>;
+        ref: RefObject<T | null>;
         id: string;
         popover: "auto";
         style: CSSProperties;
     };
-    popupRef: import('react').RefObject<T | null>;
+    popupRef: RefObject<T | null>;
+};
+/** Makes an element the anchor its popup (`id`) is placed against. Spread it on the trigger. */
+export declare function anchorFor(id: string): {
+    'data-zen-anchor': string;
+    style: CSSProperties;
 };
 /**
  * The popup's position: below the trigger (above it if there's no room below),
- * lined up with its start or end edge, or centred on it. For parts that take
- * their own `align`/`offset` (PopoverContent, MenuContent).
+ * lined up with its start or end edge, or centred on it; `width` makes it as
+ * wide as the trigger, or at least as wide. For parts that take their own
+ * `align`/`offset` (PopoverContent, MenuContent). The same choices are kept as
+ * custom properties, for placing it where anchor positioning isn't supported.
  */
-export declare function anchoredStyle(id: string, { align, offset, matchWidth }?: Omit<AnchoredPopupOptions, 'onOpenChange'>): CSSProperties;
+export declare function anchoredStyle(id: string, { align, offset, width }?: AnchorOptions): CSSProperties;
+interface AnchorOptions {
+    align?: 'start' | 'end' | 'center';
+    offset?: number;
+    width?: 'match' | 'at-least';
+}
+/** Places the popup in `ref` against its trigger while it's open, where the browser can't. */
+export declare function useAnchorFallback(ref: RefObject<HTMLElement | null>): void;
 export interface AnchoredPopupOptions {
     /** Line the popup up with the trigger's start (default) or end edge, or centre it. */
     align?: 'start' | 'end' | 'center';
@@ -39,4 +54,5 @@ export interface AnchoredPopupOptions {
     matchWidth?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
+export {};
 //# sourceMappingURL=useAnchoredPopup.d.ts.map

package/dist/utils/useAnchoredPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredPopup.d.ts","sourceRoot":"","sources":["../../packages/utils/useAnchoredPopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAmD,MAAM,OAAO,CAAC;AAEvF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,EACrE,KAAe,EACf,MAAU,EACV,UAAkB,EAClB,YAAY,GACf,GAAE,oBAAyB;;;oBAgBb,OAAO;;;;;;eA4BsB,aAAa;;;;;;;;;EAWxD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,KAAe,EAAE,MAAU,EAAE,UAAkB,EAAE,GAAE,IAAI,CAAC,oBAAoB,EAAE,cAAc,CAAM,GACrG,aAAa,CAcf;AAED,MAAM,WAAW,oBAAoB;IACjC,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C"}
+{"version":3,"file":"useAnchoredPopup.d.ts","sourceRoot":"","sources":["../../packages/utils/useAnchoredPopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAmD,MAAM,OAAO,CAAC;AAElG;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,EACrE,KAAe,EACf,MAAU,EACV,UAAkB,EAClB,YAAY,GACf,GAAE,oBAAyB;;;oBAgBb,OAAO;;;eA6CkD,aAAa;;;;;;;;;;;;;EAJpF;AAED,gGAAgG;AAChG,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM;;WACoC,aAAa;EACpF;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,KAAe,EAAE,MAAU,EAAE,KAAK,EAAE,GAAE,aAAkB,GAAG,aAAa,CAoBnH;AAED,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAChC;AAYD,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAiCnE;AAmCD,MAAM,WAAW,oBAAoB;IACjC,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C"}

package/dist/utils/useAnchoredPopup.js

@@ -1,50 +1,56 @@
 "use client";
 import { useCallback as e, useEffect as t, useId as n, useRef as r, useState as i } from "react";
 //#region packages/utils/useAnchoredPopup.ts
-function a({ align: a = "start", offset: s = 4, matchWidth: c = !1, onOpenChange: l } = {}) {
-	let u = `zen__popup-${n().replace(/[^\w-]/g, "")}`, d = r(null), [f, p] = i(!1), m = r(l);
-	m.current = l;
-	let h = r(!1), g = e((e) => {
-		p(e), h.current !== e && (h.current = e, m.current?.(e));
-	}, []), _ = e((e) => {
-		let t = d.current;
+function a({ align: a = "start", offset: c = 4, matchWidth: l = !1, onOpenChange: d } = {}) {
+	let f = `zen__popup-${n().replace(/[^\w-]/g, "")}`, p = r(null), [m, h] = i(!1), g = r(d);
+	g.current = d;
+	let _ = r(!1), v = e((e) => {
+		h(e), _.current !== e && (_.current = e, g.current?.(e));
+	}, []), y = e((e) => {
+		let t = p.current;
 		if (t) {
 			try {
 				e ? t.showPopover?.() : t.hidePopover?.();
 			} catch {}
-			g(e);
+			v(e);
 		}
-	}, [g]);
-	return t(() => {
-		let e = d.current;
+	}, [v]);
+	return u(p), t(() => {
+		let e = p.current;
 		if (!e) return;
-		let t = (e) => g(e.newState === "open");
+		let t = (e) => v(e.newState === "open");
 		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
-	}, [g]), {
-		id: u,
-		open: f,
-		setOpen: _,
+	}, [v]), {
+		id: f,
+		open: m,
+		setOpen: y,
 		triggerProps: {
-			popoverTarget: u,
-			"aria-expanded": f,
-			"aria-controls": u,
-			"data-popup-open": f || void 0,
-			style: { anchorName: `--${u}` }
+			popoverTarget: f,
+			"aria-expanded": m,
+			"aria-controls": f,
+			"data-popup-open": m || void 0,
+			...o(f)
 		},
 		popupProps: {
-			ref: d,
-			id: u,
+			ref: p,
+			id: f,
 			popover: "auto",
-			style: o(u, {
+			style: s(f, {
 				align: a,
-				offset: s,
-				matchWidth: c
+				offset: c,
+				width: l ? "at-least" : void 0
 			})
 		},
-		popupRef: d
+		popupRef: p
 	};
 }
-function o(e, { align: t = "start", offset: n = 4, matchWidth: r = !1 } = {}) {
+function o(e) {
+	return {
+		"data-zen-anchor": e,
+		style: { anchorName: `--${e}` }
+	};
+}
+function s(e, { align: t = "start", offset: n = 4, width: r } = {}) {
 	let i = {
 		start: "block-end span-inline-end",
 		end: "block-end span-inline-start",
@@ -56,8 +62,58 @@ function o(e, { align: t = "start", offset: n = 4, matchWidth: r = !1 } = {}) {
 		positionTryFallbacks: "flip-block",
 		inset: "auto",
 		margin: `${n}px 0`,
-		...r && { minWidth: "anchor-size(width)" }
+		...r === "at-least" && {
+			width: "max-content",
+			minWidth: "anchor-size(width)"
+		},
+		...r === "match" && {
+			width: "anchor-size(width)",
+			minWidth: 0
+		},
+		"--zen-anchor": e,
+		"--zen-anchor-align": t,
+		"--zen-anchor-offset": n,
+		"--zen-anchor-width": r ?? "auto"
 	};
 }
+var c, l = () => c ??= typeof CSS < "u" && !!CSS.supports?.("position-area: block-end");
+function u(e) {
+	t(() => {
+		let t = e.current;
+		if (!t || l()) return;
+		let n = 0, r = () => {
+			n ||= requestAnimationFrame(() => {
+				n = 0, f(t);
+			});
+		}, i = typeof ResizeObserver > "u" ? null : new ResizeObserver(r), a = () => {
+			window.removeEventListener("scroll", r, { capture: !0 }), window.removeEventListener("resize", r), i?.disconnect(), cancelAnimationFrame(n), n = 0;
+		}, o = (e) => {
+			a(), e.newState === "open" && (f(t), window.addEventListener("scroll", r, {
+				capture: !0,
+				passive: !0
+			}), window.addEventListener("resize", r, { passive: !0 }), i?.observe(t));
+		};
+		return t.addEventListener("toggle", o), () => {
+			t.removeEventListener("toggle", o), a();
+		};
+	}, [e]);
+}
+var d = 8;
+function f(e) {
+	let t = e.style.getPropertyValue("--zen-anchor").trim(), n = t ? document.querySelector(`[data-zen-anchor="${t}"]`) : null;
+	if (!n) return;
+	let r = e.style.getPropertyValue("--zen-anchor-align").trim() || "start", i = Number(e.style.getPropertyValue("--zen-anchor-offset")) || 0, a = e.style.getPropertyValue("--zen-anchor-width").trim(), o = n.getBoundingClientRect(), s = e.style;
+	for (let e of [
+		"position-anchor",
+		"position-area",
+		"position-try-fallbacks"
+	]) s.removeProperty(e);
+	s.inset = "0 auto auto 0", s.margin = "0", a === "match" && (s.width = `${o.width}px`), a === "at-least" && (s.minWidth = `${o.width}px`);
+	let c = {
+		width: e.offsetWidth,
+		height: e.offsetHeight
+	}, l = document.documentElement.clientWidth, u = window.innerHeight, f = o.bottom + i, p = o.top - i - c.height, m = f + c.height > u - d && p >= d ? p : f, h = getComputedStyle(n).direction === "rtl", g = h ? o.right - c.width : o.left, _ = h ? o.left : o.right - c.width, v = r === "center" ? o.left + (o.width - c.width) / 2 : r === "end" ? _ : g;
+	s.top = `${m}px`, s.left = `${Math.max(d, Math.min(v, l - c.width - d))}px`;
+}
 //#endregion
-export { o as anchoredStyle, a as useAnchoredPopup };
+export { o as anchorFor, s as anchoredStyle, u as useAnchorFallback, a as useAnchoredPopup };