@revideo/2d 0.2.1 → 0.2.2

package/lib/components/Grid.d.ts

@@ -1,23 +1,18 @@
-import {
-  PossibleVector2,
-  SignalValue,
-  SimpleSignal,
-  Vector2Signal,
-} from '@revideo/core';
-import {Shape, ShapeProps} from './Shape';
+import { PossibleVector2, SignalValue, SimpleSignal, Vector2Signal } from '@revideo/core';
+import { Shape, ShapeProps } from './Shape';
 export interface GridProps extends ShapeProps {
-  /**
-   * {@inheritDoc Grid.spacing}
-   */
-  spacing?: SignalValue<PossibleVector2>;
-  /**
-   * {@inheritDoc Grid.start}
-   */
-  start?: SignalValue<number>;
-  /**
-   * {@inheritDoc Grid.end}
-   */
-  end?: SignalValue<number>;
+    /**
+     * {@inheritDoc Grid.spacing}
+     */
+    spacing?: SignalValue<PossibleVector2>;
+    /**
+     * {@inheritDoc Grid.start}
+     */
+    start?: SignalValue<number>;
+    /**
+     * {@inheritDoc Grid.end}
+     */
+    end?: SignalValue<number>;
 }
 /**
  * A node for drawing a two-dimensional grid.
@@ -49,32 +44,32 @@ export interface GridProps extends ShapeProps {
  * ```
  */
 export declare class Grid extends Shape {
-  /**
-   * The spacing between the grid lines.
-   */
-  readonly spacing: Vector2Signal<this>;
-  /**
-   * The percentage that should be clipped from the beginning of each grid line.
-   *
-   * @remarks
-   * The portion of each grid line that comes before the given percentage will
-   * be made invisible.
-   *
-   * This property is useful for animating the grid appearing on-screen.
-   */
-  readonly start: SimpleSignal<number, this>;
-  /**
-   * The percentage that should be clipped from the end of each grid line.
-   *
-   * @remarks
-   * The portion of each grid line that comes after the given percentage will
-   * be made invisible.
-   *
-   * This property is useful for animating the grid appearing on-screen.
-   */
-  readonly end: SimpleSignal<number, this>;
-  constructor(props: GridProps);
-  protected drawShape(context: CanvasRenderingContext2D): void;
-  private mapPoints;
+    /**
+     * The spacing between the grid lines.
+     */
+    readonly spacing: Vector2Signal<this>;
+    /**
+     * The percentage that should be clipped from the beginning of each grid line.
+     *
+     * @remarks
+     * The portion of each grid line that comes before the given percentage will
+     * be made invisible.
+     *
+     * This property is useful for animating the grid appearing on-screen.
+     */
+    readonly start: SimpleSignal<number, this>;
+    /**
+     * The percentage that should be clipped from the end of each grid line.
+     *
+     * @remarks
+     * The portion of each grid line that comes after the given percentage will
+     * be made invisible.
+     *
+     * This property is useful for animating the grid appearing on-screen.
+     */
+    readonly end: SimpleSignal<number, this>;
+    constructor(props: GridProps);
+    protected drawShape(context: CanvasRenderingContext2D): void;
+    private mapPoints;
 }
-//# sourceMappingURL=Grid.d.ts.map
+//# sourceMappingURL=Grid.d.ts.map

package/lib/components/Grid.js

