@onerjs/shared-ui-components 8.48.4 → 8.48.5

package/modularTool/hooks/useResizeHandle.d.ts

@@ -0,0 +1,35 @@
+export type GrowDirection = "end" | "start" | "up" | "down";
+export type UseResizeHandleParams = {
+    /**
+     * The direction in which the element is considered growing in size ('end', 'start', 'up', or 'down').
+     */
+    growDirection: GrowDirection;
+    /**
+     * The name of the CSS variable that will be set on the wrapper element to reflect the current size of the element.
+     */
+    variableName: string;
+    /**
+     * A callback that will be called when the element is resized.
+     *
+     * @remarks The passed function should be memoized for better performance.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * The minimum change allowed (e.g. the smallest negative number allowed).
+     */
+    minValue?: number;
+    /**
+     * The maximum change allowed (e.g. the largest positive number allowed).
+     */
+    maxValue?: number;
+};
+/**
+ * A custom hook that helps with element resizing.
+ * @param params The parameters for the resize handle.
+ * @returns An object containing refs and a function to set the value.
+ */
+export declare function useResizeHandle(params: UseResizeHandleParams): {
+    elementRef: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    handleRef: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    setValue: (value: number) => void;
+};

package/modularTool/hooks/useResizeHandle.js

@@ -0,0 +1,75 @@
+// NOTE: This is basically a super simplified version of https://github.com/microsoft/fluentui-contrib/blob/main/packages/react-resize-handle/src/hooks
+// This version does not support keyboard interactions, absolute values, automatically clamping to the actual adjusted size, accessibility, and various other features.
+// We can switch back to Fluent's implementation once some known bugs are fixed:
+// 1. https://github.com/microsoft/fluentui-contrib/issues/523
+// 2. React 19 compatibility
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Clamp } from "@onerjs/core/Maths/math.scalar.functions.js";
+/**
+ * A custom hook that helps with element resizing.
+ * @param params The parameters for the resize handle.
+ * @returns An object containing refs and a function to set the value.
+ */
+export function useResizeHandle(params) {
+    const { growDirection, variableName, onChange } = params;
+    const valueRef = useRef(0);
+    const [elementRef, setElementRef] = useState(null);
+    const [handleRef, setHandleRef] = useState(null);
+    const updateElementStyle = useCallback((value) => {
+        if (elementRef) {
+            elementRef.style.setProperty(variableName, `${value}px`);
+        }
+    }, [elementRef, variableName]);
+    const setValue = useCallback((value) => {
+        valueRef.current = value;
+        updateElementStyle(value);
+        onChange?.(value);
+    }, [updateElementStyle, onChange]);
+    useEffect(() => {
+        updateElementStyle(valueRef.current);
+    }, [updateElementStyle]);
+    useEffect(() => {
+        if (handleRef) {
+            let delta = 0;
+            const coerceDelta = (delta) => Clamp(delta, params.minValue ?? -Infinity, params.maxValue ?? Infinity);
+            const onPointerMove = (event) => {
+                event.preventDefault();
+                switch (growDirection) {
+                    case "up":
+                        delta -= event.movementY;
+                        break;
+                    case "down":
+                        delta += event.movementY;
+                        break;
+                    case "start":
+                        delta -= event.movementX;
+                        break;
+                    case "end":
+                        delta += event.movementX;
+                        break;
+                }
+                setValue(coerceDelta(delta));
+            };
+            const onPointerDown = (event) => {
+                event.preventDefault();
+                delta = valueRef.current;
+                handleRef.setPointerCapture(event.pointerId);
+                handleRef.addEventListener("pointermove", onPointerMove);
+            };
+            const onPointerUp = (event) => {
+                event.preventDefault();
+                handleRef.releasePointerCapture(event.pointerId);
+                handleRef.removeEventListener("pointermove", onPointerMove);
+                valueRef.current = coerceDelta(valueRef.current);
+            };
+            handleRef.addEventListener("pointerdown", onPointerDown);
+            handleRef.addEventListener("pointerup", onPointerUp);
+        }
+    }, [handleRef, setValue]);
+    return {
+        elementRef: setElementRef,
+        handleRef: setHandleRef,
+        setValue,
+    };
+}
+//# sourceMappingURL=useResizeHandle.js.map

