Mission Control Dashboard - Initial implementation

This commit is contained in:
Daniel Arroyo
2026-03-27 18:36:05 +00:00
parent 257cea2c7d
commit a8fb4d4555
12516 changed files with 2307128 additions and 2 deletions

View File

@@ -0,0 +1,10 @@
const isDragging = {
x: false,
y: false,
};
function isDragActive() {
return isDragging.x || isDragging.y;
}
export { isDragActive, isDragging };
//# sourceMappingURL=is-active.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-active.mjs","sources":["../../../../../src/gestures/drag/state/is-active.ts"],"sourcesContent":["export const isDragging = {\n x: false,\n y: false,\n}\n\nexport function isDragActive() {\n return isDragging.x || isDragging.y\n}\n"],"names":[],"mappings":"AAAO,MAAM,UAAU,GAAG;AACtB,IAAA,CAAC,EAAE,KAAK;AACR,IAAA,CAAC,EAAE,KAAK;;SAGI,YAAY,GAAA;AACxB,IAAA,OAAO,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC;AACvC;;;;"}

View File

@@ -0,0 +1,29 @@
import { isDragging } from './is-active.mjs';
function setDragLock(axis) {
if (axis === "x" || axis === "y") {
if (isDragging[axis]) {
return null;
}
else {
isDragging[axis] = true;
return () => {
isDragging[axis] = false;
};
}
}
else {
if (isDragging.x || isDragging.y) {
return null;
}
else {
isDragging.x = isDragging.y = true;
return () => {
isDragging.x = isDragging.y = false;
};
}
}
}
export { setDragLock };
//# sourceMappingURL=set-active.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"set-active.mjs","sources":["../../../../../src/gestures/drag/state/set-active.ts"],"sourcesContent":["import { isDragging } from \"./is-active\"\n\nexport function setDragLock(axis: boolean | \"x\" | \"y\" | \"lockDirection\") {\n if (axis === \"x\" || axis === \"y\") {\n if (isDragging[axis]) {\n return null\n } else {\n isDragging[axis] = true\n return () => {\n isDragging[axis] = false\n }\n }\n } else {\n if (isDragging.x || isDragging.y) {\n return null\n } else {\n isDragging.x = isDragging.y = true\n return () => {\n isDragging.x = isDragging.y = false\n }\n }\n }\n}\n"],"names":[],"mappings":";;AAEM,SAAU,WAAW,CAAC,IAA2C,EAAA;IACnE,IAAI,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,GAAG,EAAE;AAC9B,QAAA,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;AAClB,YAAA,OAAO,IAAI;QACf;aAAO;AACH,YAAA,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI;AACvB,YAAA,OAAO,MAAK;AACR,gBAAA,UAAU,CAAC,IAAI,CAAC,GAAG,KAAK;AAC5B,YAAA,CAAC;QACL;IACJ;SAAO;QACH,IAAI,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,EAAE;AAC9B,YAAA,OAAO,IAAI;QACf;aAAO;YACH,UAAU,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,GAAG,IAAI;AAClC,YAAA,OAAO,MAAK;gBACR,UAAU,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,GAAG,KAAK;AACvC,YAAA,CAAC;QACL;IACJ;AACJ;;;;"}

70
node_modules/motion-dom/dist/es/gestures/hover.mjs generated vendored Normal file
View File

