@lobehub/ui 5.40.3 → 5.41.0

package/es/base-ui/DraggablePanel/DraggablePanel.d.mts

@@ -0,0 +1,6 @@
+import { DraggablePanelProps } from "./type.mjs";
+//#region src/base-ui/DraggablePanel/DraggablePanel.d.ts
+declare const DraggablePanel: import("react").NamedExoticComponent<DraggablePanelProps>;
+//#endregion
+export { DraggablePanel as default };
+//# sourceMappingURL=DraggablePanel.d.mts.map

package/es/base-ui/DraggablePanel/DraggablePanel.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { AXES } from "./core/axes.mjs";
+import { DraggablePanelContent, DraggablePanelHandle, DraggablePanelRoot, DraggablePanelToggle } from "./atoms.mjs";
+import { memo, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/DraggablePanel/DraggablePanel.tsx
+const toNumber = (value) => typeof value === "number" ? Math.max(value, 0) : void 0;
+const DraggablePanel = memo(({ backgroundColor, children, className, classNames, collapseThreshold, defaultExpand, defaultSize, expand, expandable = true, maxHeight, maxWidth, minHeight, minWidth, mode = "fixed", onExpandChange, onSizeChange, onSizeDragging, placement = "right", showBorder = true, showHandleWhenCollapsed, showHandleWideArea = true, size, styles: customStyles, ...rest }) => {
+	const { vertical } = AXES[placement];
+	const toSize = useCallback((value) => vertical ? {
+		height: value,
+		width: "100%"
+	} : {
+		height: "100%",
+		width: value
+	}, [vertical]);
+	const toDelta = useCallback((value) => vertical ? {
+		height: value,
+		width: 0
+	} : {
+		height: 0,
+		width: value
+	}, [vertical]);
+	const handleSizeChange = useCallback((next, delta) => onSizeChange?.(toDelta(delta), toSize(next)), [
+		onSizeChange,
+		toDelta,
+		toSize
+	]);
+	const handleSizeDragging = useCallback((next, delta) => onSizeDragging?.(toDelta(delta), toSize(next)), [
+		onSizeDragging,
+		toDelta,
+		toSize
+	]);
+	return /* @__PURE__ */ jsxs(DraggablePanelRoot, {
+		backgroundColor,
+		className,
+		collapseThreshold,
+		defaultExpand,
+		defaultSize: toNumber(vertical ? defaultSize?.height : defaultSize?.width),
+		expand,
+		expandable,
+		max: toNumber(vertical ? maxHeight : maxWidth),
+		min: toNumber(vertical ? minHeight : minWidth) ?? 0,
+		mode,
+		placement,
+		showBorder,
+		size: toNumber(vertical ? size?.height : size?.width),
+		onExpandChange,
+		onSizeChange: handleSizeChange,
+		onSizeDragging: handleSizeDragging,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(DraggablePanelToggle, { showHandleWhenCollapsed }),
+			/* @__PURE__ */ jsx(DraggablePanelContent, {
+				className: cx(classNames?.content),
+				style: customStyles?.content,
+				children
+			}),
+			/* @__PURE__ */ jsx(DraggablePanelHandle, { wideArea: showHandleWideArea })
+		]
+	});
+});
+DraggablePanel.displayName = "DraggablePanel";
+//#endregion
+export { DraggablePanel as default };
+
+//# sourceMappingURL=DraggablePanel.mjs.map

