Mission Control Dashboard - Initial implementation

node_modules/motion-dom/dist/es/render/dom/DOMVisualElement.mjs

@@ -0,0 +1,43 @@
+import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
+import { DOMKeyframesResolver } from '../../animation/keyframes/DOMKeyframesResolver.mjs';
+import { VisualElement } from '../VisualElement.mjs';
+
+class DOMVisualElement extends VisualElement {
+    constructor() {
+        super(...arguments);
+        this.KeyframeResolver = DOMKeyframesResolver;
+    }
+    sortInstanceNodePosition(a, b) {
+        /**
+         * compareDocumentPosition returns a bitmask, by using the bitwise &
+         * we're returning true if 2 in that bitmask is set to true. 2 is set
+         * to true if b preceeds a.
+         */
+        return a.compareDocumentPosition(b) & 2 ? 1 : -1;
+    }
+    getBaseTargetFromProps(props, key) {
+        const style = props.style;
+        return style ? style[key] : undefined;
+    }
+    removeValueFromRenderState(key, { vars, style }) {
+        delete vars[key];
+        delete style[key];
+    }
+    handleChildMotionValue() {
+        if (this.childSubscription) {
+            this.childSubscription();
+            delete this.childSubscription;
+        }
+        const { children } = this.props;
+        if (isMotionValue(children)) {
+            this.childSubscription = children.on("change", (latest) => {
+                if (this.current) {
+                    this.current.textContent = `${latest}`;
+                }
+            });
+        }
+    }
+}
+
+export { DOMVisualElement };
+//# sourceMappingURL=DOMVisualElement.mjs.map

node_modules/motion-dom/dist/es/render/dom/DOMVisualElement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DOMVisualElement.mjs","sources":["../../../../src/render/dom/DOMVisualElement.ts"],"sourcesContent":["import { isMotionValue } from \"../../value/utils/is-motion-value\"\nimport type { MotionValue } from \"../../value\"\nimport type { AnyResolvedKeyframe } from \"../../animation/types\"\nimport { DOMKeyframesResolver } from \"../../animation/keyframes/DOMKeyframesResolver\"\nimport type { MotionNodeOptions } from \"../../node/types\"\nimport type { DOMVisualElementOptions } from \"./types\"\nimport type { HTMLRenderState } from \"../html/types\"\nimport { VisualElement, MotionStyle } from \"../VisualElement\"\n\nexport abstract class DOMVisualElement<\n    Instance extends HTMLElement | SVGElement = HTMLElement,\n    State extends HTMLRenderState = HTMLRenderState,\n    Options extends DOMVisualElementOptions = DOMVisualElementOptions\n> extends VisualElement<Instance, State, Options> {\n    sortInstanceNodePosition(a: Instance, b: Instance): number {\n        /**\n         * compareDocumentPosition returns a bitmask, by using the bitwise &\n         * we're returning true if 2 in that bitmask is set to true. 2 is set\n         * to true if b preceeds a.\n         */\n        return a.compareDocumentPosition(b) & 2 ? 1 : -1\n    }\n\n    getBaseTargetFromProps(\n        props: MotionNodeOptions,\n        key: string\n    ): AnyResolvedKeyframe | MotionValue<any> | undefined {\n        const style = (props as MotionNodeOptions & { style?: MotionStyle }).style\n        return style ? (style[key] as string) : undefined\n    }\n\n    removeValueFromRenderState(\n        key: string,\n        { vars, style }: HTMLRenderState\n    ): void {\n        delete vars[key]\n        delete style[key]\n    }\n\n    KeyframeResolver = DOMKeyframesResolver\n\n    childSubscription?: VoidFunction\n    handleChildMotionValue() {\n        if (this.childSubscription) {\n            this.childSubscription()\n            delete this.childSubscription\n        }\n\n        const { children } = this.props as MotionNodeOptions & { children?: MotionValue | any }\n        if (isMotionValue(children)) {\n            this.childSubscription = children.on(\"change\", (latest) => {\n                if (this.current) {\n                    this.current.textContent = `${latest}`\n                }\n            })\n        }\n    }\n}\n"],"names":[],"mappings":";;;;AASM,MAAgB,gBAIpB,SAAQ,aAAuC,CAAA;AAJjD,IAAA,WAAA,GAAA;;QA8BI,IAAA,CAAA,gBAAgB,GAAG,oBAAoB;IAkB3C;IA3CI,wBAAwB,CAAC,CAAW,EAAE,CAAW,EAAA;AAC7C;;;;AAIG;AACH,QAAA,OAAO,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE;IACpD;IAEA,sBAAsB,CAClB,KAAwB,EACxB,GAAW,EAAA;AAEX,QAAA,MAAM,KAAK,GAAI,KAAqD,CAAC,KAAK;AAC1E,QAAA,OAAO,KAAK,GAAI,KAAK,CAAC,GAAG,CAAY,GAAG,SAAS;IACrD;AAEA,IAAA,0BAA0B,CACtB,GAAW,EACX,EAAE,IAAI,EAAE,KAAK,EAAmB,EAAA;AAEhC,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC;AAChB,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC;IACrB;IAKA,sBAAsB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAI,CAAC,iBAAiB,EAAE;YACxB,OAAO,IAAI,CAAC,iBAAiB;QACjC;AAEA,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAA6D;AACvF,QAAA,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE;AACzB,YAAA,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAI;AACtD,gBAAA,IAAI,IAAI,CAAC,OAAO,EAAE;oBACd,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,CAAA,EAAG,MAAM,EAAE;gBAC1C;AACJ,YAAA,CAAC,CAAC;QACN;IACJ;AACH;;;;"}

