@babylonjs/shared-ui-components 9.9.1 → 9.10.0

package/fluent/primitives/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACzJ,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA8BlC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC7C,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,OAAO,CACH,KAAC,YAAY,IACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,OAAO,EACjB,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;gBAC1B,SAAS,EAAE,CAAC;YAChB,CAAC;QACL,CAAC,YAED,KAAC,aAAa,cACV,MAAC,UAAU,eACP,KAAC,WAAW,IACR,MAAM,EACF,SAAS,CAAC,CAAC,CAAC,CACR,KAAC,aAAa,IAAC,MAAM,EAAC,OAAO,YACzB,KAAC,MAAM,IAAC,UAAU,EAAC,QAAQ,gBAAY,OAAO,EAAC,IAAI,EAAE,cAAc,GAAI,GAC3D,CACnB,CAAC,CAAC,CAAC,SAAS,YAGhB,KAAK,GACI,EACd,KAAC,aAAa,cAAE,QAAQ,GAAiB,EACxC,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9B,KAAC,aAAa,cACT,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,MAAM,IAAa,UAAU,EAAE,MAAM,CAAC,UAAU,IAAI,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IAAjG,KAAK,CAAgG,CACrH,CAAC,GACU,CACnB,IACQ,GACD,GACL,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dialog as FluentDialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, DialogTrigger } from \"@fluentui/react-components\";\nimport { DismissRegular } from \"@fluentui/react-icons\";\nimport { type ReactNode, type FC } from \"react\";\nimport { Button } from \"./button\";\n\n/**\n * Props for an action button in the dialog footer.\n */\nexport type DialogActionProps = {\n    /** Button label text. */\n    label: string;\n    /** Click handler. */\n    onClick: () => void;\n    /** Button appearance. Defaults to \"secondary\". */\n    appearance?: \"primary\" | \"secondary\";\n};\n\n/**\n * Props for the shared Dialog primitive.\n */\nexport type DialogProps = {\n    /** Whether the dialog is open. */\n    open: boolean;\n    /** Dialog title. */\n    title: string;\n    /** Dialog content (body). */\n    children: ReactNode;\n    /** Action buttons rendered in the footer. */\n    actions?: DialogActionProps[];\n    /** Called when the dialog is dismissed via the close button. */\n    onDismiss?: () => void;\n};\n\n/**\n * A shared dialog component wrapping Fluent UI Dialog with Babylon conventions.\n *\n * @example\n * ```tsx\n * <Dialog\n *     open={isOpen}\n *     title=\"Confirm Action\"\n *     onDismiss={() => setIsOpen(false)}\n *     actions={[\n *         { label: \"Cancel\", onClick: () => setIsOpen(false) },\n *         { label: \"Confirm\", onClick: handleConfirm, appearance: \"primary\" },\n *     ]}\n * >\n *     <Text>Are you sure you want to proceed?</Text>\n * </Dialog>\n * ```\n *\n * @param props - The dialog props.\n * @returns The dialog element.\n */\nexport const Dialog: FC<DialogProps> = (props) => {\n    const { open, title, children, actions, onDismiss } = props;\n\n    return (\n        <FluentDialog\n            open={open}\n            modalType=\"modal\"\n            onOpenChange={(_, data) => {\n                if (!data.open && onDismiss) {\n                    onDismiss();\n                }\n            }}\n        >\n            <DialogSurface>\n                <DialogBody>\n                    <DialogTitle\n                        action={\n                            onDismiss ? (\n                                <DialogTrigger action=\"close\">\n                                    <Button appearance=\"subtle\" aria-label=\"close\" icon={DismissRegular} />\n                                </DialogTrigger>\n                            ) : undefined\n                        }\n                    >\n                        {title}\n                    </DialogTitle>\n                    <DialogContent>{children}</DialogContent>\n                    {actions && actions.length > 0 && (\n                        <DialogActions>\n                            {actions.map((action, index) => (\n                                <Button key={index} appearance={action.appearance ?? \"secondary\"} onClick={action.onClick} label={action.label} />\n                            ))}\n                        </DialogActions>\n                    )}\n                </DialogBody>\n            </DialogSurface>\n        </FluentDialog>\n    );\n};\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACzJ,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA8BlC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC7C,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,OAAO,CACH,KAAC,YAAY,IACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,OAAO,EACjB,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;gBAC1B,SAAS,EAAE,CAAC;YAChB,CAAC;QACL,CAAC,YAED,KAAC,aAAa,cACV,MAAC,UAAU,eACP,KAAC,WAAW,IACR,MAAM,EACF,SAAS,CAAC,CAAC,CAAC,CACR,KAAC,aAAa,IAAC,MAAM,EAAC,OAAO,YACzB,KAAC,MAAM,IAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAE,cAAc,GAAI,GAC1D,CACnB,CAAC,CAAC,CAAC,SAAS,YAGhB,KAAK,GACI,EACd,KAAC,aAAa,cAAE,QAAQ,GAAiB,EACxC,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9B,KAAC,aAAa,cACT,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,MAAM,IAAa,UAAU,EAAE,MAAM,CAAC,UAAU,IAAI,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IAAjG,KAAK,CAAgG,CACrH,CAAC,GACU,CACnB,IACQ,GACD,GACL,CAClB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Dialog as FluentDialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, DialogTrigger } from \"@fluentui/react-components\";\nimport { DismissRegular } from \"@fluentui/react-icons\";\nimport { type ReactNode, type FC } from \"react\";\nimport { Button } from \"./button\";\n\n/**\n * Props for an action button in the dialog footer.\n */\nexport type DialogActionProps = {\n    /** Button label text. */\n    label: string;\n    /** Click handler. */\n    onClick: () => void;\n    /** Button appearance. Defaults to \"secondary\". */\n    appearance?: \"primary\" | \"secondary\";\n};\n\n/**\n * Props for the shared Dialog primitive.\n */\nexport type DialogProps = {\n    /** Whether the dialog is open. */\n    open: boolean;\n    /** Dialog title. */\n    title: string;\n    /** Dialog content (body). */\n    children: ReactNode;\n    /** Action buttons rendered in the footer. */\n    actions?: DialogActionProps[];\n    /** Called when the dialog is dismissed via the close button. */\n    onDismiss?: () => void;\n};\n\n/**\n * A shared dialog component wrapping Fluent UI Dialog with Babylon conventions.\n *\n * @example\n * ```tsx\n * <Dialog\n *     open={isOpen}\n *     title=\"Confirm Action\"\n *     onDismiss={() => setIsOpen(false)}\n *     actions={[\n *         { label: \"Cancel\", onClick: () => setIsOpen(false) },\n *         { label: \"Confirm\", onClick: handleConfirm, appearance: \"primary\" },\n *     ]}\n * >\n *     <Text>Are you sure you want to proceed?</Text>\n * </Dialog>\n * ```\n *\n * @param props - The dialog props.\n * @returns The dialog element.\n */\nexport const Dialog: FC<DialogProps> = (props) => {\n    const { open, title, children, actions, onDismiss } = props;\n\n    return (\n        <FluentDialog\n            open={open}\n            modalType=\"modal\"\n            onOpenChange={(_, data) => {\n                if (!data.open && onDismiss) {\n                    onDismiss();\n                }\n            }}\n        >\n            <DialogSurface>\n                <DialogBody>\n                    <DialogTitle\n                        action={\n                            onDismiss ? (\n                                <DialogTrigger action=\"close\">\n                                    <Button appearance=\"subtle\" ariaLabel=\"close\" icon={DismissRegular} />\n                                </DialogTrigger>\n                            ) : undefined\n                        }\n                    >\n                        {title}\n                    </DialogTitle>\n                    <DialogContent>{children}</DialogContent>\n                    {actions && actions.length > 0 && (\n                        <DialogActions>\n                            {actions.map((action, index) => (\n                                <Button key={index} appearance={action.appearance ?? \"secondary\"} onClick={action.onClick} label={action.label} />\n                            ))}\n                        </DialogActions>\n                    )}\n                </DialogBody>\n            </DialogSurface>\n        </FluentDialog>\n    );\n};\n"]}

