xmlui 0.9.19 → 0.9.21

package/dist/{lint-Cd70ckJ6.mjs → lint-EcgF-9Wr.mjs}

@@ -105,28 +105,6 @@ const iconPositionMd = [
     description: "The icon will appear at the end (right side when the left-to-right direction is set)"
   }
 ];
-const statusColorMd = [
-  { value: "primary", description: "Primary theme color, no default icon" },
-  { value: "secondary", description: "Secondary theme color, no default icon" },
-  { value: "success", description: 'Success theme color, "success" icon' },
-  { value: "danger", description: 'Warning theme color, "warning" icon' },
-  { value: "warning", description: 'Danger theme color, "danger" icon' },
-  { value: "info", description: 'Info theme color, "info" icon' },
-  { value: "light", description: "Light theme color, no default icon" },
-  { value: "dark", description: "Dark theme color, no default icon" }
-];
-const placementMd = [
-  {
-    value: "start",
-    description: "The left side of the window (left-to-right) or the right side of the window (right-to-left)"
-  },
-  {
-    value: "end",
-    description: "The right side of the window (left-to-right) or the left side of the window (right-to-left)"
-  },
-  { value: "top", description: "The top of the window" },
-  { value: "bottom", description: "The bottom of the window" }
-];
 const labelPositionMd = [
   {
     value: "start",
@@ -6265,30 +6243,28 @@ export {
   buttonVariantNames as a4,
   nodeToComponentDef as a5,
   triggerPositionNames as a6,
-  statusColorMd as a7,
-  placementMd as a8,
-  httpMethodNames as a9,
-  PARSED_MARK_PROP as aa,
-  layoutOptionKeys as ab,
-  viewportSizeNames as ac,
-  componentFileExtension as ad,
-  codeBehindFileExtension as ae,
-  getLintSeverity as af,
-  LintSeverity as ag,
-  lintApp as ah,
-  printComponentLints as ai,
-  lintErrorsComponent as aj,
-  collectCodeBehindFromSource as ak,
-  removeCodeBehindTokensFromTree as al,
-  COMPOUND_COMP_ID as am,
-  moduleFileExtension as an,
-  LintDiagKind as ao,
-  lint as ap,
-  ParserError2 as aq,
-  errorMessages as ar,
-  UCRegex as as,
-  onPrefixRegex as at,
-  CORE_NAMESPACE_VALUE as au,
+  httpMethodNames as a7,
+  PARSED_MARK_PROP as a8,
+  layoutOptionKeys as a9,
+  viewportSizeNames as aa,
+  componentFileExtension as ab,
+  codeBehindFileExtension as ac,
+  getLintSeverity as ad,
+  LintSeverity as ae,
+  lintApp as af,
+  printComponentLints as ag,
+  lintErrorsComponent as ah,
+  collectCodeBehindFromSource as ai,
+  removeCodeBehindTokensFromTree as aj,
+  COMPOUND_COMP_ID as ak,
+  moduleFileExtension as al,
+  LintDiagKind as am,
+  lint as an,
+  ParserError2 as ao,
+  errorMessages as ap,
+  UCRegex as aq,
+  onPrefixRegex as ar,
+  CORE_NAMESPACE_VALUE as as,
   alignmentOptionMd as b,
   buttonTypesMd as c,
   buttonThemeMd as d,

package/dist/scripts/src/components/ComponentProvider.js

@@ -81,13 +81,10 @@ const Bookmark_1 = require("./Bookmark/Bookmark");
 const AppState_1 = require("./AppState/AppState");
 const TableOfContents_1 = require("./TableOfContents/TableOfContents");
 const Accordion_1 = require("./Accordion/Accordion");
-const Alert_1 = require("./Alert/Alert");
-const OffCanvas_1 = require("./OffCanvas/OffCanvas");
 const XmluiCodeHighlighter_1 = require("../components-core/XmluiCodeHighlighter");
 const TabItem_1 = require("./Tabs/TabItem");
 const AccordionItem_1 = require("./Accordion/AccordionItem");
 const Slider_1 = require("./Slider/Slider");
-const ButtonGroup_1 = require("./ButtonGroup/ButtonGroup");
 const Carousel_1 = require("./Carousel/Carousel");
 const CarouselItem_1 = require("./Carousel/CarouselItem");
 const renderers_1 = require("../components-core/renderers");
@@ -100,7 +97,7 @@ const Backdrop_1 = require("./Backdrop/Backdrop");
 const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 const RadioItem_1 = require("./RadioGroup/RadioItem");
-const SubNavPanel_1 = require("./SubNavPanel/SubNavPanel");
+const InspectButton_1 = require("./InspectButton/InspectButton");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -151,6 +148,7 @@ class ComponentRegistry {
                 }
             });
         };