package/modularTool/hooks/useResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeHandle.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/hooks/useResizeHandle.ts"],"names":[],"mappings":"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","sourcesContent":["// NOTE: This is basically a super simplified version of https://github.com/microsoft/fluentui-contrib/blob/main/packages/react-resize-handle/src/hooks\r\n// This version does not support keyboard interactions, absolute values, automatically clamping to the actual adjusted size, accessibility, and various other features.\r\n// We can switch back to Fluent's implementation once some known bugs are fixed:\r\n// 1. https://github.com/microsoft/fluentui-contrib/issues/523\r\n// 2. React 19 compatibility\r\n\r\nimport { useCallback, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { Clamp } from \"core/Maths/math.scalar.functions\";\r\n\r\nexport type GrowDirection = \"end\" | \"start\" | \"up\" | \"down\";\r\n\r\nexport type UseResizeHandleParams = {\r\n    /**\r\n     * The direction in which the element is considered growing in size ('end', 'start', 'up', or 'down').\r\n     */\r\n    growDirection: GrowDirection;\r\n    /**\r\n     * The name of the CSS variable that will be set on the wrapper element to reflect the current size of the element.\r\n     */\r\n    variableName: string;\r\n    /**\r\n     * A callback that will be called when the element is resized.\r\n     *\r\n     * @remarks The passed function should be memoized for better performance.\r\n     */\r\n    onChange?: (value: number) => void;\r\n    /**\r\n     * The minimum change allowed (e.g. the smallest negative number allowed).\r\n     */\r\n    minValue?: number;\r\n    /**\r\n     * The maximum change allowed (e.g. the largest positive number allowed).\r\n     */\r\n    maxValue?: number;\r\n};\r\n\r\n/**\r\n * A custom hook that helps with element resizing.\r\n * @param params The parameters for the resize handle.\r\n * @returns An object containing refs and a function to set the value.\r\n */\r\nexport function useResizeHandle(params: UseResizeHandleParams) {\r\n    const { growDirection, variableName, onChange } = params;\r\n\r\n    const valueRef = useRef(0);\r\n    const [elementRef, setElementRef] = useState<HTMLElement | null>(null);\r\n    const [handleRef, setHandleRef] = useState<HTMLElement | null>(null);\r\n\r\n    const updateElementStyle = useCallback(\r\n        (value: number) => {\r\n            if (elementRef) {\r\n                elementRef.style.setProperty(variableName, `${value}px`);\r\n            }\r\n        },\r\n        [elementRef, variableName]\r\n    );\r\n\r\n    const setValue = useCallback(\r\n        (value: number) => {\r\n            valueRef.current = value;\r\n            updateElementStyle(value);\r\n            onChange?.(value);\r\n        },\r\n        [updateElementStyle, onChange]\r\n    );\r\n\r\n    useEffect(() => {\r\n        updateElementStyle(valueRef.current);\r\n    }, [updateElementStyle]);\r\n\r\n    useEffect(() => {\r\n        if (handleRef) {\r\n            let delta = 0;\r\n\r\n            const coerceDelta = (delta: number) => Clamp(delta, params.minValue ?? -Infinity, params.maxValue ?? Infinity);\r\n\r\n            const onPointerMove = (event: PointerEvent) => {\r\n                event.preventDefault();\r\n                switch (growDirection) {\r\n                    case \"up\":\r\n                        delta -= event.movementY;\r\n                        break;\r\n                    case \"down\":\r\n                        delta += event.movementY;\r\n                        break;\r\n                    case \"start\":\r\n                        delta -= event.movementX;\r\n                        break;\r\n                    case \"end\":\r\n                        delta += event.movementX;\r\n                        break;\r\n                }\r\n                setValue(coerceDelta(delta));\r\n            };\r\n\r\n            const onPointerDown = (event: PointerEvent) => {\r\n                event.preventDefault();\r\n                delta = valueRef.current;\r\n                handleRef.setPointerCapture(event.pointerId);\r\n                handleRef.addEventListener(\"pointermove\", onPointerMove);\r\n            };\r\n\r\n            const onPointerUp = (event: PointerEvent) => {\r\n                event.preventDefault();\r\n                handleRef.releasePointerCapture(event.pointerId);\r\n                handleRef.removeEventListener(\"pointermove\", onPointerMove);\r\n                valueRef.current = coerceDelta(valueRef.current);\r\n            };\r\n\r\n            handleRef.addEventListener(\"pointerdown\", onPointerDown);\r\n            handleRef.addEventListener(\"pointerup\", onPointerUp);\r\n        }\r\n    }, [handleRef, setValue]);\r\n\r\n    return {\r\n        elementRef: setElementRef,\r\n        handleRef: setHandleRef,\r\n        setValue,\r\n    };\r\n}\r\n"]}

package/modularTool/misc/assert.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Asserts that the given value is truthy.
+ * @param value The value to check.
+ */
+export declare function Assert(value: unknown): asserts value;

package/modularTool/misc/assert.js

@@ -0,0 +1,10 @@
+/**
+ * Asserts that the given value is truthy.
+ * @param value The value to check.
+ */
+export function Assert(value) {
+    if (!value) {
+        throw new Error("assertion failed");
+    }
+}
+//# sourceMappingURL=assert.js.map