package/fluent/primitives/toggleButton.d.ts

@@ -1,3 +1,4 @@
+import { type TooltipProps } from "@fluentui/react-components";
 import { type ButtonProps } from "./button.js";
 import { type FunctionComponent } from "react";
 import { type FluentIcon } from "@fluentui/react-icons";
@@ -6,6 +7,7 @@ type ToggleButtonProps = Omit<ButtonProps, "icon" | "onClick"> & {
     checkedIcon: FluentIcon;
     uncheckedIcon?: FluentIcon;
     onChange: (checked: boolean) => void;
+    titlePositioning?: TooltipProps["positioning"];
 };
 /**
  * Toggles between two states using a button with icons.

package/fluent/primitives/toggleButton.js

@@ -19,7 +19,7 @@ const useStyles = makeStyles({
  */
 export const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
-    const { value, onChange, title, appearance = "subtle" } = props;
+    const { value, onChange, title, appearance = "subtle", ariaLabel } = props;
     const { size } = useContext(ToolContext);
     const classes = useStyles();
     const [checked, setChecked] = useState(value);
@@ -33,6 +33,6 @@ export const ToggleButton = (props) => {
     useEffect(() => {
         setChecked(props.value);
     }, [props.value]);
-    return (_jsx(Tooltip, { content: title ?? "", children: _jsx(FluentToggleButton, { className: classes.button, size: size, icon: checked ? _jsx(props.checkedIcon, {}) : props.uncheckedIcon ? _jsx(props.uncheckedIcon, {}) : _jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }) }));
+    return (_jsx(Tooltip, { content: title ?? "", positioning: props.titlePositioning, children: _jsx(FluentToggleButton, { className: classes.button, size: size, "aria-label": ariaLabel ?? title, icon: checked ? _jsx(props.checkedIcon, {}) : props.uncheckedIcon ? _jsx(props.uncheckedIcon, {}) : _jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }) }));
 };
 //# sourceMappingURL=toggleButton.js.map

