@onerjs/shared-ui-components 8.48.4 → 8.48.5

package/modularTool/services/extensionsListService.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AvatarGroup, AvatarGroupItem, Body1, Body1Strong, Button, Caption1, Card, CardFooter, CardHeader, CardPreview, Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, makeStyles, Persona, Popover, PopoverSurface, PopoverTrigger, PresenceBadge, Spinner, Tab, TabList, tokens, Tooltip, } from "@fluentui/react-components";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { ShellServiceIdentity } from "./shellService.js";
+import { AppsAddInRegular, ArrowDownloadRegular, BranchForkRegular, BugRegular, DeleteRegular, DismissRegular, LinkRegular, MailRegular, PeopleCommunityRegular, } from "@fluentui/react-icons";
+import { Fade } from "@fluentui/react-motion-components-preview";
+import { Logger } from "@onerjs/core/Misc/logger.js";
+import { Link } from "../../fluent/primitives/link.js";
+import { useExtensionManager } from "../contexts/extensionManagerContext.js";
+const useStyles = makeStyles({
+    extensionButton: {},
+    extensionsDialogSurface: {
+        height: "auto",
+        width: "70vw",
+        maxWidth: "600px",
+        maxHeight: "70vh",
+        backgroundColor: tokens.colorNeutralBackground2,
+    },
+    extensionDialogBody: {
+        maxWidth: "100%",
+        maxHeight: "100%",
+    },
+    extensionDialogContent: {
+        marginLeft: `calc(-1 * ${tokens.spacingHorizontalM})`,
+        marginRight: `calc(-1 * ${tokens.spacingHorizontalS})`,
+    },
+    extensionHeader: {},
+    extensionItem: {},
+    extensionCardPreview: {
+        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+        display: "flex",
+        flexDirection: "column",
+        rowGap: tokens.spacingVerticalL,
+    },
+    extensionIntro: {
+        display: "flex",
+        alignItems: "center",
+        columnGap: tokens.spacingHorizontalM,
+    },
+    extensionDescription: {
+        display: "flex",
+        flexDirection: "row",
+        columnGap: tokens.spacingHorizontalS,
+    },
+    extensionButtonContainer: {
+        marginLeft: "auto",
+        alignSelf: "flex-start",
+    },
+    spinner: {
+        animationDuration: "1s",
+        animationName: {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+        },
+    },
+    webResourceDiv: {
+        display: "flex",
+        flexDirection: "column",
+    },
+    webResourceLink: {
+        display: "flex",
+        flexDirection: "row",
+        columnGap: tokens.spacingHorizontalS,
+        alignItems: "center",
+    },
+    personPopoverSurfaceDiv: {
+        display: "flex",
+        flexDirection: "column",
+        rowGap: tokens.spacingVerticalS,
+    },
+    accordionHeaderDiv: {
+        display: "flex",
+        flexDirection: "row",
+        columnGap: tokens.spacingHorizontalS,
+        alignItems: "center",
+    },
+    resourceDetailsDiv: {
+        display: "flex",
+        flexDirection: "column",
+        rowGap: tokens.spacingVerticalS,
+    },
+    peopleDetailsDiv: {
+        display: "flex",
+        flexDirection: "row",
+        columnGap: tokens.spacingHorizontalXL,
+    },
+    avatarGroupItem: {
+        cursor: "pointer",
+    },
+});
+function AsPersonMetadata(person) {
+    if (typeof person === "string") {
+        return { name: person };
+    }
+    return person;
+}
+function GetAvatarImage(person) {
+    return person.avatar ? { src: `data:image/png;base64,${person.avatar}` } : undefined;
+}
+function usePeopleMetadata(people) {
+    const definedPeople = useMemo(() => (people ? people.filter((person) => !!person) : []), [people]);
+    return useMemo(() => definedPeople.map(AsPersonMetadata), [definedPeople]);
+}
+const WebResource = (props) => {
+    const { url, urlDisplay, icon, label } = props;
+    const classes = useStyles();
+    return (_jsx("div", { className: classes.webResourceDiv, children: _jsx(Tooltip, { content: label, relationship: "label", positioning: "before", withArrow: true, children: _jsxs("div", { className: classes.webResourceLink, children: [icon, _jsx(Link, { url: url, value: urlDisplay || url })] }) }) }));
+};
+const PersonDetailsPopover = (props) => {
+    const { person, title, disabled, children } = props;
+    const classes = useStyles();
+    if (disabled) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsxs(Popover, { withArrow: true, children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: children }), _jsx(PopoverSurface, { children: _jsxs("div", { className: classes.personPopoverSurfaceDiv, children: [_jsx(Persona, { name: person.name, secondaryText: title, avatar: { image: GetAvatarImage(person) } }), person.email && _jsx(WebResource, { url: `mailto:${person.email}`, urlDisplay: person.email, icon: _jsx(MailRegular, {}), label: "Email" }), person.url && _jsx(WebResource, { url: person.url, urlDisplay: person.url, icon: _jsx(LinkRegular, {}), label: "Website" }), person.forumUserName && (_jsx(WebResource, { url: `https://forum.babylonjs.com/u/${person.forumUserName}`, urlDisplay: person.forumUserName, icon: _jsx(PeopleCommunityRegular, {}), label: "Forum" }))] }) })] }));
+};
+const ExtensionDetails = memo((props) => {
+    const { extension } = props;
+    const { metadata } = extension;
+    const classes = useStyles();
+    const [canInstall, setCanInstall] = useState(false);
+    const [canUninstall, setCanUninstall] = useState(false);
+    const [isStateChanging, setIsStateChanging] = useState(false);
+    useEffect(() => {
+        const updateState = () => {
+            setCanInstall(!extension.isInstalled && !extension.isStateChanging);
+            setCanUninstall(extension.isInstalled && !extension.isStateChanging);
+            setIsStateChanging(extension.isStateChanging);
+        };
+        const stateChangedHandlerRegistration = extension.addStateChangedHandler(updateState);
+        updateState();
+        return stateChangedHandlerRegistration.dispose;
+    }, [extension]);
+    const [author] = usePeopleMetadata(useMemo(() => [metadata.author], [metadata.author]));
+    const contributors = usePeopleMetadata(metadata.contributors);
+    const hasResourceDetails = metadata.homepage || metadata.repository || metadata.bugs;
+    const hasPeopleDetails = author || contributors.length > 0;
+    const hasPreviewDetails = hasResourceDetails || hasPeopleDetails;
+    const hasAuthorDetails = author?.email || author?.url || author?.forumUserName;
+    const subHeader = [metadata.version ? `${metadata.version}` : null, metadata.license ? `${metadata.license}` : null].filter(Boolean).join(" | ");
+    const install = useCallback(async () => {
+        try {
+            await extension.installAsync();
+        }
+        catch {
+            // Ignore errors. Other parts of the infrastructure handle them and communicate them to the user.
+        }
+    }, [extension]);
+    const uninstall = useCallback(async () => {
+        try {
+            await extension.uninstallAsync();
+        }
+        catch {
+            // Ignore errors. Other parts of the infrastructure handle them and communicate them to the user.
+        }
+    }, [extension]);
+    return (_jsxs(AccordionItem, { className: classes.extensionItem, value: extension.metadata.name, children: [_jsx(AccordionHeader, { className: classes.extensionHeader, expandIconPosition: "end", children: _jsxs("div", { className: classes.accordionHeaderDiv, children: [_jsx(Body1Strong, { children: extension.metadata.name }), _jsx(Fade, { visible: extension.isInstalled, children: _jsx(PresenceBadge, { size: "small" }) })] }) }), _jsx(AccordionPanel, { children: _jsxs(Card, { children: [_jsx(CardHeader, { header: _jsx(Body1, { children: metadata.description }), description: _jsx(Caption1, { italic: true, children: subHeader }) }), hasPreviewDetails && (_jsxs(CardPreview, { className: classes.extensionCardPreview, children: [hasResourceDetails && (_jsxs("div", { className: classes.resourceDetailsDiv, style: { display: "flex" }, children: [metadata.homepage && _jsx(WebResource, { url: metadata.homepage, icon: _jsx(LinkRegular, {}), label: "Website" }), metadata.repository && _jsx(WebResource, { url: metadata.repository, icon: _jsx(BranchForkRegular, {}), label: "Repository" }), metadata.bugs && _jsx(WebResource, { url: metadata.bugs, icon: _jsx(BugRegular, {}), label: "Report Issues" })] })), hasPeopleDetails && (_jsxs("div", { className: classes.peopleDetailsDiv, style: { display: "flex" }, children: [author && (_jsx(PersonDetailsPopover, { person: author, title: "Author", disabled: !hasAuthorDetails, children: _jsx(Persona, { name: author.name, secondaryText: "Author", avatar: { image: GetAvatarImage(author) }, style: { cursor: hasAuthorDetails ? "pointer" : "default" } }) })), contributors.length > 0 && (_jsx(AvatarGroup, { layout: "stack", children: contributors.map((contributor) => {
+                                                return (_jsx(PersonDetailsPopover, { person: contributor, title: "Contributor", children: _jsx(AvatarGroupItem, { name: contributor.name, className: classes.avatarGroupItem, image: GetAvatarImage(contributor) }) }, contributor.name));
+                                            }) }))] }))] })), _jsxs(CardFooter, { children: [canInstall && (_jsx(Button, { appearance: "primary", size: "small", icon: _jsx(ArrowDownloadRegular, {}), onClick: install, children: "Get" })), canUninstall && (_jsx(Button, { appearance: "secondary", size: "small", icon: _jsx(DeleteRegular, {}), onClick: uninstall, children: "Remove" })), isStateChanging && _jsx(Spinner, { className: classes.spinner, size: "extra-small" })] })] }) })] }));
+});
+export const ExtensionListServiceDefinition = {
+    friendlyName: "ExtensionList",
+    consumes: [ShellServiceIdentity],
+    factory: (shellService) => {
+        const registration = shellService.addToolbarItem({
+            key: "ExtensionList",
+            horizontalLocation: "right",
+            verticalLocation: "top",
+            teachingMoment: {
+                title: "Extensions",
+                description: "Extensions provide new optional features that can be useful to your specific task or workflow. Click this button to manage extensions.",
+            },
+            order: -200,
+            component: () => {
+                const classes = useStyles();
+                const [selectedTab, setSelectedTab] = useState("available");
+                const extensionManager = useExtensionManager();
+                const [extensions, setExtensions] = useState([]);
+                useEffect(() => {
+                    if (extensionManager) {
+                        const populateExtensionsAsync = async () => {
+                            const query = await extensionManager.queryExtensionsAsync(undefined, undefined, selectedTab === "installed");
+                            const extensions = await query.getExtensionsAsync(0, query.totalCount);
+                            setExtensions(extensions);
+                        };
+                        // eslint-disable-next-line github/no-then
+                        populateExtensionsAsync().catch((error) => {
+                            Logger.Warn(`Failed to populate extensions: ${error}`);
+                        });
+                    }
+                }, [extensionManager, selectedTab]);
+                return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(Tooltip, { content: "Manage Extensions", relationship: "label", children: _jsx(Button, { className: classes.extensionButton, appearance: "subtle", icon: _jsx(AppsAddInRegular, {}) }) }) }), _jsx(DialogSurface, { className: classes.extensionsDialogSurface, children: _jsxs(DialogBody, { className: classes.extensionDialogBody, children: [_jsx(DialogTitle, { action: _jsx(DialogTrigger, { action: "close", children: _jsx(Button, { appearance: "subtle", "aria-label": "close", icon: _jsx(DismissRegular, {}) }) }), children: _jsxs(_Fragment, { children: ["Extensions", _jsxs(TabList, { className: classes.extensionDialogContent, selectedValue: selectedTab, onTabSelect: (event, data) => {
+                                                        setSelectedTab(data.value);
+                                                    }, children: [_jsx(Tab, { value: "available", children: "Available" }), _jsx(Tab, { value: "installed", children: "Installed" })] })] }) }), _jsx(DialogContent, { className: classes.extensionDialogContent, children: _jsx(Accordion, { collapsible: true, children: extensions.map((extension) => (_jsx(ExtensionDetails, { extension: extension }, extension.metadata.name))) }) })] }) })] }));
+            },
+        });
+        return {
+            dispose: () => registration.dispose(),
+        };
+    },
+};
+//# sourceMappingURL=extensionsListService.js.map

