@lobehub/ui 4.35.2 → 4.36.0

package/es/Markdown/Markdown.d.mts

@@ -1,8 +1,8 @@
 import { MarkdownProps } from "./type.mjs";
-import * as react47 from "react";
+import * as react43 from "react";
 
 //#region src/Markdown/Markdown.d.ts
-declare const Markdown: react47.NamedExoticComponent<MarkdownProps>;
+declare const Markdown: react43.NamedExoticComponent<MarkdownProps>;
 //#endregion
 export { Markdown };
 //# sourceMappingURL=Markdown.d.mts.map

package/es/Markdown/Typography.d.mts

@@ -1,8 +1,8 @@
 import { TypographyProps } from "./type.mjs";
-import * as react46 from "react";
+import * as react42 from "react";
 
 //#region src/Markdown/Typography.d.ts
-declare const Typography: react46.NamedExoticComponent<TypographyProps>;
+declare const Typography: react42.NamedExoticComponent<TypographyProps>;
 //#endregion
 export { Typography };
 //# sourceMappingURL=Typography.d.mts.map

package/es/Markdown/components/SearchResultCards/index.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../../Flex/type.mjs";
 import "../../../Flex/index.mjs";
-import * as react81 from "react";
+import * as react86 from "react";
 import { Ref } from "react";
 
 //#region src/Markdown/components/SearchResultCards/index.d.ts
@@ -14,7 +14,7 @@ interface SearchResultCardsProps extends FlexboxProps {
   dataSource: string[] | SearchResultItem[];
   ref?: Ref<HTMLDivElement>;
 }
-declare const SearchResultCards: react81.NamedExoticComponent<SearchResultCardsProps>;
+declare const SearchResultCards: react86.NamedExoticComponent<SearchResultCardsProps>;
 //#endregion
 export { SearchResultCards, SearchResultCardsProps };
 //# sourceMappingURL=index.d.mts.map

package/es/Menu/Menu.d.mts

@@ -1,8 +1,8 @@
 import { MenuProps } from "./type.mjs";
-import * as react45 from "react";
+import * as react77 from "react";
 
 //#region src/Menu/Menu.d.ts
-declare const Menu: react45.NamedExoticComponent<MenuProps<unknown>>;
+declare const Menu: react77.NamedExoticComponent<MenuProps<unknown>>;
 //#endregion
 export { Menu };
 //# sourceMappingURL=Menu.d.mts.map

package/es/Mermaid/Mermaid.d.mts

@@ -1,8 +1,8 @@
 import { MermaidProps } from "./type.mjs";
-import * as react42 from "react";
+import * as react31 from "react";
 
 //#region src/Mermaid/Mermaid.d.ts
-declare const Mermaid: react42.NamedExoticComponent<MermaidProps>;
+declare const Mermaid: react31.NamedExoticComponent<MermaidProps>;
 //#endregion
 export { Mermaid };
 //# sourceMappingURL=Mermaid.d.mts.map

package/es/Mermaid/SyntaxMermaid/index.d.mts

@@ -1,8 +1,8 @@
 import { SyntaxMermaidProps } from "../type.mjs";
-import * as react43 from "react";
+import * as react30 from "react";
 
 //#region src/Mermaid/SyntaxMermaid/index.d.ts
-declare const SyntaxMermaid: react43.NamedExoticComponent<SyntaxMermaidProps>;
+declare const SyntaxMermaid: react30.NamedExoticComponent<SyntaxMermaidProps>;
 //#endregion
 export { SyntaxMermaid };
 //# sourceMappingURL=index.d.mts.map

package/es/Modal/imperative.d.mts

@@ -1,5 +1,5 @@
 import { ImperativeModalProps, ModalInstance, RawModalComponent, RawModalComponentProps, RawModalInstance, RawModalKeyOptions, RawModalOptions } from "./type.mjs";
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/Modal/imperative.d.ts
 type ModalHostProps = {
@@ -7,7 +7,7 @@ type ModalHostProps = {
 };
 declare const ModalHost: ({
   root
-}: ModalHostProps) => react_jsx_runtime41.JSX.Element | null;
+}: ModalHostProps) => react_jsx_runtime29.JSX.Element | null;
 declare const createModal: (props: ImperativeModalProps) => ModalInstance;
 declare function createRawModal<P extends RawModalComponentProps>(component: RawModalComponent<P>, props: Omit<P, 'open' | 'onClose'>, options?: RawModalOptions): RawModalInstance<P>;
 declare function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(component: RawModalComponent<P>, props: Omit<P, OpenKey | CloseKey>, options: RawModalKeyOptions<OpenKey, CloseKey>): RawModalInstance<P, OpenKey, CloseKey>;

package/es/MotionProvider/index.d.mts

@@ -1,4 +1,4 @@
-import * as react82 from "react";
+import * as react87 from "react";
 import { Context, ReactNode } from "react";
 import * as motion_react0 from "motion/react";
 import * as m from "motion/react-m";
@@ -6,7 +6,7 @@ import * as m from "motion/react-m";
 //#region src/MotionProvider/index.d.ts
 type MotionComponentType = typeof motion_react0.motion | typeof m;
 declare const MotionComponent: Context<MotionComponentType>;
-declare const MotionProvider: react82.NamedExoticComponent<{
+declare const MotionProvider: react87.NamedExoticComponent<{
   children: ReactNode;
   motion: MotionComponentType;
 }>;

package/es/Popover/ArrowIcon.d.mts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/Popover/ArrowIcon.d.ts
-declare const PopoverArrowIcon: react_jsx_runtime34.JSX.Element;
+declare const PopoverArrowIcon: react_jsx_runtime22.JSX.Element;
 //#endregion
 export { PopoverArrowIcon };
 //# sourceMappingURL=ArrowIcon.d.mts.map

package/es/Popover/PopoverPortal.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import { LOBE_THEME_APP_ID } from "../ThemeProvider/constants.mjs";
+import { useAppElement } from "../ThemeProvider/AppElementContext.mjs";
 import { useEffect, useState } from "react";
 
 //#region src/Popover/PopoverPortal.tsx
@@ -11,11 +11,6 @@ const getOrCreateContainer = (root) => {
 	const resolvedRoot = (() => {
 		if (typeof document === "undefined") return root;
 		if (typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot) return root;
-		if (!(root === document.body)) return root;
-		const themeApp = document.querySelector(`#${LOBE_THEME_APP_ID}`);
-		if (themeApp) return themeApp;
-		const popoverContainer = document.querySelector(`[${POPOVER_CONTAINER_ATTR}="true"]`);
-		if (popoverContainer) return popoverContainer;
 		return root;
 	})();
 	const cached = containerMap.get(resolvedRoot);
@@ -26,17 +21,18 @@ const getOrCreateContainer = (root) => {
 	containerMap.set(resolvedRoot, el);
 	return el;
 };
-const resolveRoot = (root) => {
-	if (root) return root;
-	return document.body;
-};
 const usePopoverPortalContainer = (root) => {
+	const appElement = useAppElement();
 	const [container, setContainer] = useState(null);
 	useEffect(() => {
-		const resolved = resolveRoot(root);
+		const resolved = root ?? appElement ?? document.body;
 		if (!resolved) return;
 		setContainer(getOrCreateContainer(resolved));
-	}, [root, container?.isConnected]);
+	}, [
+		root,
+		appElement,
+		container?.isConnected
+	]);
 	return container;
 };
 

