@babylonjs/shared-ui-components 9.25.0 → 9.26.1

package/lite/fluent/hoc/propertyLines/colorPropertyLine.d.ts

@@ -0,0 +1,10 @@
+import { type Color3, type Color4 } from "@babylonjs/lite";
+import { type FunctionComponent } from "react";
+import { type PropertyLineProps } from "../../../../fluent/hoc/propertyLines/propertyLine.js";
+import { type StructuralColorPickerProps } from "../../../../fluent/primitives/structuralColorPicker.js";
+export type Color3Value = Color3 | readonly [number, number, number];
+export type Color4Value = Color4 | readonly [number, number, number, number];
+export type ColorPickerProps<ValueT extends Color3Value | Color4Value> = Omit<StructuralColorPickerProps<ValueT>, "adapter">;
+export type ColorPropertyLineProps<ValueT extends Color3Value | Color4Value> = ColorPickerProps<ValueT> & PropertyLineProps<ValueT>;
+export declare const Color3PropertyLine: FunctionComponent<ColorPropertyLineProps<Color3Value>>;
+export declare const Color4PropertyLine: FunctionComponent<ColorPropertyLineProps<Color4Value>>;

package/lite/fluent/hoc/propertyLines/colorPropertyLine.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ControlledColorPropertyLine } from "../../../../fluent/hoc/propertyLines/colorPropertyLineCore.js";
+import { StructuralColorPickerPopup } from "../../../../fluent/primitives/structuralColorPicker.js";
+function IsColor4Value(value) {
+    return "r" in value ? "a" in value : value.length === 4;
+}
+function GetStructuralColor(value) {
+    if (!("r" in value)) {
+        return {
+            r: value[0],
+            g: value[1],
+            b: value[2],
+            ...(value.length === 4 ? { a: value[3] } : {}),
+        };
+    }
+    return value;
+}
+function CreateColor3Value(color, source) {
+    if (!("r" in source)) {
+        return [color.r, color.g, color.b];
+    }
+    return {
+        r: color.r,
+        g: color.g,
+        b: color.b,
+    };
+}
+function CreateColor4Value(color, source) {
+    if (!("r" in source)) {
+        return [color.r, color.g, color.b, color.a ?? source[3]];
+    }
+    return {
+        r: color.r,
+        g: color.g,
+        b: color.b,
+        a: color.a ?? source.a,
+    };
+}
+const Picker = (props) => (_jsx(StructuralColorPickerPopup, { ...props, adapter: {
+        getColor: GetStructuralColor,
+        createColor: (color, source) => (IsColor4Value(source) ? CreateColor4Value(color, source) : CreateColor3Value(color, source)),
+    } }));
+const Adapter = {
+    picker: Picker,
+    getColor: GetStructuralColor,
+    createColor: (color, source) => (IsColor4Value(source) ? CreateColor4Value(color, source) : CreateColor3Value(color, source)),
+};
+export const Color3PropertyLine = (props) => (_jsx(ControlledColorPropertyLine, { ...props, adapter: Adapter }));
+export const Color4PropertyLine = (props) => (_jsx(ControlledColorPropertyLine, { ...props, adapter: Adapter }));
+//# sourceMappingURL=colorPropertyLine.js.map

package/lite/fluent/hoc/propertyLines/colorPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../../../dev/sharedUiComponents/src/lite/fluent/hoc/propertyLines/colorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type Color3, type Color4 } from \"@babylonjs/lite\";\r\nimport { type FunctionComponent } from \"react\";\r\n\r\nimport { ControlledColorPropertyLine, type ColorPropertyLineAdapter } from \"shared-ui-components/fluent/hoc/propertyLines/colorPropertyLineCore\";\r\nimport { type PropertyLineProps } from \"shared-ui-components/fluent/hoc/propertyLines/propertyLine\";\r\nimport { StructuralColorPickerPopup, type StructuralColorPickerProps, type StructuralColor } from \"shared-ui-components/fluent/primitives/structuralColorPicker\";\r\n\r\nexport type Color3Value = Color3 | readonly [number, number, number];\r\nexport type Color4Value = Color4 | readonly [number, number, number, number];\r\n\r\nexport type ColorPickerProps<ValueT extends Color3Value | Color4Value> = Omit<StructuralColorPickerProps<ValueT>, \"adapter\">;\r\nexport type ColorPropertyLineProps<ValueT extends Color3Value | Color4Value> = ColorPickerProps<ValueT> & PropertyLineProps<ValueT>;\r\n\r\nfunction IsColor4Value(value: Color3Value | Color4Value): value is Color4Value {\r\n    return \"r\" in value ? \"a\" in value : value.length === 4;\r\n}\r\n\r\nfunction GetStructuralColor(value: Color3Value | Color4Value): StructuralColor {\r\n    if (!(\"r\" in value)) {\r\n        return {\r\n            r: value[0],\r\n            g: value[1],\r\n            b: value[2],\r\n            ...(value.length === 4 ? { a: value[3] } : {}),\r\n        };\r\n    }\r\n    return value;\r\n}\r\n\r\nfunction CreateColor3Value(color: StructuralColor, source: Color3Value): Color3Value {\r\n    if (!(\"r\" in source)) {\r\n        return [color.r, color.g, color.b];\r\n    }\r\n    return {\r\n        r: color.r,\r\n        g: color.g,\r\n        b: color.b,\r\n    };\r\n}\r\n\r\nfunction CreateColor4Value(color: StructuralColor, source: Color4Value): Color4Value {\r\n    if (!(\"r\" in source)) {\r\n        return [color.r, color.g, color.b, color.a ?? source[3]];\r\n    }\r\n    return {\r\n        r: color.r,\r\n        g: color.g,\r\n        b: color.b,\r\n        a: color.a ?? source.a,\r\n    };\r\n}\r\n\r\nconst Picker: FunctionComponent<ColorPickerProps<Color3Value | Color4Value>> = (props) => (\r\n    <StructuralColorPickerPopup\r\n        {...props}\r\n        adapter={{\r\n            getColor: GetStructuralColor,\r\n            createColor: (color, source) => (IsColor4Value(source) ? CreateColor4Value(color, source) : CreateColor3Value(color, source)),\r\n        }}\r\n    />\r\n);\r\n\r\nconst Adapter: ColorPropertyLineAdapter<Color3Value | Color4Value> = {\r\n    picker: Picker,\r\n    getColor: GetStructuralColor,\r\n    createColor: (color, source) => (IsColor4Value(source) ? CreateColor4Value(color, source) : CreateColor3Value(color, source)),\r\n};\r\n\r\nexport const Color3PropertyLine: FunctionComponent<ColorPropertyLineProps<Color3Value>> = (props) => (\r\n    <ControlledColorPropertyLine {...props} adapter={Adapter as ColorPropertyLineAdapter<Color3Value>} />\r\n);\r\nexport const Color4PropertyLine: FunctionComponent<ColorPropertyLineProps<Color4Value>> = (props) => (\r\n    <ControlledColorPropertyLine {...props} adapter={Adapter as ColorPropertyLineAdapter<Color4Value>} />\r\n);\r\n"]}

