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

package/dist/lib/browser/{chunk-UMBPEG4F.mjs → chunk-Y6GU2CCU.mjs}

@@ -1,488 +1,97 @@
-// 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;
+  return visibleItems;
 };
-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++;
+
+// src/components/Focus/styles.ts
+var styles = {
+  container: {
+    root: [
+      // TODO(burdon): Option for border/rounded; ring/outline vs border?
+      "outline-none border border-separator md:rounded-sm",
+      // Focus (e.g., via tabster).
+      "focus:!border-accentSurface",
+      // Active (e.g., drop target).
+      "data-[focus-state=active]:border-neutralFocusIndicator",
+      // Error
+      "data-[focus-state=error]:border-rose-500"
+    ]
   }
-  return edgeTransparentPixels / edgePixels > threshold;
 };
 
-// src/components/Card/Card.tsx
+// 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 } 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]: {}
+import React, { createContext, forwardRef, useContext, useRef, useState } from "react";
+import { mx } from "@dxos/ui-theme";
+var FOCUS_STATE_ATTR = "focus-state";
+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 ? Slot : Primitive.div;
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited-trap-focus"
+  });
+  const arrowNavigationAttrs = useArrowNavigationGroup({
+    axis: orientation,
+    memorizeCurrent: true
+  });
+  const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
+  const [state, setState] = useState();
+  return /* @__PURE__ */ React.createElement(FocusContext.Provider, {
+    value: {
+      setFocus: setState
     }
-  }
-];
-
-// 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
+  }, /* @__PURE__ */ React.createElement(Root2, {
+    tabIndex: 0,
+    className: mx(styles.container.root, className, classNames),
+    ...tabsterAttrs,
+    ...state && {
+      [`data-${FOCUS_STATE_ATTR}`]: state
     },
     ...props,
-    role,
-    className: mx2(styles.root, border && styles.border, fullWidth && "!max-is-none", className, classNames),
-    ref: forwardedRef
-  }, children);
+    ref: composedRef
+  }, 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"
+var Focus = {
+  Group
+};
+
+// src/components/Mosaic/styles.ts
+var styles2 = {
+  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-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"
     ],
     content: [
       "transition-all duration-0",
@@ -490,10 +99,10 @@ var styles3 = {
       // 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)]"
+      "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)]"
     ]
   }
 };
