@dxos/react-ui-mosaic 0.8.4-main.fcfe5033a5 → 0.9.0

package/dist/lib/node-esm/index.mjs

@@ -9,20 +9,21 @@ import {
   useMosaicRootContext,
   useMosaicTileContext,
   useVisibleItems
-} from "./chunk-Y4LG7O67.mjs";
+} from "./chunk-DVJLDZLE.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 useRef4, useState as useState2 } from "react";
+import React4, { forwardRef as forwardRef4, useRef as useRef3, useState as useState3 } from "react";
 import { ScrollArea as ScrollArea2 } from "@dxos/react-ui";
-import { Json as Json2 } from "@dxos/react-ui-syntax-highlighter";
-import { composable as composable2, composableProps as composableProps2, mx as mx3 } from "@dxos/ui-theme";
+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 { Json } from "@dxos/react-ui-syntax-highlighter";
+import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
 import { mx } from "@dxos/ui-theme";
 var useContainerDebug = (debug) => {
   const debugRef = useRef(null);
@@ -35,7 +36,6 @@ var useContainerDebug = (debug) => {
     }
     return [
       ({ classNames }) => /* @__PURE__ */ React.createElement("div", {
-        role: "none",
         className: mx("overflow-hidden", classNames),
         ref: debugRef
       }),
@@ -50,7 +50,7 @@ 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(Json.Data, {
+  return /* @__PURE__ */ React.createElement(JsonHighlighter, {
     data: {
       id,
       activeLocation,
@@ -75,12 +75,7 @@ var useEventHandlerAdapter = ({ items, getId, get, make, onChange, ...props }) =
     onTake: ({ source }, cb) => {
       log.info("onTake", {
         source
-      }, {
-        F: __dxlog_file,
-        L: 61,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~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) {
@@ -98,12 +93,7 @@ var useEventHandlerAdapter = ({ items, getId, get, make, onChange, ...props }) =
       log.info("onDrop", {
         source,
         target
-      }, {
-        F: __dxlog_file,
-        L: 78,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      }, { "~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);
@@ -247,7 +237,7 @@ var dropField = StateField.define({
               toDOM() {
                 const dom = document.createElement("span");
                 dom.className = "cm-drop-cursor";
-                dom.style.borderLeft = "2px solid var(--color-accent-surface)";
+                dom.style.borderLeft = "2px solid var(--color-accent-bg)";
                 dom.style.display = "inline-block";
                 dom.style.height = "1em";
                 dom.style.verticalAlign = "middle";
@@ -267,40 +257,29 @@ var dropField = StateField.define({
 // 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, useRef as useRef3, useState } from "react";
+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, ScrollArea, Toolbar as Toolbar2, 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 { composable, composableProps, mx as mx2 } from "@dxos/ui-theme";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-mosaic";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "action-menu.label": "Actions",
-        "add-item.label": "Add item",
-        "delete-menu.label": "Delete"
-      }
-    }
-  }
-];
+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 } from "react";
+import React2, { forwardRef as forwardRef2, useMemo as useMemo3, useRef as useRef2, useState } from "react";
 import { Obj } from "@dxos/echo";
 import { Card, Tag, Toolbar, 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 }, forwardedRef) => {
+var BoardItemInner = /* @__PURE__ */ forwardRef2(({ classNames, data, location, debug, draggable }, forwardedRef) => {
   const { t } = useTranslation(translationKey);
   const rootRef = useRef2(null);
   const composedRef = useComposedRefs(rootRef, forwardedRef);
-  const dragHandleRef = useRef2(null);
+  const [dragHandle, setDragHandle] = useState(null);
   const { model } = useBoard(BOARD_ITEM_NAME);
   const column = useBoardColumn();
   const items = useMemo3(() => column != null && model.onItemDelete ? [
@@ -322,7 +301,8 @@ var BoardItemInner = /* @__PURE__ */ forwardRef2(({ classNames, data, location,
   return /* @__PURE__ */ React2.createElement(Menu.Root, null, /* @__PURE__ */ React2.createElement(Mosaic.Tile, {
     ref: rootRef,
     asChild: true,
-    dragHandle: dragHandleRef.current,
+    draggable,
+    dragHandle,
     id: data.id,
     data,
     location,
@@ -334,8 +314,8 @@ var BoardItemInner = /* @__PURE__ */ forwardRef2(({ classNames, data, location,
     "data-testid": "board-item",
     ref: composedRef,
     onClick: (event) => event.currentTarget.focus()
-  }, /* @__PURE__ */ React2.createElement(Card.Toolbar, null, /* @__PURE__ */ React2.createElement(Card.DragHandle, {
-    ref: dragHandleRef,
+  }, /* @__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"
@@ -355,7 +335,6 @@ var BoardItemInner = /* @__PURE__ */ forwardRef2(({ classNames, data, location,
   }, /* @__PURE__ */ React2.createElement(Card.Text, null, description)), /* @__PURE__ */ React2.createElement(Card.Row, {
     icon: "ph--tag--regular"
   }, label && /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
     className: "shrink-0 flex gap-1 items-center text-xs"
   }, /* @__PURE__ */ React2.createElement(Tag, {
     palette: getHashStyles(label).hue
@@ -372,17 +351,16 @@ function useBoardColumn() {
   return value?.column;
 }
 var BOARD_COLUMN_ROOT_NAME = "Board.Column.Root";
-var BoardColumnRootInner = composable(({ classNames, children, location, data, debug, dragHandleRef: dragHandleRefProp, ...rest }, forwardedRef) => {
+var BoardColumnRootInner = composable(({ classNames, children, location, data, debug, draggable, dragHandle, ...rest }, forwardedRef) => {
   const { model } = useBoard(BOARD_COLUMN_ROOT_NAME);
-  const internalRef = useRef3(null);
-  const dragHandleRef = dragHandleRefProp ?? internalRef;
   return /* @__PURE__ */ React3.createElement(Mosaic.Tile, {
     asChild: true,
     location,
     id: model.getColumnId(data),
     data,
     debug,
-    dragHandle: dragHandleRef.current
+    draggable,
+    dragHandle
   }, /* @__PURE__ */ React3.createElement(Focus.Group, {
     ...rest,
     "data-testid": "board-column",
@@ -397,7 +375,7 @@ 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(translationKey);
+  const { t } = useTranslation2(translationKey2);
   const { model } = useBoard(BOARD_COLUMN_HEADER_NAME);
   const column = useBoardColumn();
   const columnMenuItems = useMemo4(() => column != null && model.onColumnDelete ? [
@@ -435,7 +413,7 @@ 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 [viewport, setViewport] = useState2(null);
   const items = useAtomValue(model.items(data));
   return /* @__PURE__ */ React3.createElement(Mosaic.Container, {
     ...composableProps(props),
@@ -463,7 +441,7 @@ var BoardColumnBody = composable(({ data, eventHandler, Tile = BoardItem, debug,
 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(translationKey);
+  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(Toolbar2.Root, {
@@ -481,15 +459,15 @@ var BoardColumnFooter = /* @__PURE__ */ forwardRef3(({ classNames, data, onAdd }
 });
 BoardColumnFooter.displayName = BOARD_COLUMN_FOOTER_NAME;
 var BOARD_DEFAULT_COLUMN_NAME = "Board.DefaultColumn";
-var DefaultBoardColumn = /* @__PURE__ */ forwardRef3(({ classNames, location, data, debug, Tile = BoardItem }, forwardedRef) => {
+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 dragHandleRef = useRef3(null);
+  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.dxn.toString(),
+    getId: (ref) => ref.target?.id ?? ref.uri,
     get: (refOrObj) => Ref.isRef(refOrObj) ? refOrObj.target : refOrObj,
     make: (object) => Ref.make(object),
     canDrop: ({ source }) => {
@@ -502,18 +480,18 @@ var DefaultBoardColumn = /* @__PURE__ */ forwardRef3(({ classNames, location, da
     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,
-    dragHandleRef,
+    draggable,
+    dragHandle,
     ref: forwardedRef
   }, /* @__PURE__ */ React3.createElement(BoardColumnHeader, {
     label: Obj2.getLabel(data) ?? data.id,
-    dragHandleRef
+    dragHandleRef: setDragHandle
   }), /* @__PURE__ */ React3.createElement(BoardColumnBody, {
     data,
     eventHandler,
     debug: debugHandler,
     Tile
   }), /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
     className: "flex flex-col col-span-full"
   }, /* @__PURE__ */ React3.createElement(BoardColumnFooter, {
     data
@@ -545,7 +523,7 @@ 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] = useState2(null);
+  const [viewport, setViewport] = useState3(null);
   const items = useAtomValue2(model.columns);
   return /* @__PURE__ */ React4.createElement("div", {
     ...composableProps2(props, {
@@ -591,8 +569,8 @@ 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 = useRef4(0);
-  return /* @__PURE__ */ React4.createElement(Json2.Data, {
+  const counter = useRef3(0);
+  return /* @__PURE__ */ React4.createElement(JsonHighlighter2, {
     data: {
       containers,
       dragging,
@@ -611,11 +589,99 @@ var Board = {
   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.IconBlock, 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,