package/es/base-ui/DraggablePanel/DraggablePanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggablePanel.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback } from 'react';\n\nimport {\n  DraggablePanelContent,\n  DraggablePanelHandle,\n  DraggablePanelRoot,\n  DraggablePanelToggle,\n} from './atoms';\nimport { AXES } from './core/axes';\nimport type { DraggablePanelProps, DraggablePanelSize } from './type';\n\nconst toNumber = (value: number | string | undefined) =>\n  typeof value === 'number' ? Math.max(value, 0) : undefined;\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    classNames,\n    collapseThreshold,\n    defaultExpand,\n    defaultSize,\n    expand,\n    expandable = true,\n    maxHeight,\n    maxWidth,\n    minHeight,\n    minWidth,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    showHandleWhenCollapsed,\n    showHandleWideArea = true,\n    size,\n    styles: customStyles,\n    ...rest\n  }) => {\n    const { vertical } = AXES[placement];\n\n    const toSize = useCallback(\n      (value: number): DraggablePanelSize =>\n        vertical ? { height: value, width: '100%' } : { height: '100%', width: value },\n      [vertical],\n    );\n    const toDelta = useCallback(\n      (value: number): DraggablePanelSize =>\n        vertical ? { height: value, width: 0 } : { height: 0, width: value },\n      [vertical],\n    );\n\n    const handleSizeChange = useCallback(\n      (next: number, delta: number) => onSizeChange?.(toDelta(delta), toSize(next)),\n      [onSizeChange, toDelta, toSize],\n    );\n    const handleSizeDragging = useCallback(\n      (next: number, delta: number) => onSizeDragging?.(toDelta(delta), toSize(next)),\n      [onSizeDragging, toDelta, toSize],\n    );\n\n    return (\n      <DraggablePanelRoot\n        backgroundColor={backgroundColor}\n        className={className}\n        collapseThreshold={collapseThreshold}\n        defaultExpand={defaultExpand}\n        defaultSize={toNumber(vertical ? defaultSize?.height : defaultSize?.width)}\n        expand={expand}\n        expandable={expandable}\n        max={toNumber(vertical ? maxHeight : maxWidth)}\n        min={toNumber(vertical ? minHeight : minWidth) ?? 0}\n        mode={mode}\n        placement={placement}\n        showBorder={showBorder}\n        size={toNumber(vertical ? size?.height : size?.width)}\n        onExpandChange={onExpandChange}\n        onSizeChange={handleSizeChange}\n        onSizeDragging={handleSizeDragging}\n        {...rest}\n      >\n        <DraggablePanelToggle showHandleWhenCollapsed={showHandleWhenCollapsed} />\n        <DraggablePanelContent className={cx(classNames?.content)} style={customStyles?.content}>\n          {children}\n        </DraggablePanelContent>\n        <DraggablePanelHandle wideArea={showHandleWideArea} />\n      </DraggablePanelRoot>\n    );\n  },\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,UAChB,OAAO,UAAU,WAAW,KAAK,IAAI,OAAO,CAAC,IAAI,KAAA;AAEnD,MAAM,iBAAiB,MACpB,EACC,iBACA,UACA,WACA,YACA,mBACA,eACA,aACA,QACA,aAAa,MACb,WACA,UACA,WACA,UACA,OAAO,SACP,gBACA,cACA,gBACA,YAAY,SACZ,aAAa,MACb,yBACA,qBAAqB,MACrB,MACA,QAAQ,cACR,GAAG,WACC;CACJ,MAAM,EAAE,aAAa,KAAK;CAE1B,MAAM,SAAS,aACZ,UACC,WAAW;EAAE,QAAQ;EAAO,OAAO;CAAO,IAAI;EAAE,QAAQ;EAAQ,OAAO;CAAM,GAC/E,CAAC,QAAQ,CACX;CACA,MAAM,UAAU,aACb,UACC,WAAW;EAAE,QAAQ;EAAO,OAAO;CAAE,IAAI;EAAE,QAAQ;EAAG,OAAO;CAAM,GACrE,CAAC,QAAQ,CACX;CAEA,MAAM,mBAAmB,aACtB,MAAc,UAAkB,eAAe,QAAQ,KAAK,GAAG,OAAO,IAAI,CAAC,GAC5E;EAAC;EAAc;EAAS;CAAM,CAChC;CACA,MAAM,qBAAqB,aACxB,MAAc,UAAkB,iBAAiB,QAAQ,KAAK,GAAG,OAAO,IAAI,CAAC,GAC9E;EAAC;EAAgB;EAAS;CAAM,CAClC;CAEA,OACE,qBAAC,oBAAD;EACmB;EACN;EACQ;EACJ;EACf,aAAa,SAAS,WAAW,aAAa,SAAS,aAAa,KAAK;EACjE;EACI;EACZ,KAAK,SAAS,WAAW,YAAY,QAAQ;EAC7C,KAAK,SAAS,WAAW,YAAY,QAAQ,KAAK;EAC5C;EACK;EACC;EACZ,MAAM,SAAS,WAAW,MAAM,SAAS,MAAM,KAAK;EACpC;EAChB,cAAc;EACd,gBAAgB;EAChB,GAAI;EAjBN,UAAA;GAmBE,oBAAC,sBAAD,EAA+C,wBAA0B,CAAA;GACzE,oBAAC,uBAAD;IAAuB,WAAW,GAAG,YAAY,OAAO;IAAG,OAAO,cAAc;IAC7E;GACoB,CAAA;GACvB,oBAAC,sBAAD,EAAsB,UAAU,mBAAqB,CAAA;EACnC;;AAExB,CACF;AAEA,eAAe,cAAc"}

package/es/base-ui/DraggablePanel/atoms.d.mts

