@babylonjs/shared-ui-components 9.2.0 → 9.2.2

package/modularTool/components/extensibleAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensibleAccordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/components/extensibleAccordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type ComponentType, type PropsWithChildren, type Ref, Children, isValidElement, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport { type AccordionProps, type AccordionSectionProps, Accordion, AccordionSection } from \"shared-ui-components/fluent/primitives/accordion\";\r\n\r\nimport { makeStyles } from \"@fluentui/react-components\";\r\n\r\nimport { UXContextProvider } from \"./uxContextProvider\";\r\n\r\nfunction AsReadonlyArray<T>(array: T[]): readonly T[] {\r\n    return array;\r\n}\r\n\r\n/**\r\n * Describes a section within a dynamic accordion that can be added at runtime.\r\n */\r\nexport type DynamicAccordionSection = Readonly<{\r\n    /**\r\n     * A unique identity for the section, which can be referenced by section content.\r\n     */\r\n    identity: string;\r\n\r\n    /**\r\n     * An optional order for the section, relative to other sections.\r\n     * Defaults to 0.\r\n     */\r\n    order?: number;\r\n\r\n    /**\r\n     * An optional flag indicating whether the section should be collapsed by default.\r\n     * Defaults to false.\r\n     */\r\n    collapseByDefault?: boolean;\r\n}>;\r\n\r\n/**\r\n * Describes content that belongs to a section within a dynamic accordion.\r\n */\r\nexport type DynamicAccordionSectionContent<ContextT> = Readonly<{\r\n    /**\r\n     * A unique key for the the content.\r\n     */\r\n    key: string;\r\n\r\n    /**\r\n     * The section this content belongs to.\r\n     */\r\n    section: string;\r\n\r\n    /**\r\n     * An optional order for the content within the section.\r\n     * Defaults to 0.\r\n     */\r\n    order?: number;\r\n\r\n    /**\r\n     * The React component that will be rendered for this content.\r\n     */\r\n    component: ComponentType<{ context: ContextT }>;\r\n}>;\r\n\r\nconst useStyles = makeStyles({\r\n    rootDiv: {\r\n        flex: 1,\r\n        overflow: \"hidden\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    },\r\n});\r\n\r\n/**\r\n * Imperative handle for controlling section highlights on the extensible accordion.\r\n */\r\nexport type SectionsImperativeRef = {\r\n    /**\r\n     * Highlights the specified sections, collapsing all others until the context changes.\r\n     * @param sections The identity strings of the sections to highlight.\r\n     */\r\n    highlightSections: (sections: readonly string[]) => void;\r\n};\r\n\r\n/**\r\n * An accordion component that supports dynamically adding sections and section content at runtime.\r\n * Combines statically defined children sections with dynamically registered sections and content.\r\n * @param props The accordion props including sections, section content, context, and an optional imperative ref.\r\n * @returns The extensible accordion component.\r\n */\r\nexport function ExtensibleAccordion<ContextT = unknown>(\r\n    props: PropsWithChildren<\r\n        {\r\n            sections: readonly DynamicAccordionSection[];\r\n            sectionContent: readonly DynamicAccordionSectionContent<ContextT>[];\r\n            context: ContextT;\r\n            sectionsRef?: Ref<SectionsImperativeRef>;\r\n        } & AccordionProps\r\n    >\r\n) {\r\n    const classes = useStyles();\r\n\r\n    const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;\r\n\r\n    const defaultSections = useMemo(() => {\r\n        const defaultSections: DynamicAccordionSection[] = [];\r\n        if (children) {\r\n            Children.forEach(children, (child) => {\r\n                if (isValidElement(child)) {\r\n                    const childProps = child.props as AccordionSectionProps;\r\n                    defaultSections.push({\r\n                        identity: childProps.title,\r\n                        collapseByDefault: childProps.collapseByDefault,\r\n                    });\r\n                }\r\n            });\r\n        }\r\n        return AsReadonlyArray(defaultSections);\r\n    }, [children]);\r\n\r\n    // Cache stable component wrappers for static (children-based) sections so that\r\n    // React does not unmount/remount them on every re-render. The components read\r\n    // the latest child element from `elements` so they always render fresh content.\r\n    const staticComponentCacheRef = useRef<{\r\n        elements: Map<string, React.ReactNode>;\r\n        components: Map<string, ComponentType<{ context: ContextT }>>;\r\n    }>({ elements: new Map(), components: new Map() });\r\n\r\n    const defaultSectionContent = useMemo(() => {\r\n        const cache = staticComponentCacheRef.current;\r\n        cache.elements.clear();\r\n        const defaultSectionContent: DynamicAccordionSectionContent<ContextT>[] = [];\r\n        if (children) {\r\n            Children.forEach(children, (child, index) => {\r\n                if (isValidElement(child)) {\r\n                    const childProps = child.props as AccordionSectionProps;\r\n                    const key = child.key ?? childProps.title;\r\n\r\n                    // Update the element so the stable component renders the latest content.\r\n                    cache.elements.set(key, child);\r\n\r\n                    // Create a stable component wrapper only once per key.\r\n                    if (!cache.components.has(key)) {\r\n                        const capturedKey = key;\r\n                        cache.components.set(capturedKey, () => <>{cache.elements.get(capturedKey)}</>);\r\n                    }\r\n\r\n                    defaultSectionContent.push({\r\n                        key,\r\n                        section: defaultSections[index].identity,\r\n                        component: cache.components.get(key)!,\r\n                    });\r\n                }\r\n            });\r\n        }\r\n        return AsReadonlyArray(defaultSectionContent);\r\n    }, [children, defaultSections]);\r\n\r\n    const mergedSectionContent = useMemo(() => {\r\n        return AsReadonlyArray(\r\n            [...defaultSectionContent, ...sectionContent].map((content, index) => {\r\n                return {\r\n                    ...content,\r\n                    key: `${content.key}-${index}`,\r\n                    order: content.order ?? index,\r\n                } as const;\r\n            })\r\n        );\r\n    }, [defaultSectionContent, sectionContent]);\r\n\r\n    const mergedSections = useMemo(() => {\r\n        const mergedSections = [...defaultSections.map((s) => ({ ...s, isDefault: true as const })), ...sections.map((s) => ({ ...s, isDefault: false as const }))];\r\n\r\n        // Check for implicit sections (e.g. sections that were not explicitly defined, but referenced by content).\r\n        const implicitSections: DynamicAccordionSection[] = [];\r\n        for (const sectionContent of mergedSectionContent) {\r\n            if (!mergedSections.some((s) => s.identity === sectionContent.section) && !implicitSections.some((s) => s.identity === sectionContent.section)) {\r\n                implicitSections.push({ identity: sectionContent.section });\r\n            }\r\n        }\r\n\r\n        return AsReadonlyArray(\r\n            [...implicitSections.map((s) => ({ ...s, isDefault: false as const })), ...mergedSections].map((section, index) => {\r\n                return {\r\n                    ...section,\r\n                    order: section.order ?? index,\r\n                    collapseByDefault: section.collapseByDefault ?? false,\r\n                } as const;\r\n            })\r\n        );\r\n    }, [defaultSections, sections, mergedSectionContent]);\r\n\r\n    const visibleSections = useMemo(() => {\r\n        if (!context) {\r\n            return [];\r\n        }\r\n\r\n        const sortedSections = [...mergedSections].sort((a, b) => {\r\n            // Default sections always come before non-default sections.\r\n            if (a.isDefault !== b.isDefault) {\r\n                return a.isDefault ? -1 : 1;\r\n            }\r\n            return a.order - b.order;\r\n        });\r\n\r\n        return sortedSections\r\n            .map((section) => {\r\n                // Get a flat list of the section content, preserving the key so it can be used when each component for each section is rendered.\r\n                const contentForSection = mergedSectionContent.filter((content) => content.section === section.identity);\r\n\r\n                // If there is no content for this section, we skip it.\r\n                if (contentForSection.length === 0) {\r\n                    return null; // No content for this section\r\n                }\r\n\r\n                // Sort the content for this section by order, defaulting to 0 if not specified.\r\n                contentForSection.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));\r\n\r\n                // Return the section with its identity, collapseByDefault flag, and the content components to render.\r\n                return {\r\n                    identity: section.identity,\r\n                    collapseByDefault: section.collapseByDefault ?? false,\r\n                    components: contentForSection.map((content) => <content.component key={content.key} context={context} />),\r\n                };\r\n            })\r\n            .filter((section) => section !== null);\r\n    }, [mergedSections, mergedSectionContent, context]);\r\n\r\n    const [highlightSections, setHighlightSections] = useState<readonly string[]>();\r\n\r\n    // When the context changes, clear any existing highlights.\r\n    useLayoutEffect(() => {\r\n        setHighlightSections(undefined);\r\n    }, [context]);\r\n\r\n    // This just assigns the returned object to any type of React ref, whether it is\r\n    // a mutable ref with a 'current' property or whether it is a callback, useImperativeHandle\r\n    // will deal with it.\r\n    useImperativeHandle(sectionsRef, () => {\r\n        return {\r\n            highlightSections: (sectionsToHighlight: readonly string[]) => {\r\n                if (sectionsToHighlight.length > 0) {\r\n                    setHighlightSections(sectionsToHighlight);\r\n                }\r\n            },\r\n        };\r\n    }, []);\r\n\r\n    return (\r\n        <div className={classes.rootDiv}>\r\n            {visibleSections.length > -1 && (\r\n                <UXContextProvider>\r\n                    <Accordion highlightSections={highlightSections} {...rest}>\r\n                        {...visibleSections.map((section) => {\r\n                            return (\r\n                                <AccordionSection key={section.identity} title={section.identity} collapseByDefault={section.collapseByDefault}>\r\n                                    {section.components}\r\n                                </AccordionSection>\r\n                            );\r\n                        })}\r\n                    </Accordion>\r\n                </UXContextProvider>\r\n            )}\r\n        </div>\r\n    );\r\n}\r\n"]}

