dough-js - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/cjs/dough-all-purpose-flour_3.cjs.entry.js

@@ -5,400 +5,401 @@ 'use strict';
 
-const index = require('./index-d3b7f44a.js');
+const index = require('./index-f24fc57a.js');
 
 function deg2rad(deg) {
-  return deg * (Math.PI / 180);
+    return deg * (Math.PI / 180);
 }
 class Vec2 {
-  constructor(x, y) {
-    this._x = x;
-    this._y = y;
-  }
-  get x() {
-    return this._x;
-  }
-  get y() {
-    return this._y;
-  }
-  static zero() {
-    return new Vec2(0, 0);
-  }
-  get length() {
-    return Math.sqrt(this.x ** 2 + this.y ** 2);
-  }
-  static signedAngle(a, b) {
-    return Math.atan2(b.y, b.x) - Math.atan2(a.y, a.x);
-  }
-  static fullCircleAngle(target, source) {
-    const a = source !== null && source !== void 0 ? source : new Vec2(1, 0);
-    const b = target;
-    const rawAngle = Vec2.signedAngle(a, b);
-    if (rawAngle < 0.0) {
-      return 2 * Math.PI + rawAngle;
+    constructor(x, y) {
+        this._x = x;
+        this._y = y;
     }
-    else {
-      return rawAngle;
+    get x() {
+        return this._x;
     }
-  }
+    get y() {
+        return this._y;
+    }
+    static zero() {
+        return new Vec2(0, 0);
+    }
+    get length() {
+        return Math.sqrt(this.x ** 2 + this.y ** 2);
+    }
+    static signedAngle(a, b) {
+        return Math.atan2(b.y, b.x) - Math.atan2(a.y, a.x);
+    }
+    static fullCircleAngle(target, source) {
+        const a = source !== null && source !== void 0 ? source : new Vec2(1, 0);
+        const b = target;
+        const rawAngle = Vec2.signedAngle(a, b);
+        if (rawAngle < 0.0) {
+            return 2 * Math.PI + rawAngle;
+        }
+        else {
+            return rawAngle;
+        }
+    }
 }
 class Matrix4 {
-  constructor(values) {
-    this.elements = new Array(16);
-    for (let row = 0; row < 4; ++row) {
-      for (let col = 0; col < 4; ++col) {
-        this.set(row, col, values[row][col]);
-      }
+    constructor(values) {
+        this.elements = new Array(16);
+        for (let row = 0; row < 4; ++row) {
+            for (let col = 0; col < 4; ++col) {
+                this.set(row, col, values[row][col]);
+            }
+        }
     }
-  }
-  static zero() {
-    return new Matrix4([
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-    ]);
-  }
-  static identity() {
-    return new Matrix4([
-      [1, 0, 0, 0],
-      [0, 1, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 0, 1],
-    ]);
-  }
-  static skew(alphaRadians, betaRadians) {
-    const a = Math.tan(alphaRadians);
-    const b = Math.tan(betaRadians);
-    return new Matrix4([
-      [1, a, 0, 0],
-      [b, 1, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 1, 1],
-    ]);
-  }
-  static scale(x, y, z) {
-    return new Matrix4([
-      [x, 0, 0, 0],
-      [0, y, 0, 0],
-      [0, 0, z, 0],
-      [0, 0, 1, 1],
-    ]);
-  }
-  static translate(x, y, z) {
-    return new Matrix4([
-      [1, 0, 0, x],
-      [0, 1, 0, y],
-      [0, 0, 1, z],
-      [0, 0, 1, 1],
-    ]);
-  }
-  static translateVec2(vec) {
-    return Matrix4.translate(vec.x, vec.y, 0);
-  }
-  static rotateZ(radians) {
-    const cos = Math.cos(radians);
-    const sin = Math.sin(radians);
-    return new Matrix4([
-      [cos, -sin, 0, 0],
-      [sin, cos, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 1, 1],
-    ]);
-  }
-  get(row, col) {
-    if (row < 0 || row > 3 || col < 0 || col > 3) {
-      throw new Error('Matrix4 indices are out of range');
+    static zero() {
+        return new Matrix4([
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+        ]);
     }
-    return this.elements[col * 4 + row];
-  }
-  set(row, col, value) {
-    if (row < 0 || row > 3 || col < 0 || col > 3) {
-      throw new Error('Matrix4 indices are out of range');
+    static identity() {
+        return new Matrix4([
+            [1, 0, 0, 0],
+            [0, 1, 0, 0],
+            [0, 0, 1, 0],
+            [0, 0, 0, 1],
+        ]);
     }
-    this.elements[col * 4 + row] = value;
-  }
-  multiply(other) {
-    const result = Matrix4.zero();
-    for (let row = 0; row < 4; ++row) {
-      for (let col = 0; col < 4; ++col) {
-        let sum = 0;
-        for (let k = 0; k < 4; ++k) {
-          sum += this.get(row, k) * other.get(k, col);
+    static skew(alphaRadians, betaRadians) {
+        const a = Math.tan(alphaRadians);
+        const b = Math.tan(betaRadians);
+        return new Matrix4([
+            [1, a, 0, 0],
+            [b, 1, 0, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 1],
+        ]);
+    }
+    static scale(x, y, z) {
+        return new Matrix4([
+            [x, 0, 0, 0],
+            [0, y, 0, 0],
+            [0, 0, z, 0],
+            [0, 0, 1, 1],
+        ]);
+    }
+    static translate(x, y, z) {
+        return new Matrix4([
+            [1, 0, 0, x],
+            [0, 1, 0, y],
+            [0, 0, 1, z],
+            [0, 0, 1, 1],
+        ]);
+    }
+    static translateVec2(vec) {
+        return Matrix4.translate(vec.x, vec.y, 0);
+    }
+    static rotateZ(radians) {
+        const cos = Math.cos(radians);
+        const sin = Math.sin(radians);
+        return new Matrix4([
+            [cos, -sin, 0, 0],
+            [sin, cos, 0, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 1],
+        ]);
+    }
+    get(row, col) {
+        if (row < 0 || row > 3 || col < 0 || col > 3) {
+            throw new Error('Matrix4 indices are out of range');
         }
-        result.set(row, col, sum);
-      }
+        return this.elements[col * 4 + row];
     }
-    return result;
-  }
-  toCssMatrix() {
-    return `matrix3d(${this.elements.join(',')})`;
-  }
+    set(row, col, value) {
+        if (row < 0 || row > 3 || col < 0 || col > 3) {
+            throw new Error('Matrix4 indices are out of range');
+        }
+        this.elements[col * 4 + row] = value;
+    }
+    multiply(other) {
+        const result = Matrix4.zero();
+        for (let row = 0; row < 4; ++row) {
+            for (let col = 0; col < 4; ++col) {
+                let sum = 0;
+                for (let k = 0; k < 4; ++k) {
+                    sum += this.get(row, k) * other.get(k, col);
+                }
+                result.set(row, col, sum);
+            }
+        }
+        return result;
+    }
+    toCssMatrix() {
+        return `matrix3d(${this.elements.join(',')})`;
+    }
 }
 
-const doughAllPurposeFlourCss = ":host{display:block;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}";
+const doughAllPurposeFlourScss = ":host{display:block;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}";
+const DoughAllPurposeFlourStyle0 = doughAllPurposeFlourScss;
 
 const DoughAllPurposeFlour = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.matrix = Matrix4.identity();
-    this.smoothDeltaX = 0;
-    this.smoothDeltaY = 0;
-    this.active = false;
-    this.adhesion = 4;
-    this.viscosity = 4;
-    this.originX = 0;
-    this.originY = 0;
-    this.targetX = 0;
-    this.targetY = 0;
-  }
-  activeChanged() {
-    clearInterval(this.smoothDeltaYInterval);
-    clearInterval(this.smoothDeltaXInterval);
-    if (!this.active) {
-      this.smoothDeltaXChange();
-      this.smoothDeltaYChange();
-    }
-  }
-  originXChanged() {
-    clearInterval(this.smoothDeltaXInterval);
-    if (!this.active)
-      this.smoothDeltaXChange();
-    else
-      this.updatePosition();
-  }
-  originYChanged() {
-    clearInterval(this.smoothDeltaYInterval);
-    if (!this.active)
-      this.smoothDeltaYChange();
-    else
-      this.updatePosition();
-  }
-  targetXChanged() {
-    clearInterval(this.smoothDeltaXInterval);
-    if (!this.active)
-      this.smoothDeltaXChange();
-    else
-      this.updatePosition();
-  }
-  targetYChanged() {
-    clearInterval(this.smoothDeltaYInterval);
-    if (!this.active)
-      this.smoothDeltaYChange();
-    else
-      this.updatePosition();
-  }
-  smoothDeltaXChange() {
-    this.smoothDeltaX = this.targetX - this.originX;
-    // exponential decay of delta as a function of viscosity
-    this.smoothDeltaXInterval = setInterval(() => {
-      this.smoothDeltaX = this.smoothDeltaX * (1 - 1 / this.viscosity);
-      console.log(this.smoothDeltaX);
-      if (Math.abs(this.smoothDeltaX) < 0.01) {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.matrix = Matrix4.identity();
         this.smoothDeltaX = 0;
-        clearInterval(this.smoothDeltaXInterval);
-      }
-      this.updatePosition();
-    }, 1000 / 60);
-  }
-  smoothDeltaYChange() {
-    this.smoothDeltaY = this.targetY - this.originY;
-    this.smoothDeltaYInterval = setInterval(() => {
-      this.smoothDeltaY = this.smoothDeltaY * (1 - 1 / this.viscosity);
-      if (Math.abs(this.smoothDeltaY) < 0.01) {
         this.smoothDeltaY = 0;
+        this.active = false;
+        this.adhesion = 4;
+        this.viscosity = 4;
+        this.originX = 0;
+        this.originY = 0;
+        this.targetX = 0;
+        this.targetY = 0;
+    }
+    activeChanged() {
         clearInterval(this.smoothDeltaYInterval);
-      }
-      this.updatePosition();
-    }, 1000 / 60);
-  }
-  connectedCallback() {
-    this.updatePosition();
-  }
-  scaleNumber(input, inputRange, outputRange) {
-    const [inputMin, inputMax] = inputRange;
-    const [outputMin, outputMax] = outputRange;
-    if (input < inputMin || input > inputMax) {
-      throw new Error("Input is out of the input range!");
+        clearInterval(this.smoothDeltaXInterval);
+        if (!this.active) {
+            this.smoothDeltaXChange();
+            this.smoothDeltaYChange();
+        }
     }
-    return ((input - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) + outputMin;
-  }
-  updatePosition() {
-    const STRECH_CAP = 100;
-    const deltaX = this.active ? this.targetX - this.originX : this.smoothDeltaX;
-    const deltaY = this.active ? this.targetY - this.originY : this.smoothDeltaY;
-    const delta = new Vec2(deltaX, deltaY);
-    const skewSize = this.scaleNumber((Math.min(STRECH_CAP, delta.length / this.viscosity)), [0, (STRECH_CAP)], [0, deg2rad(40)]);
-    const deltaAngle = Vec2.fullCircleAngle(delta, new Vec2(1, 1));
-    const skew = Matrix4.skew(skewSize, skewSize);
-    const rotateToward = Matrix4.rotateZ(deltaAngle);
-    const rotateAway = Matrix4.rotateZ(-deltaAngle);
-    const squish = rotateToward.multiply(skew).multiply(rotateAway);
-    const translate = Matrix4.translate(delta.x / this.adhesion, delta.y / this.adhesion, 0);
-    this.matrix = translate.multiply(squish);
-  }
-  render() {
-    return (index.h(index.Host, { style: { transform: this.matrix.toCssMatrix() } }, index.h("slot", null)));
-  }
-  static get watchers() { return {
-    "active": ["activeChanged"],
-    "originX": ["originXChanged"],
-    "originY": ["originYChanged"],
-    "targetX": ["targetXChanged"],
-    "targetY": ["targetYChanged"]
-  }; }
+    originXChanged() {
+        clearInterval(this.smoothDeltaXInterval);
+        if (!this.active)
+            this.smoothDeltaXChange();
+        else
+            this.updatePosition();
+    }
+    originYChanged() {
+        clearInterval(this.smoothDeltaYInterval);
+        if (!this.active)
+            this.smoothDeltaYChange();
+        else
+            this.updatePosition();
+    }
+    targetXChanged() {
+        clearInterval(this.smoothDeltaXInterval);
+        if (!this.active)
+            this.smoothDeltaXChange();
+        else
+            this.updatePosition();
+    }
+    targetYChanged() {
+        clearInterval(this.smoothDeltaYInterval);
+        if (!this.active)
+            this.smoothDeltaYChange();
+        else
+            this.updatePosition();
+    }
+    smoothDeltaXChange() {
+        this.smoothDeltaX = this.targetX - this.originX;
+        // exponential decay of delta as a function of viscosity
+        this.smoothDeltaXInterval = setInterval(() => {
+            this.smoothDeltaX = this.smoothDeltaX * (1 - 1 / this.viscosity);
+            if (Math.abs(this.smoothDeltaX) < 0.01) {
+                this.smoothDeltaX = 0;
+                clearInterval(this.smoothDeltaXInterval);
+            }
+            this.updatePosition();
+        }, 1000 / 60);
+    }
+    smoothDeltaYChange() {
+        this.smoothDeltaY = this.targetY - this.originY;
+        this.smoothDeltaYInterval = setInterval(() => {
+            this.smoothDeltaY = this.smoothDeltaY * (1 - 1 / this.viscosity);
+            if (Math.abs(this.smoothDeltaY) < 0.01) {
+                this.smoothDeltaY = 0;
+                clearInterval(this.smoothDeltaYInterval);
+            }
+            this.updatePosition();
+        }, 1000 / 60);
+    }
+    connectedCallback() {
+        this.updatePosition();
+    }
+    scaleNumber(input, inputRange, outputRange) {
+        const [inputMin, inputMax] = inputRange;
+        const [outputMin, outputMax] = outputRange;
+        if (input < inputMin || input > inputMax) {
+            throw new Error('Input is out of the input range!');
+        }
+        return ((input - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) + outputMin;
+    }
+    updatePosition() {
+        const STRECH_CAP = 100;
+        const deltaX = this.active ? this.targetX - this.originX : this.smoothDeltaX;
+        const deltaY = this.active ? this.targetY - this.originY : this.smoothDeltaY;
+        const delta = new Vec2(deltaX, deltaY);
+        const skewSize = this.scaleNumber(Math.min(STRECH_CAP, delta.length / this.viscosity), [0, STRECH_CAP], [0, deg2rad(40)]);
+        const deltaAngle = Vec2.fullCircleAngle(delta, new Vec2(1, 1));
+        const skew = Matrix4.skew(skewSize, skewSize);
+        const rotateToward = Matrix4.rotateZ(deltaAngle);
+        const rotateAway = Matrix4.rotateZ(-deltaAngle);
+        const squish = rotateToward.multiply(skew).multiply(rotateAway);
+        const translate = Matrix4.translate(delta.x / this.adhesion, delta.y / this.adhesion, 0);
+        this.matrix = translate.multiply(squish);
+    }
+    render() {
+        return (index.h(index.Host, { key: '11332f280af6bca9920bd1a8c83dcab0d136f3ca', style: { transform: this.matrix.toCssMatrix() } }, index.h("slot", { key: '3a4bb65247c2fc129a91693f2ced373f7d2c80f5' })));
+    }
+    static get watchers() { return {
+        "active": ["activeChanged"],
+        "originX": ["originXChanged"],
+        "originY": ["originYChanged"],
+        "targetX": ["targetXChanged"],
+        "targetY": ["targetYChanged"]
+    }; }
 };
-DoughAllPurposeFlour.style = doughAllPurposeFlourCss;
+DoughAllPurposeFlour.style = DoughAllPurposeFlourStyle0;
 
-const doughDraggableCss = ":host{display:block;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}";
+const doughDraggableScss = ":host{display:block;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}";
+const DoughDraggableStyle0 = doughDraggableScss;
 
 const BREAK_DISTANCE = 50;
 const DoughDraggable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.doughDragStart = index.createEvent(this, "doughDragStart", 7);
-    this.doughDragMove = index.createEvent(this, "doughDragMove", 7);
-    this.doughDragEnd = index.createEvent(this, "doughDragEnd", 7);
-    this.startX = 0;
-    this.startY = 0;
-    this.adhesion = 4;
-    this.viscosity = 4;
-    this.active = false;
-    this.deltaX = 0;
-    this.deltaY = 0;
-    this.detached = false;
-  }
-  onStart(e) {
-    this.active = true;
-    if (e instanceof MouseEvent) {
-      this.startX = e.clientX;
-      this.startY = e.clientY;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.doughDragStart = index.createEvent(this, "doughDragStart", 7);
+        this.doughDragMove = index.createEvent(this, "doughDragMove", 7);
+        this.doughDragEnd = index.createEvent(this, "doughDragEnd", 7);
+        this.startX = 0;
+        this.startY = 0;
+        this.adhesion = 4;
+        this.viscosity = 4;
+        this.active = false;
+        this.deltaX = 0;
+        this.deltaY = 0;
+        this.detached = false;
     }
-    else {
-      this.startX = e.touches[0].clientX;
-      this.startY = e.touches[0].clientY;
+    onStart(e) {
+        this.active = true;
+        if (e instanceof MouseEvent) {
+            this.startX = e.clientX;
+            this.startY = e.clientY;
+        }
+        else {
+            this.startX = e.touches[0].clientX;
+            this.startY = e.touches[0].clientY;
+        }
+        document.addEventListener('mousemove', this.onMove.bind(this));
+        document.addEventListener('mouseup', this.onEnd.bind(this));
+        document.addEventListener('touchmove', this.onMove.bind(this));
+        document.addEventListener('touchend', this.onEnd.bind(this));
     }
-    document.addEventListener('mousemove', this.onMove.bind(this));
-    document.addEventListener('mouseup', this.onEnd.bind(this));
-    document.addEventListener('touchmove', this.onMove.bind(this));
-    document.addEventListener('touchend', this.onEnd.bind(this));
-  }
-  onMove(e) {
-    if (!this.active)
-      return;
-    let x = 0;
-    let y = 0;
-    if (e instanceof MouseEvent) {
-      x = e.clientX;
-      y = e.clientY;
+    onMove(e) {
+        if (!this.active)
+            return;
+        let x = 0;
+        let y = 0;
+        if (e instanceof MouseEvent) {
+            x = e.clientX;
+            y = e.clientY;
+        }
+        else {
+            x = e.touches[0].clientX;
+            y = e.touches[0].clientY;
+        }
+        this.deltaX = x - this.startX;
+        this.deltaY = y - this.startY;
+        const vect = new Vec2(this.deltaX, this.deltaY);
+        const magnitude = vect.length;
+        if (!this.detached && BREAK_DISTANCE * this.adhesion < magnitude) {
+            this.el.classList.add('detached');
+            this.detached = true;
+            this.doughDragStart.emit({ x, y });
+        }
+        if (this.detached) {
+            this.doughDragMove.emit({ x, y });
+        }
     }
-    else {
-      x = e.touches[0].clientX;
-      y = e.touches[0].clientY;
+    onEnd(e) {
+        if (!this.active)
+            return;
+        if (e instanceof MouseEvent) {
+            this.doughDragEnd.emit({ x: e.clientX, y: e.clientY });
+        }
+        else {
+            this.doughDragEnd.emit({ x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY });
+        }
+        this.active = false;
+        this.detached = false;
+        this.el.classList.remove('detached');
+        this.startX = 0;
+        this.startY = 0;
+        // Remove event listeners from the document
+        document.removeEventListener('mousemove', this.onMove.bind(this));
+        document.removeEventListener('mouseup', this.onEnd.bind(this));
+        document.removeEventListener('touchmove', this.onMove.bind(this));
+        document.removeEventListener('touchend', this.onEnd.bind(this));
     }
-    this.deltaX = x - this.startX;
-    this.deltaY = y - this.startY;
-    const vect = new Vec2(this.deltaX, this.deltaY);
-    const magnitude = vect.length;
-    if (!this.detached && BREAK_DISTANCE * this.adhesion < magnitude) {
-      this.el.classList.add('detached');
-      this.detached = true;
-      this.doughDragStart.emit({ x, y });
+    render() {
+        const translateX = this.detached ? this.deltaX : 0;
+        const translateY = this.detached ? this.deltaY : 0;
+        return (index.h(index.Host, { key: '0d4816ffd463afbe96c2070a030b3e0c6731babc', onTouchStart: this.onStart.bind(this), onMouseDown: this.onStart.bind(this), style: {
+                transform: `translate(${translateX}px, ${translateY}px)`
+            } }, index.h("dough-all-purpose-flour", { key: '6a3f727f0e8c64b0b3021d4000dc8423d6605a86', active: this.active, originX: 0, originY: 0, targetX: this.detached ? 0 : this.deltaX, targetY: this.detached ? 0 : this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, index.h("slot", { key: 'd33d274618dc60d9907a37bdc0dee25709f14f18' }))));
     }
-    if (this.detached) {
-      this.doughDragMove.emit({ x, y });
-    }
-  }
-  onEnd(e) {
-    if (!this.active)
-      return;
-    if (e instanceof MouseEvent) {
-      this.doughDragEnd.emit({ x: e.clientX, y: e.clientY });
-    }
-    else {
-      this.doughDragEnd.emit({ x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY });
-    }
-    this.active = false;
-    this.detached = false;
-    this.el.classList.remove('detached');
-    this.startX = 0;
-    this.startY = 0;
-    // Remove event listeners from the document
-    document.removeEventListener('mousemove', this.onMove.bind(this));
-    document.removeEventListener('mouseup', this.onEnd.bind(this));
-    document.removeEventListener('touchmove', this.onMove.bind(this));
-    document.removeEventListener('touchend', this.onEnd.bind(this));
-  }
-  render() {
-    const translateX = this.detached ? this.deltaX : 0;
-    const translateY = this.detached ? this.deltaY : 0;
-    return (index.h(index.Host, { onTouchStart: this.onStart.bind(this), onMouseDown: this.onStart.bind(this), style: {
-        transform: `translate(${translateX}px, ${translateY}px)`
-      } }, index.h("dough-all-purpose-flour", { active: this.active, originX: 0, originY: 0, targetX: this.detached ? 0 : this.deltaX, targetY: this.detached ? 0 : this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
+    get el() { return index.getElement(this); }
 };
-DoughDraggable.style = doughDraggableCss;
+DoughDraggable.style = DoughDraggableStyle0;
 
-const doughPressableCss = ":host{display:block}";
+const doughPressableScss = ":host{display:block}";
+const DoughPressableStyle0 = doughPressableScss;
 
 const DoughPressable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.startX = 0;
-    this.startY = 0;
-    this.adhesion = 8;
-    this.viscosity = 10;
-    this.active = false;
-    this.deltaX = 0;
-    this.deltaY = 0;
-  }
-  onStart(e) {
-    console.log(e);
-    this.active = true;
-    if (e instanceof MouseEvent) {
-      this.startX = e.clientX;
-      this.startY = e.clientY;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.startX = 0;
+        this.startY = 0;
+        this.adhesion = 8;
+        this.viscosity = 10;
+        this.active = false;
+        this.deltaX = 0;
+        this.deltaY = 0;
     }
-    else {
-      this.startX = e.touches[0].clientX;
-      this.startY = e.touches[0].clientY;
+    onStart(e) {
+        this.active = true;
+        if (e instanceof MouseEvent) {
+            this.startX = e.clientX;
+            this.startY = e.clientY;
+        }
+        else {
+            this.startX = e.touches[0].clientX;
+            this.startY = e.touches[0].clientY;
+        }
+        // Add event listeners to the document
+        document.addEventListener('mousemove', this.onMove.bind(this));
+        document.addEventListener('mouseup', this.onEnd.bind(this));
+        document.addEventListener('touchmove', this.onMove.bind(this));
+        document.addEventListener('touchend', this.onEnd.bind(this));
     }
-    // Add event listeners to the document
-    document.addEventListener('mousemove', this.onMove.bind(this));
-    document.addEventListener('mouseup', this.onEnd.bind(this));
-    document.addEventListener('touchmove', this.onMove.bind(this));
-    document.addEventListener('touchend', this.onEnd.bind(this));
-  }
-  onMove(e) {
-    if (!this.active)
-      return;
-    let x = 0;
-    let y = 0;
-    if (e instanceof MouseEvent) {
-      x = e.clientX;
-      y = e.clientY;
+    onMove(e) {
+        if (!this.active)
+            return;
+        let x = 0;
+        let y = 0;
+        if (e instanceof MouseEvent) {
+            x = e.clientX;
+            y = e.clientY;
+        }
+        else {
+            x = e.touches[0].clientX;
+            y = e.touches[0].clientY;
+        }
+        this.deltaX = x - this.startX;
+        this.deltaY = y - this.startY;
     }
-    else {
-      x = e.touches[0].clientX;
-      y = e.touches[0].clientY;
+    onEnd(_) {
+        this.active = false;
+        this.deltaX = 0;
+        this.deltaY = 0;
+        this.startX = 0;
+        this.startY = 0;
+        // Remove event listeners from the document
+        document.removeEventListener('mousemove', this.onMove.bind(this));
+        document.removeEventListener('mouseup', this.onEnd.bind(this));
+        document.removeEventListener('touchmove', this.onMove.bind(this));
+        document.removeEventListener('touchend', this.onEnd.bind(this));
     }
-    this.deltaX = x - this.startX;
-    this.deltaY = y - this.startY;
-  }
-  onEnd(_) {
-    this.active = false;
-    this.deltaX = 0;
-    this.deltaY = 0;
-    this.startX = 0;
-    this.startY = 0;
-    // Remove event listeners from the document
-    document.removeEventListener('mousemove', this.onMove.bind(this));
-    document.removeEventListener('mouseup', this.onEnd.bind(this));
-    document.removeEventListener('touchmove', this.onMove.bind(this));
-    document.removeEventListener('touchend', this.onEnd.bind(this));
-  }
-  render() {
-    return (index.h(index.Host, { onMouseDown: this.onStart.bind(this), onTouchStart: this.onStart.bind(this) }, index.h("dough-all-purpose-flour", { active: this.active, originX: 0, originY: 0, targetX: this.deltaX, targetY: this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, index.h("slot", null))));
-  }
+    render() {
+        return (index.h(index.Host, { key: '97fb8244d8ff58a47dcf0a164d6ea4786501502d', onMouseDown: this.onStart.bind(this), onTouchStart: this.onStart.bind(this) }, index.h("dough-all-purpose-flour", { key: '65b88ae65141688306e67f550b2b7b34b22b7adc', active: this.active, originX: 0, originY: 0, targetX: this.deltaX, targetY: this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, index.h("slot", { key: 'aea525432dc163519f56b9e355b657485dce41e0' }))));
+    }
 };
-DoughPressable.style = doughPressableCss;
+DoughPressable.style = DoughPressableStyle0;
 
@@ -405,0 +406,0 @@ exports.dough_all_purpose_flour = DoughAllPurposeFlour;

dist/cjs/dough-js.cjs.js

@@ -5,6 +5,7 @@ 'use strict';
 
-const index = require('./index-d3b7f44a.js');
+const index = require('./index-f24fc57a.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.0.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.14.1 | MIT Licensed | https://stenciljs.com
  */
@@ -20,4 +21,5 @@ const patchBrowser = () => {
 
-patchBrowser().then(options => {
-  return index.bootstrapLazy([["dough-all-purpose-flour_3.cjs",[[1,"dough-draggable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32],"detached":[32]}],[1,"dough-pressable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32]}],[1,"dough-all-purpose-flour",{"active":[4],"adhesion":[2],"viscosity":[2],"originX":[2,"origin-x"],"originY":[2,"origin-y"],"targetX":[2,"target-x"],"targetY":[2,"target-y"],"matrix":[32],"smoothDeltaX":[32],"smoothDeltaY":[32]}]]]], options);
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["dough-all-purpose-flour_3.cjs",[[1,"dough-draggable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32],"detached":[32]}],[1,"dough-pressable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32]}],[1,"dough-all-purpose-flour",{"active":[4],"adhesion":[2],"viscosity":[2],"originX":[2,"origin-x"],"originY":[2,"origin-y"],"targetX":[2,"target-x"],"targetY":[2,"target-y"],"matrix":[32],"smoothDeltaX":[32],"smoothDeltaY":[32]},null,{"active":["activeChanged"],"originX":["originXChanged"],"originY":["originYChanged"],"targetX":["targetXChanged"],"targetY":["targetYChanged"]}]]]], options);
 });
@@ -24,0 +26,0 @@

dist/cjs/loader.cjs.js

@@ -5,7 +5,9 @@ 'use strict';
 
-const index = require('./index-d3b7f44a.js');
+const index = require('./index-f24fc57a.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
-const defineCustomElements = (win, options) => {
+const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return index.bootstrapLazy([["dough-all-purpose-flour_3.cjs",[[1,"dough-draggable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32],"detached":[32]}],[1,"dough-pressable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32]}],[1,"dough-all-purpose-flour",{"active":[4],"adhesion":[2],"viscosity":[2],"originX":[2,"origin-x"],"originY":[2,"origin-y"],"targetX":[2,"target-x"],"targetY":[2,"target-y"],"matrix":[32],"smoothDeltaX":[32],"smoothDeltaY":[32]}]]]], options);
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["dough-all-purpose-flour_3.cjs",[[1,"dough-draggable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32],"detached":[32]}],[1,"dough-pressable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32]}],[1,"dough-all-purpose-flour",{"active":[4],"adhesion":[2],"viscosity":[2],"originX":[2,"origin-x"],"originY":[2,"origin-y"],"targetX":[2,"target-x"],"targetY":[2,"target-y"],"matrix":[32],"smoothDeltaX":[32],"smoothDeltaY":[32]},null,{"active":["activeChanged"],"originX":["originXChanged"],"originY":["originYChanged"],"targetX":["targetXChanged"],"targetY":["targetYChanged"]}]]]], options);
 };
@@ -12,0 +14,0 @@

dist/collection/collection-manifest.json

@@ -9,4 +9,4 @@ {
     "name": "@stencil/core",
-    "version": "4.0.3",
-    "typescriptVersion": "5.0.4"
+    "version": "4.14.1",
+    "typescriptVersion": "5.4.3"
   },
@@ -13,0 +13,0 @@ "collections": [],

dist/collection/components/dough-all-purpose-flour/dough-all-purpose-flour.js

 import { Host, h } from "@stencil/core";
 import { Matrix4, Vec2, deg2rad } from "../../utils/math";
 export class DoughAllPurposeFlour {
-  constructor() {
-    this.matrix = Matrix4.identity();
-    this.smoothDeltaX = 0;
-    this.smoothDeltaY = 0;
-    this.active = false;
-    this.adhesion = 4;
-    this.viscosity = 4;
-    this.originX = 0;
-    this.originY = 0;
-    this.targetX = 0;
-    this.targetY = 0;
-  }
-  activeChanged() {
-    clearInterval(this.smoothDeltaYInterval);
-    clearInterval(this.smoothDeltaXInterval);
-    if (!this.active) {
-      this.smoothDeltaXChange();
-      this.smoothDeltaYChange();
-    }
-  }
-  originXChanged() {
-    clearInterval(this.smoothDeltaXInterval);
-    if (!this.active)
-      this.smoothDeltaXChange();
-    else
-      this.updatePosition();
-  }
-  originYChanged() {
-    clearInterval(this.smoothDeltaYInterval);
-    if (!this.active)
-      this.smoothDeltaYChange();
-    else
-      this.updatePosition();
-  }
-  targetXChanged() {
-    clearInterval(this.smoothDeltaXInterval);
-    if (!this.active)
-      this.smoothDeltaXChange();
-    else
-      this.updatePosition();
-  }
-  targetYChanged() {
-    clearInterval(this.smoothDeltaYInterval);
-    if (!this.active)
-      this.smoothDeltaYChange();
-    else
-      this.updatePosition();
-  }
-  smoothDeltaXChange() {
-    this.smoothDeltaX = this.targetX - this.originX;
-    // exponential decay of delta as a function of viscosity
-    this.smoothDeltaXInterval = setInterval(() => {
-      this.smoothDeltaX = this.smoothDeltaX * (1 - 1 / this.viscosity);
-      console.log(this.smoothDeltaX);
-      if (Math.abs(this.smoothDeltaX) < 0.01) {
+    constructor() {
+        this.matrix = Matrix4.identity();
         this.smoothDeltaX = 0;
-        clearInterval(this.smoothDeltaXInterval);
-      }
-      this.updatePosition();
-    }, 1000 / 60);
-  }
-  smoothDeltaYChange() {
-    this.smoothDeltaY = this.targetY - this.originY;
-    this.smoothDeltaYInterval = setInterval(() => {
-      this.smoothDeltaY = this.smoothDeltaY * (1 - 1 / this.viscosity);
-      if (Math.abs(this.smoothDeltaY) < 0.01) {
         this.smoothDeltaY = 0;
+        this.active = false;
+        this.adhesion = 4;
+        this.viscosity = 4;
+        this.originX = 0;
+        this.originY = 0;
+        this.targetX = 0;
+        this.targetY = 0;
+    }
+    activeChanged() {
         clearInterval(this.smoothDeltaYInterval);
-      }
-      this.updatePosition();
-    }, 1000 / 60);
-  }
-  connectedCallback() {
-    this.updatePosition();
-  }
-  scaleNumber(input, inputRange, outputRange) {
-    const [inputMin, inputMax] = inputRange;
-    const [outputMin, outputMax] = outputRange;
-    if (input < inputMin || input > inputMax) {
-      throw new Error("Input is out of the input range!");
+        clearInterval(this.smoothDeltaXInterval);
+        if (!this.active) {
+            this.smoothDeltaXChange();
+            this.smoothDeltaYChange();
+        }
     }
-    return ((input - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) + outputMin;
-  }
-  updatePosition() {
-    const STRECH_CAP = 100;
-    const deltaX = this.active ? this.targetX - this.originX : this.smoothDeltaX;
-    const deltaY = this.active ? this.targetY - this.originY : this.smoothDeltaY;
-    const delta = new Vec2(deltaX, deltaY);
-    const skewSize = this.scaleNumber((Math.min(STRECH_CAP, delta.length / this.viscosity)), [0, (STRECH_CAP)], [0, deg2rad(40)]);
-    const deltaAngle = Vec2.fullCircleAngle(delta, new Vec2(1, 1));
-    const skew = Matrix4.skew(skewSize, skewSize);
-    const rotateToward = Matrix4.rotateZ(deltaAngle);
-    const rotateAway = Matrix4.rotateZ(-deltaAngle);
-    const squish = rotateToward.multiply(skew).multiply(rotateAway);
-    const translate = Matrix4.translate(delta.x / this.adhesion, delta.y / this.adhesion, 0);
-    this.matrix = translate.multiply(squish);
-  }
-  render() {
-    return (h(Host, { style: { transform: this.matrix.toCssMatrix() } }, h("slot", null)));
-  }
-  static get is() { return "dough-all-purpose-flour"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["dough-all-purpose-flour.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["dough-all-purpose-flour.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{boolean}"
-            }],
-          "text": "Set active to true when you want to manipulate the dough. Set to false when you want it to smooth back to its original position."
-        },
-        "attribute": "active",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "adhesion": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The adhesion of the dough. The higher the number, the more the dough will stick to its original position."
-        },
-        "attribute": "adhesion",
-        "reflect": false,
-        "defaultValue": "4"
-      },
-      "viscosity": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The viscosity of the dough. The higher the number, the more the dough will resist movement."
-        },
-        "attribute": "viscosity",
-        "reflect": false,
-        "defaultValue": "4"
-      },
-      "originX": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The origin X coordinate of the dough. This is the point that the dough will try to return to."
-        },
-        "attribute": "origin-x",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "originY": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The origin Y coordinate of the dough. This is the point that the dough will try to return to."
-        },
-        "attribute": "origin-y",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "targetX": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The target X coordinate of the dough. This is the point that the dough will try to move to."
-        },
-        "attribute": "target-x",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "targetY": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The target Y coordinate of the dough. This is the point that the dough will try to move to."
-        },
-        "attribute": "target-y",
-        "reflect": false,
-        "defaultValue": "0"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "matrix": {},
-      "smoothDeltaX": {},
-      "smoothDeltaY": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "active",
-        "methodName": "activeChanged"
-      }, {
-        "propName": "originX",
-        "methodName": "originXChanged"
-      }, {
-        "propName": "originY",
-        "methodName": "originYChanged"
-      }, {
-        "propName": "targetX",
-        "methodName": "targetXChanged"
-      }, {
-        "propName": "targetY",
-        "methodName": "targetYChanged"
-      }];
-  }
+    originXChanged() {
+        clearInterval(this.smoothDeltaXInterval);
+        if (!this.active)
+            this.smoothDeltaXChange();
+        else
+            this.updatePosition();
+    }
+    originYChanged() {
+        clearInterval(this.smoothDeltaYInterval);
+        if (!this.active)
+            this.smoothDeltaYChange();
+        else
+            this.updatePosition();
+    }
+    targetXChanged() {
+        clearInterval(this.smoothDeltaXInterval);
+        if (!this.active)
+            this.smoothDeltaXChange();
+        else
+            this.updatePosition();
+    }
+    targetYChanged() {
+        clearInterval(this.smoothDeltaYInterval);
+        if (!this.active)
+            this.smoothDeltaYChange();
+        else
+            this.updatePosition();
+    }
+    smoothDeltaXChange() {
+        this.smoothDeltaX = this.targetX - this.originX;
+        // exponential decay of delta as a function of viscosity
+        this.smoothDeltaXInterval = setInterval(() => {
+            this.smoothDeltaX = this.smoothDeltaX * (1 - 1 / this.viscosity);
+            if (Math.abs(this.smoothDeltaX) < 0.01) {
+                this.smoothDeltaX = 0;
+                clearInterval(this.smoothDeltaXInterval);
+            }
+            this.updatePosition();
+        }, 1000 / 60);
+    }
+    smoothDeltaYChange() {
+        this.smoothDeltaY = this.targetY - this.originY;
+        this.smoothDeltaYInterval = setInterval(() => {
+            this.smoothDeltaY = this.smoothDeltaY * (1 - 1 / this.viscosity);
+            if (Math.abs(this.smoothDeltaY) < 0.01) {
+                this.smoothDeltaY = 0;
+                clearInterval(this.smoothDeltaYInterval);
+            }
+            this.updatePosition();
+        }, 1000 / 60);
+    }
+    connectedCallback() {
+        this.updatePosition();
+    }
+    scaleNumber(input, inputRange, outputRange) {
+        const [inputMin, inputMax] = inputRange;
+        const [outputMin, outputMax] = outputRange;
+        if (input < inputMin || input > inputMax) {
+            throw new Error('Input is out of the input range!');
+        }
+        return ((input - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) + outputMin;
+    }
+    updatePosition() {
+        const STRECH_CAP = 100;
+        const deltaX = this.active ? this.targetX - this.originX : this.smoothDeltaX;
+        const deltaY = this.active ? this.targetY - this.originY : this.smoothDeltaY;
+        const delta = new Vec2(deltaX, deltaY);
+        const skewSize = this.scaleNumber(Math.min(STRECH_CAP, delta.length / this.viscosity), [0, STRECH_CAP], [0, deg2rad(40)]);
+        const deltaAngle = Vec2.fullCircleAngle(delta, new Vec2(1, 1));
+        const skew = Matrix4.skew(skewSize, skewSize);
+        const rotateToward = Matrix4.rotateZ(deltaAngle);
+        const rotateAway = Matrix4.rotateZ(-deltaAngle);
+        const squish = rotateToward.multiply(skew).multiply(rotateAway);
+        const translate = Matrix4.translate(delta.x / this.adhesion, delta.y / this.adhesion, 0);
+        this.matrix = translate.multiply(squish);
+    }
+    render() {
+        return (h(Host, { key: '11332f280af6bca9920bd1a8c83dcab0d136f3ca', style: { transform: this.matrix.toCssMatrix() } }, h("slot", { key: '3a4bb65247c2fc129a91693f2ced373f7d2c80f5' })));
+    }
+    static get is() { return "dough-all-purpose-flour"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dough-all-purpose-flour.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dough-all-purpose-flour.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }],
+                    "text": "Set active to true when you want to manipulate the dough. Set to false when you want it to smooth back to its original position."
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "adhesion": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The adhesion of the dough. The higher the number, the more the dough will stick to its original position."
+                },
+                "attribute": "adhesion",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "viscosity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The viscosity of the dough. The higher the number, the more the dough will resist movement."
+                },
+                "attribute": "viscosity",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "originX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The origin X coordinate of the dough. This is the point that the dough will try to return to."
+                },
+                "attribute": "origin-x",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "originY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The origin Y coordinate of the dough. This is the point that the dough will try to return to."
+                },
+                "attribute": "origin-y",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "targetX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The target X coordinate of the dough. This is the point that the dough will try to move to."
+                },
+                "attribute": "target-x",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "targetY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The target Y coordinate of the dough. This is the point that the dough will try to move to."
+                },
+                "attribute": "target-y",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "matrix": {},
+            "smoothDeltaX": {},
+            "smoothDeltaY": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "activeChanged"
+            }, {
+                "propName": "originX",
+                "methodName": "originXChanged"
+            }, {
+                "propName": "originY",
+                "methodName": "originYChanged"
+            }, {
+                "propName": "targetX",
+                "methodName": "targetXChanged"
+            }, {
+                "propName": "targetY",
+                "methodName": "targetYChanged"
+            }];
+    }
 }
 //# sourceMappingURL=dough-all-purpose-flour.js.map