package/modularTool/services/extensionsListService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensionsListService.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/services/extensionsListService.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n    type SelectTabData,\r\n    type SelectTabEvent,\r\n    Accordion,\r\n    AccordionHeader,\r\n    AccordionItem,\r\n    AccordionPanel,\r\n    AvatarGroup,\r\n    AvatarGroupItem,\r\n    Body1,\r\n    Body1Strong,\r\n    Button,\r\n    Caption1,\r\n    Card,\r\n    CardFooter,\r\n    CardHeader,\r\n    CardPreview,\r\n    Dialog,\r\n    DialogBody,\r\n    DialogContent,\r\n    DialogSurface,\r\n    DialogTitle,\r\n    DialogTrigger,\r\n    makeStyles,\r\n    Persona,\r\n    Popover,\r\n    PopoverSurface,\r\n    PopoverTrigger,\r\n    PresenceBadge,\r\n    Spinner,\r\n    Tab,\r\n    TabList,\r\n    tokens,\r\n    Tooltip,\r\n} from \"@fluentui/react-components\";\r\nimport { type TriggerProps } from \"@fluentui/react-utilities\";\r\nimport { type FunctionComponent, memo, useCallback, useEffect, useMemo, useState } from \"react\";\r\nimport { type PersonMetadata } from \"../extensibility/extensionFeed\";\r\nimport { type IExtension } from \"../extensibility/extensionManager\";\r\nimport { type ServiceDefinition } from \"../modularity/serviceDefinition\";\r\nimport { type IShellService, ShellServiceIdentity } from \"./shellService\";\r\n\r\nimport {\r\n    AppsAddInRegular,\r\n    ArrowDownloadRegular,\r\n    BranchForkRegular,\r\n    BugRegular,\r\n    DeleteRegular,\r\n    DismissRegular,\r\n    LinkRegular,\r\n    MailRegular,\r\n    PeopleCommunityRegular,\r\n} from \"@fluentui/react-icons\";\r\nimport { Fade } from \"@fluentui/react-motion-components-preview\";\r\n\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\nimport { Link } from \"shared-ui-components/fluent/primitives/link\";\r\nimport { useExtensionManager } from \"../contexts/extensionManagerContext\";\r\n\r\nconst useStyles = makeStyles({\r\n    extensionButton: {},\r\n    extensionsDialogSurface: {\r\n        height: \"auto\",\r\n        width: \"70vw\",\r\n        maxWidth: \"600px\",\r\n        maxHeight: \"70vh\",\r\n        backgroundColor: tokens.colorNeutralBackground2,\r\n    },\r\n    extensionDialogBody: {\r\n        maxWidth: \"100%\",\r\n        maxHeight: \"100%\",\r\n    },\r\n    extensionDialogContent: {\r\n        marginLeft: `calc(-1 * ${tokens.spacingHorizontalM})`,\r\n        marginRight: `calc(-1 * ${tokens.spacingHorizontalS})`,\r\n    },\r\n    extensionHeader: {},\r\n    extensionItem: {},\r\n    extensionCardPreview: {\r\n        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        rowGap: tokens.spacingVerticalL,\r\n    },\r\n    extensionIntro: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        columnGap: tokens.spacingHorizontalM,\r\n    },\r\n    extensionDescription: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        columnGap: tokens.spacingHorizontalS,\r\n    },\r\n    extensionButtonContainer: {\r\n        marginLeft: \"auto\",\r\n        alignSelf: \"flex-start\",\r\n    },\r\n    spinner: {\r\n        animationDuration: \"1s\",\r\n        animationName: {\r\n            from: { opacity: 0 },\r\n            to: { opacity: 1 },\r\n        },\r\n    },\r\n    webResourceDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    },\r\n    webResourceLink: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        columnGap: tokens.spacingHorizontalS,\r\n        alignItems: \"center\",\r\n    },\r\n    personPopoverSurfaceDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        rowGap: tokens.spacingVerticalS,\r\n    },\r\n    accordionHeaderDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        columnGap: tokens.spacingHorizontalS,\r\n        alignItems: \"center\",\r\n    },\r\n    resourceDetailsDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        rowGap: tokens.spacingVerticalS,\r\n    },\r\n    peopleDetailsDiv: {\r\n        display: \"flex\",\r\n        flexDirection: \"row\",\r\n        columnGap: tokens.spacingHorizontalXL,\r\n    },\r\n    avatarGroupItem: {\r\n        cursor: \"pointer\",\r\n    },\r\n});\r\n\r\nfunction AsPersonMetadata(person: string | PersonMetadata): PersonMetadata {\r\n    if (typeof person === \"string\") {\r\n        return { name: person } satisfies PersonMetadata;\r\n    }\r\n    return person;\r\n}\r\n\r\nfunction GetAvatarImage(person: PersonMetadata): { src: string } | undefined {\r\n    return person.avatar ? { src: `data:image/png;base64,${person.avatar}` } : undefined;\r\n}\r\n\r\nfunction usePeopleMetadata(people?: readonly (string | PersonMetadata | undefined)[]): PersonMetadata[] {\r\n    const definedPeople = useMemo(() => (people ? people.filter((person): person is string | PersonMetadata => !!person) : []), [people]);\r\n    return useMemo(() => definedPeople.map(AsPersonMetadata), [definedPeople]);\r\n}\r\n\r\nconst WebResource: FunctionComponent<{ url: string; urlDisplay?: string; icon: JSX.Element; label: string }> = (props) => {\r\n    const { url, urlDisplay, icon, label } = props;\r\n    const classes = useStyles();\r\n\r\n    return (\r\n        <div className={classes.webResourceDiv}>\r\n            <Tooltip content={label} relationship=\"label\" positioning=\"before\" withArrow>\r\n                <div className={classes.webResourceLink}>\r\n                    {icon}\r\n                    <Link url={url} value={urlDisplay || url} />\r\n                </div>\r\n            </Tooltip>\r\n        </div>\r\n    );\r\n};\r\n\r\nconst PersonDetailsPopover: FunctionComponent<TriggerProps & { person: PersonMetadata; title: string; disabled?: boolean }> = (props) => {\r\n    const { person, title, disabled, children } = props;\r\n    const classes = useStyles();\r\n\r\n    if (disabled) {\r\n        return <>{children}</>;\r\n    }\r\n\r\n    return (\r\n        <Popover withArrow>\r\n            <PopoverTrigger disableButtonEnhancement>{children}</PopoverTrigger>\r\n            <PopoverSurface>\r\n                <div className={classes.personPopoverSurfaceDiv}>\r\n                    <Persona name={person.name} secondaryText={title} avatar={{ image: GetAvatarImage(person) }} />\r\n                    {person.email && <WebResource url={`mailto:${person.email}`} urlDisplay={person.email} icon={<MailRegular />} label=\"Email\" />}\r\n                    {person.url && <WebResource url={person.url} urlDisplay={person.url} icon={<LinkRegular />} label=\"Website\" />}\r\n                    {person.forumUserName && (\r\n                        <WebResource\r\n                            url={`https://forum.babylonjs.com/u/${person.forumUserName}`}\r\n                            urlDisplay={person.forumUserName}\r\n                            icon={<PeopleCommunityRegular />}\r\n                            label=\"Forum\"\r\n                        />\r\n                    )}\r\n                </div>\r\n            </PopoverSurface>\r\n        </Popover>\r\n    );\r\n};\r\n\r\nconst ExtensionDetails: FunctionComponent<{ extension: IExtension }> = memo((props) => {\r\n    const { extension } = props;\r\n    const { metadata } = extension;\r\n\r\n    const classes = useStyles();\r\n\r\n    const [canInstall, setCanInstall] = useState(false);\r\n    const [canUninstall, setCanUninstall] = useState(false);\r\n    const [isStateChanging, setIsStateChanging] = useState(false);\r\n\r\n    useEffect(() => {\r\n        const updateState = () => {\r\n            setCanInstall(!extension.isInstalled && !extension.isStateChanging);\r\n            setCanUninstall(extension.isInstalled && !extension.isStateChanging);\r\n            setIsStateChanging(extension.isStateChanging);\r\n        };\r\n\r\n        const stateChangedHandlerRegistration = extension.addStateChangedHandler(updateState);\r\n        updateState();\r\n\r\n        return stateChangedHandlerRegistration.dispose;\r\n    }, [extension]);\r\n\r\n    const [author] = usePeopleMetadata(useMemo(() => [metadata.author], [metadata.author]));\r\n    const contributors = usePeopleMetadata(metadata.contributors);\r\n\r\n    const hasResourceDetails = metadata.homepage || metadata.repository || metadata.bugs;\r\n    const hasPeopleDetails = author || contributors.length > 0;\r\n    const hasPreviewDetails = hasResourceDetails || hasPeopleDetails;\r\n    const hasAuthorDetails = author?.email || author?.url || author?.forumUserName;\r\n    const subHeader = [metadata.version ? `${metadata.version}` : null, metadata.license ? `${metadata.license}` : null].filter(Boolean).join(\" | \");\r\n\r\n    const install = useCallback(async () => {\r\n        try {\r\n            await extension.installAsync();\r\n        } catch {\r\n            // Ignore errors. Other parts of the infrastructure handle them and communicate them to the user.\r\n        }\r\n    }, [extension]);\r\n\r\n    const uninstall = useCallback(async () => {\r\n        try {\r\n            await extension.uninstallAsync();\r\n        } catch {\r\n            // Ignore errors. Other parts of the infrastructure handle them and communicate them to the user.\r\n        }\r\n    }, [extension]);\r\n\r\n    return (\r\n        <AccordionItem className={classes.extensionItem} value={extension.metadata.name}>\r\n            <AccordionHeader className={classes.extensionHeader} expandIconPosition=\"end\">\r\n                <div className={classes.accordionHeaderDiv}>\r\n                    <Body1Strong>{extension.metadata.name}</Body1Strong>\r\n                    <Fade visible={extension.isInstalled}>\r\n                        <PresenceBadge size=\"small\" />\r\n                    </Fade>\r\n                </div>\r\n            </AccordionHeader>\r\n            <AccordionPanel>\r\n                <Card>\r\n                    <CardHeader header={<Body1>{metadata.description}</Body1>} description={<Caption1 italic>{subHeader}</Caption1>} />\r\n                    {hasPreviewDetails && (\r\n                        <CardPreview className={classes.extensionCardPreview}>\r\n                            {hasResourceDetails && (\r\n                                <div className={classes.resourceDetailsDiv} style={{ display: \"flex\" }}>\r\n                                    {metadata.homepage && <WebResource url={metadata.homepage} icon={<LinkRegular />} label=\"Website\" />}\r\n                                    {metadata.repository && <WebResource url={metadata.repository} icon={<BranchForkRegular />} label=\"Repository\" />}\r\n                                    {metadata.bugs && <WebResource url={metadata.bugs} icon={<BugRegular />} label=\"Report Issues\" />}\r\n                                </div>\r\n                            )}\r\n                            {hasPeopleDetails && (\r\n                                <div className={classes.peopleDetailsDiv} style={{ display: \"flex\" }}>\r\n                                    {author && (\r\n                                        <PersonDetailsPopover person={author} title=\"Author\" disabled={!hasAuthorDetails}>\r\n                                            <Persona\r\n                                                name={author.name}\r\n                                                secondaryText=\"Author\"\r\n                                                avatar={{ image: GetAvatarImage(author) }}\r\n                                                style={{ cursor: hasAuthorDetails ? \"pointer\" : \"default\" }}\r\n                                            />\r\n                                        </PersonDetailsPopover>\r\n                                    )}\r\n                                    {contributors.length > 0 && (\r\n                                        <AvatarGroup layout=\"stack\">\r\n                                            {contributors.map((contributor) => {\r\n                                                return (\r\n                                                    <PersonDetailsPopover key={contributor.name} person={contributor} title=\"Contributor\">\r\n                                                        <AvatarGroupItem name={contributor.name} className={classes.avatarGroupItem} image={GetAvatarImage(contributor)} />\r\n                                                    </PersonDetailsPopover>\r\n                                                );\r\n                                            })}\r\n                                        </AvatarGroup>\r\n                                    )}\r\n                                </div>\r\n                            )}\r\n                        </CardPreview>\r\n                    )}\r\n                    <CardFooter>\r\n                        {canInstall && (\r\n                            <Button appearance=\"primary\" size=\"small\" icon={<ArrowDownloadRegular />} onClick={install}>\r\n                                Get\r\n                            </Button>\r\n                        )}\r\n                        {canUninstall && (\r\n                            <Button appearance=\"secondary\" size=\"small\" icon={<DeleteRegular />} onClick={uninstall}>\r\n                                Remove\r\n                            </Button>\r\n                        )}\r\n                        {isStateChanging && <Spinner className={classes.spinner} size=\"extra-small\" />}\r\n                    </CardFooter>\r\n                </Card>\r\n            </AccordionPanel>\r\n        </AccordionItem>\r\n    );\r\n});\r\n\r\ntype TabValue = \"available\" | \"installed\";\r\n\r\nexport const ExtensionListServiceDefinition: ServiceDefinition<[], [IShellService]> = {\r\n    friendlyName: \"ExtensionList\",\r\n    consumes: [ShellServiceIdentity],\r\n    factory: (shellService) => {\r\n        const registration = shellService.addToolbarItem({\r\n            key: \"ExtensionList\",\r\n            horizontalLocation: \"right\",\r\n            verticalLocation: \"top\",\r\n            teachingMoment: {\r\n                title: \"Extensions\",\r\n                description: \"Extensions provide new optional features that can be useful to your specific task or workflow. Click this button to manage extensions.\",\r\n            },\r\n            order: -200,\r\n            component: () => {\r\n                const classes = useStyles();\r\n\r\n                const [selectedTab, setSelectedTab] = useState<TabValue>(\"available\");\r\n                const extensionManager = useExtensionManager();\r\n                const [extensions, setExtensions] = useState<IExtension[]>([]);\r\n\r\n                useEffect(() => {\r\n                    if (extensionManager) {\r\n                        const populateExtensionsAsync = async () => {\r\n                            const query = await extensionManager.queryExtensionsAsync(undefined, undefined, selectedTab === \"installed\");\r\n                            const extensions = await query.getExtensionsAsync(0, query.totalCount);\r\n                            setExtensions(extensions);\r\n                        };\r\n\r\n                        // eslint-disable-next-line github/no-then\r\n                        populateExtensionsAsync().catch((error) => {\r\n                            Logger.Warn(`Failed to populate extensions: ${error}`);\r\n                        });\r\n                    }\r\n                }, [extensionManager, selectedTab]);\r\n\r\n                return (\r\n                    <Dialog>\r\n                        <DialogTrigger disableButtonEnhancement>\r\n                            <Tooltip content=\"Manage Extensions\" relationship=\"label\">\r\n                                <Button className={classes.extensionButton} appearance=\"subtle\" icon={<AppsAddInRegular />} />\r\n                            </Tooltip>\r\n                        </DialogTrigger>\r\n                        <DialogSurface className={classes.extensionsDialogSurface}>\r\n                            <DialogBody className={classes.extensionDialogBody}>\r\n                                <DialogTitle\r\n                                    action={\r\n                                        <DialogTrigger action=\"close\">\r\n                                            <Button appearance=\"subtle\" aria-label=\"close\" icon={<DismissRegular />} />\r\n                                        </DialogTrigger>\r\n                                    }\r\n                                >\r\n                                    <>\r\n                                        Extensions\r\n                                        <TabList\r\n                                            className={classes.extensionDialogContent}\r\n                                            selectedValue={selectedTab}\r\n                                            onTabSelect={(event: SelectTabEvent, data: SelectTabData) => {\r\n                                                setSelectedTab(data.value as TabValue);\r\n                                            }}\r\n                                        >\r\n                                            <Tab value={\"available\" satisfies TabValue}>Available</Tab>\r\n                                            <Tab value={\"installed\" satisfies TabValue}>Installed</Tab>\r\n                                        </TabList>\r\n                                    </>\r\n                                </DialogTitle>\r\n                                <DialogContent className={classes.extensionDialogContent}>\r\n                                    <Accordion collapsible>\r\n                                        {extensions.map((extension) => (\r\n                                            <ExtensionDetails key={extension.metadata.name} extension={extension} />\r\n                                        ))}\r\n                                    </Accordion>\r\n                                </DialogContent>\r\n                            </DialogBody>\r\n                        </DialogSurface>\r\n                    </Dialog>\r\n                );\r\n            },\r\n        });\r\n\r\n        return {\r\n            dispose: () => registration.dispose(),\r\n        };\r\n    },\r\n};\r\n"]}