package/lite/fluent/hoc/propertyLines/vectorPropertyLine.d.ts

@@ -0,0 +1,28 @@
+import { type Quat, type Vec2, type Vec3, type Vec4 } from "@babylonjs/lite";
+import { type FunctionComponent } from "react";
+import { type TensorPropertyLineProps as RuntimeNeutralTensorPropertyLineProps } from "../../../../fluent/hoc/propertyLines/vectorPropertyLineCore.js";
+export type Vector2Value = Vec2 | readonly [number, number];
+export type Vector3Value = Vec3 | readonly [number, number, number];
+export type Vector4Value = Vec4 | readonly [number, number, number, number];
+export type QuaternionValue = Quat | readonly [number, number, number, number];
+export type TensorPropertyLineProps<ValueT extends Vector2Value | Vector3Value | Vector4Value | QuaternionValue> = RuntimeNeutralTensorPropertyLineProps<ValueT>;
+/**
+ * Converts a Lite Euler value to a quaternion while preserving tuple versus structural representation.
+ * @param value The Euler value in radians.
+ * @param source The source quaternion whose representation should be preserved.
+ * @returns The converted quaternion.
+ */
+export declare function CreateQuaternionFromEuler(value: Vector3Value, source: QuaternionValue): QuaternionValue;
+type RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3Value> & {
+    useDegrees?: boolean;
+};
+type QuaternionPropertyLineProps = TensorPropertyLineProps<QuaternionValue> & {
+    useDegrees?: boolean;
+    useEuler?: boolean;
+};
+export declare const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2Value>>;
+export declare const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3Value>>;
+export declare const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4Value>>;
+export declare const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps>;
+export declare const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps>;
+export {};