package/modularTool/misc/assert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assert.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/misc/assert.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,MAAM,CAAC,KAAc;IACjC,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC;AACL,CAAC","sourcesContent":["/**\r\n * Asserts that the given value is truthy.\r\n * @param value The value to check.\r\n */\r\nexport function Assert(value: unknown): asserts value {\r\n    if (!value) {\r\n        throw new Error(\"assertion failed\");\r\n    }\r\n}\r\n"]}

package/modularTool/misc/graphUtils.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Performs a topological sort on a graph.
+ * @param graph The set of nodes that make up the graph.
+ * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+ * @param onSortedNode A function that is called for each node in the sorted order.
+ * @remarks
+ * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.
+ */
+export declare function SortGraph<NodeT>(graph: Iterable<NodeT>, getAdjacentNodes: (node: NodeT) => Iterable<NodeT>, onSortedNode: (node: NodeT) => void): void;
+/**
+ * Traverses a graph.
+ * @param graph The set of nodes that make up the graph.
+ * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+ * @param onBeforeTraverse A function that is called before traversing each node.
+ * @param onAfterTraverse A function that is called after traversing each node.
+ * @remarks
+ * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.
+ */
+export declare function TraverseGraph<NodeT>(graph: Iterable<NodeT>, getAdjacentNodes: (node: NodeT) => Iterable<NodeT> | null | undefined, onBeforeTraverse?: (node: NodeT) => void, onAfterTraverse?: (node: NodeT) => void): void;
+/**
+ * A utility class for performing graph operations.
+ * @remarks
+ * The class allocates new objects, but each operation (e.g. sort, traverse) is allocation free. This is useful when used in the hot path.
+ */
+export declare class GraphUtils<DefaultNodeT = unknown> {
+    private readonly _traversalState;
+    private _isTraversing;
+    /**
+     * Performs a topological sort on a graph.
+     * @param graph The set of nodes that make up the graph.
+     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+     * @param onSortedNode A function that is called for each node in the sorted order.
+     */
+    sort<NodeT extends DefaultNodeT>(graph: Iterable<NodeT>, getAdjacentNodes: (node: NodeT) => Iterable<NodeT>, onSortedNode: (node: NodeT) => void): void;
+    /**
+     * Traverses a graph.
+     * @param graph The set of nodes that make up the graph.
+     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+     * @param onBeforeTraverse A function that is called before traversing each node.
+     * @param onAfterTraverse A function that is called after traversing each node.
+     */
+    traverse<NodeT extends DefaultNodeT>(graph: Iterable<NodeT>, getAdjacentNodes: (node: NodeT) => Iterable<NodeT> | null | undefined, onBeforeTraverse?: (node: NodeT) => void, onAfterTraverse?: (node: NodeT) => void): void;
+    private _traverseCore;
+}

package/modularTool/misc/graphUtils.js

@@ -0,0 +1,90 @@
+/**
+ * Performs a topological sort on a graph.
+ * @param graph The set of nodes that make up the graph.
+ * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+ * @param onSortedNode A function that is called for each node in the sorted order.
+ * @remarks
+ * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.
+ */
+export function SortGraph(graph, getAdjacentNodes, onSortedNode) {
+    const sorter = new GraphUtils();
+    sorter.sort(graph, getAdjacentNodes, onSortedNode);
+}
+/**
+ * Traverses a graph.
+ * @param graph The set of nodes that make up the graph.
+ * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+ * @param onBeforeTraverse A function that is called before traversing each node.
+ * @param onAfterTraverse A function that is called after traversing each node.
+ * @remarks
+ * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.
+ */
+export function TraverseGraph(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse) {
+    const traverser = new GraphUtils();
+    traverser.traverse(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);
+}
+/**
+ * A utility class for performing graph operations.
+ * @remarks
+ * The class allocates new objects, but each operation (e.g. sort, traverse) is allocation free. This is useful when used in the hot path.
+ */
+export class GraphUtils {
+    constructor() {
+        // Tracks three states:
+        // 1. No entry for the node - this means the node has not been encountered yet during any traversal
+        // 2. Entry with value false - this means the node is currently being traversed (needed to detect cycles)
+        // 3. Entry with value true - this means the node has already been fully traversed (and cycles were not detected)
+        this._traversalState = new Map();
+        this._isTraversing = false;
+    }
+    /**
+     * Performs a topological sort on a graph.
+     * @param graph The set of nodes that make up the graph.
+     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+     * @param onSortedNode A function that is called for each node in the sorted order.
+     */
+    sort(graph, getAdjacentNodes, onSortedNode) {
+        this.traverse(graph, getAdjacentNodes, undefined, onSortedNode);
+    }
+    /**
+     * Traverses a graph.
+     * @param graph The set of nodes that make up the graph.
+     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+     * @param onBeforeTraverse A function that is called before traversing each node.
+     * @param onAfterTraverse A function that is called after traversing each node.
+     */
+    traverse(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse) {
+        // Since the traversal state is re-used, disallow re-entrancy through the getAdjacentNodes or onBeforeTraverse or onAfterTraverse callbacks.
+        if (this._isTraversing) {
+            throw new Error("This TopologicalSorter instance is already traversing.");
+        }
+        this._isTraversing = true;
+        try {
+            for (const node of graph) {
+                this._traverseCore(node, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);
+            }
+        }
+        finally {
+            this._isTraversing = false;
+            this._traversalState.clear();
+        }
+    }
+    _traverseCore(node, getAdjacentNodes, onBeforeTraverse, onAfterTraverse) {
+        if (this._traversalState.get(node) !== true) {
+            if (this._traversalState.get(node) === false) {
+                throw new Error("Graph has cycle.");
+            }
+            this._traversalState.set(node, false);
+            onBeforeTraverse?.(node);
+            const adjacentNodes = getAdjacentNodes(node);
+            if (adjacentNodes) {
+                for (const adjacentNode of adjacentNodes) {
+                    this._traverseCore(adjacentNode, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);
+                }
+            }
+            this._traversalState.set(node, true);
+            onAfterTraverse?.(node);
+        }
+    }
+}
+//# sourceMappingURL=graphUtils.js.map

package/modularTool/misc/graphUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphUtils.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/misc/graphUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAQ,KAAsB,EAAE,gBAAkD,EAAE,YAAmC;IAC5I,MAAM,MAAM,GAAG,IAAI,UAAU,EAAS,CAAC;IACvC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAAE,YAAY,CAAC,CAAC;AACvD,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CACzB,KAAsB,EACtB,gBAAqE,EACrE,gBAAwC,EACxC,eAAuC;IAEvC,MAAM,SAAS,GAAG,IAAI,UAAU,EAAS,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC;AACnF,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,UAAU;IAAvB;QACI,uBAAuB;QACvB,mGAAmG;QACnG,yGAAyG;QACzG,iHAAiH;QAChG,oBAAe,GAAG,IAAI,GAAG,EAAyB,CAAC;QAC5D,kBAAa,GAAG,KAAK,CAAC;IAmElC,CAAC;IAjEG;;;;;OAKG;IACI,IAAI,CAA6B,KAAsB,EAAE,gBAAkD,EAAE,YAAmC;QACnJ,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC;IAED;;;;;;OAMG;IACI,QAAQ,CACX,KAAsB,EACtB,gBAAqE,EACrE,gBAAwC,EACxC,eAAuC;QAEvC,4IAA4I;QAC5I,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;QAC9E,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAE1B,IAAI,CAAC;YACD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC;YAClF,CAAC;QACL,CAAC;gBAAS,CAAC;YACP,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;QACjC,CAAC;IACL,CAAC;IAEO,aAAa,CACjB,IAAW,EACX,gBAAqE,EACrE,gBAAwC,EACxC,eAAuC;QAEvC,IAAI,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;YAC1C,IAAI,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;gBAC3C,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC;YACxC,CAAC;YAED,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACtC,gBAAgB,EAAE,CAAC,IAAI,CAAC,CAAC;YAEzB,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;YAC7C,IAAI,aAAa,EAAE,CAAC;gBAChB,KAAK,MAAM,YAAY,IAAI,aAAa,EAAE,CAAC;oBACvC,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC;gBAC1F,CAAC;YACL,CAAC;YAED,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACrC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;IACL,CAAC;CACJ","sourcesContent":["/**\r\n * Performs a topological sort on a graph.\r\n * @param graph The set of nodes that make up the graph.\r\n * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.\r\n * @param onSortedNode A function that is called for each node in the sorted order.\r\n * @remarks\r\n * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.\r\n */\r\nexport function SortGraph<NodeT>(graph: Iterable<NodeT>, getAdjacentNodes: (node: NodeT) => Iterable<NodeT>, onSortedNode: (node: NodeT) => void) {\r\n    const sorter = new GraphUtils<NodeT>();\r\n    sorter.sort(graph, getAdjacentNodes, onSortedNode);\r\n}\r\n\r\n/**\r\n * Traverses a graph.\r\n * @param graph The set of nodes that make up the graph.\r\n * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.\r\n * @param onBeforeTraverse A function that is called before traversing each node.\r\n * @param onAfterTraverse A function that is called after traversing each node.\r\n * @remarks\r\n * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.\r\n */\r\nexport function TraverseGraph<NodeT>(\r\n    graph: Iterable<NodeT>,\r\n    getAdjacentNodes: (node: NodeT) => Iterable<NodeT> | null | undefined,\r\n    onBeforeTraverse?: (node: NodeT) => void,\r\n    onAfterTraverse?: (node: NodeT) => void\r\n) {\r\n    const traverser = new GraphUtils<NodeT>();\r\n    traverser.traverse(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);\r\n}\r\n\r\n/**\r\n * A utility class for performing graph operations.\r\n * @remarks\r\n * The class allocates new objects, but each operation (e.g. sort, traverse) is allocation free. This is useful when used in the hot path.\r\n */\r\nexport class GraphUtils<DefaultNodeT = unknown> {\r\n    // Tracks three states:\r\n    // 1. No entry for the node - this means the node has not been encountered yet during any traversal\r\n    // 2. Entry with value false - this means the node is currently being traversed (needed to detect cycles)\r\n    // 3. Entry with value true - this means the node has already been fully traversed (and cycles were not detected)\r\n    private readonly _traversalState = new Map<DefaultNodeT, boolean>();\r\n    private _isTraversing = false;\r\n\r\n    /**\r\n     * Performs a topological sort on a graph.\r\n     * @param graph The set of nodes that make up the graph.\r\n     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.\r\n     * @param onSortedNode A function that is called for each node in the sorted order.\r\n     */\r\n    public sort<NodeT extends DefaultNodeT>(graph: Iterable<NodeT>, getAdjacentNodes: (node: NodeT) => Iterable<NodeT>, onSortedNode: (node: NodeT) => void) {\r\n        this.traverse(graph, getAdjacentNodes, undefined, onSortedNode);\r\n    }\r\n\r\n    /**\r\n     * Traverses a graph.\r\n     * @param graph The set of nodes that make up the graph.\r\n     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.\r\n     * @param onBeforeTraverse A function that is called before traversing each node.\r\n     * @param onAfterTraverse A function that is called after traversing each node.\r\n     */\r\n    public traverse<NodeT extends DefaultNodeT>(\r\n        graph: Iterable<NodeT>,\r\n        getAdjacentNodes: (node: NodeT) => Iterable<NodeT> | null | undefined,\r\n        onBeforeTraverse?: (node: NodeT) => void,\r\n        onAfterTraverse?: (node: NodeT) => void\r\n    ) {\r\n        // Since the traversal state is re-used, disallow re-entrancy through the getAdjacentNodes or onBeforeTraverse or onAfterTraverse callbacks.\r\n        if (this._isTraversing) {\r\n            throw new Error(\"This TopologicalSorter instance is already traversing.\");\r\n        }\r\n\r\n        this._isTraversing = true;\r\n\r\n        try {\r\n            for (const node of graph) {\r\n                this._traverseCore(node, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);\r\n            }\r\n        } finally {\r\n            this._isTraversing = false;\r\n            this._traversalState.clear();\r\n        }\r\n    }\r\n\r\n    private _traverseCore<NodeT extends DefaultNodeT>(\r\n        node: NodeT,\r\n        getAdjacentNodes: (node: NodeT) => Iterable<NodeT> | null | undefined,\r\n        onBeforeTraverse?: (node: NodeT) => void,\r\n        onAfterTraverse?: (node: NodeT) => void\r\n    ) {\r\n        if (this._traversalState.get(node) !== true) {\r\n            if (this._traversalState.get(node) === false) {\r\n                throw new Error(\"Graph has cycle.\");\r\n            }\r\n\r\n            this._traversalState.set(node, false);\r\n            onBeforeTraverse?.(node);\r\n\r\n            const adjacentNodes = getAdjacentNodes(node);\r\n            if (adjacentNodes) {\r\n                for (const adjacentNode of adjacentNodes) {\r\n                    this._traverseCore(adjacentNode, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);\r\n                }\r\n            }\r\n\r\n            this._traversalState.set(node, true);\r\n            onAfterTraverse?.(node);\r\n        }\r\n    }\r\n}\r\n"]}

package/modularTool/misc/observableCollection.d.ts

@@ -0,0 +1,23 @@
+import { type IDisposable, type IReadonlyObservable } from "@onerjs/core/index.js";
+/**
+ * A collection of items that can be observed for changes.
+ */
+export declare class ObservableCollection<T> {
+    private readonly _items;
+    private readonly _keys;
+    private readonly _observable;
+    /**
+     * An observable that notifies observers when the collection changes.
+     */
+    get observable(): IReadonlyObservable<void>;
+    /**
+     * The items in the collection.
+     */
+    get items(): readonly T[];
+    /**
+     * Adds an item to the collection.
+     * @param item The item to add.
+     * @returns A disposable that removes the item from the collection when disposed.
+     */
+    add(item: T): IDisposable;
+}

package/modularTool/misc/observableCollection.js

@@ -0,0 +1,43 @@
+import { Observable } from "@onerjs/core/Misc/observable.js";
+/**
+ * A collection of items that can be observed for changes.
+ */
+export class ObservableCollection {
+    constructor() {
+        this._items = [];
+        this._keys = [];
+        this._observable = new Observable();
+    }
+    /**
+     * An observable that notifies observers when the collection changes.
+     */
+    get observable() {
+        return this._observable;
+    }
+    /**
+     * The items in the collection.
+     */
+    get items() {
+        return this._items;
+    }
+    /**
+     * Adds an item to the collection.
+     * @param item The item to add.
+     * @returns A disposable that removes the item from the collection when disposed.
+     */
+    add(item) {
+        const key = Symbol();
+        this._items.push(item);
+        this._keys.push(key);
+        this._observable.notifyObservers();
+        return {
+            dispose: () => {
+                const index = this._keys.indexOf(key);
+                this._items.splice(index, 1);
+                this._keys.splice(index, 1);
+                this._observable.notifyObservers();
+            },
+        };
+    }
+}
+//# sourceMappingURL=observableCollection.js.map

package/modularTool/misc/observableCollection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observableCollection.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/misc/observableCollection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,oBAAoB;IAAjC;QACqB,WAAM,GAAQ,EAAE,CAAC;QACjB,UAAK,GAAa,EAAE,CAAC;QACrB,gBAAW,GAAG,IAAI,UAAU,EAAQ,CAAC;IAoC1D,CAAC;IAlCG;;OAEG;IACH,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,IAAW,KAAK;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAED;;;;OAIG;IACI,GAAG,CAAC,IAAO;QACd,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;QAEnC,OAAO;YACH,OAAO,EAAE,GAAG,EAAE;gBACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;gBACtC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBAC7B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBAC5B,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC;SACJ,CAAC;IACN,CAAC;CACJ","sourcesContent":["import { type IDisposable, type IReadonlyObservable } from \"core/index\";\r\n\r\nimport { Observable } from \"core/Misc/observable\";\r\n\r\n/**\r\n * A collection of items that can be observed for changes.\r\n */\r\nexport class ObservableCollection<T> {\r\n    private readonly _items: T[] = [];\r\n    private readonly _keys: symbol[] = [];\r\n    private readonly _observable = new Observable<void>();\r\n\r\n    /**\r\n     * An observable that notifies observers when the collection changes.\r\n     */\r\n    public get observable(): IReadonlyObservable<void> {\r\n        return this._observable;\r\n    }\r\n\r\n    /**\r\n     * The items in the collection.\r\n     */\r\n    public get items(): readonly T[] {\r\n        return this._items;\r\n    }\r\n\r\n    /**\r\n     * Adds an item to the collection.\r\n     * @param item The item to add.\r\n     * @returns A disposable that removes the item from the collection when disposed.\r\n     */\r\n    public add(item: T): IDisposable {\r\n        const key = Symbol();\r\n        this._items.push(item);\r\n        this._keys.push(key);\r\n        this._observable.notifyObservers();\r\n\r\n        return {\r\n            dispose: () => {\r\n                const index = this._keys.indexOf(key);\r\n                this._items.splice(index, 1);\r\n                this._keys.splice(index, 1);\r\n                this._observable.notifyObservers();\r\n            },\r\n        };\r\n    }\r\n}\r\n"]}

