@lobehub/ui 6.0.6 → 6.2.0

package/README.md

@@ -141,6 +141,7 @@ Appearance and colors are plain attributes, read by `theme.css`:
 - `setLobeTheme({ appearance, primaryColor, neutralColor })` updates them at runtime; `<LobeThemeScript appearance="system" />` sets them before first paint. With `next-themes`, use `attribute="data-theme"`.
 - `<ThemeScope appearance="dark">` themes a subtree (e.g. a dark island in a light page).
 - Style with `createStaticStyles` / `cssVar` / `cx` from `@lobehub/ui`; `useTheme()` / `useThemeMode()` return the current tokens when JS needs concrete values.
+- Apps that compile StyleX themselves can import the same tokens from `@lobehub/ui/stylex/cssVar.stylex` and `@lobehub/ui/stylex/media.stylex`. Those entries are uncompiled `stylex.defineConsts` modules, so the app compiler has to transform them in the same build.
 
 ### I18n
 

package/es/DraggablePanel/atoms.mjs

@@ -3,6 +3,7 @@ import { useMotionComponent } from "../MotionProvider/index.mjs";
 import { styleProps } from "../styles/stylex/props.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import { useControlledState } from "../hooks/useControlledState.mjs";
+import { bem } from "../utils/bem.mjs";
 import { DraggablePanelContext, useDraggablePanelContext } from "./context.mjs";
 import { AXES } from "./core/axes.mjs";
 import { coarsePointer, handleSize } from "./core/env.mjs";
@@ -18,7 +19,7 @@ import * as stylex from "@stylexjs/stylex";
 import { ChevronLeft } from "lucide-react";
 import { useTransform } from "motion/react";
 //#region src/DraggablePanel/atoms.tsx