@@ -0,0 +1,70 @@
import { isDragActive } from './drag/state/is-active.mjs';
import { setupGesture } from './utils/setup.mjs';
function isValidHover(event) {
return !(event.pointerType === "touch" || isDragActive());
}
/**
* Create a hover gesture. hover() is different to .addEventListener("pointerenter")
* in that it has an easier syntax, filters out polyfilled touch events, interoperates
* with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
*
* @public
*/
function hover(elementOrSelector, onHoverStart, options = {}) {
const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
elements.forEach((element) => {
let isPressed = false;
let deferredHoverEnd = false;
let hoverEndCallback;
const removePointerLeave = () => {
element.removeEventListener("pointerleave", onPointerLeave);
};
const endHover = (event) => {
if (hoverEndCallback) {
hoverEndCallback(event);
hoverEndCallback = undefined;
}
removePointerLeave();
};
const onPointerUp = (event) => {
isPressed = false;
window.removeEventListener("pointerup", onPointerUp);
window.removeEventListener("pointercancel", onPointerUp);
if (deferredHoverEnd) {
deferredHoverEnd = false;
endHover(event);
}
};
const onPointerDown = () => {
isPressed = true;
window.addEventListener("pointerup", onPointerUp, eventOptions);
window.addEventListener("pointercancel", onPointerUp, eventOptions);
};
const onPointerLeave = (leaveEvent) => {
if (leaveEvent.pointerType === "touch")
return;
if (isPressed) {
deferredHoverEnd = true;
return;
}
endHover(leaveEvent);
};
const onPointerEnter = (enterEvent) => {
if (!isValidHover(enterEvent))
return;
deferredHoverEnd = false;
const onHoverEnd = onHoverStart(element, enterEvent);
if (typeof onHoverEnd !== "function")
return;
hoverEndCallback = onHoverEnd;
element.addEventListener("pointerleave", onPointerLeave, eventOptions);
};
element.addEventListener("pointerenter", onPointerEnter, eventOptions);
element.addEventListener("pointerdown", onPointerDown, eventOptions);
});
return cancel;
}
export { hover };
//# sourceMappingURL=hover.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,90 @@
import { isHTMLElement } from '../../utils/is-html-element.mjs';
import { isDragActive } from '../drag/state/is-active.mjs';
import { isNodeOrChild } from '../utils/is-node-or-child.mjs';
import { isPrimaryPointer } from '../utils/is-primary-pointer.mjs';
import { setupGesture } from '../utils/setup.mjs';
import { isElementKeyboardAccessible } from './utils/is-keyboard-accessible.mjs';
import { enableKeyboardPress } from './utils/keyboard.mjs';
import { isPressing } from './utils/state.mjs';
/**
* Filter out events that are not primary pointer events, or are triggering
* while a Motion gesture is active.
*/
function isValidPressEvent(event) {
return isPrimaryPointer(event) && !isDragActive();
}
const claimedPointerDownEvents = new WeakSet();
/**
* Create a press gesture.
*
* Press is different to `"pointerdown"`, `"pointerup"` in that it
* automatically filters out secondary pointer events like right
* click and multitouch.
*
* It also adds accessibility support for keyboards, where
* an element with a press gesture will receive focus and
* trigger on Enter `"keydown"` and `"keyup"` events.
*
* This is different to a browser's `"click"` event, which does
* respond to keyboards but only for the `"click"` itself, rather
* than the press start and end/cancel. The element also needs
* to be focusable for this to work, whereas a press gesture will
* make an element focusable by default.
*
* @public
*/
function press(targetOrSelector, onPressStart, options = {}) {
const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
const startPress = (startEvent) => {
const target = startEvent.currentTarget;
if (!isValidPressEvent(startEvent))
return;
if (claimedPointerDownEvents.has(startEvent))
return;
isPressing.add(target);
if (options.stopPropagation) {
claimedPointerDownEvents.add(startEvent);
}
const onPressEnd = onPressStart(target, startEvent);
const onPointerEnd = (endEvent, success) => {
window.removeEventListener("pointerup", onPointerUp);
window.removeEventListener("pointercancel", onPointerCancel);
if (isPressing.has(target)) {
isPressing.delete(target);
}
if (!isValidPressEvent(endEvent)) {
return;
}
if (typeof onPressEnd === "function") {
onPressEnd(endEvent, { success });
}
};
const onPointerUp = (upEvent) => {
onPointerEnd(upEvent, target === window ||
target === document ||
options.useGlobalTarget ||
isNodeOrChild(target, upEvent.target));
};
const onPointerCancel = (cancelEvent) => {
onPointerEnd(cancelEvent, false);
};
window.addEventListener("pointerup", onPointerUp, eventOptions);
window.addEventListener("pointercancel", onPointerCancel, eventOptions);
};
targets.forEach((target) => {
const pointerDownTarget = options.useGlobalTarget ? window : target;
pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
if (isHTMLElement(target)) {
target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
if (!isElementKeyboardAccessible(target) &&
!target.hasAttribute("tabindex")) {
target.tabIndex = 0;
}
}
});
return cancelEvents;
}
export { press };
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,34 @@
const keyboardAccessibleElements = new Set([
"BUTTON",
"INPUT",
"SELECT",
"TEXTAREA",
"A",
]);
/**
* Checks if an element is natively keyboard accessible (focusable).
* Used by the press gesture to determine if we need to add tabIndex.
*/
function isElementKeyboardAccessible(element) {
return (keyboardAccessibleElements.has(element.tagName) ||
element.isContentEditable === true);
}
const textInputElements = new Set(["INPUT", "SELECT", "TEXTAREA"]);
/**
* Checks if an element has text selection or direct interaction behavior
* that should block drag gestures from starting.
*
* This specifically targets form controls where the user might want to select
* text or interact with the control (e.g., sliders, dropdowns).
*
* Buttons and links are NOT included because they don't have click-and-move
* actions of their own - they only respond to click events, so dragging
* should still work when initiated from these elements.
*/
function isElementTextInput(element) {
return (textInputElements.has(element.tagName) ||
element.isContentEditable === true);
}
export { isElementKeyboardAccessible, isElementTextInput };
//# sourceMappingURL=is-keyboard-accessible.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-keyboard-accessible.mjs","sources":["../../../../../src/gestures/press/utils/is-keyboard-accessible.ts"],"sourcesContent":["const keyboardAccessibleElements = new Set([\n \"BUTTON\",\n \"INPUT\",\n \"SELECT\",\n \"TEXTAREA\",\n \"A\",\n])\n\n/**\n * Checks if an element is natively keyboard accessible (focusable).\n * Used by the press gesture to determine if we need to add tabIndex.\n */\nexport function isElementKeyboardAccessible(element: Element) {\n return (\n keyboardAccessibleElements.has(element.tagName) ||\n (element as HTMLElement).isContentEditable === true\n )\n}\n\nconst textInputElements = new Set([\"INPUT\", \"SELECT\", \"TEXTAREA\"])\n\n/**\n * Checks if an element has text selection or direct interaction behavior\n * that should block drag gestures from starting.\n *\n * This specifically targets form controls where the user might want to select\n * text or interact with the control (e.g., sliders, dropdowns).\n *\n * Buttons and links are NOT included because they don't have click-and-move\n * actions of their own - they only respond to click events, so dragging\n * should still work when initiated from these elements.\n */\nexport function isElementTextInput(element: Element) {\n return (\n textInputElements.has(element.tagName) ||\n (element as HTMLElement).isContentEditable === true\n )\n}\n"],"names":[],"mappings":"AAAA,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC;IACvC,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,UAAU;IACV,GAAG;AACN,CAAA,CAAC;AAEF;;;AAGG;AACG,SAAU,2BAA2B,CAAC,OAAgB,EAAA;IACxD,QACI,0BAA0B,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC;AAC9C,QAAA,OAAuB,CAAC,iBAAiB,KAAK,IAAI;AAE3D;AAEA,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;AAElE;;;;;;;;;;AAUG;AACG,SAAU,kBAAkB,CAAC,OAAgB,EAAA;IAC/C,QACI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC;AACrC,QAAA,OAAuB,CAAC,iBAAiB,KAAK,IAAI;AAE3D;;;;"}