node_modules/motion-dom/dist/es/render/dom/is-css-var.mjs

@@ -0,0 +1,4 @@
+const isCSSVar = (name) => name.startsWith("--");
+
+export { isCSSVar };
+//# sourceMappingURL=is-css-var.mjs.map

node_modules/motion-dom/dist/es/render/dom/is-css-var.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-css-var.mjs","sources":["../../../../src/render/dom/is-css-var.ts"],"sourcesContent":["export const isCSSVar = (name: string) => name.startsWith(\"--\")\n"],"names":[],"mappings":"AAAO,MAAM,QAAQ,GAAG,CAAC,IAAY,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI;;;;"}

node_modules/motion-dom/dist/es/render/dom/parse-transform.mjs

@@ -0,0 +1,84 @@
+const radToDeg = (rad) => (rad * 180) / Math.PI;
+const rotate = (v) => {
+    const angle = radToDeg(Math.atan2(v[1], v[0]));
+    return rebaseAngle(angle);
+};
+const matrix2dParsers = {
+    x: 4,
+    y: 5,
+    translateX: 4,
+    translateY: 5,
+    scaleX: 0,
+    scaleY: 3,
+    scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
+    rotate,
+    rotateZ: rotate,
+    skewX: (v) => radToDeg(Math.atan(v[1])),
+    skewY: (v) => radToDeg(Math.atan(v[2])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
+};
+const rebaseAngle = (angle) => {
+    angle = angle % 360;
+    if (angle < 0)
+        angle += 360;
+    return angle;
+};
+const rotateZ = rotate;
+const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
+const matrix3dParsers = {
+    x: 12,
+    y: 13,
+    z: 14,
+    translateX: 12,
+    translateY: 13,
+    translateZ: 14,
+    scaleX,
+    scaleY,
+    scale: (v) => (scaleX(v) + scaleY(v)) / 2,
+    rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
+    rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
+    rotateZ,
+    rotate: rotateZ,
+    skewX: (v) => radToDeg(Math.atan(v[4])),
+    skewY: (v) => radToDeg(Math.atan(v[1])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
+};
+function defaultTransformValue(name) {
+    return name.includes("scale") ? 1 : 0;
+}
+function parseValueFromTransform(transform, name) {
+    if (!transform || transform === "none") {
+        return defaultTransformValue(name);
+    }
+    const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
+    let parsers;
+    let match;
+    if (matrix3dMatch) {
+        parsers = matrix3dParsers;
+        match = matrix3dMatch;
+    }
+    else {
+        const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
+        parsers = matrix2dParsers;
+        match = matrix2dMatch;
+    }
+    if (!match) {
+        return defaultTransformValue(name);
+    }
+    const valueParser = parsers[name];
+    const values = match[1].split(",").map(convertTransformToNumber);
+    return typeof valueParser === "function"
+        ? valueParser(values)
+        : values[valueParser];
+}
+const readTransformValue = (instance, name) => {
+    const { transform = "none" } = getComputedStyle(instance);
+    return parseValueFromTransform(transform, name);
+};
+function convertTransformToNumber(value) {
+    return parseFloat(value.trim());
+}
+
+export { defaultTransformValue, parseValueFromTransform, readTransformValue };
+//# sourceMappingURL=parse-transform.mjs.map

node_modules/motion-dom/dist/es/render/dom/style-computed.mjs

@@ -0,0 +1,11 @@
+import { isCSSVar } from './is-css-var.mjs';
+
+function getComputedStyle(element, name) {
+    const computedStyle = window.getComputedStyle(element);
+    return isCSSVar(name)
+        ? computedStyle.getPropertyValue(name)
+        : computedStyle[name];
+}
+
+export { getComputedStyle };
+//# sourceMappingURL=style-computed.mjs.map

node_modules/motion-dom/dist/es/render/dom/style-computed.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-computed.mjs","sources":["../../../../src/render/dom/style-computed.ts"],"sourcesContent":["import { isCSSVar } from \"./is-css-var\"\n\nexport function getComputedStyle(\n    element: HTMLElement | SVGElement,\n    name: string\n) {\n    const computedStyle = window.getComputedStyle(element)\n    return isCSSVar(name)\n        ? computedStyle.getPropertyValue(name)\n        : computedStyle[name as any]\n}\n"],"names":[],"mappings":";;AAEM,SAAU,gBAAgB,CAC5B,OAAiC,EACjC,IAAY,EAAA;IAEZ,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;IACtD,OAAO,QAAQ,CAAC,IAAI;AAChB,UAAE,aAAa,CAAC,gBAAgB,CAAC,IAAI;AACrC,UAAE,aAAa,CAAC,IAAW,CAAC;AACpC;;;;"}

