@jinmi/ui 0.0.0-stage → 6.0.1

package/es/base-ui/Divider/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Divider/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  dashed: css`\r\n    border-style: dashed;\r\n\r\n    &::before,\r\n    &::after {\r\n      border-block-start-style: dashed;\r\n    }\r\n  `,\r\n  horizontal: css`\r\n    flex-shrink: 0;\r\n\r\n    width: 100%;\r\n    height: 0;\r\n    margin: 0;\r\n    border: 0;\r\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\r\n  `,\r\n  text: css`\r\n    flex: none;\r\n    font-size: 12px;\r\n    line-height: 1.5;\r\n    color: ${cssVar.colorTextDescription};\r\n  `,\r\n  vertical: css`\r\n    display: inline-block;\r\n    flex-shrink: 0;\r\n    align-self: center;\r\n\r\n    width: 0;\r\n    height: 1em;\r\n    margin: 0;\r\n    border: 0;\r\n    border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\r\n\r\n    vertical-align: middle;\r\n  `,\r\n  withText: css`\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: center;\r\n\r\n    width: 100%;\r\n    margin: 0;\r\n\r\n    &::before,\r\n    &::after {\r\n      content: '';\r\n      flex: 1;\r\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\r\n    }\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;CAQX,YAAY,GAAG;;;;;;;oCAOmB,OAAO,qBAAqB;;CAE9D,MAAM,GAAG;;;;aAIE,OAAO,qBAAqB;;CAEvC,UAAU,GAAG;;;;;;;;;qCASsB,OAAO,qBAAqB;;;;CAI/D,UAAU,GAAG;;;;;;;;;;;;sCAYuB,OAAO,qBAAqB;;;AAGlE,EAAE"}

package/es/base-ui/Divider/type.d.mts

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+//#region src/base-ui/Divider/type.d.ts
+type DividerOrientation = 'horizontal' | 'vertical';
+interface DividerProps extends Omit<ComponentProps<'div'>, 'children'> {
+  children?: ReactNode;
+  dashed?: boolean;
+  orientation?: DividerOrientation;
+  ref?: Ref<HTMLDivElement>;
+}
+//#endregion
+export { DividerOrientation, DividerProps };
+//# sourceMappingURL=type.d.mts.map

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,71 @@
+"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, style, 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,
+					...style
+				},
+				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';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo, useCallback } from 'react';\r\n\r\nimport {\r\n  DraggablePanelContent,\r\n  DraggablePanelHandle,\r\n  DraggablePanelRoot,\r\n  DraggablePanelToggle,\r\n} from './atoms';\r\nimport { AXES } from './core/axes';\r\nimport type { DraggablePanelProps, DraggablePanelSize } from './type';\r\n\r\nconst toNumber = (value: number | string | undefined) =>\r\n  typeof value === 'number' ? Math.max(value, 0) : undefined;\r\n\r\nconst DraggablePanel = memo<DraggablePanelProps>(\r\n  ({\r\n    backgroundColor,\r\n    children,\r\n    className,\r\n    classNames,\r\n    collapseThreshold,\r\n    defaultExpand,\r\n    defaultSize,\r\n    expand,\r\n    expandable = true,\r\n    maxHeight,\r\n    maxWidth,\r\n    minHeight,\r\n    minWidth,\r\n    mode = 'fixed',\r\n    onExpandChange,\r\n    onSizeChange,\r\n    onSizeDragging,\r\n    placement = 'right',\r\n    showBorder = true,\r\n    showHandleWhenCollapsed,\r\n    showHandleWideArea = true,\r\n    size,\r\n    style,\r\n    styles: customStyles,\r\n    ...rest\r\n  }) => {\r\n    const { vertical } = AXES[placement];\r\n\r\n    const toSize = useCallback(\r\n      (value: number): DraggablePanelSize =>\r\n        vertical ? { height: value, width: '100%' } : { height: '100%', width: value },\r\n      [vertical],\r\n    );\r\n    const toDelta = useCallback(\r\n      (value: number): DraggablePanelSize =>\r\n        vertical ? { height: value, width: 0 } : { height: 0, width: value },\r\n      [vertical],\r\n    );\r\n\r\n    const handleSizeChange = useCallback(\r\n      (next: number, delta: number) => onSizeChange?.(toDelta(delta), toSize(next)),\r\n      [onSizeChange, toDelta, toSize],\r\n    );\r\n    const handleSizeDragging = useCallback(\r\n      (next: number, delta: number) => onSizeDragging?.(toDelta(delta), toSize(next)),\r\n      [onSizeDragging, toDelta, toSize],\r\n    );\r\n\r\n    return (\r\n      <DraggablePanelRoot\r\n        backgroundColor={backgroundColor}\r\n        className={className}\r\n        collapseThreshold={collapseThreshold}\r\n        defaultExpand={defaultExpand}\r\n        defaultSize={toNumber(vertical ? defaultSize?.height : defaultSize?.width)}\r\n        expand={expand}\r\n        expandable={expandable}\r\n        max={toNumber(vertical ? maxHeight : maxWidth)}\r\n        min={toNumber(vertical ? minHeight : minWidth) ?? 0}\r\n        mode={mode}\r\n        placement={placement}\r\n        showBorder={showBorder}\r\n        size={toNumber(vertical ? size?.height : size?.width)}\r\n        onExpandChange={onExpandChange}\r\n        onSizeChange={handleSizeChange}\r\n        onSizeDragging={handleSizeDragging}\r\n        {...rest}\r\n      >\r\n        <DraggablePanelToggle showHandleWhenCollapsed={showHandleWhenCollapsed} />\r\n        <DraggablePanelContent\r\n          className={cx(classNames?.content)}\r\n          style={{ ...customStyles?.content, ...style }}\r\n        >\r\n          {children}\r\n        </DraggablePanelContent>\r\n        <DraggablePanelHandle wideArea={showHandleWideArea} />\r\n      </DraggablePanelRoot>\r\n    );\r\n  },\r\n);\r\n\r\nDraggablePanel.displayName = 'DraggablePanel';\r\n\r\nexport default DraggablePanel;\r\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,OACA,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;IACE,WAAW,GAAG,YAAY,OAAO;IACjC,OAAO;KAAE,GAAG,cAAc;KAAS,GAAG;IAAM;IAE3C;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,342 @@
+"use client";
+import { useMotionComponent } from "../../MotionProvider/index.mjs";
+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 { SEAM_ARROW, handleVariants, rootVariants, styles, toggleVariants } from "./style.mjs";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { 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 ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;
+const ARROW_C = ARROW_BOX / 2;
+const ARROW_PATH = (() => {
+	const { depth: d, half: h, lead } = SEAM_ARROW;
+	const c = ARROW_C;
+	const r = .12;
+	return [
+		`M${c} ${c - h - lead}`,
+		`Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,
+		`L${c - d * .88} ${c - h * r}`,
+		`Q${c - d} ${c} ${c - d * .88} ${c + h * r}`,
+		`L${c - d * r} ${c + h - h * r}`,
+		`Q${c} ${c + h} ${c} ${c + h + lead}`
+	].join(" ");
+})();
+const bendSign = (placement, expand) => (placement === "left" || placement === "top" ? 1 : -1) * (expand ? 1 : -1);
+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 options = {
+		collapseThreshold,
+		defaultSize: resolvedDefaultSize,
+		expand: isExpand,
+		max,
+		min,
+		onExpandChange: setIsExpand,
+		onSizeChange: useCallback((next, delta) => {
+			if (size === void 0) setInnerSize(next);
+			onSizeChange?.(next, delta);
+		}, [onSizeChange, size]),
+		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 Motion = useMotionComponent();
+	const { axis, controller, expand, placement, state } = useDraggablePanelContext();
+	const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));
+	const target = useStore(controller.subscribe, () => controller.target);
+	const clipping = state.dragging || state.folding || 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.end();
+			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, showBorder, toggleExpand } = useDraggablePanelContext();
+	const gradientId = `seam-arrow-${useId().replaceAll(/[^\w-]/g, "")}`;
+	if (!expandable) return null;
+	const bend = bendSign(placement, expand);
+	const edgeOpacity = expand && showBorder ? 1 : 0;
+	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: ARROW_BOX,
+				style: { "--seam-bend": bend },
+				viewBox: `0 0 ${ARROW_BOX} ${ARROW_BOX}`,
+				width: ARROW_BOX,
+				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+					gradientUnits: "userSpaceOnUse",
+					id: gradientId,
+					x1: ARROW_C,
+					x2: ARROW_C,
+					y1: 0,
+					y2: ARROW_BOX,
+					children: [
+						/* @__PURE__ */ jsx("stop", {
+							"data-end": "",
+							offset: 0,
+							stopOpacity: edgeOpacity
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							"data-tip": "",
+							offset: .3
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							"data-tip": "",
+							offset: .7
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							"data-end": "",
+							offset: 1,
+							stopOpacity: edgeOpacity
+						})
+					]
+				}) }), /* @__PURE__ */ jsx("g", {
+					transform: axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : void 0,
+					children: /* @__PURE__ */ jsx("path", {
+						d: ARROW_PATH,
+						stroke: `url(#${gradientId})`,
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: SEAM_ARROW.stroke
+					})
+				})]
+			})
+		})
+	});
+});
+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';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { ChevronLeft } from 'lucide-react';\r\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\r\nimport { useTransform } from 'motion/react';\r\nimport {\r\n  type CSSProperties,\r\n  memo,\r\n  type ReactNode,\r\n  useCallback,\r\n  useEffect,\r\n  useId,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport ActionIcon from '@/base-ui/ActionIcon';\r\nimport { useMotionComponent } from '@/MotionProvider';\r\nimport type { DivProps } from '@/types';\r\n\r\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\r\nimport type { Placement } from './core/axes';\r\nimport { AXES } from './core/axes';\r\nimport type { PanelControllerOptions } from './core/controller';\r\nimport { createPanelController } from './core/controller';\r\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\r\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\r\nimport { timing } from './core/transition';\r\nimport { handleVariants, rootVariants, SEAM_ARROW, styles, toggleVariants } from './style';\r\n\r\nconst PAN_THRESHOLD = 3;\r\n\r\nconst ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;\r\nconst ARROW_C = ARROW_BOX / 2;\r\n\r\nconst ARROW_PATH = (() => {\r\n  const { depth: d, half: h, lead } = SEAM_ARROW;\r\n  const c = ARROW_C;\r\n  const r = 0.12;\r\n  return [\r\n    `M${c} ${c - h - lead}`,\r\n    `Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,\r\n    `L${c - d * (1 - r)} ${c - h * r}`,\r\n    `Q${c - d} ${c} ${c - d * (1 - r)} ${c + h * r}`,\r\n    `L${c - d * r} ${c + h - h * r}`,\r\n    `Q${c} ${c + h} ${c} ${c + h + lead}`,\r\n  ].join(' ');\r\n})();\r\n\r\n// The path bends toward -x; the sign flips it so the seam points the way a click moves the panel.\r\nconst bendSign = (placement: Placement, expand: boolean) =>\r\n  (placement === 'left' || placement === 'top' ? 1 : -1) * (expand ? 1 : -1);\r\n\r\nconst ORIGIN_MAP = {\r\n  bottom: 'center bottom',\r\n  left: 'left center',\r\n  right: 'right center',\r\n  top: 'center top',\r\n} as const;\r\n\r\nconst COLLAPSED_SCALE = 0.97;\r\n\r\nconst EDGE_INSET = {\r\n  bottom: 'insetBlockEnd',\r\n  left: 'insetInlineStart',\r\n  right: 'insetInlineEnd',\r\n  top: 'insetBlockStart',\r\n} as const;\r\n\r\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\r\n  backgroundColor?: string;\r\n  collapseThreshold?: number;\r\n  defaultExpand?: boolean;\r\n  defaultSize?: number;\r\n  expand?: boolean;\r\n  expandable?: boolean;\r\n  max?: number;\r\n  min?: number;\r\n  mode?: 'fixed' | 'float';\r\n  onExpandChange?: (expand: boolean) => void;\r\n  onSizeChange?: (size: number, delta: number) => void;\r\n  onSizeDragging?: (size: number, delta: number) => void;\r\n  placement?: Placement;\r\n  showBorder?: boolean;\r\n  size?: number;\r\n}\r\n\r\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\r\n  ({\r\n    backgroundColor,\r\n    children,\r\n    className,\r\n    collapseThreshold,\r\n    defaultExpand = true,\r\n    defaultSize,\r\n    expand,\r\n    expandable = true,\r\n    max,\r\n    min = 0,\r\n    mode = 'fixed',\r\n    onExpandChange,\r\n    onSizeChange,\r\n    onSizeDragging,\r\n    placement = 'right',\r\n    showBorder = true,\r\n    size,\r\n    style,\r\n    ...rest\r\n  }) => {\r\n    const axis = AXES[placement];\r\n    const fallbackSize = axis.vertical ? 180 : 280;\r\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\r\n\r\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\r\n      onChange: onExpandChange,\r\n      value: expand,\r\n    });\r\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\r\n    const currentSize = size ?? innerSize;\r\n\r\n    const commitSize = useCallback(\r\n      (next: number, delta: number) => {\r\n        if (size === undefined) setInnerSize(next);\r\n        onSizeChange?.(next, delta);\r\n      },\r\n      [onSizeChange, size],\r\n    );\r\n\r\n    const options: PanelControllerOptions = {\r\n      collapseThreshold,\r\n      defaultSize: resolvedDefaultSize,\r\n      expand: isExpand,\r\n      max,\r\n      min,\r\n      onExpandChange: setIsExpand,\r\n      onSizeChange: commitSize,\r\n      onSizeDragging,\r\n      placement,\r\n      size: currentSize,\r\n    };\r\n\r\n    const [controller] = useState(() => createPanelController(options));\r\n    const state = useStore(controller.subscribe, () => controller.state);\r\n    const elementRef = useRef<HTMLElement>(null);\r\n\r\n    useIsomorphicLayoutEffect(() => {\r\n      controller.sync(options);\r\n    });\r\n\r\n    useIsomorphicLayoutEffect(() => {\r\n      const node = elementRef.current;\r\n      return node ? controller.attach(node) : undefined;\r\n    }, [controller]);\r\n\r\n    const toggleExpand = useCallback(() => {\r\n      if (expandable) setIsExpand(!isExpand);\r\n    }, [expandable, isExpand, setIsExpand]);\r\n\r\n    const context = useMemo(\r\n      () => ({\r\n        axis,\r\n        controller,\r\n        expand: isExpand,\r\n        expandable,\r\n        placement,\r\n        showBorder,\r\n        state,\r\n        toggleExpand,\r\n      }),\r\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\r\n    );\r\n\r\n    return (\r\n      <DraggablePanelContext value={context}>\r\n        <aside\r\n          className={cx(rootVariants({ mode, placement }), className)}\r\n          data-expand={isExpand}\r\n          data-expandable={expandable}\r\n          data-resizing={state.dragging}\r\n          ref={elementRef}\r\n          style={\r\n            {\r\n              '--draggable-panel-bg': backgroundColor || '',\r\n              'flexDirection': axis.vertical ? 'column' : 'row',\r\n              ...style,\r\n            } as CSSProperties\r\n          }\r\n          {...rest}\r\n        >\r\n          {children}\r\n        </aside>\r\n      </DraggablePanelContext>\r\n    );\r\n  },\r\n);\r\n\r\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\r\n\r\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\r\n\r\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\r\n  ({ children, className, style, ...rest }) => {\r\n    const Motion = useMotionComponent();\r\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\r\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\r\n    // Subscribed, not read: a collapse that changes only the target would otherwise\r\n    // leave the content unclipped and painted outside the zero-width box.\r\n    const target = useStore(controller.subscribe, () => controller.target);\r\n    const clipping = state.dragging || state.folding || target === 0;\r\n    const shrunk = state.collapsing || !expand;\r\n\r\n    return (\r\n      <Motion.div\r\n        inert={!expand}\r\n        style={\r\n          {\r\n            display: 'flex',\r\n            flexDirection: axis.vertical ? 'column' : 'row',\r\n            flexShrink: 0,\r\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\r\n            overflow: clipping ? 'clip' : 'visible',\r\n            [axis.cross]: '100%',\r\n            [axis.extent]: extent,\r\n          } as MotionStyle\r\n        }\r\n      >\r\n        <Motion.div\r\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\r\n          className={cx(styles.content, className)}\r\n          transition={timing()}\r\n          style={\r\n            {\r\n              transformOrigin: ORIGIN_MAP[placement],\r\n              [axis.cross]: '100%',\r\n              [axis.extent]: controller.motion.content,\r\n              ...style,\r\n            } as MotionStyle\r\n          }\r\n          {...(rest as HTMLMotionProps<'div'>)}\r\n        >\r\n          {children}\r\n        </Motion.div>\r\n      </Motion.div>\r\n    );\r\n  },\r\n);\r\n\r\nDraggablePanelContent.displayName = 'DraggablePanelContent';\r\n\r\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\r\n  wideArea?: boolean;\r\n}\r\n\r\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\r\n  ({ className, style, wideArea = true, ...rest }) => {\r\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\r\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\r\n    const target = useStore(controller.subscribe, () => controller.target);\r\n    useEffect(() => () => controller.drag.cancel(), [controller]);\r\n\r\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\r\n    const draggingRef = useRef(false);\r\n    const draggedRef = useRef(false);\r\n    const { max, min } = controller.bounds();\r\n\r\n    if (!expand) return null;\r\n\r\n    return (\r\n      <div\r\n        aria-orientation={axis.ariaOrientation}\r\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\r\n        aria-valuemin={min}\r\n        aria-valuenow={target}\r\n        aria-valuetext={`${target} pixels`}\r\n        className={cx(handleVariants({ edge: axis.edge }), className)}\r\n        data-border={showBorder}\r\n        data-resizing={state.dragging || undefined}\r\n        role=\"separator\"\r\n        tabIndex={0}\r\n        style={\r\n          {\r\n            '--draggable-panel-handle-size': `${size}px`,\r\n            [EDGE_INSET[axis.edge]]: -size / 2,\r\n            ...style,\r\n          } as CSSProperties\r\n        }\r\n        onKeyDown={(event) => controller.resizeByKey(event)}\r\n        onDoubleClick={() => {\r\n          if (!draggedRef.current) controller.reset();\r\n        }}\r\n        // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\r\n        // cursor) and the pointerup then never reaches us; the pointer is wherever the\r\n        // user last dragged it, so commit rather than snap back.\r\n        onLostPointerCapture={() => {\r\n          if (draggingRef.current) controller.drag.end();\r\n          pressedRef.current = null;\r\n          draggingRef.current = false;\r\n        }}\r\n        onPointerCancel={() => {\r\n          controller.drag.cancel();\r\n          pressedRef.current = null;\r\n          draggingRef.current = false;\r\n        }}\r\n        onPointerDown={(event) => {\r\n          draggedRef.current = false;\r\n          pressedRef.current = { x: event.clientX, y: event.clientY };\r\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\r\n          try {\r\n            event.currentTarget.setPointerCapture(event.pointerId);\r\n          } catch {\r\n            /* empty */\r\n          }\r\n        }}\r\n        onPointerMove={(event) => {\r\n          if (!pressedRef.current) return;\r\n          const offset = {\r\n            x: event.clientX - pressedRef.current.x,\r\n            y: event.clientY - pressedRef.current.y,\r\n          };\r\n          if (!draggingRef.current) {\r\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\r\n            draggingRef.current = true;\r\n            draggedRef.current = true;\r\n            controller.drag.start();\r\n          }\r\n          controller.drag.move(offset);\r\n        }}\r\n        onPointerUp={() => {\r\n          if (draggingRef.current) controller.drag.end();\r\n          pressedRef.current = null;\r\n          draggingRef.current = false;\r\n        }}\r\n        {...rest}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\r\n\r\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\r\n  showHandleWhenCollapsed?: boolean;\r\n}\r\n\r\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\r\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\r\n    const { axis, expand, expandable, placement, showBorder, toggleExpand } =\r\n      useDraggablePanelContext();\r\n    const gradientId = `seam-arrow-${useId().replaceAll(/[^\\w-]/g, '')}`;\r\n\r\n    if (!expandable) return null;\r\n\r\n    const bend = bendSign(placement, expand);\r\n    const edgeOpacity = expand && showBorder ? 1 : 0;\r\n\r\n    return (\r\n      <div\r\n        className={cx(toggleVariants({ placement }), className)}\r\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\r\n        {...rest}\r\n      >\r\n        <button\r\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\r\n          type=\"button\"\r\n          onClick={toggleExpand}\r\n        >\r\n          <svg\r\n            fill=\"none\"\r\n            height={ARROW_BOX}\r\n            style={{ '--seam-bend': bend } as CSSProperties}\r\n            viewBox={`0 0 ${ARROW_BOX} ${ARROW_BOX}`}\r\n            width={ARROW_BOX}\r\n          >\r\n            <defs>\r\n              <linearGradient\r\n                gradientUnits=\"userSpaceOnUse\"\r\n                id={gradientId}\r\n                x1={ARROW_C}\r\n                x2={ARROW_C}\r\n                y1={0}\r\n                y2={ARROW_BOX}\r\n              >\r\n                <stop data-end=\"\" offset={0} stopOpacity={edgeOpacity} />\r\n                <stop data-tip=\"\" offset={0.3} />\r\n                <stop data-tip=\"\" offset={0.7} />\r\n                <stop data-end=\"\" offset={1} stopOpacity={edgeOpacity} />\r\n              </linearGradient>\r\n            </defs>\r\n            <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\r\n              <path\r\n                d={ARROW_PATH}\r\n                stroke={`url(#${gradientId})`}\r\n                strokeLinecap=\"round\"\r\n                strokeLinejoin=\"round\"\r\n                strokeWidth={SEAM_ARROW.stroke}\r\n              />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\r\n\r\nexport type DraggablePanelContainerProps = DivProps;\r\n\r\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\r\n  ({ className, ...rest }) => <div className={cx(styles.container, className)} {...rest} />,\r\n);\r\n\r\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\r\n\r\nexport type DraggablePanelBodyProps = DivProps;\r\n\r\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\r\n  <div className={cx(styles.body, className)} style={{ flex: 1, ...style }} {...rest} />\r\n));\r\n\r\nDraggablePanelBody.displayName = 'DraggablePanelBody';\r\n\r\nexport type DraggablePanelFooterProps = DivProps;\r\n\r\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\r\n  <div className={cx(styles.footer, className)} {...rest} />\r\n));\r\n\r\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\r\n\r\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\r\n  extra?: ReactNode;\r\n  onCollapse?: () => void;\r\n  title?: ReactNode;\r\n}\r\n\r\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\r\n  ({ className, extra, onCollapse, title, ...rest }) => {\r\n    const { toggleExpand } = useDraggablePanelContext();\r\n\r\n    return (\r\n      <div className={cx(styles.header, className)} {...rest}>\r\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\r\n        {title}\r\n        {extra}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\r\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';\r\n\r\nimport { createContext, use } from 'react';\r\n\r\nimport type { Axis, Placement } from './core/axes';\r\nimport type { PanelController, PanelState } from './core/controller';\r\n\r\nexport interface DraggablePanelContextValue {\r\n  axis: Axis;\r\n  controller: PanelController;\r\n  expand: boolean;\r\n  expandable: boolean;\r\n  placement: Placement;\r\n  showBorder: boolean;\r\n  state: PanelState;\r\n  toggleExpand: () => void;\r\n}\r\n\r\nexport const DraggablePanelContext = createContext<DraggablePanelContextValue | null>(null);\r\n\r\nexport const useDraggablePanelContext = () => {\r\n  const context = use(DraggablePanelContext);\r\n  if (!context) throw new Error('DraggablePanel atoms must be used inside DraggablePanelRoot');\r\n  return context;\r\n};\r\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';\r\n\r\nexport interface Axis {\r\n  anchorEnd: boolean;\r\n  ariaOrientation: 'horizontal' | 'vertical';\r\n  cross: 'height' | 'width';\r\n  cursor: 'col-resize' | 'row-resize';\r\n  edge: Placement;\r\n  extent: 'height' | 'width';\r\n  grow: 1 | -1;\r\n  point: 'x' | 'y';\r\n  vertical: boolean;\r\n}\r\n\r\nexport const AXES: Record<Placement, Axis> = {\r\n  bottom: {\r\n    anchorEnd: true,\r\n    ariaOrientation: 'horizontal',\r\n    cross: 'width',\r\n    cursor: 'row-resize',\r\n    edge: 'top',\r\n    extent: 'height',\r\n    grow: -1,\r\n    point: 'y',\r\n    vertical: true,\r\n  },\r\n  left: {\r\n    anchorEnd: false,\r\n    ariaOrientation: 'vertical',\r\n    cross: 'height',\r\n    cursor: 'col-resize',\r\n    edge: 'right',\r\n    extent: 'width',\r\n    grow: 1,\r\n    point: 'x',\r\n    vertical: false,\r\n  },\r\n  right: {\r\n    anchorEnd: true,\r\n    ariaOrientation: 'vertical',\r\n    cross: 'height',\r\n    cursor: 'col-resize',\r\n    edge: 'left',\r\n    extent: 'width',\r\n    grow: -1,\r\n    point: 'x',\r\n    vertical: false,\r\n  },\r\n  top: {\r\n    anchorEnd: false,\r\n    ariaOrientation: 'horizontal',\r\n    cross: 'width',\r\n    cursor: 'row-resize',\r\n    edge: 'bottom',\r\n    extent: 'height',\r\n    grow: 1,\r\n    point: 'y',\r\n    vertical: true,\r\n  },\r\n};\r\n\r\nexport const mirrorPlacement = (placement: Placement): Placement => {\r\n  if (placement === 'left') return 'right';\r\n  if (placement === 'right') return 'left';\r\n  return placement;\r\n};\r\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"}