View File

@@ -0,0 +1,39 @@
import { isPressing } from './state.mjs';
/**
* Filter out events that are not "Enter" keys.
*/
function filterEvents(callback) {
return (event) => {
if (event.key !== "Enter")
return;
callback(event);
};
}
function firePointerEvent(target, type) {
target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
}
const enableKeyboardPress = (focusEvent, eventOptions) => {
const element = focusEvent.currentTarget;
if (!element)
return;
const handleKeydown = filterEvents(() => {
if (isPressing.has(element))
return;
firePointerEvent(element, "down");
const handleKeyup = filterEvents(() => {
firePointerEvent(element, "up");
});
const handleBlur = () => firePointerEvent(element, "cancel");
element.addEventListener("keyup", handleKeyup, eventOptions);
element.addEventListener("blur", handleBlur, eventOptions);
});
element.addEventListener("keydown", handleKeydown, eventOptions);
/**
* Add an event listener that fires on blur to remove the keydown events.
*/
element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
};
export { enableKeyboardPress };
//# sourceMappingURL=keyboard.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"keyboard.mjs","sources":["../../../../../src/gestures/press/utils/keyboard.ts"],"sourcesContent":["import { isPressing } from \"./state\"\n\n/**\n * Filter out events that are not \"Enter\" keys.\n */\nfunction filterEvents(callback: (event: KeyboardEvent) => void) {\n return (event: KeyboardEvent) => {\n if (event.key !== \"Enter\") return\n callback(event)\n }\n}\n\nfunction firePointerEvent(target: EventTarget, type: \"down\" | \"up\" | \"cancel\") {\n target.dispatchEvent(\n new PointerEvent(\"pointer\" + type, { isPrimary: true, bubbles: true })\n )\n}\n\nexport const enableKeyboardPress = (\n focusEvent: FocusEvent,\n eventOptions: AddEventListenerOptions\n) => {\n const element = focusEvent.currentTarget as HTMLElement\n if (!element) return\n\n const handleKeydown = filterEvents(() => {\n if (isPressing.has(element)) return\n\n firePointerEvent(element, \"down\")\n\n const handleKeyup = filterEvents(() => {\n firePointerEvent(element, \"up\")\n })\n\n const handleBlur = () => firePointerEvent(element, \"cancel\")\n\n element.addEventListener(\"keyup\", handleKeyup, eventOptions)\n element.addEventListener(\"blur\", handleBlur, eventOptions)\n })\n\n element.addEventListener(\"keydown\", handleKeydown, eventOptions)\n\n /**\n * Add an event listener that fires on blur to remove the keydown events.\n */\n element.addEventListener(\n \"blur\",\n () => element.removeEventListener(\"keydown\", handleKeydown),\n eventOptions\n )\n}\n"],"names":[],"mappings":";;AAEA;;AAEG;AACH,SAAS,YAAY,CAAC,QAAwC,EAAA;IAC1D,OAAO,CAAC,KAAoB,KAAI;AAC5B,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO;YAAE;QAC3B,QAAQ,CAAC,KAAK,CAAC;AACnB,IAAA,CAAC;AACL;AAEA,SAAS,gBAAgB,CAAC,MAAmB,EAAE,IAA8B,EAAA;IACzE,MAAM,CAAC,aAAa,CAChB,IAAI,YAAY,CAAC,SAAS,GAAG,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CACzE;AACL;MAEa,mBAAmB,GAAG,CAC/B,UAAsB,EACtB,YAAqC,KACrC;AACA,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,aAA4B;AACvD,IAAA,IAAI,CAAC,OAAO;QAAE;AAEd,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,MAAK;AACpC,QAAA,IAAI,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE;AAE7B,QAAA,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC;AAEjC,QAAA,MAAM,WAAW,GAAG,YAAY,CAAC,MAAK;AAClC,YAAA,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC;AACnC,QAAA,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,MAAM,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC;QAE5D,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,CAAC;QAC5D,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,EAAE,YAAY,CAAC;AAC9D,IAAA,CAAC,CAAC;IAEF,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,YAAY,CAAC;AAEhE;;AAEG;AACH,IAAA,OAAO,CAAC,gBAAgB,CACpB,MAAM,EACN,MAAM,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,EAC3D,YAAY,CACf;AACL;;;;"}

