@dxos/react-ui-mosaic 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/dist/lib/browser/{chunk-FS5LRPMY.mjs → chunk-XNANTBOP.mjs}

@@ -1,424 +1,37 @@
-// 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;
+// src/hooks/useVisibleItems.ts
+import { useMemo } from "react";
+var useVisibleItems = ({ id, items, dragging, getId }) => {
+  const visibleItems = useMemo(() => {
+    if (!items || !dragging || id !== dragging.containerId) {
+      return items ?? [];
     }
-    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);
+    const idx = items.findIndex((item) => getId(item) === dragging.id);
+    if (idx === -1) {
+      return items;
     }
-    setImageLoaded(true);
+    const visibleItems2 = items.slice();
+    visibleItems2.splice(idx, 1);
+    return visibleItems2;
   }, [
-    sampleSize,
-    contrast,
-    src
+    id,
+    items,
+    dragging,
+    getId
   ]);
-  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
+  return visibleItems;
 };
 
 // src/components/Focus/styles.ts
-var styles2 = {
+var styles = {
   container: {
-    // TODO(burdon): Handle selection (aria-current?)
-    // TODO(burdon): Use ring instead of border?
     root: [
-      "outline-none border border-separator rounded-sm",
+      // TODO(burdon): Option for border/rounded; ring/outline vs border?
+      "outline-none border border-separator md: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"
     ]
   }
@@ -428,32 +41,32 @@ var styles2 = {
 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";
+import { Slot } from "@radix-ui/react-slot";
+import React, { createContext, forwardRef, useContext, useRef, useState } from "react";
+import { mx } 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);
+var FocusContext = /* @__PURE__ */ createContext({});
+var useFocus = () => useContext(FocusContext);
+var Group = /* @__PURE__ */ forwardRef(({ classNames, className, children, asChild, orientation = "vertical", ...props }, forwardedRef) => {
+  const rootRef = useRef(null);
   const composedRef = useComposedRefs(rootRef, forwardedRef);
-  const Root2 = asChild ? Slot2 : Primitive.div;
+  const Root = asChild ? Slot : Primitive.div;
   const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: "limited-trap-focus"
   });
   const arrowNavigationAttrs = useArrowNavigationGroup({
-    axis,
+    axis: orientation,
     memorizeCurrent: true
   });
   const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
-  const [state, setState] = useState2();
-  return /* @__PURE__ */ React3.createElement(FocusContext.Provider, {
+  const [state, setState] = useState();
+  return /* @__PURE__ */ React.createElement(FocusContext.Provider, {
     value: {
       setFocus: setState
     }
-  }, /* @__PURE__ */ React3.createElement(Root2, {
+  }, /* @__PURE__ */ React.createElement(Root, {
     tabIndex: 0,
-    className: mx3(styles2.container.root, className, classNames),
+    className: mx(styles.container.root, className, classNames),
     ...tabsterAttrs,
     ...state && {
       [`data-${FOCUS_STATE_ATTR}`]: state
@@ -467,288 +80,59 @@ var Focus = {
 };
 
 // src/components/Mosaic/styles.ts
-var styles3 = {
+var styles2 = {
   placeholder: {
     root: [
       "group opacity-0",
-      'group-data-[mosaic-debug="true"]:bg-orange-500',
       '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"
+      "data-[mosaic-placeholder-orientation=vertical]:snap-start",
+      "data-[mosaic-placeholder-orientation=vertical]:plb-1",
+      "data-[mosaic-placeholder-orientation=vertical]:data-[mosaic-placeholder-state=active]:plb-2.5",
+      "data-[mosaic-placeholder-orientation=horizontal]:pli-1",
+      "data-[mosaic-placeholder-orientation=horizontal]:data-[mosaic-placeholder-state=active]:pli-2.5"
     ],
-    // TODO(burdon): Don't animate open if placeholder is the source.
     content: [
       "transition-all duration-0",
-      "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)]"
+      // 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-orientation=vertical]:bs-0",
+      "group-data-[mosaic-placeholder-orientation=vertical]:group-data-[mosaic-placeholder-state=active]:bs-[var(--mosaic-placeholder-height)]",
+      "group-data-[mosaic-placeholder-orientation=horizontal]:is-0",
+      "group-data-[mosaic-placeholder-orientation=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/components/Stack/Stack.tsx
-import { useVirtualizer } from "@tanstack/react-virtual";
-import React6, { Fragment, forwardRef as forwardRef5 } from "react";
-import { invariant } from "@dxos/invariant";
-import { mx as mx6 } from "@dxos/ui-theme";
-
-// src/hooks/useVisibleItems.ts
-import { useMemo } from "react";
-var useVisibleItems = ({ id, items, dragging, getId }) => {
-  const visibleItems = useMemo(() => {
-    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/Mosaic/types.ts
+var getSourceData = (source) => {
+  return source.data.type === "tile" ? source.data : null;
 };
 
-// src/components/Mosaic/Mosaic.tsx
+// src/components/Mosaic/Root.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 { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+import { createContext as createContext2 } 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 React5, { forwardRef as forwardRef4, useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
-import { createPortal } from "react-dom";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import React2, { forwardRef as forwardRef2, useCallback, useEffect, useRef as useRef2, useState as useState2 } from "react";
 import { log } from "@dxos/log";
-import { Json } from "@dxos/react-ui-syntax-highlighter";
-import { mx as mx5 } 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 as useMemo2, 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 = useMemo2(() => {
-    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 = useMemo2(() => {
-    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/Mosaic/Mosaic.tsx
-var __dxlog_file = "/__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__ */ forwardRef4(({ classNames, children, asChild, debug }, forwardedRef) => {
-  const rootRef = useRef4(null);
+import { mx as mx2 } from "@dxos/ui-theme";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Root.tsx";
+var [MosaicRootContextProvider, useMosaicRootContext] = createContext2("MosaicRoot");
+var MOSAIC_ROOT_NAME = "Mosaic.Root";
+var MOSAIC_ROOT_DEBUG_ATTR = "mosaic-debug";
+var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }, forwardedRef) => {
+  const rootRef = useRef2(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 Root = asChild ? Slot2 : Primitive2.div;
+  const [handlers, setHandlers] = useState2({});
+  const [dragging, setDragging] = useState2();
+  const getSourceHandler = useCallback((source) => {
     const data = source.data;
     return {
       data,
@@ -757,7 +141,7 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
   }, [
     handlers
   ]);
-  const getTargetHandler = useCallback2((location) => {
+  const getTargetHandler = useCallback((location) => {
     for (const target of location.current.dropTargets) {
       const data = target.data;
       let containerId;
@@ -782,7 +166,7 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
   }, [
     handlers
   ]);
-  useEffect2(() => {
+  useEffect(() => {
     const handleChange = ({ source, location }) => {
       const { data: sourceData } = getSourceHandler(source);
       const { data: targetData, handler } = getTargetHandler(location);
@@ -802,7 +186,19 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
         };
       });
     };
-    return monitorForElements({
+    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.
       */
@@ -812,7 +208,7 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 203,
+          L: 149,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -825,19 +221,24 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       * Dragging entered a new container.
       */
       onDropTargetChange: ({ source, location }) => {
+        clearTimeout(noTargetTimeout);
         log("Root.onDropTargetChange", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 215,
+          L: 162,
           S: void 0,
           C: (f, a) => f(...a)
         });
-        handleChange({
-          source,
-          location
-        });
+        if (location.current.dropTargets.length === 0) {
+          noTargetTimeout = setTimeout(() => setDragging(void 0), 1e3);
+        } else {
+          handleChange({
+            source,
+            location
+          });
+        }
       },
       /**
       * Dragging within any container.
@@ -860,12 +261,12 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       * Dragging ended.
       */
       onDrop: ({ source, location }) => {
-        log("Root.onDrop", {
+        log.info("Root.onDrop", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
           F: __dxlog_file,
-          L: 239,
+          L: 191,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -876,14 +277,21 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
             handlers: Object.keys(handlers)
           }, {
             F: __dxlog_file,
-            L: 247,
+            L: 199,
             S: void 0,
             C: (f, a) => f(...a)
           });
           return;
         }
         try {
-          if (location.current.dropTargets.length > 0) {
+          if (location.current.dropTargets.length === 0) {
+            log.info("cancelled", void 0, {
+              F: __dxlog_file,
+              L: 214,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+          } else {
             const { data: targetData, handler: targetHandler } = getTargetHandler(location);
             if (!targetHandler) {
               log.warn("invalid target", {
@@ -892,7 +300,7 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
                 handlers: Object.keys(handlers)
               }, {
                 F: __dxlog_file,
-                L: 260,
+                L: 219,
                 S: void 0,
                 C: (f, a) => f(...a)
               });
@@ -909,7 +317,7 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
                   source: sourceData
                 }, {
                   F: __dxlog_file,
-                  L: 276,
+                  L: 235,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -919,7 +327,6 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
                 source: sourceData
               }, async (object) => {
                 targetHandler.onDrop?.({
-                  // TODO(burdon): Change source!!!
                   source: {
                     ...sourceData,
                     data: object
@@ -931,24 +338,16 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
             }
           }
         } finally {
-          setDragging((dragging2) => {
-            requestAnimationFrame(() => {
-              dragging2?.target?.handler?.onCancel?.();
-              dragging2?.source?.container?.dispatchEvent(new CustomEvent("dnd:cancel", {
-                bubbles: true
-              }));
-            });
-            return void 0;
-          });
+          handleCancel();
         }
       }
-    });
+    }));
   }, [
     handlers,
     getSourceHandler,
     getTargetHandler
   ]);
-  return /* @__PURE__ */ React5.createElement(RootContextProvider, {
+  return /* @__PURE__ */ React2.createElement(MosaicRootContextProvider, {
     containers: handlers,
     addContainer: (container) => setHandlers((containers) => ({
       ...containers,
@@ -961,27 +360,42 @@ var Root = /* @__PURE__ */ forwardRef4(({ classNames, children, asChild, debug }
       };
     }),
     dragging
-  }, /* @__PURE__ */ React5.createElement(Root2, {
-    className: mx5("group overflow-hidden", classNames),
-    [`data-${ROOT_DEBUG_ATTR}`]: debug,
+  }, /* @__PURE__ */ React2.createElement(Root, {
+    className: mx2("group", classNames),
+    [`data-${MOSAIC_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";
+MosaicRoot.displayName = MOSAIC_ROOT_NAME;
+
+// src/components/Mosaic/Container.tsx
+import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
+import { createContext as createContext3 } from "@radix-ui/react-context";
+import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { bind } from "bind-event-listener";
+import React3, { forwardRef as forwardRef3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { mx as mx3 } from "@dxos/ui-theme";
+import { isTruthy } from "@dxos/util";
+var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
+var [MosaicContainerContextProvider, useMosaicContainerContext] = createContext3("MosaicContainer");
+var MOSAIC_CONTAINER_STATE_ATTR = "mosaic-container-state";
+var MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
+var MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
 var counter = 0;
-var Container = /* @__PURE__ */ forwardRef4(({ 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 = useMemo3(() => eventHandlerProp ?? {
+var MosaicContainer = /* @__PURE__ */ forwardRef3(({ classNames, className, children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
+  const rootRef = useRef3(null);
+  const composedRef = useComposedRefs3(rootRef, forwardedRef);
+  const Root = asChild ? Slot3 : Primitive3.div;
+  const eventHandler = useMemo2(() => eventHandlerProp ?? {
     id: `mosaic-container-${counter++}`
   }, [
     eventHandlerProp
   ]);
-  const { dragging } = useRootContext(Container.displayName);
+  const { dragging } = useMosaicRootContext(MOSAIC_CONTAINER_NAME);
   const [state, setState] = useState3({
     type: "idle"
   });
@@ -997,14 +411,14 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
     withFocus,
     state
   ]);
-  const { addContainer, removeContainer } = useRootContext(eventHandler.id);
+  const { addContainer, removeContainer } = useMosaicRootContext(eventHandler.id);
   useEffect2(() => {
     addContainer(eventHandler);
     return () => removeContainer(eventHandler.id);
   }, [
     eventHandler
   ]);
-  const data = useMemo3(() => ({
+  const data = useMemo2(() => ({
     type: "container",
     id: eventHandler.id
   }), [
@@ -1022,24 +436,18 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
         setScrolling(false);
       }, 500);
     };
-    return combine(...[
-      autoscrollElement && [
-        autoScrollForElements({
-          element: autoscrollElement,
-          canScroll: ({ element: _ }) => {
-            return true;
-          },
-          getAllowedAxis: () => axis,
-          getConfiguration: () => ({
-            maxScrollSpeed: "fast"
-          })
-        }),
-        bind(autoscrollElement, {
-          type: "scroll",
-          listener: handleScroll
-        }),
-        () => setScrolling(false)
-      ],
+    return combine2(...[
+      /**
+      * Custom event for dragging cancellation.
+      */
+      bind(rootRef.current, {
+        type: "dnd:cancel",
+        listener: () => {
+          setState({
+            type: "idle"
+          });
+        }
+      }),
       // Target.
       dropTargetForElements({
         element: rootRef.current,
@@ -1100,17 +508,26 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
           });
         }
       }),
-      /**
-      * Custom event for dragging cancellation.
-      */
-      bind(rootRef.current, {
-        type: "dnd:cancel",
-        listener: () => {
-          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: () => orientation,
+          getConfiguration: () => ({
+            maxScrollSpeed: "fast"
+          })
+        }),
+        bind(autoscrollElement, {
+          type: "scroll",
+          listener: handleScroll
+        }),
+        () => setScrolling(false)
+      ]
     ].filter(isTruthy).flatMap((x) => x));
   }, [
     rootRef,
@@ -1118,76 +535,53 @@ var Container = /* @__PURE__ */ forwardRef4(({ className, classNames, children,
     data,
     autoscrollElement
   ]);
-  return /* @__PURE__ */ React5.createElement(ContainerContextProvider, {
+  return /* @__PURE__ */ React3.createElement(MosaicContainerContextProvider, {
     id: eventHandler.id,
     eventHandler,
-    axis,
+    orientation,
     state,
     dragging: state.type === "active" ? dragging : void 0,
     scrolling,
     activeLocation,
     setActiveLocation
-  }, /* @__PURE__ */ React5.createElement(Root2, {
-    className: mx5("bs-full", className, classNames),
+  }, /* @__PURE__ */ React3.createElement(Root, {
+    className: mx3("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"
+      [MOSAIC_CONTAINER_PLACEHOLDER_WIDTH]: state.type === "active" && state.bounds ? `${state.bounds.width}px` : "0px",
+      [MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT]: state.type === "active" && state.bounds ? `${state.bounds.height}px` : "0px"
     },
     ...props,
-    [`data-${CONTAINER_STATE_ATTR}`]: state.type,
+    [`data-${MOSAIC_CONTAINER_STATE_ATTR}`]: state.type,
     ref: composedRef
   }, children), debug?.());
 });
-Container.displayName = "MosaicContainer";
-var useContainerDebug = (debug) => {
-  const debugRef = useRef4(null);
-  return useMemo3(() => {
-    if (!debug) {
-      return [
-        () => null,
-        void 0
-      ];
-    }
-    return [
-      ({ classNames }) => /* @__PURE__ */ React5.createElement("div", {
-        role: "none",
-        className: mx5("overflow-hidden", classNames),
-        ref: debugRef
-      }),
-      () => debugRef.current && /* @__PURE__ */ createPortal(/* @__PURE__ */ React5.createElement(ContainerInfo, null), debugRef.current)
-    ];
-  }, [
-    debug,
-    debugRef
-  ]);
-};
-var ContainerInfo = /* @__PURE__ */ forwardRef4(({ classNames }, forwardedRef) => {
-  const { id, state, activeLocation, scrolling } = useContainerContext(ContainerInfo.displayName);
-  const counter2 = useRef4(0);
-  return /* @__PURE__ */ React5.createElement(Json, {
-    data: {
-      id,
-      activeLocation,
-      scrolling,
-      state,
-      count: counter2.current++
-    },
-    classNames: mx5("text-xs", classNames),
-    ref: forwardedRef
-  });
-});
-ContainerInfo.displayName = "ContainerInfo";
-var [TileContextProvider, useTileContext] = createContext3("MosaicTile");
-var TILE_STATE_ATTR = "mosaic-tile-state";
-var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _ }, forwardedRef) => {
+MosaicContainer.displayName = MOSAIC_CONTAINER_NAME;
+
+// src/components/Mosaic/Tile.tsx
+import { combine as combine3 } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements as dropTargetForElements2 } 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 { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { createContext as createContext4 } from "@radix-ui/react-context";
+import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import React4, { forwardRef as forwardRef4, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+import { mx as mx4 } from "@dxos/ui-theme";
+var MOSAIC_TILE_NAME = "Mosaic.Tile";
+var [MosaicTileContextProvider, useMosaicTileContext] = createContext4("MosaicTile");
+var MOSAIC_TILE_STATE_ATTR = "mosaic-tile-state";
+var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, 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({
+  const Root = asChild ? Slot4 : Primitive4.div;
+  const { id: containerId, eventHandler, orientation, scrolling, setActiveLocation } = useMosaicContainerContext(MOSAIC_TILE_NAME);
+  const [state, setState] = useState4({
     type: "idle"
   });
-  const allowedEdges = useMemo3(() => allowedEdgesProp || (axis === "vertical" ? [
+  const allowedEdges = useMemo3(() => allowedEdgesProp || (orientation === "vertical" ? [
     "top",
     "bottom"
   ] : [
@@ -1195,7 +589,7 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
     "right"
   ]), [
     allowedEdgesProp,
-    axis
+    orientation
   ]);
   const data = useMemo3(() => ({
     type: "tile",
@@ -1224,7 +618,7 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
         });
       }
     };
-    return combine(
+    return combine3(
       // Source.
       draggable({
         element: root,
@@ -1263,7 +657,7 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
         }
       }),
       // Target.
-      dropTargetForElements({
+      dropTargetForElements2({
         element: root,
         getData: ({ input, element }) => attachClosestEdge(data, {
           input,
@@ -1311,152 +705,582 @@ var Tile = /* @__PURE__ */ forwardRef4(({ className, classNames, children, asChi
     allowedEdges,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React5.createElement(TileContextProvider, {
+  return /* @__PURE__ */ React4.createElement(MosaicTileContextProvider, {
     state
-  }, /* @__PURE__ */ React5.createElement(Root2, {
-    [`data-${TILE_STATE_ATTR}`]: state.type,
+  }, /* @__PURE__ */ React4.createElement(Root, {
+    [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
-    className: mx5("relative", className, classNames),
+    className: mx4("relative", className, classNames),
     ref: composedRef
-  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React5.createElement(Root2, {
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(Root, {
     // NOTE: Use to control appearance while dragging.
-    [`data-${TILE_STATE_ATTR}`]: state.type,
+    [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     // TODO(burdon): Configure drop animation.
-    className: mx5("relative", className, classNames),
+    className: mx4("relative", className, classNames),
     style: {
       width: `${state.rect.width}px`,
       height: `${state.rect.height}px`
     }
-  }, children), state.container));
+  }, children), state.container));
+});
+MosaicTile.displayName = MOSAIC_TILE_NAME;
+
+// src/components/Mosaic/Placeholder.tsx
+import { dropTargetForElements as dropTargetForElements3 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { DropIndicator as NativeDropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import React5, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef5 } from "react";
+import { mx as mx5 } from "@dxos/ui-theme";
+var MOSAIC_PLACEHOLDER_NAME = "Mosaic.Placeholder";
+var MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
+var MOSAIC_PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
+var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertical", location }) => {
+  const rootRef = useRef5(null);
+  const Root = asChild ? Slot5 : Primitive5.div;
+  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useMosaicContainerContext(MOSAIC_PLACEHOLDER_NAME);
+  const data = useMemo4(() => ({
+    type: "placeholder",
+    containerId,
+    location
+  }), [
+    containerId,
+    location
+  ]);
+  useLayoutEffect2(() => {
+    const root = rootRef.current;
+    if (!root || scrolling) {
+      return;
+    }
+    return dropTargetForElements3({
+      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__ */ React5.createElement(Root, {
+    [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
+    [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
+    role: "none",
+    className: mx5("relative", classNames),
+    ref: rootRef
+  }, children);
+};
+MosaicPlaceholder.displayName = MOSAIC_PLACEHOLDER_NAME;
+var DROP_INDICATOR_NAME = "Mosaic.DropIndicator";
+var MosaicDropIndicator = (props) => {
+  const { state } = useMosaicTileContext(DROP_INDICATOR_NAME);
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React5.createElement(NativeDropIndicator, {
+    ...props,
+    edge: state.closestEdge
+  }) : null;
+};
+MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
+
+// src/components/Mosaic/Stack.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import React8, { Fragment, forwardRef as forwardRef6 } from "react";
+import { invariant } from "@dxos/invariant";
+import { mx as mx8 } from "@dxos/ui-theme";
+
+// src/translations.ts
+var translationKey = "@dxos/react-ui-mosaic";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "add item label": "Add item",
+        "delete menu label": "Delete"
+      }
+    }
+  }
+];
+
+// src/components/Card/styles.ts
+var styles3 = {
+  root: "group/card relative min-bs-[--rail-item] is-full card-min-width overflow-hidden",
+  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/Card/Card.tsx
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import React7, { createContext as createContext5, forwardRef as forwardRef5, useContext as useContext2 } from "react";
+import { Button, DropdownMenu, Icon, Toolbar, useTranslation } from "@dxos/react-ui";
+import { mx as mx7 } from "@dxos/ui-theme";
+
+// src/components/Image/Image.tsx
+import React6, { useCallback as useCallback2, useRef as useRef6, useState as useState5 } from "react";
+import { mx as mx6 } from "@dxos/ui-theme";
+var cache = /* @__PURE__ */ new Map();
+var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize = 64, contrast = 0.9 }) => {
+  const [crossOriginState, setCrossOriginState] = useState5(crossOrigin);
+  const [dominantColor, setDominantColor] = useState5(void 0);
+  const [imageLoaded, setImageLoaded] = useState5(false);
+  const canvasRef = useRef6(null);
+  const handleImageError = () => {
+    setCrossOriginState(void 0);
+  };
+  const handleImageLoad = useCallback2(({ 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__ */ React6.createElement("div", {
+    className: mx6(`relative flex is-full justify-center overflow-hidden transition-all duration-700`, classNames),
+    style: {
+      backgroundColor: dominantColor
+    }
+  }, /* @__PURE__ */ React6.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      display: "none"
+    },
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ React6.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__ */ React6.createElement("img", {
+    src,
+    alt,
+    crossOrigin: crossOriginState,
+    onError: handleImageError,
+    onLoad: handleImageLoad,
+    className: mx6("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
+var CardContext = /* @__PURE__ */ createContext5({});
+var CardRoot = /* @__PURE__ */ forwardRef5(({ children, classNames, className, id, asChild, role = "group", border = true, fullWidth, ...props }, forwardedRef) => {
+  const Root = asChild ? Slot6 : "div";
+  return /* @__PURE__ */ React7.createElement(Root, {
+    ...id && {
+      "data-object-id": id
+    },
+    ...props,
+    role,
+    className: mx7(styles3.root, border && styles3.border, fullWidth && "!max-is-none", className, classNames),
+    ref: forwardedRef
+  }, children);
 });
-Tile.displayName = "MosaicTile";
-var PLACEHOLDER_AXIS_ATTR = "mosaic-placeholder-axis";
-var PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
-var Placeholder = ({ classNames, children, asChild, axis = "vertical", location }) => {
-  const rootRef = useRef4(null);
-  const Root2 = asChild ? Slot3 : Primitive2.div;
-  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(Placeholder.displayName);
-  const data = useMemo3(() => ({
-    type: "placeholder",
-    containerId,
-    location
-  }), [
-    containerId,
-    location
-  ]);
-  useLayoutEffect(() => {
-    const root = rootRef.current;
-    if (!root || scrolling) {
-      return;
+var CardToolbar = /* @__PURE__ */ forwardRef5(({ children, classNames, density = "fine", ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React7.createElement(Toolbar.Root, {
+    ...props,
+    classNames: [
+      "density-fine bg-transparent",
+      density === "fine" ? styles3.grid_3 : styles3.grid_3_coarse,
+      classNames
+    ],
+    ref: forwardedRef
+  }, children);
+});
+var CardToolbarIconButton = Toolbar.IconButton;
+var CardToolbarSeparator = Toolbar.Separator;
+var CardDragHandle = /* @__PURE__ */ forwardRef5((_, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React7.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__ */ forwardRef5(({ onClick }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React7.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 } = useContext2(CardContext) ?? {};
+  const combinedItems = [
+    ...items ?? [],
+    ...menuItems ?? []
+  ];
+  return /* @__PURE__ */ React7.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
+    disabled: !combinedItems.length,
+    asChild: true
+  }, /* @__PURE__ */ React7.createElement(Card.ToolbarIconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    label: t("action menu label")
+  })), (combinedItems?.length ?? 0) > 0 && /* @__PURE__ */ React7.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Viewport, null, combinedItems?.map(({ label, onClick: onSelect }, i) => /* @__PURE__ */ React7.createElement(DropdownMenu.Item, {
+    key: i,
+    onSelect: () => onSelect(context)
+  }, label))), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null))));
+};
+var CardTitle = /* @__PURE__ */ forwardRef5(({ children, classNames, className, asChild, role = "heading", ...props }, forwardedRef) => {
+  const Root = asChild ? Slot6 : "div";
+  return /* @__PURE__ */ React7.createElement(Root, {
+    ...props,
+    role,
+    className: mx7("grow truncate", classNames, className),
+    ref: forwardedRef
+  }, children);
+});
+var CardContent = /* @__PURE__ */ forwardRef5(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: "contents [&>:last-child]:pbe-1",
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+var CardRow = /* @__PURE__ */ forwardRef5(({ children, classNames, className, role = "none", icon, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React7.createElement("div", {
+    ...props,
+    role,
+    className: mx7(styles3.grid_2, "pli-1", classNames, className),
+    ref: forwardedRef
+  }, icon && /* @__PURE__ */ React7.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon
+  }) || /* @__PURE__ */ React7.createElement("div", null), children);
+});
+var CardHeading = /* @__PURE__ */ forwardRef5(({ children, classNames, className, asChild, role = "heading", variant = "default", ...props }, forwardedRef) => {
+  const Root = asChild ? Slot6 : "div";
+  const variantClassNames = {
+    default: "plb-1",
+    subtitle: "plb-2 text-xs text-description font-medium uppercase"
+  };
+  return /* @__PURE__ */ React7.createElement(Root, {
+    ...props,
+    role,
+    className: mx7(variantClassNames[variant], classNames, className),
+    ref: forwardedRef
+  }, children);
+});
+var CardText = /* @__PURE__ */ forwardRef5(({ children, classNames, className, asChild, role = "none", truncate, variant = "default", ...props }, forwardedRef) => {
+  const Root = asChild ? Slot6 : "div";
+  const variantClassNames = {
+    default: {
+      root: "plb-1"
+    },
+    description: {
+      root: "plb-1.5",
+      span: "text-sm text-description line-clamp-3"
     }
-    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__ */ React5.createElement(Root2, {
-    [`data-${PLACEHOLDER_AXIS_ATTR}`]: axis,
-    [`data-${PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
+  };
+  return /* @__PURE__ */ React7.createElement(Root, {
+    ...props,
+    role,
+    className: mx7("flex overflow-hidden", variantClassNames[variant].root, classNames, className),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React7.createElement("span", {
+    className: mx7(variantClassNames[variant].span, truncate && "truncate")
+  }, children));
+});
+var CardPoster = (props) => {
+  const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
+  if (props.image) {
+    return /* @__PURE__ */ React7.createElement("div", {
+      role: "none",
+      className: "mbe-1"
+    }, /* @__PURE__ */ React7.createElement(Image, {
+      classNames: [
+        styles3.poster,
+        aspect,
+        props.classNames
+      ],
+      src: props.image,
+      alt: props.alt
+    }));
+  }
+  if (props.icon) {
+    return /* @__PURE__ */ React7.createElement("div", {
+      role: "image",
+      className: mx7("grid place-items-center bg-inputSurface text-subdued", styles3.poster, aspect, props.classNames),
+      "aria-label": props.alt
+    }, /* @__PURE__ */ React7.createElement(Icon, {
+      icon: props.icon,
+      size: 10
+    }));
+  }
+};
+var CardAction = ({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) => {
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: mx5("relative", classNames),
-    ref: rootRef
+    className: "is-full pli-1"
+  }, /* @__PURE__ */ React7.createElement(Button, {
+    variant: "ghost",
+    classNames: mx7(styles3.grid_3, "!p-0 is-full text-start overflow-hidden"),
+    onClick
+  }, icon ? /* @__PURE__ */ React7.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon
+  }) : /* @__PURE__ */ React7.createElement("div", null), /* @__PURE__ */ React7.createElement("span", {
+    className: mx7("min-is-0 flex-1 truncate", !actionIcon && "col-span-2")
+  }, label), actionIcon && /* @__PURE__ */ React7.createElement(CardIcon, {
+    icon: actionIcon
+  })));
+};
+var CardLink = ({ label, href }) => {
+  return /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: "is-full pli-1"
+  }, /* @__PURE__ */ React7.createElement("a", {
+    className: mx7(styles3.grid_3, "group !p-0 dx-button dx-focus-ring !min-bs-1"),
+    "data-variant": "ghost",
+    href,
+    target: "_blank",
+    rel: "noreferrer"
+  }, /* @__PURE__ */ React7.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon: "ph--link--regular"
+  }), /* @__PURE__ */ React7.createElement("span", {
+    className: mx7("min-is-0 flex-1 truncate")
+  }, label), /* @__PURE__ */ React7.createElement(CardIcon, {
+    classNames: "invisible group-hover:visible",
+    icon: "ph--arrow-square-out--regular"
+  })));
+};
+var CardIconBlock = ({ classNames, children, role = "none", ...props }) => {
+  return /* @__PURE__ */ React7.createElement("div", {
+    ...props,
+    role,
+    className: mx7("grid bs-[var(--rail-item)] is-[var(--rail-item)] place-items-center", classNames)
   }, children);
 };
-Placeholder.displayName = "MosaicPlaceholder";
-var DropIndicator = (props) => {
-  const { state } = useTileContext(DropIndicator.displayName);
-  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React5.createElement(NativeDropIndicator, {
+var CardIcon = ({ toolbar, ...props }) => {
+  return /* @__PURE__ */ React7.createElement(CardIconBlock, null, /* @__PURE__ */ React7.createElement(Icon, {
     ...props,
-    edge: state.closestEdge
-  }) : null;
+    size: toolbar ? 5 : 4
+  }));
 };
-DropIndicator.displayName = "MosaicDropIndicator";
-var Mosaic = {
-  Root,
-  Container,
-  ContainerInfo,
-  Tile,
-  Placeholder,
-  DropIndicator,
-  // TODO(burdon): Move out of Mosaic namespace?
-  Viewport: Scrollable,
-  Stack,
-  VirtualStack
+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/Stack/Stack.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Stack/Stack.tsx";
-var StackInner = /* @__PURE__ */ forwardRef5(({ className, classNames, role = "list", axis = "vertical", draggable: draggable2 = true, items, getId, Tile: Tile2, debug, ...props }, forwardedRef) => {
-  invariant(Tile2, void 0, {
+// src/components/Mosaic/Stack.tsx
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Stack.tsx";
+var MOSAIC_STACK_NAME = "MosaicStack";
+var MosaicStackInner = /* @__PURE__ */ forwardRef6(({ classNames, className, role = "list", orientation: orientationProp = "vertical", draggable: draggable2 = true, items, getId, Tile, debug, ...props }, forwardedRef) => {
+  invariant(Tile, void 0, {
     F: __dxlog_file2,
-    L: 44,
+    L: 75,
     S: void 0,
     A: [
       "Tile",
       ""
     ]
   });
-  const { id, dragging } = useContainerContext(StackInner.displayName);
+  const { id, orientation = orientationProp, dragging } = useMosaicContainerContext(MOSAIC_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
     items,
     dragging: dragging?.source.data,
     getId
   });
-  return /* @__PURE__ */ React6.createElement("div", {
+  invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, {
+    F: __dxlog_file2,
+    L: 78,
+    S: void 0,
+    A: [
+      "orientation === 'vertical' || orientation === 'horizontal'",
+      "`Invalid orientation: ${orientation}`"
+    ]
+  });
+  return /* @__PURE__ */ React8.createElement("div", {
     ...props,
     role,
-    className: mx6("flex", axis === "horizontal" && "bs-full [&>*]:shrink-0", axis === "vertical" && "flex-col", classNames, className),
+    className: mx8("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React6.createElement(Placeholder2, {
-    axis,
+  }, /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
+    orientation,
     location: 0.5
-  }), visibleItems?.map((item, index) => /* @__PURE__ */ React6.createElement(Fragment, {
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React8.createElement(Fragment, {
     key: getId(item)
-  }, /* @__PURE__ */ React6.createElement(Tile2, {
+  }, /* @__PURE__ */ React8.createElement(Tile, {
     id: getId(item),
     data: item,
     location: index + 1,
     draggable: draggable2,
     debug
-  }), /* @__PURE__ */ React6.createElement(Placeholder2, {
-    axis,
+  }), /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
+    orientation,
     location: index + 1.5
   }))));
 });
-StackInner.displayName = "Stack";
-var Stack = StackInner;
-var VirtualStackInner = /* @__PURE__ */ forwardRef5(({ className, classNames, role = "list", axis = "vertical", items, getId, Tile: Tile2, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
-  invariant(Tile2, void 0, {
+MosaicStackInner.displayName = MOSAIC_STACK_NAME;
+var MosaicStack = MosaicStackInner;
+var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
+var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef6(({ classNames, className, role = "list", orientation = "vertical", items, getId, Tile, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
+  invariant(Tile, void 0, {
     F: __dxlog_file2,
-    L: 106,
+    L: 142,
     S: void 0,
     A: [
       "Tile",
       ""
     ]
   });
-  const { id, dragging } = useContainerContext(VirtualStackInner.displayName);
+  const { id, dragging } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
     items,
@@ -1471,13 +1295,13 @@ var VirtualStackInner = /* @__PURE__ */ forwardRef5(({ className, classNames, ro
     onChange
   });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React8.createElement("div", {
     ...props,
     role,
-    className: mx6("flex", axis === "horizontal" && "bs-full [&>*]:shrink-0", axis === "vertical" && "flex-col", classNames, className),
+    className: mx8("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
     style: {
       position: "relative",
-      ...axis === "vertical" ? {
+      ...orientation === "vertical" ? {
         width: "100%",
         height: virtualizer.getTotalSize()
       } : {
@@ -1488,14 +1312,14 @@ var VirtualStackInner = /* @__PURE__ */ forwardRef5(({ className, classNames, ro
     ref: forwardedRef
   }, virtualItems.map((virtualItem) => {
     const data = visibleItems[Math.floor(virtualItem.index / 2)];
-    return /* @__PURE__ */ React6.createElement("div", {
+    return /* @__PURE__ */ React8.createElement("div", {
       key: virtualItem.key,
       "data-index": virtualItem.index,
       style: {
         position: "absolute",
         top: 0,
         left: 0,
-        ...axis === "vertical" ? {
+        ...orientation === "vertical" ? {
           width: "100%",
           transform: `translateY(${virtualItem.start}px)`
         } : {
@@ -1504,10 +1328,10 @@ var VirtualStackInner = /* @__PURE__ */ forwardRef5(({ className, classNames, ro
         }
       },
       ref: virtualizer.measureElement
-    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React6.createElement(Placeholder2, {
-      axis,
+    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
+      orientation,
       location: Math.floor(virtualItem.index / 2) + 0.5
-    }) : /* @__PURE__ */ React6.createElement(Tile2, {
+    }) : /* @__PURE__ */ React8.createElement(Tile, {
       id: getId(data),
       data,
       location: Math.floor(virtualItem.index / 2) + 1,
@@ -1515,33 +1339,43 @@ var VirtualStackInner = /* @__PURE__ */ forwardRef5(({ className, classNames, ro
     }));
   }));
 });
-VirtualStackInner.displayName = "VirtualStackInner";
-var VirtualStack = VirtualStackInner;
-var Placeholder2 = (props) => {
-  return /* @__PURE__ */ React6.createElement(Mosaic.Placeholder, {
+MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
+var MosaicVirtualStack = MosaicVirtualStackInner;
+var InternalPlaceholder = (props) => {
+  return /* @__PURE__ */ React8.createElement(MosaicPlaceholder, {
     ...props,
-    classNames: styles3.placeholder.root
-  }, /* @__PURE__ */ React6.createElement("div", {
-    className: mx6("flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm", styles3.placeholder.content)
+    classNames: styles2.placeholder.root
+  }, /* @__PURE__ */ React8.createElement("div", {
+    className: mx8("flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm", styles2.placeholder.content)
   }));
 };
-Placeholder2.displayName = "Placeholder";
+InternalPlaceholder.displayName = "InternalPlaceholder";
+
+// src/components/Mosaic/Mosaic.tsx
+var Mosaic = {
+  Root: MosaicRoot,
+  Container: MosaicContainer,
+  Tile: MosaicTile,
+  Placeholder: MosaicPlaceholder,
+  DropIndicator: MosaicDropIndicator,
+  Stack: MosaicStack,
+  VirtualStack: MosaicVirtualStack
+};
 
 export {
+  useVisibleItems,
   styles,
-  Image,
-  Card,
-  styles2,
   useFocus,
   Focus,
+  styles2,
+  getSourceData,
+  useMosaicRootContext,
+  useMosaicContainerContext,
+  useMosaicTileContext,
+  Mosaic,
+  translationKey,
   styles3,
-  dropHandler,
-  Stack,
-  VirtualStack,
-  useRootContext,
-  useContainerContext,
-  useContainerDebug,
-  useTileContext,
-  Mosaic
+  Image,
+  Card
 };
-//# sourceMappingURL=chunk-FS5LRPMY.mjs.map
+//# sourceMappingURL=chunk-XNANTBOP.mjs.map