dist/collection/components/dough-draggable/dough-draggable.js

@@ -5,196 +5,196 @@ import { Host, h } from "@stencil/core";
 export class DoughDraggable {
-  constructor() {
-    this.startX = 0;
-    this.startY = 0;
-    this.adhesion = 4;
-    this.viscosity = 4;
-    this.active = false;
-    this.deltaX = 0;
-    this.deltaY = 0;
-    this.detached = false;
-  }
-  onStart(e) {
-    this.active = true;
-    if (e instanceof MouseEvent) {
-      this.startX = e.clientX;
-      this.startY = e.clientY;
+    constructor() {
+        this.startX = 0;
+        this.startY = 0;
+        this.adhesion = 4;
+        this.viscosity = 4;
+        this.active = false;
+        this.deltaX = 0;
+        this.deltaY = 0;
+        this.detached = false;
     }
-    else {
-      this.startX = e.touches[0].clientX;
-      this.startY = e.touches[0].clientY;
+    onStart(e) {
+        this.active = true;
+        if (e instanceof MouseEvent) {
+            this.startX = e.clientX;
+            this.startY = e.clientY;
+        }
+        else {
+            this.startX = e.touches[0].clientX;
+            this.startY = e.touches[0].clientY;
+        }
+        document.addEventListener('mousemove', this.onMove.bind(this));
+        document.addEventListener('mouseup', this.onEnd.bind(this));
+        document.addEventListener('touchmove', this.onMove.bind(this));
+        document.addEventListener('touchend', this.onEnd.bind(this));
     }
-    document.addEventListener('mousemove', this.onMove.bind(this));
-    document.addEventListener('mouseup', this.onEnd.bind(this));
-    document.addEventListener('touchmove', this.onMove.bind(this));
-    document.addEventListener('touchend', this.onEnd.bind(this));
-  }
-  onMove(e) {
-    if (!this.active)
-      return;
-    let x = 0;
-    let y = 0;
-    if (e instanceof MouseEvent) {
-      x = e.clientX;
-      y = e.clientY;
+    onMove(e) {
+        if (!this.active)
+            return;
+        let x = 0;
+        let y = 0;
+        if (e instanceof MouseEvent) {
+            x = e.clientX;
+            y = e.clientY;
+        }
+        else {
+            x = e.touches[0].clientX;
+            y = e.touches[0].clientY;
+        }
+        this.deltaX = x - this.startX;
+        this.deltaY = y - this.startY;
+        const vect = new Vec2(this.deltaX, this.deltaY);
+        const magnitude = vect.length;
+        if (!this.detached && BREAK_DISTANCE * this.adhesion < magnitude) {
+            this.el.classList.add('detached');
+            this.detached = true;
+            this.doughDragStart.emit({ x, y });
+        }
+        if (this.detached) {
+            this.doughDragMove.emit({ x, y });
+        }
     }
-    else {
-      x = e.touches[0].clientX;
-      y = e.touches[0].clientY;
+    onEnd(e) {
+        if (!this.active)
+            return;
+        if (e instanceof MouseEvent) {
+            this.doughDragEnd.emit({ x: e.clientX, y: e.clientY });
+        }
+        else {
+            this.doughDragEnd.emit({ x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY });
+        }
+        this.active = false;
+        this.detached = false;
+        this.el.classList.remove('detached');
+        this.startX = 0;
+        this.startY = 0;
+        // Remove event listeners from the document
+        document.removeEventListener('mousemove', this.onMove.bind(this));
+        document.removeEventListener('mouseup', this.onEnd.bind(this));
+        document.removeEventListener('touchmove', this.onMove.bind(this));
+        document.removeEventListener('touchend', this.onEnd.bind(this));
     }
-    this.deltaX = x - this.startX;
-    this.deltaY = y - this.startY;
-    const vect = new Vec2(this.deltaX, this.deltaY);
-    const magnitude = vect.length;
-    if (!this.detached && BREAK_DISTANCE * this.adhesion < magnitude) {
-      this.el.classList.add('detached');
-      this.detached = true;
-      this.doughDragStart.emit({ x, y });
+    render() {
+        const translateX = this.detached ? this.deltaX : 0;
+        const translateY = this.detached ? this.deltaY : 0;
+        return (h(Host, { key: '0d4816ffd463afbe96c2070a030b3e0c6731babc', onTouchStart: this.onStart.bind(this), onMouseDown: this.onStart.bind(this), style: {
+                transform: `translate(${translateX}px, ${translateY}px)`
+            } }, h("dough-all-purpose-flour", { key: '6a3f727f0e8c64b0b3021d4000dc8423d6605a86', active: this.active, originX: 0, originY: 0, targetX: this.detached ? 0 : this.deltaX, targetY: this.detached ? 0 : this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, h("slot", { key: 'd33d274618dc60d9907a37bdc0dee25709f14f18' }))));
     }
-    if (this.detached) {
-      this.doughDragMove.emit({ x, y });
+    static get is() { return "dough-draggable"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dough-draggable.scss"]
+        };
     }
-  }
-  onEnd(e) {
-    if (!this.active)
-      return;
-    if (e instanceof MouseEvent) {
-      this.doughDragEnd.emit({ x: e.clientX, y: e.clientY });
+    static get styleUrls() {
+        return {
+            "$": ["dough-draggable.css"]
+        };
     }
-    else {
-      this.doughDragEnd.emit({ x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY });
+    static get properties() {
+        return {
+            "adhesion": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The adhesion of the dough. The higher the number, the more the dough will stick to its original position."
+                },
+                "attribute": "adhesion",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "viscosity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The viscosity of the dough. The higher the number, the more the dough will resist movement."
+                },
+                "attribute": "viscosity",
+                "reflect": false,
+                "defaultValue": "4"
+            }
+        };
     }
-    this.active = false;
-    this.detached = false;
-    this.el.classList.remove('detached');
-    this.startX = 0;
-    this.startY = 0;
-    // Remove event listeners from the document
-    document.removeEventListener('mousemove', this.onMove.bind(this));
-    document.removeEventListener('mouseup', this.onEnd.bind(this));
-    document.removeEventListener('touchmove', this.onMove.bind(this));
-    document.removeEventListener('touchend', this.onEnd.bind(this));
-  }
-  render() {
-    const translateX = this.detached ? this.deltaX : 0;
-    const translateY = this.detached ? this.deltaY : 0;
-    return (h(Host, { onTouchStart: this.onStart.bind(this), onMouseDown: this.onStart.bind(this), style: {
-        transform: `translate(${translateX}px, ${translateY}px)`
-      } }, h("dough-all-purpose-flour", { active: this.active, originX: 0, originY: 0, targetX: this.detached ? 0 : this.deltaX, targetY: this.detached ? 0 : this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, h("slot", null))));
-  }
-  static get is() { return "dough-draggable"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["dough-draggable.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["dough-draggable.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "adhesion": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The adhesion of the dough. The higher the number, the more the dough will stick to its original position."
-        },
-        "attribute": "adhesion",
-        "reflect": false,
-        "defaultValue": "4"
-      },
-      "viscosity": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The viscosity of the dough. The higher the number, the more the dough will resist movement."
-        },
-        "attribute": "viscosity",
-        "reflect": false,
-        "defaultValue": "4"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "active": {},
-      "deltaX": {},
-      "deltaY": {},
-      "detached": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "doughDragStart",
-        "name": "doughDragStart",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ x: number, y: number }",
-          "resolved": "{ x: number; y: number; }",
-          "references": {}
-        }
-      }, {
-        "method": "doughDragMove",
-        "name": "doughDragMove",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ x: number, y: number }",
-          "resolved": "{ x: number; y: number; }",
-          "references": {}
-        }
-      }, {
-        "method": "doughDragEnd",
-        "name": "doughDragEnd",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ x: number, y: number }",
-          "resolved": "{ x: number; y: number; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
+    static get states() {
+        return {
+            "active": {},
+            "deltaX": {},
+            "deltaY": {},
+            "detached": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "doughDragStart",
+                "name": "doughDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ x: number, y: number }",
+                    "resolved": "{ x: number; y: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "doughDragMove",
+                "name": "doughDragMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ x: number, y: number }",
+                    "resolved": "{ x: number; y: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "doughDragEnd",
+                "name": "doughDragEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ x: number, y: number }",
+                    "resolved": "{ x: number; y: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=dough-draggable.js.map

dist/collection/components/dough-pressable/dough-pressable.js

 import { Host, h } from "@stencil/core";
 export class DoughPressable {
-  constructor() {
-    this.startX = 0;
-    this.startY = 0;
-    this.adhesion = 8;
-    this.viscosity = 10;
-    this.active = false;
-    this.deltaX = 0;
-    this.deltaY = 0;
-  }
-  onStart(e) {
-    console.log(e);
-    this.active = true;
-    if (e instanceof MouseEvent) {
-      this.startX = e.clientX;
-      this.startY = e.clientY;
+    constructor() {
+        this.startX = 0;
+        this.startY = 0;
+        this.adhesion = 8;
+        this.viscosity = 10;
+        this.active = false;
+        this.deltaX = 0;
+        this.deltaY = 0;
     }
-    else {
-      this.startX = e.touches[0].clientX;
-      this.startY = e.touches[0].clientY;
+    onStart(e) {
+        this.active = true;
+        if (e instanceof MouseEvent) {
+            this.startX = e.clientX;
+            this.startY = e.clientY;
+        }
+        else {
+            this.startX = e.touches[0].clientX;
+            this.startY = e.touches[0].clientY;
+        }
+        // Add event listeners to the document
+        document.addEventListener('mousemove', this.onMove.bind(this));
+        document.addEventListener('mouseup', this.onEnd.bind(this));
+        document.addEventListener('touchmove', this.onMove.bind(this));
+        document.addEventListener('touchend', this.onEnd.bind(this));
     }
-    // Add event listeners to the document
-    document.addEventListener('mousemove', this.onMove.bind(this));
-    document.addEventListener('mouseup', this.onEnd.bind(this));
-    document.addEventListener('touchmove', this.onMove.bind(this));
-    document.addEventListener('touchend', this.onEnd.bind(this));
-  }
-  onMove(e) {
-    if (!this.active)
-      return;
-    let x = 0;
-    let y = 0;
-    if (e instanceof MouseEvent) {
-      x = e.clientX;
-      y = e.clientY;
+    onMove(e) {
+        if (!this.active)
+            return;
+        let x = 0;
+        let y = 0;
+        if (e instanceof MouseEvent) {
+            x = e.clientX;
+            y = e.clientY;
+        }
+        else {
+            x = e.touches[0].clientX;
+            y = e.touches[0].clientY;
+        }
+        this.deltaX = x - this.startX;
+        this.deltaY = y - this.startY;
     }
-    else {
-      x = e.touches[0].clientX;
-      y = e.touches[0].clientY;
+    onEnd(_) {
+        this.active = false;
+        this.deltaX = 0;
+        this.deltaY = 0;
+        this.startX = 0;
+        this.startY = 0;
+        // Remove event listeners from the document
+        document.removeEventListener('mousemove', this.onMove.bind(this));
+        document.removeEventListener('mouseup', this.onEnd.bind(this));
+        document.removeEventListener('touchmove', this.onMove.bind(this));
+        document.removeEventListener('touchend', this.onEnd.bind(this));
     }
-    this.deltaX = x - this.startX;
-    this.deltaY = y - this.startY;
-  }
-  onEnd(_) {
-    this.active = false;
-    this.deltaX = 0;
-    this.deltaY = 0;
-    this.startX = 0;
-    this.startY = 0;
-    // Remove event listeners from the document
-    document.removeEventListener('mousemove', this.onMove.bind(this));
-    document.removeEventListener('mouseup', this.onEnd.bind(this));
-    document.removeEventListener('touchmove', this.onMove.bind(this));
-    document.removeEventListener('touchend', this.onEnd.bind(this));
-  }
-  render() {
-    return (h(Host, { onMouseDown: this.onStart.bind(this), onTouchStart: this.onStart.bind(this) }, h("dough-all-purpose-flour", { active: this.active, originX: 0, originY: 0, targetX: this.deltaX, targetY: this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, h("slot", null))));
-  }
-  static get is() { return "dough-pressable"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["dough-pressable.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["dough-pressable.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "adhesion": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The adhesion of the dough. The higher the number, the more the dough will stick to its original position."
-        },
-        "attribute": "adhesion",
-        "reflect": false,
-        "defaultValue": "8"
-      },
-      "viscosity": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "type",
-              "text": "{number}"
-            }],
-          "text": "The viscosity of the dough. The higher the number, the more the dough will resist movement."
-        },
-        "attribute": "viscosity",
-        "reflect": false,
-        "defaultValue": "10"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "active": {},
-      "deltaX": {},
-      "deltaY": {}
-    };
-  }
+    render() {
+        return (h(Host, { key: '97fb8244d8ff58a47dcf0a164d6ea4786501502d', onMouseDown: this.onStart.bind(this), onTouchStart: this.onStart.bind(this) }, h("dough-all-purpose-flour", { key: '65b88ae65141688306e67f550b2b7b34b22b7adc', active: this.active, originX: 0, originY: 0, targetX: this.deltaX, targetY: this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, h("slot", { key: 'aea525432dc163519f56b9e355b657485dce41e0' }))));
+    }
+    static get is() { return "dough-pressable"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dough-pressable.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dough-pressable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "adhesion": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The adhesion of the dough. The higher the number, the more the dough will stick to its original position."
+                },
+                "attribute": "adhesion",
+                "reflect": false,
+                "defaultValue": "8"
+            },
+            "viscosity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }],
+                    "text": "The viscosity of the dough. The higher the number, the more the dough will resist movement."
+                },
+                "attribute": "viscosity",
+                "reflect": false,
+                "defaultValue": "10"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "active": {},
+            "deltaX": {},
+            "deltaY": {}
+        };
+    }
 }
 //# sourceMappingURL=dough-pressable.js.map