@@ -0,0 +1,47 @@
+import { DivProps } from "../../types/index.mjs";
+import { Placement } from "./core/axes.mjs";
+import { ReactNode } from "react";
+//#region src/base-ui/DraggablePanel/atoms.d.ts
+interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {
+  backgroundColor?: string;
+  collapseThreshold?: number;
+  defaultExpand?: boolean;
+  defaultSize?: number;
+  expand?: boolean;
+  expandable?: boolean;
+  max?: number;
+  min?: number;
+  mode?: 'fixed' | 'float';
+  onExpandChange?: (expand: boolean) => void;
+  onSizeChange?: (size: number, delta: number) => void;
+  onSizeDragging?: (size: number, delta: number) => void;
+  placement?: Placement;
+  showBorder?: boolean;
+  size?: number;
+}
+declare const DraggablePanelRoot: import("react").NamedExoticComponent<DraggablePanelRootProps>;
+interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}
+declare const DraggablePanelContent: import("react").NamedExoticComponent<DraggablePanelContentProps>;
+interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {
+  wideArea?: boolean;
+}
+declare const DraggablePanelHandle: import("react").NamedExoticComponent<DraggablePanelHandleProps>;
+interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {
+  showHandleWhenCollapsed?: boolean;
+}
+declare const DraggablePanelToggle: import("react").NamedExoticComponent<DraggablePanelToggleProps>;
+type DraggablePanelContainerProps = DivProps;
+declare const DraggablePanelContainer: import("react").NamedExoticComponent<DivProps>;
+type DraggablePanelBodyProps = DivProps;
+declare const DraggablePanelBody: import("react").NamedExoticComponent<DivProps>;
+type DraggablePanelFooterProps = DivProps;
+declare const DraggablePanelFooter: import("react").NamedExoticComponent<DivProps>;
+interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {
+  extra?: ReactNode;
+  onCollapse?: () => void;
+  title?: ReactNode;
+}
+declare const DraggablePanelHeader: import("react").NamedExoticComponent<DraggablePanelHeaderProps>;
+//#endregion
+export { DraggablePanelBody, DraggablePanelBodyProps, DraggablePanelContainer, DraggablePanelContainerProps, DraggablePanelContent, DraggablePanelContentProps, DraggablePanelFooter, DraggablePanelFooterProps, DraggablePanelHandle, DraggablePanelHandleProps, DraggablePanelHeader, DraggablePanelHeaderProps, DraggablePanelRoot, DraggablePanelRootProps, DraggablePanelToggle, DraggablePanelToggleProps };
+//# sourceMappingURL=atoms.d.mts.map

package/es/base-ui/DraggablePanel/atoms.mjs