package/modularTool/services/globalSettings.d.ts

@@ -0,0 +1,3 @@
+import { type SettingDescriptor } from "./settingsStore.js";
+export declare const CompactModeSettingDescriptor: SettingDescriptor<boolean>;
+export declare const DisableCopySettingDescriptor: SettingDescriptor<boolean>;

package/modularTool/services/globalSettings.js

@@ -0,0 +1,9 @@
+export const CompactModeSettingDescriptor = {
+    key: "CompactMode",
+    defaultValue: !matchMedia("(pointer: coarse)").matches,
+};
+export const DisableCopySettingDescriptor = {
+    key: "DisableCopy",
+    defaultValue: false,
+};
+//# sourceMappingURL=globalSettings.js.map

package/modularTool/services/globalSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"globalSettings.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/services/globalSettings.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,4BAA4B,GAA+B;IACpE,GAAG,EAAE,aAAa;IAClB,YAAY,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC,OAAO;CACzD,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAA+B;IACpE,GAAG,EAAE,aAAa;IAClB,YAAY,EAAE,KAAK;CACtB,CAAC","sourcesContent":["import { type SettingDescriptor } from \"./settingsStore\";\r\n\r\nexport const CompactModeSettingDescriptor: SettingDescriptor<boolean> = {\r\n    key: \"CompactMode\",\r\n    defaultValue: !matchMedia(\"(pointer: coarse)\").matches,\r\n};\r\n\r\nexport const DisableCopySettingDescriptor: SettingDescriptor<boolean> = {\r\n    key: \"DisableCopy\",\r\n    defaultValue: false,\r\n};\r\n"]}

