@editframe/elements 0.16.8-beta.0 → 0.18.3-beta.0

package/dist/gui/EFTimeDisplay.js

@@ -1,67 +1,17 @@
+import { efContext } from "./efContext.js";
 import { consume } from "@lit/context";
-import { css, LitElement, html } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import { efContext } from "./efContext.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let EFTimeDisplay = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._onTimeUpdate = () => {
-      this.requestUpdate();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.context?.addEventListener(
-      "timeupdate",
-      this._onTimeUpdate
-    );
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("context")) {
-      const oldContext = changedProperties.get(
-        "context"
-      );
-      oldContext?.removeEventListener(
-        "timeupdate",
-        this._onTimeUpdate
-      );
-      this.context?.addEventListener(
-        "timeupdate",
-        this._onTimeUpdate
-      );
-    }
-  }
-  disconnectedCallback() {
-    this.context?.removeEventListener("timeupdate", this._onTimeUpdate);
-    super.disconnectedCallback();
-  }
-  formatTime(ms) {
-    const totalSeconds = Math.floor(ms / 1e3);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
-  }
-  render() {
-    const currentTime = this.context?.currentTimeMs ?? 0;
-    const totalTime = this.context?.targetTimegroup?.durationMs ?? 0;
-    return html`
-      <span part="time">
-        ${this.formatTime(currentTime)} / ${this.formatTime(totalTime)}
-      </span>
-    `;
-  }
-};
-EFTimeDisplay.styles = css`
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+let EFTimeDisplay = class EFTimeDisplay$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._onTimeUpdate = () => {
+			this.requestUpdate();
+		};
+	}
+	static {
+		this.styles = css`
     :host {
       display: inline-block;
       font-family: var(--ef-font-family, system-ui);
@@ -70,12 +20,41 @@ EFTimeDisplay.styles = css`
       white-space: nowrap;
     }
   `;
-__decorateClass([
-  consume({ context: efContext, subscribe: true })
-], EFTimeDisplay.prototype, "context", 2);
-EFTimeDisplay = __decorateClass([
-  customElement("ef-time-display")
-], EFTimeDisplay);
-export {
-  EFTimeDisplay
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.context?.addEventListener("timeupdate", this._onTimeUpdate);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("context")) {
+			const oldContext = changedProperties.get("context");
+			oldContext?.removeEventListener("timeupdate", this._onTimeUpdate);
+			this.context?.addEventListener("timeupdate", this._onTimeUpdate);
+		}
+	}
+	disconnectedCallback() {
+		this.context?.removeEventListener("timeupdate", this._onTimeUpdate);
+		super.disconnectedCallback();
+	}
+	formatTime(ms) {
+		const totalSeconds = Math.floor(ms / 1e3);
+		const minutes = Math.floor(totalSeconds / 60);
+		const seconds = totalSeconds % 60;
+		return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+	}
+	render() {
+		const currentTime = this.context?.currentTimeMs ?? 0;
+		const totalTime = this.context?.targetTimegroup?.durationMs ?? 0;
+		return html`
+      <span part="time">
+        ${this.formatTime(currentTime)} / ${this.formatTime(totalTime)}
+      </span>
+    `;
+	}
 };
+_decorate([consume({
+	context: efContext,
+	subscribe: true
+})], EFTimeDisplay.prototype, "context", void 0);
+EFTimeDisplay = _decorate([customElement("ef-time-display")], EFTimeDisplay);
+export { EFTimeDisplay };

package/dist/gui/EFToggleLoop.js

@@ -1,39 +1,22 @@
+import { efContext } from "./efContext.js";
 import { consume } from "@lit/context";
