@twick/live-player 0.14.20 → 0.15.0

package/dist/internal-CHEF557f.js

@@ -1,2120 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-class EventDispatcherBase {
-  constructor() {
-    this.subscribable = new Subscribable(this);
-    this.subscribers = /* @__PURE__ */ new Set();
-  }
-  /**
-   * {@inheritDoc Subscribable.subscribe}
-   */
-  subscribe(handler) {
-    this.subscribers.add(handler);
-    return () => this.unsubscribe(handler);
-  }
-  /**
-   * {@inheritDoc Subscribable.unsubscribe}
-   */
-  unsubscribe(handler) {
-    this.subscribers.delete(handler);
-  }
-  /**
-   * Unsubscribe all subscribers from the event.
-   */
-  clear() {
-    this.subscribers.clear();
-  }
-  notifySubscribers(value) {
-    return [...this.subscribers].map((handler) => handler(value));
-  }
-}
-class Subscribable {
-  constructor(dispatcher) {
-    this.dispatcher = dispatcher;
-  }
-  /**
-   * Subscribe to the event.
-   *
-   * @param handler - The handler to invoke when the event occurs.
-   *
-   * @returns A callback function that cancels the subscription.
-   */
-  subscribe(handler) {
-    return this.dispatcher.subscribe(handler);
-  }
-  /**
-   * Unsubscribe from the event.
-   *
-   * @param handler - The handler to unsubscribe.
-   */
-  unsubscribe(handler) {
-    this.dispatcher.unsubscribe(handler);
-  }
-}
-class AsyncEventDispatcher extends EventDispatcherBase {
-  async dispatch(value) {
-    await Promise.all(this.notifySubscribers(value));
-  }
-}
-class EventDispatcher extends EventDispatcherBase {
-  dispatch(value) {
-    this.notifySubscribers(value);
-  }
-}
-class FlagDispatcher extends EventDispatcherBase {
-  constructor() {
-    super(...arguments);
-    this.value = false;
-  }
-  /**
-   * Notify all current and future subscribers.
-   */
-  raise() {
-    if (!this.value) {
-      this.value = true;
-      this.notifySubscribers();
-    }
-  }
-  /**
-   * Stop notifying future subscribers.
-   */
-  reset() {
-    this.value = false;
-  }
-  /**
-   * Are subscribers being notified?
-   */
-  isRaised() {
-    return this.value;
-  }
-  subscribe(handler) {
-    const unsubscribe = super.subscribe(handler);
-    if (this.value) {
-      handler();
-    }
-    return unsubscribe;
-  }
-}
-class ValueDispatcher extends EventDispatcherBase {
-  /**
-   * {@inheritDoc SubscribableValueEvent.current}
-   */
-  get current() {
-    return this.value;
-  }
-  /**
-   * Set the current value of this dispatcher.
-   *
-   * @remarks
-   * Setting the value will immediately notify all subscribers.
-   *
-   * @param value - The new value.
-   */
-  set current(value) {
-    this.value = value;
-    this.notifySubscribers(value);
-  }
-  /**
-   * @param value - The initial value.
-   */
-  constructor(value) {
-    super();
-    this.value = value;
-    this.subscribable = new SubscribableValueEvent(this);
-  }
-  /**
-   * {@inheritDoc SubscribableValueEvent.subscribe}
-   */
-  subscribe(handler, dispatchImmediately = true) {
-    const unsubscribe = super.subscribe(handler);
-    if (dispatchImmediately) {
-      handler(this.value);
-    }
-    return unsubscribe;
-  }
-}
-class SubscribableValueEvent extends Subscribable {
-  /**
-   * Get the most recent value of this dispatcher.
-   */
-  get current() {
-    return this.dispatcher.current;
-  }
-  /**
-   * Subscribe to the event.
-   *
-   * Subscribing will immediately invoke the handler with the most recent value.
-   *
-   * @param handler - The handler to invoke when the event occurs.
-   * @param dispatchImmediately - Whether the handler should be immediately
-   *                              invoked with the most recent value.
-   *
-   * @returns Callback function that cancels the subscription.
-   */
-  subscribe(handler, dispatchImmediately = true) {
-    return this.dispatcher.subscribe(handler, dispatchImmediately);
-  }
-}
-function map(from, to, value) {
-  return from + (to - from) * value;
-}
-function clamp(min, max, value) {
-  return value < min ? min : value > max ? max : value;
-}
-const SceneStack = [];
-function useLogger() {
-  var _a;
-  return ((_a = SceneStack.at(-1)) == null ? void 0 : _a.logger) ?? console;
-}
-class DetailedError extends Error {
-  constructor(props, remarks) {
-    if (typeof props === "string") {
-      super(props);
-      this.remarks = remarks;
-    } else {
-      super(props.message);
-      this.remarks = props.remarks;
-      this.object = props.object;
-      this.durationMs = props.durationMs;
-      this.inspect = props.inspect;
-    }
-  }
-}
-const ThreadStack = [];
-function useThread() {
-  const thread = ThreadStack.at(-1);
-  if (!thread) {
-    throw new DetailedError(
-      "The thread is not available in the current context.",
-      // language=markdown
-      `\`useThread()\` can only be called from within generator functions.
-      It's not available during rendering.`
-    );
-  }
-  return thread;
-}
-function errorToLog(error) {
-  return {
-    message: error.message,
-    stack: error.stack,
-    remarks: error.remarks
-  };
-}
-function getContext(options, canvas = document.createElement("canvas")) {
-  const context = canvas.getContext("2d", options);
-  if (!context) {
-    throw new Error("Could not create a 2D context.");
-  }
-  return context;
-}
-const RAD2DEG = 180 / Math.PI;
-const DEG2RAD = Math.PI / 180;
-class Semaphore {
-  constructor() {
-    this.resolveCurrent = null;
-    this.current = null;
-  }
-  async acquire() {
-    while (this.current) {
-      await this.current;
-    }
-    this.current = new Promise((resolve) => {
-      this.resolveCurrent = resolve;
-    });
-  }
-  release() {
-    var _a;
-    this.current = null;
-    (_a = this.resolveCurrent) == null ? void 0 : _a.call(this);
-    this.resolveCurrent = null;
-  }
-}
-const PlaybackStack = [];
-function usePlayback() {
-  const playback = PlaybackStack.at(-1);
-  if (!playback) {
-    throw new Error("The playback is not available in the current context.");
-  }
-  return playback;
-}
-function arcLerp(value, reverse, ratio) {
-  let flip = reverse;
-  if (ratio > 1) {
-    ratio = 1 / ratio;
-  } else {
-    flip = !flip;
-  }
-  const normalized = flip ? Math.acos(clamp(-1, 1, 1 - value)) : Math.asin(value);
-  const radians = map(normalized, map(0, Math.PI / 2, value), ratio);
-  let xValue = Math.sin(radians);
-  let yValue = 1 - Math.cos(radians);
-  if (reverse) {
-    [xValue, yValue] = [yValue, xValue];
-  }
-  return { x: xValue, y: yValue };
-}
-function decorate(fn, ...decorators) {
-  const target = { [fn.name]: fn };
-  const descriptor = Object.getOwnPropertyDescriptor(target, fn.name);
-  if (descriptor) {
-    for (let i = decorators.length - 1; i >= 0; i--) {
-      decorators[i](target, fn.name, descriptor);
-    }
-  }
-}
-function threadable(customName) {
-  return function(_, propertyKey, descriptor) {
-    descriptor.value.prototype.name = propertyKey;
-    descriptor.value.prototype.threadable = true;
-  };
-}
-function easeInOutCubic(value, from = 0, to = 1) {
-  value = value < 0.5 ? 4 * value * value * value : 1 - Math.pow(-2 * value + 2, 3) / 2;
-  return map(from, to, value);
-}
-decorate(tween, threadable());
-function* tween(seconds, onProgress, onEnd) {
-  const thread = useThread();
-  const startTime = thread.time();
-  const endTime = thread.time() + seconds;
-  onProgress(0, 0);
-  while (endTime > thread.fixed) {
-    const time = thread.fixed - startTime;
-    const value = time / seconds;
-    if (time > 0) {
-      onProgress(value, time);
-    }
-    yield;
-  }
-  thread.time(endTime);
-  onProgress(1, seconds);
-  onEnd == null ? void 0 : onEnd(1, seconds);
-}
-var Direction;
-(function(Direction2) {
-  Direction2[Direction2["Top"] = 4] = "Top";
-  Direction2[Direction2["Bottom"] = 8] = "Bottom";
-  Direction2[Direction2["Left"] = 16] = "Left";
-  Direction2[Direction2["Right"] = 32] = "Right";
-})(Direction || (Direction = {}));
-var Center;
-(function(Center2) {
-  Center2[Center2["Vertical"] = 1] = "Vertical";
-  Center2[Center2["Horizontal"] = 2] = "Horizontal";
-})(Center || (Center = {}));
-var Origin;
-(function(Origin2) {
-  Origin2[Origin2["Middle"] = 3] = "Middle";
-  Origin2[Origin2["Top"] = 5] = "Top";
-  Origin2[Origin2["Bottom"] = 9] = "Bottom";
-  Origin2[Origin2["Left"] = 18] = "Left";
-  Origin2[Origin2["Right"] = 34] = "Right";
-  Origin2[Origin2["TopLeft"] = 20] = "TopLeft";
-  Origin2[Origin2["TopRight"] = 36] = "TopRight";
-  Origin2[Origin2["BottomLeft"] = 24] = "BottomLeft";
-  Origin2[Origin2["BottomRight"] = 40] = "BottomRight";
-})(Origin || (Origin = {}));
-decorate(waitFor, threadable());
-function* waitFor(seconds = 0, after) {
-  const thread = useThread();
-  const step = usePlayback().framesToSeconds(1);
-  const targetTime = thread.time() + seconds;
-  while (targetTime - step > thread.fixed) {
-    yield;
-  }
-  thread.time(targetTime);
-  if (after) {
-    yield* after;
-  }
-}
-function setTaskName(task, source) {
-  const prototype = Object.getPrototypeOf(task);
-  if (!prototype.threadable) {
-    prototype.threadable = true;
-    prototype.name = typeof source === "string" ? source : getTaskName(source);
-  }
-}
-function getTaskName(task) {
-  return Object.getPrototypeOf(task).name ?? null;
-}
-function run(firstArg, runner) {
-  let task;
-  if (typeof firstArg === "string") {
-    task = runner();
-    setTaskName(task, firstArg);
-  } else {
-    task = firstArg();
-    setTaskName(task, task);
-  }
-  return task;
-}
-class DependencyContext {
-  static collectPromise(promise, initialValue = null) {
-    const handle = {
-      promise,
-      value: initialValue,
-      stack: new Error().stack
-    };
-    const context = this.collectionStack.at(-1);
-    if (context) {
-      handle.owner = context.owner;
-    }
-    promise.then((value) => {
-      handle.value = value;
-      context == null ? void 0 : context.markDirty();
-    });
-    this.promises.push(handle);
-    return handle;
-  }
-  static hasPromises() {
-    return this.promises.length > 0;
-  }
-  static async consumePromises() {
-    const promises = [...this.promises];
-    await Promise.all(promises.map((handle) => handle.promise));
-    this.promises = this.promises.filter((v) => !promises.includes(v));
-    return promises;
-  }
-  constructor(owner) {
-    this.owner = owner;
-    this.dependencies = /* @__PURE__ */ new Set();
-    this.event = new FlagDispatcher();
-    this.markDirty = () => this.event.raise();
-    this.invokable = this.invoke.bind(this);
-    Object.defineProperty(this.invokable, "context", {
-      value: this
-    });
-    Object.defineProperty(this.invokable, "toPromise", {
-      value: this.toPromise.bind(this)
-    });
-  }
-  invoke() {
-  }
-  startCollecting() {
-    if (DependencyContext.collectionSet.has(this)) {
-      throw new DetailedError("A circular dependency occurred between signals.", `This can happen when signals reference each other in a loop.
-        Try using the attached stack trace to locate said loop.`);
-    }
-    DependencyContext.collectionSet.add(this);
-    DependencyContext.collectionStack.push(this);
-  }
-  finishCollecting() {
-    DependencyContext.collectionSet.delete(this);
-    if (DependencyContext.collectionStack.pop() !== this) {
-      throw new Error("collectStart/collectEnd was called out of order.");
-    }
-  }
-  clearDependencies() {
-    this.dependencies.forEach((dep) => dep.unsubscribe(this.markDirty));
-    this.dependencies.clear();
-  }
-  collect() {
-    const signal = DependencyContext.collectionStack.at(-1);
-    if (signal) {
-      signal.dependencies.add(this.event.subscribable);
-      this.event.subscribe(signal.markDirty);
-    }
-  }
-  dispose() {
-    this.clearDependencies();
-    this.event.clear();
-    this.owner = null;
-  }
-  async toPromise() {
-    do {
-      await DependencyContext.consumePromises();
-      this.invokable();
-    } while (DependencyContext.hasPromises());
-    return this.invokable;
-  }
-}
-DependencyContext.collectionSet = /* @__PURE__ */ new Set();
-DependencyContext.collectionStack = [];
-DependencyContext.promises = [];
-const DEFAULT = Symbol.for("@twick/core/signals/default");
-function isReactive(value) {
-  return typeof value === "function";
-}
-function modify(value, modification) {
-  return isReactive(value) ? () => modification(value()) : modification(value);
-}
-function unwrap(value) {
-  return isReactive(value) ? value() : value;
-}
-class SignalContext extends DependencyContext {
-  constructor(initial, interpolation, owner = void 0, parser = (value) => value, extensions = {}) {
-    super(owner);
-    this.initial = initial;
-    this.interpolation = interpolation;
-    this.parser = parser;
-    this.tweening = false;
-    Object.defineProperty(this.invokable, "reset", {
-      value: this.reset.bind(this)
-    });
-    Object.defineProperty(this.invokable, "save", {
-      value: this.save.bind(this)
-    });
-    Object.defineProperty(this.invokable, "isInitial", {
-      value: this.isInitial.bind(this)
-    });
-    if (this.initial !== void 0) {
-      this.current = this.initial;
-      this.markDirty();
-      if (!isReactive(this.initial)) {
-        this.last = this.parse(this.initial);
-      }
-    }
-    this.extensions = {
-      getter: this.getter.bind(this),
-      setter: this.setter.bind(this),
-      tweener: this.tweener.bind(this),
-      ...extensions
-    };
-  }
-  toSignal() {
-    return this.invokable;
-  }
-  parse(value) {
-    return this.parser(value);
-  }
-  set(value) {
-    this.extensions.setter(value);
-    return this.owner;
-  }
-  setter(value) {
-    if (value === DEFAULT) {
-      value = this.initial;
-    }
-    if (this.current === value) {
-      return this.owner;
-    }
-    this.current = value;
-    this.markDirty();
-    this.clearDependencies();
-    if (!isReactive(value)) {
-      this.last = this.parse(value);
-    }
-    return this.owner;
-  }
-  get() {
-    return this.extensions.getter();
-  }
-  getter() {
-    var _a;
-    if (this.event.isRaised() && isReactive(this.current)) {
-      this.clearDependencies();
-      this.startCollecting();
-      try {
-        this.last = this.parse(this.current());
-      } catch (e) {
-        useLogger().error({
-          ...errorToLog(e),
-          inspect: (_a = this.owner) == null ? void 0 : _a.key
-        });
-      }
-      this.finishCollecting();
-    }
-    this.event.reset();
-    this.collect();
-    return this.last;
-  }
-  invoke(value, duration, timingFunction = easeInOutCubic, interpolationFunction = this.interpolation) {
-    if (value === void 0) {
-      return this.get();
-    }
-    if (duration === void 0) {
-      return this.set(value);
-    }
-    const queue = this.createQueue(timingFunction, interpolationFunction);
-    return queue.to(value, duration);
-  }
-  createQueue(defaultTimingFunction, defaultInterpolationFunction) {
-    const initial = this.get();
-    const queue = [];
-    const task = run("animation chain", function* animate() {
-      while (queue.length > 0) {
-        yield* queue.shift();
-      }
-    });
-    task.to = (value, duration, timingFunction = defaultTimingFunction, interpolationFunction = defaultInterpolationFunction) => {
-      defaultTimingFunction = timingFunction;
-      defaultInterpolationFunction = interpolationFunction;
-      queue.push(this.tween(value, duration, timingFunction, interpolationFunction));
-      return task;
-    };
-    task.back = (time, timingFunction = defaultTimingFunction, interpolationFunction = defaultInterpolationFunction) => {
-      defaultTimingFunction = timingFunction;
-      defaultInterpolationFunction = interpolationFunction;
-      queue.push(this.tween(initial, time, defaultTimingFunction, defaultInterpolationFunction));
-      return task;
-    };
-    task.wait = (duration) => {
-      queue.push(waitFor(duration));
-      return task;
-    };
-    task.run = (generator) => {
-      queue.push(generator);
-      return task;
-    };
-    task.do = (callback) => {
-      queue.push(run(function* () {
-        callback();
-      }));
-      return task;
-    };
-    return task;
-  }
-  *tween(value, duration, timingFunction, interpolationFunction) {
-    if (value === DEFAULT) {
-      value = this.initial;
-    }
-    this.tweening = true;
-    yield* this.extensions.tweener(value, duration, timingFunction, interpolationFunction);
-    this.set(value);
-    this.tweening = false;
-  }
-  *tweener(value, duration, timingFunction, interpolationFunction) {
-    const from = this.get();
-    yield* tween(duration, (v) => {
-      this.set(interpolationFunction(from, this.parse(unwrap(value)), timingFunction(v)));
-    });
-  }
-  dispose() {
-    super.dispose();
-    this.initial = void 0;
-    this.current = void 0;
-    this.last = void 0;
-  }
-  /**
-   * Reset the signal to its initial value (if one has been set).
-   *
-   * @example
-   * ```ts
-   * const signal = createSignal(7);
-   *
-   * signal.reset();
-   * // same as:
-   * signal(7);
-   * ```
-   */
-  reset() {
-    if (this.initial !== void 0) {
-      this.set(this.initial);
-    }
-    return this.owner;
-  }
-  /**
-   * Compute the current value of the signal and immediately set it.
-   *
-   * @remarks
-   * This method can be used to stop the signal from updating while keeping its
-   * current value.
-   *
-   * @example
-   * ```ts
-   * signal.save();
-   * // same as:
-   * signal(signal());
-   * ```
-   */
-  save() {
-    return this.set(this.get());
-  }
-  /**
-   * Check if the signal is currently using its initial value.
-   *
-   * @example
-   * ```ts
-   *
-   * const signal = createSignal(0);
-   * signal.isInitial(); // true
-   *
-   * signal(5);
-   * signal.isInitial(); // false
-   *
-   * signal(DEFAULT);
-   * signal.isInitial(); // true
-   * ```
-   */
-  isInitial() {
-    this.collect();
-    return this.current === this.initial;
-  }
-  /**
-   * Get the initial value of this signal.
-   */
-  getInitial() {
-    return this.initial;
-  }
-  /**
-   * Get the raw value of this signal.
-   *
-   * @remarks
-   * If the signal was provided with a factory function, the function itself
-   * will be returned, without invoking it.
-   *
-   * This method can be used to create copies of signals.
-   *
-   * @example
-   * ```ts
-   * const a = createSignal(2);
-   * const b = createSignal(() => a);
-   * // b() == 2
-   *
-   * const bClone = createSignal(b.raw());
-   * // bClone() == 2
-   *
-   * a(4);
-   * // b() == 4
-   * // bClone() == 4
-   * ```
-   */
-  raw() {
-    return this.current;
-  }
-  /**
-   * Is the signal undergoing a tween?
-   */
-  isTweening() {
-    return this.tweening;
-  }
-}
-class CompoundSignalContext extends SignalContext {
-  constructor(entries, parser, initial, interpolation, owner = void 0, extensions = {}) {
-    var _a;
-    super(void 0, interpolation, owner, parser, extensions);
-    this.entries = entries;
-    this.signals = [];
-    this.parser = parser;
-    for (const entry of entries) {
-      let key;
-      let signal;
-      if (Array.isArray(entry)) {
-        [key, signal] = entry;
-        (_a = signal.context).owner ?? (_a.owner = this);
-      } else {
-        key = entry;
-        signal = new SignalContext(modify(initial, (value) => parser(value)[entry]), map, owner ?? this.invokable).toSignal();
-      }
-      this.signals.push([key, signal]);
-      Object.defineProperty(this.invokable, key, { value: signal });
-    }
-  }
-  toSignal() {
-    return this.invokable;
-  }
-  parse(value) {
-    return this.parser(value);
-  }
-  getter() {
-    return this.parse(Object.fromEntries(this.signals.map(([key, property]) => [key, property()])));
-  }
-  setter(value) {
-    if (isReactive(value)) {
-      for (const [key, property] of this.signals) {
-        property(() => this.parser(value())[key]);
-      }
-    } else {
-      const parsed = this.parse(value);
-      for (const [key, property] of this.signals) {
-        property(parsed[key]);
-      }
-    }
-    return this.owner;
-  }
-  reset() {
-    for (const [, signal] of this.signals) {
-      signal.reset();
-    }
-    return this.owner;
-  }
-  save() {
-    for (const [, signal] of this.signals) {
-      signal.save();
-    }
-    return this.owner;
-  }
-  isInitial() {
-    for (const [, signal] of this.signals) {
-      if (!signal.isInitial()) {
-        return false;
-      }
-    }
-    return true;
-  }
-  raw() {
-    return Object.fromEntries(this.signals.map(([key, property]) => [key, property.context.raw()]));
-  }
-}
-const EPSILON = 1e-6;
-class Vector2 {
-  static createSignal(initial, interpolation = Vector2.lerp, owner) {
-    return new CompoundSignalContext(["x", "y"], (value) => new Vector2(value), initial, interpolation, owner).toSignal();
-  }
-  static lerp(from, to, value) {
-    let valueX;
-    let valueY;
-    if (typeof value === "number") {
-      valueX = valueY = value;
-    } else {
-      valueX = value.x;
-      valueY = value.y;
-    }
-    return new Vector2(map(from.x, to.x, valueX), map(from.y, to.y, valueY));
-  }
-  static arcLerp(from, to, value, reverse = false, ratio) {
-    ratio ?? (ratio = from.sub(to).ctg);
-    return Vector2.lerp(from, to, new Vector2(arcLerp(value, reverse, ratio)));
-  }
-  static createArcLerp(reverse, ratio) {
-    return (from, to, value) => Vector2.arcLerp(from, to, value, reverse, ratio);
-  }
-  /**
-   * Interpolates between two vectors on the polar plane by interpolating
-   * the angles and magnitudes of the vectors individually.
-   *
-   * @param from - The starting vector.
-   * @param to - The target vector.
-   * @param value - The t-value of the interpolation.
-   * @param counterclockwise - Whether the vector should get rotated
-   *                           counterclockwise. Defaults to `false`.
-   * @param origin - The center of rotation. Defaults to the origin.
-   *
-   * @remarks
-   * This function is useful when used in conjunction with {@link rotate} to
-   * animate an object's position on a circular arc (see examples).
-   *
-   * @example
-   * Animating an object in a circle around the origin
-   * ```tsx
-   * circle().position(
-   *   circle().position().rotate(180),
-   *   1,
-   *   easeInOutCubic,
-   *   Vector2.polarLerp
-   * );
-   * ```
-   * @example
-   * Rotating an object around the point `[-200, 100]`
-   * ```ts
-   * circle().position(
-   *   circle().position().rotate(180, [-200, 100]),
-   *   1,
-   *   easeInOutCubic,
-   *   Vector2.createPolarLerp(false, [-200, 100]),
-   * );
-   * ```
-   * @example
-   * Rotating an object counterclockwise around the origin
-   * ```ts
-   * circle().position(
-   *   circle().position().rotate(180),
-   *   1,
-   *   easeInOutCubic,
-   *   Vector2.createPolarLerp(true),
-   * );
-   * ```
-   */
-  static polarLerp(from, to, value, counterclockwise = false, origin = Vector2.zero) {
-    from = from.sub(origin);
-    to = to.sub(origin);
-    const fromAngle = from.degrees;
-    let toAngle = to.degrees;
-    const isCounterclockwise = fromAngle > toAngle;
-    if (isCounterclockwise !== counterclockwise) {
-      toAngle = toAngle + (counterclockwise ? -360 : 360);
-    }
-    const angle = map(fromAngle, toAngle, value) * DEG2RAD;
-    const magnitude = map(from.magnitude, to.magnitude, value);
-    return new Vector2(magnitude * Math.cos(angle) + origin.x, magnitude * Math.sin(angle) + origin.y);
-  }
-  /**
-   * Helper function to create a {@link Vector2.polarLerp} interpolation
-   * function with additional parameters.
-   *
-   * @param counterclockwise - Whether the point should get rotated
-   *                           counterclockwise.
-   * @param center - The center of rotation. Defaults to the origin.
-   */
-  static createPolarLerp(counterclockwise = false, center = Vector2.zero) {
-    return (from, to, value) => Vector2.polarLerp(from, to, value, counterclockwise, new Vector2(center));
-  }
-  static fromOrigin(origin) {
-    const position = new Vector2();
-    if (origin === Origin.Middle) {
-      return position;
-    }
-    if (origin & Direction.Left) {
-      position.x = -1;
-    } else if (origin & Direction.Right) {
-      position.x = 1;
-    }
-    if (origin & Direction.Top) {
-      position.y = -1;
-    } else if (origin & Direction.Bottom) {
-      position.y = 1;
-    }
-    return position;
-  }
-  static fromScalar(value) {
-    return new Vector2(value, value);
-  }
-  static fromRadians(radians) {
-    return new Vector2(Math.cos(radians), Math.sin(radians));
-  }
-  static fromDegrees(degrees) {
-    return Vector2.fromRadians(degrees * DEG2RAD);
-  }
-  /**
-   * Return the angle in radians between the vector described by x and y and the
-   * positive x-axis.
-   *
-   * @param x - The x component of the vector.
-   * @param y - The y component of the vector.
-   */
-  static radians(x, y) {
-    return Math.atan2(y, x);
-  }
-  /**
-   * Return the angle in degrees between the vector described by x and y and the
-   * positive x-axis.
-   *
-   * @param x - The x component of the vector.
-   * @param y - The y component of the vector.
-   *
-   * @remarks
-   * The returned angle will be between -180 and 180 degrees.
-   */
-  static degrees(x, y) {
-    return Vector2.radians(x, y) * RAD2DEG;
-  }
-  static magnitude(x, y) {
-    return Math.sqrt(x * x + y * y);
-  }
-  static squaredMagnitude(x, y) {
-    return x * x + y * y;
-  }
-  static angleBetween(u, v) {
-    return Math.acos(clamp(-1, 1, u.dot(v) / (u.magnitude * v.magnitude))) * (u.cross(v) >= 0 ? 1 : -1);
-  }
-  get width() {
-    return this.x;
-  }
-  set width(value) {
-    this.x = value;
-  }
-  get height() {
-    return this.y;
-  }
-  set height(value) {
-    this.y = value;
-  }
-  get magnitude() {
-    return Vector2.magnitude(this.x, this.y);
-  }
-  get squaredMagnitude() {
-    return Vector2.squaredMagnitude(this.x, this.y);
-  }
-  get normalized() {
-    return this.scale(1 / Vector2.magnitude(this.x, this.y));
-  }
-  get safe() {
-    return new Vector2(isNaN(this.x) ? 0 : this.x, isNaN(this.y) ? 0 : this.y);
-  }
-  get flipped() {
-    return new Vector2(-this.x, -this.y);
-  }
-  get floored() {
-    return new Vector2(Math.floor(this.x), Math.floor(this.y));
-  }
-  get perpendicular() {
-    return new Vector2(this.y, -this.x);
-  }
-  /**
-   * Return the angle in radians between the vector and the positive x-axis.
-   */
-  get radians() {
-    return Vector2.radians(this.x, this.y);
-  }
-  /**
-   * Return the angle in degrees between the vector and the positive x-axis.
-   *
-   * @remarks
-   * The returned angle will be between -180 and 180 degrees.
-   */
-  get degrees() {
-    return Vector2.degrees(this.x, this.y);
-  }
-  get ctg() {
-    return this.x / this.y;
-  }
-  constructor(one, two) {
-    this.x = 0;
-    this.y = 0;
-    if (one === void 0 || one === null) {
-      return;
-    }
-    if (typeof one !== "object") {
-      this.x = one;
-      this.y = two ?? one;
-      return;
-    }
-    if (Array.isArray(one)) {
-      this.x = one[0];
-      this.y = one[1];
-      return;
-    }
-    if ("width" in one) {
-      this.x = one.width;
-      this.y = one.height;
-      return;
-    }
-    this.x = one.x;
-    this.y = one.y;
-  }
-  lerp(to, value) {
-    return Vector2.lerp(this, to, value);
-  }
-  getOriginOffset(origin) {
-    const offset = Vector2.fromOrigin(origin);
-    offset.x *= this.x / 2;
-    offset.y *= this.y / 2;
-    return offset;
-  }
-  scale(value) {
-    return new Vector2(this.x * value, this.y * value);
-  }
-  mul(possibleVector) {
-    const vector = new Vector2(possibleVector);
-    return new Vector2(this.x * vector.x, this.y * vector.y);
-  }
-  div(possibleVector) {
-    const vector = new Vector2(possibleVector);
-    return new Vector2(this.x / vector.x, this.y / vector.y);
-  }
-  add(possibleVector) {
-    const vector = new Vector2(possibleVector);
-    return new Vector2(this.x + vector.x, this.y + vector.y);
-  }
-  sub(possibleVector) {
-    const vector = new Vector2(possibleVector);
-    return new Vector2(this.x - vector.x, this.y - vector.y);
-  }
-  dot(possibleVector) {
-    const vector = new Vector2(possibleVector);
-    return this.x * vector.x + this.y * vector.y;
-  }
-  cross(possibleVector) {
-    const vector = new Vector2(possibleVector);
-    return this.x * vector.y - this.y * vector.x;
-  }
-  mod(possibleVector) {
-    const vector = new Vector2(possibleVector);
-    return new Vector2(this.x % vector.x, this.y % vector.y);
-  }
-  addX(value) {
-    return new Vector2(this.x + value, this.y);
-  }
-  addY(value) {
-    return new Vector2(this.x, this.y + value);
-  }
-  toSymbol() {
-    return Vector2.symbol;
-  }
-  toString() {
-    return `Vector2(${this.x}, ${this.y})`;
-  }
-  toUniform(gl, location) {
-    gl.uniform2f(location, this.x, this.y);
-  }
-  serialize() {
-    return { x: this.x, y: this.y };
-  }
-  /**
-   * Check if two vectors are exactly equal to each other.
-   *
-   * @remarks
-   * If you need to compensate for floating point inaccuracies, use the
-   * {@link equals} method, instead.
-   *
-   * @param other - The vector to compare.
-   */
-  exactlyEquals(other) {
-    return this.x === other.x && this.y === other.y;
-  }
-  /**
-   * Check if two vectors are equal to each other.
-   *
-   * @remarks
-   * This method allows passing an allowed error margin when comparing vectors
-   * to compensate for floating point inaccuracies. To check if two vectors are
-   * exactly equal, use the {@link exactlyEquals} method, instead.
-   *
-   * @param other - The vector to compare.
-   * @param threshold - The allowed error threshold when comparing the vectors.
-   */
-  equals(other, threshold = EPSILON) {
-    return Math.abs(this.x - other.x) <= threshold + Number.EPSILON && Math.abs(this.y - other.y) <= threshold + Number.EPSILON;
-  }
-}
-Vector2.symbol = Symbol.for("@twick/core/types/Vector2");
-Vector2.zero = new Vector2();
-Vector2.one = new Vector2(1, 1);
-Vector2.right = new Vector2(1, 0);
-Vector2.left = new Vector2(-1, 0);
-Vector2.up = new Vector2(0, 1);
-Vector2.down = new Vector2(0, -1);
-Vector2.top = new Vector2(0, -1);
-Vector2.bottom = new Vector2(0, 1);
-Vector2.topLeft = new Vector2(-1, -1);
-Vector2.topRight = new Vector2(1, -1);
-Vector2.bottomLeft = new Vector2(-1, 1);
-Vector2.bottomRight = new Vector2(1, 1);
-var PlaybackState;
-(function(PlaybackState2) {
-  PlaybackState2[PlaybackState2["Playing"] = 0] = "Playing";
-  PlaybackState2[PlaybackState2["Rendering"] = 1] = "Rendering";
-  PlaybackState2[PlaybackState2["Paused"] = 2] = "Paused";
-  PlaybackState2[PlaybackState2["Presenting"] = 3] = "Presenting";
-})(PlaybackState || (PlaybackState = {}));
-class PlaybackManager {
-  constructor() {
-    this.frame = 0;
-    this.speed = 1;
-    this.fps = 30;
-    this.duration = 0;
-    this.finished = false;
-    this.slides = [];
-    this.previousScene = null;
-    this.state = PlaybackState.Paused;
-    this.currentSceneReference = null;
-    this.scenes = new ValueDispatcher([]);
-  }
-  /**
-   * Triggered when the active scene changes.
-   *
-   * @eventProperty
-   */
-  get onSceneChanged() {
-    if (this.currentSceneReference === null) {
-      throw new Error("PlaybackManager has not been properly initialized");
-    }
-    return this.currentSceneReference.subscribable;
-  }
-  /**
-   * Triggered when the scenes get recalculated.
-   *
-   * @remarks
-   * This event indicates that the timing of at least one scene has changed.
-   *
-   * @eventProperty
-   */
-  get onScenesRecalculated() {
-    return this.scenes.subscribable;
-  }
-  get currentScene() {
-    if (this.currentSceneReference === null) {
-      throw new Error("PlaybackManager has not been properly initialized");
-    }
-    return this.currentSceneReference.current;
-  }
-  set currentScene(scene) {
-    if (!scene) {
-      throw new Error("Invalid scene.");
-    }
-    this.currentSceneReference ?? (this.currentSceneReference = new ValueDispatcher(scene));
-    this.currentSceneReference.current = scene;
-  }
-  setup(scenes) {
-    this.scenes.current = scenes;
-    this.currentScene = scenes[0];
-  }
-  async progress() {
-    this.finished = await this.next();
-    return this.finished;
-  }
-  async seek(frame) {
-    if (frame <= this.frame || this.currentScene.isCached() && this.currentScene.lastFrame < frame) {
-      const scene = this.findBestScene(frame);
-      if (scene !== this.currentScene) {
-        this.currentScene.stopAllMedia();
-        this.previousScene = null;
-        this.currentScene = scene;
-        this.frame = this.currentScene.firstFrame;
-        await this.currentScene.reset();
-      } else if (this.frame >= frame) {
-        this.previousScene = null;
-        this.frame = this.currentScene.firstFrame;
-        await this.currentScene.reset();
-      }
-    }
-    this.finished = false;
-    while (this.frame < frame && !this.finished) {
-      this.finished = await this.next();
-    }
-    return this.finished;
-  }
-  async reset() {
-    this.previousScene = null;
-    this.currentScene = this.scenes.current[0];
-    this.frame = 0;
-    await this.currentScene.reset();
-  }
-  reload(description) {
-    this.scenes.current.forEach((scene) => scene.reload(description));
-  }
-  async recalculate() {
-    this.previousScene = null;
-    this.slides = [];
-    const speed = this.speed;
-    this.frame = 0;
-    this.speed = 1;
-    const scenes = [];
-    try {
-      for (const scene of this.scenes.current) {
-        await scene.recalculate((frame) => {
-          this.frame = frame;
-        });
-        this.slides.push(...scene.slides.onChanged.current);
-        scenes.push(scene);
-      }
-    } finally {
-      this.speed = speed;
-    }
-    this.scenes.current = scenes;
-    this.duration = this.frame;
-  }
-  async next() {
-    if (this.previousScene) {
-      await this.previousScene.next();
-      if (this.currentScene.isFinished()) {
-        this.previousScene = null;
-      }
-    }
-    this.frame += this.speed;
-    if (this.currentScene.isFinished()) {
-      return true;
-    }
-    await this.currentScene.next();
-    if (this.previousScene && this.currentScene.isAfterTransitionIn()) {
-      this.previousScene = null;
-    }
-    if (this.currentScene.canTransitionOut()) {
-      this.previousScene = this.currentScene;
-      const nextScene = this.getNextScene(this.previousScene);
-      if (nextScene) {
-        this.previousScene.stopAllMedia();
-        this.currentScene = nextScene;
-        await this.currentScene.reset(this.previousScene);
-      }
-      if (!nextScene || this.currentScene.isAfterTransitionIn()) {
-        this.previousScene = null;
-      }
-    }
-    return this.currentScene.isFinished();
-  }
-  findBestScene(frame) {
-    let lastScene = this.scenes.current[0];
-    for (const scene of this.scenes.current) {
-      if (!scene.isCached() || scene.lastFrame > frame) {
-        return scene;
-      }
-      lastScene = scene;
-    }
-    return lastScene;
-  }
-  getNextScene(scene) {
-    const scenes = this.scenes.current;
-    if (!scene) {
-      return scenes[0];
-    }
-    const index = scenes.findIndex((s) => s === scene);
-    if (index < 0) {
-      return null;
-    }
-    return scenes[index + 1] ?? null;
-  }
-}
-class PlaybackStatus {
-  constructor(playback) {
-    this.playback = playback;
-  }
-  /**
-   * Convert seconds to frames using the current framerate.
-   *
-   * @param seconds - The seconds to convert.
-   */
-  secondsToFrames(seconds) {
-    return Math.ceil(seconds * this.playback.fps);
-  }
-  /**
-   * Convert frames to seconds using the current framerate.
-   *
-   * @param frames - The frames to convert.
-   */
-  framesToSeconds(frames) {
-    return frames / this.playback.fps;
-  }
-  get time() {
-    return this.framesToSeconds(this.playback.frame);
-  }
-  get frame() {
-    return this.playback.frame;
-  }
-  get speed() {
-    return this.playback.speed;
-  }
-  get fps() {
-    return this.playback.fps;
-  }
-  get state() {
-    return this.playback.state;
-  }
-  /**
-   * The time passed since the last frame in seconds.
-   */
-  get deltaTime() {
-    return this.framesToSeconds(1) * this.speed;
-  }
-}
-const SOURCE_URL_REGEX = /^\/\/# sourceURL=(.*)$/gm;
-const INFO_LOG_REGEX = /ERROR: \d+:(\d+): (.*)/g;
-const INFO_TOKEN_REGEX = /^'([^']+)'/;
-const includeWithoutPreprocessor = `
-The \`#include\` directive requires the use of a preprocessor.
-
-Make sure to import the shader from a file:
-
-\`\`\`ts
-import shader from './shader.glsl';
-\`\`\`
-
-Do **NOT** use the raw loader:
-
-\`\`\`ts
-import shader from './shader.glsl?raw';
-\`\`\`
-
-Do **NOT** use \`#include\` in an inline string:
-
-\`\`\`ts
-const shader = \`\\
-#include "example.glsl"
-\`;
-\`\`\`
-
-[Learn more](https://motioncanvas.io/docs/shaders) about working with shaders.
-`;
-class SharedWebGLContext {
-  constructor(logger) {
-    this.logger = logger;
-    this.gl = null;
-    this.currentOwner = null;
-    this.programLookup = /* @__PURE__ */ new Map();
-  }
-  borrow(owner) {
-    var _a;
-    if (this.currentOwner === owner) {
-      return this.gl;
-    }
-    (_a = this.currentOwner) == null ? void 0 : _a.teardown(this.gl);
-    this.currentOwner = owner;
-    this.currentOwner.setup(this.getGL());
-    return this.gl;
-  }
-  /**
-   * Dispose the WebGL context to free up resources.
-   */
-  dispose() {
-    var _a, _b;
-    if (!this.gl) {
-      return;
-    }
-    (_a = this.currentOwner) == null ? void 0 : _a.teardown(this.gl);
-    this.currentOwner = null;
-    this.gl.useProgram(null);
-    for (const { program, fragment, vertex } of this.programLookup.values()) {
-      this.gl.deleteProgram(program);
-      this.gl.deleteShader(fragment);
-      this.gl.deleteShader(vertex);
-    }
-    this.programLookup.clear();
-    (_b = this.gl.getExtension("WEBGL_lose_context")) == null ? void 0 : _b.loseContext();
-    this.gl.canvas.remove();
-    this.gl = null;
-  }
-  getProgram(fragment, vertex) {
-    const key = `${fragment}#${vertex}`;
-    if (this.programLookup.has(key)) {
-      return this.programLookup.get(key).program;
-    }
-    const gl = this.getGL();
-    const fragmentShader = this.getShader(gl.FRAGMENT_SHADER, fragment);
-    const vertexShader = this.getShader(gl.VERTEX_SHADER, vertex);
-    if (!fragmentShader || !vertexShader) {
-      return null;
-    }
-    const program = gl.createProgram();
-    gl.attachShader(program, fragmentShader);
-    gl.attachShader(program, vertexShader);
-    gl.linkProgram(program);
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-      this.logger.error({
-        message: "Failed to initialize the shader program.",
-        remarks: gl.getProgramInfoLog(program) ?? void 0,
-        stack: new Error().stack
-      });
-      gl.deleteProgram(program);
-      return null;
-    }
-    this.programLookup.set(key, {
-      program,
-      fragment: fragmentShader,
-      vertex: vertexShader
-    });
-    return program;
-  }
-  getShader(type, source) {
-    const gl = this.getGL();
-    const shader = gl.createShader(type);
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-      const log = gl.getShaderInfoLog(shader);
-      logGlslError(this.logger, log, source);
-      gl.deleteShader(shader);
-      return null;
-    }
-    return shader;
-  }
-  getGL() {
-    if (this.gl) {
-      return this.gl;
-    }
-    this.gl = document.createElement("canvas").getContext("webgl2", {
-      depth: false,
-      premultipliedAlpha: false,
-      stencil: false,
-      powerPreference: "high-performance"
-    });
-    if (!this.gl) {
-      throw new Error("Failed to initialize WebGL.");
-    }
-    return this.gl;
-  }
-}
-function logGlslError(logger, log, source) {
-  let sourceUrl = null;
-  SOURCE_URL_REGEX.lastIndex = 0;
-  const sourceMatch = SOURCE_URL_REGEX.exec(source);
-  if (sourceMatch) {
-    const url = new URL(sourceMatch[1], window.location.origin);
-    url.searchParams.set("t", Date.now().toString());
-    sourceUrl = url.toString();
-  }
-  if (!log) {
-    logger.error({
-      message: `Unknown shader compilation error.`,
-      stack: fakeStackTrace(sourceUrl, 1, 0)
-    });
-    return null;
-  }
-  let logged = false;
-  let result;
-  while (result = INFO_LOG_REGEX.exec(log)) {
-    const [, line, message] = result;
-    let column = 0;
-    const match = message.match(INFO_TOKEN_REGEX);
-    if (match) {
-      const tokenLine = source.split("\n")[parseInt(line) - 1];
-      const index = tokenLine.indexOf(match[1]);
-      if (index !== -1) {
-        column = index;
-      }
-      if (match[1] === "include") {
-        const line2 = source.split("\n").find((line3) => line3.startsWith("#include"));
-        if (line2) {
-          logged = true;
-          logger.error({
-            message: `Shader compilation error: ${message}`,
-            remarks: includeWithoutPreprocessor
-          });
-          break;
-        }
-      }
-    }
-    logged = true;
-    logger.error({
-      message: `Shader compilation error: ${message}`,
-      stack: fakeStackTrace(sourceUrl, line, column)
-    });
-  }
-  if (!logged) {
-    logger.error({
-      message: `Shader compilation error: ${log}`,
-      stack: fakeStackTrace(sourceUrl, 1, 0)
-    });
-  }
-}
-function fakeStackTrace(file, line, column) {
-  if (!file) {
-    return void 0;
-  }
-  return navigator.userAgent.toLowerCase().includes("chrome") ? `  at (${file}:${line}:${column})` : `@${file}:${line}:${column}`;
-}
-class Player {
-  /**
-   * Triggered during each iteration of the update loop when the frame is ready
-   * to be rendered.
-   *
-   * @remarks
-   * Player does not perform any rendering on its own. For the animation to be
-   * visible, another class must subscribe to this event and perform the
-   * rendering itself. {@link Stage} can be used to display the animation.
-   *
-   * @eventProperty
-   */
-  get onRender() {
-    return this.render.subscribable;
-  }
-  get onStateChanged() {
-    return this.playerState.subscribable;
-  }
-  get onFrameChanged() {
-    return this.frame.subscribable;
-  }
-  get onDurationChanged() {
-    return this.duration.subscribable;
-  }
-  /**
-   * Triggered right after recalculation finishes.
-   *
-   * @remarks
-   * Can be used to provide visual feedback.
-   *
-   * @eventProperty
-   */
-  get onRecalculated() {
-    return this.recalculated.subscribable;
-  }
-  get startFrame() {
-    return Math.min(this.playback.duration, this.status.secondsToFrames(this.startTime));
-  }
-  get endFrame() {
-    return Math.min(this.playback.duration, this.status.secondsToFrames(this.endTime));
-  }
-  get finished() {
-    return this.playback.finished || this.playback.frame >= this.endFrame;
-  }
-  constructor(project, settings = {}, initialState = {}, initialFrame = -1) {
-    var _a, _b;
-    this.project = project;
-    this.settings = settings;
-    this.initialState = initialState;
-    this.initialFrame = initialFrame;
-    this.render = new AsyncEventDispatcher();
-    this.frame = new ValueDispatcher(0);
-    this.duration = new ValueDispatcher(0);
-    this.recalculated = new EventDispatcher();
-    this.lock = new Semaphore();
-    this.startTime = 0;
-    this.endTime = Infinity;
-    this.requestId = null;
-    this.renderTime = 0;
-    this.requestedSeek = -1;
-    this.requestedRender = false;
-    this.requestedRecalculation = true;
-    this.active = false;
-    this.playerState = new ValueDispatcher({
-      loop: true,
-      muted: true,
-      volume: 1,
-      speed: 1,
-      ...initialState,
-      paused: true
-    });
-    this.sharedWebGLContext = new SharedWebGLContext(this.project.logger);
-    this.requestedSeek = initialFrame;
-    this.logger = this.project.logger;
-    this.playback = new PlaybackManager();
-    this.status = new PlaybackStatus(this.playback);
-    this.size = settings.size ?? new Vector2(1920, 1080);
-    this.resolutionScale = settings.resolutionScale ?? 1;
-    this.startTime = ((_a = settings.range) == null ? void 0 : _a[0]) ?? 0;
-    this.endTime = ((_b = settings.range) == null ? void 0 : _b[1]) ?? Infinity;
-    this.playback.fps = settings.fps ?? 60;
-    const scenes = [];
-    for (const description of project.scenes) {
-      const scene = new description.klass({
-        ...description,
-        playback: this.status,
-        logger: this.project.logger,
-        size: this.size,
-        resolutionScale: this.resolutionScale,
-        sharedWebGLContext: this.sharedWebGLContext,
-        experimentalFeatures: project.experimentalFeatures
-      });
-      scene.onReloaded.subscribe(() => this.requestRecalculation());
-      scene.variables.updateSignals(project.variables ?? {});
-      scenes.push(scene);
-    }
-    this.playback.setup(scenes);
-    this.activate();
-  }
-  async configure(settings) {
-    await this.lock.acquire();
-    let frame = this.playback.frame;
-    let recalculate = false;
-    this.startTime = settings.range[0];
-    this.endTime = settings.range[1];
-    const newFps = Math.max(1, settings.fps);
-    if (this.playback.fps !== newFps) {
-      const ratio = newFps / this.playback.fps;
-      this.playback.fps = newFps;
-      frame = Math.floor(frame * ratio);
-      recalculate = true;
-    }
-    if (!settings.size.exactlyEquals(this.size) || settings.resolutionScale !== this.resolutionScale) {
-      this.size = settings.size;
-      this.resolutionScale = settings.resolutionScale;
-      this.playback.reload({
-        size: this.size,
-        resolutionScale: this.resolutionScale
-      });
-    }
-    this.lock.release();
-    if (recalculate) {
-      this.playback.reload();
-      this.frame.current = frame;
-      this.requestRecalculation();
-      this.requestedSeek = frame;
-    }
-  }
-  /**
-   * Whether the given frame is inside the animation range.
-   *
-   * @param frame - The frame to check.
-   */
-  isInRange(frame) {
-    return frame >= 0 && frame <= this.playback.duration;
-  }
-  /**
-   * Whether the given frame is inside the user-defined range.
-   *
-   * @param frame - The frame to check.
-   */
-  isInUserRange(frame) {
-    return frame >= this.startFrame && frame <= this.endFrame;
-  }
-  requestSeek(value) {
-    this.requestedSeek = this.clampRange(value);
-  }
-  requestPreviousFrame() {
-    this.requestedSeek = this.frame.current - this.playback.speed;
-  }
-  requestNextFrame() {
-    this.requestedSeek = this.frame.current + this.playback.speed;
-  }
-  requestReset() {
-    this.requestedSeek = 0;
-  }
-  requestRender() {
-    this.requestedRender = true;
-  }
-  toggleLoop(value = !this.playerState.current.loop) {
-    if (value !== this.playerState.current.loop) {
-      this.playerState.current = {
-        ...this.playerState.current,
-        loop: value
-      };
-    }
-  }
-  togglePlayback(value = this.playerState.current.paused) {
-    if (value === this.playerState.current.paused) {
-      this.playerState.current = {
-        ...this.playerState.current,
-        paused: !value
-      };
-      if (value && !this.playerState.current.loop && this.playback.frame === this.playback.duration) {
-        this.requestReset();
-      }
-    }
-  }
-  toggleAudio(value = this.playerState.current.muted) {
-    if (value === this.playerState.current.muted) {
-      this.playerState.current = {
-        ...this.playerState.current,
-        muted: !value
-      };
-    }
-  }
-  setAudioVolume(value) {
-    const clampedValue = clamp(0, 1, value);
-    if (clampedValue !== this.playerState.current.volume) {
-      this.playerState.current = {
-        ...this.playerState.current,
-        volume: clampedValue
-      };
-    }
-  }
-  addAudioVolume(value) {
-    this.setAudioVolume(this.playerState.current.volume + value);
-  }
-  setSpeed(value) {
-    if (value !== this.playerState.current.speed) {
-      this.playback.speed = value;
-      this.playback.reload();
-      this.playerState.current = {
-        ...this.playerState.current,
-        speed: value
-      };
-      this.requestRecalculation();
-    }
-  }
-  setVariables(variables) {
-    for (const scene of this.playback.onScenesRecalculated.current) {
-      scene.variables.updateSignals(variables);
-    }
-  }
-  /**
-   * Activate the player.
-   *
-   * @remarks
-   * A player needs to be active in order for the update loop to run. Each
-   * player is active by default.
-   */
-  activate() {
-    this.active = true;
-    this.request();
-  }
-  /**
-   * Deactivate the player.
-   *
-   * @remarks
-   * Deactivating the player prevents its update loop from running. This should
-   * be done before disposing the player, to prevent it from running in the
-   * background.
-   *
-   * Just pausing the player does not stop the loop.
-   */
-  deactivate() {
-    this.active = false;
-    this.sharedWebGLContext.dispose();
-    this.playback.currentScene.stopAllMedia();
-    if (this.requestId !== null) {
-      cancelAnimationFrame(this.requestId);
-      this.requestId = null;
-    }
-  }
-  requestRecalculation() {
-    this.requestedRecalculation = true;
-    this.request();
-  }
-  async prepare() {
-    const state = {
-      ...this.playerState.current,
-      seek: this.requestedSeek,
-      render: this.requestedRender
-    };
-    this.requestedSeek = -1;
-    this.requestedRender = false;
-    if (this.requestedRecalculation) {
-      if (state.seek < 0) {
-        state.seek = this.playback.frame;
-      }
-      try {
-        await this.playback.recalculate();
-        this.duration.current = this.playback.frame;
-        this.recalculated.dispatch();
-      } catch (e) {
-        this.requestSeek(state.seek);
-        throw e;
-      } finally {
-        this.requestedRecalculation = false;
-      }
-    }
-    if (!state.loop && this.finished && !state.paused && state.seek < 0 || this.endFrame === this.startFrame) {
-      this.togglePlayback(false);
-      state.paused = true;
-      state.seek = this.endFrame === this.startFrame ? state.seek : this.startFrame;
-    }
-    if (state.loop && (state.seek > this.endFrame || this.finished && !state.paused) && this.startFrame !== this.endTime) {
-      state.seek = this.startFrame;
-    }
-    return state;
-  }
-  async run() {
-    const state = await this.prepare();
-    const previousState = this.playback.state;
-    this.playback.state = state.paused ? PlaybackState.Paused : PlaybackState.Playing;
-    if (state.seek >= 0 || !this.isInUserRange(this.status.frame)) {
-      const seekFrame = state.seek < 0 ? this.status.frame : state.seek;
-      const clampedFrame = this.clampRange(seekFrame);
-      this.logger.profile("seek time");
-      await this.playback.seek(clampedFrame);
-      this.logger.profile("seek time");
-    } else if (state.paused) {
-      if (state.render || state.paused && previousState !== PlaybackState.Paused) {
-        await this.render.dispatch();
-      }
-      this.request();
-      return;
-    } else if (this.status.frame < this.endFrame) {
-      await this.playback.progress();
-    }
-    if (!state.paused && this.playback.currentScene.slides.isWaiting()) {
-      this.togglePlayback(false);
-      state.paused = true;
-    }
-    await this.render.dispatch();
-    this.frame.current = this.playback.frame;
-    this.request();
-  }
-  request() {
-    if (!this.active)
-      return;
-    this.requestId ?? (this.requestId = requestAnimationFrame(async (time) => {
-      this.requestId = null;
-      if (time - this.renderTime >= 1e3 / (this.status.fps + 5)) {
-        this.renderTime = time;
-        await this.lock.acquire();
-        try {
-          await this.run();
-        } catch (e) {
-          this.logger.error(e);
-        }
-        this.lock.release();
-      } else {
-        this.request();
-      }
-    }));
-  }
-  clampRange(frame) {
-    return clamp(this.startFrame, this.endFrame, frame);
-  }
-}
-function getFullPreviewSettings(project) {
-  return {
-    ...project.settings.shared,
-    ...project.settings.preview
-  };
-}
-class Stage {
-  get canvasSize() {
-    return this.size.scale(this.resolutionScale);
-  }
-  constructor() {
-    this.background = null;
-    this.resolutionScale = 1;
-    this.colorSpace = "srgb";
-    this.size = Vector2.zero;
-    this.finalBuffer = document.createElement("canvas");
-    this.currentBuffer = document.createElement("canvas");
-    this.previousBuffer = document.createElement("canvas");
-    const colorSpace = this.colorSpace;
-    this.context = getContext({ colorSpace }, this.finalBuffer);
-    this.currentContext = getContext({ colorSpace }, this.currentBuffer);
-    this.previousContext = getContext({ colorSpace }, this.previousBuffer);
-  }
-  configure({ colorSpace = this.colorSpace, size = this.size, resolutionScale = this.resolutionScale, background = this.background }) {
-    if (colorSpace !== this.colorSpace) {
-      this.colorSpace = colorSpace;
-      this.context = getContext({ colorSpace }, this.finalBuffer);
-      this.currentContext = getContext({ colorSpace }, this.currentBuffer);
-      this.previousContext = getContext({ colorSpace }, this.previousBuffer);
-    }
-    if (!size.exactlyEquals(this.size) || resolutionScale !== this.resolutionScale) {
-      this.resolutionScale = resolutionScale;
-      this.size = size;
-      this.resizeCanvas(this.context);
-      this.resizeCanvas(this.currentContext);
-      this.resizeCanvas(this.previousContext);
-    }
-    this.background = typeof background === "string" ? background : (background == null ? void 0 : background.serialize()) ?? null;
-  }
-  async render(currentScene, previousScene) {
-    const previousOnTop = previousScene ? unwrap(currentScene.previousOnTop) : false;
-    if (previousScene) {
-      await previousScene.render(this.previousContext);
-    }
-    await currentScene.render(this.currentContext);
-    const size = this.canvasSize;
-    this.context.clearRect(0, 0, size.width, size.height);
-    if (this.background) {
-      this.context.save();
-      this.context.fillStyle = this.background;
-      this.context.fillRect(0, 0, size.width, size.height);
-      this.context.restore();
-    }
-    if (previousScene && !previousOnTop) {
-      this.context.drawImage(this.previousBuffer, 0, 0);
-    }
-    this.context.drawImage(this.currentBuffer, 0, 0);
-    if (previousOnTop) {
-      this.context.drawImage(this.previousBuffer, 0, 0);
-    }
-  }
-  resizeCanvas(context) {
-    const size = this.canvasSize;
-    context.canvas.width = size.width;
-    context.canvas.height = size.height;
-  }
-}
-const stylesNew = `
-.overlay {
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0;
-	transition: opacity 0.1s;
-	z-index: 0;
-  }
-  .canvas {
-	width: 100%;
-	display: block;
-	opacity: 1;
-	transition: opacity 0.1s;
-  }
-`;
-const TEMPLATE = `<style>${stylesNew}</style><div class="overlay"></div>`;
-const ID = "twick-player";
-var State;
-(function(State2) {
-  State2["Initial"] = "initial";
-  State2["Loading"] = "loading";
-  State2["Ready"] = "ready";
-  State2["Error"] = "error";
-})(State || (State = {}));
-class TwickPlayer extends HTMLElement {
-  constructor() {
-    super();
-    __publicField(this, "root");
-    __publicField(this, "canvas");
-    __publicField(this, "overlay");
-    __publicField(this, "state", State.Initial);
-    __publicField(this, "project", null);
-    __publicField(this, "player", null);
-    __publicField(this, "defaultSettings");
-    __publicField(this, "abortController", null);
-    __publicField(this, "playing", false);
-    __publicField(this, "stage", new Stage());
-    __publicField(this, "time", 0);
-    __publicField(this, "duration", 0);
-    // in frames
-    __publicField(this, "looping", true);
-    __publicField(this, "volume", 1);
-    __publicField(this, "volumeChangeRequested", true);
-    /**
-     * Triggered by the timeline.
-     */
-    __publicField(this, "handleSeekTo", (event) => {
-      var _a;
-      if (!this.project) {
-        return;
-      }
-      const e = event;
-      this.time = e.detail;
-      (_a = this.player) == null ? void 0 : _a.requestSeek(e.detail * this.player.playback.fps);
-      this.volumeChangeRequested = true;
-    });
-    __publicField(this, "handleVolumeChange", (event) => {
-      var _a;
-      if (!this.project) {
-        return;
-      }
-      const e = event;
-      this.volume = e.detail;
-      (_a = this.player) == null ? void 0 : _a.playback.currentScene.adjustVolume(this.volume);
-    });
-    /**
-     * Triggered by the player.
-     */
-    __publicField(this, "handleFrameChanged", (frame) => {
-      var _a;
-      if (!this.project || !this.player) {
-        return;
-      }
-      this.time = frame / this.player.playback.fps;
-      if (this.volumeChangeRequested || frame === 0) {
-        (_a = this.player) == null ? void 0 : _a.playback.currentScene.adjustVolume(this.volume);
-        this.volumeChangeRequested = false;
-      }
-    });
-    /**
-     * Called on every frame.
-     */
-    __publicField(this, "render", async () => {
-      if (this.player && this.project) {
-        await this.stage.render(this.player.playback.currentScene, this.player.playback.previousScene);
-        this.dispatchEvent(new CustomEvent("timeupdate", { detail: this.time }));
-        const durationInFrames = this.player.playback.duration;
-        if (durationInFrames === this.duration) {
-          return;
-        }
-        this.duration = durationInFrames;
-        const durationInSeconds = durationInFrames / this.player.playback.fps;
-        this.dispatchEvent(new CustomEvent("duration", { detail: durationInSeconds }));
-      }
-    });
-    this.root = this.attachShadow({ mode: "open" });
-    this.root.innerHTML = TEMPLATE;
-    this.overlay = this.root.querySelector(".overlay");
-    this.canvas = this.stage.finalBuffer;
-    this.canvas.classList.add("canvas");
-    this.root.prepend(this.canvas);
-    this.setState(State.Initial);
-  }
-  static get observedAttributes() {
-    return [
-      "playing",
-      "variables",
-      "looping",
-      "fps",
-      "quality",
-      "width",
-      "height",
-      "volume"
-    ];
-  }
-  get fps() {
-    var _a;
-    const attr = this.getAttribute("fps");
-    return attr ? parseFloat(attr) : ((_a = this.defaultSettings) == null ? void 0 : _a.fps) ?? 60;
-  }
-  get quality() {
-    var _a;
-    const attr = this.getAttribute("quality");
-    return attr ? parseFloat(attr) : ((_a = this.defaultSettings) == null ? void 0 : _a.resolutionScale) ?? 1;
-  }
-  get width() {
-    var _a;
-    const attr = this.getAttribute("width");
-    return attr ? parseFloat(attr) : ((_a = this.defaultSettings) == null ? void 0 : _a.size.width) ?? 0;
-  }
-  get height() {
-    var _a;
-    const attr = this.getAttribute("height");
-    return attr ? parseFloat(attr) : ((_a = this.defaultSettings) == null ? void 0 : _a.size.height) ?? 0;
-  }
-  get variables() {
-    var _a;
-    try {
-      const attr = this.getAttribute("variables");
-      return attr ? JSON.parse(attr) : {};
-    } catch {
-      (_a = this.project) == null ? void 0 : _a.logger.warn(`Project variables could not be parsed.`);
-      return {};
-    }
-  }
-  setProject(project) {
-    this.updateProject(project);
-  }
-  setState(state) {
-    this.state = state;
-    this.setPlaying(this.playing);
-  }
-  setPlaying(value) {
-    var _a, _b;
-    if (this.state === State.Ready && value) {
-      (_a = this.player) == null ? void 0 : _a.togglePlayback(true);
-      this.playing = true;
-    } else {
-      (_b = this.player) == null ? void 0 : _b.togglePlayback(false);
-      this.playing = false;
-    }
-  }
-  async updateProject(project) {
-    var _a, _b, _c, _d, _e;
-    const playing = this.playing;
-    this.setState(State.Initial);
-    (_a = this.abortController) == null ? void 0 : _a.abort();
-    this.abortController = new AbortController();
-    this.project = project;
-    console.log(project);
-    this.defaultSettings = getFullPreviewSettings(this.project);
-    const player = new Player(this.project);
-    player.setVariables(this.variables);
-    player.toggleLoop(this.looping);
-    (_b = this.player) == null ? void 0 : _b.onRender.unsubscribe(this.render);
-    (_c = this.player) == null ? void 0 : _c.onFrameChanged.unsubscribe(this.handleFrameChanged);
-    (_d = this.player) == null ? void 0 : _d.togglePlayback(false);
-    (_e = this.player) == null ? void 0 : _e.deactivate();
-    this.player = player;
-    this.updateSettings();
-    this.setState(State.Ready);
-    this.dispatchEvent(new CustomEvent("playerready", { detail: this.player }));
-    this.setPlaying(playing);
-    this.player.onRender.subscribe(this.render);
-    this.player.onFrameChanged.subscribe(this.handleFrameChanged);
-  }
-  attributeChangedCallback(name, _, newValue) {
-    var _a, _b, _c, _d;
-    switch (name) {
-      case "playing":
-        this.setPlaying(newValue === "true");
-        break;
-      case "variables":
-        (_a = this.player) == null ? void 0 : _a.setVariables(this.variables);
-        (_b = this.player) == null ? void 0 : _b.requestSeek(this.player.playback.frame);
-        (_c = this.player) == null ? void 0 : _c.playback.reload();
-        break;
-      case "looping":
-        this.looping = newValue === "true";
-        (_d = this.player) == null ? void 0 : _d.toggleLoop(newValue === "true");
-        break;
-      case "fps":
-      case "quality":
-      case "width":
-      case "height":
-        this.updateSettings();
-        break;
-      case "volume":
-        this.volume = newValue;
-        this.volumeChangeRequested = true;
-    }
-  }
-  /**
-   * Runs when the element is removed from the DOM.
-   */
-  disconnectedCallback() {
-    var _a, _b;
-    (_a = this.player) == null ? void 0 : _a.deactivate();
-    (_b = this.player) == null ? void 0 : _b.onRender.unsubscribe(this.render);
-    this.removeEventListener("seekto", this.handleSeekTo);
-    this.removeEventListener("volumechange", this.handleVolumeChange);
-  }
-  /**
-   * Runs when the element is added to the DOM.
-   */
-  connectedCallback() {
-    var _a, _b;
-    (_a = this.player) == null ? void 0 : _a.activate();
-    (_b = this.player) == null ? void 0 : _b.onRender.subscribe(this.render);
-    this.addEventListener("seekto", this.handleSeekTo);
-    this.addEventListener("volumechange", this.handleVolumeChange);
-  }
-  updateSettings() {
-    var _a;
-    if (!this.defaultSettings) {
-      return;
-    }
-    const settings = {
-      ...this.defaultSettings,
-      size: new Vector2(this.width, this.height),
-      resolutionScale: this.quality,
-      fps: this.fps
-    };
-    this.stage.configure(settings);
-    (_a = this.player) == null ? void 0 : _a.configure(settings);
-  }
-}
-if (!customElements.get(ID)) {
-  customElements.define(ID, TwickPlayer);
-}
-//# sourceMappingURL=internal-CHEF557f.js.map