babylonjs-node-render-graph-editor 8.12.1 → 8.13.1

package/babylon.nodeRenderGraphEditor.module.d.ts

@@ -2447,7 +2447,9 @@ export class Vector3LineComponent extends React.Component<IVector3LineComponentP
     updateStateX(value: number): void;
     updateStateY(value: number): void;
     updateStateZ(value: number): void;
-    onCopyClick(): void;
+    onCopyClick(): string;
+
+
 
 }
 export {};
@@ -2564,6 +2566,9 @@ interface ITextLineComponentProps {
 export class TextLineComponent extends React.Component<ITextLineComponentProps> {
     constructor(props: ITextLineComponentProps);
     onLink(): void;
+    copyFn(): (() => string) | undefined;
+
+
 
 
 }
@@ -2571,7 +2576,8 @@ export {};
 
 }
 declare module "babylonjs-node-render-graph-editor/lines/textInputLineComponent" {
-import * as React from "react";
+import { ReactNode, KeyboardEvent } from "react";
+import { Component } from "react";
 import { Observable } from "babylonjs/Misc/observable";
 import { PropertyChangedEvent } from "babylonjs-node-render-graph-editor/propertyChangedEvent";
 import { LockObject } from "babylonjs-node-render-graph-editor/tabs/propertyGrids/lockObject";
@@ -2596,14 +2602,14 @@ export interface ITextInputLineComponentProps {
     min?: number;
     max?: number;
     placeholder?: string;
-    unit?: React.ReactNode;
+    unit?: ReactNode;
     validator?: (value: string) => boolean;
     multilines?: boolean;
     throttlePropertyChangedNotification?: boolean;
     throttlePropertyChangedNotificationDelay?: number;
     disabled?: boolean;
 }
-export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
+export class TextInputLineComponent extends Component<ITextInputLineComponentProps, {
     value: string;
     dragging: boolean;
 }> {
@@ -2618,7 +2624,9 @@ export class TextInputLineComponent extends React.Component<ITextInputLineCompon
     getCurrentNumericValue(value: string): number;
     updateValue(value: string, valueToValidate?: string): void;
     incrementValue(amount: number): void;
-    onKeyDown(event: React.KeyboardEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+
+
 
 }
 
@@ -2675,6 +2683,8 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
     prepareDataToRead(value: number): number;
     onCopyClick(): void;
 
+
+
 }
 export {};
 
@@ -2739,7 +2749,9 @@ export class OptionsLine extends React.Component<IOptionsLineProps, {
     raiseOnPropertyChanged(newValue: number, previousValue: number): void;
     setValue(value: string | number): void;
     updateValue(valueString: string): void;
-    onCopyClick(): void;
+    onCopyClickStr(): string;
+    private _renderFluent;
+    private _renderOriginal;
 
 }
 
@@ -3100,6 +3112,8 @@ export class FileButtonLine extends React.Component<IFileButtonLineProps> {
     constructor(props: IFileButtonLineProps);
     onChange(evt: any): void;
 
+
+
 }
 export {};
 
@@ -3203,6 +3217,8 @@ export class ColorLine extends React.Component<IColorLineProps, IColorLineCompon
     private _toColor3;
     onCopyClick(): void;
 
+
+
 }
 export {};
 
@@ -3286,6 +3302,8 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
     onChange(): void;
     onCopyClick(): void;
 
+
+
 }
 
 }
@@ -3301,6 +3319,8 @@ export interface IButtonLineComponentProps {
 export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
     constructor(props: IButtonLineComponentProps);
 
+
+
 }
 
 }
