@editframe/elements 0.17.6-beta.0 → 0.18.7-beta.0

package/dist/elements/EFVideo.js

@@ -1,17 +1,29 @@
 import { EFMedia } from "./EFMedia.js";
-import { DelayedLoadingState } from "../DelayedLoadingState.js";
 import { TWMixin } from "../gui/TWMixin2.js";
-import { ScrubTrackManager } from "../ScrubTrackManager.js";
-import { printTaskStatus } from "./printTaskStatus.js";
+import { DelayedLoadingState } from "../DelayedLoadingState.js";
+import { makeVideoBufferTask } from "./EFMedia/videoTasks/makeVideoBufferTask.js";
+import { makeVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeVideoInitSegmentFetchTask.js";
+import { makeVideoInputTask } from "./EFMedia/videoTasks/makeVideoInputTask.js";
+import { makeVideoSeekTask } from "./EFMedia/videoTasks/makeVideoSeekTask.js";
+import { makeVideoSegmentFetchTask } from "./EFMedia/videoTasks/makeVideoSegmentFetchTask.js";
+import { makeVideoSegmentIdTask } from "./EFMedia/videoTasks/makeVideoSegmentIdTask.js";
 import { Task } from "@lit/task";
 import debug from "debug";
 import { css, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import _decorate from "@oxc-project/runtime/helpers/decorate";
-import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
 import { createRef, ref } from "lit/directives/ref.js";
 const log = debug("ef:elements:EFVideo");
 let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
+	static get observedAttributes() {
+		const parentAttributes = EFMedia.observedAttributes || [];
+		return [
+			...parentAttributes,
+			"video-buffer-duration",
+			"max-video-buffer-fetches",
+			"enable-video-buffering"
+		];
+	}
 	static {
 		this.styles = [css`
       :host {
@@ -76,7 +88,15 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	constructor() {
 		super();
 		this.canvasRef = createRef();
-		this.lastSeekTimeMs = 0;
+		this.videoBufferDurationMs = 6e4;
+		this.maxVideoBufferFetches = 2;
+		this.enableVideoBuffering = true;
+		this.videoSegmentIdTask = makeVideoSegmentIdTask(this);
+		this.videoInitSegmentFetchTask = makeVideoInitSegmentFetchTask(this);
+		this.videoSegmentFetchTask = makeVideoSegmentFetchTask(this);
+		this.videoInputTask = makeVideoInputTask(this);
+		this.videoSeekTask = makeVideoSeekTask(this);
+		this.videoBufferTask = makeVideoBufferTask(this);
 		this.loadingState = {
 			isLoading: false,
 			operation: null,
@@ -87,71 +107,28 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			onError: (error) => {
 				console.error("frameTask error", error);
 			},
+			onComplete: () => {},
 			task: async ([_desiredSeekTimeMs], { signal }) => {
-				await this.seekTask.taskComplete;
-				if (signal.aborted) return;
-				await this.fragmentIndexTask.taskComplete;
-				if (signal.aborted) return;
-				await this.mediaSegmentsTask.taskComplete;
-				if (signal.aborted) return;
-				await this.videoAssetTask.taskComplete;
-				if (signal.aborted) return;
+				await this.videoSeekTask.taskComplete;
 				await this.paintTask.taskComplete;
 				if (signal.aborted) return;
 			}
 		});
-		this.videoAssetTask = new Task(this, {
-			autoRun: true,
-			args: () => [this.effectiveMode, this.mediaSegmentsTask.value],
-			onError: (error) => {
-				console.error("videoAsset task error", error);
-			},
-			task: async ([mode, _files], { signal: _signal }) => {
-				await this.mediaSegmentsTask.taskComplete;
-				if (_signal.aborted) return void 0;
-				await this.fragmentIndexTask.taskComplete;
-				if (_signal.aborted) return void 0;
-				const files = this.mediaSegmentsTask.value;
-				const fragmentIndex = this.fragmentIndexTask.value;
-				if (!files) {
-					log("trace: videoAsset task aborted - no files");
-					throw new Error(`Video asset creation failed: No media segment files available. This indicates a problem with media segment loading for source: "${this.src}"`);
-				}
-				const computedVideoTrackId = Object.values(fragmentIndex ?? {}).find((track) => track.type === "video")?.track;
-				if (computedVideoTrackId === void 0) {
-					log("trace: videoAsset task aborted - no video track");
-					throw new Error(`Video asset creation failed: No video track found in media segments. Source may not contain video content: "${this.src}"`);
-				}
-				const videoFile = files[computedVideoTrackId];
-				if (!videoFile) {
-					log("trace: videoAsset task aborted - no video file");
-					throw new Error(`Video asset creation failed: Video file not available for track ${computedVideoTrackId}. Media segment loading may have failed for source: "${this.src}"`);
-				}
-				const existingAsset = this.videoAssetTask.value;
-				if (existingAsset) {
-					for (const frame of existingAsset?.decodedFrames || []) frame.close();
-					const decoder = existingAsset?.videoDecoder;
-					if (decoder && decoder.state !== "closed") decoder.close();
-				}
-				if (_signal.aborted) return void 0;
-				log("trace: creating video asset", { mode });
-				const videoTrackFragmentIndex = Object.values(fragmentIndex ?? {}).find((track) => track.type === "video");
-				const startTimeOffsetMs = Number((videoTrackFragmentIndex?.startTimeOffsetMs ?? 0).toFixed(5));
-				if (mode === "jit-transcode") {
-					const result$1 = await VideoAsset.createFromCompleteMP4(`jit-segment-${computedVideoTrackId}`, videoFile, { startTimeOffsetMs });
-					return result$1;
-				}
-				const result = await VideoAsset.createFromReadableStream("video.mp4", videoFile.stream(), videoFile, { startTimeOffsetMs });
-				return result;
-			}
-		});
 		this.paintTask = new Task(this, {
 			args: () => [this.desiredSeekTimeMs],
 			onError: (error) => {
 				console.error("paintTask error", error);
 			},
+			onComplete: () => {},
 			task: async ([_seekToMs], { signal }) => {
+				await this.videoSeekTask.taskComplete;
 				const isProductionRendering = this.isInProductionRenderingMode();
+				const sample = this.videoSeekTask.value;
+				if (sample) {
+					const videoFrame = sample.toVideoFrame();
+					this.displayFrame(videoFrame, _seekToMs);
+					videoFrame.close();
+				}
 				if (!isProductionRendering) {
 					if (!this.rootTimegroup || this.rootTimegroup.currentTimeMs === 0 && this.desiredSeekTimeMs === 0) return;
 				} else {
@@ -159,83 +136,6 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 					if (!this.isFrameRenderingActive()) return;
 				}
 				if (signal.aborted) return;
-				await this.mediaSegmentsTask.taskComplete;
-				if (signal.aborted) return;
-				await this.videoAssetTask.taskComplete;
-				if (signal.aborted) return;
-				const videoAsset = this.videoAssetTask.value;
-				const currentSeekToMs = this.desiredSeekTimeMs;
-				if (!videoAsset) {
-					log("trace: paintTask aborted - no video asset");
-					throw new Error(`Frame rendering failed: No video asset available. This may indicate a problem with video loading or an invalid source: "${this.src}"`);
-				}
-				if (this.#decoderNeedsReset) try {
-					if (videoAsset?.videoDecoder) videoAsset.configureDecoder();
-					else console.warn("No video decoder available for reset");
-					this.#decoderNeedsReset = false;
-				} catch (resetError) {
-					console.error("reset error", resetError);
-					throw new Error(`Frame rendering failed: Unable to reset video decoder after previous error. Decoder state: ${resetError instanceof Error ? resetError.message : "Unknown error"}. Try refreshing the page or reloading the video.`);
-				}
-				if (signal.aborted) return;
-				if (this.#decoderLock) return;
-				try {
-					this.#decoderLock = true;
-					const currentVideoAsset = this.videoAssetTask.value;
-					if (videoAsset !== currentVideoAsset) return;
-					const decoderState = videoAsset?.videoDecoder?.state;
-					if (decoderState === "closed") return;
-					if (this.effectiveMode === "jit-transcode" && this.scrubTrackManager) {
-						const shouldUseScrub = this.scrubTrackManager.shouldUseScrubTrack(currentSeekToMs);
-						const isFastSeeking = this.scrubTrackManager.isFastSeeking(this.lastSeekTimeMs, currentSeekToMs);
-						if (shouldUseScrub || isFastSeeking) try {
-							this.startDelayedLoading("scrub-segment-load", "Loading scrub segment...");
-							const scrubFrame = await this.scrubTrackManager.getScrubFrame(currentSeekToMs);
-							if (scrubFrame && this.canvasElement) {
-								this.scrubTrackManager.recordCacheMiss();
-								this.lastSeekTimeMs = currentSeekToMs;
-								this.clearDelayedLoading("scrub-segment-load");
-								return this.displayFrame(scrubFrame, currentSeekToMs);
-							}
-							console.warn("Scrub track returned null frame, falling back to normal video");
-							this.clearDelayedLoading("scrub-segment-load");
-							this.startDelayedLoading("video-segment-fallback", "Loading high quality video...");
-						} catch (error) {
-							this.clearDelayedLoading("scrub-segment-load");
-							console.warn("Scrub track failed, falling back to normal video:", error);
-							this.startDelayedLoading("video-segment-fallback", "Loading high quality video...");
-						}
-						else this.scrubTrackManager?.recordCacheHit();
-					}
-					const shouldShowLoading = !this.delayedLoadingState.isLoading && (this.effectiveMode !== "asset" || !videoAsset);
-					if (shouldShowLoading) this.startDelayedLoading("video-segment", "Loading video segment...");
-					this.lastSeekTimeMs = currentSeekToMs;
-					const result = await this.renderNormalVideo(videoAsset, currentSeekToMs);
-					this.clearDelayedLoading("video-segment");
-					this.clearDelayedLoading("video-segment-fallback");
-					return result;
-				} catch (error) {
-					this.clearDelayedLoading("scrub-segment-load");
-					this.clearDelayedLoading("video-segment");
-					this.clearDelayedLoading("video-segment-fallback");
-					if (error instanceof Error) {
-						if (error.name === "DataError" && error.message.includes("key frame is required")) {
-							console.warn("Decoder reset during VideoAsset due to key frame requirement");
-							this.#decoderNeedsReset = true;
-							if (this.effectiveMode === "jit-transcode") this.requestUpdate();
-							throw error;
-						}
-						if (error.name === "AbortError") throw new Error("Frame rendering cancelled: Operation was aborted, likely due to a new seek request or component unmounting.");
-						if (error.message.includes("VideoAsset decoder closed") || error.message.includes("recreation in progress")) return;
-						if (error.name === "InvalidStateError" && error.message.includes("closed codec")) return;
-						console.warn("Decoder reset during VideoAsset recreation", error);
-						this.#decoderNeedsReset = true;
-						throw error;
-					}
-					throw new Error(`Frame rendering failed: Unknown error during video rendering at ${currentSeekToMs}ms. Error: ${String(error)}`);
-				} finally {
-					this.#decoderLock = false;
-				}
 			}
 		});
 		this.delayedLoadingState = new DelayedLoadingState(250, (isLoading, message) => {
@@ -261,46 +161,8 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	get canvasElement() {
 		return this.canvasRef.value;
 	}
-	#decoderLock = false;
-	#decoderNeedsReset = false;
-	get frameTaskStatus() {
-		return {
-			desiredSeekTimeMs: this.desiredSeekTimeMs,
-			fragmentIndexTask: printTaskStatus(this.fragmentIndexTask.status),
-			seekTask: printTaskStatus(this.seekTask.status),
-			mediaSegmentsTask: printTaskStatus(this.mediaSegmentsTask.status),
-			assetSegmentLoader: printTaskStatus(this.assetSegmentLoader.status),
-			assetSegmentKeysTask: printTaskStatus(this.assetSegmentKeysTask.status),
-			assetInitSegmentsTask: printTaskStatus(this.assetInitSegmentsTask.status),
-			videoAssetTask: printTaskStatus(this.videoAssetTask.status),
-			paintTask: printTaskStatus(this.paintTask.status),
-			frameTask: printTaskStatus(this.frameTask.status)
-		};
-	}
-	#lastVideoAsset = null;
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		const currentVideoAsset = this.videoAssetTask.value;
-		if (currentVideoAsset !== this.#lastVideoAsset) this.#lastVideoAsset = currentVideoAsset;
-		this.initializeScrubTrackManager();
-	}
-	/**
-	* Initialize scrub track manager if needed
-	*/
-	async initializeScrubTrackManager() {
-		const mode = this.effectiveMode;
-		if (mode === "jit-transcode" && this.src && !this.scrubTrackManager) {
-			const jitClient = this.jitClientTask.value;
-			if (jitClient) try {
-				this.scrubTrackManager = new ScrubTrackManager(this.src, jitClient, { onLoadingStateChange: (isLoading, message) => {
-					if (isLoading) this.startDelayedLoading("scrub-segment", message || "Loading scrub track...");
-					else this.clearDelayedLoading("scrub-segment");
-				} });
-				await this.scrubTrackManager.initialize();
-			} catch (error) {
-				console.warn("Failed to initialize scrub track manager:", error);
-			}
-		}
 	}
 	/**
 	* Start a delayed loading operation for testing
@@ -325,34 +187,6 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		};
 	}
 	/**
-	* Render normal video using existing logic
-	*/
-	async renderNormalVideo(videoAsset, seekToMs) {
-		let targetSeekTimeSeconds = seekToMs / 1e3;
-		try {
-			const currentVideoAsset = this.videoAssetTask.value;
-			if (videoAsset !== currentVideoAsset) throw new Error("VideoAsset decoder closed during seek - recreation in progress");
-			const decoderState = videoAsset?.videoDecoder?.state;
-			if (decoderState === "closed") throw new Error("VideoAsset decoder closed during seek - recreation in progress");
-			if (this.effectiveMode === "jit-transcode") targetSeekTimeSeconds %= 2;
-			const frame = await videoAsset.seekToTime(targetSeekTimeSeconds);
-			if (frame) {
-				const finalVideoAsset = this.videoAssetTask.value;
-				if (videoAsset !== finalVideoAsset) {
-					frame.close();
-					throw new Error("VideoAsset decoder closed during seek - recreation in progress");
-				}
-				const finalSeekToMs = this.desiredSeekTimeMs;
-				return this.displayFrame(frame, finalSeekToMs);
-			}
-			log("trace: no frame returned from seekToTime");
-			throw new Error(`Frame rendering failed: No frame available at time ${seekToMs}ms (${targetSeekTimeSeconds}s). This may indicate seeking beyond video duration, corrupted video data, or an incompatible video format.`);
-		} catch (error) {
-			if (error instanceof Error && (error.message.includes("VideoAsset decoder closed") || error.message.includes("recreation in progress"))) throw error;
-			throw error;
-		}
-	}
-	/**
 	* Display a video frame on the canvas
 	*/
 	displayFrame(frame, seekToMs) {
@@ -383,7 +217,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			log("trace: displayFrame aborted - null frame format");
 			throw new Error(`Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`);
 		}
-		log("trace: drawing frame to canvas");
+		log("trace: drawing frame to canvas", frame.timestamp / 1e3);
 		ctx.drawImage(frame, 0, 0, this.canvasElement.width, this.canvasElement.height);
 		log("trace: frame drawn to canvas", { seekToMs });
 		return seekToMs;
@@ -409,20 +243,79 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		return currentTime >= renderStartTime;
 	}
 	/**
-	* Get scrub track performance statistics
+	* Effective mode - always returns "asset" for EFVideo
+	*/
+	get effectiveMode() {
+		return "asset";
+	}
+	/**
+	* Legacy getter for asset index loader (maps to mediaEngine task)
+	*/
+	get assetIndexLoader() {
+		return this.mediaEngineTask;
+	}
+	/**
+	* Legacy getter for fragment index task (maps to videoSegmentIdTask)
+	*/
+	get fragmentIndexTask() {
+		return this.videoSegmentIdTask;
+	}
+	/**
+	* Legacy getter for seek task (maps to videoSeekTask)
+	*/
+	get seekTask() {
+		return this.videoSeekTask;
+	}
+	/**
+	* Legacy getter for media segments task (maps to videoSegmentFetchTask)
+	*/
+	get mediaSegmentsTask() {
+		return this.videoSegmentFetchTask;
+	}
+	/**
+	* Legacy getter for asset segment keys task (maps to videoSegmentIdTask)
+	*/
+	get assetSegmentKeysTask() {
+		return this.videoSegmentIdTask;
+	}
+	/**
+	* Legacy getter for asset init segments task (maps to videoInitSegmentFetchTask)
+	*/
+	get assetInitSegmentsTask() {
+		return this.videoInitSegmentFetchTask;
+	}
+	/**
+	* Legacy getter for asset segment loader (maps to videoSegmentFetchTask)
+	*/
+	get assetSegmentLoader() {
+		return this.videoSegmentFetchTask;
+	}
+	/**
+	* Legacy getter for video asset task (maps to videoBufferTask)
 	*/
-	getScrubTrackStats() {
-		return this.scrubTrackManager?.getCacheStats() || null;
+	get videoAssetTask() {
+		return this.videoBufferTask;
 	}
 	/**
 	* Clean up resources when component is disconnected
 	*/
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.scrubTrackManager?.cleanup();
 		this.delayedLoadingState.clearAllLoading();
 	}
 };
+_decorate([property({
+	type: Number,
+	attribute: "video-buffer-duration"
+})], EFVideo.prototype, "videoBufferDurationMs", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "max-video-buffer-fetches"
+})], EFVideo.prototype, "maxVideoBufferFetches", void 0);
+_decorate([property({
+	type: Boolean,
+	attribute: "enable-video-buffering"
+})], EFVideo.prototype, "enableVideoBuffering", void 0);
 _decorate([state()], EFVideo.prototype, "loadingState", void 0);
 EFVideo = _decorate([customElement("ef-video")], EFVideo);
 export { EFVideo };

package/dist/elements/EFWaveform.js

@@ -1,9 +1,9 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { TargetController } from "./TargetController.js";
 import { TWMixin } from "../gui/TWMixin2.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
-import { EF_RENDERING } from "../EF_RENDERING.js";
 import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -80,8 +80,8 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 	static {
 		this.styles = css`
       :host {
-        display: block;
         all: inherit;
+        display: block;
         position: relative;
       }
 

package/dist/elements/SampleBuffer.d.ts

@@ -0,0 +1,14 @@
+import { AudioSample, VideoSample } from 'mediabunny';
+export type MediaSample = VideoSample | AudioSample;
+export declare class SampleBuffer {
+    private buffer;
+    private bufferSize;
+    constructor(bufferSize?: number);
+    push(sample: MediaSample): void;
+    clear(): void;
+    peek(): MediaSample | undefined;
+    find(desiredSeekTimeMs: number): MediaSample | undefined;
+    get length(): number;
+    get firstTimestamp(): number;
+    getContents(): MediaSample[];
+}

package/dist/elements/SampleBuffer.js

@@ -0,0 +1,52 @@
+import { roundToMilliseconds } from "./EFMedia/shared/PrecisionUtils.js";
+var SampleBuffer = class {
+	constructor(bufferSize = 10) {
+		this.buffer = [];
+		this.bufferSize = bufferSize;
+	}
+	push(sample) {
+		const currentBuffer = [...this.buffer];
+		currentBuffer.push(sample);
+		if (currentBuffer.length > this.bufferSize) {
+			const shifted = currentBuffer.shift();
+			if (shifted) try {
+				shifted.close();
+			} catch (_error) {}
+		}
+		this.buffer = currentBuffer;
+	}
+	clear() {
+		const toClose = this.buffer;
+		this.buffer = [];
+		for (const sample of toClose) try {
+			sample.close();
+		} catch (_error) {}
+	}
+	peek() {
+		const currentBuffer = this.buffer;
+		return currentBuffer[0];
+	}
+	find(desiredSeekTimeMs) {
+		const currentBuffer = [...this.buffer];
+		if (currentBuffer.length === 0) return void 0;
+		const targetTimeMs = roundToMilliseconds(desiredSeekTimeMs);
+		for (const sample of currentBuffer) {
+			const sampleStartMs = roundToMilliseconds((sample.timestamp || 0) * 1e3);
+			const sampleDurationMs = roundToMilliseconds((sample.duration || 0) * 1e3);
+			const sampleEndMs = roundToMilliseconds(sampleStartMs + sampleDurationMs);
+			if (targetTimeMs >= sampleStartMs && targetTimeMs <= sampleEndMs) return sample;
+		}
+		return void 0;
+	}
+	get length() {
+		return this.buffer.length;
+	}
+	get firstTimestamp() {
+		const currentBuffer = this.buffer;
+		return currentBuffer[0]?.timestamp || 0;
+	}
+	getContents() {
+		return [...this.buffer];
+	}
+};
+export { SampleBuffer };

package/dist/getRenderInfo.js

@@ -30,7 +30,8 @@ const getRenderInfo = async () => {
 		case "EF-VIDEO": {
 			const src = element.src;
 			console.error("Processing element", element.tagName, src);
-			assets.efMedia[src] = element.fragmentIndexTask.value;
+			const mediaEngine = element.mediaEngineTask.value;
+			if (mediaEngine && "data" in mediaEngine) assets.efMedia[src] = mediaEngine.data;
 			break;
 		}
 		case "EF-IMAGE": {

package/dist/gui/ContextMixin.js

@@ -108,7 +108,7 @@ function ContextMixin(superClass) {
 		}
 		#playbackAudioContext = null;
 		#playbackAnimationFrameRequest = null;
-		#AUDIO_PLAYBACK_SLICE_MS = 1e3;
+		#AUDIO_PLAYBACK_SLICE_MS = 47 * 1024 / 48e3 * 1e3;
 		#syncPlayheadToAudioContext(target, startMs) {
 			const rawTimeMs = startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1e3;
 			const nextTimeMs = Math.round(rawTimeMs / this.#MS_PER_FRAME) * this.#MS_PER_FRAME;
@@ -123,6 +123,7 @@ function ContextMixin(superClass) {
 			}
 			if (this.#playbackAnimationFrameRequest) cancelAnimationFrame(this.#playbackAnimationFrameRequest);
 			this.#playbackAudioContext = null;
+			this.#playbackAnimationFrameRequest = null;
 		}
 		async startPlayback() {
 			await this.stopPlayback();
@@ -148,7 +149,7 @@ function ContextMixin(superClass) {
 			}
 			await playbackContext.suspend();
 			const fillBuffer = async () => {
-				if (bufferCount > 1) return;
+				if (bufferCount > 2) return;
 				const canFillBuffer = await queueBufferSource();
 				if (canFillBuffer) fillBuffer();
 			};

package/dist/gui/EFFilmstrip.d.ts

@@ -121,9 +121,9 @@ export declare class EFFilmstrip extends EFFilmstrip_base {
     scrub(e: MouseEvent): void;
     startScrub(e: MouseEvent): void;
     scrollScrub(e: WheelEvent): void;
-    gutterRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
-    hierarchyRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
-    playheadRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    gutterRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    hierarchyRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    playheadRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
     get gutter(): HTMLDivElement | undefined;
     render(): TemplateResult<1>;
     updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;

package/dist/gui/EFFilmstrip.js

@@ -5,8 +5,8 @@ import { targetTimegroupContext } from "./ContextMixin.js";
 import { TimegroupController } from "../elements/TimegroupController.js";
 import { EFTimegroup } from "../elements/EFTimegroup.js";
 import { EFImage } from "../elements/EFImage.js";
-import { EFAudio } from "../elements/EFAudio.js";
 import { TWMixin } from "./TWMixin2.js";
+import { EFAudio } from "../elements/EFAudio.js";
 import { EFVideo } from "../elements/EFVideo.js";
 import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
 import { EFWaveform } from "../elements/EFWaveform.js";

package/dist/gui/EFFitScale.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 export declare class EFFitScale extends LitElement {
-    containerRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
-    contentRef: import('lit-html/directives/ref.js').Ref<HTMLSlotElement>;
+    containerRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    contentRef: import('lit-html/directives/ref').Ref<HTMLSlotElement>;
     createRenderRoot(): this;
     uniqueId: string;
     private scale;

package/dist/gui/TWMixin.js

@@ -1,2 +1,2 @@
-var TWMixin_default = "*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.col-span-2{grid-column:span 2/span 2}.mx-2{margin-left:.5rem;margin-right:.5rem}.mb-\\[1px\\]{margin-bottom:1px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-\\[1\\.1rem\\]{height:1.1rem}.h-\\[5px\\]{height:5px}.h-full{height:100%}.w-1{width:.25rem}.w-\\[2px\\]{width:2px}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-r-2{border-right-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity))}.border-b-slate-600{--tw-border-opacity:1;border-bottom-color:rgb(71 85 105/var(--tw-border-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-opacity-20{--tw-bg-opacity:.2}.p-\\[1px\\]{padding:1px}.pb-0{padding-bottom:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pt-\\[8px\\]{padding-top:8px}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-5xl{font-size:3rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.line-through{text-decoration-line:line-through}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-slate-300{--tw-shadow-color:#cbd5e1;--tw-shadow:var(--tw-shadow-colored)}.shadow-slate-600{--tw-shadow-color:#475569;--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.hover\\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer:hover~.peer-hover\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer:hover~.peer-hover\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.data-\\[focused\\]\\:bg-slate-400[data-focused]{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer[data-focused]~.peer-data-\\[focused\\]\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer[data-focused]~.peer-data-\\[focused\\]\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}";
+var TWMixin_default = "*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-0{left:0}.top-0{top:0}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.col-span-2{grid-column:span 2/span 2}.mx-2{margin-left:.5rem;margin-right:.5rem}.mb-\\[1px\\]{margin-bottom:1px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-full{width:100%;height:100%}.h-\\[1\\.1rem\\]{height:1.1rem}.h-\\[270px\\]{height:270px}.h-\\[500px\\]{height:500px}.h-\\[5px\\]{height:5px}.h-full{height:100%}.w-1{width:.25rem}.w-\\[1000px\\]{width:1000px}.w-\\[2px\\]{width:2px}.w-\\[480px\\]{width:480px}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-r-2{border-right-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity))}.border-b-slate-600{--tw-border-opacity:1;border-bottom-color:rgb(71 85 105/var(--tw-border-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-opacity-20{--tw-bg-opacity:.2}.p-\\[1px\\]{padding:1px}.pb-0{padding-bottom:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pt-\\[8px\\]{padding-top:8px}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-5xl{font-size:3rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.line-through{text-decoration-line:line-through}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-slate-300{--tw-shadow-color:#cbd5e1;--tw-shadow:var(--tw-shadow-colored)}.shadow-slate-600{--tw-shadow-color:#475569;--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.hover\\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer:hover~.peer-hover\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer:hover~.peer-hover\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.data-\\[focused\\]\\:bg-slate-400[data-focused]{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer[data-focused]~.peer-data-\\[focused\\]\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer[data-focused]~.peer-data-\\[focused\\]\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}";
 export { TWMixin_default as default };

package/dist/style.css

@@ -1,2 +1,2 @@
-*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.col-span-2{grid-column:span 2/span 2}.mx-2{margin-left:.5rem;margin-right:.5rem}.mb-\[1px\]{margin-bottom:1px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-\[1\.1rem\]{height:1.1rem}.h-\[5px\]{height:5px}.h-full{height:100%}.w-1{width:.25rem}.w-\[2px\]{width:2px}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-r-2{border-right-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity))}.border-b-slate-600{--tw-border-opacity:1;border-bottom-color:rgb(71 85 105/var(--tw-border-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-opacity-20{--tw-bg-opacity:.2}.p-\[1px\]{padding:1px}.pb-0{padding-bottom:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pt-\[8px\]{padding-top:8px}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-5xl{font-size:3rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.line-through{text-decoration-line:line-through}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-slate-300{--tw-shadow-color:#cbd5e1;--tw-shadow:var(--tw-shadow-colored)}.shadow-slate-600{--tw-shadow-color:#475569;--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.hover\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer:hover~.peer-hover\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer:hover~.peer-hover\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.data-\[focused\]\:bg-slate-400[data-focused]{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer[data-focused]~.peer-data-\[focused\]\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer[data-focused]~.peer-data-\[focused\]\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}
+*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-0{left:0}.top-0{top:0}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.col-span-2{grid-column:span 2/span 2}.mx-2{margin-left:.5rem;margin-right:.5rem}.mb-\[1px\]{margin-bottom:1px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-full{width:100%;height:100%}.h-\[1\.1rem\]{height:1.1rem}.h-\[270px\]{height:270px}.h-\[500px\]{height:500px}.h-\[5px\]{height:5px}.h-full{height:100%}.w-1{width:.25rem}.w-\[1000px\]{width:1000px}.w-\[2px\]{width:2px}.w-\[480px\]{width:480px}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-r-2{border-right-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity))}.border-b-slate-600{--tw-border-opacity:1;border-bottom-color:rgb(71 85 105/var(--tw-border-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-opacity-20{--tw-bg-opacity:.2}.p-\[1px\]{padding:1px}.pb-0{padding-bottom:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pt-\[8px\]{padding-top:8px}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-5xl{font-size:3rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.line-through{text-decoration-line:line-through}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-slate-300{--tw-shadow-color:#cbd5e1;--tw-shadow:var(--tw-shadow-colored)}.shadow-slate-600{--tw-shadow-color:#475569;--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.hover\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer:hover~.peer-hover\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer:hover~.peer-hover\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.data-\[focused\]\:bg-slate-400[data-focused]{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer[data-focused]~.peer-data-\[focused\]\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer[data-focused]~.peer-data-\[focused\]\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}
 /*$vite$:1*/