Mission Control Dashboard - Initial implementation

node_modules/motion-dom/dist/es/effects/style/index.mjs

@@ -0,0 +1,53 @@
+import { isCSSVar } from '../../render/dom/is-css-var.mjs';
+import { transformProps } from '../../render/utils/keys-transform.mjs';
+import { isHTMLElement } from '../../utils/is-html-element.mjs';
+import { MotionValue } from '../../value/index.mjs';
+import { createSelectorEffect } from '../utils/create-dom-effect.mjs';
+import { createEffect } from '../utils/create-effect.mjs';
+import { buildTransform } from './transform.mjs';
+
+const originProps = new Set(["originX", "originY", "originZ"]);
+const addStyleValue = (element, state, key, value) => {
+    let render = undefined;
+    let computed = undefined;
+    if (transformProps.has(key)) {
+        if (!state.get("transform")) {
+            // If this is an HTML element, we need to set the transform-box to fill-box
+            // to normalise the transform relative to the element's bounding box
+            if (!isHTMLElement(element) && !state.get("transformBox")) {
+                addStyleValue(element, state, "transformBox", new MotionValue("fill-box"));
+            }
+            state.set("transform", new MotionValue("none"), () => {
+                element.style.transform = buildTransform(state);
+            });
+        }
+        computed = state.get("transform");
+    }
+    else if (originProps.has(key)) {
+        if (!state.get("transformOrigin")) {
+            state.set("transformOrigin", new MotionValue(""), () => {
+                const originX = state.latest.originX ?? "50%";
+                const originY = state.latest.originY ?? "50%";
+                const originZ = state.latest.originZ ?? 0;
+                element.style.transformOrigin = `${originX} ${originY} ${originZ}`;
+            });
+        }
+        computed = state.get("transformOrigin");
+    }
+    else if (isCSSVar(key)) {
+        render = () => {
+            element.style.setProperty(key, state.latest[key]);
+        };
+    }
+    else {
+        render = () => {
+            element.style[key] = state.latest[key];
+        };
+    }
+    return state.set(key, value, render, computed);
+};
+const styleEffect = /*@__PURE__*/ createSelectorEffect(
+/*@__PURE__*/ createEffect(addStyleValue));
+
+export { addStyleValue, styleEffect };
+//# sourceMappingURL=index.mjs.map

node_modules/motion-dom/dist/es/effects/style/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../src/effects/style/index.ts"],"sourcesContent":["import { isCSSVar } from \"../../render/dom/is-css-var\"\nimport { transformProps } from \"../../render/utils/keys-transform\"\nimport { isHTMLElement } from \"../../utils/is-html-element\"\nimport { MotionValue } from \"../../value\"\nimport { MotionValueState } from \"../MotionValueState\"\nimport { createSelectorEffect } from \"../utils/create-dom-effect\"\nimport { createEffect } from \"../utils/create-effect\"\nimport { buildTransform } from \"./transform\"\n\nconst originProps = new Set([\"originX\", \"originY\", \"originZ\"])\n\nexport const addStyleValue = (\n    element: HTMLElement | SVGElement,\n    state: MotionValueState,\n    key: string,\n    value: MotionValue\n) => {\n    let render: VoidFunction | undefined = undefined\n    let computed: MotionValue | undefined = undefined\n\n    if (transformProps.has(key)) {\n        if (!state.get(\"transform\")) {\n            // If this is an HTML element, we need to set the transform-box to fill-box\n            // to normalise the transform relative to the element's bounding box\n            if (!isHTMLElement(element) && !state.get(\"transformBox\")) {\n                addStyleValue(\n                    element,\n                    state,\n                    \"transformBox\",\n                    new MotionValue(\"fill-box\")\n                )\n            }\n\n            state.set(\"transform\", new MotionValue(\"none\"), () => {\n                element.style.transform = buildTransform(state)\n            })\n        }\n\n        computed = state.get(\"transform\")\n    } else if (originProps.has(key)) {\n        if (!state.get(\"transformOrigin\")) {\n            state.set(\"transformOrigin\", new MotionValue(\"\"), () => {\n                const originX = state.latest.originX ?? \"50%\"\n                const originY = state.latest.originY ?? \"50%\"\n                const originZ = state.latest.originZ ?? 0\n                element.style.transformOrigin = `${originX} ${originY} ${originZ}`\n            })\n        }\n\n        computed = state.get(\"transformOrigin\")\n    } else if (isCSSVar(key)) {\n        render = () => {\n            element.style.setProperty(key, state.latest[key] as string)\n        }\n    } else {\n        render = () => {\n            element.style[key as any] = state.latest[key] as string\n        }\n    }\n\n    return state.set(key, value, render, computed)\n}\n\nexport const styleEffect = /*@__PURE__*/ createSelectorEffect(\n    /*@__PURE__*/ createEffect(addStyleValue)\n)\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAEvD,MAAM,aAAa,GAAG,CACzB,OAAiC,EACjC,KAAuB,EACvB,GAAW,EACX,KAAkB,KAClB;IACA,IAAI,MAAM,GAA6B,SAAS;IAChD,IAAI,QAAQ,GAA4B,SAAS;AAEjD,IAAA,IAAI,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QACzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;;;AAGzB,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE;AACvD,gBAAA,aAAa,CACT,OAAO,EACP,KAAK,EACL,cAAc,EACd,IAAI,WAAW,CAAC,UAAU,CAAC,CAC9B;YACL;AAEA,YAAA,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE,MAAK;gBACjD,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC;AACnD,YAAA,CAAC,CAAC;QACN;AAEA,QAAA,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC;IACrC;AAAO,SAAA,IAAI,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QAC7B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE;AAC/B,YAAA,KAAK,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE,MAAK;gBACnD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,KAAK;gBAC7C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,KAAK;gBAC7C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,CAAC;AACzC,gBAAA,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAE;AACtE,YAAA,CAAC,CAAC;QACN;AAEA,QAAA,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;IAC3C;AAAO,SAAA,IAAI,QAAQ,CAAC,GAAG,CAAC,EAAE;QACtB,MAAM,GAAG,MAAK;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAW,CAAC;AAC/D,QAAA,CAAC;IACL;SAAO;QACH,MAAM,GAAG,MAAK;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,GAAU,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAW;AAC3D,QAAA,CAAC;IACL;AAEA,IAAA,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC;AAClD;AAEO,MAAM,WAAW,iBAAiB,oBAAoB;AACzD,cAAc,YAAY,CAAC,aAAa,CAAC;;;;"}