package/modularTool/services/reactContextService.d.ts

@@ -0,0 +1,18 @@
+import { type Context } from "react";
+import { type IDisposable } from "@onerjs/core/index.js";
+import { type IService } from "../modularity/serviceDefinition.js";
+/**
+ * The unique identity symbol for the react context service.
+ */
+export declare const ReactContextServiceIdentity: unique symbol;
+export type ReactContextHandle<T> = IDisposable & {
+    updateValue: (newValue: T) => void;
+};
+/**
+ * ReactContextService allows global React contexts to be added/removed/updated.
+ */
+export interface IReactContextService extends IService<typeof ReactContextServiceIdentity> {
+    addContext<T>(provider: Context<T>["Provider"], initialValue: T, options?: {
+        order?: number;
+    }): ReactContextHandle<T>;
+}

package/modularTool/services/reactContextService.js

@@ -0,0 +1,5 @@
+/**
+ * The unique identity symbol for the react context service.
+ */
+export const ReactContextServiceIdentity = Symbol("ReactContextService");
+//# sourceMappingURL=reactContextService.js.map

package/modularTool/services/reactContextService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactContextService.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/services/reactContextService.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC","sourcesContent":["import { type Context } from \"react\";\r\n\r\nimport { type IDisposable } from \"core/index\";\r\nimport { type IService } from \"../modularity/serviceDefinition\";\r\n\r\n/**\r\n * The unique identity symbol for the react context service.\r\n */\r\nexport const ReactContextServiceIdentity = Symbol(\"ReactContextService\");\r\n\r\nexport type ReactContextHandle<T> = IDisposable & {\r\n    updateValue: (newValue: T) => void;\r\n};\r\n\r\n/**\r\n * ReactContextService allows global React contexts to be added/removed/updated.\r\n */\r\nexport interface IReactContextService extends IService<typeof ReactContextServiceIdentity> {\r\n    addContext<T>(provider: Context<T>[\"Provider\"], initialValue: T, options?: { order?: number }): ReactContextHandle<T>;\r\n}\r\n"]}