package/es/Popover/PopoverPortal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverPortal.mjs","names":[],"sources":["../../src/Popover/PopoverPortal.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport { LOBE_THEME_APP_ID } from '@/ThemeProvider';\n\nconst PORTAL_ATTR = 'data-lobe-ui-popover-portal';\nexport const POPOVER_CONTAINER_ATTR = 'data-lobe-ui-popover-container';\n\n// Reuse one portal container per root (document.body by default).\nconst containerMap = new WeakMap<object, HTMLElement>();\n\nconst getOrCreateContainer = (root: HTMLElement | ShadowRoot): HTMLElement => {\n  const resolvedRoot = (() => {\n    if (typeof document === 'undefined') return root;\n    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) return root;\n\n    const isBody = root === document.body;\n    if (!isBody) return root;\n\n    const themeApp = document.querySelector<HTMLElement>(`#${LOBE_THEME_APP_ID}`);\n    if (themeApp) return themeApp;\n\n    const popoverContainer = document.querySelector<HTMLElement>(\n      `[${POPOVER_CONTAINER_ATTR}=\"true\"]`,\n    );\n    if (popoverContainer) return popoverContainer;\n\n    return root;\n  })();\n\n  const cached = containerMap.get(resolvedRoot);\n  if (cached && cached.isConnected) return cached;\n\n  const el = document.createElement('div');\n  el.setAttribute(PORTAL_ATTR, 'true');\n  resolvedRoot.append(el);\n  containerMap.set(resolvedRoot, el);\n  return el;\n};\n\nconst resolveRoot = (root?: HTMLElement | ShadowRoot | null): HTMLElement | ShadowRoot | null => {\n  if (root) return root;\n  return document.body;\n};\n\nexport const usePopoverPortalContainer = (\n  root?: HTMLElement | ShadowRoot | null,\n): HTMLElement | null => {\n  const [container, setContainer] = useState<HTMLElement | null>(null);\n\n  // Never mutate DOM / create portal container during render.\n  // Create it after mount to avoid SSR/hydration side effects.\n  useEffect(() => {\n    const resolved = resolveRoot(root);\n    if (!resolved) return;\n    setContainer(getOrCreateContainer(resolved));\n  }, [root, container?.isConnected]);\n\n  return container;\n};\n"],"mappings":";;;;;;AAMA,MAAM,cAAc;AACpB,MAAa,yBAAyB;AAGtC,MAAM,+BAAe,IAAI,SAA8B;AAEvD,MAAM,wBAAwB,SAAgD;CAC5E,MAAM,sBAAsB;AAC1B,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,MAAI,OAAO,eAAe,eAAe,gBAAgB,WAAY,QAAO;AAG5E,MAAI,EADW,SAAS,SAAS,MACpB,QAAO;EAEpB,MAAM,WAAW,SAAS,cAA2B,IAAI,oBAAoB;AAC7E,MAAI,SAAU,QAAO;EAErB,MAAM,mBAAmB,SAAS,cAChC,IAAI,uBAAuB,UAC5B;AACD,MAAI,iBAAkB,QAAO;AAE7B,SAAO;KACL;CAEJ,MAAM,SAAS,aAAa,IAAI,aAAa;AAC7C,KAAI,UAAU,OAAO,YAAa,QAAO;CAEzC,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,IAAG,aAAa,aAAa,OAAO;AACpC,cAAa,OAAO,GAAG;AACvB,cAAa,IAAI,cAAc,GAAG;AAClC,QAAO;;AAGT,MAAM,eAAe,SAA4E;AAC/F,KAAI,KAAM,QAAO;AACjB,QAAO,SAAS;;AAGlB,MAAa,6BACX,SACuB;CACvB,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAIpE,iBAAgB;EACd,MAAM,WAAW,YAAY,KAAK;AAClC,MAAI,CAAC,SAAU;AACf,eAAa,qBAAqB,SAAS,CAAC;IAC3C,CAAC,MAAM,WAAW,YAAY,CAAC;AAElC,QAAO"}
+{"version":3,"file":"PopoverPortal.mjs","names":[],"sources":["../../src/Popover/PopoverPortal.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport { useAppElement } from '@/ThemeProvider';\n\nconst PORTAL_ATTR = 'data-lobe-ui-popover-portal';\nexport const POPOVER_CONTAINER_ATTR = 'data-lobe-ui-popover-container';\n\n// Reuse one portal container per root (document.body by default).\nconst containerMap = new WeakMap<object, HTMLElement>();\n\nconst getOrCreateContainer = (root: HTMLElement | ShadowRoot): HTMLElement => {\n  const resolvedRoot = (() => {\n    if (typeof document === 'undefined') return root;\n    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) return root;\n\n    return root;\n  })();\n\n  const cached = containerMap.get(resolvedRoot);\n  if (cached && cached.isConnected) return cached;\n\n  const el = document.createElement('div');\n  el.setAttribute(PORTAL_ATTR, 'true');\n  resolvedRoot.append(el);\n  containerMap.set(resolvedRoot, el);\n  return el;\n};\n\nexport const usePopoverPortalContainer = (\n  root?: HTMLElement | ShadowRoot | null,\n): HTMLElement | null => {\n  const appElement = useAppElement();\n  const [container, setContainer] = useState<HTMLElement | null>(null);\n\n  // Never mutate DOM / create portal container during render.\n  // Create it after mount to avoid SSR/hydration side effects.\n  useEffect(() => {\n    const resolved = root ?? appElement ?? document.body;\n    if (!resolved) return;\n    setContainer(getOrCreateContainer(resolved));\n  }, [root, appElement, container?.isConnected]);\n\n  return container;\n};\n"],"mappings":";;;;;;AAMA,MAAM,cAAc;AACpB,MAAa,yBAAyB;AAGtC,MAAM,+BAAe,IAAI,SAA8B;AAEvD,MAAM,wBAAwB,SAAgD;CAC5E,MAAM,sBAAsB;AAC1B,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,MAAI,OAAO,eAAe,eAAe,gBAAgB,WAAY,QAAO;AAE5E,SAAO;KACL;CAEJ,MAAM,SAAS,aAAa,IAAI,aAAa;AAC7C,KAAI,UAAU,OAAO,YAAa,QAAO;CAEzC,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,IAAG,aAAa,aAAa,OAAO;AACpC,cAAa,OAAO,GAAG;AACvB,cAAa,IAAI,cAAc,GAAG;AAClC,QAAO;;AAGT,MAAa,6BACX,SACuB;CACvB,MAAM,aAAa,eAAe;CAClC,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAIpE,iBAAgB;EACd,MAAM,WAAW,QAAQ,cAAc,SAAS;AAChD,MAAI,CAAC,SAAU;AACf,eAAa,qBAAqB,SAAS,CAAC;IAC3C;EAAC;EAAM;EAAY,WAAW;EAAY,CAAC;AAE9C,QAAO"}