package/modularTool/components/pane.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Used to apply common styles to panes.
+ */
+export declare const SidePaneContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/modularTool/components/pane.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { makeStyles, mergeClasses, tokens } from "@fluentui/react-components";
+const useStyles = makeStyles({
+    paneRootDiv: {
+        display: "flex",
+        flex: 1,
+        flexDirection: "column",
+        padding: `0 ${tokens.spacingHorizontalM}`,
+    },
+});
+/**
+ * Used to apply common styles to panes.
+ */
+export const SidePaneContainer = forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    const classes = useStyles();
+    return (_jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
+});
+//# sourceMappingURL=pane.js.map

package/modularTool/components/pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/components/pane.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,WAAW,EAAE;QACT,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,QAAQ;QACvB,OAAO,EAAE,KAAK,MAAM,CAAC,kBAAkB,EAAE;KAC5C;CACJ,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAAwC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9F,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACrC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,CACH,cAAK,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,IAAI,YAC3E,KAAK,CAAC,QAAQ,GACb,CACT,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import { type ComponentProps, forwardRef } from \"react\";\r\n\r\nimport { makeStyles, mergeClasses, tokens } from \"@fluentui/react-components\";\r\n\r\nconst useStyles = makeStyles({\r\n    paneRootDiv: {\r\n        display: \"flex\",\r\n        flex: 1,\r\n        flexDirection: \"column\",\r\n        padding: `0 ${tokens.spacingHorizontalM}`,\r\n    },\r\n});\r\n\r\n/**\r\n * Used to apply common styles to panes.\r\n */\r\nexport const SidePaneContainer = forwardRef<HTMLDivElement, ComponentProps<\"div\">>((props, ref) => {\r\n    const { className, ...rest } = props;\r\n    const classes = useStyles();\r\n\r\n    return (\r\n        <div className={mergeClasses(classes.paneRootDiv, className)} ref={ref} {...rest}>\r\n            {props.children}\r\n        </div>\r\n    );\r\n});\r\n"]}