package/modularTool/services/settingsService.d.ts

@@ -0,0 +1,24 @@
+import { type IDisposable } from "@onerjs/core/index.js";
+import { type DynamicAccordionSection, type DynamicAccordionSectionContent } from "../components/extensibleAccordion.js";
+import { type IService, type ServiceDefinition } from "../modularity/serviceDefinition.js";
+import { type IShellService } from "./shellService.js";
+/**
+ * The unique identity symbol for the settings service.
+ */
+export declare const SettingsServiceIdentity: unique symbol;
+/**
+ * Allows new sections or content to be added to the Settings pane.
+ */
+export interface ISettingsService extends IService<typeof SettingsServiceIdentity> {
+    /**
+     * Adds a new section to the settings pane.
+     * @param section A description of the section to add.
+     */
+    addSection(section: DynamicAccordionSection): IDisposable;
+    /**
+     * Adds content to one or more sections in the settings pane.
+     * @param content A description of the content to add.
+     */
+    addSectionContent(content: DynamicAccordionSectionContent<unknown>): IDisposable;
+}
+export declare const SettingsServiceDefinition: ServiceDefinition<[ISettingsService], [IShellService]>;

package/modularTool/services/settingsService.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ExtensibleAccordion } from "../components/extensibleAccordion.js";
+import { ShellServiceIdentity } from "./shellService.js";
+import { SettingsRegular } from "@fluentui/react-icons";
+import { useObservableCollection, useOrderedObservableCollection } from "../hooks/observableHooks.js";
+import { ObservableCollection } from "../misc/observableCollection.js";
+/**
+ * The unique identity symbol for the settings service.
+ */
+export const SettingsServiceIdentity = Symbol("SettingsService");
+export const SettingsServiceDefinition = {
+    friendlyName: "Settings",
+    consumes: [ShellServiceIdentity],
+    produces: [SettingsServiceIdentity],
+    factory: (shellService) => {
+        const sectionsCollection = new ObservableCollection();
+        const sectionContentCollection = new ObservableCollection();
+        const registration = shellService.addSidePane({
+            key: "Settings",
+            title: "Settings",
+            icon: SettingsRegular,
+            horizontalLocation: "right",
+            verticalLocation: "top",
+            order: 500,
+            teachingMoment: false,
+            content: () => {
+                const sections = useOrderedObservableCollection(sectionsCollection);
+                const sectionContent = useObservableCollection(sectionContentCollection);
+                return _jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: true });
+            },
+        });
+        return {
+            addSection: (section) => sectionsCollection.add(section),
+            addSectionContent: (content) => sectionContentCollection.add(content),
+            dispose: () => {
+                registration.dispose();
+            },
+        };
+    },
+};
+//# sourceMappingURL=settingsService.js.map