@@ -1,25 +1,12 @@
-var __decorate =
-  (this && this.__decorate) ||
-  function (decorators, target, key, desc) {
-    var c = arguments.length,
-      r =
-        c < 3
-          ? target
-          : desc === null
-            ? (desc = Object.getOwnPropertyDescriptor(target, key))
-            : desc,
-      d;
-    if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
-      r = Reflect.decorate(decorators, target, key, desc);
-    else
-      for (var i = decorators.length - 1; i >= 0; i--)
-        if ((d = decorators[i]))
-          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-  };
-import {map} from '@revideo/core';
-import {initial, nodeName, signal, vector2Signal} from '../decorators';
-import {Shape} from './Shape';
+};
+import { map, } from '@revideo/core';
+import { initial, nodeName, signal, vector2Signal } from '../decorators';
+import { Shape } from './Shape';
 /**
  * A node for drawing a two-dimensional grid.
  *
@@ -50,49 +37,55 @@ import {Shape} from './Shape';
  * ```
  */
 let Grid = class Grid extends Shape {
-  constructor(props) {
-    super(props);
-  }
-  drawShape(context) {
-    context.save();
-    this.applyStyle(context);
-    this.drawRipple(context);
-    const spacing = this.spacing();
-    const size = this.computedSize().scale(0.5);
-    const steps = size.div(spacing).floored;
-    for (let x = -steps.x; x <= steps.x; x++) {
-      const [from, to] = this.mapPoints(-size.height, size.height);
-      context.beginPath();
-      context.moveTo(spacing.x * x, from);
-      context.lineTo(spacing.x * x, to);
-      context.stroke();
+    constructor(props) {
+        super(props);
     }
-    for (let y = -steps.y; y <= steps.y; y++) {
-      const [from, to] = this.mapPoints(-size.width, size.width);
-      context.beginPath();
-      context.moveTo(from, spacing.y * y);
-      context.lineTo(to, spacing.y * y);
-      context.stroke();
+    drawShape(context) {
+        context.save();
+        this.applyStyle(context);
+        this.drawRipple(context);
+        const spacing = this.spacing();
+        const size = this.computedSize().scale(0.5);
+        const steps = size.div(spacing).floored;
+        for (let x = -steps.x; x <= steps.x; x++) {
+            const [from, to] = this.mapPoints(-size.height, size.height);
+            context.beginPath();
+            context.moveTo(spacing.x * x, from);
+            context.lineTo(spacing.x * x, to);
+            context.stroke();
+        }
+        for (let y = -steps.y; y <= steps.y; y++) {
+            const [from, to] = this.mapPoints(-size.width, size.width);
+            context.beginPath();
+            context.moveTo(from, spacing.y * y);
+            context.lineTo(to, spacing.y * y);
+            context.stroke();
+        }
+        context.restore();
     }
-    context.restore();
-  }
-  mapPoints(start, end) {
-    let from = map(start, end, this.start());
-    let to = map(start, end, this.end());
-    if (to < from) {
-      [from, to] = [to, from];
+    mapPoints(start, end) {
+        let from = map(start, end, this.start());
+        let to = map(start, end, this.end());
+        if (to < from) {
+            [from, to] = [to, from];
+        }
+        return [from, to];
     }
-    return [from, to];
-  }
 };
-__decorate(
-  [initial(80), vector2Signal('spacing')],
-  Grid.prototype,
-  'spacing',
-  void 0,
-);
-__decorate([initial(0), signal()], Grid.prototype, 'start', void 0);
-__decorate([initial(1), signal()], Grid.prototype, 'end', void 0);
-Grid = __decorate([nodeName('Grid')], Grid);
-export {Grid};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiR3JpZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9HcmlkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFLTCxHQUFHLEdBQ0osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBaUIxQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCRztBQUVJLElBQU0sSUFBSSxHQUFWLE1BQU0sSUFBSyxTQUFRLEtBQUs7SUFrQzdCLFlBQW1CLEtBQWdCO1FBQ2pDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNmLENBQUM7SUFFa0IsU0FBUyxDQUFDLE9BQWlDO1FBQzVELE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNmLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUV6QixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDL0IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM1QyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLE9BQU8sQ0FBQztRQUV4QyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBRTdELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRTNELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxPQUFPLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLFNBQVMsQ0FBQyxLQUFhLEVBQUUsR0FBVztRQUMxQyxJQUFJLElBQUksR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUN6QyxJQUFJLEVBQUUsR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztRQUVyQyxJQUFJLEVBQUUsR0FBRyxJQUFJLEVBQUUsQ0FBQztZQUNkLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQzFCLENBQUM7UUFFRCxPQUFPLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ3BCLENBQUM7Q0FDRixDQUFBO0FBeEV5QjtJQUZ2QixPQUFPLENBQUMsRUFBRSxDQUFDO0lBQ1gsYUFBYSxDQUFDLFNBQVMsQ0FBQztxQ0FDNEI7QUFhN0I7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTttQ0FDaUQ7QUFhbEM7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTtpQ0FDK0M7QUFoQzdDLElBQUk7SUFEaEIsUUFBUSxDQUFDLE1BQU0sQ0FBQztHQUNKLElBQUksQ0E4RWhCIn0=
+__decorate([
+    initial(80),
+    vector2Signal('spacing')
+], Grid.prototype, "spacing", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Grid.prototype, "start", void 0);
+__decorate([
+    initial(1),
+    signal()
+], Grid.prototype, "end", void 0);
+Grid = __decorate([
+    nodeName('Grid')
+], Grid);
+export { Grid };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiR3JpZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9HcmlkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFLTCxHQUFHLEdBQ0osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBaUIxQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCRztBQUVJLElBQU0sSUFBSSxHQUFWLE1BQU0sSUFBSyxTQUFRLEtBQUs7SUFrQzdCLFlBQW1CLEtBQWdCO1FBQ2pDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNmLENBQUM7SUFFa0IsU0FBUyxDQUFDLE9BQWlDO1FBQzVELE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNmLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUV6QixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDL0IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM1QyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLE9BQU8sQ0FBQztRQUV4QyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBRTdELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRTNELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxPQUFPLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLFNBQVMsQ0FBQyxLQUFhLEVBQUUsR0FBVztRQUMxQyxJQUFJLElBQUksR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUN6QyxJQUFJLEVBQUUsR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztRQUVyQyxJQUFJLEVBQUUsR0FBRyxJQUFJLEVBQUUsQ0FBQztZQUNkLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQzFCLENBQUM7UUFFRCxPQUFPLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ3BCLENBQUM7Q0FDRixDQUFBO0FBeEV5QjtJQUZ2QixPQUFPLENBQUMsRUFBRSxDQUFDO0lBQ1gsYUFBYSxDQUFDLFNBQVMsQ0FBQztxQ0FDNEI7QUFhN0I7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTttQ0FDaUQ7QUFhbEM7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTtpQ0FDK0M7QUFoQzdDLElBQUk7SUFEaEIsUUFBUSxDQUFDLE1BQU0sQ0FBQztHQUNKLElBQUksQ0E4RWhCIn0=

package/lib/components/Icon.d.ts

@@ -1,63 +1,58 @@
-import {
-  ColorSignal,
-  PossibleColor,
-  SignalValue,
-  SimpleSignal,
-} from '@revideo/core';
-import {Img, ImgProps} from './Img';
+import { ColorSignal, PossibleColor, SignalValue, SimpleSignal } from '@revideo/core';
+import { Img, ImgProps } from './Img';
 export interface IconProps extends ImgProps {
-  /**
-   * {@inheritDoc Icon.icon}
-   */
-  icon: SignalValue<string>;
-  /**
-   * {@inheritDoc Icon.color}
-   */
-  color?: SignalValue<PossibleColor>;
+    /**
+     * {@inheritDoc Icon.icon}
+     */
+    icon: SignalValue<string>;
+    /**
+     * {@inheritDoc Icon.color}
+     */
+    color?: SignalValue<PossibleColor>;
 }
 /**
  * An Icon Component that provides easy access to over 150k icons.
  * See https://icones.js.org/collection/all for all available Icons.
  */
 export declare class Icon extends Img {
-  /**
-   * The identifier of the icon.
-   *
-   * @remarks
-   * You can find identifiers on [Icônes](https://icones.js.org).
-   * They can look like this:
-   * * `mdi:language-typescript`
-   * * `ph:anchor-simple-bold`
-   * * `ph:activity-bold`
-   */
-  icon: SimpleSignal<string, this>;
-  /**
-   * The color of the icon
-   *
-   * @remarks
-   * Provide the color in one of the following formats:
-   * * named color like `red`, `darkgray`, …
-   * * hexadecimal string with # like `#bada55`, `#141414`
-   *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
-   *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
-   *
-   * @defaultValue 'white'
-   */
-  color: ColorSignal<this>;
-  constructor(props: IconProps);
-  /**
-   * Create the URL that will be used as the Image source
-   * @returns Address to Iconify API for the requested Icon.
-   */
-  protected svgUrl(): string;
-  /**
-   * overrides `Image.src` getter
-   */
-  protected getSrc(): string;
-  /**
-   * overrides `Image.src` setter to warn the user that the value
-   * is not used
-   */
-  protected setSrc(src: string | null): void;
+    /**
+     * The identifier of the icon.
+     *
+     * @remarks
+     * You can find identifiers on [Icônes](https://icones.js.org).
+     * They can look like this:
+     * * `mdi:language-typescript`
+     * * `ph:anchor-simple-bold`
+     * * `ph:activity-bold`
+     */
+    icon: SimpleSignal<string, this>;
+    /**
+     * The color of the icon
+     *
+     * @remarks
+     * Provide the color in one of the following formats:
+     * * named color like `red`, `darkgray`, …
+     * * hexadecimal string with # like `#bada55`, `#141414`
+     *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
+     *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
+     *
+     * @defaultValue 'white'
+     */
+    color: ColorSignal<this>;
+    constructor(props: IconProps);
+    /**
+     * Create the URL that will be used as the Image source
+     * @returns Address to Iconify API for the requested Icon.
+     */
+    protected svgUrl(): string;
+    /**
+     * overrides `Image.src` getter
+     */
+    protected getSrc(): string;
+    /**
+     * overrides `Image.src` setter to warn the user that the value
+     * is not used
+     */
+    protected setSrc(src: string | null): void;
 }
-//# sourceMappingURL=Icon.d.ts.map
+//# sourceMappingURL=Icon.d.ts.map

package/lib/components/Icon.js

@@ -1,66 +1,58 @@
-var __decorate =
-  (this && this.__decorate) ||
-  function (decorators, target, key, desc) {
-    var c = arguments.length,
-      r =
-        c < 3
-          ? target
-          : desc === null
-            ? (desc = Object.getOwnPropertyDescriptor(target, key))
-            : desc,
-      d;
-    if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
-      r = Reflect.decorate(decorators, target, key, desc);
-    else
-      for (var i = decorators.length - 1; i >= 0; i--)
-        if ((d = decorators[i]))
-          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-  };
-import {useLogger} from '@revideo/core';
-import {colorSignal, computed, initial, signal} from '../decorators';
-import {Img} from './Img';
+};
+import { useLogger, } from '@revideo/core';
+import { colorSignal, computed, initial, signal } from '../decorators';
+import { Img } from './Img';
 /**
  * An Icon Component that provides easy access to over 150k icons.
  * See https://icones.js.org/collection/all for all available Icons.
  */
 export class Icon extends Img {
-  constructor(props) {
-    super({
-      ...props,
-      src: null,
-    });
-  }
-  /**
-   * Create the URL that will be used as the Image source
-   * @returns Address to Iconify API for the requested Icon.
-   */
-  svgUrl() {
-    const iconPathSegment = this.icon().replace(':', '/');
-    const encodedColorValue = encodeURIComponent(this.color().hex());
-    // Iconify API is documented here: https://docs.iconify.design/api/svg.html#color
-    return `https://api.iconify.design/${iconPathSegment}.svg?color=${encodedColorValue}`;
-  }
-  /**
-   * overrides `Image.src` getter
-   */
-  getSrc() {
-    return this.svgUrl();
-  }
-  /**
-   * overrides `Image.src` setter to warn the user that the value
-   * is not used
-   */
-  setSrc(src) {
-    if (src === null) {
-      return;
+    constructor(props) {
+        super({
+            ...props,
+            src: null,
+        });
+    }
+    /**
+     * Create the URL that will be used as the Image source
+     * @returns Address to Iconify API for the requested Icon.
+     */
+    svgUrl() {
+        const iconPathSegment = this.icon().replace(':', '/');
+        const encodedColorValue = encodeURIComponent(this.color().hex());
+        // Iconify API is documented here: https://docs.iconify.design/api/svg.html#color
+        return `https://api.iconify.design/${iconPathSegment}.svg?color=${encodedColorValue}`;
+    }
+    /**
+     * overrides `Image.src` getter
+     */
+    getSrc() {
+        return this.svgUrl();
+    }
+    /**
+     * overrides `Image.src` setter to warn the user that the value
+     * is not used
+     */
+    setSrc(src) {
+        if (src === null) {
+            return;
+        }
+        useLogger().warn("The Icon Component does not accept setting the `src`. If you need access to `src`, use '<Img/>` instead.");
     }
-    useLogger().warn(
-      "The Icon Component does not accept setting the `src`. If you need access to `src`, use '<Img/>` instead.",
-    );
-  }
 }
-__decorate([signal()], Icon.prototype, 'icon', void 0);
-__decorate([initial('white'), colorSignal()], Icon.prototype, 'color', void 0);
-__decorate([computed()], Icon.prototype, 'svgUrl', null);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9JY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFLTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFdBQVcsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNyRSxPQUFPLEVBQUMsR0FBRyxFQUFXLE1BQU0sT0FBTyxDQUFDO0FBY3BDOzs7R0FHRztBQUNILE1BQU0sT0FBTyxJQUFLLFNBQVEsR0FBRztJQThCM0IsWUFBbUIsS0FBZ0I7UUFDakMsS0FBSyxDQUFDO1lBQ0osR0FBRyxLQUFLO1lBQ1IsR0FBRyxFQUFFLElBQUk7U0FDVixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQ7OztPQUdHO0lBRU8sTUFBTTtRQUNkLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ3RELE1BQU0saUJBQWlCLEdBQUcsa0JBQWtCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFDakUsaUZBQWlGO1FBQ2pGLE9BQU8sOEJBQThCLGVBQWUsY0FBYyxpQkFBaUIsRUFBRSxDQUFDO0lBQ3hGLENBQUM7SUFFRDs7T0FFRztJQUNPLE1BQU07UUFDZCxPQUFPLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQ7OztPQUdHO0lBQ08sTUFBTSxDQUFDLEdBQWtCO1FBQ2pDLElBQUksR0FBRyxLQUFLLElBQUksRUFBRSxDQUFDO1lBQ2pCLE9BQU87UUFDVCxDQUFDO1FBQ0QsU0FBUyxFQUFFLENBQUMsSUFBSSxDQUNkLDBHQUEwRyxDQUMzRyxDQUFDO0lBQ0osQ0FBQztDQUNGO0FBeERnQjtJQURkLE1BQU0sRUFBRTtrQ0FDdUM7QUFnQmpDO0lBRmQsT0FBTyxDQUFDLE9BQU8sQ0FBQztJQUNoQixXQUFXLEVBQUU7bUNBQzBCO0FBYzlCO0lBRFQsUUFBUSxFQUFFO2tDQU1WIn0=
+__decorate([
+    signal()
+], Icon.prototype, "icon", void 0);
+__decorate([
+    initial('white'),
+    colorSignal()
+], Icon.prototype, "color", void 0);
+__decorate([
+    computed()
+], Icon.prototype, "svgUrl", null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9JY29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFLTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFdBQVcsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNyRSxPQUFPLEVBQUMsR0FBRyxFQUFXLE1BQU0sT0FBTyxDQUFDO0FBY3BDOzs7R0FHRztBQUNILE1BQU0sT0FBTyxJQUFLLFNBQVEsR0FBRztJQThCM0IsWUFBbUIsS0FBZ0I7UUFDakMsS0FBSyxDQUFDO1lBQ0osR0FBRyxLQUFLO1lBQ1IsR0FBRyxFQUFFLElBQUk7U0FDVixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQ7OztPQUdHO0lBRU8sTUFBTTtRQUNkLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ3RELE1BQU0saUJBQWlCLEdBQUcsa0JBQWtCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFDakUsaUZBQWlGO1FBQ2pGLE9BQU8sOEJBQThCLGVBQWUsY0FBYyxpQkFBaUIsRUFBRSxDQUFDO0lBQ3hGLENBQUM7SUFFRDs7T0FFRztJQUNPLE1BQU07UUFDZCxPQUFPLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQ7OztPQUdHO0lBQ08sTUFBTSxDQUFDLEdBQWtCO1FBQ2pDLElBQUksR0FBRyxLQUFLLElBQUksRUFBRSxDQUFDO1lBQ2pCLE9BQU87UUFDVCxDQUFDO1FBQ0QsU0FBUyxFQUFFLENBQUMsSUFBSSxDQUNkLDBHQUEwRyxDQUMzRyxDQUFDO0lBQ0osQ0FBQztDQUNGO0FBeERnQjtJQURkLE1BQU0sRUFBRTtrQ0FDdUM7QUFnQmpDO0lBRmQsT0FBTyxDQUFDLE9BQU8sQ0FBQztJQUNoQixXQUFXLEVBQUU7bUNBQzBCO0FBYzlCO0lBRFQsUUFBUSxFQUFFO2tDQU1WIn0=

package/lib/components/Img.d.ts

@@ -1,26 +1,19 @@
-import {
-  Color,
-  PossibleVector2,
-  SerializedVector2,
-  SignalValue,
-  SimpleSignal,
-  Vector2,
-} from '@revideo/core';
-import {DesiredLength} from '../partials';
-import {Rect, RectProps} from './Rect';
+import { Color, PossibleVector2, SerializedVector2, SignalValue, SimpleSignal, Vector2 } from '@revideo/core';
+import { DesiredLength } from '../partials';
+import { Rect, RectProps } from './Rect';
 export interface ImgProps extends RectProps {
-  /**
-   * {@inheritDoc Img.src}
-   */
-  src?: SignalValue<string | null>;
-  /**
-   * {@inheritDoc Img.alpha}
-   */
-  alpha?: SignalValue<number>;
-  /**
-   * {@inheritDoc Img.smoothing}
-   */
-  smoothing?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Img.src}
+     */
+    src?: SignalValue<string | null>;
+    /**
+     * {@inheritDoc Img.alpha}
+     */
+    alpha?: SignalValue<number>;
+    /**
+     * {@inheritDoc Img.smoothing}
+     */
+    smoothing?: SignalValue<boolean>;
 }
 /**
  * A node for displaying images.
@@ -56,68 +49,68 @@ export interface ImgProps extends RectProps {
  * ```
  */
 export declare class Img extends Rect {
-  private static pool;
-  /**
-   * The source of this image.
-   *
-   * @example
-   * Using a local image:
-   * ```tsx
-   * import image from './example.png';
-   * // ...
-   * view.add(<Img src={image} />)
-   * ```
-   * Loading an image from the internet:
-   * ```tsx
-   * view.add(<Img src="https://example.com/image.png" />)
-   * ```
-   */
-  readonly src: SimpleSignal<string, this>;
-  /**
-   * The alpha value of this image.
-   *
-   * @remarks
-   * Unlike opacity, the alpha value affects only the image itself, leaving the
-   * fill, stroke, and children intact.
-   */
-  readonly alpha: SimpleSignal<number, this>;
-  /**
-   * Whether the image should be smoothed.
-   *
-   * @remarks
-   * When disabled, the image will be scaled using the nearest neighbor
-   * interpolation with no smoothing. The resulting image will appear pixelated.
-   *
-   * @defaultValue true
-   */
-  readonly smoothing: SimpleSignal<boolean, this>;
-  constructor(props: ImgProps);
-  protected desiredSize(): SerializedVector2<DesiredLength>;
-  protected image(): HTMLImageElement;
-  protected imageCanvas(): CanvasRenderingContext2D;
-  protected filledImageCanvas(): CanvasRenderingContext2D;
-  protected draw(context: CanvasRenderingContext2D): void;
-  protected applyFlex(): void;
-  /**
-   * Get color of the image at the given position.
-   *
-   * @param position - The position in local space at which to sample the color.
-   */
-  getColorAtPoint(position: PossibleVector2): Color;
-  /**
-   * The natural size of this image.
-   *
-   * @remarks
-   * The natural size is the size of the source image unaffected by the size
-   * and scale properties.
-   */
-  naturalSize(): Vector2;
-  /**
-   * Get color of the image at the given pixel.
-   *
-   * @param position - The pixel's position.
-   */
-  getPixelColor(position: PossibleVector2): Color;
-  protected collectAsyncResources(): void;
+    private static pool;
+    /**
+     * The source of this image.
+     *
+     * @example
+     * Using a local image:
+     * ```tsx
+     * import image from './example.png';
+     * // ...
+     * view.add(<Img src={image} />)
+     * ```
+     * Loading an image from the internet:
+     * ```tsx
+     * view.add(<Img src="https://example.com/image.png" />)
+     * ```
+     */
+    readonly src: SimpleSignal<string, this>;
+    /**
+     * The alpha value of this image.
+     *
+     * @remarks
+     * Unlike opacity, the alpha value affects only the image itself, leaving the
+     * fill, stroke, and children intact.
+     */
+    readonly alpha: SimpleSignal<number, this>;
+    /**
+     * Whether the image should be smoothed.
+     *
+     * @remarks
+     * When disabled, the image will be scaled using the nearest neighbor
+     * interpolation with no smoothing. The resulting image will appear pixelated.
+     *
+     * @defaultValue true
+     */
+    readonly smoothing: SimpleSignal<boolean, this>;
+    constructor(props: ImgProps);
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected image(): HTMLImageElement;
+    protected imageCanvas(): CanvasRenderingContext2D;
+    protected filledImageCanvas(): CanvasRenderingContext2D;
+    protected draw(context: CanvasRenderingContext2D): void;
+    protected applyFlex(): void;
+    /**
+     * Get color of the image at the given position.
+     *
+     * @param position - The position in local space at which to sample the color.
+     */
+    getColorAtPoint(position: PossibleVector2): Color;
+    /**
+     * The natural size of this image.
+     *
+     * @remarks
+     * The natural size is the size of the source image unaffected by the size
+     * and scale properties.
+     */
+    naturalSize(): Vector2;
+    /**
+     * Get color of the image at the given pixel.
+     *
+     * @param position - The pixel's position.
+     */
+    getPixelColor(position: PossibleVector2): Color;
+    protected collectAsyncResources(): void;
 }
-//# sourceMappingURL=Img.d.ts.map
+//# sourceMappingURL=Img.d.ts.map