-import { css, LitElement, html } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import { efContext } from "./efContext.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let EFToggleLoop = class extends LitElement {
-  render() {
-    return html`
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+let EFToggleLoop = class EFToggleLoop$1 extends LitElement {
+	static {
+		this.styles = [css`
+      :host {}
+    `];
+	}
+	render() {
+		return html`
       <slot @click=${() => {
-      if (this.context) {
-        this.context.loop = !this.context.loop;
-      }
-    }}></slot>
+			if (this.context) this.context.loop = !this.context.loop;
+		}}></slot>
     `;
-  }
-};
-EFToggleLoop.styles = [
-  css`
-      :host {}
-    `
-];
-__decorateClass([
-  consume({ context: efContext })
-], EFToggleLoop.prototype, "context", 2);
-EFToggleLoop = __decorateClass([
-  customElement("ef-toggle-loop")
-], EFToggleLoop);
-export {
-  EFToggleLoop
+	}
 };
+_decorate([consume({ context: efContext })], EFToggleLoop.prototype, "context", void 0);
+EFToggleLoop = _decorate([customElement("ef-toggle-loop")], EFToggleLoop);
+export { EFToggleLoop };

package/dist/gui/EFTogglePlay.js

@@ -1,67 +1,46 @@
-import { consume } from "@lit/context";
-import { css, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
 import { efContext } from "./efContext.js";
 import { playingContext } from "./playingContext.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let EFTogglePlay = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.playing = false;
-  }
-  render() {
-    return html`
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+let EFTogglePlay = class EFTogglePlay$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.playing = false;
+	}
+	static {
+		this.styles = [css`
+      :host {}
+      div {
+        all: inherit;
+      }
+    `];
+	}
+	render() {
+		return html`
       <div
         @click=${() => {
-      if (this.context) {
-        if (this.playing) {
-          this.context.pause();
-        } else {
-          this.context.play();
-        }
-      }
-    }}
+			if (this.context) if (this.playing) this.context.pause();
+			else this.context.play();
+		}}
       >
         ${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();
-      }
-    }
-  }
-};
-EFTogglePlay.styles = [
-  css`
-      :host {}
-      div {
-        all: inherit;
-      }
-    `
-];
-__decorateClass([
-  consume({ context: efContext, subscribe: true })
-], EFTogglePlay.prototype, "context", 2);
-__decorateClass([
-  consume({ context: playingContext, subscribe: true })
-], EFTogglePlay.prototype, "playing", 2);
-EFTogglePlay = __decorateClass([
-  customElement("ef-toggle-play")
-], EFTogglePlay);
-export {
-  EFTogglePlay
+	}
+	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);
+EFTogglePlay = _decorate([customElement("ef-toggle-play")], EFTogglePlay);
+export { EFTogglePlay };

package/dist/gui/EFWorkbench.js

@@ -1,73 +1,65 @@
-import { html, css, LitElement } from "lit";
-import { property, eventOptions, customElement } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
 import { ContextMixin } from "./ContextMixin.js";
-import { TWMixin } from "./TWMixin.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let EFWorkbench = class extends ContextMixin(TWMixin(LitElement)) {
-  constructor() {
-    super(...arguments);
-    this.rendering = false;
-    this.focusOverlay = createRef();
-    this.drawOverlays = () => {
-      const focusOverlay = this.focusOverlay.value;
-      if (focusOverlay) {
-        if (this.focusedElement) {
-          focusOverlay.style.display = "block";
-          const rect = this.focusedElement.getBoundingClientRect();
-          Object.assign(focusOverlay.style, {
-            position: "fixed",
-            top: `${rect.top}px`,
-            left: `${rect.left}px`,
-            width: `${rect.width}px`,
-            height: `${rect.height}px`
-          });
-          requestAnimationFrame(this.drawOverlays);
-        } else {
-          focusOverlay.style.display = "none";
-        }
+import { TWMixin } from "./TWMixin2.js";
+import { LitElement, css, html } from "lit";
+import { customElement, eventOptions, property } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { createRef, ref } from "lit/directives/ref.js";
+let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.rendering = false;
+		this.focusOverlay = createRef();
+		this.drawOverlays = () => {
+			const focusOverlay = this.focusOverlay.value;
+			if (focusOverlay) if (this.focusedElement) {
+				focusOverlay.style.display = "block";
+				const rect = this.focusedElement.getBoundingClientRect();
+				Object.assign(focusOverlay.style, {
+					position: "fixed",
+					top: `${rect.top}px`,
+					left: `${rect.left}px`,
+					width: `${rect.width}px`,
+					height: `${rect.height}px`
+				});
+				requestAnimationFrame(this.drawOverlays);
+			} else focusOverlay.style.display = "none";
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
       }
-    };
-  }
-  handleStageWheel(event) {
-    event.preventDefault();
-  }
-  connectedCallback() {
-    document.body.style.width = "100%";
-    document.body.style.height = "100%";
-    document.documentElement.style.width = "100%";
-    document.documentElement.style.height = "100%";
-    super.connectedCallback();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.body.style.width = "";
-    document.body.style.height = "";
-    document.documentElement.style.width = "";
-    document.documentElement.style.height = "";
-  }
-  update(changedProperties) {
-    super.update(changedProperties);
-    if (changedProperties.has("focusedElement")) {
-      this.drawOverlays();
-    }
-  }
-  render() {
-    if (this.rendering || typeof window !== "undefined" && window.EF_RENDERING?.() === true) {
-      return html`
+    `];
+	}
+	handleStageWheel(event) {
+		event.preventDefault();
+	}
+	connectedCallback() {
+		document.body.style.width = "100%";
+		document.body.style.height = "100%";
+		document.documentElement.style.width = "100%";
+		document.documentElement.style.height = "100%";
+		super.connectedCallback();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.body.style.width = "";
+		document.body.style.height = "";
+		document.documentElement.style.width = "";
+		document.documentElement.style.height = "";
+	}
+	update(changedProperties) {
+		super.update(changedProperties);
+		if (changedProperties.has("focusedElement")) this.drawOverlays();
+	}
+	render() {
+		if (this.rendering || typeof window !== "undefined" && window.EF_RENDERING?.() === true) return html`
         <slot class="fixed inset-0 h-full w-full" name="canvas"></slot>
       `;
-    }
-    return html`
+		return html`
       <div
         class="grid h-full w-full bg-slate-800"
         style="grid-template-rows: 1fr 300px; grid-template-columns: 100%;"
@@ -88,26 +80,12 @@ let EFWorkbench = class extends ContextMixin(TWMixin(LitElement)) {
         <slot class="overflow inline-block" name="timeline"></slot>
       </div>
     `;
-  }
-};
-EFWorkbench.styles = [
-  css`
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-    `
-];
-__decorateClass([
-  property({ type: Boolean })
-], EFWorkbench.prototype, "rendering", 2);
-__decorateClass([
-  eventOptions({ passive: false, capture: true })
-], EFWorkbench.prototype, "handleStageWheel", 1);
-EFWorkbench = __decorateClass([
-  customElement("ef-workbench")
-], EFWorkbench);
-export {
-  EFWorkbench
+	}
 };