package/modularTool/services/settingsService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settingsService.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/services/settingsService.tsx"],"names":[],"mappings":";AACA,OAAO,EAAqE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE3I,OAAO,EAAsB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,uBAAuB,EAAE,8BAA8B,EAAE,MAAM,0BAA0B,CAAC;AACnG,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAmBjE,MAAM,CAAC,MAAM,yBAAyB,GAA2D;IAC7F,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,CAAC,oBAAoB,CAAC;IAChC,QAAQ,EAAE,CAAC,uBAAuB,CAAC;IACnC,OAAO,EAAE,CAAC,YAAY,EAAE,EAAE;QACtB,MAAM,kBAAkB,GAAG,IAAI,oBAAoB,EAA2B,CAAC;QAC/E,MAAM,wBAAwB,GAAG,IAAI,oBAAoB,EAA2C,CAAC;QAErG,MAAM,YAAY,GAAG,YAAY,CAAC,WAAW,CAAC;YAC1C,GAAG,EAAE,UAAU;YACf,KAAK,EAAE,UAAU;YACjB,IAAI,EAAE,eAAe;YACrB,kBAAkB,EAAE,OAAO;YAC3B,gBAAgB,EAAE,KAAK;YACvB,KAAK,EAAE,GAAG;YACV,cAAc,EAAE,KAAK;YACrB,OAAO,EAAE,GAAG,EAAE;gBACV,MAAM,QAAQ,GAAG,8BAA8B,CAAC,kBAAkB,CAAC,CAAC;gBACpE,MAAM,cAAc,GAAG,uBAAuB,CAAC,wBAAwB,CAAC,CAAC;gBAEzE,OAAO,KAAC,mBAAmB,IAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,GAAI,CAAC;YACtG,CAAC;SACJ,CAAC,CAAC;QAEH,OAAO;YACH,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC;YACxD,iBAAiB,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,wBAAwB,CAAC,GAAG,CAAC,OAAO,CAAC;YACrE,OAAO,EAAE,GAAG,EAAE;gBACV,YAAY,CAAC,OAAO,EAAE,CAAC;YAC3B,CAAC;SACJ,CAAC;IACN,CAAC;CACJ,CAAC","sourcesContent":["import { type IDisposable } from \"core/index\";\r\nimport { type DynamicAccordionSection, type DynamicAccordionSectionContent, ExtensibleAccordion } from \"../components/extensibleAccordion\";\r\nimport { type IService, type ServiceDefinition } from \"../modularity/serviceDefinition\";\r\nimport { type IShellService, ShellServiceIdentity } from \"./shellService\";\r\n\r\nimport { SettingsRegular } from \"@fluentui/react-icons\";\r\n\r\nimport { useObservableCollection, useOrderedObservableCollection } from \"../hooks/observableHooks\";\r\nimport { ObservableCollection } from \"../misc/observableCollection\";\r\n\r\n/**\r\n * The unique identity symbol for the settings service.\r\n */\r\nexport const SettingsServiceIdentity = Symbol(\"SettingsService\");\r\n\r\n/**\r\n * Allows new sections or content to be added to the Settings pane.\r\n */\r\nexport interface ISettingsService extends IService<typeof SettingsServiceIdentity> {\r\n    /**\r\n     * Adds a new section to the settings pane.\r\n     * @param section A description of the section to add.\r\n     */\r\n    addSection(section: DynamicAccordionSection): IDisposable;\r\n\r\n    /**\r\n     * Adds content to one or more sections in the settings pane.\r\n     * @param content A description of the content to add.\r\n     */\r\n    addSectionContent(content: DynamicAccordionSectionContent<unknown>): IDisposable;\r\n}\r\n\r\nexport const SettingsServiceDefinition: ServiceDefinition<[ISettingsService], [IShellService]> = {\r\n    friendlyName: \"Settings\",\r\n    consumes: [ShellServiceIdentity],\r\n    produces: [SettingsServiceIdentity],\r\n    factory: (shellService) => {\r\n        const sectionsCollection = new ObservableCollection<DynamicAccordionSection>();\r\n        const sectionContentCollection = new ObservableCollection<DynamicAccordionSectionContent<unknown>>();\r\n\r\n        const registration = shellService.addSidePane({\r\n            key: \"Settings\",\r\n            title: \"Settings\",\r\n            icon: SettingsRegular,\r\n            horizontalLocation: \"right\",\r\n            verticalLocation: \"top\",\r\n            order: 500,\r\n            teachingMoment: false,\r\n            content: () => {\r\n                const sections = useOrderedObservableCollection(sectionsCollection);\r\n                const sectionContent = useObservableCollection(sectionContentCollection);\r\n\r\n                return <ExtensibleAccordion sections={sections} sectionContent={sectionContent} context={true} />;\r\n            },\r\n        });\r\n\r\n        return {\r\n            addSection: (section) => sectionsCollection.add(section),\r\n            addSectionContent: (content) => sectionContentCollection.add(content),\r\n            dispose: () => {\r\n                registration.dispose();\r\n            },\r\n        };\r\n    },\r\n};\r\n"]}