package/modularTool/components/teachingMoment.d.ts

@@ -0,0 +1,20 @@
+import { type FunctionComponent } from "react";
+import { type MakePopoverTeachingMoment } from "../hooks/teachingMomentHooks.js";
+/**
+ * The state returned by the teaching moment hook.
+ */
+type TeachingMomentState = ReturnType<ReturnType<typeof MakePopoverTeachingMoment>>;
+/**
+ * Props for the {@link TeachingMoment} component.
+ */
+type TeachingMomentProps = Pick<TeachingMomentState, "shouldDisplay" | "positioningRef" | "onOpenChange"> & {
+    title: string;
+    description: string;
+};
+/**
+ * A component that displays a teaching moment popover.
+ * @param props Props for the teaching moment popover.
+ * @returns The teaching moment popover.
+ */
+export declare const TeachingMoment: FunctionComponent<TeachingMomentProps>;
+export {};

package/modularTool/components/teachingMoment.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles, TeachingPopover, TeachingPopoverBody, TeachingPopoverHeader, TeachingPopoverSurface } from "@fluentui/react-components";
+const useStyles = makeStyles({
+    extensionTeachingPopover: {
+        maxWidth: "320px",
+    },
+});
+/**
+ * A component that displays a teaching moment popover.
+ * @param props Props for the teaching moment popover.
+ * @returns The teaching moment popover.
+ */
+export const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
+    const classes = useStyles();
+    return (_jsx(TeachingPopover, { appearance: "brand", open: shouldDisplay, positioning: { positioningRef }, onOpenChange: onOpenChange, children: _jsxs(TeachingPopoverSurface, { className: classes.extensionTeachingPopover, children: [_jsx(TeachingPopoverHeader, { children: title }), _jsx(TeachingPopoverBody, { children: description })] }) }));
+};
+//# sourceMappingURL=teachingMoment.js.map

