@rinzai/zen 0.14.0 → 0.15.0

package/dist/seek-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/seek-bar/index.tsx"],"names":[],"mappings":"AACA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQlD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC5B,WAAW,EACX,QAAQ,EACR,QAAY,EACZ,OAAe,EACf,YAAgB,EAChB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,YAAY,+BA6Gd;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACtC,WAAW,EACX,OAAO,GAAG,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,eAAe,GAAG,eAAe,GAAG,iBAAiB,CAC5G;IACG,sBAAsB;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yGAAyG;IACzG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC"}

package/dist/seek-bar/index.js

@@ -0,0 +1,120 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useMessages as t } from "../locale-provider/index.js";
+import n from "../slider/index.js";
+import { formatDuration as r } from "../utils/duration.js";
+import { useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/seek-bar/index.tsx
+var l = 5;
+function u({ currentTime: u, duration: d, buffered: f = 0, playing: p = !1, playbackRate: m = 1, onSeek: h, onKeyDown: g, disabled: _, className: v, ...y }) {
+	let b = t(), [x, S] = o(null), [C, w] = o(null), T = C && C.from === u ? C.at : null, E = Math.max(0, Math.min(x ?? T ?? u, d)), D = a(null), O = a(null), k = p && x === null && T === null && d > 0 && E < d, A = a(null);
+	i(() => {
+		let e = [D.current, O.current].filter((e) => e !== null);
+		if (!e.length) return;
+		let t = A.current;
+		if (k && t && t.rate === m && t.duration === d) {
+			let e = Number(t.animations[0].currentTime ?? 0) / 1e3;
+			if (Math.abs(t.from + e * m - E) < .15) return;
+		}
+		t?.animations.forEach((e) => e.cancel()), A.current = null;
+		let n = getComputedStyle(e[0]).direction === "rtl" ? -1 : 1, r = (e) => `${d > 0 ? n * e * 100 / d : 0}cqw`;
+		for (let t of e) t.style.translate = r(E);
+		if (!k) return;
+		let i = e.map((e) => e.animate([{ translate: r(E) }, { translate: r(d) }], {
+			duration: (d - E) / m * 1e3,
+			easing: "linear",
+			fill: "forwards"
+		}));
+		A.current = {
+			animations: i,
+			from: E,
+			rate: m,
+			duration: d
+		};
+	}, [
+		E,
+		d,
+		k,
+		m
+	]), i(() => () => A.current?.animations.forEach((e) => e.cancel()), []);
+	let j = (e) => {
+		if (g?.(e), e.defaultPrevented) return;
+		let t = getComputedStyle(e.currentTarget).direction === "rtl", n = {
+			ArrowUp: 1,
+			ArrowDown: -1,
+			ArrowRight: t ? -1 : 1,
+			ArrowLeft: t ? 1 : -1
+		}[e.key];
+		if (!n) return;
+		e.preventDefault();
+		let r = Math.max(0, Math.min(E + n * l, d));
+		w({
+			at: r,
+			from: u
+		}), h(r);
+	}, M = _ || d <= 0, N = d > 0 ? Math.min(f, d) / d * 100 : 0, P = { width: `${r(d).length}ch` };
+	return /* @__PURE__ */ c("div", {
+		className: e("zen__seek-bar flex items-center gap-3", v),
+		children: [
+			/* @__PURE__ */ s("span", {
+				className: "text-muted-foreground shrink-0 text-end text-xs tabular-nums",
+				style: P,
+				children: r(E)
+			}),
+			/* @__PURE__ */ c("div", {
+				className: e("group relative h-5 min-w-0 flex-1", M && "opacity-50"),
+				children: [
+					/* @__PURE__ */ s(n, {
+						"aria-label": b.seek,
+						min: 0,
+						max: d || 1,
+						step: "any",
+						value: E,
+						disabled: M,
+						valueText: () => b.timeOf(r(E), r(d)),
+						className: "absolute inset-0 z-10 h-full opacity-0",
+						onKeyDown: j,
+						onValueChange: S,
+						onValueCommit: (e) => {
+							S(null), w({
+								at: e,
+								from: u
+							}), h(e);
+						},
+						...y
+					}),
+					/* @__PURE__ */ c("div", {
+						"aria-hidden": !0,
+						className: "absolute inset-x-0 top-1/2 h-2.5 -translate-y-1/2 overflow-hidden rounded-full bg-[oklch(var(--muted))]",
+						children: [/* @__PURE__ */ s("div", {
+							className: "absolute inset-y-0 start-0 bg-[oklch(var(--tint)/0.22)] transition-[width] duration-300",
+							style: { width: `${N}%` }
+						}), /* @__PURE__ */ s("div", {
+							className: "[container-type:inline-size] absolute inset-x-2.5 inset-y-0",
+							children: /* @__PURE__ */ s("div", {
+								ref: D,
+								className: "bg-primary absolute inset-y-0 end-full w-[calc(100%+0.625rem)]"
+							})
+						})]
+					}),
+					/* @__PURE__ */ s("div", {
+						"aria-hidden": !0,
+						className: "[container-type:inline-size] pointer-events-none absolute inset-x-2.5 inset-y-0",
+						children: /* @__PURE__ */ s("div", {
+							ref: O,
+							className: "bg-primary group-has-[input:focus-visible]:ring-ring/40 absolute start-0 top-1/2 -ms-2.5 -mt-2.5 size-5 rounded-full border-2 border-white shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] group-has-[input:focus-visible]:ring-4"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ s("span", {
+				className: "text-muted-foreground shrink-0 text-xs tabular-nums",
+				style: P,
+				children: r(d)
+			})
+		]
+	});
+}
+//#endregion
+export { u as default };

package/dist/segmented/index.d.ts

@@ -5,11 +5,12 @@ import { ComponentProps, ReactNode } from 'react';
  * selection slides between options, like Pills. Fill it with
  * SegmentedItem (any content: text, icons, a disabled option).
  */
-export default function Segmented<V extends string>({ label, value: valueProp, defaultValue, onValueChange, name, className, children, ...rest }: SegmentedProps<V>): import('react').JSX.Element;
+export default function Segmented<V extends string>({ label, value: valueProp, defaultValue, onValueChange, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, ...rest }: SegmentedProps<V>): import('react').JSX.Element;
 /** One option of a Segmented: a native radio covering whatever you put inside. */
 export declare function SegmentedItem({ value, disabled, className, children }: SegmentedItemProps): import('react').JSX.Element;
 export interface SegmentedProps<V extends string> extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children'> {
-    label: string;
+    /** Shown above the options, naming the group. Without it, give the group an aria-label or aria-labelledby. */
+    label?: ReactNode;
     /** The chosen option, when you keep it. */
     value?: V;
     /** The first chosen option, when the control keeps its own. */

package/dist/segmented/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/segmented/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAA6B,MAAM,OAAO,CAAC;AAY5F;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,cAAc,CAAC,CAAC,CAAC,+BAwCnB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BA4BzF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC9G,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/segmented/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAA6B,MAAM,OAAO,CAAC;AAY5F;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,cAAc,CAAC,CAAC,CAAC,+BA2CnB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BA4BzF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC9G,8GAA8G;IAC9G,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;CACvB"}

package/dist/segmented/index.js

@@ -6,36 +6,37 @@ import { createContext as r, useContext as i, useId as a, useRef as o } from "re
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region packages/segmented/index.tsx
 var l = r(null);
-function u({ label: r, value: i, defaultValue: u, onValueChange: d, name: f, className: p, children: m, ...h }) {
-	let [g, _] = t(i, u, d), v = a(), y = o(null), b = n(y, "label:has(input:checked)", [g, m]);
+function u({ label: r, value: i, defaultValue: u, onValueChange: d, name: f, "aria-label": p, "aria-labelledby": m, className: h, children: g, ..._ }) {
+	let [v, y] = t(i, u, d), b = a(), x = o(null), S = n(x, "label:has(input:checked)", [v, g]);
 	return /* @__PURE__ */ c("div", {
-		className: e("zen__segmented flex flex-col gap-2", p),
-		...h,
-		children: [/* @__PURE__ */ s("span", {
-			id: v,
+		className: e("zen__segmented flex flex-col gap-2", h),
+		..._,
+		children: [r && /* @__PURE__ */ s("span", {
+			id: b,
 			className: "text-sm font-medium",
 			children: r
 		}), /* @__PURE__ */ c("div", {
-			ref: y,
+			ref: x,
 			role: "radiogroup",
-			"aria-labelledby": v,
+			"aria-label": p,
+			"aria-labelledby": r ? b : m,
 			className: "glow-edge border-tint/10 bg-tint/[0.03] relative inline-flex w-fit flex-wrap gap-1 rounded-xl border p-1",
-			children: [b && /* @__PURE__ */ s("span", {
+			children: [S && /* @__PURE__ */ s("span", {
 				"aria-hidden": !0,
 				className: "zen__segmented-indicator bg-primary/15 ease-out-soft absolute top-0 left-0 rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)] transition-[translate,width,height] duration-500",
 				style: {
-					translate: `${b.x}px ${b.y}px`,
-					width: b.w,
-					height: b.h
+					translate: `${S.x}px ${S.y}px`,
+					width: S.w,
+					height: S.h
 				}
 			}), /* @__PURE__ */ s(l.Provider, {
 				value: {
-					name: f ?? v,
-					value: g,
-					select: _,
-					measured: b !== null
+					name: f ?? b,
+					value: v,
+					select: y,
+					measured: S !== null
 				},
-				children: m
+				children: g
 			})]
 		})]
 	});
@@ -44,7 +45,7 @@ function d({ value: t, disabled: n, className: r, children: a }) {
 	let o = i(l);
 	if (!o) throw Error("SegmentedItem must be inside a Segmented");
 	return /* @__PURE__ */ c("label", {
-		className: e("text-muted-foreground relative cursor-pointer rounded-lg px-3 py-1.5 text-sm transition-colors duration-300", "hover:text-foreground has-checked:text-foreground has- has-focus-ring", "has-disabled:hover:text-muted-foreground has-disabled:cursor-not-allowed has-disabled:opacity-50", !o.measured && "has-checked:bg-primary/15 has-checked:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)]", r),
+		className: e("text-muted-foreground relative inline-flex cursor-pointer items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm transition-colors duration-300", "hover:text-foreground has-checked:text-foreground has-focus-ring", "has-disabled:hover:text-muted-foreground has-disabled:cursor-not-allowed has-disabled:opacity-50", !o.measured && "has-checked:bg-primary/15 has-checked:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)]", r),
 		children: [/* @__PURE__ */ s("input", {
 			type: "radio",
 			className: "absolute inset-0 z-10 m-0 size-full cursor-pointer appearance-none rounded-[inherit] opacity-0 disabled:cursor-not-allowed",

package/dist/slider/index.d.ts

@@ -15,7 +15,8 @@ export interface SliderProps extends Omit<ComponentProps<'input'>, 'type' | 'val
     defaultValue?: number;
     min?: number;
     max?: number;
-    step?: number;
+    /** `'any'` for no snapping; the arrow keys then move by the browser's own amount. */
+    step?: number | 'any';
     /** While dragging (every step). */
     onValueChange?: (value: number) => void;
     /** Once the user lets go: the moment to save. */

package/dist/slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/slider/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,WAAW,+BAmDb;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,QAI+E,CAAC;AAElG,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,cAAc,CAC7D;IACG,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/slider/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,WAAW,+BAmDb;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,QAI+E,CAAC;AAElG,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,cAAc,CAC7D;IACG,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACtB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}

package/dist/tab-bar/index.d.ts

@@ -2,11 +2,13 @@ import { ComponentProps, ReactNode } from 'react';
 /**
  * Phone navigation: a glass bar fixed to the bottom, clear of the home
  * indicator, hidden from `hideFrom` up (default md). Fill it with TabBarItems.
+ * Its height is kept in `--zen-tab-bar-height` on its parent (0px while
+ * hidden): a PlayerBar beside it sits on it, and the page can pad its end by it.
  * Inside a rounded frame, round the bar to match (className, e.g.
  * rounded-b-[15px]): with GPU compositing, Chrome doesn't clip a blurred
  * backdrop to an ancestor's rounded corners, only to the element's own.
  */
-export default function TabBar({ hideFrom, className, children, ...rest }: TabBarProps): import('react').JSX.Element;
+export default function TabBar({ hideFrom, className, children, ref, ...rest }: TabBarProps): import('react').JSX.Element;
 /**
  * One destination: an icon over a label. `active` marks the current page; with
  * `asChild`, the styles go onto your own link (e.g. a router's NavLink, which
@@ -20,7 +22,7 @@ export interface TabBarProps extends ComponentProps<'nav'> {
 export interface TabBarItemProps extends ComponentProps<'a'> {
     icon?: ReactNode;
     active?: boolean;
-    /** Style the single child element (a router link holding the icon and label) instead of rendering an <a>. */
+    /** Style the single child element (a router link holding the label) instead of rendering an <a>; `icon` goes inside it. */
     asChild?: boolean;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/tab-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tab-bar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAiB5F;AAOD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAYlG;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,iEAAiE;IACjE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tab-bar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAEpE;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAoBjG;AAOD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAgBlG;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,iEAAiE;IACjE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2HAA2H;IAC3H,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/tab-bar/index.js

@@ -1,34 +1,39 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { Slot as t } from "../utils/slot.js";
-import { Children as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { Slot as n } from "../utils/slot.js";
+import { useHeightVar as r } from "../utils/useHeightVar.js";
+import { Children as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region packages/tab-bar/index.tsx
-function a({ hideFrom: t = "md", className: i, children: a, ...o }) {
-	return /* @__PURE__ */ r("nav", {
-		className: e("zen__tab-bar glass glass-blur glow-edge fixed inset-x-0 bottom-0 z-40 rounded-none border-x-0! border-b-0! pb-[env(safe-area-inset-bottom)]", t === "sm" && "sm:hidden", t === "md" && "md:hidden", t === "lg" && "lg:hidden", i),
-		...o,
-		children: /* @__PURE__ */ r("div", {
+function c({ hideFrom: n = "md", className: s, children: c, ref: l, ...u }) {
+	let d = a(null);
+	return r(d, "--zen-tab-bar-height"), /* @__PURE__ */ o("nav", {
+		ref: t(d, l),
+		className: e("zen__tab-bar glass glass-blur glow-edge fixed inset-x-0 bottom-0 z-40 rounded-none border-x-0! border-b-0! pb-[env(safe-area-inset-bottom)]", n === "sm" && "sm:hidden", n === "md" && "md:hidden", n === "lg" && "lg:hidden", s),
+		...u,
+		children: /* @__PURE__ */ o("div", {
 			className: "grid",
-			style: { gridTemplateColumns: `repeat(${n.count(a)}, 1fr)` },
-			children: a
+			style: { gridTemplateColumns: `repeat(${i.count(c)}, 1fr)` },
+			children: c
 		})
 	});
 }
-var o = e("flex flex-col items-center gap-1 py-2.5 text-2xs outline-hidden transition-colors duration-200 focus-ring focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]");
-function s({ icon: n, active: a, asChild: s, className: c, children: l, ...u }) {
+var l = e("flex flex-col items-center gap-1 py-2.5 text-2xs outline-hidden transition-colors duration-200 focus-ring focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]");
+function u({ icon: t, active: r, asChild: i, className: a, children: c, ...u }) {
 	let d = {
 		...u,
-		"aria-current": a ? "page" : void 0,
-		className: e(o, c)
+		"aria-current": r ? "page" : void 0,
+		className: e(l, a)
 	};
-	return s ? (a || delete d["aria-current"], /* @__PURE__ */ r(t, {
+	return i ? (r || delete d["aria-current"], /* @__PURE__ */ o(n, {
 		...d,
-		children: l
-	})) : /* @__PURE__ */ i("a", {
+		before: t,
+		children: c
+	})) : /* @__PURE__ */ s("a", {
 		...d,
-		children: [n, l]
+		children: [t, c]
 	});
 }
 //#endregion
-export { s as TabBarItem, a as default };
+export { u as TabBarItem, c as default };

package/dist/textarea/index.d.ts

@@ -1,4 +1,8 @@
 import { ComponentProps } from 'react';
-export default function Textarea(props: TextAreaProps): import('react').JSX.Element;
-export type TextAreaProps = ComponentProps<'textarea'>;
+export default function Textarea(props: TextareaProps): import('react').JSX.Element;
+export type TextareaProps = ComponentProps<'textarea'>;
+/** @deprecated Renamed Textarea, like the element. */
+export declare const TextArea: typeof Textarea;
+/** @deprecated Renamed TextareaProps. */
+export type TextAreaProps = TextareaProps;
 //# sourceMappingURL=index.d.ts.map

package/dist/textarea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAiBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAiBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAEvD,sDAAsD;AACtD,eAAO,MAAM,QAAQ,iBAAW,CAAC;AACjC,yCAAyC;AACzC,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC"}

package/dist/textarea/index.js

@@ -12,5 +12,6 @@ function i(i) {
 		...s
 	});
 }
+var a = i;
 //#endregion
-export { i as default };
+export { a as TextArea, i as default };

package/dist/theme.css

@@ -1592,3 +1592,43 @@ html.reduce-motion .rise-list > * {
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
 }
+
+/*
+ * Marquee: an ellipsis at rest. While it scrolls (data-moving, set with its
+ * animation) the text is one box to slide, cut off by fades at both edges; the
+ * start's fade grows in as the text leaves it.
+ */
+@property --zen-marquee-fade-start {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+.zen__marquee {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.zen__marquee[data-moving] {
+    text-overflow: clip;
+    mask-image: linear-gradient(
+        to right,
+        transparent,
+        #000 var(--zen-marquee-fade-start),
+        #000 calc(100% - 1rem),
+        transparent
+    );
+}
+.zen__marquee[data-moving]:dir(rtl) {
+    mask-image: linear-gradient(
+        to left,
+        transparent,
+        #000 var(--zen-marquee-fade-start),
+        #000 calc(100% - 1rem),
+        transparent
+    );
+}
+.zen__marquee[data-moving] > .zen__marquee-content {
+    display: inline-block;
+}

package/dist/utils/duration.d.ts

@@ -0,0 +1,3 @@
+/** Seconds as a clock reads them: 3:07, or 1:02:07 from an hour up. */
+export declare function formatDuration(seconds: number): string;
+//# sourceMappingURL=duration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"duration.d.ts","sourceRoot":"","sources":["../../packages/utils/duration.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,UAM7C"}

package/dist/utils/duration.js

@@ -0,0 +1,7 @@
+//#region packages/utils/duration.ts
+function e(e) {
+	let t = Math.floor(Math.max(e, 0)), n = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), i = String(t % 60).padStart(2, "0");
+	return n ? `${n}:${String(r).padStart(2, "0")}:${i}` : `${r}:${i}`;
+}
+//#endregion
+export { e as formatDuration };

package/dist/utils/messages.d.ts

@@ -132,6 +132,8 @@ export declare const ENGLISH: {
     nextSlide: string;
     resize: string;
     notifications: string;
+    seek: string;
+    timeOf: (time: string, total: string) => string;
 };
 export type Messages = typeof ENGLISH;
 //# sourceMappingURL=messages.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../packages/utils/messages.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;mBAOD,MAAM;;;;;;;;;;;;;;gBAgBT,MAAM;;;;;;;;;;;;;gCAeU,MAAM;uBACf,MAAM;;;4CAKe,MAAM,cAAc,MAAM;;wBAG9C,MAAM;;4BAEF,MAAM;;;;;;;;;;;;;;;;;;+BAsBH,MAAM;;2BAEV,MAAM,SAAS,MAAM;;;;;;6BAMnB,MAAM;4BACP,MAAM,QAAQ,MAAM;uBACzB,MAAM,UAAU,MAAM;;;;;;aAQhC,MAAM;;;uBAGI,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,SAAS,MAAM;yBAC9C,MAAM,QAAQ,MAAM;qBACxB,MAAM,QAAQ,MAAM;mBACtB,MAAM;;oBAIL,MAAM;qBACL,MAAM,SAAS,MAAM;oBAEtB,MAAM,SAAS,MAAM;oBACrB,MAAM,SAAS,MAAM;oBACrB,MAAM,UAAU,MAAM;sBACpB,MAAM,SAAS,MAAM;wBACnB,MAAM,SAAS,MAAM,SAAS,MAAM;oBAGxC,MAAM,SAAS,MAAM,UAAU,MAAM;kBACvC,MAAM,KAAK,MAAM,KAAK,MAAM;sBACxB,MAAM;;;;2BAOD,MAAM;;;;uBAMV,MAAM;oBACT,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;qBAgBnB,MAAM;;cAEb,MAAM;;;;;;iBAMH,MAAM,SAAS,MAAM;mBACnB,MAAM;;;;;CAKxB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,OAAO,CAAC"}
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../packages/utils/messages.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;mBAOD,MAAM;;;;;;;;;;;;;;gBAgBT,MAAM;;;;;;;;;;;;;gCAeU,MAAM;uBACf,MAAM;;;4CAKe,MAAM,cAAc,MAAM;;wBAG9C,MAAM;;4BAEF,MAAM;;;;;;;;;;;;;;;;;;+BAsBH,MAAM;;2BAEV,MAAM,SAAS,MAAM;;;;;;6BAMnB,MAAM;4BACP,MAAM,QAAQ,MAAM;uBACzB,MAAM,UAAU,MAAM;;;;;;aAQhC,MAAM;;;uBAGI,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,SAAS,MAAM;yBAC9C,MAAM,QAAQ,MAAM;qBACxB,MAAM,QAAQ,MAAM;mBACtB,MAAM;;oBAIL,MAAM;qBACL,MAAM,SAAS,MAAM;oBAEtB,MAAM,SAAS,MAAM;oBACrB,MAAM,SAAS,MAAM;oBACrB,MAAM,UAAU,MAAM;sBACpB,MAAM,SAAS,MAAM;wBACnB,MAAM,SAAS,MAAM,SAAS,MAAM;oBAGxC,MAAM,SAAS,MAAM,UAAU,MAAM;kBACvC,MAAM,KAAK,MAAM,KAAK,MAAM;sBACxB,MAAM;;;;2BAOD,MAAM;;;;uBAMV,MAAM;oBACT,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;qBAgBnB,MAAM;;cAEb,MAAM;;;;;;iBAMH,MAAM,SAAS,MAAM;mBACnB,MAAM;;;;;;mBAQN,MAAM,SAAS,MAAM;CACvC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,OAAO,CAAC"}

package/dist/utils/messages.js

@@ -127,7 +127,9 @@ var e = {
 	previousSlide: "Previous slide",
 	nextSlide: "Next slide",
 	resize: "Resize",
-	notifications: "Notifications (F8)"
+	notifications: "Notifications (F8)",
+	seek: "Seek",
+	timeOf: (e, t) => `${e} of ${t}`
 };
 //#endregion
 export { e as ENGLISH };

package/dist/utils/slot.d.ts

@@ -5,9 +5,12 @@ type Props = Record<string, unknown>;
  * props: a component's styles and attributes go onto the caller's own element,
  * such as a router's Link. Classes are combined, styles merged (the child's
  * win), event handlers both run (the child's first), and refs both receive the
- * element; other props from the component win.
+ * element; other props from the component win. `before` goes ahead of the
+ * child's own content (e.g. a component's icon), also when that content is a
+ * render function such as a router NavLink's.
  */
-export declare function Slot({ children, ...props }: ComponentProps<'a'> & {
+export declare function Slot({ before, children, ...props }: ComponentProps<'a'> & {
+    before?: ReactNode;
     children?: ReactNode;
 }): ReactElement<Props, string | import('react').JSXElementConstructor<any>> | null;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../packages/utils/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAkB,YAAY,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AAKnG,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAErC;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,mFAoB1F"}
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../packages/utils/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAkB,YAAY,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AAKnG,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAErC;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,EACjB,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,mFAqCpE"}

package/dist/utils/slot.js

@@ -2,20 +2,25 @@
 import { cx as e } from "./cx.js";
 import { mergeRefs as t } from "./refs.js";
 import { cloneElement as n, isValidElement as r } from "react";
+import { Fragment as i, jsxs as a } from "react/jsx-runtime";
 //#region packages/utils/slot.tsx
-function i({ children: i, ...a }) {
-	if (!r(i)) return null;
-	let o = i, s = a, c = o.props, l = { ...s };
-	for (let e of Object.keys(s)) {
-		let t = s[e], n = c[e];
-		/^on[A-Z]/.test(e) && typeof t == "function" && typeof n == "function" && (l[e] = (...e) => {
+function o({ before: o, children: s, ...c }) {
+	if (!r(s)) return null;
+	let l = s, u = c, d = l.props, f = { ...u };
+	for (let e of Object.keys(u)) {
+		let t = u[e], n = d[e];
+		/^on[A-Z]/.test(e) && typeof t == "function" && typeof n == "function" && (f[e] = (...e) => {
 			n(...e), t(...e);
 		});
 	}
-	return l.className = e(s.className, c.className), (s.style || c.style) && (l.style = {
-		...s.style,
-		...c.style
-	}), s.ref && c.ref && (l.ref = t(s.ref, c.ref)), n(o, l);
+	if (f.className = e(u.className, d.className), (u.style || d.style) && (f.style = {
+		...u.style,
+		...d.style
+	}), u.ref && d.ref && (f.ref = t(u.ref, d.ref)), o != null) {
+		let e = d.children;
+		f.children = typeof e == "function" ? ((...t) => /* @__PURE__ */ a(i, { children: [o, e(...t)] })) : /* @__PURE__ */ a(i, { children: [o, e] });
+	}
+	return n(l, f);
 }
 //#endregion
-export { i as Slot };
+export { o as Slot };

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,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;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,KAAe,EAAE,MAAU,EAAE,KAAK,EAAE,IAAc,EAAE,GAAE,aAAkB,GAC3E,aAAa,CAuBf;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;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAYD,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAiCnE;AA6CD,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;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,KAAe,EAAE,MAAU,EAAE,KAAK,EAAE,IAAc,EAAE,GAAE,aAAkB,GAC3E,aAAa,CA4Bf;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;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAYD,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAiCnE;AA6CD,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

@@ -54,12 +54,13 @@ function s(e, { align: t = "start", offset: n = 4, width: r, side: i = "below" }
 	let a = i === "beside" ? "inline-end span-block-end" : {
 		start: "block-end span-inline-end",
 		end: "block-end span-inline-start",
-		center: "block-end center"
+		center: "block-end span-all"
 	}[t];
 	return {
 		positionAnchor: `--${e}`,
 		positionArea: a,
-		positionTryFallbacks: i === "beside" ? "flip-inline, flip-block, flip-block flip-inline" : "flip-block",
+		...i !== "beside" && t === "center" && { justifySelf: "anchor-center" },
+		positionTryFallbacks: i === "beside" || t !== "center" ? "flip-inline, flip-block, flip-block flip-inline" : "flip-block",
 		inset: "auto",
 		...r === "at-least" && {
 			width: "max-content",

package/dist/utils/useHeightVar.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Keeps a fixed bar's height in a CSS variable on its parent (0px while the bar
+ * is hidden), so the bars and the page beside it can stack on it and pad for it.
+ */
+export declare function useHeightVar(ref: RefObject<HTMLElement | null>, name: `--${string}`): void;
+//# sourceMappingURL=useHeightVar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHeightVar.d.ts","sourceRoot":"","sources":["../../packages/utils/useHeightVar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,QAcnF"}

package/dist/utils/useHeightVar.js

@@ -0,0 +1,17 @@
+"use client";
+import { useLayoutEffect as e } from "react";
+//#region packages/utils/useHeightVar.ts
+function t(t, n) {
+	e(() => {
+		let e = t.current, r = e?.parentElement;
+		if (!e || !r) return;
+		let i = () => r.style.setProperty(n, `${e.offsetHeight}px`);
+		i();
+		let a = new ResizeObserver(i);
+		return a.observe(e), () => {
+			a.disconnect(), r.style.removeProperty(n);
+		};
+	}, [t, n]);
+}
+//#endregion
+export { t as useHeightVar };

package/dist/utils/useMediaPlayer.d.ts

@@ -0,0 +1,38 @@
+import { RefCallback } from 'react';
+export interface MediaState {
+    /** Playing, or about to (not paused). */
+    playing: boolean;
+    /** Playing but stalled, waiting for data. */
+    waiting: boolean;
+    ended: boolean;
+    /** Seconds in. */
+    currentTime: number;
+    /** Seconds long; 0 until known, and for a live stream. */
+    duration: number;
+    /** Seconds loaded from the start of the stretch being played: how far it can play without waiting. */
+    buffered: number;
+    /** 0 to 1. */
+    volume: number;
+    muted: boolean;
+    playbackRate: number;
+    error: MediaError | null;
+}
+export interface MediaPlayer extends MediaState {
+    /** Rejects when the browser won't play yet (autoplay before any tap) or can't play the source. */
+    play: () => Promise<void>;
+    pause: () => void;
+    toggle: () => Promise<void>;
+    /** Jump to a time, in seconds. */
+    seek: (time: number) => void;
+    setVolume: (volume: number) => void;
+    setMuted: (muted: boolean) => void;
+}
+/**
+ * Plays audio or video through your own <audio> or <video> element, and keeps
+ * its state for the UI: playing, time, duration, buffered, volume. Returns the
+ * ref for the element, kept apart from the player so reading the player isn't
+ * reading a ref: `const [ref, player] = useMediaPlayer(); <audio ref={ref} />`.
+ * Pair it with SeekBar, and with useMediaSession for the lock screen and media keys.
+ */
+export declare function useMediaPlayer(): [ref: RefCallback<HTMLMediaElement>, player: MediaPlayer];
+//# sourceMappingURL=useMediaPlayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaPlayer.d.ts","sourceRoot":"","sources":["../../packages/utils/useMediaPlayer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA0C,MAAM,OAAO,CAAC;AAE5E,MAAM,WAAW,UAAU;IACvB,yCAAyC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,sGAAsG;IACtG,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC3C,kGAAkG;IAClG,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,kCAAkC;IAClC,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAuDD;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,CA8C1F"}