@dxos/react-ui-list 0.6.12-main.ac23639 → 0.6.13-main.548ca8d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.6.12-main.ac23639",
+  "version": "0.6.13-main.548ca8d",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,10 +9,6 @@
   "exports": {
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
-      "node": {
-        "require": "./dist/lib/node/index.cjs",
-        "default": "./dist/lib/node-esm/index.mjs"
-      },
       "types": "./dist/types/src/index.d.ts"
     }
   },
@@ -31,14 +27,14 @@
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
     "@radix-ui/react-context": "^1.0.0",
     "effect": "^3.9.1",
-    "@dxos/debug": "0.6.12-main.ac23639",
-    "@dxos/echo-schema": "0.6.12-main.ac23639",
-    "@dxos/invariant": "0.6.12-main.ac23639",
-    "@dxos/log": "0.6.12-main.ac23639",
-    "@dxos/react-ui": "0.6.12-main.ac23639",
-    "@dxos/react-ui-theme": "0.6.12-main.ac23639",
-    "@dxos/react-ui-types": "0.6.12-main.ac23639",
-    "@dxos/util": "0.6.12-main.ac23639"
+    "@dxos/debug": "0.6.13-main.548ca8d",
+    "@dxos/invariant": "0.6.13-main.548ca8d",
+    "@dxos/echo-schema": "0.6.13-main.548ca8d",
+    "@dxos/react-ui": "0.6.13-main.548ca8d",
+    "@dxos/react-ui-types": "0.6.13-main.548ca8d",
+    "@dxos/react-ui-theme": "0.6.13-main.548ca8d",
+    "@dxos/log": "0.6.13-main.548ca8d",
+    "@dxos/util": "0.6.13-main.548ca8d"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -47,9 +43,9 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.6.12-main.ac23639",
-    "@dxos/react-ui-theme": "0.6.12-main.ac23639",
-    "@dxos/storybook-utils": "0.6.12-main.ac23639"
+    "@dxos/react-ui-theme": "0.6.13-main.548ca8d",
+    "@dxos/random": "0.6.13-main.548ca8d",
+    "@dxos/storybook-utils": "0.6.13-main.548ca8d"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",

package/src/components/List/List.stories.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 import { create, S } from '@dxos/echo-schema';
 import { ghostHover, mx } from '@dxos/react-ui-theme';
-import { withTheme, withLayout, withSignals } from '@dxos/storybook-utils';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { List, type ListRootProps } from './List';
 import { createList, TestItemSchema, type TestItemType } from '../../testing';
@@ -86,7 +86,7 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
 export default {
   // TODO(burdon): Storybook collides with react-ui/List.
   title: 'react-ui-list/List',
-  decorators: [withTheme, withSignals, withLayout({ fullscreen: true })],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
   render: Story,
 };
 

package/dist/lib/node/index.cjs

