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

package/dist/lib/browser/index.mjs

@@ -1,701 +0,0 @@
-import {
-  Focus,
-  Mosaic,
-  getSourceData,
-  styles,
-  useFocus,
-  useMosaicContainerContext,
-  useMosaicRootContext,
-  useMosaicTileContext,
-  useVisibleItems
-} from "./chunk-OBVIYZLR.mjs";
-
-// src/components/Board/Board.tsx
-import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import { createContext as createContext2 } from "@radix-ui/react-context";
-import React4, { forwardRef as forwardRef4, useRef as useRef3, useState as useState3 } from "react";
-import { ScrollArea as ScrollArea2 } from "@dxos/react-ui";
-import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
-import { JsonHighlighter as JsonHighlighter2 } from "@dxos/react-ui-syntax-highlighter";
-import { mx as mx3 } from "@dxos/ui-theme";
-
-// src/hooks/useContainerDebug.tsx
-import React, { forwardRef, useMemo, useRef } from "react";
-import { createPortal } from "react-dom";
-import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
-import { mx } from "@dxos/ui-theme";
-var useContainerDebug = (debug) => {
-  const debugRef = useRef(null);
-  return useMemo(() => {
-    if (!debug) {
-      return [
-        () => null,
-        void 0
-      ];
-    }
-    return [
-      ({ classNames }) => /* @__PURE__ */ React.createElement("div", {
-        className: mx("overflow-hidden", classNames),
-        ref: debugRef
-      }),
-      () => debugRef.current && /* @__PURE__ */ createPortal(/* @__PURE__ */ React.createElement(ContainerInfo, null), debugRef.current)
-    ];
-  }, [
-    debug,
-    debugRef
-  ]);
-};
-var CONTAINER_INFO_NAME = "ContainerInfo";
-var ContainerInfo = /* @__PURE__ */ forwardRef(({ classNames }, forwardedRef) => {
-  const { id, state, activeLocation, scrolling } = useMosaicContainerContext(CONTAINER_INFO_NAME);
-  const counter = useRef(0);
-  return /* @__PURE__ */ React.createElement(JsonHighlighter, {
-    data: {
-      id,
-      activeLocation,
-      scrolling,
-      state,
-      count: counter.current++
-    },
-    classNames: mx("text-xs", classNames),
-    ref: forwardedRef
-  });
-});
-ContainerInfo.displayName = CONTAINER_INFO_NAME;
-
-// src/hooks/useEventHandlerAdapter.ts
-import { useMemo as useMemo2 } from "react";
-import { log } from "@dxos/log";
-import { arrayMove } from "@dxos/util";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/hooks/useEventHandlerAdapter.ts";
-var useEventHandlerAdapter = ({ items, getId, get, make, onChange, ...props }) => {
-  return useMemo2(() => ({
-    ...props,
-    onTake: ({ source }, cb) => {
-      log.info("onTake", {
-        source
-      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 14, S: void 0 });
-      const mutate = (items2) => {
-        const from = items2.findIndex((item) => getId(item) === source.id);
-        if (from !== -1) {
-          items2.splice(from, 1);
-        }
-      };
-      if (onChange) {
-        onChange(mutate);
-      } else {
-        mutate(items);
-      }
-      void cb(source.data);
-    },
-    onDrop: ({ source, target }) => {
-      log.info("onDrop", {
-        source,
-        target
-      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 31, S: void 0 });
-      const mutate = (items2) => {
-        const to = target?.type === "tile" || target?.type === "placeholder" ? target.location : target?.type === "container" ? items2.length : -1;
-        const from = items2.findIndex((item) => getId(item) === source.id);
-        const insertIndex = typeof to === "number" && to >= 0 ? Math.floor(to) : -1;
-        if (insertIndex !== -1) {
-          if (from !== -1) {
-            arrayMove(items2, from, insertIndex);
-          } else {
-            items2.splice(insertIndex, 0, make(get(source.data)));
-          }
-        }
-      };
-      if (onChange) {
-        onChange(mutate);
-      } else {
-        mutate(items);
-      }
-    }
-  }), [
-    items,
-    onChange
-  ]);
-};
-
-// src/hooks/useDefaultColumnEventHandler.ts
-var useDefaultColumnEventHandler = (id, model, items) => useEventHandlerAdapter({
-  id,
-  items,
-  getId: model.getColumnId,
-  get: (data) => data,
-  make: (object) => object,
-  canDrop: ({ source }) => model.isColumn(source.data)
-});
-
-// src/components/Mosaic/extension.ts
-import { StateEffect, StateField } from "@codemirror/state";
-import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
-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;
-  };
-  const extension = [
-    dropField,
-    ViewPlugin.fromClass(class {
-      _view;
-      constructor(_view) {
-        this._view = _view;
-        views.add(_view);
-      }
-      destroy() {
-        views.delete(this._view);
-      }
-    })
-  ];
-  return {
-    extension,
-    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) {
-              const startDist = Math.abs(pos - word.from);
-              const endDist = Math.abs(pos - word.to);
-              pos = startDist < endDist ? 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) => {
-  const line = view.state.doc.lineAt(pos);
-  if (line.text.trim() === "") {
-    view.dispatch({
-      changes: {
-        from: pos,
-        insert: `
-![${event.text}](${event.url})
-`
-      },
-      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)
-});
-
-// src/components/Board/Column.tsx
-import { useAtomValue } from "@effect-atom/atom-react";
-import { createContext } from "@radix-ui/react-context";
-import React3, { forwardRef as forwardRef3, useMemo as useMemo4, useState as useState2 } from "react";
-import { Obj as Obj2, Ref } from "@dxos/echo";
-import { useObject } from "@dxos/react-client/echo";
-import { IconButton as IconButton2, ScrollArea, Toolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { composable, composableProps } from "@dxos/react-ui";
-import { Menu as Menu2, createMenuAction as createMenuAction2 } from "@dxos/react-ui-menu";
-import { mx as mx2 } from "@dxos/ui-theme";
-import { translationKey as translationKey2 } from "#translations";
-
-// src/components/Board/Item.tsx
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import React2, { forwardRef as forwardRef2, useMemo as useMemo3, useRef as useRef2, useState } from "react";
-import { Obj } from "@dxos/echo";
-import { Card, Icon, IconButton, Tag, useTranslation } from "@dxos/react-ui";
-import { Menu, createMenuAction } from "@dxos/react-ui-menu";
-import { getHashStyles } from "@dxos/ui-theme";
-import { translationKey } from "#translations";
-var BOARD_ITEM_NAME = "Board.Item";
-var BoardItemInner = /* @__PURE__ */ forwardRef2(({ classNames, data, location, debug, draggable }, forwardedRef) => {
-  const { t } = useTranslation(translationKey);
-  const rootRef = useRef2(null);
-  const composedRef = useComposedRefs(rootRef, forwardedRef);
-  const [dragHandle, setDragHandle] = useState(null);
-  const { model } = useBoard(BOARD_ITEM_NAME);
-  const column = useBoardColumn();
-  const items = useMemo3(() => 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__ */ React2.createElement(Menu.Root, null, /* @__PURE__ */ React2.createElement(Mosaic.Tile, {
-    ref: rootRef,
-    asChild: true,
-    draggable,
-    dragHandle,
-    id: data.id,
-    data,
-    location,
-    debug
-  }, /* @__PURE__ */ React2.createElement(Focus.Item, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Card.Root, {
-    classNames,
-    "data-testid": "board-item",
-    ref: composedRef,
-    onClick: (event) => event.currentTarget.focus()
-  }, /* @__PURE__ */ React2.createElement(Card.Header, null, /* @__PURE__ */ React2.createElement(Card.DragHandle, {
-    ref: setDragHandle,
-    testId: "mosaicBoard.cardDragHandle"
-  }), /* @__PURE__ */ React2.createElement(Card.Title, {
-    "data-testid": "mosaicBoard.cardTitle"
-  }, label), /* @__PURE__ */ React2.createElement(Card.Block, {
-    end: true
-  }, /* @__PURE__ */ React2.createElement(Menu.Trigger, {
-    asChild: true,
-    disabled: !items?.length
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
-    iconOnly: true,
-    variant: "ghost",
-    icon: "ph--dots-three-vertical--regular",
-    label: t("action-menu.label")
-  }))), /* @__PURE__ */ React2.createElement(Menu.Content, {
-    items
-  })), /* @__PURE__ */ React2.createElement(Card.Row, {
-    classNames: "text-description"
-  }, /* @__PURE__ */ React2.createElement(Card.Block, null, /* @__PURE__ */ React2.createElement(Icon, {
-    icon: "ph--note--regular"
-  })), /* @__PURE__ */ React2.createElement(Card.Text, null, description)), /* @__PURE__ */ React2.createElement(Card.Row, null, /* @__PURE__ */ React2.createElement(Card.Block, null, /* @__PURE__ */ React2.createElement(Icon, {
-    icon: "ph--tag--regular"
-  })), label && /* @__PURE__ */ React2.createElement("div", {
-    className: "shrink-0 flex gap-1 items-center text-xs"
-  }, /* @__PURE__ */ React2.createElement(Tag, {
-    hue: getHashStyles(label).hue
-  }, label)))))));
-});
-BoardItemInner.displayName = BOARD_ITEM_NAME;
-var BoardItem = BoardItemInner;
-
-// src/components/Board/Column.tsx
-var BOARD_COLUMN_CONTEXT_NAME = "Board.Column";
-var [BoardColumnProvider, useBoardColumnContext] = createContext(BOARD_COLUMN_CONTEXT_NAME, null);
-function useBoardColumn() {
-  const value = useBoardColumnContext(BOARD_COLUMN_CONTEXT_NAME);
-  return value?.column;
-}
-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__ */ React3.createElement(Mosaic.Tile, {
-    asChild: true,
-    location,
-    id: model.getColumnId(data),
-    data,
-    debug,
-    draggable,
-    dragHandle
-  }, /* @__PURE__ */ React3.createElement(Focus.Group, {
-    ...rest,
-    "data-testid": "board-column",
-    border: true,
-    classNames: mx2("group/column", "h-full w-full md:w-card-default-width snap-center bg-deck-surface", "overflow-hidden", classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React3.createElement(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 } = useTranslation2(translationKey2);
-  const { model } = useBoard(BOARD_COLUMN_HEADER_NAME);
-  const column = useBoardColumn();
-  const columnMenuItems = useMemo4(() => column != null && model.onColumnDelete ? [
-    createMenuAction2("delete-column", () => model.onColumnDelete?.(column), {
-      label: t("delete-menu.label"),
-      icon: "ph--trash--regular"
-    })
-  ] : [], [
-    column,
-    model.onColumnDelete,
-    t
-  ]);
-  return /* @__PURE__ */ React3.createElement(Menu2.Root, null, /* @__PURE__ */ React3.createElement(Toolbar.Root, {
-    ...composableProps(props),
-    "data-testid": "board-column-header",
-    ref: forwardedRef
-  }, /* @__PURE__ */ React3.createElement(Toolbar.DragHandle, {
-    ref: dragHandleRef,
-    testId: "mosaicBoard.columnDragHandle"
-  }), /* @__PURE__ */ React3.createElement(Toolbar.Text, {
-    "data-testid": "mosaicBoard.columnTitle"
-  }, label), /* @__PURE__ */ React3.createElement(Menu2.Trigger, {
-    asChild: true,
-    disabled: !columnMenuItems?.length
-  }, /* @__PURE__ */ React3.createElement(Toolbar.IconButton, {
-    iconOnly: true,
-    variant: "ghost",
-    icon: "ph--dots-three-vertical--regular",
-    label: t("action-menu.label")
-  })), /* @__PURE__ */ React3.createElement(Menu2.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] = useState2(null);
-  const items = useAtomValue(model.items(data));
-  return /* @__PURE__ */ React3.createElement(Mosaic.Container, {
-    ...composableProps(props),
-    asChild: true,
-    withFocus: true,
-    orientation: "vertical",
-    autoScroll: viewport,
-    eventHandler,
-    debug,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React3.createElement(ScrollArea.Root, {
-    orientation: "vertical",
-    thin: true,
-    centered: true,
-    padding: true
-  }, /* @__PURE__ */ React3.createElement(ScrollArea.Viewport, {
-    classNames: "snap-y md:snap-none",
-    ref: setViewport
-  }, /* @__PURE__ */ React3.createElement(Mosaic.Stack, {
-    items,
-    getId: model.getItemId,
-    Tile
-  }))));
-});
-BoardColumnBody.displayName = BOARD_COLUMN_BODY_NAME;
-var BOARD_COLUMN_FOOTER_NAME = "Board.Column.Footer";
-var BoardColumnFooter = /* @__PURE__ */ forwardRef3(({ classNames, data, onAdd }, forwardedRef) => {
-  const { t } = useTranslation2(translationKey2);
-  const { model } = useBoard(BOARD_COLUMN_FOOTER_NAME);
-  const handleAdd = onAdd ?? (model.onItemCreate && data ? () => void model.onItemCreate?.(data) : void 0);
-  return /* @__PURE__ */ React3.createElement(Toolbar.Root, {
-    classNames: mx2("rounded-b-sm border-t border-separator", classNames),
-    ref: forwardedRef
-  }, handleAdd && /* @__PURE__ */ React3.createElement(IconButton2, {
-    "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 = /* @__PURE__ */ forwardRef3(({ classNames, location, data, debug, draggable, Tile = BoardItem }, forwardedRef) => {
-  const { model } = useBoard(BOARD_DEFAULT_COLUMN_NAME);
-  const [DebugInfo, debugHandler] = useContainerDebug(debug);
-  const [dragHandle, setDragHandle] = useState2(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 && Obj2.isObject(item) && model.isItem(item);
-    },
-    onChange: (mutator) => updateColumn((col) => mutator(col.items))
-  });
-  return /* @__PURE__ */ React3.createElement(BoardColumnRootInner, {
-    classNames: mx2("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
-  }, /* @__PURE__ */ React3.createElement(BoardColumnHeader, {
-    label: Obj2.getLabel(data) ?? data.id,
-    dragHandleRef: setDragHandle
-  }), /* @__PURE__ */ React3.createElement(BoardColumnBody, {
-    data,
-    eventHandler,
-    debug: debugHandler,
-    Tile
-  }), /* @__PURE__ */ React3.createElement("div", {
-    className: "flex flex-col col-span-full"
-  }, /* @__PURE__ */ React3.createElement(BoardColumnFooter, {
-    data
-  }), /* @__PURE__ */ React3.createElement(DebugInfo, null)));
-});
-DefaultBoardColumn.displayName = BOARD_DEFAULT_COLUMN_NAME;
-var BoardColumn = {
-  Root: BoardColumnRoot,
-  Header: BoardColumnHeader,
-  Body: BoardColumnBody,
-  Footer: BoardColumnFooter
-};
-
-// src/components/Board/Board.tsx
-var BOARD_NAME = "Board";
-var [BoardContextProvider, useBoardContext] = createContext2(BOARD_NAME);
-function useBoard(displayName) {
-  return useBoardContext(displayName ?? BOARD_NAME);
-}
-var BOARD_ROOT_NAME = "Board.Root";
-var BoardRootInner = ({ model, children }) => {
-  return /* @__PURE__ */ React4.createElement(BoardContextProvider, {
-    model
-  }, children);
-};
-BoardRootInner.displayName = BOARD_ROOT_NAME;
-var BoardRoot = BoardRootInner;
-var BOARD_CONTENT_NAME = "Board.Content";
-var BoardContentInner = composable2(({ id: _id, debug, eventHandler, Tile = DefaultBoardColumn, ...props }, forwardedRef) => {
-  const { model } = useBoardContext(BOARD_CONTENT_NAME);
-  const [DebugInfo, debugHandler] = useContainerDebug(debug);
-  const [viewport, setViewport] = useState3(null);
-  const items = useAtomValue2(model.columns);
-  return /* @__PURE__ */ React4.createElement("div", {
-    ...composableProps2(props, {
-      classNames: "dx-container"
-    }),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React4.createElement(Focus.Group, {
-    asChild: true,
-    orientation: "horizontal"
-  }, /* @__PURE__ */ React4.createElement(Mosaic.Container, {
-    asChild: true,
-    withFocus: true,
-    orientation: "horizontal",
-    autoScroll: viewport,
-    eventHandler,
-    debug: debugHandler
-  }, /* @__PURE__ */ React4.createElement(ScrollArea2.Root, {
-    orientation: "horizontal",
-    centered: true,
-    padding: true
-  }, /* @__PURE__ */ React4.createElement(ScrollArea2.Viewport, {
-    classNames: "snap-mandatory snap-x md:snap-none",
-    ref: setViewport
-  }, /* @__PURE__ */ React4.createElement(Mosaic.Stack, {
-    items,
-    getId: model.getColumnId,
-    Tile,
-    debug
-  }))))), /* @__PURE__ */ React4.createElement(DebugInfo, null));
-});
-BoardContentInner.displayName = BOARD_CONTENT_NAME;
-var BoardContent = BoardContentInner;
-var BOARD_PLACEHOLDER_NAME = "Board.Placeholder";
-var BoardPlaceholder = (props) => {
-  return /* @__PURE__ */ React4.createElement(Mosaic.Placeholder, {
-    ...props,
-    classNames: styles.placeholder.root
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: mx3("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 = /* @__PURE__ */ forwardRef4(({ classNames }, forwardedRef) => {
-  const { containers, dragging } = useMosaicRootContext(BOARD_DEBUG_NAME);
-  const counter = useRef3(0);
-  return /* @__PURE__ */ React4.createElement(JsonHighlighter2, {
-    data: {
-      containers,
-      dragging,
-      count: counter.current++
-    },
-    classNames: mx3("text-xs", classNames),
-    ref: forwardedRef
-  });
-});
-BoardDebug.displayName = BOARD_DEBUG_NAME;
-var Board = {
-  Root: BoardRoot,
-  Content: BoardContent,
-  Column: BoardColumn,
-  Item: BoardItem,
-  Placeholder: BoardPlaceholder,
-  Debug: BoardDebug
-};
-
-// src/components/SearchStack/SearchStack.tsx
-import React5, { forwardRef as forwardRef5, useCallback, useMemo as useMemo5, useState as useState4 } from "react";
-import { Card as Card2, ScrollArea as ScrollArea3 } from "@dxos/react-ui";
-import { composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
-var SearchStack = composable3(({ results = [], currentId, onAction, ...props }, forwardedRef) => {
-  const [viewport, setViewport] = useState4(null);
-  const items = useMemo5(() => 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__ */ React5.createElement(Focus.Group, {
-    asChild: true,
-    ...composableProps3(props),
-    onKeyDown: handleKeyDown,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React5.createElement(Mosaic.Container, {
-    asChild: true,
-    withFocus: true,
-    currentId,
-    onCurrentChange: handleCurrentChange
-  }, /* @__PURE__ */ React5.createElement(ScrollArea3.Root, {
-    orientation: "vertical",
-    padding: true,
-    centered: true,
-    thin: true
-  }, /* @__PURE__ */ React5.createElement(ScrollArea3.Viewport, {
-    ref: setViewport
-  }, /* @__PURE__ */ React5.createElement(Mosaic.VirtualStack, {
-    Tile: SearchTile,
-    classNames: "my-2",
-    gap: 8,
-    items,
-    draggable: false,
-    getId: (item) => item.result.id,
-    getScrollElement: () => viewport,
-    estimateSize: () => 100
-  })))));
-});
-SearchStack.displayName = "SearchStack";
-var SearchTile = /* @__PURE__ */ forwardRef5(({ data, location, current }, forwardedRef) => {
-  const { result } = data;
-  const { setCurrentId } = useMosaicContainerContext("SearchTile");
-  const handleCurrentChange = useCallback(() => {
-    setCurrentId(result.id);
-  }, [
-    result.id,
-    setCurrentId
-  ]);
-  return /* @__PURE__ */ React5.createElement(Mosaic.Tile, {
-    asChild: true,
-    classNames: "dx-hover dx-current",
-    id: result.id,
-    data,
-    location,
-    current
-  }, /* @__PURE__ */ React5.createElement(Focus.Item, {
-    asChild: true,
-    current,
-    onCurrentChange: handleCurrentChange
-  }, /* @__PURE__ */ React5.createElement(Card2.Root, {
-    fullWidth: true,
-    ref: forwardedRef
-  }, /* @__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, {
-    variant: "description"
-  }, result.snippet))))));
-});
-SearchTile.displayName = "SearchTile";
-export {
-  Board,
-  BoardDebug,
-  Focus,
-  Mosaic,
-  SearchStack,
-  dropHandler,
-  getSourceData,
-  styles as mosaicStyles,
-  useBoard,
-  useBoardColumn,
-  useContainerDebug,
-  useDefaultColumnEventHandler,
-  useEventHandlerAdapter,
-  useFocus,
-  useMosaicRootContext as useMosaic,
-  useMosaicContainerContext as useMosaicContainer,
-  useMosaicTileContext as useMosaicTile,
-  useVisibleItems
-};
-//# sourceMappingURL=index.mjs.map