@dxos/react-ui-mosaic 0.7.5-main.ff8607b → 0.8.4-main.69d29f4

package/dist/lib/browser/chunk-4VDZJ3HV.mjs

@@ -0,0 +1,1639 @@
+// src/components/Card/styles.ts
+var styles = {
+  root: "group/card relative min-bs-[--rail-item] overflow-hidden is-full card-min-width __card-max-width",
+  border: "bg-cardSurface border border-separator dark:border-subduedSeparator rounded-sm dx-focus-ring-group-y-indicator",
+  /**
+  * Row grid.
+  * NOTE: Rows should provide their own line padding (since they may need to encapsulate buttons, etc.)
+  */
+  grid_3: "grid grid-cols-[var(--rail-item)_minmax(0,1fr)_var(--rail-item)] gap-x-1",
+  grid_2: "grid grid-cols-[var(--rail-item)_minmax(0,1fr)] gap-x-1",
+  // TODO(burdon): Address density.
+  grid_3_coarse: "grid grid-cols-[var(--l0-avatar-size)_minmax(0,1fr)_var(--rail-item)] gap-x-1",
+  poster: "max-bs-[200px]"
+};
+
+// src/components/Image/Image.tsx
+import React, { useCallback, useRef, useState } from "react";
+import { mx } from "@dxos/ui-theme";
+var cache = /* @__PURE__ */ new Map();
+var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize = 64, contrast = 0.9 }) => {
+  const [crossOriginState, setCrossOriginState] = useState(crossOrigin);
+  const [dominantColor, setDominantColor] = useState(void 0);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const canvasRef = useRef(null);
+  const handleImageError = () => {
+    setCrossOriginState(void 0);
+  };
+  const handleImageLoad = useCallback(({ target }) => {
+    const rgb = cache.get(src);
+    if (rgb) {
+      setDominantColor(rgb);
+      setImageLoaded(true);
+      return;
+    }
+    const img = target;
+    if (!canvasRef.current) {
+      return;
+    }
+    try {
+      const color = extractDominantColor(canvasRef.current, img, {
+        sampleSize,
+        contrast
+      });
+      if (color) {
+        const rgb2 = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+        cache.set(src, rgb2);
+        setDominantColor(rgb2);
+      }
+    } catch {
+      setCrossOriginState(void 0);
+    }
+    setImageLoaded(true);
+  }, [
+    sampleSize,
+    contrast,
+    src
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx(`relative flex is-full justify-center overflow-hidden transition-all duration-700`, classNames),
+    style: {
+      backgroundColor: dominantColor
+    }
+  }, /* @__PURE__ */ React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      display: "none"
+    },
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "absolute inset-0 pointer-events-none",
+    style: {
+      background: dominantColor ? `radial-gradient(circle at center, transparent 30%, ${dominantColor} 100%)` : void 0,
+      transition: "opacity 0.7s ease-in-out",
+      opacity: 0.5
+    }
+  }), /* @__PURE__ */ React.createElement("img", {
+    src,
+    alt,
+    crossOrigin: crossOriginState,
+    onError: handleImageError,
+    onLoad: handleImageLoad,
+    className: mx("z-10 object-contain transition-opacity duration-500", classNames),
+    style: {
+      opacity: imageLoaded ? 1 : 0
+    }
+  }));
+};
+var extractDominantColor = (canvas, img, { sampleSize = 64, contrast = 0.95 }) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return null;
+  }
+  canvas.width = sampleSize;
+  canvas.height = sampleSize;
+  ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
+  const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
+  const pixels = imageData.data;
+  if (isTransparent(pixels, sampleSize)) {
+    return null;
+  }
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let totalWeight = 0;
+  const cornerSize = Math.floor(sampleSize * 0.125);
+  for (let y = 0; y < sampleSize; y++) {
+    for (let x = 0; x < sampleSize; x++) {
+      const isInTopLeft = x < cornerSize && y < cornerSize;
+      const isInTopRight = x >= sampleSize - cornerSize && y < cornerSize;
+      const isInBottomLeft = x < cornerSize && y >= sampleSize - cornerSize;
+      const isInBottomRight = x >= sampleSize - cornerSize && y >= sampleSize - cornerSize;
+      if (!isInTopLeft && !isInTopRight && !isInBottomLeft && !isInBottomRight) {
+        continue;
+      }
+      const i = (y * sampleSize + x) * 4;
+      const red = pixels[i];
+      const green = pixels[i + 1];
+      const blue = pixels[i + 2];
+      const alpha = pixels[i + 3];
+      if (alpha === 0) continue;
+      const max = Math.max(red, green, blue);
+      const min = Math.min(red, green, blue);
+      const saturation = max === 0 ? 0 : (max - min) / max;
+      const weight = 1 + saturation * 2;
+      r += red * weight;
+      g += green * weight;
+      b += blue * weight;
+      totalWeight += weight;
+    }
+  }
+  if (totalWeight > 0) {
+    r = Math.round(Math.round(r / totalWeight) * contrast);
+    g = Math.round(Math.round(g / totalWeight) * contrast);
+    b = Math.round(Math.round(b / totalWeight) * contrast);
+    return [
+      r,
+      g,
+      b
+    ];
+  }
+  return null;
+};
+var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
+  let edgeTransparentPixels = 0;
+  const edgePixels = sampleSize * 4 - 4;
+  for (let x = 0; x < sampleSize; x++) {
+    const topIndex = x * 4;
+    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
+    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+  }
+  for (let y = 1; y < sampleSize - 1; y++) {
+    const leftIndex = y * sampleSize * 4;
+    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+    const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
+    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+  }
+  return edgeTransparentPixels / edgePixels > threshold;
+};
+
+// src/components/Card/Card.tsx
+import { Slot } from "@radix-ui/react-slot";
+import React2, { createContext, forwardRef, useContext } from "react";
+import { Button, DropdownMenu, Icon, Toolbar, useTranslation } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/ui-theme";
+
+// src/translations.ts
+var translationKey = "@dxos/react-ui-mosaic";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {}
+    }
+  }
+];
+
+// src/components/Card/Card.tsx
+var CardContext = /* @__PURE__ */ createContext({});
+var CardRoot = /* @__PURE__ */ forwardRef(({ children, classNames, className, id, asChild, role = "group", border = true, fullWidth, ...props }, forwardedRef) => {
+  const Root2 = asChild ? Slot : "div";
+  return /* @__PURE__ */ React2.createElement(Root2, {
+    ...id && {
+      "data-object-id": id
+    },
+    ...props,
+    role,
+    className: mx2(styles.root, border && styles.border, fullWidth && "!max-is-none", className, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var CardToolbar = /* @__PURE__ */ forwardRef(({ children, classNames, density = "fine", ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+    ...props,
+    classNames: [
+      "density-fine bg-transparent",
+      density === "fine" ? styles.grid_3 : styles.grid_3_coarse,
+      classNames
+    ],
+    ref: forwardedRef
+  }, children);
+});
+var CardToolbarIconButton = Toolbar.IconButton;
+var CardToolbarSeparator = Toolbar.Separator;
+var CardDragHandle = /* @__PURE__ */ forwardRef((_, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(Toolbar.IconButton, {
+    "data-testid": "card-drag-handle",
+    noTooltip: true,
+    iconOnly: true,
+    icon: "ph--dots-six-vertical--regular",
+    variant: "ghost",
+    label: t("drag handle label"),
+    classNames: "cursor-pointer",
+    size: 5,
+    disabled: !forwardedRef,
+    ref: forwardedRef
+  });
+});
+var CardClose = /* @__PURE__ */ forwardRef(({ onClick }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(Toolbar.IconButton, {
+    iconOnly: true,
+    icon: "ph--x--regular",
+    variant: "ghost",
+    label: t("card close label"),
+    classNames: "cursor-pointer",
+    size: 5,
+    onClick,
+    ref: forwardedRef
+  });
+});
+var CardMenu = ({ context, items }) => {
+  const { t } = useTranslation(translationKey);
+  const { menuItems } = useContext(CardContext) ?? {};
+  const combinedItems = [
+    ...items ?? [],
+    ...menuItems ?? []
+  ];
+  return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+    disabled: !combinedItems.length,
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Card.ToolbarIconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    label: t("action menu label")
+  })), (combinedItems?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, combinedItems?.map(({ label, onClick: onSelect }, i) => /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+    key: i,
+    onSelect: () => onSelect(context)
+  }, label))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
+};
+var CardTitle = /* @__PURE__ */ forwardRef(({ children, classNames, className, asChild, role = "heading", ...props }, forwardedRef) => {
+  const Root2 = asChild ? Slot : "div";
+  return /* @__PURE__ */ React2.createElement(Root2, {
+    ...props,
+    role,
+    className: mx2("grow truncate", classNames, className),
+    ref: forwardedRef
+  }, children);
+});
+var CardContent = /* @__PURE__ */ forwardRef(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "contents [&>:last-child]:pbe-1",
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+var CardRow = /* @__PURE__ */ forwardRef(({ children, classNames, className, role = "none", icon, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    ...props,
+    role,
+    className: mx2(styles.grid_2, "pli-1", classNames, className),
+    ref: forwardedRef
+  }, icon && /* @__PURE__ */ React2.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon
+  }) || /* @__PURE__ */ React2.createElement("div", null), children);
+});
+var CardHeading = /* @__PURE__ */ forwardRef(({ children, classNames, className, asChild, role = "heading", variant = "default", ...props }, forwardedRef) => {
+  const Root2 = asChild ? Slot : "div";
+  const variantClassNames = {
+    default: "plb-1",
+    subtitle: "plb-2 text-xs text-description font-medium uppercase"
+  };
+  return /* @__PURE__ */ React2.createElement(Root2, {
+    ...props,
+    role,
+    className: mx2(variantClassNames[variant], classNames, className),
+    ref: forwardedRef
+  }, children);
+});
+var CardText = /* @__PURE__ */ forwardRef(({ children, classNames, className, asChild, role = "none", truncate, variant = "default", ...props }, forwardedRef) => {
+  const Root2 = asChild ? Slot : "div";
+  const variantClassNames = {
+    default: {
+      root: "plb-1"
+    },
+    description: {
+      root: "plb-1.5",
+      span: "text-sm text-description line-clamp-3"
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(Root2, {
+    ...props,
+    role,
+    className: mx2("flex overflow-hidden", variantClassNames[variant].root, classNames, className),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: mx2(variantClassNames[variant].span, truncate && "truncate")
+  }, children));
+});
+var CardPoster = (props) => {
+  const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
+  if (props.image) {
+    return /* @__PURE__ */ React2.createElement("div", {
+      role: "none",
+      className: "mbe-1"
+    }, /* @__PURE__ */ React2.createElement(Image, {
+      classNames: [
+        styles.poster,
+        aspect,
+        props.classNames
+      ],
+      src: props.image,
+      alt: props.alt
+    }));
+  }
+  if (props.icon) {
+    return /* @__PURE__ */ React2.createElement("div", {
+      role: "image",
+      className: mx2("grid place-items-center bg-inputSurface text-subdued", styles.poster, aspect, props.classNames),
+      "aria-label": props.alt
+    }, /* @__PURE__ */ React2.createElement(Icon, {
+      icon: props.icon,
+      size: 10
+    }));
+  }
+};
+var CardAction = ({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "is-full pli-1"
+  }, /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: mx2(styles.grid_3, "!p-0 is-full text-start overflow-hidden"),
+    onClick
+  }, icon ? /* @__PURE__ */ React2.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon
+  }) : /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("span", {
+    className: mx2("min-is-0 flex-1 truncate", !actionIcon && "col-span-2")
+  }, label), actionIcon && /* @__PURE__ */ React2.createElement(CardIcon, {
+    icon: actionIcon
+  })));
+};
+var CardLink = ({ label, href }) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "is-full pli-1"
+  }, /* @__PURE__ */ React2.createElement("a", {
+    className: mx2(styles.grid_3, "group !p-0 dx-button dx-focus-ring !min-bs-1"),
+    "data-variant": "ghost",
+    href,
+    target: "_blank",
+    rel: "noreferrer"
+  }, /* @__PURE__ */ React2.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon: "ph--link--regular"
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: mx2("min-is-0 flex-1 truncate")
+  }, label), /* @__PURE__ */ React2.createElement(CardIcon, {
+    classNames: "invisible group-hover:visible",
+    icon: "ph--arrow-square-out--regular"
+  })));
+};
+var CardIcon = ({ toolbar, ...props }) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "grid bs-[var(--rail-item)] is-[var(--rail-item)] place-items-center"
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    ...props,
+    size: toolbar ? 5 : 4
+  }));
+};
+var Card = {
+  Context: CardContext,
+  Root: CardRoot,
+  // Toolbar
+  Toolbar: CardToolbar,
+  ToolbarIconButton: CardToolbarIconButton,
+  ToolbarSeparator: CardToolbarSeparator,
+  DragHandle: CardDragHandle,
+  Title: CardTitle,
+  Close: CardClose,
+  Menu: CardMenu,
+  Icon: CardIcon,
+  // Content
+  Content: CardContent,
+  Row: CardRow,
+  Heading: CardHeading,
+  Text: CardText,
+  Poster: CardPoster,
+  Action: CardAction,
+  Link: CardLink
+};
+
+// src/components/Focus/styles.ts
+var styles2 = {
+  container: {
+    // TODO(burdon): Handle selection (aria-current?)
+    // TODO(burdon): Use ring instead of border?
+    root: [
+      "outline-none border border-separator rounded-sm",
+      // Focus (e.g., via tabster).
+      // TODO(burdon): Why is ! required?
+      "focus:!border-accentSurface",
+      // Active (e.g., drop target).
+      "data-[focus-state=active]:border-neutralFocusIndicator",
+      // Error
+      // TODO(burdon): Error token.
+      "data-[focus-state=error]:border-rose-500"
+    ]
+  }
+};
+
+// src/components/Focus/Focus.tsx
+import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable } from "@fluentui/react-tabster";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import React3, { createContext as createContext2, forwardRef as forwardRef2, useContext as useContext2, useRef as useRef2, useState as useState2 } from "react";
+import { mx as mx3 } from "@dxos/ui-theme";
+var FOCUS_STATE_ATTR = "focus-state";
+var FocusContext = /* @__PURE__ */ createContext2({});
+var useFocus = () => useContext2(FocusContext);
+var Group = /* @__PURE__ */ forwardRef2(({ classNames, className, children, asChild, axis = "vertical", ...props }, forwardedRef) => {
+  const rootRef = useRef2(null);
+  const composedRef = useComposedRefs(rootRef, forwardedRef);
+  const Root2 = asChild ? Slot2 : Primitive.div;
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited-trap-focus"
+  });
+  const arrowNavigationAttrs = useArrowNavigationGroup({
+    axis,
+    memorizeCurrent: true
+  });
+  const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
+  const [state, setState] = useState2();
+  return /* @__PURE__ */ React3.createElement(FocusContext.Provider, {
+    value: {
+      setFocus: setState
+    }
+  }, /* @__PURE__ */ React3.createElement(Root2, {
+    tabIndex: 0,
+    className: mx3(styles2.container.root, className, classNames),
+    ...tabsterAttrs,
+    ...state && {
+      [`data-${FOCUS_STATE_ATTR}`]: state
+    },
+    ...props,
+    ref: composedRef
+  }, children));
+});
+var Focus = {
+  Group
+};
+
+// src/components/Mosaic/styles.ts
+var styles3 = {
+  placeholder: {
+    root: [
+      "group opacity-0",
+      'group-data-[mosaic-debug="true"]:opacity-100',
+      'group-data-[mosaic-debug="true"]:bg-orange-500',
+      "data-[mosaic-placeholder-state=active]:opacity-100",
+      "data-[mosaic-placeholder-axis=vertical]:plb-1",
+      "data-[mosaic-placeholder-axis=vertical]:data-[mosaic-placeholder-state=active]:plb-2.5",
+      "data-[mosaic-placeholder-axis=horizontal]:pli-1",
+      "data-[mosaic-placeholder-axis=horizontal]:data-[mosaic-placeholder-state=active]:pli-2.5"
+    ],
+    content: [
+      "transition-all duration-0",
+      // TODO(burdon): Don't animate open if placeholder is the source.
+      // TODO(burdon): Flickers when start to drag since source is removed and then the placeholder shows up.
+      //  - Use absolute positioning?
+      // 'group-data-[mosaic-placeholder-state=active]:duration-200',
+      "group-data-[mosaic-placeholder-axis=vertical]:bs-0",
+      "group-data-[mosaic-placeholder-axis=horizontal]:is-0",
+      "group-data-[mosaic-placeholder-axis=vertical]:group-data-[mosaic-placeholder-state=active]:bs-[var(--mosaic-placeholder-height)]",
+      "group-data-[mosaic-placeholder-axis=horizontal]:group-data-[mosaic-placeholder-state=active]:is-[var(--mosaic-placeholder-width)]"
+    ]
+  }
+};
+
+// src/components/Mosaic/extension.ts
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+var dropHandler = ({ onDrop = handleDrop } = {}) => {
+  const views = /* @__PURE__ */ new Set();
+  let state = null;
+  const reset = () => {
+    views.forEach((view) => view.dispatch({
+      effects: setDrop.of(null)
+    }));
+    state = null;
+  };
+  const extension = [
+    dropField,
+    ViewPlugin.fromClass(class {
+      _view;
+      constructor(_view) {
+        this._view = _view;
+        views.add(_view);
+      }
+      destroy() {
+        views.delete(this._view);
+      }
+    })
+  ];
+  return {
+    extension,
+    update: (position) => {
+      if (!position) {
+        reset();
+        return;
+      }
+      views.forEach((view) => {
+        const rect = view.dom.getBoundingClientRect();
+        if (position.x >= rect.left && position.x <= rect.right && position.y >= rect.top && position.y <= rect.bottom) {
+          let pos = view.posAtCoords(position);
+          if (pos !== null) {
+            const word = view.state.wordAt(pos);
+            if (word) {
+              const startDist = Math.abs(pos - word.from);
+              const endDist = Math.abs(pos - word.to);
+              pos = startDist < endDist ? word.from : word.to;
+            }
+            view.dispatch({
+              effects: setDrop.of(pos)
+            });
+            state = {
+              view,
+              pos
+            };
+            return;
+          }
+        }
+        view.dispatch({
+          effects: setDrop.of(null)
+        });
+      });
+    },
+    cancel: () => {
+      reset();
+    },
+    drop: ({ text, url }) => {
+      if (state) {
+        onDrop(state.view, state.pos, {
+          text,
+          url
+        });
+      }
+      reset();
+    }
+  };
+};
+var handleDrop = (view, pos, event) => {
+  const line = view.state.doc.lineAt(pos);
+  if (line.text.trim() === "") {
+    view.dispatch({
+      changes: {
+        from: pos,
+        insert: `
+![${event.text}](${event.url})
+`
+      },
+      effects: setDrop.of(null)
+    });
+  } else {
+    view.dispatch({
+      changes: {
+        from: pos,
+        insert: ` [${event.text}](${event.url})`
+      },
+      effects: setDrop.of(null)
+    });
+  }
+};
+var setDrop = StateEffect.define();
+var dropField = StateField.define({
+  create: () => Decoration.none,
+  update: (decorations, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(setDrop)) {
+        if (effect.value === null) {
+          return Decoration.none;
+        }
+        return Decoration.set([
+          Decoration.widget({
+            widget: new class extends WidgetType {
+              toDOM() {
+                const dom = document.createElement("span");
+                dom.className = "cm-drop-cursor";
+                dom.style.borderLeft = "2px solid var(--dx-accentSurface)";
+                dom.style.display = "inline-block";
+                dom.style.height = "1em";
+                dom.style.verticalAlign = "middle";
+                return dom;
+              }
+            }(),
+            side: 0
+          }).range(effect.value)
+        ]);
+      }
+    }
+    return decorations.map(tr.changes);
+  },
+  provide: (field) => EditorView.decorations.from(field)
+});
+
+// src/hooks/useContainerDebug.tsx
+import React7, { forwardRef as forwardRef6, useMemo as useMemo5, useRef as useRef5 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Json } from "@dxos/react-ui-syntax-highlighter";
+import { mx as mx7 } from "@dxos/ui-theme";
+
+// src/components/Mosaic/Mosaic.tsx
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements, monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { DropIndicator as NativeDropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
+import { composeRefs, useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+import { createContext as createContext3 } from "@radix-ui/react-context";
+import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { bind } from "bind-event-listener";
+import React6, { forwardRef as forwardRef5, useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+import { log as log2 } from "@dxos/log";
+import { mx as mx6 } from "@dxos/ui-theme";
+import { isTruthy } from "@dxos/util";
+
+// src/components/Scrollable/Scrollable.tsx
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import React4, { forwardRef as forwardRef3, useEffect, useMemo, useRef as useRef3 } from "react";
+import { mx as mx4 } from "@dxos/ui-theme";
+import "overlayscrollbars/styles/overlayscrollbars.css";
+var defaultOptions = {
+  scrollbars: {
+    autoHide: "leave",
+    autoHideDelay: 1e3,
+    autoHideSuspend: true
+  }
+};
+var Scrollable = /* @__PURE__ */ forwardRef3(({ classNames, axis = "vertical", padding, options: optionsProp = defaultOptions, onScroll, viewportRef, ...props }, forwardedRef) => {
+  const osRef = useRef3(null);
+  const options = useMemo(() => {
+    const options2 = {
+      ...optionsProp
+    };
+    if (axis) {
+      options2.overflow = {
+        x: axis === "horizontal" ? "scroll" : "hidden",
+        y: axis === "vertical" ? "scroll" : "hidden"
+      };
+    }
+    return options2;
+  }, [
+    axis,
+    optionsProp
+  ]);
+  useEffect(() => {
+    const hostElement = osRef.current?.getElement();
+    if (forwardedRef) {
+      if (typeof forwardedRef === "function") {
+        forwardedRef(hostElement ?? null);
+      } else {
+        forwardedRef.current = hostElement ?? null;
+      }
+    }
+  });
+  useEffect(() => {
+    const instance = osRef.current?.osInstance();
+    if (viewportRef) {
+      viewportRef.current = instance?.elements().viewport ?? null;
+    }
+  }, [
+    osRef,
+    viewportRef
+  ]);
+  const events = useMemo(() => {
+    if (!onScroll) {
+      return null;
+    }
+    return {
+      scroll: (_, event) => {
+        onScroll(event);
+      }
+    };
+  }, [
+    onScroll
+  ]);
+  return /* @__PURE__ */ React4.createElement(OverlayScrollbarsComponent, {
+    ...props,
+    className: mx4(padding && axis === "vertical" ? "pli-3" : "pbe-3", classNames),
+    options,
+    events,
+    ref: osRef
+  });
+});
+
+// src/components/Stack/Stack.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import React5, { Fragment, forwardRef as forwardRef4 } from "react";
+import { invariant } from "@dxos/invariant";
+import { mx as mx5 } from "@dxos/ui-theme";
+
+// src/hooks/useEventHandlerAdapter.ts
+import { useMemo as useMemo2 } from "react";
+import { log } from "@dxos/log";
+import { arrayMove } from "@dxos/util";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/hooks/useEventHandlerAdapter.ts";
+var useEventHandlerAdapter = ({ items, getId, get, make, onChange, ...props }) => {
+  return useMemo2(() => ({
+    ...props,
+    onTake: ({ source }, cb) => {
+      log.info("onTake", {
+        source
+      }, {
+        F: __dxlog_file,
+        L: 58,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      const mutate = (items2) => {
+        const from = items2.findIndex((item) => getId(item) === source.id);
+        if (from !== -1) {
+          items2.splice(from, 1);
+        }
+      };
+      if (onChange) {
+        onChange(mutate);
+      } else {
+        mutate(items);
+      }
+      void cb(source.data);
+    },
+    onDrop: ({ source, target }) => {
+      const to = target?.type === "tile" || target?.type === "placeholder" ? target.location : -1;
+      log.info("onDrop", {
+        source,
+        target,
+        to
+      }, {
+        F: __dxlog_file,
+        L: 76,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      const mutate = (items2) => {
+        const from = items2.findIndex((item) => getId(item) === source.id);
+        if (to !== -1) {
+          if (from !== -1) {
+            arrayMove(items2, from, to);
+          } else {
+            items2.splice(to, 0, make(get(source.data)));
+          }
+        }
+      };
+      if (onChange) {
+        onChange(mutate);
+      } else {
+        mutate(items);
+      }
+    }
+  }), [
+    items,
+    onChange
+  ]);
+};
+
+// src/hooks/useVisibleItems.ts
+import { useMemo as useMemo3 } from "react";
+var useVisibleItems = ({ id, items, dragging, getId }) => {
+  const visibleItems = useMemo3(() => {
+    if (!items || !dragging || id !== dragging.containerId) {
+      return items ?? [];
+    }
+    const idx = items.findIndex((item) => getId(item) === dragging.id);
+    if (idx === -1) {
+      return items;
+    }
+    const visibleItems2 = items.slice();
+    visibleItems2.splice(idx, 1);
+    return visibleItems2;
+  }, [
+    id,
+    items,
+    dragging,
+    getId
+  ]);
+  return visibleItems;
+};
+
+// src/components/Stack/Stack.tsx
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Stack/Stack.tsx";
+var StackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, role = "list", axis = "vertical", draggable: draggable2 = true, items, getId, Tile: Tile2, debug, ...props }, forwardedRef) => {
+  invariant(Tile2, void 0, {
+    F: __dxlog_file2,
+    L: 44,
+    S: void 0,
+    A: [
+      "Tile",
+      ""
+    ]
+  });
+  const { id, dragging } = useContainerContext(StackInner.displayName);
+  const visibleItems = useVisibleItems({
+    id,
+    items,
+    dragging: dragging?.source.data,
+    getId
+  });
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...props,
+    role,
+    className: mx5("flex", axis === "horizontal" && "bs-full [&>*]:shrink-0", axis === "vertical" && "flex-col", classNames, className),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React5.createElement(Placeholder, {
+    axis,
+    location: 0.5
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React5.createElement(Fragment, {
+    key: getId(item)
+  }, /* @__PURE__ */ React5.createElement(Tile2, {
+    id: getId(item),
+    data: item,
+    location: index + 1,
+    draggable: draggable2,
+    debug
+  }), /* @__PURE__ */ React5.createElement(Placeholder, {
+    axis,
+    location: index + 1.5
+  }))));
+});
+StackInner.displayName = "Stack";
+var Stack = StackInner;
+var VirtualStackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, role = "list", axis = "vertical", items, getId, Tile: Tile2, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
+  invariant(Tile2, void 0, {
+    F: __dxlog_file2,
+    L: 106,
+    S: void 0,
+    A: [
+      "Tile",
+      ""
+    ]
+  });
+  const { id, dragging } = useContainerContext(VirtualStackInner.displayName);
+  const visibleItems = useVisibleItems({
+    id,
+    items,
+    dragging: dragging?.source.data,
+    getId
+  });
+  const virtualizer = useVirtualizer({
+    count: visibleItems.length * 2 + 1,
+    estimateSize,
+    getScrollElement,
+    overscan,
+    onChange
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...props,
+    role,
+    className: mx5("flex", axis === "horizontal" && "bs-full [&>*]:shrink-0", axis === "vertical" && "flex-col", classNames, className),
+    style: {
+      position: "relative",
+      ...axis === "vertical" ? {
+        width: "100%",
+        height: virtualizer.getTotalSize()
+      } : {
+        width: virtualizer.getTotalSize(),
+        height: "100%"
+      }
+    },
+    ref: forwardedRef
+  }, virtualItems.map((virtualItem) => {
+    const data = visibleItems[Math.floor(virtualItem.index / 2)];
+    return /* @__PURE__ */ React5.createElement("div", {
+      key: virtualItem.key,
+      "data-index": virtualItem.index,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        ...axis === "vertical" ? {
+          width: "100%",
+          transform: `translateY(${virtualItem.start}px)`
+        } : {
+          height: "100%",
+          transform: `translateX(${virtualItem.start}px)`
+        }
+      },
+      ref: virtualizer.measureElement
+    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React5.createElement(Placeholder, {
+      axis,
+      location: Math.floor(virtualItem.index / 2) + 0.5
+    }) : /* @__PURE__ */ React5.createElement(Tile2, {
+      id: getId(data),
+      data,
+      location: Math.floor(virtualItem.index / 2) + 1,
+      debug
+    }));
+  }));
+});
+VirtualStackInner.displayName = "VirtualStackInner";
+var VirtualStack = VirtualStackInner;
+var Placeholder = (props) => {
+  return /* @__PURE__ */ React5.createElement(Mosaic.Placeholder, {
+    ...props,
+    classNames: styles3.placeholder.root
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: mx5("flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm", styles3.placeholder.content)
+  }));
+};
+Placeholder.displayName = "Placeholder";
+
+// src/components/Mosaic/Mosaic.tsx
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Mosaic.tsx";
+var getSourceData = (source) => {
+  return source.data.type === "tile" ? source.data : null;
+};
+var [RootContextProvider, useRootContext] = createContext3("MosaicRoot");
+var ROOT_DEBUG_ATTR = "mosaic-debug";
+var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }, forwardedRef) => {
+  const rootRef = useRef4(null);
+  const composedRef = useComposedRefs2(rootRef, forwardedRef);
+  const Root2 = asChild ? Slot3 : Primitive2.div;
+  const [handlers, setHandlers] = useState3({});
+  const [dragging, setDragging] = useState3();
+  const getSourceHandler = useCallback2((source) => {
+    const data = source.data;
+    return {
+      data,
+      handler: handlers[data.containerId]
+    };
+  }, [
+    handlers
+  ]);
+  const getTargetHandler = useCallback2((location) => {
+    for (const target of location.current.dropTargets) {
+      const data = target.data;
+      let containerId;
+      switch (data.type) {
+        case "tile":
+        case "placeholder":
+          containerId = data.containerId;
+          break;
+        case "container":
+          containerId = data.id;
+          break;
+      }
+      const handler = handlers[containerId];
+      if (handler) {
+        return {
+          data,
+          handler
+        };
+      }
+    }
+    return {};
+  }, [
+    handlers
+  ]);
+  useEffect2(() => {
+    const handleChange = ({ source, location }) => {
+      const { data: sourceData } = getSourceHandler(source);
+      const { data: targetData, handler } = getTargetHandler(location);
+      setDragging((dragging2) => {
+        dragging2?.target?.handler?.onCancel?.();
+        return {
+          source: {
+            data: sourceData,
+            handler: handlers[sourceData.containerId],
+            // TOOD(burdon): Check id matches.
+            container: location.initial.dropTargets.find((target) => target.data.type === "container")?.element
+          },
+          target: targetData && {
+            data: targetData,
+            handler
+          }
+        };
+      });
+    };
+    const handleCancel = () => {
+      setDragging((dragging2) => {
+        requestAnimationFrame(() => {
+          dragging2?.target?.handler?.onCancel?.();
+          dragging2?.source?.container?.dispatchEvent(new CustomEvent("dnd:cancel", {
+            bubbles: true
+          }));
+        });
+        return void 0;
+      });
+    };
+    let noTargetTimeout;
+    return combine(monitorForElements({
+      /**
+      * Dragging started within any container.
+      */
+      onDragStart: ({ source, location }) => {
+        log2("Root.onDragStart", {
+          source: source.data,
+          location: location.current.dropTargets.map((target) => target.data)
+        }, {
+          F: __dxlog_file3,
+          L: 215,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        handleChange({
+          source,
+          location
+        });
+      },
+      /**
+      * Dragging entered a new container.
+      */
+      onDropTargetChange: ({ source, location }) => {
+        clearTimeout(noTargetTimeout);
+        log2("Root.onDropTargetChange", {
+          source: source.data,
+          location: location.current.dropTargets.map((target) => target.data)
+        }, {
+          F: __dxlog_file3,
+          L: 228,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        if (location.current.dropTargets.length === 0) {
+          noTargetTimeout = setTimeout(() => setDragging(void 0), 1e3);
+        } else {
+          handleChange({
+            source,
+            location
+          });
+        }
+      },
+      /**
+      * Dragging within any container.
+      */
+      onDrag: ({ source, location }) => {
+        const { data } = getSourceHandler(source);
+        const { handler } = getTargetHandler(location);
+        if (handler) {
+          const { clientX: x, clientY: y } = location.current.input;
+          handler.onDrag?.({
+            source: data,
+            position: {
+              x,
+              y
+            }
+          });
+        }
+      },
+      /**
+      * Dragging ended.
+      */
+      onDrop: ({ source, location }) => {
+        log2.info("Root.onDrop", {
+          source: source.data,
+          location: location.current.dropTargets.map((target) => target.data)
+        }, {
+          F: __dxlog_file3,
+          L: 257,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
+        if (!sourceHandler) {
+          log2.warn("invalid source", {
+            source: sourceData,
+            handlers: Object.keys(handlers)
+          }, {
+            F: __dxlog_file3,
+            L: 265,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return;
+        }
+        try {
+          if (location.current.dropTargets.length === 0) {
+            log2.info("cancelled", void 0, {
+              F: __dxlog_file3,
+              L: 280,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          } else {
+            const { data: targetData, handler: targetHandler } = getTargetHandler(location);
+            if (!targetHandler) {
+              log2.warn("invalid target", {
+                source: sourceData,
+                location,
+                handlers: Object.keys(handlers)
+              }, {
+                F: __dxlog_file3,
+                L: 285,
+                S: void 0,
+                C: (f, a) => f(...a)
+              });
+              return;
+            }
+            if (sourceHandler === targetHandler) {
+              targetHandler.onDrop?.({
+                source: sourceData,
+                target: targetData
+              });
+            } else {
+              if (!sourceHandler.onTake) {
+                log2.warn("invalid source", {
+                  source: sourceData
+                }, {
+                  F: __dxlog_file3,
+                  L: 301,
+                  S: void 0,
+                  C: (f, a) => f(...a)
+                });
+                return;
+              }
+              sourceHandler.onTake?.({
+                source: sourceData
+              }, async (object) => {
+                targetHandler.onDrop?.({
+                  // TODO(burdon): Change source!!!
+                  source: {
+                    ...sourceData,
+                    data: object
+                  },
+                  target: targetData
+                });
+                return true;
+              });
+            }
+          }
+        } finally {
+          handleCancel();
+        }
+      }
+    }));
+  }, [
+    handlers,
+    getSourceHandler,
+    getTargetHandler
+  ]);
+  return /* @__PURE__ */ React6.createElement(RootContextProvider, {
+    containers: handlers,
+    addContainer: (container) => setHandlers((containers) => ({
+      ...containers,
+      [container.id]: container
+    })),
+    removeContainer: (id) => setHandlers((containers) => {
+      delete containers[id];
+      return {
+        ...containers
+      };
+    }),
+    dragging
+  }, /* @__PURE__ */ React6.createElement(Root2, {
+    className: mx6("group overflow-hidden", classNames),
+    [`data-${ROOT_DEBUG_ATTR}`]: debug,
+    ref: composedRef
+  }, children));
+});
+var [ContainerContextProvider, useContainerContext] = createContext3("MosaicContainer");
+var CONTAINER_STATE_ATTR = "mosaic-container-state";
+var CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
+var CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
+var counter = 0;
+var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children, eventHandler: eventHandlerProp, axis = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
+  const rootRef = useRef4(null);
+  const composedRef = useComposedRefs2(rootRef, forwardedRef);
+  const Root2 = asChild ? Slot3 : Primitive2.div;
+  const eventHandler = useMemo4(() => eventHandlerProp ?? {
+    id: `mosaic-container-${counter++}`
+  }, [
+    eventHandlerProp
+  ]);
+  const { dragging } = useRootContext(Container.displayName);
+  const [state, setState] = useState3({
+    type: "idle"
+  });
+  const [activeLocation, setActiveLocation] = useState3();
+  const [scrolling, setScrolling] = useState3(false);
+  const { setFocus } = useFocus();
+  useEffect2(() => {
+    if (withFocus) {
+      setFocus?.(state.type === "active" ? "active" : void 0);
+    }
+  }, [
+    setFocus,
+    withFocus,
+    state
+  ]);
+  const { addContainer, removeContainer } = useRootContext(eventHandler.id);
+  useEffect2(() => {
+    addContainer(eventHandler);
+    return () => removeContainer(eventHandler.id);
+  }, [
+    eventHandler
+  ]);
+  const data = useMemo4(() => ({
+    type: "container",
+    id: eventHandler.id
+  }), [
+    eventHandler.id
+  ]);
+  useEffect2(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    let timeout;
+    const handleScroll = () => {
+      setScrolling(true);
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        setScrolling(false);
+      }, 500);
+    };
+    return combine(...[
+      // Autoscroll.
+      // TODO(burdon): Autoscroll doesn't work well horizontally.
+      autoscrollElement && [
+        autoScrollForElements({
+          element: autoscrollElement,
+          canScroll: ({ element: _ }) => {
+            return true;
+          },
+          getAllowedAxis: () => axis,
+          getConfiguration: () => ({
+            maxScrollSpeed: "fast"
+          })
+        }),
+        bind(autoscrollElement, {
+          type: "scroll",
+          listener: handleScroll
+        }),
+        () => setScrolling(false)
+      ],
+      // Target.
+      dropTargetForElements({
+        element: rootRef.current,
+        getData: () => data,
+        /**
+        * Test if permitted to drop here.
+        * NOTE: Contained Tile and Placeholder elements do the same.
+        */
+        canDrop: ({ source }) => {
+          const data2 = getSourceData(source);
+          return data2 && eventHandler.canDrop?.({
+            source: data2
+          }) || false;
+        },
+        // TODO(burdon): Provide semantic intent to onDrop.
+        // getDropEffect: () => {
+        //   return 'move';
+        // },
+        /**
+        * Dragging started in this container.
+        */
+        onDragStart: ({ source }) => {
+          const sourceData = source.data;
+          setState({
+            type: "active",
+            bounds: sourceData.bounds
+          });
+        },
+        /**
+        * Dragging entered this container.
+        */
+        onDragEnter: ({ source }) => {
+          const sourceData = source.data;
+          setState({
+            type: "active",
+            bounds: sourceData.bounds
+          });
+        },
+        /**
+        * Dragging left this container.
+        * NOTE: If the container isn't full-height, then when the dragged item is temporarily removed the container will shrink,
+        * triggering `onDragLeave`, which then causes the item to be added and removed continually (flickering).
+        */
+        onDragLeave: ({ source }) => {
+          const sourceData = source.data;
+          if (sourceData.containerId !== eventHandler.id) {
+            setState({
+              type: "idle"
+            });
+          }
+        },
+        /**
+        * Dropped in this container.
+        */
+        onDrop: () => {
+          setState({
+            type: "idle"
+          });
+        }
+      }),
+      /**
+      * Custom event for dragging cancellation.
+      */
+      bind(rootRef.current, {
+        type: "dnd:cancel",
+        listener: () => {
+          setState({
+            type: "idle"
+          });
+        }
+      })
+    ].filter(isTruthy).flatMap((x) => x));
+  }, [
+    rootRef,
+    eventHandler,
+    data,
+    autoscrollElement
+  ]);
+  return /* @__PURE__ */ React6.createElement(ContainerContextProvider, {
+    id: eventHandler.id,
+    eventHandler,
+    axis,
+    state,
+    dragging: state.type === "active" ? dragging : void 0,
+    scrolling,
+    activeLocation,
+    setActiveLocation
+  }, /* @__PURE__ */ React6.createElement(Root2, {
+    className: mx6("bs-full", className, classNames),
+    style: {
+      [CONTAINER_PLACEHOLDER_WIDTH]: state.type === "active" && state.bounds ? `${state.bounds.width}px` : "0px",
+      [CONTAINER_PLACEHOLDER_HEIGHT]: state.type === "active" && state.bounds ? `${state.bounds.height}px` : "0px"
+    },
+    ...props,
+    [`data-${CONTAINER_STATE_ATTR}`]: state.type,
+    ref: composedRef
+  }, children), debug?.());
+});
+Container.displayName = "MosaicContainer";
+var [TileContextProvider, useTileContext] = createContext3("MosaicTile");
+var TILE_STATE_ATTR = "mosaic-tile-state";
+var Tile = /* @__PURE__ */ forwardRef5(({ className, classNames, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _ }, forwardedRef) => {
+  const rootRef = useRef4(null);
+  const composedRef = composeRefs(rootRef, forwardedRef);
+  const Root2 = asChild ? Slot3 : Primitive2.div;
+  const { id: containerId, eventHandler, axis, scrolling, setActiveLocation } = useContainerContext(Tile.displayName);
+  const [state, setState] = useState3({
+    type: "idle"
+  });
+  const allowedEdges = useMemo4(() => allowedEdgesProp || (axis === "vertical" ? [
+    "top",
+    "bottom"
+  ] : [
+    "left",
+    "right"
+  ]), [
+    allowedEdgesProp,
+    axis
+  ]);
+  const data = useMemo4(() => ({
+    type: "tile",
+    id,
+    containerId,
+    data: dataProp,
+    location
+  }), [
+    containerId,
+    location,
+    dataProp
+  ]);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root || !containerId || scrolling) {
+      return;
+    }
+    const handleChange = ({ self, source }) => {
+      if (source.data.id !== dataProp.id) {
+        const closestEdge = extractClosestEdge(self.data);
+        const location2 = data.location + (closestEdge === "top" || closestEdge === "left" ? -0.5 : 0.5);
+        setActiveLocation(location2);
+        setState({
+          type: "target",
+          closestEdge
+        });
+      }
+    };
+    return combine(
+      // Source.
+      draggable({
+        element: root,
+        dragHandle: dragHandle && state.type !== "preview" ? dragHandle : void 0,
+        canDrag: () => true,
+        getInitialData: () => data,
+        onGenerateDragPreview: ({ location: location2, nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: preserveOffsetOnSource({
+              element: root,
+              input: location2.current.input
+            }),
+            render: ({ container }) => {
+              data.bounds = root.getBoundingClientRect();
+              setState({
+                type: "preview",
+                container,
+                rect: root.getBoundingClientRect()
+              });
+              return () => setState({
+                type: "dragging"
+              });
+            }
+          });
+        },
+        onDragStart: () => {
+          setState({
+            type: "dragging"
+          });
+        },
+        onDrop: () => {
+          setState({
+            type: "idle"
+          });
+        }
+      }),
+      // Target.
+      dropTargetForElements({
+        element: root,
+        getData: ({ input, element }) => attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges
+        }),
+        canDrop: ({ source }) => {
+          const data2 = getSourceData(source);
+          return data2 && eventHandler.canDrop?.({
+            source: data2
+          }) || false;
+        },
+        onDragEnter: ({ self, source }) => {
+          handleChange({
+            self,
+            source
+          });
+        },
+        onDragLeave: () => {
+          setState({
+            type: "idle"
+          });
+          setActiveLocation(void 0);
+        },
+        onDrag: ({ self, source }) => {
+          handleChange({
+            self,
+            source
+          });
+        },
+        onDrop: () => {
+          setState({
+            type: "idle"
+          });
+          setActiveLocation(void 0);
+        }
+      })
+    );
+  }, [
+    rootRef,
+    dragHandle,
+    eventHandler,
+    data,
+    scrolling,
+    allowedEdges,
+    setActiveLocation
+  ]);
+  return /* @__PURE__ */ React6.createElement(TileContextProvider, {
+    state
+  }, /* @__PURE__ */ React6.createElement(Root2, {
+    [`data-${TILE_STATE_ATTR}`]: state.type,
+    role: "listitem",
+    className: mx6("relative", className, classNames),
+    ref: composedRef
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(Root2, {
+    // NOTE: Use to control appearance while dragging.
+    [`data-${TILE_STATE_ATTR}`]: state.type,
+    // TODO(burdon): Configure drop animation.
+    className: mx6("relative", className, classNames),
+    style: {
+      width: `${state.rect.width}px`,
+      height: `${state.rect.height}px`
+    }
+  }, children), state.container));
+});
+Tile.displayName = "MosaicTile";
+var PLACEHOLDER_AXIS_ATTR = "mosaic-placeholder-axis";
+var PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
+var Placeholder2 = ({ classNames, children, asChild, axis = "vertical", location }) => {
+  const rootRef = useRef4(null);
+  const Root2 = asChild ? Slot3 : Primitive2.div;
+  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(Placeholder2.displayName);
+  const data = useMemo4(() => ({
+    type: "placeholder",
+    containerId,
+    location
+  }), [
+    containerId,
+    location
+  ]);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root || scrolling) {
+      return;
+    }
+    return dropTargetForElements({
+      element: root,
+      getData: () => data,
+      canDrop: ({ source }) => {
+        const data2 = getSourceData(source);
+        return data2 && eventHandler.canDrop?.({
+          source: data2
+        }) || false;
+      },
+      onDragEnter: () => {
+        setActiveLocation(data.location);
+      },
+      onDragLeave: () => {
+        setActiveLocation(void 0);
+      },
+      onDrop: () => {
+        setActiveLocation(void 0);
+      }
+    });
+  }, [
+    rootRef,
+    data,
+    scrolling,
+    setActiveLocation
+  ]);
+  return /* @__PURE__ */ React6.createElement(Root2, {
+    [`data-${PLACEHOLDER_AXIS_ATTR}`]: axis,
+    [`data-${PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
+    role: "none",
+    className: mx6("relative", classNames),
+    ref: rootRef
+  }, children);
+};
+Placeholder2.displayName = "MosaicPlaceholder";
+var DropIndicator = (props) => {
+  const { state } = useTileContext(DropIndicator.displayName);
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React6.createElement(NativeDropIndicator, {
+    ...props,
+    edge: state.closestEdge
+  }) : null;
+};
+DropIndicator.displayName = "MosaicDropIndicator";
+var Mosaic = {
+  Root,
+  Container,
+  Tile,
+  Placeholder: Placeholder2,
+  DropIndicator,
+  // TODO(burdon): Move out of Mosaic namespace?
+  Viewport: Scrollable,
+  Stack,
+  VirtualStack
+};
+
+// src/hooks/useContainerDebug.tsx
+var useContainerDebug = (debug) => {
+  const debugRef = useRef5(null);
+  return useMemo5(() => {
+    if (!debug) {
+      return [
+        () => null,
+        void 0
+      ];
+    }
+    return [
+      ({ classNames }) => /* @__PURE__ */ React7.createElement("div", {
+        role: "none",
+        className: mx7("overflow-hidden", classNames),
+        ref: debugRef
+      }),
+      () => debugRef.current && /* @__PURE__ */ createPortal2(/* @__PURE__ */ React7.createElement(ContainerInfo, null), debugRef.current)
+    ];
+  }, [
+    debug,
+    debugRef
+  ]);
+};
+var ContainerInfo = /* @__PURE__ */ forwardRef6(({ classNames }, forwardedRef) => {
+  const { id, state, activeLocation, scrolling } = useContainerContext(ContainerInfo.displayName);
+  const counter2 = useRef5(0);
+  return /* @__PURE__ */ React7.createElement(Json, {
+    data: {
+      id,
+      activeLocation,
+      scrolling,
+      state,
+      count: counter2.current++
+    },
+    classNames: mx7("text-xs", classNames),
+    ref: forwardedRef
+  });
+});
+ContainerInfo.displayName = "ContainerInfo";
+
+export {
+  styles,
+  Image,
+  Card,
+  styles2,
+  useFocus,
+  Focus,
+  styles3,
+  dropHandler,
+  useContainerDebug,
+  useEventHandlerAdapter,
+  useVisibleItems,
+  Stack,
+  VirtualStack,
+  useRootContext,
+  useContainerContext,
+  useTileContext,
+  Mosaic
+};
+//# sourceMappingURL=chunk-4VDZJ3HV.mjs.map