package/modularTool/modularTool.d.ts

@@ -0,0 +1,42 @@
+import { type IDisposable } from "@onerjs/core/index.js";
+import { type IExtensionFeed } from "./extensibility/extensionFeed.js";
+import { type WeaklyTypedServiceDefinition, ServiceContainer } from "./modularity/serviceContainer.js";
+import { type ShellServiceOptions } from "./services/shellService.js";
+import { type ThemeMode } from "./services/themeService.js";
+export type ModularToolOptions = {
+    /**
+     * The namespace for the tool, used for scoping persisted settings and other storage.
+     */
+    namespace: string;
+    /**
+     * The container element where the tool will be rendered.
+     */
+    containerElement: HTMLElement;
+    /**
+     * The service definitions to be registered with the tool.
+     */
+    serviceDefinitions: readonly WeaklyTypedServiceDefinition[];
+    /**
+     * The theme mode to use. If not specified, the default is "system", which uses the system/browser preference, and the last used mode is persisted.
+     */
+    themeMode?: ThemeMode;
+    /**
+     * Whether to show the theme selector in the toolbar. Default is true.
+     */
+    showThemeSelector?: boolean;
+    /**
+     * The extension feeds that provide optional extensions the user can install.
+     */
+    extensionFeeds?: readonly IExtensionFeed[];
+    /**
+     * An optional parent ServiceContainer. Dependencies not found in the tool's own container
+     * will be resolved from this parent.
+     */
+    parentContainer?: ServiceContainer;
+} & ShellServiceOptions;
+/**
+ * Creates a modular tool with a base set of common tool services, including the toolbar/side pane basic UI layout.
+ * @param options The options for the tool.
+ * @returns A token that can be used to dispose of the tool.
+ */
+export declare function MakeModularTool(options: ModularToolOptions): IDisposable;

