npm - @babylonjs/inspector - Versions diffs - 8.54.3 → 8.55.0 - Mend

@babylonjs/inspector 8.54.3 → 8.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/lib/{extensionsListService--XzVqzeM.js → extensionsListService-DnOKIWRz.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import { AppsAddInRegular, DismissRegular, LinkRegular, BranchForkRegular, BugRe
 import { Fade } from '@fluentui/react-motion-components-preview';
 import { useState, useEffect, memo, useMemo, useCallback } from 'react';
 import { Logger } from '@babylonjs/core/Misc/logger.js';
-import { b as ShellServiceIdentity, i as useExtensionManager, j as Link } from './index-CIc0CbG8.js';
+import { b as ShellServiceIdentity, i as useExtensionManager, j as Link } from './index-jSClUjQ1.js';
 import '@babylonjs/core/Maths/math.color.js';
 import '@babylonjs/core/Maths/math.vector.js';
 import '@babylonjs/core/Misc/observable.js';
@@ -366,4 +366,4 @@ const ExtensionListServiceDefinition = {
 };
 export { ExtensionListServiceDefinition };
-//# sourceMappingURL=extensionsListService--XzVqzeM.js.map
+//# sourceMappingURL=extensionsListService-DnOKIWRz.js.map

package/lib/{extensionsListService--XzVqzeM.js.map → extensionsListService-DnOKIWRz.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"extensionsListService--XzVqzeM.js","sources":["../../../../../../../../dev/inspector-v2/src/services/extensionsListService.tsx"],"sourcesContent":["import type { SelectTabData, SelectTabEvent } from \"@fluentui/react-components\";\r\nimport type { TriggerProps } from \"@fluentui/react-utilities\";\r\nimport type { FunctionComponent } 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 } from \"./shellService\";\r\n\r\nimport {\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 {\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\nimport { memo, useCallback, useEffect, useMemo, useState } from \"react\";\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\nimport { ShellServiceIdentity } from \"./shellService\";\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 usePeopleMetadata(people?: readonly (string \| PersonMetadata \| undefined)[]) {\r\n const definedPeople = useMemo(() => (people ? people.filter((person): person is string \| PersonMetadata => !!person) : []), [people]);\r\n\r\n //const [peopleMetadataEx, setPeopleMetadataEx] = useState<(PersonMetadata & { avatarUrl?: string })[]>(definedPeople.map(AsPersonMetadata));\r\n const [peopleMetadataEx] = useState(definedPeople.map(AsPersonMetadata));\r\n\r\n // TODO: Would be nice if we could pull author/contributor profile pictures from the forum, but need to see if this is ok and whether we want to adjust CORS to allow it.\r\n // useEffect(() => {\r\n // definedPeople.forEach(async (person, index) => {\r\n // const personMetadata = AsPersonMetadata(person);\r\n // if (personMetadata.forumUserName) {\r\n // try {\r\n // const json = await (await fetch(`https://forum.babylonjs.com/u/${personMetadata.forumUserName}.json`)).json();\r\n // const avatarRelativeUrl = json.user?.avatar_template?.replace(\"{size}\", \"96\");\r\n // if (avatarRelativeUrl) {\r\n // const avatarUrl = `https://forum.babylonjs.com${avatarRelativeUrl}`;\r\n // setPeopleMetadataEx((prev) => {\r\n // const newMetadata = [...prev];\r\n // newMetadata[index] = { ...personMetadata, avatarUrl };\r\n // return newMetadata;\r\n // });\r\n // }\r\n // } catch {\r\n // // Ignore, non-fatal\r\n // }\r\n // }\r\n // });\r\n // }, [definedPeople]);\r\n\r\n return peopleMetadataEx.filter(Boolean);\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} />\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 name={author.name} secondaryText=\"Author\" style={{ cursor: hasAuthorDetails ? \"pointer\" : \"default\" }} />\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} />\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"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"extensionsListService-DnOKIWRz.js","sources":["../../../../../../../../dev/inspector-v2/src/services/extensionsListService.tsx"],"sourcesContent":["import type { SelectTabData, SelectTabEvent } from \"@fluentui/react-components\";\r\nimport type { TriggerProps } from \"@fluentui/react-utilities\";\r\nimport type { FunctionComponent } 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 } from \"./shellService\";\r\n\r\nimport {\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 {\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\nimport { memo, useCallback, useEffect, useMemo, useState } from \"react\";\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\nimport { ShellServiceIdentity } from \"./shellService\";\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 usePeopleMetadata(people?: readonly (string \| PersonMetadata \| undefined)[]) {\r\n const definedPeople = useMemo(() => (people ? people.filter((person): person is string \| PersonMetadata => !!person) : []), [people]);\r\n\r\n //const [peopleMetadataEx, setPeopleMetadataEx] = useState<(PersonMetadata & { avatarUrl?: string })[]>(definedPeople.map(AsPersonMetadata));\r\n const [peopleMetadataEx] = useState(definedPeople.map(AsPersonMetadata));\r\n\r\n // TODO: Would be nice if we could pull author/contributor profile pictures from the forum, but need to see if this is ok and whether we want to adjust CORS to allow it.\r\n // useEffect(() => {\r\n // definedPeople.forEach(async (person, index) => {\r\n // const personMetadata = AsPersonMetadata(person);\r\n // if (personMetadata.forumUserName) {\r\n // try {\r\n // const json = await (await fetch(`https://forum.babylonjs.com/u/${personMetadata.forumUserName}.json`)).json();\r\n // const avatarRelativeUrl = json.user?.avatar_template?.replace(\"{size}\", \"96\");\r\n // if (avatarRelativeUrl) {\r\n // const avatarUrl = `https://forum.babylonjs.com${avatarRelativeUrl}`;\r\n // setPeopleMetadataEx((prev) => {\r\n // const newMetadata = [...prev];\r\n // newMetadata[index] = { ...personMetadata, avatarUrl };\r\n // return newMetadata;\r\n // });\r\n // }\r\n // } catch {\r\n // // Ignore, non-fatal\r\n // }\r\n // }\r\n // });\r\n // }, [definedPeople]);\r\n\r\n return peopleMetadataEx.filter(Boolean);\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} />\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 name={author.name} secondaryText=\"Author\" style={{ cursor: hasAuthorDetails ? \"pointer\" : \"default\" }} />\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} />\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"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/lib/{index-CIc0CbG8.js → index-jSClUjQ1.js} RENAMED Viewed

@@ -881,7 +881,7 @@ function GenerateCopyString(value) {
             if (className === "Quaternion") {
                 return `new ${babylonNamespace}Quaternion(${obj.x}, ${obj.y}, ${obj.z}, ${obj.w})`;
             }
-            // Color3, Color4
+            // Color3, Color4 — HEX is a direct 0-1→0-255 conversion of the stored values (property-space)
             if (className === "Color3") {
                 const hexString = ColorToHex(obj.r, obj.g, obj.b, 1);
                 return `new ${babylonNamespace}Color3(${obj.r}, ${obj.g}, ${obj.b}) // (HEX: ${hexString})`;
@@ -912,23 +912,20 @@ function GenerateCopyString(value) {
     return String(value);
 }
 /**
- * Converts linear color values (0-1) to a hex string with alpha.
- * @param r - Red component (0-1, linear)
- * @param g - Green component (0-1, linear)
- * @param b - Blue component (0-1, linear)
+ * Converts color component values (0-1) directly to a hex string.
+ * No gamma correction is applied — the hex represents the property's stored color space.
+ * @param r - Red component (0-1)
+ * @param g - Green component (0-1)
+ * @param b - Blue component (0-1)
  * @param a - Alpha component (0-1)
  * @returns Hex string in format #RRGGBBAA
  */
 function ColorToHex(r, g, b, a) {
-    // Convert linear to sRGB and then to 0-255 range
-    const toSRGB = (c) => Math.round(Math.min(255, Math.max(0, Math.pow(c, 1 / 2.2) * 255)));
-    const rHex = toSRGB(r).toString(16).padStart(2, "0").toUpperCase();
-    const gHex = toSRGB(g).toString(16).padStart(2, "0").toUpperCase();
-    const bHex = toSRGB(b).toString(16).padStart(2, "0").toUpperCase();
-    const aHex = Math.round(Math.min(255, Math.max(0, a * 255)))
-        .toString(16)
-        .padStart(2, "0")
-        .toUpperCase();
+    const toByte = (c) => Math.round(Math.min(255, Math.max(0, c * 255)));
+    const rHex = toByte(r).toString(16).padStart(2, "0").toUpperCase();
+    const gHex = toByte(g).toString(16).padStart(2, "0").toUpperCase();
+    const bHex = toByte(b).toString(16).padStart(2, "0").toUpperCase();
+    const aHex = toByte(a).toString(16).padStart(2, "0").toUpperCase();
     return `#${rHex}${gHex}${bHex}${aHex}`;
 }
@@ -6372,7 +6369,7 @@ const SpinButton = forwardRef((props, ref) => {
         HandleOnBlur(event);
     }, [commitEditText, isDragging]);
     const contentBefore = !props.disableDragButton && !props.disabled && (isHovered || isDragging) && !isInputInvalid ? (jsx(ArrowBidirectionalUpDownFilled, { className: classes.icon, style: { cursor: isDragging ? "ns-resize" : "pointer" }, onPointerDown: handleIconPointerDown, onPointerMove: handleIconPointerMove, onPointerUp: handleIconPointerUp })) : undefined;
-    const input = (jsx("div", { className: props.infoLabel ? undefined : props.className, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
+    const input = (jsx("div", { className: props.infoLabel ? undefined : props.className, onPointerEnter: (e) => e.pointerType === "mouse" && setIsHovered(true), onPointerLeave: () => {
             if (!isDragging) {
                 setIsHovered(false);
             }
@@ -6393,8 +6390,10 @@ const TextInput = (props) => {
         }
     }, [props.value]);
     const validateValue = (val) => {
-        const failsValidator = props.validator && !props.validator(val);
-        return !failsValidator;
+        if (!props.validator) {
+            return true;
+        }
+        return props.validator(val);
     };
     const tryCommitValue = (currVal) => {
         // Only commit if valid and different from last committed value
@@ -6416,6 +6415,13 @@ const TextInput = (props) => {
             tryCommitValue(event.currentTarget.value);
         }
     };
+    const handleKeyDown = (event) => {
+        HandleKeyDown(event);
+        // When validateOnlyOnBlur is set, also commit on Enter for better UX
+        if (event.key === "Enter" && props.validateOnlyOnBlur) {
+            tryCommitValue(event.currentTarget.value);
+        }
+    };
     const handleBlur = (event) => {
         HandleOnBlur(event);
         if (props.validateOnlyOnBlur) {
@@ -6424,7 +6430,7 @@ const TextInput = (props) => {
     };
     const mergedClassName = mergeClasses(classes.inputFill, !validateValue(value) ? classes.invalid : "");
     const id = useId("input-button");
-    return (jsxs("div", { className: mergeClasses(classes.container, props.className), children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: handleBlur, className: mergedClassName })] }));
+    return (jsxs("div", { className: mergeClasses(classes.container, props.className), children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onBlur: handleBlur, className: mergedClassName })] }));
 };
 const useDropdownStyles = makeStyles({
@@ -6562,68 +6568,123 @@ const ColorPickerPopup = forwardRef((props, ref) => {
     useEffect(() => {
         setColor(value); // Ensures the trigger color updates when props.value changes
     }, [value]);
+    const isPropertyLinear = isLinearMode ?? false;
+    /** Color in gamma space — used for visual elements (picker, preview, trigger) */
+    const gammaColor = useMemo(() => (isPropertyLinear ? color.toGammaSpace() : color), [color, isPropertyLinear]);
+    /** Color in the user-selected display space — used for numeric inputs (RGB, HSV, Hex) */
+    const displayColor = useMemo(() => {
+        if (isLinear === isPropertyLinear) {
+            return color;
+        }
+        return isLinear ? color.toLinearSpace() : color.toGammaSpace();
+    }, [color, isLinear, isPropertyLinear]);
     const handleColorPickerChange = (_, data) => {
-        let color = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
+        // The visual picker always operates in gamma space, convert back to property space
+        let gammaResult = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
         if (value instanceof Color4) {
-            color = Color4.FromColor3(color, data.color.a ?? 1);
+            gammaResult = Color4.FromColor3(gammaResult, data.color.a ?? 1);
         }
-        handleChange(color);
+        handleChange(isPropertyLinear ? gammaResult.toLinearSpace() : gammaResult);
     };
     const handleChange = (newColor) => {
         setColor(newColor);
         onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
     };
-    return (jsx(Popover, { trigger: jsx(ColorSwatch, { className: classes.trigger, ref: ref, ...rest, borderColor: tokens.colorNeutralShadowKeyDarker, size: size === "small" ? "extra-small" : "small", shape: "rounded", color: color.toHexString(), value: color.toHexString().slice(1) }), children: jsxs("div", { className: classes.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+    const handleDisplayChange = (newDisplayColor) => {
+        const propertyColor = isLinear === isPropertyLinear ? newDisplayColor : isLinear ? newDisplayColor.toGammaSpace() : newDisplayColor.toLinearSpace();
+        handleChange(propertyColor);
+    };
+    return (jsx(Popover, { trigger: jsx(ColorSwatch, { className: classes.trigger, ref: ref, ...rest, borderColor: tokens.colorNeutralShadowKeyDarker, size: size === "small" ? "extra-small" : "small", shape: "rounded", color: gammaColor.toHexString(), value: gammaColor.toHexString().slice(1) }), children: jsxs("div", { className: classes.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(gammaColor), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: gammaColor.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
                                 label: "Color Space",
-                                info: jsx(Body1, { children: "Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping" }),
+                                info: (jsxs(Body1, { children: ["Choose which color space to display numeric values in. This property stores its color in", " ", jsx(Body1Strong, { children: isPropertyLinear ? "linear" : "gamma" }), " space. The visual picker always shows gamma (screen-accurate) colors."] })),
                             }, options: [
                                 { label: "Gamma", value: 0 },
                                 { label: "Linear", value: 1 },
-                            ], disabled: true, value: isLinear ? 1 : 0, onChange: (val) => setIsLinear(val === 1) }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+                            ], value: isLinear ? 1 : 0, onChange: (val) => setIsLinear(val === 1) }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
                                 label: "Data Type",
-                                info: jsx(Body1, { children: "We will introduce this functionality soon!" }),
+                                info: (jsxs(Body1, { children: [jsx(Body1Strong, { children: "Int" }), " displays RGB channels as integers in the 0\u2013255 range. ", jsx(Body1Strong, { children: "Float" }), " displays them as decimals in the 0\u20131 range. This is display-only and does not affect the stored color."] })),
                             }, options: [
                                 { label: "Int", value: 0 },
                                 { label: "Float", value: 1 },
-                            ], disabled: true, value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputRgbField, { title: "Red", value: color, rgbKey: "r", onChange: handleChange }), jsx(InputRgbField, { title: "Green", value: color, rgbKey: "g", onChange: handleChange }), jsx(InputRgbField, { title: "Blue", value: color, rgbKey: "b", onChange: handleChange }), jsx(InputAlphaField, { color: color, onChange: handleChange })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputHsvField, { title: "Hue", value: color, hsvKey: "h", max: 360, onChange: handleChange }), jsx(InputHsvField, { title: "Saturation", value: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), jsx(InputHsvField, { title: "Value", value: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] }), jsx("div", { className: classes.inputRow, children: jsx(InputHexField, { title: "Hexadecimal", linearHex: isLinear, isLinearMode: isLinear, value: color, onChange: handleChange }) })] }) }));
+                            ], value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputRgbField, { title: "Red", value: displayColor, rgbKey: "r", isFloat: isFloat, onChange: handleDisplayChange }), jsx(InputRgbField, { title: "Green", value: displayColor, rgbKey: "g", isFloat: isFloat, onChange: handleDisplayChange }), jsx(InputRgbField, { title: "Blue", value: displayColor, rgbKey: "b", isFloat: isFloat, onChange: handleDisplayChange }), jsx(InputAlphaField, { color: color, onChange: handleChange })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputHsvField, { title: "Hue", value: displayColor, hsvKey: "h", isFloat: isFloat, onChange: handleDisplayChange }), jsx(InputHsvField, { title: "Saturation", value: displayColor, hsvKey: "s", isFloat: isFloat, onChange: handleDisplayChange }), jsx(InputHsvField, { title: "Value", value: displayColor, hsvKey: "v", isFloat: isFloat, onChange: handleDisplayChange })] }), jsx("div", { className: classes.inputRow, children: jsx(InputHexField, { title: "Hexadecimal", value: displayColor, isLinear: isLinear, isPropertyLinear: isPropertyLinear, onChange: handleDisplayChange }) })] }) }));
 });
 /**
- * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space
- * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange
- *
- * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space
+ * Converts a hex string to the same Color type as the original.
+ * Supports "#RGB", "#RRGGBB", and "#RRGGBBAA" formats.
+ * For Color4, honors alpha from "#RRGGBBAA" input or preserves the original alpha otherwise.
+ * @param hex - The hex string to convert, in one of the supported formats.
+ * @param original - The original color, used to determine whether to return a Color3 or Color4 and to preserve alpha if not specified in hex.
+ * @returns A new Color3 or Color4 instance representing the hex color
+ */
+function colorFromHex(hex, original) {
+    const digits = hex.startsWith("#") ? hex.slice(1) : hex;
+    // Normalize short hex (RGB => RRGGBB)
+    if (digits.length === 3) {
+        hex = `#${digits[0]}${digits[0]}${digits[1]}${digits[1]}${digits[2]}${digits[2]}`;
+    }
+    // 8 hex digits = RRGGBBAA — use Color4.FromHexString which natively handles this
+    if (digits.length === 8) {
+        if (original instanceof Color4) {
+            return Color4.FromHexString(hex);
+        }
+        return Color3.FromHexString(hex.slice(0, 7));
+    }
+    // 6 hex digits = RRGGBB (or normalized from 3)
+    if (original instanceof Color4) {
+        return Color4.FromColor3(Color3.FromHexString(hex), original.a);
+    }
+    return Color3.FromHexString(hex);
+}
+/**
+ * Component which displays the passed in color's HEX value in the currently selected color space.
+ * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange.
  * @param props - The properties for the InputHexField component.
  * @returns
  */
 const InputHexField = (props) => {
     const classes = useColorPickerStyles();
-    const { title, value, onChange, linearHex, isLinearMode } = props;
-    return (jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: classes.inputField, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: ValidateColorHex, onChange: (val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val))), infoLabel: title
+    const { title, value, onChange, isLinear, isPropertyLinear } = props;
+    const displayMismatchesProperty = (isLinear ?? false) !== (isPropertyLinear ?? false);
+    const displaySpace = isLinear ? "linear" : "gamma";
+    const propertySpace = isPropertyLinear ? "linear" : "gamma";
+    const isColor4 = value instanceof Color4;
+    const colorClass = isColor4 ? "Color4" : "Color3";
+    return (jsx(TextInput, { className: classes.inputField, value: value.toHexString(), validator: ValidateColorHex, validateOnlyOnBlur: true, onChange: (val) => onChange(colorFromHex(val, value)), infoLabel: title
             ? {
                 label: title,
-                // If not representing a linearHex, no info is needed.
-                info: !props.linearHex ? undefined : !isLinearMode ? ( // If representing a linear hex but we are in gammaMode, simple message explaining why linearHex is disabled
-                jsx(Fragment, { children: " This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view " })) : (
-                // If representing a linear hex and we are in linearMode, give information about how to use these hex values
-                jsxs(Fragment, { children: ["This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma space so that the color chosen here will match the color seen in your entity.", jsx("br", {}), "If you want to copy/paste the HEX into your code, you can either use", jsx(Body1Strong, { children: "Color3.FromHexString(LINEAR_HEX)" }), jsx("br", {}), "or", jsx("br", {}), jsx(Body1Strong, { children: "Color3.FromHexString(GAMMA_HEX).toLinearSpace()" }), jsx("br", {}), jsx("br", {}), jsx(Link, { url: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", value: "Read more in our docs!" })] })),
+                info: (jsxs(Body1, { children: ["This hex value is in ", jsx(Body1Strong, { children: displaySpace }), " space", displayMismatchesProperty ? (jsxs(Body1, { children: [", but the property stores its color in ", jsx(Body1Strong, { children: propertySpace }), " space.", jsx("br", {}), jsx("br", {}), "The color picker converts automatically, but if you copy this hex into code you will need to convert it:", jsx("br", {}), jsxs(Body1Strong, { children: [colorClass, ".FromHexString(\"", value.toHexString(), "\").", isLinear ? "toGammaSpace()" : "toLinearSpace()"] })] })) : (jsxs(Body1, { children: [", which matches the property's stored color space.", jsx("br", {}), jsx("br", {}), "To copy this hex into code, use", jsx("br", {}), jsxs(Body1Strong, { children: [colorClass, ".FromHexString(\"", value.toHexString(), "\")"] })] })), jsx("br", {}), jsx("br", {}), jsx(Link, { url: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", value: "Read more in our docs!" })] })),
             }
             : undefined }));
 };
 const InputRgbField = (props) => {
-    const { value, onChange, title, rgbKey } = props;
+    const { value, onChange, title, rgbKey, isFloat } = props;
     const classes = useColorPickerStyles();
     const handleChange = useCallback((val) => {
         const newColor = value.clone();
-        newColor[rgbKey] = val / 255.0; // Convert to 0-1 range
+        newColor[rgbKey] = isFloat ? val : val / 255.0;
         onChange(newColor);
-    }, [value, onChange, rgbKey]);
-    return (jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, className: classes.inputField, min: 0, max: 255, value: Math.round(value[rgbKey] * 255), forceInt: true, onChange: handleChange }));
+    }, [value, onChange, rgbKey, isFloat]);
+    return (jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, className: classes.inputField, min: 0, max: isFloat ? 1 : 255, value: isFloat ? value[rgbKey] : Math.round(value[rgbKey] * 255), step: isFloat ? 0.01 : 1, forceInt: !isFloat, precision: isFloat ? 4 : undefined, onChange: handleChange }, `${rgbKey}-${isFloat ? "float" : "int"}`));
 };
 function rgbaToHsv(color) {
     const c = new Color3(color.r, color.g, color.b);
     const hsv = c.toHSV();
     return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };
 }
+// Internal HSV ranges: H ∈ [0,360], S ∈ [0,1], V ∈ [0,1]
+// Int mode display:   H → 0-360, S → 0-100, V → 0-100
+// Float mode display: H → 0-1,   S → 0-1,   V → 0-1
+function getHsvDisplayParams(hsvKey, isFloat) {
+    if (isFloat) {
+        // All channels displayed as 0-1
+        const internalMax = hsvKey === "h" ? 360 : 1;
+        return { max: 1, toDisplay: (v) => v / internalMax, toInternal: (v) => v * internalMax, step: 0.01, forceInt: false, precision: 4 };
+    }
+    // Int mode
+    const scale = hsvKey === "h" ? 1 : 100;
+    const max = hsvKey === "h" ? 360 : 100;
+    return { max, toDisplay: (v) => Math.round(v * scale), toInternal: (v) => v / scale, step: 1, forceInt: true, precision: undefined };
+}
 /**
  * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.
  * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.
@@ -6631,19 +6692,19 @@ function rgbaToHsv(color) {
  * @param props - The properties for the InputHsvField component.
  */
 const InputHsvField = (props) => {
-    const { value, title, hsvKey, max, onChange, scale = 1 } = props;
+    const { value, title, hsvKey, isFloat, onChange } = props;
     const classes = useColorPickerStyles();
+    const { max, toDisplay, toInternal, step, forceInt, precision } = getHsvDisplayParams(hsvKey, isFloat);
     const handleChange = useCallback((val) => {
-        // Convert current color to HSV, update the new hsv value, then call onChange prop
         const hsv = rgbaToHsv(value);
-        hsv[hsvKey] = val / scale;
+        hsv[hsvKey] = toInternal(val);
         let newColor = Color3.FromHSV(hsv.h, hsv.s, hsv.v);
         if (value instanceof Color4) {
             newColor = Color4.FromColor3(newColor, value.a ?? 1);
         }
         props.onChange(newColor);
-    }, [value, onChange, hsvKey, scale]);
-    return (jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, className: classes.inputField, min: 0, max: max, value: Math.round(rgbaToHsv(value)[hsvKey] * scale), forceInt: true, onChange: handleChange }));
+    }, [value, onChange, hsvKey, toInternal]);
+    return (jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, className: classes.inputField, min: 0, max: max, value: toDisplay(rgbaToHsv(value)[hsvKey]), step: step, forceInt: forceInt, precision: precision, onChange: handleChange }, `${hsvKey}-${isFloat ? "float" : "int"}`));
 };
 /**
  * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).
@@ -6660,15 +6721,15 @@ const InputAlphaField = (props) => {
         if (color instanceof Color4) {
             const newColor = color.clone();
             newColor.a = value;
-            return newColor;
+            onChange(newColor);
         }
         else {
-            return Color4.FromColor3(color, value);
+            onChange(Color4.FromColor3(color, value));
         }
-    }, [onChange]);
+    }, [color, onChange]);
     return (jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.inputField, value: color instanceof Color3 ? 1 : color.a, step: 0.01, onChange: handleChange, infoLabel: {
             label: "Alpha",
-            info: color instanceof Color3 ? (jsx(Fragment, { children: "Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the entity's alpha property directly, either in code via entity.alpha OR via inspector's transparency section." })) : undefined,
+            info: color instanceof Color3 ? (jsx(Body1, { children: "Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the property's alpha property directly, either in code via property.alpha OR via inspector's transparency section." })) : undefined,
         } }));
 };
@@ -7797,7 +7858,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-D-cyDKNQ.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-C2KCEQS-.js'),
     },
     {
         name: "Reflector",
@@ -7805,7 +7866,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-DNf_o1rS.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-D1aC0qmT.js'),
     },
 ]);
@@ -8541,7 +8602,7 @@ function MakeModularTool(options) {
                 }
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
-                    const { ExtensionListServiceDefinition } = await import('./extensionsListService--XzVqzeM.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DnOKIWRz.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -22859,4 +22920,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 export { HexPropertyLine as $, Accordion as A, Button as B, CheckboxPropertyLine as C, ColorStepGradientComponent as D, ComboBox as E, ComboBoxPropertyLine as F, ConstructorFactory as G, ConvertOptions as H, DebugServiceIdentity as I, DetachDebugLayer as J, DraggableLine as K, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, Dropdown as O, Popover as P, EntitySelector as Q, ErrorBoundary as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, ExtensibleAccordion as U, Vector3PropertyLine as V, FactorGradientComponent as W, FactorGradientList as X, FileUploadLine as Y, GetPropertyDescriptor as Z, GizmoServiceIdentity as _, useProperty as a, Vector2PropertyLine as a$, InfoLabel as a0, InputHexField as a1, InputHsvField as a2, Inspector as a3, InterceptFunction as a4, InterceptProperty as a5, IsPropertyReadonly as a6, LineContainer as a7, LinkPropertyLine as a8, LinkToEntityPropertyLine as a9, SettingsStoreIdentity as aA, ShowInspector as aB, SidePaneContainer as aC, SkeletonSelector as aD, Slider as aE, SpinButton as aF, StatsServiceIdentity as aG, StringDropdown as aH, StringDropdownPropertyLine as aI, StringifiedPropertyLine as aJ, Switch as aK, SwitchPropertyLine as aL, SyncedSliderInput as aM, SyncedSliderPropertyLine as aN, TeachingMoment as aO, TextAreaPropertyLine as aP, TextInput as aQ, TextPropertyLine as aR, Textarea as aS, TextureSelector as aT, TextureUpload as aU, Theme as aV, ThemeServiceIdentity as aW, ToastProvider as aX, ToggleButton as aY, Tooltip as aZ, UploadButton as a_, List as aa, MakeDialogTeachingMoment as ab, MakeLazyComponent as ac, MakePopoverTeachingMoment as ad, MakePropertyHook as ae, MakeTeachingMoment as af, MaterialSelector as ag, NodeSelector as ah, NumberDropdown as ai, NumberDropdownPropertyLine as aj, ObservableCollection as ak, Pane as al, PlaceholderPropertyLine as am, PositionedPopover as an, PropertiesServiceIdentity as ao, Property as ap, PropertyContext as aq, PropertyLine as ar, QuaternionPropertyLine as as, RotationVectorPropertyLine as at, SceneExplorerServiceIdentity as au, SearchBar as av, SearchBox as aw, SelectionServiceDefinition as ax, SettingsServiceIdentity as ay, SettingsStore as az, ShellServiceIdentity as b, Vector4PropertyLine as b0, WatcherServiceIdentity as b1, useAngleConverters as b2, useAsyncResource as b3, useColor3Property as b4, useColor4Property as b5, useEventListener as b6, useEventfulState as b7, useInterceptObservable as b8, useKeyListener as b9, useKeyState as ba, useObservableCollection as bb, useOrderedObservableCollection as bc, usePollingObservable as bd, usePropertyChangedNotifier as be, useQuaternionProperty as bf, useResource as bg, useSetting as bh, useTheme as bi, useThemeMode as bj, useVector3Property as bk, SceneContextIdentity as c, SelectionServiceIdentity as d, useObservableState as e, AccordionSection as f, ButtonLine as g, ToolsServiceIdentity as h, useExtensionManager as i, Link as j, AccordionSectionItem as k, AttachDebugLayer as l, BooleanBadgePropertyLine as m, BoundProperty as n, BuiltInsExtensionFeed as o, Checkbox as p, ChildWindow as q, Collapse as r, Color3GradientComponent as s, Color3GradientList as t, useToast as u, Color3PropertyLine as v, Color4GradientComponent as w, Color4GradientList as x, Color4PropertyLine as y, ColorPickerPopup as z };
-//# sourceMappingURL=index-CIc0CbG8.js.map
+//# sourceMappingURL=index-jSClUjQ1.js.map