@rinzai/zen 0.13.0 → 0.15.0

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"}

package/dist/utils/useMediaPlayer.js

@@ -0,0 +1,91 @@
+"use client";
+import { useCallback as e, useMemo as t, useRef as n, useState as r } from "react";
+//#region packages/utils/useMediaPlayer.ts
+var i = [
+	"play",
+	"pause",
+	"playing",
+	"waiting",
+	"ended",
+	"timeupdate",
+	"durationchange",
+	"loadedmetadata",
+	"progress",
+	"seeking",
+	"volumechange",
+	"ratechange",
+	"emptied",
+	"error"
+], a = {
+	playing: !1,
+	waiting: !1,
+	ended: !1,
+	currentTime: 0,
+	duration: 0,
+	buffered: 0,
+	volume: 1,
+	muted: !1,
+	playbackRate: 1,
+	error: null
+};
+function o(e) {
+	let t = e.currentTime, n = 0;
+	for (let r = 0; r < e.buffered.length; r++) e.buffered.start(r) <= t && t <= e.buffered.end(r) && (n = e.buffered.end(r));
+	return {
+		playing: !e.paused,
+		waiting: !e.paused && e.readyState < HTMLMediaElement.HAVE_FUTURE_DATA,
+		ended: e.ended,
+		currentTime: t,
+		duration: Number.isFinite(e.duration) ? e.duration : 0,
+		buffered: n,
+		volume: e.volume,
+		muted: e.muted,
+		playbackRate: e.playbackRate,
+		error: e.error
+	};
+}
+var s = (e, t) => Object.keys(e).every((n) => Object.is(e[n], t[n]));
+function c() {
+	let [c, l] = r(a), u = n(null), d = e((e) => {
+		if (!e) return;
+		u.current = e;
+		let t = () => l((t) => s(t, o(e)) ? t : o(e));
+		t();
+		for (let n of i) e.addEventListener(n, t);
+		return () => {
+			for (let n of i) e.removeEventListener(n, t);
+			u.current === e && (u.current = null);
+		};
+	}, []), f = t(() => {
+		let e = async () => {
+			try {
+				await u.current?.play();
+			} catch (e) {
+				if (!(e instanceof DOMException && e.name === "AbortError")) throw e;
+			}
+		}, t = () => u.current?.pause();
+		return {
+			play: e,
+			pause: t,
+			toggle: () => u.current?.paused === !1 ? Promise.resolve(t()) : e(),
+			seek: (e) => {
+				let t = u.current;
+				if (!t) return;
+				let n = Number.isFinite(t.duration) ? t.duration : Infinity;
+				t.currentTime = Math.min(Math.max(e, 0), n);
+			},
+			setVolume: (e) => {
+				u.current && (u.current.volume = Math.min(Math.max(e, 0), 1));
+			},
+			setMuted: (e) => {
+				u.current && (u.current.muted = e);
+			}
+		};
+	}, []);
+	return [d, {
+		...c,
+		...f
+	}];
+}
+//#endregion
+export { c as useMediaPlayer };

package/dist/utils/useMediaSession.d.ts

@@ -0,0 +1,24 @@
+import { MediaPlayer } from './useMediaPlayer';
+export interface MediaSessionOptions {
+    title?: string;
+    artist?: string;
+    album?: string;
+    /** Cover art, e.g. `[{ src: '/cover-512.jpg', sizes: '512x512', type: 'image/jpeg' }]`. */
+    artwork?: MediaImage[];
+    /** Shows a previous button on the lock screen and makes the key work. */
+    onPrevious?: () => void;
+    /** Shows a next button on the lock screen and makes the key work. */
+    onNext?: () => void;
+    /** Seconds the skip back and forward buttons move (default 10). */
+    seekOffset?: number;
+}
+/** What useMediaSession needs from a player: useMediaPlayer's, or your own. */
+export type MediaSessionPlayer = Pick<MediaPlayer, 'playing' | 'currentTime' | 'duration' | 'playbackRate' | 'play' | 'pause' | 'seek'>;
+/**
+ * Puts what's playing on the lock screen, the notification shade and the OS
+ * media controls (title, artist, cover, position), and makes play, pause,
+ * seek, previous, next and the keyboard's media keys control your player.
+ * Does nothing where the browser has no Media Session API.
+ */
+export declare function useMediaSession(player: MediaSessionPlayer, options?: MediaSessionOptions): void;
+//# sourceMappingURL=useMediaSession.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaSession.d.ts","sourceRoot":"","sources":["../../packages/utils/useMediaSession.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,WAAW,mBAAmB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,+EAA+E;AAC/E,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACjC,WAAW,EACX,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CACtF,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,GAAE,mBAAwB,QAuE5F"}

package/dist/utils/useMediaSession.js

@@ -0,0 +1,76 @@
+"use client";
+import { useEffect as e, useLayoutEffect as t, useRef as n } from "react";
+//#region packages/utils/useMediaSession.ts
+function r(r, i = {}) {
+	let { title: a, artist: o, album: s, artwork: c, onPrevious: l, onNext: u } = i, d = n({
+		player: r,
+		options: i
+	});
+	t(() => {
+		d.current = {
+			player: r,
+			options: i
+		};
+	});
+	let f = typeof navigator < "u" && "mediaSession" in navigator, p = JSON.stringify(c ?? []);
+	e(() => {
+		if (f) return navigator.mediaSession.metadata = new MediaMetadata({
+			title: a,
+			artist: o,
+			album: s,
+			artwork: JSON.parse(p)
+		}), () => {
+			navigator.mediaSession.metadata = null;
+		};
+	}, [
+		f,
+		a,
+		o,
+		s,
+		p
+	]), e(() => {
+		f && (navigator.mediaSession.playbackState = r.playing ? "playing" : "paused");
+	}, [f, r.playing]);
+	let { duration: m, currentTime: h, playbackRate: g } = r;
+	e(() => {
+		if (f) try {
+			m > 0 ? navigator.mediaSession.setPositionState({
+				duration: m,
+				position: Math.min(h, m),
+				playbackRate: g || 1
+			}) : navigator.mediaSession.setPositionState();
+		} catch {}
+	}, [
+		f,
+		m,
+		h,
+		g
+	]);
+	let _ = !!l, v = !!u;
+	e(() => {
+		if (!f) return;
+		let e = () => d.current.options.seekOffset ?? 10, t = () => d.current.player, n = [
+			["play", () => void t().play().catch(() => {})],
+			["pause", () => t().pause()],
+			["seekto", (e) => e.seekTime != null && t().seek(e.seekTime)],
+			["seekbackward", (n) => t().seek(t().currentTime - (n.seekOffset ?? e()))],
+			["seekforward", (n) => t().seek(t().currentTime + (n.seekOffset ?? e()))],
+			["previoustrack", _ ? () => d.current.options.onPrevious?.() : null],
+			["nexttrack", v ? () => d.current.options.onNext?.() : null]
+		], r = (e, t) => {
+			try {
+				navigator.mediaSession.setActionHandler(e, t);
+			} catch {}
+		};
+		for (let [e, t] of n) r(e, t);
+		return () => {
+			for (let [e] of n) r(e, null);
+		};
+	}, [
+		f,
+		_,
+		v
+	]);
+}
+//#endregion
+export { r as useMediaSession };