-const prefix = "base-draggable-panel";
+const panel = bem("draggable-panel");
 const floatStyles = {
 	bottom: styles.bottomFloat,
 	left: styles.leftFloat,
@@ -31,12 +32,6 @@ const toggleStyles = {
 	right: styles.toggleLeft,
 	top: styles.toggleBottom
 };
-const togglePlacementClass = {
-	bottom: `${prefix}-toggle-top`,
-	left: `${prefix}-toggle-right`,
-	right: `${prefix}-toggle-left`,
-	top: `${prefix}-toggle-bottom`
-};
 const PAN_THRESHOLD = 3;
 const ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;
 const ARROW_C = ARROW_BOX / 2;
@@ -133,13 +128,14 @@ const DraggablePanelRoot = memo(({ backgroundColor, children, className, collaps
 		children: /* @__PURE__ */ jsx("aside", {
 			"data-expand": isExpand,
 			"data-expandable": expandable,
+			"data-placement": placement,
 			"data-resizing": state.dragging,
 			ref: elementRef,
 			className: styleProps([
 				styles.root,
 				mode === "float" ? floatStyles[placement] : styles.fixed,
 				draggablePanelMarker
-			], clsx$1(prefix, className)).className,
+			], clsx$1(panel.block, className)).className,
 			style: {
 				"--draggable-panel-bg": backgroundColor || "",
 				"flexDirection": axis.vertical ? "column" : "row",
@@ -171,7 +167,7 @@ const DraggablePanelContent = memo(({ children, className, style, ...rest }) =>
 		},
 		children: /* @__PURE__ */ jsx(Motion.div, {
 			animate: { scale: shrunk ? COLLAPSED_SCALE : 1 },
-			className: styleProps(styles.content, clsx$1(`${prefix}-content`, className)).className,
+			className: styleProps(styles.content, clsx$1(panel("content"), className)).className,
 			transition: timing(),
 			style: {
 				transformOrigin: ORIGIN_MAP[placement],
@@ -186,7 +182,7 @@ const DraggablePanelContent = memo(({ children, className, style, ...rest }) =>
 });
 DraggablePanelContent.displayName = "DraggablePanelContent";
 const DraggablePanelHandle = memo(({ className, style, wideArea = true, ...rest }) => {
-	const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();
+	const { axis, controller, expand, placement, showBorder, state } = useDraggablePanelContext();
 	const size = useStore(coarsePointer.subscribe, () => handleSize(wideArea));
 	const target = useStore(controller.subscribe, () => controller.target);
 	useEffect(() => () => controller.drag.cancel(), [controller]);
@@ -202,10 +198,11 @@ const DraggablePanelHandle = memo(({ className, style, wideArea = true, ...rest
 		"aria-valuenow": target,
 		"aria-valuetext": `${target} pixels`,
 		"data-border": showBorder,
+		"data-placement": placement,
 		"data-resizing": state.dragging || void 0,
 		role: "separator",
 		tabIndex: 0,
-		className: styleProps([styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical], clsx$1(`${prefix}-handle`, className)).className,
+		className: styleProps([styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical], clsx$1(panel("handle"), className)).className,
 		style: {
 			"--draggable-panel-handle-size": `${size}px`,
 			[EDGE_INSET[axis.edge]]: -size / 2,
@@ -265,11 +262,12 @@ const DraggablePanelToggle = memo(({ className, showHandleWhenCollapsed, style,
 	const bend = bendSign(placement, expand);
 	const edgeOpacity = expand && showBorder ? 1 : 0;
 	return /* @__PURE__ */ jsx("div", {
+		"data-placement": placement,
 		style: {
 			opacity: expand ? void 0 : showHandleWhenCollapsed ? 1 : 0,
 			...style
 		},
-		className: styleProps([styles.toggleRoot, toggleStyles[placement]], clsx$1(`${prefix}-toggle`, togglePlacementClass[placement], className)).className,
+		className: styleProps([styles.toggleRoot, toggleStyles[placement]], clsx$1(panel("toggle"), className)).className,
 		...rest,
 		children: /* @__PURE__ */ jsx("button", {
 			"aria-label": expand ? "Collapse panel" : "Expand panel",

package/es/DraggablePanel/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["clsx","getHandleSize"],"sources":["../../src/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\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';\n\nimport ActionIcon from '@/ActionIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { styleProps } from '@/styles/stylex/props';\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 { draggablePanelMarker, draggablePanelToggleMarker } from './marker.stylex';\nimport { SEAM_ARROW, styles } from './style';\n\nconst prefix = 'base-draggable-panel';\n\nconst floatStyles = {\n  bottom: styles.bottomFloat,\n  left: styles.leftFloat,\n  right: styles.rightFloat,\n  top: styles.topFloat,\n};\n\nconst toggleStyles = {\n  bottom: styles.toggleTop,\n  left: styles.toggleRight,\n  right: styles.toggleLeft,\n  top: styles.toggleBottom,\n};\n\nconst togglePlacementClass = {\n  bottom: `${prefix}-toggle-top`,\n  left: `${prefix}-toggle-right`,\n  right: `${prefix}-toggle-left`,\n  top: `${prefix}-toggle-bottom`,\n};\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          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          className={\n            styleProps(\n              [\n                styles.root,\n                mode === 'float' ? floatStyles[placement] : styles.fixed,\n                draggablePanelMarker,\n              ],\n              clsx(prefix, className),\n            ).className\n          }\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={styleProps(styles.content, clsx(`${prefix}-content`, className)).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        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        className={\n          styleProps(\n            [styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical],\n            clsx(`${prefix}-handle`, className),\n          ).className\n        }\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        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        className={\n          styleProps(\n            [styles.toggleRoot, toggleStyles[placement]],\n            clsx(`${prefix}-toggle`, togglePlacementClass[placement], className),\n          ).className\n        }\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n          {...stylex.props(\n            styles.toggleButton,\n            axis.vertical && styles.toggleButtonHorizontal,\n            draggablePanelToggleMarker,\n          )}\n        >\n          <svg\n            {...stylex.props(styles.toggleSvg)}\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\n                  data-end=\"\"\n                  offset={0}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n                <stop data-tip=\"\" offset={0.3} {...stylex.props(styles.toggleStopTip)} />\n                <stop data-tip=\"\" offset={0.7} {...stylex.props(styles.toggleStopTip)} />\n                <stop\n                  data-end=\"\"\n                  offset={1}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n              </linearGradient>\n            </defs>\n            <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n              <path\n                {...stylex.props(styles.togglePath)}\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 }) => (\n    <div className={styleProps(styles.container, className).className} {...rest} />\n  ),\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div {...styleProps(styles.body, className, { 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={styleProps(styles.footer, className).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={styleProps(styles.header, className).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":["clsx","getHandleSize"],"sources":["../../src/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\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';\n\nimport ActionIcon from '@/ActionIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\nimport { bem } from '@/utils/bem';\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 { draggablePanelMarker, draggablePanelToggleMarker } from './marker.stylex';\nimport { SEAM_ARROW, styles } from './style';\n\nconst panel = bem('draggable-panel');\n\nconst floatStyles = {\n  bottom: styles.bottomFloat,\n  left: styles.leftFloat,\n  right: styles.rightFloat,\n  top: styles.topFloat,\n};\n\nconst toggleStyles = {\n  bottom: styles.toggleTop,\n  left: styles.toggleRight,\n  right: styles.toggleLeft,\n  top: styles.toggleBottom,\n};\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          data-expand={isExpand}\n          data-expandable={expandable}\n          data-placement={placement}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          className={\n            styleProps(\n              [\n                styles.root,\n                mode === 'float' ? floatStyles[placement] : styles.fixed,\n                draggablePanelMarker,\n              ],\n              clsx(panel.block, className),\n            ).className\n          }\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={styleProps(styles.content, clsx(panel('content'), className)).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, placement, 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        data-border={showBorder}\n        data-placement={placement}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        className={\n          styleProps(\n            [styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical],\n            clsx(panel('handle'), className),\n          ).className\n        }\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        data-placement={placement}\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        className={\n          styleProps(\n            [styles.toggleRoot, toggleStyles[placement]],\n            clsx(panel('toggle'), className),\n          ).className\n        }\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n          {...stylex.props(\n            styles.toggleButton,\n            axis.vertical && styles.toggleButtonHorizontal,\n            draggablePanelToggleMarker,\n          )}\n        >\n          <svg\n            {...stylex.props(styles.toggleSvg)}\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\n                  data-end=\"\"\n                  offset={0}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n                <stop data-tip=\"\" offset={0.3} {...stylex.props(styles.toggleStopTip)} />\n                <stop data-tip=\"\" offset={0.7} {...stylex.props(styles.toggleStopTip)} />\n                <stop\n                  data-end=\"\"\n                  offset={1}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n              </linearGradient>\n            </defs>\n            <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n              <path\n                {...stylex.props(styles.togglePath)}\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 }) => (\n    <div className={styleProps(styles.container, className).className} {...rest} />\n  ),\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div {...styleProps(styles.body, className, { 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={styleProps(styles.footer, className).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={styleProps(styles.header, className).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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"}