Mission Control Dashboard - Initial implementation

node_modules/motion-dom/dist/es/utils/mix/color.mjs

@@ -0,0 +1,48 @@
+import { warning } from 'motion-utils';
+import { hex } from '../../value/types/color/hex.mjs';
+import { hsla } from '../../value/types/color/hsla.mjs';
+import { hslaToRgba } from '../../value/types/color/hsla-to-rgba.mjs';
+import { rgba } from '../../value/types/color/rgba.mjs';
+import { mixImmediate } from './immediate.mjs';
+import { mixNumber } from './number.mjs';
+
+// Linear color space blending
+// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
+// Demonstrated http://codepen.io/osublake/pen/xGVVaN
+const mixLinearColor = (from, to, v) => {
+    const fromExpo = from * from;
+    const expo = v * (to * to - fromExpo) + fromExpo;
+    return expo < 0 ? 0 : Math.sqrt(expo);
+};
+const colorTypes = [hex, rgba, hsla];
+const getColorType = (v) => colorTypes.find((type) => type.test(v));
+function asRGBA(color) {
+    const type = getColorType(color);
+    warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable");
+    if (!Boolean(type))
+        return false;
+    let model = type.parse(color);
+    if (type === hsla) {
+        // TODO Remove this cast - needed since Motion's stricter typing
+        model = hslaToRgba(model);
+    }
+    return model;
+}
+const mixColor = (from, to) => {
+    const fromRGBA = asRGBA(from);
+    const toRGBA = asRGBA(to);
+    if (!fromRGBA || !toRGBA) {
+        return mixImmediate(from, to);
+    }
+    const blended = { ...fromRGBA };
+    return (v) => {
+        blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
+        blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
+        blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
+        blended.alpha = mixNumber(fromRGBA.alpha, toRGBA.alpha, v);
+        return rgba.transform(blended);
+    };
+};
+
+export { mixColor, mixLinearColor };
+//# sourceMappingURL=color.mjs.map