package/modularTool/components/teachingMoment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teachingMoment.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/components/teachingMoment.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAE7I,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,wBAAwB,EAAE;QACtB,QAAQ,EAAE,OAAO;KACpB;CACJ,CAAC,CAAC;AAeH;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAA2C,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IAC1I,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,OAAO,CACH,KAAC,eAAe,IAAC,UAAU,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,EAAE,WAAW,EAAE,EAAE,cAAc,EAAE,EAAE,YAAY,EAAE,YAAY,YAChH,MAAC,sBAAsB,IAAC,SAAS,EAAE,OAAO,CAAC,wBAAwB,aAC/D,KAAC,qBAAqB,cAAE,KAAK,GAAyB,EACtD,KAAC,mBAAmB,cAAE,WAAW,GAAuB,IACnC,GACX,CACrB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FunctionComponent } from \"react\";\r\nimport { type MakePopoverTeachingMoment } from \"../hooks/teachingMomentHooks\";\r\n\r\nimport { makeStyles, TeachingPopover, TeachingPopoverBody, TeachingPopoverHeader, TeachingPopoverSurface } from \"@fluentui/react-components\";\r\n\r\nconst useStyles = makeStyles({\r\n    extensionTeachingPopover: {\r\n        maxWidth: \"320px\",\r\n    },\r\n});\r\n\r\n/**\r\n * The state returned by the teaching moment hook.\r\n */\r\ntype TeachingMomentState = ReturnType<ReturnType<typeof MakePopoverTeachingMoment>>;\r\n\r\n/**\r\n * Props for the {@link TeachingMoment} component.\r\n */\r\ntype TeachingMomentProps = Pick<TeachingMomentState, \"shouldDisplay\" | \"positioningRef\" | \"onOpenChange\"> & {\r\n    title: string;\r\n    description: string;\r\n};\r\n\r\n/**\r\n * A component that displays a teaching moment popover.\r\n * @param props Props for the teaching moment popover.\r\n * @returns The teaching moment popover.\r\n */\r\nexport const TeachingMoment: FunctionComponent<TeachingMomentProps> = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {\r\n    const classes = useStyles();\r\n\r\n    return (\r\n        <TeachingPopover appearance=\"brand\" open={shouldDisplay} positioning={{ positioningRef }} onOpenChange={onOpenChange}>\r\n            <TeachingPopoverSurface className={classes.extensionTeachingPopover}>\r\n                <TeachingPopoverHeader>{title}</TeachingPopoverHeader>\r\n                <TeachingPopoverBody>{description}</TeachingPopoverBody>\r\n            </TeachingPopoverSurface>\r\n        </TeachingPopover>\r\n    );\r\n};\r\n"]}

package/modularTool/components/theme.d.ts

@@ -0,0 +1,10 @@
+import { type FluentProviderProps } from "@fluentui/react-components";
+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.
+ * @returns The themed Fluent UI provider component.
+ */
+export declare const Theme: FunctionComponent<FluentProviderProps & {
+    invert?: boolean;
+}>;