package/fluent/primitives/toggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAA0B,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAC;AASH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,UAAU,CAAC,CAAC,WAAW,EAAE,EAAE;YACvB,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC;YAC7B,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,OAAO,OAAO,CAAC;QACnB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,OAAO,IAAC,OAAO,EAAE,KAAK,IAAI,EAAE,YACzB,KAAC,kBAAkB,IACf,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,EAC7G,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,GACjB,GACI,CACb,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ToggleButton as FluentToggleButton, makeStyles } from \"@fluentui/react-components\";\r\nimport { type ButtonProps } from \"./button\";\r\nimport { useCallback, useContext, useEffect, useState, type FunctionComponent } from \"react\";\r\nimport { type FluentIcon } from \"@fluentui/react-icons\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { Tooltip } from \"./tooltip\";\r\n\r\nconst useStyles = makeStyles({\r\n    button: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"center\",\r\n    },\r\n});\r\n\r\ntype ToggleButtonProps = Omit<ButtonProps, \"icon\" | \"onClick\"> & {\r\n    value: boolean;\r\n    checkedIcon: FluentIcon;\r\n    uncheckedIcon?: FluentIcon;\r\n    onChange: (checked: boolean) => void;\r\n};\r\n\r\n/**\r\n * Toggles between two states using a button with icons.\r\n * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change\r\n *\r\n * @param props\r\n * @returns\r\n */\r\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = (props) => {\r\n    ToggleButton.displayName = \"ToggleButton\";\r\n    const { value, onChange, title, appearance = \"subtle\" } = props;\r\n    const { size } = useContext(ToolContext);\r\n    const classes = useStyles();\r\n    const [checked, setChecked] = useState(value);\r\n    const toggle = useCallback(() => {\r\n        setChecked((prevChecked) => {\r\n            const enabled = !prevChecked;\r\n            onChange(enabled);\r\n            return enabled;\r\n        });\r\n    }, [onChange]);\r\n\r\n    useEffect(() => {\r\n        setChecked(props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <Tooltip content={title ?? \"\"}>\r\n            <FluentToggleButton\r\n                className={classes.button}\r\n                size={size}\r\n                icon={checked ? <props.checkedIcon /> : props.uncheckedIcon ? <props.uncheckedIcon /> : <props.checkedIcon />}\r\n                appearance={appearance}\r\n                checked={checked}\r\n                onClick={toggle}\r\n            />\r\n        </Tooltip>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,UAAU,EAAqB,MAAM,4BAA4B,CAAC;AAE/G,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAA0B,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAC;AAUH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC3E,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,UAAU,CAAC,CAAC,WAAW,EAAE,EAAE;YACvB,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC;YAC7B,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,OAAO,OAAO,CAAC;QACnB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,KAAC,OAAO,IAAC,OAAO,EAAE,KAAK,IAAI,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,gBAAgB,YAC9D,KAAC,kBAAkB,IACf,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,IAAI,EAAE,IAAI,gBACE,SAAS,IAAI,KAAK,EAC9B,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,EAC7G,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,GACjB,GACI,CACb,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ToggleButton as FluentToggleButton, makeStyles, type TooltipProps } from \"@fluentui/react-components\";\r\nimport { type ButtonProps } from \"./button\";\r\nimport { useCallback, useContext, useEffect, useState, type FunctionComponent } from \"react\";\r\nimport { type FluentIcon } from \"@fluentui/react-icons\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { Tooltip } from \"./tooltip\";\r\n\r\nconst useStyles = makeStyles({\r\n    button: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"center\",\r\n    },\r\n});\r\n\r\ntype ToggleButtonProps = Omit<ButtonProps, \"icon\" | \"onClick\"> & {\r\n    value: boolean;\r\n    checkedIcon: FluentIcon;\r\n    uncheckedIcon?: FluentIcon;\r\n    onChange: (checked: boolean) => void;\r\n    titlePositioning?: TooltipProps[\"positioning\"];\r\n};\r\n\r\n/**\r\n * Toggles between two states using a button with icons.\r\n * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change\r\n *\r\n * @param props\r\n * @returns\r\n */\r\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = (props) => {\r\n    ToggleButton.displayName = \"ToggleButton\";\r\n    const { value, onChange, title, appearance = \"subtle\", ariaLabel } = props;\r\n    const { size } = useContext(ToolContext);\r\n    const classes = useStyles();\r\n    const [checked, setChecked] = useState(value);\r\n    const toggle = useCallback(() => {\r\n        setChecked((prevChecked) => {\r\n            const enabled = !prevChecked;\r\n            onChange(enabled);\r\n            return enabled;\r\n        });\r\n    }, [onChange]);\r\n\r\n    useEffect(() => {\r\n        setChecked(props.value);\r\n    }, [props.value]);\r\n\r\n    return (\r\n        <Tooltip content={title ?? \"\"} positioning={props.titlePositioning}>\r\n            <FluentToggleButton\r\n                className={classes.button}\r\n                size={size}\r\n                aria-label={ariaLabel ?? title}\r\n                icon={checked ? <props.checkedIcon /> : props.uncheckedIcon ? <props.uncheckedIcon /> : <props.checkedIcon />}\r\n                appearance={appearance}\r\n                checked={checked}\r\n                onClick={toggle}\r\n            />\r\n        </Tooltip>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/tooltip.d.ts

@@ -1,7 +1,15 @@
 import { type Nullable } from "@babylonjs/core/index.js";
 import { type ReactElement } from "react";
+import { type TooltipProps as FluentTooltipProps } from "@fluentui/react-components";
+/**
+ * Props for the Tooltip primitive.
+ */
 export type TooltipProps = {
+    /** The tooltip content. If null/empty, the tooltip is not rendered. */
     content?: Nullable<string | ReactElement>;
+    /** Optional positioning passed through to the underlying FluentTooltip. */
+    positioning?: FluentTooltipProps["positioning"];
+    /** The element that the tooltip is attached to. */
     children: ReactElement;
 };
 export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLElement>>;

package/fluent/primitives/tooltip.js

@@ -4,11 +4,11 @@ import { Tooltip as FluentTooltip } from "@fluentui/react-components";
 // forwardRef wrapper to avoid "function components cannot be given refs" warning
 // FluentTooltip handles ref forwarding to children internally via applyTriggerPropsToChildren
 export const Tooltip = forwardRef((props, _ref) => {
-    const { content, children } = props;
+    const { content, positioning, children } = props;
     if (!content) {
         return children;
     }
-    return (_jsx(FluentTooltip, { relationship: "description", content: content, children: children }));
+    return (_jsx(FluentTooltip, { relationship: "description", content: content, positioning: positioning, children: children }));
 });
 Tooltip.displayName = "Tooltip";
 //# sourceMappingURL=tooltip.js.map

package/fluent/primitives/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/tooltip.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAItE,iFAAiF;AACjF,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAA4B,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;IACzE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED,OAAO,CACH,KAAC,aAAa,IAAC,YAAY,EAAC,aAAa,EAAC,OAAO,EAAE,OAAO,YACrD,QAAQ,GACG,CACnB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import { type Nullable } from \"core/index\";\r\n\r\nimport { type ReactElement, forwardRef } from \"react\";\r\n\r\nimport { Tooltip as FluentTooltip } from \"@fluentui/react-components\";\r\n\r\nexport type TooltipProps = { content?: Nullable<string | ReactElement>; children: ReactElement };\r\n\r\n// forwardRef wrapper to avoid \"function components cannot be given refs\" warning\r\n// FluentTooltip handles ref forwarding to children internally via applyTriggerPropsToChildren\r\nexport const Tooltip = forwardRef<HTMLElement, TooltipProps>((props, _ref) => {\r\n    const { content, children } = props;\r\n\r\n    if (!content) {\r\n        return children;\r\n    }\r\n\r\n    return (\r\n        <FluentTooltip relationship=\"description\" content={content}>\r\n            {children}\r\n        </FluentTooltip>\r\n    );\r\n});\r\n\r\nTooltip.displayName = \"Tooltip\";\r\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/tooltip.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAA2C,MAAM,4BAA4B,CAAC;AAc/G,iFAAiF;AACjF,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAA4B,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;IACzE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEjD,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED,OAAO,CACH,KAAC,aAAa,IAAC,YAAY,EAAC,aAAa,EAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,YAC/E,QAAQ,GACG,CACnB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import { type Nullable } from \"core/index\";\r\n\r\nimport { type ReactElement, forwardRef } from \"react\";\r\n\r\nimport { Tooltip as FluentTooltip, type TooltipProps as FluentTooltipProps } from \"@fluentui/react-components\";\r\n\r\n/**\r\n * Props for the Tooltip primitive.\r\n */\r\nexport type TooltipProps = {\r\n    /** The tooltip content. If null/empty, the tooltip is not rendered. */\r\n    content?: Nullable<string | ReactElement>;\r\n    /** Optional positioning passed through to the underlying FluentTooltip. */\r\n    positioning?: FluentTooltipProps[\"positioning\"];\r\n    /** The element that the tooltip is attached to. */\r\n    children: ReactElement;\r\n};\r\n\r\n// forwardRef wrapper to avoid \"function components cannot be given refs\" warning\r\n// FluentTooltip handles ref forwarding to children internally via applyTriggerPropsToChildren\r\nexport const Tooltip = forwardRef<HTMLElement, TooltipProps>((props, _ref) => {\r\n    const { content, positioning, children } = props;\r\n\r\n    if (!content) {\r\n        return children;\r\n    }\r\n\r\n    return (\r\n        <FluentTooltip relationship=\"description\" content={content} positioning={positioning}>\r\n            {children}\r\n        </FluentTooltip>\r\n    );\r\n});\r\n\r\nTooltip.displayName = \"Tooltip\";\r\n"]}