View File

@@ -0,0 +1,4 @@
const isPressing = new WeakSet();
export { isPressing };
//# sourceMappingURL=state.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"state.mjs","sources":["../../../../../src/gestures/press/utils/state.ts"],"sourcesContent":["export const isPressing = new WeakSet<EventTarget>()\n"],"names":[],"mappings":"AAAO,MAAM,UAAU,GAAG,IAAI,OAAO;;;;"}

View File

@@ -0,0 +1,21 @@
/**
* Recursively traverse up the tree to check whether the provided child node
* is the parent or a descendant of it.
*
* @param parent - Element to find
* @param child - Element to test against parent
*/
const isNodeOrChild = (parent, child) => {
if (!child) {
return false;
}
else if (parent === child) {
return true;
}
else {
return isNodeOrChild(parent, child.parentElement);
}
};
export { isNodeOrChild };
//# sourceMappingURL=is-node-or-child.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-node-or-child.mjs","sources":["../../../../src/gestures/utils/is-node-or-child.ts"],"sourcesContent":["/**\n * Recursively traverse up the tree to check whether the provided child node\n * is the parent or a descendant of it.\n *\n * @param parent - Element to find\n * @param child - Element to test against parent\n */\nexport const isNodeOrChild = (\n parent: Element | null,\n child?: Element | null\n): boolean => {\n if (!child) {\n return false\n } else if (parent === child) {\n return true\n } else {\n return isNodeOrChild(parent, child.parentElement)\n }\n}\n"],"names":[],"mappings":"AAAA;;;;;;AAMG;MACU,aAAa,GAAG,CACzB,MAAsB,EACtB,KAAsB,KACb;IACT,IAAI,CAAC,KAAK,EAAE;AACR,QAAA,OAAO,KAAK;IAChB;AAAO,SAAA,IAAI,MAAM,KAAK,KAAK,EAAE;AACzB,QAAA,OAAO,IAAI;IACf;SAAO;QACH,OAAO,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;IACrD;AACJ;;;;"}

