@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/FloatingPanel/FloatingPanel.mjs

@@ -0,0 +1,338 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { ModalBackdrop, ModalCloseImpl, ModalContentImpl, ModalFooterImpl, ModalHeaderImpl, ModalPopupImpl, ModalPortal, ModalRoot, ModalTitleImpl } from "../Modal/atoms.mjs";
+import { styles } from "./style.mjs";
+import { ToastDodge } from "./ToastDodge.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as stylex from "@stylexjs/stylex";
+import { X } from "lucide-react";
+//#region src/FloatingPanel/FloatingPanel.tsx
+const DEFAULT_MIN_HEIGHT = 180;
+const DEFAULT_MIN_WIDTH = 320;
+const defaultMotionProps = {
+	animate: {
+		opacity: 1,
+		scale: 1,
+		x: 0,
+		y: 0
+	},
+	exit: {
+		opacity: 0,
+		scale: .98,
+		transition: {
+			duration: .14,
+			ease: [
+				.4,
+				0,
+				1,
+				1
+			]
+		},
+		y: 12
+	},
+	initial: {
+		opacity: 0,
+		scale: .98,
+		y: 12
+	},
+	transition: {
+		duration: .2,
+		ease: [
+			.32,
+			.72,
+			0,
+			1
+		]
+	}
+};
+const topMotionProps = {
+	animate: {
+		opacity: 1,
+		scale: 1,
+		x: 0,
+		y: 0
+	},
+	exit: {
+		opacity: 0,
+		scale: .98,
+		transition: {
+			duration: .14,
+			ease: [
+				.4,
+				0,
+				1,
+				1
+			]
+		},
+		y: -12
+	},
+	initial: {
+		opacity: 0,
+		scale: .98,
+		y: -12
+	},
+	transition: {
+		duration: .2,
+		ease: [
+			.32,
+			.72,
+			0,
+			1
+		]
+	}
+};
+const resolveOffset = (offset) => {
+	if (typeof offset === "object") return {
+		x: offset.x ?? 8,
+		y: offset.y ?? 8
+	};
+	return {
+		x: offset,
+		y: offset
+	};
+};
+const getPlacementStyle = (placement, offset) => {
+	const { x, y } = resolveOffset(offset);
+	const isTop = placement.startsWith("top");
+	const isLeft = placement.endsWith("Left");
+	const px = (value) => typeof value === "number" ? `${value}px` : value;
+	const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;
+	const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;
+	return {
+		alignItems: isTop ? "flex-start" : "flex-end",
+		justifyContent: isLeft ? "flex-start" : "flex-end",
+		paddingBlockEnd: isTop ? void 0 : blockInset,
+		paddingBlockStart: isTop ? blockInset : void 0,
+		paddingInlineEnd: isLeft ? void 0 : inlineInset,
+		paddingInlineStart: isLeft ? inlineInset : void 0
+	};
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const getViewportMaxSize = () => ({
+	height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),
+	width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16)
+});
+const getResizeHandles = (placement) => {
+	switch (placement) {
+		case "bottomLeft": return [
+			"top",
+			"right",
+			"topRight"
+		];
+		case "topLeft": return [
+			"bottom",
+			"right",
+			"bottomRight"
+		];
+		case "topRight": return [
+			"bottom",
+			"left",
+			"bottomLeft"
+		];
+		default: return [
+			"top",
+			"left",
+			"topLeft"
+		];
+	}
+};
+const getResizeHandleClassName = (s, handle) => {
+	return {
+		bottom: s.resizeHandleBottom,
+		bottomLeft: s.resizeHandleBottomLeft,
+		bottomRight: s.resizeHandleBottomRight,
+		left: s.resizeHandleLeft,
+		right: s.resizeHandleRight,
+		top: s.resizeHandleTop,
+		topLeft: s.resizeHandleTopLeft,
+		topRight: s.resizeHandleTopRight
+	}[handle];
+};
+const resolveResizeSize = ({ handle, maxHeight, maxWidth, minHeight, minWidth, startHeight, startWidth, startX, startY, x, y }) => {
+	const deltaX = x - startX;
+	const deltaY = y - startY;
+	const growsLeft = handle.includes("Left") || handle === "left";
+	const growsRight = handle.includes("Right") || handle === "right";
+	const growsTop = handle.includes("top") || handle === "top";
+	const growsBottom = handle.includes("bottom") || handle === "bottom";
+	const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;
+	const nextHeight = growsTop ? startHeight - deltaY : growsBottom ? startHeight + deltaY : startHeight;
+	return {
+		height: clamp(nextHeight, minHeight, maxHeight),
+		width: clamp(nextWidth, minWidth, maxWidth)
+	};
+};
+const FloatingPanel = memo(({ afterClose, ariaLabel, children, className, classNames, closable = true, closeIcon, closeLabel = "Close", defaultOpen, actions, footer, getContainer, height, keyboard = true, mask = false, maskClosable = true, maxHeight, maxWidth, minHeight = DEFAULT_MIN_HEIGHT, minWidth = DEFAULT_MIN_WIDTH, modal = false, motionProps, offset = 8, onClose, onOpenChange, onResize, onResizeEnd, open, placement = "bottomRight", resizable = true, styles: semanticStyles, title, width = 640, zIndex }) => {
+	const s = styles;
+	const isTop = placement.startsWith("top");
+	const container = getContainer === false ? void 0 : getContainer;
+	const [resizeSize, setResizeSize] = useState();
+	const latestResizeSizeRef = useRef(void 0);
+	const resizeCleanupRef = useRef(void 0);
+	const activeResizeSize = resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height ? resizeSize : void 0;
+	useEffect(() => () => {
+		resizeCleanupRef.current?.();
+	}, []);
+	const popupStyle = useMemo(() => ({
+		...getPlacementStyle(placement, offset),
+		...semanticStyles?.wrapper
+	}), [
+		offset,
+		placement,
+		semanticStyles?.wrapper
+	]);
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (!nextOpen) {
+			if (keyboard === false && eventDetails.reason === "escape-key") return;
+			if (maskClosable === false && eventDetails.reason === "outside-press") return;
+			onClose?.();
+		}
+		onOpenChange?.(nextOpen, eventDetails);
+	}, [
+		keyboard,
+		maskClosable,
+		onClose,
+		onOpenChange
+	]);
+	const showHeader = title !== void 0 || actions !== void 0 || closable;
+	const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);
+	const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);
+	const handleResizeStart = useCallback((handle) => (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const panel = event.currentTarget.parentElement;
+		if (!panel) return;
+		const rect = panel.getBoundingClientRect();
+		const viewportMaxSize = getViewportMaxSize();
+		const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);
+		const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const handleResizeMove = (moveEvent) => {
+			const nextSize = resolveResizeSize({
+				handle,
+				maxHeight: resolvedMaxHeight,
+				maxWidth: resolvedMaxWidth,
+				minHeight,
+				minWidth,
+				startHeight: rect.height,
+				startWidth: rect.width,
+				startX,
+				startY,
+				x: moveEvent.clientX,
+				y: moveEvent.clientY
+			});
+			const nextState = {
+				...nextSize,
+				sourceHeight: height,
+				sourceWidth: width
+			};
+			latestResizeSizeRef.current = nextSize;
+			setResizeSize(nextState);
+			onResize?.(nextSize);
+		};
+		const handleResizeEnd = () => {
+			resizeCleanupRef.current?.();
+			resizeCleanupRef.current = void 0;
+			if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);
+		};
+		resizeCleanupRef.current?.();
+		window.addEventListener("pointermove", handleResizeMove);
+		window.addEventListener("pointerup", handleResizeEnd);
+		resizeCleanupRef.current = () => {
+			window.removeEventListener("pointermove", handleResizeMove);
+			window.removeEventListener("pointerup", handleResizeEnd);
+		};
+	}, [
+		height,
+		maxHeight,
+		maxWidth,
+		minHeight,
+		minWidth,
+		onResize,
+		onResizeEnd,
+		width
+	]);
+	return /* @__PURE__ */ jsx(ModalRoot, {
+		defaultOpen,
+		modal,
+		open,
+		zIndex,
+		onExitComplete: afterClose,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(ModalPortal, {
+			container,
+			children: [mask && /* @__PURE__ */ jsx(ModalBackdrop, {
+				className: classNames?.backdrop,
+				style: semanticStyles?.backdrop
+			}), /* @__PURE__ */ jsxs(ModalPopupImpl, {
+				"aria-label": ariaLabel,
+				className: classNames?.wrapper,
+				motionProps: resolvedMotionProps,
+				panelClassName: clsx(className, classNames?.panel),
+				panelXstyle: [s.panel, isTop && s.panelTop],
+				popupStyle,
+				width: activeResizeSize?.width ?? width,
+				xstyle: s.wrapper,
+				style: {
+					height: activeResizeSize?.height ?? height,
+					minHeight,
+					minWidth,
+					width: activeResizeSize?.width,
+					...semanticStyles?.panel
+				},
+				children: [
+					placement === "bottomRight" && /* @__PURE__ */ jsx(ToastDodge, {}),
+					resizable && resizeHandles.map((handle) => /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						"data-floating-panel-resize-handle": handle,
+						...styleProps([s.resizeHandle, getResizeHandleClassName(s, handle)], classNames?.resizeHandle, semanticStyles?.resizeHandle),
+						onPointerDown: handleResizeStart(handle)
+					}, handle)),
+					showHeader && /* @__PURE__ */ jsxs(ModalHeaderImpl, {
+						className: classNames?.header,
+						style: semanticStyles?.header,
+						xstyle: s.header,
+						children: [title !== void 0 ? /* @__PURE__ */ jsx(ModalTitleImpl, {
+							className: classNames?.title,
+							style: semanticStyles?.title,
+							xstyle: s.title,
+							children: title
+						}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+							...stylex.props(s.headerActions),
+							children: [actions && /* @__PURE__ */ jsx("div", {
+								...styleProps(s.actions, classNames?.actions, semanticStyles?.actions),
+								children: actions
+							}), closable && /* @__PURE__ */ jsx(ModalCloseImpl, {
+								"aria-label": closeLabel,
+								className: classNames?.close,
+								style: semanticStyles?.close,
+								xstyle: s.close,
+								children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 16 })
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx(ModalContentImpl, {
+						className: classNames?.body,
+						style: semanticStyles?.body,
+						xstyle: s.body,
+						children
+					}),
+					footer && /* @__PURE__ */ jsx(ModalFooterImpl, {
+						className: classNames?.footer,
+						style: semanticStyles?.footer,
+						xstyle: s.footer,
+						children: footer
+					})
+				]
+			})]
+		})
+	});
+});
+FloatingPanel.displayName = "FloatingPanel";
+//#endregion
+export { FloatingPanel };
+
+//# sourceMappingURL=FloatingPanel.mjs.map

package/es/FloatingPanel/FloatingPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.mjs","names":[],"sources":["../../src/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport type { MotionProps } from 'motion/react';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { ModalRootProps } from '../Modal';\nimport { ModalBackdrop, ModalPortal, ModalRoot } from '../Modal';\nimport {\n  ModalCloseImpl,\n  ModalContentImpl,\n  ModalFooterImpl,\n  ModalHeaderImpl,\n  ModalPopupImpl,\n  ModalTitleImpl,\n} from '../Modal/atoms';\nimport { styles } from './style';\nimport { ToastDodge } from './ToastDodge';\nimport type {\n  FloatingPanelOffset,\n  FloatingPanelPlacement,\n  FloatingPanelProps,\n  FloatingPanelResizeHandle,\n  FloatingPanelSize,\n} from './type';\n\nconst DEFAULT_MIN_HEIGHT = 180;\nconst DEFAULT_MIN_WIDTH = 320;\n\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\n  sourceHeight?: number | string;\n  sourceWidth?: number | string;\n}\n\nconst defaultMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: 12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: 12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst topMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: -12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: -12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst resolveOffset = (offset: FloatingPanelOffset) => {\n  if (typeof offset === 'object') {\n    return {\n      x: offset.x ?? 8,\n      y: offset.y ?? 8,\n    };\n  }\n\n  return { x: offset, y: offset };\n};\n\nconst getPlacementStyle = (\n  placement: FloatingPanelPlacement,\n  offset: FloatingPanelOffset,\n): CSSProperties => {\n  const { x, y } = resolveOffset(offset);\n  const isTop = placement.startsWith('top');\n  const isLeft = placement.endsWith('Left');\n\n  const px = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n  const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;\n  const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;\n\n  return {\n    alignItems: isTop ? 'flex-start' : 'flex-end',\n    justifyContent: isLeft ? 'flex-start' : 'flex-end',\n    paddingBlockEnd: isTop ? undefined : blockInset,\n    paddingBlockStart: isTop ? blockInset : undefined,\n    paddingInlineEnd: isLeft ? undefined : inlineInset,\n    paddingInlineStart: isLeft ? inlineInset : undefined,\n  };\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst getViewportMaxSize = () => ({\n  height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\n  width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\n});\n\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\n  switch (placement) {\n    case 'bottomLeft': {\n      return ['top', 'right', 'topRight'];\n    }\n    case 'topLeft': {\n      return ['bottom', 'right', 'bottomRight'];\n    }\n    case 'topRight': {\n      return ['bottom', 'left', 'bottomLeft'];\n    }\n    default: {\n      return ['top', 'left', 'topLeft'];\n    }\n  }\n};\n\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\n  const handleClassMap = {\n    bottom: s.resizeHandleBottom,\n    bottomLeft: s.resizeHandleBottomLeft,\n    bottomRight: s.resizeHandleBottomRight,\n    left: s.resizeHandleLeft,\n    right: s.resizeHandleRight,\n    top: s.resizeHandleTop,\n    topLeft: s.resizeHandleTopLeft,\n    topRight: s.resizeHandleTopRight,\n  };\n\n  return handleClassMap[handle];\n};\n\nconst resolveResizeSize = ({\n  handle,\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  startHeight,\n  startWidth,\n  startX,\n  startY,\n  x,\n  y,\n}: {\n  handle: FloatingPanelResizeHandle;\n  maxHeight: number;\n  maxWidth: number;\n  minHeight: number;\n  minWidth: number;\n  startHeight: number;\n  startWidth: number;\n  startX: number;\n  startY: number;\n  x: number;\n  y: number;\n}): FloatingPanelSize => {\n  const deltaX = x - startX;\n  const deltaY = y - startY;\n  const growsLeft = handle.includes('Left') || handle === 'left';\n  const growsRight = handle.includes('Right') || handle === 'right';\n  const growsTop = handle.includes('top') || handle === 'top';\n  const growsBottom = handle.includes('bottom') || handle === 'bottom';\n\n  const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\n  const nextHeight = growsTop\n    ? startHeight - deltaY\n    : growsBottom\n      ? startHeight + deltaY\n      : startHeight;\n\n  return {\n    height: clamp(nextHeight, minHeight, maxHeight),\n    width: clamp(nextWidth, minWidth, maxWidth),\n  };\n};\n\nconst FloatingPanel = memo<FloatingPanelProps>(\n  ({\n    afterClose,\n    ariaLabel,\n    children,\n    className,\n    classNames,\n    closable = true,\n    closeIcon,\n    closeLabel = 'Close',\n    defaultOpen,\n    actions,\n    footer,\n    getContainer,\n    height,\n    keyboard = true,\n    mask = false,\n    maskClosable = true,\n    maxHeight,\n    maxWidth,\n    minHeight = DEFAULT_MIN_HEIGHT,\n    minWidth = DEFAULT_MIN_WIDTH,\n    modal = false,\n    motionProps,\n    offset = 8,\n    onClose,\n    onOpenChange,\n    onResize,\n    onResizeEnd,\n    open,\n    placement = 'bottomRight',\n    resizable = true,\n    styles: semanticStyles,\n    title,\n    width = 640,\n    zIndex,\n  }) => {\n    const s = styles;\n    const isTop = placement.startsWith('top');\n    const container = getContainer === false ? undefined : getContainer;\n    const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\n    const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\n    const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\n    const activeResizeSize =\n      resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\n        ? resizeSize\n        : undefined;\n\n    useEffect(\n      () => () => {\n        resizeCleanupRef.current?.();\n      },\n      [],\n    );\n\n    const popupStyle = useMemo(\n      () => ({\n        ...getPlacementStyle(placement, offset),\n        ...semanticStyles?.wrapper,\n      }),\n      [offset, placement, semanticStyles?.wrapper],\n    );\n\n    const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (!nextOpen) {\n          if (keyboard === false && eventDetails.reason === 'escape-key') return;\n          if (maskClosable === false && eventDetails.reason === 'outside-press') return;\n          onClose?.();\n        }\n\n        onOpenChange?.(nextOpen, eventDetails);\n      },\n      [keyboard, maskClosable, onClose, onOpenChange],\n    );\n\n    const showHeader = title !== undefined || actions !== undefined || closable;\n    const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\n    const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\n\n    const handleResizeStart = useCallback(\n      (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const panel = event.currentTarget.parentElement;\n        if (!panel) return;\n\n        const rect = panel.getBoundingClientRect();\n        const viewportMaxSize = getViewportMaxSize();\n        const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\n        const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\n        const startX = event.clientX;\n        const startY = event.clientY;\n\n        const handleResizeMove = (moveEvent: PointerEvent) => {\n          const nextSize = resolveResizeSize({\n            handle,\n            maxHeight: resolvedMaxHeight,\n            maxWidth: resolvedMaxWidth,\n            minHeight,\n            minWidth,\n            startHeight: rect.height,\n            startWidth: rect.width,\n            startX,\n            startY,\n            x: moveEvent.clientX,\n            y: moveEvent.clientY,\n          });\n\n          const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\n          latestResizeSizeRef.current = nextSize;\n          setResizeSize(nextState);\n          onResize?.(nextSize);\n        };\n\n        const handleResizeEnd = () => {\n          resizeCleanupRef.current?.();\n          resizeCleanupRef.current = undefined;\n\n          if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\n        };\n\n        resizeCleanupRef.current?.();\n        window.addEventListener('pointermove', handleResizeMove);\n        window.addEventListener('pointerup', handleResizeEnd);\n        resizeCleanupRef.current = () => {\n          window.removeEventListener('pointermove', handleResizeMove);\n          window.removeEventListener('pointerup', handleResizeEnd);\n        };\n      },\n      [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\n    );\n\n    return (\n      <ModalRoot\n        defaultOpen={defaultOpen}\n        modal={modal}\n        open={open}\n        zIndex={zIndex}\n        onExitComplete={afterClose}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <ModalPopupImpl\n            aria-label={ariaLabel}\n            className={classNames?.wrapper}\n            motionProps={resolvedMotionProps}\n            panelClassName={clsx(className, classNames?.panel)}\n            panelXstyle={[s.panel, isTop && s.panelTop]}\n            popupStyle={popupStyle}\n            width={activeResizeSize?.width ?? width}\n            xstyle={s.wrapper}\n            style={{\n              height: activeResizeSize?.height ?? height,\n              minHeight,\n              minWidth,\n              width: activeResizeSize?.width,\n              ...semanticStyles?.panel,\n            }}\n          >\n            {placement === 'bottomRight' && <ToastDodge />}\n            {resizable &&\n              resizeHandles.map((handle) => (\n                <div\n                  aria-hidden\n                  data-floating-panel-resize-handle={handle}\n                  key={handle}\n                  {...styleProps(\n                    [s.resizeHandle, getResizeHandleClassName(s, handle)],\n                    classNames?.resizeHandle,\n                    semanticStyles?.resizeHandle,\n                  )}\n                  onPointerDown={handleResizeStart(handle)}\n                />\n              ))}\n            {showHeader && (\n              <ModalHeaderImpl\n                className={classNames?.header}\n                style={semanticStyles?.header}\n                xstyle={s.header}\n              >\n                {title !== undefined ? (\n                  <ModalTitleImpl\n                    className={classNames?.title}\n                    style={semanticStyles?.title}\n                    xstyle={s.title}\n                  >\n                    {title}\n                  </ModalTitleImpl>\n                ) : (\n                  <span />\n                )}\n                <div {...stylex.props(s.headerActions)}>\n                  {actions && (\n                    <div\n                      {...styleProps(s.actions, classNames?.actions, semanticStyles?.actions)}\n                    >\n                      {actions}\n                    </div>\n                  )}\n                  {closable && (\n                    <ModalCloseImpl\n                      aria-label={closeLabel}\n                      className={classNames?.close}\n                      style={semanticStyles?.close}\n                      xstyle={s.close}\n                    >\n                      {closeIcon ?? <X size={16} />}\n                    </ModalCloseImpl>\n                  )}\n                </div>\n              </ModalHeaderImpl>\n            )}\n            <ModalContentImpl\n              className={classNames?.body}\n              style={semanticStyles?.body}\n              xstyle={s.body}\n            >\n              {children}\n            </ModalContentImpl>\n            {footer && (\n              <ModalFooterImpl\n                className={classNames?.footer}\n                style={semanticStyles?.footer}\n                xstyle={s.footer}\n              >\n                {footer}\n              </ModalFooterImpl>\n            )}\n          </ModalPopupImpl>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nFloatingPanel.displayName = 'FloatingPanel';\n\nexport { FloatingPanel };\n"],"mappings":"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"}

package/es/FloatingPanel/ToastDodge.mjs

@@ -0,0 +1,81 @@
+import { PANEL_ALIGN_INLINE_VAR, PANEL_RESERVE_VAR, TOAST_SHIFT_X_VAR, TOAST_SHIFT_Y_VAR, TOAST_WIDTH_VAR, resolveToastDodge } from "../Toast/dodge.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/FloatingPanel/ToastDodge.tsx
+const TOAST_VARS = [
+	TOAST_SHIFT_X_VAR,
+	TOAST_SHIFT_Y_VAR,
+	TOAST_WIDTH_VAR
+];
+let owner;
+const ToastDodge = () => {
+	const probeRef = useRef(null);
+	const reserveRef = useRef(0);
+	const tokenRef = useRef({});
+	const insetRef = useRef(void 0);
+	useEffect(() => {
+		const root = document.documentElement;
+		const panel = probeRef.current?.parentElement;
+		const token = tokenRef.current;
+		const wrapper = panel?.parentElement;
+		const clear = () => {
+			reserveRef.current = 0;
+			if (wrapper instanceof HTMLElement) {
+				wrapper.style.removeProperty(PANEL_RESERVE_VAR);
+				wrapper.style.removeProperty(PANEL_ALIGN_INLINE_VAR);
+			}
+			if (owner !== token) return;
+			owner = void 0;
+			for (const name of TOAST_VARS) root.style.removeProperty(name);
+		};
+		if (!panel) return;
+		const apply = () => {
+			if (!(panel instanceof HTMLElement) || !(wrapper instanceof HTMLElement)) return;
+			if (!insetRef.current) {
+				const padding = getComputedStyle(wrapper);
+				insetRef.current = {
+					x: Number.parseFloat(padding.paddingInlineEnd) || 0,
+					y: Number.parseFloat(padding.paddingBlockEnd) || 0
+				};
+			}
+			const inset = insetRef.current;
+			const maxHeight = Number.parseFloat(getComputedStyle(panel).maxHeight);
+			const reserved = reserveRef.current;
+			const clamped = panel.offsetHeight >= maxHeight - .5 ? reserved : 0;
+			const dodge = resolveToastDodge({
+				panelHeight: panel.offsetHeight + clamped,
+				panelOffsetX: inset.x,
+				panelOffsetY: inset.y,
+				panelWidth: panel.offsetWidth,
+				viewportHeight: wrapper.clientHeight,
+				viewportWidth: wrapper.clientWidth
+			});
+			owner = token;
+			reserveRef.current = dodge.reserve;
+			root.style.setProperty(TOAST_SHIFT_X_VAR, `${dodge.shiftX}px`);
+			root.style.setProperty(TOAST_SHIFT_Y_VAR, `${dodge.shiftY}px`);
+			wrapper.style.setProperty(PANEL_RESERVE_VAR, `${dodge.reserve}px`);
+			wrapper.style.setProperty(PANEL_ALIGN_INLINE_VAR, `${dodge.alignInline}px`);
+			if (dodge.width === 360) root.style.removeProperty(TOAST_WIDTH_VAR);
+			else root.style.setProperty(TOAST_WIDTH_VAR, `${dodge.width}px`);
+		};
+		const observer = new ResizeObserver(apply);
+		observer.observe(panel);
+		window.addEventListener("resize", apply);
+		apply();
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", apply);
+			clear();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		hidden: true,
+		ref: probeRef
+	});
+};
+//#endregion
+export { ToastDodge };
+
+//# sourceMappingURL=ToastDodge.mjs.map

package/es/FloatingPanel/ToastDodge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastDodge.mjs","names":[],"sources":["../../src/FloatingPanel/ToastDodge.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport {\n  PANEL_ALIGN_INLINE_VAR,\n  PANEL_RESERVE_VAR,\n  resolveToastDodge,\n  TOAST_SHIFT_X_VAR,\n  TOAST_SHIFT_Y_VAR,\n  TOAST_WIDTH,\n  TOAST_WIDTH_VAR,\n} from '../Toast/dodge';\n\nconst TOAST_VARS = [TOAST_SHIFT_X_VAR, TOAST_SHIFT_Y_VAR, TOAST_WIDTH_VAR];\n\n// A closing panel unmounts after its exit animation, so it can outlive the\n// panel that replaced it. Only the panel that wrote the vars may clear them.\nlet owner: object | undefined;\n\n// Mounted inside the panel so it lives exactly as long as the panel does, and\n// reads its own parentElement to measure it.\nexport const ToastDodge = () => {\n  const probeRef = useRef<HTMLSpanElement>(null);\n  const reserveRef = useRef(0);\n  const tokenRef = useRef({});\n  const insetRef = useRef<{ x: number; y: number }>(undefined);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    const panel = probeRef.current?.parentElement;\n\n    const token = tokenRef.current;\n    const wrapper = panel?.parentElement;\n    const clear = () => {\n      reserveRef.current = 0;\n      // The reserve lives on this panel's own wrapper, so it is always ours to\n      // drop; the toast vars are global and only the last writer may clear them.\n      if (wrapper instanceof HTMLElement) {\n        wrapper.style.removeProperty(PANEL_RESERVE_VAR);\n        wrapper.style.removeProperty(PANEL_ALIGN_INLINE_VAR);\n      }\n      if (owner !== token) return;\n      owner = undefined;\n      for (const name of TOAST_VARS) root.style.removeProperty(name);\n    };\n\n    if (!panel) return;\n\n    const apply = () => {\n      if (!(panel instanceof HTMLElement) || !(wrapper instanceof HTMLElement)) return;\n      // Read the resting insets once, before anything is reserved: the wrapper\n      // padding animates, so sampling it later feeds the transition's midpoint\n      // back into the verdict and the reserve ratchets upward every frame.\n      if (!insetRef.current) {\n        const padding = getComputedStyle(wrapper);\n        insetRef.current = {\n          x: Number.parseFloat(padding.paddingInlineEnd) || 0,\n          y: Number.parseFloat(padding.paddingBlockEnd) || 0,\n        };\n      }\n      // Layout size, never getBoundingClientRect: the rect carries the entrance\n      // animation's transform, so measuring mid-flight reports a scaled-down\n      // panel and the toast lands short of the gutter.\n      const inset = insetRef.current;\n      // Measure the panel as if it were not already yielding, otherwise the\n      // reserve it applies shrinks the panel and flips the next verdict.\n      // Only add the reserve back when max-height is what is holding the panel\n      // down; a panel shorter than its cap was never shrunk by it.\n      const maxHeight = Number.parseFloat(getComputedStyle(panel).maxHeight);\n      const reserved = reserveRef.current;\n      const clamped = panel.offsetHeight >= maxHeight - 0.5 ? reserved : 0;\n      const dodge = resolveToastDodge({\n        panelHeight: panel.offsetHeight + clamped,\n        panelOffsetX: inset.x,\n        panelOffsetY: inset.y,\n        panelWidth: panel.offsetWidth,\n        viewportHeight: wrapper.clientHeight,\n        viewportWidth: wrapper.clientWidth,\n      });\n\n      owner = token;\n      reserveRef.current = dodge.reserve;\n      root.style.setProperty(TOAST_SHIFT_X_VAR, `${dodge.shiftX}px`);\n      root.style.setProperty(TOAST_SHIFT_Y_VAR, `${dodge.shiftY}px`);\n      wrapper.style.setProperty(PANEL_RESERVE_VAR, `${dodge.reserve}px`);\n      wrapper.style.setProperty(PANEL_ALIGN_INLINE_VAR, `${dodge.alignInline}px`);\n      if (dodge.width === TOAST_WIDTH) root.style.removeProperty(TOAST_WIDTH_VAR);\n      else root.style.setProperty(TOAST_WIDTH_VAR, `${dodge.width}px`);\n    };\n\n    const observer = new ResizeObserver(apply);\n    observer.observe(panel);\n    window.addEventListener('resize', apply);\n    apply();\n\n    return () => {\n      observer.disconnect();\n      window.removeEventListener('resize', apply);\n      clear();\n    };\n  }, []);\n\n  return <span aria-hidden hidden ref={probeRef} />;\n};\n"],"mappings":";;;;AAYA,MAAM,aAAa;CAAC;CAAmB;CAAmB;AAAe;AAIzE,IAAI;AAIJ,MAAa,mBAAmB;CAC9B,MAAM,WAAW,OAAwB,IAAI;CAC7C,MAAM,aAAa,OAAO,CAAC;CAC3B,MAAM,WAAW,OAAO,CAAC,CAAC;CAC1B,MAAM,WAAW,OAAiC,KAAA,CAAS;CAE3D,gBAAgB;EACd,MAAM,OAAO,SAAS;EACtB,MAAM,QAAQ,SAAS,SAAS;EAEhC,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,OAAO;EACvB,MAAM,cAAc;GAClB,WAAW,UAAU;GAGrB,IAAI,mBAAmB,aAAa;IAClC,QAAQ,MAAM,eAAe,iBAAiB;IAC9C,QAAQ,MAAM,eAAe,sBAAsB;GACrD;GACA,IAAI,UAAU,OAAO;GACrB,QAAQ,KAAA;GACR,KAAK,MAAM,QAAQ,YAAY,KAAK,MAAM,eAAe,IAAI;EAC/D;EAEA,IAAI,CAAC,OAAO;EAEZ,MAAM,cAAc;GAClB,IAAI,EAAE,iBAAiB,gBAAgB,EAAE,mBAAmB,cAAc;GAI1E,IAAI,CAAC,SAAS,SAAS;IACrB,MAAM,UAAU,iBAAiB,OAAO;IACxC,SAAS,UAAU;KACjB,GAAG,OAAO,WAAW,QAAQ,gBAAgB,KAAK;KAClD,GAAG,OAAO,WAAW,QAAQ,eAAe,KAAK;IACnD;GACF;GAIA,MAAM,QAAQ,SAAS;GAKvB,MAAM,YAAY,OAAO,WAAW,iBAAiB,KAAK,CAAC,CAAC,SAAS;GACrE,MAAM,WAAW,WAAW;GAC5B,MAAM,UAAU,MAAM,gBAAgB,YAAY,KAAM,WAAW;GACnE,MAAM,QAAQ,kBAAkB;IAC9B,aAAa,MAAM,eAAe;IAClC,cAAc,MAAM;IACpB,cAAc,MAAM;IACpB,YAAY,MAAM;IAClB,gBAAgB,QAAQ;IACxB,eAAe,QAAQ;GACzB,CAAC;GAED,QAAQ;GACR,WAAW,UAAU,MAAM;GAC3B,KAAK,MAAM,YAAY,mBAAmB,GAAG,MAAM,OAAO,GAAG;GAC7D,KAAK,MAAM,YAAY,mBAAmB,GAAG,MAAM,OAAO,GAAG;GAC7D,QAAQ,MAAM,YAAY,mBAAmB,GAAG,MAAM,QAAQ,GAAG;GACjE,QAAQ,MAAM,YAAY,wBAAwB,GAAG,MAAM,YAAY,GAAG;GAC1E,IAAI,MAAM,UAAA,KAAuB,KAAK,MAAM,eAAe,eAAe;QACrE,KAAK,MAAM,YAAY,iBAAiB,GAAG,MAAM,MAAM,GAAG;EACjE;EAEA,MAAM,WAAW,IAAI,eAAe,KAAK;EACzC,SAAS,QAAQ,KAAK;EACtB,OAAO,iBAAiB,UAAU,KAAK;EACvC,MAAM;EAEN,aAAa;GACX,SAAS,WAAW;GACpB,OAAO,oBAAoB,UAAU,KAAK;GAC1C,MAAM;EACR;CACF,GAAG,CAAC,CAAC;CAEL,OAAO,oBAAC,QAAD;EAAM,eAAA;EAAY,QAAA;EAAO,KAAK;CAAW,CAAA;AAClD"}

package/es/FloatingPanel/index.mjs

@@ -0,0 +1 @@
+export { FloatingPanel } from "./FloatingPanel.mjs";

package/es/FloatingPanel/style.mjs

@@ -0,0 +1,169 @@
+//#region src/FloatingPanel/style.ts
+const dodge = `608ms linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)`;
+`${dodge}${dodge}${dodge}${dodge}`;
+const styles = {
+	actions: {
+		kUk6DE: "lb1okw0bk",
+		kOIVth: "lb1jnr06f",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	body: {
+		kUk6DE: "lb98rzlu",
+		kg3NbH: "lbnjsko4",
+		kGO01o: "lb18d9i69",
+		kLKAdn: "lbexx8yu",
+		kAzted: "lb2lwn1j",
+		kXHlph: "lb6ikm8r",
+		kORKVm: "lb1odjw0f",
+		$$css: true
+	},
+	close: {
+		kaIpWk: "lbur7f20",
+		k71WvV: "lb1lxpwgx",
+		kVAEAm: "lb1uhb9sk",
+		kZKoxP: "lb10w6t97",
+		kzqmXN: "lb1td3qas",
+		$$css: true
+	},
+	footer: {
+		kUk6DE: "lb1okw0bk",
+		kLZC3w: "lbwyyj3y",
+		kPef9Z: "lb13fuv20",
+		kEafiO: "lb178xt8z",
+		$$css: true
+	},
+	header: {
+		kUk6DE: "lb1okw0bk",
+		kL6WhQ: "lb1nkj3if",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		kAzted: "lb1wxaq2x",
+		$$css: true
+	},
+	headerActions: {
+		kUk6DE: "lb1okw0bk",
+		kOIVth: "lb1jnr06f",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	panel: {
+		kaIpWk: "lb4pepcl",
+		kGVxlE: "lbj07k4p",
+		k3nNDw: "lb19ry0z7",
+		kskxy: "lb1ithq13",
+		kzqmXN: "lbb1cs2e",
+		$$css: true
+	},
+	panelTop: {
+		k3nNDw: "lb12t5ck7",
+		$$css: true
+	},
+	resizeHandle: {
+		kWkggS: "lbjbqb8w",
+		kVAEAm: "lb10l6tqk",
+		kFalU9: "lb5ve5x3",
+		kY2c9j: "lb1vjfegm",
+		kUfP38: "lb1d7ns5q",
+		kFJxch: "lb18nak0j",
+		ks3ayO: "lb1o8vivo",
+		k5JduY: "lb1s928wv",
+		kypkao: "lbmf22ne lb1yvfa1k",
+		kwXMNM: "lb1j6awrg",
+		$$css: true
+	},
+	resizeHandleBottom: {
+		kkqhue: "lbvf9o5y",
+		kkrTdU: "lb1e5i8e3",
+		krVfgx: "lb1o583il",
+		kZKoxP: "lbdk7pt",
+		kcktkL: "lbb7ltuz",
+		k8Iv0R: "lb16fvuwb",
+		k4zj60: "lb3cntg4",
+		$$css: true
+	},
+	resizeHandleBottomLeft: {
+		kkrTdU: "lb1yl03ai",
+		krVfgx: "lbtzk6r2",
+		kLqNvP: "lb1765b1",
+		kZKoxP: "lblup9mm",
+		kzqmXN: "lb1kky2od",
+		$$css: true
+	},
+	resizeHandleBottomRight: {
+		kkrTdU: "lb16djdpl",
+		krVfgx: "lbtzk6r2",
+		kt4wiu: "lbpa5qit",
+		kZKoxP: "lblup9mm",
+		kzqmXN: "lb1kky2od",
+		$$css: true
+	},
+	resizeHandleLeft: {
+		kYYq5F: "lb1c70ue",
+		kkrTdU: "lb7eptgl",
+		kLqNvP: "lbl3v32j",
+		kzqmXN: "lb1xc55vz",
+		kSy8m5: "lbd54j2p",
+		kc1e00: "lbxprzt6",
+		kkgrvl: "lb13694x8",
+		$$css: true
+	},
+	resizeHandleRight: {
+		kYYq5F: "lb1c70ue",
+		kkrTdU: "lb7eptgl",
+		kt4wiu: "lbqwxbl3",
+		kzqmXN: "lb1xc55vz",
+		kSy8m5: "lbd54j2p",
+		kH8aOt: "lbu7ycya",
+		kkgrvl: "lb13694x8",
+		$$css: true
+	},
+	resizeHandleTop: {
+		kkqhue: "lbvf9o5y",
+		kkrTdU: "lb1e5i8e3",
+		k87sOh: "lb1fo6t33",
+		kZKoxP: "lbdk7pt",
+		kcktkL: "lbb7ltuz",
+		k3foIR: "lb158vwej",
+		k4zj60: "lb3cntg4",
+		$$css: true
+	},
+	resizeHandleTopLeft: {
+		kkrTdU: "lb16djdpl",
+		k87sOh: "lbjibb99",
+		kLqNvP: "lb1765b1",
+		kZKoxP: "lblup9mm",
+		kzqmXN: "lb1kky2od",
+		$$css: true
+	},
+	resizeHandleTopRight: {
+		kkrTdU: "lb1yl03ai",
+		k87sOh: "lbjibb99",
+		kt4wiu: "lbpa5qit",
+		kZKoxP: "lblup9mm",
+		kzqmXN: "lb1kky2od",
+		$$css: true
+	},
+	title: {
+		kUk6DE: "lb98rzlu",
+		kVQacm: "lbb3r6kr",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	wrapper: {
+		kVQacm: "lbb3r6kr",
+		kmkexE: "lbon1zjq",
+		kIyJzY: "lb12w9bfk",
+		k1ekBW: "lb4wkmsb",
+		kAMwcw: "lb7v8fk2",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/FloatingPanel/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FloatingPanel/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst dodgeDuration = '608ms';\nconst dodgeEase =\n  'linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)';\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst dodge = `${dodgeDuration} ${dodgeEase}`;\nconst wrapperTransition = `padding-block-end ${dodge}, padding-block-start ${dodge}, padding-inline-end ${dodge}, padding-inline-start ${dodge}`;\nconst handleActive = ':is(:hover, :focus-visible)';\n\nexport const styles = stylex.create({\n  actions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  body: {\n    flex: '1',\n    paddingInline: 0,\n    paddingBlockEnd: 0,\n    paddingBlockStart: 0,\n    minHeight: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n  close: {\n    borderRadius: 8,\n    marginInlineEnd: -4,\n    position: 'static',\n    height: 32,\n    width: 32,\n  },\n  footer: {\n    flex: 'none',\n    borderBlockStartColor: cssVar.colorBorderSecondary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  header: {\n    flex: 'none',\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    minHeight: 48,\n  },\n  headerActions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  panel: {\n    borderRadius: 12,\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    transformOrigin: '100% 100%',\n    maxHeight: 'calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px))',\n    width: 'calc(100dvw - 32px)',\n  },\n  panelTop: {\n    transformOrigin: '100% 0',\n  },\n  resizeHandle: {\n    'backgroundColor': 'transparent',\n    'position': 'absolute',\n    'touchAction': 'none',\n    'zIndex': 1,\n    '::after': {\n      borderRadius: 999,\n      transition: 'opacity 120ms ease',\n      backgroundColor: cssVar.colorPrimary,\n      content: '\"\"',\n      opacity: { default: 0, [handleActive]: 0.55 },\n      position: 'absolute',\n    },\n  },\n  resizeHandleBottom: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockEnd': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockEnd: 3,\n      height: 2,\n    },\n  },\n  resizeHandleBottomLeft: {\n    cursor: 'nesw-resize',\n    insetBlockEnd: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleBottomRight: {\n    cursor: 'nwse-resize',\n    insetBlockEnd: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleLeft: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineStart': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineStart: 3,\n      width: 2,\n    },\n  },\n  resizeHandleRight: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineEnd': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineEnd: 3,\n      width: 2,\n    },\n  },\n  resizeHandleTop: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockStart': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockStart: 3,\n      height: 2,\n    },\n  },\n  resizeHandleTopLeft: {\n    cursor: 'nwse-resize',\n    insetBlockStart: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleTopRight: {\n    cursor: 'nesw-resize',\n    insetBlockStart: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  title: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  },\n  wrapper: {\n    overflow: 'hidden',\n    transition: wrapperTransition,\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    transitionProperty: { default: null, [reducedMotion]: 'none' },\n    transitionTimingFunction: { default: null, [reducedMotion]: 'ease' },\n  },\n});\n"],"mappings":";AAMA,MAAM,QAAQ;AACY,GAAqB,QAA8B,QAA6B,QAA+B;AAEzI,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,yBAAyB;EACvB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}