package/modularTool/components/errorBoundary.js

@@ -13,6 +13,9 @@ const useStyles = makeStyles({
         padding: TokenMap.px20,
         backgroundColor: tokens.colorNeutralBackground1,
         color: tokens.colorNeutralForeground1,
+        // Claim the full row of the flex parent (e.g. shellService's central-content row)
+        // so the centered children sit in the middle of the available area, not at the left edge.
+        flex: 1,
         height: "100%",
         minHeight: "100px",
     },

package/modularTool/components/errorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"errorBoundary.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/components/errorBoundary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type ErrorInfo, type ReactNode, Component } from \"react\";\r\n\r\nimport { makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { ErrorCircleRegular } from \"@fluentui/react-icons\";\r\nimport { Button } from \"shared-ui-components/fluent/primitives/button\";\r\nimport { TokenMap } from \"shared-ui-components/fluent/primitives/utils\";\r\n\r\nconst useStyles = makeStyles({\r\n    root: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"center\",\r\n        padding: TokenMap.px20,\r\n        backgroundColor: tokens.colorNeutralBackground1,\r\n        color: tokens.colorNeutralForeground1,\r\n        height: \"100%\",\r\n        minHeight: \"100px\",\r\n    },\r\n    icon: {\r\n        fontSize: \"48px\",\r\n        color: tokens.colorPaletteRedForeground1,\r\n        marginBottom: TokenMap.px12,\r\n    },\r\n    title: {\r\n        fontSize: TokenMap.px16,\r\n        fontWeight: \"600\",\r\n        marginBottom: TokenMap.px8,\r\n    },\r\n    message: {\r\n        fontSize: TokenMap.px12,\r\n        color: tokens.colorNeutralForeground2,\r\n        marginBottom: TokenMap.px16,\r\n        textAlign: \"center\",\r\n        maxWidth: \"300px\",\r\n    },\r\n    details: {\r\n        fontSize: TokenMap.px10,\r\n        color: tokens.colorNeutralForeground3,\r\n        fontFamily: \"monospace\",\r\n        whiteSpace: \"pre-wrap\",\r\n        maxHeight: \"100px\",\r\n        overflow: \"auto\",\r\n        padding: TokenMap.px8,\r\n        backgroundColor: tokens.colorNeutralBackground3,\r\n        borderRadius: TokenMap.px4,\r\n        marginTop: TokenMap.px8,\r\n        maxWidth: \"100%\",\r\n    },\r\n});\r\n\r\n/**\r\n * Props for the {@link ErrorBoundary} component.\r\n */\r\ntype ErrorBoundaryProps = {\r\n    /** Child components to render */\r\n    children: ReactNode;\r\n    /** Optional fallback UI to show on error */\r\n    fallback?: ReactNode;\r\n    /** Optional callback when an error occurs */\r\n    onError?: (error: Error, errorInfo: ErrorInfo) => void;\r\n    /** Optional name for identifying this boundary in logs */\r\n    name?: string;\r\n};\r\n\r\ntype ErrorBoundaryState = {\r\n    hasError: boolean;\r\n    error: Error | null;\r\n    errorInfo: ErrorInfo | null;\r\n};\r\n\r\n/**\r\n * Error boundary component that catches JavaScript errors in child components\r\n * and displays a fallback UI instead of crashing the entire application.\r\n */\r\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\r\n    constructor(props: ErrorBoundaryProps) {\r\n        super(props);\r\n        this.state = { hasError: false, error: null, errorInfo: null };\r\n    }\r\n\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\r\n        return { hasError: true, error };\r\n    }\r\n\r\n    override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\r\n        this.setState({ errorInfo });\r\n\r\n        // Log the error\r\n        const boundaryName = this.props.name || \"ErrorBoundary\";\r\n        // eslint-disable-next-line no-console\r\n        console.error(`[${boundaryName}] Error caught:`, error, errorInfo);\r\n\r\n        // Call optional error callback\r\n        this.props.onError?.(error, errorInfo);\r\n    }\r\n\r\n    private _handleRetry = () => {\r\n        this.setState({ hasError: false, error: null, errorInfo: null });\r\n    };\r\n\r\n    override render() {\r\n        if (this.state.hasError) {\r\n            // If a custom fallback is provided, use it\r\n            if (this.props.fallback) {\r\n                return this.props.fallback;\r\n            }\r\n\r\n            // Default fallback UI\r\n            return <ErrorFallback error={this.state.error} onRetry={this._handleRetry} />;\r\n        }\r\n\r\n        return this.props.children;\r\n    }\r\n}\r\n\r\ntype ErrorFallbackProps = {\r\n    error: Error | null;\r\n    onRetry: () => void;\r\n};\r\n\r\nfunction ErrorFallback({ error, onRetry }: ErrorFallbackProps) {\r\n    const styles = useStyles();\r\n\r\n    return (\r\n        <div className={styles.root}>\r\n            <ErrorCircleRegular className={styles.icon} />\r\n            <div className={styles.title}>Something went wrong</div>\r\n            <div className={styles.message}>An error occurred in this component. You can try again or continue using other parts of the tool.</div>\r\n            <Button label=\"Try Again\" appearance=\"primary\" onClick={onRetry} />\r\n            {error && <div className={styles.details}>{error.message}</div>}\r\n        </div>\r\n    );\r\n}\r\n"]}
+{"version":3,"file":"errorBoundary.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/components/errorBoundary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type ErrorInfo, type ReactNode, Component } from \"react\";\r\n\r\nimport { makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { ErrorCircleRegular } from \"@fluentui/react-icons\";\r\nimport { Button } from \"shared-ui-components/fluent/primitives/button\";\r\nimport { TokenMap } from \"shared-ui-components/fluent/primitives/utils\";\r\n\r\nconst useStyles = makeStyles({\r\n    root: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"center\",\r\n        padding: TokenMap.px20,\r\n        backgroundColor: tokens.colorNeutralBackground1,\r\n        color: tokens.colorNeutralForeground1,\r\n        // Claim the full row of the flex parent (e.g. shellService's central-content row)\r\n        // so the centered children sit in the middle of the available area, not at the left edge.\r\n        flex: 1,\r\n        height: \"100%\",\r\n        minHeight: \"100px\",\r\n    },\r\n    icon: {\r\n        fontSize: \"48px\",\r\n        color: tokens.colorPaletteRedForeground1,\r\n        marginBottom: TokenMap.px12,\r\n    },\r\n    title: {\r\n        fontSize: TokenMap.px16,\r\n        fontWeight: \"600\",\r\n        marginBottom: TokenMap.px8,\r\n    },\r\n    message: {\r\n        fontSize: TokenMap.px12,\r\n        color: tokens.colorNeutralForeground2,\r\n        marginBottom: TokenMap.px16,\r\n        textAlign: \"center\",\r\n        maxWidth: \"300px\",\r\n    },\r\n    details: {\r\n        fontSize: TokenMap.px10,\r\n        color: tokens.colorNeutralForeground3,\r\n        fontFamily: \"monospace\",\r\n        whiteSpace: \"pre-wrap\",\r\n        maxHeight: \"100px\",\r\n        overflow: \"auto\",\r\n        padding: TokenMap.px8,\r\n        backgroundColor: tokens.colorNeutralBackground3,\r\n        borderRadius: TokenMap.px4,\r\n        marginTop: TokenMap.px8,\r\n        maxWidth: \"100%\",\r\n    },\r\n});\r\n\r\n/**\r\n * Props for the {@link ErrorBoundary} component.\r\n */\r\ntype ErrorBoundaryProps = {\r\n    /** Child components to render */\r\n    children: ReactNode;\r\n    /** Optional fallback UI to show on error */\r\n    fallback?: ReactNode;\r\n    /** Optional callback when an error occurs */\r\n    onError?: (error: Error, errorInfo: ErrorInfo) => void;\r\n    /** Optional name for identifying this boundary in logs */\r\n    name?: string;\r\n};\r\n\r\ntype ErrorBoundaryState = {\r\n    hasError: boolean;\r\n    error: Error | null;\r\n    errorInfo: ErrorInfo | null;\r\n};\r\n\r\n/**\r\n * Error boundary component that catches JavaScript errors in child components\r\n * and displays a fallback UI instead of crashing the entire application.\r\n */\r\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\r\n    constructor(props: ErrorBoundaryProps) {\r\n        super(props);\r\n        this.state = { hasError: false, error: null, errorInfo: null };\r\n    }\r\n\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {\r\n        return { hasError: true, error };\r\n    }\r\n\r\n    override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\r\n        this.setState({ errorInfo });\r\n\r\n        // Log the error\r\n        const boundaryName = this.props.name || \"ErrorBoundary\";\r\n        // eslint-disable-next-line no-console\r\n        console.error(`[${boundaryName}] Error caught:`, error, errorInfo);\r\n\r\n        // Call optional error callback\r\n        this.props.onError?.(error, errorInfo);\r\n    }\r\n\r\n    private _handleRetry = () => {\r\n        this.setState({ hasError: false, error: null, errorInfo: null });\r\n    };\r\n\r\n    override render() {\r\n        if (this.state.hasError) {\r\n            // If a custom fallback is provided, use it\r\n            if (this.props.fallback) {\r\n                return this.props.fallback;\r\n            }\r\n\r\n            // Default fallback UI\r\n            return <ErrorFallback error={this.state.error} onRetry={this._handleRetry} />;\r\n        }\r\n\r\n        return this.props.children;\r\n    }\r\n}\r\n\r\ntype ErrorFallbackProps = {\r\n    error: Error | null;\r\n    onRetry: () => void;\r\n};\r\n\r\nfunction ErrorFallback({ error, onRetry }: ErrorFallbackProps) {\r\n    const styles = useStyles();\r\n\r\n    return (\r\n        <div className={styles.root}>\r\n            <ErrorCircleRegular className={styles.icon} />\r\n            <div className={styles.title}>Something went wrong</div>\r\n            <div className={styles.message}>An error occurred in this component. You can try again or continue using other parts of the tool.</div>\r\n            <Button label=\"Try Again\" appearance=\"primary\" onClick={onRetry} />\r\n            {error && <div className={styles.details}>{error.message}</div>}\r\n        </div>\r\n    );\r\n}\r\n"]}