package/es/Popover/atoms.d.mts

@@ -1,13 +1,13 @@
 import { PopoverPlacement } from "./type.mjs";
-import * as react35 from "react";
+import * as react34 from "react";
 import { ComponentProps, ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime28 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 import * as _base_ui_react_popover0 from "@base-ui/react/popover";
 import { Popover } from "@base-ui/react/popover";
 
 //#region src/Popover/atoms.d.ts
 declare const PopoverRoot: typeof Popover.Root;
-declare const PopoverBackdrop: react35.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react35.RefAttributes<HTMLDivElement>>;
+declare const PopoverBackdrop: react34.ForwardRefExoticComponent<_base_ui_react_popover0.PopoverBackdropProps & react34.RefAttributes<HTMLDivElement>>;
 type PopoverTriggerElementProps = Omit<ComponentPropsWithRef<typeof Popover.Trigger>, 'children' | 'render'> & {
   children: ComponentProps<typeof Popover.Trigger>['children'];
 };
@@ -18,7 +18,7 @@ declare const PopoverTriggerElement: {
     nativeButton,
     ref: refProp,
     ...rest
-  }: PopoverTriggerElementProps): react_jsx_runtime28.JSX.Element;
+  }: PopoverTriggerElementProps): react_jsx_runtime23.JSX.Element;
   displayName: string;
 };
 type PopoverPortalAtomProps = Omit<ComponentProps<typeof Popover.Portal>, 'container'> & {
@@ -37,7 +37,7 @@ declare const PopoverPortal: {
     root,
     children,
     ...rest
-  }: PopoverPortalAtomProps): react_jsx_runtime28.JSX.Element | null;
+  }: PopoverPortalAtomProps): react_jsx_runtime23.JSX.Element | null;
   displayName: string;
 };
 type PopoverPositionerAtomProps = ComponentProps<typeof Popover.Positioner> & {
@@ -54,7 +54,7 @@ declare const PopoverPositioner: {
     side,
     sideOffset,
     ...rest
-  }: PopoverPositionerAtomProps): react_jsx_runtime28.JSX.Element;
+  }: PopoverPositionerAtomProps): react_jsx_runtime23.JSX.Element;
   displayName: string;
 };
 type PopoverPopupAtomProps = ComponentProps<typeof Popover.Popup>;
@@ -62,7 +62,7 @@ declare const PopoverPopup: {
   ({
     className,
     ...rest
-  }: PopoverPopupAtomProps): react_jsx_runtime28.JSX.Element;
+  }: PopoverPopupAtomProps): react_jsx_runtime23.JSX.Element;
   displayName: string;
 };
 type PopoverArrowAtomProps = ComponentProps<typeof Popover.Arrow>;
@@ -71,7 +71,7 @@ declare const PopoverArrow: {
     className,
     children,
     ...rest
-  }: PopoverArrowAtomProps): react_jsx_runtime28.JSX.Element;
+  }: PopoverArrowAtomProps): react_jsx_runtime23.JSX.Element;
   displayName: string;
 };
 type PopoverViewportAtomProps = ComponentProps<typeof Popover.Viewport>;
@@ -79,7 +79,7 @@ declare const PopoverViewport: {
   ({
     className,
     ...rest
-  }: PopoverViewportAtomProps): react_jsx_runtime28.JSX.Element;
+  }: PopoverViewportAtomProps): react_jsx_runtime23.JSX.Element;
   displayName: string;
 };
 //#endregion

package/es/Popover/context.d.mts

@@ -1,11 +1,11 @@
-import * as react37 from "react";
+import * as react32 from "react";
 import { ReactNode } from "react";
 
 //#region src/Popover/context.d.ts
 type PopoverContextValue = {
   close: () => void;
 };
-declare const PopoverProvider: react37.NamedExoticComponent<{
+declare const PopoverProvider: react32.NamedExoticComponent<{
   children: ReactNode;
   value: PopoverContextValue;
 }>;

package/es/ScrollArea/atoms.d.mts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 
 //#region src/ScrollArea/atoms.d.ts
@@ -19,7 +19,7 @@ declare const ScrollAreaRoot: {
   ({
     className,
     ...rest
-  }: ScrollAreaRootProps): react_jsx_runtime35.JSX.Element;
+  }: ScrollAreaRootProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaViewport: {
@@ -27,35 +27,35 @@ declare const ScrollAreaViewport: {
     className,
     scrollFade,
     ...rest
-  }: ScrollAreaViewportProps): react_jsx_runtime35.JSX.Element;
+  }: ScrollAreaViewportProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaContent: {
   ({
     className,
     ...rest
-  }: ScrollAreaContentProps): react_jsx_runtime35.JSX.Element;
+  }: ScrollAreaContentProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaScrollbar: {
   ({
     className,
     ...rest
-  }: ScrollAreaScrollbarProps): react_jsx_runtime35.JSX.Element;
+  }: ScrollAreaScrollbarProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaThumb: {
   ({
     className,
     ...rest
-  }: ScrollAreaThumbProps): react_jsx_runtime35.JSX.Element;
+  }: ScrollAreaThumbProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 declare const ScrollAreaCorner: {
   ({
     className,
     ...rest
-  }: ScrollAreaCornerProps): react_jsx_runtime35.JSX.Element;
+  }: ScrollAreaCornerProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 //#endregion

