@dxos/react-ui-mosaic 0.9.0 → 0.9.1-main.c7dcc2e112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/{chunk-I3M5WM6C.mjs → chunk-DZ5WMCI2.mjs} +6 -3
- package/dist/lib/browser/chunk-DZ5WMCI2.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +19 -16
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/testing/index.mjs +7 -5
- package/dist/lib/browser/testing/index.mjs.map +3 -3
- package/dist/lib/node-esm/{chunk-DVJLDZLE.mjs → chunk-4IOJ5T6K.mjs} +6 -3
- package/dist/lib/node-esm/chunk-4IOJ5T6K.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +19 -16
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/testing/index.mjs +7 -5
- package/dist/lib/node-esm/testing/index.mjs.map +3 -3
- package/dist/types/src/components/Board/Item.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Container.d.ts +10 -1
- package/dist/types/src/components/Mosaic/Container.d.ts.map +1 -1
- package/dist/types/src/components/Mosaic/Mosaic.d.ts +2 -2
- package/dist/types/src/components/Mosaic/Mosaic.d.ts.map +1 -1
- package/dist/types/src/testing/DefaultStackTile.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +26 -26
- package/src/components/Board/Item.tsx +19 -11
- package/src/components/Mosaic/Container.tsx +16 -0
- package/src/components/Mosaic/Mosaic.tsx +2 -0
- package/src/components/SearchStack/SearchStack.tsx +1 -1
- package/src/testing/DefaultStackTile.tsx +6 -4
- package/dist/lib/browser/chunk-I3M5WM6C.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-DVJLDZLE.mjs.map +0 -7
|
@@ -286,7 +286,7 @@ import { createContext as createContext2 } from "@radix-ui/react-context";
|
|
|
286
286
|
import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
|
|
287
287
|
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
288
288
|
import { bind } from "bind-event-listener";
|
|
289
|
-
import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
|
|
289
|
+
import React2, { useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
|
|
290
290
|
import { composable, composableProps } from "@dxos/react-ui";
|
|
291
291
|
import { isTruthy } from "@dxos/util";
|
|
292
292
|
var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
|
|
@@ -295,7 +295,7 @@ var MOSAIC_CONTAINER_STATE_ATTR = "mosaic-container-state";
|
|
|
295
295
|
var MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
|
|
296
296
|
var MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
|
|
297
297
|
var counter = 0;
|
|
298
|
-
var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, currentId, onCurrentChange, selectedIds, onSelectionChange, debug, ...props }, forwardedRef) => {
|
|
298
|
+
var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, controllerRef, currentId, onCurrentChange, selectedIds, onSelectionChange, debug, ...props }, forwardedRef) => {
|
|
299
299
|
const Comp = asChild ? Slot2 : Primitive2.div;
|
|
300
300
|
const rootRef = useRef2(null);
|
|
301
301
|
const composedRef = useComposedRefs2(rootRef, forwardedRef);
|
|
@@ -320,6 +320,9 @@ var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, or
|
|
|
320
320
|
const registerScrollTo = useCallback2((fn) => {
|
|
321
321
|
scrollToRef.current = fn;
|
|
322
322
|
}, []);
|
|
323
|
+
useImperativeHandle(controllerRef, () => ({
|
|
324
|
+
scrollToItem: (id) => scrollToRef.current?.(id)
|
|
325
|
+
}), []);
|
|
323
326
|
useEffect2(() => {
|
|
324
327
|
if (currentId) {
|
|
325
328
|
scrollToRef.current?.(currentId);
|
|
@@ -977,4 +980,4 @@ export {
|
|
|
977
980
|
useMosaicTileContext,
|
|
978
981
|
Mosaic
|
|
979
982
|
};
|
|
980
|
-
//# sourceMappingURL=chunk-
|
|
983
|
+
//# sourceMappingURL=chunk-DZ5WMCI2.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/useVisibleItems.ts", "../../../src/components/Focus/Focus.tsx", "../../../src/components/Mosaic/styles.ts", "../../../src/components/Mosaic/types.ts", "../../../src/components/Mosaic/Root.tsx", "../../../src/components/Mosaic/Container.tsx", "../../../src/components/Mosaic/Tile.tsx", "../../../src/components/Mosaic/Placeholder.tsx", "../../../src/components/Mosaic/Stack.tsx", "../../../src/components/Mosaic/Mosaic.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\nimport { type GetId, type MosaicTileData } from '../components';\n\nexport type UseVisibleItemsProps<TItem = any> = {\n /** Container id. */\n id: string;\n\n /** Current items. */\n items?: readonly TItem[] | TItem[];\n\n /** Currently dragging item. */\n dragging: MosaicTileData<TItem> | undefined;\n\n /** ID getter */\n getId: GetId<TItem>;\n};\n\n/**\n * Returns items with the dragging item removed.\n */\nexport const useVisibleItems = <TItem = any>({\n id,\n items,\n dragging,\n getId,\n}: UseVisibleItemsProps<TItem>): readonly TItem[] | TItem[] => {\n const visibleItems = useMemo(() => {\n if (!items || !dragging || id !== dragging.containerId) {\n return items ?? [];\n }\n\n const idx = items.findIndex((item) => getId(item) === dragging.id);\n if (idx === -1) {\n return items;\n }\n\n const visibleItems = items.slice();\n visibleItems.splice(idx, 1);\n return visibleItems;\n }, [id, items, dragging, getId]);\n\n return visibleItems;\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\n// Re-export from @dxos/react-ui.\nexport { Focus, useFocus, type FocusGroupProps, type FocusItemProps } from '@dxos/react-ui';\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport { type ClassNameValue } from '@dxos/react-ui';\n\nexport const styles = {\n placeholder: {\n root: [\n 'group opacity-0',\n 'group-data-[mosaic-debug=\"true\"]:opacity-100',\n 'group-data-[mosaic-debug=\"true\"]:bg-orange-500',\n 'data-[mosaic-placeholder-state=active]:opacity-100',\n 'data-[mosaic-placeholder-orientation=vertical]:snap-start', // TODO(burdon): Option.\n 'data-[mosaic-placeholder-orientation=vertical]:py-1',\n 'data-[mosaic-placeholder-orientation=vertical]:data-[mosaic-placeholder-state=active]:py-2.5',\n 'data-[mosaic-placeholder-orientation=horizontal]:px-1',\n 'data-[mosaic-placeholder-orientation=horizontal]:data-[mosaic-placeholder-state=active]:px-2.5',\n ],\n content: [\n 'transition-all duration-0',\n // TODO(burdon): Don't animate open if placeholder is the source.\n // TODO(burdon): Flickers when start to drag since source is removed and then the placeholder shows up.\n // - Use absolute positioning?\n // 'group-data-[mosaic-placeholder-state=active]:duration-200',\n 'group-data-[mosaic-placeholder-orientation=vertical]:h-0',\n 'group-data-[mosaic-placeholder-orientation=vertical]:group-data-[mosaic-placeholder-state=active]:h-[var(--mosaic-placeholder-height)]',\n 'group-data-[mosaic-placeholder-orientation=horizontal]:w-0',\n 'group-data-[mosaic-placeholder-orientation=horizontal]:group-data-[mosaic-placeholder-state=active]:w-[var(--mosaic-placeholder-width)]',\n ],\n },\n} satisfies Record<string, Record<string, ClassNameValue>>;\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n\nexport type GetId<TData = any> = (data: TData) => string;\n\n/**\n * NOTE: Must implement value equivalence.\n */\nexport type LocationType = string | number;\n\n/**\n * Get the source data from the drag payload.\n */\nexport const getSourceData = <TData = any, TLocation = any>(\n source: ElementDragPayload,\n): MosaicTileData<TData, TLocation> | null => {\n return source.data.type === 'tile' ? (source.data as MosaicTileData<TData, TLocation>) : null;\n};\n\n/**\n * Draggable item.\n * Tiles may contain arbitrary data (which may not be an ECHO object; e.g., search result).\n */\nexport type MosaicTileData<TData = any, TLocation = any> = {\n type: 'tile';\n containerId: string;\n id: string;\n data: TData;\n location: TLocation;\n bounds?: DOMRect;\n};\n\n/**\n * Drop target placeholder.\n */\nexport type MosaicPlaceholderData<TLocation = any> = {\n type: 'placeholder';\n containerId: string;\n location: TLocation;\n};\n\n/**\n * Drop target container.\n */\nexport type MosaicContainerData = {\n type: 'container';\n id: string;\n};\n\nexport type MosaicData = MosaicTileData | MosaicPlaceholderData | MosaicContainerData;\n\nexport type MosaicTargetData = MosaicTileData | MosaicPlaceholderData;\n\n/**\n * Handler implemented by drop containers.\n */\nexport interface MosaicEventHandler<TData = any, TObject = any> {\n /**\n * Container identifier.\n */\n id: string;\n\n /**\n * Determine if the item can be dropped into this container.\n * NOTE: This is continuously called while dragging (doesn't require mouse movement).\n */\n canDrop?: (props: { source: MosaicTileData<TData> }) => boolean;\n\n /**\n * Called during drag for custom visualization.\n */\n onDrag?: (props: { source: MosaicTileData<TData>; position: { x: number; y: number } }) => void;\n\n /**\n * Insert/rearrange the item at the given location.\n */\n onDrop?: (props: { source: MosaicTileData<TData>; target?: MosaicData }) => void;\n\n /**\n * Request the object to be dropped.\n * This allows the source container to clone/mutate/swap the object before it is dropped.\n * If the callback returns true, then the callback may decide to remove the item from the source container,\n * completing the transfer.\n */\n onTake?: (props: { source: MosaicTileData<TData> }, cb: (object: TObject) => Promise<boolean>) => void;\n\n /**\n * Dragging ended.\n */\n onCancel?: () => void;\n}\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { type ElementDragPayload, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type PropsWithChildren, forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { log } from '@dxos/log';\n\nimport { type MosaicData, type MosaicEventHandler, type MosaicTileData } from './types';\n\n//\n// Context\n//\n\ntype MosaicDraggingSource = {\n data: MosaicTileData;\n handler?: MosaicEventHandler;\n container?: Element;\n};\n\ntype MosaicDraggingTarget = {\n data: MosaicData;\n handler?: MosaicEventHandler;\n};\n\ntype MosaicDraggingState = {\n source: MosaicDraggingSource;\n target?: MosaicDraggingTarget;\n};\n\ntype MosaicRootContextValue = {\n containers: Record<string, MosaicEventHandler>;\n addContainer: (container: MosaicEventHandler) => void;\n removeContainer: (id: string) => void;\n dragging?: MosaicDraggingState;\n};\n\nconst [MosaicRootContextProvider, useMosaicRootContext] = createContext<MosaicRootContextValue>('MosaicRoot');\n\n//\n// Root\n//\n\nconst MOSAIC_ROOT_NAME = 'Mosaic.Root';\n\n// State attribute: [&:has(>_[data-mosaic-debug=true])]\nconst MOSAIC_ROOT_DEBUG_ATTR = 'mosaic-debug';\n\ntype MosaicRootProps = PropsWithChildren<{\n asChild?: boolean;\n debug?: boolean;\n}>;\n\nconst MosaicRoot = forwardRef<HTMLDivElement, MosaicRootProps>(({ children, asChild, debug }, forwardedRef) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);\n const Comp = asChild ? Slot : Primitive.div;\n\n const [handlers, setHandlers] = useState<Record<string, MosaicEventHandler>>({});\n const [dragging, setDragging] = useState<MosaicDraggingState | undefined>();\n\n const getSourceHandler = useCallback(\n (source: ElementDragPayload): { data: MosaicTileData; handler?: MosaicEventHandler } => {\n const data = source.data as MosaicTileData;\n return { data, handler: handlers[data.containerId] };\n },\n [handlers],\n );\n\n const getTargetHandler = useCallback(\n (location: DragLocationHistory): { data?: MosaicData; handler?: MosaicEventHandler } => {\n for (const target of location.current.dropTargets) {\n const data = target.data as MosaicData;\n let containerId: string;\n switch (data.type) {\n case 'tile':\n case 'placeholder':\n containerId = data.containerId;\n break;\n case 'container':\n containerId = data.id;\n break;\n }\n\n const handler = handlers[containerId];\n if (handler) {\n return { data, handler };\n }\n }\n\n return {};\n },\n [handlers],\n );\n\n useEffect(() => {\n const handleChange = ({ source, location }: { source: ElementDragPayload; location: DragLocationHistory }) => {\n const { data: sourceData } = getSourceHandler(source);\n const { data: targetData, handler } = getTargetHandler(location);\n setDragging((dragging) => {\n dragging?.target?.handler?.onCancel?.();\n return {\n source: {\n data: sourceData,\n handler: handlers[sourceData.containerId],\n // TODO(burdon): Check id matches.\n container: location.initial.dropTargets.find((target) => target.data.type === 'container')?.element,\n },\n target: targetData && {\n data: targetData,\n handler,\n },\n };\n });\n };\n\n const handleCancel = () => {\n setDragging((dragging) => {\n requestAnimationFrame(() => {\n dragging?.target?.handler?.onCancel?.();\n dragging?.source?.container?.dispatchEvent(new CustomEvent('dnd:cancel', { bubbles: true }));\n });\n\n return undefined;\n });\n };\n\n let noTargetTimeout: NodeJS.Timeout;\n\n // Main controller.\n return combine(\n monitorForElements({\n /**\n * Dragging started within any container.\n */\n onDragStart: ({ source, location }) => {\n log('Root.onDragStart', {\n source: source.data,\n location: location.current.dropTargets.map((target) => target.data),\n });\n\n handleChange({ source, location });\n },\n\n /**\n * Dragging entered a new container.\n */\n onDropTargetChange: ({ source, location }) => {\n clearTimeout(noTargetTimeout);\n log('Root.onDropTargetChange', {\n source: source.data,\n location: location.current.dropTargets.map((target) => target.data),\n });\n\n // Stop dragging if there are no drop targets (or we are cancelling).\n if (location.current.dropTargets.length === 0) {\n noTargetTimeout = setTimeout(() => setDragging(undefined), 1_000);\n } else {\n handleChange({ source, location });\n }\n },\n\n /**\n * Dragging within any container.\n */\n onDrag: ({ source, location }) => {\n const { data } = getSourceHandler(source);\n const { handler } = getTargetHandler(location);\n if (handler) {\n const { clientX: x, clientY: y } = location.current.input;\n handler.onDrag?.({ source: data, position: { x, y } });\n }\n },\n\n /**\n * Dragging ended.\n */\n onDrop: ({ source, location }) => {\n log.info('Root.onDrop', {\n source: source.data,\n location: location.current.dropTargets.map((target) => target.data),\n });\n\n // Get the source container.\n const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);\n if (!sourceHandler) {\n log.warn('invalid source', {\n source: sourceData,\n handlers: Object.keys(handlers),\n });\n return;\n }\n\n // NOTE: When dragging is cancelled (e.g., user presses ESC) onDrop is only called after a subsequent event.\n // NOTE: pDND blocks ESC event propagation while dragging.\n // - ESC only flips internal state.\n // - Completion happens on the next processed input event.\n // - This avoids reentrancy and keeps pointer/keyboard behavior consistent.\n // - We set dragging to undefined in onDropTargetChange after a delay if there are no drop targets.\n try {\n if (location.current.dropTargets.length === 0) {\n log.info('cancelled');\n } else {\n // Get the target container.\n const { data: targetData, handler: targetHandler } = getTargetHandler(location);\n if (!targetHandler) {\n log.warn('invalid target', {\n source: sourceData,\n location,\n handlers: Object.keys(handlers),\n });\n return;\n }\n\n // TODO(burdon): Check object doesn't already exist in the collection.\n if (sourceHandler === targetHandler) {\n targetHandler.onDrop?.({\n source: sourceData,\n target: targetData,\n });\n } else {\n if (!sourceHandler.onTake) {\n log.warn('invalid source', { source: sourceData });\n return;\n }\n\n sourceHandler.onTake?.({ source: sourceData }, async (object) => {\n targetHandler.onDrop?.({\n source: { ...sourceData, data: object },\n target: targetData,\n });\n\n return true;\n });\n }\n }\n } finally {\n handleCancel();\n }\n },\n }),\n );\n }, [handlers, getSourceHandler, getTargetHandler]);\n\n return (\n <MosaicRootContextProvider\n containers={handlers}\n addContainer={(container) =>\n setHandlers((containers) => ({\n ...containers,\n [container.id]: container,\n }))\n }\n removeContainer={(id) =>\n setHandlers((containers) => {\n delete containers[id];\n return { ...containers };\n })\n }\n dragging={dragging}\n >\n <Comp\n className='contents group'\n {...{\n [`data-${MOSAIC_ROOT_DEBUG_ATTR}`]: debug,\n }}\n ref={composedRef}\n >\n {children}\n </Comp>\n </MosaicRootContextProvider>\n );\n});\n\nMosaicRoot.displayName = MOSAIC_ROOT_NAME;\n\nexport { MosaicRoot, useMosaicRootContext };\n\nexport type { MosaicRootProps, MosaicDraggingState };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport { bind } from 'bind-event-listener';\nimport React, {\n type CSSProperties,\n type PropsWithChildren,\n type ReactNode,\n type Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { type AllowedAxis, composable, composableProps } from '@dxos/react-ui';\nimport { isTruthy } from '@dxos/util';\n\nimport { useFocus } from '../Focus';\nimport { type MosaicDraggingState, useMosaicRootContext } from './Root';\nimport {\n type LocationType,\n type MosaicContainerData,\n type MosaicEventHandler,\n type MosaicTileData,\n getSourceData,\n} from './types';\n\n//\n// Container\n//\n\nconst MOSAIC_CONTAINER_NAME = 'Mosaic.Container';\n\ntype MosaicContainerState = { type: 'idle' } | { type: 'active'; bounds?: DOMRect };\n\ntype MosaicContainerContextValue<TData = any, Location = LocationType> = {\n id: string;\n eventHandler: MosaicEventHandler<TData>;\n orientation?: AllowedAxis;\n dragging?: MosaicDraggingState;\n scrolling?: boolean;\n state: MosaicContainerState;\n\n /** Active drop location. */\n activeLocation?: Location;\n setActiveLocation: (location: Location | undefined) => void;\n\n /** ID of the current (aria-current) item. */\n currentId?: string;\n /** Set the current item by ID. */\n setCurrentId: (id: string | undefined) => void;\n\n /** IDs of selected (aria-selected) items. */\n selectedIds?: ReadonlySet<string>;\n /** Request to set or unset selection on an item by ID. */\n setSelected: (id: string, selected: boolean) => void;\n\n /** Register a scroll-to-item callback (provided by Stack/VirtualStack). */\n registerScrollTo: (fn: ((id: string) => void) | undefined) => void;\n};\n\nconst [MosaicContainerContextProvider, useMosaicContainerContext] =\n createContext<MosaicContainerContextValue>('MosaicContainer');\n\n// State attribute: [&:has(>_[data-mosaic-container-state=active])]\nconst MOSAIC_CONTAINER_STATE_ATTR = 'mosaic-container-state';\n\n// CSS variables: [var(--mosaic-placeholder-xxx)]\nconst MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = '--mosaic-placeholder-width';\nconst MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = '--mosaic-placeholder-height';\n\nlet counter = 0;\n\n/** Imperative handle for scrolling a stack to an item without changing the current/selected item. */\nexport type MosaicScrollController = {\n scrollToItem: (id: string) => void;\n};\n\ntype MosaicContainerProps = PropsWithChildren<\n Partial<Pick<MosaicContainerContextValue, 'eventHandler' | 'orientation'>> & {\n asChild?: boolean;\n /** Support autoscrolling container when dragging. */\n autoScroll?: HTMLElement | null;\n withFocus?: boolean;\n /** Imperative handle to scroll the stack to an item (decoupled from selection). */\n controllerRef?: Ref<MosaicScrollController>;\n /** Controlled current-item ID. */\n currentId?: string;\n /** Called when a tile requests to become current. */\n onCurrentChange?: (id: string | undefined) => void;\n /** Controlled set of selected item IDs. */\n selectedIds?: ReadonlySet<string>;\n /** Called when a tile requests to toggle selection. */\n onSelectionChange?: (id: string, selected: boolean) => void;\n debug?: () => ReactNode;\n }\n>;\n\n/**\n * Container for a Mosaic layout.\n */\n// TODO(burdon): Make generic.\nconst MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(\n (\n {\n children,\n eventHandler: eventHandlerProp,\n orientation = 'vertical',\n asChild,\n autoScroll: autoscrollElement,\n withFocus,\n controllerRef,\n currentId,\n onCurrentChange,\n selectedIds,\n onSelectionChange,\n debug,\n ...props\n },\n forwardedRef,\n ) => {\n const Comp = asChild ? Slot : Primitive.div;\n const rootRef = useRef<HTMLDivElement>(null);\n const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);\n\n // Handler.\n const eventHandler = useMemo(\n () =>\n eventHandlerProp ?? {\n id: `mosaic-container-${counter++}`,\n },\n [eventHandlerProp],\n );\n\n // State.\n const { dragging } = useMosaicRootContext(MOSAIC_CONTAINER_NAME);\n const [state, setState] = useState<MosaicContainerState>({ type: 'idle' });\n const [activeLocation, setActiveLocation] = useState<LocationType | undefined>();\n const [scrolling, setScrolling] = useState(false);\n const setCurrentId = useCallback((id: string | undefined) => onCurrentChange?.(id), [onCurrentChange]);\n const setSelected = useCallback(\n (id: string, selected: boolean) => onSelectionChange?.(id, selected),\n [onSelectionChange],\n );\n\n // Scroll-to-item: Stack/VirtualStack registers its implementation.\n const scrollToRef = useRef<((id: string) => void) | undefined>(undefined);\n const registerScrollTo = useCallback((fn: ((id: string) => void) | undefined) => {\n scrollToRef.current = fn;\n }, []);\n\n // Imperative scroll-to-item, decoupled from selection (e.g. a calendar scrolling the stack to a day).\n useImperativeHandle(controllerRef, () => ({ scrollToItem: (id: string) => scrollToRef.current?.(id) }), []);\n\n // When currentId changes, scroll the matching item into view.\n useEffect(() => {\n if (currentId) {\n scrollToRef.current?.(currentId);\n }\n }, [currentId]);\n\n // Focus container.\n const { setFocus } = useFocus();\n useEffect(() => {\n if (withFocus) {\n setFocus?.(state.type === 'active' ? 'active' : undefined);\n }\n }, [setFocus, withFocus, state]);\n\n // Register handler.\n const { addContainer, removeContainer } = useMosaicRootContext(eventHandler.id);\n useEffect(() => {\n addContainer(eventHandler);\n return () => removeContainer(eventHandler.id);\n }, [eventHandler]);\n\n const data = useMemo<MosaicContainerData>(\n () =>\n ({\n type: 'container',\n id: eventHandler.id,\n }) satisfies MosaicContainerData,\n [eventHandler.id],\n );\n\n useEffect(() => {\n if (!rootRef.current) {\n return;\n }\n\n // Determine if scrolling (pause drag/drop handlers).\n let timeout: ReturnType<typeof setTimeout>;\n const handleScroll = () => {\n setScrolling(true);\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n setScrolling(false);\n }, 500);\n };\n\n return combine(\n ...[\n /**\n * Custom event for dragging cancellation.\n */\n bind(rootRef.current, {\n type: 'dnd:cancel',\n listener: () => {\n setState({ type: 'idle' });\n },\n }),\n\n // Target.\n dropTargetForElements({\n element: rootRef.current,\n getData: () => data,\n\n /**\n * Test if permitted to drop here.\n * NOTE: Contained Tile and Placeholder elements do the same.\n */\n canDrop: ({ source }) => {\n const data = getSourceData(source);\n return (data && eventHandler.canDrop?.({ source: data })) || false;\n },\n\n // TODO(burdon): Provide semantic intent to onDrop.\n // getDropEffect: () => {\n // return 'move';\n // },\n\n /**\n * Dragging started in this container.\n */\n onDragStart: ({ source }) => {\n const sourceData = source.data as MosaicTileData;\n setState({ type: 'active', bounds: sourceData.bounds });\n },\n /**\n * Dragging entered this container.\n */\n onDragEnter: ({ source }) => {\n const sourceData = source.data as MosaicTileData;\n setState({ type: 'active', bounds: sourceData.bounds });\n },\n /**\n * Dragging left this container.\n * NOTE: If the container isn't full-height, then when the dragged item is temporarily removed the container will shrink,\n * triggering `onDragLeave`, which then causes the item to be added and removed continually (flickering).\n */\n onDragLeave: ({ source }) => {\n const sourceData = source.data as MosaicTileData;\n if (sourceData.containerId !== eventHandler.id) {\n setState({ type: 'idle' });\n }\n },\n /**\n * Dropped in this container.\n */\n onDrop: () => {\n setState({ type: 'idle' });\n },\n }),\n\n // Autoscroll.\n // NOTE: When used with Scrollable we get a spurious warning (in dev mode).\n // \"Auto scrolling has been attached to an element that appears not to be scrollable.\"\n autoscrollElement && [\n autoScrollForElements({\n element: autoscrollElement,\n // canScroll: ({ element: _ }) => {\n // return true;\n // },\n getAllowedAxis: () => orientation,\n getConfiguration: () => ({\n maxScrollSpeed: 'fast',\n }),\n }),\n\n bind(autoscrollElement, {\n type: 'scroll',\n listener: handleScroll,\n }),\n\n () => setScrolling(false),\n ],\n ]\n .filter(isTruthy)\n .flatMap((x) => x),\n );\n }, [rootRef, eventHandler, data, autoscrollElement]);\n\n return (\n <MosaicContainerContextProvider\n id={eventHandler.id}\n eventHandler={eventHandler}\n orientation={orientation}\n state={state}\n dragging={state.type === 'active' ? dragging : undefined}\n scrolling={scrolling}\n activeLocation={activeLocation}\n setActiveLocation={setActiveLocation}\n currentId={currentId}\n setCurrentId={setCurrentId}\n selectedIds={selectedIds}\n setSelected={setSelected}\n registerScrollTo={registerScrollTo}\n >\n <Comp\n {...composableProps(props, {\n classNames: 'h-full',\n style: {\n [MOSAIC_CONTAINER_PLACEHOLDER_WIDTH]:\n state.type === 'active' && state.bounds ? `${state.bounds.width}px` : '0px',\n [MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT]:\n state.type === 'active' && state.bounds ? `${state.bounds.height}px` : '0px',\n } as CSSProperties,\n })}\n {...{\n [`data-${MOSAIC_CONTAINER_STATE_ATTR}`]: state.type,\n }}\n ref={composedRef}\n >\n {children}\n </Comp>\n {debug?.()}\n </MosaicContainerContextProvider>\n );\n },\n);\n\nMosaicContainer.displayName = MOSAIC_CONTAINER_NAME;\n\nexport { MosaicContainer, useMosaicContainerContext };\n\nexport type { MosaicContainerProps, MosaicContainerState };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport {\n type Edge,\n attachClosestEdge,\n extractClosestEdge,\n} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n type ElementDragPayload,\n draggable,\n dropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\nimport { type DropTargetRecord } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\nimport { createContext } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type PropsWithChildren, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { composableProps, slottable } from '@dxos/react-ui';\n\nimport { useMosaicContainerContext } from './Container';\nimport { type LocationType, type MosaicTileData, getSourceData } from './types';\n\n//\n// Tile\n//\n\nconst MOSAIC_TILE_NAME = 'Mosaic.Tile';\n\ntype MosaicTileState =\n | { type: 'idle' }\n | { type: 'preview'; container: HTMLElement; rect: DOMRect }\n | { type: 'dragging' }\n | { type: 'target'; closestEdge: Edge | null };\n\ntype MosaicTileContextValue = {\n state: MosaicTileState;\n};\n\nconst [MosaicTileContextProvider, useMosaicTileContext] = createContext<MosaicTileContextValue>('MosaicTile');\n\n// State attribute: data-[mosaic-tile-state=dragging]\nconst MOSAIC_TILE_STATE_ATTR = 'mosaic-tile-state';\n\ntype MosaicTileProps<TData = any, TLocation = LocationType> = ThemedClassName<\n PropsWithChildren<{\n className?: string;\n dragHandle?: HTMLElement | null;\n allowedEdges?: Edge[];\n id: string;\n data: TData;\n location: TLocation;\n draggable?: boolean;\n /** Whether this tile is the current (aria-current) item. */\n current?: boolean;\n /** Whether this tile is selected (aria-selected). */\n selected?: boolean;\n debug?: boolean;\n }>\n>;\n\nconst MosaicTile = slottable<HTMLDivElement, MosaicTileProps>(\n (\n {\n children,\n asChild,\n dragHandle,\n allowedEdges: allowedEdgesProp,\n location,\n id,\n data: dataProp,\n draggable: draggableProp,\n current,\n selected,\n debug: _,\n ...props\n },\n forwardedRef,\n ) => {\n const Comp = asChild ? Slot : Primitive.div;\n const rootRef = useRef<HTMLDivElement>(null);\n const composedRef = composeRefs<HTMLDivElement>(rootRef, forwardedRef);\n\n // State.\n const {\n id: containerId,\n eventHandler,\n orientation,\n scrolling,\n setActiveLocation,\n } = useMosaicContainerContext(MOSAIC_TILE_NAME);\n const [state, setState] = useState<MosaicTileState>({ type: 'idle' });\n\n const allowedEdges = useMemo<Edge[]>(\n () => allowedEdgesProp || (orientation === 'vertical' ? ['top', 'bottom'] : ['left', 'right']),\n [allowedEdgesProp, orientation],\n );\n\n const data = useMemo<MosaicTileData>(\n () =>\n ({\n type: 'tile',\n id,\n containerId,\n data: dataProp,\n location,\n }) satisfies MosaicTileData,\n [containerId, location, dataProp],\n );\n\n useLayoutEffect(() => {\n const root = rootRef.current;\n if (!draggableProp || !root || !containerId || scrolling) {\n return;\n }\n\n const handleChange = ({ self, source }: { self: DropTargetRecord; source: ElementDragPayload }) => {\n if (source.data.id !== dataProp.id) {\n const closestEdge = extractClosestEdge(self.data);\n const location = data.location + (closestEdge === 'top' || closestEdge === 'left' ? -0.5 : 0.5);\n setActiveLocation(location);\n setState({ type: 'target', closestEdge });\n }\n };\n\n return combine(\n // Source.\n draggable({\n element: root,\n dragHandle: dragHandle && state.type !== 'preview' ? dragHandle : undefined,\n canDrag: () => true,\n getInitialData: () => data,\n onGenerateDragPreview: ({ location, nativeSetDragImage }) => {\n setCustomNativeDragPreview({\n nativeSetDragImage,\n getOffset: preserveOffsetOnSource({\n element: root,\n input: location.current.input,\n }),\n render: ({ container }) => {\n data.bounds = root.getBoundingClientRect();\n setState({\n type: 'preview',\n container,\n rect: root.getBoundingClientRect(),\n });\n return () => setState({ type: 'dragging' });\n },\n });\n },\n\n onDragStart: () => {\n setState({ type: 'dragging' });\n },\n onDrop: () => {\n setState({ type: 'idle' });\n },\n }),\n\n // Target.\n dropTargetForElements({\n element: root,\n getData: ({ input, element }) => attachClosestEdge(data, { input, element, allowedEdges }),\n canDrop: ({ source }) => {\n const data = getSourceData(source);\n return (data && eventHandler.canDrop?.({ source: data })) || false;\n },\n onDragEnter: ({ self, source }) => {\n handleChange({ self, source });\n },\n onDragLeave: () => {\n setState({ type: 'idle' });\n setActiveLocation(undefined);\n },\n onDrag: ({ self, source }) => {\n handleChange({ self, source });\n },\n onDrop: () => {\n setState({ type: 'idle' });\n setActiveLocation(undefined);\n },\n }),\n );\n }, [\n rootRef,\n forwardedRef,\n containerId,\n dragHandle,\n eventHandler,\n data,\n scrolling,\n allowedEdges,\n setActiveLocation,\n ]);\n\n const { className, ...rest } = composableProps(props, { classNames: 'relative outline-none' });\n\n // NOTE: Ensure no gaps between cells (prevent drop indicators flickering).\n // NOTE: Ensure padding doesn't change position of cursor when dragging (no margins).\n return (\n <MosaicTileContextProvider state={state}>\n <Comp\n {...rest}\n {...{\n 'data-object-id': id,\n [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,\n }}\n role='listitem'\n // Pair `current` / `selected` props with `aria-current` / `aria-selected`\n // so the `dx-current` / `dx-selected` / `dx-hover` utilities (which key\n // off those attributes) actually fire. Without this the props are purely\n // advisory and the corresponding styling silently no-ops.\n aria-current={current ? 'true' : undefined}\n aria-selected={selected ? 'true' : undefined}\n className={className}\n ref={composedRef}\n >\n {children}\n </Comp>\n\n {/* Dragging preview. */}\n {state.type === 'preview' &&\n createPortal(\n <Comp\n {...{\n // NOTE: Use to control appearance while dragging.\n [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,\n }}\n className={className}\n style={{\n width: `${state.rect.width}px`,\n height: `${state.rect.height}px`,\n }}\n >\n {children}\n </Comp>,\n state.container,\n )}\n </MosaicTileContextProvider>\n );\n },\n);\n\nMosaicTile.displayName = MOSAIC_TILE_NAME;\n\nexport { MosaicTile, useMosaicTileContext };\n\nexport type { MosaicTileProps, MosaicTileState };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport {\n DropIndicator as NaturalDropIndicator,\n type DropIndicatorProps as NaturalDropIndicatorProps,\n} from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';\nimport { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type PropsWithChildren, useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { type Axis, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nimport { useMosaicContainerContext } from './Container';\nimport { useMosaicTileContext } from './Tile';\nimport { type LocationType, type MosaicPlaceholderData, getSourceData } from './types';\n\n//\n// Placeholder\n//\n\nconst MOSAIC_PLACEHOLDER_NAME = 'Mosaic.Placeholder';\n\n// Orientation: data-[mosaic-placeholder-orientation=vertical]\nconst MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = 'mosaic-placeholder-orientation';\n\n// State attribute: data-[mosaic-placeholder-state=active]\nconst MOSAIC_PLACEHOLDER_STATE_ATTR = 'mosaic-placeholder-state';\n\n// Location attribute: data-[mosaic-placeholder-location=0.5]. Identifies the\n// placeholder's slot in its container (0.5, 1.5, 2.5, …) so tests can target\n// a specific gap unambiguously without relying on layout-dependent indices.\nconst MOSAIC_PLACEHOLDER_LOCATION_ATTR = 'mosaic-placeholder-location';\n\ntype MosaicPlaceholderProps<Location = LocationType> = ThemedClassName<\n PropsWithChildren<{\n asChild?: boolean;\n orientation?: Axis;\n location: Location;\n }>\n>;\n\nconst MosaicPlaceholder = <Location extends LocationType = LocationType>({\n classNames,\n children,\n asChild,\n orientation = 'vertical',\n location,\n}: MosaicPlaceholderProps<Location>) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const Comp = asChild ? Slot : Primitive.div;\n const {\n id: containerId,\n eventHandler,\n scrolling,\n activeLocation,\n setActiveLocation,\n } = useMosaicContainerContext(MOSAIC_PLACEHOLDER_NAME);\n const data = useMemo<MosaicPlaceholderData<Location>>(\n () =>\n ({\n type: 'placeholder',\n containerId,\n location,\n }) satisfies MosaicPlaceholderData<Location>,\n [containerId, location],\n );\n\n useLayoutEffect(() => {\n const root = rootRef.current;\n if (!root || scrolling) {\n return;\n }\n\n return dropTargetForElements({\n element: root,\n getData: () => data,\n canDrop: ({ source }) => {\n const data = getSourceData(source);\n return (data && eventHandler.canDrop?.({ source: data })) || false;\n },\n onDragEnter: () => {\n setActiveLocation(data.location);\n },\n onDragLeave: () => {\n setActiveLocation(undefined);\n },\n onDrop: () => {\n setActiveLocation(undefined);\n },\n });\n }, [rootRef, data, scrolling, setActiveLocation]);\n\n return (\n <Comp\n {...{\n [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,\n [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? 'active' : 'idle',\n [`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),\n }}\n role='none'\n className={mx('relative', classNames)}\n ref={rootRef}\n >\n {children}\n </Comp>\n );\n};\n\nMosaicPlaceholder.displayName = MOSAIC_PLACEHOLDER_NAME;\n\n//\n// DropIndicator\n// TODO(burdon): Support DropIndicator or Placeholder variants.\n//\n\nconst DROP_INDICATOR_NAME = 'Mosaic.DropIndicator';\n\ntype MosaicDropIndicatorProps = Omit<NaturalDropIndicatorProps, 'edge'>;\n\nconst MosaicDropIndicator = (props: MosaicDropIndicatorProps) => {\n const { state } = useMosaicTileContext(DROP_INDICATOR_NAME);\n return state.type === 'target' && state.closestEdge ? (\n <NaturalDropIndicator {...props} edge={state.closestEdge} />\n ) : null;\n};\n\nMosaicDropIndicator.displayName = DROP_INDICATOR_NAME;\n\n//\n// Exports\n//\n\nexport { MosaicPlaceholder, MosaicDropIndicator };\n\nexport type { MosaicPlaceholderProps, MosaicDropIndicatorProps };\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { type ReactVirtualizerOptions, useVirtualizer } from '@tanstack/react-virtual';\nimport React, {\n type FC,\n forwardRef,\n Fragment,\n type ReactElement,\n type Ref,\n useCallback,\n useEffect,\n useRef,\n} from 'react';\n\nimport { invariant } from '@dxos/invariant';\nimport { type Axis, type ThemedClassName, composable, composableProps } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nimport { useVisibleItems } from '../../hooks';\nimport { useMosaicContainerContext } from './Container';\nimport { MosaicPlaceholder, type MosaicPlaceholderProps } from './Placeholder';\nimport { styles } from './styles';\nimport { type MosaicTileProps } from './Tile';\nimport { type GetId } from './types';\n\n//\n// Mosaic Drag-and-drop\n//\n// Drop targets:\n// - Placeholders exist to allow gaps but prevent deadspace when dragging within a container.\n// - When dragging over a Tile, the placeholder next to the closest edge is activated.\n// - Placeholders expand when active; event handlers are disabled while the container is scrolling.\n//\n// [Container]\n// - [Placeholder 0.5]\n// - [Tile 1 ]\n// - [Placeholder 1.5]\n// - [Tile 2 ]\n// - [Placeholder 2.5]\n// - [Tile 3 ]\n// - [Placeholder 3.5]\n//\n// Implementation Notes\n// - We use [Radix composition](https://www.radix-ui.com/primitives/docs/guides/composition) to factor out composible aspects (e.g., Focus, Mosaic, etc.)\n// - NOTE: Use Slottable only if needed to disambiguate; otherwise a suspected Radix bug causes compositional problems.\n\nconst MOSAIC_STACK_NAME = 'MosaicStack';\n\ntype MosaicStackTileComponent<TData = any> = FC<MosaicTileProps<TData>>;\n\ntype MosaicStackProps<TData = any> = ThemedClassName<\n {\n role?: string;\n orientation?: Axis;\n getId: GetId<TData>;\n items?: readonly TData[];\n scrollIntoView?: boolean;\n Tile: MosaicStackTileComponent<TData>;\n } & Pick<MosaicTileProps<TData>, 'draggable' | 'debug'>\n>;\n\n/**\n * Linear layout of Mosaic tiles.\n * NOTE: This is a low-level component and should be wrapped by a scrollable container.\n */\nconst MosaicStackInner = composable<HTMLDivElement, MosaicStackProps>(\n (\n {\n orientation: orientationProp = 'vertical',\n getId,\n items,\n scrollIntoView = true,\n Tile,\n draggable = true,\n debug,\n ...props\n },\n forwardedRef,\n ) => {\n const {\n id,\n orientation = orientationProp,\n dragging,\n currentId,\n selectedIds,\n registerScrollTo,\n } = useMosaicContainerContext(MOSAIC_STACK_NAME);\n const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });\n invariant(orientation === 'vertical' || orientation === 'horizontal', `Invalid orientation: ${orientation}`);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const scrollToId = useCallback(\n (targetId: string) => {\n if (!scrollIntoView) {\n return;\n }\n\n const el = rootRef.current?.querySelector<HTMLElement>(`[data-object-id=\"${CSS.escape(targetId)}\"]`);\n el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n },\n [scrollIntoView],\n );\n\n useEffect(() => {\n registerScrollTo(scrollToId);\n return () => registerScrollTo(undefined);\n }, [registerScrollTo, scrollToId]);\n\n const composedRef = useComposedRefs(rootRef, forwardedRef);\n return (\n <div\n {...composableProps(props, {\n role: 'list',\n classNames: [\n 'flex',\n orientation === 'horizontal' && 'h-full [&>*]:shrink-0',\n orientation === 'vertical' && 'flex-col',\n ],\n })}\n ref={composedRef}\n >\n {draggable && <InternalPlaceholder orientation={orientation} location={0.5} />}\n {visibleItems?.map((item, index) => (\n <Fragment key={getId(item)}>\n <Tile\n id={getId(item)}\n data={item}\n location={index + 1}\n draggable={draggable}\n current={getId(item) === currentId}\n selected={selectedIds?.has(getId(item))}\n debug={debug}\n />\n {draggable && <InternalPlaceholder orientation={orientation} location={index + 1.5} />}\n </Fragment>\n ))}\n </div>\n );\n },\n);\n\nMosaicStackInner.displayName = MOSAIC_STACK_NAME;\n\nconst MosaicStack = MosaicStackInner as <TData = any>(\n props: MosaicStackProps<TData> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n\n//\n// VirtualStack\n//\n\nconst MOSAIC_VIRTUAL_STACK_NAME = 'MosaicVirtualStack';\n\ntype MosaicVirtualStackProps<TData = any> = MosaicStackProps<TData> &\n Pick<\n ReactVirtualizerOptions<HTMLElement, HTMLDivElement>,\n 'estimateSize' | 'gap' | 'getScrollElement' | 'overscan' | 'onChange'\n >;\n\nconst MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackProps>(\n (\n {\n orientation = 'vertical',\n getId,\n items,\n scrollIntoView = true,\n Tile,\n estimateSize,\n getScrollElement,\n overscan = 8,\n gap,\n onChange,\n draggable = true,\n debug,\n ...props\n },\n forwardedRef,\n ) => {\n invariant(Tile);\n const { id, dragging, currentId, selectedIds, registerScrollTo } =\n useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);\n const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });\n // In draggable mode virtual indices alternate: even=placeholder, odd=tile.\n // Wrap estimateSize so placeholders get 0 (their actual negligible height) and\n // tile slots receive the caller's estimate at the correct tile index.\n // This keeps getTotalSize() stable as items are measured → no scrollbar drift.\n const wrappedEstimateSize = draggable\n ? (index: number) => (index % 2 === 0 ? 0 : estimateSize(Math.floor(index / 2)))\n : estimateSize;\n\n const virtualizer = useVirtualizer({\n // NOTE: When draggable we double the number of items to allow for placeholders.\n count: draggable ? visibleItems.length * 2 + 1 : visibleItems.length,\n estimateSize: wrappedEstimateSize,\n gap,\n // Inset the stack from both ends by `gap` (matching the inter-item spacing). The virtualizer\n // folds this into item offsets, getTotalSize(), and scrollToIndex, so no manual compensation.\n paddingStart: gap,\n paddingEnd: gap,\n // Key measurements by stable item ID so the size cache survives scrolling;\n // without this, measurements are indexed by position and are lost when items reorder.\n getItemKey: draggable\n ? (index) => (index % 2 === 0 ? `ph-${index}` : getId(visibleItems![Math.floor(index / 2)]))\n : (index) => getId(visibleItems![index]),\n getScrollElement,\n overscan,\n onChange,\n });\n\n // Register scroll-to-item via virtualizer index lookup.\n const scrollToId = useCallback(\n (targetId: string) => {\n const itemIndex = visibleItems.findIndex((item) => getId(item) === targetId);\n if (itemIndex >= 0) {\n if (!scrollIntoView) {\n return;\n }\n\n const virtualIndex = draggable ? itemIndex * 2 + 1 : itemIndex;\n // Align to the item's start, but offset by the inter-item `gap` so the tile lands\n // one gap below the viewport edge rather than flush against it (a plain\n // `scrollToIndex({ align: 'start' })` scrolls the preceding gap out of view).\n const [offset] = virtualizer.getOffsetForIndex(virtualIndex, 'start') ?? [];\n if (offset != null) {\n virtualizer.scrollToOffset(Math.max(0, offset - (gap ?? 0)), { behavior: 'smooth' });\n }\n }\n },\n [visibleItems, getId, draggable, virtualizer, scrollIntoView, gap],\n );\n\n useEffect(() => {\n registerScrollTo(scrollToId);\n return () => registerScrollTo(undefined);\n }, [registerScrollTo, scrollToId]);\n\n const virtualItems = virtualizer.getVirtualItems();\n const getData = (index: number): { data?: any; location: number } => {\n if (draggable) {\n if (index % 2 === 0) {\n return { location: Math.floor(index / 2) + 0.5 };\n } else {\n return { data: visibleItems![Math.floor(index / 2)], location: Math.floor(index / 2) + 1 };\n }\n } else {\n return { data: visibleItems![index], location: index + 1 };\n }\n };\n\n return (\n <div\n {...composableProps(props, {\n role: 'list',\n classNames: [\n // shrink-0 is required: this div sets an explicit height via inline style (getTotalSize).\n // Without it, a parent flex container (e.g. ScrollArea.Viewport) would shrink this div\n // to the viewport height, collapsing the scroll content and causing scrollbar drift.\n 'flex shrink-0',\n orientation === 'horizontal' && 'h-full [&>*]:shrink-0',\n orientation === 'vertical' && 'flex-col',\n ],\n })}\n style={{\n position: 'relative',\n ...(orientation === 'vertical'\n ? {\n width: '100%',\n height: virtualizer.getTotalSize(),\n }\n : {\n width: virtualizer.getTotalSize(),\n height: '100%',\n }),\n }}\n ref={forwardedRef}\n >\n {virtualItems.map(({ key, index, start }) => {\n const { data, location } = getData(index);\n return (\n <div\n key={key}\n data-index={index}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n ...(orientation === 'vertical'\n ? {\n width: '100%',\n transform: `translateY(${start}px)`,\n }\n : {\n height: '100%',\n transform: `translateX(${start}px)`,\n }),\n }}\n ref={virtualizer.measureElement}\n >\n {data ? (\n <Tile\n id={getId(data)}\n data={data}\n location={location}\n draggable={draggable}\n current={getId(data) === currentId}\n selected={selectedIds?.has(getId(data))}\n debug={debug}\n />\n ) : (\n <InternalPlaceholder orientation={orientation} location={location} />\n )}\n </div>\n );\n })}\n </div>\n );\n },\n);\n\nMosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;\n\nconst MosaicVirtualStack = MosaicVirtualStackInner as <TData = any>(\n props: MosaicVirtualStackProps<TData> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n\n(MosaicVirtualStack as any)[Symbol.for('dxos.composable')] = true;\n\n//\n// InternalPlaceholder\n//\n\nconst InternalPlaceholder = (props: MosaicPlaceholderProps<number>) => {\n return (\n <MosaicPlaceholder {...props} classNames={styles.placeholder.root}>\n <div\n className={mx(\n 'flex h-full bg-base-surface border border-dashed border-separator rounded-xs',\n styles.placeholder.content,\n )}\n />\n </MosaicPlaceholder>\n );\n};\n\nInternalPlaceholder.displayName = 'InternalPlaceholder';\n\n//\n// Exports\n//\n\nexport { MosaicStack, MosaicVirtualStack };\n\nexport type { MosaicStackTileComponent, MosaicStackProps, MosaicVirtualStackProps };\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport {\n MosaicContainer,\n type MosaicContainerProps,\n type MosaicContainerState,\n type MosaicScrollController,\n useMosaicContainerContext,\n} from './Container';\nimport {\n MosaicDropIndicator,\n type MosaicDropIndicatorProps,\n MosaicPlaceholder,\n type MosaicPlaceholderProps,\n} from './Placeholder';\nimport { MosaicRoot, type MosaicRootProps, useMosaicRootContext } from './Root';\nimport { MosaicStack, type MosaicStackProps, type MosaicStackTileComponent, MosaicVirtualStack } from './Stack';\nimport { MosaicTile, type MosaicTileProps, type MosaicTileState, useMosaicTileContext } from './Tile';\n\n//\n// Mosaic\n//\n\nexport const Mosaic = {\n Root: MosaicRoot,\n Container: MosaicContainer,\n Tile: MosaicTile,\n Placeholder: MosaicPlaceholder,\n DropIndicator: MosaicDropIndicator,\n Stack: MosaicStack,\n VirtualStack: MosaicVirtualStack,\n};\n\nexport type {\n MosaicRootProps,\n MosaicContainerProps,\n MosaicContainerState,\n MosaicScrollController,\n MosaicTileProps,\n MosaicTileState,\n MosaicPlaceholderProps,\n MosaicDropIndicatorProps,\n MosaicStackProps,\n MosaicStackTileComponent,\n};\n\nexport {\n useMosaicRootContext as useMosaic,\n useMosaicContainerContext as useMosaicContainer,\n useMosaicTileContext as useMosaicTile,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useMemo", "useVisibleItems", "id", "items", "dragging", "getId", "visibleItems", "containerId", "idx", "findIndex", "item", "slice", "splice", "Focus", "useFocus", "styles", "placeholder", "root", "content", "getSourceData", "source", "data", "type", "combine", "monitorForElements", "useComposedRefs", "createContext", "Primitive", "Slot", "React", "forwardRef", "useCallback", "useEffect", "useRef", "useState", "log", "MosaicRootContextProvider", "MOSAIC_ROOT_DEBUG_ATTR", "rootRef", "forwardedRef", "Comp", "asChild", "setHandlers", "dragging", "setDragging", "getSourceHandler", "source", "data", "handler", "handlers", "target", "containerId", "type", "targetData", "getTargetHandler", "onCancel", "container", "location", "dropTargets", "find", "requestAnimationFrame", "bubbles", "noTargetTimeout", "current", "handleChange", "clientX", "onDrag", "position", "x", "y", "sourceData", "sourceHandler", "warn", "object", "targetHandler", "handleCancel", "removeContainer", "containers", "className", "debug", "ref", "composedRef", "children", "MosaicRoot", "displayName", "autoScrollForElements", "combine", "dropTargetForElements", "useComposedRefs", "createContext", "Primitive", "Slot", "bind", "React", "useCallback", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "composable", "composableProps", "isTruthy", "MOSAIC_CONTAINER_NAME", "MosaicContainerContextProvider", "useMosaicContainerContext", "createContext", "MOSAIC_CONTAINER_STATE_ATTR", "MOSAIC_CONTAINER_PLACEHOLDER_WIDTH", "MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT", "counter", "MosaicContainer", "composable", "children", "eventHandler", "eventHandlerProp", "orientation", "asChild", "autoScroll", "autoscrollElement", "withFocus", "controllerRef", "currentId", "onCurrentChange", "selectedIds", "onSelectionChange", "debug", "props", "forwardedRef", "Comp", "Slot", "Primitive", "div", "rootRef", "useRef", "composedRef", "useComposedRefs", "useMemo", "id", "dragging", "useMosaicRootContext", "state", "setState", "useState", "type", "activeLocation", "setActiveLocation", "scrolling", "setScrolling", "setCurrentId", "useCallback", "setSelected", "selected", "scrollToRef", "undefined", "registerScrollTo", "fn", "current", "useImperativeHandle", "scrollToItem", "useEffect", "setFocus", "useFocus", "addContainer", "removeContainer", "data", "timeout", "handleScroll", "clearTimeout", "setTimeout", "combine", "bind", "listener", "dropTargetForElements", "element", "getData", "canDrop", "source", "getSourceData", "onDragStart", "sourceData", "bounds", "onDragEnter", "onDragLeave", "containerId", "onDrop", "autoScrollForElements", "getAllowedAxis", "getConfiguration", "maxScrollSpeed", "filter", "isTruthy", "flatMap", "x", "React", "composableProps", "classNames", "style", "width", "height", "ref", "displayName", "attachClosestEdge", "extractClosestEdge", "combine", "draggable", "dropTargetForElements", "preserveOffsetOnSource", "setCustomNativeDragPreview", "composeRefs", "createContext", "Primitive", "Slot", "React", "useLayoutEffect", "useMemo", "useRef", "useState", "createPortal", "composableProps", "slottable", "MOSAIC_TILE_NAME", "MosaicTileContextProvider", "useMosaicTileContext", "createContext", "MOSAIC_TILE_STATE_ATTR", "MosaicTile", "slottable", "children", "asChild", "dragHandle", "allowedEdges", "allowedEdgesProp", "location", "id", "data", "dataProp", "draggable", "draggableProp", "current", "selected", "debug", "_", "props", "forwardedRef", "Comp", "Slot", "Primitive", "div", "rootRef", "useRef", "composedRef", "composeRefs", "containerId", "eventHandler", "orientation", "scrolling", "setActiveLocation", "useMosaicContainerContext", "state", "setState", "useState", "type", "useMemo", "useLayoutEffect", "root", "handleChange", "self", "source", "closestEdge", "extractClosestEdge", "combine", "element", "undefined", "canDrag", "getInitialData", "onGenerateDragPreview", "nativeSetDragImage", "setCustomNativeDragPreview", "getOffset", "preserveOffsetOnSource", "input", "render", "container", "bounds", "getBoundingClientRect", "rect", "onDragStart", "onDrop", "dropTargetForElements", "getData", "attachClosestEdge", "canDrop", "getSourceData", "onDragEnter", "onDragLeave", "onDrag", "className", "rest", "composableProps", "classNames", "React", "role", "aria-current", "aria-selected", "ref", "createPortal", "style", "width", "height", "displayName", "DropIndicator", "NaturalDropIndicator", "dropTargetForElements", "Primitive", "Slot", "React", "useLayoutEffect", "useMemo", "useRef", "mx", "MOSAIC_PLACEHOLDER_NAME", "MOSAIC_PLACEHOLDER_ORIENTATION_ATTR", "MOSAIC_PLACEHOLDER_STATE_ATTR", "MOSAIC_PLACEHOLDER_LOCATION_ATTR", "MosaicPlaceholder", "classNames", "children", "asChild", "orientation", "location", "rootRef", "useRef", "Comp", "Slot", "Primitive", "div", "id", "containerId", "eventHandler", "scrolling", "activeLocation", "setActiveLocation", "useMosaicContainerContext", "data", "useMemo", "type", "useLayoutEffect", "root", "current", "dropTargetForElements", "element", "getData", "canDrop", "source", "getSourceData", "onDragEnter", "onDragLeave", "undefined", "onDrop", "React", "String", "role", "className", "mx", "ref", "displayName", "DROP_INDICATOR_NAME", "MosaicDropIndicator", "props", "state", "useMosaicTileContext", "closestEdge", "NaturalDropIndicator", "edge", "useComposedRefs", "useVirtualizer", "React", "forwardRef", "Fragment", "useCallback", "useEffect", "useRef", "invariant", "composable", "composableProps", "mx", "__dxlog_file", "visibleItems", "useVisibleItems", "draggable", "id", "items", "dragging", "getId", "invariant", "scrollToId", "useCallback", "targetId", "scrollIntoView", "el", "block", "behavior", "useEffect", "registerScrollTo", "composableProps", "React", "orientation", "ref", "Tile", "item", "location", "index", "current", "selected", "selectedIds", "debug", "MosaicStackInner", "useMosaicContainerContext", "MOSAIC_VIRTUAL_STACK_NAME", "count", "gap", "overscan", "onChange", "itemIndex", "virtualizer", "scrollToOffset", "offset", "Math", "style", "width", "getTotalSize", "height", "virtualItems", "div", "key", "top", "left", "start", "transform", "data", "InternalPlaceholder", "MosaicVirtualStackInner", "MosaicVirtualStack", "Symbol", "styles", "placeholder", "className", "mx", "Mosaic", "Root", "MosaicRoot", "Container", "MosaicContainer", "Tile", "MosaicTile", "Placeholder", "MosaicPlaceholder", "DropIndicator", "MosaicDropIndicator", "Stack", "MosaicStack", "VirtualStack", "MosaicVirtualStack"]
|
|
7
|
+
}
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
useMosaicRootContext,
|
|
9
9
|
useMosaicTileContext,
|
|
10
10
|
useVisibleItems
|
|
11
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-DZ5WMCI2.mjs";
|
|
12
12
|
|
|
13
13
|
// src/components/Board/Board.tsx
|
|
14
14
|
import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
|
|
@@ -259,7 +259,7 @@ import { createContext } from "@radix-ui/react-context";
|
|
|
259
259
|
import React3, { forwardRef as forwardRef3, useMemo as useMemo4, useState as useState2 } from "react";
|
|
260
260
|
import { Obj as Obj2, Ref } from "@dxos/echo";
|
|
261
261
|
import { useObject } from "@dxos/react-client/echo";
|
|
262
|
-
import { IconButton, ScrollArea, Toolbar
|
|
262
|
+
import { IconButton as IconButton2, ScrollArea, Toolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
|
|
263
263
|
import { composable, composableProps } from "@dxos/react-ui";
|
|
264
264
|
import { Menu as Menu2, createMenuAction as createMenuAction2 } from "@dxos/react-ui-menu";
|
|
265
265
|
import { mx as mx2 } from "@dxos/ui-theme";
|
|
@@ -269,7 +269,7 @@ import { translationKey as translationKey2 } from "#translations";
|
|
|
269
269
|
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
270
270
|
import React2, { forwardRef as forwardRef2, useMemo as useMemo3, useRef as useRef2, useState } from "react";
|
|
271
271
|
import { Obj } from "@dxos/echo";
|
|
272
|
-
import { Card,
|
|
272
|
+
import { Card, Icon, IconButton, Tag, useTranslation } from "@dxos/react-ui";
|
|
273
273
|
import { Menu, createMenuAction } from "@dxos/react-ui-menu";
|
|
274
274
|
import { getHashStyles } from "@dxos/ui-theme";
|
|
275
275
|
import { translationKey } from "#translations";
|
|
@@ -318,22 +318,25 @@ var BoardItemInner = /* @__PURE__ */ forwardRef2(({ classNames, data, location,
|
|
|
318
318
|
testId: "mosaicBoard.cardDragHandle"
|
|
319
319
|
}), /* @__PURE__ */ React2.createElement(Card.Title, {
|
|
320
320
|
"data-testid": "mosaicBoard.cardTitle"
|
|
321
|
-
}, label), /* @__PURE__ */ React2.createElement(
|
|
321
|
+
}, label), /* @__PURE__ */ React2.createElement(Card.Block, {
|
|
322
|
+
end: true
|
|
323
|
+
}, /* @__PURE__ */ React2.createElement(Menu.Trigger, {
|
|
322
324
|
asChild: true,
|
|
323
325
|
disabled: !items?.length
|
|
324
|
-
}, /* @__PURE__ */ React2.createElement(
|
|
326
|
+
}, /* @__PURE__ */ React2.createElement(IconButton, {
|
|
325
327
|
iconOnly: true,
|
|
326
328
|
variant: "ghost",
|
|
327
329
|
icon: "ph--dots-three-vertical--regular",
|
|
328
330
|
label: t("action-menu.label")
|
|
329
|
-
})), /* @__PURE__ */ React2.createElement(Menu.Content, {
|
|
331
|
+
}))), /* @__PURE__ */ React2.createElement(Menu.Content, {
|
|
330
332
|
items
|
|
331
333
|
})), /* @__PURE__ */ React2.createElement(Card.Row, {
|
|
332
|
-
icon: "ph--note--regular",
|
|
333
334
|
classNames: "text-description"
|
|
334
|
-
}, /* @__PURE__ */ React2.createElement(Card.
|
|
335
|
+
}, /* @__PURE__ */ React2.createElement(Card.Block, null, /* @__PURE__ */ React2.createElement(Icon, {
|
|
336
|
+
icon: "ph--note--regular"
|
|
337
|
+
})), /* @__PURE__ */ React2.createElement(Card.Text, null, description)), /* @__PURE__ */ React2.createElement(Card.Row, null, /* @__PURE__ */ React2.createElement(Card.Block, null, /* @__PURE__ */ React2.createElement(Icon, {
|
|
335
338
|
icon: "ph--tag--regular"
|
|
336
|
-
}, label && /* @__PURE__ */ React2.createElement("div", {
|
|
339
|
+
})), label && /* @__PURE__ */ React2.createElement("div", {
|
|
337
340
|
className: "shrink-0 flex gap-1 items-center text-xs"
|
|
338
341
|
}, /* @__PURE__ */ React2.createElement(Tag, {
|
|
339
342
|
palette: getHashStyles(label).hue
|
|
@@ -387,19 +390,19 @@ var BoardColumnHeader = composable(({ label, dragHandleRef, ...props }, forwarde
|
|
|
387
390
|
model.onColumnDelete,
|
|
388
391
|
t
|
|
389
392
|
]);
|
|
390
|
-
return /* @__PURE__ */ React3.createElement(Menu2.Root, null, /* @__PURE__ */ React3.createElement(
|
|
393
|
+
return /* @__PURE__ */ React3.createElement(Menu2.Root, null, /* @__PURE__ */ React3.createElement(Toolbar.Root, {
|
|
391
394
|
...composableProps(props),
|
|
392
395
|
"data-testid": "board-column-header",
|
|
393
396
|
ref: forwardedRef
|
|
394
|
-
}, /* @__PURE__ */ React3.createElement(
|
|
397
|
+
}, /* @__PURE__ */ React3.createElement(Toolbar.DragHandle, {
|
|
395
398
|
ref: dragHandleRef,
|
|
396
399
|
testId: "mosaicBoard.columnDragHandle"
|
|
397
|
-
}), /* @__PURE__ */ React3.createElement(
|
|
400
|
+
}), /* @__PURE__ */ React3.createElement(Toolbar.Text, {
|
|
398
401
|
"data-testid": "mosaicBoard.columnTitle"
|
|
399
402
|
}, label), /* @__PURE__ */ React3.createElement(Menu2.Trigger, {
|
|
400
403
|
asChild: true,
|
|
401
404
|
disabled: !columnMenuItems?.length
|
|
402
|
-
}, /* @__PURE__ */ React3.createElement(
|
|
405
|
+
}, /* @__PURE__ */ React3.createElement(Toolbar.IconButton, {
|
|
403
406
|
iconOnly: true,
|
|
404
407
|
variant: "ghost",
|
|
405
408
|
icon: "ph--dots-three-vertical--regular",
|
|
@@ -443,10 +446,10 @@ var BoardColumnFooter = /* @__PURE__ */ forwardRef3(({ classNames, data, onAdd }
|
|
|
443
446
|
const { t } = useTranslation2(translationKey2);
|
|
444
447
|
const { model } = useBoard(BOARD_COLUMN_FOOTER_NAME);
|
|
445
448
|
const handleAdd = onAdd ?? (model.onItemCreate && data ? () => void model.onItemCreate?.(data) : void 0);
|
|
446
|
-
return /* @__PURE__ */ React3.createElement(
|
|
449
|
+
return /* @__PURE__ */ React3.createElement(Toolbar.Root, {
|
|
447
450
|
classNames: mx2("rounded-b-sm border-t border-separator", classNames),
|
|
448
451
|
ref: forwardedRef
|
|
449
|
-
}, handleAdd && /* @__PURE__ */ React3.createElement(
|
|
452
|
+
}, handleAdd && /* @__PURE__ */ React3.createElement(IconButton2, {
|
|
450
453
|
"data-testid": "board-column-add-item",
|
|
451
454
|
classNames: "group-hover/column:opacity-100 md:opacity-0 transition transition-opacity duration-500",
|
|
452
455
|
variant: "ghost",
|
|
@@ -670,7 +673,7 @@ var SearchTile = /* @__PURE__ */ forwardRef5(({ data, location, current }, forwa
|
|
|
670
673
|
}, /* @__PURE__ */ React5.createElement(Card2.Root, {
|
|
671
674
|
fullWidth: true,
|
|
672
675
|
ref: forwardedRef
|
|
673
|
-
}, /* @__PURE__ */ React5.createElement(Card2.Header, null, /* @__PURE__ */ React5.createElement(Card2.
|
|
676
|
+
}, /* @__PURE__ */ React5.createElement(Card2.Header, null, /* @__PURE__ */ React5.createElement(Card2.Block, null), /* @__PURE__ */ React5.createElement(Card2.Title, null, result.label)), result.snippet && /* @__PURE__ */ React5.createElement(Card2.Body, null, /* @__PURE__ */ React5.createElement(Card2.Row, null, /* @__PURE__ */ React5.createElement(Card2.Text, {
|
|
674
677
|
variant: "description"
|
|
675
678
|
}, result.snippet))))));
|
|
676
679
|
});
|