package/modularTool/components/theme.d.ts

@@ -3,6 +3,11 @@ import { type FunctionComponent } from "react";
 /**
  * A themed Fluent UI provider that applies the current theme mode (light or dark).
  * @param props Fluent provider props, plus an optional `invert` flag to swap the theme.
+ *              When `targetDocument` is provided and differs from the inherited Fluent
+ *              document (e.g. when rendering into a popup window), a Griffel renderer
+ *              scoped to that document is created so styles are injected into it.
+ *              When omitted, `targetDocument` is inherited from the ambient Fluent
+ *              context so nested Theme components do not lose cross-window targeting.
  * @returns The themed Fluent UI provider component.
  */
 export declare const Theme: FunctionComponent<FluentProviderProps & {

package/modularTool/components/theme.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FluentProvider, makeStyles, mergeClasses, tokens } from "@fluentui/react-components";
+import { FluentProvider, RendererProvider, createDOMRenderer, makeStyles, mergeClasses, tokens, useFluent, } from "@fluentui/react-components";
+import { useMemo } from "react";
 import { useTheme } from "../hooks/themeHooks.js";
 // Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
 const useStyles = makeStyles({
@@ -10,15 +11,38 @@ const useStyles = makeStyles({
 /**
  * A themed Fluent UI provider that applies the current theme mode (light or dark).
  * @param props Fluent provider props, plus an optional `invert` flag to swap the theme.
+ *              When `targetDocument` is provided and differs from the inherited Fluent
+ *              document (e.g. when rendering into a popup window), a Griffel renderer
+ *              scoped to that document is created so styles are injected into it.
+ *              When omitted, `targetDocument` is inherited from the ambient Fluent
+ *              context so nested Theme components do not lose cross-window targeting.
  * @returns The themed Fluent UI provider component.
  */
 export const Theme = (props) => {
     // NOTE: We do not want to applyStylesToPortals by default. It makes classes flow into portals
     // (like popovers), and if those styles do things like disable overflow, they can completely
     // break any UI within the portal. Therefore, default to false.
-    const { invert = false, applyStylesToPortals = false, className, ...rest } = props;
+    const { invert = false, applyStylesToPortals = false, className, targetDocument: explicitTargetDocument, ...rest } = props;
     const theme = useTheme(invert);
     const classes = useStyles();
-    return (_jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
+    // Resolve the target document from the explicit prop or fall back to the ambient Fluent context.
+    // This makes nested <Theme> components automatically inherit cross-window targeting from a
+    // top-level <Theme targetDocument={popupDocument}> wrapper.
+    const inheritedTargetDocument = useFluent().targetDocument;
+    const resolvedTargetDocument = explicitTargetDocument ?? inheritedTargetDocument;
+    // Only create a new Griffel renderer when the resolved document differs from the inherited
+    // one. In the common (main-window, no nesting) case, this leaves Fluent's default renderer
+    // and renderer provider in place — matching the original behaviour exactly.
+    const renderer = useMemo(() => {
+        if (resolvedTargetDocument && resolvedTargetDocument !== inheritedTargetDocument) {
+            return createDOMRenderer(resolvedTargetDocument);
+        }
+        return undefined;
+    }, [resolvedTargetDocument, inheritedTargetDocument]);
+    const fluent = (_jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, targetDocument: resolvedTargetDocument, ...rest, children: props.children }));
+    if (renderer && resolvedTargetDocument) {
+        return (_jsx(RendererProvider, { renderer: renderer, targetDocument: resolvedTargetDocument, children: fluent }));
+    }
+    return fluent;
 };
 //# sourceMappingURL=theme.js.map

package/modularTool/components/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/components/theme.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAGxH,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,gGAAgG;AAChG,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE;QACF,cAAc,EAAE,GAAG,MAAM,CAAC,uBAAuB,IAAI,MAAM,CAAC,0BAA0B,EAAE;KAC3F;CACJ,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAkE,CAAC,KAAK,EAAE,EAAE;IAC1F,8FAA8F;IAC9F,4FAA4F;IAC5F,+DAA+D;IAC/D,MAAM,EAAE,MAAM,GAAG,KAAK,EAAE,oBAAoB,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACnF,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC/B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,CACH,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,oBAAoB,EAAE,oBAAoB,KAAM,IAAI,YAC/H,KAAK,CAAC,QAAQ,GACF,CACpB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FluentProviderProps, FluentProvider, makeStyles, mergeClasses, tokens } from \"@fluentui/react-components\";\r\nimport { type FunctionComponent } from \"react\";\r\n\r\nimport { useTheme } from \"../hooks/themeHooks\";\r\n\r\n// Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.\r\nconst useStyles = makeStyles({\r\n    root: {\r\n        scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,\r\n    },\r\n});\r\n\r\n/**\r\n * A themed Fluent UI provider that applies the current theme mode (light or dark).\r\n * @param props Fluent provider props, plus an optional `invert` flag to swap the theme.\r\n * @returns The themed Fluent UI provider component.\r\n */\r\nexport const Theme: FunctionComponent<FluentProviderProps & { invert?: boolean }> = (props) => {\r\n    // NOTE: We do not want to applyStylesToPortals by default. It makes classes flow into portals\r\n    // (like popovers), and if those styles do things like disable overflow, they can completely\r\n    // break any UI within the portal. Therefore, default to false.\r\n    const { invert = false, applyStylesToPortals = false, className, ...rest } = props;\r\n    const theme = useTheme(invert);\r\n    const classes = useStyles();\r\n\r\n    return (\r\n        <FluentProvider theme={theme} className={mergeClasses(classes.root, className)} applyStylesToPortals={applyStylesToPortals} {...rest}>\r\n            {props.children}\r\n        </FluentProvider>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/components/theme.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGH,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,MAAM,EACN,SAAS,GACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAA0B,OAAO,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,gGAAgG;AAChG,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE;QACF,cAAc,EAAE,GAAG,MAAM,CAAC,uBAAuB,IAAI,MAAM,CAAC,0BAA0B,EAAE;KAC3F;CACJ,CAAC,CAAC;AAEH;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAkE,CAAC,KAAK,EAAE,EAAE;IAC1F,8FAA8F;IAC9F,4FAA4F;IAC5F,+DAA+D;IAC/D,MAAM,EAAE,MAAM,GAAG,KAAK,EAAE,oBAAoB,GAAG,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,sBAAsB,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC3H,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC/B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,iGAAiG;IACjG,2FAA2F;IAC3F,4DAA4D;IAC5D,MAAM,uBAAuB,GAAG,SAAS,EAAE,CAAC,cAAc,CAAC;IAC3D,MAAM,sBAAsB,GAAG,sBAAsB,IAAI,uBAAuB,CAAC;IAEjF,2FAA2F;IAC3F,2FAA2F;IAC3F,4EAA4E;IAC5E,MAAM,QAAQ,GAAG,OAAO,CAA8B,GAAG,EAAE;QACvD,IAAI,sBAAsB,IAAI,sBAAsB,KAAK,uBAAuB,EAAE,CAAC;YAC/E,OAAO,iBAAiB,CAAC,sBAAsB,CAAC,CAAC;QACrD,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,sBAAsB,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEtD,MAAM,MAAM,GAAG,CACX,KAAC,cAAc,IACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EAChD,oBAAoB,EAAE,oBAAoB,EAC1C,cAAc,EAAE,sBAAsB,KAClC,IAAI,YAEP,KAAK,CAAC,QAAQ,GACF,CACpB,CAAC;IAEF,IAAI,QAAQ,IAAI,sBAAsB,EAAE,CAAC;QACrC,OAAO,CACH,KAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,sBAAsB,YACvE,MAAM,GACQ,CACtB,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import {\r\n    type FluentProviderProps,\r\n    type GriffelRenderer,\r\n    FluentProvider,\r\n    RendererProvider,\r\n    createDOMRenderer,\r\n    makeStyles,\r\n    mergeClasses,\r\n    tokens,\r\n    useFluent,\r\n} from \"@fluentui/react-components\";\r\nimport { type FunctionComponent, useMemo } from \"react\";\r\n\r\nimport { useTheme } from \"../hooks/themeHooks\";\r\n\r\n// Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.\r\nconst useStyles = makeStyles({\r\n    root: {\r\n        scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,\r\n    },\r\n});\r\n\r\n/**\r\n * A themed Fluent UI provider that applies the current theme mode (light or dark).\r\n * @param props Fluent provider props, plus an optional `invert` flag to swap the theme.\r\n *              When `targetDocument` is provided and differs from the inherited Fluent\r\n *              document (e.g. when rendering into a popup window), a Griffel renderer\r\n *              scoped to that document is created so styles are injected into it.\r\n *              When omitted, `targetDocument` is inherited from the ambient Fluent\r\n *              context so nested Theme components do not lose cross-window targeting.\r\n * @returns The themed Fluent UI provider component.\r\n */\r\nexport const Theme: FunctionComponent<FluentProviderProps & { invert?: boolean }> = (props) => {\r\n    // NOTE: We do not want to applyStylesToPortals by default. It makes classes flow into portals\r\n    // (like popovers), and if those styles do things like disable overflow, they can completely\r\n    // break any UI within the portal. Therefore, default to false.\r\n    const { invert = false, applyStylesToPortals = false, className, targetDocument: explicitTargetDocument, ...rest } = props;\r\n    const theme = useTheme(invert);\r\n    const classes = useStyles();\r\n\r\n    // Resolve the target document from the explicit prop or fall back to the ambient Fluent context.\r\n    // This makes nested <Theme> components automatically inherit cross-window targeting from a\r\n    // top-level <Theme targetDocument={popupDocument}> wrapper.\r\n    const inheritedTargetDocument = useFluent().targetDocument;\r\n    const resolvedTargetDocument = explicitTargetDocument ?? inheritedTargetDocument;\r\n\r\n    // Only create a new Griffel renderer when the resolved document differs from the inherited\r\n    // one. In the common (main-window, no nesting) case, this leaves Fluent's default renderer\r\n    // and renderer provider in place — matching the original behaviour exactly.\r\n    const renderer = useMemo<GriffelRenderer | undefined>(() => {\r\n        if (resolvedTargetDocument && resolvedTargetDocument !== inheritedTargetDocument) {\r\n            return createDOMRenderer(resolvedTargetDocument);\r\n        }\r\n        return undefined;\r\n    }, [resolvedTargetDocument, inheritedTargetDocument]);\r\n\r\n    const fluent = (\r\n        <FluentProvider\r\n            theme={theme}\r\n            className={mergeClasses(classes.root, className)}\r\n            applyStylesToPortals={applyStylesToPortals}\r\n            targetDocument={resolvedTargetDocument}\r\n            {...rest}\r\n        >\r\n            {props.children}\r\n        </FluentProvider>\r\n    );\r\n\r\n    if (renderer && resolvedTargetDocument) {\r\n        return (\r\n            <RendererProvider renderer={renderer} targetDocument={resolvedTargetDocument}>\r\n                {fluent}\r\n            </RendererProvider>\r\n        );\r\n    }\r\n\r\n    return fluent;\r\n};\r\n"]}

