@dxos/react-ui-dnd 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/browser/index.mjs

@@ -1,10 +1,12 @@
 // packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
 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) => {
@@ -40,80 +42,94 @@ var resizeAttributes = {
   "data-dx-resize-subject": true
 };
 var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: propsSize, minSize, maxSize, onSizeChange }) => {
-  const buttonRef = useRef(null);
-  const [size = "min-content", setSize] = useControllableState({
-    prop: propsSize,
-    defaultProp: defaultSize,
-    onChange: onSizeChange
-  });
-  const dragStartSize = useRef(size);
-  const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
-  const client = orientation === "horizontal" ? "clientX" : "clientY";
-  useLayoutEffect(() => {
-    if (!buttonRef.current) {
-      return;
-    }
-    return draggable({
-      element: buttonRef.current,
-      onGenerateDragPreview: ({ nativeSetDragImage }) => {
-        disableNativeDragPreview({
-          nativeSetDragImage
-        });
-        preventUnhandled.start();
-      },
-      onDragStart: () => {
-        dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
-        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
-      },
-      onDrag: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
-      },
-      onDrop: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
-        setSize(nextSize);
-        onSizeChange?.(nextSize, true);
-        dragStartSize.current = nextSize;
-        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
-      }
+  var _effect = _useSignals();
+  try {
+    const buttonRef = useRef(null);
+    const [size = "min-content", setSize] = useControllableState({
+      prop: propsSize,
+      defaultProp: defaultSize,
+      onChange: onSizeChange
     });
-  }, [
-    // Note that `size` should not be a dependency here since dragging this adjusts the size.
-    minSize,
-    maxSize
-  ]);
-  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)
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    "data-side": side,
-    className: mx("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
-  }, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
-    side
-  })));
+    const dragStartSize = useRef(size);
+    const elevation = useElevationContext();
+    const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
+    const client = orientation === "horizontal" ? "clientX" : "clientY";
+    useLayoutEffect(() => {
+      if (!buttonRef.current) {
+        return;
+      }
+      return draggable({
+        element: buttonRef.current,
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          disableNativeDragPreview({
+            nativeSetDragImage
+          });
+          preventUnhandled.start();
+        },
+        onDragStart: () => {
+          dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
+          buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
+        },
+        onDrag: ({ location }) => {
+          if (typeof dragStartSize.current !== "number") {
+            return;
+          }
+          setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
+        },
+        onDrop: ({ location }) => {
+          if (typeof dragStartSize.current !== "number") {
+            return;
+          }
+          const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
+          setSize(nextSize);
+          onSizeChange?.(nextSize, true);
+          dragStartSize.current = nextSize;
+          buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
+        }
+      });
+    }, [
+      // Note that `size` should not be a dependency here since dragging this adjusts the size.
+      minSize,
+      maxSize
+    ]);
+    return /* @__PURE__ */ React.createElement("button", {
+      ref: buttonRef,
+      "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', 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-neutralFocusIndicator", classNames)
+    }, /* @__PURE__ */ React.createElement("div", {
+      role: "none",
+      "data-side": side,
+      className: mx("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
+    }, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
+      side
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var DragHandleSignifier = ({ side }) => {
-  return /* @__PURE__ */ React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 256 256",
-    fill: "currentColor",
-    className: mx("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }));
+  var _effect = _useSignals();
+  try {
+    return /* @__PURE__ */ React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      className: mx("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
+    }, /* @__PURE__ */ React.createElement("path", {
+      d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }), /* @__PURE__ */ React.createElement("path", {
+      d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }), /* @__PURE__ */ React.createElement("path", {
+      d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }), /* @__PURE__ */ React.createElement("path", {
+      d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 export {
   REM,

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-neutralFocusIndicator',\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":2175,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":763,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":549,"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":22003,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":487,"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":572,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":631,"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":12481},"packages/ui/react-ui-dnd/dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":6015},"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":6764}}}

package/dist/lib/node/index.cjs

@@ -34,11 +34,13 @@ __export(node_exports, {
   sizeStyle: () => sizeStyle
 });
 module.exports = __toCommonJS(node_exports);
+var import_tracking = require("@preact-signals/safe-react/tracking");
 var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var import_disable_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
 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";
@@ -69,80 +71,94 @@ var resizeAttributes = {
   "data-dx-resize-subject": true
 };
 var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: propsSize, minSize, maxSize, onSizeChange }) => {
-  const buttonRef = (0, import_react.useRef)(null);
-  const [size = "min-content", setSize] = (0, import_react_use_controllable_state.useControllableState)({
-    prop: propsSize,
-    defaultProp: defaultSize,
-    onChange: onSizeChange
-  });
-  const dragStartSize = (0, import_react.useRef)(size);
-  const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
-  const client = orientation === "horizontal" ? "clientX" : "clientY";
-  (0, import_react.useLayoutEffect)(() => {
-    if (!buttonRef.current) {
-      return;
-    }
-    return (0, import_adapter.draggable)({
-      element: buttonRef.current,
-      onGenerateDragPreview: ({ nativeSetDragImage }) => {
-        (0, import_disable_native_drag_preview.disableNativeDragPreview)({
-          nativeSetDragImage
-        });
-        import_prevent_unhandled.preventUnhandled.start();
-      },
-      onDragStart: () => {
-        dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
-        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
-      },
-      onDrag: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
-      },
-      onDrop: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
-        setSize(nextSize);
-        onSizeChange?.(nextSize, true);
-        dragStartSize.current = nextSize;
-        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
-      }
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const buttonRef = (0, import_react.useRef)(null);
+    const [size = "min-content", setSize] = (0, import_react_use_controllable_state.useControllableState)({
+      prop: propsSize,
+      defaultProp: defaultSize,
+      onChange: onSizeChange
     });
-  }, [
-    // Note that `size` should not be a dependency here since dragging this adjusts the size.
-    minSize,
-    maxSize
-  ]);
-  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)
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    "data-side": side,
-    className: (0, import_react_ui_theme.mx)("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
-  }, /* @__PURE__ */ import_react.default.createElement(DragHandleSignifier, {
-    side
-  })));
+    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)(() => {
+      if (!buttonRef.current) {
+        return;
+      }
+      return (0, import_adapter.draggable)({
+        element: buttonRef.current,
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          (0, import_disable_native_drag_preview.disableNativeDragPreview)({
+            nativeSetDragImage
+          });
+          import_prevent_unhandled.preventUnhandled.start();
+        },
+        onDragStart: () => {
+          dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
+          buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
+        },
+        onDrag: ({ location }) => {
+          if (typeof dragStartSize.current !== "number") {
+            return;
+          }
+          setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
+        },
+        onDrop: ({ location }) => {
+          if (typeof dragStartSize.current !== "number") {
+            return;
+          }
+          const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
+          setSize(nextSize);
+          onSizeChange?.(nextSize, true);
+          dragStartSize.current = nextSize;
+          buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
+        }
+      });
+    }, [
+      // Note that `size` should not be a dependency here since dragging this adjusts the size.
+      minSize,
+      maxSize
+    ]);
+    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", (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-neutralFocusIndicator", classNames)
+    }, /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      "data-side": side,
+      className: (0, import_react_ui_theme.mx)("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
+    }, /* @__PURE__ */ import_react.default.createElement(DragHandleSignifier, {
+      side
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var DragHandleSignifier = ({ side }) => {
-  return /* @__PURE__ */ import_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 256 256",
-    fill: "currentColor",
-    className: (0, import_react_ui_theme.mx)("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
-  }, /* @__PURE__ */ import_react.default.createElement("path", {
-    d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ import_react.default.createElement("path", {
-    d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ import_react.default.createElement("path", {
-    d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ import_react.default.createElement("path", {
-    d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      className: (0, import_react_ui_theme.mx)("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
+    }, /* @__PURE__ */ import_react.default.createElement("path", {
+      d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }), /* @__PURE__ */ import_react.default.createElement("path", {
+      d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }), /* @__PURE__ */ import_react.default.createElement("path", {
+      d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }), /* @__PURE__ */ import_react.default.createElement("path", {
+      d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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-neutralFocusIndicator',\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":2175,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":763,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":549,"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":22003,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":487,"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":572,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":631,"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":12481},"packages/ui/react-ui-dnd/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":6015},"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":6764}}}

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

@@ -1,12 +1,14 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
 // packages/ui/react-ui-dnd/src/components/ResizeHandle.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
 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) => {
@@ -42,80 +44,94 @@ var resizeAttributes = {
   "data-dx-resize-subject": true
 };
 var ResizeHandle = ({ classNames, side, iconPosition = "start", defaultSize, fallbackSize, size: propsSize, minSize, maxSize, onSizeChange }) => {
-  const buttonRef = useRef(null);
-  const [size = "min-content", setSize] = useControllableState({
-    prop: propsSize,
-    defaultProp: defaultSize,
-    onChange: onSizeChange
-  });
-  const dragStartSize = useRef(size);
-  const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
-  const client = orientation === "horizontal" ? "clientX" : "clientY";
-  useLayoutEffect(() => {
-    if (!buttonRef.current) {
-      return;
-    }
-    return draggable({
-      element: buttonRef.current,
-      onGenerateDragPreview: ({ nativeSetDragImage }) => {
-        disableNativeDragPreview({
-          nativeSetDragImage
-        });
-        preventUnhandled.start();
-      },
-      onDragStart: () => {
-        dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
-        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
-      },
-      onDrag: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
-      },
-      onDrop: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
-        setSize(nextSize);
-        onSizeChange?.(nextSize, true);
-        dragStartSize.current = nextSize;
-        buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
-      }
+  var _effect = _useSignals();
+  try {
+    const buttonRef = useRef(null);
+    const [size = "min-content", setSize] = useControllableState({
+      prop: propsSize,
+      defaultProp: defaultSize,
+      onChange: onSizeChange
     });
-  }, [
-    // Note that `size` should not be a dependency here since dragging this adjusts the size.
-    minSize,
-    maxSize
-  ]);
-  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)
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    "data-side": side,
-    className: mx("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
-  }, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
-    side
-  })));
+    const dragStartSize = useRef(size);
+    const elevation = useElevationContext();
+    const orientation = side.startsWith("inline") ? "horizontal" : "vertical";
+    const client = orientation === "horizontal" ? "clientX" : "clientY";
+    useLayoutEffect(() => {
+      if (!buttonRef.current) {
+        return;
+      }
+      return draggable({
+        element: buttonRef.current,
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          disableNativeDragPreview({
+            nativeSetDragImage
+          });
+          preventUnhandled.start();
+        },
+        onDragStart: () => {
+          dragStartSize.current = dragStartSize.current === "min-content" ? measureSubject(buttonRef.current, fallbackSize)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
+          buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.setAttribute(RESIZE_SUBJECT_DRAGGING, "true");
+        },
+        onDrag: ({ location }) => {
+          if (typeof dragStartSize.current !== "number") {
+            return;
+          }
+          setSize(getNextSize(dragStartSize.current, location, client, side, minSize, maxSize));
+        },
+        onDrop: ({ location }) => {
+          if (typeof dragStartSize.current !== "number") {
+            return;
+          }
+          const nextSize = getNextSize(dragStartSize.current, location, client, side, minSize, maxSize);
+          setSize(nextSize);
+          onSizeChange?.(nextSize, true);
+          dragStartSize.current = nextSize;
+          buttonRef.current?.closest(`[${RESIZE_SUBJECT}]`)?.removeAttribute(RESIZE_SUBJECT_DRAGGING);
+        }
+      });
+    }, [
+      // Note that `size` should not be a dependency here since dragging this adjusts the size.
+      minSize,
+      maxSize
+    ]);
+    return /* @__PURE__ */ React.createElement("button", {
+      ref: buttonRef,
+      "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', 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-neutralFocusIndicator", classNames)
+    }, /* @__PURE__ */ React.createElement("div", {
+      role: "none",
+      "data-side": side,
+      className: mx("grid place-items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "bs-[--rail-size] is-4" : "is-[--rail-size] bs-4")
+    }, /* @__PURE__ */ React.createElement(DragHandleSignifier, {
+      side
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 var DragHandleSignifier = ({ side }) => {
-  return /* @__PURE__ */ React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 256 256",
-    fill: "currentColor",
-    className: mx("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }));
+  var _effect = _useSignals();
+  try {
+    return /* @__PURE__ */ React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      fill: "currentColor",
+      className: mx("shrink-0 bs-4 is-4 text-unAccent", side === "block-end" ? "rotate-90" : side === "block-start" ? "-rotate-90" : side === "inline-start" && "rotate-180")
+    }, /* @__PURE__ */ React.createElement("path", {
+      d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }), /* @__PURE__ */ React.createElement("path", {
+      d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }), /* @__PURE__ */ React.createElement("path", {
+      d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }), /* @__PURE__ */ React.createElement("path", {
+      d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 export {
   REM,

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-neutralFocusIndicator',\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":2175,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/rem.ts":{"bytes":763,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/util/index.ts":{"bytes":549,"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":22003,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":487,"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":572,"imports":[],"format":"esm"},"packages/ui/react-ui-dnd/src/index.ts":{"bytes":631,"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":12483},"packages/ui/react-ui-dnd/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":6015},"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":6857}}}

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,GAAI,iHAU1B,iBAAiB,sBAgGnB,CAAC"}

package/dist/types/src/util/sizeStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizeStyle.d.ts","sourceRoot":"","sources":["../../../../src/util/sizeStyle.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,eAAO,MAAM,SAAS,SACd,IAAI,qBACS,iBAAiB,CAAC,MAAM,CAAC,GAAG,YAAY,GAAG,UAAU,aAE7D,OAAO;;CAUnB,CAAC"}
+{"version":3,"file":"sizeStyle.d.ts","sourceRoot":"","sources":["../../../../src/util/sizeStyle.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,eAAO,MAAM,SAAS,GACpB,MAAM,IAAI,EACV,mBAAmB,iBAAiB,CAAC,MAAM,CAAC,GAAG,YAAY,GAAG,UAAU,EAExE,WAAW,OAAO;;CAUnB,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-dnd",
-  "version": "0.8.2-staging.7ac8446",
+  "version": "0.8.2",
   "description": "Drag and drop components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,6 +29,7 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/react-use-controllable-state": "1.1.0"
   },
   "devDependencies": {
@@ -37,14 +38,14 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446"
+    "@dxos/react-ui": "0.8.2",
+    "@dxos/react-ui-theme": "0.8.2"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.2-staging.7ac8446",
-    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446"
+    "@dxos/react-ui-theme": "0.8.2",
+    "@dxos/react-ui": "0.8.2"
   },
   "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',
@@ -145,7 +147,7 @@ export const ResizeHandle = ({
               ? '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',
+        'before:absolute before:block before:bg-neutralFocusIndicator',
         classNames,
       )}
     >