node_modules/motion-dom/dist/es/render/dom/style-set.mjs

@@ -0,0 +1,10 @@
+import { isCSSVar } from './is-css-var.mjs';
+
+function setStyle(element, name, value) {
+    isCSSVar(name)
+        ? element.style.setProperty(name, value)
+        : (element.style[name] = value);
+}
+
+export { setStyle };
+//# sourceMappingURL=style-set.mjs.map

node_modules/motion-dom/dist/es/render/dom/style-set.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-set.mjs","sources":["../../../../src/render/dom/style-set.ts"],"sourcesContent":["import { AnyResolvedKeyframe } from \"../../animation/types\"\nimport { isCSSVar } from \"./is-css-var\"\n\nexport function setStyle(\n    element: HTMLElement | SVGElement,\n    name: string,\n    value: AnyResolvedKeyframe\n) {\n    isCSSVar(name)\n        ? element.style.setProperty(name, value as string)\n        : (element.style[name as any] = value as string)\n}\n"],"names":[],"mappings":";;SAGgB,QAAQ,CACpB,OAAiC,EACjC,IAAY,EACZ,KAA0B,EAAA;IAE1B,QAAQ,CAAC,IAAI;UACP,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAe;WAC9C,OAAO,CAAC,KAAK,CAAC,IAAW,CAAC,GAAG,KAAe,CAAC;AACxD;;;;"}

node_modules/motion-dom/dist/es/render/dom/utils/camel-to-dash.mjs

@@ -0,0 +1,6 @@
+function camelToDash(str) {
+    return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+}
+
+export { camelToDash };
+//# sourceMappingURL=camel-to-dash.mjs.map

node_modules/motion-dom/dist/es/render/dom/utils/camel-to-dash.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"camel-to-dash.mjs","sources":["../../../../../src/render/dom/utils/camel-to-dash.ts"],"sourcesContent":["export function camelToDash(str: string): string {\n    return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`)\n}\n"],"names":[],"mappings":"AAAM,SAAU,WAAW,CAAC,GAAW,EAAA;AACnC,IAAA,OAAO,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC,WAAW,EAAE,CAAA,CAAE,CAAC;AACxE;;;;"}