@@ -1,328 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  List: () => List
-});
-module.exports = __toCommonJS(node_exports);
-var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
-var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_set_custom_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
-var import_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
-var import_react_context = require("@radix-ui/react-context");
-var import_react = __toESM(require("react"));
-var import_react_dom = require("react-dom");
-var import_invariant = require("@dxos/invariant");
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_react2 = __toESM(require("react"));
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_closest_edge2 = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
-var import_reorder_with_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
-var import_react_context2 = require("@radix-ui/react-context");
-var import_react3 = __toESM(require("react"));
-var import_react_dom2 = require("react-dom");
-var import_react_ui2 = require("@dxos/react-ui");
-var edgeToOrientationMap = {
-  top: "horizontal",
-  bottom: "horizontal",
-  left: "vertical",
-  right: "vertical"
-};
-var orientationStyles = {
-  horizontal: "h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]",
-  vertical: "w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]"
-};
-var edgeStyles = {
-  top: "top-[--line-offset] before:top-[--offset-terminal]",
-  right: "right-[--line-offset] before:right-[--offset-terminal]",
-  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
-  left: "left-[--line-offset] before:left-[--offset-terminal]"
-};
-var strokeSize = 2;
-var terminalSize = 8;
-var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var DropIndicator = ({ edge, gap = "0px" }) => {
-  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;
-  const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
-    style: {
-      "--line-thickness": `${strokeSize}px`,
-      "--line-offset": `${lineOffset}`,
-      "--terminal-size": `${terminalSize}px`,
-      "--terminal-radius": `${terminalSize / 2}px`,
-      "--negative-terminal-size": `-${terminalSize}px`,
-      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
-    },
-    className: (0, import_react_ui_theme2.mx)("absolute z-10 pointer-events-none bg-blue-700", "before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute", "before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full", orientationStyles[orientation], edgeStyles[edge])
-  });
-};
-var LIST_NAME = "List";
-var [ListProvider, useListContext] = (0, import_react_context2.createContext)(LIST_NAME);
-var ListRoot = ({ classNames, children, items: _items = [], isItem, ...props }) => {
-  const [items, setItems] = (0, import_react_ui2.useControlledValue)(_items);
-  const [state, setState] = (0, import_react3.useState)(idle);
-  (0, import_react3.useEffect)(() => {
-    return (0, import_adapter2.monitorForElements)({
-      canMonitor: ({ source }) => isItem(source.data),
-      onDrop: ({ location, source }) => {
-        const target = location.current.dropTargets[0];
-        if (!target) {
-          return;
-        }
-        const sourceData = source.data;
-        const targetData = target.data;
-        if (!isItem(sourceData) || !isItem(targetData)) {
-          return;
-        }
-        const sourceIdx = items.findIndex((item) => item.id === sourceData.id);
-        const targetIdx = items.findIndex((item) => item.id === targetData.id);
-        if (targetIdx < 0 || sourceIdx < 0) {
-          return;
-        }
-        const closestEdgeOfTarget = (0, import_closest_edge2.extractClosestEdge)(targetData);
-        (0, import_react_dom2.flushSync)(() => {
-          setItems((0, import_reorder_with_edge.reorderWithEdge)({
-            list: items,
-            startIndex: sourceIdx,
-            indexOfTarget: targetIdx,
-            axis: "vertical",
-            closestEdgeOfTarget
-          }));
-        });
-      }
-    });
-  }, [
-    items
-  ]);
-  return /* @__PURE__ */ import_react3.default.createElement(ListProvider, {
-    isItem,
-    state,
-    setState,
-    ...props
-  }, children?.({
-    state,
-    items
-  }));
-};
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/List/ListItem.tsx";
-var idle = {
-  type: "idle"
-};
-var stateStyles = {
-  "is-dragging": "opacity-50"
-};
-var defaultContext = {};
-var LIST_ITEM_NAME = "ListItem";
-var [ListItemProvider, useListItemContext] = (0, import_react_context.createContext)(LIST_ITEM_NAME, defaultContext);
-var ListItem = ({ children, classNames, item }) => {
-  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
-  const ref = (0, import_react.useRef)(null);
-  const dragHandleRef = (0, import_react.useRef)(null);
-  const [state, setState] = (0, import_react.useState)(idle);
-  (0, import_react.useEffect)(() => {
-    const element = ref.current;
-    (0, import_invariant.invariant)(element, void 0, {
-      F: __dxlog_file,
-      L: 89,
-      S: void 0,
-      A: [
-        "element",
-        ""
-      ]
-    });
-    return (0, import_combine.combine)(
-      //
-      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
-      //
-      (0, import_adapter.draggable)({
-        element,
-        dragHandle: dragHandleRef.current,
-        getInitialData: () => item,
-        onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
-          const rect = source.element.getBoundingClientRect();
-          (0, import_set_custom_native_drag_preview.setCustomNativeDragPreview)({
-            nativeSetDragImage,
-            getOffset: ({ container }) => {
-              const { height } = container.getBoundingClientRect();
-              return {
-                x: 20,
-                y: height / 2
-              };
-            },
-            render: ({ container }) => {
-              container.style.width = rect.width + "px";
-              setState({
-                type: "preview",
-                container
-              });
-              setRootState({
-                type: "preview",
-                container,
-                item
-              });
-            }
-          });
-        } : void 0,
-        onDragStart: () => {
-          setState({
-            type: "is-dragging"
-          });
-          setRootState({
-            type: "is-dragging",
-            item
-          });
-        },
-        onDrop: () => {
-          setState(idle);
-          setRootState(idle);
-        }
-      }),
-      //
-      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements
-      //
-      (0, import_adapter.dropTargetForElements)({
-        element,
-        canDrop: ({ source }) => {
-          return source.element !== element && isItem(source.data);
-        },
-        getData: ({ input }) => {
-          return (0, import_closest_edge.attachClosestEdge)(item, {
-            element,
-            input,
-            allowedEdges: [
-              "top",
-              "bottom"
-            ]
-          });
-        },
-        getIsSticky: () => true,
-        onDragEnter: ({ self }) => {
-          const closestEdge = (0, import_closest_edge.extractClosestEdge)(self.data);
-          setState({
-            type: "is-dragging-over",
-            closestEdge
-          });
-        },
-        onDrag: ({ self }) => {
-          const closestEdge = (0, import_closest_edge.extractClosestEdge)(self.data);
-          setState((current) => {
-            if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
-              return current;
-            }
-            return {
-              type: "is-dragging-over",
-              closestEdge
-            };
-          });
-        },
-        onDragLeave: () => {
-          setState(idle);
-        },
-        onDrop: () => {
-          setState(idle);
-        }
-      })
-    );
-  }, [
-    item
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement(ListItemProvider, {
-    item,
-    dragHandleRef
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "relative"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    ref,
-    role: "listitem",
-    className: (0, import_react_ui_theme.mx)("flex", classNames, stateStyles[state.type])
-  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ import_react.default.createElement(DropIndicator, {
-    edge: state.closestEdge
-  })));
-};
-var IconButton = /* @__PURE__ */ (0, import_react.forwardRef)(({ classNames, icon, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react.default.createElement("button", {
-    ref: forwardedRef,
-    className: (0, import_react_ui_theme.mx)("flex items-center justify-center", classNames),
-    ...props
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
-    icon,
-    classNames: "cursor-pointer",
-    size: 4
-  }));
-});
-var ListItemDeleteButton = ({ autoHide = true, classNames, ...props }) => {
-  const { state } = useListContext("DELETE_BUTTON");
-  const disabled = state.type !== "idle";
-  return /* @__PURE__ */ import_react.default.createElement(IconButton, {
-    icon: "ph--x--regular",
-    disabled,
-    classNames: [
-      classNames,
-      autoHide && disabled && "hidden"
-    ],
-    ...props
-  });
-};
-var ListItemDragHandle = () => {
-  const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
-  return /* @__PURE__ */ import_react.default.createElement(IconButton, {
-    ref: dragHandleRef,
-    icon: "ph--dots-six--regular"
-  });
-};
-var ListItemDragPreview = ({ children }) => {
-  const { state } = useListContext("DRAG_PREVIEW");
-  return state?.type === "preview" ? /* @__PURE__ */ (0, import_react_dom.createPortal)(children({
-    item: state.item
-  }), state.container) : null;
-};
-var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ import_react.default.createElement("div", {
-  className: (0, import_react_ui_theme.mx)("flex w-full", classNames)
-}, children);
-var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ import_react.default.createElement("div", {
-  className: (0, import_react_ui_theme.mx)("flex w-full items-center", classNames),
-  ...props
-}, children);
-var List = {
-  Root: ListRoot,
-  Item: ListItem,
-  ItemDragPreview: ListItemDragPreview,
-  ItemWrapper: ListItemWrapper,
-  ItemDragHandle: ListItemDragHandle,
-  ItemDeleteButton: ListItemDeleteButton,
-  ItemTitle: ListItemTitle,
-  IconButton
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  List
-});
-//# sourceMappingURL=index.cjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/List/ListItem.tsx", "../../../src/components/List/DropIndicator.tsx", "../../../src/components/List/ListRoot.tsx", "../../../src/components/List/List.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, {\n  type ComponentProps,\n  type HTMLAttributes,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { invariant } from '@dxos/invariant';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { Icon } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { DropIndicator } from './DropIndicator';\nimport { useListContext } from './ListRoot';\n\nexport type ListItemRecord = { id: string };\n\nexport type ItemState =\n  | {\n      type: 'idle';\n    }\n  | {\n      type: 'preview';\n      container: HTMLElement;\n    }\n  | {\n      type: 'is-dragging';\n    }\n  | {\n      type: 'is-dragging-over';\n      closestEdge: Edge | null;\n    };\n\nexport const idle: ItemState = { type: 'idle' };\n\nconst stateStyles: { [Key in ItemState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {\n  'is-dragging': 'opacity-50',\n};\n\ntype ListItemContext<T extends ListItemRecord> = {\n  item: T;\n  dragHandleRef: MutableRefObject<HTMLElement | null>;\n};\n\n/**\n * Default context defined for ListItemDragPreview, which is defined outside of ListItem.\n */\nconst defaultContext: ListItemContext<any> = {} as any;\n\nconst LIST_ITEM_NAME = 'ListItem';\n\nexport const [ListItemProvider, useListItemContext] = createContext<ListItemContext<any>>(\n  LIST_ITEM_NAME,\n  defaultContext,\n);\n\nexport type ListItemProps<T extends ListItemRecord> = ThemedClassName<\n  PropsWithChildren<{\n    item: T;\n  }>\n>;\n\n/**\n * Draggable list item.\n */\nexport const ListItem = <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => {\n  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const dragHandleRef = useRef<HTMLElement | null>(null);\n  const [state, setState] = useState<ItemState>(idle);\n  useEffect(() => {\n    const element = ref.current;\n    invariant(element);\n    return combine(\n      //\n      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable\n      //\n      draggable({\n        element,\n        dragHandle: dragHandleRef.current!,\n        getInitialData: () => item,\n        onGenerateDragPreview: dragPreview\n          ? ({ nativeSetDragImage, source }) => {\n              const rect = source.element.getBoundingClientRect();\n              setCustomNativeDragPreview({\n                nativeSetDragImage,\n                getOffset: ({ container }) => {\n                  const { height } = container.getBoundingClientRect();\n                  return {\n                    x: 20,\n                    y: height / 2,\n                  };\n                },\n                render: ({ container }) => {\n                  container.style.width = rect.width + 'px';\n                  setState({ type: 'preview', container });\n                  setRootState({ type: 'preview', container, item });\n                },\n              });\n            }\n          : undefined,\n        onDragStart: () => {\n          setState({ type: 'is-dragging' });\n          setRootState({ type: 'is-dragging', item });\n        },\n        onDrop: () => {\n          setState(idle);\n          setRootState(idle);\n        },\n      }),\n\n      //\n      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements\n      //\n      dropTargetForElements({\n        element,\n        canDrop: ({ source }) => {\n          return source.element !== element && isItem(source.data);\n        },\n        getData: ({ input }) => {\n          return attachClosestEdge(item, { element, input, allowedEdges: ['top', 'bottom'] });\n        },\n        getIsSticky: () => true,\n        onDragEnter: ({ self }) => {\n          const closestEdge = extractClosestEdge(self.data);\n          setState({ type: 'is-dragging-over', closestEdge });\n        },\n        onDrag: ({ self }) => {\n          const closestEdge = extractClosestEdge(self.data);\n          setState((current) => {\n            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n              return current;\n            }\n            return { type: 'is-dragging-over', closestEdge };\n          });\n        },\n        onDragLeave: () => {\n          setState(idle);\n        },\n        onDrop: () => {\n          setState(idle);\n        },\n      }),\n    );\n  }, [item]);\n\n  return (\n    <ListItemProvider item={item} dragHandleRef={dragHandleRef}>\n      <div className='relative'>\n        <div ref={ref} role='listitem' className={mx('flex', classNames, stateStyles[state.type])}>\n          {children}\n        </div>\n        {state.type === 'is-dragging-over' && state.closestEdge && <DropIndicator edge={state.closestEdge} />}\n      </div>\n    </ListItemProvider>\n  );\n};\n\n//\n// List item components\n//\n\nexport type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & { icon: string };\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ classNames, icon, ...props }, forwardedRef) => {\n    return (\n      <button ref={forwardedRef} className={mx('flex items-center justify-center', classNames)} {...props}>\n        <Icon icon={icon} classNames='cursor-pointer' size={4} />\n      </button>\n    );\n  },\n);\n\nexport const ListItemDeleteButton = ({\n  autoHide = true,\n  classNames,\n  ...props\n}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {\n  const { state } = useListContext('DELETE_BUTTON');\n  const disabled = state.type !== 'idle';\n  return (\n    <IconButton\n      icon='ph--x--regular'\n      disabled={disabled}\n      classNames={[classNames, autoHide && disabled && 'hidden']}\n      {...props}\n    />\n  );\n};\n\nexport const ListItemDragHandle = () => {\n  const { dragHandleRef } = useListItemContext('DRAG_HANDLE');\n  return <IconButton ref={dragHandleRef as any} icon='ph--dots-six--regular' />;\n};\n\nexport const ListItemDragPreview = <T extends ListItemRecord>({\n  children,\n}: {\n  children: ({ item }: { item: T }) => ReactNode;\n}) => {\n  const { state } = useListContext('DRAG_PREVIEW');\n  return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;\n};\n\nexport const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (\n  <div className={mx('flex w-full', classNames)}>{children}</div>\n);\n\nexport const ListItemTitle = ({\n  classNames,\n  children,\n  ...props\n}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (\n  <div className={mx('flex w-full items-center', classNames)} {...props}>\n    {children}\n  </div>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';\nimport React, { type CSSProperties, type HTMLAttributes } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst edgeToOrientationMap: Record<Edge, Orientation> = {\n  top: 'horizontal',\n  bottom: 'horizontal',\n  left: 'vertical',\n  right: 'vertical',\n};\n\nconst orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {\n  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',\n  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',\n};\n\nconst edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {\n  top: 'top-[--line-offset] before:top-[--offset-terminal]',\n  right: 'right-[--line-offset] before:right-[--offset-terminal]',\n  bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',\n  left: 'left-[--line-offset] before:left-[--offset-terminal]',\n};\n\nconst strokeSize = 2;\nconst terminalSize = 8;\nconst offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;\n\n/**\n * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`\n */\nexport const DropIndicator = ({ edge, gap = '0px' }: { edge: Edge; gap?: string }) => {\n  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;\n\n  const orientation = edgeToOrientationMap[edge];\n\n  return (\n    <div\n      style={\n        {\n          '--line-thickness': `${strokeSize}px`,\n          '--line-offset': `${lineOffset}`,\n          '--terminal-size': `${terminalSize}px`,\n          '--terminal-radius': `${terminalSize / 2}px`,\n          '--negative-terminal-size': `-${terminalSize}px`,\n          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,\n        } as CSSProperties\n      }\n      className={mx(\n        'absolute z-10 pointer-events-none bg-blue-700',\n        \"before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute\",\n        'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',\n        orientationStyles[orientation],\n        edgeStyles[edge],\n      )}\n    ></div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type ReactNode, useEffect, useState } from 'react';\nimport { flushSync } from 'react-dom';\n\nimport { type ThemedClassName, useControlledValue } from '@dxos/react-ui';\n\nimport { type ListItemRecord, idle, type ItemState } from './ListItem';\n\ntype ListContext<T extends ListItemRecord> = {\n  isItem: (item: any) => boolean;\n  dragPreview?: boolean;\n  state: ItemState & { item?: T };\n  setState: (state: ItemState & { item?: T }) => void;\n};\n\nconst LIST_NAME = 'List';\n\nexport const [ListProvider, useListContext] = createContext<ListContext<any>>(LIST_NAME);\n\nexport type ListRendererProps<T extends ListItemRecord> = {\n  state: ListContext<T>['state'];\n  items: T[];\n};\n\nexport type ListRootProps<T extends ListItemRecord> = ThemedClassName<{\n  children?: (props: ListRendererProps<T>) => ReactNode;\n  items?: T[];\n}> &\n  Pick<ListContext<T>, 'isItem' | 'dragPreview'>;\n\nexport const ListRoot = <T extends ListItemRecord>({\n  classNames,\n  children,\n  items: _items = [],\n  isItem,\n  ...props\n}: ListRootProps<T>) => {\n  const [items, setItems] = useControlledValue<T[]>(_items);\n  const [state, setState] = useState<ListContext<T>['state']>(idle);\n  useEffect(() => {\n    return monitorForElements({\n      canMonitor: ({ source }) => isItem(source.data),\n      onDrop: ({ location, source }) => {\n        const target = location.current.dropTargets[0];\n        if (!target) {\n          return;\n        }\n\n        const sourceData = source.data;\n        const targetData = target.data;\n        if (!isItem(sourceData) || !isItem(targetData)) {\n          return;\n        }\n\n        const sourceIdx = items.findIndex((item) => item.id === sourceData.id);\n        const targetIdx = items.findIndex((item) => item.id === targetData.id);\n        if (targetIdx < 0 || sourceIdx < 0) {\n          return;\n        }\n\n        const closestEdgeOfTarget = extractClosestEdge(targetData);\n        flushSync(() => {\n          setItems(\n            reorderWithEdge({\n              list: items,\n              startIndex: sourceIdx,\n              indexOfTarget: targetIdx,\n              axis: 'vertical',\n              closestEdgeOfTarget,\n            }),\n          );\n        });\n      },\n    });\n  }, [items]);\n\n  return <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items })}</ListProvider>;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  IconButton,\n  type IconButtonProps,\n  ListItem,\n  ListItemDeleteButton,\n  ListItemDragHandle,\n  ListItemDragPreview,\n  type ListItemProps,\n  type ListItemRecord,\n  ListItemTitle,\n  ListItemWrapper,\n} from './ListItem';\nimport { ListRoot, type ListRootProps } from './ListRoot';\n\n// TODO(burdon): Multi-select model.\n// TODO(burdon): Key nav.\n// TODO(burdon): Animation.\n// TODO(burdon): Constrain axis.\n// TODO(burdon): Tree view.\n// TODO(burdon): Fix autoscroll while dragging.\n\n/**\n * Draggable list.\n * Ref: https://github.com/atlassian/pragmatic-drag-and-drop\n * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx\n */\nexport const List = {\n  Root: ListRoot,\n  Item: ListItem,\n  ItemDragPreview: ListItemDragPreview,\n  ItemWrapper: ListItemWrapper,\n  ItemDragHandle: ListItemDragHandle,\n  ItemDeleteButton: ListItemDeleteButton,\n  ItemTitle: ListItemTitle,\n  IconButton,\n};\n\ntype ListItem = ListItemRecord;\n\nexport type { ListRootProps, ListItemProps, IconButtonProps, ListItem };\n"],
-  "mappings": "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",
-  "names": ["import_react", "import_react_ui_theme", "import_adapter", "import_closest_edge", "import_react_context", "import_react_dom", "import_react_ui", "edgeToOrientationMap", "top", "bottom", "left", "right", "orientationStyles", "horizontal", "vertical", "edgeStyles", "strokeSize", "terminalSize", "offsetToAlignTerminalWithLine", "DropIndicator", "edge", "gap", "lineOffset", "orientation", "React", "div", "style", "className", "mx", "LIST_NAME", "ListProvider", "useListContext", "createContext", "ListRoot", "classNames", "children", "items", "_items", "isItem", "props", "setItems", "useControlledValue", "state", "setState", "useState", "idle", "useEffect", "monitorForElements", "canMonitor", "source", "data", "onDrop", "location", "target", "current", "dropTargets", "sourceData", "targetData", "sourceIdx", "findIndex", "item", "id", "targetIdx", "closestEdgeOfTarget", "extractClosestEdge", "flushSync", "reorderWithEdge", "list", "startIndex", "indexOfTarget", "axis", "type", "stateStyles", "defaultContext", "LIST_ITEM_NAME", "ListItemProvider", "useListItemContext", "ListItem", "dragPreview", "setRootState", "ref", "useRef", "dragHandleRef", "element", "invariant", "combine", "draggable", "dragHandle", "getInitialData", "onGenerateDragPreview", "nativeSetDragImage", "rect", "getBoundingClientRect", "setCustomNativeDragPreview", "getOffset", "container", "height", "x", "y", "render", "width", "undefined", "onDragStart", "dropTargetForElements", "canDrop", "getData", "input", "attachClosestEdge", "allowedEdges", "getIsSticky", "onDragEnter", "self", "closestEdge", "onDrag", "onDragLeave", "role", "IconButton", "forwardRef", "icon", "forwardedRef", "button", "Icon", "size", "ListItemDeleteButton", "autoHide", "disabled", "ListItemDragHandle", "ListItemDragPreview", "createPortal", "ListItemWrapper", "ListItemTitle", "List", "Root", "Item", "ItemDragPreview", "ItemWrapper", "ItemDragHandle", "ItemDeleteButton", "ItemTitle"]
-}