@@ -0,0 +1,333 @@
+"use client";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { DraggablePanelContext, useDraggablePanelContext } from "./context.mjs";
+import { AXES } from "./core/axes.mjs";
+import { coarsePointer, handleSize } from "./core/env.mjs";
+import { timing } from "./core/transition.mjs";
+import { createPanelController } from "./core/controller.mjs";
+import { useIsomorphicLayoutEffect, useStore } from "./core/internal.mjs";
+import { BOW, handleVariants, rootVariants, styles, toggleVariants } from "./style.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { motion, useTransform } from "motion/react";
+import useMergeState from "use-merge-value";
+import { ChevronLeft } from "lucide-react";
+//#region src/base-ui/DraggablePanel/atoms.tsx
+const PAN_THRESHOLD = 3;
+const BOW_CX = 15;
+const BOW_CY = BOW.half + 8;
+const BOW_W = 30;
+const BOW_H = BOW_CY * 2;
+const bowPath = (direction, verticalSeam) => {
+	const k = BOW.half * BOW.curve;
+	const b = BOW_CX + BOW.bulge * direction;
+	const a0 = BOW_CY - BOW.half;
+	const a1 = BOW_CY + BOW.half;
+	const pt = (along, across) => verticalSeam ? `${along} ${across}` : `${across} ${along}`;
+	return [
+		`M${pt(BOW_CX, a0)}`,
+		`C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,
+		`C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`
+	].join(" ");
+};
+const BOW_PATHS = {
+	horizontalSeam: [bowPath(-1, false), bowPath(1, false)],
+	verticalSeam: [bowPath(-1, true), bowPath(1, true)]
+};
+/** The chevron points the way a click moves the panel. */
+const CHEVRON_TURN = {
+	bottom: 270,
+	left: 0,
+	right: 180,
+	top: 90
+};
+const chevronPath = (cx, cy) => `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;
+const ORIGIN_MAP = {
+	bottom: "center bottom",
+	left: "left center",
+	right: "right center",
+	top: "center top"
+};
+const COLLAPSED_SCALE = .97;
+const EDGE_INSET = {
+	bottom: "insetBlockEnd",
+	left: "insetInlineStart",
+	right: "insetInlineEnd",
+	top: "insetBlockStart"
+};
+const DraggablePanelRoot = memo(({ backgroundColor, children, className, collapseThreshold, defaultExpand = true, defaultSize, expand, expandable = true, max, min = 0, mode = "fixed", onExpandChange, onSizeChange, onSizeDragging, placement = "right", showBorder = true, size, style, ...rest }) => {
+	const axis = AXES[placement];
+	const fallbackSize = axis.vertical ? 180 : 280;
+	const resolvedDefaultSize = defaultSize ?? fallbackSize;
+	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
+		onChange: onExpandChange,
+		value: expand
+	});
+	const [innerSize, setInnerSize] = useState(resolvedDefaultSize);
+	const currentSize = size ?? innerSize;
+	const commitSize = useCallback((next, delta) => {
+		if (size === void 0) setInnerSize(next);
+		onSizeChange?.(next, delta);
+	}, [onSizeChange, size]);
+	const options = {
+		collapseThreshold: expandable ? collapseThreshold : void 0,
+		defaultSize: resolvedDefaultSize,
+		expand: isExpand,
+		max,
+		min,
+		onExpandChange: expandable ? setIsExpand : void 0,
+		onSizeChange: commitSize,
+		onSizeDragging,
+		placement,
+		size: currentSize
+	};
+	const [controller] = useState(() => createPanelController(options));
+	const state = useStore(controller.subscribe, () => controller.state);
+	const elementRef = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		controller.sync(options);
+	});
+	useIsomorphicLayoutEffect(() => {
+		const node = elementRef.current;
+		return node ? controller.attach(node) : void 0;
+	}, [controller]);
+	const toggleExpand = useCallback(() => {
+		if (expandable) setIsExpand(!isExpand);
+	}, [
+		expandable,
+		isExpand,
+		setIsExpand
+	]);
+	const context = useMemo(() => ({
+		axis,
+		controller,
+		expand: isExpand,
+		expandable,
+		placement,
+		showBorder,
+		state,
+		toggleExpand
+	}), [
+		axis,
+		controller,
+		isExpand,
+		expandable,
+		placement,
+		showBorder,
+		state,
+		toggleExpand
+	]);
+	return /* @__PURE__ */ jsx(DraggablePanelContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx("aside", {
+			className: cx(rootVariants({
+				mode,
+				placement
+			}), className),
+			"data-expand": isExpand,
+			"data-expandable": expandable,
+			"data-resizing": state.dragging,
+			ref: elementRef,
+			style: {
+				"--draggable-panel-bg": backgroundColor || "",
+				"flexDirection": axis.vertical ? "column" : "row",
+				...style
+			},
+			...rest,
+			children
+		})
+	});
+});
+DraggablePanelRoot.displayName = "DraggablePanelRoot";
+const DraggablePanelContent = memo(({ children, className, style, ...rest }) => {
+	const { axis, controller, expand, placement, state } = useDraggablePanelContext();
+	const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));
+	const clipping = state.dragging || state.folding || controller.target === 0;
+	const shrunk = state.collapsing || !expand;
+	return /* @__PURE__ */ jsx(motion.div, {
+		inert: !expand,
+		style: {
+			display: "flex",
+			flexDirection: axis.vertical ? "column" : "row",
+			flexShrink: 0,
+			justifyContent: axis.anchorEnd ? "flex-end" : "flex-start",
+			overflow: clipping ? "clip" : "visible",
+			[axis.cross]: "100%",
+			[axis.extent]: extent
+		},
+		children: /* @__PURE__ */ jsx(motion.div, {
+			animate: { scale: shrunk ? COLLAPSED_SCALE : 1 },
+			className: cx(styles.content, className),
+			transition: timing(),
+			style: {
+				transformOrigin: ORIGIN_MAP[placement],
+				[axis.cross]: "100%",
+				[axis.extent]: controller.motion.content,
+				...style
+			},
+			...rest,
+			children
+		})
+	});
+});
+DraggablePanelContent.displayName = "DraggablePanelContent";
+const DraggablePanelHandle = memo(({ className, style, wideArea = true, ...rest }) => {
+	const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();
+	const size = useStore(coarsePointer.subscribe, () => handleSize(wideArea));
+	const target = useStore(controller.subscribe, () => controller.target);
+	useEffect(() => () => controller.drag.cancel(), [controller]);
+	const pressedRef = useRef(null);
+	const draggingRef = useRef(false);
+	const draggedRef = useRef(false);
+	const { max, min } = controller.bounds();
+	if (!expand) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-orientation": axis.ariaOrientation,
+		"aria-valuemax": Number.isFinite(max) ? max : void 0,
+		"aria-valuemin": min,
+		"aria-valuenow": target,
+		"aria-valuetext": `${target} pixels`,
+		className: cx(handleVariants({ edge: axis.edge }), className),
+		"data-border": showBorder,
+		"data-resizing": state.dragging || void 0,
+		role: "separator",
+		tabIndex: 0,
+		style: {
+			"--draggable-panel-handle-size": `${size}px`,
+			[EDGE_INSET[axis.edge]]: -size / 2,
+			...style
+		},
+		onKeyDown: (event) => controller.resizeByKey(event),
+		onDoubleClick: () => {
+			if (!draggedRef.current) controller.reset();
+		},
+		onLostPointerCapture: () => {
+			if (draggingRef.current) controller.drag.cancel();
+			pressedRef.current = null;
+			draggingRef.current = false;
+		},
+		onPointerCancel: () => {
+			controller.drag.cancel();
+			pressedRef.current = null;
+			draggingRef.current = false;
+		},
+		onPointerDown: (event) => {
+			draggedRef.current = false;
+			pressedRef.current = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			try {
+				event.currentTarget.setPointerCapture(event.pointerId);
+			} catch {}
+		},
+		onPointerMove: (event) => {
+			if (!pressedRef.current) return;
+			const offset = {
+				x: event.clientX - pressedRef.current.x,
+				y: event.clientY - pressedRef.current.y
+			};
+			if (!draggingRef.current) {
+				if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;
+				draggingRef.current = true;
+				draggedRef.current = true;
+				controller.drag.start();
+			}
+			controller.drag.move(offset);
+		},
+		onPointerUp: () => {
+			if (draggingRef.current) controller.drag.end();
+			pressedRef.current = null;
+			draggingRef.current = false;
+		},
+		...rest
+	});
+});
+DraggablePanelHandle.displayName = "DraggablePanelHandle";
+const DraggablePanelToggle = memo(({ className, showHandleWhenCollapsed, style, ...rest }) => {
+	const { axis, expand, expandable, placement, toggleExpand } = useDraggablePanelContext();
+	if (!expandable) return null;
+	const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);
+	const chevX = axis.vertical ? BOW_CY : BOW_CX;
+	const chevY = axis.vertical ? BOW_CX : BOW_CY;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(toggleVariants({ placement }), className),
+		style: {
+			opacity: expand ? void 0 : showHandleWhenCollapsed ? 1 : 0,
+			...style
+		},
+		...rest,
+		children: /* @__PURE__ */ jsx("button", {
+			"aria-label": expand ? "Collapse panel" : "Expand panel",
+			type: "button",
+			onClick: toggleExpand,
+			children: /* @__PURE__ */ jsxs("svg", {
+				fill: "none",
+				height: axis.vertical ? BOW_W : BOW_H,
+				viewBox: `0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`,
+				width: axis.vertical ? BOW_H : BOW_W,
+				children: [BOW_PATHS[axis.vertical ? "horizontalSeam" : "verticalSeam"].map((d) => /* @__PURE__ */ jsx("path", {
+					d,
+					"data-bow": "",
+					strokeLinecap: "round",
+					strokeWidth: BOW.stroke
+				}, d)), /* @__PURE__ */ jsx("g", {
+					style: {
+						rotate: `${turn}deg`,
+						transformOrigin: `${chevX}px ${chevY}px`,
+						transition: "rotate 0.25s var(--ant-motion-ease-out, ease)"
+					},
+					children: /* @__PURE__ */ jsx("path", {
+						d: chevronPath(chevX, chevY),
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 1.6
+					})
+				})]
+			})
+		})
+	});
+});
+DraggablePanelToggle.displayName = "DraggablePanelToggle";
+const DraggablePanelContainer = memo(({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cx(styles.container, className),
+	...rest
+}));
+DraggablePanelContainer.displayName = "DraggablePanelContainer";
+const DraggablePanelBody = memo(({ className, style, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cx(styles.body, className),
+	style: {
+		flex: 1,
+		...style
+	},
+	...rest
+}));
+DraggablePanelBody.displayName = "DraggablePanelBody";
+const DraggablePanelFooter = memo(({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: cx(styles.footer, className),
+	...rest
+}));
+DraggablePanelFooter.displayName = "DraggablePanelFooter";
+const DraggablePanelHeader = memo(({ className, extra, onCollapse, title, ...rest }) => {
+	const { toggleExpand } = useDraggablePanelContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.header, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(ActionIcon, {
+				icon: ChevronLeft,
+				size: "small",
+				onClick: onCollapse ?? toggleExpand
+			}),
+			title,
+			extra
+		]
+	});
+});
+DraggablePanelHeader.displayName = "DraggablePanelHeader";
+//#endregion
+export { DraggablePanelBody, DraggablePanelContainer, DraggablePanelContent, DraggablePanelFooter, DraggablePanelHandle, DraggablePanelHeader, DraggablePanelRoot, DraggablePanelToggle };
+
+//# sourceMappingURL=atoms.mjs.map