package/modularTool/services/settingsStore.d.ts

@@ -0,0 +1,55 @@
+import { type IReadonlyObservable } from "@onerjs/core/index.js";
+import { type IService } from "../modularity/serviceDefinition.js";
+/**
+ * The unique identity symbol for the settings store service.
+ */
+export declare const SettingsStoreIdentity: unique symbol;
+/**
+ * Describes a setting by its key and default value.
+ */
+export type SettingDescriptor<T> = {
+    /**
+     * The unique key used to identify this setting in the store.
+     */
+    readonly key: string;
+    /**
+     * The default value to use when the setting has not been explicitly set.
+     */
+    readonly defaultValue: T;
+};
+/**
+ * Provides a key-value store for persisting user settings.
+ */
+export interface ISettingsStore extends IService<typeof SettingsStoreIdentity> {
+    /**
+     * An observable that notifies when a setting has changed, providing the key of the changed setting.
+     */
+    onChanged: IReadonlyObservable<string>;
+    /**
+     * Reads a setting from the store.
+     * @param descriptor The descriptor of the setting to read.
+     * @returns The current value of the setting, or the default value if it has not been set.
+     */
+    readSetting<T>(descriptor: SettingDescriptor<T>): T;
+    /**
+     * Writes a setting to the store.
+     * @param descriptor The descriptor of the setting to write.
+     * @param value The value to write.
+     */
+    writeSetting<T>(descriptor: SettingDescriptor<T>, value: T): void;
+}
+/**
+ * Default implementation of {@link ISettingsStore} that persists settings using browser local storage.
+ */
+export declare class SettingsStore implements ISettingsStore {
+    private readonly _namespace;
+    private readonly _onChanged;
+    /**
+     * Creates a new settings store.
+     * @param _namespace A namespace used to scope the settings keys to avoid collisions with other stores.
+     */
+    constructor(_namespace: string);
+    get onChanged(): IReadonlyObservable<Readonly<string>>;
+    readSetting<T>(descriptor: SettingDescriptor<T>): T;
+    writeSetting<T>(descriptor: SettingDescriptor<T>, value: T): void;
+}

