@dxos/react-ui-mosaic 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/dist/lib/browser/index.mjs

@@ -1,99 +1,632 @@
 import {
-  Card,
   Focus,
-  Image,
   Mosaic,
-  Stack,
-  VirtualStack,
-  dropHandler,
+  getSourceData,
   styles,
-  styles2,
-  styles3,
-  useContainerContext,
-  useContainerDebug,
-  useEventHandlerAdapter,
   useFocus,
-  useRootContext,
-  useTileContext,
+  useMosaicContainerContext,
+  useMosaicRootContext,
+  useMosaicTileContext,
   useVisibleItems
-} from "./chunk-UMBPEG4F.mjs";
+} from "./chunk-UTD5AWW5.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 { 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";
 
-// src/components/Card/CardDragPreview.tsx
-import React from "react";
+// 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 { mx } from "@dxos/ui-theme";
-var CardDragPreviewRoot = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "p-2"
-  }, children);
+var useContainerDebug = (debug) => {
+  const debugRef = useRef(null);
+  return useMemo(() => {
+    if (!debug) {
+      return [
+        () => null,
+        void 0
+      ];
+    }
+    return [
+      ({ classNames }) => /* @__PURE__ */ React.createElement("div", {
+        role: "none",
+        className: mx("overflow-hidden", classNames),
+        ref: debugRef
+      }),
+      () => debugRef.current && /* @__PURE__ */ createPortal(/* @__PURE__ */ React.createElement(ContainerInfo, null), debugRef.current)
+    ];
+  }, [
+    debug,
+    debugRef
+  ]);
 };