+        // --- Registers a renderable component using its renderer function
         this.registerCoreComponent = (component) => {
             const coreNamespaces = ["#xmlui-core-ns", ""];
             if ("compoundComponentDef" in component) {
@@ -169,7 +167,6 @@ class ComponentRegistry {
                 this.registerComponentRenderer(component, ...appNamespaces);
             }
         };
-        // --- Registers a renderable component using its renderer function
         // --- and metadata
         this.registerComponentRenderer = ({ type, renderer, metadata, isCompoundComponent, }, ...namespaces) => {
             const component = {
@@ -274,9 +271,6 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_NavPanel !== "false") {
             this.registerCoreComponent(NavPanel_1.navPanelRenderer);
         }
-        if (process.env.VITE_USED_COMPONENTS_SubNavPanel !== "false") {
-            this.registerCoreComponent(SubNavPanel_1.subNavPanelRenderer);
-        }
         if (process.env.VITE_USED_COMPONENTS_Pages !== "false") {
             this.registerCoreComponent(Pages_1.pagesRenderer);
             this.registerCoreComponent(Pages_1.pageRenderer);
@@ -372,6 +366,7 @@ class ComponentRegistry {
             this.registerCoreComponent(AutoComplete_1.autoCompleteComponentRenderer);
             this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);
             this.registerCoreComponent(ToneChangerButton_1.toneChangerButtonComponentRenderer);
+            this.registerCoreComponent(InspectButton_1.inspectButtonComponentRenderer);
             this.registerCoreComponent(FormSection_1.formSectionRenderer);
             this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);
             this.registerCoreComponent(DropdownMenu_1.menuItemRenderer);
@@ -388,10 +383,7 @@ class ComponentRegistry {
         // --- New Bootstrap-inspired components
         this.registerCoreComponent(Carousel_1.carouselComponentRenderer);
         this.registerCoreComponent(Accordion_1.accordionComponentRenderer);
-        this.registerCoreComponent(Alert_1.alertComponentRenderer);
-        this.registerCoreComponent(OffCanvas_1.offCanvasComponentRenderer);
         this.registerCoreComponent(Slider_1.sliderComponentRenderer);
-        this.registerCoreComponent(ButtonGroup_1.buttonGroupComponentRenderer);
         this.registerCoreComponent(Backdrop_1.backdropComponentRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);
@@ -566,6 +558,19 @@ class ComponentRegistry {
             this.loaders.get(componentName) !== undefined ||
             this.actionFns.get(componentName) !== undefined);
     }
+    // --- Registers a loader renderer using its definition
+    registerLoaderRenderer({ type, renderer }) {
+        this.loaders.set(type, renderer);
+    }
+    /**
+     * This method destroys the component registry; It unsubscribes from the component manager.
+     * This method is called when the component registry is no longer needed, e.g., when the
+     * component provider is unmounted (HMR).
+     */
+    destroy() {
+        var _a;
+        (_a = this.extensionManager) === null || _a === void 0 ? void 0 : _a.unSubscribeFromRegistrations(this.extensionRegistered);
+    }
     // --- Registers a compound component using its definition and metadata
     registerCompoundComponentRenderer({ compoundComponentDef, metadata }, ...namespaces) {
         const component = {
@@ -582,19 +587,6 @@ class ComponentRegistry {
     registerActionFn({ actionName: functionName, actionFn }) {
         this.actionFns.set(functionName, actionFn);
     }
-    // --- Registers a loader renderer using its definition
-    registerLoaderRenderer({ type, renderer }) {
-        this.loaders.set(type, renderer);
-    }
-    /**
-     * This method destroys the component registry; It unsubscribes from the component manager.
-     * This method is called when the component registry is no longer needed, e.g., when the
-     * component provider is unmounted (HMR).
-     */
-    destroy() {
-        var _a;
-        (_a = this.extensionManager) === null || _a === void 0 ? void 0 : _a.unSubscribeFromRegistrations(this.extensionRegistered);
-    }
 }
 exports.ComponentRegistry = ComponentRegistry;
 /**

package/dist/scripts/src/components/DropdownMenu/DropdownMenu.js

@@ -99,6 +99,7 @@ exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: DropdownMenuNative_1.defaultMenuItemProps.active,
         },
+        enabled: (0, metadata_helpers_1.dEnabled)(),
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(MICOMP),
@@ -107,6 +108,7 @@ exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`backgroundColor-${MICOMP}`]: "$backgroundColor-dropdown-item",
         [`color-${MICOMP}`]: "$textColor-primary",
+        [`color-${MICOMP}--disabled`]: "$textColor--disabled",
         [`fontFamily-${MICOMP}`]: "$fontFamily",
         [`fontSize-${MICOMP}`]: "$fontSize-small",
         [`paddingVertical-${MICOMP}`]: "$space-2",
@@ -131,7 +133,7 @@ exports.menuItemRenderer = (0, renderers_1.createComponentRenderer)(MICOMP, expo
             navigateAction === null || navigateAction === void 0 ? void 0 : navigateAction({ pathname: to });
         };
     }
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { onClick: clickHandler, label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), style: layoutCss, iconPosition: extractValue(node.props.iconPosition), icon: ((_b = node.props) === null || _b === void 0 ? void 0 : _b.icon) && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue(node.props.icon) }), active: extractValue.asOptionalBoolean(node.props.active, false), children: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { onClick: clickHandler, label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), style: layoutCss, iconPosition: extractValue(node.props.iconPosition), icon: ((_b = node.props) === null || _b === void 0 ? void 0 : _b.icon) && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue(node.props.icon) }), active: extractValue.asOptionalBoolean(node.props.active, false), enabled: extractValue.asOptionalBoolean(node.props.enabled, true), children: renderChild(node.children) }));
 });
 const SMCOMP = "SubMenuItem";
 exports.SubMenuItemMd = (0, ComponentDefs_1.createMetadata)({

package/dist/scripts/src/components/DropdownMenu/DropdownMenuNative.js

@@ -87,13 +87,21 @@ exports.defaultMenuItemProps = {
     iconPosition: "start",
     active: false,
 };
-exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = exports.defaultMenuItemProps.iconPosition, active = exports.defaultMenuItemProps.active, }, ref) {
+exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = exports.defaultMenuItemProps.iconPosition, active = exports.defaultMenuItemProps.active, enabled = true, }, ref) {
     const iconToStart = iconPosition === "start";
     return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Item, { style: style, className: (0, classnames_1.default)(DropdownMenu_module_scss_1.default.DropdownMenuItem, {
             [DropdownMenu_module_scss_1.default.active]: active,
+            [DropdownMenu_module_scss_1.default.disabled]: !enabled,
         }), onClick: (event) => {
+            if (!enabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
             event.stopPropagation();
-            onClick(event);
+            if (enabled) {
+                onClick(event);
+            }
         }, ref: ref, children: [iconToStart && icon, (0, jsx_runtime_1.jsx)("div", { className: DropdownMenu_module_scss_1.default.wrapper, children: label !== null && label !== void 0 ? label : children }), !iconToStart && icon] }));
 });
 function SubMenuItem({ children, label, triggerTemplate }) {

package/dist/scripts/src/components/Form/FormContext.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formControlTypesMd = exports.formControlTypes = exports.FormContext = exports.validationModeMd = exports.defaultValidationMode = exports.validationModeValues = exports.validationSeverityMd = exports.validationSeverityValues = void 0;
+exports.useFormContext = useFormContext;
 exports.useFormContextPart = useFormContextPart;
 const use_context_selector_1 = require("use-context-selector");
 exports.validationSeverityValues = ["error", "warning", "valid", "none"];
@@ -27,6 +28,9 @@ exports.validationModeMd = [
     }
 ];
 exports.FormContext = (0, use_context_selector_1.createContext)(undefined);
+function useFormContext() {
+    return (0, use_context_selector_1.useContext)(exports.FormContext);
+}
 function useFormContextPart(selector) {
     return (0, use_context_selector_1.useContextSelector)(exports.FormContext, selector);
 }

package/dist/scripts/src/components/Form/FormNative.js

@@ -56,7 +56,7 @@ const getByPath = (obj, path) => {
 };
 exports.getByPath = getByPath;
 const formReducer = (0, immer_1.default)((state, action) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { uid } = action.payload;
     if (uid !== undefined && !state.interactionFlags[uid]) {
         state.interactionFlags[uid] = {
@@ -70,7 +70,7 @@ const formReducer = (0, immer_1.default)((state, action) => {
     }
     switch (action.type) {
         case formActions_1.FormActionKind.FIELD_INITIALIZED: {
-            if (!state.interactionFlags[uid].isDirty) {
+            if (!state.interactionFlags[uid].isDirty || action.payload.force) {
                 setByPath(state.subject, uid, action.payload.value);
             }
             break;
@@ -167,8 +167,7 @@ const formReducer = (0, immer_1.default)((state, action) => {
         }
         case formActions_1.FormActionKind.RESET: {
             const { originalSubject } = action.payload;
-            return Object.assign(Object.assign({}, initialState), { subject: originalSubject });
-            break;
+            return Object.assign(Object.assign({}, initialState), { subject: originalSubject, resetVersion: ((_e = state.resetVersion) !== null && _e !== void 0 ? _e : 0) + 1 });
         }
         default:
     }
@@ -179,6 +178,7 @@ const initialState = {
     generalValidationResults: [],
     interactionFlags: {},
     submitInProgress: false,
+    resetVersion: 0,
 };
 exports.defaultProps = {
     cancelLabel: "Cancel",
@@ -203,6 +203,7 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
             originalSubject: initialValue,
             validationResults: formState.validationResults,
             interactionFlags: formState.interactionFlags,
+            resetVersion: formState.resetVersion,
             dispatch,
             enabled: isEnabled,
         };
@@ -211,6 +212,7 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         formState.interactionFlags,
         formState.subject,
         formState.validationResults,
+        formState.resetVersion,
         initialValue,
         isEnabled,
         itemLabelBreak,

package/dist/scripts/src/components/Form/formActions.js

@@ -27,12 +27,13 @@ var FormActionKind;
     FormActionKind["SUBMITTED"] = "FormActionKind:SUBMITTED";
     FormActionKind["RESET"] = "FormActionKind:RESET";
 })(FormActionKind || (exports.FormActionKind = FormActionKind = {}));
-function fieldInitialized(uid, value) {
+function fieldInitialized(uid, value, force = false) {
     return {
         type: FormActionKind.FIELD_INITIALIZED,
         payload: {
             uid,
             value,
+            force
         },
     };
 }

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -46,12 +46,14 @@ exports.defaultProps = {
     customValidationsDebounce: 0,
 };
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
+    var _b;
     var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer"]);
     const defaultId = (0, react_1.useId)();
     const [formItemId, setFormItemId] = (0, react_1.useState)(bindTo);
     const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
     const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value.itemLabelBreak);
     const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);
+    const resetVersion = (_b = (0, FormContext_1.useFormContext)()) === null || _b === void 0 ? void 0 : _b.resetVersion;
     const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.originalSubject, formItemId));
     const initialValue = initialValueFromSubject === undefined ? rest.initialValue : initialValueFromSubject;
     const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value.subject, formItemId));
@@ -64,6 +66,11 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         setFormItemId(newId);
         dispatch((0, formActions_1.fieldInitialized)(newId, initialValue));
     }, [bindTo, dispatch, initialValue]);
+    (0, react_1.useEffect)(() => {
+        if (resetVersion) {
+            dispatch((0, formActions_1.fieldInitialized)(formItemId, initialValue, true));
+        }
+    }, [resetVersion, formItemId, initialValue, dispatch]);
     (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, formItemId, customValidationsDebounce);
     const onStateChange = (0, react_1.useCallback)(({ value }, options) => {
         //we already handled the initial value in the useEffect with fieldInitialized(...);

package/dist/scripts/src/components/Icon/MoonIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoonIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const moon_svg_react_1 = __importDefault(require("./svg/moon.svg?react"));
+const MoonIcon = (props) => ((0, jsx_runtime_1.jsx)(moon_svg_react_1.default, Object.assign({}, props)));
+exports.MoonIcon = MoonIcon;

package/dist/scripts/src/components/Icon/StarsIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StarsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const stars_svg_react_1 = __importDefault(require("./svg/stars.svg?react"));
+const StarsIcon = (props) => ((0, jsx_runtime_1.jsx)(stars_svg_react_1.default, Object.assign({}, props)));
+exports.StarsIcon = StarsIcon;

package/dist/scripts/src/components/IconProvider.js

@@ -79,6 +79,8 @@ const SortDescendingIcon_1 = require("./Icon/SortDescendingIcon");
 const NoSortIcon_1 = require("./Icon/NoSortIcon");
 const TrendingLevelIcon_1 = require("./Icon/TrendingLevelIcon");
 const Inspect_1 = require("./Icon/Inspect");
+const MoonIcon_1 = require("./Icon/MoonIcon");
+const StarsIcon_1 = require("./Icon/StarsIcon");
 const pool = new Map();
 function registerIconRenderer(name, renderer) {
     if (typeof name === "object") {
@@ -194,7 +196,8 @@ registerIconRenderer("duplicate", (props) => (0, jsx_runtime_1.jsx)(hi_1.HiOutli
 registerIconRenderer("connect", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxLightningBolt, Object.assign({}, props)));
 registerIconRenderer("cog", (props) => (0, jsx_runtime_1.jsx)(hi_1.HiOutlineCog, Object.assign({}, props)));
 registerIconRenderer("sun", (props) => (0, jsx_runtime_1.jsx)(hi2_1.HiSun, Object.assign({}, props)));
-registerIconRenderer("moon", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiMoon, Object.assign({}, props)));
+registerIconRenderer("moon", (props) => (0, jsx_runtime_1.jsx)(MoonIcon_1.MoonIcon, Object.assign({}, props)));
+registerIconRenderer("stars", (props) => (0, jsx_runtime_1.jsx)(StarsIcon_1.StarsIcon, Object.assign({}, props)));
 registerIconRenderer("share", (props) => (0, jsx_runtime_1.jsx)(ShareIcon_1.ShareIcon, Object.assign({}, props)));
 registerIconRenderer("new-window", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, Object.assign({}, props)));
 registerIconRenderer("paint", (props) => (0, jsx_runtime_1.jsx)(hi2_1.HiOutlinePaintBrush, Object.assign({}, props)));

package/dist/scripts/src/components/InspectButton/InspectButton.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inspectButtonComponentRenderer = exports.InspectButtonMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const ButtonNative_1 = require("../Button/ButtonNative");
+const InspectorContext_1 = require("../../components-core/InspectorContext");
+const InspectButton_module_scss_1 = __importDefault(require("./InspectButton.module.scss"));
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const pi_1 = require("react-icons/pi");
+const COMP = "InspectButton";
+exports.InspectButtonMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: "This component displays a button that can turn the inspection " +
+        "mode of a running XMLUI app on or off.",
+    props: {},
+    themeVars: (0, themeVars_1.parseScssVar)(InspectButton_module_scss_1.default.themeVars),
+});
+function InspectButton({ children, style }) {
+    const { setInspectMode, inspectMode } = (0, InspectorContext_1.useInspectMode)();
+    return ((0, jsx_runtime_1.jsxs)(ButtonNative_1.Button, { style: style, className: InspectButton_module_scss_1.default.inspectButton, themeColor: inspectMode ? "primary" : "secondary", variant: inspectMode ? "solid" : "outlined", onClick: () => {
+            setInspectMode((prev) => !prev);
+        }, children: [(0, jsx_runtime_1.jsx)(pi_1.PiFileCode, { className: InspectButton_module_scss_1.default.icon }), children] }));
+}
+/**
+ * Define the renderer for the Button component
+ */
+exports.inspectButtonComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.InspectButtonMd, ({ renderChild, node, layoutCss }) => {
+    return (0, jsx_runtime_1.jsx)(InspectButton, { style: layoutCss, children: renderChild(node.children) });
+});

package/dist/scripts/src/components/ToneChangerButton/ToneChangerButton.js

@@ -15,7 +15,7 @@ exports.ToneChangerButtonMd = (0, ComponentDefs_1.createMetadata)({
 });
 function ToneChangerButton() {
     const { activeThemeTone, setActiveThemeTone } = (0, ThemeContext_1.useThemes)();
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: activeThemeTone === "light" ? "moon" : "sun" }), onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: activeThemeTone === "light" ? "stars" : "sun" }), onClick: () => {
             activeThemeTone === "light" ? setActiveThemeTone("dark") : setActiveThemeTone("light");
         } }));
 }

