@dxos/react-ui-mosaic 0.9.1-staging.ee54ba693a → 0.11.0

package/dist/lib/index.mjs

@@ -0,0 +1,653 @@
+import { a as Focus, c as useVirtualizerPagination, i as styles, n as useMosaicTileContext, o as useFocus, r as useMosaicContainerContext, s as useVisibleItems, t as Mosaic } from "./chunk-Mosaic.mjs";
+import { createContext } from "@radix-ui/react-context";
+import { useAtomValue } from "@effect-atom/atom-react";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { Card, Icon, IconButton, ScrollArea, Tag, Toolbar, composable, composableProps, useTranslation } from "@dxos/react-ui";
+import { useDndRootContext } from "@dxos/react-ui-dnd";
+import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { getHashStyles, mx } from "@dxos/ui-theme";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { log } from "@dxos/log";
+import { arrayMove } from "@dxos/util";
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Obj, Ref } from "@dxos/echo";
+import { useObject } from "@dxos/echo-react";
+import { Menu, createMenuAction } from "@dxos/react-ui-menu";
+import { translationKey } from "#translations";
+//#region src/components/Board/BoardColumnContext.ts
+var BOARD_COLUMN_CONTEXT_NAME = "Board.Column";
+var [BoardColumnProvider, useBoardColumnContext] = createContext(BOARD_COLUMN_CONTEXT_NAME, null);
+/** Returns the current column when rendered inside a board column (e.g., in column header or item tile). */
+function useBoardColumn() {
+	return useBoardColumnContext(BOARD_COLUMN_CONTEXT_NAME)?.column;
+}
+var [BoardContextProvider, useBoardContext] = createContext("Board");
+/** Hook to read the board model from context (e.g. in custom column tiles). Pass TColumn and TItem for typed model. */
+function useBoard(displayName) {
+	return useBoardContext(displayName ?? "Board");
+}
+//#endregion
+//#region src/hooks/useContainerDebug.tsx
+/**
+* Hook that returns a component to be rendered in the container's viewport (within the context),
+* and a component that creates a portal in the container's debug area.
+*/
+var useContainerDebug = (debug) => {
+	const debugRef = useRef(null);
+	return useMemo(() => {
+		if (!debug) return [() => null, void 0];
+		return [({ classNames }) => /* @__PURE__ */ jsx("div", {
+			className: mx("overflow-hidden", classNames),
+			ref: debugRef
+		}), () => debugRef.current && createPortal(/* @__PURE__ */ jsx(ContainerInfo, {}), debugRef.current)];
+	}, [debug, debugRef]);
+};
+var CONTAINER_INFO_NAME = "ContainerInfo";
+var ContainerInfo = forwardRef(({ classNames }, forwardedRef) => {
+	const { id, state, activeLocation, scrolling } = useMosaicContainerContext(CONTAINER_INFO_NAME);
+	const counter = useRef(0);
+	return /* @__PURE__ */ jsx(JsonHighlighter, {
+		data: {
+			id,
+			activeLocation,
+			scrolling,
+			state,
+			count: counter.current++
+		},
+		classNames: mx("text-xs", classNames),
+		ref: forwardedRef
+	});
+});
+ContainerInfo.displayName = CONTAINER_INFO_NAME;
+//#endregion
+//#region src/hooks/useEventHandlerAdapter.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/hooks/useEventHandlerAdapter.ts";
+/**
+* Returns a handler for the given items.
+* NOTE: This supports arrays of objects, or arrays of refs to objects.
+*/
+var useEventHandlerAdapter = ({ items, getId, get, make, onChange, ...props }) => {
+	return useMemo(() => ({
+		...props,
+		onTake: ({ source }, cb) => {
+			log.info("onTake", { source }, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 60,
+				S: void 0
+			});
+			const mutate = (items) => {
+				const from = items.findIndex((item) => getId(item) === source.id);
+				if (from !== -1) items.splice(from, 1);
+			};
+			if (onChange) onChange(mutate);
+			else mutate(items);
+			cb(source.data);
+		},
+		onDrop: ({ source, target }) => {
+			log.info("onDrop", {
+				source,
+				target
+			}, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 77,
+				S: void 0
+			});
+			const mutate = (items) => {
+				const to = target?.type === "tile" || target?.type === "placeholder" ? target.location : target?.type === "container" ? items.length : -1;
+				const from = items.findIndex((item) => getId(item) === source.id);
+				const insertIndex = typeof to === "number" && to >= 0 ? Math.floor(to) : -1;
+				if (insertIndex !== -1) if (from !== -1) arrayMove(items, from, insertIndex);
+				else items.splice(insertIndex, 0, make(get(source.data)));
+			};
+			if (onChange) onChange(mutate);
+			else mutate(items);
+		}
+	}), [items, onChange]);
+};
+//#endregion
+//#region src/hooks/useDefaultColumnEventHandler.ts
+/**
+* Returns the default column drag/drop handler (no persistence).
+* Use this when no custom eventHandler is passed to Board.Content.
+*/
+var useDefaultColumnEventHandler = (id, model, items) => useEventHandlerAdapter({
+	id,
+	items,
+	getId: model.getColumnId,
+	get: (data) => data,
+	make: (object) => object,
+	canDrop: ({ source }) => model.isColumn(source.data)
+});
+//#endregion
+//#region src/components/Mosaic/extension.ts
+var dropHandler = ({ onDrop = handleDrop } = {}) => {
+	const views = /* @__PURE__ */ new Set();
+	let state = null;
+	const reset = () => {
+		views.forEach((view) => view.dispatch({ effects: setDrop.of(null) }));
+		state = null;
+	};
+	return {
+		extension: [dropField, ViewPlugin.fromClass(class {
+			_view;
+			constructor(_view) {
+				this._view = _view;
+				views.add(_view);
+			}
+			destroy() {
+				views.delete(this._view);
+			}
+		})],
+		update: (position) => {
+			if (!position) {
+				reset();
+				return;
+			}
+			views.forEach((view) => {
+				const rect = view.dom.getBoundingClientRect();
+				if (position.x >= rect.left && position.x <= rect.right && position.y >= rect.top && position.y <= rect.bottom) {
+					let pos = view.posAtCoords(position);
+					if (pos !== null) {
+						const word = view.state.wordAt(pos);
+						if (word) pos = Math.abs(pos - word.from) < Math.abs(pos - word.to) ? word.from : word.to;
+						view.dispatch({ effects: setDrop.of(pos) });
+						state = {
+							view,
+							pos
+						};
+						return;
+					}
+				}
+				view.dispatch({ effects: setDrop.of(null) });
+			});
+		},
+		cancel: () => {
+			reset();
+		},
+		drop: ({ text, url }) => {
+			if (state) onDrop(state.view, state.pos, {
+				text,
+				url
+			});
+			reset();
+		}
+	};
+};
+var handleDrop = (view, pos, event) => {
+	if (view.state.doc.lineAt(pos).text.trim() === "") view.dispatch({
+		changes: {
+			from: pos,
+			insert: `\n![${event.text}](${event.url})\n`
+		},
+		effects: setDrop.of(null)
+	});
+	else view.dispatch({
+		changes: {
+			from: pos,
+			insert: ` [${event.text}](${event.url})`
+		},
+		effects: setDrop.of(null)
+	});
+};
+var setDrop = StateEffect.define();
+var dropField = StateField.define({
+	create: () => Decoration.none,
+	update: (decorations, tr) => {
+		for (const effect of tr.effects) if (effect.is(setDrop)) {
+			if (effect.value === null) return Decoration.none;
+			return Decoration.set([Decoration.widget({
+				widget: new class extends WidgetType {
+					toDOM() {
+						const dom = document.createElement("span");
+						dom.className = "cm-drop-cursor";
+						dom.style.borderLeft = "2px solid var(--color-accent-bg)";
+						dom.style.display = "inline-block";
+						dom.style.height = "1em";
+						dom.style.verticalAlign = "middle";
+						return dom;
+					}
+				}(),
+				side: 0
+			}).range(effect.value)]);
+		}
+		return decorations.map(tr.changes);
+	},
+	provide: (field) => EditorView.decorations.from(field)
+});
+//#endregion
+//#region src/components/Board/Item.tsx
+var BOARD_ITEM_NAME = "Board.Item";
+var BoardItemInner = forwardRef(({ classNames, data, location, debug, draggable }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	const rootRef = useRef(null);
+	const composedRef = useComposedRefs(rootRef, forwardedRef);
+	const [dragHandle, setDragHandle] = useState(null);
+	const { model } = useBoard(BOARD_ITEM_NAME);
+	const column = useBoardColumn();
+	const items = useMemo(() => column != null && model.onItemDelete ? [createMenuAction("delete-item", () => model.onItemDelete?.(column, data), {
+		label: t("delete-menu.label"),
+		icon: "ph--trash--regular"
+	})] : [], [
+		column,
+		data,
+		model.onItemDelete,
+		t
+	]);
+	if (!data) return null;
+	const label = Obj.getLabel(data);
+	const description = Obj.getDescription(data);
+	return /* @__PURE__ */ jsx(Menu.Root, { children: /* @__PURE__ */ jsx(Mosaic.Tile, {
+		ref: rootRef,
+		asChild: true,
+		draggable,
+		dragHandle,
+		id: data.id,
+		data,
+		location,
+		debug,
+		children: /* @__PURE__ */ jsx(Focus.Item, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Card.Root, {
+				classNames,
+				"data-testid": "board-item",
+				ref: composedRef,
+				onClick: (event) => event.currentTarget.focus(),
+				children: [
+					/* @__PURE__ */ jsxs(Card.Header, { children: [
+						/* @__PURE__ */ jsx(Card.DragHandle, {
+							ref: setDragHandle,
+							testId: "mosaicBoard.cardDragHandle"
+						}),
+						/* @__PURE__ */ jsx(Card.Title, {
+							"data-testid": "mosaicBoard.cardTitle",
+							children: label
+						}),
+						/* @__PURE__ */ jsx(Card.Block, {
+							end: true,
+							children: /* @__PURE__ */ jsx(Menu.Trigger, {
+								asChild: true,
+								disabled: !items?.length,
+								children: /* @__PURE__ */ jsx(IconButton, {
+									iconOnly: true,
+									variant: "ghost",
+									icon: "ph--dots-three-vertical--regular",
+									label: t("action-menu.label")
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx(Menu.Content, { items })
+					] }),
+					/* @__PURE__ */ jsxs(Card.Row, {
+						classNames: "text-description",
+						children: [/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(Icon, { icon: "ph--note--regular" }) }), /* @__PURE__ */ jsx(Card.Text, { children: description })]
+					}),
+					/* @__PURE__ */ jsxs(Card.Row, { children: [/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(Icon, { icon: "ph--tag--regular" }) }), label && /* @__PURE__ */ jsx("div", {
+						className: "shrink-0 flex gap-1 items-center text-xs",
+						children: /* @__PURE__ */ jsx(Tag, {
+							hue: getHashStyles(label).hue,
+							children: label
+						})
+					})] })
+				]
+			})
+		})
+	}) });
+});
+BoardItemInner.displayName = BOARD_ITEM_NAME;
+/**
+* Default board tile.
+*/
+var BoardItem = BoardItemInner;
+//#endregion
+//#region src/components/Board/Column.tsx
+var BOARD_COLUMN_ROOT_NAME = "Board.Column.Root";
+var BoardColumnRootInner = composable(({ classNames, children, location, data, debug, draggable, dragHandle, ...rest }, forwardedRef) => {
+	const { model } = useBoard(BOARD_COLUMN_ROOT_NAME);
+	return /* @__PURE__ */ jsx(Mosaic.Tile, {
+		asChild: true,
+		location,
+		id: model.getColumnId(data),
+		data,
+		debug,
+		draggable,
+		dragHandle,
+		children: /* @__PURE__ */ jsx(Focus.Group, {
+			...rest,
+			"data-testid": "board-column",
+			border: true,
+			classNames: mx("group/column", "h-full w-full md:w-card-default-width snap-center dx-deck-surface", "overflow-hidden", classNames),
+			ref: forwardedRef,
+			children: /* @__PURE__ */ jsx(BoardColumnProvider, {
+				column: data,
+				children
+			})
+		})
+	});
+});
+BoardColumnRootInner.displayName = BOARD_COLUMN_ROOT_NAME;
+var BoardColumnRoot = BoardColumnRootInner;
+var BOARD_COLUMN_HEADER_NAME = "Board.Column.Header";
+var BoardColumnHeader = composable(({ label, dragHandleRef, ...props }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	const { model } = useBoard(BOARD_COLUMN_HEADER_NAME);
+	const column = useBoardColumn();
+	const columnMenuItems = useMemo(() => column != null && model.onColumnDelete ? [createMenuAction("delete-column", () => model.onColumnDelete?.(column), {
+		label: t("delete-menu.label"),
+		icon: "ph--trash--regular"
+	})] : [], [
+		column,
+		model.onColumnDelete,
+		t
+	]);
+	return /* @__PURE__ */ jsx(Menu.Root, { children: /* @__PURE__ */ jsxs(Toolbar.Root, {
+		...composableProps(props, { classNames: "gap-0" }),
+		"data-testid": "board-column-header",
+		ref: forwardedRef,
+		children: [
+			/* @__PURE__ */ jsx(Toolbar.DragHandle, {
+				ref: dragHandleRef,
+				testId: "mosaicBoard.columnDragHandle"
+			}),
+			/* @__PURE__ */ jsx(Toolbar.Text, {
+				classNames: "grow px-0",
+				"data-testid": "mosaicBoard.columnTitle",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Menu.Trigger, {
+				asChild: true,
+				disabled: !columnMenuItems?.length,
+				children: /* @__PURE__ */ jsx(Toolbar.IconButton, {
+					iconOnly: true,
+					variant: "ghost",
+					icon: "ph--dots-three-vertical--regular",
+					label: t("action-menu.label")
+				})
+			}),
+			/* @__PURE__ */ jsx(Menu.Content, { items: columnMenuItems })
+		]
+	}) });
+});
+BoardColumnHeader.displayName = BOARD_COLUMN_HEADER_NAME;
+var BOARD_COLUMN_BODY_NAME = "Board.Column.Body";
+var BoardColumnBody = composable(({ data, eventHandler, Tile = BoardItem, debug, ...props }, forwardedRef) => {
+	const { model } = useBoard(BOARD_COLUMN_BODY_NAME);
+	const [viewport, setViewport] = useState(null);
+	const items = useAtomValue(model.items(data));
+	return /* @__PURE__ */ jsx(Mosaic.Container, {
+		...composableProps(props),
+		asChild: true,
+		withFocus: true,
+		orientation: "vertical",
+		autoScroll: viewport,
+		eventHandler,
+		debug,
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+			orientation: "vertical",
+			thin: true,
+			centered: true,
+			padding: true,
+			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				classNames: "snap-y md:snap-none",
+				ref: setViewport,
+				children: /* @__PURE__ */ jsx(Mosaic.Stack, {
+					items,
+					getId: model.getItemId,
+					Tile
+				})
+			})
+		})
+	});
+});
+BoardColumnBody.displayName = BOARD_COLUMN_BODY_NAME;
+var BOARD_COLUMN_FOOTER_NAME = "Board.Column.Footer";
+var BoardColumnFooter = forwardRef(({ classNames, data, onAdd }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	const { model } = useBoard(BOARD_COLUMN_FOOTER_NAME);
+	const handleAdd = onAdd ?? (model.onItemCreate && data ? () => void model.onItemCreate?.(data) : void 0);
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		classNames: mx("rounded-b-sm border-t border-separator", classNames),
+		ref: forwardedRef,
+		children: handleAdd && /* @__PURE__ */ jsx(IconButton, {
+			"data-testid": "board-column-add-item",
+			classNames: "group-hover/column:opacity-100 md:opacity-0 transition transition-opacity duration-500",
+			variant: "ghost",
+			icon: "ph--plus--regular",
+			iconOnly: true,
+			label: t("add-item.label"),
+			onClick: handleAdd
+		})
+	});
+});
+BoardColumnFooter.displayName = BOARD_COLUMN_FOOTER_NAME;
+var BOARD_DEFAULT_COLUMN_NAME = "Board.DefaultColumn";
+var DefaultBoardColumn = forwardRef(({ classNames, location, data, debug, draggable, Tile = BoardItem }, forwardedRef) => {
+	const { model } = useBoard(BOARD_DEFAULT_COLUMN_NAME);
+	const [DebugInfo, debugHandler] = useContainerDebug(debug);
+	const [dragHandle, setDragHandle] = useState(null);
+	const [column, updateColumn] = useObject(data);
+	const eventHandler = useEventHandlerAdapter({
+		id: model.getColumnId(data),
+		items: column?.items ?? [],
+		getId: (ref) => ref.target?.id ?? ref.uri,
+		get: (refOrObj) => Ref.isRef(refOrObj) ? refOrObj.target : refOrObj,
+		make: (object) => Ref.make(object),
+		canDrop: ({ source }) => {
+			const item = Ref.isRef(source.data) ? source.data.target : source.data;
+			return item != null && Obj.isObject(item) && model.isItem(item);
+		},
+		onChange: (mutator) => updateColumn((col) => mutator(col.items))
+	});
+	return /* @__PURE__ */ jsxs(BoardColumnRootInner, {
+		classNames: mx("group/column grid", debug ? "grid-rows-[var(--dx-rail-action)_1fr_20rem]" : "grid-rows-[var(--dx-rail-action)_1fr_var(--dx-rail-action)]", classNames),
+		location,
+		data,
+		draggable,
+		dragHandle,
+		ref: forwardedRef,
+		children: [
+			/* @__PURE__ */ jsx(BoardColumnHeader, {
+				label: Obj.getLabel(data) ?? data.id,
+				dragHandleRef: setDragHandle
+			}),
+			/* @__PURE__ */ jsx(BoardColumnBody, {
+				data,
+				eventHandler,
+				debug: debugHandler,
+				Tile
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col col-span-full",
+				children: [/* @__PURE__ */ jsx(BoardColumnFooter, { data }), /* @__PURE__ */ jsx(DebugInfo, {})]
+			})
+		]
+	});
+});
+DefaultBoardColumn.displayName = BOARD_DEFAULT_COLUMN_NAME;
+var BoardColumn = {
+	Root: BoardColumnRoot,
+	Header: BoardColumnHeader,
+	Body: BoardColumnBody,
+	Footer: BoardColumnFooter
+};
+//#endregion
+//#region src/components/Board/Board.tsx
+var BOARD_ROOT_NAME = "Board.Root";
+var BoardRootInner = ({ model, children }) => {
+	return /* @__PURE__ */ jsx(BoardContextProvider, {
+		model,
+		children
+	});
+};
+BoardRootInner.displayName = BOARD_ROOT_NAME;
+var BoardRoot = BoardRootInner;
+var BOARD_CONTENT_NAME = "Board.Content";
+var BoardContentInner = composable(({ debug, eventHandler, Tile = DefaultBoardColumn, ...props }, forwardedRef) => {
+	const { model } = useBoardContext(BOARD_CONTENT_NAME);
+	const [DebugInfo, debugHandler] = useContainerDebug(debug);
+	const [viewport, setViewport] = useState(null);
+	const items = useAtomValue(model.columns);
+	return /* @__PURE__ */ jsxs("div", {
+		...composableProps(props, { classNames: "dx-container" }),
+		ref: forwardedRef,
+		children: [/* @__PURE__ */ jsx(Focus.Group, {
+			asChild: true,
+			orientation: "horizontal",
+			children: /* @__PURE__ */ jsx(Mosaic.Container, {
+				asChild: true,
+				withFocus: true,
+				orientation: "horizontal",
+				autoScroll: viewport,
+				eventHandler,
+				debug: debugHandler,
+				placeholderDebug: debug,
+				children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+					orientation: "horizontal",
+					centered: true,
+					padding: true,
+					children: /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+						classNames: "snap-mandatory snap-x md:snap-none",
+						ref: setViewport,
+						children: /* @__PURE__ */ jsx(Mosaic.Stack, {
+							items,
+							getId: model.getColumnId,
+							Tile,
+							debug
+						})
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsx(DebugInfo, {})]
+	});
+});
+BoardContentInner.displayName = BOARD_CONTENT_NAME;
+var BoardContent = BoardContentInner;
+var BOARD_PLACEHOLDER_NAME = "Board.Placeholder";
+var BoardPlaceholder = (props) => {
+	return /* @__PURE__ */ jsx(Mosaic.Placeholder, {
+		...props,
+		classNames: styles.placeholder.root,
+		children: /* @__PURE__ */ jsx("div", { className: mx("flex h-full border border-dashed border-separator rounded-xs", styles.placeholder.content) })
+	});
+};
+BoardPlaceholder.displayName = BOARD_PLACEHOLDER_NAME;
+var BOARD_DEBUG_NAME = "Board.Debug";
+var BoardDebug = forwardRef(({ classNames }, forwardedRef) => {
+	const { containers, dragging } = useDndRootContext(BOARD_DEBUG_NAME);
+	const counter = useRef(0);
+	return /* @__PURE__ */ jsx(JsonHighlighter, {
+		data: {
+			containers,
+			dragging,
+			count: counter.current++
+		},
+		classNames: mx("text-xs", classNames),
+		ref: forwardedRef
+	});
+});
+BoardDebug.displayName = BOARD_DEBUG_NAME;
+var Board = {
+	Root: BoardRoot,
+	Content: BoardContent,
+	Column: BoardColumn,
+	Item: BoardItem,
+	Placeholder: BoardPlaceholder,
+	Debug: BoardDebug
+};
+//#endregion
+//#region src/components/SearchStack/SearchStack.tsx
+/**
+* Card-based search result stack component using mosaic layout.
+*/
+var SearchStack = composable(({ results = [], currentId, onAction, ...props }, forwardedRef) => {
+	const [viewport, setViewport] = useState(null);
+	const items = useMemo(() => results.map((result) => ({
+		result,
+		onAction
+	})), [results, onAction]);
+	const handleCurrentChange = useCallback((id) => {
+		if (id) onAction?.({
+			type: "select",
+			resultId: id
+		});
+	}, [onAction]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			document.activeElement?.click();
+		}
+	}, []);
+	return /* @__PURE__ */ jsx(Focus.Group, {
+		asChild: true,
+		...composableProps(props),
+		onKeyDown: handleKeyDown,
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsx(Mosaic.Container, {
+			asChild: true,
+			withFocus: true,
+			currentId,
+			onCurrentChange: handleCurrentChange,
+			children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+				orientation: "vertical",
+				padding: true,
+				centered: true,
+				thin: true,
+				children: /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+					ref: setViewport,
+					children: /* @__PURE__ */ jsx(Mosaic.VirtualStack, {
+						Tile: SearchTile,
+						classNames: "my-2",
+						gap: 8,
+						items,
+						draggable: false,
+						getId: (item) => item.result.id,
+						getScrollElement: () => viewport,
+						estimateSize: () => 100
+					})
+				})
+			})
+		})
+	});
+});
+SearchStack.displayName = "SearchStack";
+/**
+* Default search result tile with a simple Card header.
+*/
+var SearchTile = forwardRef(({ data, location, current }, forwardedRef) => {
+	const { result } = data;
+	const { setCurrentId } = useMosaicContainerContext("SearchTile");
+	const handleCurrentChange = useCallback(() => {
+		setCurrentId(result.id);
+	}, [result.id, setCurrentId]);
+	return /* @__PURE__ */ jsx(Mosaic.Tile, {
+		asChild: true,
+		classNames: "dx-hover dx-current",
+		id: result.id,
+		data,
+		location,
+		current,
+		children: /* @__PURE__ */ jsx(Focus.Item, {
+			asChild: true,
+			current,
+			onCurrentChange: handleCurrentChange,
+			children: /* @__PURE__ */ jsxs(Card.Root, {
+				fullWidth: true,
+				ref: forwardedRef,
+				children: [/* @__PURE__ */ jsxs(Card.Header, { children: [/* @__PURE__ */ jsx(Card.Block, {}), /* @__PURE__ */ jsx(Card.Title, { children: result.label })] }), result.snippet && /* @__PURE__ */ jsx(Card.Body, { children: /* @__PURE__ */ jsx(Card.Row, { children: /* @__PURE__ */ jsx(Card.Text, {
+					variant: "description",
+					children: result.snippet
+				}) }) })]
+			})
+		})
+	});
+});
+SearchTile.displayName = "SearchTile";
+//#endregion
+export { Board, BoardDebug, Focus, Mosaic, SearchStack, dropHandler, styles as mosaicStyles, useBoard, useBoardColumn, useContainerDebug, useDefaultColumnEventHandler, useEventHandlerAdapter, useFocus, useMosaicContainerContext as useMosaicContainer, useMosaicTileContext as useMosaicTile, useVirtualizerPagination, useVisibleItems };
+
+//# sourceMappingURL=index.mjs.map