package/modularTool/components/theme.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FluentProvider, makeStyles, mergeClasses, tokens } from "@fluentui/react-components";
+import { useTheme } from "../hooks/themeHooks.js";
+// Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
+const useStyles = makeStyles({
+    root: {
+        scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,
+    },
+});
+/**
+ * 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.
+ * @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 theme = useTheme(invert);
+    const classes = useStyles();
+    return (_jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
+};
+//# sourceMappingURL=theme.js.map

package/modularTool/components/theme.js.map

@@ -0,0 +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"]}

package/modularTool/components/uxContextProvider.d.ts

@@ -0,0 +1,2 @@
+import { type FunctionComponent, type PropsWithChildren } from "react";
+export declare const UXContextProvider: FunctionComponent<PropsWithChildren>;

package/modularTool/components/uxContextProvider.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ToolContext } from "../../fluent/hoc/fluentToolWrapper.js";
+import { useSetting } from "../hooks/settingsHooks.js";
+import { CompactModeSettingDescriptor, DisableCopySettingDescriptor } from "../services/globalSettings.js";
+export const UXContextProvider = (props) => {
+    const [compactMode] = useSetting(CompactModeSettingDescriptor);
+    const [disableCopy] = useSetting(DisableCopySettingDescriptor);
+    const toolsContext = useMemo(() => {
+        return {
+            toolName: "",
+            size: compactMode ? "small" : "medium",
+            disableCopy,
+            useFluent: true,
+        };
+    }, [compactMode, disableCopy]);
+    return _jsx(ToolContext.Provider, { value: toolsContext, children: props.children });
+};
+//# sourceMappingURL=uxContextProvider.js.map

package/modularTool/components/uxContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uxContextProvider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/components/uxContextProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoE,OAAO,EAAE,MAAM,OAAO,CAAC;AAElG,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,4BAA4B,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAExG,MAAM,CAAC,MAAM,iBAAiB,GAAyC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,4BAA4B,CAAC,CAAC;IAC/D,MAAM,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,4BAA4B,CAAC,CAAC;IAE/D,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO;YACH,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;YACtC,WAAW;YACX,SAAS,EAAE,IAAI;SACwB,CAAC;IAChD,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/B,OAAO,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,KAAK,CAAC,QAAQ,GAAwB,CAAC;AAC9F,CAAC,CAAC","sourcesContent":["import { type ContextType, type FunctionComponent, type PropsWithChildren, useMemo } from \"react\";\r\n\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\nimport { useSetting } from \"../hooks/settingsHooks\";\r\nimport { CompactModeSettingDescriptor, DisableCopySettingDescriptor } from \"../services/globalSettings\";\r\n\r\nexport const UXContextProvider: FunctionComponent<PropsWithChildren> = (props) => {\r\n    const [compactMode] = useSetting(CompactModeSettingDescriptor);\r\n    const [disableCopy] = useSetting(DisableCopySettingDescriptor);\r\n\r\n    const toolsContext = useMemo(() => {\r\n        return {\r\n            toolName: \"\",\r\n            size: compactMode ? \"small\" : \"medium\",\r\n            disableCopy,\r\n            useFluent: true,\r\n        } satisfies ContextType<typeof ToolContext>;\r\n    }, [compactMode, disableCopy]);\r\n\r\n    return <ToolContext.Provider value={toolsContext}>{props.children}</ToolContext.Provider>;\r\n};\r\n"]}

package/modularTool/contexts/extensionManagerContext.d.ts

@@ -0,0 +1,6 @@
+import { type ExtensionManager } from "../extensibility/extensionManager.js";
+export type ExtensionManagerContext = {
+    readonly extensionManager: ExtensionManager;
+};
+export declare const ExtensionManagerContext: import("react").Context<ExtensionManagerContext | undefined>;
+export declare function useExtensionManager(): ExtensionManager | undefined;

package/modularTool/contexts/extensionManagerContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const ExtensionManagerContext = createContext(undefined);
+export function useExtensionManager() {
+    return useContext(ExtensionManagerContext)?.extensionManager;
+}
+//# sourceMappingURL=extensionManagerContext.js.map

package/modularTool/contexts/extensionManagerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensionManagerContext.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/contexts/extensionManagerContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMlD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAsC,SAAS,CAAC,CAAC;AAErG,MAAM,UAAU,mBAAmB;IAC/B,OAAO,UAAU,CAAC,uBAAuB,CAAC,EAAE,gBAAgB,CAAC;AACjE,CAAC","sourcesContent":["import { type ExtensionManager } from \"../extensibility/extensionManager\";\r\n\r\nimport { createContext, useContext } from \"react\";\r\n\r\nexport type ExtensionManagerContext = {\r\n    readonly extensionManager: ExtensionManager;\r\n};\r\n\r\nexport const ExtensionManagerContext = createContext<ExtensionManagerContext | undefined>(undefined);\r\n\r\nexport function useExtensionManager() {\r\n    return useContext(ExtensionManagerContext)?.extensionManager;\r\n}\r\n"]}

package/modularTool/contexts/settingsContext.d.ts

@@ -0,0 +1,3 @@
+import { type ISettingsStore } from "../services/settingsStore.js";
+export declare const SettingsStoreContext: import("react").Context<ISettingsStore | undefined>;
+export declare function useSettingsStore(): ISettingsStore | undefined;

package/modularTool/contexts/settingsContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const SettingsStoreContext = createContext(undefined);
+export function useSettingsStore() {
+    return useContext(SettingsStoreContext);
+}
+//# sourceMappingURL=settingsContext.js.map

package/modularTool/contexts/settingsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settingsContext.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/contexts/settingsContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA6B,SAAS,CAAC,CAAC;AAEzF,MAAM,UAAU,gBAAgB;IAC5B,OAAO,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC5C,CAAC","sourcesContent":["import { type ISettingsStore } from \"../services/settingsStore\";\r\n\r\nimport { createContext, useContext } from \"react\";\r\n\r\nexport const SettingsStoreContext = createContext<ISettingsStore | undefined>(undefined);\r\n\r\nexport function useSettingsStore() {\r\n    return useContext(SettingsStoreContext);\r\n}\r\n"]}

package/modularTool/extensibility/builtInsExtensionFeed.d.ts

@@ -0,0 +1,21 @@
+import { type IExtensionFeed, type ExtensionMetadata, type IExtensionMetadataQuery, type ExtensionModule } from "./extensionFeed.js";
+export type BuiltInExtension = ExtensionMetadata & {
+    /**
+     * Gets the extension module, typically dynamically importing the extension.
+     * @returns The extension module (e.g. a collection of ServiceDefinitions).
+     */
+    getExtensionModuleAsync(): Promise<ExtensionModule>;
+};
+/**
+ * A simple extension feed implementation that provides a fixed set of "built in" extensions.
+ * "Built in" in this context means extensions that are known at bundling time, and included
+ * in the bundle. Each extension can be dynamically imported so they are split into separate
+ * bundle chunks and downloaded only when first installed.
+ */
+export declare class BuiltInsExtensionFeed implements IExtensionFeed {
+    readonly name: string;
+    private readonly _extensions;
+    constructor(name: string, extensions: Iterable<BuiltInExtension>);
+    queryExtensionsAsync(filter?: string): Promise<IExtensionMetadataQuery>;
+    getExtensionModuleAsync(name: string): Promise<ExtensionModule | undefined>;
+}

package/modularTool/extensibility/builtInsExtensionFeed.js

@@ -0,0 +1,26 @@
+/**
+ * A simple extension feed implementation that provides a fixed set of "built in" extensions.
+ * "Built in" in this context means extensions that are known at bundling time, and included
+ * in the bundle. Each extension can be dynamically imported so they are split into separate
+ * bundle chunks and downloaded only when first installed.
+ */
+export class BuiltInsExtensionFeed {
+    constructor(name, extensions) {
+        this.name = name;
+        this._extensions = Array.from(extensions);
+    }
+    async queryExtensionsAsync(filter) {
+        const filteredExtensions = filter ? this._extensions.filter((extension) => extension.name.includes(filter)) : this._extensions;
+        return {
+            totalCount: filteredExtensions.length,
+            getExtensionMetadataAsync: async (index, count) => {
+                return filteredExtensions.slice(index, index + count);
+            },
+        };
+    }
+    async getExtensionModuleAsync(name) {
+        const extension = this._extensions.find((ext) => ext.name === name);
+        return extension ? await extension.getExtensionModuleAsync() : undefined;
+    }
+}
+//# sourceMappingURL=builtInsExtensionFeed.js.map