package/modularTool/services/settingsStore.js

@@ -0,0 +1,35 @@
+import { DataStorage } from "@onerjs/core/Misc/dataStorage.js";
+import { Observable } from "@onerjs/core/Misc/observable.js";
+/**
+ * The unique identity symbol for the settings store service.
+ */
+export const SettingsStoreIdentity = Symbol("SettingsStore");
+function GetKey(namespace, settingKey) {
+    return `Babylon/${namespace}/${settingKey}`;
+}
+/**
+ * Default implementation of {@link ISettingsStore} that persists settings using browser local storage.
+ */
+export class SettingsStore {
+    /**
+     * Creates a new settings store.
+     * @param _namespace A namespace used to scope the settings keys to avoid collisions with other stores.
+     */
+    constructor(_namespace) {
+        this._namespace = _namespace;
+        this._onChanged = new Observable();
+    }
+    get onChanged() {
+        return this._onChanged;
+    }
+    readSetting(descriptor) {
+        const key = GetKey(this._namespace, descriptor.key);
+        return DataStorage.ReadJson(key, descriptor.defaultValue);
+    }
+    writeSetting(descriptor, value) {
+        const key = GetKey(this._namespace, descriptor.key);
+        DataStorage.WriteJson(key, value);
+        this._onChanged.notifyObservers(descriptor.key);
+    }
+}
+//# sourceMappingURL=settingsStore.js.map

package/modularTool/services/settingsStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settingsStore.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/services/settingsStore.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;AAyC7D,SAAS,MAAM,CAAC,SAAiB,EAAE,UAAkB;IACjD,OAAO,WAAW,SAAS,IAAI,UAAU,EAAE,CAAC;AAChD,CAAC;AAED;;GAEG;AACH,MAAM,OAAO,aAAa;IAGtB;;;OAGG;IACH,YAAoC,UAAkB;QAAlB,eAAU,GAAV,UAAU,CAAQ;QANrC,eAAU,GAAG,IAAI,UAAU,EAAoB,CAAC;IAMR,CAAC;IAE1D,IAAW,SAAS;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IAEM,WAAW,CAAI,UAAgC;QAClD,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;QACpD,OAAO,WAAW,CAAC,QAAQ,CAAC,GAAG,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAC9D,CAAC;IAEM,YAAY,CAAI,UAAgC,EAAE,KAAQ;QAC7D,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;QACpD,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC;CACJ","sourcesContent":["import { type IReadonlyObservable } from \"core/index\";\r\nimport { type IService } from \"../modularity/serviceDefinition\";\r\n\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport { Observable } from \"core/Misc/observable\";\r\n\r\n/**\r\n * The unique identity symbol for the settings store service.\r\n */\r\nexport const SettingsStoreIdentity = Symbol(\"SettingsStore\");\r\n\r\n/**\r\n * Describes a setting by its key and default value.\r\n */\r\nexport type SettingDescriptor<T> = {\r\n    /**\r\n     * The unique key used to identify this setting in the store.\r\n     */\r\n    readonly key: string;\r\n\r\n    /**\r\n     * The default value to use when the setting has not been explicitly set.\r\n     */\r\n    readonly defaultValue: T;\r\n};\r\n\r\n/**\r\n * Provides a key-value store for persisting user settings.\r\n */\r\nexport interface ISettingsStore extends IService<typeof SettingsStoreIdentity> {\r\n    /**\r\n     * An observable that notifies when a setting has changed, providing the key of the changed setting.\r\n     */\r\n    onChanged: IReadonlyObservable<string>;\r\n\r\n    /**\r\n     * Reads a setting from the store.\r\n     * @param descriptor The descriptor of the setting to read.\r\n     * @returns The current value of the setting, or the default value if it has not been set.\r\n     */\r\n    readSetting<T>(descriptor: SettingDescriptor<T>): T;\r\n\r\n    /**\r\n     * Writes a setting to the store.\r\n     * @param descriptor The descriptor of the setting to write.\r\n     * @param value The value to write.\r\n     */\r\n    writeSetting<T>(descriptor: SettingDescriptor<T>, value: T): void;\r\n}\r\n\r\nfunction GetKey(namespace: string, settingKey: string) {\r\n    return `Babylon/${namespace}/${settingKey}`;\r\n}\r\n\r\n/**\r\n * Default implementation of {@link ISettingsStore} that persists settings using browser local storage.\r\n */\r\nexport class SettingsStore implements ISettingsStore {\r\n    private readonly _onChanged = new Observable<Readonly<string>>();\r\n\r\n    /**\r\n     * Creates a new settings store.\r\n     * @param _namespace A namespace used to scope the settings keys to avoid collisions with other stores.\r\n     */\r\n    public constructor(private readonly _namespace: string) {}\r\n\r\n    public get onChanged(): IReadonlyObservable<Readonly<string>> {\r\n        return this._onChanged;\r\n    }\r\n\r\n    public readSetting<T>(descriptor: SettingDescriptor<T>): T {\r\n        const key = GetKey(this._namespace, descriptor.key);\r\n        return DataStorage.ReadJson(key, descriptor.defaultValue);\r\n    }\r\n\r\n    public writeSetting<T>(descriptor: SettingDescriptor<T>, value: T): void {\r\n        const key = GetKey(this._namespace, descriptor.key);\r\n        DataStorage.WriteJson(key, value);\r\n        this._onChanged.notifyObservers(descriptor.key);\r\n    }\r\n}\r\n"]}