xmlui 0.11.10 → 0.11.12

package/dist/lib/xmlui.d.ts

@@ -254,11 +254,12 @@ declare interface Behavior {
     /**
      * A function that determines if the behavior should be applied based on the
      * component's context and props.
+     * @param context The renderer context of the component.
      * @param node The component definition.
      * @param metadata The metadata of the component.
      * @returns True if the behavior can be attached, otherwise false.
      */
-    canAttach: (node: ComponentDef, metadata: ComponentMetadata) => boolean;
+    canAttach: (context: RendererContext<any>, node: ComponentDef, metadata: ComponentMetadata) => boolean;
     /**
      * A function that attaches the behavior to the component's React node.
      * @param context The renderer context of the component.

package/dist/lib/xmlui.js

@@ -1,4 +1,4 @@
-import { aa, Z, al, a1, ax, av, _, $, ai, ak, aw, ag, ab, a2, a0, S, ar, b, ao, ap, a4, a5, ae, af, as, aj, at, au, ah, ad, c, f, e, h, j, k, l, i, n, p, q, s, u, v, x, w, t, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, P, N, O, Q, R, U, V, a3, W, X, a7, an, a6, a8, aq, a9, am, Y, ac } from "./index-DfOJVz5h.js";
+import { aa, Z, al, a1, ax, av, _, $, ai, ak, aw, ag, ab, a2, a0, S, ar, b, ao, ap, a4, a5, ae, af, as, aj, at, au, ah, ad, c, f, e, h, j, k, l, i, n, p, q, s, u, v, x, w, t, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, P, N, O, Q, R, U, V, a3, W, X, a7, an, a6, a8, aq, a9, am, Y, ac } from "./index-C_siLDTF.js";
 import { e as e2, x as x2 } from "./xmlui-parser-CW8YmGjO.js";
 import { X as X2 } from "./xmlui-serializer-CeCcgdVR.js";
 export {

package/dist/metadata/{collectedComponentMetadata-BzigLDo6.js → collectedComponentMetadata-CCJh2wtR.js}

@@ -12,7 +12,6 @@ import Color from "color";
 import toast, { Toaster, ToastBar } from "react-hot-toast";
 import { useLocation, NavLink as NavLink$1, useNavigate, Link, Routes, Route, Navigate, useParams, useSearchParams } from "@remix-run/react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import * as ReactDropdownMenu from "@radix-ui/react-dropdown-menu";
 import { DropdownMenu as DropdownMenu$1, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuSub, DropdownMenuSubTrigger as DropdownMenuSubTrigger$1, DropdownMenuSubContent as DropdownMenuSubContent$1 } from "@radix-ui/react-dropdown-menu";
 import { createContext as createContext$1, useContextSelector } from "use-context-selector";
 import { parseRegExpLiteral } from "@eslint-community/regexpp";
@@ -2962,6 +2961,9 @@ const Button = React__default.forwardRef(function Button2({
       }, 0);
     }
   }, [autoFocus]);
+  if (variant === "") {
+    variant = defaultProps$1g.variant;
+  }
   const iconToLeft = iconPosition === "start";
   if (!isSizeType(size)) {
     size = defaultProps$1g.size;
@@ -4546,9 +4548,10 @@ const TextBox = forwardRef(function TextBox2({
   useEffect(() => {
     setLocalValue(value);
   }, [value]);
+  const normalizedInitialValue = initialValue ?? "";
   useEffect(() => {
-    updateState({ value: initialValue }, { initial: true });
-  }, [initialValue, updateState]);
+    updateState({ value: normalizedInitialValue }, { initial: true });
+  }, [normalizedInitialValue, updateState]);
   const updateValue = useCallback(
     (value2) => {
       setLocalValue(value2);
@@ -4630,6 +4633,15 @@ const TextBox = forwardRef(function TextBox2({
             required: required2
           }
         ),
+        !readOnly2 && enabled2 && localValue.length > 0 && type == "search" && /* @__PURE__ */ jsx(
+          Adornment,
+          {
+            "data-part-id": PART_END_ADORNMENT,
+            iconName: "close",
+            className: styles$1g.adornment,
+            onClick: () => updateValue("")
+          }
+        ),
         type === "password" && showPasswordToggle ? /* @__PURE__ */ jsx(
           Adornment,
           {
@@ -6812,6 +6824,36 @@ const XmlUiRedThemeDefinition = {
   extends: "xmlui",
   themeVars: { ...redThemeColors }
 };
+const XmlUiDocsThemeDefinition = {
+  id: "xmlui-docs",
+  extends: "xmlui",
+  themeVars: {}
+};
+const XmlUiBlogThemeDefinition = {
+  id: "xmlui-blog",
+  extends: "xmlui",
+  themeVars: {}
+};
+const XmlUiWebThemeDefinition = {
+  id: "xmlui-web",
+  extends: "xmlui",
+  themeVars: {
+    // --- Fundamental colors & typography
+    "maxWidth-content-AppHeader": "1280px",
+    backgroundColor: "$color-surface-0",
+    "color-primary": "#3367CC",
+    "color-surface": "#1e2734",
+    "fontWeight-Text": "400",
+    "fontWeight-bold": "700",
+    "textColor-primary": "$color-surface-800",
+    "textColor-NavLink--active": "$color-primary",
+    // --- App layout
+    "maxWidth-content-App": "800px",
+    // --- Headings
+    "fontSize-H2": "32px",
+    "fontSize-H3": "$space-6"
+  }
+};
 const ThemeToneKeys = ["light", "dark"];
 function useCompiledTheme(activeTheme, activeTone, themes = EMPTY_ARRAY, resources = EMPTY_OBJECT, resourceMap = EMPTY_OBJECT) {
   const componentRegistry = useComponentRegistry();
@@ -6976,7 +7018,10 @@ const builtInThemes = [
   XmlUiOrangeThemeDefinition,
   XmlUiPurpleThemeDefinition,
   XmlUiCyanThemeDefinition,
-  XmlUiRedThemeDefinition
+  XmlUiRedThemeDefinition,
+  XmlUiDocsThemeDefinition,
+  XmlUiBlogThemeDefinition,
+  XmlUiWebThemeDefinition
   /*SolidThemeDefinition,*/
 ];
 function ThemeProvider({
@@ -8176,9 +8221,16 @@ const DropDownNavGroup = forwardRef(function DropDownNavGroup2({
     Trigger2 = DropdownMenuSubTrigger$1;
     Content2 = DropdownMenuSubContent$1;
   }
-  const [expanded2, setExpanded] = useState(initiallyExpanded);
+  const [expanded2, setExpanded] = useState(false);
   const [renderCount, setRenderCount] = useState(false);
-  useEffect(() => setRenderCount(true), []);
+  useEffect(() => {
+    setRenderCount(true);
+    if (initiallyExpanded) {
+      requestAnimationFrame(() => {
+        setExpanded(true);
+      });
+    }
+  }, [initiallyExpanded]);
   return /* @__PURE__ */ jsxs(
     Wrapper,
     {
@@ -18360,6 +18412,11 @@ const styles$Z = {
   wrapper: wrapper$h,
   DropdownMenuSeparator
 };
+const DropdownMenuContext = createContext(null);
+const useDropdownMenuContext = () => {
+  const context = useContext(DropdownMenuContext);
+  return context;
+};
 const defaultDropdownMenuProps = {
   alignment: "start",
   triggerButtonVariant: "ghost",
@@ -18400,11 +18457,44 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsxs(
-    ReactDropdownMenu.Root,
+  const closeMenu = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const contentRef = useRef(null);
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const content2 = contentRef.current;
+      if (!content2) return;
+      const menuItems = Array.from(
+        content2.querySelectorAll('[role="menuitem"]:not([class*="disabled"])')
+      );
+      if (menuItems.length === 0) return;
+      const currentIndex = menuItems.findIndex((item2) => item2 === document.activeElement);
+      let nextIndex;
+      if (currentIndex === -1) {
+        nextIndex = event.key === "ArrowDown" ? 0 : menuItems.length - 1;
+      } else if (event.key === "ArrowDown") {
+        nextIndex = currentIndex < menuItems.length - 1 ? currentIndex + 1 : 0;
+      } else {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : menuItems.length - 1;
+      }
+      menuItems[nextIndex]?.focus();
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      return;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: { closeMenu }, children: /* @__PURE__ */ jsxs(
+    Popover,
     {
       open,
       onOpenChange: async (isOpen) => {
+        if (disabled2) return;
         if (isOpen) {
           if (closeTimeoutRef.current) {
             clearTimeout(closeTimeoutRef.current);
@@ -18422,31 +18512,51 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
           }, 0);
         }
       },
+      modal: false,
       children: [
-        /* @__PURE__ */ jsx(ReactDropdownMenu.Trigger, { ...rest, asChild: true, disabled: disabled2, ref, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsx(
+          PopoverTrigger,
           {
-            icon: /* @__PURE__ */ jsx(Icon$l, { name: triggerButtonIcon, fallback: "chevrondown" }),
-            iconPosition: triggerButtonIconPosition,
-            type: "button",
-            variant: triggerButtonVariant,
-            themeColor: triggerButtonThemeColor,
+            ...rest,
+            asChild: true,
             disabled: disabled2,
-            children: label2
+            ref,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: /* @__PURE__ */ jsx(Icon$l, { name: triggerButtonIcon, fallback: "chevrondown" }),
+                iconPosition: triggerButtonIconPosition,
+                type: "button",
+                variant: triggerButtonVariant,
+                themeColor: triggerButtonThemeColor,
+                disabled: disabled2,
+                children: label2
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ jsx(ReactDropdownMenu.Portal, { container: root2, children: /* @__PURE__ */ jsx(
-          ReactDropdownMenu.Content,
+        ),
+        /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
+          PopoverContent,
           {
+            ref: contentRef,
             align: alignment,
             style: style2,
             className: classnames(styles$Z.DropdownMenuContent, className),
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+              contentRef.current?.focus();
+            },
+            onKeyDownCapture: handleKeyDown,
+            role: "menu",
+            tabIndex: -1,
             children
           }
         ) })
       ]
     }
-  );
+  ) });
 });
 const defaultMenuItemProps = {
   iconPosition: "start",
@@ -18464,26 +18574,45 @@ const MenuItem = forwardRef(function MenuItem2({
   enabled: enabled2 = true
 }, ref) {
   const iconToStart = iconPosition === "start";
+  const context = useDropdownMenuContext();
+  const handleClick = useCallback(
+    (event) => {
+      if (!enabled2) return;
+      onClick(event);
+      context?.closeMenu();
+    },
+    [enabled2, onClick, context]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!enabled2) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+        context?.closeMenu();
+      } else if (event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+        context?.closeMenu();
+      }
+    },
+    [enabled2, onClick, context]
+  );
   return /* @__PURE__ */ jsxs(
-    ReactDropdownMenu.Item,
+    "div",
     {
       style: style2,
       className: classnames(className, styles$Z.DropdownMenuItem, {
         [styles$Z.active]: active2,
         [styles$Z.disabled]: !enabled2
       }),
-      onClick: (event) => {
-        if (!enabled2) {
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-        event.stopPropagation();
-        if (enabled2) {
-          onClick(event);
-        }
-      },
       ref,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "menuitem",
+      tabIndex: enabled2 ? 0 : -1,
       children: [
         iconToStart && icon2,
         /* @__PURE__ */ jsx("div", { className: styles$Z.wrapper, children: label2 ?? children }),
@@ -18492,17 +18621,38 @@ const MenuItem = forwardRef(function MenuItem2({
     }
   );
 });
-const SubMenuItem = forwardRef(
-  function SubMenuItem2({ children, label: label2, triggerTemplate }, ref) {
-    const { root: root2 } = useTheme();
-    return /* @__PURE__ */ jsxs(ReactDropdownMenu.Sub, { children: [
-      /* @__PURE__ */ jsx(ReactDropdownMenu.SubTrigger, { className: styles$Z.DropdownMenuSubTrigger, asChild: true, ref, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 }) }),
-      /* @__PURE__ */ jsx(ReactDropdownMenu.Portal, { container: root2, children: /* @__PURE__ */ jsx(ReactDropdownMenu.SubContent, { className: styles$Z.DropdownMenuSubContent, children }) })
-    ] });
-  }
-);
+const SubMenuItem = forwardRef(function SubMenuItem2({ children, label: label2, triggerTemplate }, ref) {
+  const { root: root2 } = useTheme();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles$Z.DropdownMenuSubTrigger,
+        role: "menuitem",
+        tabIndex: 0,
+        ref,
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: styles$Z.DropdownMenuSubContent,
+        side: "right",
+        align: "start",
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children
+      }
+    ) })
+  ] });
+});
 const MenuSeparator = forwardRef(function MenuSeparator2(props, ref) {
-  return /* @__PURE__ */ jsx(ReactDropdownMenu.Separator, { ref, className: styles$Z.DropdownMenuSeparator, ...props });
+  return /* @__PURE__ */ jsx("div", { ref, className: styles$Z.DropdownMenuSeparator, role: "separator", ...props });
 });
 const DDMCOMP = "DropdownMenu";
 const DropdownMenuMd = createMetadata({
@@ -31732,6 +31882,8 @@ const CompoundComponent = forwardRef(
     appContext,
     state,
     lookupAction,
+    contextVars,
+    // Extract contextVars to prevent it from being passed to DOM elements
     ...restProps
   }, forwardedRef) => {
     const resolvedPropsInner = useMemo(() => {
@@ -35263,9 +35415,10 @@ function isMediaBreakpoint(value) {
 }
 const tooltipBehavior = {
   name: "tooltip",
-  canAttach: (node) => {
-    const tooltipText = node.props?.tooltip;
-    const tooltipMarkdown = node.props?.tooltipMarkdown;
+  canAttach: (context, node) => {
+    const { extractValue } = context;
+    const tooltipText = extractValue(node.props?.tooltip, true);
+    const tooltipMarkdown = extractValue(node.props?.tooltipMarkdown, true);
     return !!tooltipText || !!tooltipMarkdown;
   },
   attach: (context, node, metadata) => {
@@ -35279,8 +35432,10 @@ const tooltipBehavior = {
 };
 const animationBehavior = {
   name: "animation",
-  canAttach: (node) => {
-    return !!node.props?.animation;
+  canAttach: (context, node) => {
+    const { extractValue } = context;
+    const animation = extractValue(node.props?.animation, true);
+    return !!animation;
   },
   attach: (context, node, metadata) => {
     const { extractValue } = context;
@@ -35294,10 +35449,13 @@ const animationBehavior = {
 };
 const labelBehavior = {
   name: "label",
-  canAttach: (node, metadata) => {
+  canAttach: (context, node, metadata) => {
     if (metadata?.props?.label) {
       return false;
-    } else if (!node.props?.label) {
+    }
+    const { extractValue } = context;
+    const label2 = extractValue(node.props?.label, true);
+    if (!label2) {
       return false;
     }
     return true;
@@ -35334,14 +35492,15 @@ const labelBehavior = {
 };
 const variantBehavior = {
   name: "variant",
-  canAttach: (node) => {
-    const variant = node.props?.variant;
+  canAttach: (context, node) => {
+    const { extractValue } = context;
+    const variant = extractValue(node.props?.variant, true);
     if (!variant) {
       return false;
     }
     if (node.type === "Button") {
       const variantStr = typeof variant === "string" ? variant : String(variant);
-      return !buttonVariantValues.includes(variantStr);
+      return variantStr != void 0 && variantStr !== "" && !buttonVariantValues.includes(variantStr);
     }
     if (node.type === "Badge") {
       const variantStr = typeof variant === "string" ? variant : String(variant);
@@ -36567,7 +36726,7 @@ const defaultProps$o = {
   weekStartsOn: 0,
   inline: true,
   clearable: false,
-  clearToInitialValue: true,
+  clearToInitialValue: false,
   required: false,
   readOnly: false,
   autoFocus: false,
@@ -37709,7 +37868,7 @@ const defaultProps$n = {
   hour24: true,
   seconds: false,
   clearable: false,
-  clearToInitialValue: true,
+  clearToInitialValue: false,
   required: false,
   readOnly: false,
   autoFocus: false,
@@ -43867,29 +44026,30 @@ const inspectButtonComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$4 = `'{"padding-NestedApp": "var(--xmlui-padding-NestedApp)", "paddingHorizontal-NestedApp": "var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp))", "paddingVertical-NestedApp": "var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp))", "paddingLeft-NestedApp": "var(--xmlui-paddingLeft-NestedApp, var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingRight-NestedApp": "var(--xmlui-paddingRight-NestedApp, var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingTop-NestedApp": "var(--xmlui-paddingTop-NestedApp, var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingBottom-NestedApp": "var(--xmlui-paddingBottom-NestedApp, var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp)))", "border-NestedApp": "var(--xmlui-border-NestedApp)", "borderHorizontal-NestedApp": "var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp))", "borderVertical-NestedApp": "var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp))", "borderLeft-NestedApp": "var(--xmlui-borderLeft-NestedApp, var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp)))", "borderRight-NestedApp": "var(--xmlui-borderRight-NestedApp, var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp)))", "borderTop-NestedApp": "var(--xmlui-borderTop-NestedApp, var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp)))", "borderBottom-NestedApp": "var(--xmlui-borderBottom-NestedApp, var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp)))", "borderWidth-NestedApp": "var(--xmlui-borderWidth-NestedApp)", "borderHorizontalWidth-NestedApp": "var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp))", "borderLeftWidth-NestedApp": "var(--xmlui-borderLeftWidth-NestedApp, var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderRightWidth-NestedApp": "var(--xmlui-borderRightWidth-NestedApp, var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderVerticalWidth-NestedApp": "var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp))", "borderTopWidth-NestedApp": "var(--xmlui-borderTopWidth-NestedApp, var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderBottomWidth-NestedApp": "var(--xmlui-borderBottomWidth-NestedApp, var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderStyle-NestedApp": "var(--xmlui-borderStyle-NestedApp)", "borderHorizontalStyle-NestedApp": "var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp))", "borderLeftStyle-NestedApp": "var(--xmlui-borderLeftStyle-NestedApp, var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderRightStyle-NestedApp": "var(--xmlui-borderRightStyle-NestedApp, var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderVerticalStyle-NestedApp": "var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp))", "borderTopStyle-NestedApp": "var(--xmlui-borderTopStyle-NestedApp, var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderBottomStyle-NestedApp": "var(--xmlui-borderBottomStyle-NestedApp, var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderColor-NestedApp": "var(--xmlui-borderColor-NestedApp)", "borderHorizontalColor-NestedApp": "var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp))", "borderLeftColor-NestedApp": "var(--xmlui-borderLeftColor-NestedApp, var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderRightColor-NestedApp": "var(--xmlui-borderRightColor-NestedApp, var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderVerticalColor-NestedApp": "var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp))", "borderTopColor-NestedApp": "var(--xmlui-borderTopColor-NestedApp, var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderBottomColor-NestedApp": "var(--xmlui-borderBottomColor-NestedApp, var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderStartStartRadius-NestedApp": "var(--xmlui-borderStartStartRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderStartEndRadius-NestedApp": "var(--xmlui-borderStartEndRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderEndStartRadius-NestedApp": "var(--xmlui-borderEndStartRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderEndEndRadius-NestedApp": "var(--xmlui-borderEndEndRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "textColor-header-NestedApp": "var(--xmlui-textColor-header-NestedApp)", "fontFamily-header-NestedApp": "var(--xmlui-fontFamily-header-NestedApp)", "fontSize-header-NestedApp": "var(--xmlui-fontSize-header-NestedApp)", "fontStyle-header-NestedApp": "var(--xmlui-fontStyle-header-NestedApp)", "fontVariant-header-NestedApp": "var(--xmlui-fontVariant-header-NestedApp)", "fontWeight-header-NestedApp": "var(--xmlui-fontWeight-header-NestedApp)", "fontStretch-header-NestedApp": "var(--xmlui-fontStretch-header-NestedApp)", "textDecorationLine-header-NestedApp": "var(--xmlui-textDecorationLine-header-NestedApp)", "textDecorationColor-header-NestedApp": "var(--xmlui-textDecorationColor-header-NestedApp)", "textDecorationStyle-header-NestedApp": "var(--xmlui-textDecorationStyle-header-NestedApp)", "textDecorationThickness-header-NestedApp": "var(--xmlui-textDecorationThickness-header-NestedApp)", "textUnderlineOffset-header-NestedApp": "var(--xmlui-textUnderlineOffset-header-NestedApp)", "lineHeight-header-NestedApp": "var(--xmlui-lineHeight-header-NestedApp)", "backgroundColor-header-NestedApp": "var(--xmlui-backgroundColor-header-NestedApp)", "textTransform-header-NestedApp": "var(--xmlui-textTransform-header-NestedApp)", "letterSpacing-header-NestedApp": "var(--xmlui-letterSpacing-header-NestedApp)", "wordSpacing-header-NestedApp": "var(--xmlui-wordSpacing-header-NestedApp)", "textShadow-header-NestedApp": "var(--xmlui-textShadow-header-NestedApp)", "textIndent-header-NestedApp": "var(--xmlui-textIndent-header-NestedApp)", "textAlign-header-NestedApp": "var(--xmlui-textAlign-header-NestedApp)", "textAlignLast-header-NestedApp": "var(--xmlui-textAlignLast-header-NestedApp)", "wordBreak-header-NestedApp": "var(--xmlui-wordBreak-header-NestedApp)", "wordWrap-header-NestedApp": "var(--xmlui-wordWrap-header-NestedApp)", "direction-header-NestedApp": "var(--xmlui-direction-header-NestedApp)", "writingMode-header-NestedApp": "var(--xmlui-writingMode-header-NestedApp)", "lineBreak-header-NestedApp": "var(--xmlui-lineBreak-header-NestedApp)", "backgroundColor-frame-NestedApp": "var(--xmlui-backgroundColor-frame-NestedApp)", "gap-frame-NestedApp": "var(--xmlui-gap-frame-NestedApp)", "marginTop-NestedApp": "var(--xmlui-marginTop-NestedApp)", "marginBottom-NestedApp": "var(--xmlui-marginBottom-NestedApp)", "boxShadow-NestedApp": "var(--xmlui-boxShadow-NestedApp)", "backgroundColor-viewControls-NestedApp": "var(--xmlui-backgroundColor-viewControls-NestedApp)", "borderRadius-viewControls-NestedApp": "var(--xmlui-borderRadius-viewControls-NestedApp)", "padding-viewControls-NestedApp": "var(--xmlui-padding-viewControls-NestedApp)", "paddingVertical-viewControls-button-NestedApp": "var(--xmlui-paddingVertical-viewControls-button-NestedApp)", "paddingHorizontal-viewControls-button-NestedApp": "var(--xmlui-paddingHorizontal-viewControls-button-NestedApp)", "borderRadius-NestedApp": "var(--xmlui-borderRadius-NestedApp)", "borderBottom-header-NestedApp": "var(--xmlui-borderBottom-header-NestedApp)", "height-logo-splitView-NestedApp": "var(--xmlui-height-logo-splitView-NestedApp)", "width-logo-splitView-NestedApp": "var(--xmlui-width-logo-splitView-NestedApp)", "width-controls-NestedApp": "var(--xmlui-width-controls-NestedApp)", "padding-button-splitView-NestedApp": "var(--xmlui-padding-button-splitView-NestedApp)", "width-button-splitView-NestedApp": "var(--xmlui-width-button-splitView-NestedApp)", "height-button-splitView-NestedApp": "var(--xmlui-height-button-splitView-NestedApp)", "backgroundColor-code-splitView-NestedApp": "var(--xmlui-backgroundColor-code-splitView-NestedApp)", "backgroundColor-button-splitView-NestedApp--active": "var(--xmlui-backgroundColor-button-splitView-NestedApp--active)", "color-button-splitView-NestedApp": "var(--xmlui-color-button-splitView-NestedApp)", "color-button-splitView-NestedApp--active": "var(--xmlui-color-button-splitView-NestedApp--active)", "borderRadius-button-splitView-NestedApp": "var(--xmlui-borderRadius-button-splitView-NestedApp)", "borderColor-button-splitView-NestedApp": "var(--xmlui-borderColor-button-splitView-NestedApp)", "color-loadingText-NestedApp": "var(--xmlui-color-loadingText-NestedApp)"}'`;
-const nestedAppPlaceholder = "_nestedAppPlaceholder_2bz33_14";
-const loadingContainer = "_loadingContainer_2bz33_21";
-const logoWrapper = "_logoWrapper_2bz33_34";
-const animatedLogoPath = "_animatedLogoPath_2bz33_39";
-const loadingText = "_loadingText_2bz33_47";
-const nestedAppRoot = "_nestedAppRoot_2bz33_71";
-const shouldAnimate = "_shouldAnimate_2bz33_79";
-const initialized = "_initialized_2bz33_83";
-const nestedAppContainer = "_nestedAppContainer_2bz33_90";
-const contentContainer = "_contentContainer_2bz33_109";
-const splitViewMarkdown = "_splitViewMarkdown_2bz33_116";
-const hidden = "_hidden_2bz33_125";
-const viewControls = "_viewControls_2bz33_134";
-const logo = "_logo_2bz33_34";
-const splitViewButton = "_splitViewButton_2bz33_146";
-const show = "_show_2bz33_154";
-const hide = "_hide_2bz33_161";
-const header = "_header_2bz33_167";
-const headerText = "_headerText_2bz33_175";
-const headerButton = "_headerButton_2bz33_204";
-const wrapper$3 = "_wrapper_2bz33_211";
-const shadowRoot = "_shadowRoot_2bz33_214";
-const content$1 = "_content_2bz33_109";
+const nestedAppPlaceholder = "_nestedAppPlaceholder_1n7j8_14";
+const loadingContainer = "_loadingContainer_1n7j8_21";
+const logoWrapper = "_logoWrapper_1n7j8_34";
+const animatedLogoPath = "_animatedLogoPath_1n7j8_39";
+const loadingText = "_loadingText_1n7j8_47";
+const nestedAppRoot = "_nestedAppRoot_1n7j8_71";
+const shouldAnimate = "_shouldAnimate_1n7j8_79";
+const initialized = "_initialized_1n7j8_83";
+const nestedAppContainer = "_nestedAppContainer_1n7j8_90";
+const contentContainer = "_contentContainer_1n7j8_109";
+const splitViewMarkdown = "_splitViewMarkdown_1n7j8_116";
+const hidden = "_hidden_1n7j8_125";
+const viewControls = "_viewControls_1n7j8_134";
+const logo = "_logo_1n7j8_34";
+const splitViewButton = "_splitViewButton_1n7j8_146";
+const show = "_show_1n7j8_154";
+const hide = "_hide_1n7j8_161";
+const header = "_header_1n7j8_167";
+const headerText = "_headerText_1n7j8_175";
+const headerButton = "_headerButton_1n7j8_204";
+const wrapper$3 = "_wrapper_1n7j8_211";
+const controlWrapper = "_controlWrapper_1n7j8_214";
+const shadowRoot = "_shadowRoot_1n7j8_219";
+const content$1 = "_content_1n7j8_109";
 const styles$e = {
   themeVars: themeVars$4,
   nestedAppPlaceholder,
@@ -43913,12 +44073,14 @@ const styles$e = {
   headerText,
   headerButton,
   wrapper: wrapper$3,
+  controlWrapper,
   shadowRoot,
   content: content$1
 };
 const defaultProps$c = {
   allowPlaygroundPopup: true,
   withFrame: true,
+  allowReset: true,
   components: EMPTY_ARRAY
 };
 const COMP$f = "NestedApp";
@@ -44059,6 +44221,11 @@ It supports both side-by-side and stacked layouts.`,
       description: "This property defines whether the nested app should be displayed with a frame.",
       valueType: "boolean",
       defaultValue: defaultProps$c.withFrame
+    },
+    allowReset: {
+      description: "This property defines whether the reset button should be displayed in the header.",
+      valueType: "boolean",
+      defaultValue: defaultProps$c.allowReset
     }
   },
   themeVars: parseScssVar(styles$d.themeVars),
@@ -44098,7 +44265,8 @@ const appWithCodeViewComponentRenderer = createComponentRenderer(
         title: extractValue(node.props?.title),
         height: extractValue(node.props?.height),
         allowPlaygroundPopup: extractValue.asOptionalBoolean(node.props?.allowPlaygroundPopup),
-        withFrame: extractValue.asOptionalBoolean(node.props?.withFrame)
+        withFrame: extractValue.asOptionalBoolean(node.props?.withFrame),
+        allowReset: extractValue.asOptionalBoolean(node.props?.allowReset)
       }
     );
   }
@@ -47912,7 +48080,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.11.10";
+const version = "0.11.12";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -51366,9 +51534,6 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
     (url) => {
       const extractedUrl = valueExtractor(url);
       if (typeof extractedUrl !== "string" || extractedUrl.trim() === "") {
-        console.warn(
-          `Component '${safeNode.type}': the extracted resource URL is not a valid string: value ${extractedUrl}, type ${typeof extractedUrl}`
-        );
         return void 0;
       }
       return getResourceUrl(extractedUrl);
@@ -51433,7 +51598,7 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
     const behaviors = componentRegistry.getBehaviors();
     if (!isCompoundComponent) {
       for (const behavior of behaviors) {
-        if (behavior.canAttach(rendererContext.node, descriptor)) {
+        if (behavior.canAttach(rendererContext, rendererContext.node, descriptor)) {
           renderedNode = behavior.attach(rendererContext, renderedNode, descriptor);
         }
       }
@@ -52489,7 +52654,7 @@ const ComponentViewer = () => {
       return "";
     }
     const { start: start2, end: end2, fileId } = compSrc;
-    const slicedSrc = sources[fileId].slice(start2, end2);
+    const slicedSrc = sources[fileId].slice(start2, end2).replace(/inspect[\s\n]*=[\s\n]*"true"[\s\n]*/g, "");
     let dropEmptyLines = true;
     const prunedLines = [];
     let trimBeginCount = void 0;
@@ -52505,7 +52670,7 @@ const ComponentViewer = () => {
         }
       }
     });
-    return prunedLines.map((line2) => line2.slice(trimBeginCount).replace(/inspect="true"/g, "")).join("\n");
+    return prunedLines.map((line2) => line2.slice(trimBeginCount)).join("\n");
   }, [inspectedNode2, sources]);
   return define_process_env_default$2.VITE_USER_COMPONENTS_Inspect !== "false" && isOpen && inspectedNode2 !== null ? /* @__PURE__ */ jsx(InspectorDialog, { isOpen, setIsOpen, clickPosition, children: /* @__PURE__ */ jsx(
     AppWithCodeViewNative,
@@ -52515,6 +52680,7 @@ const ComponentViewer = () => {
       initiallyShowCode: appGlobals?.initiallyShowCode ?? true,
       splitView: true,
       controlsWidth: "120px",
+      allowReset: false,
       closeButton: /* @__PURE__ */ jsx(
         Tooltip$1,
         {
@@ -55564,7 +55730,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-JW5A3SpD.js");
+      const { initMock } = await import("./initMock-Dm6pyFPh.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -55581,7 +55747,7 @@ function ApiInterceptorProvider({
           if (define_process_env_default.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-Wgm2_zjg.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-JW5A3SpD.js")
+              import("./initMock-Dm6pyFPh.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -55618,7 +55784,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-Wgm2_zjg.js"),
-            import("./initMock-JW5A3SpD.js")
+            import("./initMock-Dm6pyFPh.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -55943,6 +56109,7 @@ function AppWithCodeViewNative({
   markdown: markdown2,
   splitView,
   withFrame = true,
+  allowReset = true,
   noHeader = false,
   initiallyShowCode = false,
   popOutUrl,
@@ -56025,7 +56192,7 @@ function AppWithCodeViewNative({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: styles$e.wrapper, style: { width: controlsWidth }, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$e.controlWrapper, style: { width: controlsWidth }, children: [
             allowPlaygroundPopup && /* @__PURE__ */ jsx(
               Tooltip$1,
               {
@@ -56042,7 +56209,7 @@ function AppWithCodeViewNative({
                 label: "View and edit in new full-width window"
               }
             ),
-            /* @__PURE__ */ jsx(
+            allowReset && /* @__PURE__ */ jsx(
               Tooltip$1,
               {
                 trigger: /* @__PURE__ */ jsx(
@@ -58577,7 +58744,10 @@ const collectedThemes = {
   xmluiOrange: XmlUiOrangeThemeDefinition,
   xmluiPurple: XmlUiPurpleThemeDefinition,
   xmluiCyan: XmlUiCyanThemeDefinition,
-  xmluiRed: XmlUiRedThemeDefinition
+  xmluiRed: XmlUiRedThemeDefinition,
+  xmluiDocs: XmlUiDocsThemeDefinition,
+  xmluiBlog: XmlUiBlogThemeDefinition,
+  xmluiWeb: XmlUiWebThemeDefinition
 };
 export {
   ThrowStatementError as T,