@dxos/react-ui-mosaic 0.8.4-main.2244d791bb → 0.8.4-main.4a85c3132b

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

@@ -21,22 +21,6 @@ var useVisibleItems = ({ id, items, dragging, getId }) => {
   return visibleItems;
 };
 
-// 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"
-    ]
-  }
-};
-
 // src/components/Focus/Focus.tsx
 import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable } from "@fluentui/react-tabster";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
@@ -50,7 +34,7 @@ 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 Root = asChild ? Slot : Primitive.div;
+  const Comp = asChild ? Slot : Primitive.div;
   const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: "limited-trap-focus"
   });
@@ -64,14 +48,23 @@ var Group = /* @__PURE__ */ forwardRef(({ classNames, className, children, asChi
     value: {
       setFocus: setState
     }
-  }, /* @__PURE__ */ React.createElement(Root, {
-    tabIndex: 0,
-    className: mx(styles.container.root, className, classNames),
+  }, /* @__PURE__ */ React.createElement(Comp, {
+    ...props,
     ...tabsterAttrs,
     ...state && {
       [`data-${FOCUS_STATE_ATTR}`]: state
     },
-    ...props,
+    tabIndex: 0,
+    className: mx([
+      // TODO(burdon): Option for border/rounded; ring/outline vs border?
+      "outline-hidden border border-separator md:rounded-xs",
+      // Focus (e.g., via tabster).
+      "focus:!border-accent-surface",
+      // Active (e.g., drop target).
+      "data-[focus-state=active]:border-neutral-focus-indicator",
+      // Error
+      "data-[focus-state=error]:border-rose-500"
+    ], className, classNames),
     ref: composedRef
   }, children));
 });
@@ -80,7 +73,7 @@ var Focus = {
 };
 
 // src/components/Mosaic/styles.ts