package/es/SearchBar/SearchBar.d.mts

@@ -1,8 +1,8 @@
 import { SearchBarProps } from "./type.mjs";
-import * as react18 from "react";
+import * as react26 from "react";
 
 //#region src/SearchBar/SearchBar.d.ts
-declare const SearchBar: react18.NamedExoticComponent<SearchBarProps>;
+declare const SearchBar: react26.NamedExoticComponent<SearchBarProps>;
 //#endregion
 export { SearchBar };
 //# sourceMappingURL=SearchBar.d.mts.map

package/es/Segmented/Segmented.d.mts

@@ -1,8 +1,8 @@
 import { SegmentedProps } from "./type.mjs";
-import * as react17 from "react";
+import * as react29 from "react";
 
 //#region src/Segmented/Segmented.d.ts
-declare const Segmented: react17.NamedExoticComponent<SegmentedProps>;
+declare const Segmented: react29.NamedExoticComponent<SegmentedProps>;
 //#endregion
 export { Segmented };
 //# sourceMappingURL=Segmented.d.mts.map

package/es/Select/Select.d.mts

@@ -1,11 +1,11 @@
 import { SelectProps } from "./type.mjs";
-import * as react13 from "react";
+import * as react27 from "react";
 
 //#region src/Select/Select.d.ts
 /**
  * @deprecated Use `LobeSelect` instead.
  */
-declare const Select: react13.NamedExoticComponent<SelectProps>;
+declare const Select: react27.NamedExoticComponent<SelectProps>;
 //#endregion
 export { Select };
 //# sourceMappingURL=Select.d.mts.map

package/es/SideNav/SideNav.d.mts

@@ -1,8 +1,8 @@
 import { SideNavProps } from "./type.mjs";
-import * as react11 from "react";
+import * as react28 from "react";
 
 //#region src/SideNav/SideNav.d.ts
-declare const SideNav: react11.NamedExoticComponent<SideNavProps>;
+declare const SideNav: react28.NamedExoticComponent<SideNavProps>;
 //#endregion
 export { SideNav };
 //# sourceMappingURL=SideNav.d.mts.map

package/es/SliderWithInput/SliderWithInput.d.mts

@@ -1,8 +1,8 @@
 import { SliderWithInputProps } from "./type.mjs";
-import * as react12 from "react";
+import * as react25 from "react";
 
 //#region src/SliderWithInput/SliderWithInput.d.ts
-declare const SliderWithInput: react12.NamedExoticComponent<SliderWithInputProps>;
+declare const SliderWithInput: react25.NamedExoticComponent<SliderWithInputProps>;
 //#endregion
 export { SliderWithInput };
 //# sourceMappingURL=SliderWithInput.d.mts.map

package/es/SortableList/components/DragHandle.d.mts

@@ -1,9 +1,9 @@
 import { ActionIconProps } from "../../ActionIcon/type.mjs";
 import "../../ActionIcon/index.mjs";
-import * as react120 from "react";
+import * as react121 from "react";
 
 //#region src/SortableList/components/DragHandle.d.ts
-declare const DragHandle: react120.NamedExoticComponent<ActionIconProps>;
+declare const DragHandle: react121.NamedExoticComponent<ActionIconProps>;
 //#endregion
 export { DragHandle };
 //# sourceMappingURL=DragHandle.d.mts.map

package/es/SortableList/components/SortableItem.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
-import * as react118 from "react";
+import * as react119 from "react";
 import "@dnd-kit/core";
 
 //#region src/SortableList/components/SortableItem.d.ts
@@ -9,7 +9,7 @@ interface SortableItemProps extends Omit<FlexboxProps, 'id'> {
   id: string | number;
   variant?: 'borderless' | 'filled' | 'outlined';
 }
-declare const SortableItem: react118.NamedExoticComponent<SortableItemProps>;
+declare const SortableItem: react119.NamedExoticComponent<SortableItemProps>;
 //#endregion
 export { SortableItem };
 //# sourceMappingURL=SortableItem.d.mts.map

package/es/ThemeProvider/AppElementContext.d.mts

@@ -0,0 +1,7 @@
+import "react";
+
+//#region src/ThemeProvider/AppElementContext.d.ts
+declare const useAppElement: () => HTMLDivElement | null;
+//#endregion
+export { useAppElement };
+//# sourceMappingURL=AppElementContext.d.mts.map

package/es/ThemeProvider/AppElementContext.mjs

@@ -0,0 +1,14 @@
+'use client';
+
+import { createContext, use } from "react";
+
+//#region src/ThemeProvider/AppElementContext.tsx
+const AppElementContext = createContext(null);
+const useAppElement = () => {
+	return use(AppElementContext);
+};
+var AppElementContext_default = AppElementContext;
+
+//#endregion
+export { AppElementContext_default as default, useAppElement };
+//# sourceMappingURL=AppElementContext.mjs.map

package/es/ThemeProvider/AppElementContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppElementContext.mjs","names":[],"sources":["../../src/ThemeProvider/AppElementContext.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nconst AppElementContext = createContext<HTMLDivElement | null>(null);\n\nexport const useAppElement = (): HTMLDivElement | null => {\n  return use(AppElementContext);\n};\n\nexport default AppElementContext;\n"],"mappings":";;;;;AAIA,MAAM,oBAAoB,cAAqC,KAAK;AAEpE,MAAa,sBAA6C;AACxD,QAAO,IAAI,kBAAkB;;AAG/B,gCAAe"}

package/es/ThemeProvider/GlobalStyle/global.mjs

@@ -1,4 +1,3 @@
-import { LOBE_THEME_APP_ID } from "../constants.mjs";
 import { CLASSNAMES } from "../../styles/classNames.mjs";
 import { css } from "antd-style";
 