+_decorate([property({ type: Boolean })], EFWorkbench.prototype, "rendering", void 0);
+_decorate([eventOptions({
+	passive: false,
+	capture: true
+})], EFWorkbench.prototype, "handleStageWheel", null);
+EFWorkbench = _decorate([customElement("ef-workbench")], EFWorkbench);
+export { EFWorkbench };

package/dist/gui/TWMixin.js

@@ -1,48 +1,2 @@
-import twStyle from "./TWMixin.css.js";
-let twSheet = null;
-if (typeof window !== "undefined") {
-  twSheet = new CSSStyleSheet();
-  twSheet.replaceSync(twStyle);
-}
-function TWMixin(Base) {
-  class TWElement extends Base {
-    createRenderRoot() {
-      const renderRoot = super.createRenderRoot();
-      if (!(renderRoot instanceof ShadowRoot)) {
-        throw new Error(
-          "TWMixin can only be applied to elements with shadow roots"
-        );
-      }
-      if (!twSheet) {
-        throw new Error(
-          "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment"
-        );
-      }
-      const constructorStylesheets = [];
-      const constructorStyles = "styles" in this.constructor && this.constructor.styles || [];
-      if (Array.isArray(constructorStyles)) {
-        for (const item of constructorStyles) {
-          if (item.styleSheet) {
-            constructorStylesheets.push(item.styleSheet);
-          }
-        }
-      } else if (constructorStyles.styleSheet) {
-        constructorStylesheets.push(constructorStyles.styleSheet);
-      }
-      if (renderRoot?.adoptedStyleSheets) {
-        renderRoot.adoptedStyleSheets = [
-          twSheet,
-          ...renderRoot.adoptedStyleSheets,
-          ...constructorStylesheets
-        ];
-      } else {
-        renderRoot.adoptedStyleSheets = [twSheet, ...constructorStylesheets];
-      }
-      return renderRoot;
-    }
-  }
-  return TWElement;
-}
-export {
-  TWMixin
-};
+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-\\[270px\\]{height:270px}.h-\\[5px\\]{height:5px}.h-full{height:100%}.w-1{width:.25rem}.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}.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))}";
+export { TWMixin_default as default };