-var CardDragPreviewContent = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: mx(styles.root, "ring-focusLine ring-neutralFocusIndicator")
-  }, children);
+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, {
+    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
+      }, {
+        F: __dxlog_file,
+        L: 61,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      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
+      }, {
+        F: __dxlog_file,
+        L: 78,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      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 CardDragPreview = {
-  Root: CardDragPreviewRoot,
-  Content: CardDragPreviewContent
+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-surface)";
+                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/Layout/Layout.tsx
-import React2, { forwardRef, useMemo } from "react";
-import { mx as mx2 } from "@dxos/ui-theme";
-var Main = /* @__PURE__ */ forwardRef(({ classNames, children, role, toolbar, statusbar }, forwardedRef) => {
-  const style = useMemo(() => ({
-    gridTemplateRows: [
-      toolbar && "var(--toolbar-size)",
-      "1fr",
-      statusbar && "var(--statusbar-size)"
-    ].filter(Boolean).join(" ")
-  }), [
-    toolbar,
-    statusbar
+// 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 { 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 { 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"
+      }
+    }
+  }
+];
+
+// 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 { 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";
+var BOARD_ITEM_NAME = "Board.Item";
+var BoardItemInner = /* @__PURE__ */ forwardRef2(({ classNames, data, location, debug }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  const rootRef = useRef2(null);
+  const composedRef = useComposedRefs(rootRef, forwardedRef);
+  const dragHandleRef = useRef2(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
   ]);
-  return /* @__PURE__ */ React2.createElement("div", {
-    ref: forwardedRef,
-    role: role ?? "none",
-    style,
-    className: mx2("bs-full is-full grid grid-cols-[100%] overflow-hidden", toolbar && "[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator", classNames)
-  }, children);
+  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,
+    dragHandle: dragHandleRef.current,
+    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.Toolbar, null, /* @__PURE__ */ React2.createElement(Card.DragHandle, {
+    ref: dragHandleRef,
+    testId: "mosaicBoard.cardDragHandle"
+  }), /* @__PURE__ */ React2.createElement(Card.Title, {
+    "data-testid": "mosaicBoard.cardTitle"
+  }, label), /* @__PURE__ */ React2.createElement(Menu.Trigger, {
+    asChild: true,
+    disabled: !items?.length
+  }, /* @__PURE__ */ React2.createElement(Toolbar.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, {
+    icon: "ph--note--regular",
+    classNames: "text-description"
+  }, /* @__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
+  }, label)))))));
 });
-var Container = /* @__PURE__ */ forwardRef(({ classNames, children, role, scrollable }, forwardedRef) => {
-  return /* @__PURE__ */ React2.createElement("div", {
-    ref: forwardedRef,
-    role: role ?? "none",
-    className: mx2("grid bs-full", scrollable ? "overflow-y-auto" : "overflow-hidden", classNames)
-  }, children);
+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, dragHandleRef: dragHandleRefProp, ...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
+  }, /* @__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(translationKey);
+  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(Toolbar2.Root, {
+    ...composableProps(props),
+    "data-testid": "board-column-header",
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement(Toolbar2.DragHandle, {
+    ref: dragHandleRef,
+    testId: "mosaicBoard.columnDragHandle"
+  }), /* @__PURE__ */ React3.createElement(Toolbar2.Text, {
+    "data-testid": "mosaicBoard.columnTitle"
+  }, label), /* @__PURE__ */ React3.createElement(Menu2.Trigger, {
+    asChild: true,
+    disabled: !columnMenuItems?.length
+  }, /* @__PURE__ */ React3.createElement(Toolbar2.IconButton, {
+    iconOnly: true,
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    label: t("action-menu.label")
+  })), /* @__PURE__ */ React3.createElement(Menu2.Content, {
+    items: columnMenuItems
+  })));
 });
-var Flex = ({ children, classNames, role, column, grow }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
-    role: role ?? "none",
-    className: mx2("flex", column && "flex-col", grow && "flex-1 overflow-hidden", classNames)
+BoardColumnHeader.displayName = BOARD_COLUMN_HEADER_NAME;
+var BOARD_COLUMN_BODY_NAME = "Board.Column.Body";
+var BoardColumnBody = composable(({ data, eventHandler, Tile = BoardItem, debug, ...props }, forwardedRef) => {
+  const { model } = useBoard(BOARD_COLUMN_BODY_NAME);
+  const [viewport, setViewport] = useState(null);
+  const items = useAtomValue(model.items(data));
+  return /* @__PURE__ */ 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(translationKey);
+  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, {
+    classNames: mx2("rounded-b-sm border-t border-separator", classNames),
+    ref: forwardedRef
+  }, handleAdd && /* @__PURE__ */ React3.createElement(IconButton, {
+    "data-testid": "board-column-add-item",
+    classNames: "group-hover/column:opacity-100 md:opacity-0 transition transition-opacity duration-500",
+    variant: "ghost",
+    icon: "ph--plus--regular",
+    iconOnly: true,
+    label: t("add-item.label"),
+    onClick: handleAdd
+  }));
+});
+BoardColumnFooter.displayName = BOARD_COLUMN_FOOTER_NAME;
+var BOARD_DEFAULT_COLUMN_NAME = "Board.DefaultColumn";
+var DefaultBoardColumn = /* @__PURE__ */ forwardRef3(({ classNames, location, data, debug, Tile = BoardItem }, forwardedRef) => {
+  const { model } = useBoard(BOARD_DEFAULT_COLUMN_NAME);
+  const [DebugInfo, debugHandler] = useContainerDebug(debug);
+  const dragHandleRef = useRef3(null);
+  const [column, updateColumn] = useObject(data);
+  const eventHandler = useEventHandlerAdapter({
+    id: model.getColumnId(data),
+    items: column?.items ?? [],
+    getId: (ref) => ref.target?.id ?? ref.dxn.toString(),
+    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,
+    dragHandleRef,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement(BoardColumnHeader, {
+    label: Obj2.getLabel(data) ?? data.id,
+    dragHandleRef
+  }), /* @__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
+  }), /* @__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);
 };
-var Layout = {
-  Main,
-  Container,
-  Flex
+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] = useState2(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 = useRef4(0);
+  return /* @__PURE__ */ React4.createElement(Json2.Data, {
+    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
 };
 export {
-  Card,
-  CardDragPreview,
+  Board,
+  BoardDebug,
   Focus,
-  Image,
-  Layout,
   Mosaic,
-  Stack,
-  VirtualStack,
-  styles as cardStyles,
   dropHandler,
-  styles2 as focusStyles,
-  styles3 as mosaicStyles,
+  getSourceData,
+  styles as mosaicStyles,
+  useBoard,
+  useBoardColumn,
   useContainerDebug,
+  useDefaultColumnEventHandler,
   useEventHandlerAdapter,
   useFocus,
-  useRootContext as useMosaic,
-  useContainerContext as useMosaicContainer,
-  useTileContext as useMosaicTile,
+  useMosaicRootContext as useMosaic,
+  useMosaicContainerContext as useMosaicContainer,
+  useMosaicTileContext as useMosaicTile,
   useVisibleItems
 };
 //# sourceMappingURL=index.mjs.map