@dxos/react-ui-dnd 0.8.1 → 0.8.2-main.2f9c567

package/dist/lib/browser/index.mjs

@@ -4,7 +4,8 @@ import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/elem
 import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React, { useLayoutEffect, useRef } from "react";
-import { mx } from "@dxos/react-ui-theme";
+import { useElevationContext } from "@dxos/react-ui";
+import { mx, surfaceZIndex } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-dnd/src/util/sizeStyle.ts
 var sizeStyle = (size, sideOrOrientation, calcSize) => {
@@ -47,6 +48,7 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
     onChange: onSizeChange
   });
   const dragStartSize = useRef(size);
+  const elevation = useElevationContext();
   const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
   const client = orientation === "horizontal" ? "clientX" : "clientY";
   useLayoutEffect(() => {
@@ -90,7 +92,10 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
   return /* @__PURE__ */ React.createElement("button", {
     ref: buttonRef,
     "data-side": side,
-    className: mx("group absolute flex focus-visible:outline-none", orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator", classNames)
+    className: mx("group absolute flex focus-visible:outline-none", surfaceZIndex({
+      elevation,
+      level: "tooltip"
+    }), orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator", classNames)
   }, /* @__PURE__ */ React.createElement("div", {
     role: "none",
     "data-side": side,

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/ResizeHandle.tsx", "../../../src/util/sizeStyle.ts", "../../../src/util/rem.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n  const stackItemElement = element.closest('[data-dx-resize-subject]');\n  return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n  startSize: number,\n  location: DragLocationHistory,\n  client: 'clientX' | 'clientY',\n  side: Side,\n  minSize: number,\n  maxSize: number | undefined,\n) => {\n  return Math.min(\n    maxSize ?? Infinity,\n    Math.max(\n      minSize,\n      startSize +\n        ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n    ),\n  );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n  'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n  side: Side;\n  defaultSize?: Size;\n  fallbackSize: number;\n  size?: Size;\n  minSize: number;\n  maxSize?: number;\n  unit?: 'rem';\n  iconPosition?: 'start' | 'center' | 'end';\n  onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n  classNames,\n  side,\n  iconPosition = 'start',\n  defaultSize,\n  fallbackSize,\n  size: propsSize,\n  minSize,\n  maxSize,\n  onSizeChange,\n}: ResizeHandleProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [size = 'min-content', setSize] = useControllableState({\n    prop: propsSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n  const dragStartSize = useRef<Size>(size);\n\n  const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n  const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n  useLayoutEffect(() => {\n    if (!buttonRef.current) {\n      return;\n    }\n\n    // TODO(thure): This should handle StackItem state vs local state better.\n    return draggable({\n      element: buttonRef.current,\n      onGenerateDragPreview: ({ nativeSetDragImage }) => {\n        // We will be moving the line to indicate a drag; we can disable the native drag preview.\n        disableNativeDragPreview({ nativeSetDragImage });\n        // We don't want any native drop animation for when the user does not drop on a drop target.\n        // We want the drag to finish immediately.\n        preventUnhandled.start();\n      },\n      onDragStart: () => {\n        dragStartSize.current =\n          dragStartSize.current === 'min-content'\n            ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n            : dragStartSize.current;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n      },\n      onDrag: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n      },\n      onDrop: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n        setSize(nextSize);\n        onSizeChange?.(nextSize, true);\n        dragStartSize.current = nextSize;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n      },\n    });\n  }, [\n    // Note that `size` should not be a dependency here since dragging this adjusts the size.\n    minSize,\n    maxSize,\n  ]);\n\n  return (\n    <button\n      ref={buttonRef}\n      data-side={side}\n      className={mx(\n        'group absolute flex focus-visible:outline-none',\n        orientation === 'horizontal'\n          ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n          : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n        orientation === 'horizontal'\n          ? iconPosition === 'end'\n            ? 'align-end'\n            : iconPosition === 'center'\n              ? 'align-center'\n              : 'align-start'\n          : iconPosition === 'end'\n            ? 'justify-end'\n            : iconPosition === 'center'\n              ? 'justify-center'\n              : 'justify-start',\n        'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n        'before:absolute before:block before:bg-accentFocusIndicator',\n        classNames,\n      )}\n    >\n      <div\n        role='none'\n        data-side={side}\n        className={mx(\n          'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n          orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n        )}\n      >\n        <DragHandleSignifier side={side} />\n      </div>\n    </button>\n  );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n  return (\n    <svg\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='0 0 256 256'\n      fill='currentColor'\n      className={mx(\n        'shrink-0 bs-4 is-4 text-unAccent',\n        side === 'block-end'\n          ? 'rotate-90'\n          : side === 'block-start'\n            ? '-rotate-90'\n            : side === 'inline-start' && 'rotate-180',\n      )}\n    >\n      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n    </svg>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n  size: Size,\n  sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n  // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n  calcSize?: boolean,\n) => {\n  let sizeProperty = 'inlineSize';\n  switch (sideOrOrientation) {\n    case 'vertical':\n    case 'block-start':\n    case 'block-end':\n      sizeProperty = 'blockSize';\n  }\n  return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
-  "mappings": "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",
-  "names": ["draggable", "disableNativeDragPreview", "preventUnhandled", "useControllableState", "React", "useLayoutEffect", "useRef", "mx", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "measureSubject", "element", "fallbackSize", "stackItemElement", "closest", "getBoundingClientRect", "width", "height", "getNextSize", "startSize", "location", "client", "side", "minSize", "maxSize", "Math", "min", "Infinity", "max", "current", "input", "initial", "REM", "endsWith", "RESIZE_SUBJECT", "RESIZE_SUBJECT_DRAGGING", "resizeAttributes", "ResizeHandle", "classNames", "iconPosition", "defaultSize", "size", "propsSize", "onSizeChange", "buttonRef", "useRef", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "dragStartSize", "orientation", "startsWith", "useLayoutEffect", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "button", "ref", "data-side", "className", "mx", "div", "role", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d"]
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName, useElevationContext } from '@dxos/react-ui';\nimport { mx, surfaceZIndex } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n  const stackItemElement = element.closest('[data-dx-resize-subject]');\n  return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n  startSize: number,\n  location: DragLocationHistory,\n  client: 'clientX' | 'clientY',\n  side: Side,\n  minSize: number,\n  maxSize: number | undefined,\n) => {\n  return Math.min(\n    maxSize ?? Infinity,\n    Math.max(\n      minSize,\n      startSize +\n        ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n    ),\n  );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n  'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n  side: Side;\n  defaultSize?: Size;\n  fallbackSize: number;\n  size?: Size;\n  minSize: number;\n  maxSize?: number;\n  unit?: 'rem';\n  iconPosition?: 'start' | 'center' | 'end';\n  onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n  classNames,\n  side,\n  iconPosition = 'start',\n  defaultSize,\n  fallbackSize,\n  size: propsSize,\n  minSize,\n  maxSize,\n  onSizeChange,\n}: ResizeHandleProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [size = 'min-content', setSize] = useControllableState({\n    prop: propsSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n  const dragStartSize = useRef<Size>(size);\n  const elevation = useElevationContext();\n\n  const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n  const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n  useLayoutEffect(() => {\n    if (!buttonRef.current) {\n      return;\n    }\n\n    // TODO(thure): This should handle StackItem state vs local state better.\n    return draggable({\n      element: buttonRef.current,\n      onGenerateDragPreview: ({ nativeSetDragImage }) => {\n        // We will be moving the line to indicate a drag; we can disable the native drag preview.\n        disableNativeDragPreview({ nativeSetDragImage });\n        // We don't want any native drop animation for when the user does not drop on a drop target.\n        // We want the drag to finish immediately.\n        preventUnhandled.start();\n      },\n      onDragStart: () => {\n        dragStartSize.current =\n          dragStartSize.current === 'min-content'\n            ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n            : dragStartSize.current;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n      },\n      onDrag: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n      },\n      onDrop: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n        setSize(nextSize);\n        onSizeChange?.(nextSize, true);\n        dragStartSize.current = nextSize;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n      },\n    });\n  }, [\n    // Note that `size` should not be a dependency here since dragging this adjusts the size.\n    minSize,\n    maxSize,\n  ]);\n\n  return (\n    <button\n      ref={buttonRef}\n      data-side={side}\n      className={mx(\n        'group absolute flex focus-visible:outline-none',\n        surfaceZIndex({ elevation, level: 'tooltip' }),\n        orientation === 'horizontal'\n          ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n          : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n        orientation === 'horizontal'\n          ? iconPosition === 'end'\n            ? 'align-end'\n            : iconPosition === 'center'\n              ? 'align-center'\n              : 'align-start'\n          : iconPosition === 'end'\n            ? 'justify-end'\n            : iconPosition === 'center'\n              ? 'justify-center'\n              : 'justify-start',\n        'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n        'before:absolute before:block before:bg-accentFocusIndicator',\n        classNames,\n      )}\n    >\n      <div\n        role='none'\n        data-side={side}\n        className={mx(\n          'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n          orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n        )}\n      >\n        <DragHandleSignifier side={side} />\n      </div>\n    </button>\n  );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n  return (\n    <svg\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='0 0 256 256'\n      fill='currentColor'\n      className={mx(\n        'shrink-0 bs-4 is-4 text-unAccent',\n        side === 'block-end'\n          ? 'rotate-90'\n          : side === 'block-start'\n            ? '-rotate-90'\n            : side === 'inline-start' && 'rotate-180',\n      )}\n    >\n      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n    </svg>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n  size: Size,\n  sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n  // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n  calcSize?: boolean,\n) => {\n  let sizeProperty = 'inlineSize';\n  switch (sideOrOrientation) {\n    case 'vertical':\n    case 'block-start':\n    case 'block-end':\n      sizeProperty = 'blockSize';\n  }\n  return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
+  "mappings": "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",
+  "names": ["draggable", "disableNativeDragPreview", "preventUnhandled", "useControllableState", "React", "useLayoutEffect", "useRef", "useElevationContext", "mx", "surfaceZIndex", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "measureSubject", "element", "fallbackSize", "stackItemElement", "closest", "getBoundingClientRect", "width", "height", "getNextSize", "startSize", "location", "client", "side", "minSize", "maxSize", "Math", "min", "Infinity", "max", "current", "input", "initial", "REM", "endsWith", "RESIZE_SUBJECT", "RESIZE_SUBJECT_DRAGGING", "resizeAttributes", "ResizeHandle", "classNames", "iconPosition", "defaultSize", "size", "propsSize", "onSizeChange", "buttonRef", "useRef", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "dragStartSize", "elevation", "useElevationContext", "orientation", "startsWith", "useLayoutEffect", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "button", "ref", "data-side", "className", "mx", "surfaceZIndex", "level", "div", "role", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2227,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":795,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":581,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":20977,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":604,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12133},"packages/ui/react-ui-dnd/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":5457},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6206}}}
+{"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2227,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":795,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":581,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":21571,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":604,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12468},"packages/ui/react-ui-dnd/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":5633},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6382}}}

package/dist/lib/node/index.cjs

@@ -39,6 +39,7 @@ var import_disable_native_drag_preview = require("@atlaskit/pragmatic-drag-and-d
 var import_prevent_unhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
 var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
 var import_react = __toESM(require("react"));
+var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var sizeStyle = (size, sideOrOrientation, calcSize) => {
   let sizeProperty = "inlineSize";
@@ -76,6 +77,7 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
     onChange: onSizeChange
   });
   const dragStartSize = (0, import_react.useRef)(size);
+  const elevation = (0, import_react_ui.useElevationContext)();
   const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
   const client = orientation === "horizontal" ? "clientX" : "clientY";
   (0, import_react.useLayoutEffect)(() => {
@@ -119,7 +121,10 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
   return /* @__PURE__ */ import_react.default.createElement("button", {
     ref: buttonRef,
     "data-side": side,
-    className: (0, import_react_ui_theme.mx)("group absolute flex focus-visible:outline-none", orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator", classNames)
+    className: (0, import_react_ui_theme.mx)("group absolute flex focus-visible:outline-none", (0, import_react_ui_theme.surfaceZIndex)({
+      elevation,
+      level: "tooltip"
+    }), orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator", classNames)
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     role: "none",
     "data-side": side,

package/dist/lib/node/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/ResizeHandle.tsx", "../../../src/util/sizeStyle.ts", "../../../src/util/rem.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n  const stackItemElement = element.closest('[data-dx-resize-subject]');\n  return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n  startSize: number,\n  location: DragLocationHistory,\n  client: 'clientX' | 'clientY',\n  side: Side,\n  minSize: number,\n  maxSize: number | undefined,\n) => {\n  return Math.min(\n    maxSize ?? Infinity,\n    Math.max(\n      minSize,\n      startSize +\n        ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n    ),\n  );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n  'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n  side: Side;\n  defaultSize?: Size;\n  fallbackSize: number;\n  size?: Size;\n  minSize: number;\n  maxSize?: number;\n  unit?: 'rem';\n  iconPosition?: 'start' | 'center' | 'end';\n  onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n  classNames,\n  side,\n  iconPosition = 'start',\n  defaultSize,\n  fallbackSize,\n  size: propsSize,\n  minSize,\n  maxSize,\n  onSizeChange,\n}: ResizeHandleProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [size = 'min-content', setSize] = useControllableState({\n    prop: propsSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n  const dragStartSize = useRef<Size>(size);\n\n  const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n  const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n  useLayoutEffect(() => {\n    if (!buttonRef.current) {\n      return;\n    }\n\n    // TODO(thure): This should handle StackItem state vs local state better.\n    return draggable({\n      element: buttonRef.current,\n      onGenerateDragPreview: ({ nativeSetDragImage }) => {\n        // We will be moving the line to indicate a drag; we can disable the native drag preview.\n        disableNativeDragPreview({ nativeSetDragImage });\n        // We don't want any native drop animation for when the user does not drop on a drop target.\n        // We want the drag to finish immediately.\n        preventUnhandled.start();\n      },\n      onDragStart: () => {\n        dragStartSize.current =\n          dragStartSize.current === 'min-content'\n            ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n            : dragStartSize.current;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n      },\n      onDrag: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n      },\n      onDrop: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n        setSize(nextSize);\n        onSizeChange?.(nextSize, true);\n        dragStartSize.current = nextSize;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n      },\n    });\n  }, [\n    // Note that `size` should not be a dependency here since dragging this adjusts the size.\n    minSize,\n    maxSize,\n  ]);\n\n  return (\n    <button\n      ref={buttonRef}\n      data-side={side}\n      className={mx(\n        'group absolute flex focus-visible:outline-none',\n        orientation === 'horizontal'\n          ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n          : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n        orientation === 'horizontal'\n          ? iconPosition === 'end'\n            ? 'align-end'\n            : iconPosition === 'center'\n              ? 'align-center'\n              : 'align-start'\n          : iconPosition === 'end'\n            ? 'justify-end'\n            : iconPosition === 'center'\n              ? 'justify-center'\n              : 'justify-start',\n        'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n        'before:absolute before:block before:bg-accentFocusIndicator',\n        classNames,\n      )}\n    >\n      <div\n        role='none'\n        data-side={side}\n        className={mx(\n          'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n          orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n        )}\n      >\n        <DragHandleSignifier side={side} />\n      </div>\n    </button>\n  );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n  return (\n    <svg\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='0 0 256 256'\n      fill='currentColor'\n      className={mx(\n        'shrink-0 bs-4 is-4 text-unAccent',\n        side === 'block-end'\n          ? 'rotate-90'\n          : side === 'block-start'\n            ? '-rotate-90'\n            : side === 'inline-start' && 'rotate-180',\n      )}\n    >\n      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n    </svg>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n  size: Size,\n  sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n  // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n  calcSize?: boolean,\n) => {\n  let sizeProperty = 'inlineSize';\n  switch (sideOrOrientation) {\n    case 'vertical':\n    case 'block-start':\n    case 'block-end':\n      sizeProperty = 'blockSize';\n  }\n  return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
-  "mappings": "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",
-  "names": ["sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "measureSubject", "element", "fallbackSize", "stackItemElement", "closest", "getBoundingClientRect", "width", "height", "getNextSize", "startSize", "location", "client", "side", "minSize", "maxSize", "Math", "min", "Infinity", "max", "current", "input", "initial", "endsWith", "RESIZE_SUBJECT", "RESIZE_SUBJECT_DRAGGING", "resizeAttributes", "ResizeHandle", "classNames", "iconPosition", "defaultSize", "propsSize", "onSizeChange", "buttonRef", "useRef", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "dragStartSize", "orientation", "startsWith", "useLayoutEffect", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "React", "button", "ref", "data-side", "className", "mx", "div", "role", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d"]
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName, useElevationContext } from '@dxos/react-ui';\nimport { mx, surfaceZIndex } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n  const stackItemElement = element.closest('[data-dx-resize-subject]');\n  return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n  startSize: number,\n  location: DragLocationHistory,\n  client: 'clientX' | 'clientY',\n  side: Side,\n  minSize: number,\n  maxSize: number | undefined,\n) => {\n  return Math.min(\n    maxSize ?? Infinity,\n    Math.max(\n      minSize,\n      startSize +\n        ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n    ),\n  );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n  'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n  side: Side;\n  defaultSize?: Size;\n  fallbackSize: number;\n  size?: Size;\n  minSize: number;\n  maxSize?: number;\n  unit?: 'rem';\n  iconPosition?: 'start' | 'center' | 'end';\n  onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n  classNames,\n  side,\n  iconPosition = 'start',\n  defaultSize,\n  fallbackSize,\n  size: propsSize,\n  minSize,\n  maxSize,\n  onSizeChange,\n}: ResizeHandleProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [size = 'min-content', setSize] = useControllableState({\n    prop: propsSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n  const dragStartSize = useRef<Size>(size);\n  const elevation = useElevationContext();\n\n  const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n  const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n  useLayoutEffect(() => {\n    if (!buttonRef.current) {\n      return;\n    }\n\n    // TODO(thure): This should handle StackItem state vs local state better.\n    return draggable({\n      element: buttonRef.current,\n      onGenerateDragPreview: ({ nativeSetDragImage }) => {\n        // We will be moving the line to indicate a drag; we can disable the native drag preview.\n        disableNativeDragPreview({ nativeSetDragImage });\n        // We don't want any native drop animation for when the user does not drop on a drop target.\n        // We want the drag to finish immediately.\n        preventUnhandled.start();\n      },\n      onDragStart: () => {\n        dragStartSize.current =\n          dragStartSize.current === 'min-content'\n            ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n            : dragStartSize.current;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n      },\n      onDrag: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n      },\n      onDrop: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n        setSize(nextSize);\n        onSizeChange?.(nextSize, true);\n        dragStartSize.current = nextSize;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n      },\n    });\n  }, [\n    // Note that `size` should not be a dependency here since dragging this adjusts the size.\n    minSize,\n    maxSize,\n  ]);\n\n  return (\n    <button\n      ref={buttonRef}\n      data-side={side}\n      className={mx(\n        'group absolute flex focus-visible:outline-none',\n        surfaceZIndex({ elevation, level: 'tooltip' }),\n        orientation === 'horizontal'\n          ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n          : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n        orientation === 'horizontal'\n          ? iconPosition === 'end'\n            ? 'align-end'\n            : iconPosition === 'center'\n              ? 'align-center'\n              : 'align-start'\n          : iconPosition === 'end'\n            ? 'justify-end'\n            : iconPosition === 'center'\n              ? 'justify-center'\n              : 'justify-start',\n        'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n        'before:absolute before:block before:bg-accentFocusIndicator',\n        classNames,\n      )}\n    >\n      <div\n        role='none'\n        data-side={side}\n        className={mx(\n          'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n          orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n        )}\n      >\n        <DragHandleSignifier side={side} />\n      </div>\n    </button>\n  );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n  return (\n    <svg\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='0 0 256 256'\n      fill='currentColor'\n      className={mx(\n        'shrink-0 bs-4 is-4 text-unAccent',\n        side === 'block-end'\n          ? 'rotate-90'\n          : side === 'block-start'\n            ? '-rotate-90'\n            : side === 'inline-start' && 'rotate-180',\n      )}\n    >\n      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n    </svg>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n  size: Size,\n  sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n  // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n  calcSize?: boolean,\n) => {\n  let sizeProperty = 'inlineSize';\n  switch (sideOrOrientation) {\n    case 'vertical':\n    case 'block-start':\n    case 'block-end':\n      sizeProperty = 'blockSize';\n  }\n  return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
+  "mappings": "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",
+  "names": ["sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "measureSubject", "element", "fallbackSize", "stackItemElement", "closest", "getBoundingClientRect", "width", "height", "getNextSize", "startSize", "location", "client", "side", "minSize", "maxSize", "Math", "min", "Infinity", "max", "current", "input", "initial", "endsWith", "RESIZE_SUBJECT", "RESIZE_SUBJECT_DRAGGING", "resizeAttributes", "ResizeHandle", "classNames", "iconPosition", "defaultSize", "propsSize", "onSizeChange", "buttonRef", "useRef", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "dragStartSize", "elevation", "useElevationContext", "orientation", "startsWith", "useLayoutEffect", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "React", "button", "ref", "data-side", "className", "mx", "surfaceZIndex", "level", "div", "role", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d"]
 }

package/dist/lib/node/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2227,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":795,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":581,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":20977,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":604,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12133},"packages/ui/react-ui-dnd/dist/lib/node/index.cjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":5457},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6206}}}
+{"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2227,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":795,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":581,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":21571,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":604,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12468},"packages/ui/react-ui-dnd/dist/lib/node/index.cjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":5633},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6382}}}

package/dist/lib/node-esm/index.mjs

@@ -6,7 +6,8 @@ import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/elem
 import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import React, { useLayoutEffect, useRef } from "react";
-import { mx } from "@dxos/react-ui-theme";
+import { useElevationContext } from "@dxos/react-ui";
+import { mx, surfaceZIndex } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-dnd/src/util/sizeStyle.ts
 var sizeStyle = (size, sideOrOrientation, calcSize) => {
@@ -49,6 +50,7 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
     onChange: onSizeChange
   });
   const dragStartSize = useRef(size);
+  const elevation = useElevationContext();
   const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
   const client = orientation === "horizontal" ? "clientX" : "clientY";
   useLayoutEffect(() => {
@@ -92,7 +94,10 @@ var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fal
   return /* @__PURE__ */ React.createElement("button", {
     ref: buttonRef,
     "data-side": side,
-    className: mx("group absolute flex focus-visible:outline-none", orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator", classNames)
+    className: mx("group absolute flex focus-visible:outline-none", surfaceZIndex({
+      elevation,
+      level: "tooltip"
+    }), orientation === "horizontal" ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1' : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1', orientation === "horizontal" ? iconPosition === "end" ? "align-end" : iconPosition === "center" ? "align-center" : "align-start" : iconPosition === "end" ? "justify-end" : iconPosition === "center" ? "justify-center" : "justify-start", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator", classNames)
   }, /* @__PURE__ */ React.createElement("div", {
     role: "none",
     "data-side": side,

package/dist/lib/node-esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/ResizeHandle.tsx", "../../../src/util/sizeStyle.ts", "../../../src/util/rem.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n  const stackItemElement = element.closest('[data-dx-resize-subject]');\n  return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n  startSize: number,\n  location: DragLocationHistory,\n  client: 'clientX' | 'clientY',\n  side: Side,\n  minSize: number,\n  maxSize: number | undefined,\n) => {\n  return Math.min(\n    maxSize ?? Infinity,\n    Math.max(\n      minSize,\n      startSize +\n        ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n    ),\n  );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n  'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n  side: Side;\n  defaultSize?: Size;\n  fallbackSize: number;\n  size?: Size;\n  minSize: number;\n  maxSize?: number;\n  unit?: 'rem';\n  iconPosition?: 'start' | 'center' | 'end';\n  onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n  classNames,\n  side,\n  iconPosition = 'start',\n  defaultSize,\n  fallbackSize,\n  size: propsSize,\n  minSize,\n  maxSize,\n  onSizeChange,\n}: ResizeHandleProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [size = 'min-content', setSize] = useControllableState({\n    prop: propsSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n  const dragStartSize = useRef<Size>(size);\n\n  const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n  const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n  useLayoutEffect(() => {\n    if (!buttonRef.current) {\n      return;\n    }\n\n    // TODO(thure): This should handle StackItem state vs local state better.\n    return draggable({\n      element: buttonRef.current,\n      onGenerateDragPreview: ({ nativeSetDragImage }) => {\n        // We will be moving the line to indicate a drag; we can disable the native drag preview.\n        disableNativeDragPreview({ nativeSetDragImage });\n        // We don't want any native drop animation for when the user does not drop on a drop target.\n        // We want the drag to finish immediately.\n        preventUnhandled.start();\n      },\n      onDragStart: () => {\n        dragStartSize.current =\n          dragStartSize.current === 'min-content'\n            ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n            : dragStartSize.current;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n      },\n      onDrag: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n      },\n      onDrop: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n        setSize(nextSize);\n        onSizeChange?.(nextSize, true);\n        dragStartSize.current = nextSize;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n      },\n    });\n  }, [\n    // Note that `size` should not be a dependency here since dragging this adjusts the size.\n    minSize,\n    maxSize,\n  ]);\n\n  return (\n    <button\n      ref={buttonRef}\n      data-side={side}\n      className={mx(\n        'group absolute flex focus-visible:outline-none',\n        orientation === 'horizontal'\n          ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n          : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n        orientation === 'horizontal'\n          ? iconPosition === 'end'\n            ? 'align-end'\n            : iconPosition === 'center'\n              ? 'align-center'\n              : 'align-start'\n          : iconPosition === 'end'\n            ? 'justify-end'\n            : iconPosition === 'center'\n              ? 'justify-center'\n              : 'justify-start',\n        'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n        'before:absolute before:block before:bg-accentFocusIndicator',\n        classNames,\n      )}\n    >\n      <div\n        role='none'\n        data-side={side}\n        className={mx(\n          'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n          orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n        )}\n      >\n        <DragHandleSignifier side={side} />\n      </div>\n    </button>\n  );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n  return (\n    <svg\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='0 0 256 256'\n      fill='currentColor'\n      className={mx(\n        'shrink-0 bs-4 is-4 text-unAccent',\n        side === 'block-end'\n          ? 'rotate-90'\n          : side === 'block-start'\n            ? '-rotate-90'\n            : side === 'inline-start' && 'rotate-180',\n      )}\n    >\n      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n    </svg>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n  size: Size,\n  sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n  // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n  calcSize?: boolean,\n) => {\n  let sizeProperty = 'inlineSize';\n  switch (sideOrOrientation) {\n    case 'vertical':\n    case 'block-start':\n    case 'block-end':\n      sizeProperty = 'blockSize';\n  }\n  return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
-  "mappings": "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",
-  "names": ["draggable", "disableNativeDragPreview", "preventUnhandled", "useControllableState", "React", "useLayoutEffect", "useRef", "mx", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "measureSubject", "element", "fallbackSize", "stackItemElement", "closest", "getBoundingClientRect", "width", "height", "getNextSize", "startSize", "location", "client", "side", "minSize", "maxSize", "Math", "min", "Infinity", "max", "current", "input", "initial", "REM", "endsWith", "RESIZE_SUBJECT", "RESIZE_SUBJECT_DRAGGING", "resizeAttributes", "ResizeHandle", "classNames", "iconPosition", "defaultSize", "size", "propsSize", "onSizeChange", "buttonRef", "useRef", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "dragStartSize", "orientation", "startsWith", "useLayoutEffect", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "button", "ref", "data-side", "className", "mx", "div", "role", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d"]
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';\nimport { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { useLayoutEffect, useRef } from 'react';\n\nimport { type ThemedClassName, useElevationContext } from '@dxos/react-ui';\nimport { mx, surfaceZIndex } from '@dxos/react-ui-theme';\n\nimport { type Size, type Side } from '../types';\nimport { REM } from '../util';\n\nconst measureSubject = (element: HTMLButtonElement, fallbackSize: number): { width: number; height: number } => {\n  const stackItemElement = element.closest('[data-dx-resize-subject]');\n  return stackItemElement?.getBoundingClientRect() ?? { width: fallbackSize, height: fallbackSize };\n};\n\nconst getNextSize = (\n  startSize: number,\n  location: DragLocationHistory,\n  client: 'clientX' | 'clientY',\n  side: Side,\n  minSize: number,\n  maxSize: number | undefined,\n) => {\n  return Math.min(\n    maxSize ?? Infinity,\n    Math.max(\n      minSize,\n      startSize +\n        ((location.current.input[client] - location.initial.input[client]) / REM) * (side.endsWith('end') ? 1 : -1),\n    ),\n  );\n};\n\nconst RESIZE_SUBJECT = 'data-dx-resize-subject';\nconst RESIZE_SUBJECT_DRAGGING = 'data-dx-resizing';\n\nexport const resizeAttributes = {\n  'data-dx-resize-subject': true,\n};\n\nexport type ResizeHandleProps = ThemedClassName<{\n  side: Side;\n  defaultSize?: Size;\n  fallbackSize: number;\n  size?: Size;\n  minSize: number;\n  maxSize?: number;\n  unit?: 'rem';\n  iconPosition?: 'start' | 'center' | 'end';\n  onSizeChange?: (nextSize: Size, commit?: boolean) => void;\n}>;\n\nexport const ResizeHandle = ({\n  classNames,\n  side,\n  iconPosition = 'start',\n  defaultSize,\n  fallbackSize,\n  size: propsSize,\n  minSize,\n  maxSize,\n  onSizeChange,\n}: ResizeHandleProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [size = 'min-content', setSize] = useControllableState({\n    prop: propsSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n  const dragStartSize = useRef<Size>(size);\n  const elevation = useElevationContext();\n\n  const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';\n  const client = orientation === 'horizontal' ? 'clientX' : 'clientY';\n\n  useLayoutEffect(() => {\n    if (!buttonRef.current) {\n      return;\n    }\n\n    // TODO(thure): This should handle StackItem state vs local state better.\n    return draggable({\n      element: buttonRef.current,\n      onGenerateDragPreview: ({ nativeSetDragImage }) => {\n        // We will be moving the line to indicate a drag; we can disable the native drag preview.\n        disableNativeDragPreview({ nativeSetDragImage });\n        // We don't want any native drop animation for when the user does not drop on a drop target.\n        // We want the drag to finish immediately.\n        preventUnhandled.start();\n      },\n      onDragStart: () => {\n        dragStartSize.current =\n          dragStartSize.current === 'min-content'\n            ? measureSubject(buttonRef.current!, fallbackSize)[orientation === 'horizontal' ? 'width' : 'height'] / REM\n            : dragStartSize.current;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, 'true');\n      },\n      onDrag: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));\n      },\n      onDrop: ({ location }) => {\n        if (typeof dragStartSize.current !== 'number') {\n          return;\n        }\n        const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);\n        setSize(nextSize);\n        onSizeChange?.(nextSize, true);\n        dragStartSize.current = nextSize;\n        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);\n      },\n    });\n  }, [\n    // Note that `size` should not be a dependency here since dragging this adjusts the size.\n    minSize,\n    maxSize,\n  ]);\n\n  return (\n    <button\n      ref={buttonRef}\n      data-side={side}\n      className={mx(\n        'group absolute flex focus-visible:outline-none',\n        surfaceZIndex({ elevation, level: 'tooltip' }),\n        orientation === 'horizontal'\n          ? 'cursor-col-resize is-4 inset-block-0 data-[side=\"inline-end\"]:inline-end-0 data-[side=\"inline-end\"]:before:inline-end-0 data-[side=\"inline-start\"]:inline-start-0 data-[side=\"inline-start\"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'\n          : 'cursor-row-resize bs-4 inset-inline-0 data-[side=\"block-end\"]:block-end-0 data-[side=\"block-end\"]:before:block-end-0 data-[side=\"block-start\"]:block-start-0 data-[side=\"block-start\"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',\n        orientation === 'horizontal'\n          ? iconPosition === 'end'\n            ? 'align-end'\n            : iconPosition === 'center'\n              ? 'align-center'\n              : 'align-start'\n          : iconPosition === 'end'\n            ? 'justify-end'\n            : iconPosition === 'center'\n              ? 'justify-center'\n              : 'justify-start',\n        'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',\n        'before:absolute before:block before:bg-accentFocusIndicator',\n        classNames,\n      )}\n    >\n      <div\n        role='none'\n        data-side={side}\n        className={mx(\n          'grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',\n          orientation === 'horizontal' ? 'bs-[--rail-size] is-4' : 'is-[--rail-size] bs-4',\n        )}\n      >\n        <DragHandleSignifier side={side} />\n      </div>\n    </button>\n  );\n};\n\nconst DragHandleSignifier = ({ side }: Pick<ResizeHandleProps, 'side'>) => {\n  return (\n    <svg\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='0 0 256 256'\n      fill='currentColor'\n      className={mx(\n        'shrink-0 bs-4 is-4 text-unAccent',\n        side === 'block-end'\n          ? 'rotate-90'\n          : side === 'block-start'\n            ? '-rotate-90'\n            : side === 'inline-start' && 'rotate-180',\n      )}\n    >\n      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}\n      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />\n    </svg>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ResizeHandleProps } from '../components';\nimport { type Size } from '../types';\n\nexport const sizeStyle = (\n  size: Size,\n  sideOrOrientation: ResizeHandleProps['side'] | 'horizontal' | 'vertical',\n  // TODO(thure): This is an experimental feature under evaluation; remove if the default should become `true`.\n  calcSize?: boolean,\n) => {\n  let sizeProperty = 'inlineSize';\n  switch (sideOrOrientation) {\n    case 'vertical':\n    case 'block-start':\n    case 'block-end':\n      sizeProperty = 'blockSize';\n  }\n  return { [sizeProperty]: size === 'min-content' ? (calcSize ? 'var(--dx-calc-min)' : 'min-content') : `${size}rem` };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nexport const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);\n"],
+  "mappings": "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",
+  "names": ["draggable", "disableNativeDragPreview", "preventUnhandled", "useControllableState", "React", "useLayoutEffect", "useRef", "useElevationContext", "mx", "surfaceZIndex", "sizeStyle", "size", "sideOrOrientation", "calcSize", "sizeProperty", "REM", "parseFloat", "getComputedStyle", "document", "documentElement", "fontSize", "measureSubject", "element", "fallbackSize", "stackItemElement", "closest", "getBoundingClientRect", "width", "height", "getNextSize", "startSize", "location", "client", "side", "minSize", "maxSize", "Math", "min", "Infinity", "max", "current", "input", "initial", "REM", "endsWith", "RESIZE_SUBJECT", "RESIZE_SUBJECT_DRAGGING", "resizeAttributes", "ResizeHandle", "classNames", "iconPosition", "defaultSize", "size", "propsSize", "onSizeChange", "buttonRef", "useRef", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "dragStartSize", "elevation", "useElevationContext", "orientation", "startsWith", "useLayoutEffect", "draggable", "onGenerateDragPreview", "nativeSetDragImage", "disableNativeDragPreview", "preventUnhandled", "start", "onDragStart", "setAttribute", "onDrag", "onDrop", "nextSize", "removeAttribute", "button", "ref", "data-side", "className", "mx", "surfaceZIndex", "level", "div", "role", "DragHandleSignifier", "svg", "xmlns", "viewBox", "fill", "path", "d"]
 }

package/dist/lib/node-esm/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2227,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":795,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":581,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":20977,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":604,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12135},"packages/ui/react-ui-dnd/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":5457},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6299}}}
+{"inputs":{"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytes":2227,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":795,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":581,"imports":[{"path":"packages/ui/react-ui-dnd/src/util/sizeStyle.ts","kind":"import-statement","original":"./sizeStyle"},{"path":"packages/ui/react-ui-dnd/src/util/rem.ts","kind":"import-statement","original":"./rem"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytes":21571,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx","kind":"import-statement","original":"./ResizeHandle"}],"format":"esm"},"packages/ui/react-ui-dnd/src/types.ts":{"bytes":604,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-dnd/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-dnd/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-dnd/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-dnd/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12470},"packages/ui/react-ui-dnd/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["REM","ResizeHandle","resizeAttributes","sizeStyle"],"entryPoint":"packages/ui/react-ui-dnd/src/index.ts","inputs":{"packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx":{"bytesInOutput":5633},"packages/ui/react-ui-dnd/src/util/sizeStyle.ts":{"bytesInOutput":355},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytesInOutput":75},"packages/ui/react-ui-dnd/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-dnd/src/index.ts":{"bytesInOutput":0}},"bytes":6475}}}

package/dist/types/src/components/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/ResizeHandle.tsx"],"names":[],"mappings":"AASA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AA6BhD,eAAO,MAAM,gBAAgB;;CAE5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC9C,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY,oHAUtB,iBAAiB,sBA8FnB,CAAC"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/ResizeHandle.tsx"],"names":[],"mappings":"AASA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,eAAe,EAAuB,MAAM,gBAAgB,CAAC;AAG3E,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AA6BhD,eAAO,MAAM,gBAAgB;;CAE5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC9C,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY,oHAUtB,iBAAiB,sBAgGnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-dnd",
-  "version": "0.8.1",
+  "version": "0.8.2-main.2f9c567",
   "description": "Drag and drop components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,14 +37,14 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-theme": "0.8.2-main.2f9c567"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-theme": "0.8.2-main.2f9c567"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ResizeHandle.tsx

@@ -9,8 +9,8 @@ import { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/type
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, { useLayoutEffect, useRef } from 'react';
 
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { type ThemedClassName, useElevationContext } from '@dxos/react-ui';
+import { mx, surfaceZIndex } from '@dxos/react-ui-theme';
 
 import { type Size, type Side } from '../types';
 import { REM } from '../util';
@@ -75,6 +75,7 @@ export const ResizeHandle = ({
     onChange: onSizeChange,
   });
   const dragStartSize = useRef<Size>(size);
+  const elevation = useElevationContext();
 
   const orientation = side.startsWith('inline') ? 'horizontal' : 'vertical';
   const client = orientation === 'horizontal' ? 'clientX' : 'clientY';
@@ -130,6 +131,7 @@ export const ResizeHandle = ({
       data-side={side}
       className={mx(
         'group absolute flex focus-visible:outline-none',
+        surfaceZIndex({ elevation, level: 'tooltip' }),
         orientation === 'horizontal'
           ? 'cursor-col-resize is-4 inset-block-0 data-[side="inline-end"]:inline-end-0 data-[side="inline-end"]:before:inline-end-0 data-[side="inline-start"]:inline-start-0 data-[side="inline-start"]:before:inline-start-0 !border-lb-0 before:inset-block-0 before:is-1'
           : 'cursor-row-resize bs-4 inset-inline-0 data-[side="block-end"]:block-end-0 data-[side="block-end"]:before:block-end-0 data-[side="block-start"]:block-start-0 data-[side="block-start"]:before:block-start-0 !border-li-0 before:inset-inline-0 before:bs-1',