package/lite/fluent/hoc/propertyLines/vectorPropertyLine.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { eulerToQuat, quatToEulerXYZ } from "@babylonjs/lite";
+import { ControlledQuaternionPropertyLine, ControlledRotationVectorPropertyLine, ControlledTensorPropertyLine, } from "../../../../fluent/hoc/propertyLines/vectorPropertyLineCore.js";
+const ComponentIndices = {
+    x: 0,
+    y: 1,
+    z: 2,
+    w: 3,
+};
+function IsNumberTuple(value) {
+    return Array.isArray(value);
+}
+function GetComponent(value, component) {
+    if (IsNumberTuple(value)) {
+        return value[ComponentIndices[component]];
+    }
+    switch (component) {
+        case "x":
+            return value.x;
+        case "y":
+            return value.y;
+        case "z":
+            return "z" in value ? value.z : 0;
+        case "w":
+            return "w" in value ? value.w : 0;
+    }
+}
+const Vector2Adapter = {
+    components: ["x", "y"],
+    getComponent: GetComponent,
+    withComponent: (value, component, componentValue) => IsNumberTuple(value) ? [component === "x" ? componentValue : value[0], component === "y" ? componentValue : value[1]] : { ...value, [component]: componentValue },
+};
+const Vector3Adapter = {
+    components: ["x", "y", "z"],
+    getComponent: GetComponent,
+    withComponent: (value, component, componentValue) => IsNumberTuple(value)
+        ? [component === "x" ? componentValue : value[0], component === "y" ? componentValue : value[1], component === "z" ? componentValue : value[2]]
+        : { ...value, [component]: componentValue },
+};
+const Vector4Adapter = {
+    components: ["x", "y", "z", "w"],
+    getComponent: GetComponent,
+    withComponent: (value, component, componentValue) => IsNumberTuple(value)
+        ? [
+            component === "x" ? componentValue : value[0],
+            component === "y" ? componentValue : value[1],
+            component === "z" ? componentValue : value[2],
+            component === "w" ? componentValue : value[3],
+        ]
+        : { ...value, [component]: componentValue },
+};
+const QuaternionTensorAdapter = {
+    components: ["x", "y", "z", "w"],
+    getComponent: GetComponent,
+    withComponent: (value, component, componentValue) => IsNumberTuple(value)
+        ? [
+            component === "x" ? componentValue : value[0],
+            component === "y" ? componentValue : value[1],
+            component === "z" ? componentValue : value[2],
+            component === "w" ? componentValue : value[3],
+        ]
+        : { ...value, [component]: componentValue },
+};
+/**
+ * Converts a Lite Euler value to a quaternion while preserving tuple versus structural representation.
+ * @param value The Euler value in radians.
+ * @param source The source quaternion whose representation should be preserved.
+ * @returns The converted quaternion.
+ */
+export function CreateQuaternionFromEuler(value, source) {
+    const [x, y, z] = "x" in value ? [value.x, value.y, value.z] : value;
+    const quaternion = eulerToQuat(x, y, z);
+    return "x" in source ? { x: quaternion[0], y: quaternion[1], z: quaternion[2], w: quaternion[3] } : quaternion;
+}
+const QuaternionAdapter = {
+    quaternion: QuaternionTensorAdapter,
+    euler: Vector3Adapter,
+    fromEuler: CreateQuaternionFromEuler,
+    toEuler: (value) => {
+        const [x, y, z, w] = "x" in value ? [value.x, value.y, value.z, value.w] : value;
+        return quatToEulerXYZ(x, y, z, w);
+    },
+};
+export const Vector2PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector2Adapter });
+export const Vector3PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector3Adapter });
+export const Vector4PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector4Adapter });
+export const RotationVectorPropertyLine = (props) => (_jsx(ControlledRotationVectorPropertyLine, { ...props, adapter: Vector3Adapter }));
+export const QuaternionPropertyLine = (props) => _jsx(ControlledQuaternionPropertyLine, { ...props, adapter: QuaternionAdapter });
+//# sourceMappingURL=vectorPropertyLine.js.map

package/lite/fluent/hoc/propertyLines/vectorPropertyLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../../dev/sharedUiComponents/src/lite/fluent/hoc/propertyLines/vectorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { eulerToQuat, quatToEulerXYZ, type Quat, type Vec2, type Vec3, type Vec4 } from \"@babylonjs/lite\";\r\nimport { type FunctionComponent } from \"react\";\r\n\r\nimport {\r\n    ControlledQuaternionPropertyLine,\r\n    ControlledRotationVectorPropertyLine,\r\n    ControlledTensorPropertyLine,\r\n    type QuaternionValueAdapter,\r\n    type TensorComponent,\r\n    type TensorPropertyLineProps as RuntimeNeutralTensorPropertyLineProps,\r\n    type TensorValueAdapter,\r\n} from \"shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLineCore\";\r\n\r\nexport type Vector2Value = Vec2 | readonly [number, number];\r\nexport type Vector3Value = Vec3 | readonly [number, number, number];\r\nexport type Vector4Value = Vec4 | readonly [number, number, number, number];\r\nexport type QuaternionValue = Quat | readonly [number, number, number, number];\r\n\r\nexport type TensorPropertyLineProps<ValueT extends Vector2Value | Vector3Value | Vector4Value | QuaternionValue> = RuntimeNeutralTensorPropertyLineProps<ValueT>;\r\n\r\nconst ComponentIndices: Readonly<Record<TensorComponent, number>> = {\r\n    x: 0,\r\n    y: 1,\r\n    z: 2,\r\n    w: 3,\r\n};\r\n\r\ntype TupleValue = readonly [number, number] | readonly [number, number, number] | readonly [number, number, number, number];\r\n\r\nfunction IsNumberTuple(value: Vector2Value | Vector3Value | Vector4Value | QuaternionValue): value is TupleValue {\r\n    return Array.isArray(value);\r\n}\r\n\r\nfunction GetComponent(value: Vector2Value | Vector3Value | Vector4Value | QuaternionValue, component: TensorComponent): number {\r\n    if (IsNumberTuple(value)) {\r\n        return value[ComponentIndices[component]];\r\n    }\r\n    switch (component) {\r\n        case \"x\":\r\n            return value.x;\r\n        case \"y\":\r\n            return value.y;\r\n        case \"z\":\r\n            return \"z\" in value ? value.z : 0;\r\n        case \"w\":\r\n            return \"w\" in value ? value.w : 0;\r\n    }\r\n}\r\n\r\nconst Vector2Adapter: TensorValueAdapter<Vector2Value> = {\r\n    components: [\"x\", \"y\"],\r\n    getComponent: GetComponent,\r\n    withComponent: (value, component, componentValue) =>\r\n        IsNumberTuple(value) ? [component === \"x\" ? componentValue : value[0], component === \"y\" ? componentValue : value[1]] : { ...value, [component]: componentValue },\r\n};\r\nconst Vector3Adapter: TensorValueAdapter<Vector3Value> = {\r\n    components: [\"x\", \"y\", \"z\"],\r\n    getComponent: GetComponent,\r\n    withComponent: (value, component, componentValue) =>\r\n        IsNumberTuple(value)\r\n            ? [component === \"x\" ? componentValue : value[0], component === \"y\" ? componentValue : value[1], component === \"z\" ? componentValue : value[2]]\r\n            : { ...value, [component]: componentValue },\r\n};\r\nconst Vector4Adapter: TensorValueAdapter<Vector4Value> = {\r\n    components: [\"x\", \"y\", \"z\", \"w\"],\r\n    getComponent: GetComponent,\r\n    withComponent: (value, component, componentValue) =>\r\n        IsNumberTuple(value)\r\n            ? [\r\n                  component === \"x\" ? componentValue : value[0],\r\n                  component === \"y\" ? componentValue : value[1],\r\n                  component === \"z\" ? componentValue : value[2],\r\n                  component === \"w\" ? componentValue : value[3],\r\n              ]\r\n            : { ...value, [component]: componentValue },\r\n};\r\nconst QuaternionTensorAdapter: TensorValueAdapter<QuaternionValue> = {\r\n    components: [\"x\", \"y\", \"z\", \"w\"],\r\n    getComponent: GetComponent,\r\n    withComponent: (value, component, componentValue) =>\r\n        IsNumberTuple(value)\r\n            ? [\r\n                  component === \"x\" ? componentValue : value[0],\r\n                  component === \"y\" ? componentValue : value[1],\r\n                  component === \"z\" ? componentValue : value[2],\r\n                  component === \"w\" ? componentValue : value[3],\r\n              ]\r\n            : { ...value, [component]: componentValue },\r\n};\r\n\r\n/**\r\n * Converts a Lite Euler value to a quaternion while preserving tuple versus structural representation.\r\n * @param value The Euler value in radians.\r\n * @param source The source quaternion whose representation should be preserved.\r\n * @returns The converted quaternion.\r\n */\r\nexport function CreateQuaternionFromEuler(value: Vector3Value, source: QuaternionValue): QuaternionValue {\r\n    const [x, y, z] = \"x\" in value ? [value.x, value.y, value.z] : value;\r\n    const quaternion = eulerToQuat(x, y, z);\r\n    return \"x\" in source ? { x: quaternion[0], y: quaternion[1], z: quaternion[2], w: quaternion[3] } : quaternion;\r\n}\r\n\r\nconst QuaternionAdapter: QuaternionValueAdapter<QuaternionValue, Vector3Value> = {\r\n    quaternion: QuaternionTensorAdapter,\r\n    euler: Vector3Adapter,\r\n    fromEuler: CreateQuaternionFromEuler,\r\n    toEuler: (value) => {\r\n        const [x, y, z, w] = \"x\" in value ? [value.x, value.y, value.z, value.w] : value;\r\n        return quatToEulerXYZ(x, y, z, w);\r\n    },\r\n};\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3Value> & {\r\n    useDegrees?: boolean;\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<QuaternionValue> & {\r\n    useDegrees?: boolean;\r\n    useEuler?: boolean;\r\n};\r\n\r\nexport const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2Value>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector2Adapter} />;\r\nexport const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3Value>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector3Adapter} />;\r\nexport const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4Value>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector4Adapter} />;\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => (\r\n    <ControlledRotationVectorPropertyLine {...props} adapter={Vector3Adapter} />\r\n);\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => <ControlledQuaternionPropertyLine {...props} adapter={QuaternionAdapter} />;\r\n"]}