View File

@@ -0,0 +1,19 @@
const isPrimaryPointer = (event) => {
if (event.pointerType === "mouse") {
return typeof event.button !== "number" || event.button <= 0;
}
else {
/**
* isPrimary is true for all mice buttons, whereas every touch point
* is regarded as its own input. So subsequent concurrent touch points
* will be false.
*
* Specifically match against false here as incomplete versions of
* PointerEvents in very old browser might have it set as undefined.
*/
return event.isPrimary !== false;
}
};
export { isPrimaryPointer };
//# sourceMappingURL=is-primary-pointer.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"is-primary-pointer.mjs","sources":["../../../../src/gestures/utils/is-primary-pointer.ts"],"sourcesContent":["export const isPrimaryPointer = (event: PointerEvent) => {\n if (event.pointerType === \"mouse\") {\n return typeof event.button !== \"number\" || event.button <= 0\n } else {\n /**\n * isPrimary is true for all mice buttons, whereas every touch point\n * is regarded as its own input. So subsequent concurrent touch points\n * will be false.\n *\n * Specifically match against false here as incomplete versions of\n * PointerEvents in very old browser might have it set as undefined.\n */\n return event.isPrimary !== false\n }\n}\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB,GAAG,CAAC,KAAmB,KAAI;AACpD,IAAA,IAAI,KAAK,CAAC,WAAW,KAAK,OAAO,EAAE;AAC/B,QAAA,OAAO,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC;IAChE;SAAO;AACH;;;;;;;AAOG;AACH,QAAA,OAAO,KAAK,CAAC,SAAS,KAAK,KAAK;IACpC;AACJ;;;;"}

View File

@@ -0,0 +1,16 @@
import { resolveElements } from '../../utils/resolve-elements.mjs';
function setupGesture(elementOrSelector, options) {
const elements = resolveElements(elementOrSelector);
const gestureAbortController = new AbortController();
const eventOptions = {
passive: true,
...options,
signal: gestureAbortController.signal,
};
const cancel = () => gestureAbortController.abort();
return [elements, eventOptions, cancel];
}
export { setupGesture };
//# sourceMappingURL=setup.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"setup.mjs","sources":["../../../../src/gestures/utils/setup.ts"],"sourcesContent":["import {\n ElementOrSelector,\n resolveElements,\n} from \"../../utils/resolve-elements\"\nimport { EventOptions } from \"../types\"\n\nexport function setupGesture(\n elementOrSelector: ElementOrSelector,\n options: EventOptions\n): [Element[], AddEventListenerOptions, VoidFunction] {\n const elements = resolveElements(elementOrSelector)\n\n const gestureAbortController = new AbortController()\n\n const eventOptions = {\n passive: true,\n ...options,\n signal: gestureAbortController.signal,\n }\n\n const cancel = () => gestureAbortController.abort()\n\n return [elements, eventOptions, cancel]\n}\n"],"names":[],"mappings":";;AAMM,SAAU,YAAY,CACxB,iBAAoC,EACpC,OAAqB,EAAA;AAErB,IAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,iBAAiB,CAAC;AAEnD,IAAA,MAAM,sBAAsB,GAAG,IAAI,eAAe,EAAE;AAEpD,IAAA,MAAM,YAAY,GAAG;AACjB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,GAAG,OAAO;QACV,MAAM,EAAE,sBAAsB,CAAC,MAAM;KACxC;IAED,MAAM,MAAM,GAAG,MAAM,sBAAsB,CAAC,KAAK,EAAE;AAEnD,IAAA,OAAO,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,CAAC;AAC3C;;;;"}