package/modularTool/extensibility/builtInsExtensionFeed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"builtInsExtensionFeed.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/extensibility/builtInsExtensionFeed.ts"],"names":[],"mappings":"AAUA;;;;;GAKG;AACH,MAAM,OAAO,qBAAqB;IAG9B,YACoB,IAAY,EAC5B,UAAsC;QADtB,SAAI,GAAJ,IAAI,CAAQ;QAG5B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC9C,CAAC;IAEM,KAAK,CAAC,oBAAoB,CAAC,MAAe;QAC7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QAC/H,OAAO;YACH,UAAU,EAAE,kBAAkB,CAAC,MAAM;YACrC,yBAAyB,EAAE,KAAK,EAAE,KAAa,EAAE,KAAa,EAAE,EAAE;gBAC9D,OAAO,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,CAAC;YAC1D,CAAC;SACJ,CAAC;IACN,CAAC;IAEM,KAAK,CAAC,uBAAuB,CAAC,IAAY;QAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;QACpE,OAAO,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7E,CAAC;CACJ","sourcesContent":["import { type IExtensionFeed, type ExtensionMetadata, type IExtensionMetadataQuery, type ExtensionModule } from \"./extensionFeed\";\r\n\r\nexport type BuiltInExtension = ExtensionMetadata & {\r\n    /**\r\n     * Gets the extension module, typically dynamically importing the extension.\r\n     * @returns The extension module (e.g. a collection of ServiceDefinitions).\r\n     */\r\n    getExtensionModuleAsync(): Promise<ExtensionModule>;\r\n};\r\n\r\n/**\r\n * A simple extension feed implementation that provides a fixed set of \"built in\" extensions.\r\n * \"Built in\" in this context means extensions that are known at bundling time, and included\r\n * in the bundle. Each extension can be dynamically imported so they are split into separate\r\n * bundle chunks and downloaded only when first installed.\r\n */\r\nexport class BuiltInsExtensionFeed implements IExtensionFeed {\r\n    private readonly _extensions: readonly BuiltInExtension[];\r\n\r\n    public constructor(\r\n        public readonly name: string,\r\n        extensions: Iterable<BuiltInExtension>\r\n    ) {\r\n        this._extensions = Array.from(extensions);\r\n    }\r\n\r\n    public async queryExtensionsAsync(filter?: string): Promise<IExtensionMetadataQuery> {\r\n        const filteredExtensions = filter ? this._extensions.filter((extension) => extension.name.includes(filter)) : this._extensions;\r\n        return {\r\n            totalCount: filteredExtensions.length,\r\n            getExtensionMetadataAsync: async (index: number, count: number) => {\r\n                return filteredExtensions.slice(index, index + count);\r\n            },\r\n        };\r\n    }\r\n\r\n    public async getExtensionModuleAsync(name: string): Promise<ExtensionModule | undefined> {\r\n        const extension = this._extensions.find((ext) => ext.name === name);\r\n        return extension ? await extension.getExtensionModuleAsync() : undefined;\r\n    }\r\n}\r\n"]}

package/modularTool/extensibility/extensionFeed.d.ts