package/modularTool/contexts/dialogContext.d.ts

@@ -0,0 +1,14 @@
+import { type DialogOptions } from "../services/dialogService.js";
+type DialogContext = {
+    showDialog: (options: DialogOptions) => void;
+};
+export declare const DialogContext: import("react").Context<DialogContext>;
+/**
+ * Returns the showDialog function provided by the surrounding modular tool framework.
+ * If called outside of a DialogContext provider, falls back to the default context
+ * value, whose showDialog implementation invokes the browser's blocking `alert` with
+ * the dialog title.
+ * @returns A function that displays a dialog when called.
+ */
+export declare function useDialog(): DialogContext;
+export {};

package/modularTool/contexts/dialogContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+export const DialogContext = createContext({ showDialog: (options) => alert(options.title) });
+/**
+ * Returns the showDialog function provided by the surrounding modular tool framework.
+ * If called outside of a DialogContext provider, falls back to the default context
+ * value, whose showDialog implementation invokes the browser's blocking `alert` with
+ * the dialog title.
+ * @returns A function that displays a dialog when called.
+ */
+export function useDialog() {
+    return useContext(DialogContext);
+}
+//# sourceMappingURL=dialogContext.js.map

package/modularTool/contexts/dialogContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogContext.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/contexts/dialogContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQlD,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAgB,EAAE,UAAU,EAAE,CAAC,OAAsB,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAE5H;;;;;;GAMG;AACH,MAAM,UAAU,SAAS;IACrB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AACrC,CAAC","sourcesContent":["import { createContext, useContext } from \"react\";\r\n\r\nimport { type DialogOptions } from \"../services/dialogService\";\r\n\r\ntype DialogContext = {\r\n    showDialog: (options: DialogOptions) => void;\r\n};\r\n\r\nexport const DialogContext = createContext<DialogContext>({ showDialog: (options: DialogOptions) => alert(options.title) });\r\n\r\n/**\r\n * Returns the showDialog function provided by the surrounding modular tool framework.\r\n * If called outside of a DialogContext provider, falls back to the default context\r\n * value, whose showDialog implementation invokes the browser's blocking `alert` with\r\n * the dialog title.\r\n * @returns A function that displays a dialog when called.\r\n */\r\nexport function useDialog(): DialogContext {\r\n    return useContext(DialogContext);\r\n}\r\n"]}