package/lite/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./fluent/hoc/propertyLines/colorPropertyLine.js";
+export * from "./fluent/hoc/propertyLines/vectorPropertyLine.js";

package/lite/index.js

@@ -0,0 +1,3 @@
+export * from "./fluent/hoc/propertyLines/colorPropertyLine.js";
+export * from "./fluent/hoc/propertyLines/vectorPropertyLine.js";
+//# sourceMappingURL=index.js.map

package/lite/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lite/index.ts"],"names":[],"mappings":"AAAA,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+CAA+C,CAAC","sourcesContent":["export * from \"./fluent/hoc/propertyLines/colorPropertyLine\";\r\nexport * from \"./fluent/hoc/propertyLines/vectorPropertyLine\";\r\n"]}

package/modularTool/hooks/observableHooks.d.ts

@@ -1,5 +1,5 @@
 import { type IReadonlyObservable } from "@babylonjs/core/index.js";
-import { type ObservableCollection } from "../misc/observableCollection.js";
+import { type IReadonlyObservableCollection } from "../misc/observableCollection.js";
 /**
  * Returns the current value of the accessor and updates it when the specified event is fired on the specified element.
  * @param accessor A function that returns the current value.
@@ -15,8 +15,13 @@ export declare function useEventfulState<T>(accessor: () => T, element: HTMLElem
  * @param accessor A function that returns the current value.
  * @param observables The observables to listen for changes on.
  * @returns The current value of the accessor.
- * @remarks If the accessor function is not idempotent (e.g. it returns a different array or object instance each time it is called),
- * then there is a good chance it should be wrapped in a `useCallback` to prevent unnecessary re-renders or re-render infinite loops.
+ * @remarks Prefer this hook when the source already exposes precise change observables. Pair it
+ * with a polling observable only when a fixed refresh cadence is intentional; use the source
+ * system's adapter hook when refresh policy is configurable elsewhere.
+ *
+ * If the accessor function is not idempotent (e.g. it returns a different array or object instance
+ * each time it is called), then there is a good chance it should be wrapped in a `useCallback` to
+ * prevent unnecessary re-renders or re-render infinite loops.
  */
 export declare function useObservableState<T>(accessor: () => T, ...observables: Array<IReadonlyObservable | null | undefined>): T;
 /**
@@ -24,7 +29,7 @@ export declare function useObservableState<T>(accessor: () => T, ...observables:
  * @param collection The collection to observe.
  * @returns A copy of the items in the collection.
  */