-var styles2 = {
+var styles = {
   placeholder: {
     root: [
       "group opacity-0",
@@ -88,10 +81,10 @@ var styles2 = {
       '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"
+      "data-[mosaic-placeholder-orientation=vertical]:py-1",
+      "data-[mosaic-placeholder-orientation=vertical]:data-[mosaic-placeholder-state=active]:py-2.5",
+      "data-[mosaic-placeholder-orientation=horizontal]:px-1",
+      "data-[mosaic-placeholder-orientation=horizontal]:data-[mosaic-placeholder-state=active]:px-2.5"
     ],
     content: [
       "transition-all duration-0",
@@ -99,10 +92,10 @@ var styles2 = {
       // 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)]"
+      "group-data-[mosaic-placeholder-orientation=vertical]:h-0",
+      "group-data-[mosaic-placeholder-orientation=vertical]:group-data-[mosaic-placeholder-state=active]:h-[var(--mosaic-placeholder-height)]",
+      "group-data-[mosaic-placeholder-orientation=horizontal]:w-0",
+      "group-data-[mosaic-placeholder-orientation=horizontal]:group-data-[mosaic-placeholder-state=active]:w-[var(--mosaic-placeholder-width)]"
     ]
   }
 };
@@ -129,7 +122,7 @@ 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 Root = asChild ? Slot2 : Primitive2.div;
+  const Comp = asChild ? Slot2 : Primitive2.div;
   const [handlers, setHandlers] = useState2({});
   const [dragging, setDragging] = useState2();
   const getSourceHandler = useCallback((source) => {
@@ -360,7 +353,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef2(({ classNames, children, asChild, d
       };
     }),
     dragging
-  }, /* @__PURE__ */ React2.createElement(Root, {
+  }, /* @__PURE__ */ React2.createElement(Comp, {
     className: mx2("group", classNames),
     [`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,
     ref: composedRef
@@ -389,7 +382,7 @@ var counter = 0;
 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 Comp = asChild ? Slot3 : Primitive3.div;
   const eventHandler = useMemo2(() => eventHandlerProp ?? {
     id: `mosaic-container-${counter++}`
   }, [
@@ -544,8 +537,8 @@ var MosaicContainer = /* @__PURE__ */ forwardRef3(({ classNames, className, chil
     scrolling,
     activeLocation,
     setActiveLocation
-  }, /* @__PURE__ */ React3.createElement(Root, {
-    className: mx3("bs-full", className, classNames),
+  }, /* @__PURE__ */ React3.createElement(Comp, {
+    className: mx3("h-full", className, classNames),
     style: {
       [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"
@@ -573,10 +566,10 @@ 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) => {
+var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, debug: _, ...props }, forwardedRef) => {
   const rootRef = useRef4(null);
   const composedRef = composeRefs(rootRef, forwardedRef);
-  const Root = asChild ? Slot4 : Primitive4.div;
+  const Comp = asChild ? Slot4 : Primitive4.div;
   const { id: containerId, eventHandler, orientation, scrolling, setActiveLocation } = useMosaicContainerContext(MOSAIC_TILE_NAME);
   const [state, setState] = useState4({
     type: "idle"
@@ -707,12 +700,13 @@ var MosaicTile = /* @__PURE__ */ forwardRef4(({ classNames, className, children,
   ]);
   return /* @__PURE__ */ React4.createElement(MosaicTileContextProvider, {
     state
-  }, /* @__PURE__ */ React4.createElement(Root, {
+  }, /* @__PURE__ */ React4.createElement(Comp, {
+    ...props,
     [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
     className: mx4("relative", className, classNames),
     ref: composedRef
-  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(Root, {
+  }, children), state.type === "preview" && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement(Comp, {
     // NOTE: Use to control appearance while dragging.
     [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     // TODO(burdon): Configure drop animation.
@@ -727,7 +721,7 @@ 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 { DropIndicator as NaturalDropIndicator } 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";
@@ -737,7 +731,7 @@ 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 Comp = asChild ? Slot5 : Primitive5.div;
   const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useMosaicContainerContext(MOSAIC_PLACEHOLDER_NAME);
   const data = useMemo4(() => ({
     type: "placeholder",
@@ -777,7 +771,7 @@ var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertica
     scrolling,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React5.createElement(Root, {
+  return /* @__PURE__ */ React5.createElement(Comp, {
     [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
     [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
     role: "none",
@@ -789,7 +783,7 @@ 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, {
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React5.createElement(NaturalDropIndicator, {
     ...props,
     edge: state.closestEdge
   }) : null;
@@ -798,429 +792,12 @@ 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 React6, { Fragment, forwardRef as forwardRef5 } 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);
-});
-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 /* @__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: "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);
-};
-var CardIcon = ({ toolbar, ...props }) => {
-  return /* @__PURE__ */ React7.createElement(CardIconBlock, null, /* @__PURE__ */ React7.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/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) => {
+var MosaicStackInner = /* @__PURE__ */ forwardRef5(({ classNames, className, role = "list", orientation: orientationProp = "vertical", draggable: draggable2 = true, items, getId, Tile, debug, ...props }, forwardedRef) => {
   invariant(Tile, void 0, {
     F: __dxlog_file2,
     L: 75,
@@ -1246,23 +823,23 @@ var MosaicStackInner = /* @__PURE__ */ forwardRef6(({ classNames, className, rol
       "`Invalid orientation: ${orientation}`"
     ]
   });
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     ...props,
     role,
-    className: mx8("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
+    className: mx6("flex", orientation === "horizontal" && "h-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
+  }, /* @__PURE__ */ React6.createElement(InternalPlaceholder, {
     orientation,
     location: 0.5
-  }), visibleItems?.map((item, index) => /* @__PURE__ */ React8.createElement(Fragment, {
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React6.createElement(Fragment, {
     key: getId(item)
-  }, /* @__PURE__ */ React8.createElement(Tile, {
+  }, /* @__PURE__ */ React6.createElement(Tile, {
     id: getId(item),
     data: item,
     location: index + 1,
     draggable: draggable2,
     debug
-  }), /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
+  }), /* @__PURE__ */ React6.createElement(InternalPlaceholder, {
     orientation,
     location: index + 1.5
   }))));
@@ -1270,7 +847,7 @@ var MosaicStackInner = /* @__PURE__ */ forwardRef6(({ classNames, className, rol
 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) => {
+var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef5(({ 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: 142,
@@ -1295,10 +872,10 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef6(({ classNames, classNa
     onChange
   });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     ...props,
     role,
-    className: mx8("flex", orientation === "horizontal" && "bs-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
+    className: mx6("flex", orientation === "horizontal" && "h-full [&>*]:shrink-0", orientation === "vertical" && "flex-col", classNames, className),
     style: {
       position: "relative",
       ...orientation === "vertical" ? {
@@ -1312,7 +889,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef6(({ classNames, classNa
     ref: forwardedRef
   }, virtualItems.map((virtualItem) => {
     const data = visibleItems[Math.floor(virtualItem.index / 2)];
-    return /* @__PURE__ */ React8.createElement("div", {
+    return /* @__PURE__ */ React6.createElement("div", {
       key: virtualItem.key,
       "data-index": virtualItem.index,
       style: {
@@ -1328,10 +905,10 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef6(({ classNames, classNa
         }
       },
       ref: virtualizer.measureElement
-    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React8.createElement(InternalPlaceholder, {
+    }, virtualItem.index % 2 === 0 ? /* @__PURE__ */ React6.createElement(InternalPlaceholder, {
       orientation,
       location: Math.floor(virtualItem.index / 2) + 0.5
-    }) : /* @__PURE__ */ React8.createElement(Tile, {
+    }) : /* @__PURE__ */ React6.createElement(Tile, {
       id: getId(data),
       data,
       location: Math.floor(virtualItem.index / 2) + 1,
@@ -1342,11 +919,11 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef6(({ classNames, classNa
 MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
 var MosaicVirtualStack = MosaicVirtualStackInner;
 var InternalPlaceholder = (props) => {
-  return /* @__PURE__ */ React8.createElement(MosaicPlaceholder, {
+  return /* @__PURE__ */ React6.createElement(MosaicPlaceholder, {
     ...props,
-    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)
+    classNames: styles.placeholder.root
+  }, /* @__PURE__ */ React6.createElement("div", {
+    className: mx6("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content)
   }));
 };
 InternalPlaceholder.displayName = "InternalPlaceholder";
@@ -1364,18 +941,13 @@ var Mosaic = {
 
 export {
   useVisibleItems,
-  styles,
   useFocus,
   Focus,
-  styles2,
+  styles,
   getSourceData,
   useMosaicRootContext,
   useMosaicContainerContext,
   useMosaicTileContext,
-  Mosaic,
-  translationKey,
-  styles3,
-  Image,
-  Card
+  Mosaic
 };
-//# sourceMappingURL=chunk-XNANTBOP.mjs.map
+//# sourceMappingURL=chunk-7S4PIFKU.mjs.map