node_modules/motion-dom/dist/es/utils/mix/color.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.mjs","sources":["../../../../src/utils/mix/color.ts"],"sourcesContent":["import { warning } from \"motion-utils\"\nimport { hex } from \"../../value/types/color/hex\"\nimport { hsla } from \"../../value/types/color/hsla\"\nimport { hslaToRgba } from \"../../value/types/color/hsla-to-rgba\"\nimport { rgba } from \"../../value/types/color/rgba\"\nimport { Color, HSLA, RGBA } from \"../../value/types/types\"\nimport { mixImmediate } from \"./immediate\"\nimport { mixNumber } from \"./number\"\n\n// Linear color space blending\n// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw\n// Demonstrated http://codepen.io/osublake/pen/xGVVaN\nexport const mixLinearColor = (from: number, to: number, v: number) => {\n    const fromExpo = from * from\n    const expo = v * (to * to - fromExpo) + fromExpo\n    return expo < 0 ? 0 : Math.sqrt(expo)\n}\n\nconst colorTypes = [hex, rgba, hsla]\nconst getColorType = (v: Color | string) =>\n    colorTypes.find((type) => type.test(v))\n\nfunction asRGBA(color: Color | string) {\n    const type = getColorType(color)\n\n    warning(\n        Boolean(type),\n        `'${color}' is not an animatable color. Use the equivalent color code instead.`,\n        \"color-not-animatable\"\n    )\n\n    if (!Boolean(type)) return false\n\n    let model = type!.parse(color)\n\n    if (type === hsla) {\n        // TODO Remove this cast - needed since Motion's stricter typing\n        model = hslaToRgba(model as HSLA)\n    }\n\n    return model as RGBA\n}\n\nexport const mixColor = (from: Color | string, to: Color | string) => {\n    const fromRGBA = asRGBA(from)\n    const toRGBA = asRGBA(to)\n\n    if (!fromRGBA || !toRGBA) {\n        return mixImmediate(from, to)\n    }\n\n    const blended = { ...fromRGBA }\n\n    return (v: number) => {\n        blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v)\n        blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v)\n        blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v)\n        blended.alpha = mixNumber(fromRGBA.alpha, toRGBA.alpha, v)\n        return rgba.transform!(blended)\n    }\n}\n"],"names":[],"mappings":";;;;;;;;AASA;AACA;AACA;AACO,MAAM,cAAc,GAAG,CAAC,IAAY,EAAE,EAAU,EAAE,CAAS,KAAI;AAClE,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI;AAC5B,IAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,QAAQ,CAAC,GAAG,QAAQ;AAChD,IAAA,OAAO,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AACzC;AAEA,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;AACpC,MAAM,YAAY,GAAG,CAAC,CAAiB,KACnC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAE3C,SAAS,MAAM,CAAC,KAAqB,EAAA;AACjC,IAAA,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC;AAEhC,IAAA,OAAO,CACH,OAAO,CAAC,IAAI,CAAC,EACb,CAAA,CAAA,EAAI,KAAK,CAAA,oEAAA,CAAsE,EAC/E,sBAAsB,CACzB;AAED,IAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;AAAE,QAAA,OAAO,KAAK;IAEhC,IAAI,KAAK,GAAG,IAAK,CAAC,KAAK,CAAC,KAAK,CAAC;AAE9B,IAAA,IAAI,IAAI,KAAK,IAAI,EAAE;;AAEf,QAAA,KAAK,GAAG,UAAU,CAAC,KAAa,CAAC;IACrC;AAEA,IAAA,OAAO,KAAa;AACxB;MAEa,QAAQ,GAAG,CAAC,IAAoB,EAAE,EAAkB,KAAI;AACjE,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC;AAC7B,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;AAEzB,IAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE;AACtB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC;IACjC;AAEA,IAAA,MAAM,OAAO,GAAG,EAAE,GAAG,QAAQ,EAAE;IAE/B,OAAO,CAAC,CAAS,KAAI;AACjB,QAAA,OAAO,CAAC,GAAG,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;AACzD,QAAA,OAAO,CAAC,KAAK,GAAG,cAAc,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAC/D,QAAA,OAAO,CAAC,IAAI,GAAG,cAAc,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;AAC5D,QAAA,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAC1D,QAAA,OAAO,IAAI,CAAC,SAAU,CAAC,OAAO,CAAC;AACnC,IAAA,CAAC;AACL;;;;"}

node_modules/motion-dom/dist/es/utils/mix/complex.mjs

@@ -0,0 +1,93 @@
+import { pipe, warning } from 'motion-utils';
+import { isCSSVariableToken } from '../../animation/utils/is-css-variable.mjs';
+import { color } from '../../value/types/color/index.mjs';
+import { complex, analyseComplexValue } from '../../value/types/complex/index.mjs';
+import { mixColor } from './color.mjs';
+import { mixImmediate } from './immediate.mjs';
+import { mixNumber as mixNumber$1 } from './number.mjs';
+import { invisibleValues, mixVisibility } from './visibility.mjs';
+
+function mixNumber(a, b) {
+    return (p) => mixNumber$1(a, b, p);
+}
+function getMixer(a) {
+    if (typeof a === "number") {
+        return mixNumber;
+    }
+    else if (typeof a === "string") {
+        return isCSSVariableToken(a)
+            ? mixImmediate
+            : color.test(a)
+                ? mixColor
+                : mixComplex;
+    }
+    else if (Array.isArray(a)) {
+        return mixArray;
+    }
+    else if (typeof a === "object") {
+        return color.test(a) ? mixColor : mixObject;
+    }
+    return mixImmediate;
+}
+function mixArray(a, b) {
+    const output = [...a];
+    const numValues = output.length;
+    const blendValue = a.map((v, i) => getMixer(v)(v, b[i]));
+    return (p) => {
+        for (let i = 0; i < numValues; i++) {
+            output[i] = blendValue[i](p);
+        }
+        return output;
+    };
+}
+function mixObject(a, b) {
+    const output = { ...a, ...b };
+    const blendValue = {};
+    for (const key in output) {
+        if (a[key] !== undefined && b[key] !== undefined) {
+            blendValue[key] = getMixer(a[key])(a[key], b[key]);
+        }
+    }
+    return (v) => {
+        for (const key in blendValue) {
+            output[key] = blendValue[key](v);
+        }
+        return output;
+    };
+}
+function matchOrder(origin, target) {
+    const orderedOrigin = [];
+    const pointers = { color: 0, var: 0, number: 0 };
+    for (let i = 0; i < target.values.length; i++) {
+        const type = target.types[i];
+        const originIndex = origin.indexes[type][pointers[type]];
+        const originValue = origin.values[originIndex] ?? 0;
+        orderedOrigin[i] = originValue;
+        pointers[type]++;
+    }
+    return orderedOrigin;
+}
+const mixComplex = (origin, target) => {
+    const template = complex.createTransformer(target);
+    const originStats = analyseComplexValue(origin);
+    const targetStats = analyseComplexValue(target);
+    const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length &&
+        originStats.indexes.color.length === targetStats.indexes.color.length &&
+        originStats.indexes.number.length >= targetStats.indexes.number.length;
+    if (canInterpolate) {
+        if ((invisibleValues.has(origin) &&
+            !targetStats.values.length) ||
+            (invisibleValues.has(target) &&
+                !originStats.values.length)) {
+            return mixVisibility(origin, target);
+        }
+        return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
+    }
+    else {
+        warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different");
+        return mixImmediate(origin, target);
+    }
+};
+
+export { getMixer, mixArray, mixComplex, mixObject };
+//# sourceMappingURL=complex.mjs.map