package/modularTool/modularTool.js

@@ -6,13 +6,15 @@ import { SettingsStore, SettingsStoreIdentity } from "./services/settingsStore.j
 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 { CheckmarkCircleRegular, ErrorCircleRegular, InfoRegular, WarningRegular } from "@fluentui/react-icons";
 import { createRoot } from "react-dom/client";
 import { Deferred } from "@babylonjs/core/Misc/deferred.js";
 import { Logger } from "@babylonjs/core/Misc/logger.js";
 import { ToastProvider } from "../fluent/primitives/toast.js";
+import { DialogServiceIdentity } from "./services/dialogService.js";
 import { ToastServiceIdentity } from "./services/toastService.js";
 import { Theme } from "./components/theme.js";
+import { DialogContext } from "./contexts/dialogContext.js";
 import { ExtensionManagerContext } from "./contexts/extensionManagerContext.js";
 import { SettingsStoreContext } from "./contexts/settingsContext.js";
 import { ReactContextServiceIdentity } from "./services/reactContextService.js";
@@ -42,6 +44,24 @@ const useStyles = makeStyles({
     extensionErrorIcon: {
         color: tokens.colorPaletteRedForeground1,
     },
+    dialogTitle: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+    },
+    dialogIconSuccess: {
+        color: tokens.colorStatusSuccessForeground1,
+    },
+    dialogIconError: {
+        color: tokens.colorStatusDangerForeground1,
+    },
+    dialogIconWarning: {
+        color: tokens.colorStatusWarningForeground1,
+    },
+    dialogIconInfo: {
+        color: tokens.colorBrandForeground1,
+    },
 });
 const ReactContextsWrapper = ({ contexts, children }) => {
     return _jsx(_Fragment, { children: contexts.reduceRight((acc, entry) => createElement(entry.provider, { value: entry.value }, acc), children) });
@@ -77,6 +97,21 @@ export function MakeModularTool(options) {
                 setToastQueue([]);
             }
         }, [toastHandle, toastQueue]);