@@ -0,0 +1,113 @@
+import { type WeaklyTypedServiceDefinition } from "../modularity/serviceContainer.js";
+export type PersonMetadata = {
+    /**
+     * The name of the person.
+     */
+    readonly name: string;
+    /**
+     * The email address of the person.
+     */
+    readonly email?: string;
+    /**
+     * The URL to the person's website.
+     */
+    readonly url?: string;
+    /**
+     * The Babylon forum username of the person.
+     */
+    readonly forumUserName?: string;
+    /**
+     * A base64 encoded PNG image to use as the person's avatar.
+     */
+    readonly avatar?: string;
+};
+export type ExtensionMetadata = {
+    /**
+     * The name of the extension.
+     */
+    readonly name: string;
+    /**
+     * The version of the extension (as valid semver).
+     */
+    readonly version?: string;
+    /**
+     * The description of the extension.
+     */
+    readonly description: string;
+    /**
+     * The keywords of the extension.
+     */
+    readonly keywords?: readonly string[];
+    /**
+     * The URL to the extension homepage.
+     */
+    readonly homepage?: string;
+    /**
+     * Specify the place where your code lives. This is helpful for people who want to contribute.
+     */
+    readonly repository?: string;
+    /**
+     * The URL to your extension's issue tracker and / or the email address to which issues should be reported. These are helpful for people who encounter issues with your extension.
+     */
+    readonly bugs?: string;
+    /**
+     * A license for your package so that people know how they are permitted to use it, and any restrictions you're placing on it.
+     */
+    readonly license?: string;
+    /**
+     * The primary author of the extension.
+     */
+    readonly author?: string | PersonMetadata;
+    /**
+     * The contributors to the extension.
+     */
+    readonly contributors?: readonly (string | PersonMetadata)[];
+};
+export type ExtensionModule = {
+    /**
+     * The default export of the module (e.g. export default).
+     */
+    default: {
+        /**
+         * The services that are included with the extension.
+         */
+        serviceDefinitions?: readonly WeaklyTypedServiceDefinition[];
+    };
+};
+/**
+ * Represents a query to fetch subset ranges of extension metadata from a feed.
+ */
+export interface IExtensionMetadataQuery {
+    /**
+     * The total number of extensions that satisfy the query.
+     */
+    readonly totalCount: number;
+    /**
+     * Fetches a range of extension metadata from the feed.
+     * @param index The index of the first extension to fetch.
+     * @param count The number of extensions to fetch.
+     * @returns A promise that resolves to the extension metadata.
+     */
+    getExtensionMetadataAsync(index: number, count: number): Promise<readonly ExtensionMetadata[]>;
+}
+/**
+ * Represents a feed/source of extensions.
+ */
+export interface IExtensionFeed {
+    /**
+     * The name of the feed.
+     */
+    readonly name: string;
+    /**
+     * Creates an extension metadata query given a filter.
+     * @param filter The filter to apply to the query.
+     * @returns A promise that resolves to the extension metadata query.
+     */
+    queryExtensionsAsync(filter?: string): Promise<IExtensionMetadataQuery>;
+    /**
+     * Gets the extension module for the specified extension.
+     * @param name The name of the extension.
+     * @returns A promise that resolves to the extension module.
+     */
+    getExtensionModuleAsync(name: string): Promise<ExtensionModule | undefined>;
+}

package/modularTool/extensibility/extensionFeed.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=extensionFeed.js.map

package/modularTool/extensibility/extensionFeed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensionFeed.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/modularTool/extensibility/extensionFeed.ts"],"names":[],"mappings":"","sourcesContent":["import { type WeaklyTypedServiceDefinition } from \"../modularity/serviceContainer\";\r\n\r\nexport type PersonMetadata = {\r\n    /**\r\n     * The name of the person.\r\n     */\r\n    readonly name: string;\r\n\r\n    /**\r\n     * The email address of the person.\r\n     */\r\n    readonly email?: string;\r\n\r\n    /**\r\n     * The URL to the person's website.\r\n     */\r\n    readonly url?: string;\r\n\r\n    /**\r\n     * The Babylon forum username of the person.\r\n     */\r\n    readonly forumUserName?: string;\r\n\r\n    /**\r\n     * A base64 encoded PNG image to use as the person's avatar.\r\n     */\r\n    readonly avatar?: string;\r\n};\r\n\r\nexport type ExtensionMetadata = {\r\n    /**\r\n     * The name of the extension.\r\n     */\r\n    readonly name: string;\r\n\r\n    /**\r\n     * The version of the extension (as valid semver).\r\n     */\r\n    readonly version?: string;\r\n\r\n    /**\r\n     * The description of the extension.\r\n     */\r\n    readonly description: string;\r\n\r\n    /**\r\n     * The keywords of the extension.\r\n     */\r\n    readonly keywords?: readonly string[];\r\n\r\n    /**\r\n     * The URL to the extension homepage.\r\n     */\r\n    readonly homepage?: string;\r\n\r\n    /**\r\n     * Specify the place where your code lives. This is helpful for people who want to contribute.\r\n     */\r\n    readonly repository?: string;\r\n\r\n    /**\r\n     * The URL to your extension's issue tracker and / or the email address to which issues should be reported. These are helpful for people who encounter issues with your extension.\r\n     */\r\n    readonly bugs?: string;\r\n\r\n    /**\r\n     * A license for your package so that people know how they are permitted to use it, and any restrictions you're placing on it.\r\n     */\r\n    readonly license?: string;\r\n\r\n    /**\r\n     * The primary author of the extension.\r\n     */\r\n    readonly author?: string | PersonMetadata;\r\n\r\n    /**\r\n     * The contributors to the extension.\r\n     */\r\n    readonly contributors?: readonly (string | PersonMetadata)[];\r\n};\r\n\r\nexport type ExtensionModule = {\r\n    /**\r\n     * The default export of the module (e.g. export default).\r\n     */\r\n    default: {\r\n        /**\r\n         * The services that are included with the extension.\r\n         */\r\n        serviceDefinitions?: readonly WeaklyTypedServiceDefinition[];\r\n    };\r\n};\r\n\r\n/**\r\n * Represents a query to fetch subset ranges of extension metadata from a feed.\r\n */\r\nexport interface IExtensionMetadataQuery {\r\n    /**\r\n     * The total number of extensions that satisfy the query.\r\n     */\r\n    readonly totalCount: number;\r\n\r\n    /**\r\n     * Fetches a range of extension metadata from the feed.\r\n     * @param index The index of the first extension to fetch.\r\n     * @param count The number of extensions to fetch.\r\n     * @returns A promise that resolves to the extension metadata.\r\n     */\r\n    getExtensionMetadataAsync(index: number, count: number): Promise<readonly ExtensionMetadata[]>;\r\n}\r\n\r\n/**\r\n * Represents a feed/source of extensions.\r\n */\r\nexport interface IExtensionFeed {\r\n    /**\r\n     * The name of the feed.\r\n     */\r\n    readonly name: string;\r\n\r\n    /**\r\n     * Creates an extension metadata query given a filter.\r\n     * @param filter The filter to apply to the query.\r\n     * @returns A promise that resolves to the extension metadata query.\r\n     */\r\n    queryExtensionsAsync(filter?: string): Promise<IExtensionMetadataQuery>;\r\n\r\n    /**\r\n     * Gets the extension module for the specified extension.\r\n     * @param name The name of the extension.\r\n     * @returns A promise that resolves to the extension module.\r\n     */\r\n    getExtensionModuleAsync(name: string): Promise<ExtensionModule | undefined>;\r\n}\r\n"]}