@@ -3317,6 +3337,432 @@ export class BooleanLineComponent extends React.Component<IBooleanLineComponentP
 
 }
 
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/textarea" {
+
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+export type TextareaProps = BaseComponentProps<string> & {
+    placeholder?: string;
+};
+/**
+ * This is a texarea box that stops propagation of change/keydown events
+ * @param props
+ * @returns
+ */
+export const Textarea: FunctionComponent<any>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/syncedSlider" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+export type SyncedSliderProps = BaseComponentProps<number> & {
+    min?: number;
+    max?: number;
+    step?: number;
+};
+/**
+ * Component which synchronizes a slider and an input field, allowing the user to change a value using either control
+ * @param props
+ * @returns SyncedSlider component
+ */
+export const SyncedSliderInput: FunctionComponent<SyncedSliderProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/switch" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+export type SwitchProps = BaseComponentProps<boolean>;
+/**
+ * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools
+ * @param props
+ * @returns Switch component
+ */
+export const Switch: FunctionComponent<SwitchProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/spinButton" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+export type SpinButtonProps = BaseComponentProps<number>;
+export const SpinButton: FunctionComponent<SpinButtonProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/link" {
+
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/input" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+export type InputProps<T extends string | number> = BaseComponentProps<T> & {
+    step?: number;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+};
+/**
+ * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)
+ * @param props
+ * @returns
+ */
+export const Input: FunctionComponent<InputProps<string | number>>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/dropdown" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+export type AcceptedDropdownValue = string | number;
+export type DropdownOption = {
+    /**
+     * Defines the visible part of the option
+     */
+    label: string;
+    /**
+     * Defines the value part of the option
+     */
+    value: AcceptedDropdownValue;
+};
+export type DropdownProps = BaseComponentProps<AcceptedDropdownValue | undefined> & {
+    options: DropdownOption[];
+    includeUndefined?: boolean;
+};
+/**
+ * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if includeUndefined is set to true
+ * @param props
+ * @returns dropdown component
+ */
+export const Dropdown: FunctionComponent<DropdownProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/colorPicker" {
+import { FunctionComponent } from "react";
+import { Color3, Color4 } from "babylonjs/Maths/math.color";
+import { BaseComponentProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+export type ColorPickerProps<C extends Color3 | Color4> = {
+    isLinearMode?: boolean;
+} & BaseComponentProps<C>;
+export const ColorPickerPopup: FunctionComponent<ColorPickerProps<Color3 | Color4>>;
+type HsvKey = "h" | "s" | "v";
+export type InputHexProps = BaseComponentProps<Color3 | Color4> & {
+    label?: string;
+    linearHex?: boolean;
+    isLinearMode?: boolean;
+};
+/**
+ * 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
+ * @param props - The properties for the InputHexField component.
+ * @returns
+ */
+export const InputHexField: FunctionComponent<InputHexProps>;
+type InputHsvFieldProps = {
+    color: Color3 | Color4;
+    label: string;
+    hsvKey: HsvKey;
+    onChange: (color: Color3 | Color4) => void;
+    max: number;
+    scale?: number;
+};
+/**
+ * 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.
+ * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.
+ * @param props - The properties for the InputHsvField component.
+ */
+export const InputHsvField: FunctionComponent<InputHsvFieldProps>;
+export {};
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/checkbox" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+export type CheckboxProps = BaseComponentProps<boolean>;
+/**
+ * This is a primitive fluent checkbox that can both read and write checked state
+ * @param props
+ * @returns Checkbox component
+ */
+export const Checkbox: FunctionComponent<CheckboxProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/primitives/accordion" {
+import { FunctionComponent, PropsWithChildren } from "react";
+export type AccordionSectionProps = {
+    title: string;
+};
+export const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>>;
+export const Accordion: FunctionComponent<PropsWithChildren>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/vectorPropertyLine" {
+import { FunctionComponent } from "react";
+import { BaseComponentProps, PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { Vector4 } from "babylonjs/Maths/math.vector";
+import { Vector3 } from "babylonjs/Maths/math.vector";
+export type VectorPropertyLineProps<V extends Vector3 | Vector4> = BaseComponentProps<V> & PropertyLineProps & {
+    /**
+     * If passed, all sliders will use this for the min value
+     */
+    min?: number;
+    /**
+     * If passed, all sliders will use this for the max value
+     */
+    max?: number;
+    /**
+     * If passed, the UX will use the conversion functions to display/update values
+     */
+    valueConverter?: {
+        /**
+         * Will call from(val) before displaying in the UX
+         */
+        from: (val: number) => number;
+        /**
+         * Will call to(val) before calling onChange
+         */
+        to: (val: number) => number;
+    };
+};
+type RotationVectorPropertyLineProps = VectorPropertyLineProps<Vector3> & {
+    /**
+     * Display angles as degrees instead of radians
+     */
+    useDegrees?: boolean;
+};
+export const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps>;
+export const Vector3PropertyLine: FunctionComponent<VectorPropertyLineProps<Vector3>>;
+export const Vector4PropertyLine: FunctionComponent<VectorPropertyLineProps<Vector4>>;
+export {};
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/textPropertyLine" {
+import { PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+type TextProps = {
+    value: string;
+    tooltip?: string;
+};
+/**
+ * Wraps text in a property line
+ * @param props - PropertyLineProps and TextProps
+ * @returns property-line wrapped text
+ */
+export const TextPropertyLine: FunctionComponent<PropertyLineProps & TextProps>;
+export {};
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/syncedSliderLine" {
+import { PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { SyncedSliderProps } from "babylonjs-node-render-graph-editor/fluent/primitives/syncedSlider";
+import { FunctionComponent } from "react";
+type SyncedSliderLineProps = SyncedSliderProps & PropertyLineProps;
+/**
+ * Renders a simple wrapper around the SyncedSliderInput
+ * @param props
+ * @returns
+ */
+export const SyncedSliderLine: FunctionComponent<SyncedSliderLineProps>;
+export {};
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/switchPropertyLine" {
+import { PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+import { SwitchProps } from "babylonjs-node-render-graph-editor/fluent/primitives/switch";
+/**
+ * Wraps a switch in a property line
+ * @param props - The properties for the switch and property line
+ * @returns A React element representing the property line with a switch
+ */
+export const SwitchPropertyLine: FunctionComponent<PropertyLineProps & SwitchProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine" {
+import { FunctionComponent } from "react";
+export type PropertyLineProps = {
+    /**
+     * The name of the property to display in the property line.
+     */
+    label: string;
+    /**
+     * Optional description for the property, shown on hover of the info icon
+     */
+    description?: string;
+    /**
+     * Optional function returning a string to copy to clipboard.
+     */
+    onCopy?: () => string;
+    /**
+     * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.
+     */
+    expandedContent?: JSX.Element;
+    /**
+     * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or defalt 'docs' text
+     */
+    docLink?: string;
+};
+export const LineContainer: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type BaseComponentProps<T> = {
+    /**
+     * The value of the property to be displayed and modified.
+     */
+    value: T;
+    /**
+     * Callback function to handle changes to the value
+     */
+    onChange: (value: T) => void;
+    /**
+     * Optional flag to disable the component, preventing any interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Optional class name to apply custom styles to the component.
+     */
+    className?: string;
+};
+/**
+ * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
+ *
+ * @param props - The properties for the PropertyLine component.
+ * @returns A React element representing the property line.
+ *
+ */
+export const PropertyLine: import("react").ForwardRefExoticComponent<PropertyLineProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export const PlaceholderPropertyLine: FunctionComponent<BaseComponentProps<any> & PropertyLineProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/linkPropertyLine" {
+import { PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+type LinkProps = {
+    value: string;
+    tooltip?: string;
+    onLink?: () => void;
+    url?: string;
+};
+/**
+ * Wraps a link in a property line
+ * @param props - PropertyLineProps and LinkProps
+ * @returns property-line wrapped link
+ */
+export const LinkPropertyLine: FunctionComponent<PropertyLineProps & LinkProps>;
+export {};
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/inputPropertyLine" {
+import { PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+import { InputProps } from "babylonjs-node-render-graph-editor/fluent/primitives/input";
+export const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps>;
+export const FloatInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/hexLineComponent" {
+import { PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+import { InputHexProps } from "babylonjs-node-render-graph-editor/fluent/primitives/colorPicker";
+/**
+ * Wraps a hex input in a property line
+ * @param props - PropertyLineProps and InputHexProps
+ * @returns property-line wrapped input hex component
+ */
+export const HexPropertyLine: FunctionComponent<InputHexProps & PropertyLineProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/fluentToolWrapper" {
+import { PropsWithChildren, FunctionComponent } from "react";
+
+export type ToolHostProps = {
+    /**
+     * Allows host to pass in a theme
+     */
+    customTheme?: any;
+    /**
+     * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)
+     */
+    disableCopy?: boolean;
+};
+export const ToolContext: import("react").Context<{
+    readonly useFluent: boolean;
+    readonly disableCopy: boolean;
+}>;
+/**
+ * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component
+ * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy
+ * @param props
+ * @returns
+ */
+export const FluentToolWrapper: FunctionComponent<PropsWithChildren<ToolHostProps>>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/fileUploadLine" {
+import { FunctionComponent } from "react";
+import { ButtonLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/buttonLine";
+type FileUploadLineProps = Omit<ButtonLineProps, "onClick"> & {
+    onClick: (file: File) => void;
+    accept: string;
+};
+export const FileUploadLine: FunctionComponent<FileUploadLineProps>;
+export {};
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/dropdownPropertyLine" {
+import { DropdownProps } from "babylonjs-node-render-graph-editor/fluent/primitives/dropdown";
+import { PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+/**
+ * Wraps a dropdown in a property line
+ * @param props - PropertyLineProps and DropdownProps
+ * @returns property-line wrapped dropdown
+ */
+export const DropdownPropertyLine: FunctionComponent<PropertyLineProps & DropdownProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/colorPropertyLine" {
+import { FunctionComponent } from "react";
+import { PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { Color3 } from "babylonjs/Maths/math.color";
+import { Color4 } from "babylonjs/Maths/math.color";
+import { ColorPickerProps } from "babylonjs-node-render-graph-editor/fluent/primitives/colorPicker";
+export type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps;
+export const Color3PropertyLine: FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps>;
+export const Color4PropertyLine: FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/checkboxPropertyLine" {
+import { PropertyLineProps } from "babylonjs-node-render-graph-editor/fluent/hoc/propertyLine";
+import { FunctionComponent } from "react";
+import { CheckboxProps } from "babylonjs-node-render-graph-editor/fluent/primitives/checkbox";
+/**
+ * Wraps a checkbox in a property line
+ * @param props - PropertyLineProps and CheckboxProps
+ * @returns property-line wrapped checkbox
+ */
+export const CheckboxPropertyLine: FunctionComponent<PropertyLineProps & CheckboxProps>;
+
+}
+declare module "babylonjs-node-render-graph-editor/fluent/hoc/buttonLine" {
+import { FunctionComponent } from "react";
+export type ButtonLineProps = {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    icon?: string;
+    title?: string;
+};
+/**
+ * Wraps a button with a label in a line container
+ * @param props Button props plus a label
+ * @returns A button inside a line
+ */
+export const ButtonLine: FunctionComponent<ButtonLineProps>;
+
 }
 declare module "babylonjs-node-render-graph-editor/components/classNames" {
 export function ClassNames(names: any, styleObject: any): string;
@@ -6737,7 +7183,9 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         updateStateX(value: number): void;
         updateStateY(value: number): void;
         updateStateZ(value: number): void;
-        onCopyClick(): void;
+        onCopyClick(): string;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -6869,7 +7317,10 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
     export class TextLineComponent extends React.Component<ITextLineComponentProps> {
         constructor(props: ITextLineComponentProps);
         onLink(): void;
-        renderContent(): import("react/jsx-runtime").JSX.Element | null;
+        copyFn(): (() => string) | undefined;
+        renderContent(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element | null;
+        renderOriginal(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element;
+        renderFluent(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -6925,6 +7376,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         updateValue(value: string, valueToValidate?: string): void;
         incrementValue(amount: number): void;
         onKeyDown(event: React.KeyboardEvent): void;
+        renderFluent(value: string, placeholder: string, step: number): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(value: string, placeholder: string, step: number): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -6986,6 +7439,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         onInput(newValueString: any): void;
         prepareDataToRead(value: number): number;
         onCopyClick(): void;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -7055,7 +7510,9 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         raiseOnPropertyChanged(newValue: number, previousValue: number): void;
         setValue(value: string | number): void;
         updateValue(valueString: string): void;
-        onCopyClick(): void;
+        onCopyClickStr(): string;
+        private _renderFluent;
+        private _renderOriginal;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -7464,6 +7921,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         private _uploadInputRef;
         constructor(props: IFileButtonLineProps);
         onChange(evt: any): void;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -7579,6 +8038,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         private _convertToColor;
         private _toColor3;
         onCopyClick(): void;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -7667,6 +8128,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
         }): boolean;
         onChange(): void;
         onCopyClick(): void;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -7687,6 +8150,8 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
     }
     export class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {
         constructor(props: IButtonLineComponentProps);
+        renderFluent(): import("react/jsx-runtime").JSX.Element;
+        renderOriginal(): import("react/jsx-runtime").JSX.Element;
         render(): import("react/jsx-runtime").JSX.Element;
     }
 
@@ -7711,6 +8176,513 @@ declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
 
 
 
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type TextareaProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<string> & {
+        placeholder?: string;
+    };
+    /**
+     * This is a texarea box that stops propagation of change/keydown events
+     * @param props
+     * @returns
+     */
+    export var Textarea: React.FunctionComponent<any>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type SyncedSliderProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<number> & {
+        min?: number;
+        max?: number;
+        step?: number;
+    };
+    /**
+     * Component which synchronizes a slider and an input field, allowing the user to change a value using either control
+     * @param props
+     * @returns SyncedSlider component
+     */
+    export var SyncedSliderInput: React.FunctionComponent<SyncedSliderProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type SwitchProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<boolean>;
+    /**
+     * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools
+     * @param props
+     * @returns Switch component
+     */
+    export var Switch: React.FunctionComponent<SwitchProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type SpinButtonProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<number>;
+    export var SpinButton: React.FunctionComponent<SpinButtonProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+    
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type InputProps<T extends string | number> = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<T> & {
+        step?: number;
+        placeholder?: string;
+        min?: number;
+        max?: number;
+    };
+    /**
+     * This is an input text box that stops propagation of change events and sets its width based on the type of input (text or number)
+     * @param props
+     * @returns
+     */
+    export var Input: React.FunctionComponent<InputProps<string | number>>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type AcceptedDropdownValue = string | number;
+    export type DropdownOption = {
+        /**
+         * Defines the visible part of the option
+         */
+        label: string;
+        /**
+         * Defines the value part of the option
+         */
+        value: AcceptedDropdownValue;
+    };
+    export type DropdownProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<AcceptedDropdownValue | undefined> & {
+        options: DropdownOption[];
+        includeUndefined?: boolean;
+    };
+    /**
+     * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if includeUndefined is set to true
+     * @param props
+     * @returns dropdown component
+     */
+    export var Dropdown: React.FunctionComponent<DropdownProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type ColorPickerProps<C extends BABYLON.Color3 | BABYLON.Color4> = {
+        isLinearMode?: boolean;
+    } & BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<C>;
+    export var ColorPickerPopup: React.FunctionComponent<ColorPickerProps<BABYLON.Color3 | BABYLON.Color4>>;
+    type HsvKey = "h" | "s" | "v";
+    export type InputHexProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<BABYLON.Color3 | BABYLON.Color4> & {
+        label?: string;
+        linearHex?: boolean;
+        isLinearMode?: boolean;
+    };
+    /**
+     * 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 BABYLON.Color3/4 value and calls onChange
+     *
+     * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space
+     * @param props - The properties for the InputHexField component.
+     * @returns
+     */
+    export var InputHexField: React.FunctionComponent<InputHexProps>;
+    type InputHsvFieldProps = {
+        color: BABYLON.Color3 | BABYLON.Color4;
+        label: string;
+        hsvKey: HsvKey;
+        onChange: (color: BABYLON.Color3 | BABYLON.Color4) => void;
+        max: number;
+        scale?: number;
+    };
+    /**
+     * 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.
+     * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.
+     * @param props - The properties for the InputHsvField component.
+     */
+    export var InputHsvField: React.FunctionComponent<InputHsvFieldProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type CheckboxProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<boolean>;
+    /**
+     * This is a primitive fluent checkbox that can both read and write checked state
+     * @param props
+     * @returns Checkbox component
+     */
+    export var Checkbox: React.FunctionComponent<CheckboxProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type AccordionSectionProps = {
+        title: string;
+    };
+    export var AccordionSection: React.FunctionComponent<React.PropsWithChildren<AccordionSectionProps>>;
+    export var Accordion: React.FunctionComponent<React.PropsWithChildren>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type VectorPropertyLineProps<V extends BABYLON.Vector3 | BABYLON.Vector4> = BABYLON.NodeRenderGraphEditor.SharedUIComponents.BaseComponentProps<V> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & {
+        /**
+         * If passed, all sliders will use this for the min value
+         */
+        min?: number;
+        /**
+         * If passed, all sliders will use this for the max value
+         */
+        max?: number;
+        /**
+         * If passed, the UX will use the conversion functions to display/update values
+         */
+        valueConverter?: {
+            /**
+             * Will call from(val) before displaying in the UX
+             */
+            from: (val: number) => number;
+            /**
+             * Will call to(val) before calling onChange
+             */
+            to: (val: number) => number;
+        };
+    };
+    type RotationVectorPropertyLineProps = VectorPropertyLineProps<BABYLON.Vector3> & {
+        /**
+         * Display angles as degrees instead of radians
+         */
+        useDegrees?: boolean;
+    };
+    export var RotationVectorPropertyLine: React.FunctionComponent<RotationVectorPropertyLineProps>;
+    export var Vector3PropertyLine: React.FunctionComponent<VectorPropertyLineProps<BABYLON.Vector3>>;
+    export var Vector4PropertyLine: React.FunctionComponent<VectorPropertyLineProps<BABYLON.Vector4>>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        type TextProps = {
+        value: string;
+        tooltip?: string;
+    };
+    /**
+     * Wraps text in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and TextProps
+     * @returns property-line wrapped text
+     */
+    export var TextPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & TextProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        type SyncedSliderLineProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.SyncedSliderProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps;
+    /**
+     * Renders a simple wrapper around the SyncedSliderInput
+     * @param props
+     * @returns
+     */
+    export var SyncedSliderLine: React.FunctionComponent<SyncedSliderLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        /**
+     * Wraps a switch in a property line
+     * @param props - The properties for the switch and property line
+     * @returns A React element representing the property line with a switch
+     */
+    export var SwitchPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.SwitchProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type PropertyLineProps = {
+        /**
+         * The name of the property to display in the property line.
+         */
+        label: string;
+        /**
+         * Optional description for the property, shown on hover of the info icon
+         */
+        description?: string;
+        /**
+         * Optional function returning a string to copy to clipboard.
+         */
+        onCopy?: () => string;
+        /**
+         * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line.
+         */
+        expandedContent?: JSX.Element;
+        /**
+         * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or defalt 'docs' text
+         */
+        docLink?: string;
+    };
+    export var LineContainer: import("react").ForwardRefExoticComponent<{
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    export type BaseComponentProps<T> = {
+        /**
+         * The value of the property to be displayed and modified.
+         */
+        value: T;
+        /**
+         * Callback function to handle changes to the value
+         */
+        onChange: (value: T) => void;
+        /**
+         * Optional flag to disable the component, preventing any interaction.
+         */
+        disabled?: boolean;
+        /**
+         * Optional class name to apply custom styles to the component.
+         */
+        className?: string;
+    };
+    /**
+     * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
+     *
+     * @param props - The properties for the PropertyLine component.
+     * @returns A React element representing the property line.
+     *
+     */
+    export var PropertyLine: import("react").ForwardRefExoticComponent<PropertyLineProps & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    export var PlaceholderPropertyLine: React.FunctionComponent<BaseComponentProps<any> & PropertyLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        type LinkProps = {
+        value: string;
+        tooltip?: string;
+        onLink?: () => void;
+        url?: string;
+    };
+    /**
+     * Wraps a link in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and LinkProps
+     * @returns property-line wrapped link
+     */
+    export var LinkPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & LinkProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export var TextInputPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.InputProps<string> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+    export var FloatInputPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.InputProps<number> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        /**
+     * Wraps a hex input in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and BABYLON.NodeRenderGraphEditor.SharedUIComponents.InputHexProps
+     * @returns property-line wrapped input hex component
+     */
+    export var HexPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.InputHexProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type ToolHostProps = {
+        /**
+         * Allows host to pass in a theme
+         */
+        customTheme?: any;
+        /**
+         * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)
+         */
+        disableCopy?: boolean;
+    };
+    export var ToolContext: import("react").Context<{
+        readonly useFluent: boolean;
+        readonly disableCopy: boolean;
+    }>;
+    /**
+     * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component
+     * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy
+     * @param props
+     * @returns
+     */
+    export var FluentToolWrapper: React.FunctionComponent<React.PropsWithChildren<ToolHostProps>>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        type FileUploadLineProps = Omit<BABYLON.NodeRenderGraphEditor.SharedUIComponents.ButtonLineProps, "onClick"> & {
+        onClick: (file: File) => void;
+        accept: string;
+    };
+    export var FileUploadLine: React.FunctionComponent<FileUploadLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        /**
+     * Wraps a dropdown in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and BABYLON.NodeRenderGraphEditor.SharedUIComponents.DropdownProps
+     * @returns property-line wrapped dropdown
+     */
+    export var DropdownPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.DropdownProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type ColorPropertyLineProps = BABYLON.NodeRenderGraphEditor.SharedUIComponents.ColorPickerProps<BABYLON.Color3 | BABYLON.Color4> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps;
+    export var Color3PropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.ColorPickerProps<BABYLON.Color3> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+    export var Color4PropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.ColorPickerProps<BABYLON.Color4> & BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        /**
+     * Wraps a checkbox in a property line
+     * @param props - BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps and BABYLON.NodeRenderGraphEditor.SharedUIComponents.CheckboxProps
+     * @returns property-line wrapped checkbox
+     */
+    export var CheckboxPropertyLine: React.FunctionComponent<BABYLON.NodeRenderGraphEditor.SharedUIComponents.PropertyLineProps & BABYLON.NodeRenderGraphEditor.SharedUIComponents.CheckboxProps>;
+
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor {
+
+
+}
+declare module BABYLON.NodeRenderGraphEditor.SharedUIComponents {
+        export type ButtonLineProps = {
+        label: string;
+        onClick: () => void;
+        disabled?: boolean;
+        icon?: string;
+        title?: string;
+    };
+    /**
+     * Wraps a button with a label in a line container
+     * @param props Button props plus a label
+     * @returns A button inside a line
+     */
+    export var ButtonLine: React.FunctionComponent<ButtonLineProps>;
+
+
+
 }
 declare module BABYLON.NodeRenderGraphEditor {