-export declare function useObservableCollection<T>(collection: ObservableCollection<T>): T[];
+export declare function useObservableCollection<T>(collection: IReadonlyObservableCollection<T>): T[];
 /**
  * Returns a copy of the items in the collection sorted by the order property and updates it when the collection changes.
  * @param collection The collection to observe.
@@ -32,4 +37,4 @@ export declare function useObservableCollection<T>(collection: ObservableCollect
  */
 export declare function useOrderedObservableCollection<T extends Readonly<{
     order?: number;
-}>>(collection: ObservableCollection<T>): T[];
+}>>(collection: IReadonlyObservableCollection<T>): T[];

package/modularTool/hooks/observableHooks.js

@@ -35,8 +35,13 @@ export function useEventfulState(accessor, element, ...eventNames) {
  * @param accessor A function that returns the current value.
  * @param observables The observables to listen for changes on.
  * @returns The current value of the accessor.
- * @remarks If the accessor function is not idempotent (e.g. it returns a different array or object instance each time it is called),
- * then there is a good chance it should be wrapped in a `useCallback` to prevent unnecessary re-renders or re-render infinite loops.
+ * @remarks Prefer this hook when the source already exposes precise change observables. Pair it
+ * with a polling observable only when a fixed refresh cadence is intentional; use the source
+ * system's adapter hook when refresh policy is configurable elsewhere.
+ *
+ * If the accessor function is not idempotent (e.g. it returns a different array or object instance
+ * each time it is called), then there is a good chance it should be wrapped in a `useCallback` to
+ * prevent unnecessary re-renders or re-render infinite loops.
  */
 export function useObservableState(accessor, ...observables) {
     const [current, setCurrent] = useState(accessor);

package/modularTool/hooks/observableHooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"observableHooks.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/hooks/observableHooks.ts"],"names":[],"mappings":"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","sourcesContent":["import { type IReadonlyObservable } from \"core/index\";\r\n\r\nimport { type ObservableCollection } from \"../misc/observableCollection\";\r\n\r\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\n/**\r\n * Returns the current value of the accessor and updates it when the specified event is fired on the specified element.\r\n * @param accessor A function that returns the current value.\r\n * @param element The element to listen for the event on.\r\n * @param eventNames The names of the events to listen for.\r\n * @returns The current value of the accessor.\r\n *  * @remarks If the accessor function is not idempotent (e.g. it returns a different array or object instance each time it is called),\r\n * then there is a good chance it should be wrapped in a `useCallback` to prevent unnecessary re-renders or re-render infinite loops.\r\n */\r\nexport function useEventfulState<T>(accessor: () => T, element: HTMLElement | null | undefined, ...eventNames: string[]): T {\r\n    const [current, setCurrent] = useState(accessor);\r\n\r\n    useEffect(() => {\r\n        setCurrent(accessor);\r\n        if (element) {\r\n            const removers = eventNames.map((eventName) => {\r\n                const handler = () => {\r\n                    setCurrent(accessor());\r\n                };\r\n\r\n                element.addEventListener(eventName, handler);\r\n\r\n                return () => {\r\n                    element.removeEventListener(eventName, handler);\r\n                };\r\n            });\r\n\r\n            return () => {\r\n                removers.forEach((remove) => remove());\r\n            };\r\n        }\r\n\r\n        return undefined;\r\n    }, [accessor, element, ...eventNames]);\r\n\r\n    return current;\r\n}\r\n\r\n/**\r\n * Returns the current value of the accessor and updates it when any of the specified observables change.\r\n * @param accessor A function that returns the current value.\r\n * @param observables The observables to listen for changes on.\r\n * @returns The current value of the accessor.\r\n * @remarks If the accessor function is not idempotent (e.g. it returns a different array or object instance each time it is called),\r\n * then there is a good chance it should be wrapped in a `useCallback` to prevent unnecessary re-renders or re-render infinite loops.\r\n */\r\nexport function useObservableState<T>(accessor: () => T, ...observables: Array<IReadonlyObservable | null | undefined>): T {\r\n    const [current, setCurrent] = useState(accessor);\r\n\r\n    useEffect(() => {\r\n        setCurrent(accessor);\r\n        const observers = observables.map((observable) => {\r\n            if (observable) {\r\n                const observer = observable.add(() => {\r\n                    setCurrent(accessor());\r\n                });\r\n\r\n                return observer;\r\n            }\r\n            return null;\r\n        });\r\n\r\n        return () => {\r\n            observers.forEach((observer) => observer?.remove());\r\n        };\r\n    }, [accessor, ...observables]);\r\n\r\n    return current;\r\n}\r\n\r\n/**\r\n * Returns a copy of the items in the collection and updates it when the collection changes.\r\n * @param collection The collection to observe.\r\n * @returns A copy of the items in the collection.\r\n */\r\nexport function useObservableCollection<T>(collection: ObservableCollection<T>) {\r\n    const itemsRef = useRef([...collection.items]);\r\n    return useObservableState(\r\n        useCallback(() => {\r\n            if (itemsRef.current.length !== collection.items.length || !itemsRef.current.every((item, index) => item === collection.items[index])) {\r\n                itemsRef.current = [...collection.items];\r\n            }\r\n            return itemsRef.current;\r\n        }, [collection]),\r\n        collection.observable\r\n    );\r\n}\r\n\r\n/**\r\n * Returns a copy of the items in the collection sorted by the order property and updates it when the collection changes.\r\n * @param collection The collection to observe.\r\n * @returns A copy of the items in the collection sorted by the order property.\r\n */\r\nexport function useOrderedObservableCollection<T extends Readonly<{ order?: number }>>(collection: ObservableCollection<T>) {\r\n    const items = useObservableCollection(collection);\r\n    const sortedItems = useMemo(() => items.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [items]);\r\n    return sortedItems;\r\n}\r\n"]}
+{"version":3,"file":"observableHooks.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/hooks/observableHooks.ts"],"names":[],"mappings":"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","sourcesContent":["import { type IReadonlyObservable } from \"core/index\";\r\n\r\nimport { type IReadonlyObservableCollection } from \"../misc/observableCollection\";\r\n\r\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\n/**\r\n * Returns the current value of the accessor and updates it when the specified event is fired on the specified element.\r\n * @param accessor A function that returns the current value.\r\n * @param element The element to listen for the event on.\r\n * @param eventNames The names of the events to listen for.\r\n * @returns The current value of the accessor.\r\n *  * @remarks If the accessor function is not idempotent (e.g. it returns a different array or object instance each time it is called),\r\n * then there is a good chance it should be wrapped in a `useCallback` to prevent unnecessary re-renders or re-render infinite loops.\r\n */\r\nexport function useEventfulState<T>(accessor: () => T, element: HTMLElement | null | undefined, ...eventNames: string[]): T {\r\n    const [current, setCurrent] = useState(accessor);\r\n\r\n    useEffect(() => {\r\n        setCurrent(accessor);\r\n        if (element) {\r\n            const removers = eventNames.map((eventName) => {\r\n                const handler = () => {\r\n                    setCurrent(accessor());\r\n                };\r\n\r\n                element.addEventListener(eventName, handler);\r\n\r\n                return () => {\r\n                    element.removeEventListener(eventName, handler);\r\n                };\r\n            });\r\n\r\n            return () => {\r\n                removers.forEach((remove) => remove());\r\n            };\r\n        }\r\n\r\n        return undefined;\r\n    }, [accessor, element, ...eventNames]);\r\n\r\n    return current;\r\n}\r\n\r\n/**\r\n * Returns the current value of the accessor and updates it when any of the specified observables change.\r\n * @param accessor A function that returns the current value.\r\n * @param observables The observables to listen for changes on.\r\n * @returns The current value of the accessor.\r\n * @remarks Prefer this hook when the source already exposes precise change observables. Pair it\r\n * with a polling observable only when a fixed refresh cadence is intentional; use the source\r\n * system's adapter hook when refresh policy is configurable elsewhere.\r\n *\r\n * If the accessor function is not idempotent (e.g. it returns a different array or object instance\r\n * each time it is called), then there is a good chance it should be wrapped in a `useCallback` to\r\n * prevent unnecessary re-renders or re-render infinite loops.\r\n */\r\nexport function useObservableState<T>(accessor: () => T, ...observables: Array<IReadonlyObservable | null | undefined>): T {\r\n    const [current, setCurrent] = useState(accessor);\r\n\r\n    useEffect(() => {\r\n        setCurrent(accessor);\r\n        const observers = observables.map((observable) => {\r\n            if (observable) {\r\n                const observer = observable.add(() => {\r\n                    setCurrent(accessor());\r\n                });\r\n\r\n                return observer;\r\n            }\r\n            return null;\r\n        });\r\n\r\n        return () => {\r\n            observers.forEach((observer) => observer?.remove());\r\n        };\r\n    }, [accessor, ...observables]);\r\n\r\n    return current;\r\n}\r\n\r\n/**\r\n * Returns a copy of the items in the collection and updates it when the collection changes.\r\n * @param collection The collection to observe.\r\n * @returns A copy of the items in the collection.\r\n */\r\nexport function useObservableCollection<T>(collection: IReadonlyObservableCollection<T>) {\r\n    const itemsRef = useRef([...collection.items]);\r\n    return useObservableState(\r\n        useCallback(() => {\r\n            if (itemsRef.current.length !== collection.items.length || !itemsRef.current.every((item, index) => item === collection.items[index])) {\r\n                itemsRef.current = [...collection.items];\r\n            }\r\n            return itemsRef.current;\r\n        }, [collection]),\r\n        collection.observable\r\n    );\r\n}\r\n\r\n/**\r\n * Returns a copy of the items in the collection sorted by the order property and updates it when the collection changes.\r\n * @param collection The collection to observe.\r\n * @returns A copy of the items in the collection sorted by the order property.\r\n */\r\nexport function useOrderedObservableCollection<T extends Readonly<{ order?: number }>>(collection: IReadonlyObservableCollection<T>) {\r\n    const items = useObservableCollection(collection);\r\n    const sortedItems = useMemo(() => items.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [items]);\r\n    return sortedItems;\r\n}\r\n"]}