package/es/base-ui/DraggablePanel/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { motion, useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { BOW, handleVariants, rootVariants, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst BOW_CX = 15;\nconst BOW_CY = BOW.half + 8;\nconst BOW_W = BOW_CX * 2;\nconst BOW_H = BOW_CY * 2;\n\nconst bowPath = (direction: 1 | -1, verticalSeam: boolean) => {\n  const k = BOW.half * BOW.curve;\n  const b = BOW_CX + BOW.bulge * direction;\n  const a0 = BOW_CY - BOW.half;\n  const a1 = BOW_CY + BOW.half;\n  // `a` runs along the seam, `b` across it; a horizontal seam swaps the two.\n  const pt = (along: number, across: number) =>\n    verticalSeam ? `${along} ${across}` : `${across} ${along}`;\n  return [\n    `M${pt(BOW_CX, a0)}`,\n    `C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,\n    `C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`,\n  ].join(' ');\n};\n\nconst BOW_PATHS = {\n  horizontalSeam: [bowPath(-1, false), bowPath(1, false)],\n  verticalSeam: [bowPath(-1, true), bowPath(1, true)],\n};\n\n/** The chevron points the way a click moves the panel. */\nconst CHEVRON_TURN = { bottom: 270, left: 0, right: 180, top: 90 } as const;\n\nconst chevronPath = (cx: number, cy: number) =>\n  `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;\n\nconst ORIGIN_MAP = {\n  bottom: 'center bottom',\n  left: 'left center',\n  right: 'right center',\n  top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n  bottom: 'insetBlockEnd',\n  left: 'insetInlineStart',\n  right: 'insetInlineEnd',\n  top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n  backgroundColor?: string;\n  collapseThreshold?: number;\n  defaultExpand?: boolean;\n  defaultSize?: number;\n  expand?: boolean;\n  expandable?: boolean;\n  max?: number;\n  min?: number;\n  mode?: 'fixed' | 'float';\n  onExpandChange?: (expand: boolean) => void;\n  onSizeChange?: (size: number, delta: number) => void;\n  onSizeDragging?: (size: number, delta: number) => void;\n  placement?: Placement;\n  showBorder?: boolean;\n  size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    collapseThreshold,\n    defaultExpand = true,\n    defaultSize,\n    expand,\n    expandable = true,\n    max,\n    min = 0,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    size,\n    style,\n    ...rest\n  }) => {\n    const axis = AXES[placement];\n    const fallbackSize = axis.vertical ? 180 : 280;\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n    const currentSize = size ?? innerSize;\n\n    const commitSize = useCallback(\n      (next: number, delta: number) => {\n        if (size === undefined) setInnerSize(next);\n        onSizeChange?.(next, delta);\n      },\n      [onSizeChange, size],\n    );\n\n    const options: PanelControllerOptions = {\n      collapseThreshold: expandable ? collapseThreshold : undefined,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: expandable ? setIsExpand : undefined,\n      onSizeChange: commitSize,\n      onSizeDragging,\n      placement,\n      size: currentSize,\n    };\n\n    const [controller] = useState(() => createPanelController(options));\n    const state = useStore(controller.subscribe, () => controller.state);\n    const elementRef = useRef<HTMLElement>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      controller.sync(options);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const node = elementRef.current;\n      return node ? controller.attach(node) : undefined;\n    }, [controller]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const context = useMemo(\n      () => ({\n        axis,\n        controller,\n        expand: isExpand,\n        expandable,\n        placement,\n        showBorder,\n        state,\n        toggleExpand,\n      }),\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n    );\n\n    return (\n      <DraggablePanelContext value={context}>\n        <aside\n          className={cx(rootVariants({ mode, placement }), className)}\n          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          style={\n            {\n              '--draggable-panel-bg': backgroundColor || '',\n              'flexDirection': axis.vertical ? 'column' : 'row',\n              ...style,\n            } as CSSProperties\n          }\n          {...rest}\n        >\n          {children}\n        </aside>\n      </DraggablePanelContext>\n    );\n  },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n  ({ children, className, style, ...rest }) => {\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    const clipping = state.dragging || state.folding || controller.target === 0;\n    const shrunk = state.collapsing || !expand;\n\n    return (\n      <motion.div\n        inert={!expand}\n        style={\n          {\n            display: 'flex',\n            flexDirection: axis.vertical ? 'column' : 'row',\n            flexShrink: 0,\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n            overflow: clipping ? 'clip' : 'visible',\n            [axis.cross]: '100%',\n            [axis.extent]: extent,\n          } as MotionStyle\n        }\n      >\n        <motion.div\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n          className={cx(styles.content, className)}\n          transition={timing()}\n          style={\n            {\n              transformOrigin: ORIGIN_MAP[placement],\n              [axis.cross]: '100%',\n              [axis.extent]: controller.motion.content,\n              ...style,\n            } as MotionStyle\n          }\n          {...(rest as HTMLMotionProps<'div'>)}\n        >\n          {children}\n        </motion.div>\n      </motion.div>\n    );\n  },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n  wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n  ({ className, style, wideArea = true, ...rest }) => {\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n    const target = useStore(controller.subscribe, () => controller.target);\n    useEffect(() => () => controller.drag.cancel(), [controller]);\n\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\n    const draggingRef = useRef(false);\n    const draggedRef = useRef(false);\n    const { max, min } = controller.bounds();\n\n    if (!expand) return null;\n\n    return (\n      <div\n        aria-orientation={axis.ariaOrientation}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuemin={min}\n        aria-valuenow={target}\n        aria-valuetext={`${target} pixels`}\n        className={cx(handleVariants({ edge: axis.edge }), className)}\n        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        style={\n          {\n            '--draggable-panel-handle-size': `${size}px`,\n            [EDGE_INSET[axis.edge]]: -size / 2,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => controller.resizeByKey(event)}\n        onDoubleClick={() => {\n          if (!draggedRef.current) controller.reset();\n        }}\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerDown={(event) => {\n          draggedRef.current = false;\n          pressedRef.current = { x: event.clientX, y: event.clientY };\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* empty */\n          }\n        }}\n        onPointerMove={(event) => {\n          if (!pressedRef.current) return;\n          const offset = {\n            x: event.clientX - pressedRef.current.x,\n            y: event.clientY - pressedRef.current.y,\n          };\n          if (!draggingRef.current) {\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n            draggingRef.current = true;\n            draggedRef.current = true;\n            controller.drag.start();\n          }\n          controller.drag.move(offset);\n        }}\n        onPointerUp={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n  showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n    const { axis, expand, expandable, placement, toggleExpand } = useDraggablePanelContext();\n\n    if (!expandable) return null;\n\n    const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);\n    const chevX = axis.vertical ? BOW_CY : BOW_CX;\n    const chevY = axis.vertical ? BOW_CX : BOW_CY;\n\n    return (\n      <div\n        className={cx(toggleVariants({ placement }), className)}\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n        >\n          <svg\n            fill=\"none\"\n            height={axis.vertical ? BOW_W : BOW_H}\n            viewBox={`0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`}\n            width={axis.vertical ? BOW_H : BOW_W}\n          >\n            {BOW_PATHS[axis.vertical ? 'horizontalSeam' : 'verticalSeam'].map((d) => (\n              <path d={d} data-bow=\"\" key={d} strokeLinecap=\"round\" strokeWidth={BOW.stroke} />\n            ))}\n            <g\n              style={{\n                rotate: `${turn}deg`,\n                transformOrigin: `${chevX}px ${chevY}px`,\n                transition: 'rotate 0.25s var(--ant-motion-ease-out, ease)',\n              }}\n            >\n              <path\n                d={chevronPath(chevX, chevY)}\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.6}\n              />\n            </g>\n          </svg>\n        </button>\n      </div>\n    );\n  },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n  ({ className, ...rest }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div className={cx(styles.body, className)} style={{ flex: 1, ...style }} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n  <div className={cx(styles.footer, className)} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n  extra?: ReactNode;\n  onCollapse?: () => void;\n  title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n  ({ className, extra, onCollapse, title, ...rest }) => {\n    const { toggleExpand } = useDraggablePanelContext();\n\n    return (\n      <div className={cx(styles.header, className)} {...rest}>\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n        {title}\n        {extra}\n      </div>\n    );\n  },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}

package/es/base-ui/DraggablePanel/context.d.mts

@@ -0,0 +1,17 @@
+import { Axis, Placement } from "./core/axes.mjs";
+import { PanelController, PanelState } from "./core/controller.mjs";
+//#region src/base-ui/DraggablePanel/context.d.ts
+interface DraggablePanelContextValue {
+  axis: Axis;
+  controller: PanelController;
+  expand: boolean;
+  expandable: boolean;
+  placement: Placement;
+  showBorder: boolean;
+  state: PanelState;
+  toggleExpand: () => void;
+}
+declare const useDraggablePanelContext: () => DraggablePanelContextValue;
+//#endregion
+export { DraggablePanelContextValue, useDraggablePanelContext };
+//# sourceMappingURL=context.d.mts.map

package/es/base-ui/DraggablePanel/context.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/base-ui/DraggablePanel/context.ts
+const DraggablePanelContext = createContext(null);
+const useDraggablePanelContext = () => {
+	const context = use(DraggablePanelContext);
+	if (!context) throw new Error("DraggablePanel atoms must be used inside DraggablePanelRoot");
+	return context;
+};
+//#endregion
+export { DraggablePanelContext, useDraggablePanelContext };
+
+//# sourceMappingURL=context.mjs.map

package/es/base-ui/DraggablePanel/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { Axis, Placement } from './core/axes';\nimport type { PanelController, PanelState } from './core/controller';\n\nexport interface DraggablePanelContextValue {\n  axis: Axis;\n  controller: PanelController;\n  expand: boolean;\n  expandable: boolean;\n  placement: Placement;\n  showBorder: boolean;\n  state: PanelState;\n  toggleExpand: () => void;\n}\n\nexport const DraggablePanelContext = createContext<DraggablePanelContextValue | null>(null);\n\nexport const useDraggablePanelContext = () => {\n  const context = use(DraggablePanelContext);\n  if (!context) throw new Error('DraggablePanel atoms must be used inside DraggablePanelRoot');\n  return context;\n};\n"],"mappings":";;;AAkBA,MAAa,wBAAwB,cAAiD,IAAI;AAE1F,MAAa,iCAAiC;CAC5C,MAAM,UAAU,IAAI,qBAAqB;CACzC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,6DAA6D;CAC3F,OAAO;AACT"}

package/es/base-ui/DraggablePanel/core/axes.d.mts

@@ -0,0 +1,16 @@
+//#region src/base-ui/DraggablePanel/core/axes.d.ts
+type Placement = 'bottom' | 'left' | 'right' | 'top';
+interface Axis {
+  anchorEnd: boolean;
+  ariaOrientation: 'horizontal' | 'vertical';
+  cross: 'height' | 'width';
+  cursor: 'col-resize' | 'row-resize';
+  edge: Placement;
+  extent: 'height' | 'width';
+  grow: 1 | -1;
+  point: 'x' | 'y';
+  vertical: boolean;
+}
+//#endregion
+export { Axis, Placement };
+//# sourceMappingURL=axes.d.mts.map

package/es/base-ui/DraggablePanel/core/axes.mjs

@@ -0,0 +1,51 @@
+//#region src/base-ui/DraggablePanel/core/axes.ts
+const AXES = {
+	bottom: {
+		anchorEnd: true,
+		ariaOrientation: "horizontal",
+		cross: "width",
+		cursor: "row-resize",
+		edge: "top",
+		extent: "height",
+		grow: -1,
+		point: "y",
+		vertical: true
+	},
+	left: {
+		anchorEnd: false,
+		ariaOrientation: "vertical",
+		cross: "height",
+		cursor: "col-resize",
+		edge: "right",
+		extent: "width",
+		grow: 1,
+		point: "x",
+		vertical: false
+	},
+	right: {
+		anchorEnd: true,
+		ariaOrientation: "vertical",
+		cross: "height",
+		cursor: "col-resize",
+		edge: "left",
+		extent: "width",
+		grow: -1,
+		point: "x",
+		vertical: false
+	},
+	top: {
+		anchorEnd: false,
+		ariaOrientation: "horizontal",
+		cross: "width",
+		cursor: "row-resize",
+		edge: "bottom",
+		extent: "height",
+		grow: 1,
+		point: "y",
+		vertical: true
+	}
+};
+//#endregion
+export { AXES };
+
+//# sourceMappingURL=axes.mjs.map

package/es/base-ui/DraggablePanel/core/axes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"axes.mjs","names":[],"sources":["../../../../src/base-ui/DraggablePanel/core/axes.ts"],"sourcesContent":["export type Placement = 'bottom' | 'left' | 'right' | 'top';\n\nexport interface Axis {\n  anchorEnd: boolean;\n  ariaOrientation: 'horizontal' | 'vertical';\n  cross: 'height' | 'width';\n  cursor: 'col-resize' | 'row-resize';\n  edge: Placement;\n  extent: 'height' | 'width';\n  grow: 1 | -1;\n  point: 'x' | 'y';\n  vertical: boolean;\n}\n\nexport const AXES: Record<Placement, Axis> = {\n  bottom: {\n    anchorEnd: true,\n    ariaOrientation: 'horizontal',\n    cross: 'width',\n    cursor: 'row-resize',\n    edge: 'top',\n    extent: 'height',\n    grow: -1,\n    point: 'y',\n    vertical: true,\n  },\n  left: {\n    anchorEnd: false,\n    ariaOrientation: 'vertical',\n    cross: 'height',\n    cursor: 'col-resize',\n    edge: 'right',\n    extent: 'width',\n    grow: 1,\n    point: 'x',\n    vertical: false,\n  },\n  right: {\n    anchorEnd: true,\n    ariaOrientation: 'vertical',\n    cross: 'height',\n    cursor: 'col-resize',\n    edge: 'left',\n    extent: 'width',\n    grow: -1,\n    point: 'x',\n    vertical: false,\n  },\n  top: {\n    anchorEnd: false,\n    ariaOrientation: 'horizontal',\n    cross: 'width',\n    cursor: 'row-resize',\n    edge: 'bottom',\n    extent: 'height',\n    grow: 1,\n    point: 'y',\n    vertical: true,\n  },\n};\n\nexport const mirrorPlacement = (placement: Placement): Placement => {\n  if (placement === 'left') return 'right';\n  if (placement === 'right') return 'left';\n  return placement;\n};\n"],"mappings":";AAcA,MAAa,OAAgC;CAC3C,QAAQ;EACN,WAAW;EACX,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,MAAM;EACN,OAAO;EACP,UAAU;CACZ;CACA,MAAM;EACJ,WAAW;EACX,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,MAAM;EACN,OAAO;EACP,UAAU;CACZ;CACA,OAAO;EACL,WAAW;EACX,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,MAAM;EACN,OAAO;EACP,UAAU;CACZ;CACA,KAAK;EACH,WAAW;EACX,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,MAAM;EACN,OAAO;EACP,UAAU;CACZ;AACF"}