@lobehub/ui 5.51.0 → 5.51.2

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

@@ -7,8 +7,8 @@ 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 { 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";
@@ -16,34 +16,22 @@ 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}`;
+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${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)}`
+		`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 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 bendSign = (placement, expand) => (placement === "left" || placement === "top" ? 1 : -1) * (expand ? 1 : -1);
 const ORIGIN_MAP = {
 	bottom: "center bottom",
 	left: "left center",
@@ -248,11 +236,11 @@ const DraggablePanelHandle = memo(({ className, style, wideArea = true, ...rest
 });
 DraggablePanelHandle.displayName = "DraggablePanelHandle";
 const DraggablePanelToggle = memo(({ className, showHandleWhenCollapsed, style, ...rest }) => {
-	const { axis, expand, expandable, placement, toggleExpand } = useDraggablePanelContext();
+	const { axis, expand, expandable, placement, showBorder, toggleExpand } = useDraggablePanelContext();
+	const gradientId = `seam-arrow-${useId().replaceAll(/[^\w-]/g, "")}`;
 	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;
+	const bend = bendSign(placement, expand);
+	const edgeOpacity = expand && showBorder ? 1 : 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(toggleVariants({ placement }), className),
 		style: {
@@ -266,26 +254,45 @@ const DraggablePanelToggle = memo(({ className, showHandleWhenCollapsed, style,
 			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)"
-					},
+				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: chevronPath(chevX, chevY),
-						stroke: "currentColor",
+						d: ARROW_PATH,
+						stroke: `url(#${gradientId})`,
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
-						strokeWidth: 1.6
+						strokeWidth: SEAM_ARROW.stroke
 					})
 				})]
 			})

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