package/modularTool/extensibility/extensionManager.d.ts

@@ -0,0 +1,111 @@
+import { type IDisposable } from "@babylonjs/core/index.js";
+import { type ServiceContainer } from "../modularity/serviceContainer.js";
+import { type IExtensionFeed, type ExtensionMetadata } from "./extensionFeed.js";
+/**
+ * Represents a loaded extension.
+ */
+export interface IExtension {
+    /**
+     * The metadata for the extension.
+     */
+    readonly metadata: ExtensionMetadata;
+    /**
+     * Whether the extension is currently being installed, uninstalled, enabled, or disabled.
+     */
+    readonly isStateChanging: boolean;
+    /**
+     * Whether the extension is enabled.
+     */
+    readonly isInstalled: boolean;
+    /**
+     * Installs the extension.
+     */
+    installAsync(): Promise<void>;
+    /**
+     * Uninstalls the extension.
+     */
+    uninstallAsync(): Promise<void>;
+    /**
+     * Adds a handler that is called when the state of the extension changes.
+     * @param handler The handler to add.
+     * @returns A disposable that removes the handler when disposed.
+     */
+    addStateChangedHandler(handler: () => void): IDisposable;
+}
+/**
+ * Provides information about an extension installation failure.
+ */
+export type InstallFailedInfo = {
+    /**
+     * The metadata of the extension that failed to install.
+     */
+    extension: ExtensionMetadata;
+    /**
+     * The error that occurred during the installation.
+     */
+    error: unknown;
+};
+/**
+ * Represents a query for loaded extensions.
+ */
+export interface IExtensionQuery {
+    /**
+     * The total number of extensions that satisfy the query.
+     */
+    readonly totalCount: number;
+    /**
+     * Fetches a range of extensions from the query.
+     * @param index The index of the first extension to fetch.
+     * @param count The number of extensions to fetch.
+     * @returns A promise that resolves to the extensions.
+     */
+    getExtensionsAsync(index: number, count: number): Promise<IExtension[]>;
+}
+/**
+ * Manages the installation, uninstallation, enabling, and disabling of extensions.
+ */
+export declare class ExtensionManager implements IDisposable {
+    private readonly _namespace;
+    private readonly _serviceContainer;
+    private readonly _feeds;
+    private readonly _onInstallFailed;
+    private readonly _installedExtensions;
+    private readonly _stateChangedHandlers;
+    private constructor();
+    /**
+     * Creates a new instance of the ExtensionManager.
+     * This will automatically rehydrate previously installed and enabled extensions.
+     * @param namespace The namespace to use for storing extension state in local storage.
+     * @param serviceContainer The service container to use.
+     * @param feeds The extension feeds to include.
+     * @param onInstallFailed A callback that is called when an extension installation fails.
+     * @returns A promise that resolves to the new instance of the ExtensionManager.
+     */
+    static CreateAsync(namespace: string, serviceContainer: ServiceContainer, feeds: readonly IExtensionFeed[], onInstallFailed: (info: InstallFailedInfo) => void): Promise<ExtensionManager>;
+    /**
+     * Gets the names of the feeds that are included in the extension manager.
+     * @returns The names of the feeds.
+     */
+    get feedNames(): string[];
+    /**
+     * Queries the extension manager for extensions.
+     * @param filter The filter to apply to the query.
+     * @param feeds The feeds to include in the query.
+     * @param installedOnly Whether to only include installed extensions.
+     * @returns A promise that resolves to the extension query.
+     */
+    queryExtensionsAsync(filter?: string, feeds?: string[], installedOnly?: boolean): Promise<IExtensionQuery>;
+    /**
+     * Disposes the extension manager.
+     */
+    dispose(): void;
+    private _getInstalledExtensionStorageKey;
+    private _updateInstalledExtensionsStorage;
+    private _installAsync;
+    private _uninstallAsync;
+    private _enableAsync;
+    private _disableAsync;
+    private _addStateChangedHandler;
+    private _createExtension;
+    private _createInstalledExtension;
+}