@@ -63,10 +62,7 @@ var global_default = (token) => css`
     box-sizing: border-box;
     vertical-align: baseline;
   }
-  #${LOBE_THEME_APP_ID} {
-    /* https://base-ui.com/react/overview/quick-start#set-up-portals */
-    isolation: isolate;
-  }
+
   @layer lobe-popup {
     .${CLASSNAMES.ContextTrigger}[data-popup-open],
       .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {
@@ -85,30 +81,27 @@ var global_default = (token) => css`
       --lobe-flex-width: auto;
       --lobe-flex-height: auto;
       --lobe-flex-padding: 0;
+
       /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */
       --lobe-flex-padding-inline: var(--lobe-flex-padding);
       --lobe-flex-padding-block: var(--lobe-flex-padding);
       --lobe-flex-gap: 0;
 
       display: flex;
-
       flex: var(--lobe-flex);
-      flex-direction: var(--lobe-flex-direction);
-      flex-wrap: var(--lobe-flex-wrap);
-      justify-content: var(--lobe-flex-justify);
+      flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);
+      gap: var(--lobe-flex-gap);
       align-items: var(--lobe-flex-align);
+      justify-content: var(--lobe-flex-justify);
 
       width: var(--lobe-flex-width);
       height: var(--lobe-flex-height);
-
       padding: var(--lobe-flex-padding);
-      padding-inline: var(--lobe-flex-padding-inline);
       padding-block: var(--lobe-flex-padding-block);
-
-      gap: var(--lobe-flex-gap);
+      padding-inline: var(--lobe-flex-padding-inline);
     }
 
-    .lobe-flex--hidden {
+    .lobe-flex-hidden {
       display: none;
     }
   }
