@editframe/elements 0.21.0-beta.0 → 0.23.7-beta.0

package/dist/gui/EFTimeDisplay.d.ts

@@ -1,5 +1,10 @@
 import { LitElement } from 'lit';
-export declare class EFTimeDisplay extends LitElement {
+declare const EFTimeDisplay_base: (new (...args: any[]) => {
+    target: string;
+    targetElement: import('./Controllable.js').ControllableInterface | null;
+    effectiveContext: import('./Controllable.js').ControllableInterface | null;
+}) & typeof LitElement;
+export declare class EFTimeDisplay extends EFTimeDisplay_base {
     static styles: import('lit').CSSResult;
     currentTimeMs: number;
     durationMs: number;
@@ -11,3 +16,4 @@ declare global {
         "ef-time-display": EFTimeDisplay;
     }
 }
+export {};

package/dist/gui/EFTimeDisplay.js

@@ -1,10 +1,12 @@
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { efContext } from "./efContext.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-var EFTimeDisplay = class EFTimeDisplay$1 extends LitElement {
+var EFTimeDisplay = class EFTimeDisplay$1 extends TargetOrContextMixin(LitElement, efContext) {
 	constructor(..._args) {
 		super(..._args);
 		this.currentTimeMs = NaN;
@@ -24,9 +26,7 @@ var EFTimeDisplay = class EFTimeDisplay$1 extends LitElement {
 	formatTime(ms) {
 		if (!Number.isFinite(ms) || ms < 0) return "0:00";
 		const totalSeconds = Math.floor(ms / 1e3);
-		const minutes = Math.floor(totalSeconds / 60);
-		const seconds = totalSeconds % 60;
-		return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+		return `${Math.floor(totalSeconds / 60)}:${(totalSeconds % 60).toString().padStart(2, "0")}`;
 	}
 	render() {
 		const currentTime = this.currentTimeMs;

package/dist/gui/EFToggleLoop.d.ts

@@ -1,8 +1,13 @@
 import { LitElement } from 'lit';
-import { ContextMixinInterface } from './ContextMixin.js';
-export declare class EFToggleLoop extends LitElement {
+import { ControllableInterface } from './Controllable.js';
+declare const EFToggleLoop_base: (new (...args: any[]) => {
+    target: string;
+    targetElement: ControllableInterface | null;
+    effectiveContext: ControllableInterface | null;
+}) & typeof LitElement;
+export declare class EFToggleLoop extends EFToggleLoop_base {
     static styles: import('lit').CSSResult[];
-    context?: ContextMixinInterface | null;
+    get context(): ControllableInterface | null;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
@@ -10,3 +15,4 @@ declare global {
         "ef-toggle-loop": EFToggleLoop;
     }
 }
+export {};

package/dist/gui/EFToggleLoop.js

@@ -1,14 +1,17 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { efContext } from "./efContext.js";
-import { consume } from "@lit/context";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-var EFToggleLoop = class EFToggleLoop$1 extends LitElement {
+var EFToggleLoop = class EFToggleLoop$1 extends TargetOrContextMixin(LitElement, efContext) {
 	static {
 		this.styles = [css`
       :host {}
     `];
 	}
+	get context() {
+		return this.effectiveContext;
+	}
 	render() {
 		return html`
       <slot @click=${() => {
@@ -17,6 +20,5 @@ var EFToggleLoop = class EFToggleLoop$1 extends LitElement {
     `;
 	}
 };
-__decorate([consume({ context: efContext })], EFToggleLoop.prototype, "context", void 0);
 EFToggleLoop = __decorate([customElement("ef-toggle-loop")], EFToggleLoop);
 export { EFToggleLoop };

package/dist/gui/EFTogglePlay.d.ts

@@ -1,14 +1,22 @@
 import { LitElement } from 'lit';
-import { ContextMixinInterface } from './ContextMixin.js';
-export declare class EFTogglePlay extends LitElement {
+import { ControllableInterface } from './Controllable.js';
+declare const EFTogglePlay_base: (new (...args: any[]) => {
+    target: string;
+    targetElement: ControllableInterface | null;
+    effectiveContext: ControllableInterface | null;
+}) & typeof LitElement;
+export declare class EFTogglePlay extends EFTogglePlay_base {
     static styles: import('lit').CSSResult[];
-    context?: ContextMixinInterface | null;
     playing: boolean;
+    get efContext(): ControllableInterface | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    togglePlay(): void;
+    togglePlay: () => void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         "ef-toggle-play": EFTogglePlay;
     }
 }
+export {};

package/dist/gui/EFTogglePlay.js

@@ -1,13 +1,20 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
-import { efContext } from "./efContext.js";
 import { playingContext } from "./playingContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { efContext } from "./efContext.js";
+import { attachContextRoot } from "../attachContextRoot.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
-import { customElement } from "lit/decorators.js";
-var EFTogglePlay = class EFTogglePlay$1 extends LitElement {
+import { customElement, state } from "lit/decorators.js";
+attachContextRoot();
+var EFTogglePlay = class EFTogglePlay$1 extends TargetOrContextMixin(LitElement, efContext) {
 	constructor(..._args) {
 		super(..._args);
 		this.playing = false;
+		this.togglePlay = () => {
+			if (this.efContext) if (this.playing) this.efContext.pause();
+			else this.efContext.play();
+		};
 	}
 	static {
 		this.styles = [css`
@@ -17,30 +24,28 @@ var EFTogglePlay = class EFTogglePlay$1 extends LitElement {
       }
     `];
 	}
+	get efContext() {
+		return this.effectiveContext;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.togglePlay);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this.togglePlay);
+	}
 	render() {
 		return html`
-      <div
-        @click=${() => {
-			if (this.context) if (this.playing) this.context.pause();
-			else this.context.play();
-		}}
-      >
+      <div>
         ${this.playing ? html`<slot name="pause"></slot>` : html`<slot name="play"></slot>`}
       </div>
     `;
 	}
-	togglePlay() {
-		if (this.context) if (this.playing) this.context.pause();
-		else this.context.play();
-	}
 };
-__decorate([consume({
-	context: efContext,
-	subscribe: true
-})], EFTogglePlay.prototype, "context", void 0);
 __decorate([consume({
 	context: playingContext,
 	subscribe: true
-})], EFTogglePlay.prototype, "playing", void 0);
+}), state()], EFTogglePlay.prototype, "playing", void 0);
 EFTogglePlay = __decorate([customElement("ef-toggle-play")], EFTogglePlay);
 export { EFTogglePlay };

package/dist/gui/EFWorkbench.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { ContextMixin } from "./ContextMixin.js";
 import { TWMixin } from "./TWMixin2.js";
 import { LitElement, css, html } from "lit";

package/dist/gui/PlaybackController.d.ts

@@ -0,0 +1,67 @@
+import { Task } from '@lit/task';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+interface PlaybackHost extends HTMLElement, ReactiveControllerHost {
+    currentTimeMs: number;
+    durationMs: number;
+    endTimeMs: number;
+    frameTask: {
+        run(): void;
+        taskComplete: Promise<unknown>;
+    };
+    renderAudio?(fromMs: number, toMs: number): Promise<AudioBuffer>;
+    waitForMediaDurations?(): Promise<void>;
+    saveTimeToLocalStorage?(time: number): void;
+    loadTimeFromLocalStorage?(): number | undefined;
+    requestUpdate(property?: string): void;
+    updateComplete: Promise<boolean>;
+    playing: boolean;
+    loop: boolean;
+    play(): void;
+    pause(): void;
+    playbackController?: PlaybackController;
+    parentTimegroup?: any;
+    rootTimegroup?: any;
+}
+export type PlaybackControllerUpdateEvent = {
+    property: "playing" | "loop" | "currentTimeMs";
+    value: boolean | number;
+};
+/**
+ * Manages playback state and audio-driven timing for root temporal elements
+ *
+ * Created automatically when a temporal element becomes a root (no parent timegroup)
+ * Provides playback contexts (playing, loop, currentTimeMs, durationMs) to descendants
+ * Handles:
+ * - Audio-driven playback with Web Audio API
+ * - Seek and frame rendering throttling
+ * - Time state management with pending seek handling
+ * - Playback loop behavior
+ *
+ * Works with any temporal element (timegroups or standalone media) via PlaybackHost interface
+ */
+export declare class PlaybackController implements ReactiveController {
+    #private;
+    seekTask: Task<readonly [number | undefined], number | undefined>;
+    constructor(host: PlaybackHost);
+    get currentTime(): number;
+    set currentTime(time: number);
+    get playing(): boolean;
+    setPlaying(value: boolean): void;
+    get loop(): boolean;
+    setLoop(value: boolean): void;
+    get currentTimeMs(): number;
+    setCurrentTimeMs(value: number): void;
+    play(): void;
+    pause(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    runThrottledFrameTask(): Promise<void>;
+    addListener(listener: (event: PlaybackControllerUpdateEvent) => void): void;
+    removeListener(listener: (event: PlaybackControllerUpdateEvent) => void): void;
+    remove(): void;
+    private maybeLoopPlayback;
+    private stopPlayback;
+    private startPlayback;
+}
+export {};

package/dist/gui/PlaybackController.js

@@ -0,0 +1,310 @@
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { currentTimeContext } from "./currentTimeContext.js";
+import { durationContext } from "./durationContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
+import { ContextProvider } from "@lit/context";
+import { Task, TaskStatus } from "@lit/task";
+var PlaybackController = class {
+	#host;
+	#playing = false;
+	#loop = false;
+	#listeners = /* @__PURE__ */ new Set();
+	#playingProvider;
+	#loopProvider;
+	#currentTimeMsProvider;
+	#durationMsProvider;
+	#FPS = 30;
+	#MS_PER_FRAME = 1e3 / this.#FPS;
+	#playbackAudioContext = null;
+	#playbackAnimationFrameRequest = null;
+	#AUDIO_PLAYBACK_SLICE_MS = 47 * 1024 / 48e3 * 1e3;
+	#frameTaskInProgress = false;
+	#pendingFrameTaskRun = false;
+	#processingPendingFrameTask = false;
+	#currentTime = void 0;
+	#seekInProgress = false;
+	#pendingSeekTime;
+	#processingPendingSeek = false;
+	#loopingPlayback = false;
+	#playbackWrapTimeSeconds = 0;
+	constructor(host) {
+		this.#host = host;
+		host.addController(this);
+		this.seekTask = new Task(this.#host, {
+			autoRun: false,
+			args: () => [this.#pendingSeekTime ?? this.#currentTime],
+			onComplete: () => {},
+			task: async ([targetTime]) => {
+				await this.#host.waitForMediaDurations?.();
+				const newTime = Math.max(0, Math.min(targetTime ?? 0, this.#host.durationMs / 1e3));
+				this.#currentTime = newTime;
+				this.#host.requestUpdate("currentTime");
+				this.#currentTimeMsProvider.setValue(this.currentTimeMs);
+				this.#notifyListeners({
+					property: "currentTimeMs",
+					value: this.currentTimeMs
+				});
+				await this.runThrottledFrameTask();
+				this.#host.saveTimeToLocalStorage?.(newTime);
+				this.#seekInProgress = false;
+				return newTime;
+			}
+		});
+		this.#playingProvider = new ContextProvider(host, {
+			context: playingContext,
+			initialValue: this.#playing
+		});
+		this.#loopProvider = new ContextProvider(host, {
+			context: loopContext,
+			initialValue: this.#loop
+		});
+		this.#currentTimeMsProvider = new ContextProvider(host, {
+			context: currentTimeContext,
+			initialValue: host.currentTimeMs
+		});
+		this.#durationMsProvider = new ContextProvider(host, {
+			context: durationContext,
+			initialValue: host.durationMs
+		});
+	}
+	get currentTime() {
+		return this.#currentTime ?? 0;
+	}
+	set currentTime(time) {
+		time = Math.max(0, Math.min(this.#host.durationMs / 1e3, time));
+		if (Number.isNaN(time)) return;
+		if (time === this.#currentTime && !this.#processingPendingSeek) return;
+		if (this.#pendingSeekTime === time) return;
+		if (this.#seekInProgress) {
+			this.#pendingSeekTime = time;
+			this.#currentTime = time;
+			return;
+		}
+		this.#currentTime = time;
+		this.#seekInProgress = true;
+		this.seekTask.run().finally(() => {
+			if (this.#pendingSeekTime !== void 0 && this.#pendingSeekTime !== time) {
+				const pendingTime = this.#pendingSeekTime;
+				this.#pendingSeekTime = void 0;
+				this.#processingPendingSeek = true;
+				try {
+					this.currentTime = pendingTime;
+				} finally {
+					this.#processingPendingSeek = false;
+				}
+			} else this.#pendingSeekTime = void 0;
+		});
+	}
+	get playing() {
+		return this.#playing;
+	}
+	setPlaying(value) {
+		if (this.#playing === value) return;
+		this.#playing = value;
+		this.#playingProvider.setValue(value);
+		this.#host.requestUpdate("playing");
+		this.#notifyListeners({
+			property: "playing",
+			value
+		});
+		if (value) this.startPlayback();
+		else this.stopPlayback();
+	}
+	get loop() {
+		return this.#loop;
+	}
+	setLoop(value) {
+		if (this.#loop === value) return;
+		this.#loop = value;
+		this.#loopProvider.setValue(value);
+		this.#host.requestUpdate("loop");
+		this.#notifyListeners({
+			property: "loop",
+			value
+		});
+	}
+	get currentTimeMs() {
+		return this.currentTime * 1e3;
+	}
+	setCurrentTimeMs(value) {
+		this.currentTime = value / 1e3;
+	}
+	#updatePlaybackTime(timeMs) {
+		const timeSec = timeMs / 1e3;
+		if (this.#currentTime === timeSec) return;
+		this.#currentTime = timeSec;
+		this.#host.requestUpdate("currentTime");
+		this.#currentTimeMsProvider.setValue(timeMs);
+		this.#notifyListeners({
+			property: "currentTimeMs",
+			value: timeMs
+		});
+		this.runThrottledFrameTask();
+	}
+	play() {
+		this.setPlaying(true);
+	}
+	pause() {
+		this.setPlaying(false);
+	}
+	hostConnected() {
+		if (this.#playing) this.startPlayback();
+		else this.#host.waitForMediaDurations?.().then(() => {
+			const maybeLoadedTime = this.#host.loadTimeFromLocalStorage?.();
+			if (maybeLoadedTime !== void 0) this.currentTime = maybeLoadedTime;
+			else if (this.#currentTime === void 0) this.#currentTime = 0;
+			if (EF_INTERACTIVE && this.seekTask.status === TaskStatus.INITIAL) this.seekTask.run();
+		});
+	}
+	hostDisconnected() {
+		this.pause();
+	}
+	hostUpdated() {
+		this.#durationMsProvider.setValue(this.#host.durationMs);
+		this.#currentTimeMsProvider.setValue(this.currentTimeMs);
+	}
+	async runThrottledFrameTask() {
+		if (this.#frameTaskInProgress) {
+			this.#pendingFrameTaskRun = true;
+			while (this.#frameTaskInProgress) await this.#host.frameTask.taskComplete;
+			return;
+		}
+		this.#frameTaskInProgress = true;
+		try {
+			await this.#host.frameTask.run();
+		} catch (error) {
+			console.error("Frame task error:", error);
+		} finally {
+			this.#frameTaskInProgress = false;
+			if (this.#pendingFrameTaskRun && !this.#processingPendingFrameTask) {
+				this.#pendingFrameTaskRun = false;
+				this.#processingPendingFrameTask = true;
+				try {
+					await this.runThrottledFrameTask();
+				} finally {
+					this.#processingPendingFrameTask = false;
+				}
+			} else this.#pendingFrameTaskRun = false;
+		}
+	}
+	addListener(listener) {
+		this.#listeners.add(listener);
+	}
+	removeListener(listener) {
+		this.#listeners.delete(listener);
+	}
+	#notifyListeners(event) {
+		for (const listener of this.#listeners) listener(event);
+	}
+	remove() {
+		this.stopPlayback();
+		this.#listeners.clear();
+		this.#host.removeController(this);
+	}
+	#syncPlayheadToAudioContext(startMs) {
+		const audioContextTime = this.#playbackAudioContext?.currentTime ?? 0;
+		const endMs = this.#host.endTimeMs;
+		let rawTimeMs;
+		if (this.#playbackWrapTimeSeconds > 0 && audioContextTime >= this.#playbackWrapTimeSeconds) rawTimeMs = (audioContextTime - this.#playbackWrapTimeSeconds) * 1e3 % endMs;
+		else {
+			rawTimeMs = startMs + audioContextTime * 1e3;
+			if (this.#loopingPlayback && rawTimeMs >= endMs) rawTimeMs = rawTimeMs % endMs;
+		}
+		const nextTimeMs = Math.round(rawTimeMs / this.#MS_PER_FRAME) * this.#MS_PER_FRAME;
+		this.#updatePlaybackTime(nextTimeMs);
+		if (!this.#loopingPlayback && nextTimeMs >= endMs) {
+			this.maybeLoopPlayback();
+			return;
+		}
+		this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
+			this.#syncPlayheadToAudioContext(startMs);
+		});
+	}
+	async maybeLoopPlayback() {
+		if (this.#loop) {
+			this.setCurrentTimeMs(0);
+			requestAnimationFrame(() => {
+				this.startPlayback();
+			});
+		} else {
+			this.setCurrentTimeMs(0);
+			this.pause();
+		}
+	}
+	async stopPlayback() {
+		if (this.#playbackAudioContext) {
+			if (this.#playbackAudioContext.state !== "closed") await this.#playbackAudioContext.close();
+		}
+		if (this.#playbackAnimationFrameRequest) cancelAnimationFrame(this.#playbackAnimationFrameRequest);
+		this.#playbackAudioContext = null;
+		this.#playbackAnimationFrameRequest = null;
+	}
+	async startPlayback() {
+		await this.stopPlayback();
+		const host = this.#host;
+		if (!host) return;
+		if (host.waitForMediaDurations) await host.waitForMediaDurations();
+		const currentMs = this.currentTimeMs;
+		const fromMs = currentMs;
+		const toMs = host.endTimeMs;
+		if (fromMs >= toMs) {
+			this.pause();
+			return;
+		}
+		let bufferCount = 0;
+		this.#playbackAudioContext = new AudioContext({ latencyHint: "playback" });
+		this.#loopingPlayback = this.#loop;
+		this.#playbackWrapTimeSeconds = 0;
+		if (this.#playbackAnimationFrameRequest) cancelAnimationFrame(this.#playbackAnimationFrameRequest);
+		this.#syncPlayheadToAudioContext(currentMs);
+		const playbackContext = this.#playbackAudioContext;
+		if (playbackContext.state === "suspended") {
+			console.warn("AudioContext is suspended, media playback will not work until user has interacted with page.");
+			this.setPlaying(false);
+			return;
+		}
+		await playbackContext.suspend();
+		let logicalTimeMs = currentMs;
+		let audioContextTimeMs = 0;
+		let hasWrapped = false;
+		const fillBuffer = async () => {
+			if (bufferCount > 2) return;
+			if (await queueBufferSource()) fillBuffer();
+		};
+		const queueBufferSource = async () => {
+			if (hasWrapped && !this.#loopingPlayback) return false;
+			const startMs = logicalTimeMs;
+			const endMs = Math.min(logicalTimeMs + this.#AUDIO_PLAYBACK_SLICE_MS, toMs);
+			const willReachEnd = endMs >= toMs;
+			if (!host.renderAudio) return false;
+			const audioBuffer = await host.renderAudio(startMs, endMs);
+			bufferCount++;
+			const source = playbackContext.createBufferSource();
+			source.buffer = audioBuffer;
+			source.connect(playbackContext.destination);
+			source.start(audioContextTimeMs / 1e3);
+			const sliceDurationMs = endMs - startMs;
+			source.onended = () => {
+				bufferCount--;
+				if (willReachEnd) if (!this.#loopingPlayback) this.maybeLoopPlayback();
+				else fillBuffer();
+				else fillBuffer();
+			};
+			audioContextTimeMs += sliceDurationMs;
+			if (willReachEnd && this.#loopingPlayback) {
+				hasWrapped = true;
+				this.#playbackWrapTimeSeconds = (toMs - fromMs) / 1e3;
+				logicalTimeMs = 0;
+			} else logicalTimeMs = endMs;
+			return true;
+		};
+		try {
+			await fillBuffer();
+			await playbackContext.resume();
+		} catch (error) {
+			if (error instanceof Error && (error.name === "InvalidStateError" || error.message.includes("closed"))) return;
+			throw error;
+		}
+	}
+};
+export { PlaybackController };

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}.invisible{visibility:hidden}.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-\\[20\\]{z-index:20}.z-\\[5\\]{z-index:5}.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-\\[200px\\]{height:200px}.h-\\[270px\\]{height:270px}.h-\\[300px\\]{height:300px}.h-\\[360px\\]{height:360px}.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-\\[600px\\]{width:600px}.w-\\[640px\\]{width:640px}.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}.place-content-center{place-content:center}.items-center{align-items:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.whitespace-nowrap{white-space:nowrap}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-r-2{border-right-width:2px}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255/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-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity))}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity))}.border-b-slate-600{--tw-border-opacity:1;border-bottom-color:rgb(71 85 105/var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-lime-400{--tw-bg-opacity:1;background-color:rgb(163 230 53/var(--tw-bg-opacity))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/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-yellow-200{--tw-bg-opacity:1;background-color:rgb(254 240 138/var(--tw-bg-opacity))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity))}.bg-opacity-20{--tw-bg-opacity:.2}.object-contain{-o-object-fit:contain;object-fit:contain}.p-4{padding:1rem}.p-\\[1px\\]{padding:1px}.px-0{padding-left:0;padding-right:0}.px-0\\.5{padding-left:.125rem;padding-right:.125rem}.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}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-\\[8px\\]{font-size:8px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal)var(--tw-slashed-zero)var(--tw-numeric-figure)var(--tw-numeric-spacing)var(--tw-numeric-fraction)}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-200{--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity))}.text-green-900{--tw-text-opacity:1;color:rgb(20 83 45/var(--tw-text-opacity))}.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)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.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{--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: }*,: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]:where(:not([hidden=until-found])){display:none}.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}.invisible{visibility:hidden}.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-\\[20\\]{z-index:20}.z-\\[5\\]{z-index:5}.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-\\[200px\\]{height:200px}.h-\\[270px\\]{height:270px}.h-\\[300px\\]{height:300px}.h-\\[360px\\]{height:360px}.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-\\[600px\\]{width:600px}.w-\\[640px\\]{width:640px}.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}.place-content-center{place-content:center}.items-center{align-items:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.whitespace-nowrap{white-space:nowrap}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-r-2{border-right-width:2px}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255/var(--tw-border-opacity,1))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity,1))}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity,1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.border-b-slate-600{--tw-border-opacity:1;border-bottom-color:rgb(71 85 105/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-green-200{--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-lime-400{--tw-bg-opacity:1;background-color:rgb(163 230 53/var(--tw-bg-opacity,1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity,1))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgb(254 240 138/var(--tw-bg-opacity,1))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity,1))}.bg-opacity-20{--tw-bg-opacity:.2}.object-contain{-o-object-fit:contain;object-fit:contain}.p-4{padding:1rem}.p-\\[1px\\]{padding:1px}.px-0\\.5{padding-left:.125rem;padding-right:.125rem}.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}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-\\[8px\\]{font-size:8px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal)var(--tw-slashed-zero)var(--tw-numeric-figure)var(--tw-numeric-spacing)var(--tw-numeric-fraction)}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-green-200{--tw-text-opacity:1;color:rgb(187 247 208/var(--tw-text-opacity,1))}.text-green-900{--tw-text-opacity:1;color:rgb(20 83 45/var(--tw-text-opacity,1))}.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)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1))}.peer:hover~.peer-hover\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity,1))}.peer:hover~.peer-hover\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.data-\\[focused\\]\\:bg-slate-400[data-focused]{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1))}.peer[data-focused]~.peer-data-\\[focused\\]\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity,1))}.peer[data-focused]~.peer-data-\\[focused\\]\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}";
 export { TWMixin_default as default };

package/dist/gui/TargetOrContextMixin.d.ts

@@ -0,0 +1,10 @@
+import { Context } from '@lit/context';
+import { LitElement } from 'lit';
+import { ControllableInterface } from './Controllable.js';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare function TargetOrContextMixin<T extends Constructor<LitElement>>(superClass: T, contextToProxy: Context<any, any>): Constructor<{
+    target: string;
+    targetElement: ControllableInterface | null;
+    effectiveContext: ControllableInterface | null;
+}> & T;
+export {};