Mission Control Dashboard - Initial implementation

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

@@ -0,0 +1,45 @@
+import { MotionValue } from '../../value/index.mjs';
+import { addAttrValue } from '../attr/index.mjs';
+import { addStyleValue } from '../style/index.mjs';
+import { createSelectorEffect } from '../utils/create-dom-effect.mjs';
+import { createEffect } from '../utils/create-effect.mjs';
+import { frame } from '../../frameloop/frame.mjs';
+
+function addSVGPathValue(element, state, key, value) {
+    frame.render(() => element.setAttribute("pathLength", "1"));
+    if (key === "pathOffset") {
+        return state.set(key, value, () => {
+            // Use unitless value to avoid Safari zoom bug
+            const offset = state.latest[key];
+            element.setAttribute("stroke-dashoffset", `${-offset}`);
+        });
+    }
+    else {
+        if (!state.get("stroke-dasharray")) {
+            state.set("stroke-dasharray", new MotionValue("1 1"), () => {
+                const { pathLength = 1, pathSpacing } = state.latest;
+                // Use unitless values to avoid Safari zoom bug
+                element.setAttribute("stroke-dasharray", `${pathLength} ${pathSpacing ?? 1 - Number(pathLength)}`);
+            });
+        }
+        return state.set(key, value, undefined, state.get("stroke-dasharray"));
+    }
+}
+const addSVGValue = (element, state, key, value) => {
+    if (key.startsWith("path")) {
+        return addSVGPathValue(element, state, key, value);
+    }
+    else if (key.startsWith("attr")) {
+        return addAttrValue(element, state, convertAttrKey(key), value);
+    }
+    const handler = key in element.style ? addStyleValue : addAttrValue;
+    return handler(element, state, key, value);
+};
+const svgEffect = /*@__PURE__*/ createSelectorEffect(
+/*@__PURE__*/ createEffect(addSVGValue));
+function convertAttrKey(key) {
+    return key.replace(/^attr([A-Z])/, (_, firstChar) => firstChar.toLowerCase());
+}
+
+export { svgEffect };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../src/effects/svg/index.ts"],"sourcesContent":["import { frame } from \"../../frameloop\"\nimport { MotionValue } from \"../../value\"\nimport { addAttrValue } from \"../attr\"\nimport { MotionValueState } from \"../MotionValueState\"\nimport { addStyleValue } from \"../style\"\nimport { createSelectorEffect } from \"../utils/create-dom-effect\"\nimport { createEffect } from \"../utils/create-effect\"\n\nfunction addSVGPathValue(\n    element: SVGElement,\n    state: MotionValueState,\n    key: string,\n    value: MotionValue\n) {\n    frame.render(() => element.setAttribute(\"pathLength\", \"1\"))\n\n    if (key === \"pathOffset\") {\n        return state.set(key, value, () => {\n            // Use unitless value to avoid Safari zoom bug\n            const offset = state.latest[key]\n            element.setAttribute(\"stroke-dashoffset\", `${-offset}`)\n        })\n    } else {\n        if (!state.get(\"stroke-dasharray\")) {\n            state.set(\"stroke-dasharray\", new MotionValue(\"1 1\"), () => {\n                const { pathLength = 1, pathSpacing } = state.latest\n\n                // Use unitless values to avoid Safari zoom bug\n                element.setAttribute(\n                    \"stroke-dasharray\",\n                    `${pathLength} ${pathSpacing ?? 1 - Number(pathLength)}`\n                )\n            })\n        }\n\n        return state.set(key, value, undefined, state.get(\"stroke-dasharray\"))\n    }\n}\n\nconst addSVGValue = (\n    element: SVGElement,\n    state: MotionValueState,\n    key: string,\n    value: MotionValue\n) => {\n    if (key.startsWith(\"path\")) {\n        return addSVGPathValue(element, state, key, value)\n    } else if (key.startsWith(\"attr\")) {\n        return addAttrValue(element, state, convertAttrKey(key), value)\n    }\n\n    const handler = key in element.style ? addStyleValue : addAttrValue\n    return handler(element, state, key, value)\n}\n\nexport const svgEffect = /*@__PURE__*/ createSelectorEffect(\n    /*@__PURE__*/ createEffect(addSVGValue)\n)\n\nfunction convertAttrKey(key: string) {\n    return key.replace(/^attr([A-Z])/, (_, firstChar) =>\n        firstChar.toLowerCase()\n    )\n}\n"],"names":[],"mappings":";;;;;;;AAQA,SAAS,eAAe,CACpB,OAAmB,EACnB,KAAuB,EACvB,GAAW,EACX,KAAkB,EAAA;AAElB,IAAA,KAAK,CAAC,MAAM,CAAC,MAAM,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;AAE3D,IAAA,IAAI,GAAG,KAAK,YAAY,EAAE;QACtB,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,MAAK;;YAE9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;YAChC,OAAO,CAAC,YAAY,CAAC,mBAAmB,EAAE,GAAG,CAAC,MAAM,CAAA,CAAE,CAAC;AAC3D,QAAA,CAAC,CAAC;IACN;SAAO;QACH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE;AAChC,YAAA,KAAK,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE,MAAK;gBACvD,MAAM,EAAE,UAAU,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,MAAM;;AAGpD,gBAAA,OAAO,CAAC,YAAY,CAChB,kBAAkB,EAClB,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,WAAW,IAAI,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,CAAE,CAC3D;AACL,YAAA,CAAC,CAAC;QACN;AAEA,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAC1E;AACJ;AAEA,MAAM,WAAW,GAAG,CAChB,OAAmB,EACnB,KAAuB,EACvB,GAAW,EACX,KAAkB,KAClB;AACA,IAAA,IAAI,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;QACxB,OAAO,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC;IACtD;AAAO,SAAA,IAAI,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;AAC/B,QAAA,OAAO,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;IACnE;AAEA,IAAA,MAAM,OAAO,GAAG,GAAG,IAAI,OAAO,CAAC,KAAK,GAAG,aAAa,GAAG,YAAY;IACnE,OAAO,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC;AAC9C,CAAC;AAEM,MAAM,SAAS,iBAAiB,oBAAoB;AACvD,cAAc,YAAY,CAAC,WAAW,CAAC;AAG3C,SAAS,cAAc,CAAC,GAAW,EAAA;AAC/B,IAAA,OAAO,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,SAAS,KAC5C,SAAS,CAAC,WAAW,EAAE,CAC1B;AACL;;;;"}