package/dist/scripts/src/components-core/InspectorContext.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InspectorContext = void 0;
 exports.InspectorProvider = InspectorProvider;
 exports.useDevTools = useDevTools;
+exports.useInspectMode = useInspectMode;
 exports.useInspector = useInspector;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -14,9 +15,9 @@ const react_dom_1 = require("react-dom");
 const ThemeContext_1 = require("./theming/ThemeContext");
 const classnames_1 = __importDefault(require("classnames"));
 const ButtonNative_1 = require("../components/Button/ButtonNative");
-const IconNative_1 = __importDefault(require("../components/Icon/IconNative"));
 const InspectorButton_module_scss_1 = __importDefault(require("./InspectorButton.module.scss"));
 const ComponentRegistryContext_1 = require("../components/ComponentRegistryContext");
+const pi_1 = require("react-icons/pi");
 // --- The context object that is used to store the inspector information.
 exports.InspectorContext = (0, react_1.createContext)(null);
 function InspectorProvider({ children, sources, projectCompilation, mockApi, }) {
@@ -26,6 +27,7 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
     const [showCode, setShowCode] = (0, react_1.useState)(false);
     const [devToolsSize, setDevToolsSize] = (0, react_1.useState)(0);
     const [devToolsSide, setDevToolsSide] = (0, react_1.useState)("bottom");
+    const [inspectMode, setInspectMode] = (0, react_1.useState)(false);
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const devToolsEntry = componentRegistry.lookupComponentRenderer("XMLUIDevtools.DevTools");
     const contextValue = (0, react_1.useMemo)(() => {
@@ -61,19 +63,30 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
             setDevToolsSide,
             devToolsEnabled: showCode,
             projectCompilation: projectCompilation,
+            setInspectMode,
+            inspectMode,
             mockApi,
         };
-    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation, mockApi]);
+    }, [
+        devToolsSide,
+        devToolsSize,
+        sources,
+        inspectedNode,
+        showCode,
+        projectCompilation,
+        inspectMode,
+        mockApi,
+    ]);
     return ((0, jsx_runtime_1.jsxs)(exports.InspectorContext.Provider, { value: contextValue, children: [children, process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
                 showCode &&
                 inspectedNode !== null &&
                 (0, react_dom_1.createPortal)(devToolsEntry === null || devToolsEntry === void 0 ? void 0 : devToolsEntry.renderer({}), root), process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
                 inspectable &&
                 Object.values(inspectable).map((item) => {
-                    return ((0, jsx_runtime_1.jsx)(InspectButton, { setShowCode: setShowCode, inspectId: item.inspectId, node: item.node, setInspectedNode: setInspectedNode }, item.inspectId + +"-" + item.key));
+                    return ((0, jsx_runtime_1.jsx)(InspectButton, { inspectedNode: inspectedNode, setShowCode: setShowCode, inspectId: item.inspectId, node: item.node, setInspectedNode: setInspectedNode, inspectMode: inspectMode }, item.inspectId + +"-" + item.key));
                 })] }));
 }
