@dxos/react-ui-mosaic 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/dist/lib/node-esm/chunk-X6GV7SMK.mjs

@@ -1,1639 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-
-// 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 CardIconBlock = ({ classNames, children, role = "none", ...props }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
-    ...props,
-    role,
-    className: mx2("grid bs-[var(--rail-item)] is-[var(--rail-item)] place-items-center", classNames)
-  }, children);
-};
-var CardIcon = ({ toolbar, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(CardIconBlock, null, /* @__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,
-  IconBlock: CardIconBlock,
-  // 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, useImperativeHandle, 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
-  ]);
-  useImperativeHandle(forwardedRef, () => osRef.current?.getElement(), [
-    osRef
-  ]);
-  useEffect(() => {
-    const instance = osRef.current?.osInstance();
-    if (viewportRef) {
-      viewportRef(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?.({
-                  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(...[
-      /**
-      * Custom event for dragging cancellation.
-      */
-      bind(rootRef.current, {
-        type: "dnd:cancel",
-        listener: () => {
-          setState({
-            type: "idle"
-          });
-        }
-      }),
-      // 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"
-          });
-        }
-      }),
-      // Autoscroll.
-      // NOTE: When used with Scrollable we get a spurious warning (in dev mode).
-      // "Auto scrolling has been attached to an element that appears not to be scrollable."
-      autoscrollElement && [
-        autoScrollForElements({
-          element: autoscrollElement,
-          // canScroll: ({ element: _ }) => {
-          //   return true;
-          // },
-          getAllowedAxis: () => axis,
-          getConfiguration: () => ({
-            maxScrollSpeed: "fast"
-          })
-        }),
-        bind(autoscrollElement, {
-          type: "scroll",
-          listener: handleScroll
-        }),
-        () => setScrolling(false)
-      ]
-    ].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-X6GV7SMK.mjs.map