package/modularTool/misc/observableCollection.d.ts

@@ -1,11 +1,25 @@
 import { type IDisposable, type IReadonlyObservable } from "@babylonjs/core/index.js";
+/**
+ * A read-only view of a collection whose changes can be observed.
+ */
+export interface IReadonlyObservableCollection<T> {
+    /**
+     * An observable that notifies observers when the collection changes.
+     */
+    readonly observable: IReadonlyObservable<void>;
+    /**
+     * The items in the collection.
+     */
+    readonly items: readonly T[];
+}
 /**
  * A collection of items that can be observed for changes.
  */
-export declare class ObservableCollection<T> {
+export declare class ObservableCollection<T> implements IReadonlyObservableCollection<T>, IDisposable {
     private readonly _items;
     private readonly _keys;
     private readonly _observable;
+    private _isDisposed;
     /**
      * An observable that notifies observers when the collection changes.
      */
@@ -20,4 +34,8 @@ export declare class ObservableCollection<T> {
      * @returns A disposable that removes the item from the collection when disposed.
      */
     add(item: T): IDisposable;
+    /**
+     * Removes all items and observers and rejects subsequent additions.
+     */
+    dispose(): void;
 }

package/modularTool/misc/observableCollection.js

@@ -7,6 +7,7 @@ export class ObservableCollection {
         this._items = [];
         this._keys = [];
         this._observable = new Observable();
+        this._isDisposed = false;
     }
     /**
      * An observable that notifies observers when the collection changes.
@@ -26,6 +27,9 @@ export class ObservableCollection {
      * @returns A disposable that removes the item from the collection when disposed.
      */
     add(item) {
+        if (this._isDisposed) {
+            throw new Error("Observable collection is disposed.");
+        }
         const key = Symbol();
         this._items.push(item);
         this._keys.push(key);
@@ -33,11 +37,27 @@ export class ObservableCollection {
         return {
             dispose: () => {
                 const index = this._keys.indexOf(key);
+                if (index === -1) {
+                    return;
+                }
                 this._items.splice(index, 1);
                 this._keys.splice(index, 1);
                 this._observable.notifyObservers();
             },
         };
     }
+    /**
+     * Removes all items and observers and rejects subsequent additions.
+     */
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this._isDisposed = true;
+        this._items.length = 0;
+        this._keys.length = 0;
+        this._observable.notifyObservers();
+        this._observable.clear();
+    }
 }
 //# sourceMappingURL=observableCollection.js.map

package/modularTool/misc/observableCollection.js.map

@@ -1 +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"]}
+{"version":3,"file":"observableCollection.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/misc/observableCollection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAiBlD;;GAEG;AACH,MAAM,OAAO,oBAAoB;IAAjC;QACqB,WAAM,GAAQ,EAAE,CAAC;QACjB,UAAK,GAAa,EAAE,CAAC;QACrB,gBAAW,GAAG,IAAI,UAAU,EAAQ,CAAC;QAC9C,gBAAW,GAAG,KAAK,CAAC;IA2DhC,CAAC;IAzDG;;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,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC;QAC1D,CAAC;QAED,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,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;oBACf,OAAO;gBACX,CAAC;gBAED,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;IAED;;OAEG;IACI,OAAO;QACV,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;QACnC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;IAC7B,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 read-only view of a collection whose changes can be observed.\r\n */\r\nexport interface IReadonlyObservableCollection<T> {\r\n    /**\r\n     * An observable that notifies observers when the collection changes.\r\n     */\r\n    readonly observable: IReadonlyObservable<void>;\r\n\r\n    /**\r\n     * The items in the collection.\r\n     */\r\n    readonly items: readonly T[];\r\n}\r\n\r\n/**\r\n * A collection of items that can be observed for changes.\r\n */\r\nexport class ObservableCollection<T> implements IReadonlyObservableCollection<T>, IDisposable {\r\n    private readonly _items: T[] = [];\r\n    private readonly _keys: symbol[] = [];\r\n    private readonly _observable = new Observable<void>();\r\n    private _isDisposed = false;\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        if (this._isDisposed) {\r\n            throw new Error(\"Observable collection is disposed.\");\r\n        }\r\n\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                if (index === -1) {\r\n                    return;\r\n                }\r\n\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    /**\r\n     * Removes all items and observers and rejects subsequent additions.\r\n     */\r\n    public dispose(): void {\r\n        if (this._isDisposed) {\r\n            return;\r\n        }\r\n\r\n        this._isDisposed = true;\r\n        this._items.length = 0;\r\n        this._keys.length = 0;\r\n        this._observable.notifyObservers();\r\n        this._observable.clear();\r\n    }\r\n}\r\n"]}