-function InspectButton({ inspectId, node, setInspectedNode, setShowCode, }) {
+function InspectButton({ inspectId, node, inspectedNode, setInspectedNode, setShowCode, inspectMode, }) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const [popperElement, setPopperElement] = (0, react_1.useState)(null);
@@ -83,7 +96,7 @@ function InspectButton({ inspectId, node, setInspectedNode, setShowCode, }) {
             {
                 name: "offset",
                 options: {
-                    offset: [0, -18],
+                    offset: [-4, -18],
                 },
             },
             {
@@ -98,12 +111,55 @@ function InspectButton({ inspectId, node, setInspectedNode, setShowCode, }) {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const timeoutRef = (0, react_1.useRef)(null);
     const hoverRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!referenceElement) {
+            return;
+        }
+        if ((inspectedNode === null || inspectedNode === void 0 ? void 0 : inspectedNode.inspectId) === inspectId) {
+            referenceElement.classList.add(InspectorButton_module_scss_1.default.inspectedNode);
+        }
+        else {
+            referenceElement.classList.remove(InspectorButton_module_scss_1.default.inspectedNode);
+        }
+    }, [inspectId, inspectedNode, referenceElement]);
+    (0, react_1.useEffect)(() => {
+        if (inspectedNode) {
+            setShowCode(true);
+        }
+        else {
+            setShowCode(false);
+        }
+    }, [inspectedNode]);
     (0, react_1.useEffect)(() => {
         const htmlElement = document.querySelector(`[data-inspectId="${inspectId}"]`);
         if (!htmlElement) {
             return;
         }
         setReferenceElement(htmlElement);
+        if (inspectMode) {
+            htmlElement.classList.add(InspectorButton_module_scss_1.default.inspectableNode);
+            const overlay = document.createElement("div");
+            overlay.classList.add(InspectorButton_module_scss_1.default.inspectOverlay);
+            htmlElement.appendChild(overlay);
+            overlay.addEventListener("click", () => {
+                setInspectedNode((prev) => {
+                    if ((prev === null || prev === void 0 ? void 0 : prev.inspectId) === inspectId) {
+                        return null;
+                    }
+                    return Object.assign(Object.assign({}, node), { inspectId });
+                });
+            });
+        }
+        if (!inspectMode) {
+            htmlElement.classList.remove(InspectorButton_module_scss_1.default.inspectableNode);
+            setInspectedNode(null);
+            setShowCode(false);
+            const overlay = htmlElement.querySelector(`.${InspectorButton_module_scss_1.default.inspectOverlay}`);
+            if (overlay) {
+                overlay.remove();
+            }
+            htmlElement.classList.remove(InspectorButton_module_scss_1.default.inspectedNode);
+        }
         function mouseenter() {
             if (timeoutRef.current) {
                 clearTimeout(timeoutRef.current);
@@ -127,22 +183,24 @@ function InspectButton({ inspectId, node, setInspectedNode, setShowCode, }) {
             htmlElement.removeEventListener("mouseenter", mouseenter);
             htmlElement.removeEventListener("mouseleave", mouseleave);
         };
-    }, [inspectId]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: visible &&
-            !!root &&
-            (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, Object.assign({ variant: "ghost", className: (0, classnames_1.default)(InspectorButton_module_scss_1.default.wrapper, "_debug-inspect-button"), ref: (el) => setPopperElement(el), style: Object.assign(Object.assign({}, popperStyles.popper), { padding: 0 }) }, attributes.popper, { onMouseEnter: () => {
-                    hoverRef.current = true;
-                    if (timeoutRef.current) {
-                        clearTimeout(timeoutRef.current);
-                        timeoutRef.current = null;
-                    }
-                }, onMouseLeave: () => {
-                    hoverRef.current = false;
-                    setVisible(false);
-                }, onClick: () => {
-                    setInspectedNode(node);
-                    setShowCode(true);
-                }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "inspect", size: "md" }) })), root) }));
+    }, [inspectId, node, inspectMode, setShowCode]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: inspectMode
+            ? null
+            : visible &&
+                !!root &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, Object.assign({ variant: "ghost", className: (0, classnames_1.default)(InspectorButton_module_scss_1.default.wrapper, "_debug-inspect-button"), ref: (el) => setPopperElement(el), style: Object.assign(Object.assign({}, popperStyles.popper), { padding: 0 }) }, attributes.popper, { onMouseEnter: () => {
+                        hoverRef.current = true;
+                        if (timeoutRef.current) {
+                            clearTimeout(timeoutRef.current);
+                            timeoutRef.current = null;
+                        }
+                    }, onMouseLeave: () => {
+                        hoverRef.current = false;
+                        setVisible(false);
+                    }, onClick: () => {
+                        setInspectedNode(node);
+                        setShowCode(true);
+                    }, children: (0, jsx_runtime_1.jsx)(pi_1.PiFileCode, { className: InspectorButton_module_scss_1.default.inspectIcon }) })), root) }));
 }
 function useDevTools() {
     const context = (0, react_1.useContext)(exports.InspectorContext);
@@ -159,6 +217,13 @@ function useDevTools() {
         mockApi: context === null || context === void 0 ? void 0 : context.mockApi,
     };
 }
+function useInspectMode() {
+    const context = (0, react_1.useContext)(exports.InspectorContext);
+    return {
+        setInspectMode: context === null || context === void 0 ? void 0 : context.setInspectMode,
+        inspectMode: context === null || context === void 0 ? void 0 : context.inspectMode,
+    };
+}
 function useInspector(node, uid) {
     var _a;
     const context = (0, react_1.useContext)(exports.InspectorContext);