node_modules/motion-dom/dist/es/utils/mix/immediate.mjs

@@ -0,0 +1,6 @@
+function mixImmediate(a, b) {
+    return (p) => (p > 0 ? b : a);
+}
+
+export { mixImmediate };
+//# sourceMappingURL=immediate.mjs.map

node_modules/motion-dom/dist/es/utils/mix/immediate.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"immediate.mjs","sources":["../../../../src/utils/mix/immediate.ts"],"sourcesContent":["export function mixImmediate<T>(a: T, b: T) {\n    return (p: number) => (p > 0 ? b : a)\n}\n"],"names":[],"mappings":"AAAM,SAAU,YAAY,CAAI,CAAI,EAAE,CAAI,EAAA;AACtC,IAAA,OAAO,CAAC,CAAS,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACzC;;;;"}

node_modules/motion-dom/dist/es/utils/mix/index.mjs

@@ -0,0 +1,15 @@
+import { getMixer } from './complex.mjs';
+import { mixNumber } from './number.mjs';
+
+function mix(from, to, p) {
+    if (typeof from === "number" &&
+        typeof to === "number" &&
+        typeof p === "number") {
+        return mixNumber(from, to, p);
+    }
+    const mixer = getMixer(from);
+    return mixer(from, to);
+}
+
+export { mix };
+//# sourceMappingURL=index.mjs.map

node_modules/motion-dom/dist/es/utils/mix/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../src/utils/mix/index.ts"],"sourcesContent":["import { getMixer } from \"./complex\"\nimport { mixNumber as mixNumberImmediate } from \"./number\"\nimport { Mixer } from \"./types\"\n\nexport function mix<T>(from: T, to: T): Mixer<T>\nexport function mix(from: number, to: number, p: number): number\nexport function mix<T>(from: T, to: T, p?: T): Mixer<T> | number {\n    if (\n        typeof from === \"number\" &&\n        typeof to === \"number\" &&\n        typeof p === \"number\"\n    ) {\n        return mixNumberImmediate(from, to, p)\n    }\n\n    const mixer = getMixer(from)\n    return mixer(from as any, to as any) as Mixer<T>\n}\n"],"names":["mixNumberImmediate"],"mappings":";;;SAMgB,GAAG,CAAI,IAAO,EAAE,EAAK,EAAE,CAAK,EAAA;IACxC,IACI,OAAO,IAAI,KAAK,QAAQ;QACxB,OAAO,EAAE,KAAK,QAAQ;AACtB,QAAA,OAAO,CAAC,KAAK,QAAQ,EACvB;QACE,OAAOA,SAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1C;AAEA,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC;AAC5B,IAAA,OAAO,KAAK,CAAC,IAAW,EAAE,EAAS,CAAa;AACpD;;;;"}