package/dist/gui/TWMixin2.js

@@ -0,0 +1,31 @@
+import TWMixin_default from "./TWMixin.js";
+let twSheet = null;
+if (typeof window !== "undefined" && typeof CSSStyleSheet !== "undefined") try {
+	twSheet = new CSSStyleSheet();
+	if (typeof twSheet.replaceSync === "function") twSheet.replaceSync(TWMixin_default);
+} catch (_error) {
+	twSheet = null;
+}
+function TWMixin(Base) {
+	class TWElement extends Base {
+		createRenderRoot() {
+			const renderRoot = super.createRenderRoot();
+			if (!(renderRoot instanceof ShadowRoot)) throw new Error("TWMixin can only be applied to elements with shadow roots");
+			if (!twSheet) throw new Error("twSheet not found. Probable cause: CSSStyleSheet not supported in this environment");
+			const constructorStylesheets = [];
+			const constructorStyles = "styles" in this.constructor && this.constructor.styles || [];
+			if (Array.isArray(constructorStyles)) {
+				for (const item of constructorStyles) if (item.styleSheet) constructorStylesheets.push(item.styleSheet);
+			} else if (constructorStyles.styleSheet) constructorStylesheets.push(constructorStyles.styleSheet);
+			if (renderRoot?.adoptedStyleSheets) renderRoot.adoptedStyleSheets = [
+				twSheet,
+				...renderRoot.adoptedStyleSheets,
+				...constructorStylesheets
+			];
+			else renderRoot.adoptedStyleSheets = [twSheet, ...constructorStylesheets];
+			return renderRoot;
+		}
+	}
+	return TWElement;
+}
+export { TWMixin };

package/dist/gui/efContext.js

@@ -1,7 +1,3 @@
 import { createContext } from "@lit/context";
-const efContext = createContext(
-  Symbol("efContext")
-);
-export {
-  efContext
-};
+const efContext = createContext(Symbol("efContext"));
+export { efContext };

package/dist/gui/fetchContext.js

@@ -1,5 +1,3 @@
 import { createContext } from "@lit/context";
 const fetchContext = createContext(Symbol("fetchContext"));
-export {
-  fetchContext
-};
+export { fetchContext };

package/dist/gui/focusContext.js

@@ -1,5 +1,3 @@
 import { createContext } from "@lit/context";
 const focusContext = createContext(Symbol("focusContext"));
-export {
-  focusContext
-};
+export { focusContext };

package/dist/gui/focusedElementContext.js

@@ -1,7 +1,3 @@
 import { createContext } from "@lit/context";
-const focusedElementContext = createContext(
-  Symbol("focusedElement")
-);
-export {
-  focusedElementContext
-};
+const focusedElementContext = createContext(Symbol("focusedElement"));
+export { focusedElementContext };

package/dist/gui/playingContext.js

@@ -1,7 +1,4 @@
 import { createContext } from "@lit/context";
 const playingContext = createContext(Symbol("playingContext"));
 const loopContext = createContext(Symbol("loopContext"));
-export {
-  loopContext,
-  playingContext
-};
+export { loopContext, playingContext };

package/dist/gui/services/ElementConnectionManager.browsertest.d.ts

@@ -0,0 +1 @@
+export {};