package/dist/lib/node/meta.json

@@ -1 +0,0 @@
-{"inputs":{"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytes":6988,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":8857,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":24071,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","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/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","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-list/src/components/List/DropIndicator.tsx","kind":"import-statement","original":"./DropIndicator"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":500,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":503,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":22106},"packages/ui/react-ui-list/dist/lib/node/index.cjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","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/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["List"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6314},"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytesInOutput":1702},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":1927},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0}},"bytes":10557}}}

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

@@ -1,305 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-
-// packages/ui/react-ui-list/src/components/List/ListItem.tsx
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
-import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { createContext as createContext2 } from "@radix-ui/react-context";
-import React3, { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
-import { createPortal } from "react-dom";
-import { invariant } from "@dxos/invariant";
-import { Icon } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-list/src/components/List/DropIndicator.tsx
-import React from "react";
-import { mx } from "@dxos/react-ui-theme";
-var edgeToOrientationMap = {
-  top: "horizontal",
-  bottom: "horizontal",
-  left: "vertical",
-  right: "vertical"
-};
-var orientationStyles = {
-  horizontal: "h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]",
-  vertical: "w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]"
-};
-var edgeStyles = {
-  top: "top-[--line-offset] before:top-[--offset-terminal]",
-  right: "right-[--line-offset] before:right-[--offset-terminal]",
-  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
-  left: "left-[--line-offset] before:left-[--offset-terminal]"
-};
-var strokeSize = 2;
-var terminalSize = 8;
-var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var DropIndicator = ({ edge, gap = "0px" }) => {
-  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;
-  const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ React.createElement("div", {
-    style: {
-      "--line-thickness": `${strokeSize}px`,
-      "--line-offset": `${lineOffset}`,
-      "--terminal-size": `${terminalSize}px`,
-      "--terminal-radius": `${terminalSize / 2}px`,
-      "--negative-terminal-size": `-${terminalSize}px`,
-      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
-    },
-    className: mx("absolute z-10 pointer-events-none bg-blue-700", "before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute", "before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full", orientationStyles[orientation], edgeStyles[edge])
-  });
-};
-
-// packages/ui/react-ui-list/src/components/List/ListRoot.tsx
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { reorderWithEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge";
-import { createContext } from "@radix-ui/react-context";
-import React2, { useEffect, useState } from "react";
-import { flushSync } from "react-dom";
-import { useControlledValue } from "@dxos/react-ui";
-var LIST_NAME = "List";
-var [ListProvider, useListContext] = createContext(LIST_NAME);
-var ListRoot = ({ classNames, children, items: _items = [], isItem, ...props }) => {
-  const [items, setItems] = useControlledValue(_items);
-  const [state, setState] = useState(idle);
-  useEffect(() => {
-    return monitorForElements({
-      canMonitor: ({ source }) => isItem(source.data),
-      onDrop: ({ location, source }) => {
-        const target = location.current.dropTargets[0];
-        if (!target) {
-          return;
-        }
-        const sourceData = source.data;
-        const targetData = target.data;
-        if (!isItem(sourceData) || !isItem(targetData)) {
-          return;
-        }
-        const sourceIdx = items.findIndex((item) => item.id === sourceData.id);
-        const targetIdx = items.findIndex((item) => item.id === targetData.id);
-        if (targetIdx < 0 || sourceIdx < 0) {
-          return;
-        }
-        const closestEdgeOfTarget = extractClosestEdge(targetData);
-        flushSync(() => {
-          setItems(reorderWithEdge({
-            list: items,
-            startIndex: sourceIdx,
-            indexOfTarget: targetIdx,
-            axis: "vertical",
-            closestEdgeOfTarget
-          }));
-        });
-      }
-    });
-  }, [
-    items
-  ]);
-  return /* @__PURE__ */ React2.createElement(ListProvider, {
-    isItem,
-    state,
-    setState,
-    ...props
-  }, children?.({
-    state,
-    items
-  }));
-};
-
-// packages/ui/react-ui-list/src/components/List/ListItem.tsx
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/List/ListItem.tsx";
-var idle = {
-  type: "idle"
-};
-var stateStyles = {
-  "is-dragging": "opacity-50"
-};
-var defaultContext = {};
-var LIST_ITEM_NAME = "ListItem";
-var [ListItemProvider, useListItemContext] = createContext2(LIST_ITEM_NAME, defaultContext);
-var ListItem = ({ children, classNames, item }) => {
-  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
-  const ref = useRef(null);
-  const dragHandleRef = useRef(null);
-  const [state, setState] = useState2(idle);
-  useEffect2(() => {
-    const element = ref.current;
-    invariant(element, void 0, {
-      F: __dxlog_file,
-      L: 89,
-      S: void 0,
-      A: [
-        "element",
-        ""
-      ]
-    });
-    return combine(
-      //
-      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
-      //
-      draggable({
-        element,
-        dragHandle: dragHandleRef.current,
-        getInitialData: () => item,
-        onGenerateDragPreview: dragPreview ? ({ nativeSetDragImage, source }) => {
-          const rect = source.element.getBoundingClientRect();
-          setCustomNativeDragPreview({
-            nativeSetDragImage,
-            getOffset: ({ container }) => {
-              const { height } = container.getBoundingClientRect();
-              return {
-                x: 20,
-                y: height / 2
-              };
-            },
-            render: ({ container }) => {
-              container.style.width = rect.width + "px";
-              setState({
-                type: "preview",
-                container
-              });
-              setRootState({
-                type: "preview",
-                container,
-                item
-              });
-            }
-          });
-        } : void 0,
-        onDragStart: () => {
-          setState({
-            type: "is-dragging"
-          });
-          setRootState({
-            type: "is-dragging",
-            item
-          });
-        },
-        onDrop: () => {
-          setState(idle);
-          setRootState(idle);
-        }
-      }),
-      //
-      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements
-      //
-      dropTargetForElements({
-        element,
-        canDrop: ({ source }) => {
-          return source.element !== element && isItem(source.data);
-        },
-        getData: ({ input }) => {
-          return attachClosestEdge(item, {
-            element,
-            input,
-            allowedEdges: [
-              "top",
-              "bottom"
-            ]
-          });
-        },
-        getIsSticky: () => true,
-        onDragEnter: ({ self }) => {
-          const closestEdge = extractClosestEdge2(self.data);
-          setState({
-            type: "is-dragging-over",
-            closestEdge
-          });
-        },
-        onDrag: ({ self }) => {
-          const closestEdge = extractClosestEdge2(self.data);
-          setState((current) => {
-            if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
-              return current;
-            }
-            return {
-              type: "is-dragging-over",
-              closestEdge
-            };
-          });
-        },
-        onDragLeave: () => {
-          setState(idle);
-        },
-        onDrop: () => {
-          setState(idle);
-        }
-      })
-    );
-  }, [
-    item
-  ]);
-  return /* @__PURE__ */ React3.createElement(ListItemProvider, {
-    item,
-    dragHandleRef
-  }, /* @__PURE__ */ React3.createElement("div", {
-    className: "relative"
-  }, /* @__PURE__ */ React3.createElement("div", {
-    ref,
-    role: "listitem",
-    className: mx2("flex", classNames, stateStyles[state.type])
-  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React3.createElement(DropIndicator, {
-    edge: state.closestEdge
-  })));
-};
-var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React3.createElement("button", {
-    ref: forwardedRef,
-    className: mx2("flex items-center justify-center", classNames),
-    ...props
-  }, /* @__PURE__ */ React3.createElement(Icon, {
-    icon,
-    classNames: "cursor-pointer",
-    size: 4
-  }));
-});
-var ListItemDeleteButton = ({ autoHide = true, classNames, ...props }) => {
-  const { state } = useListContext("DELETE_BUTTON");
-  const disabled = state.type !== "idle";
-  return /* @__PURE__ */ React3.createElement(IconButton, {
-    icon: "ph--x--regular",
-    disabled,
-    classNames: [
-      classNames,
-      autoHide && disabled && "hidden"
-    ],
-    ...props
-  });
-};
-var ListItemDragHandle = () => {
-  const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
-  return /* @__PURE__ */ React3.createElement(IconButton, {
-    ref: dragHandleRef,
-    icon: "ph--dots-six--regular"
-  });
-};
-var ListItemDragPreview = ({ children }) => {
-  const { state } = useListContext("DRAG_PREVIEW");
-  return state?.type === "preview" ? /* @__PURE__ */ createPortal(children({
-    item: state.item
-  }), state.container) : null;
-};
-var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React3.createElement("div", {
-  className: mx2("flex w-full", classNames)
-}, children);
-var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React3.createElement("div", {
-  className: mx2("flex w-full items-center", classNames),
-  ...props
-}, children);
-
-// packages/ui/react-ui-list/src/components/List/List.tsx
-var List = {
-  Root: ListRoot,
-  Item: ListItem,
-  ItemDragPreview: ListItemDragPreview,
-  ItemWrapper: ListItemWrapper,
-  ItemDragHandle: ListItemDragHandle,
-  ItemDeleteButton: ListItemDeleteButton,
-  ItemTitle: ListItemTitle,
-  IconButton
-};
-export {
-  List
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/List/ListItem.tsx", "../../../src/components/List/DropIndicator.tsx", "../../../src/components/List/ListRoot.tsx", "../../../src/components/List/List.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, {\n  type ComponentProps,\n  type HTMLAttributes,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { invariant } from '@dxos/invariant';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { Icon } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { DropIndicator } from './DropIndicator';\nimport { useListContext } from './ListRoot';\n\nexport type ListItemRecord = { id: string };\n\nexport type ItemState =\n  | {\n      type: 'idle';\n    }\n  | {\n      type: 'preview';\n      container: HTMLElement;\n    }\n  | {\n      type: 'is-dragging';\n    }\n  | {\n      type: 'is-dragging-over';\n      closestEdge: Edge | null;\n    };\n\nexport const idle: ItemState = { type: 'idle' };\n\nconst stateStyles: { [Key in ItemState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {\n  'is-dragging': 'opacity-50',\n};\n\ntype ListItemContext<T extends ListItemRecord> = {\n  item: T;\n  dragHandleRef: MutableRefObject<HTMLElement | null>;\n};\n\n/**\n * Default context defined for ListItemDragPreview, which is defined outside of ListItem.\n */\nconst defaultContext: ListItemContext<any> = {} as any;\n\nconst LIST_ITEM_NAME = 'ListItem';\n\nexport const [ListItemProvider, useListItemContext] = createContext<ListItemContext<any>>(\n  LIST_ITEM_NAME,\n  defaultContext,\n);\n\nexport type ListItemProps<T extends ListItemRecord> = ThemedClassName<\n  PropsWithChildren<{\n    item: T;\n  }>\n>;\n\n/**\n * Draggable list item.\n */\nexport const ListItem = <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => {\n  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const dragHandleRef = useRef<HTMLElement | null>(null);\n  const [state, setState] = useState<ItemState>(idle);\n  useEffect(() => {\n    const element = ref.current;\n    invariant(element);\n    return combine(\n      //\n      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable\n      //\n      draggable({\n        element,\n        dragHandle: dragHandleRef.current!,\n        getInitialData: () => item,\n        onGenerateDragPreview: dragPreview\n          ? ({ nativeSetDragImage, source }) => {\n              const rect = source.element.getBoundingClientRect();\n              setCustomNativeDragPreview({\n                nativeSetDragImage,\n                getOffset: ({ container }) => {\n                  const { height } = container.getBoundingClientRect();\n                  return {\n                    x: 20,\n                    y: height / 2,\n                  };\n                },\n                render: ({ container }) => {\n                  container.style.width = rect.width + 'px';\n                  setState({ type: 'preview', container });\n                  setRootState({ type: 'preview', container, item });\n                },\n              });\n            }\n          : undefined,\n        onDragStart: () => {\n          setState({ type: 'is-dragging' });\n          setRootState({ type: 'is-dragging', item });\n        },\n        onDrop: () => {\n          setState(idle);\n          setRootState(idle);\n        },\n      }),\n\n      //\n      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements\n      //\n      dropTargetForElements({\n        element,\n        canDrop: ({ source }) => {\n          return source.element !== element && isItem(source.data);\n        },\n        getData: ({ input }) => {\n          return attachClosestEdge(item, { element, input, allowedEdges: ['top', 'bottom'] });\n        },\n        getIsSticky: () => true,\n        onDragEnter: ({ self }) => {\n          const closestEdge = extractClosestEdge(self.data);\n          setState({ type: 'is-dragging-over', closestEdge });\n        },\n        onDrag: ({ self }) => {\n          const closestEdge = extractClosestEdge(self.data);\n          setState((current) => {\n            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {\n              return current;\n            }\n            return { type: 'is-dragging-over', closestEdge };\n          });\n        },\n        onDragLeave: () => {\n          setState(idle);\n        },\n        onDrop: () => {\n          setState(idle);\n        },\n      }),\n    );\n  }, [item]);\n\n  return (\n    <ListItemProvider item={item} dragHandleRef={dragHandleRef}>\n      <div className='relative'>\n        <div ref={ref} role='listitem' className={mx('flex', classNames, stateStyles[state.type])}>\n          {children}\n        </div>\n        {state.type === 'is-dragging-over' && state.closestEdge && <DropIndicator edge={state.closestEdge} />}\n      </div>\n    </ListItemProvider>\n  );\n};\n\n//\n// List item components\n//\n\nexport type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & { icon: string };\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ classNames, icon, ...props }, forwardedRef) => {\n    return (\n      <button ref={forwardedRef} className={mx('flex items-center justify-center', classNames)} {...props}>\n        <Icon icon={icon} classNames='cursor-pointer' size={4} />\n      </button>\n    );\n  },\n);\n\nexport const ListItemDeleteButton = ({\n  autoHide = true,\n  classNames,\n  ...props\n}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {\n  const { state } = useListContext('DELETE_BUTTON');\n  const disabled = state.type !== 'idle';\n  return (\n    <IconButton\n      icon='ph--x--regular'\n      disabled={disabled}\n      classNames={[classNames, autoHide && disabled && 'hidden']}\n      {...props}\n    />\n  );\n};\n\nexport const ListItemDragHandle = () => {\n  const { dragHandleRef } = useListItemContext('DRAG_HANDLE');\n  return <IconButton ref={dragHandleRef as any} icon='ph--dots-six--regular' />;\n};\n\nexport const ListItemDragPreview = <T extends ListItemRecord>({\n  children,\n}: {\n  children: ({ item }: { item: T }) => ReactNode;\n}) => {\n  const { state } = useListContext('DRAG_PREVIEW');\n  return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;\n};\n\nexport const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (\n  <div className={mx('flex w-full', classNames)}>{children}</div>\n);\n\nexport const ListItemTitle = ({\n  classNames,\n  children,\n  ...props\n}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (\n  <div className={mx('flex w-full items-center', classNames)} {...props}>\n    {children}\n  </div>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';\nimport React, { type CSSProperties, type HTMLAttributes } from 'react';\n\nimport { mx } from '@dxos/react-ui-theme';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst edgeToOrientationMap: Record<Edge, Orientation> = {\n  top: 'horizontal',\n  bottom: 'horizontal',\n  left: 'vertical',\n  right: 'vertical',\n};\n\nconst orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {\n  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',\n  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',\n};\n\nconst edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {\n  top: 'top-[--line-offset] before:top-[--offset-terminal]',\n  right: 'right-[--line-offset] before:right-[--offset-terminal]',\n  bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',\n  left: 'left-[--line-offset] before:left-[--offset-terminal]',\n};\n\nconst strokeSize = 2;\nconst terminalSize = 8;\nconst offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;\n\n/**\n * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`\n */\nexport const DropIndicator = ({ edge, gap = '0px' }: { edge: Edge; gap?: string }) => {\n  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;\n\n  const orientation = edgeToOrientationMap[edge];\n\n  return (\n    <div\n      style={\n        {\n          '--line-thickness': `${strokeSize}px`,\n          '--line-offset': `${lineOffset}`,\n          '--terminal-size': `${terminalSize}px`,\n          '--terminal-radius': `${terminalSize / 2}px`,\n          '--negative-terminal-size': `-${terminalSize}px`,\n          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,\n        } as CSSProperties\n      }\n      className={mx(\n        'absolute z-10 pointer-events-none bg-blue-700',\n        \"before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute\",\n        'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',\n        orientationStyles[orientation],\n        edgeStyles[edge],\n      )}\n    ></div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type ReactNode, useEffect, useState } from 'react';\nimport { flushSync } from 'react-dom';\n\nimport { type ThemedClassName, useControlledValue } from '@dxos/react-ui';\n\nimport { type ListItemRecord, idle, type ItemState } from './ListItem';\n\ntype ListContext<T extends ListItemRecord> = {\n  isItem: (item: any) => boolean;\n  dragPreview?: boolean;\n  state: ItemState & { item?: T };\n  setState: (state: ItemState & { item?: T }) => void;\n};\n\nconst LIST_NAME = 'List';\n\nexport const [ListProvider, useListContext] = createContext<ListContext<any>>(LIST_NAME);\n\nexport type ListRendererProps<T extends ListItemRecord> = {\n  state: ListContext<T>['state'];\n  items: T[];\n};\n\nexport type ListRootProps<T extends ListItemRecord> = ThemedClassName<{\n  children?: (props: ListRendererProps<T>) => ReactNode;\n  items?: T[];\n}> &\n  Pick<ListContext<T>, 'isItem' | 'dragPreview'>;\n\nexport const ListRoot = <T extends ListItemRecord>({\n  classNames,\n  children,\n  items: _items = [],\n  isItem,\n  ...props\n}: ListRootProps<T>) => {\n  const [items, setItems] = useControlledValue<T[]>(_items);\n  const [state, setState] = useState<ListContext<T>['state']>(idle);\n  useEffect(() => {\n    return monitorForElements({\n      canMonitor: ({ source }) => isItem(source.data),\n      onDrop: ({ location, source }) => {\n        const target = location.current.dropTargets[0];\n        if (!target) {\n          return;\n        }\n\n        const sourceData = source.data;\n        const targetData = target.data;\n        if (!isItem(sourceData) || !isItem(targetData)) {\n          return;\n        }\n\n        const sourceIdx = items.findIndex((item) => item.id === sourceData.id);\n        const targetIdx = items.findIndex((item) => item.id === targetData.id);\n        if (targetIdx < 0 || sourceIdx < 0) {\n          return;\n        }\n\n        const closestEdgeOfTarget = extractClosestEdge(targetData);\n        flushSync(() => {\n          setItems(\n            reorderWithEdge({\n              list: items,\n              startIndex: sourceIdx,\n              indexOfTarget: targetIdx,\n              axis: 'vertical',\n              closestEdgeOfTarget,\n            }),\n          );\n        });\n      },\n    });\n  }, [items]);\n\n  return <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items })}</ListProvider>;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  IconButton,\n  type IconButtonProps,\n  ListItem,\n  ListItemDeleteButton,\n  ListItemDragHandle,\n  ListItemDragPreview,\n  type ListItemProps,\n  type ListItemRecord,\n  ListItemTitle,\n  ListItemWrapper,\n} from './ListItem';\nimport { ListRoot, type ListRootProps } from './ListRoot';\n\n// TODO(burdon): Multi-select model.\n// TODO(burdon): Key nav.\n// TODO(burdon): Animation.\n// TODO(burdon): Constrain axis.\n// TODO(burdon): Tree view.\n// TODO(burdon): Fix autoscroll while dragging.\n\n/**\n * Draggable list.\n * Ref: https://github.com/atlassian/pragmatic-drag-and-drop\n * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx\n */\nexport const List = {\n  Root: ListRoot,\n  Item: ListItem,\n  ItemDragPreview: ListItemDragPreview,\n  ItemWrapper: ListItemWrapper,\n  ItemDragHandle: ListItemDragHandle,\n  ItemDeleteButton: ListItemDeleteButton,\n  ItemTitle: ListItemTitle,\n  IconButton,\n};\n\ntype ListItem = ListItemRecord;\n\nexport type { ListRootProps, ListItemProps, IconButtonProps, ListItem };\n"],
-  "mappings": "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",
-  "names": ["combine", "draggable", "dropTargetForElements", "setCustomNativeDragPreview", "attachClosestEdge", "extractClosestEdge", "createContext", "React", "forwardRef", "useEffect", "useRef", "useState", "createPortal", "invariant", "Icon", "mx", "React", "mx", "edgeToOrientationMap", "top", "bottom", "left", "right", "orientationStyles", "horizontal", "vertical", "edgeStyles", "strokeSize", "terminalSize", "offsetToAlignTerminalWithLine", "DropIndicator", "edge", "gap", "lineOffset", "orientation", "div", "style", "className", "mx", "monitorForElements", "extractClosestEdge", "reorderWithEdge", "createContext", "React", "useEffect", "useState", "flushSync", "useControlledValue", "LIST_NAME", "ListProvider", "useListContext", "createContext", "ListRoot", "classNames", "children", "items", "_items", "isItem", "props", "setItems", "useControlledValue", "state", "setState", "useState", "idle", "useEffect", "monitorForElements", "canMonitor", "source", "data", "onDrop", "location", "target", "current", "dropTargets", "sourceData", "targetData", "sourceIdx", "findIndex", "item", "id", "targetIdx", "closestEdgeOfTarget", "extractClosestEdge", "flushSync", "reorderWithEdge", "list", "startIndex", "indexOfTarget", "axis", "React", "idle", "type", "stateStyles", "defaultContext", "LIST_ITEM_NAME", "ListItemProvider", "useListItemContext", "createContext", "ListItem", "children", "classNames", "item", "isItem", "dragPreview", "setState", "setRootState", "useListContext", "ref", "useRef", "dragHandleRef", "state", "useState", "useEffect", "element", "current", "invariant", "combine", "draggable", "dragHandle", "getInitialData", "onGenerateDragPreview", "nativeSetDragImage", "source", "rect", "getBoundingClientRect", "setCustomNativeDragPreview", "getOffset", "container", "height", "x", "y", "render", "style", "width", "undefined", "onDragStart", "onDrop", "dropTargetForElements", "canDrop", "data", "getData", "input", "attachClosestEdge", "allowedEdges", "getIsSticky", "onDragEnter", "self", "closestEdge", "extractClosestEdge", "onDrag", "onDragLeave", "React", "div", "className", "role", "mx", "DropIndicator", "edge", "IconButton", "forwardRef", "icon", "props", "forwardedRef", "button", "Icon", "size", "ListItemDeleteButton", "autoHide", "disabled", "ListItemDragHandle", "ListItemDragPreview", "createPortal", "ListItemWrapper", "ListItemTitle", "List", "Root", "ListRoot", "Item", "ListItem", "ItemDragPreview", "ListItemDragPreview", "ItemWrapper", "ListItemWrapper", "ItemDragHandle", "ListItemDragHandle", "ItemDeleteButton", "ListItemDeleteButton", "ItemTitle", "ListItemTitle", "IconButton"]
-}

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

@@ -1 +0,0 @@
-{"inputs":{"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytes":6988,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":8857,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":24071,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","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/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","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-list/src/components/List/DropIndicator.tsx","kind":"import-statement","original":"./DropIndicator"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":500,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":503,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":22108},"packages/ui/react-ui-list/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","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/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["List"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6314},"packages/ui/react-ui-list/src/components/List/DropIndicator.tsx":{"bytesInOutput":1702},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":1927},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0}},"bytes":10650}}}