package/modularTool/modularTool.js

@@ -0,0 +1,223 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, Suspense, useCallback, useEffect, useReducer, useState, } from "react";
+import { ExtensionManager } from "./extensibility/extensionManager.js";
+import { ServiceContainer } from "./modularity/serviceContainer.js";
+import { SettingsStore, SettingsStoreIdentity } from "./services/settingsStore.js";
+import { MakeShellServiceDefinition, RootComponentServiceIdentity } from "./services/shellService.js";
+import { ThemeModeSettingDescriptor, ThemeServiceDefinition } from "./services/themeService.js";
+import { Body1, Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, List, ListItem, makeStyles, Spinner, tokens, } from "@fluentui/react-components";
+import { ErrorCircleRegular } from "@fluentui/react-icons";
+import { createRoot } from "react-dom/client";
+import { Deferred } from "@onerjs/core/Misc/deferred.js";
+import { Logger } from "@onerjs/core/Misc/logger.js";
+import { ToastProvider } from "../fluent/primitives/toast.js";
+import { Theme } from "./components/theme.js";
+import { ExtensionManagerContext } from "./contexts/extensionManagerContext.js";
+import { SettingsStoreContext } from "./contexts/settingsContext.js";
+import { ReactContextServiceIdentity } from "./services/reactContextService.js";
+import { ThemeSelectorServiceDefinition } from "./services/themeSelectorService.js";
+const useStyles = makeStyles({
+    app: {
+        colorScheme: "light dark",
+        flexGrow: 1,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: tokens.colorTransparentBackground,
+    },
+    spinner: {
+        flexGrow: 1,
+        animationDuration: "1s",
+        animationName: {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+        },
+    },
+    extensionErrorTitleDiv: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+    },
+    extensionErrorIcon: {
+        color: tokens.colorPaletteRedForeground1,
+    },
+});
+const ReactContextsWrapper = ({ contexts, children }) => {
+    return _jsx(_Fragment, { children: contexts.reduceRight((acc, entry) => createElement(entry.provider, { value: entry.value }, acc), children) });
+};
+/**
+ * Creates a modular tool with a base set of common tool services, including the toolbar/side pane basic UI layout.
+ * @param options The options for the tool.
+ * @returns A token that can be used to dispose of the tool.
+ */
+export function MakeModularTool(options) {
+    const { namespace, containerElement, serviceDefinitions, themeMode, showThemeSelector = true, extensionFeeds = [], parentContainer } = options;
+    // Create the settings store immediately as it will be exposed to services and through React context.
+    const settingsStore = new SettingsStore(namespace);
+    // If a theme mode is provided, just write the setting so it is the active theme.
+    if (themeMode) {
+        settingsStore.writeSetting(ThemeModeSettingDescriptor, themeMode);
+    }
+    const modularToolRootComponent = () => {
+        const classes = useStyles();
+        const [extensionManagerContext, setExtensionManagerContext] = useState();
+        const [requiredExtensions, setRequiredExtensions] = useState();
+        const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
+        const [extensionInstallError, setExtensionInstallError] = useState();
+        const [rootComponentService, setRootComponentService] = useState();
+        const [contexts, updateContexts] = useReducer((state, action) => {
+            switch (action.type) {
+                case "add":
+                    return [...state, action.entry].sort((a, b) => a.order - b.order);
+                case "remove":
+                    return state.filter((e) => e.provider !== action.provider);
+                case "update":
+                    return state.map((e) => (e.provider === action.provider ? { ...e, value: action.value } : e));
+            }
+        }, []);
+        // This is the main async initialization.
+        useEffect(() => {
+            const initializeExtensionManagerAsync = async () => {
+                const serviceContainer = new ServiceContainer("ModularToolContainer", parentContainer);
+                // Expose the settings store as a service so other services can read/write settings.
+                await serviceContainer.addServiceAsync({
+                    friendlyName: "Settings Store",
+                    produces: [SettingsStoreIdentity],
+                    factory: () => settingsStore,
+                });
+                // Expose the react context service so other services can add React context providers.
+                await serviceContainer.addServiceAsync({
+                    friendlyName: "React Context Service",
+                    produces: [ReactContextServiceIdentity],
+                    factory: () => ({
+                        addContext(provider, initialValue, options) {
+                            const typedProvider = provider;
+                            updateContexts({ type: "add", entry: { provider: typedProvider, value: initialValue, order: options?.order ?? 0 } });
+                            return {
+                                updateValue: (newValue) => {
+                                    updateContexts({ type: "update", provider: typedProvider, value: newValue });
+                                },
+                                dispose: () => {
+                                    updateContexts({ type: "remove", provider: typedProvider });
+                                },
+                            };
+                        },
+                    }),
+                });
+                // Register the shell service (top level toolbar/side pane UI layout).
+                await serviceContainer.addServiceAsync(MakeShellServiceDefinition(options));
+                // Register a service that simply consumes the services we need before first render.
+                await serviceContainer.addServiceAsync({
+                    friendlyName: "Service Bootstrapper",
+                    consumes: [RootComponentServiceIdentity],
+                    factory: (rootComponent) => {
+                        // Use function syntax for the state setter since the root component may be a function component.
+                        setRootComponentService(() => rootComponent);
+                        return {
+                            dispose: () => setRootComponentService(undefined),
+                        };
+                    },
+                });
+                // Register the theme service (exposes the current theme to other services).
+                await serviceContainer.addServiceAsync(ThemeServiceDefinition);
+                // Register the theme selector service (for selecting the theme) if theming is configured.
+                if (showThemeSelector) {
+                    await serviceContainer.addServiceAsync(ThemeSelectorServiceDefinition);
+                }
+                // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
+                if (extensionFeeds.length > 0) {
+                    const { ExtensionListServiceDefinition } = await import("./services/extensionsListService.js");
+                    await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
+                }
+                // Register all external services (that make up a unique tool).
+                await serviceContainer.addServicesAsync(...serviceDefinitions);
+                // Create the extension manager, passing along the registry for runtime changes to the registered services.
+                const extensionManager = await ExtensionManager.CreateAsync(namespace, serviceContainer, extensionFeeds, setExtensionInstallError);
+                // Check query params for required extensions. This lets users share links with sets of extensions.
+                const queryParams = new URLSearchParams(window.location.search);
+                const requiredExtensions = queryParams.getAll("babylon.requiredExtension");
+                const uninstalledExtensions = [];
+                for (const requiredExtension of requiredExtensions) {
+                    // These could possibly be parallelized to speed things up, but it's more complex so let's wait and see if we need it.
+                    // eslint-disable-next-line no-await-in-loop
+                    const query = await extensionManager.queryExtensionsAsync(requiredExtension);
+                    // eslint-disable-next-line no-await-in-loop
+                    const extensions = await query.getExtensionsAsync(0, query.totalCount);
+                    for (const extension of extensions) {
+                        if (!extension.isInstalled) {
+                            uninstalledExtensions.push(extension);
+                        }
+                    }
+                }
+                // Check if any required extensions are uninstalled or disabled. If so, show a dialog to the user.
+                if (uninstalledExtensions.length > 0) {
+                    setRequiredExtensions(uninstalledExtensions.map((extension) => extension.metadata.name));
+                    const deferred = new Deferred();
+                    setRequiredExtensionsDeferred(deferred);
+                    if (await deferred.promise) {
+                        for (const extension of uninstalledExtensions) {
+                            // This could possibly be parallelized to speed things up, but it's more complex so let's wait and see if we need it.
+                            // eslint-disable-next-line no-await-in-loop
+                            await extension.installAsync();
+                        }
+                    }
+                }
+                // Set the contexts.
+                setExtensionManagerContext({ extensionManager });
+                return () => {
+                    extensionManager.dispose();
+                    serviceContainer.dispose();
+                    serviceContainer.dispose();
+                };
+            };
+            const disposePromise = initializeExtensionManagerAsync();
+            return () => {
+                disposePromise
+                    // eslint-disable-next-line github/no-then
+                    .then((dispose) => dispose())
+                    // eslint-disable-next-line github/no-then
+                    .catch((error) => {
+                    Logger.Error(`Failed to dispose of the modular tool: ${error}`);
+                });
+            };
+        }, []);
+        const onAcceptRequiredExtensions = useCallback(() => {
+            setRequiredExtensions(undefined);
+            requiredExtensionsDeferred?.resolve(true);
+        }, [setRequiredExtensions, requiredExtensionsDeferred]);
+        const onRejectRequiredExtensions = useCallback(() => {
+            setRequiredExtensions(undefined);
+            requiredExtensionsDeferred?.resolve(false);
+        }, [setRequiredExtensions, requiredExtensionsDeferred]);
+        const onAcknowledgedExtensionInstallError = useCallback(() => {
+            setExtensionInstallError(undefined);
+        }, [setExtensionInstallError]);
+        // Show a spinner until a main view has been set.
+        if (!rootComponentService) {
+            return (_jsx(ReactContextsWrapper, { contexts: contexts, children: _jsx(SettingsStoreContext.Provider, { value: settingsStore, children: _jsx(Theme, { className: classes.app, children: _jsx(Spinner, { className: classes.spinner }) }) }) }));
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const Content = rootComponentService.rootComponent;
+            return (_jsx(ReactContextsWrapper, { contexts: contexts, children: _jsx(SettingsStoreContext.Provider, { value: settingsStore, children: _jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: _jsx(Theme, { className: classes.app, children: _jsxs(ToastProvider, { children: [_jsx(Dialog, { open: !!requiredExtensions, modalType: "alert", children: _jsx(DialogSurface, { children: _jsxs(DialogBody, { children: [_jsx(DialogTitle, { children: "Required Extensions" }), _jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", _jsx("ul", { children: requiredExtensions?.map((name) => (_jsx("li", { children: name }, name))) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), _jsx(Button, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), _jsx(Dialog, { open: !!extensionInstallError, modalType: "alert", children: _jsx(DialogSurface, { children: _jsxs(DialogBody, { children: [_jsx(DialogTitle, { children: _jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", _jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), _jsx(DialogContent, { children: _jsxs(List, { children: [_jsx(ListItem, { children: _jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), _jsx(ListItem, { children: _jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), _jsx(DialogActions, { children: _jsx(Button, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), _jsx(Suspense, { fallback: _jsx(Spinner, { className: classes.spinner }), children: _jsx(Content, {}) })] }) }) }) }) }));
+        }
+    };
+    // Set the container element to be a flex container so that the tool can be displayed properly.
+    const originalContainerElementDisplay = containerElement.style.display;
+    containerElement.style.display = "flex";
+    // Create and render the react root component.
+    const reactRoot = createRoot(containerElement);
+    reactRoot.render(createElement(modularToolRootComponent));
+    let disposed = false;
+    return {
+        dispose: () => {
+            // Unmount and restore the original container element display.
+            if (!disposed) {
+                disposed = true;
+                reactRoot.unmount();
+                containerElement.style.display = originalContainerElementDisplay;
+            }
+        },
+    };
+}
+//# sourceMappingURL=modularTool.js.map