node_modules/motion-dom/dist/es/utils/mix/number.mjs

@@ -0,0 +1,27 @@
+/*
+  Value in range from progress
+
+  Given a lower limit and an upper limit, we return the value within
+  that range as expressed by progress (usually a number from 0 to 1)
+
+  So progress = 0.5 would change
+
+  from -------- to
+
+  to
+
+  from ---- to
+
+  E.g. from = 10, to = 20, progress = 0.5 => 15
+
+  @param [number]: Lower limit of range
+  @param [number]: Upper limit of range
+  @param [number]: The progress between lower and upper limits expressed 0-1
+  @return [number]: Value as calculated from progress within range (not limited within range)
+*/
+const mixNumber = (from, to, progress) => {
+    return from + (to - from) * progress;
+};
+
+export { mixNumber };
+//# sourceMappingURL=number.mjs.map

node_modules/motion-dom/dist/es/utils/mix/number.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.mjs","sources":["../../../../src/utils/mix/number.ts"],"sourcesContent":["/*\n  Value in range from progress\n\n  Given a lower limit and an upper limit, we return the value within\n  that range as expressed by progress (usually a number from 0 to 1)\n\n  So progress = 0.5 would change\n\n  from -------- to\n\n  to\n\n  from ---- to\n\n  E.g. from = 10, to = 20, progress = 0.5 => 15\n\n  @param [number]: Lower limit of range\n  @param [number]: Upper limit of range\n  @param [number]: The progress between lower and upper limits expressed 0-1\n  @return [number]: Value as calculated from progress within range (not limited within range)\n*/\nexport const mixNumber = (from: number, to: number, progress: number) => {\n    return from + (to - from) * progress\n}\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;AAoBE;AACK,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,EAAU,EAAE,QAAgB,KAAI;IACpE,OAAO,IAAI,GAAG,CAAC,EAAE,GAAG,IAAI,IAAI,QAAQ;AACxC;;;;"}

node_modules/motion-dom/dist/es/utils/mix/visibility.mjs

@@ -0,0 +1,17 @@
+const invisibleValues = new Set(["none", "hidden"]);
+/**
+ * Returns a function that, when provided a progress value between 0 and 1,
+ * will return the "none" or "hidden" string only when the progress is that of
+ * the origin or target.
+ */
+function mixVisibility(origin, target) {
+    if (invisibleValues.has(origin)) {
+        return (p) => (p <= 0 ? origin : target);
+    }
+    else {
+        return (p) => (p >= 1 ? target : origin);
+    }
+}
+
+export { invisibleValues, mixVisibility };
+//# sourceMappingURL=visibility.mjs.map

node_modules/motion-dom/dist/es/utils/mix/visibility.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility.mjs","sources":["../../../../src/utils/mix/visibility.ts"],"sourcesContent":["export const invisibleValues = new Set([\"none\", \"hidden\"])\n\n/**\n * Returns a function that, when provided a progress value between 0 and 1,\n * will return the \"none\" or \"hidden\" string only when the progress is that of\n * the origin or target.\n */\nexport function mixVisibility(origin: string, target: string) {\n    if (invisibleValues.has(origin)) {\n        return (p: number) => (p <= 0 ? origin : target)\n    } else {\n        return (p: number) => (p >= 1 ? target : origin)\n    }\n}\n"],"names":[],"mappings":"AAAO,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC;AAEzD;;;;AAIG;AACG,SAAU,aAAa,CAAC,MAAc,EAAE,MAAc,EAAA;AACxD,IAAA,IAAI,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;AAC7B,QAAA,OAAO,CAAC,CAAS,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD;SAAO;AACH,QAAA,OAAO,CAAC,CAAS,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;IACpD;AACJ;;;;"}