+        // Queue of dialogs to display. We show one at a time (the one at the head of the queue).
+        const [dialogQueue, dispatchDialogQueue] = useReducer((state, action) => {
+            switch (action.type) {
+                case "enqueue":
+                    return [...state, action.options];
+                case "dequeue":
+                    return state.slice(1);
+            }
+        }, []);
+        const showDialog = useCallback((dialogOptions) => {
+            dispatchDialogQueue({ type: "enqueue", options: dialogOptions });
+        }, []);
+        const onDismissDialog = useCallback(() => {
+            dispatchDialogQueue({ type: "dequeue" });
+        }, []);
         const [rootComponentService, setRootComponentService] = useState();
         const [contexts, updateContexts] = useReducer((state, action) => {
             switch (action.type) {
@@ -127,6 +162,12 @@ export function MakeModularTool(options) {
                         },
                     }),
                 });
+                // Expose the dialog service so non-React code (e.g. Observable callbacks) can show dialogs.
+                serviceContainer.addService({
+                    friendlyName: "Dialog Service",
+                    produces: [DialogServiceIdentity],
+                    factory: () => ({ showDialog }),
+                });
                 // Register the shell service (top level toolbar/side pane UI layout).
                 serviceContainer.addService(MakeShellServiceDefinition(options));
                 // Register a service that simply consumes the services we need before first render.
@@ -216,16 +257,36 @@ export function MakeModularTool(options) {
         const onAcknowledgedExtensionInstallError = useCallback(() => {
             setExtensionInstallError(undefined);
         }, [setExtensionInstallError]);
+        // The dialog at the head of the queue, if any, is the one currently being displayed.
+        const currentDialog = dialogQueue[0];
+        const currentDialogIcon = (() => {
+            switch (currentDialog?.intent) {
+                case "success":
+                    return _jsx(CheckmarkCircleRegular, { className: classes.dialogIconSuccess });
+                case "error":
+                    return _jsx(ErrorCircleRegular, { className: classes.dialogIconError });
+                case "warning":
+                    return _jsx(WarningRegular, { className: classes.dialogIconWarning });
+                case "info":
+                case undefined:
+                    return _jsx(InfoRegular, { className: classes.dialogIconInfo });
+            }
+        })();
         // 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 }) }) }) }));
+            return (_jsx(ReactContextsWrapper, { contexts: contexts, children: _jsx(SettingsStoreContext.Provider, { value: settingsStore, children: _jsx(Theme, { className: classes.app, targetDocument: targetDocument, 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, { imperativeRef: setToastHandle, 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, {}) })] }) }) }) }) }));
+            return (_jsx(ReactContextsWrapper, { contexts: contexts, children: _jsx(SettingsStoreContext.Provider, { value: settingsStore, children: _jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: _jsx(Theme, { className: classes.app, targetDocument: targetDocument, children: _jsxs(ToastProvider, { imperativeRef: setToastHandle, 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(Dialog, { open: !!currentDialog, modalType: "alert", children: _jsx(DialogSurface, { children: _jsxs(DialogBody, { children: [_jsx(DialogTitle, { children: _jsxs("div", { className: classes.dialogTitle, children: [currentDialogIcon, currentDialog?.title] }) }), currentDialog?.content && _jsx(DialogContent, { children: currentDialog.content }), _jsx(DialogActions, { children: _jsx(Button, { appearance: "primary", onClick: onDismissDialog, children: "OK" }) })] }) }) }), _jsx(Suspense, { fallback: _jsx(Spinner, { className: classes.spinner }), children: _jsx(DialogContext.Provider, { value: { showDialog }, children: _jsx(Content, {}) }) })] }) }) }) }) }));
         }
     };
+    // Derive the target document from the container element. When the container is in a popup
+    // window (or other document distinct from the main one), this is what makes Fluent inject
+    // styles and render portals into the correct document.
+    const containerOwnerDocument = containerElement.ownerDocument;
+    const targetDocument = containerOwnerDocument && containerOwnerDocument !== document ? containerOwnerDocument : undefined;
     // 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";