package/modularTool/services/shellService.js

@@ -127,9 +127,12 @@ const useStyles = makeStyles({
         borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
         backgroundColor: tokens.colorNeutralBackground2,
     },
-    paneCollapseButtonWithBorder: {
+    paneCollapseButtonWithLeftBorder: {
         borderLeft: `1px solid ${tokens.colorNeutralStroke2}`,
     },
+    paneCollapseButtonWithRightBorder: {
+        borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
+    },
     collapseMenuPopover: {
         minWidth: 0,
     },
@@ -297,7 +300,7 @@ const Toolbar = ({ location, components }) => {
     const classes = useStyles();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
-    return (_jsx(_Fragment, { children: components.length > 0 && (_jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [_jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (_jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) }), _jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (_jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) })] })) }));
+    return (_jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [_jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (_jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) }), _jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (_jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) })] }));
 };
 // This is a wrapper for a tab in a side pane that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const SidePaneTab = (props) => {
@@ -415,7 +418,11 @@ function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane,
     }, [childWindow, location]);
     const expandCollapseButton = useMemo(() => {
         const expandCollapseIcon = location === "left" ? collapsed ? _jsx(PanelLeftExpandRegular, {}) : _jsx(PanelLeftContractRegular, {}) : collapsed ? _jsx(PanelRightExpandRegular, {}) : _jsx(PanelRightContractRegular, {});
-        return (_jsxs(Menu, { positioning: "below-end", children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (_jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", children: _jsx(SplitButton, { className: mergeClasses(classes.paneCollapseButton, location === "right" && toolbarMode === "compact" ? classes.paneCollapseButtonWithBorder : undefined), menuButton: triggerProps, primaryActionButton: { onClick: onExpandCollapseClick }, size: "small", appearance: "transparent", icon: expandCollapseIcon }) })) }), _jsx(MenuPopover, { className: classes.collapseMenuPopover, children: _jsx(MenuList, { children: _jsx(MenuItem, { icon: _jsx(PictureInPictureEnterRegular, {}), onClick: () => setUndocked(true), children: "Undock" }) }) })] }));
+        return (_jsxs(Menu, { positioning: "below-end", children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (_jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", children: _jsx(SplitButton, { className: mergeClasses(classes.paneCollapseButton, toolbarMode === "compact"
+                                ? location === "left"
+                                    ? classes.paneCollapseButtonWithRightBorder
+                                    : classes.paneCollapseButtonWithLeftBorder
+                                : undefined), menuButton: triggerProps, primaryActionButton: { onClick: onExpandCollapseClick }, size: "small", appearance: "transparent", icon: expandCollapseIcon }) })) }), _jsx(MenuPopover, { className: classes.collapseMenuPopover, children: _jsx(MenuList, { children: _jsx(MenuItem, { icon: _jsx(PictureInPictureEnterRegular, {}), onClick: () => setUndocked(true), children: "Undock" }) }) })] }));
     }, [collapsed, onExpandCollapseClick, location]);
     const createPaneTabList = useCallback((paneComponents, toolbarMode, selectedTab, setSelectedTab, dockOptions) => {
         return (_jsx(_Fragment, { children: paneComponents.length > 0 && (_jsxs("div", { className: `${classes.paneTabListDiv} ${location === "left" || toolbarMode === "compact" ? classes.paneTabListDivLeft : classes.paneTabListDivRight}`, children: [paneComponents.length > 1 && (_jsx(_Fragment, { children: _jsx(FluentToolbar, { className: classes.tabToolbar, checkedValues: { selectedTab: [selectedTab?.key ?? ""] }, onCheckedValueChange: (event, data) => {
@@ -499,7 +506,7 @@ function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane,
     }, [childWindow, isChildWindowOpen, topPanes, bottomPanes]);
     // This memoizes the pane itself, which may or may not include the tab list, depending on the toolbar mode.
     const corePane = useMemo(() => {
-        return (_jsxs(_Fragment, { children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (_jsx(_Fragment, { children: _jsxs("div", { className: classes.barDiv, children: [!isChildWindowOpen && location === "left" && expandCollapseButton, topPaneTabList, _jsx(Toolbar, { location: "top", components: topBarItems }), !isChildWindowOpen && location === "right" && expandCollapseButton] }) })), topPanes.length > 0 && (_jsx("div", { className: classes.paneContent, children: topSelectedTab && (_jsxs(_Fragment, { children: [_jsx(PaneHeader, { id: topSelectedTab.key, title: topSelectedTab.title, icon: topPanes.length > 1 ? undefined : topSelectedTab.icon, dockOptions: validTopDockOptions }), topPanes
+        return (_jsxs(_Fragment, { children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0 || (!isChildWindowOpen && (topPanes.length > 0 || bottomPanes.length > 0))) && (_jsx(_Fragment, { children: _jsxs("div", { className: classes.barDiv, children: [!isChildWindowOpen && location === "left" && expandCollapseButton, topPaneTabList, _jsx(Toolbar, { location: "top", components: topBarItems }), !isChildWindowOpen && location === "right" && expandCollapseButton] }) })), topPanes.length > 0 && (_jsx("div", { className: classes.paneContent, children: topSelectedTab && (_jsxs(_Fragment, { children: [_jsx(PaneHeader, { id: topSelectedTab.key, title: topSelectedTab.title, icon: topPanes.length > 1 ? undefined : topSelectedTab.icon, dockOptions: validTopDockOptions }), topPanes
                                 .filter((pane) => pane.key === topSelectedTab.key || pane.keepMounted)
                                 .map((pane) => (_jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== topSelectedTab.key ? classes.unselectedPane : undefined), children: _jsx(ErrorBoundary, { name: pane.title, children: _jsx(pane.content, {}) }) }, pane.key)))] })) })), topPanes.length > 0 && bottomPanes.length > 0 && _jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.paneDivider }), bottomPanes.length > 1 && (_jsx(_Fragment, { children: _jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPanes.length > 0 && (_jsx("div", { ref: composedVerticalElementRef, className: classes.paneContent, style: { height: `clamp(200px, calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: bottomSelectedTab && (_jsxs(_Fragment, { children: [_jsx(PaneHeader, { id: bottomSelectedTab.key, title: bottomSelectedTab.title, icon: bottomPanes.length > 1 ? undefined : bottomSelectedTab.icon, dockOptions: validBottomDockOptions }), bottomPanes
                                 .filter((pane) => pane.key === bottomSelectedTab.key || pane.keepMounted)