@@ -126,17 +119,17 @@ var global_default = (token) => css`
 
   @keyframes fill {
     30% {
-      fill-opacity: 5%;
+      fill-opacity: 0.05;
     }
 
     100% {
-      fill-opacity: 100%;
+      fill-opacity: 1;
     }
   }
 
   .lobe-brand-loading path {
     fill: currentcolor;
-    fill-opacity: 0%;
+    fill-opacity: 0;
     stroke: currentcolor;
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;

package/es/ThemeProvider/GlobalStyle/global.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"global.mjs","names":[],"sources":["../../../src/ThemeProvider/GlobalStyle/global.ts"],"sourcesContent":["import { css, type Theme } from 'antd-style';\n\nimport { CLASSNAMES } from '@/styles/classNames';\n\nimport { LOBE_THEME_APP_ID } from '../constants';\n\nexport default (token: Theme) => css`\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n    color-scheme: ${token.isDarkMode ? 'dark' : 'light'};\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-family: ${token.fontFamily};\n    font-size: ${token.fontSize}px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    line-height: 1;\n    color: ${token.colorTextBase};\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    word-wrap: break-word;\n    vertical-align: baseline;\n\n    background-color: ${token.colorBgLayout};\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  code {\n    font-family: ${token.fontFamilyCode} !important;\n\n    span {\n      font-family: ${token.fontFamilyCode} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${token.yellow9};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${token.colorFill} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n  #${LOBE_THEME_APP_ID} {\n    /* https://base-ui.com/react/overview/quick-start#set-up-portals */\n    isolation: isolate;\n  }\n  @layer lobe-popup {\n    .${CLASSNAMES.ContextTrigger}[data-popup-open],\n      .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {\n      background: ${token.colorFillTertiary};\n    }\n  }\n\n  @layer lobe-base {\n    :where(.lobe-flex) {\n      /* Define defaults on the element itself to avoid CSS variable inheritance leaking to nested Flex */\n      --lobe-flex: 0 1 auto;\n      --lobe-flex-direction: column;\n      --lobe-flex-wrap: nowrap;\n      --lobe-flex-justify: flex-start;\n      --lobe-flex-align: stretch;\n      --lobe-flex-width: auto;\n      --lobe-flex-height: auto;\n      --lobe-flex-padding: 0;\n      /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */\n      --lobe-flex-padding-inline: var(--lobe-flex-padding);\n      --lobe-flex-padding-block: var(--lobe-flex-padding);\n      --lobe-flex-gap: 0;\n\n      display: flex;\n\n      flex: var(--lobe-flex);\n      flex-direction: var(--lobe-flex-direction);\n      flex-wrap: var(--lobe-flex-wrap);\n      justify-content: var(--lobe-flex-justify);\n      align-items: var(--lobe-flex-align);\n\n      width: var(--lobe-flex-width);\n      height: var(--lobe-flex-height);\n\n      padding: var(--lobe-flex-padding);\n      padding-inline: var(--lobe-flex-padding-inline);\n      padding-block: var(--lobe-flex-padding-block);\n\n      gap: var(--lobe-flex-gap);\n    }\n\n    .lobe-flex--hidden {\n      display: none;\n    }\n  }\n\n  /* Brand Loading */\n  @keyframes draw {\n    0% {\n      stroke-dashoffset: 1000;\n    }\n\n    100% {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  @keyframes fill {\n    30% {\n      fill-opacity: 5%;\n    }\n\n    100% {\n      fill-opacity: 100%;\n    }\n  }\n\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0%;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n`;\n"],"mappings":";;;;;AAMA,sBAAgB,UAAiB,GAAG;;;;;;;;;;oBAUhB,MAAM,aAAa,SAAS,QAAQ;;;;;;;;;;mBAUrC,MAAM,WAAW;iBACnB,MAAM,SAAS;;;;;;aAMnB,MAAM,cAAc;;;;;;wBAMT,MAAM,cAAc;;;;;;;mBAOzB,MAAM,eAAe;;;qBAGnB,MAAM,eAAe;;;;;;kBAMxB,MAAM,QAAQ;;;;;;uBAMT,MAAM,UAAU;;;;;KAKlC,kBAAkB;;;;;OAKhB,WAAW,eAAe;SACxB,WAAW,oBAAoB;oBACpB,MAAM,kBAAkB"}
+{"version":3,"file":"global.mjs","names":[],"sources":["../../../src/ThemeProvider/GlobalStyle/global.ts"],"sourcesContent":["import { css, type Theme } from 'antd-style';\n\nimport { CLASSNAMES } from '@/styles/classNames';\n\nexport default (token: Theme) => css`\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n    color-scheme: ${token.isDarkMode ? 'dark' : 'light'};\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-family: ${token.fontFamily};\n    font-size: ${token.fontSize}px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    line-height: 1;\n    color: ${token.colorTextBase};\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    word-wrap: break-word;\n    vertical-align: baseline;\n\n    background-color: ${token.colorBgLayout};\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  code {\n    font-family: ${token.fontFamilyCode} !important;\n\n    span {\n      font-family: ${token.fontFamilyCode} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${token.yellow9};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${token.colorFill} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n\n  @layer lobe-popup {\n    .${CLASSNAMES.ContextTrigger}[data-popup-open],\n      .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {\n      background: ${token.colorFillTertiary};\n    }\n  }\n\n  @layer lobe-base {\n    :where(.lobe-flex) {\n      /* Define defaults on the element itself to avoid CSS variable inheritance leaking to nested Flex */\n      --lobe-flex: 0 1 auto;\n      --lobe-flex-direction: column;\n      --lobe-flex-wrap: nowrap;\n      --lobe-flex-justify: flex-start;\n      --lobe-flex-align: stretch;\n      --lobe-flex-width: auto;\n      --lobe-flex-height: auto;\n      --lobe-flex-padding: 0;\n\n      /* Keep padding-inline/block aligned with padding by default, and prevent inheriting from parent */\n      --lobe-flex-padding-inline: var(--lobe-flex-padding);\n      --lobe-flex-padding-block: var(--lobe-flex-padding);\n      --lobe-flex-gap: 0;\n\n      display: flex;\n      flex: var(--lobe-flex);\n      flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n      gap: var(--lobe-flex-gap);\n      align-items: var(--lobe-flex-align);\n      justify-content: var(--lobe-flex-justify);\n\n      width: var(--lobe-flex-width);\n      height: var(--lobe-flex-height);\n      padding: var(--lobe-flex-padding);\n      padding-block: var(--lobe-flex-padding-block);\n      padding-inline: var(--lobe-flex-padding-inline);\n    }\n\n    .lobe-flex-hidden {\n      display: none;\n    }\n  }\n\n  /* Brand Loading */\n  @keyframes draw {\n    0% {\n      stroke-dashoffset: 1000;\n    }\n\n    100% {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  @keyframes fill {\n    30% {\n      fill-opacity: 0.05;\n    }\n\n    100% {\n      fill-opacity: 1;\n    }\n  }\n\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n`;\n"],"mappings":";;;;AAIA,sBAAgB,UAAiB,GAAG;;;;;;;;;;oBAUhB,MAAM,aAAa,SAAS,QAAQ;;;;;;;;;;mBAUrC,MAAM,WAAW;iBACnB,MAAM,SAAS;;;;;;aAMnB,MAAM,cAAc;;;;;;wBAMT,MAAM,cAAc;;;;;;;mBAOzB,MAAM,eAAe;;;qBAGnB,MAAM,eAAe;;;;;;kBAMxB,MAAM,QAAQ;;;;;;uBAMT,MAAM,UAAU;;;;;;;OAOhC,WAAW,eAAe;SACxB,WAAW,oBAAoB;oBACpB,MAAM,kBAAkB"}

package/es/ThemeProvider/ThemeProvider.d.mts

@@ -1,8 +1,8 @@
 import { ThemeProviderProps } from "./type.mjs";
-import * as react10 from "react";
+import * as react36 from "react";
 
 //#region src/ThemeProvider/ThemeProvider.d.ts
-declare const ThemeProvider: react10.NamedExoticComponent<ThemeProviderProps>;
+declare const ThemeProvider: react36.NamedExoticComponent<ThemeProviderProps>;
 //#endregion
 export { ThemeProvider };
 //# sourceMappingURL=ThemeProvider.d.mts.map

package/es/ThemeProvider/ThemeProvider.mjs

@@ -3,12 +3,13 @@
 import { useCdnFn } from "../ConfigProvider/index.mjs";
 import { generateCustomStylish } from "../styles/theme/customStylish.mjs";
 import { generateCustomToken } from "../styles/theme/customToken.mjs";
+import AppElementContext_default from "./AppElementContext.mjs";
 import { LOBE_THEME_APP_ID } from "./constants.mjs";
 import FontLoader_default from "../FontLoader/index.mjs";
 import { createLobeAntdTheme } from "../styles/theme/antdTheme.mjs";
 import ConfigProvider_default from "./ConfigProvider.mjs";
 import GlobalStyle_default from "./GlobalStyle/index.mjs";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { App } from "antd";
 import { ThemeProvider } from "antd-style";
@@ -17,6 +18,7 @@ import { merge } from "es-toolkit/compat";
 //#region src/ThemeProvider/ThemeProvider.tsx
 const ThemeProvider$1 = memo(({ children, customStylish, customToken, enableCustomFonts = true, enableGlobalStyle = true, customFonts, customTheme = {}, className, style, theme: antdTheme, ...rest }) => {
 	const genCdnUrl = useCdnFn();
+	const [appRef, setAppRef] = useState(null);
 	const webfontUrls = useMemo(() => customFonts || [
 		genCdnUrl({
 			path: "css/index.css",
@@ -62,14 +64,19 @@ const ThemeProvider$1 = memo(({ children, customStylish, customToken, enableCust
 		children: /* @__PURE__ */ jsxs(ConfigProvider_default, { children: [enableGlobalStyle && /* @__PURE__ */ jsx(GlobalStyle_default, {}), /* @__PURE__ */ jsx(App, {
 			className,
 			style: {
+				isolation: "isolate",
 				minHeight: "inherit",
 				width: "inherit",
 				...style
 			},
 			children: /* @__PURE__ */ jsx("div", {
 				id: LOBE_THEME_APP_ID,
+				ref: setAppRef,
 				style: { display: "contents" },
-				children
+				children: /* @__PURE__ */ jsx(AppElementContext_default, {
+					value: appRef,
+					children
+				})
 			})
 		})] })
 	})] });

package/es/ThemeProvider/ThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.mjs","names":["ThemeProvider","lobeCustomStylish","theme","lobeCustomToken","FontLoader","AntdThemeProvider","AntdConfigProvider","GlobalStyle"],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["'use client';\n\nimport { App } from 'antd';\nimport {\n  type CustomStylishParams,\n  type CustomTokenParams,\n  type GetAntdTheme,\n  ThemeProvider as AntdThemeProvider,\n} from 'antd-style';\nimport { merge } from 'es-toolkit/compat';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport FontLoader from '@/FontLoader';\nimport { lobeCustomStylish, lobeCustomToken } from '@/styles';\nimport { createLobeAntdTheme } from '@/styles/theme/antdTheme';\nimport { type LobeCustomToken } from '@/types/customToken';\n\nimport AntdConfigProvider from './ConfigProvider';\nimport { LOBE_THEME_APP_ID } from './constants';\nimport GlobalStyle from './GlobalStyle';\nimport { type ThemeProviderProps } from './type';\n\nconst ThemeProvider = memo<ThemeProviderProps>(\n  ({\n    children,\n    customStylish,\n    customToken,\n    enableCustomFonts = true,\n    enableGlobalStyle = true,\n    customFonts,\n    customTheme = {},\n    className,\n    style,\n    theme: antdTheme,\n    ...rest\n  }) => {\n    const genCdnUrl = useCdnFn();\n\n    const webfontUrls = useMemo(\n      () =>\n        customFonts || [\n          genCdnUrl({ path: 'css/index.css', pkg: '@lobehub/webfont-mono' }),\n          genCdnUrl({\n            path: 'css/index.css',\n            pkg: '@lobehub/webfont-harmony-sans',\n          }),\n          genCdnUrl({\n            path: 'css/index.css',\n            pkg: '@lobehub/webfont-harmony-sans-sc',\n          }),\n          genCdnUrl({ path: 'dist/katex.min.css', pkg: 'katex' }),\n        ],\n      [customFonts, genCdnUrl],\n    );\n\n    const stylish = useCallback(\n      (theme: CustomStylishParams) => ({ ...lobeCustomStylish(theme), ...customStylish?.(theme) }),\n      [customStylish],\n    );\n\n    const token = useCallback(\n      (theme: CustomTokenParams) => ({ ...lobeCustomToken(theme), ...customToken?.(theme) }),\n      [customToken],\n    );\n\n    const theme = useCallback<GetAntdTheme>(\n      (appearance) => {\n        const lobeTheme = createLobeAntdTheme({\n          appearance,\n          neutralColor: customTheme.neutralColor,\n          primaryColor: customTheme.primaryColor,\n        });\n        return merge(lobeTheme, antdTheme);\n      },\n      [customTheme.primaryColor, customTheme.neutralColor, antdTheme],\n    );\n\n    return (\n      <>\n        {enableCustomFonts &&\n          webfontUrls?.length > 0 &&\n          webfontUrls.map((webfont) => <FontLoader key={webfont} url={webfont} />)}\n        <AntdThemeProvider<LobeCustomToken>\n          customStylish={stylish}\n          customToken={token}\n          theme={theme}\n          {...rest}\n        >\n          <AntdConfigProvider>\n            {enableGlobalStyle && <GlobalStyle />}\n\n            <App className={className} style={{ minHeight: 'inherit', width: 'inherit', ...style }}>\n              <div id={LOBE_THEME_APP_ID} style={{ display: 'contents' }}>\n                {children}\n              </div>\n            </App>\n          </AntdConfigProvider>\n        </AntdThemeProvider>\n      </>\n    );\n  },\n);\n\nThemeProvider.displayName = 'LobeThemeProvider';\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAMA,kBAAgB,MACnB,EACC,UACA,eACA,aACA,oBAAoB,MACpB,oBAAoB,MACpB,aACA,cAAc,EAAE,EAChB,WACA,OACA,OAAO,WACP,GAAG,WACC;CACJ,MAAM,YAAY,UAAU;CAE5B,MAAM,cAAc,cAEhB,eAAe;EACb,UAAU;GAAE,MAAM;GAAiB,KAAK;GAAyB,CAAC;EAClE,UAAU;GACR,MAAM;GACN,KAAK;GACN,CAAC;EACF,UAAU;GACR,MAAM;GACN,KAAK;GACN,CAAC;EACF,UAAU;GAAE,MAAM;GAAsB,KAAK;GAAS,CAAC;EACxD,EACH,CAAC,aAAa,UAAU,CACzB;CAED,MAAM,UAAU,aACb,aAAgC;EAAE,GAAGC,sBAAkBC,QAAM;EAAE,GAAG,gBAAgBA,QAAM;EAAE,GAC3F,CAAC,cAAc,CAChB;CAED,MAAM,QAAQ,aACX,aAA8B;EAAE,GAAGC,oBAAgBD,QAAM;EAAE,GAAG,cAAcA,QAAM;EAAE,GACrF,CAAC,YAAY,CACd;CAED,MAAM,QAAQ,aACX,eAAe;AAMd,SAAO,MALW,oBAAoB;GACpC;GACA,cAAc,YAAY;GAC1B,cAAc,YAAY;GAC3B,CAAC,EACsB,UAAU;IAEpC;EAAC,YAAY;EAAc,YAAY;EAAc;EAAU,CAChE;AAED,QACE,8CACG,qBACC,aAAa,SAAS,KACtB,YAAY,KAAK,YAAY,oBAACE,sBAAyB,KAAK,WAAd,QAAyB,CAAC,EAC1E,oBAACC;EACC,eAAe;EACf,aAAa;EACN;EACP,GAAI;YAEJ,qBAACC,qCACE,qBAAqB,oBAACC,wBAAc,EAErC,oBAAC;GAAe;GAAW,OAAO;IAAE,WAAW;IAAW,OAAO;IAAW,GAAG;IAAO;aACpF,oBAAC;IAAI,IAAI;IAAmB,OAAO,EAAE,SAAS,YAAY;IACvD;KACG;IACF,IACa;GACH,IACnB;EAGR;AAED,gBAAc,cAAc;AAE5B,4BAAeP"}
+{"version":3,"file":"ThemeProvider.mjs","names":["ThemeProvider","lobeCustomStylish","theme","lobeCustomToken","FontLoader","AntdThemeProvider","AntdConfigProvider","GlobalStyle","AppElementContext"],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["'use client';\n\nimport { App } from 'antd';\nimport {\n  type CustomStylishParams,\n  type CustomTokenParams,\n  type GetAntdTheme,\n  ThemeProvider as AntdThemeProvider,\n} from 'antd-style';\nimport { merge } from 'es-toolkit/compat';\nimport { memo, useCallback, useMemo, useState } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport FontLoader from '@/FontLoader';\nimport { lobeCustomStylish, lobeCustomToken } from '@/styles';\nimport { createLobeAntdTheme } from '@/styles/theme/antdTheme';\nimport { type LobeCustomToken } from '@/types/customToken';\n\nimport AppElementContext from './AppElementContext';\nimport AntdConfigProvider from './ConfigProvider';\nimport { LOBE_THEME_APP_ID } from './constants';\nimport GlobalStyle from './GlobalStyle';\nimport { type ThemeProviderProps } from './type';\n\nconst ThemeProvider = memo<ThemeProviderProps>(\n  ({\n    children,\n    customStylish,\n    customToken,\n    enableCustomFonts = true,\n    enableGlobalStyle = true,\n    customFonts,\n    customTheme = {},\n    className,\n    style,\n    theme: antdTheme,\n    ...rest\n  }) => {\n    const genCdnUrl = useCdnFn();\n    const [appRef, setAppRef] = useState<HTMLDivElement | null>(null);\n\n    const webfontUrls = useMemo(\n      () =>\n        customFonts || [\n          genCdnUrl({ path: 'css/index.css', pkg: '@lobehub/webfont-mono' }),\n          genCdnUrl({\n            path: 'css/index.css',\n            pkg: '@lobehub/webfont-harmony-sans',\n          }),\n          genCdnUrl({\n            path: 'css/index.css',\n            pkg: '@lobehub/webfont-harmony-sans-sc',\n          }),\n          genCdnUrl({ path: 'dist/katex.min.css', pkg: 'katex' }),\n        ],\n      [customFonts, genCdnUrl],\n    );\n\n    const stylish = useCallback(\n      (theme: CustomStylishParams) => ({ ...lobeCustomStylish(theme), ...customStylish?.(theme) }),\n      [customStylish],\n    );\n\n    const token = useCallback(\n      (theme: CustomTokenParams) => ({ ...lobeCustomToken(theme), ...customToken?.(theme) }),\n      [customToken],\n    );\n\n    const theme = useCallback<GetAntdTheme>(\n      (appearance) => {\n        const lobeTheme = createLobeAntdTheme({\n          appearance,\n          neutralColor: customTheme.neutralColor,\n          primaryColor: customTheme.primaryColor,\n        });\n        return merge(lobeTheme, antdTheme);\n      },\n      [customTheme.primaryColor, customTheme.neutralColor, antdTheme],\n    );\n\n    return (\n      <>\n        {enableCustomFonts &&\n          webfontUrls?.length > 0 &&\n          webfontUrls.map((webfont) => <FontLoader key={webfont} url={webfont} />)}\n        <AntdThemeProvider<LobeCustomToken>\n          customStylish={stylish}\n          customToken={token}\n          theme={theme}\n          {...rest}\n        >\n          <AntdConfigProvider>\n            {enableGlobalStyle && <GlobalStyle />}\n\n            <App\n              className={className}\n              style={{ isolation: 'isolate', minHeight: 'inherit', width: 'inherit', ...style }}\n            >\n              <div id={LOBE_THEME_APP_ID} ref={setAppRef} style={{ display: 'contents' }}>\n                <AppElementContext value={appRef}>{children}</AppElementContext>\n              </div>\n            </App>\n          </AntdConfigProvider>\n        </AntdThemeProvider>\n      </>\n    );\n  },\n);\n\nThemeProvider.displayName = 'LobeThemeProvider';\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAMA,kBAAgB,MACnB,EACC,UACA,eACA,aACA,oBAAoB,MACpB,oBAAoB,MACpB,aACA,cAAc,EAAE,EAChB,WACA,OACA,OAAO,WACP,GAAG,WACC;CACJ,MAAM,YAAY,UAAU;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAgC,KAAK;CAEjE,MAAM,cAAc,cAEhB,eAAe;EACb,UAAU;GAAE,MAAM;GAAiB,KAAK;GAAyB,CAAC;EAClE,UAAU;GACR,MAAM;GACN,KAAK;GACN,CAAC;EACF,UAAU;GACR,MAAM;GACN,KAAK;GACN,CAAC;EACF,UAAU;GAAE,MAAM;GAAsB,KAAK;GAAS,CAAC;EACxD,EACH,CAAC,aAAa,UAAU,CACzB;CAED,MAAM,UAAU,aACb,aAAgC;EAAE,GAAGC,sBAAkBC,QAAM;EAAE,GAAG,gBAAgBA,QAAM;EAAE,GAC3F,CAAC,cAAc,CAChB;CAED,MAAM,QAAQ,aACX,aAA8B;EAAE,GAAGC,oBAAgBD,QAAM;EAAE,GAAG,cAAcA,QAAM;EAAE,GACrF,CAAC,YAAY,CACd;CAED,MAAM,QAAQ,aACX,eAAe;AAMd,SAAO,MALW,oBAAoB;GACpC;GACA,cAAc,YAAY;GAC1B,cAAc,YAAY;GAC3B,CAAC,EACsB,UAAU;IAEpC;EAAC,YAAY;EAAc,YAAY;EAAc;EAAU,CAChE;AAED,QACE,8CACG,qBACC,aAAa,SAAS,KACtB,YAAY,KAAK,YAAY,oBAACE,sBAAyB,KAAK,WAAd,QAAyB,CAAC,EAC1E,oBAACC;EACC,eAAe;EACf,aAAa;EACN;EACP,GAAI;YAEJ,qBAACC,qCACE,qBAAqB,oBAACC,wBAAc,EAErC,oBAAC;GACY;GACX,OAAO;IAAE,WAAW;IAAW,WAAW;IAAW,OAAO;IAAW,GAAG;IAAO;aAEjF,oBAAC;IAAI,IAAI;IAAmB,KAAK;IAAW,OAAO,EAAE,SAAS,YAAY;cACxE,oBAACC;KAAkB,OAAO;KAAS;MAA6B;KAC5D;IACF,IACa;GACH,IACnB;EAGR;AAED,gBAAc,cAAc;AAE5B,4BAAeR"}

package/es/ThemeProvider/index.d.mts

@@ -1,5 +1,6 @@
+import { useAppElement } from "./AppElementContext.mjs";
 import { LOBE_THEME_APP_ID } from "./constants.mjs";
 import { MetaProps, ThemeProviderProps } from "./type.mjs";
 import { Meta } from "./Meta.mjs";
 import { ThemeProvider } from "./ThemeProvider.mjs";
-export { LOBE_THEME_APP_ID, Meta, MetaProps, ThemeProviderProps, ThemeProvider as default };
+export { LOBE_THEME_APP_ID, Meta, MetaProps, ThemeProviderProps, ThemeProvider as default, useAppElement };