@editframe/elements 0.5.0-beta.8 → 0.6.0-beta.1

package/dist/packages/elements/src/elements/EFWaveform.cjs

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const EFAudio = require("./EFAudio.cjs");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const EFVideo = require("./EFVideo.cjs");
+const EFTemporal = require("./EFTemporal.cjs");
+const CrossUpdateController = require("./CrossUpdateController.cjs");
+const TWMixin = require("../gui/TWMixin.cjs");
+const task = require("@lit/task");
+const d3 = require("d3");
+const ref_js = require("lit/directives/ref.js");
+const EF_INTERACTIVE = require("../EF_INTERACTIVE.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const d3__namespace = /* @__PURE__ */ _interopNamespaceDefault(d3);
+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;
+};
+exports.EFWaveform = class EFWaveform extends EFTemporal.EFTemporal(TWMixin.TWMixin(lit.LitElement)) {
+  constructor() {
+    super(...arguments);
+    this.svgRef = ref_js.createRef();
+    this.mode = "bars";
+    this.color = "currentColor";
+    this.frameTask = new task.Task(this, {
+      autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
+      args: () => [this.target.audioBufferTask.status],
+      task: async () => {
+        await this.target.audioBufferTask.taskComplete;
+      }
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    return lit.html` <svg ${ref_js.ref(this.svgRef)} class="h-full w-full" store></svg> `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.target) {
+      new CrossUpdateController.CrossUpdateController(this.target, this);
+    }
+  }
+  drawBars(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight;
+    const waveLeft = 0;
+    const waveRight = waveWidth;
+    const barX = d3__namespace.scaleBand().paddingInner(0.5).paddingOuter(0.01).domain(d3__namespace.range(frequencyData.length).map((n) => String(n))).rangeRound([waveLeft, waveRight]);
+    const height = d3__namespace.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
+    const baseline = waveHeight / 2;
+    const bars = d3__namespace.select(svg).selectAll("rect").data(frequencyData);
+    const minBarHeight = 2;
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight));
+    bars.exit().remove();
+  }
+  drawBricks(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight * devicePixelRatio;
+    const brickWidth = waveWidth / frequencyData.length;
+    const brickHeightFactor = waveHeight / 255 / 2;
+    const brickPadding = 2;
+    const midHeight = waveHeight / 2;
+    d3__namespace.select(svg).selectAll("line.brickBaseLine").data([0]).join("line").attr("class", "brickBaseLine").attr("x1", 0).attr("x2", waveWidth).attr("y1", midHeight).attr("y2", midHeight).attr("stroke", "currentColor").attr("stroke-width", 4).attr("stroke-dasharray", "2");
+    d3__namespace.select(svg).selectAll("rect.brick").data(frequencyData).join("rect").attr("class", "brick").attr("x", (_d, i) => i * brickWidth).attr("y", (d) => midHeight - d * brickHeightFactor).attr("width", brickWidth - brickPadding).attr("height", (d) => d * brickHeightFactor * 2);
+  }
+  drawLine(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight * devicePixelRatio;
+    const xScale = d3__namespace.scaleLinear().domain([0, frequencyData.length - 1]).range([0, waveWidth]);
+    const yScale = d3__namespace.scaleLinear().domain([0, 255]).range([waveHeight, 0]);
+    const lineGenerator = d3__namespace.line().x((_, i) => xScale(i)).y((d) => yScale(d));
+    const pathData = lineGenerator(frequencyData);
+    d3__namespace.select(svg).selectAll("path.line").data([frequencyData]).join("path").attr("class", "line").attr("d", pathData).attr("fill", "none").attr("stroke", "currentColor").attr("stroke-width", 4);
+  }
+  drawRoundBars(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight;
+    const waveLeft = 0;
+    const waveRight = waveWidth;
+    const barX = d3__namespace.scaleBand().paddingInner(0.5).paddingOuter(0.01).domain(d3__namespace.range(frequencyData.length).map((n) => String(n))).rangeRound([waveLeft, waveRight]);
+    const height = d3__namespace.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
+    const baseline = waveHeight / 2;
+    const bars = d3__namespace.select(svg).selectAll("rect").data(frequencyData);
+    const minBarHeight = 2;
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight)).attr("rx", barX.bandwidth()).attr("ry", barX.bandwidth());
+    bars.exit().remove();
+  }
+  drawEqualizer(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight * devicePixelRatio;
+    const barWidth = waveWidth / frequencyData.length;
+    const barPadding = 1;
+    const minHeight = 1;
+    const heightScale = d3__namespace.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
+    d3__namespace.select(svg).selectAll("line.equalizerBaseLine").data([0]).join("line").attr("class", "equalizerBaseLine").attr("x1", 0).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke-width", 2);
+    d3__namespace.select(svg).selectAll("rect.equalizerBar").data(frequencyData).join("rect").attr("class", "equalizerBar").attr("x", (_d, i) => i * barWidth + barPadding / 2).attr(
+      "y",
+      (d) => waveHeight / 2 - Math.max(heightScale(d) / 2, minHeight)
+    ).attr("width", barWidth - barPadding).attr("height", (d) => Math.max(heightScale(d), minHeight));
+    d3__namespace.select(svg).selectAll("rect.equalizerBar").transition().duration(100).attr(
+      "y",
+      (d) => waveHeight / 2 - Math.max(heightScale(Number(d)) / 2, minHeight)
+    ).attr("height", (d) => Math.max(heightScale(Number(d)), minHeight));
+  }
+  drawCurve(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight * devicePixelRatio;
+    const xScale = d3__namespace.scaleLinear().domain([0, frequencyData.length]).range([0, waveWidth]);
+    const yScale = d3__namespace.scaleLinear().domain([0, 255]).range([waveHeight, 0]);
+    const curveGenerator = d3__namespace.line().x((_, i) => xScale(i)).y((d) => yScale(d)).curve(d3__namespace.curveNatural);
+    const pathData = curveGenerator(frequencyData);
+    d3__namespace.select(svg).selectAll("path.curve").data([frequencyData]).join("path").attr("class", "curve").attr("d", pathData).attr("fill", "none").attr("stroke", "currentColor").attr("stroke-width", 4);
+  }
+  drawPixel(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight;
+    const baseline = waveHeight / 2;
+    const barX = d3__namespace.scaleBand().domain(d3__namespace.range(frequencyData.length).map(String)).rangeRound([0, waveWidth]).paddingInner(0.03).paddingOuter(0.02);
+    const height = d3__namespace.scaleLinear().domain([0, 255]).range([0, baseline]);
+    const bars = d3__namespace.select(svg).selectAll("rect").data(frequencyData);
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
+    bars.exit().remove();
+  }
+  drawWave(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight;
+    const barX = d3__namespace.scaleBand().domain(d3__namespace.range(frequencyData.length).map(String)).rangeRound([0, waveWidth]).paddingInner(0.03).paddingOuter(0.02);
+    const height = d3__namespace.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
+    d3__namespace.select(svg).selectAll("line.baseline").data([0]).join("line").attr("class", "baseline").attr("x1", (_, i) => barX(String(i)) || 0).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke", "currentColor").attr("stroke-width", 2);
+    const bars = d3__namespace.select(svg).selectAll("rect").data(frequencyData);
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => waveHeight / 2 - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
+    bars.exit().remove();
+  }
+  async updated() {
+    const svg = this.svgRef.value;
+    if (!svg) {
+      return;
+    }
+    if (!this.target.audioBufferTask.value) {
+      return;
+    }
+    if (this.target.ownCurrentTimeMs > 0) {
+      const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
+      const audioBufferSource = audioContext.createBufferSource();
+      audioBufferSource.buffer = this.target.audioBufferTask.value.buffer;
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = 256;
+      audioBufferSource.connect(analyser);
+      audioBufferSource.start(
+        0,
+        Math.max(
+          0,
+          (this.target.ownCurrentTimeMs - this.target.audioBufferTask.value.startOffsetMs) / 1e3
+        ),
+        48e3 / 1e3
+      );
+      await audioContext.startRendering();
+      const frequencyData = new Uint8Array(analyser.frequencyBinCount);
+      analyser.getByteFrequencyData(frequencyData);
+      const rect = this.getBoundingClientRect();
+      svg.setAttribute("width", (rect.width * devicePixelRatio).toString());
+      svg.setAttribute("height", (rect.height * devicePixelRatio).toString());
+      switch (this.mode) {
+        case "bars":
+          this.drawBars(svg, frequencyData);
+          break;
+        case "bricks":
+          this.drawBricks(svg, frequencyData);
+          break;
+        case "curve":
+          this.drawCurve(svg, frequencyData);
+          break;
+        case "line":
+          this.drawLine(svg, frequencyData);
+          break;
+        case "pixel":
+          this.drawPixel(svg, frequencyData);
+          break;
+        case "wave":
+          this.drawWave(svg, frequencyData);
+          break;
+        case "roundBars":
+          this.drawRoundBars(svg, frequencyData);
+          break;
+        case "equalizer":
+          this.drawEqualizer(svg, frequencyData);
+          break;
+      }
+    }
+  }
+  get target() {
+    const target = document.querySelector(this.getAttribute("target") ?? "");
+    if (target instanceof EFAudio.EFAudio || target instanceof EFVideo.EFVideo) {
+      return target;
+    }
+    throw new Error("Invalid target, must be an EFAudio element");
+  }
+};
+exports.EFWaveform.styles = [];
+__decorateClass([
+  decorators_js.property({
+    type: String,
+    attribute: "mode"
+  })
+], exports.EFWaveform.prototype, "mode", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.EFWaveform.prototype, "color", 2);
+exports.EFWaveform = __decorateClass([
+  decorators_js.customElement("ef-waveform")
+], exports.EFWaveform);