node_modules/motion-dom/dist/es/effects/style/transform.mjs

@@ -0,0 +1,39 @@
+import { transformPropOrder } from '../../render/utils/keys-transform.mjs';
+
+const translateAlias = {
+    x: "translateX",
+    y: "translateY",
+    z: "translateZ",
+    transformPerspective: "perspective",
+};
+function buildTransform(state) {
+    let transform = "";
+    let transformIsDefault = true;
+    /**
+     * Loop over all possible transforms in order, adding the ones that
+     * are present to the transform string.
+     */
+    for (let i = 0; i < transformPropOrder.length; i++) {
+        const key = transformPropOrder[i];
+        const value = state.latest[key];
+        if (value === undefined)
+            continue;
+        let valueIsDefault = true;
+        if (typeof value === "number") {
+            valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
+        }
+        else {
+            const parsed = parseFloat(value);
+            valueIsDefault = key.startsWith("scale") ? parsed === 1 : parsed === 0;
+        }
+        if (!valueIsDefault) {
+            transformIsDefault = false;
+            const transformName = translateAlias[key] || key;
+            transform += `${transformName}(${value}) `;
+        }
+    }
+    return transformIsDefault ? "none" : transform.trim();
+}
+
+export { buildTransform };
+//# sourceMappingURL=transform.mjs.map

node_modules/motion-dom/dist/es/effects/style/transform.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform.mjs","sources":["../../../../src/effects/style/transform.ts"],"sourcesContent":["import { transformPropOrder } from \"../../render/utils/keys-transform\"\nimport { MotionValueState } from \"../MotionValueState\"\n\nconst translateAlias = {\n    x: \"translateX\",\n    y: \"translateY\",\n    z: \"translateZ\",\n    transformPerspective: \"perspective\",\n}\n\nexport function buildTransform(state: MotionValueState) {\n    let transform = \"\"\n    let transformIsDefault = true\n\n    /**\n     * Loop over all possible transforms in order, adding the ones that\n     * are present to the transform string.\n     */\n    for (let i = 0; i < transformPropOrder.length; i++) {\n        const key = transformPropOrder[i] as keyof typeof translateAlias\n        const value = state.latest[key]\n\n        if (value === undefined) continue\n\n        let valueIsDefault = true\n        if (typeof value === \"number\") {\n            valueIsDefault = value === (key.startsWith(\"scale\") ? 1 : 0)\n        } else {\n            const parsed = parseFloat(value)\n            valueIsDefault = key.startsWith(\"scale\") ? parsed === 1 : parsed === 0\n        }\n\n        if (!valueIsDefault) {\n            transformIsDefault = false\n            const transformName = translateAlias[key] || key\n            transform += `${transformName}(${value}) `\n        }\n    }\n\n    return transformIsDefault ? \"none\" : transform.trim()\n}\n"],"names":[],"mappings":";;AAGA,MAAM,cAAc,GAAG;AACnB,IAAA,CAAC,EAAE,YAAY;AACf,IAAA,CAAC,EAAE,YAAY;AACf,IAAA,CAAC,EAAE,YAAY;AACf,IAAA,oBAAoB,EAAE,aAAa;CACtC;AAEK,SAAU,cAAc,CAAC,KAAuB,EAAA;IAClD,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,kBAAkB,GAAG,IAAI;AAE7B;;;AAGG;AACH,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAChD,QAAA,MAAM,GAAG,GAAG,kBAAkB,CAAC,CAAC,CAAgC;QAChE,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;QAE/B,IAAI,KAAK,KAAK,SAAS;YAAE;QAEzB,IAAI,cAAc,GAAG,IAAI;AACzB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,YAAA,cAAc,GAAG,KAAK,MAAM,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAChE;aAAO;AACH,YAAA,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC;AAChC,YAAA,cAAc,GAAG,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,MAAM,KAAK,CAAC,GAAG,MAAM,KAAK,CAAC;QAC1E;QAEA,IAAI,CAAC,cAAc,EAAE;YACjB,kBAAkB,GAAG,KAAK;YAC1B,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,GAAG;AAChD,YAAA,SAAS,IAAI,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,KAAK,IAAI;QAC9C;IACJ;AAEA,IAAA,OAAO,kBAAkB,GAAG,MAAM,GAAG,SAAS,CAAC,IAAI,EAAE;AACzD;;;;"}