@@ -1 +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 { 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 { useMotionComponent } from '@/MotionProvider';\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,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\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 Motion = useMotionComponent();\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || 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        // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n        // cursor) and the pointerup then never reaches us; the pointer is wherever the\n        // user last dragged it, so commit rather than snap back.\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.end();\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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"}
+{"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 { useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { useMotionComponent } from '@/MotionProvider';\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 { handleVariants, rootVariants, SEAM_ARROW, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;\nconst ARROW_C = ARROW_BOX / 2;\n\nconst ARROW_PATH = (() => {\n  const { depth: d, half: h, lead } = SEAM_ARROW;\n  const c = ARROW_C;\n  const r = 0.12;\n  return [\n    `M${c} ${c - h - lead}`,\n    `Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,\n    `L${c - d * (1 - r)} ${c - h * r}`,\n    `Q${c - d} ${c} ${c - d * (1 - r)} ${c + h * r}`,\n    `L${c - d * r} ${c + h - h * r}`,\n    `Q${c} ${c + h} ${c} ${c + h + lead}`,\n  ].join(' ');\n})();\n\n// The path bends toward -x; the sign flips it so the seam points the way a click moves the panel.\nconst bendSign = (placement: Placement, expand: boolean) =>\n  (placement === 'left' || placement === 'top' ? 1 : -1) * (expand ? 1 : -1);\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,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\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 Motion = useMotionComponent();\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || 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        // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n        // cursor) and the pointerup then never reaches us; the pointer is wherever the\n        // user last dragged it, so commit rather than snap back.\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.end();\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, showBorder, toggleExpand } =\n      useDraggablePanelContext();\n    const gradientId = `seam-arrow-${useId().replaceAll(/[^\\w-]/g, '')}`;\n\n    if (!expandable) return null;\n\n    const bend = bendSign(placement, expand);\n    const edgeOpacity = expand && showBorder ? 1 : 0;\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={ARROW_BOX}\n            style={{ '--seam-bend': bend } as CSSProperties}\n            viewBox={`0 0 ${ARROW_BOX} ${ARROW_BOX}`}\n            width={ARROW_BOX}\n          >\n            <defs>\n              <linearGradient\n                gradientUnits=\"userSpaceOnUse\"\n                id={gradientId}\n                x1={ARROW_C}\n                x2={ARROW_C}\n                y1={0}\n                y2={ARROW_BOX}\n              >\n                <stop data-end=\"\" offset={0} stopOpacity={edgeOpacity} />\n                <stop data-tip=\"\" offset={0.3} />\n                <stop data-tip=\"\" offset={0.7} />\n                <stop data-end=\"\" offset={1} stopOpacity={edgeOpacity} />\n              </linearGradient>\n            </defs>\n            <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n              <path\n                d={ARROW_PATH}\n                stroke={`url(#${gradientId})`}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={SEAM_ARROW.stroke}\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":";;;;;;;;;;;;;;;;;AAiCA,MAAM,gBAAgB;AAEtB,MAAM,aAAa,WAAW,OAAO,WAAW,QAAQ;AACxD,MAAM,UAAU,YAAY;AAE5B,MAAM,oBAAoB;CACxB,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS;CACpC,MAAM,IAAI;CACV,MAAM,IAAI;CACV,OAAO;EACL,IAAI,EAAE,GAAG,IAAI,IAAI;EACjB,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,IAAI;EAC3C,IAAI,IAAI,IAAK,IAAO,GAAG,IAAI,IAAI;EAC/B,IAAI,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAK,IAAO,GAAG,IAAI,IAAI;EAC7C,IAAI,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,IAAI;EAC7B,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI;CACjC,CAAC,CAAC,KAAK,GAAG;AACZ,EAAA,CAAG;AAGH,MAAM,YAAY,WAAsB,YACrC,cAAc,UAAU,cAAc,QAAQ,IAAI,OAAO,SAAS,IAAI;AAEzE,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,kBAAkB;AAExB,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAoBA,MAAa,qBAAqB,MAC/B,EACC,iBACA,UACA,WACA,mBACA,gBAAgB,MAChB,aACA,QACA,aAAa,MACb,KACA,MAAM,GACN,OAAO,SACP,gBACA,cACA,gBACA,YAAY,SACZ,aAAa,MACb,MACA,OACA,GAAG,WACC;CACJ,MAAM,OAAO,KAAK;CAClB,MAAM,eAAe,KAAK,WAAW,MAAM;CAC3C,MAAM,sBAAsB,eAAe;CAE3C,MAAM,CAAC,UAAU,eAAeA,cAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,CAAC,WAAW,gBAAgB,SAAS,mBAAmB;CAC9D,MAAM,cAAc,QAAQ;CAU5B,MAAM,UAAkC;EACtC;EACA,aAAa;EACb,QAAQ;EACR;EACA;EACA,gBAAgB;EAChB,cAfiB,aAChB,MAAc,UAAkB;GAC/B,IAAI,SAAS,KAAA,GAAW,aAAa,IAAI;GACzC,eAAe,MAAM,KAAK;EAC5B,GACA,CAAC,cAAc,IAAI,CAUI;EACvB;EACA;EACA,MAAM;CACR;CAEA,MAAM,CAAC,cAAc,eAAe,sBAAsB,OAAO,CAAC;CAClE,MAAM,QAAQ,SAAS,WAAW,iBAAiB,WAAW,KAAK;CACnE,MAAM,aAAa,OAAoB,IAAI;CAE3C,gCAAgC;EAC9B,WAAW,KAAK,OAAO;CACzB,CAAC;CAED,gCAAgC;EAC9B,MAAM,OAAO,WAAW;EACxB,OAAO,OAAO,WAAW,OAAO,IAAI,IAAI,KAAA;CAC1C,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,kBAAkB;EACrC,IAAI,YAAY,YAAY,CAAC,QAAQ;CACvC,GAAG;EAAC;EAAY;EAAU;CAAW,CAAC;CAEtC,MAAM,UAAU,eACP;EACL;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAM;EAAY;EAAU;EAAY;EAAW;EAAY;EAAO;CAAY,CACrF;CAEA,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,SAAD;GACE,WAAW,GAAG,aAAa;IAAE;IAAM;GAAU,CAAC,GAAG,SAAS;GAC1D,eAAa;GACb,mBAAiB;GACjB,iBAAe,MAAM;GACrB,KAAK;GACL,OACE;IACE,wBAAwB,mBAAmB;IAC3C,iBAAiB,KAAK,WAAW,WAAW;IAC5C,GAAG;GACL;GAEF,GAAI;GAEH;EACI,CAAA;CACc,CAAA;AAE3B,CACF;AAEA,mBAAmB,cAAc;AAIjC,MAAa,wBAAwB,MAClC,EAAE,UAAU,WAAW,OAAO,GAAG,WAAW;CAC3C,MAAM,SAAS,mBAAmB;CAClC,MAAM,EAAE,MAAM,YAAY,QAAQ,WAAW,UAAU,yBAAyB;CAChF,MAAM,SAAS,aAAa,WAAW,OAAO,OAAO,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC;CAGjF,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,WAAW;CAC/D,MAAM,SAAS,MAAM,cAAc,CAAC;CAEpC,OACE,oBAAC,OAAO,KAAR;EACE,OAAO,CAAC;EACR,OACE;GACE,SAAS;GACT,eAAe,KAAK,WAAW,WAAW;GAC1C,YAAY;GACZ,gBAAgB,KAAK,YAAY,aAAa;GAC9C,UAAU,WAAW,SAAS;IAC7B,KAAK,QAAQ;IACb,KAAK,SAAS;EACjB;EAGF,UAAA,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,OAAO,SAAS,kBAAkB,EAAE;GAC/C,WAAW,GAAG,OAAO,SAAS,SAAS;GACvC,YAAY,OAAO;GACnB,OACE;IACE,iBAAiB,WAAW;KAC3B,KAAK,QAAQ;KACb,KAAK,SAAS,WAAW,OAAO;IACjC,GAAG;GACL;GAEF,GAAK;GAEJ;EACS,CAAA;CACF,CAAA;AAEhB,CACF;AAEA,sBAAsB,cAAc;AAMpC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,WAAW,MAAM,GAAG,WAAW;CAClD,MAAM,EAAE,MAAM,YAAY,QAAQ,YAAY,UAAU,yBAAyB;CACjF,MAAM,OAAO,SAAS,cAAc,iBAAiBC,WAAc,QAAQ,CAAC;CAC5E,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,sBAAsB,WAAW,KAAK,OAAO,GAAG,CAAC,UAAU,CAAC;CAE5D,MAAM,aAAa,OAAwC,IAAI;CAC/D,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,EAAE,KAAK,QAAQ,WAAW,OAAO;CAEvC,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,oBAAC,OAAD;EACE,oBAAkB,KAAK;EACvB,iBAAe,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;EAC5C,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,OAAO;EAC1B,WAAW,GAAG,eAAe,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,SAAS;EAC5D,eAAa;EACb,iBAAe,MAAM,YAAY,KAAA;EACjC,MAAK;EACL,UAAU;EACV,OACE;GACE,iCAAiC,GAAG,KAAK;IACxC,WAAW,KAAK,QAAQ,CAAC,OAAO;GACjC,GAAG;EACL;EAEF,YAAY,UAAU,WAAW,YAAY,KAAK;EAClD,qBAAqB;GACnB,IAAI,CAAC,WAAW,SAAS,WAAW,MAAM;EAC5C;EAIA,4BAA4B;GAC1B,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,uBAAuB;GACrB,WAAW,KAAK,OAAO;GACvB,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,gBAAgB,UAAU;GACxB,WAAW,UAAU;GACrB,WAAW,UAAU;IAAE,GAAG,MAAM;IAAS,GAAG,MAAM;GAAQ;GAE1D,IAAI;IACF,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACvD,QAAQ,CAER;EACF;EACA,gBAAgB,UAAU;GACxB,IAAI,CAAC,WAAW,SAAS;GACzB,MAAM,SAAS;IACb,GAAG,MAAM,UAAU,WAAW,QAAQ;IACtC,GAAG,MAAM,UAAU,WAAW,QAAQ;GACxC;GACA,IAAI,CAAC,YAAY,SAAS;IACxB,IAAI,KAAK,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,eAAe;IACpD,YAAY,UAAU;IACtB,WAAW,UAAU;IACrB,WAAW,KAAK,MAAM;GACxB;GACA,WAAW,KAAK,KAAK,MAAM;EAC7B;EACA,mBAAmB;GACjB,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,qBAAqB,cAAc;AAMnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,yBAAyB,OAAO,GAAG,WAAW;CAC1D,MAAM,EAAE,MAAM,QAAQ,YAAY,WAAW,YAAY,iBACvD,yBAAyB;CAC3B,MAAM,aAAa,cAAc,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAEjE,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,OAAO,SAAS,WAAW,MAAM;CACvC,MAAM,cAAc,UAAU,aAAa,IAAI;CAE/C,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,eAAe,EAAE,UAAU,CAAC,GAAG,SAAS;EACtD,OAAO;GAAE,SAAS,SAAS,KAAA,IAAY,0BAA0B,IAAI;GAAG,GAAG;EAAM;EACjF,GAAI;EAEJ,UAAA,oBAAC,UAAD;GACE,cAAY,SAAS,mBAAmB;GACxC,MAAK;GACL,SAAS;GAET,UAAA,qBAAC,OAAD;IACE,MAAK;IACL,QAAQ;IACR,OAAO,EAAE,eAAe,KAAK;IAC7B,SAAS,OAAO,UAAU,GAAG;IAC7B,OAAO;IALT,UAAA,CAOE,oBAAC,QAAD,EAAA,UACE,qBAAC,kBAAD;KACE,eAAc;KACd,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KANN,UAAA;MAQE,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAG,aAAa;MAAc,CAAA;MACxD,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;MAAM,CAAA;MAChC,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;MAAM,CAAA;MAChC,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAG,aAAa;MAAc,CAAA;KAC1C;IACZ,CAAA,EAAA,CAAA,GACN,oBAAC,KAAD;KAAG,WAAW,KAAK,WAAW,aAAa,QAAQ,GAAG,QAAQ,KAAK,KAAA;KACjE,UAAA,oBAAC,QAAD;MACE,GAAG;MACH,QAAQ,QAAQ,WAAW;MAC3B,eAAc;MACd,gBAAe;MACf,aAAa,WAAW;KACzB,CAAA;IACA,CAAA,CACA;;EACC,CAAA;CACL,CAAA;AAET,CACF;AAEA,qBAAqB,cAAc;AAInC,MAAa,0BAA0B,MACpC,EAAE,WAAW,GAAG,WAAW,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,WAAW,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1F;AAEA,wBAAwB,cAAc;AAItC,MAAa,qBAAqB,MAA+B,EAAE,WAAW,OAAO,GAAG,WACtF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAG,OAAO;EAAE,MAAM;EAAG,GAAG;CAAM;CAAG,GAAI;AAAO,CAAA,CACtF;AAED,mBAAmB,cAAc;AAIjC,MAAa,uBAAuB,MAAiC,EAAE,WAAW,GAAG,WACnF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1D;AAED,qBAAqB,cAAc;AAQnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,YAAY,OAAO,GAAG,WAAW;CACpD,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAG,GAAI;EAAlD,UAAA;GACE,oBAAC,YAAD;IAAY,MAAM;IAAa,MAAM;IAAS,SAAS,cAAc;GAAe,CAAA;GACnF;GACA;EACE;;AAET,CACF;AAEA,qBAAqB,cAAc"}

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

@@ -2,12 +2,11 @@ import { createStaticStyles, cx } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/DraggablePanel/style.ts
 const TOGGLE_HIT_SHORT = 26;
-const TOGGLE_HIT_LONG = 34;
-const BOW = {
-	bulge: 10,
-	curve: .44,
-	gap: 45,
-	half: 46,
+const TOGGLE_HIT_LONG = 40;
+const SEAM_ARROW = {
+	depth: 6.5,
+	half: 11,
+	lead: 6,
 	stroke: 1.25
 };
 const prefix = "base-draggable-panel";
@@ -37,14 +36,8 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         padding: 0;
         border: none;
 
-        color: ${cssVar.colorTextTertiary};
-
         background: none;
 
-        &:hover {
-          color: ${cssVar.colorText};
-        }
-
         &:focus-visible {
           outline: 2px solid ${cssVar.colorPrimary};
           outline-offset: 3px;
@@ -57,28 +50,35 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         position: absolute;
         inset-block-start: 50%;
         inset-inline-start: 50%;
-        transform: translate(-50%, -50%) scaleX(0.45);
+        transform: translate(-50%, -50%);
 
         overflow: visible;
 
         opacity: 0;
 
-        transition:
-          opacity 0.18s ${cssVar.motionEaseOut},
-          transform 0.24s ${cssVar.motionEaseOut};
+        transition: opacity 0.18s ${cssVar.motionEaseOut};
       }
 
       path {
-        transition: stroke 0.16s ${cssVar.motionEaseOut};
+        transform-origin: center;
+        transform: scaleX(0);
+        vector-effect: non-scaling-stroke;
+        transition: transform 0.24s ${cssVar.motionEaseOut};
       }
 
-      /* The bow is the seam bending, so it carries the seam's color, not the chevron's. */
-      path[data-bow] {
-        stroke: ${cssVar.colorBorderSecondary};
+      /* The ends fade into the seam so the bend reads as the seam itself, not a drawn icon. */
+      stop[data-end] {
+        stop-color: ${cssVar.colorBorderSecondary};
+        transition: stop-opacity 0.18s ${cssVar.motionEaseOut};
       }
 
-      button:hover path[data-bow] {
-        stroke: ${cssVar.colorBorder};
+      stop[data-tip] {
+        stop-color: ${cssVar.colorTextTertiary};
+        transition: stop-color 0.16s ${cssVar.motionEaseOut};
+      }
+
+      button:hover stop[data-tip] {
+        stop-color: ${cssVar.colorTextSecondary};
       }
     `);
 	return {
@@ -234,7 +234,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         &[data-expandable='true']:hover,
         &[data-expandable='true']:focus-within,
         &[data-expandable='true'][data-expand='false'] {
-          --draggable-panel-gap: ${BOW.gap}px;
+          --draggable-panel-gap: ${SEAM_ARROW.half + SEAM_ARROW.lead}px;
         }
 
         /* The wrapper carries an inline opacity when collapsed, so beat it. */
@@ -248,10 +248,15 @@ const styles = createStaticStyles(({ css, cssVar }) => {
         &[data-expandable='true']:hover .${prefix}-toggle svg,
         &[data-expandable='true']:focus-within .${prefix}-toggle svg,
         &[data-expandable='true'][data-expand='false'] .${prefix}-toggle svg {
-          transform: translate(-50%, -50%) scaleX(1);
           opacity: 1;
         }
 
+        &[data-expandable='true']:hover .${prefix}-toggle path,
+        &[data-expandable='true']:focus-within .${prefix}-toggle path,
+        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle path {
+          transform: scaleX(var(--seam-bend));
+        }
+
         &[data-expandable='true'][data-resizing='true'] {
           --draggable-panel-gap: 0px;
         }
@@ -351,6 +356,6 @@ const toggleVariants = cva(styles.toggleRoot, { variants: { placement: {
 	top: styles.toggleBottom
 } } });
 //#endregion
-export { BOW, handleVariants, rootVariants, styles, toggleVariants };
+export { SEAM_ARROW, handleVariants, rootVariants, styles, toggleVariants };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst TOGGLE_HIT_SHORT = 26;\nconst TOGGLE_HIT_LONG = 34;\n\nexport const BOW = {\n  bulge: 10,\n  curve: 0.44,\n  gap: 45,\n  half: 46,\n  stroke: 1.25,\n};\n\nconst prefix = 'base-draggable-panel';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const float = css`\n    position: absolute;\n    z-index: 200;\n  `;\n\n  const toggleRoot = cx(\n    `${prefix}-toggle`,\n    css`\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 110;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      > button {\n        pointer-events: all;\n        cursor: pointer;\n\n        position: relative;\n\n        width: ${TOGGLE_HIT_SHORT}px;\n        height: ${TOGGLE_HIT_LONG}px;\n        padding: 0;\n        border: none;\n\n        color: ${cssVar.colorTextTertiary};\n\n        background: none;\n\n        &:hover {\n          color: ${cssVar.colorText};\n        }\n\n        &:focus-visible {\n          outline: 2px solid ${cssVar.colorPrimary};\n          outline-offset: 3px;\n        }\n      }\n\n      svg {\n        pointer-events: none;\n\n        position: absolute;\n        inset-block-start: 50%;\n        inset-inline-start: 50%;\n        transform: translate(-50%, -50%) scaleX(0.45);\n\n        overflow: visible;\n\n        opacity: 0;\n\n        transition:\n          opacity 0.18s ${cssVar.motionEaseOut},\n          transform 0.24s ${cssVar.motionEaseOut};\n      }\n\n      path {\n        transition: stroke 0.16s ${cssVar.motionEaseOut};\n      }\n\n      /* The bow is the seam bending, so it carries the seam's color, not the chevron's. */\n      path[data-bow] {\n        stroke: ${cssVar.colorBorderSecondary};\n      }\n\n      button:hover path[data-bow] {\n        stroke: ${cssVar.colorBorder};\n      }\n    `,\n  );\n\n  return {\n    body: css`\n      overflow: hidden auto;\n      padding: 16px;\n    `,\n    bottomFloat: cx(\n      float,\n      css`\n        inset-block-end: 0;\n        inset-inline: 0;\n        width: 100%;\n      `,\n    ),\n    container: css`\n      position: relative;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    `,\n    content: cx(\n      `${prefix}-content`,\n      css`\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n\n        min-width: 0;\n        min-height: 0;\n\n        background: var(--draggable-panel-bg, transparent);\n      `,\n    ),\n    fixed: css`\n      position: relative;\n    `,\n    footer: css`\n      display: flex;\n      flex: none;\n      gap: 8px;\n      align-items: center;\n\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    handle: cx(\n      `${prefix}-handle`,\n      css`\n        touch-action: none;\n        position: absolute;\n        z-index: 100;\n\n        &::before,\n        &::after {\n          content: '';\n          position: absolute;\n          background: ${cssVar.colorBorderSecondary};\n          transition:\n            width 0.25s ${cssVar.motionEaseOut},\n            height 0.25s ${cssVar.motionEaseOut},\n            background 0.16s ${cssVar.motionEaseOut};\n        }\n\n        &:hover::before,\n        &:hover::after {\n          background: ${cssVar.colorFill};\n        }\n\n        &[data-resizing]::before,\n        &[data-resizing]::after {\n          background: ${cssVar.colorPrimary};\n        }\n\n        &[data-border='false']::before,\n        &[data-border='false']::after {\n          background: transparent;\n        }\n\n        &:focus-visible {\n          outline: 2px solid ${cssVar.colorPrimary};\n          outline-offset: -2px;\n        }\n      `,\n    ),\n    handleHorizontal: css`\n      cursor: row-resize;\n      inset-inline: 0;\n      height: var(--draggable-panel-handle-size);\n\n      &::before,\n      &::after {\n        inset-block-start: 50%;\n        height: 1px;\n        margin-block-start: -0.5px;\n      }\n\n      &::before {\n        inset-inline-start: 0;\n        width: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n\n      &::after {\n        inset-inline-end: 0;\n        width: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n    `,\n    handleVertical: css`\n      cursor: col-resize;\n      inset-block: 0;\n      width: var(--draggable-panel-handle-size);\n\n      &::before,\n      &::after {\n        inset-inline-start: 50%;\n        width: 1px;\n        margin-inline-start: -0.5px;\n      }\n\n      &::before {\n        inset-block-start: 0;\n        height: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n\n      &::after {\n        inset-block-end: 0;\n        height: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n    `,\n    header: css`\n      display: flex;\n      flex: none;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n      font-weight: 500;\n    `,\n    leftFloat: cx(\n      float,\n      css`\n        inset-block: 0;\n        inset-inline-start: 0;\n        height: 100%;\n      `,\n    ),\n    rightFloat: cx(\n      float,\n      css`\n        inset-block: 0;\n        inset-inline-end: 0;\n        height: 100%;\n      `,\n    ),\n    root: cx(\n      prefix,\n      css`\n        --draggable-panel-gap: 0px;\n\n        display: flex;\n        flex-shrink: 0;\n        min-width: 0;\n        min-height: 0;\n\n        &[data-expandable='true']:hover,\n        &[data-expandable='true']:focus-within,\n        &[data-expandable='true'][data-expand='false'] {\n          --draggable-panel-gap: ${BOW.gap}px;\n        }\n\n        /* The wrapper carries an inline opacity when collapsed, so beat it. */\n        &[data-expandable='true']:hover\n          .${prefix}-toggle,\n          &[data-expandable='true']:focus-within\n          .${prefix}-toggle {\n          opacity: 1 !important;\n        }\n\n        &[data-expandable='true']:hover .${prefix}-toggle svg,\n        &[data-expandable='true']:focus-within .${prefix}-toggle svg,\n        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle svg {\n          transform: translate(-50%, -50%) scaleX(1);\n          opacity: 1;\n        }\n\n        &[data-expandable='true'][data-resizing='true'] {\n          --draggable-panel-gap: 0px;\n        }\n\n        &[data-expandable='true'][data-resizing='true'] .${prefix}-toggle svg {\n          opacity: 0;\n        }\n      `,\n    ),\n    toggleBottom: cx(\n      `${prefix}-toggle-bottom`,\n      css`\n        inset-block-end: -${TOGGLE_HIT_SHORT / 2}px;\n        inset-inline: 0;\n        height: ${TOGGLE_HIT_SHORT}px;\n\n        > button {\n          width: ${TOGGLE_HIT_LONG}px;\n          height: ${TOGGLE_HIT_SHORT}px;\n        }\n      `,\n    ),\n    toggleLeft: cx(\n      `${prefix}-toggle-left`,\n      css`\n        inset-block: 0;\n        inset-inline-start: -${TOGGLE_HIT_SHORT / 2}px;\n        width: ${TOGGLE_HIT_SHORT}px;\n      `,\n    ),\n    toggleRight: cx(\n      `${prefix}-toggle-right`,\n      css`\n        inset-block: 0;\n        inset-inline-end: -${TOGGLE_HIT_SHORT / 2}px;\n        width: ${TOGGLE_HIT_SHORT}px;\n      `,\n    ),\n    toggleRoot,\n    toggleTop: cx(\n      `${prefix}-toggle-top`,\n      css`\n        inset-block-start: -${TOGGLE_HIT_SHORT / 2}px;\n        inset-inline: 0;\n        height: ${TOGGLE_HIT_SHORT}px;\n\n        > button {\n          width: ${TOGGLE_HIT_LONG}px;\n          height: ${TOGGLE_HIT_SHORT}px;\n        }\n      `,\n    ),\n\n    topFloat: cx(\n      float,\n      css`\n        inset-block-start: 0;\n        inset-inline: 0;\n        width: 100%;\n      `,\n    ),\n  };\n});\n\nexport const rootVariants = cva(styles.root, {\n  compoundVariants: [\n    { class: styles.leftFloat, mode: 'float', placement: 'left' },\n    { class: styles.rightFloat, mode: 'float', placement: 'right' },\n    { class: styles.topFloat, mode: 'float', placement: 'top' },\n    { class: styles.bottomFloat, mode: 'float', placement: 'bottom' },\n  ],\n  defaultVariants: { mode: 'fixed', placement: 'right' },\n  variants: {\n    mode: { fixed: styles.fixed, float: null },\n    placement: { bottom: null, left: null, right: null, top: null },\n  },\n});\n\nexport const handleVariants = cva(styles.handle, {\n  variants: {\n    edge: {\n      bottom: styles.handleHorizontal,\n      left: styles.handleVertical,\n      right: styles.handleVertical,\n      top: styles.handleHorizontal,\n    },\n  },\n});\n\nexport const toggleVariants = cva(styles.toggleRoot, {\n  variants: {\n    placement: {\n      bottom: styles.toggleTop,\n      left: styles.toggleRight,\n      right: styles.toggleLeft,\n      top: styles.toggleBottom,\n    },\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst TOGGLE_HIT_SHORT = 26;\nconst TOGGLE_HIT_LONG = 40;\n\nexport const SEAM_ARROW = {\n  depth: 6.5,\n  half: 11,\n  lead: 6,\n  stroke: 1.25,\n};\n\nconst prefix = 'base-draggable-panel';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const float = css`\n    position: absolute;\n    z-index: 200;\n  `;\n\n  const toggleRoot = cx(\n    `${prefix}-toggle`,\n    css`\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 110;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      > button {\n        pointer-events: all;\n        cursor: pointer;\n\n        position: relative;\n\n        width: ${TOGGLE_HIT_SHORT}px;\n        height: ${TOGGLE_HIT_LONG}px;\n        padding: 0;\n        border: none;\n\n        background: none;\n\n        &:focus-visible {\n          outline: 2px solid ${cssVar.colorPrimary};\n          outline-offset: 3px;\n        }\n      }\n\n      svg {\n        pointer-events: none;\n\n        position: absolute;\n        inset-block-start: 50%;\n        inset-inline-start: 50%;\n        transform: translate(-50%, -50%);\n\n        overflow: visible;\n\n        opacity: 0;\n\n        transition: opacity 0.18s ${cssVar.motionEaseOut};\n      }\n\n      path {\n        transform-origin: center;\n        transform: scaleX(0);\n        vector-effect: non-scaling-stroke;\n        transition: transform 0.24s ${cssVar.motionEaseOut};\n      }\n\n      /* The ends fade into the seam so the bend reads as the seam itself, not a drawn icon. */\n      stop[data-end] {\n        stop-color: ${cssVar.colorBorderSecondary};\n        transition: stop-opacity 0.18s ${cssVar.motionEaseOut};\n      }\n\n      stop[data-tip] {\n        stop-color: ${cssVar.colorTextTertiary};\n        transition: stop-color 0.16s ${cssVar.motionEaseOut};\n      }\n\n      button:hover stop[data-tip] {\n        stop-color: ${cssVar.colorTextSecondary};\n      }\n    `,\n  );\n\n  return {\n    body: css`\n      overflow: hidden auto;\n      padding: 16px;\n    `,\n    bottomFloat: cx(\n      float,\n      css`\n        inset-block-end: 0;\n        inset-inline: 0;\n        width: 100%;\n      `,\n    ),\n    container: css`\n      position: relative;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    `,\n    content: cx(\n      `${prefix}-content`,\n      css`\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n\n        min-width: 0;\n        min-height: 0;\n\n        background: var(--draggable-panel-bg, transparent);\n      `,\n    ),\n    fixed: css`\n      position: relative;\n    `,\n    footer: css`\n      display: flex;\n      flex: none;\n      gap: 8px;\n      align-items: center;\n\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    `,\n    handle: cx(\n      `${prefix}-handle`,\n      css`\n        touch-action: none;\n        position: absolute;\n        z-index: 100;\n\n        &::before,\n        &::after {\n          content: '';\n          position: absolute;\n          background: ${cssVar.colorBorderSecondary};\n          transition:\n            width 0.25s ${cssVar.motionEaseOut},\n            height 0.25s ${cssVar.motionEaseOut},\n            background 0.16s ${cssVar.motionEaseOut};\n        }\n\n        &:hover::before,\n        &:hover::after {\n          background: ${cssVar.colorFill};\n        }\n\n        &[data-resizing]::before,\n        &[data-resizing]::after {\n          background: ${cssVar.colorPrimary};\n        }\n\n        &[data-border='false']::before,\n        &[data-border='false']::after {\n          background: transparent;\n        }\n\n        &:focus-visible {\n          outline: 2px solid ${cssVar.colorPrimary};\n          outline-offset: -2px;\n        }\n      `,\n    ),\n    handleHorizontal: css`\n      cursor: row-resize;\n      inset-inline: 0;\n      height: var(--draggable-panel-handle-size);\n\n      &::before,\n      &::after {\n        inset-block-start: 50%;\n        height: 1px;\n        margin-block-start: -0.5px;\n      }\n\n      &::before {\n        inset-inline-start: 0;\n        width: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n\n      &::after {\n        inset-inline-end: 0;\n        width: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n    `,\n    handleVertical: css`\n      cursor: col-resize;\n      inset-block: 0;\n      width: var(--draggable-panel-handle-size);\n\n      &::before,\n      &::after {\n        inset-inline-start: 50%;\n        width: 1px;\n        margin-inline-start: -0.5px;\n      }\n\n      &::before {\n        inset-block-start: 0;\n        height: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n\n      &::after {\n        inset-block-end: 0;\n        height: calc(50% - var(--draggable-panel-gap, 0px));\n      }\n    `,\n    header: css`\n      display: flex;\n      flex: none;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n      font-weight: 500;\n    `,\n    leftFloat: cx(\n      float,\n      css`\n        inset-block: 0;\n        inset-inline-start: 0;\n        height: 100%;\n      `,\n    ),\n    rightFloat: cx(\n      float,\n      css`\n        inset-block: 0;\n        inset-inline-end: 0;\n        height: 100%;\n      `,\n    ),\n    root: cx(\n      prefix,\n      css`\n        --draggable-panel-gap: 0px;\n\n        display: flex;\n        flex-shrink: 0;\n        min-width: 0;\n        min-height: 0;\n\n        &[data-expandable='true']:hover,\n        &[data-expandable='true']:focus-within,\n        &[data-expandable='true'][data-expand='false'] {\n          --draggable-panel-gap: ${SEAM_ARROW.half + SEAM_ARROW.lead}px;\n        }\n\n        /* The wrapper carries an inline opacity when collapsed, so beat it. */\n        &[data-expandable='true']:hover\n          .${prefix}-toggle,\n          &[data-expandable='true']:focus-within\n          .${prefix}-toggle {\n          opacity: 1 !important;\n        }\n\n        &[data-expandable='true']:hover .${prefix}-toggle svg,\n        &[data-expandable='true']:focus-within .${prefix}-toggle svg,\n        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle svg {\n          opacity: 1;\n        }\n\n        &[data-expandable='true']:hover .${prefix}-toggle path,\n        &[data-expandable='true']:focus-within .${prefix}-toggle path,\n        &[data-expandable='true'][data-expand='false'] .${prefix}-toggle path {\n          transform: scaleX(var(--seam-bend));\n        }\n\n        &[data-expandable='true'][data-resizing='true'] {\n          --draggable-panel-gap: 0px;\n        }\n\n        &[data-expandable='true'][data-resizing='true'] .${prefix}-toggle svg {\n          opacity: 0;\n        }\n      `,\n    ),\n    toggleBottom: cx(\n      `${prefix}-toggle-bottom`,\n      css`\n        inset-block-end: -${TOGGLE_HIT_SHORT / 2}px;\n        inset-inline: 0;\n        height: ${TOGGLE_HIT_SHORT}px;\n\n        > button {\n          width: ${TOGGLE_HIT_LONG}px;\n          height: ${TOGGLE_HIT_SHORT}px;\n        }\n      `,\n    ),\n    toggleLeft: cx(\n      `${prefix}-toggle-left`,\n      css`\n        inset-block: 0;\n        inset-inline-start: -${TOGGLE_HIT_SHORT / 2}px;\n        width: ${TOGGLE_HIT_SHORT}px;\n      `,\n    ),\n    toggleRight: cx(\n      `${prefix}-toggle-right`,\n      css`\n        inset-block: 0;\n        inset-inline-end: -${TOGGLE_HIT_SHORT / 2}px;\n        width: ${TOGGLE_HIT_SHORT}px;\n      `,\n    ),\n    toggleRoot,\n    toggleTop: cx(\n      `${prefix}-toggle-top`,\n      css`\n        inset-block-start: -${TOGGLE_HIT_SHORT / 2}px;\n        inset-inline: 0;\n        height: ${TOGGLE_HIT_SHORT}px;\n\n        > button {\n          width: ${TOGGLE_HIT_LONG}px;\n          height: ${TOGGLE_HIT_SHORT}px;\n        }\n      `,\n    ),\n\n    topFloat: cx(\n      float,\n      css`\n        inset-block-start: 0;\n        inset-inline: 0;\n        width: 100%;\n      `,\n    ),\n  };\n});\n\nexport const rootVariants = cva(styles.root, {\n  compoundVariants: [\n    { class: styles.leftFloat, mode: 'float', placement: 'left' },\n    { class: styles.rightFloat, mode: 'float', placement: 'right' },\n    { class: styles.topFloat, mode: 'float', placement: 'top' },\n    { class: styles.bottomFloat, mode: 'float', placement: 'bottom' },\n  ],\n  defaultVariants: { mode: 'fixed', placement: 'right' },\n  variants: {\n    mode: { fixed: styles.fixed, float: null },\n    placement: { bottom: null, left: null, right: null, top: null },\n  },\n});\n\nexport const handleVariants = cva(styles.handle, {\n  variants: {\n    edge: {\n      bottom: styles.handleHorizontal,\n      left: styles.handleVertical,\n      right: styles.handleVertical,\n      top: styles.handleHorizontal,\n    },\n  },\n});\n\nexport const toggleVariants = cva(styles.toggleRoot, {\n  variants: {\n    placement: {\n      bottom: styles.toggleTop,\n      left: styles.toggleRight,\n      right: styles.toggleLeft,\n      top: styles.toggleBottom,\n    },\n  },\n});\n"],"mappings":"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"}

package/es/base-ui/Input/style.d.mts

@@ -23,8 +23,8 @@ declare const styles: {
 };
 declare const rootVariants: (props?: ({
   shadow?: boolean | null | undefined;
-  size?: "small" | "middle" | "large" | null | undefined;
-  variant?: "outlined" | "borderless" | "filled" | null | undefined;
+  size?: "large" | "middle" | "small" | null | undefined;
+  variant?: "borderless" | "filled" | "outlined" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { rootVariants, styles };

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

@@ -41,10 +41,13 @@ const Result = memo(({ children, className, extra, icon, ref, status = "info", s
 		style,
 		...rest,
 		children: [
-			/* @__PURE__ */ jsx("div", {
+			icon ? /* @__PURE__ */ jsx("div", {
+				className: styles.customIcon,
+				children: icon
+			}) : /* @__PURE__ */ jsx("div", {
 				className: styles.icon,
 				style: iconStyle,
-				children: icon ?? statusIcon[status]
+				children: statusIcon[status]
 			}),
 			title && /* @__PURE__ */ jsx("h3", {
 				className: styles.title,

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

@@ -1 +1 @@
-{"version":3,"file":"Result.mjs","names":[],"sources":["../../../src/base-ui/Result/Result.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, Info, TriangleAlert, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport { statusColor, styles } from './style';\nimport type { ResultProps } from './type';\n\nconst statusIcon = {\n  error: <X size={36} strokeWidth={2.5} />,\n  info: <Info size={36} strokeWidth={2} />,\n  success: <Check size={36} strokeWidth={2.5} />,\n  warning: <TriangleAlert size={36} strokeWidth={2} />,\n};\n\nconst Result = memo<ResultProps>(\n  ({ children, className, extra, icon, ref, status = 'info', style, subTitle, title, ...rest }) => {\n    const iconStyle = useMemo(() => {\n      if (status === 'info') {\n        return { background: cssVar.colorFillTertiary, color: cssVar.colorTextSecondary };\n      }\n      const color = statusColor[status];\n      return { background: `color-mix(in srgb, ${color} 12%, transparent)`, color };\n    }, [status]);\n\n    return (\n      <section className={cx(styles.root, className)} ref={ref} style={style} {...rest}>\n        <div className={styles.icon} style={iconStyle}>\n          {icon ?? statusIcon[status]}\n        </div>\n        {title && <h3 className={styles.title}>{title}</h3>}\n        {subTitle && <p className={styles.subTitle}>{subTitle}</p>}\n        {extra && <div className={styles.extra}>{extra}</div>}\n        {children}\n      </section>\n    );\n  },\n);\n\nResult.displayName = 'Result';\n\nexport default Result;\n"],"mappings":";;;;;;;AASA,MAAM,aAAa;CACjB,OAAO,oBAAC,GAAD;EAAG,MAAM;EAAI,aAAa;CAAM,CAAA;CACvC,MAAM,oBAAC,MAAD;EAAM,MAAM;EAAI,aAAa;CAAI,CAAA;CACvC,SAAS,oBAAC,OAAD;EAAO,MAAM;EAAI,aAAa;CAAM,CAAA;CAC7C,SAAS,oBAAC,eAAD;EAAe,MAAM;EAAI,aAAa;CAAI,CAAA;AACrD;AAEA,MAAM,SAAS,MACZ,EAAE,UAAU,WAAW,OAAO,MAAM,KAAK,SAAS,QAAQ,OAAO,UAAU,OAAO,GAAG,WAAW;CAC/F,MAAM,YAAY,cAAc;EAC9B,IAAI,WAAW,QACb,OAAO;GAAE,YAAY,OAAO;GAAmB,OAAO,OAAO;EAAmB;EAElF,MAAM,QAAQ,YAAY;EAC1B,OAAO;GAAE,YAAY,sBAAsB,MAAM;GAAqB;EAAM;CAC9E,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,WAAD;EAAS,WAAW,GAAG,OAAO,MAAM,SAAS;EAAQ;EAAY;EAAO,GAAI;EAA5E,UAAA;GACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAM,OAAO;IACjC,UAAA,QAAQ,WAAW;GACjB,CAAA;GACJ,SAAS,oBAAC,MAAD;IAAI,WAAW,OAAO;IAAQ,UAAA;GAAU,CAAA;GACjD,YAAY,oBAAC,KAAD;IAAG,WAAW,OAAO;IAAW,UAAA;GAAY,CAAA;GACxD,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,UAAA;GAAW,CAAA;GACnD;EACM;;AAEb,CACF;AAEA,OAAO,cAAc"}
+{"version":3,"file":"Result.mjs","names":[],"sources":["../../../src/base-ui/Result/Result.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, Info, TriangleAlert, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport { statusColor, styles } from './style';\nimport type { ResultProps } from './type';\n\nconst statusIcon = {\n  error: <X size={36} strokeWidth={2.5} />,\n  info: <Info size={36} strokeWidth={2} />,\n  success: <Check size={36} strokeWidth={2.5} />,\n  warning: <TriangleAlert size={36} strokeWidth={2} />,\n};\n\nconst Result = memo<ResultProps>(\n  ({ children, className, extra, icon, ref, status = 'info', style, subTitle, title, ...rest }) => {\n    const iconStyle = useMemo(() => {\n      if (status === 'info') {\n        return { background: cssVar.colorFillTertiary, color: cssVar.colorTextSecondary };\n      }\n      const color = statusColor[status];\n      return { background: `color-mix(in srgb, ${color} 12%, transparent)`, color };\n    }, [status]);\n\n    return (\n      <section className={cx(styles.root, className)} ref={ref} style={style} {...rest}>\n        {icon ? (\n          <div className={styles.customIcon}>{icon}</div>\n        ) : (\n          <div className={styles.icon} style={iconStyle}>\n            {statusIcon[status]}\n          </div>\n        )}\n        {title && <h3 className={styles.title}>{title}</h3>}\n        {subTitle && <p className={styles.subTitle}>{subTitle}</p>}\n        {extra && <div className={styles.extra}>{extra}</div>}\n        {children}\n      </section>\n    );\n  },\n);\n\nResult.displayName = 'Result';\n\nexport default Result;\n"],"mappings":";;;;;;;AASA,MAAM,aAAa;CACjB,OAAO,oBAAC,GAAD;EAAG,MAAM;EAAI,aAAa;CAAM,CAAA;CACvC,MAAM,oBAAC,MAAD;EAAM,MAAM;EAAI,aAAa;CAAI,CAAA;CACvC,SAAS,oBAAC,OAAD;EAAO,MAAM;EAAI,aAAa;CAAM,CAAA;CAC7C,SAAS,oBAAC,eAAD;EAAe,MAAM;EAAI,aAAa;CAAI,CAAA;AACrD;AAEA,MAAM,SAAS,MACZ,EAAE,UAAU,WAAW,OAAO,MAAM,KAAK,SAAS,QAAQ,OAAO,UAAU,OAAO,GAAG,WAAW;CAC/F,MAAM,YAAY,cAAc;EAC9B,IAAI,WAAW,QACb,OAAO;GAAE,YAAY,OAAO;GAAmB,OAAO,OAAO;EAAmB;EAElF,MAAM,QAAQ,YAAY;EAC1B,OAAO;GAAE,YAAY,sBAAsB,MAAM;GAAqB;EAAM;CAC9E,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,WAAD;EAAS,WAAW,GAAG,OAAO,MAAM,SAAS;EAAQ;EAAY;EAAO,GAAI;EAA5E,UAAA;GACG,OACC,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAa,UAAA;GAAU,CAAA,IAE9C,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAM,OAAO;IACjC,UAAA,WAAW;GACT,CAAA;GAEN,SAAS,oBAAC,MAAD;IAAI,WAAW,OAAO;IAAQ,UAAA;GAAU,CAAA;GACjD,YAAY,oBAAC,KAAD;IAAG,WAAW,OAAO;IAAW,UAAA;GAAY,CAAA;GACxD,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,UAAA;GAAW,CAAA;GACnD;EACM;;AAEb,CACF;AAEA,OAAO,cAAc"}

package/es/base-ui/Result/style.mjs

@@ -1,6 +1,12 @@
 import { createStaticStyles, cssVar } from "antd-style";
 //#region src/base-ui/Result/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
+	customIcon: css`
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    margin-block-end: 12px;
+  `,
 	extra: css`
     display: flex;
     flex-wrap: wrap;

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Result/style.ts"],"sourcesContent":["import { createStaticStyles, cssVar } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  extra: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    align-self: stretch;\n    justify-content: center;\n\n    margin-block-start: 10px;\n\n    > :is(div, section, form) {\n      flex: 1 1 100%;\n    }\n  `,\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 72px;\n    height: 72px;\n    margin-block-end: 12px;\n    border-radius: 50%;\n\n    svg {\n      width: 36px;\n      height: 36px;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: center;\n\n    padding-block: 16px;\n    padding-inline: 8px;\n\n    text-align: center;\n  `,\n  subTitle: css`\n    max-width: 36ch;\n    margin: 0;\n    font-size: 13px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  title: css`\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    text-wrap: balance;\n  `,\n}));\n\nexport const statusColor: Record<'success' | 'error' | 'warning', string> = {\n  error: cssVar.colorError,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;CAcV,MAAM,GAAG;;;;;;;;;;;;;;;;CAgBT,MAAM,GAAG;;;;;;;;;;;CAWT,UAAU,GAAG;;;;aAIF,OAAO,kBAAkB;;CAEpC,OAAO,GAAG;;;;;;AAMZ,EAAE;AAEF,MAAa,cAA+D;CAC1E,OAAO,OAAO;CACd,SAAS,OAAO;CAChB,SAAS,OAAO;AAClB"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Result/style.ts"],"sourcesContent":["import { createStaticStyles, cssVar } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  customIcon: css`\n    display: flex;\n    flex-shrink: 0;\n    justify-content: center;\n    margin-block-end: 12px;\n  `,\n  extra: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    align-self: stretch;\n    justify-content: center;\n\n    margin-block-start: 10px;\n\n    > :is(div, section, form) {\n      flex: 1 1 100%;\n    }\n  `,\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 72px;\n    height: 72px;\n    margin-block-end: 12px;\n    border-radius: 50%;\n\n    svg {\n      width: 36px;\n      height: 36px;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: center;\n\n    padding-block: 16px;\n    padding-inline: 8px;\n\n    text-align: center;\n  `,\n  subTitle: css`\n    max-width: 36ch;\n    margin: 0;\n    font-size: 13px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  title: css`\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    text-wrap: balance;\n  `,\n}));\n\nexport const statusColor: Record<'success' | 'error' | 'warning', string> = {\n  error: cssVar.colorError,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;;;;;;;;;;CAcV,MAAM,GAAG;;;;;;;;;;;;;;;;CAgBT,MAAM,GAAG;;;;;;;;;;;CAWT,UAAU,GAAG;;;;aAIF,OAAO,kBAAkB;;CAEpC,OAAO,GAAG;;;;;;AAMZ,EAAE;AAEF,MAAa,cAA+D;CAC1E,OAAO,OAAO;CACd,SAAS,OAAO;CAChB,SAAS,OAAO;AAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.51.0",
+  "version": "5.51.2",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",