dist/collection/utils/math.js

 export function deg2rad(deg) {
-  return deg * (Math.PI / 180);
+    return deg * (Math.PI / 180);
 }
 export function rad2deg(rad) {
-  return rad * (180 / Math.PI);
+    return rad * (180 / Math.PI);
 }
 export class Vec2 {
-  constructor(x, y) {
-    this._x = x;
-    this._y = y;
-  }
-  get x() {
-    return this._x;
-  }
-  get y() {
-    return this._y;
-  }
-  static zero() {
-    return new Vec2(0, 0);
-  }
-  get length() {
-    return Math.sqrt(this.x ** 2 + this.y ** 2);
-  }
-  static signedAngle(a, b) {
-    return Math.atan2(b.y, b.x) - Math.atan2(a.y, a.x);
-  }
-  static fullCircleAngle(target, source) {
-    const a = source !== null && source !== void 0 ? source : new Vec2(1, 0);
-    const b = target;
-    const rawAngle = Vec2.signedAngle(a, b);
-    if (rawAngle < 0.0) {
-      return 2 * Math.PI + rawAngle;
+    constructor(x, y) {
+        this._x = x;
+        this._y = y;
     }
-    else {
-      return rawAngle;
+    get x() {
+        return this._x;
     }
-  }
+    get y() {
+        return this._y;
+    }
+    static zero() {
+        return new Vec2(0, 0);
+    }
+    get length() {
+        return Math.sqrt(this.x ** 2 + this.y ** 2);
+    }
+    static signedAngle(a, b) {
+        return Math.atan2(b.y, b.x) - Math.atan2(a.y, a.x);
+    }
+    static fullCircleAngle(target, source) {
+        const a = source !== null && source !== void 0 ? source : new Vec2(1, 0);
+        const b = target;
+        const rawAngle = Vec2.signedAngle(a, b);
+        if (rawAngle < 0.0) {
+            return 2 * Math.PI + rawAngle;
+        }
+        else {
+            return rawAngle;
+        }
+    }
 }
 export class Matrix4 {
-  constructor(values) {
-    this.elements = new Array(16);
-    for (let row = 0; row < 4; ++row) {
-      for (let col = 0; col < 4; ++col) {
-        this.set(row, col, values[row][col]);
-      }
+    constructor(values) {
+        this.elements = new Array(16);
+        for (let row = 0; row < 4; ++row) {
+            for (let col = 0; col < 4; ++col) {
+                this.set(row, col, values[row][col]);
+            }
+        }
     }
-  }
-  static zero() {
-    return new Matrix4([
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-    ]);
-  }
-  static identity() {
-    return new Matrix4([
-      [1, 0, 0, 0],
-      [0, 1, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 0, 1],
-    ]);
-  }
-  static skew(alphaRadians, betaRadians) {
-    const a = Math.tan(alphaRadians);
-    const b = Math.tan(betaRadians);
-    return new Matrix4([
-      [1, a, 0, 0],
-      [b, 1, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 1, 1],
-    ]);
-  }
-  static scale(x, y, z) {
-    return new Matrix4([
-      [x, 0, 0, 0],
-      [0, y, 0, 0],
-      [0, 0, z, 0],
-      [0, 0, 1, 1],
-    ]);
-  }
-  static translate(x, y, z) {
-    return new Matrix4([
-      [1, 0, 0, x],
-      [0, 1, 0, y],
-      [0, 0, 1, z],
-      [0, 0, 1, 1],
-    ]);
-  }
-  static translateVec2(vec) {
-    return Matrix4.translate(vec.x, vec.y, 0);
-  }
-  static rotateZ(radians) {
-    const cos = Math.cos(radians);
-    const sin = Math.sin(radians);
-    return new Matrix4([
-      [cos, -sin, 0, 0],
-      [sin, cos, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 1, 1],
-    ]);
-  }
-  get(row, col) {
-    if (row < 0 || row > 3 || col < 0 || col > 3) {
-      throw new Error('Matrix4 indices are out of range');
+    static zero() {
+        return new Matrix4([
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+        ]);
     }
-    return this.elements[col * 4 + row];
-  }
-  set(row, col, value) {
-    if (row < 0 || row > 3 || col < 0 || col > 3) {
-      throw new Error('Matrix4 indices are out of range');
+    static identity() {
+        return new Matrix4([
+            [1, 0, 0, 0],
+            [0, 1, 0, 0],
+            [0, 0, 1, 0],
+            [0, 0, 0, 1],
+        ]);
     }
-    this.elements[col * 4 + row] = value;
-  }
-  multiply(other) {
-    const result = Matrix4.zero();
-    for (let row = 0; row < 4; ++row) {
-      for (let col = 0; col < 4; ++col) {
-        let sum = 0;
-        for (let k = 0; k < 4; ++k) {
-          sum += this.get(row, k) * other.get(k, col);
+    static skew(alphaRadians, betaRadians) {
+        const a = Math.tan(alphaRadians);
+        const b = Math.tan(betaRadians);
+        return new Matrix4([
+            [1, a, 0, 0],
+            [b, 1, 0, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 1],
+        ]);
+    }
+    static scale(x, y, z) {
+        return new Matrix4([
+            [x, 0, 0, 0],
+            [0, y, 0, 0],
+            [0, 0, z, 0],
+            [0, 0, 1, 1],
+        ]);
+    }
+    static translate(x, y, z) {
+        return new Matrix4([
+            [1, 0, 0, x],
+            [0, 1, 0, y],
+            [0, 0, 1, z],
+            [0, 0, 1, 1],
+        ]);
+    }
+    static translateVec2(vec) {
+        return Matrix4.translate(vec.x, vec.y, 0);
+    }
+    static rotateZ(radians) {
+        const cos = Math.cos(radians);
+        const sin = Math.sin(radians);
+        return new Matrix4([
+            [cos, -sin, 0, 0],
+            [sin, cos, 0, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 1],
+        ]);
+    }
+    get(row, col) {
+        if (row < 0 || row > 3 || col < 0 || col > 3) {
+            throw new Error('Matrix4 indices are out of range');
         }
-        result.set(row, col, sum);
-      }
+        return this.elements[col * 4 + row];
     }
-    return result;
-  }
-  toCssMatrix() {
-    return `matrix3d(${this.elements.join(',')})`;
-  }
+    set(row, col, value) {
+        if (row < 0 || row > 3 || col < 0 || col > 3) {
+            throw new Error('Matrix4 indices are out of range');
+        }
+        this.elements[col * 4 + row] = value;
+    }
+    multiply(other) {
+        const result = Matrix4.zero();
+        for (let row = 0; row < 4; ++row) {
+            for (let col = 0; col < 4; ++col) {
+                let sum = 0;
+                for (let k = 0; k < 4; ++k) {
+                    sum += this.get(row, k) * other.get(k, col);
+                }
+                result.set(row, col, sum);
+            }
+        }
+        return result;
+    }
+    toCssMatrix() {
+        return `matrix3d(${this.elements.join(',')})`;
+    }
 }
 //# sourceMappingURL=math.js.map

dist/collection/utils/math.spec.js

 import { Vec2 } from "./math";
 describe('vec2dAngleToSigned', () => {
-  it('returns the signed angle between two vectors', () => {
-    expect(Vec2.signedAngle(new Vec2(1, 0), new Vec2(0, 1))).toBeCloseTo(Math.PI / 2);
-    expect(Vec2.signedAngle(new Vec2(0, 1), new Vec2(1, 0))).toBeCloseTo(-Math.PI / 2);
-    expect(Vec2.signedAngle(new Vec2(1, 0), new Vec2(-1, 0))).toBeCloseTo(Math.PI);
-    expect(Vec2.signedAngle(new Vec2(1, 0), new Vec2(1, 0))).toBeCloseTo(0);
-  });
+    it('returns the signed angle between two vectors', () => {
+        expect(Vec2.signedAngle(new Vec2(1, 0), new Vec2(0, 1))).toBeCloseTo(Math.PI / 2);
+        expect(Vec2.signedAngle(new Vec2(0, 1), new Vec2(1, 0))).toBeCloseTo(-Math.PI / 2);
+        expect(Vec2.signedAngle(new Vec2(1, 0), new Vec2(-1, 0))).toBeCloseTo(Math.PI);
+        expect(Vec2.signedAngle(new Vec2(1, 0), new Vec2(1, 0))).toBeCloseTo(0);
+    });
 });
 //# sourceMappingURL=math.spec.js.map

dist/dough-js/dough-js.esm.js

@@ -1,2 +0,2 @@
-import{p as t,b as e}from"./p-de989b49.js";export{s as setNonce}from"./p-de989b49.js";const o=()=>{const e=import.meta.url;const o={};if(e!==""){o.resourcesUrl=new URL(".",e).href}return t(o)};o().then((t=>e([["p-dfb80029",[[1,"dough-draggable",{adhesion:[2],viscosity:[2],active:[32],deltaX:[32],deltaY:[32],detached:[32]}],[1,"dough-pressable",{adhesion:[2],viscosity:[2],active:[32],deltaX:[32],deltaY:[32]}],[1,"dough-all-purpose-flour",{active:[4],adhesion:[2],viscosity:[2],originX:[2,"origin-x"],originY:[2,"origin-y"],targetX:[2,"target-x"],targetY:[2,"target-y"],matrix:[32],smoothDeltaX:[32],smoothDeltaY:[32]}]]]],t)));
+import{p as t,b as a}from"./p-03fcf3c8.js";export{s as setNonce}from"./p-03fcf3c8.js";import{g as e}from"./p-e1255160.js";const i=()=>{const a=import.meta.url;const e={};if(a!==""){e.resourcesUrl=new URL(".",a).href}return t(e)};i().then((async t=>{await e();return a([["p-be9577a4",[[1,"dough-draggable",{adhesion:[2],viscosity:[2],active:[32],deltaX:[32],deltaY:[32],detached:[32]}],[1,"dough-pressable",{adhesion:[2],viscosity:[2],active:[32],deltaX:[32],deltaY:[32]}],[1,"dough-all-purpose-flour",{active:[4],adhesion:[2],viscosity:[2],originX:[2,"origin-x"],originY:[2,"origin-y"],targetX:[2,"target-x"],targetY:[2,"target-y"],matrix:[32],smoothDeltaX:[32],smoothDeltaY:[32]},null,{active:["activeChanged"],originX:["originXChanged"],originY:["originYChanged"],targetX:["targetXChanged"],targetY:["targetYChanged"]}]]]],t)}));
 //# sourceMappingURL=dough-js.esm.js.map

dist/esm/dough-all-purpose-flour_3.entry.js

@@ -1,399 +0,400 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-4abcd53d.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-7cb02b44.js';
 
 function deg2rad(deg) {
-  return deg * (Math.PI / 180);
+    return deg * (Math.PI / 180);
 }
 class Vec2 {
-  constructor(x, y) {
-    this._x = x;
-    this._y = y;
-  }
-  get x() {
-    return this._x;
-  }
-  get y() {
-    return this._y;
-  }
-  static zero() {
-    return new Vec2(0, 0);
-  }
-  get length() {
-    return Math.sqrt(this.x ** 2 + this.y ** 2);
-  }
-  static signedAngle(a, b) {
-    return Math.atan2(b.y, b.x) - Math.atan2(a.y, a.x);
-  }
-  static fullCircleAngle(target, source) {
-    const a = source !== null && source !== void 0 ? source : new Vec2(1, 0);
-    const b = target;
-    const rawAngle = Vec2.signedAngle(a, b);
-    if (rawAngle < 0.0) {
-      return 2 * Math.PI + rawAngle;
+    constructor(x, y) {
+        this._x = x;
+        this._y = y;
     }
-    else {
-      return rawAngle;
+    get x() {
+        return this._x;
     }
-  }
+    get y() {
+        return this._y;
+    }
+    static zero() {
+        return new Vec2(0, 0);
+    }
+    get length() {
+        return Math.sqrt(this.x ** 2 + this.y ** 2);
+    }
+    static signedAngle(a, b) {
+        return Math.atan2(b.y, b.x) - Math.atan2(a.y, a.x);
+    }
+    static fullCircleAngle(target, source) {
+        const a = source !== null && source !== void 0 ? source : new Vec2(1, 0);
+        const b = target;
+        const rawAngle = Vec2.signedAngle(a, b);
+        if (rawAngle < 0.0) {
+            return 2 * Math.PI + rawAngle;
+        }
+        else {
+            return rawAngle;
+        }
+    }
 }
 class Matrix4 {
-  constructor(values) {
-    this.elements = new Array(16);
-    for (let row = 0; row < 4; ++row) {
-      for (let col = 0; col < 4; ++col) {
-        this.set(row, col, values[row][col]);
-      }
+    constructor(values) {
+        this.elements = new Array(16);
+        for (let row = 0; row < 4; ++row) {
+            for (let col = 0; col < 4; ++col) {
+                this.set(row, col, values[row][col]);
+            }
+        }
     }
-  }
-  static zero() {
-    return new Matrix4([
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-    ]);
-  }
-  static identity() {
-    return new Matrix4([
-      [1, 0, 0, 0],
-      [0, 1, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 0, 1],
-    ]);
-  }
-  static skew(alphaRadians, betaRadians) {
-    const a = Math.tan(alphaRadians);
-    const b = Math.tan(betaRadians);
-    return new Matrix4([
-      [1, a, 0, 0],
-      [b, 1, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 1, 1],
-    ]);
-  }
-  static scale(x, y, z) {
-    return new Matrix4([
-      [x, 0, 0, 0],
-      [0, y, 0, 0],
-      [0, 0, z, 0],
-      [0, 0, 1, 1],
-    ]);
-  }
-  static translate(x, y, z) {
-    return new Matrix4([
-      [1, 0, 0, x],
-      [0, 1, 0, y],
-      [0, 0, 1, z],
-      [0, 0, 1, 1],
-    ]);
-  }
-  static translateVec2(vec) {
-    return Matrix4.translate(vec.x, vec.y, 0);
-  }
-  static rotateZ(radians) {
-    const cos = Math.cos(radians);
-    const sin = Math.sin(radians);
-    return new Matrix4([
-      [cos, -sin, 0, 0],
-      [sin, cos, 0, 0],
-      [0, 0, 1, 0],
-      [0, 0, 1, 1],
-    ]);
-  }
-  get(row, col) {
-    if (row < 0 || row > 3 || col < 0 || col > 3) {
-      throw new Error('Matrix4 indices are out of range');
+    static zero() {
+        return new Matrix4([
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+        ]);
     }
-    return this.elements[col * 4 + row];
-  }
-  set(row, col, value) {
-    if (row < 0 || row > 3 || col < 0 || col > 3) {
-      throw new Error('Matrix4 indices are out of range');
+    static identity() {
+        return new Matrix4([
+            [1, 0, 0, 0],
+            [0, 1, 0, 0],
+            [0, 0, 1, 0],
+            [0, 0, 0, 1],
+        ]);
     }
-    this.elements[col * 4 + row] = value;
-  }
-  multiply(other) {
-    const result = Matrix4.zero();
-    for (let row = 0; row < 4; ++row) {
-      for (let col = 0; col < 4; ++col) {
-        let sum = 0;
-        for (let k = 0; k < 4; ++k) {
-          sum += this.get(row, k) * other.get(k, col);
+    static skew(alphaRadians, betaRadians) {
+        const a = Math.tan(alphaRadians);
+        const b = Math.tan(betaRadians);
+        return new Matrix4([
+            [1, a, 0, 0],
+            [b, 1, 0, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 1],
+        ]);
+    }
+    static scale(x, y, z) {
+        return new Matrix4([
+            [x, 0, 0, 0],
+            [0, y, 0, 0],
+            [0, 0, z, 0],
+            [0, 0, 1, 1],
+        ]);
+    }
+    static translate(x, y, z) {
+        return new Matrix4([
+            [1, 0, 0, x],
+            [0, 1, 0, y],
+            [0, 0, 1, z],
+            [0, 0, 1, 1],
+        ]);
+    }
+    static translateVec2(vec) {
+        return Matrix4.translate(vec.x, vec.y, 0);
+    }
+    static rotateZ(radians) {
+        const cos = Math.cos(radians);
+        const sin = Math.sin(radians);
+        return new Matrix4([
+            [cos, -sin, 0, 0],
+            [sin, cos, 0, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 1],
+        ]);
+    }
+    get(row, col) {
+        if (row < 0 || row > 3 || col < 0 || col > 3) {
+            throw new Error('Matrix4 indices are out of range');
         }
-        result.set(row, col, sum);
-      }
+        return this.elements[col * 4 + row];
     }
-    return result;
-  }
-  toCssMatrix() {
-    return `matrix3d(${this.elements.join(',')})`;
-  }
+    set(row, col, value) {
+        if (row < 0 || row > 3 || col < 0 || col > 3) {
+            throw new Error('Matrix4 indices are out of range');
+        }
+        this.elements[col * 4 + row] = value;
+    }
+    multiply(other) {
+        const result = Matrix4.zero();
+        for (let row = 0; row < 4; ++row) {
+            for (let col = 0; col < 4; ++col) {
+                let sum = 0;
+                for (let k = 0; k < 4; ++k) {
+                    sum += this.get(row, k) * other.get(k, col);
+                }
+                result.set(row, col, sum);
+            }
+        }
+        return result;
+    }
+    toCssMatrix() {
+        return `matrix3d(${this.elements.join(',')})`;
+    }
 }
 
-const doughAllPurposeFlourCss = ":host{display:block;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}";
+const doughAllPurposeFlourScss = ":host{display:block;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}";
+const DoughAllPurposeFlourStyle0 = doughAllPurposeFlourScss;
 
 const DoughAllPurposeFlour = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.matrix = Matrix4.identity();
-    this.smoothDeltaX = 0;
-    this.smoothDeltaY = 0;
-    this.active = false;
-    this.adhesion = 4;
-    this.viscosity = 4;
-    this.originX = 0;
-    this.originY = 0;
-    this.targetX = 0;
-    this.targetY = 0;
-  }
-  activeChanged() {
-    clearInterval(this.smoothDeltaYInterval);
-    clearInterval(this.smoothDeltaXInterval);
-    if (!this.active) {
-      this.smoothDeltaXChange();
-      this.smoothDeltaYChange();
-    }
-  }
-  originXChanged() {
-    clearInterval(this.smoothDeltaXInterval);
-    if (!this.active)
-      this.smoothDeltaXChange();
-    else
-      this.updatePosition();
-  }
-  originYChanged() {
-    clearInterval(this.smoothDeltaYInterval);
-    if (!this.active)
-      this.smoothDeltaYChange();
-    else
-      this.updatePosition();
-  }
-  targetXChanged() {
-    clearInterval(this.smoothDeltaXInterval);
-    if (!this.active)
-      this.smoothDeltaXChange();
-    else
-      this.updatePosition();
-  }
-  targetYChanged() {
-    clearInterval(this.smoothDeltaYInterval);
-    if (!this.active)
-      this.smoothDeltaYChange();
-    else
-      this.updatePosition();
-  }
-  smoothDeltaXChange() {
-    this.smoothDeltaX = this.targetX - this.originX;
-    // exponential decay of delta as a function of viscosity
-    this.smoothDeltaXInterval = setInterval(() => {
-      this.smoothDeltaX = this.smoothDeltaX * (1 - 1 / this.viscosity);
-      console.log(this.smoothDeltaX);
-      if (Math.abs(this.smoothDeltaX) < 0.01) {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.matrix = Matrix4.identity();
         this.smoothDeltaX = 0;
-        clearInterval(this.smoothDeltaXInterval);
-      }
-      this.updatePosition();
-    }, 1000 / 60);
-  }
-  smoothDeltaYChange() {
-    this.smoothDeltaY = this.targetY - this.originY;
-    this.smoothDeltaYInterval = setInterval(() => {
-      this.smoothDeltaY = this.smoothDeltaY * (1 - 1 / this.viscosity);
-      if (Math.abs(this.smoothDeltaY) < 0.01) {
         this.smoothDeltaY = 0;
+        this.active = false;
+        this.adhesion = 4;
+        this.viscosity = 4;
+        this.originX = 0;
+        this.originY = 0;
+        this.targetX = 0;
+        this.targetY = 0;
+    }
+    activeChanged() {
         clearInterval(this.smoothDeltaYInterval);
-      }
-      this.updatePosition();
-    }, 1000 / 60);
-  }
-  connectedCallback() {
-    this.updatePosition();
-  }
-  scaleNumber(input, inputRange, outputRange) {
-    const [inputMin, inputMax] = inputRange;
-    const [outputMin, outputMax] = outputRange;
-    if (input < inputMin || input > inputMax) {
-      throw new Error("Input is out of the input range!");
+        clearInterval(this.smoothDeltaXInterval);
+        if (!this.active) {
+            this.smoothDeltaXChange();
+            this.smoothDeltaYChange();
+        }
     }
-    return ((input - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) + outputMin;
-  }
-  updatePosition() {
-    const STRECH_CAP = 100;
-    const deltaX = this.active ? this.targetX - this.originX : this.smoothDeltaX;
-    const deltaY = this.active ? this.targetY - this.originY : this.smoothDeltaY;
-    const delta = new Vec2(deltaX, deltaY);
-    const skewSize = this.scaleNumber((Math.min(STRECH_CAP, delta.length / this.viscosity)), [0, (STRECH_CAP)], [0, deg2rad(40)]);
-    const deltaAngle = Vec2.fullCircleAngle(delta, new Vec2(1, 1));
-    const skew = Matrix4.skew(skewSize, skewSize);
-    const rotateToward = Matrix4.rotateZ(deltaAngle);
-    const rotateAway = Matrix4.rotateZ(-deltaAngle);
-    const squish = rotateToward.multiply(skew).multiply(rotateAway);
-    const translate = Matrix4.translate(delta.x / this.adhesion, delta.y / this.adhesion, 0);
-    this.matrix = translate.multiply(squish);
-  }
-  render() {
-    return (h(Host, { style: { transform: this.matrix.toCssMatrix() } }, h("slot", null)));
-  }
-  static get watchers() { return {
-    "active": ["activeChanged"],
-    "originX": ["originXChanged"],
-    "originY": ["originYChanged"],
-    "targetX": ["targetXChanged"],
-    "targetY": ["targetYChanged"]
-  }; }
+    originXChanged() {
+        clearInterval(this.smoothDeltaXInterval);
+        if (!this.active)
+            this.smoothDeltaXChange();
+        else
+            this.updatePosition();
+    }
+    originYChanged() {
+        clearInterval(this.smoothDeltaYInterval);
+        if (!this.active)
+            this.smoothDeltaYChange();
+        else
+            this.updatePosition();
+    }
+    targetXChanged() {
+        clearInterval(this.smoothDeltaXInterval);
+        if (!this.active)
+            this.smoothDeltaXChange();
+        else
+            this.updatePosition();
+    }
+    targetYChanged() {
+        clearInterval(this.smoothDeltaYInterval);
+        if (!this.active)
+            this.smoothDeltaYChange();
+        else
+            this.updatePosition();
+    }
+    smoothDeltaXChange() {
+        this.smoothDeltaX = this.targetX - this.originX;
+        // exponential decay of delta as a function of viscosity
+        this.smoothDeltaXInterval = setInterval(() => {
+            this.smoothDeltaX = this.smoothDeltaX * (1 - 1 / this.viscosity);
+            if (Math.abs(this.smoothDeltaX) < 0.01) {
+                this.smoothDeltaX = 0;
+                clearInterval(this.smoothDeltaXInterval);
+            }
+            this.updatePosition();
+        }, 1000 / 60);
+    }
+    smoothDeltaYChange() {
+        this.smoothDeltaY = this.targetY - this.originY;
+        this.smoothDeltaYInterval = setInterval(() => {
+            this.smoothDeltaY = this.smoothDeltaY * (1 - 1 / this.viscosity);
+            if (Math.abs(this.smoothDeltaY) < 0.01) {
+                this.smoothDeltaY = 0;
+                clearInterval(this.smoothDeltaYInterval);
+            }
+            this.updatePosition();
+        }, 1000 / 60);
+    }
+    connectedCallback() {
+        this.updatePosition();
+    }
+    scaleNumber(input, inputRange, outputRange) {
+        const [inputMin, inputMax] = inputRange;
+        const [outputMin, outputMax] = outputRange;
+        if (input < inputMin || input > inputMax) {
+            throw new Error('Input is out of the input range!');
+        }
+        return ((input - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) + outputMin;
+    }
+    updatePosition() {
+        const STRECH_CAP = 100;
+        const deltaX = this.active ? this.targetX - this.originX : this.smoothDeltaX;
+        const deltaY = this.active ? this.targetY - this.originY : this.smoothDeltaY;
+        const delta = new Vec2(deltaX, deltaY);
+        const skewSize = this.scaleNumber(Math.min(STRECH_CAP, delta.length / this.viscosity), [0, STRECH_CAP], [0, deg2rad(40)]);
+        const deltaAngle = Vec2.fullCircleAngle(delta, new Vec2(1, 1));
+        const skew = Matrix4.skew(skewSize, skewSize);
+        const rotateToward = Matrix4.rotateZ(deltaAngle);
+        const rotateAway = Matrix4.rotateZ(-deltaAngle);
+        const squish = rotateToward.multiply(skew).multiply(rotateAway);
+        const translate = Matrix4.translate(delta.x / this.adhesion, delta.y / this.adhesion, 0);
+        this.matrix = translate.multiply(squish);
+    }
+    render() {
+        return (h(Host, { key: '11332f280af6bca9920bd1a8c83dcab0d136f3ca', style: { transform: this.matrix.toCssMatrix() } }, h("slot", { key: '3a4bb65247c2fc129a91693f2ced373f7d2c80f5' })));
+    }
+    static get watchers() { return {
+        "active": ["activeChanged"],
+        "originX": ["originXChanged"],
+        "originY": ["originYChanged"],
+        "targetX": ["targetXChanged"],
+        "targetY": ["targetYChanged"]
+    }; }
 };
-DoughAllPurposeFlour.style = doughAllPurposeFlourCss;
+DoughAllPurposeFlour.style = DoughAllPurposeFlourStyle0;
 
-const doughDraggableCss = ":host{display:block;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}";
+const doughDraggableScss = ":host{display:block;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}";
+const DoughDraggableStyle0 = doughDraggableScss;
 
 const BREAK_DISTANCE = 50;
 const DoughDraggable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.doughDragStart = createEvent(this, "doughDragStart", 7);
-    this.doughDragMove = createEvent(this, "doughDragMove", 7);
-    this.doughDragEnd = createEvent(this, "doughDragEnd", 7);
-    this.startX = 0;
-    this.startY = 0;
-    this.adhesion = 4;
-    this.viscosity = 4;
-    this.active = false;
-    this.deltaX = 0;
-    this.deltaY = 0;
-    this.detached = false;
-  }
-  onStart(e) {
-    this.active = true;
-    if (e instanceof MouseEvent) {
-      this.startX = e.clientX;
-      this.startY = e.clientY;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.doughDragStart = createEvent(this, "doughDragStart", 7);
+        this.doughDragMove = createEvent(this, "doughDragMove", 7);
+        this.doughDragEnd = createEvent(this, "doughDragEnd", 7);
+        this.startX = 0;
+        this.startY = 0;
+        this.adhesion = 4;
+        this.viscosity = 4;
+        this.active = false;
+        this.deltaX = 0;
+        this.deltaY = 0;
+        this.detached = false;
     }
-    else {
-      this.startX = e.touches[0].clientX;
-      this.startY = e.touches[0].clientY;
+    onStart(e) {
+        this.active = true;
+        if (e instanceof MouseEvent) {
+            this.startX = e.clientX;
+            this.startY = e.clientY;
+        }
+        else {
+            this.startX = e.touches[0].clientX;
+            this.startY = e.touches[0].clientY;
+        }
+        document.addEventListener('mousemove', this.onMove.bind(this));
+        document.addEventListener('mouseup', this.onEnd.bind(this));
+        document.addEventListener('touchmove', this.onMove.bind(this));
+        document.addEventListener('touchend', this.onEnd.bind(this));
     }
-    document.addEventListener('mousemove', this.onMove.bind(this));
-    document.addEventListener('mouseup', this.onEnd.bind(this));
-    document.addEventListener('touchmove', this.onMove.bind(this));
-    document.addEventListener('touchend', this.onEnd.bind(this));
-  }
-  onMove(e) {
-    if (!this.active)
-      return;
-    let x = 0;
-    let y = 0;
-    if (e instanceof MouseEvent) {
-      x = e.clientX;
-      y = e.clientY;
+    onMove(e) {
+        if (!this.active)
+            return;
+        let x = 0;
+        let y = 0;
+        if (e instanceof MouseEvent) {
+            x = e.clientX;
+            y = e.clientY;
+        }
+        else {
+            x = e.touches[0].clientX;
+            y = e.touches[0].clientY;
+        }
+        this.deltaX = x - this.startX;
+        this.deltaY = y - this.startY;
+        const vect = new Vec2(this.deltaX, this.deltaY);
+        const magnitude = vect.length;
+        if (!this.detached && BREAK_DISTANCE * this.adhesion < magnitude) {
+            this.el.classList.add('detached');
+            this.detached = true;
+            this.doughDragStart.emit({ x, y });
+        }
+        if (this.detached) {
+            this.doughDragMove.emit({ x, y });
+        }
     }
-    else {
-      x = e.touches[0].clientX;
-      y = e.touches[0].clientY;
+    onEnd(e) {
+        if (!this.active)
+            return;
+        if (e instanceof MouseEvent) {
+            this.doughDragEnd.emit({ x: e.clientX, y: e.clientY });
+        }
+        else {
+            this.doughDragEnd.emit({ x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY });
+        }
+        this.active = false;
+        this.detached = false;
+        this.el.classList.remove('detached');
+        this.startX = 0;
+        this.startY = 0;
+        // Remove event listeners from the document
+        document.removeEventListener('mousemove', this.onMove.bind(this));
+        document.removeEventListener('mouseup', this.onEnd.bind(this));
+        document.removeEventListener('touchmove', this.onMove.bind(this));
+        document.removeEventListener('touchend', this.onEnd.bind(this));
     }
-    this.deltaX = x - this.startX;
-    this.deltaY = y - this.startY;
-    const vect = new Vec2(this.deltaX, this.deltaY);
-    const magnitude = vect.length;
-    if (!this.detached && BREAK_DISTANCE * this.adhesion < magnitude) {
-      this.el.classList.add('detached');
-      this.detached = true;
-      this.doughDragStart.emit({ x, y });
+    render() {
+        const translateX = this.detached ? this.deltaX : 0;
+        const translateY = this.detached ? this.deltaY : 0;
+        return (h(Host, { key: '0d4816ffd463afbe96c2070a030b3e0c6731babc', onTouchStart: this.onStart.bind(this), onMouseDown: this.onStart.bind(this), style: {
+                transform: `translate(${translateX}px, ${translateY}px)`
+            } }, h("dough-all-purpose-flour", { key: '6a3f727f0e8c64b0b3021d4000dc8423d6605a86', active: this.active, originX: 0, originY: 0, targetX: this.detached ? 0 : this.deltaX, targetY: this.detached ? 0 : this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, h("slot", { key: 'd33d274618dc60d9907a37bdc0dee25709f14f18' }))));
     }
-    if (this.detached) {
-      this.doughDragMove.emit({ x, y });
-    }
-  }
-  onEnd(e) {
-    if (!this.active)
-      return;
-    if (e instanceof MouseEvent) {
-      this.doughDragEnd.emit({ x: e.clientX, y: e.clientY });
-    }
-    else {
-      this.doughDragEnd.emit({ x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY });
-    }
-    this.active = false;
-    this.detached = false;
-    this.el.classList.remove('detached');
-    this.startX = 0;
-    this.startY = 0;
-    // Remove event listeners from the document
-    document.removeEventListener('mousemove', this.onMove.bind(this));
-    document.removeEventListener('mouseup', this.onEnd.bind(this));
-    document.removeEventListener('touchmove', this.onMove.bind(this));
-    document.removeEventListener('touchend', this.onEnd.bind(this));
-  }
-  render() {
-    const translateX = this.detached ? this.deltaX : 0;
-    const translateY = this.detached ? this.deltaY : 0;
-    return (h(Host, { onTouchStart: this.onStart.bind(this), onMouseDown: this.onStart.bind(this), style: {
-        transform: `translate(${translateX}px, ${translateY}px)`
-      } }, h("dough-all-purpose-flour", { active: this.active, originX: 0, originY: 0, targetX: this.detached ? 0 : this.deltaX, targetY: this.detached ? 0 : this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
+    get el() { return getElement(this); }
 };
-DoughDraggable.style = doughDraggableCss;
+DoughDraggable.style = DoughDraggableStyle0;
 
-const doughPressableCss = ":host{display:block}";
+const doughPressableScss = ":host{display:block}";
+const DoughPressableStyle0 = doughPressableScss;
 
 const DoughPressable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.startX = 0;
-    this.startY = 0;
-    this.adhesion = 8;
-    this.viscosity = 10;
-    this.active = false;
-    this.deltaX = 0;
-    this.deltaY = 0;
-  }
-  onStart(e) {
-    console.log(e);
-    this.active = true;
-    if (e instanceof MouseEvent) {
-      this.startX = e.clientX;
-      this.startY = e.clientY;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.startX = 0;
+        this.startY = 0;
+        this.adhesion = 8;
+        this.viscosity = 10;
+        this.active = false;
+        this.deltaX = 0;
+        this.deltaY = 0;
     }
-    else {
-      this.startX = e.touches[0].clientX;
-      this.startY = e.touches[0].clientY;
+    onStart(e) {
+        this.active = true;
+        if (e instanceof MouseEvent) {
+            this.startX = e.clientX;
+            this.startY = e.clientY;
+        }
+        else {
+            this.startX = e.touches[0].clientX;
+            this.startY = e.touches[0].clientY;
+        }
+        // Add event listeners to the document
+        document.addEventListener('mousemove', this.onMove.bind(this));
+        document.addEventListener('mouseup', this.onEnd.bind(this));
+        document.addEventListener('touchmove', this.onMove.bind(this));
+        document.addEventListener('touchend', this.onEnd.bind(this));
     }
-    // Add event listeners to the document
-    document.addEventListener('mousemove', this.onMove.bind(this));
-    document.addEventListener('mouseup', this.onEnd.bind(this));
-    document.addEventListener('touchmove', this.onMove.bind(this));
-    document.addEventListener('touchend', this.onEnd.bind(this));
-  }
-  onMove(e) {
-    if (!this.active)
-      return;
-    let x = 0;
-    let y = 0;
-    if (e instanceof MouseEvent) {
-      x = e.clientX;
-      y = e.clientY;
+    onMove(e) {
+        if (!this.active)
+            return;
+        let x = 0;
+        let y = 0;
+        if (e instanceof MouseEvent) {
+            x = e.clientX;
+            y = e.clientY;
+        }
+        else {
+            x = e.touches[0].clientX;
+            y = e.touches[0].clientY;
+        }
+        this.deltaX = x - this.startX;
+        this.deltaY = y - this.startY;
     }
-    else {
-      x = e.touches[0].clientX;
-      y = e.touches[0].clientY;
+    onEnd(_) {
+        this.active = false;
+        this.deltaX = 0;
+        this.deltaY = 0;
+        this.startX = 0;
+        this.startY = 0;
+        // Remove event listeners from the document
+        document.removeEventListener('mousemove', this.onMove.bind(this));
+        document.removeEventListener('mouseup', this.onEnd.bind(this));
+        document.removeEventListener('touchmove', this.onMove.bind(this));
+        document.removeEventListener('touchend', this.onEnd.bind(this));
     }
-    this.deltaX = x - this.startX;
-    this.deltaY = y - this.startY;
-  }
-  onEnd(_) {
-    this.active = false;
-    this.deltaX = 0;
-    this.deltaY = 0;
-    this.startX = 0;
-    this.startY = 0;
-    // Remove event listeners from the document
-    document.removeEventListener('mousemove', this.onMove.bind(this));
-    document.removeEventListener('mouseup', this.onEnd.bind(this));
-    document.removeEventListener('touchmove', this.onMove.bind(this));
-    document.removeEventListener('touchend', this.onEnd.bind(this));
-  }
-  render() {
-    return (h(Host, { onMouseDown: this.onStart.bind(this), onTouchStart: this.onStart.bind(this) }, h("dough-all-purpose-flour", { active: this.active, originX: 0, originY: 0, targetX: this.deltaX, targetY: this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, h("slot", null))));
-  }
+    render() {
+        return (h(Host, { key: '97fb8244d8ff58a47dcf0a164d6ea4786501502d', onMouseDown: this.onStart.bind(this), onTouchStart: this.onStart.bind(this) }, h("dough-all-purpose-flour", { key: '65b88ae65141688306e67f550b2b7b34b22b7adc', active: this.active, originX: 0, originY: 0, targetX: this.deltaX, targetY: this.deltaY, adhesion: this.adhesion, viscosity: this.viscosity }, h("slot", { key: 'aea525432dc163519f56b9e355b657485dce41e0' }))));
+    }
 };
-DoughPressable.style = doughPressableCss;
+DoughPressable.style = DoughPressableStyle0;
 
@@ -400,0 +401,0 @@ export { DoughAllPurposeFlour as dough_all_purpose_flour, DoughDraggable as dough_draggable, DoughPressable as dough_pressable };

dist/esm/dough-js.js

@@ -1,6 +0,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-4abcd53d.js';
-export { s as setNonce } from './index-4abcd53d.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-7cb02b44.js';
+export { s as setNonce } from './index-7cb02b44.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
- Stencil Client Patch Browser v4.0.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.14.1 | MIT Licensed | https://stenciljs.com
  */
@@ -16,6 +17,7 @@ const patchBrowser = () => {
 
-patchBrowser().then(options => {
-  return bootstrapLazy([["dough-all-purpose-flour_3",[[1,"dough-draggable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32],"detached":[32]}],[1,"dough-pressable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32]}],[1,"dough-all-purpose-flour",{"active":[4],"adhesion":[2],"viscosity":[2],"originX":[2,"origin-x"],"originY":[2,"origin-y"],"targetX":[2,"target-x"],"targetY":[2,"target-y"],"matrix":[32],"smoothDeltaX":[32],"smoothDeltaY":[32]}]]]], options);
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["dough-all-purpose-flour_3",[[1,"dough-draggable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32],"detached":[32]}],[1,"dough-pressable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32]}],[1,"dough-all-purpose-flour",{"active":[4],"adhesion":[2],"viscosity":[2],"originX":[2,"origin-x"],"originY":[2,"origin-y"],"targetX":[2,"target-x"],"targetY":[2,"target-y"],"matrix":[32],"smoothDeltaX":[32],"smoothDeltaY":[32]},null,{"active":["activeChanged"],"originX":["originXChanged"],"originY":["originYChanged"],"targetX":["targetXChanged"],"targetY":["targetYChanged"]}]]]], options);
 });
 
 //# sourceMappingURL=dough-js.js.map

dist/esm/loader.js

@@ -1,7 +0,9 @@
-import { b as bootstrapLazy } from './index-4abcd53d.js';
-export { s as setNonce } from './index-4abcd53d.js';
+import { b as bootstrapLazy } from './index-7cb02b44.js';
+export { s as setNonce } from './index-7cb02b44.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
 
-const defineCustomElements = (win, options) => {
+const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return bootstrapLazy([["dough-all-purpose-flour_3",[[1,"dough-draggable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32],"detached":[32]}],[1,"dough-pressable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32]}],[1,"dough-all-purpose-flour",{"active":[4],"adhesion":[2],"viscosity":[2],"originX":[2,"origin-x"],"originY":[2,"origin-y"],"targetX":[2,"target-x"],"targetY":[2,"target-y"],"matrix":[32],"smoothDeltaX":[32],"smoothDeltaY":[32]}]]]], options);
+  await globalScripts();
+  return bootstrapLazy([["dough-all-purpose-flour_3",[[1,"dough-draggable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32],"detached":[32]}],[1,"dough-pressable",{"adhesion":[2],"viscosity":[2],"active":[32],"deltaX":[32],"deltaY":[32]}],[1,"dough-all-purpose-flour",{"active":[4],"adhesion":[2],"viscosity":[2],"originX":[2,"origin-x"],"originY":[2,"origin-y"],"targetX":[2,"target-x"],"targetY":[2,"target-y"],"matrix":[32],"smoothDeltaX":[32],"smoothDeltaY":[32]},null,{"active":["activeChanged"],"originX":["originXChanged"],"originY":["originYChanged"],"targetX":["targetXChanged"],"targetY":["targetYChanged"]}]]]], options);
 };
@@ -8,0 +10,0 @@

dist/types/components.d.ts

@@ -82,3 +82,16 @@ /* eslint-disable */
     };
+    interface HTMLDoughDraggableElementEventMap {
+        "doughDragStart": { x: number, y: number };
+        "doughDragMove": { x: number, y: number };
+        "doughDragEnd": { x: number, y: number };
+    }
     interface HTMLDoughDraggableElement extends Components.DoughDraggable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDoughDraggableElementEventMap>(type: K, listener: (this: HTMLDoughDraggableElement, ev: DoughDraggableCustomEvent<HTMLDoughDraggableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDoughDraggableElementEventMap>(type: K, listener: (this: HTMLDoughDraggableElement, ev: DoughDraggableCustomEvent<HTMLDoughDraggableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
@@ -85,0 +98,0 @@ var HTMLDoughDraggableElement: {

dist/types/components/dough-all-purpose-flour/dough-all-purpose-flour.d.ts

@@ -1,54 +0,54 @@
-import { Matrix4 } from "../../utils/math";
+import { Matrix4 } from '../../utils/math';
 export declare class DoughAllPurposeFlour {
-  matrix: Matrix4;
-  smoothDeltaX: number;
-  smoothDeltaY: number;
-  private smoothDeltaXInterval;
-  private smoothDeltaYInterval;
-  /**
-   * Set active to true when you want to manipulate the dough. Set to false when you want it to smooth back to its original position.
-   * @type {boolean}
-   */
-  active: boolean;
-  activeChanged(): void;
-  /**
-   * The adhesion of the dough. The higher the number, the more the dough will stick to its original position.
-   * @type {number}
-   */
-  adhesion: number;
-  /**
-   * The viscosity of the dough. The higher the number, the more the dough will resist movement.
-   * @type {number}
-   */
-  viscosity: number;
-  /**
-   * The origin X coordinate of the dough. This is the point that the dough will try to return to.
-   * @type {number}
-   */
-  originX: number;
-  originXChanged(): void;
-  /**
-   * The origin Y coordinate of the dough. This is the point that the dough will try to return to.
-   * @type {number}
-   */
-  originY: number;
-  originYChanged(): void;
-  /**
-   * The target X coordinate of the dough. This is the point that the dough will try to move to.
-   * @type {number}
-   */
-  targetX: number;
-  targetXChanged(): void;
-  /**
-   * The target Y coordinate of the dough. This is the point that the dough will try to move to.
-   * @type {number}
-   */
-  targetY: number;
-  targetYChanged(): void;
-  smoothDeltaXChange(): void;
-  smoothDeltaYChange(): void;
-  connectedCallback(): void;
-  scaleNumber(input: number, inputRange: [number, number], outputRange: [number, number]): number;
-  private updatePosition;
-  render(): any;
+    matrix: Matrix4;
+    smoothDeltaX: number;
+    smoothDeltaY: number;
+    private smoothDeltaXInterval;
+    private smoothDeltaYInterval;
+    /**
+     * Set active to true when you want to manipulate the dough. Set to false when you want it to smooth back to its original position.
+     * @type {boolean}
+     */
+    active: boolean;
+    activeChanged(): void;
+    /**
+     * The adhesion of the dough. The higher the number, the more the dough will stick to its original position.
+     * @type {number}
+     */
+    adhesion: number;
+    /**
+     * The viscosity of the dough. The higher the number, the more the dough will resist movement.
+     * @type {number}
+     */
+    viscosity: number;
+    /**
+     * The origin X coordinate of the dough. This is the point that the dough will try to return to.
+     * @type {number}
+     */
+    originX: number;
+    originXChanged(): void;
+    /**
+     * The origin Y coordinate of the dough. This is the point that the dough will try to return to.
+     * @type {number}
+     */
+    originY: number;
+    originYChanged(): void;
+    /**
+     * The target X coordinate of the dough. This is the point that the dough will try to move to.
+     * @type {number}
+     */
+    targetX: number;
+    targetXChanged(): void;
+    /**
+     * The target Y coordinate of the dough. This is the point that the dough will try to move to.
+     * @type {number}
+     */
+    targetY: number;
+    targetYChanged(): void;
+    smoothDeltaXChange(): void;
+    smoothDeltaYChange(): void;
+    connectedCallback(): void;
+    scaleNumber(input: number, inputRange: [number, number], outputRange: [number, number]): number;
+    private updatePosition;
+    render(): any;
 }

dist/types/components/dough-draggable/dough-draggable.d.ts

 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DoughDraggable {
-  el: HTMLElement;
-  private startX;
-  private startY;
-  doughDragStart: EventEmitter<{
-    x: number;
-    y: number;
-  }>;
-  doughDragMove: EventEmitter<{
-    x: number;
-    y: number;
-  }>;
-  doughDragEnd: EventEmitter<{
-    x: number;
-    y: number;
-  }>;
-  /**
-   * The adhesion of the dough. The higher the number, the more the dough will stick to its original position.
-   * @type {number}
-   */
-  adhesion: number;
-  /**
-   * The viscosity of the dough. The higher the number, the more the dough will resist movement.
-   * @type {number}
-   */
-  viscosity: number;
-  active: boolean;
-  deltaX: number;
-  deltaY: number;
-  detached: boolean;
-  private onStart;
-  private onMove;
-  private onEnd;
-  render(): any;
+    el: HTMLElement;
+    private startX;
+    private startY;
+    doughDragStart: EventEmitter<{
+        x: number;
+        y: number;
+    }>;
+    doughDragMove: EventEmitter<{
+        x: number;
+        y: number;
+    }>;
+    doughDragEnd: EventEmitter<{
+        x: number;
+        y: number;
+    }>;
+    /**
+     * The adhesion of the dough. The higher the number, the more the dough will stick to its original position.
+     * @type {number}
+     */
+    adhesion: number;
+    /**
+     * The viscosity of the dough. The higher the number, the more the dough will resist movement.
+     * @type {number}
+     */
+    viscosity: number;
+    active: boolean;
+    deltaX: number;
+    deltaY: number;
+    detached: boolean;
+    private onStart;
+    private onMove;
+    private onEnd;
+    render(): any;
 }

dist/types/components/dough-pressable/dough-pressable.d.ts

 export declare class DoughPressable {
-  private startX;
-  private startY;
-  /**
- * The adhesion of the dough. The higher the number, the more the dough will stick to its original position.
- * @type {number}
- */
-  adhesion: number;
-  /**
-   * The viscosity of the dough. The higher the number, the more the dough will resist movement.
-   * @type {number}
-   */
-  viscosity: number;
-  active: boolean;
-  deltaX: number;
-  deltaY: number;
-  onStart(e: MouseEvent | TouchEvent): void;
-  onMove(e: MouseEvent | TouchEvent): void;
-  onEnd(_: MouseEvent | TouchEvent): void;
-  render(): any;
+    private startX;
+    private startY;
+    /**
+     * The adhesion of the dough. The higher the number, the more the dough will stick to its original position.
+     * @type {number}
+     */
+    adhesion: number;
+    /**
+     * The viscosity of the dough. The higher the number, the more the dough will resist movement.
+     * @type {number}
+     */
+    viscosity: number;
+    active: boolean;
+    deltaX: number;
+    deltaY: number;
+    onStart(e: MouseEvent | TouchEvent): void;
+    onMove(e: MouseEvent | TouchEvent): void;
+    onEnd(_: MouseEvent | TouchEvent): void;
+    render(): any;
 }

dist/types/stencil-public-runtime.d.ts

@@ -7,2 +7,12 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
     /**
+     * When set to `true` this component will be form-associated. See
+     * https://stenciljs.com/docs/next/form-associated documentation on how to
+     * build form-associated Stencil components that integrate into forms like
+     * native browser elements such as `<input>` and `<textarea>`.
+     *
+     * The {@link AttachInternals} decorator allows for access to the
+     * `ElementInternals` object to modify the associated form.
+     */
+    formAssociated?: boolean;
+    /**
      * Tag name of the web component. Ideally, the tag name must be globally unique,
@@ -66,3 +76,3 @@ * so it's recommended to choose an unique prefix for all your components within the same collection.
      * Stencil uses different heuristics to determine the default name of the attribute,
-     * but using this property, you can override the default behaviour.
+     * but using this property, you can override the default behavior.
      */
@@ -112,2 +122,5 @@ attribute?: string | null;
 }
+export interface AttachInternalsDecorator {
+    (): PropertyDecorator;
+}
 export interface ListenDecorator {
@@ -134,3 +147,3 @@ (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
      *
-     * Using the `passive` option can be used to change the default behaviour.
+     * Using the `passive` option can be used to change the default behavior.
      * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.
@@ -183,2 +196,8 @@ */
 /**
+ * If the `formAssociated` option is set in options passed to the
+ * `@Component()` decorator then this decorator may be used to get access to the
+ * `ElementInternals` instance associated with the component.
+ */
+export declare const AttachInternals: AttachInternalsDecorator;
+/**
  * The `Listen()` decorator is for listening DOM events, including the ones
@@ -479,3 +498,3 @@ * dispatched from `@Events()`.
      * Since the Stencil runtime uses a different interface for children it is
-     * not recommendeded to read the children directly, and is preferable to use
+     * not recommended to read the children directly, and is preferable to use
      * this utility to, for instance, perform a side effect for each child.
@@ -800,2 +819,5 @@ */
         value?: string | string[] | number;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
@@ -882,2 +904,4 @@ interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         alt?: string;
+        crossOrigin?: string;
+        crossorigin?: string;
         decoding?: 'async' | 'auto' | 'sync';
@@ -961,2 +985,5 @@ importance?: 'low' | 'auto' | 'high';
         width?: number | string;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
@@ -1125,2 +1152,3 @@ interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+        height?: number;
         media?: string;
@@ -1131,2 +1159,3 @@ sizes?: string;
         type?: string;
+        width?: number;
     }
@@ -1214,2 +1243,3 @@ interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
         id?: string;
+        inert?: boolean;
         lang?: string;
@@ -1223,2 +1253,3 @@ spellcheck?: 'true' | 'false' | any;
         title?: string;
+        popover?: string | null;
         inputMode?: string;
@@ -1639,4 +1670,10 @@ inputmode?: string;
         onAnimationIterationCapture?: (event: AnimationEvent) => void;
+        onTransitionCancel?: (event: TransitionEvent) => void;
+        onTransitionCancelCapture?: (event: TransitionEvent) => void;
         onTransitionEnd?: (event: TransitionEvent) => void;
         onTransitionEndCapture?: (event: TransitionEvent) => void;
+        onTransitionRun?: (event: TransitionEvent) => void;
+        onTransitionRunCapture?: (event: TransitionEvent) => void;
+        onTransitionStart?: (event: TransitionEvent) => void;
+        onTransitionStartCapture?: (event: TransitionEvent) => void;
     }
@@ -1643,0 +1680,0 @@ }

dist/types/utils/math.d.ts

 export declare function deg2rad(deg: number): number;
 export declare function rad2deg(rad: number): number;
 export declare class Vec2 {
-  private _x;
-  private _y;
-  constructor(x: number, y: number);
-  get x(): number;
-  get y(): number;
-  static zero(): Vec2;
-  get length(): number;
-  static signedAngle(a: Vec2, b: Vec2): number;
-  static fullCircleAngle(target: Vec2, source?: Vec2): number;
+    private _x;
+    private _y;
+    constructor(x: number, y: number);
+    get x(): number;
+    get y(): number;
+    static zero(): Vec2;
+    get length(): number;
+    static signedAngle(a: Vec2, b: Vec2): number;
+    static fullCircleAngle(target: Vec2, source?: Vec2): number;
 }
 export declare class Matrix4 {
-  private elements;
-  constructor(values: number[][]);
-  static zero(): Matrix4;
-  static identity(): Matrix4;
-  static skew(alphaRadians: number, betaRadians: number): Matrix4;
-  static scale(x: number, y: number, z: number): Matrix4;
-  static translate(x: number, y: number, z: number): Matrix4;
-  static translateVec2(vec: Vec2): Matrix4;
-  static rotateZ(radians: number): Matrix4;
-  get(row: number, col: number): number;
-  private set;
-  multiply(other: Matrix4): Matrix4;
-  toCssMatrix(): string;
+    private elements;
+    constructor(values: number[][]);
+    static zero(): Matrix4;
+    static identity(): Matrix4;
+    static skew(alphaRadians: number, betaRadians: number): Matrix4;
+    static scale(x: number, y: number, z: number): Matrix4;
+    static translate(x: number, y: number, z: number): Matrix4;
+    static translateVec2(vec: Vec2): Matrix4;
+    static rotateZ(radians: number): Matrix4;
+    get(row: number, col: number): number;
+    private set;
+    multiply(other: Matrix4): Matrix4;
+    toCssMatrix(): string;
 }

package.json

 {
   "name": "dough-js",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "This library provides widgets that can be used to create a smooshy user interface.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
@@ -23,3 +21,3 @@ "collection": "dist/collection/collection-manifest.json",
     "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
+    "start": "stencil build --dev --watch --serve --no-open",
     "test": "stencil test --spec --e2e",
@@ -29,14 +27,13 @@ "test.watch": "stencil test --spec --e2e --watchAll",
   },
-  "dependencies": {
-    "@stencil/core": "^4.0.0",
-    "@stencil/sass": "^3.0.5"
-  },
   "devDependencies": {
-    "@types/jest": "^27.5.2",
+    "@stencil/core": "^4.7.0",
+    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/sass": "^3.0.5",
+    "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
-    "jest": "^27.5.1",
-    "jest-cli": "^27.5.1",
-    "puppeteer": "^20.7.3"
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "puppeteer": "^21.9.0"
   },
   "license": "MIT"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1287012

increased by10.46%

Dependency count

0

decreased by-100%

Lines of code

7891

increased by0.22%

Worsened metrics

Dev dependency count

8

increased by60%

Number of package files

73

decreased by-9.88%

Dependency changes

• - Removed@stencil/core@^4.0.0

• - Removed@stencil/sass@^3.0.5

• - Removed@stencil/core@4.22.3(transitive)

• - Removed@stencil/sass@3.0.12(transitive)