@@ -624,11 +233,11 @@ var dropField = StateField.define({
   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/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/components/Mosaic/Mosaic.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -639,360 +248,81 @@ import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-sc
 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 { 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 { Slot as Slot2 } 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 React2, { forwardRef as forwardRef2, useCallback, useEffect, useLayoutEffect, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
-import { log as log2 } from "@dxos/log";
-import { mx as mx6 } from "@dxos/ui-theme";
+import { log } from "@dxos/log";
+import { mx as mx2 } 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 __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 Scrollable = /* @__PURE__ */ forwardRef3(({ classNames, axis = "vertical", padding, options: optionsProp = defaultOptions, onScroll, viewportRef, ...props }, forwardedRef) => {
-  const osRef = useRef3(null);
-  const options = useMemo(() => {
-    const options2 = {
-      ...optionsProp
+var [RootContextProvider, useRootContext] = createContext2("MosaicRoot");
+var ROOT_NAME = "Mosaic.Root";
+var ROOT_DEBUG_ATTR = "mosaic-debug";
+var Root = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, debug }, forwardedRef) => {
+  const rootRef = useRef2(null);
+  const composedRef = useComposedRefs2(rootRef, forwardedRef);
+  const Root2 = asChild ? Slot2 : Primitive2.div;
+  const [handlers, setHandlers] = useState2({});
+  const [dragging, setDragging] = useState2();
+  const getSourceHandler = useCallback((source) => {
+    const data = source.data;
+    return {
+      data,
+      handler: handlers[data.containerId]
     };
-    if (axis) {
-      options2.overflow = {
-        x: axis === "horizontal" ? "scroll" : "hidden",
-        y: axis === "vertical" ? "scroll" : "hidden"
-      };
-    }
-    return options2;
   }, [
-    axis,
-    optionsProp
-  ]);
-  useImperativeHandle(forwardedRef, () => osRef.current?.getElement(), [
-    osRef
+    handlers
   ]);
-  useEffect(() => {
-    const instance = osRef.current?.osInstance();
-    if (viewportRef) {
-      viewportRef(instance?.elements().viewport ?? null);
+  const getTargetHandler = useCallback((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 {};
   }, [
-    osRef,
-    viewportRef
+    handlers
   ]);
-  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
-          }
-        };
-      });
+  useEffect(() => {
+    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) => {
@@ -1011,12 +341,12 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
       * Dragging started within any container.
       */
       onDragStart: ({ source, location }) => {
-        log2("Root.onDragStart", {
+        log("Root.onDragStart", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file3,
-          L: 215,
+          F: __dxlog_file,
+          L: 219,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -1030,12 +360,12 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
       */
       onDropTargetChange: ({ source, location }) => {
         clearTimeout(noTargetTimeout);
-        log2("Root.onDropTargetChange", {
+        log("Root.onDropTargetChange", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file3,
-          L: 228,
+          F: __dxlog_file,
+          L: 232,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -1069,23 +399,23 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
       * Dragging ended.
       */
       onDrop: ({ source, location }) => {
-        log2.info("Root.onDrop", {
+        log.info("Root.onDrop", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
         }, {
-          F: __dxlog_file3,
-          L: 257,
+          F: __dxlog_file,
+          L: 261,
           S: void 0,
           C: (f, a) => f(...a)
         });
         const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
         if (!sourceHandler) {
-          log2.warn("invalid source", {
+          log.warn("invalid source", {
             source: sourceData,
             handlers: Object.keys(handlers)
           }, {
-            F: __dxlog_file3,
-            L: 265,
+            F: __dxlog_file,
+            L: 269,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -1093,22 +423,22 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
         }
         try {
           if (location.current.dropTargets.length === 0) {
-            log2.info("cancelled", void 0, {
-              F: __dxlog_file3,
-              L: 280,
+            log.info("cancelled", void 0, {
+              F: __dxlog_file,
+              L: 284,
               S: void 0,
               C: (f, a) => f(...a)
             });
           } else {
             const { data: targetData, handler: targetHandler } = getTargetHandler(location);
             if (!targetHandler) {
-              log2.warn("invalid target", {
+              log.warn("invalid target", {
                 source: sourceData,
                 location,
                 handlers: Object.keys(handlers)
               }, {
-                F: __dxlog_file3,
-                L: 285,
+                F: __dxlog_file,
+                L: 289,
                 S: void 0,
                 C: (f, a) => f(...a)
               });
@@ -1121,11 +451,11 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
               });
             } else {
               if (!sourceHandler.onTake) {
-                log2.warn("invalid source", {
+                log.warn("invalid source", {
                   source: sourceData
                 }, {
-                  F: __dxlog_file3,
-                  L: 301,
+                  F: __dxlog_file,
+                  L: 305,
                   S: void 0,
                   C: (f, a) => f(...a)
                 });
@@ -1155,7 +485,7 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
     getSourceHandler,
     getTargetHandler
   ]);
-  return /* @__PURE__ */ React6.createElement(RootContextProvider, {
+  return /* @__PURE__ */ React2.createElement(RootContextProvider, {
     containers: handlers,
     addContainer: (container) => setHandlers((containers) => ({
       ...containers,
@@ -1168,34 +498,36 @@ var Root = /* @__PURE__ */ forwardRef5(({ classNames, children, asChild, debug }
       };
     }),
     dragging
-  }, /* @__PURE__ */ React6.createElement(Root2, {
-    className: mx6("group overflow-hidden", classNames),
+  }, /* @__PURE__ */ React2.createElement(Root2, {
+    className: mx2("group", classNames),
     [`data-${ROOT_DEBUG_ATTR}`]: debug,
     ref: composedRef
   }, children));
 });
-var [ContainerContextProvider, useContainerContext] = createContext3("MosaicContainer");
+Root.displayName = ROOT_NAME;
+var CONTAINER_NAME = "Mosaic.Container";
+var [ContainerContextProvider, useContainerContext] = createContext2("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);
+var Container = /* @__PURE__ */ forwardRef2(({ className, classNames, children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, debug, ...props }, forwardedRef) => {
+  const rootRef = useRef2(null);
   const composedRef = useComposedRefs2(rootRef, forwardedRef);
-  const Root2 = asChild ? Slot3 : Primitive2.div;
-  const eventHandler = useMemo4(() => eventHandlerProp ?? {
+  const Root2 = asChild ? Slot2 : Primitive2.div;
+  const eventHandler = useMemo2(() => eventHandlerProp ?? {
     id: `mosaic-container-${counter++}`
   }, [
     eventHandlerProp
   ]);
-  const { dragging } = useRootContext(Container.displayName);
-  const [state, setState] = useState3({
+  const { dragging } = useRootContext(CONTAINER_NAME);
+  const [state, setState] = useState2({
     type: "idle"
   });
-  const [activeLocation, setActiveLocation] = useState3();
-  const [scrolling, setScrolling] = useState3(false);
+  const [activeLocation, setActiveLocation] = useState2();
+  const [scrolling, setScrolling] = useState2(false);
   const { setFocus } = useFocus();
-  useEffect2(() => {
+  useEffect(() => {
     if (withFocus) {
       setFocus?.(state.type === "active" ? "active" : void 0);
     }
@@ -1205,19 +537,19 @@ var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children,
     state
   ]);
   const { addContainer, removeContainer } = useRootContext(eventHandler.id);
-  useEffect2(() => {
+  useEffect(() => {
     addContainer(eventHandler);
     return () => removeContainer(eventHandler.id);
   }, [
     eventHandler
   ]);
-  const data = useMemo4(() => ({
+  const data = useMemo2(() => ({
     type: "container",
     id: eventHandler.id
   }), [
     eventHandler.id
   ]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!rootRef.current) {
       return;
     }
@@ -1310,7 +642,7 @@ var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children,
           // canScroll: ({ element: _ }) => {
           //   return true;
           // },
-          getAllowedAxis: () => axis,
+          getAllowedAxis: () => orientation,
           getConfiguration: () => ({
             maxScrollSpeed: "fast"
           })
@@ -1328,17 +660,17 @@ var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children,
     data,
     autoscrollElement
   ]);
-  return /* @__PURE__ */ React6.createElement(ContainerContextProvider, {
+  return /* @__PURE__ */ React2.createElement(ContainerContextProvider, {
     id: eventHandler.id,
     eventHandler,
-    axis,
+    orientation,
     state,
     dragging: state.type === "active" ? dragging : void 0,
     scrolling,
     activeLocation,
     setActiveLocation
-  }, /* @__PURE__ */ React6.createElement(Root2, {
-    className: mx6("bs-full", className, classNames),
+  }, /* @__PURE__ */ React2.createElement(Root2, {
+    className: mx2("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"
@@ -1348,18 +680,19 @@ var Container = /* @__PURE__ */ forwardRef5(({ className, classNames, children,
     ref: composedRef
   }, children), debug?.());
 });
-Container.displayName = "MosaicContainer";
-var [TileContextProvider, useTileContext] = createContext3("MosaicTile");
+Container.displayName = CONTAINER_NAME;
+var TILE_NAME = "Mosaic.Tile";
+var [TileContextProvider, useTileContext] = createContext2("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);
+var Tile = /* @__PURE__ */ forwardRef2(({ className, classNames, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _ }, forwardedRef) => {
+  const rootRef = useRef2(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 Root2 = asChild ? Slot2 : Primitive2.div;
+  const { id: containerId, eventHandler, orientation, scrolling, setActiveLocation } = useContainerContext(TILE_NAME);
+  const [state, setState] = useState2({
     type: "idle"
   });
-  const allowedEdges = useMemo4(() => allowedEdgesProp || (axis === "vertical" ? [
+  const allowedEdges = useMemo2(() => allowedEdgesProp || (orientation === "vertical" ? [
     "top",
     "bottom"
   ] : [
@@ -1367,9 +700,9 @@ var Tile = /* @__PURE__ */ forwardRef5(({ className, classNames, children, asChi
     "right"
   ]), [
     allowedEdgesProp,
-    axis
+    orientation
   ]);
-  const data = useMemo4(() => ({
+  const data = useMemo2(() => ({
     type: "tile",
     id,
     containerId,
@@ -1483,155 +816,663 @@ var Tile = /* @__PURE__ */ forwardRef5(({ className, classNames, children, asChi
     allowedEdges,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React6.createElement(TileContextProvider, {
+  return /* @__PURE__ */ React2.createElement(TileContextProvider, {
     state
-  }, /* @__PURE__ */ React6.createElement(Root2, {
+  }, /* @__PURE__ */ React2.createElement(Root2, {
     [`data-${TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
-    className: mx6("relative", className, classNames),
+    className: mx2("relative", className, classNames),
     ref: composedRef
-  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(Root2, {
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React2.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),
+    className: mx2("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;
+Tile.displayName = TILE_NAME;
+var PLACEHOLDER_NAME = "Mosaic.Placeholder";
+var PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
+var PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
+var Placeholder = ({ classNames, children, asChild, orientation = "vertical", location }) => {
+  const rootRef = useRef2(null);
+  const Root2 = asChild ? Slot2 : Primitive2.div;
+  const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useContainerContext(PLACEHOLDER_NAME);
+  const data = useMemo2(() => ({
+    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__ */ React2.createElement(Root2, {
+    [`data-${PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
+    [`data-${PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
+    role: "none",
+    className: mx2("relative", classNames),
+    ref: rootRef
+  }, children);
+};
+Placeholder.displayName = PLACEHOLDER_NAME;
+var DROP_INDICATOR_NAME = "Mosaic.DropIndicator";
+var DropIndicator = (props) => {
+  const { state } = useTileContext(DROP_INDICATOR_NAME);
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React2.createElement(NativeDropIndicator, {
+    ...props,
+    edge: state.closestEdge
+  }) : null;
+};
+DropIndicator.displayName = DROP_INDICATOR_NAME;
+var Mosaic = {
+  Root,
+  Container,
+  Tile,
+  Placeholder,
+  DropIndicator,
+  Stack,
+  VirtualStack
+};
+
+// 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 Slot3 } from "@radix-ui/react-slot";
+import React4, { createContext as createContext3, forwardRef as forwardRef3, useContext as useContext2 } from "react";
+import { Button, DropdownMenu, Icon, Toolbar, useTranslation } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/ui-theme";
+
+// src/components/Image/Image.tsx
+import React3, { useCallback as useCallback2, useRef as useRef3, useState as useState3 } from "react";
+import { mx as mx3 } from "@dxos/ui-theme";
+var cache = /* @__PURE__ */ new Map();
+var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize = 64, contrast = 0.9 }) => {
+  const [crossOriginState, setCrossOriginState] = useState3(crossOrigin);
+  const [dominantColor, setDominantColor] = useState3(void 0);
+  const [imageLoaded, setImageLoaded] = useState3(false);
+  const canvasRef = useRef3(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__ */ React3.createElement("div", {
+    className: mx3(`relative flex is-full justify-center overflow-hidden transition-all duration-700`, classNames),
+    style: {
+      backgroundColor: dominantColor
+    }
+  }, /* @__PURE__ */ React3.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      display: "none"
+    },
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ React3.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__ */ React3.createElement("img", {
+    src,
+    alt,
+    crossOrigin: crossOriginState,
+    onError: handleImageError,
+    onLoad: handleImageLoad,
+    className: mx3("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__ */ createContext3({});
+var CardRoot = /* @__PURE__ */ forwardRef3(({ children, classNames, className, id, asChild, role = "group", border = true, fullWidth, ...props }, forwardedRef) => {
+  const Root2 = asChild ? Slot3 : "div";
+  return /* @__PURE__ */ React4.createElement(Root2, {
+    ...id && {
+      "data-object-id": id
+    },
+    ...props,
+    role,
+    className: mx4(styles3.root, border && styles3.border, fullWidth && "!max-is-none", className, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var CardToolbar = /* @__PURE__ */ forwardRef3(({ children, classNames, density = "fine", ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React4.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__ */ forwardRef3((_, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React4.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__ */ forwardRef3(({ onClick }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React4.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__ */ React4.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
+    disabled: !combinedItems.length,
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(Card.ToolbarIconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    label: t("action menu label")
+  })), (combinedItems?.length ?? 0) > 0 && /* @__PURE__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, combinedItems?.map(({ label, onClick: onSelect }, i) => /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+    key: i,
+    onSelect: () => onSelect(context)
+  }, label))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
+};
+var CardTitle = /* @__PURE__ */ forwardRef3(({ children, classNames, className, asChild, role = "heading", ...props }, forwardedRef) => {
+  const Root2 = asChild ? Slot3 : "div";
+  return /* @__PURE__ */ React4.createElement(Root2, {
+    ...props,
+    role,
+    className: mx4("grow truncate", classNames, className),
+    ref: forwardedRef
+  }, children);
+});
+var CardContent = /* @__PURE__ */ forwardRef3(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: "contents [&>:last-child]:pbe-1",
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+var CardRow = /* @__PURE__ */ forwardRef3(({ children, classNames, className, role = "none", icon, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React4.createElement("div", {
+    ...props,
+    role,
+    className: mx4(styles3.grid_2, "pli-1", classNames, className),
+    ref: forwardedRef
+  }, icon && /* @__PURE__ */ React4.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon
+  }) || /* @__PURE__ */ React4.createElement("div", null), children);
+});
+var CardHeading = /* @__PURE__ */ forwardRef3(({ children, classNames, className, asChild, role = "heading", variant = "default", ...props }, forwardedRef) => {
+  const Root2 = asChild ? Slot3 : "div";
+  const variantClassNames = {
+    default: "plb-1",
+    subtitle: "plb-2 text-xs text-description font-medium uppercase"
+  };
+  return /* @__PURE__ */ React4.createElement(Root2, {
+    ...props,
+    role,
+    className: mx4(variantClassNames[variant], classNames, className),
+    ref: forwardedRef
+  }, children);
+});
+var CardText = /* @__PURE__ */ forwardRef3(({ children, classNames, className, asChild, role = "none", truncate, variant = "default", ...props }, forwardedRef) => {
+  const Root2 = asChild ? Slot3 : "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__ */ React6.createElement(Root2, {
-    [`data-${PLACEHOLDER_AXIS_ATTR}`]: axis,
-    [`data-${PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
+  };
+  return /* @__PURE__ */ React4.createElement(Root2, {
+    ...props,
+    role,
+    className: mx4("flex overflow-hidden", variantClassNames[variant].root, classNames, className),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React4.createElement("span", {
+    className: mx4(variantClassNames[variant].span, truncate && "truncate")
+  }, children));
+});
+var CardPoster = (props) => {
+  const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
+  if (props.image) {
+    return /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: "mbe-1"
+    }, /* @__PURE__ */ React4.createElement(Image, {
+      classNames: [
+        styles3.poster,
+        aspect,
+        props.classNames
+      ],
+      src: props.image,
+      alt: props.alt
+    }));
+  }
+  if (props.icon) {
+    return /* @__PURE__ */ React4.createElement("div", {
+      role: "image",
+      className: mx4("grid place-items-center bg-inputSurface text-subdued", styles3.poster, aspect, props.classNames),
+      "aria-label": props.alt
+    }, /* @__PURE__ */ React4.createElement(Icon, {
+      icon: props.icon,
+      size: 10
+    }));
+  }
+};
+var CardAction = ({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) => {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: mx6("relative", classNames),
-    ref: rootRef
+    className: "is-full pli-1"
+  }, /* @__PURE__ */ React4.createElement(Button, {
+    variant: "ghost",
+    classNames: mx4(styles3.grid_3, "!p-0 is-full text-start overflow-hidden"),
+    onClick
+  }, icon ? /* @__PURE__ */ React4.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon
+  }) : /* @__PURE__ */ React4.createElement("div", null), /* @__PURE__ */ React4.createElement("span", {
+    className: mx4("min-is-0 flex-1 truncate", !actionIcon && "col-span-2")
+  }, label), actionIcon && /* @__PURE__ */ React4.createElement(CardIcon, {
+    icon: actionIcon
+  })));
+};
+var CardLink = ({ label, href }) => {
+  return /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: "is-full pli-1"
+  }, /* @__PURE__ */ React4.createElement("a", {
+    className: mx4(styles3.grid_3, "group !p-0 dx-button dx-focus-ring !min-bs-1"),
+    "data-variant": "ghost",
+    href,
+    target: "_blank",
+    rel: "noreferrer"
+  }, /* @__PURE__ */ React4.createElement(CardIcon, {
+    classNames: "text-subdued",
+    icon: "ph--link--regular"
+  }), /* @__PURE__ */ React4.createElement("span", {
+    className: mx4("min-is-0 flex-1 truncate")
+  }, label), /* @__PURE__ */ React4.createElement(CardIcon, {
+    classNames: "invisible group-hover:visible",
+    icon: "ph--arrow-square-out--regular"
+  })));
+};
+var CardIconBlock = ({ classNames, children, role = "none", ...props }) => {
+  return /* @__PURE__ */ React4.createElement("div", {
+    ...props,
+    role,
+    className: mx4("grid bs-[var(--rail-item)] is-[var(--rail-item)] place-items-center", classNames)
   }, children);
 };
-Placeholder2.displayName = "MosaicPlaceholder";
-var DropIndicator = (props) => {
-  const { state } = useTileContext(DropIndicator.displayName);
-  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React6.createElement(NativeDropIndicator, {
+var CardIcon = ({ toolbar, ...props }) => {
+  return /* @__PURE__ */ React4.createElement(CardIconBlock, null, /* @__PURE__ */ React4.createElement(Icon, {
     ...props,
-    edge: state.closestEdge
-  }) : null;
+    size: toolbar ? 5 : 4
+  }));
 };
-DropIndicator.displayName = "MosaicDropIndicator";
-var Mosaic = {
-  Root,
-  Container,
-  Tile,
-  Placeholder: Placeholder2,
-  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/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),
+// src/components/Stack/Stack.tsx
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Stack/Stack.tsx";
+var STACK_NAME = "Stack";
+var StackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, role = "list", orientation: orientationProp = "vertical", draggable: draggable2 = true, items, getId, Tile: Tile2, debug, ...props }, forwardedRef) => {
+  invariant(Tile2, void 0, {
+    F: __dxlog_file2,
+    L: 50,
+    S: void 0,
+    A: [
+      "Tile",
+      ""
+    ]
+  });
+  const { id, orientation = orientationProp, dragging } = useContainerContext(STACK_NAME);
+  const visibleItems = useVisibleItems({
+    id,
+    items,
+    dragging: dragging?.source.data,
+    getId
+  });
+  invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, {
+    F: __dxlog_file2,
+    L: 53,
+    S: void 0,
+    A: [
+      "orientation === 'vertical' || orientation === 'horizontal'",
+      "`Invalid orientation: ${orientation}`"
+    ]
+  });
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...props,
+    role,
+    className: mx5("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
     ref: forwardedRef
+  }, /* @__PURE__ */ React5.createElement(Placeholder2, {
+    orientation,
+    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(Placeholder2, {
+    orientation,
+    location: index + 1.5
+  }))));
+});
+StackInner.displayName = STACK_NAME;
+var Stack = StackInner;
+var VIRTUAL_STACK_NAME = "VirtualStackInner";
+var VirtualStackInner = /* @__PURE__ */ forwardRef4(({ className, classNames, role = "list", orientation = "vertical", items, getId, Tile: Tile2, estimateSize, getScrollElement, overscan = 8, onChange, debug, ...props }, forwardedRef) => {
+  invariant(Tile2, void 0, {
+    F: __dxlog_file2,
+    L: 115,
+    S: void 0,
+    A: [
+      "Tile",
+      ""
+    ]
+  });
+  const { id, dragging } = useContainerContext(VIRTUAL_STACK_NAME);
+  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", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
+    style: {
+      position: "relative",
+      ...orientation === "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,
+        ...orientation === "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(Placeholder2, {
+      orientation,
+      location: Math.floor(virtualItem.index / 2) + 0.5
+    }) : /* @__PURE__ */ React5.createElement(Tile2, {
+      id: getId(data),
+      data,
+      location: Math.floor(virtualItem.index / 2) + 1,
+      debug
+    }));
+  }));
 });
-ContainerInfo.displayName = "ContainerInfo";
+VirtualStackInner.displayName = VIRTUAL_STACK_NAME;
+var VirtualStack = VirtualStackInner;
+var Placeholder2 = (props) => {
+  return /* @__PURE__ */ React5.createElement(Mosaic.Placeholder, {
+    ...props,
+    classNames: styles2.placeholder.root
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: mx5("flex bs-full bg-baseSurface border border-dashed border-separator rounded-sm", styles2.placeholder.content)
+  }));
+};
+Placeholder2.displayName = "Placeholder";
 
 export {
+  useVisibleItems,
   styles,
-  Image,
-  Card,
-  styles2,
   useFocus,
   Focus,
-  styles3,
+  styles2,
   dropHandler,
-  useContainerDebug,
-  useEventHandlerAdapter,
-  useVisibleItems,
   Stack,
   VirtualStack,
   useRootContext,
   useContainerContext,
   useTileContext,
-  Mosaic
+  Mosaic,
+  translationKey,
+  styles3,
+  Image,
+  Card
 };
-//# sourceMappingURL=chunk-UMBPEG4F.mjs.map
+//# sourceMappingURL=chunk-Y6GU2CCU.mjs.map