package/dist/packages/elements/src/elements/EFWaveform.d.ts

@@ -0,0 +1,28 @@
+import { EFAudio } from './EFAudio';
+import { LitElement } from 'lit';
+import { EFVideo } from './EFVideo';
+import { Task } from '@lit/task';
+import { Ref } from 'lit/directives/ref.js';
+
+declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+export declare class EFWaveform extends EFWaveform_base {
+    static styles: never[];
+    svgRef: Ref<SVGElement>;
+    createRenderRoot(): this;
+    render(): import('lit-html').TemplateResult<1>;
+    mode: "roundBars" | "bars" | "bricks" | "equalizer" | "curve" | "line" | "pixel" | "wave";
+    color: string;
+    connectedCallback(): void;
+    protected drawBars(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawBricks(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawLine(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawRoundBars(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawEqualizer(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawCurve(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawPixel(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawWave(svg: SVGElement, frequencyData: Uint8Array): void;
+    frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
+    protected updated(): Promise<void>;
+    get target(): EFAudio | EFVideo;
+}
+export {};

package/dist/{elements/src/elements/EFWaveform.mjs → packages/elements/src/elements/EFWaveform.js}

@@ -1,14 +1,14 @@
-import { EFAudio } from "./EFAudio.mjs";
+import { EFAudio } from "./EFAudio.js";
 import { html, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo.mjs";
-import { EFTemporal } from "./EFTemporal.mjs";
-import { CrossUpdateController } from "./CrossUpdateController.mjs";
-import { TWMixin } from "../gui/TWMixin.mjs";
+import { EFVideo } from "./EFVideo.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { CrossUpdateController } from "./CrossUpdateController.js";
+import { TWMixin } from "../gui/TWMixin.js";
 import { Task } from "@lit/task";
 import * as d3 from "d3";
 import { createRef, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,8 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   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);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
@@ -56,7 +55,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const baseline = waveHeight / 2;
     const bars = d3.select(svg).selectAll("rect").data(frequencyData);
     const minBarHeight = 2;
-    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i))).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight));
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight));
     bars.exit().remove();
   }
   drawBricks(svg, frequencyData) {
@@ -88,7 +87,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const baseline = waveHeight / 2;
     const bars = d3.select(svg).selectAll("rect").data(frequencyData);
     const minBarHeight = 2;
-    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i))).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight)).attr("rx", barX.bandwidth()).attr("ry", barX.bandwidth());
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight)).attr("rx", barX.bandwidth()).attr("ry", barX.bandwidth());
     bars.exit().remove();
   }
   drawEqualizer(svg, frequencyData) {
@@ -99,14 +98,14 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const minHeight = 1;
     const heightScale = d3.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
     d3.select(svg).selectAll("line.equalizerBaseLine").data([0]).join("line").attr("class", "equalizerBaseLine").attr("x1", 0).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke-width", 2);
-    d3.select(svg).selectAll("rect.equalizerBar").data(frequencyData).join("rect").attr("class", "equalizerBar").attr("x", (d, i) => i * barWidth + barPadding / 2).attr(
+    d3.select(svg).selectAll("rect.equalizerBar").data(frequencyData).join("rect").attr("class", "equalizerBar").attr("x", (_d, i) => i * barWidth + barPadding / 2).attr(
       "y",
       (d) => waveHeight / 2 - Math.max(heightScale(d) / 2, minHeight)
     ).attr("width", barWidth - barPadding).attr("height", (d) => Math.max(heightScale(d), minHeight));
     d3.select(svg).selectAll("rect.equalizerBar").transition().duration(100).attr(
       "y",
-      (d) => waveHeight / 2 - Math.max(heightScale(d) / 2, minHeight)
-    ).attr("height", (d) => Math.max(heightScale(d), minHeight));
+      (d) => waveHeight / 2 - Math.max(heightScale(Number(d)) / 2, minHeight)
+    ).attr("height", (d) => Math.max(heightScale(Number(d)), minHeight));
   }
   drawCurve(svg, frequencyData) {
     const waveWidth = svg.clientWidth * devicePixelRatio;
@@ -124,7 +123,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const barX = d3.scaleBand().domain(d3.range(frequencyData.length).map(String)).rangeRound([0, waveWidth]).paddingInner(0.03).paddingOuter(0.02);
     const height = d3.scaleLinear().domain([0, 255]).range([0, baseline]);
     const bars = d3.select(svg).selectAll("rect").data(frequencyData);
-    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i))).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
     bars.exit().remove();
   }
   drawWave(svg, frequencyData) {
@@ -132,9 +131,9 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const waveHeight = svg.clientHeight;
     const barX = d3.scaleBand().domain(d3.range(frequencyData.length).map(String)).rangeRound([0, waveWidth]).paddingInner(0.03).paddingOuter(0.02);
     const height = d3.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
-    d3.select(svg).selectAll("line.baseline").data([0]).join("line").attr("class", "baseline").attr("x1", (_, i) => barX(String(i))).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke", "currentColor").attr("stroke-width", 2);
+    d3.select(svg).selectAll("line.baseline").data([0]).join("line").attr("class", "baseline").attr("x1", (_, i) => barX(String(i)) || 0).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke", "currentColor").attr("stroke-width", 2);
     const bars = d3.select(svg).selectAll("rect").data(frequencyData);
-    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i))).attr("y", (value) => waveHeight / 2 - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => waveHeight / 2 - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
     bars.exit().remove();
   }
   async updated() {

package/dist/packages/elements/src/elements/FetchMixin.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const context = require("@lit/context");
+const EFWorkbench = require("../gui/EFWorkbench.cjs");
+const state_js = require("lit/decorators/state.js");
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+function FetchMixin(superClass) {
+  class FetchElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.fetch = fetch.bind(window);
+    }
+  }
+  __decorateClass([
+    context.consume({ context: EFWorkbench.fetchContext, subscribe: true }),
+    state_js.state()
+  ], FetchElement.prototype, "fetch");
+  return FetchElement;
+}
+exports.FetchMixin = FetchMixin;

