@dxos/react-ui-mosaic 0.10.0 → 0.11.0

package/dist/lib/chunk-Mosaic.mjs

@@ -0,0 +1,1024 @@
+import { createContext } from "@radix-ui/react-context";
+import { Fragment, forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Button, Focus, IconButton, composable, composableProps, slottable, useFocus, useTranslation } from "@dxos/react-ui";
+import { ResizeHandle, getSourceData, resizeAttributes, sizeStyle, useDndRootContext } from "@dxos/react-ui-dnd";
+import { mx } from "@dxos/ui-theme";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isTruthy } from "@dxos/util";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import { bind } from "bind-event-listener";
+import { DropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { invariant } from "@dxos/invariant";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+//#region src/hooks/useVirtualizerPagination.ts
+/** Rows from either loaded edge at which the next/previous page is requested. */
+var DEFAULT_THRESHOLD = 12;
+/** Index at/above which `getNext` fires; small windows clamp to the last row only. */
+var nextPageIndexThreshold = (itemCount, threshold) => itemCount > threshold ? itemCount - threshold : itemCount - 1;
+/** True when loaded content exceeds the scroll viewport (user can actually scroll). */
+var isScrollable = (virtualizer) => {
+	const viewportHeight = virtualizer.scrollElement?.clientHeight ?? 0;
+	return viewportHeight > 0 && virtualizer.getTotalSize() > viewportHeight + 1;
+};
+var readEdgeGeometry = (virtualizer) => {
+	const virtualItems = virtualizer.getVirtualItems();
+	const measurements = virtualizer.measurementsCache;
+	return {
+		scrollOffset: virtualizer.scrollOffset ?? 0,
+		viewportHeight: virtualizer.scrollElement?.clientHeight ?? 0,
+		firstVisibleIndex: virtualItems.at(0)?.index,
+		lastVisibleIndex: virtualItems.at(-1)?.index,
+		windowStart: measurements[0]?.start,
+		windowEnd: measurements.at(-1)?.end
+	};
+};
+var isNearBottomEdge = (geometry, itemCount, threshold) => geometry.lastVisibleIndex !== void 0 ? geometry.lastVisibleIndex >= nextPageIndexThreshold(itemCount, threshold) : geometry.windowEnd != null && geometry.scrollOffset + geometry.viewportHeight > geometry.windowEnd;
+var isNearTopEdge = (geometry, threshold) => geometry.firstVisibleIndex !== void 0 ? geometry.firstVisibleIndex < threshold : geometry.windowStart != null && geometry.scrollOffset < geometry.windowStart;
+/** Loaded content doesn't reach the viewport's top edge (e.g. scrolled into the leading spacer). */
+var isBlankAbove = (geometry) => geometry.windowStart != null && geometry.windowStart > geometry.scrollOffset;
+/** Loaded content doesn't reach the viewport's bottom edge. */
+var isBlankBelow = (geometry) => geometry.windowEnd != null && geometry.windowEnd < geometry.scrollOffset + geometry.viewportHeight;
+/** Not fired at this exact scroll offset since the edge was last left, unless blank re-arms it. */
+var canRequestNext = (state, geometry) => state.lastGetNextScrollRef.current === null || geometry.scrollOffset !== state.lastGetNextScrollRef.current || isBlankBelow(geometry);
+var canRequestPrevious = (state, geometry) => state.lastGetPreviousScrollRef.current === null || geometry.scrollOffset !== state.lastGetPreviousScrollRef.current || isBlankAbove(geometry);
+var requestNext = (state, items, scrollOffset) => {
+	state.lastNextRequestedItemsRef.current = items;
+	state.lastGetNextScrollRef.current = scrollOffset;
+	const getNext = state.paginationRef.current?.getNext;
+	queueMicrotask(() => getNext?.());
+};
+var requestPrevious = (state, items, scrollOffset) => {
+	state.lastPreviousRequestedItemsRef.current = items;
+	state.lastGetPreviousScrollRef.current = scrollOffset;
+	const getPrevious = state.paginationRef.current?.getPrevious;
+	queueMicrotask(() => getPrevious?.());
+};
+/**
+* Requests `getNext`/`getPrevious` once the loaded window's edge nears the viewport. Deduped per
+* direction and per `items` snapshot; re-armed while the viewport sits in blank space so a chain
+* of pages loads back-to-back without further user scrolling.
+*/
+var evaluateTriggers = ({ virtualizer, items, pagination, itemCount, threshold, state }) => {
+	const geometry = readEdgeGeometry(virtualizer);
+	const scrollable = isScrollable(virtualizer);
+	const smallWindow = itemCount <= threshold;
+	const nearBottom = isNearBottomEdge(geometry, itemCount, threshold);
+	const nearTop = isNearTopEdge(geometry, threshold);
+	if (!nearBottom) state.lastGetNextScrollRef.current = null;
+	if (!nearTop) state.lastGetPreviousScrollRef.current = null;
+	const triggerNext = !!pagination?.getNext && !pagination.isLoading && scrollable && nearBottom && (!smallWindow || geometry.scrollOffset > 0) && canRequestNext(state, geometry);
+	const triggerPrevious = !!pagination?.getPrevious && !pagination.isLoading && scrollable && nearTop && pagination.atHead !== true && canRequestPrevious(state, geometry);
+	if (!triggerNext) state.lastNextRequestedItemsRef.current = void 0;
+	if (!triggerPrevious) state.lastPreviousRequestedItemsRef.current = void 0;
+	if (triggerNext && state.lastNextRequestedItemsRef.current !== items) requestNext(state, items, geometry.scrollOffset);
+	else if (triggerPrevious && state.lastPreviousRequestedItemsRef.current !== items) requestPrevious(state, items, geometry.scrollOffset);
+};
+/** Total height (px) of `prevItems[0, oldIndexOfNewFirst)`, per its outgoing measurements. */
+var evictedPrefixHeight = (virtualizer, oldIndexOfNewFirst) => {
+	const measurements = virtualizer.measurementsCache;
+	return (measurements[oldIndexOfNewFirst]?.start ?? 0) - (measurements[0]?.start ?? 0);
+};
+/**
+* True when `items` is `prevItems` sliced from `oldIndexOfNewFirst` (a genuine slide/eviction/append).
+* False for a reorder -- e.g. a conversation bumped to the head by a mid-sync reply -- whose old
+* mid-list offset would otherwise be misread as evicted height and grow the spacer for good.
+*/
+var isContiguousSlide = (prevItems, items, oldIndexOfNewFirst, getId) => {
+	const overlap = Math.min(items.length, prevItems.length - oldIndexOfNewFirst);
+	for (let index = 0; index < overlap; index++) if (getId(items[index]) !== getId(prevItems[oldIndexOfNewFirst + index])) return false;
+	return true;
+};
+/**
+* Finds an item retained across a prepend, anchored on its pre-change offset. Scans from the tail
+* (the common case -- a prepend leaves the rest of the window untouched) and doesn't require the
+* item to be currently rendered, since `measurementsCache` covers the whole array.
+*/
+var findRetainedAnchor = (prevItems, newIds, getId, virtualizer) => {
+	for (let index = prevItems.length - 1; index >= 0; index--) {
+		const id = getId(prevItems[index]);
+		if (newIds.has(id)) {
+			const start = virtualizer.measurementsCache[index]?.start;
+			return start != null ? {
+				id,
+				start
+			} : null;
+		}
+	}
+	return null;
+};
+/**
+* Classifies how `items` changed at the front, relative to `prevItems`, using only the outgoing
+* window's own measurements (no need to wait for the incoming render). `'evicted'` covers both a
+* prefix eviction (the window slid forward) and a pure append (the window grew) -- either way the
+* item now at the front was already loaded, so its height is already known, *and* the retained
+* items keep their old relative order (`isContiguousSlide`). `'prepended'` covers everything else:
+* a `getPrevious` prepend, a reset to a disjoint range, or an existing item reordered to the head
+* (e.g. conversation grouping bumping a thread on a new reply) -- despite the new head having been
+* loaded before, nothing was actually evicted.
+*/
+var classifyFrontEdgeChange = (prevItems, items, getId, virtualizer) => {
+	if (!virtualizer || !prevItems) return { kind: "none" };
+	const firstNewId = items?.[0] != null ? getId(items[0]) : void 0;
+	const oldIndexOfNewFirst = firstNewId != null ? prevItems.findIndex((item) => getId(item) === firstNewId) : -1;
+	if (oldIndexOfNewFirst >= 0 && items && isContiguousSlide(prevItems, items, oldIndexOfNewFirst, getId)) return {
+		kind: "evicted",
+		evictedHeight: evictedPrefixHeight(virtualizer, oldIndexOfNewFirst)
+	};
+	return {
+		kind: "prepended",
+		anchor: findRetainedAnchor(prevItems, new Set(items?.map((item) => getId(item))), getId, virtualizer)
+	};
+};
+/**
+* `'no-overlap'`: the anchor isn't in the new `items` (e.g. a reset) -- the spacer no longer
+* describes anything. `'pending'`: the incoming render hasn't measured the anchor yet. `'absorbed'`:
+* the shift is fully absorbed by the spacer, no scroll rewrite needed. `'snap'`: growing past an
+* empty spacer (or the `atHead` reset) leaves a remainder that has to move the scroll offset.
+*/
+var computePrependCorrection = (virtualizer, items, getId, anchor, currentSpace, atHead) => {
+	const newIndex = items.findIndex((item) => getId(item) === anchor.id);
+	if (newIndex < 0) return { kind: "no-overlap" };
+	const newStart = virtualizer.measurementsCache[newIndex]?.start;
+	if (newStart == null) return { kind: "pending" };
+	const shift = newStart - anchor.start;
+	const nextSpace = atHead ? 0 : Math.max(0, currentSpace - shift);
+	const scrollAdjust = shift + (nextSpace - currentSpace);
+	return scrollAdjust === 0 ? {
+		kind: "absorbed",
+		nextSpace
+	} : {
+		kind: "snap",
+		nextSpace,
+		scrollAdjust
+	};
+};
+/**
+* Wires a paginated data source into a `Mosaic.VirtualStack`: requests the next/previous page near
+* either loaded edge (`evaluateTriggers`), and keeps the scrollbar stable across the resulting
+* `items` change by maintaining a leading spacer instead of rewriting the scroll offset.
+*
+* Called internally by `Mosaic.VirtualStack` when its `pagination` prop is set -- not normally
+* called directly.
+*
+* `@tanstack/react-virtual` recomputes every item's pixel offset from the current array on each
+* render, with no compensation for insertion/removal at the front -- rewriting the scroll offset
+* to chase that shift visibly jumps the scrollbar thumb. Instead, `leadingSpace` (fed back into
+* `paddingStart`) grows by exactly the evicted height and shrinks by exactly the prepended height,
+* so retained items keep their absolute position and the thumb only scales as the total grows.
+*
+* Eviction (`classifyFrontEdgeChange`'s `'evicted'`) is corrected synchronously during the same
+* render that observes the new `items`, since the evicted height is already known -- deferring it
+* would let the browser observe (and clamp `scrollTop` against) a momentary, too-short frame.
+* Prepending (`'prepended'`) is corrected one render later, from a layout effect
+* (`computePrependCorrection`), since the prepended items' heights aren't known until the incoming
+* render measures them; that lag is safe because prepending only ever grows content before the
+* spacer shrinks to match.
+*
+* The layout effect also re-runs `evaluateTriggers` on every `items` change, evicted/appended or
+* prepended alike -- `@tanstack/react-virtual` only calls `onChange` when the visible range (or
+* `isScrolling`) changes, not merely when `items` does. Once the loaded window's tail is already
+* fully rendered and the scrollbar sits at its physical max, further scrolling can't move that
+* range at all, so `onChange` stops firing -- relying on it alone would permanently stall a
+* `getNext` chain right after its own page lands, before the user scrolls again.
+*
+* Assumes the stack renders with `draggable={false}` (virtual indices map 1:1 onto `items`).
+*/
+var useVirtualizerPagination = ({ items, getId, pagination, threshold = DEFAULT_THRESHOLD }) => {
+	const itemCount = items?.length ?? 0;
+	const [leadingSpace, setLeadingSpace] = useState(0);
+	const leadingSpaceRef = useRef(leadingSpace);
+	const setSpacer = useCallback((nextSpace) => {
+		if (nextSpace !== leadingSpaceRef.current) {
+			leadingSpaceRef.current = nextSpace;
+			setLeadingSpace(nextSpace);
+		}
+	}, []);
+	const virtualizerRef = useRef(null);
+	const anchorRef = useRef(null);
+	const prevItemsRef = useRef(items);
+	const restoringRef = useRef(false);
+	const triggerState = {
+		lastNextRequestedItemsRef: useRef(void 0),
+		lastPreviousRequestedItemsRef: useRef(void 0),
+		lastGetNextScrollRef: useRef(null),
+		lastGetPreviousScrollRef: useRef(null),
+		paginationRef: useRef(pagination)
+	};
+	triggerState.paginationRef.current = pagination;
+	const rearmTriggers = useCallback((virtualizer) => {
+		evaluateTriggers({
+			virtualizer,
+			items,
+			pagination: triggerState.paginationRef.current,
+			itemCount,
+			threshold,
+			state: triggerState
+		});
+	}, [
+		items,
+		itemCount,
+		threshold
+	]);
+	if (prevItemsRef.current !== items) {
+		if (pagination) {
+			const change = classifyFrontEdgeChange(prevItemsRef.current, items, getId, virtualizerRef.current);
+			if (change.kind === "evicted") {
+				setSpacer(leadingSpaceRef.current + change.evictedHeight);
+				anchorRef.current = null;
+			} else if (change.kind === "prepended") {
+				anchorRef.current = change.anchor;
+				if (!change.anchor) setSpacer(0);
+			}
+		}
+		prevItemsRef.current = items;
+	}
+	const onChange = useCallback((virtualizer) => {
+		virtualizerRef.current = virtualizer;
+		if (restoringRef.current) {
+			restoringRef.current = false;
+			return;
+		}
+		rearmTriggers(virtualizer);
+	}, [rearmTriggers]);
+	useLayoutEffect(() => {
+		const virtualizer = virtualizerRef.current;
+		const anchor = anchorRef.current;
+		anchorRef.current = null;
+		if (!virtualizer || !items) return;
+		if (!anchor) {
+			rearmTriggers(virtualizer);
+			return;
+		}
+		const atHead = triggerState.paginationRef.current?.atHead === true;
+		const correction = computePrependCorrection(virtualizer, items, getId, anchor, leadingSpaceRef.current, atHead);
+		switch (correction.kind) {
+			case "pending": return;
+			case "no-overlap":
+				setSpacer(0);
+				rearmTriggers(virtualizer);
+				return;
+			case "absorbed":
+				setSpacer(correction.nextSpace);
+				rearmTriggers(virtualizer);
+				return;
+			case "snap":
+				setSpacer(correction.nextSpace);
+				restoringRef.current = true;
+				virtualizer.scrollToOffset((virtualizer.scrollOffset ?? 0) + correction.scrollAdjust);
+				return;
+		}
+	}, [
+		items,
+		getId,
+		setSpacer,
+		rearmTriggers
+	]);
+	return {
+		onChange,
+		leadingSpace
+	};
+};
+//#endregion
+//#region src/hooks/useVisibleItems.ts
+/**
+* Returns items with the dragging item removed.
+*/
+var useVisibleItems = ({ id, items, dragging, getId }) => {
+	return useMemo(() => {
+		if (!items || !dragging || id !== dragging.containerId) return items ?? [];
+		const idx = items.findIndex((item) => getId(item) === dragging.id);
+		if (idx === -1) return items;
+		const visibleItems = items.slice();
+		visibleItems.splice(idx, 1);
+		return visibleItems;
+	}, [
+		id,
+		items,
+		dragging,
+		getId
+	]);
+};
+//#endregion
+//#region src/components/Mosaic/styles.ts
+var styles = { 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]: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",
+		"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)]"
+	]
+} };
+//#endregion
+//#region src/components/Mosaic/MosaicContainerContext.ts
+var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
+var [MosaicContainerContextProvider, useMosaicContainerContext] = createContext("MosaicContainer");
+//#endregion
+//#region src/components/Mosaic/Container.tsx
+var MOSAIC_CONTAINER_STATE_ATTR = "mosaic-container-state";
+var MOSAIC_CONTAINER_DEBUG_ATTR = "mosaic-debug";
+var MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
+var MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
+var counter = 0;
+/**
+* Container for a Mosaic layout.
+*/
+var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, controllerRef, currentId, onCurrentChange, selectedIds, onSelectionChange, debug, placeholderDebug, ...props }, forwardedRef) => {
+	const Comp = asChild ? Slot : Primitive.div;
+	const rootRef = useRef(null);
+	const composedRef = useComposedRefs(rootRef, forwardedRef);
+	const eventHandler = useMemo(() => eventHandlerProp ?? { id: `mosaic-container-${counter++}` }, [eventHandlerProp]);
+	const { dragging } = useDndRootContext(MOSAIC_CONTAINER_NAME);
+	const [state, setState] = useState({ type: "idle" });
+	const [activeLocation, setActiveLocation] = useState();
+	const [scrolling, setScrolling] = useState(false);
+	const setCurrentId = useCallback((id) => onCurrentChange?.(id), [onCurrentChange]);
+	const setSelected = useCallback((id, selected) => onSelectionChange?.(id, selected), [onSelectionChange]);
+	const scrollToRef = useRef(void 0);
+	const registerScrollTo = useCallback((fn) => {
+		scrollToRef.current = fn;
+	}, []);
+	useImperativeHandle(controllerRef, () => ({ scrollToItem: (id) => scrollToRef.current?.(id) }), []);
+	useEffect(() => {
+		if (currentId) scrollToRef.current?.(currentId);
+	}, [currentId]);
+	const { setFocus } = useFocus();
+	useEffect(() => {
+		if (withFocus) setFocus?.(state.type === "active" ? "active" : void 0);
+	}, [
+		setFocus,
+		withFocus,
+		state
+	]);
+	const { addContainer, removeContainer } = useDndRootContext(eventHandler.id);
+	useEffect(() => {
+		addContainer(eventHandler);
+		return () => removeContainer(eventHandler.id);
+	}, [eventHandler]);
+	const data = useMemo(() => ({
+		type: "container",
+		id: eventHandler.id
+	}), [eventHandler.id]);
+	useEffect(() => {
+		if (!rootRef.current) return;
+		let timeout;
+		const handleScroll = () => {
+			setScrolling(true);
+			clearTimeout(timeout);
+			timeout = setTimeout(() => {
+				setScrolling(false);
+			}, 500);
+		};
+		return combine(...[
+			bind(rootRef.current, {
+				type: "dnd:cancel",
+				listener: () => {
+					setState({ type: "idle" });
+				}
+			}),
+			dropTargetForElements({
+				element: rootRef.current,
+				getData: () => data,
+				/**
+				* Test if permitted to drop here.
+				* NOTE: Contained Tile and Placeholder elements do the same.
+				*/
+				canDrop: ({ source }) => {
+					const data = getSourceData(source);
+					return data && eventHandler.canDrop?.({ source: data }) || false;
+				},
+				getDropEffect: () => "move",
+				/**
+				* Dragging started in this container.
+				*/
+				onDragStart: ({ source }) => {
+					const sourceData = source.data;
+					setState({
+						type: "active",
+						bounds: sourceData.bounds
+					});
+				},
+				/**
+				* Dragging entered this container.
+				*/
+				onDragEnter: ({ source }) => {
+					const sourceData = source.data;
+					setState({
+						type: "active",
+						bounds: sourceData.bounds
+					});
+				},
+				/**
+				* Dragging left this container.
+				* NOTE: If the container isn't full-height, then when the dragged item is temporarily removed the container will shrink,
+				* triggering `onDragLeave`, which then causes the item to be added and removed continually (flickering).
+				*/
+				onDragLeave: ({ source }) => {
+					if (source.data.containerId !== eventHandler.id) setState({ type: "idle" });
+				},
+				/**
+				* Dropped in this container.
+				*/
+				onDrop: () => {
+					setState({ type: "idle" });
+				}
+			}),
+			autoscrollElement && [
+				autoScrollForElements({
+					element: autoscrollElement,
+					canScroll: ({ source }) => getSourceData(source) != null,
+					getAllowedAxis: () => orientation,
+					getConfiguration: () => ({ maxScrollSpeed: "fast" })
+				}),
+				bind(autoscrollElement, {
+					type: "scroll",
+					listener: handleScroll
+				}),
+				() => setScrolling(false)
+			]
+		].filter(isTruthy).flatMap((x) => x));
+	}, [
+		rootRef,
+		eventHandler,
+		data,
+		autoscrollElement
+	]);
+	return /* @__PURE__ */ jsxs(MosaicContainerContextProvider, {
+		id: eventHandler.id,
+		eventHandler,
+		orientation,
+		state,
+		dragging: state.type === "active" ? dragging : void 0,
+		scrolling,
+		activeLocation,
+		setActiveLocation,
+		currentId,
+		setCurrentId,
+		selectedIds,
+		setSelected,
+		registerScrollTo,
+		children: [/* @__PURE__ */ jsx(Comp, {
+			...composableProps(props, {
+				classNames: "h-full group",
+				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"
+				}
+			}),
+			[`data-${MOSAIC_CONTAINER_STATE_ATTR}`]: state.type,
+			[`data-${MOSAIC_CONTAINER_DEBUG_ATTR}`]: placeholderDebug,
+			ref: composedRef,
+			children
+		}), debug?.()]
+	});
+});
+MosaicContainer.displayName = MOSAIC_CONTAINER_NAME;
+//#endregion
+//#region src/components/Mosaic/MosaicTileContext.ts
+var MOSAIC_TILE_NAME = "Mosaic.Tile";
+var [MosaicTileContextProvider, useMosaicTileContext] = createContext("MosaicTile");
+//#endregion
+//#region src/components/Mosaic/DragHandle.tsx
+var MOSAIC_DRAG_HANDLE_NAME = "Mosaic.DragHandle";
+var REACT_UI_TRANSLATION_KEY = "@dxos/react-ui";
+/**
+* Affordance that initiates dragging the enclosing {@link MosaicTile}. Renders a button and
+* registers itself with the tile (via context), so consumers only need to drop it inside a
+* `Mosaic.Tile` — no `dragHandle` ref plumbing required.
+*/
+var MosaicDragHandle = forwardRef(({ icon = "ph--dots-six-vertical--regular", label, variant = "ghost", classNames, testId, children }, forwardedRef) => {
+	const { t } = useTranslation(REACT_UI_TRANSLATION_KEY);
+	const { setDragHandle } = useMosaicTileContext(MOSAIC_DRAG_HANDLE_NAME);
+	const ref = composeRefs(forwardedRef, setDragHandle);
+	const testIdProps = testId ? { "data-testid": testId } : {};
+	if (children) return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		variant,
+		tabIndex: -1,
+		classNames: ["grid place-items-center cursor-grab", classNames],
+		...testIdProps,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label ?? t("toolbar-drag-handle.label")
+		})]
+	});
+	return /* @__PURE__ */ jsx(IconButton, {
+		ref,
+		iconOnly: true,
+		noTooltip: true,
+		tabIndex: -1,
+		variant,
+		icon,
+		label: label ?? t("toolbar-drag-handle.label"),
+		classNames: ["cursor-grab", classNames],
+		...testIdProps
+	});
+});
+MosaicDragHandle.displayName = MOSAIC_DRAG_HANDLE_NAME;
+//#endregion
+//#region src/components/Mosaic/Placeholder.tsx
+var MOSAIC_PLACEHOLDER_NAME = "Mosaic.Placeholder";
+var MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
+var MOSAIC_PLACEHOLDER_STATE_ATTR = "mosaic-placeholder-state";
+var MOSAIC_PLACEHOLDER_LOCATION_ATTR = "mosaic-placeholder-location";
+var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertical", location }) => {
+	const rootRef = useRef(null);
+	const Comp = asChild ? Slot : Primitive.div;
+	const { id: containerId, eventHandler, scrolling, activeLocation, setActiveLocation } = useMosaicContainerContext(MOSAIC_PLACEHOLDER_NAME);
+	const data = useMemo(() => ({
+		type: "placeholder",
+		containerId,
+		location
+	}), [containerId, location]);
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!root || scrolling) return;
+		return dropTargetForElements({
+			element: root,
+			getData: () => data,
+			canDrop: ({ source }) => {
+				const data = getSourceData(source);
+				return data && eventHandler.canDrop?.({ source: data }) || false;
+			},
+			getDropEffect: () => "move",
+			onDragEnter: () => {
+				setActiveLocation(data.location);
+			},
+			onDragLeave: () => {
+				setActiveLocation(void 0);
+			},
+			onDrop: () => {
+				setActiveLocation(void 0);
+			}
+		});
+	}, [
+		rootRef,
+		data,
+		scrolling,
+		setActiveLocation
+	]);
+	return /* @__PURE__ */ jsx(Comp, {
+		[`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
+		[`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
+		[`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),
+		className: mx("relative", classNames),
+		ref: rootRef,
+		children
+	});
+};
+MosaicPlaceholder.displayName = MOSAIC_PLACEHOLDER_NAME;
+var DROP_INDICATOR_NAME = "Mosaic.DropIndicator";
+var MosaicDropIndicator = (props) => {
+	const { state } = useMosaicTileContext(DROP_INDICATOR_NAME);
+	return state.type === "target" && state.closestEdge ? /* @__PURE__ */ jsx(DropIndicator, {
+		...props,
+		edge: state.closestEdge
+	}) : null;
+};
+MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
+//#endregion
+//#region src/components/Mosaic/ResizeHandle.tsx
+var MOSAIC_RESIZE_HANDLE_NAME = "Mosaic.ResizeHandle";
+var MIN_WIDTH = 20;
+var MIN_HEIGHT = 3;
+var DEFAULT_EXTRINSIC_SIZE = 50;
+/**
+* Edge affordance that resizes the enclosing {@link MosaicTile}. The axis tracks the container
+* orientation (width when horizontal, height when vertical); the tile must be given a `size` so the
+* dragged extent is reflected and persisted via its `onSizeChange`. Resize bounds default to the
+* tile's `minSize`/`maxSize` and can be overridden per handle.
+*/
+var MosaicResizeHandle = ({ minSize, maxSize, fallbackSize = DEFAULT_EXTRINSIC_SIZE }) => {
+	const { orientation = "vertical" } = useMosaicContainerContext(MOSAIC_RESIZE_HANDLE_NAME);
+	const { size, setSize, minSize: tileMinSize, maxSize: tileMaxSize } = useMosaicTileContext(MOSAIC_RESIZE_HANDLE_NAME);
+	const horizontal = orientation === "horizontal";
+	return /* @__PURE__ */ jsx(ResizeHandle, {
+		side: horizontal ? "inline-end" : "block-end",
+		fallbackSize,
+		minSize: minSize ?? tileMinSize ?? (horizontal ? MIN_WIDTH : MIN_HEIGHT),
+		maxSize: maxSize ?? tileMaxSize,
+		size,
+		onSizeChange: setSize
+	});
+};
+MosaicResizeHandle.displayName = MOSAIC_RESIZE_HANDLE_NAME;
+//#endregion
+//#region src/components/Mosaic/Stack.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Stack.tsx";
+var MOSAIC_STACK_NAME = "MosaicStack";
+/**
+* Linear layout of Mosaic tiles.
+* NOTE: This is a low-level component and should be wrapped by a scrollable container.
+*/
+var MosaicStackInner = composable(({ orientation: orientationProp = "vertical", getId, items, scrollIntoView = true, Tile, draggable = true, debug, ...props }, forwardedRef) => {
+	const { id, orientation = orientationProp, dragging, currentId, selectedIds, registerScrollTo, setActiveLocation } = useMosaicContainerContext(MOSAIC_STACK_NAME);
+	const visibleItems = useVisibleItems({
+		id,
+		items,
+		dragging: dragging?.source.data,
+		getId
+	});
+	invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file,
+		L: 95,
+		S: void 0,
+		A: ["orientation === 'vertical' || orientation === 'horizontal'", "`Invalid orientation: ${orientation}`"]
+	});
+	const draggingSource = dragging?.source.data;
+	const sourceIndex = useMemo(() => {
+		if (!items || !draggingSource || draggingSource.containerId !== id) return -1;
+		return items.findIndex((item) => getId(item) === draggingSource.id);
+	}, [
+		items,
+		draggingSource,
+		id,
+		getId
+	]);
+	useLayoutEffect(() => {
+		if (sourceIndex >= 0) setActiveLocation(sourceIndex + .5);
+	}, [sourceIndex, setActiveLocation]);
+	const rootRef = useRef(null);
+	const scrollToId = useCallback((targetId) => {
+		if (!scrollIntoView) return;
+		(rootRef.current?.querySelector(`[data-object-id="${CSS.escape(targetId)}"]`))?.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		});
+	}, [scrollIntoView]);
+	useEffect(() => {
+		registerScrollTo(scrollToId);
+		return () => registerScrollTo(void 0);
+	}, [registerScrollTo, scrollToId]);
+	const composedRef = useComposedRefs(rootRef, forwardedRef);
+	return /* @__PURE__ */ jsxs("div", {
+		...composableProps(props, {
+			role: "list",
+			classNames: [
+				"flex",
+				orientation === "horizontal" && "h-full [&>*]:shrink-0",
+				orientation === "vertical" && "flex-col"
+			]
+		}),
+		ref: composedRef,
+		children: [draggable && /* @__PURE__ */ jsx(InternalPlaceholder, {
+			orientation,
+			location: .5
+		}), visibleItems?.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tile, {
+			id: getId(item),
+			data: item,
+			location: index + 1,
+			draggable,
+			current: getId(item) === currentId,
+			selected: selectedIds?.has(getId(item)),
+			debug
+		}), draggable && /* @__PURE__ */ jsx(InternalPlaceholder, {
+			orientation,
+			location: index + 1.5
+		})] }, getId(item)))]
+	});
+});
+MosaicStackInner.displayName = MOSAIC_STACK_NAME;
+var MosaicStack = MosaicStackInner;
+var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
+var MosaicVirtualStackInner = forwardRef(({ orientation = "vertical", getId, items, scrollIntoView = true, Tile, estimateSize, getScrollElement, overscan = 8, gap, pagination, paginationThreshold, onChange, draggable = true, debug, ...props }, forwardedRef) => {
+	invariant(Tile, void 0, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file,
+		L: 210,
+		S: void 0,
+		A: ["Tile", ""]
+	});
+	invariant(!pagination || !draggable, "pagination requires draggable={false}", {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file,
+		L: 211,
+		S: void 0,
+		A: ["!pagination || !draggable", "'pagination requires draggable={false}'"]
+	});
+	const { id, dragging, currentId, selectedIds, registerScrollTo } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
+	const visibleItems = useVisibleItems({
+		id,
+		items,
+		dragging: dragging?.source.data,
+		getId
+	});
+	const wrappedEstimateSize = draggable ? (index) => index % 2 === 0 ? 0 : estimateSize(Math.floor(index / 2)) : estimateSize;
+	const { onChange: handlePaginationChange, leadingSpace } = useVirtualizerPagination({
+		items: visibleItems,
+		getId,
+		pagination,
+		threshold: paginationThreshold
+	});
+	const handleChange = useCallback((nextVirtualizer, sync) => {
+		handlePaginationChange(nextVirtualizer);
+		onChange?.(nextVirtualizer, sync);
+	}, [handlePaginationChange, onChange]);
+	const virtualizer = useVirtualizer({
+		count: draggable ? visibleItems.length * 2 + 1 : visibleItems.length,
+		estimateSize: wrappedEstimateSize,
+		gap,
+		paddingStart: (gap ?? 0) + leadingSpace,
+		paddingEnd: gap,
+		getItemKey: draggable ? (index) => index % 2 === 0 ? `ph-${index}` : getId(visibleItems[Math.floor(index / 2)]) : (index) => getId(visibleItems[index]),
+		getScrollElement,
+		overscan,
+		onChange: handleChange
+	});
+	const scrollToId = useCallback((targetId) => {
+		const itemIndex = visibleItems.findIndex((item) => getId(item) === targetId);
+		if (itemIndex >= 0) {
+			if (!scrollIntoView) return;
+			const virtualIndex = draggable ? itemIndex * 2 + 1 : itemIndex;
+			const [offset] = virtualizer.getOffsetForIndex(virtualIndex, "start") ?? [];
+			if (offset != null) virtualizer.scrollToOffset(Math.max(0, offset - (gap ?? 0)), { behavior: "smooth" });
+		}
+	}, [
+		visibleItems,
+		getId,
+		draggable,
+		virtualizer,
+		scrollIntoView,
+		gap
+	]);
+	useEffect(() => {
+		registerScrollTo(scrollToId);
+		return () => registerScrollTo(void 0);
+	}, [registerScrollTo, scrollToId]);
+	const virtualItems = virtualizer.getVirtualItems();
+	const getData = (index) => {
+		if (draggable) if (index % 2 === 0) return { location: Math.floor(index / 2) + .5 };
+		else return {
+			data: visibleItems[Math.floor(index / 2)],
+			location: Math.floor(index / 2) + 1
+		};
+		else return {
+			data: visibleItems[index],
+			location: index + 1
+		};
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, {
+			role: "list",
+			classNames: [
+				"flex shrink-0",
+				orientation === "horizontal" && "h-full [&>*]:shrink-0",
+				orientation === "vertical" && "flex-col"
+			]
+		}),
+		style: {
+			position: "relative",
+			...orientation === "vertical" ? {
+				width: "100%",
+				height: virtualizer.getTotalSize()
+			} : {
+				width: virtualizer.getTotalSize(),
+				height: "100%"
+			}
+		},
+		ref: forwardedRef,
+		children: virtualItems.map(({ key, index, start }) => {
+			const { data, location } = getData(index);
+			return /* @__PURE__ */ jsx("div", {
+				"data-index": index,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					...orientation === "vertical" ? {
+						width: "100%",
+						transform: `translateY(${start}px)`
+					} : {
+						height: "100%",
+						transform: `translateX(${start}px)`
+					}
+				},
+				ref: virtualizer.measureElement,
+				children: data ? /* @__PURE__ */ jsx(Tile, {
+					id: getId(data),
+					data,
+					location,
+					draggable,
+					current: getId(data) === currentId,
+					selected: selectedIds?.has(getId(data)),
+					debug
+				}) : /* @__PURE__ */ jsx(InternalPlaceholder, {
+					orientation,
+					location
+				})
+			}, key);
+		})
+	});
+});
+MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
+var MosaicVirtualStack = MosaicVirtualStackInner;
+MosaicVirtualStack[Symbol.for("dxos.composable")] = true;
+var InternalPlaceholder = (props) => {
+	return /* @__PURE__ */ jsx(MosaicPlaceholder, {
+		...props,
+		classNames: styles.placeholder.root,
+		children: /* @__PURE__ */ jsx("div", { className: mx("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content) })
+	});
+};
+InternalPlaceholder.displayName = "InternalPlaceholder";
+//#endregion
+//#region src/components/Mosaic/Tile.tsx
+var MOSAIC_TILE_STATE_ATTR = "mosaic-tile-state";
+var MosaicTile = slottable(({ children, asChild, dragHandle: dragHandleProp, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current, selected, size: sizeProp, onSizeChange, minSize, maxSize, debug: _, ...props }, forwardedRef) => {
+	const Comp = asChild ? Slot : Primitive.div;
+	const rootRef = useRef(null);
+	const composedRef = composeRefs(rootRef, forwardedRef);
+	const { id: containerId, eventHandler, orientation, scrolling, setActiveLocation } = useMosaicContainerContext(MOSAIC_TILE_NAME);
+	const [state, setState] = useState({ type: "idle" });
+	const [registeredDragHandle, setRegisteredDragHandle] = useState(null);
+	const dragHandle = dragHandleProp ?? registeredDragHandle;
+	const [size, setInternalSize] = useState(sizeProp);
+	const setSize = useCallback((nextSize, commit) => {
+		setInternalSize(nextSize);
+		if (commit) onSizeChange?.(nextSize);
+	}, [onSizeChange]);
+	useEffect(() => {
+		setInternalSize(sizeProp);
+	}, [sizeProp]);
+	const allowedEdges = useMemo(() => allowedEdgesProp || (orientation === "vertical" ? ["top", "bottom"] : ["left", "right"]), [allowedEdgesProp, orientation]);
+	const data = useMemo(() => ({
+		type: "tile",
+		id,
+		containerId,
+		data: dataProp,
+		location
+	}), [
+		containerId,
+		location,
+		dataProp
+	]);
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!draggableProp || !root || !containerId || scrolling) return;
+		const handleChange = ({ self, source }) => {
+			if (source.data.id !== dataProp.id) {
+				const closestEdge = extractClosestEdge(self.data);
+				const location = data.location + (closestEdge === "top" || closestEdge === "left" ? -.5 : .5);
+				setActiveLocation(location);
+				setState({
+					type: "target",
+					closestEdge
+				});
+			}
+		};
+		const handleNativeDragStart = (event) => {
+			if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+		};
+		root.addEventListener("dragstart", handleNativeDragStart);
+		return combine(() => root.removeEventListener("dragstart", handleNativeDragStart), draggable({
+			element: root,
+			dragHandle: dragHandle && state.type !== "preview" ? dragHandle : void 0,
+			canDrag: () => true,
+			getInitialData: () => data,
+			onGenerateDragPreview: ({ location, nativeSetDragImage }) => {
+				setCustomNativeDragPreview({
+					nativeSetDragImage,
+					getOffset: preserveOffsetOnSource({
+						element: root,
+						input: location.current.input
+					}),
+					render: ({ container }) => {
+						data.bounds = root.getBoundingClientRect();
+						setState({
+							type: "preview",
+							container,
+							rect: root.getBoundingClientRect()
+						});
+						return () => setState({ type: "dragging" });
+					}
+				});
+			},
+			onDragStart: () => {
+				setState({ type: "dragging" });
+			},
+			onDrop: () => {
+				setState({ type: "idle" });
+			}
+		}), dropTargetForElements({
+			element: root,
+			getData: ({ input, element }) => attachClosestEdge(data, {
+				input,
+				element,
+				allowedEdges
+			}),
+			canDrop: ({ source }) => {
+				const data = getSourceData(source);
+				return data && eventHandler.canDrop?.({ source: data }) || false;
+			},
+			getDropEffect: () => "move",
+			onDragEnter: ({ self, source }) => {
+				handleChange({
+					self,
+					source
+				});
+			},
+			onDragLeave: () => {
+				setState({ type: "idle" });
+				setActiveLocation(void 0);
+			},
+			onDrag: ({ self, source }) => {
+				handleChange({
+					self,
+					source
+				});
+			},
+			onDrop: () => {
+				setState({ type: "idle" });
+				setActiveLocation(void 0);
+			}
+		}));
+	}, [
+		rootRef,
+		forwardedRef,
+		containerId,
+		dragHandle,
+		eventHandler,
+		data,
+		scrolling,
+		allowedEdges,
+		setActiveLocation
+	]);
+	const { className, ...rest } = composableProps(props, { classNames: "relative outline-none" });
+	const vertical = orientation === "vertical";
+	const sized = size != null;
+	const bounded = sized || minSize != null || maxSize != null;
+	const sizeStyles = {
+		...sized && sizeStyle(size, vertical ? "vertical" : "horizontal"),
+		...minSize != null && { [vertical ? "minBlockSize" : "minInlineSize"]: `${minSize}rem` },
+		...maxSize != null && { [vertical ? "maxBlockSize" : "maxInlineSize"]: `${maxSize}rem` }
+	};
+	return /* @__PURE__ */ jsxs(MosaicTileContextProvider, {
+		state,
+		setDragHandle: setRegisteredDragHandle,
+		size,
+		setSize,
+		minSize,
+		maxSize,
+		children: [/* @__PURE__ */ jsx(Comp, {
+			...rest,
+			...bounded && resizeAttributes,
+			...bounded && { style: {
+				...rest.style,
+				...sizeStyles
+			} },
+			"data-object-id": id,
+			[`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
+			role: "listitem",
+			"aria-current": current ? "true" : void 0,
+			"aria-selected": selected ? "true" : void 0,
+			className,
+			ref: composedRef,
+			children
+		}), state.type === "preview" && createPortal(/* @__PURE__ */ jsx(Comp, {
+			[`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
+			className,
+			style: {
+				width: `${state.rect.width}px`,
+				height: `${state.rect.height}px`
+			},
+			children
+		}), state.container)]
+	});
+});
+MosaicTile.displayName = MOSAIC_TILE_NAME;
+//#endregion
+//#region src/components/Mosaic/Mosaic.ts
+var Mosaic = {
+	Container: MosaicContainer,
+	Tile: MosaicTile,
+	DragHandle: MosaicDragHandle,
+	ResizeHandle: MosaicResizeHandle,
+	Placeholder: MosaicPlaceholder,
+	DropIndicator: MosaicDropIndicator,
+	Stack: MosaicStack,
+	VirtualStack: MosaicVirtualStack
+};
+//#endregion
+export { Focus as a, useVirtualizerPagination as c, styles as i, useMosaicTileContext as n, useFocus as o, useMosaicContainerContext as r, useVisibleItems as s, Mosaic as t };
+
+//# sourceMappingURL=chunk-Mosaic.mjs.map