@mattebox/player-diagnostics 0.3.0 → 0.5.0

package/dist/sampler.js

@@ -1,208 +1,196 @@
-import { slimEntry } from './trace.js';
+import { slimEntry } from "./trace.js";
+//#region src/sampler.ts
 /** Twenty minutes at two samples a second. */
 const MAX_SAMPLES = 2400;
 /** Trace entries kept, the engine's own default for a ring. */
 const MAX_HISTORY = 500;
-const RECOVERY = new Set(['nudge', 'flush', 'skip', 'gap-jump']);
+const RECOVERY = /* @__PURE__ */ new Set([
+	"nudge",
+	"flush",
+	"skip",
+	"gap-jump"
+]);
 /** A rendition's name for a mark: its height, else its bitrate. */
 function label(r) {
-    return r.height !== undefined ? `${r.height}p` : `${Math.round(r.bitrate / 1000)} kbps`;
+	return r.height !== void 0 ? `${r.height}p` : `${Math.round(r.bitrate / 1e3)} kbps`;
 }
-export function createSampler() {
-    let samples = [];
-    let marks = [];
-    let history = [];
-    /** Entries already taken, so the event and the ring never count one twice. */
-    let seen = new WeakSet();
-    let off = null;
-    let last = null;
-    let lastT = 0;
-    let lastQuality = null;
-    let lastPlayingId = null;
-    let stallStart = null;
-    let stalls = 0;
-    let stalledTotal = 0;
-    let switches = 0;
-    let decoded = 0;
-    let dropped = 0;
-    function push(mark) {
-        marks.push(mark);
-        if (marks.length > MAX_SAMPLES * 2)
-            marks.splice(0, marks.length - MAX_SAMPLES * 2);
-    }
-    /** The trace entries since the last read, oldest first. */
-    function fresh(engine) {
-        const trace = engine.stats.trace();
-        let from = 0;
-        if (last !== null) {
-            const at = trace.indexOf(last);
-            from = at >= 0 ? at + 1 : trace.findIndex((entry) => entry.t > lastT);
-            if (from < 0)
-                from = trace.length;
-        }
-        const tail = trace[trace.length - 1];
-        if (tail !== undefined) {
-            last = tail;
-            lastT = tail.t;
-        }
-        return trace.slice(from);
-    }
-    /** One entry in: its marks for the charts, and its slimmed self for the history. */
-    function take(entry, video) {
-        if (seen.has(entry))
-            return;
-        seen.add(entry);
-        history.push(slimEntry(entry));
-        if (history.length > MAX_HISTORY)
-            history.splice(0, history.length - MAX_HISTORY);
-        {
-            const msg = entry.msg;
-            if (msg.type === 'SEGMENT_LOADED' && msg.trackId !== 'manifest' && msg.size > 0) {
-                push({
-                    t: entry.t,
-                    kind: 'segment',
-                    value: (msg.size * 8000) / Math.max(msg.rtt, 1),
-                    label: `${msg.trackId} #${msg.seq}`,
-                    trackId: msg.trackId,
-                });
-            }
-            else if (msg.type === 'STALLED') {
-                push({
-                    t: entry.t,
-                    kind: 'stall',
-                    value: msg.at,
-                    label: `stalled at ${msg.at.toFixed(1)}s`,
-                });
-            }
-            else if (msg.type === 'SEEKING') {
-                push({ t: entry.t, kind: 'seek', value: msg.to, label: `seek to ${msg.to.toFixed(1)}s` });
-            }
-            for (const effect of entry.effects) {
-                if (effect.kind !== 'emit')
-                    continue;
-                const name = effect.event.replace('recovery:', '');
-                if (RECOVERY.has(name)) {
-                    push({
-                        t: entry.t,
-                        kind: name,
-                        value: video.currentTime,
-                        label: `recovery ${name}`,
-                    });
-                }
-            }
-        }
-    }
-    function reset() {
-        samples = [];
-        marks = [];
-        history = [];
-        seen = new WeakSet();
-        last = null;
-        lastT = 0;
-        lastQuality = null;
-        lastPlayingId = null;
-        stallStart = null;
-        stalls = 0;
-        stalledTotal = 0;
-        switches = 0;
-        decoded = 0;
-        dropped = 0;
-    }
-    function release() {
-        off?.();
-        off = null;
-    }
-    return {
-        attach(video, engine) {
-            release();
-            reset();
-            if (engine === null)
-                return;
-            off = engine.on('trace', (entry) => {
-                take(entry, video);
-            });
-        },
-        release,
-        poll(video, engine) {
-            const now = performance.now();
-            // The ring, for an engine that keeps one and emits nothing.
-            if (engine !== null)
-                for (const entry of fresh(engine))
-                    take(entry, video);
-            const state = engine?.stats.snapshot() ?? null;
-            const playing = engine?.quality.playing ?? null;
-            const quality = video.getVideoPlaybackQuality?.();
-            decoded = quality?.totalVideoFrames ?? 0;
-            dropped = quality?.droppedVideoFrames ?? 0;
-            const droppedDelta = lastQuality === null ? 0 : Math.max(0, dropped - lastQuality.dropped);
-            const decodedDelta = lastQuality === null ? 0 : Math.max(0, decoded - lastQuality.decoded);
-            lastQuality = { dropped, decoded };
-            let ahead = 0;
-            for (let i = 0; i < video.buffered.length; i += 1) {
-                if (video.buffered.start(i) <= video.currentTime + 0.25 &&
-                    video.buffered.end(i) > video.currentTime) {
-                    ahead = video.buffered.end(i) - video.currentTime;
-                }
-            }
-            const stalled = !video.paused &&
-                !video.ended &&
-                !video.seeking &&
-                video.readyState < 3 &&
-                video.currentTime > 0;
-            if (stalled && stallStart === null) {
-                stallStart = now;
-                stalls += 1;
-            }
-            else if (!stalled && stallStart !== null) {
-                stalledTotal += (now - stallStart) / 1000;
-                stallStart = null;
-            }
-            if (playing !== null && lastPlayingId !== null && playing.id !== lastPlayingId) {
-                switches += 1;
-                push({
-                    t: now,
-                    kind: 'switch',
-                    value: playing.height ?? playing.bitrate,
-                    label: `now ${label(playing)}`,
-                });
-            }
-            if (playing !== null)
-                lastPlayingId = playing.id;
-            samples.push({
-                t: now,
-                currentTime: video.currentTime,
-                slow: state?.stats.throughputEwma ?? 0,
-                fast: state?.stats.throughputFastEwma ?? 0,
-                ahead,
-                stalled,
-                dropped: droppedDelta,
-                decoded: decodedDelta,
-                playingId: playing?.id ?? null,
-                playingBitrate: playing?.bitrate ?? 0,
-                playingHeight: playing?.height ?? 0,
-            });
-            if (samples.length > MAX_SAMPLES)
-                samples.splice(0, samples.length - MAX_SAMPLES);
-        },
-        get samples() {
-            return samples;
-        },
-        get marks() {
-            return marks;
-        },
-        get history() {
-            return history;
-        },
-        get counters() {
-            const current = stallStart === null ? 0 : (performance.now() - stallStart) / 1000;
-            return {
-                stalls,
-                stalledSeconds: stalledTotal + current,
-                switches,
-                decoded,
-                dropped,
-            };
-        },
-    };
+function createSampler() {
+	let samples = [];
+	let marks = [];
+	let history = [];
+	/** Entries already taken, so the event and the ring never count one twice. */
+	let seen = /* @__PURE__ */ new WeakSet();
+	let off = null;
+	let last = null;
+	let lastT = 0;
+	let lastQuality = null;
+	let lastPlayingId = null;
+	let stallStart = null;
+	let stalls = 0;
+	let stalledTotal = 0;
+	let switches = 0;
+	let decoded = 0;
+	let dropped = 0;
+	function push(mark) {
+		marks.push(mark);
+		if (marks.length > MAX_SAMPLES * 2) marks.splice(0, marks.length - MAX_SAMPLES * 2);
+	}
+	/** The trace entries since the last read, oldest first. */
+	function fresh(engine) {
+		const trace = engine.stats.trace();
+		let from = 0;
+		if (last !== null) {
+			const at = trace.indexOf(last);
+			from = at >= 0 ? at + 1 : trace.findIndex((entry) => entry.t > lastT);
+			if (from < 0) from = trace.length;
+		}
+		const tail = trace[trace.length - 1];
+		if (tail !== void 0) {
+			last = tail;
+			lastT = tail.t;
+		}
+		return trace.slice(from);
+	}
+	/** One entry in: its marks for the charts, and its slimmed self for the history. */
+	function take(entry, video) {
+		if (seen.has(entry)) return;
+		seen.add(entry);
+		history.push(slimEntry(entry));
+		if (history.length > MAX_HISTORY) history.splice(0, history.length - MAX_HISTORY);
+		{
+			const msg = entry.msg;
+			if (msg.type === "SEGMENT_LOADED" && msg.trackId !== "manifest" && msg.size > 0) push({
+				t: entry.t,
+				kind: "segment",
+				value: msg.size * 8e3 / Math.max(msg.rtt, 1),
+				label: `${msg.trackId} #${msg.seq}`,
+				trackId: msg.trackId
+			});
+			else if (msg.type === "STALLED") push({
+				t: entry.t,
+				kind: "stall",
+				value: msg.at,
+				label: `stalled at ${msg.at.toFixed(1)}s`
+			});
+			else if (msg.type === "SEEKING") push({
+				t: entry.t,
+				kind: "seek",
+				value: msg.to,
+				label: `seek to ${msg.to.toFixed(1)}s`
+			});
+			for (const effect of entry.effects) {
+				if (effect.kind !== "emit") continue;
+				const name = effect.event.replace("recovery:", "");
+				if (RECOVERY.has(name)) push({
+					t: entry.t,
+					kind: name,
+					value: video.currentTime,
+					label: `recovery ${name}`
+				});
+			}
+		}
+	}
+	function reset() {
+		samples = [];
+		marks = [];
+		history = [];
+		seen = /* @__PURE__ */ new WeakSet();
+		last = null;
+		lastT = 0;
+		lastQuality = null;
+		lastPlayingId = null;
+		stallStart = null;
+		stalls = 0;
+		stalledTotal = 0;
+		switches = 0;
+		decoded = 0;
+		dropped = 0;
+	}
+	function release() {
+		off?.();
+		off = null;
+	}
+	return {
+		attach(video, engine) {
+			release();
+			reset();
+			if (engine === null) return;
+			off = engine.on("trace", (entry) => {
+				take(entry, video);
+			});
+		},
+		release,
+		poll(video, engine) {
+			const now = performance.now();
+			if (engine !== null) for (const entry of fresh(engine)) take(entry, video);
+			const state = engine?.stats.snapshot() ?? null;
+			const playing = engine?.quality.playing ?? null;
+			const quality = video.getVideoPlaybackQuality?.();
+			decoded = quality?.totalVideoFrames ?? 0;
+			dropped = quality?.droppedVideoFrames ?? 0;
+			const droppedDelta = lastQuality === null ? 0 : Math.max(0, dropped - lastQuality.dropped);
+			const decodedDelta = lastQuality === null ? 0 : Math.max(0, decoded - lastQuality.decoded);
+			lastQuality = {
+				dropped,
+				decoded
+			};
+			let ahead = 0;
+			for (let i = 0; i < video.buffered.length; i += 1) if (video.buffered.start(i) <= video.currentTime + .25 && video.buffered.end(i) > video.currentTime) ahead = video.buffered.end(i) - video.currentTime;
+			const stalled = !video.paused && !video.ended && !video.seeking && video.readyState < 3 && video.currentTime > 0;
+			if (stalled && stallStart === null) {
+				stallStart = now;
+				stalls += 1;
+			} else if (!stalled && stallStart !== null) {
+				stalledTotal += (now - stallStart) / 1e3;
+				stallStart = null;
+			}
+			if (playing !== null && lastPlayingId !== null && playing.id !== lastPlayingId) {
+				switches += 1;
+				push({
+					t: now,
+					kind: "switch",
+					value: playing.height ?? playing.bitrate,
+					label: `now ${label(playing)}`
+				});
+			}
+			if (playing !== null) lastPlayingId = playing.id;
+			samples.push({
+				t: now,
+				currentTime: video.currentTime,
+				slow: state?.stats.throughputEwma ?? 0,
+				fast: state?.stats.throughputFastEwma ?? 0,
+				ahead,
+				stalled,
+				dropped: droppedDelta,
+				decoded: decodedDelta,
+				playingId: playing?.id ?? null,
+				playingBitrate: playing?.bitrate ?? 0,
+				playingHeight: playing?.height ?? 0
+			});
+			if (samples.length > MAX_SAMPLES) samples.splice(0, samples.length - MAX_SAMPLES);
+		},
+		get samples() {
+			return samples;
+		},
+		get marks() {
+			return marks;
+		},
+		get history() {
+			return history;
+		},
+		get counters() {
+			const current = stallStart === null ? 0 : (performance.now() - stallStart) / 1e3;
+			return {
+				stalls,
+				stalledSeconds: stalledTotal + current,
+				switches,
+				decoded,
+				dropped
+			};
+		}
+	};
 }
+//#endregion
+export { createSampler };
+
 //# sourceMappingURL=sampler.js.map

package/dist/sampler.js.map

@@ -1 +1 @@
-{"version":3,"file":"sampler.js","sourceRoot":"","sources":["../src/sampler.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sampler.js","names":[],"sources":["../src/sampler.ts"],"sourcesContent":["/**\n * The sampler: what the charts, the counters and the report are drawn\n * from, taken every half second while the element is attached, so a stall\n * counted before the panel opened is still counted. It reads the way the\n * engine's playground reads: the kernel state through\n * `engine.stats.snapshot()`, the rendition playing through\n * `engine.quality.playing`, the trace for the segments, the stalls, the\n * seeks and what recovery did, and the video itself for the buffer ahead,\n * the frames and whether it is stalled. The engine emits no event for a\n * quality switch, so the switch is a poll's diff.\n *\n * The trace arrives as `trace` events where the engine emits them, one\n * entry at a time, and the sampler keeps its own history of them, slimmed\n * and bounded, which is what the report sends. An engine without the\n * event keeps a ring instead, and the sampler reads it through a cursor\n * that remembers the last entry seen by identity and, once the ring has\n * evicted it, by its clock. Both routes feed the same intake, and an\n * entry seen once is not taken twice.\n */\nimport type { Mattebox, Rendition, TraceEntry } from 'mattebox';\nimport { slimEntry } from './trace.js';\n\nexport interface Sample {\n  /** performance.now() */\n  readonly t: number;\n  readonly currentTime: number;\n  /** The slow and the fast throughput estimates, bits per second. */\n  readonly slow: number;\n  readonly fast: number;\n  /** Seconds buffered ahead of the playhead. */\n  readonly ahead: number;\n  readonly stalled: boolean;\n  /** Frames dropped and decoded since the last sample. */\n  readonly dropped: number;\n  readonly decoded: number;\n  readonly playingId: string | null;\n  readonly playingBitrate: number;\n  readonly playingHeight: number;\n}\n\nexport type MarkKind =\n  | 'segment'\n  | 'stall'\n  | 'seek'\n  | 'nudge'\n  | 'flush'\n  | 'skip'\n  | 'gap-jump'\n  | 'switch';\n\nexport interface Mark {\n  readonly t: number;\n  readonly kind: MarkKind;\n  readonly value: number;\n  readonly label: string;\n  readonly trackId?: string;\n}\n\nexport interface Counters {\n  readonly stalls: number;\n  /** Seconds spent stalled, the current stall included. */\n  readonly stalledSeconds: number;\n  readonly switches: number;\n  /** The video's own totals for the session. */\n  readonly decoded: number;\n  readonly dropped: number;\n}\n\nexport interface Sampler {\n  /** Forgets everything and follows a session's trace: a new session starts its counts at zero. */\n  attach(video: HTMLVideoElement, engine: Mattebox | null): void;\n  /** Lets go of the session's trace. */\n  release(): void;\n  poll(video: HTMLVideoElement, engine: Mattebox | null): void;\n  readonly samples: readonly Sample[];\n  readonly marks: readonly Mark[];\n  readonly counters: Counters;\n  /** The trace entries kept, slimmed and plain, oldest first. */\n  readonly history: readonly unknown[];\n}\n\n/** Twenty minutes at two samples a second. */\nconst MAX_SAMPLES = 2400;\n/** Trace entries kept, the engine's own default for a ring. */\nconst MAX_HISTORY = 500;\n\nconst RECOVERY: ReadonlySet<string> = new Set(['nudge', 'flush', 'skip', 'gap-jump']);\n\n/** A rendition's name for a mark: its height, else its bitrate. */\nfunction label(r: Rendition): string {\n  return r.height !== undefined ? `${r.height}p` : `${Math.round(r.bitrate / 1000)} kbps`;\n}\n\nexport function createSampler(): Sampler {\n  let samples: Sample[] = [];\n  let marks: Mark[] = [];\n  let history: unknown[] = [];\n  /** Entries already taken, so the event and the ring never count one twice. */\n  let seen = new WeakSet<TraceEntry>();\n  let off: (() => void) | null = null;\n  let last: TraceEntry | null = null;\n  let lastT = 0;\n  let lastQuality: { dropped: number; decoded: number } | null = null;\n  let lastPlayingId: string | null = null;\n  let stallStart: number | null = null;\n  let stalls = 0;\n  let stalledTotal = 0;\n  let switches = 0;\n  let decoded = 0;\n  let dropped = 0;\n\n  function push(mark: Mark): void {\n    marks.push(mark);\n    if (marks.length > MAX_SAMPLES * 2) marks.splice(0, marks.length - MAX_SAMPLES * 2);\n  }\n\n  /** The trace entries since the last read, oldest first. */\n  function fresh(engine: Mattebox): readonly TraceEntry[] {\n    const trace = engine.stats.trace();\n    let from = 0;\n    if (last !== null) {\n      const at = trace.indexOf(last);\n      from = at >= 0 ? at + 1 : trace.findIndex((entry) => entry.t > lastT);\n      if (from < 0) from = trace.length;\n    }\n    const tail = trace[trace.length - 1];\n    if (tail !== undefined) {\n      last = tail;\n      lastT = tail.t;\n    }\n    return trace.slice(from);\n  }\n\n  /** One entry in: its marks for the charts, and its slimmed self for the history. */\n  function take(entry: TraceEntry, video: HTMLVideoElement): void {\n    if (seen.has(entry)) return;\n    seen.add(entry);\n    history.push(slimEntry(entry));\n    if (history.length > MAX_HISTORY) history.splice(0, history.length - MAX_HISTORY);\n    {\n      const msg = entry.msg;\n      if (msg.type === 'SEGMENT_LOADED' && msg.trackId !== 'manifest' && msg.size > 0) {\n        push({\n          t: entry.t,\n          kind: 'segment',\n          value: (msg.size * 8000) / Math.max(msg.rtt, 1),\n          label: `${msg.trackId} #${msg.seq}`,\n          trackId: msg.trackId,\n        });\n      } else if (msg.type === 'STALLED') {\n        push({\n          t: entry.t,\n          kind: 'stall',\n          value: msg.at,\n          label: `stalled at ${msg.at.toFixed(1)}s`,\n        });\n      } else if (msg.type === 'SEEKING') {\n        push({ t: entry.t, kind: 'seek', value: msg.to, label: `seek to ${msg.to.toFixed(1)}s` });\n      }\n      for (const effect of entry.effects) {\n        if (effect.kind !== 'emit') continue;\n        const name = effect.event.replace('recovery:', '');\n        if (RECOVERY.has(name)) {\n          push({\n            t: entry.t,\n            kind: name as MarkKind,\n            value: video.currentTime,\n            label: `recovery ${name}`,\n          });\n        }\n      }\n    }\n  }\n\n  function reset(): void {\n    samples = [];\n    marks = [];\n    history = [];\n    seen = new WeakSet();\n    last = null;\n    lastT = 0;\n    lastQuality = null;\n    lastPlayingId = null;\n    stallStart = null;\n    stalls = 0;\n    stalledTotal = 0;\n    switches = 0;\n    decoded = 0;\n    dropped = 0;\n  }\n\n  function release(): void {\n    off?.();\n    off = null;\n  }\n\n  return {\n    attach(video, engine): void {\n      release();\n      reset();\n      if (engine === null) return;\n      off = engine.on('trace', (entry) => {\n        take(entry as TraceEntry, video);\n      });\n    },\n\n    release,\n\n    poll(video, engine): void {\n      const now = performance.now();\n      // The ring, for an engine that keeps one and emits nothing.\n      if (engine !== null) for (const entry of fresh(engine)) take(entry, video);\n      const state = engine?.stats.snapshot() ?? null;\n      const playing = engine?.quality.playing ?? null;\n\n      const quality = video.getVideoPlaybackQuality?.();\n      decoded = quality?.totalVideoFrames ?? 0;\n      dropped = quality?.droppedVideoFrames ?? 0;\n      const droppedDelta = lastQuality === null ? 0 : Math.max(0, dropped - lastQuality.dropped);\n      const decodedDelta = lastQuality === null ? 0 : Math.max(0, decoded - lastQuality.decoded);\n      lastQuality = { dropped, decoded };\n\n      let ahead = 0;\n      for (let i = 0; i < video.buffered.length; i += 1) {\n        if (\n          video.buffered.start(i) <= video.currentTime + 0.25 &&\n          video.buffered.end(i) > video.currentTime\n        ) {\n          ahead = video.buffered.end(i) - video.currentTime;\n        }\n      }\n\n      const stalled =\n        !video.paused &&\n        !video.ended &&\n        !video.seeking &&\n        video.readyState < 3 &&\n        video.currentTime > 0;\n      if (stalled && stallStart === null) {\n        stallStart = now;\n        stalls += 1;\n      } else if (!stalled && stallStart !== null) {\n        stalledTotal += (now - stallStart) / 1000;\n        stallStart = null;\n      }\n\n      if (playing !== null && lastPlayingId !== null && playing.id !== lastPlayingId) {\n        switches += 1;\n        push({\n          t: now,\n          kind: 'switch',\n          value: playing.height ?? playing.bitrate,\n          label: `now ${label(playing)}`,\n        });\n      }\n      if (playing !== null) lastPlayingId = playing.id;\n\n      samples.push({\n        t: now,\n        currentTime: video.currentTime,\n        slow: state?.stats.throughputEwma ?? 0,\n        fast: state?.stats.throughputFastEwma ?? 0,\n        ahead,\n        stalled,\n        dropped: droppedDelta,\n        decoded: decodedDelta,\n        playingId: playing?.id ?? null,\n        playingBitrate: playing?.bitrate ?? 0,\n        playingHeight: playing?.height ?? 0,\n      });\n      if (samples.length > MAX_SAMPLES) samples.splice(0, samples.length - MAX_SAMPLES);\n    },\n\n    get samples(): readonly Sample[] {\n      return samples;\n    },\n\n    get marks(): readonly Mark[] {\n      return marks;\n    },\n\n    get history(): readonly unknown[] {\n      return history;\n    },\n\n    get counters(): Counters {\n      const current = stallStart === null ? 0 : (performance.now() - stallStart) / 1000;\n      return {\n        stalls,\n        stalledSeconds: stalledTotal + current,\n        switches,\n        decoded,\n        dropped,\n      };\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/style.d.ts

@@ -1,10 +1,2 @@
-/**
- * The element's stylesheet. The button is drawn the way the player's own
- * buttons are, in a copy: the player's styles are internal, and a control
- * of the page's own carries its own sheet. Tokens come through the
- * `--mbx-*` custom properties the player sets, which inherit through light
- * DOM; the chart colours have defaults here and a page overrides them the
- * same way. Nothing carries `!important`, so a page's `::part()` rule wins.
- */
-export declare const STYLE = "\n:host {\n  display: inline-flex;\n  position: relative;\n  --mbx-chart-1: #5aa9e0;\n  --mbx-chart-2: #6fbf8f;\n  --mbx-chart-3: #d9a83f;\n  --mbx-chart-4: #e05a6e;\n  --mbx-chart-5: #a98fe0;\n}\n:host([hidden]) { display: none; }\n:host([inline]) { display: block; }\n[part~=\"button\"] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n  opacity: 0.9;\n}\n[part~=\"button\"]:hover { opacity: 1; }\n[part~=\"button\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"icon\"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }\n:host([inline]) [part~=\"button\"] { display: none; }\n[part~=\"panel\"] {\n  position: absolute;\n  right: 0;\n  bottom: 100%;\n  box-sizing: border-box;\n  width: 560px;\n  margin-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--mbx-text, #f2f3f5);\n  background: rgba(16, 17, 20, 0.95);\n  border-radius: var(--mbx-radius, 4px);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);\n  font: 400 12px/1.5 var(--mbx-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  text-align: left;\n  white-space: normal;\n}\n[part~=\"panel\"][hidden] { display: none; }\n:host([inline]) [part~=\"panel\"] {\n  position: static;\n  width: auto;\n  max-height: none;\n  margin: 0;\n  box-shadow: none;\n  border-radius: 0;\n}\n[part~=\"head\"] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 8px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.12);\n}\n[part~=\"tab\"], [part~=\"chart-tab\"] {\n  font: inherit;\n  color: var(--mbx-muted, #9aa0a6);\n  background: transparent;\n  border: 0;\n  border-radius: var(--mbx-radius, 4px);\n  padding: 3px 8px;\n  cursor: pointer;\n}\n[part~=\"tab\"][aria-selected=\"true\"], [part~=\"chart-tab\"][aria-selected=\"true\"] {\n  color: var(--mbx-text, #f2f3f5);\n  background: rgba(255, 255, 255, 0.12);\n}\n[part~=\"copy\"], [part~=\"close\"], [part~=\"window\"] {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 1px solid rgba(255, 255, 255, 0.25);\n  border-radius: var(--mbx-radius, 4px);\n  padding: 2px 8px;\n  cursor: pointer;\n}\n[part~=\"copy\"] { margin-left: auto; }\n[part~=\"window\"] { margin-left: auto; }\n[part~=\"window\"] option { color: #000; }\n[part~=\"tab\"]:focus-visible, [part~=\"chart-tab\"]:focus-visible, [part~=\"copy\"]:focus-visible,\n[part~=\"close\"]:focus-visible, [part~=\"window\"]:focus-visible {\n  outline: 2px solid var(--mbx-accent, #5b8cff);\n  outline-offset: -2px;\n}\n[part~=\"body\"] { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px; }\n[part~=\"page\"][hidden] { display: none; }\n[part~=\"rows\"] { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }\n[part~=\"key\"] { color: var(--mbx-muted, #9aa0a6); white-space: nowrap; }\n[part~=\"value\"] { margin: 0; overflow-wrap: anywhere; }\n[part~=\"heading\"] {\n  margin: 10px 0 4px;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--mbx-muted, #9aa0a6);\n}\n[part~=\"heading\"]:first-child { margin-top: 0; }\n[part~=\"note\"] { margin: 0; color: var(--mbx-muted, #9aa0a6); }\n[part~=\"chart-tabs\"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }\n[part~=\"chart\"] { display: block; width: 100%; height: 160px; }\n[part~=\"legend\"] { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; color: var(--mbx-muted, #9aa0a6); }\n[part~=\"swatch\"] { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: middle; }\n[part~=\"readout\"] { margin-top: 4px; }\n[part~=\"table\"] { width: 100%; border-collapse: collapse; margin-bottom: 4px; }\n[part~=\"cell\"] { padding: 2px 6px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; font-weight: 400; }\n[part~=\"label\"] { color: var(--mbx-muted, #9aa0a6); }\n[part~=\"ok\"] { color: var(--mbx-chart-2); }\n[part~=\"bad\"] { color: var(--mbx-chart-4); }\n[part~=\"na\"] { color: var(--mbx-muted, #9aa0a6); }\n[part~=\"ok\"], [part~=\"bad\"], [part~=\"na\"], [part~=\"maybe\"] { font-weight: 600; }\n";
+export declare const STYLE: string;
 //# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,g3IA2HjB,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK,QAAY,CAAC"}

package/dist/style.js

@@ -1,133 +1,5 @@
-/**
- * The element's stylesheet. The button is drawn the way the player's own
- * buttons are, in a copy: the player's styles are internal, and a control
- * of the page's own carries its own sheet. Tokens come through the
- * `--mbx-*` custom properties the player sets, which inherit through light
- * DOM; the chart colours have defaults here and a page overrides them the
- * same way. Nothing carries `!important`, so a page's `::part()` rule wins.
- */
-export const STYLE = `
-:host {
-  display: inline-flex;
-  position: relative;
-  --mbx-chart-1: #5aa9e0;
-  --mbx-chart-2: #6fbf8f;
-  --mbx-chart-3: #d9a83f;
-  --mbx-chart-4: #e05a6e;
-  --mbx-chart-5: #a98fe0;
-}
-:host([hidden]) { display: none; }
-:host([inline]) { display: block; }
-[part~="button"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  border: 0;
-  border-radius: var(--mbx-radius);
-  cursor: pointer;
-  opacity: 0.9;
-}
-[part~="button"]:hover { opacity: 1; }
-[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
-:host([inline]) [part~="button"] { display: none; }
-[part~="panel"] {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  box-sizing: border-box;
-  width: 560px;
-  margin-bottom: 8px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  color: var(--mbx-text, #f2f3f5);
-  background: rgba(16, 17, 20, 0.95);
-  border-radius: var(--mbx-radius, 4px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-  font: 400 12px/1.5 var(--mbx-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  text-align: left;
-  white-space: normal;
-}
-[part~="panel"][hidden] { display: none; }
-:host([inline]) [part~="panel"] {
-  position: static;
-  width: auto;
-  max-height: none;
-  margin: 0;
-  box-shadow: none;
-  border-radius: 0;
-}
-[part~="head"] {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 8px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-}
-[part~="tab"], [part~="chart-tab"] {
-  font: inherit;
-  color: var(--mbx-muted, #9aa0a6);
-  background: transparent;
-  border: 0;
-  border-radius: var(--mbx-radius, 4px);
-  padding: 3px 8px;
-  cursor: pointer;
-}
-[part~="tab"][aria-selected="true"], [part~="chart-tab"][aria-selected="true"] {
-  color: var(--mbx-text, #f2f3f5);
-  background: rgba(255, 255, 255, 0.12);
-}
-[part~="copy"], [part~="close"], [part~="window"] {
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: var(--mbx-radius, 4px);
-  padding: 2px 8px;
-  cursor: pointer;
-}
-[part~="copy"] { margin-left: auto; }
-[part~="window"] { margin-left: auto; }
-[part~="window"] option { color: #000; }
-[part~="tab"]:focus-visible, [part~="chart-tab"]:focus-visible, [part~="copy"]:focus-visible,
-[part~="close"]:focus-visible, [part~="window"]:focus-visible {
-  outline: 2px solid var(--mbx-accent, #5b8cff);
-  outline-offset: -2px;
-}
-[part~="body"] { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px; }
-[part~="page"][hidden] { display: none; }
-[part~="rows"] { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }
-[part~="key"] { color: var(--mbx-muted, #9aa0a6); white-space: nowrap; }
-[part~="value"] { margin: 0; overflow-wrap: anywhere; }
-[part~="heading"] {
-  margin: 10px 0 4px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--mbx-muted, #9aa0a6);
-}
-[part~="heading"]:first-child { margin-top: 0; }
-[part~="note"] { margin: 0; color: var(--mbx-muted, #9aa0a6); }
-[part~="chart-tabs"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
-[part~="chart"] { display: block; width: 100%; height: 160px; }
-[part~="legend"] { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; color: var(--mbx-muted, #9aa0a6); }
-[part~="swatch"] { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: middle; }
-[part~="readout"] { margin-top: 4px; }
-[part~="table"] { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
-[part~="cell"] { padding: 2px 6px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; font-weight: 400; }
-[part~="label"] { color: var(--mbx-muted, #9aa0a6); }
-[part~="ok"] { color: var(--mbx-chart-2); }
-[part~="bad"] { color: var(--mbx-chart-4); }
-[part~="na"] { color: var(--mbx-muted, #9aa0a6); }
-[part~="ok"], [part~="bad"], [part~="na"], [part~="maybe"] { font-weight: 600; }
-`;
+const STYLE = ":host{--mbx-chart-1:#5aa9e0;--mbx-chart-2:#6fbf8f;--mbx-chart-3:#d9a83f;--mbx-chart-4:#e05a6e;--mbx-chart-5:#a98fe0;display:inline-flex;position:relative}:host([hidden]){display:none}:host([inline]){display:block}[part~=button]{width:40px;height:40px;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;opacity:.9;background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}[part~=button]:hover{opacity:1}[part~=button]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=button]:focus:not(:focus-visible){outline:none}[part~=icon],::slotted(*){fill:currentColor;width:1.75em;height:1.75em}:host([inline]) [part~=button]{display:none}[part~=panel]{box-sizing:border-box;width:560px;color:var(--mbx-text,#f2f3f5);border-radius:var(--mbx-radius,4px);font:400 12px / 1.5 var(--mbx-mono,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);text-align:left;white-space:normal;background:#101114f2;flex-direction:column;margin-bottom:8px;display:flex;position:absolute;bottom:100%;right:0;overflow:hidden;box-shadow:0 4px 16px #00000080}[part~=panel][hidden]{display:none}:host([inline]) [part~=panel]{width:auto;max-height:none;box-shadow:none;border-radius:0;margin:0;position:static}[part~=head]{border-bottom:1px solid #ffffff1f;align-items:center;padding:6px;display:flex}[part~=tab],[part~=chart-tab]{font:inherit;color:var(--mbx-muted,#9aa0a6);border-radius:var(--mbx-radius,4px);cursor:pointer;background:0 0;border:0;padding:3px 8px}[part~=tab][aria-selected=true],[part~=chart-tab][aria-selected=true]{color:var(--mbx-text,#f2f3f5);background:#ffffff1f}[part~=copy],[part~=close],[part~=window]{font:inherit;color:inherit;border-radius:var(--mbx-radius,4px);cursor:pointer;background:0 0;border:1px solid #ffffff40;padding:2px 8px}[part~=head]>*{margin:0 2px}[part~=head]>[part~=copy],[part~=chart-tabs]>[part~=window]{margin-left:auto}[part~=window] option{color:#000}[part~=tab]:focus,[part~=chart-tab]:focus,[part~=copy]:focus,[part~=close]:focus,[part~=window]:focus{outline:2px solid var(--mbx-accent,#5b8cff);outline-offset:-2px}[part~=tab]:focus:not(:focus-visible){outline:none}[part~=chart-tab]:focus:not(:focus-visible){outline:none}[part~=copy]:focus:not(:focus-visible){outline:none}[part~=close]:focus:not(:focus-visible){outline:none}[part~=window]:focus:not(:focus-visible){outline:none}[part~=body]{overscroll-behavior:contain;min-height:0;padding:8px;overflow:auto}[part~=page][hidden]{display:none}[part~=rows]{grid-template-columns:max-content 1fr;gap:2px 12px;margin:0;display:grid}[part~=key]{color:var(--mbx-muted,#9aa0a6);white-space:nowrap}[part~=value]{overflow-wrap:anywhere;margin:0}[part~=heading]{letter-spacing:.06em;text-transform:uppercase;color:var(--mbx-muted,#9aa0a6);margin:10px 0 4px;font-size:11px;font-weight:600}[part~=heading]:first-child{margin-top:0}[part~=note]{color:var(--mbx-muted,#9aa0a6);margin:0}[part~=chart-tabs]{flex-wrap:wrap;align-items:center;margin:-2px -2px 4px;display:flex}[part~=chart-tabs]>*{margin:2px}[part~=chart]{width:100%;height:160px;display:block}[part~=legend]{color:var(--mbx-muted,#9aa0a6);flex-wrap:wrap;margin:3px -6px -1px;display:flex}[part~=legend]>*{margin:1px 6px}[part~=swatch]{vertical-align:middle;border-radius:2px;width:10px;height:10px;margin-right:4px;display:inline-block}[part~=readout]{margin-top:4px}[part~=table]{border-collapse:collapse;width:100%;margin-bottom:4px}[part~=cell]{text-align:left;white-space:nowrap;border-bottom:1px solid #ffffff14;padding:2px 6px;font-weight:400}[part~=label]{color:var(--mbx-muted,#9aa0a6)}[part~=ok]{color:var(--mbx-chart-2)}[part~=bad]{color:var(--mbx-chart-4)}[part~=na]{color:var(--mbx-muted,#9aa0a6)}[part~=ok],[part~=bad],[part~=na],[part~=maybe]{font-weight:600}";
+//#endregion
+export { STYLE };
+
 //# sourceMappingURL=style.js.map

package/dist/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HpB,CAAC"}
+{"version":3,"file":"style.js","names":[],"sources":["../src/style.ts"],"sourcesContent":["/**\n * The element's stylesheet. The button is drawn the way the player's own\n * buttons are, in a copy: the player's styles are internal, and a control\n * of the page's own carries its own sheet. Tokens come through the\n * `--mbx-*` custom properties the player sets, which inherit through light\n * DOM; the chart colours have defaults here and a page overrides them the\n * same way. Nothing carries `!important`, so a page's `::part()` rule wins.\n */\nimport STYLE_CSS from './style.css?inline';\n\nexport const STYLE = STYLE_CSS;\n"],"mappings":"AAUA,MAAA,QAAA"}