package/dist/packages/elements/src/elements/FetchMixin.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+
+export declare class FetchMixinInterface {
+    fetch: typeof fetch;
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare function FetchMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<FetchMixinInterface> & T;
+export {};

package/dist/{elements/src/elements/FetchMixin.mjs → packages/elements/src/elements/FetchMixin.js}

@@ -1,15 +1,13 @@
 import { consume } from "@lit/context";
-import { fetchContext } from "../gui/EFWorkbench.mjs";
+import { fetchContext } from "../gui/EFWorkbench.js";
 import { state } from "lit/decorators/state.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;
+  var result = void 0;
   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);
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 function FetchMixin(superClass) {
@@ -22,7 +20,7 @@ function FetchMixin(superClass) {
   __decorateClass([
     consume({ context: fetchContext, subscribe: true }),
     state()
-  ], FetchElement.prototype, "fetch", 2);
+  ], FetchElement.prototype, "fetch");
   return FetchElement;
 }
 export {

package/dist/packages/elements/src/elements/TimegroupController.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class TimegroupController {
+  constructor(host, child) {
+    this.host = host;
+    this.child = child;
+    this.host.addController(this);
+  }
+  remove() {
+    this.host.removeController(this);
+  }
+  hostDisconnected() {
+    this.host.removeController(this);
+  }
+  hostUpdated() {
+    this.child.requestUpdate();
+    this.child.currentTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
+  }
+}
+exports.TimegroupController = TimegroupController;

package/dist/packages/elements/src/elements/TimegroupController.d.ts

@@ -0,0 +1,14 @@
+import { ReactiveController, LitElement } from 'lit';
+import { EFTimegroup } from './EFTimegroup';
+
+export declare class TimegroupController implements ReactiveController {
+    private host;
+    private child;
+    constructor(host: EFTimegroup, child: {
+        currentTimeMs: number;
+        startTimeMs?: number;
+    } & LitElement);
+    remove(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}

package/dist/packages/elements/src/elements/durationConverter.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const parseTimeToMs = require("./parseTimeToMs.cjs");
+const durationConverter = {
+  fromAttribute: (value) => parseTimeToMs.parseTimeToMs(value),
+  toAttribute: (value) => `${value}s`
+};
+exports.durationConverter = durationConverter;

package/dist/packages/elements/src/elements/durationConverter.d.ts

@@ -0,0 +1,4 @@
+export declare const durationConverter: {
+    fromAttribute: (value: string) => number;
+    toAttribute: (value: number) => string;
+};

package/dist/{elements/src/elements/durationConverter.mjs → packages/elements/src/elements/durationConverter.js}

@@ -1,4 +1,4 @@
-import { parseTimeToMs } from "./parseTimeToMs.mjs";
+import { parseTimeToMs } from "./parseTimeToMs.js";
 const durationConverter = {
   fromAttribute: (value) => parseTimeToMs(value),
   toAttribute: (value) => `${value}s`

package/dist/packages/elements/src/elements/parseTimeToMs.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const parseTimeToMs = (time) => {
+  if (time.endsWith("ms")) {
+    return Number.parseFloat(time);
+  }
+  if (time.endsWith("s")) {
+    return Number.parseFloat(time) * 1e3;
+  }
+  throw new Error("Time must be in milliseconds or seconds (10s, 10000ms)");
+};
+exports.parseTimeToMs = parseTimeToMs;

package/dist/packages/elements/src/elements/parseTimeToMs.d.ts

@@ -0,0 +1 @@
+export declare const parseTimeToMs: (time: string) => number;

package/dist/packages/elements/src/elements/parseTimeToMs.js

@@ -0,0 +1,12 @@
+const parseTimeToMs = (time) => {
+  if (time.endsWith("ms")) {
+    return Number.parseFloat(time);
+  }
+  if (time.endsWith("s")) {
+    return Number.parseFloat(time) * 1e3;
+  }
+  throw new Error("Time must be in milliseconds or seconds (10s, 10000ms)");
+};
+export {
+  parseTimeToMs
+};

package/dist/packages/elements/src/elements/util.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const EFTimegroup = require("./EFTimegroup.cjs");
+const getStartTimeMs = (element) => {
+  const nearestTimeGroup = element.closest("ef-timegroup");
+  if (!(nearestTimeGroup instanceof EFTimegroup.EFTimegroup)) {
+    return 0;
+  }
+  return nearestTimeGroup.startTimeMs;
+};
+exports.getStartTimeMs = getStartTimeMs;

package/dist/packages/elements/src/elements/util.d.ts

@@ -0,0 +1,4 @@
+import { EFTimegroup } from './EFTimegroup';
+
+export declare const getRootTimeGroup: (element: Element) => EFTimegroup | null;
+export declare const getStartTimeMs: (element: Element) => number;

package/dist/{elements/src/elements/util.mjs → packages/elements/src/elements/util.js}

@@ -1,4 +1,4 @@
-import { EFTimegroup } from "./EFTimegroup.mjs";
+import { EFTimegroup } from "./EFTimegroup.js";
 const getStartTimeMs = (element) => {
   const nearestTimeGroup = element.closest("ef-timegroup");
   if (!(nearestTimeGroup instanceof EFTimegroup)) {